/*
 * HERO DE LA PORTADA — LA SILUETA DE TEXAS SOBRE NEGRO.
 * =============================================================================
 *
 * QUÉ CAMBIA RESPECTO A LA VERSIÓN ANTERIOR
 * El hero era un degradado con una aurora azul encima y una tipografía de
 * revista (Fraunces). Dos cosas estaban mal. La aurora no decía nada del sitio:
 * podía ser el hero de una aseguradora. Y la serif contradecía la marca, que es
 * una condensada pesada de equipo deportivo —la del logo—, no una editorial.
 * Ahora el hero ES el logo: la silueta del estado con la estrella solitaria,
 * flotando en tres dimensiones sobre negro.
 *
 * LAS CUATRO CAPAS (y su z-index)
 *   0 · fondo negro + resplandor .... .lt-hero  y  .lt-hero::before
 *   1 · silueta de respaldo (SVG) ... .lt-hero::after      ← se ve SIEMPRE…
 *   2 · lienzo WebGL ................ .lt-hero__lienzo     ← …salvo cuando este arranca
 *   3 · velo de legibilidad ......... .lt-hero__velo
 *   4 · contenido ................... .lt-hero__contenido
 *
 * EL RESPALDO NO ES UN PLAN B
 * assets/js/hero-texas.js NO arranca si el navegador no tiene WebGL, si el
 * sistema pide menos movimiento, si el teléfono declara 4 GB o menos, o si está
 * activo el «Ahorro de datos». En este proyecto eso no es un caso raro: el
 * público llega desde WhatsApp, con datos contados y teléfonos modestos. Así que
 * la silueta en SVG de `.lt-hero::after` está pensada para verse ACABADA por sí
 * sola —degradado de marca y resplandor incluidos— y no como el hueco donde
 * debería haber algo. Cuando el WebGL sí arranca, el script añade la clase
 * `lt-hero--vivo` y el SVG se funde mientras aparece el lienzo. Es el único
 * contrato entre el CSS y el JS: una clase. El script no escribe ni un estilo.
 *
 * POR QUÉ TODO CUELGA DE `.lt-hero.lt-hero`
 * portada.css todavía define el hero viejo con selectores de una sola clase
 * (`.lt-hero`, `.lt-hero__titulo`, `.lt-hero__bajada`…), especificidad 0,1,0.
 * Repetir la clase da 0,2,0 sin ensuciar el marcado ni depender del modificador
 * `--aurora`, que puede desaparecer del PHP cualquier día. Esta hoja gana
 * siempre, se encole antes o después. Es un seguro contra el orden de carga.
 * → Al integrar: borrar de portada.css los bloques «1 — Hero y buscador» y
 *   «2 — Accesos rápidos», que quedan muertos.
 *
 * CONTRASTE — MEDIDO CON LA FÓRMULA DE WCAG 2.1, NO ESTIMADO A OJO.
 * (AA pide 4,5:1 en texto normal; AAA, 7:1. El «negro» de la marca no es el
 *  negro puro, así que los números se calcularon contra #0B0D10 de verdad.)
 *   blanco #FFFFFF sobre negro #0B0D10 ............... 19,5:1  AAA  titular y bajada
 *   plata  #C7CDD6 sobre negro ....................... 12,2:1  AAA  textos de apoyo
 *   cielo  #4DA3FF sobre negro ........................ 7,4:1  AAA  antetítulo, enlaces
 *   cielo  #4DA3FF sobre marino #10214A ............... 5,98:1 AA   sobre la banda azul
 *   NEGRO  #0B0D10 sobre cielo #4DA3FF ................ 7,4:1  AAA  ← el botón «Buscar»
 *   NEGRO  sobre el cielo aclarado del hover #6FB6FF .. 9,1:1  AAA
 *   blanco #FFFFFF sobre cielo #4DA3FF ................ 2,6:1  FALLA ← PROHIBIDO. No
 *                                              aparece en esta hoja ni una sola vez.
 *   tinta  #0B0D10 sobre blanco (campo) .............. 19,5:1  AAA
 *   gris   #5A5F66 sobre blanco (marcador) ............ 6,4:1  AA
 *
 * VERDE: CERO. Ni uno. Ni el de WhatsApp: los botones de WhatsApp del sitio van
 * en azul cielo con texto negro y el icono en monocromo. Regla del dueño, y
 * además la que sale mejor parada en contraste.
 */

/* ==================================================================== */
/* 0 — FICHAS LOCALES                                                   */
/*                                                                      */
/* Los cinco colores salen del logo, no de una paleta inventada. Se     */
/* declaran aquí, dentro del propio hero, y no se leen de tokens.css a  */
/* pelo: el hero es la primera pantalla del sitio y no puede quedar a   */
/* merced de que otra hoja se haya actualizado o no. Donde tokens.css   */
/* ya tiene el valor bueno se usa var() con respaldo; donde todavía     */
/* lleva el color viejo (tokens.css define --noche #071324, que NO es   */
/* el negro de la marca) se escribe el valor de la marca y punto.       */
/* ==================================================================== */

.lt-hero.lt-hero {
  --h-negro:  #0B0D10;   /* fondo dominante */
  --h-marino: #10214A;   /* banda alterna, profundidad */
  --h-cielo:  #4DA3FF;   /* color de ACCIÓN — la palabra «TEXAS» del logo */
  --h-blanco: #FFFFFF;
  --h-plata:  #C7CDD6;   /* la estrella del logo es cromada */

  /* Tinta sobre azul cielo. Es una ficha propia y no `var(--h-negro)`
     directamente para que quede escrito que esto es una DECISIÓN de
     contraste (7,4:1) y no una coincidencia de color que alguien pueda
     «arreglar» pasándola a blanco. */
  --h-sobre-cielo: #0B0D10;

  --h-gris-campo: #5A5F66;                      /* marcador de posición, 6,4:1 sobre blanco */
  --h-linea:      rgba(199, 205, 214, 0.28);    /* plata al 28 %: bordes sobre negro */
  --h-linea-viva: rgba(77, 163, 255, 0.55);     /* borde en foco/hover */

  /* Una sola familia en todo el hero. La marca es condensada pesada; una
     serif aquí sería otra marca. El respaldo es una pila de condensadas
     reales: si Archivo no carga, el titular sigue siendo estrecho y duro
     en vez de saltar a una Helvetica ancha que descuadra la línea. */
  --h-fuente: 'Archivo', 'Archivo Narrow', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --h-radio:   14px;
  --h-pildora: 999px;
  --h-suave:   220ms cubic-bezier(.22, .61, .36, 1);
}

/* ==================================================================== */
/* 1 — LA CAJA DEL HERO                                                 */
/* ==================================================================== */

.lt-hero.lt-hero {
  position: relative;
  isolation: isolate;          /* el z-index de las capas se queda AQUÍ dentro y no
                                  pelea con el encabezado fijo ni con los modales */

  /*
   * POR ENCIMA DE LA CINTA DE TITULARES — 2026-08-18.
   *
   * Va de la mano de haber quitado el recorte de aqui abajo. Sin recorte, la
   * lista de sugerencias sobresale del hero; y como `.lt-hero` y
   * `.lt-cinta-hero` son las dos `position: relative` SIN z-index, entre
   * iguales manda el orden del documento y la cinta —que va despues— se pintaba
   * encima. La lista dejaba de estar cortada pero seguia sin verse.
   *
   * 1 Y NO UN NUMERO GRANDE: solo hay que ganarle a un hermano con z-index
   * automatico. El encabezado fijo esta en 100 y tiene que seguir mandando,
   * porque con la lista abierta se tiene que poder usar el menu.
   */
  z-index: 1;

  /*
   * SIN RECORTE, Y ES DELIBERADO — 2026-08-18.
   *
   * Aqui habia `overflow: hidden`. Cortaba la lista de sugerencias del buscador
   * 120px antes de su final: el dueno lo describio exacto, «el popup de busqueda
   * sale mocho». Medido en produccion: la caja mide 385px de alto y la seccion
   * termina 120px antes.
   *
   * NO ERA FALTA DE SITIO EN LA LISTA. Las ocho sugerencias caben —`scrollHeight`
   * y `clientHeight` median lo mismo—; era esta linea recortandolas.
   *
   * QUE CONTENIA, capa por capa, antes de quitarlo:
   *   · `.lt-hero__video`  `inset: 0` + `object-fit: cover` — `cover` recorta
   *     dentro de la caja del elemento, no se sale;
   *   · `::before` (fulgor) `inset: 0` — no se sale;
   *   · `::after` (silueta de Texas) lleva `drop-shadow(0 0 60px ...)`, que si
   *     puede pintar fuera de su caja, pero la silueta va centrada
   *     (`background-position: 52% 48%`, 520px como mucho) y su halo no llega
   *     al borde de la seccion;
   *   · `.lt-hero__lienzo` — la misma caja acotada que la silueta.
   *
   * Comprobado ademas en el navegador con y sin recorte: el documento sigue
   * midiendo 1440 de ancho (o sea, no aparece barra horizontal) y el borde
   * inferior del hero se ve igual.
   *
   * SI ALGUN DIA SE ANADE UNA CAPA QUE SE SALGA —un degradado desbordado, una
   * pieza rotada— el recorte NO vuelve aqui: iria en un envoltorio propio de las
   * capas decorativas, o la lista volveria a salir mocha.
   */
  display: flex;
  align-items: center;
  min-height: 92vh;
  padding: clamp(96px, 12vh, 150px) 0 clamp(64px, 9vh, 104px);
  background-color: var(--h-negro);
  color: var(--h-blanco);
  font-family: var(--h-fuente);
}

/* svh = «small viewport height»: la altura de la ventana CON la barra de
   direcciones desplegada. Con vh a secas, en iOS y Android el hero mide de más
   al cargar y el buscador —lo único que el visitante ha venido a usar— nace
   fuera de pantalla. Se pone después de la regla en vh para que sirva de mejora
   progresiva: quien no entienda svh se queda con vh, que funciona. */
@supports ( height: 100svh ) {
  .lt-hero.lt-hero {
    min-height: 92svh;
  }
}

/* --- El vídeo de fondo ----------------------------------------------
 *
 * Hill Country al atardecer, DEBAJO de todo. Ver inc/hero.php y
 * assets/js/video-hero.js.
 *
 * `z-index: 0` y primero en el DOM: por debajo del resplandor (que lo tiñe),
 * de la silueta y del velo. El orden de capas del hero, de atrás a delante,
 * queda asi:
 *
 *     0 · este video          <- textura y movimiento
 *     0 · ::before            <- resplandor azul que lo tiñe
 *     1 · lienzo / silueta    <- el mapa de Texas
 *     2 · velo                <- el suelo oscuro que sostiene el contraste
 *     3 · contenido           <- titular, buscador, accesos
 *
 * APENAS SE VE, Y ESA ES LA IDEA. Entre la opacidad de aqui y el velo de mas
 * abajo, del video solo llegan el movimiento del agua y la silueta de las
 * colinas. Si se subiera hasta verse bien, el titular blanco perderia el
 * contraste que el velo existe para garantizar.
 */
.lt-hero.lt-hero .lt-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* `cover` recorta lo que sobre en vez de deformar. Un fondo estirado se nota
     en el horizonte, que en este plano es una linea recta muy visible. */
  object-fit: cover;
  pointer-events: none;

  /*
   * Arranca invisible y aparece cuando el video ya esta reproduciendo: lo marca
   * el JS con `--vivo`. Sin eso se ve el salto del poster al primer fotograma,
   * que aunque sean casi identicos produce un parpadeo.
   *
   * El poster se sigue viendo mientras tanto: es el atributo `poster` del
   * propio <video>, que se pinta aunque el elemento este a opacidad cero... no.
   * Precisamente por eso la opacidad de partida NO es cero sino 0.34: en los
   * casos en que el video no llega a cargarse —movil, poco movimiento, ahorro
   * de datos— lo que queda es el poster, y tiene que verse.
   *
   * El recorrido de esta cifra: se monto al 42 % y se veia la fotografia, que
   * no era la idea; se bajo al 24 % y el dueno lo pidio «un poco mas». 30/34 es
   * el punto donde el rio y las colinas se leen sin que el fondo compita con el
   * titular. Por encima de ~40 % el velo deja de bastar y hay que empezar a
   * oscurecerlo, que es cambiar dos cosas en vez de una.
   */
  opacity: .30;
  transition: opacity 900ms ease;

  /*
   * EL VIDEO SE TINE DE AZUL. NO ES UN CAPRICHO DE COLOR.
   *
   * El plano es un atardecer: naranjas, ambares y dorados. La paleta del sitio
   * es fria —negro, marino, azul cielo— y el choque se notaba aunque el video
   * estuviera al 30 %: quedaba un fondo calido bajo una interfaz fria, que es
   * la definicion de que dos cosas no van juntas.
   *
   * COMO SE HACE, PORQUE LA CADENA PARECE ARBITRARIA Y NO LO ES. Cada filtro
   * deshace o prepara al siguiente, y el orden importa:
   *
   *   grayscale(1)      borra el color original. Sin esto, el naranja pelearia
   *                     con el tinte y saldria un marron sucio.
   *   sepia(1)          vuelve a meter color, pero UNO SOLO y conocido: un tono
   *                     calido uniforme. Es el truco: pasar de «muchos colores»
   *                     a «un color», que ya se puede girar.
   *   hue-rotate(178deg) gira ese tono hasta el azul. 178 y no 180 porque el
   *                     sepia no parte exactamente del naranja puro.
   *   saturate(2.4)     el giro deja el azul deslavado; esto le devuelve cuerpo.
   *   brightness(.92)   compensa que saturate aclara.
   *
   * Es el metodo estandar de duotono con CSS y no cuesta nada: son filtros que
   * la GPU aplica de una pasada, sin elementos extra ni capas de mezcla.
   *
   * SE MANTIENE LA LUZ DEL PLANO. El sol sigue siendo la zona clara y el puente
   * la oscura, asi que la profundidad no se pierde: lo unico que cambia es de
   * que color es la luz.
   */
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(.92);
}

/* Ya esta reproduciendo: sube un poco, pero muy poco. */
.lt-hero.lt-hero .lt-hero__video--vivo { opacity: .34; }

/* Sin video no hay nada que animar: el poster se queda quieto y visible. */
@media (prefers-reduced-motion: reduce) {
  .lt-hero.lt-hero .lt-hero__video { transition: none; }
}

/* El resplandor. Va SIEMPRE, con lienzo o sin él: es lo que impide que el negro
   se lea como «la imagen no ha cargado». Dos elipses de azul muy diluido, una
   detrás de la silueta y otra al pie del texto para que la columna izquierda no
   quede flotando en el vacío. */
.lt-hero.lt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient( 46% 52% at 72% 42%, rgba( 77, 163, 255, 0.22 ), transparent 68% ),
    radial-gradient( 60% 45% at 12% 88%, rgba( 16, 33, 74, 0.85 ), transparent 72% );
}

/* ==================================================================== */
/* 2 — LA SILUETA: RESPALDO EN SVG Y LIENZO WEBGL                       */
/*                                                                      */
/* Los dos ocupan EXACTAMENTE la misma caja. Así, al relevarse, la       */
/* figura no salta ni cambia de tamaño: solo se cruzan las opacidades.   */
/* ==================================================================== */

.lt-hero.lt-hero::after,
.lt-hero.lt-hero .lt-hero__lienzo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: min( 58%, 880px );
  height: 100%;
  pointer-events: none;        /* el ratón atraviesa: nunca tapa un enlace */
}

/*
 * EL RESPALDO. La silueta va como SVG en data-URI —no como <img>— por tres
 * razones: no cuesta una petición de red más en la primera pantalla, no puede
 * dar 404, y al ser vectorial se ve nítida en cualquier pantalla.
 *
 * El trazado sale del MISMO array de latitud/longitud que usa hero-texas.js
 * (se generó proyectándolo, no dibujándolo a mano), así que el respaldo y la
 * pieza 3D son la misma Texas: no pueden discrepar.
 *
 * El degradado va de azul cielo arriba-izquierda a marino abajo-derecha para
 * coincidir con la luz clave del shader, que entra por arriba a la izquierda.
 * Si fuera al revés, al arrancar el WebGL la luz «saltaría» de lado.
 */
.lt-hero.lt-hero::after {
  content: '';
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 947'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.15' y1='0' x2='0.7' y2='1'%3E%3Cstop offset='0' stop-color='%234DA3FF'/%3E%3Cstop offset='0.45' stop-color='%231D3F7E'/%3E%3Cstop offset='1' stop-color='%2310214A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M273.9,0.0L506.5,0.0L506.5,174.1L534.8,187.5L567.7,212.7L586.8,233.3L628.9,219.0L663.4,233.3L720.7,236.0L743.7,240.5L766.6,233.3L797.2,251.3L843.2,260.2L873.8,236.0L919.7,255.7L962.5,256.6L962.5,312.3L962.5,403.8L977.0,439.7L1000.0,477.4L988.5,511.5L988.5,556.4L978.6,592.2L977.0,612.0L935.0,623.7L908.2,646.1L862.3,682.0L816.4,708.9L781.9,731.3L743.7,758.3L724.6,798.6L709.3,852.5L720.7,906.3L724.6,946.7L690.1,937.7L636.6,910.8L583.0,906.3L548.6,852.5L544.8,798.6L506.5,744.8L468.2,699.9L445.3,655.1L399.4,614.7L353.5,605.7L311.4,641.6L288.4,673.0L254.0,659.5L215.8,632.6L169.9,622.8L143.1,574.3L116.3,524.9L78.0,484.6L39.8,453.2L6.9,423.5L0.0,404.7L272.4,403.8Z' fill='url(%23g)'/%3E%3Cpath d='M679.4,475.0L698.3,533.1L759.3,533.1L709.9,569.0L728.8,627.0L679.4,591.1L630.0,627.0L648.9,569.0L599.5,533.1L660.6,533.1Z' fill='%23C7CDD6'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-position: 52% 48%;
  background-size: min( 78%, 520px ) auto;
  /* El halo que despega la silueta del negro. drop-shadow sigue la FORMA del
     SVG (box-shadow seguiría la caja rectangular y se notaría el rectángulo). */
  filter: drop-shadow( 0 0 60px rgba( 77, 163, 255, 0.28 ) );
  opacity: 1;
  transition: opacity 520ms ease;
}

.lt-hero.lt-hero .lt-hero__lienzo {
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}

/* El relevo. Solo ocurre cuando hero-texas.js ha compilado, subido la malla y
   medido el lienzo: la clase se pone en el último momento, así que no hay
   ventana de negro entre que se va uno y llega el otro. */
.lt-hero.lt-hero--vivo::after {
  opacity: 0;
}

.lt-hero.lt-hero--vivo .lt-hero__lienzo {
  opacity: 1;
}

/*
 * EL LIENZO COMO ATAJO AL SELECTOR DE CATEGORÍAS.
 *
 * Por defecto el lienzo tiene `pointer-events: none` (regla de arriba): es
 * decoración y el ratón lo atraviesa. Esta clase la pone hero-texas.js, y SOLO
 * cuando ha encontrado en la sección un <button> real al que delegar el clic.
 * Ese orden es la garantía de accesibilidad: si el botón no existe, la clase no
 * llega, el lienzo sigue siendo intraspasable para el puntero y nadie ve un
 * cursor de mano sobre algo que no hace nada.
 *
 * El cursor de mano es la mitad visual de la señal; la otra mitad la pone el
 * WebGL al pasar por encima (los arcos se avivan y los nodos brillan más).
 * Ninguna de las dos sustituye al botón, que es lo que anuncia la acción al
 * teclado y al lector de pantalla.
 */
.lt-hero.lt-hero--clicable .lt-hero__lienzo {
  pointer-events: auto;
  cursor: pointer;
  /* En móvil el lienzo ocupa la mitad superior del hero: sin esto, arrastrar el
     dedo sobre la figura para bajar la página quedaría capturado por el
     elemento y el visitante creería que el sitio se ha quedado colgado.
     `manipulation` además le quita el retardo de 300 ms del doble toque. */
  touch-action: manipulation;
}

/* ==================================================================== */
/* 3 — EL VELO                                                          */
/*                                                                      */
/* Es lo que sostiene los números de contraste de la cabecera. Sin él,   */
/* el barrido de luz del metal puede pasar por detrás de la bajada y     */
/* dejarla en 3:1 durante dos segundos. El velo pone un suelo oscuro     */
/* FIJO bajo la columna de texto y se disuelve hacia la derecha, donde   */
/* está la figura y no hay nada que leer.                               */
/* ==================================================================== */

.lt-hero.lt-hero .lt-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /*
   * EL VELO PROTEGE EL TEXTO, NO TAPA EL DIBUJO.
   *
   * La primera versión llegaba al 95 % de negro sobre el lado izquierdo y se
   * comía la mitad del estado: el azul salía lavado y la estrella, gris. El
   * dueño lo dijo claro — «que los colores no se difuminen tanto con el
   * overlay, sino que se vea más intenso el mapa azul y la estrella blanca».
   *
   * Se corrige acortando el velo en vez de aclararlo: sigue siendo opaco
   * DEBAJO del texto (0,92 en el borde izquierdo, que es donde vive el
   * titular y donde el contraste tiene que estar garantizado) pero se apaga
   * mucho antes —al 42 % del ancho en vez de al 68 %—, así que la silueta
   * queda entera al descubierto. Es la diferencia entre proteger la lectura
   * y esconder lo único que hace memorable la portada.
   */
  background:
    linear-gradient( 100deg,
      rgba( 11, 13, 16, 0.92 ) 0%,
      rgba( 11, 13, 16, 0.62 ) 22%,
      rgba( 11, 13, 16, 0 ) 42% ),
    linear-gradient( to top, rgba( 11, 13, 16, 0.55 ) 0%, transparent 26% );
}

/*
 * Y una sombra propia bajo la silueta, para que el estado no flote sobre un
 * plano vacío. Va en el resplandor de fondo y no en el modelo: una sombra
 * pintada en WebGL costaría un segundo pase de render para algo que el CSS
 * resuelve gratis, y el público de este sitio va justo de batería.
 */
.lt-hero.lt-hero::before {
  background:
    radial-gradient( 46% 52% at 72% 42%, rgba( 77, 163, 255, 0.30 ), transparent 68% ),
    radial-gradient( 30% 14% at 72% 74%, rgba( 0, 0, 0, 0.85 ), transparent 70% ),
    radial-gradient( 60% 45% at 12% 88%, rgba( 16, 33, 74, 0.85 ), transparent 72% );
}

/* ==================================================================== */
/* 4 — COMPOSICIÓN DEL CONTENIDO                                        */
/* ==================================================================== */

.lt-hero.lt-hero .lt-hero__contenido {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var( --contenedor, 1240px );
  margin-inline: auto;
  padding-inline: clamp( 20px, 5vw, 48px );
  display: grid;
  /*
   * UNA columna que SÍ puede encoger. Sin esta línea la columna implícita se
   * dimensiona a `auto`, que en una rejilla equivale a max-content: el ancho
   * del titular sin partir. Medido en un teléfono de 390px, la columna salía a
   * 956px y el titular, el buscador y los accesos se iban fuera de la pantalla
   * por la derecha.
   *
   * `minmax(0, 1fr)` y no `1fr` a secas: el mínimo por defecto de una pista de
   * rejilla es `auto`, no cero, así que `1fr` sola sigue sin poder bajar del
   * tamaño de su contenido. El 0 explícito es lo que autoriza a encoger.
   */
  grid-template-columns: minmax( 0, 1fr );
  gap: clamp( 28px, 4vh, 44px );
  justify-items: start;
}

/*
 * Y lo mismo dentro de cada hijo: un elemento de rejilla o de flex arranca con
 * `min-width: auto`, que le impide ser más estrecho que su contenido. El
 * titular en condensada mayúscula es una sola palabra larguísima para el motor
 * de layout; sin este cero, se niega a partir y arrastra a sus hermanos.
 */
.lt-hero.lt-hero .lt-hero__contenido > * {
  min-width: 0;
  max-width: 100%;
}

/*
 * EL CONTENEDOR NO SE TRAGA EL CLIC DEL MAPA.
 *
 * En movil el lienzo va arriba y el texto debajo, sin solaparse, asi que pulsar
 * la figura funcionaba. En escritorio NO: este contenedor mide los 1240px del
 * ancho maximo y va en z-index 3, o sea por ENCIMA del lienzo, aunque su mitad
 * derecha este vacia. Un `elementFromPoint` en el centro del mapa devolvia este
 * div, no el canvas — el clic nunca llegaba a la figura.
 *
 * Es el fallo clasico de una maqueta a dos columnas donde una capa de texto se
 * extiende por debajo de la ilustracion: no se ve, no da error y solo se nota
 * porque «el mapa no hace nada».
 *
 * `pointer-events: none` en el contenedor y `auto` en sus hijos deja pasar el
 * puntero por el hueco vacio y lo devuelve en cuanto toca contenido de verdad.
 * Al ponerlo en el hijo se restaura para TODO su interior, asi que los enlaces,
 * el buscador y los botones siguen funcionando sin tocarlos uno a uno.
 */
.lt-hero.lt-hero .lt-hero__contenido { pointer-events: none; }
.lt-hero.lt-hero .lt-hero__contenido > * { pointer-events: auto; }

/* El boton de categorias va en posicion absoluta y NO es hijo directo del
   contenedor, asi que la regla de arriba no le llega: se le devuelve aparte. */
.lt-hero.lt-hero .lt-hero__disparador { pointer-events: auto; }

/* El titular tiene que poder partir en cualquier punto si hace falta: en 390px
   «¿QUÉ NECESITAS ENCONTRAR HOY?» no cabe de otra forma. */
.lt-hero.lt-hero .lt-hero__titulo {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* El texto ocupa poco más de media reja a propósito: la mitad derecha es de la
   silueta. 34rem son ~62 caracteres por línea en la bajada, que es la medida
   cómoda de lectura; más ancho y el ojo se pierde al volver del salto. */
.lt-hero.lt-hero .lt-hero__texto {
  max-width: 34rem;
}

/* --- Antetítulo ------------------------------------------------------ */

.lt-hero.lt-hero .lt-hero__antetitulo {
  margin: 0 0 18px;
  color: var( --h-cielo );
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Titular --------------------------------------------------------- */

/*
 * ARCHIVO VARIABLE, PESO 800 Y ANCHO 75.
 *
 * Se piden con `font-weight` y `font-stretch`, NO con `font-variation-settings`.
 * Parece lo mismo y no lo es: font-variation-settings pisa los ejes a pelo y el
 * navegador pierde la capacidad de elegir un recurso alternativo, así que si
 * Archivo no carga, el titular se queda en el peso normal de la fuente de
 * respaldo —fino y ancho— justo en la línea más importante del sitio. Con las
 * propiedades de alto nivel, el respaldo recibe «negrita» y «estrecha» y hace
 * lo que puede, que es exactamente lo que se quiere.
 *
 * ATENCIÓN — hace falta tocar functions.php: hoy se pide solo el eje de peso
 * (`Archivo:wght@400..700`), sin el de ancho y sin llegar a 800. Ver la nota
 * del final de esta hoja.
 */
.lt-hero.lt-hero .lt-hero__titulo {
  margin: 0 0 20px;
  color: var( --h-blanco );
  font-family: var( --h-fuente );
  font-size: clamp( 2.6rem, 6vw, 4.6rem );
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.98;            /* una condensada pesada en mayúsculas aguanta
                                   poco aire: a 1.2 el titular se desarma */
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;           /* reparte las líneas; si el navegador no lo
                                   entiende, simplemente lo ignora */
}

/* La palabra resaltada del titular. En azul cielo sobre negro son 7,4:1 (AAA):
   se destaca por COLOR, no por tamaño, así que la línea no pierde su ritmo. */
.lt-hero.lt-hero .lt-hero__realce {
  color: var( --h-cielo );
}

/* --- Bajada ---------------------------------------------------------- */

.lt-hero.lt-hero .lt-hero__bajada {
  margin: 0 0 clamp( 26px, 3.5vh, 38px );
  max-width: 30rem;
  color: var( --h-plata );
  font-size: clamp( 1rem, 1.35vw, 1.15rem );
  font-weight: 400;
  font-stretch: 100%;           /* la bajada NO va condensada: el ancho estrecho
                                   es para titulares, no para leer párrafos */
  line-height: 1.55;
}

/* ==================================================================== */
/* 5 — EL BUSCADOR                                                      */
/*                                                                      */
/* Es la razón de ser de esta pantalla. Todo lo demás decora; esto se    */
/* usa. Por eso es la pieza más grande y la única con fondo claro: en    */
/* una pantalla negra, lo blanco es donde se mira primero.               */
/* ==================================================================== */

/*
 * DOS FILAS, NO TRES COLUMNAS.
 *
 * Antes el campo, el selector de ciudad y el boton se repartian una sola fila,
 * y el campo se quedaba con lo que sobraba: en el ancho real de la caja eso
 * eran unos 300px, sitio para tres palabras. Se lee como un buscador de
 * juguete al lado del titular.
 *
 * Ahora el campo se lleva una fila ENTERA para el solo y el selector y el boton
 * bajan a la segunda. La caja mide lo mismo que siempre —34rem, la medida de la
 * columna de texto— y el campo pasa de 300 a 528px sin que nada crezca.
 *
 * `grid-template-areas` en vez de contar columnas: con nombres se lee de un
 * vistazo que el campo ocupa las dos, y cambiar el reparto no obliga a recontar
 * `grid-column` en tres reglas distintas.
 */
.lt-hero.lt-hero .lt-hero__buscador {
  display: grid;
  /*
   * DOS COLUMNAS IGUALES, no `1fr auto`. Con `auto` el boton pedia solo su
   * ancho de texto y el selector se quedaba topado a 11rem, asi que entre los
   * dos sobraba un hueco muerto en mitad de la fila. A mitad y mitad la fila se
   * llena sola y las dos piezas se leen como un par.
   */
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'campo  campo'
    'ciudad enviar';
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  padding: 8px;
  background: rgba( 255, 255, 255, 0.06 );
  border: 1px solid var( --h-linea );

  /*
   * EL RADIO DE LA CAJA ES EL DE DENTRO MAS EL RELLENO. NO ES UNA PASTILLA.
   *
   * Tenia 999px, igual que el campo y el boton, y por eso se veia raro: dos
   * esquinas concentricas solo quedan paralelas si la de fuera es exactamente
   * la de dentro MAS la separacion entre ambas. Con el mismo radio en las dos,
   * la exterior se curva antes y el hueco entre bordes se estrecha en las
   * esquinas — el ojo lo detecta aunque no sepa nombrarlo.
   *
   * Con una sola fila el fallo se disimulaba porque la caja era casi tan alta
   * como el campo. Al partirla en dos filas la caja se hizo el doble de alta,
   * su radio de 999px la convirtio en un estadio enorme y la diferencia se
   * volvio evidente.
   *
   * 35px = 27 (la mitad de los 54 de alto del campo, que es lo que vale su
   * pastilla) + 8 de relleno. Es una cuenta, no un numero elegido a ojo: si
   * cambia el relleno o el alto del campo, hay que rehacerla.
   */
  border-radius: 35px;
  transition: border-color var( --h-suave ), background-color var( --h-suave );
}

/* El marco entero se enciende cuando el foco entra en CUALQUIERA de sus
   controles. Sin esto, quien navega con teclado ve un anillo suelto sobre un
   campo transparente y no entiende que el conjunto es una sola herramienta. */
.lt-hero.lt-hero .lt-hero__buscador:focus-within {
  background: rgba( 255, 255, 255, 0.10 );
  border-color: var( --h-linea-viva );
}

/*
 * EL REPARTO POR AREAS. Sin esto, los tres controles se colocarian por orden en
 * las celdas libres y el campo no ocuparia la fila entera.
 *
 * El <label> de cada control tambien es hijo de la rejilla, pero va oculto con
 * posicion absoluta, asi que sale del flujo y no consume celda. Es la razon de
 * que las areas cuadren aunque en el HTML haya cinco hijos y solo tres huecos.
 */
.lt-hero.lt-hero .lt-hero__campo    { grid-area: campo; }
.lt-hero.lt-hero .lt-hero__selector { grid-area: ciudad; }
.lt-hero.lt-hero .lt-hero__enviar   { grid-area: enviar; }

.lt-hero.lt-hero .lt-hero__campo,
.lt-hero.lt-hero .lt-hero__selector {
  min-width: 0;                 /* sin esto, un <input> dentro de un grid se
                                   niega a encoger y desborda la píldora */
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: var( --h-pildora );
  background: var( --h-blanco );
  color: var( --h-negro );
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 54px;
}

.lt-hero.lt-hero .lt-hero__campo::placeholder {
  color: var( --h-gris-campo );
  opacity: 1;                   /* Firefox lo aclara por su cuenta y se cae de AA */
}

/* Se quita la cruz nativa de Chrome: aparece encima del texto, cambia de sitio
   según el ancho y no hay forma de darle un área táctil decente. */
.lt-hero.lt-hero .lt-hero__campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.lt-hero.lt-hero .lt-hero__selector {
  padding-right: 44px;
  /* Sin tope: ahora ocupa su media fila. Los 11rem de antes existian para que
     no se comiera al campo cuando los tres compartian una sola fila. */
  max-width: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* La flecha, en SVG, porque al quitar la apariencia nativa desaparece la del
     sistema y un selector sin flecha no se lee como selector. */
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}

/*
 * EL BOTÓN. Azul cielo con texto NEGRO: 7,4:1, nivel AAA.
 * En blanco serían 2,6:1 y no pasaría ni AA. No es una preferencia estética;
 * es el motivo de que este botón exista tal cual. No se cambie a blanco.
 */
.lt-hero.lt-hero .lt-hero__enviar {
  height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var( --h-pildora );
  background: var( --h-cielo );
  color: var( --h-sobre-cielo );
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var( --h-suave ), box-shadow var( --h-suave ), background-color var( --h-suave );
}

.lt-hero.lt-hero .lt-hero__enviar:hover {
  background: #6FB6FF;          /* el MISMO azul aclarado; el texto negro sube a
                                   9,1:1, así que aclarar solo mejora la lectura */
  transform: translateY( -1px );
  box-shadow: 0 10px 26px rgba( 77, 163, 255, 0.32 );
}

.lt-hero.lt-hero .lt-hero__enviar:active {
  transform: translateY( 0 );
}

/* Anillo de foco visible sobre fondo NEGRO: el anillo va en blanco y se separa
   del botón con un hueco. Un anillo azul sobre un botón azul no se ve. */
.lt-hero.lt-hero .lt-hero__campo:focus-visible,
.lt-hero.lt-hero .lt-hero__selector:focus-visible,
.lt-hero.lt-hero .lt-hero__enviar:focus-visible,
.lt-hero.lt-hero .lt-hero__acceso:focus-visible,
.lt-hero.lt-hero .lt-hero__ciudad-activa a:focus-visible {
  outline: 3px solid var( --h-blanco );
  outline-offset: 3px;
}

/* ==================================================================== */
/* 6 — PISTA Y CIUDAD ACTIVA                                            */
/* ==================================================================== */

.lt-hero.lt-hero .lt-hero__pista,
.lt-hero.lt-hero .lt-hero__ciudad-activa {
  margin: 16px 0 0;
  max-width: 32rem;
  color: var( --h-plata );
  font-size: 0.9375rem;
  line-height: 1.5;
}

.lt-hero.lt-hero .lt-hero__ciudad-activa strong {
  color: var( --h-blanco );
  font-weight: 700;
}

.lt-hero.lt-hero .lt-hero__ciudad-activa a {
  margin-left: 10px;
  color: var( --h-cielo );
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.lt-hero.lt-hero .lt-hero__ciudad-activa a:hover {
  color: var( --h-blanco );
}

/* ==================================================================== */
/* 7 — ACCESOS RÁPIDOS (fichas)                                         */
/*                                                                      */
/* Antes eran tarjetas grandes a la derecha. Ahí ahora está la silueta,  */
/* y además cinco tarjetas competían con el buscador por la atención.    */
/* Como fichas debajo del buscador se leen como lo que son: atajos.      */
/* ==================================================================== */

.lt-hero.lt-hero .lt-hero__navegacion {
  width: 100%;
  max-width: 40rem;
}

.lt-hero.lt-hero .lt-hero__accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-hero.lt-hero .lt-hero__acceso {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1.5px solid var( --h-linea );
  border-radius: var( --h-pildora );
  background: rgba( 255, 255, 255, 0.04 );
  color: var( --h-blanco );
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var( --h-suave ), border-color var( --h-suave ),
              color var( --h-suave ), transform var( --h-suave );
}

/*
 * LA PASTILLA QUE ES UN <button>, NO UN <a>.
 *
 * Es la que abre el selector de categorías, y se ve igual que las demás a
 * propósito: para quien mira son la misma cosa —una pastilla que lleva a algún
 * sitio— y la diferencia entre navegar y abrir un diálogo la comunican los
 * atributos ARIA, no un estilo distinto.
 *
 * Un <button> no hereda la tipografía del documento ni viene sin borde, así que
 * hay que devolverle las dos cosas o se ve con la fuente del sistema y un
 * escalón de tamaño respecto a sus vecinas.
 */
.lt-hero.lt-hero button.lt-hero__acceso {
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
}

/* Al pasar por encima, la ficha se INVIERTE a azul cielo con texto negro: el
   mismo par de colores que el botón principal y los mismos 7,4:1. Un solo
   sistema: si algo se puede pulsar en este sitio, al tocarlo se pone azul
   cielo con la tinta negra.

   El selector nombra los DOS elementos que se pueden pulsar. Antes decía solo
   `a.lt-hero__acceso` —cuando todas eran enlaces— y la pastilla nueva se
   quedaba sin hover: se veía igual que las demás pero muerta al tocarla. */
.lt-hero.lt-hero a.lt-hero__acceso:hover,
.lt-hero.lt-hero button.lt-hero__acceso:hover {
  background: var( --h-cielo );
  border-color: var( --h-cielo );
  color: var( --h-sobre-cielo );
  transform: translateY( -2px );
}

.lt-hero.lt-hero .lt-hero__acceso-icono {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  /* currentColor: el icono cambia de color con el texto en el hover sin una
     sola regla más. Es lo que evita el clásico icono que se queda blanco
     encima del fondo azul. */
  color: currentColor;
}

/* La ficha de una sección que aún no existe. No es un enlace (el PHP la pinta
   como <span>), así que tampoco debe PARECERLO: sin hover, sin cursor de mano,
   y bajada de opacidad. La opacidad se quedó en 0.62 y no más abajo porque a
   ese valor el plata compuesto sobre el negro todavía mide 5,2:1 —AA de sobra—:
   se anuncia lo que viene, no se esconde a medias. */
.lt-hero.lt-hero .lt-hero__acceso--proximo {
  color: var( --h-plata );
  opacity: 0.62;
  cursor: default;
}

.lt-hero.lt-hero .lt-hero__acceso-pronto {
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: var( --h-pildora );
  background: rgba( 77, 163, 255, 0.16 );
  color: var( --h-cielo );
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Ayudante del tema; se repite aquí porque el hero tiene que poder pintarse
   aunque utilidades.css no llegue a tiempo. */
.lt-hero.lt-hero .lt-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset( 50% );
  white-space: nowrap;
  border: 0;
}

/* ==================================================================== */
/* 8 — TABLETA                                                          */
/* ==================================================================== */

@media ( max-width: 1024px ) {

  .lt-hero.lt-hero {
    min-height: 88vh;
  }

  /* La figura se va al fondo y se aparta hacia la derecha: sigue estando, pero
     deja de disputarle el sitio al texto en una reja más estrecha. */
  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo {
    width: min( 68%, 560px );
    opacity: 0.55;
  }

  .lt-hero.lt-hero--vivo .lt-hero__lienzo {
    opacity: 0.7;
  }

  .lt-hero.lt-hero .lt-hero__texto,
  .lt-hero.lt-hero .lt-hero__buscador {
    max-width: 30rem;
  }
}

/* ==================================================================== */
/* 9 — MÓVIL                                                            */
/*                                                                      */
/* Aquí manda el contenido. La silueta pasa a ser una marca de agua      */
/* arriba: se reconoce al entrar y luego se quita de en medio. El        */
/* buscador tiene que caber en la primera pantalla, sin excusas: es un   */
/* sitio al que se llega por un enlace de WhatsApp, de pie, con una      */
/* mano.                                                                 */
/* ==================================================================== */

@media ( max-width: 768px ) {

  .lt-hero.lt-hero {
    min-height: 88vh;
    padding: clamp( 84px, 15vh, 120px ) 0 56px;
    align-items: flex-start;
  }

  @supports ( height: 100svh ) {
    .lt-hero.lt-hero {
      min-height: 88svh;
    }
  }

  /* La figura ocupa el ancho completo pero solo la mitad superior, y por
     detrás: el texto le pasa por encima. Menos píxeles que pintar = menos
     batería en el teléfono que menos tiene. */
  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo {
    inset: 0 0 auto 0;
    width: 100%;
    height: 54%;
    opacity: 0.42;
  }

  .lt-hero.lt-hero--vivo .lt-hero__lienzo {
    opacity: 0.55;
  }

  .lt-hero.lt-hero::after {
    background-position: 50% 42%;
    background-size: min( 62%, 300px ) auto;
  }

  /* El velo cambia de dirección: en móvil el texto está DEBAJO de la figura,
     no a su izquierda, así que el oscurecimiento tiene que venir de abajo. */
  .lt-hero.lt-hero .lt-hero__velo {
    background:
      linear-gradient( to top, rgba( 11, 13, 16, 0.97 ) 30%, rgba( 11, 13, 16, 0.55 ) 62%, rgba( 11, 13, 16, 0.2 ) 100% );
  }

  .lt-hero.lt-hero .lt-hero__contenido {
    gap: 24px;
  }

  .lt-hero.lt-hero .lt-hero__texto,
  .lt-hero.lt-hero .lt-hero__bajada,
  .lt-hero.lt-hero .lt-hero__buscador,
  .lt-hero.lt-hero .lt-hero__navegacion {
    max-width: 100%;
  }

  .lt-hero.lt-hero .lt-hero__antetitulo {
    margin-bottom: 12px;
    font-size: 0.6875rem;
  }

  .lt-hero.lt-hero .lt-hero__bajada {
    margin-bottom: 22px;
    font-size: 1rem;
  }

  /* El buscador se apila. El campo arriba a lo ancho, y debajo ciudad y botón
     al 50 % cada uno: los dos quedan al alcance del pulgar y ninguno baja de
     los 48 px de alto que pide una diana táctil. */
  .lt-hero.lt-hero .lt-hero__buscador {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: var( --h-radio );
  }

  .lt-hero.lt-hero .lt-hero__campo {
    grid-column: 1 / -1;
    height: 52px;
    line-height: 52px;
    font-size: 16px;            /* por debajo de 16px, iOS hace zoom al enfocar
                                   y descoloca la página entera */
  }

  .lt-hero.lt-hero .lt-hero__selector,
  .lt-hero.lt-hero .lt-hero__enviar {
    height: 50px;
    max-width: none;
    line-height: 50px;
    padding-inline: 16px;
  }

  .lt-hero.lt-hero .lt-hero__campo,
  .lt-hero.lt-hero .lt-hero__selector,
  .lt-hero.lt-hero .lt-hero__enviar {
    border-radius: 10px;
  }

  /* Las fichas en una fila que se desliza, no en varias que empujan el hero
     hacia abajo. scroll-snap para que se paren en su sitio, y el margen
     negativo + padding hace que la primera nazca alineada con el texto y la
     última pueda salir del todo por el borde. */
  .lt-hero.lt-hero .lt-hero__accesos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc( -1 * clamp( 20px, 5vw, 48px ) );
    padding-inline: clamp( 20px, 5vw, 48px );
    padding-bottom: 4px;
  }

  .lt-hero.lt-hero .lt-hero__accesos::-webkit-scrollbar {
    display: none;
  }

  .lt-hero.lt-hero .lt-hero__accesos > li {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

/* Teléfonos pequeños y viejos (~360 px): el titular tiene que caber sin partir
   una palabra por la mitad. */
@media ( max-width: 380px ) {
  .lt-hero.lt-hero .lt-hero__titulo {
    font-size: 2.25rem;
  }
}

/* ==================================================================== */
/* 10 — MENOS MOVIMIENTO                                                */
/*                                                                      */
/* hero-texas.js ni siquiera arranca cuando el sistema pide menos        */
/* movimiento, así que aquí solo queda apagar lo que hace el CSS: las    */
/* transiciones de relevo y los desplazamientos del hover. El respaldo   */
/* estático se queda, que es justo lo que esta persona quiere ver.       */
/* ==================================================================== */

@media ( prefers-reduced-motion: reduce ) {

  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo,
  .lt-hero.lt-hero .lt-hero__enviar,
  .lt-hero.lt-hero .lt-hero__acceso,
  .lt-hero.lt-hero .lt-hero__buscador {
    transition: none;
  }

  .lt-hero.lt-hero .lt-hero__enviar:hover,
  .lt-hero.lt-hero a.lt-hero__acceso:hover {
    transform: none;
  }
}

/* Modo de contraste alto de Windows: los fondos decorativos se pierden y el
   texto blanco puede quedar sobre el color de sistema. Se le da al buscador un
   borde real para que no desaparezca. */
@media ( forced-colors: active ) {

  .lt-hero.lt-hero .lt-hero__buscador,
  .lt-hero.lt-hero .lt-hero__acceso {
    border: 1px solid CanvasText;
  }

  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo {
    display: none;
  }
}

/*
 * =============================================================================
 * QUÉ HAY QUE CAMBIAR EN inc/hero.php  (y una cosa en functions.php)
 * =============================================================================
 *
 * 1) ENCOLAR EL SCRIPT NUEVO —— es el único cambio imprescindible.
 *    En la función `hero_script()`, dos líneas:
 *
 *        $archivo = '/assets/js/hero-webgl.js';     ← ANTES
 *        $archivo = '/assets/js/hero-texas.js';     ← AHORA
 *
 *        wp_enqueue_script( 'lt-hero-webgl',  … )   ← ANTES
 *        wp_enqueue_script( 'lt-hero-texas',  … )   ← AHORA
 *
 *    Todo lo demás de esa función se queda igual y sigue siendo correcto: el
 *    `is_front_page()`, el `is_readable()` que evita el 404, el `filemtime()`
 *    como versión y el `defer` en el pie. El script nuevo necesita el <canvas>
 *    ya en el documento, igual que el viejo.
 *
 *    Y BORRAR assets/js/hero-webgl.js cuando el hero nuevo esté verificado en
 *    el navegador. Mientras siga en disco no molesta —nadie lo encola—, pero
 *    son 27 KB de shader de nubes que ya no pintan nada.
 *
 * 2) EL COMENTARIO DE LA FUNCIÓN, que ahora miente.
 *    La cabecera de `hero_script()` habla de «la aurora WebGL» y de «26,5 KB…
 *    la mayor parte son los comentarios del shader». Ya no hay aurora ni
 *    shader de nubes. Sugerido:
 *
 *        La silueta de Texas en 3D, SOLO en la portada.
 *        […] El script decide por su cuenta si debe animarse (WebGL, memoria
 *        del aparato, «menos movimiento», «ahorro de datos»); si decide que no,
 *        no toca el DOM y manda el respaldo en SVG de hero.css.
 *
 *    Y el comentario de la capa del lienzo, dentro de `hero()`, dice que el JS
 *    «BORRA el <canvas> del documento» cuando no debe animarlo. El script nuevo
 *    NO borra nada: se abstiene y deja el lienzo vacío y transparente, con el
 *    respaldo del CSS por debajo. Conviene corregirlo para que el siguiente que
 *    lo lea no busque un removeChild que no existe.
 *
 * 3) OPCIONAL — el modificador `lt-hero--aurora` del <section>.
 *    Esta hoja ya NO lo usa: cuelga de `.lt-hero.lt-hero`, así que funciona con
 *    él o sin él. Se puede quitar, o cambiar por `lt-hero--texas`, sin tocar ni
 *    una línea de CSS. Si se quita, comprobar antes que portada.css no lo esté
 *    usando para otra cosa.
 *
 *    El atributo `data-lt-aurora` del <canvas> tampoco hace falta: el script lo
 *    busca por `.lt-hero__lienzo` y solo mira los data-* como alternativa
 *    (acepta `data-lt-texas` y `data-lt-aurora`). Se puede dejar como está.
 *
 * 4) functions.php — LA FUENTE. Esto sí hay que hacerlo, o el titular no se
 *    verá como debe.
 *    Hoy se pide (línea ~84):
 *
 *        …css2?family=Archivo:wght@400..700&family=Fraunces:opsz,wght@9..144,600..900…
 *
 *    Le faltan dos cosas: el eje de ANCHO (`wdth`), sin el cual el
 *    `font-stretch: 75%` del titular no tiene a qué agarrarse, y llegar a 800,
 *    porque el rango se corta en 700. Debe quedar:
 *
 *        …css2?family=Archivo:wdth,wght@62.5..125,400..900&display=swap
 *
 *    Y de paso se cae Fraunces: la serif ya no se usa en el hero, y si no se
 *    usa en ninguna otra parte del sitio, quitarla del enlace ahorra una
 *    familia entera en la primera pantalla. Comprobar antes con:
 *
 *        grep -rn "fuente-titulo\|Fraunces" assets/css/
 *
 *    Si alguna hoja todavía la usa, se deja; si no, fuera.
 *
 * 5) VERIFICAR EN EL NAVEGADOR (no basta con que cargue):
 *    · Con WebGL: el estado gira, la estrella se lee SIEMPRE (no se pone de
 *      canto) y el SVG de respaldo ha desaparecido —la sección lleva la clase
 *      `lt-hero--vivo`—.
 *    · En DevTools, «Rendering → Emulate prefers-reduced-motion: reduce» y
 *      recargar: NO debe haber lienzo pintado y el SVG tiene que verse entero
 *      y acabado. Es la prueba de que el respaldo se sostiene solo.
 *    · Bajar hasta el pie y volver: el bucle se para al salir de pantalla
 *      (comprobable porque el uso de CPU cae) y se reanuda al volver.
 *    · Con el teclado: Tab desde el logo hasta el botón «Buscar» — el marco del
 *      buscador se enciende y cada control saca su anillo blanco.
 *    · A 360 px de ancho: el buscador entero cabe sin desplazarse y las fichas
 *      se deslizan en horizontal.
 */

/* ==================================================================== */
/* MÓVIL Y TABLET: LA ANIMACIÓN ARRIBA, NO DETRÁS                       */
/*                                                                      */
/* En escritorio el modelo vive a la derecha del texto y funciona: hay   */
/* ancho para las dos cosas. Por debajo de 1024px no lo hay, y el lienzo */
/* —que es un fondo absoluto con un velo encima— quedaba DETRÁS del      */
/* texto: se adivinaba una mancha azul y se perdía lo único que hace     */
/* memorable la portada.                                                 */
/*                                                                       */
/* La corrección es de FLUJO, no de tamaño: el lienzo deja de estar      */
/* posicionado y pasa a ser un bloque más de una columna, el primero.    */
/* Y se retira el velo, porque su trabajo era proteger la lectura del    */
/* texto que iba encima; sin texto encima, solo apagaba el dibujo.       */
/*                                                                       */
/* 1024px y no 768px: en una tablet en vertical el problema es idéntico. */
/* ==================================================================== */

@media (max-width: 1024px) {

  .lt-hero.lt-hero {
    display: flex;
    flex-direction: column;
    /* Se libera la altura fija: ahora la marca el contenido apilado. */
    min-height: 0;
    padding-block: 0 clamp(32px, 6vh, 56px);
  }

  /*
   * El lienzo entra en el flujo como primer bloque.
   *
   * Y con él el respaldo, que NO es un elemento sino el pseudo-elemento
   * `.lt-hero::after`. Eso importa: un ::after de un contenedor flex SÍ es
   * un elemento flex y admite `order`, así que puede apilarse arriba igual
   * que el lienzo. Si se olvidara, en los teléfonos sin WebGL —que son
   * justo el público de este sitio— la silueta seguiría de fondo detrás del
   * texto y la corrección solo funcionaría en los móviles buenos.
   */
  .lt-hero.lt-hero .lt-hero__lienzo,
  .lt-hero.lt-hero::after {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    /* Alto proporcional a la pantalla, con techo: en un móvil apaisado
       un 46vh sería casi toda la ventana y el buscador quedaría fuera. */
    height: clamp(240px, 46vh, 380px);
    margin-inline: 0;
    opacity: 1;
  }

  /* El resplandor de fondo sí se queda absoluto: es ambiente, no contenido. */
  .lt-hero.lt-hero::before {
    position: absolute;
    inset: 0;
    order: 0;
  }

  /*
   * CUANDO EL WEBGL ARRANCA, EL RESPALDO DESAPARECE DEL FLUJO.
   *
   * En escritorio bastaba con `opacity: 0` porque el respaldo estaba
   * posicionado en absoluto y no ocupaba sitio. Aquí sí ocupa: es un bloque
   * más de la columna. Con solo la opacidad quedaba un hueco de 380px de
   * alto debajo del lienzo, y como el degradado del SVG seguía pintado se
   * veían DOS Texas apilados, uno vivo y otro muerto.
   *
   * `display: none` y no `visibility: hidden`: hidden reserva la caja, que
   * es justo el problema. Y solo bajo `--vivo`, así que el teléfono sin
   * WebGL —el caso que más importa aquí— conserva su silueta intacta.
   */
  .lt-hero.lt-hero--vivo::after {
    display: none;
  }

  /*
   * Y EL SIMETRICO, QUE FALTABA: SI EL WEBGL NO ARRANCA, FUERA EL LIENZO.
   *
   * Estaba escrita solo la mitad. Cuando el WebGL arranca se retira el
   * respaldo; cuando NO arranca, nadie retiraba el lienzo, y un <canvas> vacio
   * sigue ocupando su bloque entero en la columna. Resultado: dos bloques
   * apilados, uno con la silueta y otro con nada, y el hero crecia entre 180 y
   * 380px. Medido en 360x640 el buscador se iba 416px por debajo del pliegue,
   * cuando este mismo archivo promete mas arriba que tiene que caber en la
   * primera pantalla «sin excusas».
   *
   * Y NO ES UN CASO RARO: hero-texas.js se abstiene a proposito con
   * `prefers-reduced-motion`, con `deviceMemory <= 4` y con el ahorro de datos
   * activado. Un Android modesto declara 4 GB. Es el publico de este sitio.
   *
   * Con las dos reglas siempre hay exactamente UN bloque, y como los dos miden
   * lo mismo, el relevo no mueve nada de sitio.
   *
   * SE CUELGA DE `--3d`, NO DE `--vivo`, Y LA DIFERENCIA ES TODO. `--vivo` llega
   * cuando el dibujo ya está pintado, y para pintarlo el guion necesita MEDIR el
   * lienzo. Un elemento oculto mide 0×0: colgarlo de `--vivo` hacía que el mapa
   * no arrancara nunca en móvil. `--3d` se pone en cuanto el guion decide que va
   * a dibujar, antes de medir, que es justo lo que hace falta.
   */
  .lt-hero.lt-hero:not( .lt-hero--3d ) .lt-hero__lienzo {
    display: none;
  }

  /* Fuera el velo: existía para que se leyera el texto que iba ENCIMA del
     dibujo. Apilados, ya no hay texto encima — solo restaría contraste. */
  .lt-hero.lt-hero .lt-hero__velo {
    display: none;
  }

  .lt-hero.lt-hero .lt-hero__contenido {
    order: 2;
    text-align: center;
    justify-items: center;
    padding-top: clamp(20px, 4vh, 32px);
  }

  /* Centrado real: sin esto el bloque de texto se centra pero sus hijos
     (antetítulo, bajada, buscador) siguen alineados a la izquierda. */
  .lt-hero.lt-hero .lt-hero__texto,
  .lt-hero.lt-hero .lt-hero__bajada,
  .lt-hero.lt-hero .lt-hero__antetitulo {
    text-align: center;
    margin-inline: auto;
  }

  .lt-hero.lt-hero .lt-hero__antetitulo {
    justify-content: center;
  }

  /* El buscador ocupa el ancho útil: es la acción principal de la pantalla. */
  .lt-hero.lt-hero .lt-hero__buscador {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Los accesos rápidos se deslizan en horizontal en vez de apilarse:
     cinco filas de botones empujarían el contenido real fuera de la vista. */
  .lt-hero.lt-hero .lt-hero__accesos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* El scroll llega hasta el borde de la pantalla para que se vea que hay
       más, pero el primer elemento respeta el margen del contenedor. */
    margin-inline: calc(var(--canal) * -1);
    padding-inline: var(--canal);
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lt-hero.lt-hero .lt-hero__accesos::-webkit-scrollbar { display: none; }
  .lt-hero.lt-hero .lt-hero__acceso { scroll-snap-align: start; flex: none; }
}

/* En pantallas muy bajas (móvil apaisado) el dibujo cede altura al buscador. */
@media (max-width: 1024px) and (max-height: 560px) {
  .lt-hero.lt-hero .lt-hero__lienzo,
  .lt-hero.lt-hero::after {
    height: 180px;
  }
}


/* ==================================================================== */
/* AL FINAL DE LA HOJA, Y NO DONDE «TOCARIA» POR TEMA                   */
/*                                                                      */
/* Ya paso una vez: este bloque estuvo colocado arriba, junto a las      */
/* reglas del contenido, y no hacia absolutamente nada. Sus selectores   */
/* tienen la MISMA especificidad que los que quiere sobrescribir         */
/* (`.lt-hero.lt-hero .lt-hero__contenido` en los dos casos) y, con      */
/* especificidad empatada, gana el que se escribe DESPUES. Estar dentro  */
/* de un @media no puntua.                                              */
/*                                                                      */
/* Las alternativas eran subir la especificidad o poner !important;      */
/* moverlo es lo unico que no deja deuda para el siguiente que lo lea.   */
/* ==================================================================== */

/* ==================================================================== */
/* 2 bis — ESCRITORIO: MAPA MAS PEQUENO Y FILTROS DEBAJO DE EL          */
/* ==================================================================== */

/*
 * Encargo del dueno: «que el mapa en PC fuera un poco mas pequeno y que estos
 * filtros estuvieran abajo del mapa, y asi no se sentiria tan recargado el lado
 * izquierdo».
 *
 * Y el diagnostico era correcto: la columna izquierda cargaba con TODO —
 * antetitulo, titular, bajada, buscador, pie y ademas la fila de accesos— y la
 * derecha solo tenia el dibujo. La pagina pesaba visiblemente hacia un lado.
 *
 * Mover los accesos a la derecha reparte el peso sin anadir nada nuevo. No es
 * solo estetico: la fila de accesos es la alternativa al buscador para quien no
 * sabe que escribir, y ponerla bajo el mapa la asocia con la otra forma de
 * explorar —pulsar la figura— en vez de con el campo de texto.
 *
 * COMO SE HACE: el contenedor pasa a dos columnas. La izquierda tiene el ancho
 * exacto de la columna de texto (34rem, que es su tope de siempre) y la derecha
 * se queda con el resto, que es justo la banda donde vive el mapa. Los accesos
 * se colocan en esa columna y se pegan ABAJO.
 */
@media (min-width: 1025px) {

  .lt-hero.lt-hero .lt-hero__contenido {
    grid-template-columns: minmax( 0, 34rem ) minmax( 0, 1fr );
    grid-template-areas: 'texto mapa';
    /* `start` en vertical o la columna de texto se estiraria a la altura de la
       fila y el buscador acabaria centrado a media pantalla. */
    align-items: start;
    column-gap: var( --e-4, 32px );

    /*
     * EL CONTENIDO NO SE ESTIRA: va centrado en la seccion, como el resto.
     *
     * Se probo estirarlo para que las pastillas bajaran al fondo y el mapa
     * ganara los ~150px muertos de debajo. Funcionaba —la figura crecio un 6 %—
     * y el dueño lo rechazo al verlo: «estaba mejor antes, un poco mas
     * pequeño». Queda anotado porque el camino era correcto y puede volver a
     * hacer falta; lo que no encajo fue el tamaño resultante, no el metodo.
     */
  }

  .lt-hero.lt-hero .lt-hero__texto { grid-area: texto; }

  .lt-hero.lt-hero .lt-hero__navegacion {
    grid-area: mapa;
    /* Abajo de su columna —o sea, debajo del mapa— y centrada bajo la figura. */
    align-self: end;
    justify-self: center;
    max-width: 100%;

    /*
     * AQUI SE PROBO UN `margin-top` PARA BAJAR LAS PASTILLAS Y NO HACE NADA.
     * Queda anotado para que nadie lo vuelva a intentar: con `align-self: end`
     * el borde INFERIOR del elemento queda clavado al de su area de rejilla, y
     * un margen superior solo empuja hacia arriba lo que hay encima. Para
     * bajarlas habria que agrandar la fila, no darles margen.
     *
     * No hizo falta: lo que chocaba con las pastillas era la CAJA del lienzo, no
     * el dibujo. La figura ocupa el 78 % del alto de su caja y queda centrada,
     * asi que por debajo le sobra un 11 % transparente. Lo que hay que medir es
     * el dibujo, y eso se comprueba contando pixeles de la captura, no leyendo
     * rectangulos del DOM.
     */
  }

  /*
   * CENTRADAS Y UN POCO MAS APRETADAS.
   *
   * En la columna de la derecha caben unos 568px y las seis pastillas pedian
   * algo mas, asi que caian 3-2-1: una fila de tres, otra de dos y una sola
   * abajo. Un escalonado asi se lee como un desbordamiento, no como un diseno.
   *
   * Recortando el relleno lateral de 18 a 14 y el hueco de 10 a 8 se ganan unos
   * 40px por fila, que es lo justo para que entren de tres en tres. Se toca el
   * relleno y no el tamano de letra: 14px es el minimo comodo para una etiqueta
   * y bajar de ahi si se nota al leer.
   */
  .lt-hero.lt-hero .lt-hero__accesos {
    justify-content: center;
    gap: 8px;
  }

  .lt-hero.lt-hero .lt-hero__acceso { padding-inline: 14px; }

  /*
   * EL MAPA SE ENCOGE Y SUBE.
   *
   * De 58 % / 880px a 46 % / 700px, y de ocupar el alto completo a ocupar el
   * 76 % desde arriba. Las dos cosas van juntas y la segunda no es opcional: el
   * lienzo esta en posicion absoluta, asi que NO empuja a nada. Si solo se le
   * bajara el ancho seguiria midiendo el alto entero y los accesos, que ahora
   * viven en esa misma columna, le quedarian por encima.
   *
   * El 70 % deja libre la banda inferior donde caen los accesos. Se probo con 76
   * y la caja del lienzo se metia 25px por debajo de la primera fila de
   * pastillas: no llegaba a taparlas —la figura no ocupa toda su caja y el
   * z-index las deja por encima— pero la punta sur de Texas quedaba a un pelo,
   * y basta que alguien alargue una etiqueta para que se toquen.
   *
   * Se toca aqui y no en la regla base para no alterar el movil, donde el
   * reparto es otro (figura arriba, texto debajo) y funciona.
   */
  /*
   * EL RESPALDO SE ESCALA POR ALTO, NO POR ANCHO.
   *
   * `background-size: min(78%, 520px) auto` fija el ANCHO, asi que el alto sale
   * de la proporcion del SVG y no encoge cuando encoge la ventana. La pieza 3D
   * hace lo contrario: ocupa un 78 % del ALTO de su caja y deja aire arriba y
   * abajo. Las dos comparten caja —el archivo lo dice mas arriba— pero no el
   * dibujo, y la diferencia crece segun baja la pantalla.
   *
   * Medido: a 1280x600 la pieza 3D empieza en y=109 (despeja el menu por 6px) y
   * el respaldo en y=50, o sea 53px del panhandle escondidos DETRAS de la
   * cabecera. A 1366x640, 58px. A 1920x1080 los dos coinciden y no se nota, que
   * es por lo que habia pasado desapercibido.
   *
   * Importa mas de lo que parece: el respaldo es lo que ve quien pide menos
   * movimiento o tiene un equipo modesto, y en ese modo la cabecera ademas es
   * OPACA — no es transparencia bonita, es la figura cortada.
   *
   * Escalando por alto, respaldo y pieza ocupan la misma fraccion de la caja a
   * cualquier tamano y el relevo deja de mover nada.
   */
  .lt-hero.lt-hero::after {
    background-size: auto min( 78%, 492px );
  }

  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo {
    /*
     * BAJA UN POCO. Con la cabecera transparente el hero empieza en el borde de
     * la ventana, asi que el lienzo —que va anclado arriba— arrancaba pegado al
     * menu y la punta del panhandle quedaba justo debajo de los enlaces.
     *
     * En `clamp` por lo mismo que el aire del hero: es espacio que compite con
     * la altura util, y en una pantalla baja no se puede gastar fijo.
     */
    top: clamp( 22px, 6vh, 80px );

    width: min( 50%, 760px );
    /*
     * 70 %, no 74. Al agrandar el mapa se le subio tambien el alto y su caja
     * volvio a meterse 6px por debajo de la primera fila de pastillas — el
     * mismo roce que ya se habia corregido una vez. El ancho puede crecer sin
     * consecuencias porque a los lados no hay nada; el alto no, porque debajo
     * viven los accesos. Son dos ajustes independientes aunque se toquen en la
     * misma regla.
     *
     * Ahora sube a 78 % porque las pastillas se han bajado y hay banda libre.
     * EL ALTO ES LO QUE HACE GRANDE AL DIBUJO, no el ancho: la camara del WebGL
     * proyecta con un campo de vision VERTICAL, asi que la figura ocupa siempre
     * la misma fraccion del alto del lienzo (un 78 %) y ensanchar la caja solo
     * le anade aire a los lados. En la ronda anterior se subio el ancho de 700 a
     * 760 y por eso apenas se noto.
     *
     * El 70 % es el tamaño aprobado por el dueño. Se probo el 84 % con las
     * pastillas bajadas y lo rechazo: «estaba mejor antes, un poco mas
     * pequeño».
     *
     * SI ALGUN DIA HAY QUE RETOCARLO, la holgura hasta las pastillas se mide
     * contando los pixeles del DIBUJO en una captura, no leyendo rectangulos
     * del DOM: la caja del lienzo llega bastante mas abajo que la silueta, asi
     * que el rectangulo daba «solape» donde no lo habia.
     */
    /*
     * 65 %, y el numero se afino con margen a proposito.
     *
     * Al crecer el hero para dar aire bajo la cabecera transparente, el lienzo
     * —que es un porcentaje de esa altura— crecio con el y la punta sur de
     * Texas se metia entre las pastillas de accesos.
     *
     * La medicion automatica de holgura aqui es RUIDOSA y no hay que fiarse de
     * un solo numero: cuenta pixeles azules de una captura, y los arcos se
     * mueven, asi que la misma configuracion da lecturas distintas segun el
     * fotograma. Por eso se elige un valor con holgura de sobra en vez de
     * apurar hasta el limite.
     */
    height: 65%;

    /*
     * SE DESPEGA DEL BORDE DE LA VENTANA.
     *
     * El lienzo esta en posicion absoluta dentro de `.lt-hero`, que va a sangre
     * —de lado a lado de la pantalla—, asi que `right: 0` lo pegaba al borde
     * FISICO del navegador. Todo lo demas de la pagina se alinea con
     * `.lt-contenedor`, que esta topado a 1240px y centrado, de modo que en una
     * pantalla de 1920 el mapa se iba 340px mas a la derecha que el resto del
     * contenido. De ahi la sensacion de «tirado a la derecha»: no estaba
     * descentrado respecto a su columna, estaba fuera de la caja del sitio.
     *
     * Este `right` calcula el margen que el contenedor deja a cada lado y lo
     * usa como separacion, con lo que el canto derecho del mapa cae justo donde
     * cae el de la cabecera y el del pie. El `max(0px, …)` es el seguro para
     * cuando la ventana es mas estrecha que el contenedor: ahi el margen seria
     * negativo y el mapa se saldria por la derecha.
     */
    right: max( 0px, calc( ( 100% - var( --contenedor, 1240px ) ) / 2 ) );
  }
}

/* ==================================================================== */
/* ESCRITORIO ESTRECHO O BAJO: EL MAPA CEDE                             */
/* ==================================================================== */

/*
 * LO QUE SE ROMPIO Y COMO SE VIO.
 *
 * Al bajar el lienzo se midio la holgura contra las pastillas en 1321, 1440,
 * 1600 y 1920 — todo despejado— y se dio por bueno. Faltaba justo la banda de
 * al lado: entre 1025 y 1100px de ancho las seis pastillas ya no caben en dos
 * filas, caen en tres o cuatro, y la fila de arriba sube 200px. Ahi el mapa
 * recien bajado se metia DENTRO de las etiquetas. Medido contando pixeles del
 * dibujo dentro del rectangulo de cada pastilla, contra el valor anterior:
 * 1025x800 0->32, 1060x800 0->95, 1100x800 0->174 («Search businesses» y «Find
 * help» atravesadas por la costa y un arco). De 1140 en adelante, cero.
 *
 * Y el fondo de la pastilla es blanco al 4 %: el dibujo no queda detras, se ve
 * cruzando el texto.
 *
 * SOLO POR ANCHO, Y ESO TAMBIEN SE MIDIO.
 *
 * El primer intento acotaba tambien por altura —parecia obvio: en una ventana
 * baja el contenido sube y las pastillas con el— y estaba de mas. Barriendo el
 * cuadro con la correccion desactivada, de 1140px en adelante NO hay invasion a
 * ninguna altura entre 560 y 1080, y por debajo de 1140 la hay a TODAS. Es un
 * problema de reparto horizontal puro: manda cuantas filas de pastillas caben.
 *
 * Acotar de mas no es gratis: con la clausula de altura, un portatil de
 * 1366x768 o 1440x800 —que no tienen ningun choque— se quedaba con el mapa
 * encogido y subido sin motivo. Encoger donde no hace falta tambien es un dano,
 * solo que uno que no salta a la vista y que nadie viene a reclamar.
 *
 * POR QUE UNA CONSULTA DE MEDIOS Y NO UN CALCULO. Lo correcto seria atar el
 * borde inferior del lienzo al borde superior de las pastillas, pero las
 * pastillas se colocan solas al fondo de su celda y CSS no sabe decir «hasta
 * donde llegue ese elemento». Se acota con numeros medidos y la comprobacion
 * queda automatizada: choque.mjs barre un cuadro de anchos por alturas y cuenta
 * los pixeles del dibujo que caen dentro de cada pastilla.
 */
@media (min-width: 1025px) and (max-width: 1139px) {
  .lt-hero.lt-hero::after,
  .lt-hero.lt-hero .lt-hero__lienzo {
    top: clamp( 14px, 2.6vh, 30px );
    height: 56%;
  }
}

/* ==================================================================== */
/* VENTANA BAJA: EL RESPALDO ENCOGE UN POCO MAS                         */
/* ==================================================================== */

/*
 * Escalar el respaldo por alto (arriba) recupero 40 de los 53px que la cabecera
 * le tapaba a 1280x600, pero no los 53. Quedan 11-14 en ventanas de 600-640px
 * de alto, y solo 2px de margen a 768.
 *
 * El motivo es que la caja del lienzo empieza en `6vh`, y 6vh de una ventana
 * baja son 36px contra los 103 que mide la cabecera: la caja NACE debajo del
 * menu. Con la pieza 3D no se nota porque deja mas aire interno; con el
 * respaldo, si.
 *
 * Se corrige encogiendo el dibujo dentro de su caja en vez de mover la caja:
 * moverla la empujaria hacia las pastillas, que es el otro borde y el que ya
 * costo una regresion. `background-position: 52% 48%` reparte el aire que sobra
 * casi a partes iguales, asi que cada punto que se le quita al alto son ~0,48
 * puntos de despeje por arriba.
 *
 * Solo por debajo de 800px de alto: por encima, el 78 % ya despeja y encoger
 * seria dano gratis. Comprobado en arreglos.mjs, que mide con la cabecera
 * oculta SOLO en el navegador de prueba y exige 30 pixeles azules seguidos por
 * fila —si no, cuenta el halo del drop-shadow, que tambien es azul.
 */
@media (min-width: 1025px) and (max-height: 800px) {
  .lt-hero.lt-hero::after {
    background-size: auto min( 62%, 492px );
  }
}

/* ==================================================================== */
/* SUGERENCIAS DEL BUSCADOR                                             */
/* ==================================================================== */

/*
 * Ver inc/sugerencias.php y assets/js/sugerencias.js.
 *
 * La caja no existe en el HTML: la crea el guion. Por eso aquí no hay ningún
 * estado «vacío» que dibujar — si el JavaScript no carga, no hay nada que
 * ocultar.
 */

.lt-hero__buscador--con-sugerencias { position: relative; }

.lt-sugerencias {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;

  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande, 14px);
  /* Sombra larga y suave: la lista flota sobre una fotografía a pantalla
     completa y sin ella se confunde con el hero. */
  box-shadow: 0 18px 44px rgba(11, 18, 32, .28);
  overflow: hidden;
}

/*
 * El tope de alto y el desplazamiento son para el móvil: con ocho sugerencias
 * la lista se comía la pantalla entera y tapaba el propio campo donde se
 * estaba escribiendo.
 */
.lt-sugerencias__lista {
  max-height: min(52vh, 420px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.lt-sugerencias__opcion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2, 16px);
  /* 44px de alto mínimo: es el objetivo táctil que no falla con el pulgar. */
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radio-chico, 6px);
  cursor: pointer;
  transition: background var(--transicion);
}

/*
 * `is-senalada` la pone el teclado y `:hover` el ratón, pero se pintan IGUAL a
 * propósito: si la fila del teclado y la del ratón se vieran distintas, alguien
 * que usa las dos cosas no sabría cuál se va a abrir al pulsar Intro.
 */
.lt-sugerencias__opcion:hover,
.lt-sugerencias__opcion.is-senalada {
  background: var(--marca-claro);
}

.lt-sugerencias__texto {
  font-weight: var(--peso-medio, 600);
  color: var(--tinta);
  /* Un nombre largo de negocio se corta con puntos suspensivos en vez de
     empujar la etiqueta de tipo fuera de la caja. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-sugerencias__meta {
  flex: none;
  font-size: var(--fs-etiqueta, .78rem);
  font-weight: var(--peso-fuerte, 700);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca);
}

@media (max-width: 560px) {
  /* En pantalla estrecha el nombre manda: la etiqueta baja debajo en vez de
     robarle la mitad del ancho. */
  .lt-sugerencias__opcion {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .lt-sugerencias__texto { white-space: normal; }
}

/* ==================================================================== */
/* 12 — EL BOTON DE IA, DENTRO DEL CAMPO DE BUSQUEDA                    */
/*                                                                      */
/* PHP: inc/hero.php -> LT\Tema\boton_ia_campo()                        */
/*                                                                      */
/* Se pinta en DOS buscadores y por eso el bloque esta aqui:            */
/*   · el buscador global del hero (portada),                           */
/*   · el buscador del cajon lateral del movil (header.php).            */
/*                                                                      */
/* POR QUE EL SEGUNDO TAMBIEN VIVE EN ESTA HOJA, que se llama «hero».   */
/* El cajon esta en TODAS las paginas, asi que su estilo tiene que      */
/* viajar en todas. De las hojas que se cargan siempre —tokens, base,   */
/* utilidades, hero (functions.php) y estructura, componentes           */
/* (encolar-modulos.php)— esta es la unica que le toca escribir a esta  */
/* pieza; estructura.css, que seria su sitio natural, es de otro. Si    */
/* algun dia se reparten distinto los archivos, el bloque del cajon se  */
/* muda entero a estructura.css y aqui no queda nada que arreglar: no   */
/* comparte ni una regla con el del hero.                               */
/*                                                                      */
/* SIN JAVASCRIPT NO HAY BOTON. Todo cuelga de `.lt-js`, la clase que   */
/* pone assets/js/tema.js en <html>. El chat habla con el servidor por  */
/* `fetch`: sin guion este boton no podria abrir nada, y entonces       */
/* tampoco se le descuenta el hueco al campo. Misma decision, y por el  */
/* mismo motivo, que la del boton flotante del asistente.               */
/*                                                                      */
/* CONTRASTE, medido sobre el fondo REALMENTE pintado (el campo es      */
/* blanco puro, #FFFFFF):                                               */
/*   · relleno --marca #295091 con texto blanco .......... 7,9:1  AAA   */
/*   · en :hover pasa a --marca-oscuro #1B3A6B ........... 11,4:1 AAA   */
/* El azul cielo (#4DA3FF) NO se puede usar aqui: sobre blanco da       */
/* 2,6:1 y no llega ni a AA. Es el mismo motivo por el que el boton     */
/* «BUSCAR» del hero lleva tinta negra y no blanca.                     */
/* ==================================================================== */

/*
 * EL ANCHO DEL BOTON, EN UN SOLO SITIO.
 *
 * De el salen el tamano del boton Y el `padding-right` que le reserva el hueco
 * al campo. Escrito dos veces, el dia que alguien ajuste uno el texto empezaria
 * a pasar por debajo del boton sin que nadie lo note hasta verlo con una
 * busqueda larga ya escrita.
 *
 * 60px caben las dos letras («IA» en espanol, «AI» en ingles) con su icono y su
 * relleno, y el minimo de 44px de diana tactil queda cubierto de sobra.
 */
.lt-hero.lt-hero .lt-hero__buscador,
.lt-cabecera__buscador {
  --lt-ia-ancho: 60px;
  --lt-ia-alto: 44px;   /* 44 REALES: es un <button> de 44px, no un ::after */
}

/* --- 12.1 · El boton, en cualquiera de los dos buscadores ----------- */

.lt-hero__ia,
.lt-buscador__ia {
  /* Nace escondido: sin `.lt-js` no se llega nunca a `display: inline-flex`. */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;

  /*
   * `flex: none` NO es de adorno, es un fallo medido: dentro de la fila flex
   * del cajon el boton se encogia a 58,8px porque `flex-shrink` vale 1 por
   * omision. Un pixel no importa; que el ancho dependa de lo que quepa al lado,
   * si — con una traduccion mas larga o un campo mas ancho seguiria encogiendo
   * hasta dejar la diana tactil por debajo de los 44px.
   */
  flex: none;

  /*
   * Con respaldo escrito: si el boton acabara algun dia fuera de los dos
   * buscadores que declaran las variables, `var()` sin respaldo dejaria
   * `width` invalido y el navegador lo resolveria como `auto` — un boton de
   * 30px de alto que ya no cumple la diana tactil, y sin ningun aviso.
   */
  width: var(--lt-ia-ancho, 60px);
  height: var(--lt-ia-alto, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pildora, 999px);

  background: var(--marca, #295091);
  color: var(--blanco, #FFFFFF);

  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: var(--peso-fuerte, 700);
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;

  transition: background-color var(--transicion, 200ms ease);
}

.lt-js .lt-hero__ia { display: inline-flex; }

.lt-hero__ia:hover,
.lt-buscador__ia:hover {
  background: var(--marca-oscuro, #1B3A6B);
}

/*
 * El anillo de foco va NEGRO y no azul: el boton ya es azul y un anillo del
 * mismo color encima de el no se ve. Sobre el campo blanco, la tinta del sitio
 * da 18:1 — se ve incluso con el sol de frente, que es como se usa un telefono
 * en Texas.
 */
.lt-hero__ia:focus-visible,
.lt-buscador__ia:focus-visible {
  outline: 3px solid var(--tinta, #0B1220);
  outline-offset: 2px;
}

.lt-hero__ia-icono,
.lt-buscador__ia-icono {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .lt-hero__ia,
  .lt-buscador__ia { transition: none; }
}

/*
 * Modo de contraste alto de Windows: los rellenos se sustituyen por los colores
 * del sistema y un boton sin borde desaparece dentro del campo.
 */
@media (forced-colors: active) {
  .lt-hero__ia,
  .lt-buscador__ia { border: 1px solid ButtonText; }
}

@media print {
  .lt-hero__ia,
  .lt-buscador__ia { display: none; }
}

/* --- 12.2 · Dentro del buscador del HERO ---------------------------- */

/*
 * LA CAJA DEL CAMPO. Transparente y sin alto propio: el alto se lo da el
 * <input> que lleva dentro, que sigue siendo quien pinta la pildora blanca.
 * Asi los dos altos que ya existen —54px en escritorio, 52px por debajo de
 * 768px— siguen viviendo en UNA sola regla, la de siempre, y este bloque no
 * tiene que repetirlos ni mantenerlos sincronizados.
 *
 * `grid-area: campo` se muda del <input> a la caja porque ahora es ella la hija
 * de la rejilla; la declaracion vieja sobre el <input> se queda donde esta y el
 * navegador la ignora sin mas (un `grid-area` sobre algo que no es hijo de una
 * rejilla no hace nada).
 */
.lt-hero.lt-hero .lt-hero__campo-caja {
  grid-area: campo;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;   /* sin esto un <input> dentro de una rejilla no encoge */
}

.lt-hero.lt-hero .lt-hero__campo-caja .lt-hero__campo {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/*
 * EL HUECO DEL BOTON LO RESERVA EL CAMPO, no un margen.
 *
 * Es lo que garantiza —por modelo de caja, no por suerte— que ni el texto que
 * se escribe ni el marcador de posicion ni el cursor puedan pasar por debajo
 * del boton. 5px de separacion al borde + el ancho + 11px de aire.
 *
 * Especificidad: (0,4,0) con `.lt-js` delante, contra los (0,3,0) de la regla
 * de `.lt-hero__campo` de la seccion 5. Gana esta, que es lo que se busca, y
 * sin un solo !important.
 */
.lt-js .lt-hero.lt-hero .lt-hero__campo-caja .lt-hero__campo {
  padding-right: calc(var(--lt-ia-ancho, 60px) + 16px);
}

.lt-hero.lt-hero .lt-hero__ia {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- 12.3 · Dentro del buscador del CAJON del movil ----------------- */

/*
 * AQUI NO HACE FALTA POSICIONAR NADA. `.lt-buscador__caja` (estructura.css) ya
 * es una fila flex —campo, y a la derecha la lupa— y el boton se mete dentro de
 * esa fila como un hermano mas: el campo encoge solo y el texto no puede quedar
 * debajo de nada. Lo inserta header.php, justo antes de la lupa.
 *
 * SOLO EN EL CAJON, Y ESO ES LITERAL. El dueno pidio el boton «dentro del
 * buscador que esta dentro del menu canvas del celular». Ese mismo formulario
 * es, por encima de 1320px, la cajita de la barra de escritorio, que mide
 * 210px: meterle otro boton de 60px dejaria el campo en poco mas de cien y
 * romperia lo que hoy funciona. Las dos condiciones de la consulta son
 * exactamente las que usa estructura.css para convertir el panel en cajon:
 * `.lt-js` y `max-width: 1320px`. Si un dia se mueve ese punto de corte, hay
 * que mover este tambien o el boton aparecera donde no cabe.
 */
@media (max-width: 1320px) {
  .lt-js .lt-cabecera__panel .lt-buscador__ia { display: inline-flex; }

  /*
   * La caja crece de 44 a 50px de alto para dar cabida a los 44 REALES del
   * boton (3px de relleno arriba y abajo). Es el cajon del movil: hay sitio de
   * sobra, y una diana tactil recortada a 38px es justo lo que no se quiere.
   */
  .lt-js .lt-cabecera__panel .lt-buscador__caja { padding-block: 3px; }
}


/* ==================================================================== */
/* ACCESOS POR TANDAS — solo en telefono. 2026-08-15                    */
/*                                                                      */
/* JS: assets/js/hero-accesos.js                                        */
/*                                                                      */
/* Lo pidio el dueno: «en celular, en vez de que sea un deslizable,     */
/* quiero que aparezcan de tandas como de a 2 o de a 3, del ancho de la */
/* caja de contenido, y desaparezcan y aparezcan con un fade».          */
/*                                                                      */
/* SUSTITUYE AL DESLIZABLE de mas arriba en esta misma hoja, que dejaba */
/* los accesos en una fila con scroll horizontal. El problema de aquello*/
/* no era el gusto: lo que no se ve no existe, y de seis accesos solo se*/
/* veian dos y medio salvo que a alguien se le ocurriera arrastrar.     */
/*                                                                      */
/* VA AL FINAL DE LA HOJA A PROPOSITO. El bloque del deslizable usa     */
/* `.lt-hero.lt-hero .lt-hero__accesos` — la misma especificidad (0,3,0)*/
/* que estas reglas. Con la especificidad empatada gana el que se       */
/* escribe DESPUES, y estar dentro de un @media no puntua. Escrito      */
/* arriba, esto no haria absolutamente nada. Ya paso en esta hoja con   */
/* otro bloque y esta avisado unas lineas mas arriba.                   */
/* ==================================================================== */

@media (max-width: 768px) {

  /*
   * SIN JAVASCRIPT SE VEN LOS SEIS. Esta es la base, y es la que manda cuando
   * el guion no corre o cuando la persona pidio menos movimiento: dos columnas,
   * todos visibles, nada que se mueva. La rotacion se enciende encima.
   */
  .lt-hero.lt-hero .lt-hero__accesos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    /* Se deshace el deslizable de mas arriba. */
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .lt-hero.lt-hero .lt-hero__acceso {
    /* Al ancho de su columna, que es «el ancho de la caja» que pidio el dueno. */
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /*
   * CON JAVASCRIPT: la clase la pone el guion, asi que estas reglas solo existen
   * cuando de verdad hay rotacion. Las dos tandas ocupan la MISMA fila —una fila
   * fija de dos huecos— para que al cambiar no salte el alto de la pagina y el
   * resto del hero no baile.
   */
  .lt-hero.lt-hero .lt-hero__accesos--tandas {
    grid-template-rows: auto;
  }

  /*
   * TODAS LAS TANDAS EN LA MISMA FILA. Arreglado el 2026-08-16.
   *
   * Esto es lo que el comentario de arriba decia que pasaba y NO pasaba. El
   * dueno lo vio en su telefono: «sigue saltando».
   *
   * MEDIDO en un iPhone simulado: el bloque de accesos iba de 65 px a 140 px y
   * de vuelta, cada tres segundos, y con el saltaba TODO lo que hay debajo
   * —la cinta, la vitrina, la portada entera—.
   *
   * El motivo: durante el fundido las dos tandas estan en el flujo, o sea
   * cuatro fichas en una rejilla de dos columnas, o sea DOS filas. Al terminar
   * el fundido el guion le pone `hidden` a la que se va, esa sale del flujo, y
   * la rejilla vuelve a una fila. De 140 a 65 en un fotograma.
   *
   * Con fila y columna fijas, las tandas se apilan una encima de otra en vez de
   * ponerse en cola: la rejilla mide siempre una fila, pase lo que pase con el
   * fundido. Impar a la izquierda y par a la derecha reparte cada tanda de dos
   * en las dos columnas, que es como iban.
   */
  .lt-hero.lt-hero .lt-hero__accesos--tandas > li {
    grid-row: 1;
    transition: opacity .38s ease;
  }

  .lt-hero.lt-hero .lt-hero__accesos--tandas > li:nth-child(odd)  { grid-column: 1; }
  .lt-hero.lt-hero .lt-hero__accesos--tandas > li:nth-child(even) { grid-column: 2; }

  /*
   * LA TANDA QUE SE VA: transparente. El guion le pone `hidden` cuando termina
   * el desvanecido, y eso es lo que de verdad la saca del tabulador y de los
   * toques. La opacidad sola dejaria enlaces invisibles que se pueden pulsar.
   */
  .lt-hero.lt-hero .lt-hero__acceso-tanda--fuera {
    opacity: 0;
    pointer-events: none;
  }
}

/*
 * MENOS MOVIMIENTO: no se rota y punto. El guion ya no enciende la rotacion,
 * pero esto lo deja escrito tambien en la hoja por si el guion no llega a
 * cargar: sin transicion, nada parpadea.
 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .lt-hero.lt-hero .lt-hero__accesos--tandas > li {
    transition: none;
  }
}