:root {
  /* Brand */
  --hx-color-primary: #9dbbe5;
  --hx-color-accent: #efce8c;
  /* Variante oscura accesible del azul de marca: texto pequeño sobre fondos
     claros (5,75:1 sobre blanco, 5,19:1 sobre soft). El primario #9dbbe5 solo
     da 1,97:1 y NO debe usarse como color de texto sobre claro. */
  --hx-color-primary-ink: #42679c;
  /* Backgrounds */
  --hx-color-background: #ffffff;
  --hx-color-background-soft: #f6f3eb;
  /* Neutrals */
  --hx-color-slate: #334155;
  --hx-color-muted: #5f5f5f;
  --hx-color-dark: #1e293b;
  --hx-color-deep: #0f172a;
  --hx-color-black: #000000;
  --hx-color-white: #ffffff;
  /* Fonts */
  --hx-font-display: "Satoshi", "Satoshi Fallback", system-ui, sans-serif;
  --hx-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  /* Semantic */
  --hx-text-primary: var(--hx-color-deep);
  --hx-text-secondary: var(--hx-color-slate);
  --hx-text-muted: var(--hx-color-muted);
  --hx-surface: var(--hx-color-background);
  --hx-surface-soft: var(--hx-color-background-soft);
  /* Layout */
  --hx-maxw: 1200px;
  --hx-gutter: clamp(1rem, 4vw, 2.5rem);
  --hx-section-y: clamp(3.5rem, 8vw, 7rem);
  --hx-radius: 14px;
  /* Depth — sombras semánticas derivadas del azul profundo de marca */
  --hx-shadow-sm: 0 2px 10px -4px color-mix(in srgb, var(--hx-color-deep) 30%, transparent);
  --hx-shadow-card: 0 16px 36px -24px color-mix(in srgb, var(--hx-color-deep) 45%, transparent);
  --hx-shadow-float: 0 24px 56px -28px color-mix(in srgb, var(--hx-color-deep) 50%, transparent);
  --hx-shadow-dark: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  /* Grano fino reutilizable (rompe el banding de degradados oscuros) */
  --hx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}
/* Fallback métrico de Satoshi: mientras la variable carga, Arial se dibuja
   ocupando el mismo espacio (o más). Evita el CLS que produce el reflow del
   swap de fuente (0.233 medido en Lighthouse CI en /contacto/, causa "Web
   font loaded") además de estabilizar el paint del h1.
   Métricas medidas con fontkit sobre Satoshi-Variable.woff2 vs Arial.
   Liberation Sans es la métrica-compatible de Arial presente en los runners
   Linux del CI (donde Arial no existe). */
@font-face {
  font-family: "Satoshi Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
  size-adjust: 107.76%;
  ascent-override: 93.73%;
  descent-override: 22.27%;
  line-gap-override: 9.28%;
}
/* Fallback métrico de Inter (cuerpo): mismas razones y método que el de
   Satoshi — el hero de /contacto/ también reflowa cuando Inter llega. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
  size-adjust: 106.26%;
  ascent-override: 91.17%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/*
  En la landing, este archivo acaba concatenado en assets/estilos.css y las
  tipografías viven en assets/fonts/. Las rutas son RELATIVAS a propósito:
  index.html se abre con doble clic y una ruta /fonts/… no resuelve bajo file://.
*/
/* ==========================================================================
   1. Tokens semánticos del kit
   Se suman a los de tokens.css, que no se toca. Todos derivan de la paleta
   oficial: el único color nuevo es el de error, el mismo que usa hoy el
   formulario de humix.es.
   ========================================================================== */
:root {
  --hx-text-on-dark: var(--hx-color-white);
  --hx-text-on-dark-soft: color-mix(in srgb, var(--hx-color-white) 80%, var(--hx-color-deep));
  --hx-color-error: #c0392b;
  --hx-border: color-mix(in srgb, var(--hx-color-slate) 22%, transparent);
  --hx-focus-ring: var(--hx-color-primary-ink);
  --hx-header-h: 4.5rem;
  --hx-radius-sm: 8px;
  --hx-radius-lg: 24px;
  --hx-radius-pill: 999px;
  --hx-gap: clamp(1rem, 3vw, 2rem);
  --hx-size-meta: 0.8125rem;
  --hx-size-nota: 0.8125rem;
  --hx-size-eyebrow: 0.8125rem;
  --hx-size-nav: 0.9375rem;
  --hx-size-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --hx-size-lead: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --hx-size-h2: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --hx-size-h1: clamp(2.125rem, 1.4rem + 3.6vw, 4rem);
  --hx-tracking-display: -0.02em;
  --hx-tracking-eyebrow: 0.08em;
}

/* ==========================================================================
   2. Base: reset, tipografía, medios, layout, foco y movimiento reducido
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*
  La cabecera es fija y mide --hx-header-h. scroll-padding reserva ese alto en
  todo desplazamiento que haga el navegador: el salto a un ancla y, sobre todo,
  el que hace para enseñar el elemento que recibe el foco al navegar con Tab o
  Mayús+Tab. Sin esto, un enlace o un campo más bajo que la cabecera se queda
  entero debajo de ella al recibir el foco (WCAG 2.2, SC 2.4.11). Una regla
  aparte para el destino de un ancla solo cubriría el salto a ese ancla, y
  sumada a esta duplicaría el hueco: por eso no existe.
*/
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--hx-header-h) + 1rem);
}

body {
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-body);
  color: var(--hx-text-primary);
  background: var(--hx-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
}

/* Satoshi para h1 y h2; el h3 es funcional y va en Inter 600 (MARCA.md §1). */
h1,
h2 {
  font-family: var(--hx-font-display);
}

h3 {
  font-family: var(--hx-font-body);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

/*
  `height: auto` no es redundante: los atributos `width` y `height` de <img>
  son sugerencias de presentación para las propiedades CSS del mismo nombre,
  no solo una pista de proporción. El kit los exige siempre (es lo que evita
  el CLS), así que un componente que ponga `width: 100%` sin tocar la altura
  se encontraría con que sigue mandando el atributo. Con `height: auto`, la
  altura vuelve a salir de la proporción.
*/
img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
}

/*
  Anillo de foco: --hx-focus-ring vale el azul de marca oscuro (5,75:1 sobre
  blanco). El azul primario a secas da 1,97:1 sobre blanco y no llega al 3:1
  de contraste no textual del SC 1.4.11; por eso solo se usa sobre tinta
  (.hx-tinta lo redefine). El valor por defecto solo garantiza 3:1 sobre
  blanco y soft: un componente sobre otro fondo lo redefine (MARCA.md §4).
*/
:focus-visible {
  outline: 3px solid var(--hx-focus-ring);
  outline-offset: 2px;
}

.hx-container {
  width: 100%;
  max-width: var(--hx-maxw);
  margin-inline: auto;
  padding-inline: var(--hx-gutter);
}

.hx-section {
  padding-block: var(--hx-section-y);
}

.hx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hx-color-deep);
  color: var(--hx-text-on-dark);
  padding: 0.75rem 1rem;
  z-index: 100;
}

/* Al recibir el foco pasa por encima de la cabecera fija (100) y del banner de
   cookies (200): es el primer destino del teclado y no puede quedar tapado. */
.hx-skip-link:focus {
  left: 0;
  z-index: 300;
}

/* Movimiento reducido. Único sitio del kit con !important: tiene que ganar a
   cualquier transición o animación que declare una sección. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   3. Superficies, accesibilidad y revelado
   ========================================================================== */

/*
  Superficie de tinta: panel oscuro dentro de una sección clara. Es global, y
  no la escribe cada sección, porque redefine --hx-focus-ring y esa variable
  tiene que heredarse a TODO lo interactivo que quede dentro. El azul de marca
  oscuro sobre el azul profundo da 3,10:1 y se queda corto de margen; el azul
  primario da 9,07:1.
*/
.hx-tinta {
  background: var(--hx-color-deep);
  color: var(--hx-text-on-dark);
  --hx-focus-ring: var(--hx-color-primary);
}

/*
  Visible solo para lectores de pantalla. clip-path y no display:none ni
  visibility:hidden: esos dos sacan el elemento del árbol de accesibilidad,
  que es justo lo contrario de lo que se busca. El elemento sigue siendo
  enfocable y operable con teclado.
*/
.hx-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* El destino del salto de contenido tiene que poder recibir el foco de verdad;
   sin esto, algunos navegadores mueven el punto de tabulación pero no el foco. */
main:focus {
  outline: none;
}

/* La landing no tiene variante de hero oscuro con cabecera transparente: el
   <main> siempre empieza por debajo de la cabecera fija. */
.hx-main {
  padding-block-start: var(--hx-header-h);
}

/*
  Revelado: visible por defecto. La clase .hx-reveal-armado la pone landing.js
  solo si hay JS y el usuario no pide movimiento reducido, y nunca a lo que ya
  está en pantalla: si el script falla, la página se ve entera.
  Sin will-change: aplicado en manta promociona decenas de elementos a capas
  del compositor desde el primer paint y Chrome deja de emitir candidatos LCP
  (NO_LCP en Lighthouse). Los estados ocultos animan solo transform y opacity.
*/
[data-reveal] {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

[data-reveal].hx-reveal-armado {
  opacity: 0;
  transform: translateY(16px);
}

[data-reveal].hx-reveal-armado.hx-reveal-visible {
  opacity: 1;
  transform: none;
}
/*
  componentes.css — la parte INVARIANTE de una landing.

  Esto NO es el CSS de una página. Aquí solo viven los bloques que se copian
  igual en todas las landings —cabecera, botones, banner de consentimiento,
  formulario, cierre de conversión, flotante de WhatsApp, pie y página de
  gracias— con el marcado exacto que documenta COMPONENTES.md.

  El layout de las secciones de contenido (hero, contexto local, FAQ, banda de
  énfasis…) NO va aquí: eso lo escribe Claude en cada generación, al final de
  assets/estilos.css (nunca en un <style> dentro de index.html), apoyado en
  marca/tokens.css y marca/base.css. Meter aquí un estilo de sección sería
  justo el mecanismo por el que todas las landings acaban pareciéndose. Las
  únicas piezas de sección que sí viven aquí son las primitivas del
  encabezado (bloque 9), porque son iguales en todas.

  Este archivo se carga DESPUÉS de marca/base.css: usa sus tokens y sus clases
  globales (.hx-container, .hx-section, .hx-tinta, .hx-solo-lector,
  :focus-visible) sin volver a declararlas. Toda custom property que lee viene
  de marca/tokens.css o de marca/base.css, o se define aquí mismo en el
  selector del componente que la usa; ninguna se define en :root.

  Escalafón de capas, de arriba abajo: enlace de salto (300, en base.css) ·
  banner de consentimiento (200) · cabecera (100) · flotante de WhatsApp (80).
  No hay menú móvil en una landing de una sola página, así que no existe el
  hueco intermedio que usa el sitio principal.

  Anillo de foco por superficie (marca/MARCA.md §4). El de por defecto
  (--hx-focus-ring) solo vale sobre blanco, suave y dorado. Todo componente
  que pinte su propia superficie, o que flote sobre una cualquiera, lo
  redefine en su clase: el banner (azul profundo), el panel del formulario
  (siempre claro, aunque la sección que lo envuelve sea una .hx-tinta) y el
  flotante de WhatsApp.
*/

/* ── 1. Cabecera ────────────────────────────────────────────────────────────
   Fija desde el primer píxel y SIEMPRE sólida: la landing no tiene variante
   de hero oscuro con cabecera transparente (ver la nota junto a .hx-main en
   base.css). Una sola apariencia, sin JS para mantenerla.

   Con la cabecera fija, .hx-main ya reserva su alto en base.css
   (padding-block-start: var(--hx-header-h)) — no lo repitas aquí. */
.hx-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  border-block-end: 1px solid var(--hx-border);
  background: var(--hx-surface);
  color: var(--hx-text-primary);
}

.hx-header__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hx-gap);
  min-height: var(--hx-header-h);
}

/*
  El logotipo es el bitmap de marca/ (logo-h96.png a 1x, logo-h192.png a 2x),
  como el de humix.es: se dimensiona por ALTO y el ancho lo sigue por la
  proporción de los atributos width y height del marcado, así que reserva su
  sitio antes de cargar (CLS cero). 44 px de alto son también el objetivo
  táctil mínimo del enlace (marca/MARCA.md §7).
*/
.hx-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  color: inherit;
}

.hx-header__marca {
  display: block;
  width: auto;
  height: 2.75rem;
}

.hx-header__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*
  El teléfono es un CTA y no desaparece nunca en España: por debajo de 36 rem
  queda reducido a su icono, un enlace de 44 × 44 px cuyo nombre accesible lo
  pone el aria-label del marcado («Llamar al +34 682 827 655»); a partir de
  36 rem muestra también el número. El CTA conserva el espacio que necesita
  (a 320 px, logotipo + icono + CTA ocupan los 288 px útiles). En
  Centroamérica el teléfono es el canal secundario y el CTA es WhatsApp, más
  ancho: el marcado le añade .hx-header__telefono--ancho y solo aparece desde
  36 rem; por debajo, el mismo número, con su enlace, está en el cierre.
*/
.hx-header__telefono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  color: var(--hx-text-primary);
  font-size: var(--hx-size-nav);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hx-header__telefono--ancho {
  display: none;
}

.hx-header__telefono-icono {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.hx-header__telefono-texto {
  display: none;
}

@media (min-width: 36rem) {
  .hx-header__acciones {
    gap: 1rem;
  }

  .hx-header__telefono--ancho {
    display: inline-flex;
  }

  .hx-header__telefono-texto {
    display: inline;
  }
}

@media (hover: hover) {
  .hx-header__telefono:hover {
    color: var(--hx-color-primary-ink);
  }
}

/* El CTA de la cabecera es un .hx-boton normal (ver §2): esta regla solo
   ajusta su tamaño de fuente al de la navegación que tiene al lado. Acotada a
   .hx-header__acciones para no reajustar el resto de botones de la página. */
.hx-header__acciones .hx-boton {
  padding-inline: 0.9rem;
  font-size: var(--hx-size-nav);
}

@media (min-width: 36rem) {
  .hx-header__acciones .hx-boton {
    padding-inline: 1.1rem;
  }
}

/* ── 2. Botón — primitiva compartida ────────────────────────────────────────
   .hx-boton es el ÚNICO botón o enlace con apariencia de botón de todo el
   kit: lo usan la cabecera, el banner, el formulario, el cierre de conversión
   y cualquier CTA que Claude añada al construir una sección. Los tres
   modificadores son .hx-boton--primaria, .hx-boton--secundaria y
   .hx-boton--wasap.

   Cada modificador solo define cuatro custom properties locales
   (--hx-boton-fondo, -borde, -texto y los dos de hover) y .hx-boton las
   pinta: así hover, activo, deshabilitado y carga se escriben UNA vez, y un
   fondo oscuro cambia de variante sin duplicar ningún estado.

   Pareja color + fondo (marca/MARCA.md §3 y §4):
   - primaria: texto blanco sobre azul profundo, 17,85:1. Sobre una superficie
     oscura (.hx-tinta o el banner) se invierte: texto azul profundo sobre
     blanco, 17,85:1.
   - secundaria: texto y borde en el azul de texto sobre claro, 5,75:1 sobre
     blanco y 5,19:1 sobre suave. Sobre oscuro se invierte a blanco.
   - wasap: texto azul profundo sobre el verde de WhatsApp, 9,00:1. El blanco
     daría 1,98:1. */
.hx-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Cubre el mínimo táctil de 44 px (marca/MARCA.md §7) aunque el texto sea
     corto. */
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--hx-boton-borde, transparent);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-boton-fondo, transparent);
  color: var(--hx-boton-texto, var(--hx-text-primary));
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.hx-boton--primaria {
  --hx-boton-fondo: var(--hx-color-deep);
  --hx-boton-borde: var(--hx-color-deep);
  --hx-boton-texto: var(--hx-text-on-dark);
  /* Pizarra: blanco sobre ella da 10,35:1 y se distingue del azul profundo. */
  --hx-boton-fondo-hover: var(--hx-color-slate);
  --hx-boton-borde-hover: var(--hx-color-slate);
}

.hx-boton--secundaria {
  --hx-boton-fondo: transparent;
  --hx-boton-borde: var(--hx-color-primary-ink);
  --hx-boton-texto: var(--hx-color-primary-ink);
  /* Un velo del 15 % del azul de marca: el texto conserva 4,7:1 o más sobre
     blanco y sobre suave. */
  --hx-boton-fondo-hover: color-mix(in srgb, var(--hx-color-primary) 15%, transparent);
  --hx-boton-borde-hover: var(--hx-color-primary-ink);
}

/* El verde de WhatsApp es de marca AJENA: vive aquí, en el selector que lo
   usa, y no en tokens.css. Meterlo entre los tokens invitaría a reutilizarlo
   donde no pinta nada. */
.hx-boton--wasap {
  --hx-wasap-verde: #25d366;
  --hx-wasap-verde-hover: #1fb757;
  --hx-boton-fondo: var(--hx-wasap-verde);
  --hx-boton-borde: var(--hx-wasap-verde);
  --hx-boton-texto: var(--hx-color-deep);
  /* Azul profundo sobre el verde de hover: 6,77:1. */
  --hx-boton-fondo-hover: var(--hx-wasap-verde-hover);
  --hx-boton-borde-hover: var(--hx-wasap-verde-hover);
}

/* Sobre una superficie oscura el relleno y el texto se invierten. Va después
   de los modificadores y con más especificidad, y las dos variantes cubren
   tanto la .hx-tinta global como el banner, que pinta su propio fondo. */
.hx-tinta .hx-boton--primaria,
.hx-consent .hx-boton--primaria {
  --hx-boton-fondo: var(--hx-color-white);
  --hx-boton-borde: var(--hx-color-white);
  --hx-boton-texto: var(--hx-color-deep);
  /* Azul primario con texto azul profundo: 9,07:1. */
  --hx-boton-fondo-hover: var(--hx-color-primary);
  --hx-boton-borde-hover: var(--hx-color-primary);
}

.hx-tinta .hx-boton--secundaria,
.hx-consent .hx-boton--secundaria {
  --hx-boton-borde: color-mix(in srgb, var(--hx-text-on-dark) 55%, transparent);
  --hx-boton-texto: var(--hx-text-on-dark);
  --hx-boton-fondo-hover: color-mix(in srgb, var(--hx-text-on-dark) 12%, transparent);
  --hx-boton-borde-hover: var(--hx-text-on-dark);
}

@media (hover: hover) {
  .hx-boton:hover:not(:disabled, [aria-disabled="true"]) {
    border-color: var(--hx-boton-borde-hover, var(--hx-boton-borde, transparent));
    background: var(--hx-boton-fondo-hover, var(--hx-boton-fondo, transparent));
  }
}

/* En táctil no hay hover: el pulsado cambia de color Y se hunde un píxel. */
.hx-boton:active:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--hx-boton-borde-hover, var(--hx-boton-borde, transparent));
  background: var(--hx-boton-fondo-hover, var(--hx-boton-fondo, transparent));
  transform: translateY(1px);
}

.hx-boton:disabled,
.hx-boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/*
  Cargando. landing.js pone disabled y aria-busy="true" a la vez y cambia el
  texto a «Enviando…» con textContent, así que el indicador se añade como
  ::before y nunca compite con ese texto por el mismo nodo. Va DESPUÉS de la
  regla de :disabled y tiene su misma especificidad: devuelve la opacidad
  completa, porque un botón que se ve apagado mientras trabaja parece roto.
  La rotación respeta prefers-reduced-motion a través de la regla global de
  base.css (reduce la duración a 0,01 ms): el texto «Enviando…» sigue
  diciendo lo mismo sin movimiento.
*/
.hx-boton[aria-busy="true"] {
  opacity: 1;
  cursor: progress;
}

.hx-boton[aria-busy="true"]::before {
  content: "";
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid color-mix(in srgb, currentcolor 30%, transparent);
  border-block-start-color: currentcolor;
  border-radius: 50%;
  animation: hx-girar 0.7s linear infinite;
}

@keyframes hx-girar {
  to {
    transform: rotate(360deg);
  }
}

.hx-boton__icono {
  display: block;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}

@media (prefers-reduced-motion: reduce) {
  .hx-boton:active:not(:disabled, [aria-disabled="true"]) {
    transform: none;
  }
}

/* ── 3. Banner de consentimiento ────────────────────────────────────────────
   Decisiones ya tomadas, con su motivo:

   - `position: fixed` desde el primer píxel. No participa del flujo, luego
     su CLS es cero por CONSTRUCCIÓN y no por medición.
   - SIEMPRE oscuro, aparezca sobre la sección que aparezca: es una capa
     superpuesta, no contenido de la página.
   - z-index 200: por encima de la cabecera (100) y del flotante de WhatsApp
     (80), y por debajo del enlace de salto (300) cuando recibe el foco.
   - Dos capas. La primera (.hx-consent__capa) ofrece Aceptar, Rechazar y
     Configurar; la segunda (.hx-consent__panel) ofrece una casilla por
     finalidad. Aceptar y Rechazar pesan LO MISMO: los dos son
     .hx-boton--primaria, con mismo tamaño, tipografía, área táctil y radio.
     Rechazar tiene que ser tan fácil como aceptar: es la condición de que
     este diseño de consentimiento no sea un patrón oscuro, no un detalle de
     estilo. Configurar es .hx-boton--secundaria: abre, no decide.
   - Redefine --hx-focus-ring al azul primario, que sobre el azul profundo
     da 9,07:1 (el de por defecto da 3,10:1, sin margen). El :focus-visible
     global de base.css ya lee la variable: no hace falta una regla propia.
   - color-scheme: dark pinta las casillas nativas del panel con borde claro,
     visible sobre el fondo oscuro. */
.hx-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 200;
  /* Con el panel abierto el banner crece: nunca más de la pantalla, y la
     cabecera sigue a la vista. Lo que sobre se desplaza dentro del banner. */
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: clamp(1rem, 3vw, 1.5rem);
  padding-block-end: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--hx-gutter);
  border-block-start: 1px solid color-mix(in srgb, var(--hx-text-on-dark) 20%, transparent);
  background: var(--hx-color-deep);
  box-shadow: 0 -18px 40px -28px rgb(0 0 0 / 65%);
  color: var(--hx-text-on-dark);
  color-scheme: dark;
  --hx-focus-ring: var(--hx-color-primary);
}

/* El banner recibe el foco por script cuando se reabre desde «Gestionar
   cookies». Su anillo va DENTRO del borde (offset negativo): el banner pega con
   los bordes de la pantalla y un anillo exterior se recortaría. Sobre el azul
   profundo, el azul primario da 9,07:1. */
.hx-consent:focus-visible {
  outline-offset: -5px;
}

/* Salvaguarda explícita: sin ella, si algún día .hx-consent gana su propio
   `display`, esa regla empataría en especificidad con el estilo nativo de
   [hidden] y, según el orden de las hojas, podría ganar y dejar el banner
   visible de nacimiento — justo el parpadeo que hidden existe para evitar. */
.hx-consent[hidden],
.hx-consent__panel[hidden] {
  display: none;
}

/* El ancho útil coincide con el de .hx-container (ancho máximo menos los dos
   márgenes laterales), para que el texto del banner alinee con el de la
   página. */
.hx-consent__capa {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: calc(var(--hx-maxw) - 2 * var(--hx-gutter));
  margin-inline: auto;
}

.hx-consent__titulo {
  font-size: var(--hx-size-nav);
  font-weight: 600;
  /* Dorado sobre azul profundo: 11,80:1 (marca/MARCA.md §3). */
  color: var(--hx-color-accent);
}

.hx-consent__cuerpo {
  max-width: 68ch;
  margin-block-start: 0.35rem;
  font-size: var(--hx-size-nav);
  line-height: 1.55;
  /* 11,67:1 sobre el azul profundo. */
  color: var(--hx-text-on-dark-soft);
}

.hx-consent__enlace {
  color: var(--hx-text-on-dark);
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .hx-consent__enlace:hover {
    color: var(--hx-color-accent);
  }
}

.hx-consent__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hx-consent__acciones .hx-boton {
  flex: 1 1 8rem;
  padding-inline: 1rem;
  font-size: var(--hx-size-nav);
}

/* Segunda capa. Se pliega y se despliega con el atributo hidden: landing.js
   decide qué hacer según `panel.hasAttribute("hidden")`, así que el marcado
   nace con él. */
.hx-consent__panel {
  max-width: calc(var(--hx-maxw) - 2 * var(--hx-gutter));
  margin-block-start: 1.25rem;
  margin-inline: auto;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid color-mix(in srgb, var(--hx-text-on-dark) 20%, transparent);
}

.hx-consent__finalidades {
  min-width: 0;
  padding: 0;
  border: 0;
}

.hx-consent__leyenda {
  margin-block-end: 0.5rem;
  padding: 0;
  font-size: var(--hx-size-nav);
  font-weight: 600;
  color: var(--hx-text-on-dark);
}

/* La fila entera es el <label> y mide al menos 44 px: ese es el objetivo
   táctil de la casilla (que mide 24 px, el mínimo del SC 2.5.8 por sí sola).
   La casilla va DENTRO del label, sin `for`: pulsar en cualquier parte de la
   fila la marca. */
.hx-consent__opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding-block: 0.5rem;
  cursor: pointer;
}

.hx-consent__casilla {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--hx-color-primary);
  cursor: pointer;
}

.hx-consent__nombre {
  display: block;
  font-weight: 600;
  color: var(--hx-text-on-dark);
}

.hx-consent__detalle {
  display: block;
  font-size: var(--hx-size-nav);
  line-height: 1.5;
  color: var(--hx-text-on-dark-soft);
}

.hx-consent__panel .hx-consent__acciones {
  margin-block-start: 1rem;
}

@media (min-width: 48rem) {
  .hx-consent__capa {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .hx-consent__acciones {
    flex-shrink: 0;
  }

  .hx-consent__acciones .hx-boton {
    flex: 0 0 auto;
    padding-inline: 1.5rem;
  }
}

/* ── 4. Formulario ───────────────────────────────────────────────────────────
   .hx-form-panel es el envoltorio de superficie SIEMPRE clara: el formulario
   asume texto oscuro sobre fondo claro, también cuando la sección que lo
   contiene es oscura (el cierre de conversión, típicamente). Quien coloca el
   formulario pinta la sección; esta tarjeta pinta su propio fondo y no
   depende de lo que haya alrededor.

   Redefine --hx-focus-ring al azul de texto sobre claro (5,75:1 sobre
   blanco). Dentro de una .hx-tinta el anillo heredado es el azul primario, y
   sin este ancla cada campo, el select y el botón de envío pintarían un
   anillo de 1,97:1 sobre un panel blanco: casi invisible. */
.hx-form-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--hx-radius-lg);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-card);
  color: var(--hx-text-primary);
  --hx-focus-ring: var(--hx-color-primary-ink);
}

/* El botón de envío es un .hx-boton--primaria y esta tarjeta es clara: dentro
   de una .hx-tinta se invertiría a blanco sobre blanco. Se restituye aquí,
   con la misma especificidad que la inversión y DESPUÉS de ella. */
.hx-form-panel .hx-boton--primaria {
  --hx-boton-fondo: var(--hx-color-deep);
  --hx-boton-borde: var(--hx-color-deep);
  --hx-boton-texto: var(--hx-text-on-dark);
  --hx-boton-fondo-hover: var(--hx-color-slate);
  --hx-boton-borde-hover: var(--hx-color-slate);
}

.hx-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* La pista se declara también en móvil, no solo a partir de 560 px: sin ella
   la fila es una rejilla de una pista implícita cuyo mínimo automático es
   `min-content`, y el ancho intrínseco de un <input> puede desbordar la
   tarjeta en anchos estrechos. Con minmax(0, 1fr) el campo se estira a lo que
   haya y ese suelo deja de contar. */
.hx-form__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 560px) {
  .hx-form__fila {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hx-form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* El placeholder NO sustituye a esta etiqueta: cada campo lleva su <label>
   real (WCAG 2.2, SC 3.3.2). */
.hx-form__etiqueta {
  font-size: var(--hx-size-nav);
  font-weight: 600;
  color: var(--hx-text-secondary);
}

/* El borde es lo ÚNICO que delimita el control: el campo y el panel comparten
   el mismo fondo, así que el borde hace de contorno de un componente de
   interfaz y el SC 1.4.11 le exige 3:1. --hx-border (pizarra al 22 %) da
   1,47:1 y no llega. El azul de texto sobre claro da 5,75:1.
   El <select> lleva esta misma clase: mismo alto, mismo borde y mismo radio
   que los campos de texto. min-height y no height, para que una fuente más
   grande del usuario no recorte el texto. */
.hx-form__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--hx-color-primary-ink);
  border-radius: var(--hx-radius-sm);
  background: var(--hx-surface);
  color: var(--hx-text-primary);
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-body);
  line-height: 1.4;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

textarea.hx-form__control {
  min-height: 8rem;
  resize: vertical;
}

/* El hover oscurece el borde (el azul primario no llegaría al 3:1 sobre
   blanco): sigue siendo un cambio PERCEPTIBLE (marca/MARCA.md §7). */
@media (hover: hover) {
  .hx-form__control:hover {
    border-color: var(--hx-color-deep);
  }
}

.hx-form__control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error: borde en el color de error y un filete interior que lo engrosa sin
   mover el layout. Va después del hover para ganarle. El anillo de foco es un
   outline y no se toca: un campo inválido sigue mostrando dónde está el foco. */
.hx-form__control[aria-invalid="true"] {
  border-color: var(--hx-color-error);
  box-shadow: inset 0 0 0 1px var(--hx-color-error);
}

/* El error se distingue por texto Y por icono, nunca solo por color
   (marca/MARCA.md §4). landing.js escribe aquí con textContent: mientras el
   campo es válido, el nodo está vacío y no ocupa sitio. El color de error da
   5,44:1 sobre el panel blanco. Sin :empty, cada campo reservaría una línea
   en blanco. */
.hx-form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: var(--hx-size-meta);
  font-weight: 600;
  line-height: 1.4;
  color: var(--hx-color-error);
}

.hx-form__error:empty {
  display: none;
}

/* El segundo `content` es la versión con texto alternativo vacío, para que un
   lector de pantalla no lea «señal de advertencia» delante de cada mensaje. */
.hx-form__error::before {
  content: "\26a0\fe0e";
  content: "\26a0\fe0e" / "";
  flex-shrink: 0;
}

.hx-form__consentimiento {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* 24×24: el propio control ya cumple el mínimo de WCAG 2.2 AA (SC 2.5.8). El
   objetivo táctil de 44 px lo cubre el <label> de al lado, no la casilla: una
   de 44 px junto a dos líneas de texto se vería descolocada. No se anida el
   input dentro del label porque el enlace a la política de privacidad vive en
   ese mismo texto, y anidarlo haría ambiguo el clic sobre el enlace. */
.hx-form__casilla {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--hx-color-primary-ink);
  cursor: pointer;
}

/* La casilla inválida se rodea con un anillo del color de error. Es un
   box-shadow y no un outline para no pisar el anillo de foco. */
.hx-form__casilla[aria-invalid="true"] {
  box-shadow: 0 0 0 2px var(--hx-color-error);
}

.hx-form__consentimiento-texto {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--hx-size-nav);
  line-height: 1.5;
  color: var(--hx-text-secondary);
}

.hx-form__consentimiento-texto a {
  color: var(--hx-color-primary-ink);
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .hx-form__consentimiento-texto a:hover {
    color: var(--hx-color-deep);
  }
}

/*
  Aviso global: un fallo que no pertenece a ningún campo (red caída, el
  servidor, un campo oculto). Es un <p role="alert"> que nace en el marcado y
  SE QUEDA siempre en el árbol de accesibilidad: una región viva que se crea
  y se rellena en el mismo fotograma es el patrón clásico que algunos
  lectores no llegan a anunciar. Por eso, vacío no se oculta con display:none:
  se colapsa fuera del flujo con el mismo recorte que .hx-solo-lector, y
  landing.js solo tiene que escribir el texto para que aparezca y se anuncie.
  Texto, borde e icono en el color de error: 5,44:1 sobre el panel blanco.

  landing.js le da el foco (tabindex="-1" + focus()) cuando el fallo no tiene
  campo al que llevar al visitante. Un <p> con foco programático no siempre
  cumple :focus-visible, así que el anillo se pinta con :focus.
*/
.hx-form__estado {
  padding: 0.75rem 1rem;
  border: 1px solid var(--hx-color-error);
  border-radius: var(--hx-radius-sm);
  font-size: var(--hx-size-nav);
  font-weight: 600;
  line-height: 1.45;
  color: var(--hx-color-error);
}

.hx-form__estado:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
}

.hx-form__estado:focus,
.hx-form__estado:focus-visible {
  outline: 3px solid var(--hx-focus-ring);
  outline-offset: 2px;
}

.hx-form__enviar {
  min-height: 3.25rem;
  margin-block-start: 0.25rem;
}

/* Honeypot: fuera de pantalla, no display:none, que algunos bots descartan.
   El marcado lo envuelve en aria-hidden y su input lleva tabindex="-1". */
.hx-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 5. Cierre de conversión ─────────────────────────────────────────────────
   Regla mínima para el bloque 4 de COMPONENTES.md: las alternativas de
   contacto (llamar, WhatsApp) que acompañan al formulario. El resto de la
   sección —titular, entradilla, fondo, columnas— lo decide Claude al
   construir cada landing con el catálogo de arquitectura/ESTRUCTURA.md.

   No hay una variante de botón por fondo: .hx-boton--primaria y
   .hx-boton--secundaria se invierten solos dentro de una .hx-tinta, y
   .hx-boton--wasap lleva su propio verde con texto azul profundo, que vale
   sobre cualquier fondo. */
.hx-cierre .hx-form-panel {
  margin-block-start: 2rem;
}

.hx-cierre__alternativas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.hx-cierre__pregunta {
  flex: 1 0 100%;
  font-weight: 600;
}

/* El horario solo existe en el cierre de España; en Centroamérica no se
   publica ninguno. Hereda el color de la sección, así que vale sobre claro y
   sobre una .hx-tinta. */
.hx-cierre__horario {
  flex: 1 0 100%;
  font-size: var(--hx-size-nav);
}

/* ── 6. Botón flotante de WhatsApp ───────────────────────────────────────────
   56×56: por encima del mínimo táctil de 44 px, con margen. El verde, su
   hover y el aro oscuro son de marca AJENA (WhatsApp) y viven aquí, no en
   tokens.css.

   El verde da 1,98:1 contra blanco, muy por debajo del 3:1 que el SC 1.4.11
   exige para el contorno de un componente de interfaz: por eso lleva un aro
   verde oscuro (8,13:1 sobre blanco). Sobre un fondo oscuro es el propio
   verde el que se distingue (9,00:1 sobre el azul profundo). El glifo va en
   azul profundo, no en blanco: 9,00:1 sobre el verde frente a 1,98:1. */
.hx-wasap {
  --hx-wasap-verde: #25d366;
  --hx-wasap-verde-hover: #1fb757;
  --hx-wasap-aro: #0a5c2e;

  position: fixed;
  inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(1.25rem + env(safe-area-inset-right, 0px));
  z-index: 80;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--hx-wasap-aro);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-wasap-verde);
  box-shadow: var(--hx-shadow-float);
  color: var(--hx-color-deep);
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
  --hx-focus-ring: var(--hx-text-on-dark);
}

.hx-wasap__glifo {
  display: block;
  width: 28px;
  height: 28px;
}

@media (hover: hover) {
  .hx-wasap:hover {
    background: var(--hx-wasap-verde-hover);
    transform: scale(1.06);
  }
}

.hx-wasap:active {
  background: var(--hx-wasap-verde-hover);
  transform: scale(0.97);
}

/* Este botón flota sobre TODA la página y no puede saber qué hay debajo en
   cada momento, así que su anillo de foco lleva dos capas concéntricas: el
   outline blanco (--hx-focus-ring, redefinido arriba) y, bajo él, un anillo
   del verde oscuro. El blanco destaca sobre el verde oscuro (8,13:1) y el
   verde oscuro destaca sobre un fondo claro: uno de los dos es siempre
   legible sea cual sea la sección que haya debajo. */
.hx-wasap:focus-visible {
  box-shadow:
    0 0 0 9px var(--hx-wasap-aro),
    var(--hx-shadow-float);
}

@media (prefers-reduced-motion: reduce) {
  .hx-wasap:hover,
  .hx-wasap:active {
    transform: none;
  }
}

/*
  Definición de .hx-consent-abierto: landing.js añade y quita esta clase en
  <body> mientras el banner está abierto (ver iniciarConsentimiento en
  landing.js). Sin esta regla, la clase no tendría ningún efecto — un gancho
  que se activa y no hace nada.

  El banner es una barra inferior a todo lo ancho y el flotante vive
  exactamente ahí: mientras el banner está abierto, se solaparían. Se OCULTA
  en vez de desplazarse hacia arriba: desplazarlo exigiría medir en tiempo de
  ejecución la altura del banner —que cambia con el ancho, porque su texto
  envuelve— y no merece un observador de tamaño para una decisión que se toma
  una vez por visitante.
*/
body.hx-consent-abierto .hx-wasap {
  display: none;
}

/* ── 7. Pie ──────────────────────────────────────────────────────────────────
   Superficie suave, nunca oscura: es la última franja antes de salir de la
   página y no compite con la banda oscura del cierre de conversión que
   normalmente la precede: secciones vecinas alternan de fondo, nunca repiten
   el mismo. Texto pizarra sobre suave: 9,34:1. */
.hx-footer {
  background: var(--hx-surface-soft);
  color: var(--hx-text-secondary);
}

.hx-footer__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem;
}

.hx-footer__legales {
  min-width: 0;
}

.hx-footer__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hx-footer__lista a {
  display: inline-flex;
  align-items: center;
  /* 44 px de objetivo táctil: en el pie es donde más se incumple. */
  min-height: 44px;
  color: var(--hx-text-secondary);
  text-decoration: none;
}

@media (hover: hover) {
  .hx-footer__lista a:hover {
    color: var(--hx-color-primary-ink);
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

/* Un botón que se LEE como un enlace, porque eso es lo que parece en un pie
   de página. La semántica sí es la correcta: reabre el banner, no navega
   (<button> para acciones, <a href> para navegación). */
.hx-footer__cookies {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hx-text-secondary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

@media (hover: hover) {
  .hx-footer__cookies:hover {
    color: var(--hx-color-primary-ink);
  }
}

.hx-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--hx-border);
  font-size: var(--hx-size-meta);
}

.hx-footer__creditos a {
  display: inline-flex;
  align-items: center;
  /* 44 px de objetivo táctil, como el resto de enlaces del pie. */
  min-height: 44px;
  color: inherit;
}

@media (hover: hover) {
  .hx-footer__creditos a:hover {
    color: var(--hx-color-primary-ink);
  }
}

/* Hueco para el flotante de WhatsApp (56 px de botón + 20 px de separación al
   borde), que reposa exactamente sobre esta franja cuando el visitante llega
   al final de la página. Un botón fijo pasa por encima de lo que hace scroll
   bajo él, y esta no es una posición de paso: es donde se detiene quien llega
   al final. Se reserva ANCHO y no alto: el texto envuelve antes de que quede
   una franja muerta al final del pie. Hace falta mientras el borde derecho del
   contenido (el contenedor llega a 1200 px y deja un margen lateral de hasta
   40 px) quede a menos de 76 px del borde de la pantalla: por debajo de
   1280 px. Por encima, el botón cae en el vacío de la derecha. */
@media (max-width: 1279px) {
  .hx-footer__legal {
    padding-inline-end: calc(var(--hx-gutter) + 76px);
  }
}

/* ── 8. Página de gracias ────────────────────────────────────────────────────
   Una sola pieza centrada en vertical: marca de confirmación, titular,
   texto y enlace de vuelta. Sin animación: la confirmación no depende de
   ningún movimiento. */
.hx-gracias {
  display: flex;
  align-items: center;
  min-height: 60vh;
  min-height: 60svh;
  padding-block: var(--hx-section-y);
}

.hx-gracias__caja {
  max-width: 60ch;
}

/* Trazo azul profundo sobre dorado: 11,80:1. */
.hx-gracias__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-block-end: 1.25rem;
  border-radius: 50%;
  background: var(--hx-color-accent);
  color: var(--hx-color-deep);
}

.hx-gracias__titulo {
  font-size: var(--hx-size-h2);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-display);
}

.hx-gracias__subtitulo {
  margin-block-start: 0.75rem;
  font-size: var(--hx-size-lead);
  font-weight: 500;
  color: var(--hx-text-secondary);
}

.hx-gracias__texto {
  margin-block-start: 1rem;
  color: var(--hx-text-secondary);
}

.hx-gracias__volver {
  margin-block-start: 2rem;
}

/* ── 9. Primitivas del encabezado de sección ────────────────────────────────
   Eyebrow, título y entradilla de ESTRUCTURA.md §1: la única excepción a la
   regla de un bloque BEM propio por sección, porque son iguales en todas las
   secciones y copiarlas en cada bloque solo duplicaría CSS. Una sección que
   necesite otro aspecto lo ajusta desde su bloque (.hx-banda .hx-eyebrow
   {…}), sin reescribir la regla.

   Título y entradilla heredan el color de su sección, así que valen igual
   sobre claro y sobre oscuro. El eyebrow no: el azul de texto sobre claro da
   5,75:1 sobre blanco y 5,19:1 sobre suave, pero sobre una .hx-tinta solo
   llega a 3,10:1; ahí pasa al azul primario (regla de más abajo) y una
   sección que prefiera el dorado (11,80:1) lo pide desde su bloque. */
.hx-eyebrow {
  margin-block-end: 0.75rem;
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--hx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hx-color-primary-ink);
}

/* Sobre una .hx-tinta el azul de texto sobre claro solo da 3,10:1: el eyebrow
   pasa solo al azul primario (9,07:1). Una sección oscura que no use .hx-tinta
   (otra superficie propia) lo ajusta desde su bloque. */
.hx-tinta .hx-eyebrow {
  color: var(--hx-color-primary);
}

.hx-titulo {
  max-width: 22ch;
  font-size: var(--hx-size-h2);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-display);
}

.hx-entradilla {
  max-width: 60ch;
  margin-block-start: 1rem;
  font-size: var(--hx-size-lead);
}

/* ══ Bloque 7. En la prensa ══════════════════════════════════════════
   La nota de prensa del país (contenido/PRENSA.md), entre las reseñas y la
   banda. Fondo claro tras unas reseñas en suave; si la sección anterior es
   clara, la sección lleva .hx-fondo-suave y la tarjeta pasa a blanco. */
.hx-prensa__caja {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hx-prensa__lista {
  display: grid;
  gap: var(--hx-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-prensa__nota {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--hx-radius);
  background: var(--hx-surface-soft);
  box-shadow: var(--hx-shadow-card);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* El bloque no depende de que la landing defina .hx-fondo-suave en sus estilos. */
.hx-prensa.hx-fondo-suave {
  background: var(--hx-surface-soft);
}

.hx-prensa.hx-fondo-suave .hx-prensa__nota {
  background: var(--hx-surface);
}

/* Textura de papel: el mismo grano de la banda, muy suave. */
.hx-prensa__nota::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hx-grain);
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* La cabecera del medio, entre dos filetes dobles, como la mancheta de un diario. */
.hx-prensa__medio {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding-block: 0.625rem;
  border-block: 3px double color-mix(in srgb, var(--hx-color-deep) 30%, transparent);
  font-family: var(--hx-font-display);
  font-size: var(--hx-size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hx-text-secondary);
}

.hx-prensa__icono {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--hx-color-primary-ink);
}

.hx-prensa__titular {
  position: relative;
  margin: 0;
  font-family: var(--hx-font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--hx-tracking-display);
  color: var(--hx-text-primary);
  text-wrap: balance;
}

/* Comillas de cita, decorativas: el lector de pantalla no las anuncia. */
.hx-prensa__titular::before {
  content: "\201C" / "";
  position: absolute;
  inset-block-start: -0.08em;
  inset-inline-end: -0.05em;
  z-index: -1;
  font-family: var(--hx-font-display);
  font-size: 5.5em;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--hx-color-primary) 45%, transparent);
  pointer-events: none;
}

.hx-prensa__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-block-start: auto;
  padding-block-start: 1rem;
  border-block-start: 1px solid color-mix(in srgb, var(--hx-color-deep) 12%, transparent);
}

.hx-prensa__fecha {
  margin: 0;
  font-size: var(--hx-size-meta);
  color: var(--hx-text-secondary);
}

.hx-prensa__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--hx-color-primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Toda la tarjeta lleva a la nota; el enlace sigue siendo uno solo para el teclado y el lector. */
.hx-prensa__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--hx-radius);
}

.hx-prensa__flecha {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s ease;
}

.hx-prensa__nota:hover {
  transform: translateY(-3px);
  box-shadow: var(--hx-shadow-float);
}

.hx-prensa__nota:hover .hx-prensa__enlace {
  text-decoration-thickness: 2px;
}

.hx-prensa__nota:hover .hx-prensa__flecha {
  transform: translate(2px, -2px);
}

@media (min-width: 900px) {
  .hx-prensa__caja {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  /* Con dos o más notas, la presentación va arriba y las tarjetas, en columnas. */
  .hx-prensa__caja:has(.hx-prensa__lista > li + li) {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-prensa__lista:has(> li + li) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-prensa__nota,
  .hx-prensa__flecha {
    transition: none;
  }

  .hx-prensa__nota:hover,
  .hx-prensa__nota:hover .hx-prensa__flecha {
    transform: none;
  }
}

/* ══ Redes sociales (bloques 1 y 5) ═══════════════════════════════════
   Solo en los países con perfiles en el §2 de su paises/<cc>/PAIS.md. Arriba,
   una barra fina dentro de la cabecera fija (.hx-header--redes); abajo, una
   fila al principio del pie. Las dos usan la misma lista, .hx-redes. */
:root:has(.hx-header--redes) {
  --hx-redes-h: 2rem;
  /* La cabecera crece lo que mide la barra. 4.5rem es el alto de su fila
     principal en marca/base.css; así .hx-main, el scroll-padding y las
     secciones que usan --hx-header-h reservan también la barra. */
  --hx-header-h: calc(4.5rem + var(--hx-redes-h));
}

.hx-header--redes .hx-header__caja {
  min-height: calc(var(--hx-header-h) - var(--hx-redes-h));
}

/* El filete inferior es una sombra interior y no un borde: así la barra mide
   exactamente --hx-redes-h y, plegada, no asoma ni un píxel. */
.hx-header__redes {
  display: flex;
  align-items: center;
  height: var(--hx-redes-h);
  background: var(--hx-surface-soft);
  box-shadow: inset 0 -1px 0 var(--hx-border);
}

/* Los iconos se definen una vez por página como <symbol> y se pintan con <use>
   en la barra y en el pie: el contenedor de los símbolos nunca se ve. */
.hx-redes__simbolos {
  display: none;
}

.hx-header__redes-caja {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.hx-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-redes__enlace {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--hx-radius-pill);
  color: var(--hx-text-secondary);
}

/* En la barra el icono se ve en 32 px, pero el objetivo táctil llega a los
   44 × 44 px de marca/MARCA.md §7: 6 px más por cada lado, que caben en la
   separación entre iconos y en el margen de la fila de la cabecera. */
.hx-redes__enlace::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.hx-redes__icono {
  display: block;
  width: 1rem;
  height: 1rem;
}

@media (hover: hover) {
  .hx-redes__enlace:hover {
    color: var(--hx-color-primary-ink);
  }
}

/* Al bajar, la barra se pliega hacia arriba y la cabecera vuelve a su alto
   normal; al subir del todo, reaparece. Solo con animaciones ligadas al scroll
   y sin preferencia de movimiento reducido: sin ellas, la barra se queda fija.
   Con el foco de teclado dentro de la cabecera, la barra vuelve siempre: un
   enlace enfocado no puede quedar fuera de la pantalla (WCAG 2.2, SC 2.4.11). */
@keyframes hx-plegar-redes {
  to {
    transform: translateY(calc(-1 * var(--hx-redes-h)));
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hx-header--redes {
      animation: hx-plegar-redes linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--hx-redes-h);
    }

    .hx-header--redes:has(:focus-visible) {
      animation: none;
    }
  }
}

/* En el pie, la fila va antes de los legales, con iconos de 44 px en círculo
   blanco sobre el fondo suave. El filete de arriba la separa del cierre de
   conversión, que comparte con el pie el mismo fondo suave. */
.hx-footer__redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-block: 1.5rem 0.5rem;
  border-block-start: 1px solid var(--hx-border);
}

.hx-redes--pie {
  gap: 0.5rem;
}

.hx-redes--pie .hx-redes__enlace {
  width: 44px;
  height: 44px;
  background: var(--hx-surface);
  box-shadow: inset 0 0 0 1px var(--hx-border);
}

.hx-redes--pie .hx-redes__enlace::before {
  content: none;
}

.hx-redes--pie .hx-redes__icono {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   Secciones de esta landing — Chitré (distrito) · humedadesenchitre.com
   Escritas de cero (arquitectura/ESTRUCTURA.md), móvil primero y solo con
   tokens --hx-. Fondos: hero oscuro con imagen · aval claro · ventajas
   suave · capilaridad clara · condensación suave · proceso claro · reseñas
   suave · banda oscura · FAQ clara · cierre suave.
   ========================================================================== */

.hx-fondo-suave {
  background: var(--hx-surface-soft);
}

/* ── 1. Hero — imagen a sangre como fondo, texto encima sobre una capa oscura ──
   La imagen es un <img> de verdad y no un background-image: así sigue siendo
   la candidata LCP, con su srcset y su fetchpriority. La capa es el azul más
   profundo de la marca, al 82% en móvil y del 90% al 30% de izquierda a
   derecha en escritorio, donde el texto no pasa de la primera mitad: el
   blanco queda por encima de 7:1 aunque la foto fuera blanca bajo el texto. */
.hx-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(46rem, calc(100svh - var(--hx-header-h)));
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}

.hx-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hx-hero__fondo picture,
.hx-hero__fondo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hx-hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hx-color-deep) 82%, transparent);
}

.hx-hero__texto {
  max-width: 40rem;
}

.hx-hero__titulo {
  max-width: 20ch;
  font-size: var(--hx-size-h1);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-display);
}

.hx-hero .hx-entradilla {
  margin-block-start: 1.25rem;
  color: var(--hx-text-on-dark-soft);
}

.hx-hero__ventajas {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.5rem;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.hx-hero__ventajas li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.hx-hero__ventajas li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.4rem;
  border-inline-start: 2.5px solid var(--hx-color-accent);
  border-block-end: 2.5px solid var(--hx-color-accent);
  transform: translateY(-0.2rem) rotate(-45deg);
}

.hx-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

@media (min-width: 768px) {
  .hx-hero__fondo::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--hx-color-deep) 90%, transparent) 0%,
      color-mix(in srgb, var(--hx-color-deep) 80%, transparent) 50%,
      color-mix(in srgb, var(--hx-color-deep) 30%, transparent) 100%
    );
  }
}

/* ── 2. Aval — rejilla de tarjetas; en escritorio, texto a la izquierda ── */
.hx-aval__caja {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.hx-aval__texto {
  max-width: 60ch;
  margin-block-start: 1.25rem;
}

.hx-aval__texto p + p {
  margin-block-start: 0.75rem;
}

.hx-aval__lista {
  display: grid;
  gap: var(--hx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.hx-aval__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--hx-border);
  border-inline-start: 4px solid var(--hx-color-accent);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-sm);
  font-family: var(--hx-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (min-width: 960px) {
  .hx-aval__caja {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .hx-aval__lista {
    grid-template-columns: 1fr 1fr;
    margin-block-start: 2.5rem;
  }
}

/* ── 3. Ventajas — lo que gana la vivienda, en tarjetas, y el CTA ── */
.hx-ventajas__lista {
  display: grid;
  gap: var(--hx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block-start: 2.25rem;
  padding: 0;
  list-style: none;
}

.hx-ventajas__item {
  padding: 1.75rem 1.5rem;
  border-block-start: 4px solid var(--hx-color-accent);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-sm);
}

.hx-ventajas__titulo {
  margin-block-end: 0.6rem;
  font-size: 1.1875rem;
}

.hx-ventajas__item p {
  font-size: 0.9688rem;
  color: var(--hx-text-secondary);
}

.hx-ventajas__media {
  margin-block-start: 2.25rem;
}

.hx-ventajas__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-card);
}

@media (min-width: 768px) {
  .hx-ventajas__media img {
    aspect-ratio: 21 / 9;
  }
}

.hx-ventajas__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-block-start: 2.25rem;
}

.hx-ventajas__cobertura {
  max-width: 60ch;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--hx-color-accent);
  font-weight: 600;
}

/* ── 4. Capilaridad — abre la página: bloque largo con señales en tarjetas ── */
.hx-capilaridad__caja {
  display: grid;
  gap: var(--hx-gap);
  margin-block-start: 2rem;
}

.hx-capilaridad__explica {
  display: grid;
  gap: 1rem;
  max-width: 65ch;
  align-content: start;
}

.hx-capilaridad__sistema {
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--hx-radius-lg);
  background: var(--hx-surface-soft);
}

.hx-capilaridad__sistema > * + * {
  margin-block-start: 0.875rem;
}

.hx-capilaridad__subtitulo {
  font-size: 1.375rem;
  line-height: 1.25;
}

.hx-capilaridad__lista {
  display: grid;
  gap: 0.375rem;
  padding-inline-start: 1.25rem;
}

.hx-capilaridad__plazo {
  padding-block-start: 0.875rem;
  border-block-start: 1px solid var(--hx-border);
  font-weight: 600;
}

.hx-capilaridad__subtitulo--senales {
  margin-block-start: clamp(2.5rem, 6vw, 3.5rem);
}

.hx-capilaridad__senales {
  display: grid;
  gap: var(--hx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-block-start: 1.25rem;
  padding: 0;
  list-style: none;
}

.hx-capilaridad__senal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-card);
}

.hx-capilaridad__numero {
  font-family: var(--hx-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: var(--hx-tracking-eyebrow);
  color: var(--hx-color-primary-ink);
}

.hx-capilaridad__etiqueta {
  display: block;
  font-family: var(--hx-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.hx-capilaridad__etiqueta::first-letter {
  text-transform: uppercase;
}

.hx-capilaridad__cta {
  margin-block-start: 2rem;
}

@media (min-width: 900px) {
  .hx-capilaridad__caja {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ── 5. Condensación — estándar, editorial con la imagen a la izquierda ── */
.hx-condensacion__caja {
  display: grid;
  gap: var(--hx-gap);
  grid-template-areas:
    "imagen"
    "texto";
}

.hx-condensacion__imagen {
  grid-area: imagen;
}

.hx-condensacion__texto {
  grid-area: texto;
}

.hx-condensacion__imagen img {
  width: 100%;
  height: auto;
  border-radius: var(--hx-radius-lg);
}

.hx-condensacion__cuerpo {
  margin-block-start: 1.5rem;
}

.hx-condensacion__cuerpo > * + * {
  margin-block-start: 1rem;
}

.hx-condensacion__subtitulo {
  margin-block-start: 1.75rem;
  font-size: 1.375rem;
  line-height: 1.25;
}

.hx-condensacion__ventilacion {
  padding: 1.25rem 1.5rem;
  border-inline-start: 4px solid var(--hx-color-primary);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
}

.hx-condensacion__ventilacion ul {
  margin-block-start: 0.75rem;
  padding-inline-start: 1.25rem;
}

@media (min-width: 768px) {
  .hx-condensacion__caja {
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "imagen texto";
    align-items: start;
  }

  .hx-condensacion__imagen {
    position: sticky;
    top: calc(var(--hx-header-h) + 1.5rem);
  }
}

/* ── 6. Cómo funciona — pasos numerados ── */
.hx-pasos {
  display: grid;
  gap: var(--hx-gap);
  margin-block-start: 2rem;
  padding: 0;
  list-style: none;
}

.hx-pasos__item {
  position: relative;
  padding: 1.5rem;
  border-block-start: 3px solid var(--hx-color-primary);
  border-radius: var(--hx-radius);
  background: var(--hx-surface-soft);
}

.hx-pasos__numero {
  display: block;
  font-family: var(--hx-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--hx-tracking-display);
  color: var(--hx-color-primary-ink);
}

.hx-pasos__titulo {
  margin-block: 0.75rem;
  font-size: 1.25rem;
}

.hx-pasos__item p + p,
.hx-pasos__item p + ul {
  margin-block-start: 0.75rem;
}

.hx-pasos__item ul {
  padding-inline-start: 1.25rem;
}

@media (min-width: 768px) {
  .hx-pasos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 7. Reseñas ── */
.hx-resenas__lista {
  display: grid;
  gap: var(--hx-gap);
  margin-block-start: 2rem;
  padding: 0;
  list-style: none;
}

.hx-resenas__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-sm);
}

.hx-resenas__texto {
  margin: 0;
  max-width: 60ch;
}

.hx-resenas__texto p::before {
  content: "«";
}

.hx-resenas__texto p::after {
  content: "»";
}

.hx-resenas__autor {
  font-size: var(--hx-size-nota);
  font-weight: 600;
  color: var(--hx-text-secondary);
}

.hx-resenas__origen {
  margin-block-start: 1.25rem;
  font-size: var(--hx-size-nota);
  color: var(--hx-text-secondary);
}

@media (min-width: 768px) {
  .hx-resenas__lista {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
}

/* ── 8. Banda de énfasis — un dato local, grande ── */
.hx-banda {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--hx-color-deep), var(--hx-color-dark));
}

.hx-banda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hx-grain);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hx-banda__caja {
  text-align: center;
}

.hx-banda .hx-titulo {
  margin-inline: auto;
}

.hx-banda__cifra {
  margin-block-start: 1.5rem;
  font-family: var(--hx-font-display);
  font-size: clamp(3rem, 2rem + 6vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--hx-tracking-display);
  color: var(--hx-color-accent);
}

.hx-banda__texto {
  max-width: 50ch;
  margin: 1rem auto 0;
  font-size: var(--hx-size-lead);
}

.hx-banda__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* ── 9. FAQ ── */
.hx-faq__lista {
  max-width: 70ch;
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--hx-border);
}

.hx-faq__item {
  border-block-end: 1px solid var(--hx-border);
}

.hx-faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding-block: 1rem;
  font-family: var(--hx-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.hx-faq__pregunta::-webkit-details-marker {
  display: none;
}

.hx-faq__pregunta::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--hx-color-primary-ink);
}

.hx-faq__item[open] .hx-faq__pregunta::after {
  content: "−";
}

.hx-faq__respuesta {
  padding-block-end: 1.25rem;
}

.hx-faq__respuesta > * + * {
  margin-block-start: 0.75rem;
}

.hx-faq__respuesta ul {
  display: grid;
  gap: 0.5rem;
  padding-inline-start: 1.25rem;
}

@media (hover: hover) {
  .hx-faq__pregunta:hover {
    color: var(--hx-color-primary-ink);
  }
}

/* ── Páginas legales (fase 4): texto a medida de lectura y tablas con
   desplazamiento horizontal propio, para que la página no desborde a 320 px
   (legal/LEGAL.md §4). ── */
.hx-legal__texto {
  max-width: 75ch;
}

.hx-legal__titulo {
  font-size: var(--hx-size-h2);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-display);
}

.hx-legal__fecha {
  margin-block-start: 0.75rem;
  font-size: var(--hx-size-nota);
  color: var(--hx-text-secondary);
}

.hx-legal__texto h2 {
  margin-block: 2.5rem 1rem;
  font-size: 1.5rem;
}

.hx-legal__texto h3 {
  margin-block: 1.75rem 0.75rem;
  font-size: 1.125rem;
}

.hx-legal__texto p + p,
.hx-legal__texto p + ul,
.hx-legal__texto ul + p {
  margin-block-start: 0.875rem;
}

.hx-legal__texto ul {
  padding-inline-start: 1.25rem;
}

.hx-legal__texto li + li {
  margin-block-start: 0.375rem;
}

.hx-legal__texto code,
.hx-legal__texto a {
  overflow-wrap: anywhere;
}

.hx-legal__tabla {
  max-width: 100%;
  margin-block: 1rem;
  overflow-x: auto;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-sm);
}

.hx-legal__tabla:focus-visible {
  outline: 3px solid var(--hx-focus-ring);
  outline-offset: 2px;
}

.hx-legal__tabla table {
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--hx-size-nota);
}

.hx-legal__tabla th,
.hx-legal__tabla td {
  padding: 0.625rem 0.75rem;
  border-block-end: 1px solid var(--hx-border);
  text-align: start;
  vertical-align: top;
}

.hx-legal__tabla th {
  background: var(--hx-surface-soft);
}