/* AvoHass — lectura.css (Lote 9, 2026-09-03): plantilla .lectura (preguntas de gen_preguntas.py; guías y
   fichas en el Lote 10). Solo lo propio de leer: tokens y componentes viven en styles.css. Sin hex, sin
   .rail, sin !important, nada bajo --t-xs; ≤ 7 KB. Sustituye a preguntas.css. Las .gal-* NO están
   aquí: viven en galeria.css, la tercera hoja de las 29 de /plagas-enfermedades/. */

/* == Columna == 72ch: desde ~75 caracteres el ojo pierde el renglón */
.lectura{max-width:calc(72ch + 2 * var(--s-4));margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-8)}
.lectura-ancho{max-width:1040px}
.lectura .migas{margin-bottom:var(--s-4)}

/* == Progreso de lectura == 2 px bajo la cabecera, scroll-driven (ni rAF ni listener); sin soporte no existe */
.progreso-lectura{display:none}
@supports (animation-timeline:scroll()){
.progreso-lectura{display:block;position:fixed;top:var(--cab-h);left:0;width:100%;height:2px;z-index:39;pointer-events:none;background:var(--verde-oscuro);transform-origin:0 50%;transform:scaleX(0);animation:progreso-lectura linear both;animation-timeline:scroll(root)}
@keyframes progreso-lectura{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* == Cabecera == el h1 baja con la longitud (.largo > 60 caracteres, .muy-largo > 100): a --t-h1
   una pregunta de 130 letras eran nueve renglones en el teléfono */
.lectura h1{margin:0 0 var(--s-4)}
.lectura h1.largo{font-size:var(--t-h2)}
.lectura h1.muy-largo{font-size:clamp(1.45rem,1.1rem + 1.5vw,2.05rem);line-height:1.18}
/* Marcador fino y renglón a renglón (clone): tres líneas de amarillo pleno gritan */
.lectura h1 .marca-amarilla{--marca-h:.26em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lectura-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-5);font-size:var(--t-sm);color:var(--tinta-suave)}
/* El verde del rótulo solo en la caja verde: con [data-sem] hereda el color del veredicto */
.lectura .esencial:not([data-sem]) .rotulo{color:var(--verde-oscuro)}
.lectura .esencial .rotulo{display:block;margin-bottom:4px;font:600 var(--t-xs)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}

/* == Cuerpo == */
.lectura-cuerpo{font-size:var(--t-base);line-height:1.6}
.lectura-cuerpo p{margin:0 0 var(--s-4)}
.lectura-cuerpo h2{font-size:var(--t-h3);margin:var(--s-6) 0 var(--s-3);scroll-margin-top:calc(var(--cab-h) + var(--s-4))}
.lectura-cuerpo :is(ul,ol){padding-left:22px;margin:0 0 var(--s-4)}
.lectura-cuerpo li{margin-bottom:var(--s-2)}
/* Ancla «#» del h2 (guías), visible al pasar o enfocar */
.lectura-cuerpo h2 .ancla{margin-left:.35em;font:600 var(--t-sm)/1 var(--sans);color:var(--verde-oscuro);text-decoration:none;opacity:0;transition:opacity var(--d-1)}
.lectura-cuerpo h2:hover .ancla,.lectura-cuerpo h2 .ancla:focus-visible{opacity:1}

/* == Fuentes y notas == el acordeón «Fuentes (n)» nace abierto en preguntas */
.lectura-citas{margin:0;padding-left:22px;font-size:var(--t-sm);line-height:1.5}
.lectura-citas li{margin-bottom:var(--s-2)}
.lectura-nota{margin:var(--s-4) 0 0;max-width:66ch;font-size:var(--t-xs);color:var(--tinta-suave)}
.lectura .banner{margin:var(--s-4) 0 0}

/* == CTA invertida == solo lo que el sistema no da: el margen del párrafo y el botón secundario, que
   sobre verde profundo necesita borde y letra crema (el color del texto ya lo pone .tarjeta-inv p) */
.lectura-cta{margin-top:var(--s-6)}
.lectura-cta h2{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.lectura-cta p{margin:0 0 var(--s-4)}
.lectura-cta-botones{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.lectura-cta .btn-secundario{border-color:var(--crema-inv);color:var(--crema-inv)}
.lectura-cta .btn-secundario:hover{background:rgba(255,255,255,.1)}

/* == Relacionadas y anterior/siguiente == la flecha baja al padding de la compacta */
.lectura-rel{margin-top:var(--s-7)}
.lectura-rel h2{font-size:var(--t-h3);margin-bottom:var(--s-4)}
.lectura-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s-3)}
:is(.lectura-rejilla,.lectura-prevnext) .tarjeta-interactiva{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-md);font-weight:500;line-height:1.4;color:var(--verde-texto)}
:is(.lectura-rejilla,.lectura-prevnext) .tarjeta-interactiva::after{right:var(--s-4);bottom:var(--s-4)}
:is(.lectura-rejilla,.lectura-prevnext) small{font:600 var(--t-xs)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.lectura-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-6)}
.lectura-prevnext .ant{padding-left:var(--s-7);padding-right:var(--s-4)}
.lectura-prevnext .ant::after{content:"←";right:auto;left:var(--s-4)}
.lectura-prevnext .sig{grid-column:2;align-items:flex-end;text-align:right}

/* == Índice lateral (guías, L10) == sticky desde 1001 px; .con-indice reparte artículo + índice */
.lectura-indice{display:none}
@media (min-width:1001px){
.lectura.con-indice{display:grid;grid-template-columns:minmax(0,72ch) 220px;gap:var(--s-7);max-width:calc(72ch + 220px + var(--s-7) + 2 * var(--s-4))}
.lectura-indice{display:block;position:sticky;top:calc(var(--cab-h) + var(--s-5));align-self:start;font-size:var(--t-sm)}
.lectura-indice ol{list-style:none;margin:0;padding:0 0 0 var(--s-3);border-left:2px solid rgba(47,93,58,.14)}
.lectura-indice a{display:block;padding:6px 0;color:var(--tinta-suave);text-decoration:none}
.lectura-indice a:hover,.lectura-indice a[aria-current="true"]{color:var(--verde-texto)}
}

/* == Hub /preguntas/ == banda (floracion-huerto-cafe-reunion a 16:6, centrada en la calle), buscador y chips */
.lectura-banda{margin:0 0 var(--s-6);aspect-ratio:16/6;border-radius:var(--r-lg);overflow:hidden;background:var(--sup-inv)}
.lectura-banda img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.lectura-buscar{display:grid;gap:var(--s-3);margin:0 0 var(--s-5)}
.lectura-buscar .campo{max-width:560px}
.lectura-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.lectura-chips .num{font-weight:500;opacity:.8}
.lectura-cat{margin:var(--s-6) 0 0;scroll-margin-top:calc(var(--cab-h) + var(--s-4))}
.lectura-cat h2{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:var(--borde);font-size:var(--t-h3)}
.lectura-cat h2 .num{font:500 var(--t-sm)/1 var(--sans);color:var(--tinta-suave)}
.lectura-lista{margin:0;padding-left:22px;columns:2;column-gap:var(--s-6)}
.lectura-lista li{margin-bottom:var(--s-2);line-height:1.4;break-inside:avoid}
.lectura-lista a{color:var(--verde-oscuro)}

@media (max-width:640px){.lectura-lista{columns:1}}
@media (max-width:560px){
.lectura{padding:var(--s-5) var(--s-4) var(--s-7)}
.lectura-cta-botones .btn{width:100%}
.lectura-prevnext{grid-template-columns:1fr}.lectura-prevnext .sig{grid-column:auto}
.lectura-banda{aspect-ratio:16/9;border-radius:var(--r-md)}
}

/* == Impresión == solo respuesta y fuentes */
@media print{
.progreso-lectura,.lectura-cta,.lectura-rel,.lectura-prevnext,.lectura-buscar,.lectura-banda{display:none}
.lectura{max-width:none;padding:0}
}