/* La entrada (D-27): la primera pantalla de la portada, antes de la barra y de
   los carteles. Texto cerrado por el director el 2026-09-04 y modelo «Escudo»
   de las tres maquetas: papel arriba con el nombre del pueblo en azul y el filo
   del sol, quién está con las pastillas de las etiquetas, y una banda de color
   por sección. Hoja aparte, como `legal.css`: la de la portada estaba a 1,2 KB
   del presupuesto de §7. Va precacheada (`sw.js`).
   Ninguna letra baja de 1rem (D-25) y el amarillo nunca es texto (D-12). */
/* D-54: cuelgan de `.bandas` y no de `.entrada`: dos de ellas se fueron al pie. */
.entrada { background: var(--papel); }
.bandas > div { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-4); }
.bandas h1, .bandas h2, .bandas p { margin: 0; }
.bandas h1, .bandas h2 { text-wrap: balance; }

/* El titular: «La Zarza» en el azul del rótulo, «a la vista.» en tinta, y el
   lema sobre el filo del sol. */
.entrada-abre { padding-top: var(--s-6); gap: var(--s-4); }
.entrada-de { font-size: 1rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--casa); }
.entrada h1 { font-size: 3rem; line-height: 1; letter-spacing: -.02em; color: var(--casa); }
.entrada h1 em { font-style: normal; color: var(--tinta); }
.entrada .lema { font-size: 1.5rem; font-weight: 700; line-height: 1.2; padding-top: var(--s-3); border-top: 5px solid var(--ambar); }
/* D-113: qué es, en una frase, bajo el lema. */
.entrada .que-es { font-size: 1.15rem; color: var(--tinta-suave); }

/* EL FRISO (D-44): el titular a la izquierda y las pinturas del abrigo en lo
   que sobra, NUNCA debajo. Dos columnas de un flex, no una encima de otra:
   con la lámina bajo el texto el azul de la casa fallaba el 4,5:1 sobre buena
   parte de ella, y dónde cae el texto lo decide el ancho. */
.entrada .titulo-fila { display: flex; align-items: flex-start; gap: var(--s-3); }
.entrada .titulo-fila h1 { width: max-content; max-width: 100%; flex: 0 0 auto; }
/* El corte se FUERZA: sin esto lo decide la letra de cada móvil —no se descarga
   ninguna— y el hueco cambia solo (140 px con Helvetica, 151 con Roboto). Y
   saca de la ecuación el `text-wrap: balance` de arriba, que era la causa. */
.entrada h1 em { display: block; }
/* A la derecha, pegada al margen: a 1280 el hueco son 876 px y la imagen
   estirada a ese ancho deja de ser una marca y pasa a ser un cartel. */
.entrada .hueco { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
/* «Contenida»: manda el ALTO. Topa en los 96 px de las dos líneas del titular,
   que está a 3rem FIJOS, así que mide 116 × 96 en un móvil de 390 y también en
   un portátil: no crece nunca ni mueve un píxel. De ahí un solo fichero a
   232 px, 2× exacto, sin `srcset`. */
.entrada .hueco img { display: block; width: auto; max-width: 100%; max-height: 96px; border-radius: var(--r-sm); }
/* Por debajo de 360 no queda hueco que valga —46 px a 320—: se RETIRA, no se
   encoge. Una mancha de 46 px no dice nada y le roba aire al titular. */
@media (max-width: 359px) { .entrada .hueco { display: none; } }

/* La línea que cierra el lema. Eran las ocho pastillas de D-30 con este pie
   debajo; D-33 se quedó solo con el pie, porque decía lo mismo que ellas y no
   enumeraba a nadie. Va dentro del bloque del titular, no en uno propio.
   D-69 SE LA LLEVA: decía lo que se gana ESTANDO; su hueco es de lo que se
   gana ENTRANDO: las familias de abajo. */

/* Las bandas: una por sección, cada una de su color. */
.bandas .banda h2 { font-size: 1.6rem; line-height: 1.15; }
.bandas .banda h2 small { display: block; margin-bottom: var(--s-1); font-size: 1rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
/* Sin botones de salto: se baja de continuo. Los dos únicos botones de la página
   son los de WhatsApp —pedir la clave y pasarla—, y van a todo lo ancho. */
.bandas .banda .btn-ancho { align-self: stretch; display: flex; }
/* D-42: las tres bandas —carteles, convocatorias y tablón— son una sola. EL
   FILO NO ES ADORNO: `--fondo` es el MISMO token que usa `.banda-comparte`, así
   que sin él la banda y «Comparte» dan 1.00:1 entre sí y se leen como un único
   bloque gris en cuanto la tarjeta de instalar no está —y no está para quien ya
   la guardó ni para quien dijo «Ahora no». Los dos filos de 5px en `--casa`
   suben esa costura a 7.07:1. En ámbar da 1,18:1 y no se ve (D-12).
   D-54: el pie entra aquí, y allí pesa MÁS: `--fondo` ES el color del `body`,
   así que sin filo «Comparte» da 1,00:1 y deja de ser una banda.
   D-69: se va la banda de arriba, no la regla: al pie pesa más. */
.bandas-pie {
  background: var(--fondo);
  border-top: 5px solid var(--casa);
  border-bottom: 5px solid var(--casa);
}
/* «Comparte» (D-33): entre el tablón y «Tu sitio». Cierra lo que la página le DA
   al vecino y deja «Tu sitio» abriendo lo que le PIDE al comercio. NINGUNO DE SUS
   DOS BOTONES ES VERDE: con «Pedir mi clave» pegado justo debajo, dos botones
   verdes iguales a todo lo ancho no distinguen nada. El verde se queda en la
   acción que trae carteles, que es la de abajo.
   D-41: de los dos, «Guárdalo en tu móvil» va RELLENO del azul de la casa
   (`btn-primary`, que ya existe en `tokens.css`) y el de WhatsApp se queda de
   contorno. Antes eran gemelos y no ganaba ninguno. El relleno se eligió
   MEDIDO, no por gusto: 8,18:1 contra el papel, frente a 1,18:1 del borde
   ámbar que se propuso primero —menos incluso que el 1,66:1 del contorno azul
   de hoy—, que en escala de grises desaparece. El sol del escudo decora
   (D-12); no sostiene lo que hay que ver.
   D-47: el relleno no se mueve; se mueve el ORDEN —el relleno pasa a ir
   PRIMERO—, y el orden es del marcado. El porqué, en `pagina.js`. */
.bandas .banda-comparte { background: var(--fondo); }
.bandas .banda-invita { background: var(--valido-suave); }
.bandas .banda-invita h2 { color: var(--valido); }
/* D-78 y D-119: la banda de las fotos, rellena de GRAFITO y no del azul de
   la casa: debajo le sigue pegada la `.barra` azul, y azul con azul se leía
   como una sola mancha de dos pisos. El filo (los 5 px en `--ambar` de
   `.entrada .lema`) se queda. El botón va RELLENO de papel: uno de contorno
   sería grafito con una raya. Por qué: decisions.md. */
/* El verde de la loma del escudo (`--valido`, D-25), con su canto hondo. Era
   el color de la pantalla del comercio; desde D-28 ya no lo es, y aquí se
   queda solo como el verde de WhatsApp. */
.bandas .btn-verde { background: var(--valido); border-color: #25550F; color: var(--papel); }

/* D-172: las dos puertas (/libro y /oficial) en una fila, debajo de «Hoy»;
   las familias de D-69 viven en /libro. 52 px: un dedo acierta. */
.entrada > section { display: grid; padding: 0 var(--s-4) var(--s-5); }
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: var(--s-3) var(--s-4); }
/* Tecla de la casa: sobre papel, un borde fino no se veía (el director, 16-10). */
.puertas a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-3); border-radius: 14px; background: var(--casa); border-bottom: 3px solid var(--casa-hondo); color: var(--papel); text-decoration: none; }
.puertas a:active { background: var(--casa-hondo); }
.puertas .globo { box-shadow: 0 0 0 2px var(--papel); }
.puertas b { font-size: 1.05rem; }
.puertas .cuenta { display: inline-flex; gap: .3em; align-items: center; }

/* D-103 y D-122: La Tira, con el molde de la banda de /mundo. */
.banda-tira { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--papel); border: 1.5px solid var(--tinta); color: var(--tinta); text-decoration: none; }
.banda-tira .mini { position: relative; flex: none; }
.banda-tira img { display: block; width: 52px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.banda-tira i { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--papel); background: var(--ambar); font-style: normal; font-size: 1rem; line-height: 22px; text-align: center; }
.banda-tira > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.banda-tira small { font-size: 1rem; font-weight: 800; }
.banda-tira b { font-size: 1.1rem; overflow-wrap: anywhere; }
.banda-tira em { font-style: normal; font-size: 1rem; color: var(--tinta-suave); }
/* «Hoy»: en escaparate.css desde D-220. */

/* D-191: Telegram, la tecla de arriba a todo el ancho y la línea de «Ofertas y planes». */
.puertas .tg, .puertas .ancha { grid-column: 1 / -1; justify-content: center; }
/* D-215: el recorte de periódico (lavanda, no el amarillo de AEMET) */
.puertas .nt-recorte { grid-column: 1 / -1; background: #ECE7F4; border: 3px solid var(--tinta); border-radius: 4px; box-shadow: 5px 5px 0 var(--tinta); margin-right: 5px; }
.puertas .nt-recorte a { background: none; border: 0; border-radius: 0; color: var(--tinta); }
.nt-recorte .noticias > b { font: 700 1.5rem Georgia, "Times New Roman", serif; }
.nt-recorte .cuenta b { background: var(--tinta); color: #ECE7F4; padding: 2px 9px; border-radius: 3px; }
.nt-titulares { list-style: none; margin: 0; padding: 0 var(--s-3); border-top: 2px solid var(--tinta); }
.nt-titulares li + li { border-top: 1px solid rgba(34,27,38,.2); }
.puertas .nt-titulares a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 9px 0; }
.nt-titulares a b { font-weight: 600; line-height: 1.3; }
.nt-titulares small { font-size: 1rem; color: #4a4250; }
.ofertas-tg { margin: var(--s-2) 0 0; font-size: 1rem; }
.ofertas-tg a { color: var(--ambar-tinta); font-weight: 700; }