/*
  Tokens de Humicalia.

  COLOR: definitivo. Extraído del logotipo y con el contraste MEDIDO —
  los ratios de los comentarios no son estimaciones.
  TIPOGRAFÍA: definitiva. Playfair Display + Inter, con fallback métrico
  medido — ver la nota junto a la escala tipográfica más abajo.
*/
:root {
  /* --- Estructura (definitiva, §7.1 del CLAUDE.md) --- */
  --hc-maxw: 1200px;
  --hc-maxw-narrow: 760px;
  --hc-gutter: clamp(1rem, 4vw, 2.5rem);
  --hc-section-y: clamp(3.5rem, 8vw, 7rem);
  --hc-gap: clamp(1rem, 2.5vw, 2rem);

  /* Altura del header. Es un token porque hacen falta cinco usos coherentes:
     la propia cabecera, el relleno superior de <main> en las páginas sin hero
     oscuro, el borde superior del panel del menú móvil, el despeje del hero y
     el scroll-margin de las anclas.
     La marca es el logotipo real, un cuadrado con el nombre dentro: necesita
     alto para leerse (§3 de BRAND-GUIDELINES.md). En escritorio son 112 px;
     por debajo de 1024 se queda en 88 porque 112 px se comen un cuarto de la
     pantalla de un móvil. Cambia por breakpoint, nunca entre estados del
     header — eso último sí sería CLS. */
  --hc-header-h: 88px;

  /* --- Radios (definitivos, §14) --- */
  --hc-radius-sm: 8px;
  --hc-radius: 14px;
  --hc-radius-lg: 24px;
  --hc-radius-pill: 999px;

  /* Los dos escalones largos —`--hc-radius-xl` 32 y `--hc-radius-2xl` 44— los
     declara `premium.css`, que es donde vive el sistema «Consola» y que se
     importa después de este archivo. Aquí no se repiten. */

  /* --- Color de marca (del logotipo) --- */
  /* Azul Humicalia. 7,45:1 sobre blanco y 6,86:1 sobre el fondo suave:
     cumple AAA como texto. Por eso primary-ink es EL MISMO valor y no una
     variante oscurecida — la trampa del §25.3 no aplica a esta marca. */
  --hc-color-primary: #295789;
  --hc-color-primary-ink: #295789;

  /* Azul claro. Sobre fondo CLARO nunca es texto: 1,97:1 sobre blanco y
     1,55:1 sobre el suave, muy por debajo del 3:1 de texto grande. Ahí solo
     vale para fondos, bordes e ilustración.
     Sobre --hc-surface-ink SÍ es texto: 7,69:1. Es el único fondo del
     proyecto donde se permite, y tokens.test.ts comprueba las DOS mitades de
     esta regla — que pasa sobre tinta y que no pasa sobre ningún claro. */
  --hc-color-primary-light: #9dbbe5;
  /* Azul medio: 3,72:1. Vale para titulares grandes y bordes de componente
     (mínimo 3:1), NO para texto de cuerpo. */
  --hc-color-primary-mid: #6187b5;

  /* Dorado del logotipo: 1,51:1. SOLO fondos y acentos gráficos. */
  --hc-color-accent: #efce8c;
  /* El dorado cuando tiene que ser texto sobre claro: 4,59:1, cumple AA. */
  --hc-color-accent-ink: #86734e;

  /* --- Fondos --- */
  --hc-color-background: #ffffff;
  /* Teñido con el azul de marca, no un gris neutro: así el claro y el
     oscuro de la web pertenecen a la misma familia.
     OSCURECIDO por el rediseño «Corte y señal»: mezclar(primary-light, .38,
     blanco). El valor anterior (#f2f6fa) medía 1,09:1 contra el blanco — una
     diferencia que a página completa sencillamente no existía, y que dejaba
     la alternancia de fondos del §11.1 escrita en el código pero invisible al
     ojo. Ahora mide 1,27:1: un escalón que sí se percibe al 25 % de zoom.
     El precio está medido y documentado: primary-mid (2,93:1) y accent-ink
     (3,61:1) dejan de valer SOBRE ESTA SUPERFICIE. Ver BRAND-GUIDELINES §2.2. */
  --hc-color-background-soft: #dae5f5;

  /* --- Neutros, derivados del azul de marca --- */
  --hc-color-slate: #3d5166; /* 8,18:1 — texto secundario con fuerza */
  /* 5,76:1 blanco · 4,53:1 suave — el neutro de texto más claro que aún cumple
     AA sobre las DOS superficies claras. Oscurecido desde #5a7085 al oscurecer
     el fondo suave: mezclar(#5a7085, .75, slate).
     Con el valor viejo daba 4,03:1 sobre el suave nuevo. Da la casualidad de
     que ninguno de sus cinco usos cae sobre el suave —todos sobre blanco—, así
     que no habría roto nada hoy; se corrige igualmente para que la invariante
     «muted pasa AA sobre cualquier superficie clara» sea cierta por
     construcción y no por suerte. Una invariante que se cumple por casualidad
     es la trampa del §25.3 esperando a que alguien use el token en el sitio
     equivocado. */
  --hc-color-muted: #53687d;
  --hc-color-dark: #1c2b3a; /* 14,42:1 — texto de cuerpo */
  --hc-color-deep: #18324f; /* 13,06:1 — bandas oscuras full-bleed */

  /* --- Tokens semánticos derivados --- */
  --hc-text-primary: var(--hc-color-dark);
  --hc-text-secondary: var(--hc-color-slate);
  --hc-text-muted: var(--hc-color-muted);
  --hc-text-on-dark: #ffffff;
  /* Blanco translúcido sobre banda oscura. Existen como token porque se
     repiten en hero, banda de consumo, footer y cierre: un rgb(255 255 255 / .86)
     suelto por cada componente es exactamente el valor mágico que prohíbe
     el §24.2. Derivados con color-mix, igual que --hc-border. */
  --hc-text-on-dark-soft: color-mix(in srgb, var(--hc-text-on-dark) 86%, transparent);
  --hc-text-on-dark-muted: color-mix(in srgb, var(--hc-text-on-dark) 70%, transparent);
  /* Acento sobre banda oscura: el dorado da 8,63:1 sobre --hc-color-deep. */
  --hc-text-accent-on-dark: var(--hc-color-accent);
  --hc-surface: var(--hc-color-background);
  --hc-surface-soft: var(--hc-color-background-soft);
  --hc-surface-dark: var(--hc-color-deep);
  /* Cuarta superficie, del rediseño «Corte y señal». Derivada de deep, no un
     azul nuevo: mezclar(deep, .78, negro).
     No es «un oscuro más»: es lo que desbloquea --hc-color-primary-light como
     TEXTO (7,69:1), prohibido sobre cualquier fondo claro de la web. También
     sube el dorado a 10,00:1, por encima del 8,63:1 que da sobre el navy.
     REGLA ESTRUCTURAL: solo se usa sobre secciones CLARAS. Contra el navy mide
     1,16:1 — una plancha de tinta dentro de la banda oscura o del cierre sería
     literalmente invisible. */
  --hc-surface-ink: #13273e;

  --hc-border: color-mix(in srgb, var(--hc-color-primary) 18%, transparent);
  /* Anillo de foco. Se declara aparte del color primario porque los
     contenedores oscuros lo redefinen: el azul de marca sobre la banda
     oscura da 1,75:1 y el SC 1.4.11 pide 3:1. */
  --hc-focus-ring: var(--hc-color-primary);
  /* Rojo de error de formulario (bordes inválidos, texto de error). Mide
     7,26:1 sobre --hc-surface (#ffffff) y 6,69:1 sobre --hc-surface-soft:
     AAA en los dos fondos donde se usa. El color nunca es el único
     portador de significado (§20.1): siempre va acompañado de texto y,
     en los mensajes de error, del icono ⚠. */
  --hc-color-error: #a4262c;

  /* --- Elevación: tres niveles, ni uno más (§14).
     Derivada del azul profundo, no de negro puro: el negro sobre fondos
     con temperatura se ve gris sucio. --- */
  --hc-shadow-sm: 0 2px 10px -4px color-mix(in srgb, var(--hc-color-deep) 30%, transparent);
  --hc-shadow-card: 0 16px 36px -24px color-mix(in srgb, var(--hc-color-deep) 45%, transparent);
  --hc-shadow-float: 0 24px 56px -28px color-mix(in srgb, var(--hc-color-deep) 50%, transparent);
  /* --- Tipografía: DEFINITIVA (§4 del spec de la home).
     Playfair para el registro emocional, Inter para el técnico: la tipografía
     hace el mismo viaje que el contenido.
     El segundo elemento de cada pila es el fallback métrico medido de
     fonts.css — no es decorativo, es lo que evita el CLS del CI (§25.1). --- */
  --hc-font-display: "Playfair Display", "Playfair Fallback", "Times New Roman", serif;
  --hc-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

  /* --- Escala tipográfica por rol.
     REVISADA por el rediseño «Corte y señal» (§5.1 de su spec). El §13 del
     CLAUDE.md la daba por definitiva; la desviación queda registrada en el
     §11 de PROJECT-MAP.md. --- */

  /* 64 -> ~78 px a 1440 (el tope de 5rem se alcanza a partir de ~1481 px).
     El coeficiente vw baja de 6 a 5,4 porque el h1 ya no ocupa el ancho del
     contenedor: vive en la columna de tinta del hero, que es el 42 %. */
  --hc-size-display: clamp(2.75rem, 5.4vw, 5rem);
  /* 44 -> 56 px a 1440. Es el contraste de escala que pide el §11.1: sin él,
     la diferencia entre un h2 y una entradilla no se lee de un vistazo. */
  --hc-size-h2: clamp(2rem, 4.6vw, 3.5rem);
  /* Sin cambio: subirlo comprimiría el salto h2 -> h3. */
  --hc-size-h3: clamp(1.375rem, 3vw, 2rem);
  --hc-size-lead: clamp(1.0625rem, 2vw, 1.25rem);
  --hc-size-body: clamp(1rem, 1.5vw, 1.125rem);
  /* Navegación de cabecera y megamenú. Tamaño FIJO, no fluido, y a propósito:
     el menú de escritorio solo existe a partir de 1024 px, justo donde el
     clamp del cuerpo empieza a crecer, así que la barra acababa en 18 px de
     1200 px en adelante. Una navegación no es texto de lectura —se recorre,
     no se lee seguido—, de modo que se estabiliza en el mínimo de 1rem del
     §13 y deja de competir en peso con el contenido de la página. */
  --hc-size-nav: 1rem;
  --hc-size-meta: 0.875rem;
  --hc-size-eyebrow: 0.75rem;
  /* Cifras protagonistas: avales y resultado de la calculadora. */
  --hc-size-cifra: clamp(2.25rem, 5vw, 3.5rem);
  /* Registro de instrumento: cotas, unidades, rotulación de ficha técnica.
     Es texto AUXILIAR, nunca de lectura — el mínimo de 1rem del §13 aplica al
     texto de lectura de móvil, y una unidad o una cota no lo son. Nada
     rotulado en este registro es información que no esté también en texto
     normal en la misma página. */
  --hc-size-nota: 0.6875rem;
  --hc-tracking-nota: 0.18em;
  /* Playfair a tamaño display se lee suelta y blanda sin un tracking negativo
     leve. Solo se aplica al rol display: un h3 de 22 px con este tracking se
     leería apretado. */
  --hc-tracking-display: -0.015em;
}

/* La cabecera crece cuando hay sitio: ver la nota de --hc-header-h. Se
   redefine aquí y no con un clamp() porque el salto es de breakpoint, no
   continuo, y así el valor se lee de un vistazo. */
@media (min-width: 1024px) {
  :root {
    --hc-header-h: 112px;
  }
}
/*
  Tipografías de Humicalia. El kit trae cuatro archivos .woff2 (marca/fonts/),
  cada uno con un rol asignado; no hay archivos de fuente sin usar en el kit.

  Playfair Display 500 : display, h1, h2 y cifras destacadas.
  Playfair 500 italic  : énfasis dentro de títulos de sección. NUNCA en el h1
                         (obligaría a precargar un cuarto archivo para decorar
                         el elemento LCP).
  Inter 400            : cuerpo, listas, tablas.
  Inter 600            : h3, botones, navegación, eyebrows.
*/

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-display-v40-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-display-v40-latin-500italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-semibold.woff2") format("woff2");
}

/*
  Fallbacks métricos. Sin ellos, el intercambio de fuente provoca un reflujo que
  dispara el CLS — y NO se ve en local, porque la fuente ya está en caché. Solo
  aparece en una máquina limpia que nunca ha cargado la fuente antes, como la
  del técnico la primera vez que abre la landing o un runner de integración
  continua.

  Los cuatro valores de cada familia están MEDIDOS con fontTools sobre los .woff2
  reales, promediando el avance de una muestra de castellano. No los estimes ni
  los copies de otro proyecto.

  Liberation Serif y Liberation Sans son obligatorias en la pila: muchas
  máquinas Linux —las de integración continua, sin ir más lejos— no tienen ni
  Times New Roman ni Arial instaladas, y sin esas entradas el local() no
  resuelve, el fallback no se aplica y el arreglo no llega a quien lo
  necesita.

  Georgia queda fuera a propósito: pide size-adjust 100,56% frente al 108,86% de
  Times New Roman. Mezclar métricas incompatibles bajo un solo juego de overrides
  es peor que no tener fallback.
*/
@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  size-adjust: 108.86%;
  ascent-override: 99.39%;
  descent-override: 23.06%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 105.55%;
  ascent-override: 91.78%;
  descent-override: 22.85%;
  line-gap-override: 0%;
}

/*
  En una landing generada, este archivo vive en assets/estilos.css (concatenado)
  o se copia tal cual junto a assets/fonts/. Las rutas son RELATIVAS a propósito:
  el técnico abre index.html con doble clic, y una ruta absoluta /fonts/… no
  resuelve bajo file://.
*/
/* --- Reset mínimo --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*
  La cabecera es fija (componentes.css, bloque 1) y mide --hc-header-h, de 88
  a 112 px según el ancho. scroll-padding reserva ese alto en todo
  desplazamiento que haga el navegador: el salto a un ancla (#contacto) 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, la etiqueta de un radio
  o un <summary> más bajo que la cabecera se queda entero debajo de ella al
  recibir el foco (WCAG 2.2, SC 2.4.11). Sustituye al antiguo
  `:target { scroll-margin-top }`: los dos se sumarían y el salto a un ancla
  dejaría el doble de hueco.
*/
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--hc-header-h) + 1rem);
}

body {
  min-height: 100svh;
  font-family: var(--hc-font-body);
  font-size: var(--hc-size-body);
  line-height: 1.65;
  color: var(--hc-text-primary);
  background: var(--hc-surface);
  -webkit-font-smoothing: antialiased;
  /* Cifras tabulares en toda la landing. Es parte del registro de
     instrumento de la marca, no un capricho: las cifras de la franja de aval
     y las de la banda de énfasis ocupan el mismo ancho por dígito y alinean
     entre sí. Playfair no declara `tnum`; ahí la propiedad se ignora sin
     efecto. */
  font-variant-numeric: tabular-nums;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  `height: auto` no es redundante: es la mitad que faltaba del reset clásico
  `max-width: 100%; height: auto`.

  Los atributos `width` y `height` de <img> son sugerencias de presentación
  para las propiedades CSS `width` y `height`, no solo una pista de proporción.
  El kit los exige siempre —es lo que evita el CLS, imagenes/IMAGENES.md §3—,
  así que un componente que ponga `width: 100%` pero no toque la altura se
  encuentra con que sigue mandando el atributo: una imagen de 1024×1280 se
  pinta con 1280 px de alto pase lo que pase, e ignora cualquier
  `aspect-ratio` que se le declare. Con `height: auto`, la altura vuelve a
  salir de la proporción.
*/
img,
video {
  height: auto;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--hc-font-display);
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* --- Las dos únicas clases de layout globales (arquitectura/ESTRUCTURA.md
   §1, regla 2) --- */
.hc-container {
  width: 100%;
  max-width: var(--hc-maxw);
  margin-inline: auto;
  padding-inline: var(--hc-gutter);
}

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

/*
  Superficie de tinta (marca/MARCA.md §3). Es global —y no la escribe cada
  sección— porque la puede usar cualquier panel oscuro dentro de una sección
  clara (la columna de texto del hero, por ejemplo: arquitectura/ESTRUCTURA.md
  §2.1), y porque redefine --hc-focus-ring, que tiene que heredarse a TODO lo
  interactivo que quede dentro. Repetir estas líneas en cada sección sería un
  valor repartido a mano que acaba divergiendo.

  El anillo de foco se redefine por el mismo motivo que en cualquier
  superficie oscura del kit: el azul de marca sobre la tinta no llega al 3:1
  del SC 1.4.11, y el blanco da 15,14:1.
*/
.hc-tinta {
  background: var(--hc-surface-ink);
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
}

/* --- Accesibilidad --- */
:focus-visible {
  outline: 3px solid var(--hc-focus-ring);
  outline-offset: 2px;
}

.hc-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--hc-surface);
  color: var(--hc-color-primary-ink);
  transform: translateY(-120%);
  transition: transform 0.18s ease;
}

.hc-skip-link:focus-visible {
  transform: translateY(0);
}

/*
  Visible solo para lectores de pantalla. La usan, por ejemplo, los radios
  del acordeón horizontal en escritorio (arquitectura/ESTRUCTURA.md §2.4):
  recortados a 1 px, pero enfocables y operables con teclado.

  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.
*/
.hc-solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

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

/* 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;
}

/* --- 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;
  }
}

/*
  Revelado: visible por defecto. La clase .hc-reveal-armado la pone
  landing.js solo si hay JS y el usuario no pide movimiento reducido: si el
  script falla, la página se ve entera.
  Sin will-change: promocionar toda una familia a capas del compositor deja a
  Chrome sin candidato de LCP.
*/
[data-reveal] {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

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

[data-reveal].hc-reveal-armado.hc-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 seis bloques que se
  copian igual en todas las landings —cabecera, banner de cookies, formulario,
  cierre de conversión, pie y botón flotante de WhatsApp— 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
  (arquitectura/VARIACION.md). La única pieza de sección que sí vive aquí son
  las primitivas del encabezado (bloque 8), porque son iguales en todas.

  Este archivo se carga DESPUÉS de marca/base.css: usa sus tokens (--hc-*) y
  sus clases globales (.hc-container, .hc-section, .hc-solo-lector,
  :focus-visible) sin volver a declararlas.
*/

/* ── 1. Cabecera ────────────────────────────────────────────────────────────
   Fija desde el primer píxel, SIEMPRE sólida: la landing no tiene variante de
   hero oscuro con cabecera transparente (ver la nota junto a .hc-main en
   base.css), así que no hace falta el estado "sobre hero" del sitio
   principal ni su cambio de color al hacer scroll. Una sola apariencia, sin
   JS para mantenerla.

   Fondo oscuro (--hc-surface-dark, el mismo tono que las bandas oscuras del
   hero y del banner de cookies): marca/logo.png es el logo oficial de
   humicalia.com, con el texto «Humicalia» en blanco sobre fondo transparente
   (marca/MARCA.md §7), así que necesita una cabecera oscura para leerse. El
   borde y el anillo de foco se redefinen con el mismo patrón que usa
   .hc-consent más abajo, porque --hc-border y el azul de marca por defecto
   están pensados para fondo claro y aquí no se ven.

   z-index 100: por encima del banner de cookies (90) y del flotante de
   WhatsApp (80). Con la cabecera fija, .hc-main ya reserva su alto en
   base.css (padding-block-start: var(--hc-header-h)) — no lo repitas aquí. */
.hc-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  border-block-end: 1px solid color-mix(in srgb, var(--hc-text-on-dark) 20%, transparent);
  background: var(--hc-surface-dark);
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
}

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

.hc-header__logo {
  display: inline-flex;
  align-items: center;
  /* 44 px de objetivo táctil aunque el logotipo mida menos de alto
     (marca/MARCA.md §6). */
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

/* El logotipo (marca/logo.png) es cuadrado y ya lleva el nombre dentro
   (MARCA.md §7): no hace falta un <span> de texto al lado. Se dimensiona por
   alto y el ancho lo sigue, para que crezca solo con --hc-header-h. */
.hc-header__marca {
  display: block;
  width: auto;
  height: calc(var(--hc-header-h) - 24px);
}

.hc-header__acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* El teléfono se oculta por debajo de 480 px: a ese ancho, logo + número +
   CTA no caben sin apretar el objetivo táctil del CTA, que es la acción que
   más importa. El enlace conserva su aria-label con el número completo, así
   que ocultar el texto no le quita nombre accesible. */
.hc-header__telefono {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.hc-header__telefono-icono {
  display: block;
  width: 18px;
  height: 18px;
}

@media (min-width: 480px) {
  .hc-header__telefono {
    display: inline-flex;
  }
}

@media (hover: hover) {
  .hc-header__telefono:hover {
    /* Dorado sobre --hc-surface-dark: 8,63:1, AAA (MARCA.md §2). El azul de
       marca por defecto es el patrón para fondo claro y aquí no se lee. */
    color: var(--hc-text-accent-on-dark);
  }
}

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

/* --primaria da 1,75:1 sobre --hc-surface-dark (el mismo azul, casi el mismo
   tono que el fondo de la cabecera: ver la nota de --hc-boton--fantasma más
   abajo) y ahí no se distingue del fondo. Acotado a .hc-header__acciones por
   el mismo motivo que la regla de arriba: el CTA del hero y cualquier otro
   --primaria del kit siguen en azul de marca, solo cambia el de la cabecera.
   Dorado sobre --hc-color-deep: 8,63:1, AAA (MARCA.md §2) — el mismo par de
   colores que ya usa .hc-consent__boton--aceptar más abajo. */
.hc-header__acciones .hc-boton--primaria {
  background: var(--hc-color-accent);
  color: var(--hc-color-deep);
}

@media (hover: hover) {
  .hc-header__acciones .hc-boton--primaria:hover {
    /* Mismo aclarado que usa .hc-consent__boton--aceptar:hover: si heredara
       el hover de --primaria (--hc-color-deep), pasaría a ser del mismo
       color que el fondo de la cabecera y desaparecería. */
    background: color-mix(in srgb, var(--hc-color-accent) 88%, #fff);
  }
}

/* ── 2. Botón — primitiva compartida ────────────────────────────────────────
   .hc-boton es el ÚNICO botón/enlace con apariencia de botón de todo el kit:
   lo usan la cabecera, el cierre de conversión y cualquier CTA que Claude
   añada al construir una sección. Dos modificadores obligatorios,
   --primaria y --secundaria, más --fantasma para el caso de una banda
   oscura: la banda de énfasis y el cierre de conversión del catálogo de
   patrones de sección (arquitectura/ESTRUCTURA.md) pueden ser oscuros, y
   --secundaria da muy poco contraste ahí. */
.hc-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 §6) aunque el texto sea
     corto. */
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hc-radius-pill);
  font-family: var(--hc-font-body);
  font-size: var(--hc-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;
}

.hc-boton--primaria {
  background: var(--hc-color-primary);
  color: var(--hc-text-on-dark);
}

.hc-boton--secundaria {
  /* Solo sobre fondo CLARO: el azul de marca como texto/borde no llega al
     3:1 del SC 1.4.11 sobre una banda oscura. Sobre oscuro, usa --fantasma. */
  background: transparent;
  border-color: var(--hc-color-primary);
  color: var(--hc-color-primary-ink);
}

/* Fantasma: para CTAs sobre banda oscura (--hc-surface-dark). El blanco da
   13,06:1 sobre --hc-color-deep. No usar sobre fondo claro.

   Redefine --hc-focus-ring a --hc-text-on-dark: el azul de marca por
   defecto da 1,75:1 sobre --hc-color-deep (el mismo valor que ya documenta
   tokens.css para el banner y la cabecera transparente del sitio
   principal), muy por debajo del 3:1 del SC 1.4.11. Sin esto, un
   --fantasma sobre una banda oscura tendría el CTA visible pero su anillo
   de foco invisible — justo el caso que .hc-consent ya resuelve así. */
.hc-boton--fantasma {
  background: transparent;
  border-color: color-mix(in srgb, var(--hc-text-on-dark) 55%, transparent);
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
}

@media (hover: hover) {
  .hc-boton--primaria:hover {
    background: var(--hc-color-deep);
  }

  .hc-boton--secundaria:hover {
    background: var(--hc-surface-soft);
  }

  .hc-boton--fantasma:hover {
    background: color-mix(in srgb, var(--hc-text-on-dark) 12%, transparent);
    border-color: var(--hc-text-on-dark);
  }
}

.hc-boton:active {
  transform: translateY(1px);
}

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

@media (prefers-reduced-motion: reduce) {
  .hc-boton:active {
    transform: none;
  }
}

/* ── 3. Banner de consentimiento ────────────────────────────────────────────
   Decisiones ya tomadas y conservadas, 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 — y el CLS es uno de
     los tres presupuestos que este kit no negocia (CLAUDE.md §6).
   - SIEMPRE oscuro, aparezca sobre la sección que aparezca: es una capa
     superpuesta, no contenido de la página. Cambiar de piel entre secciones
     sería incoherencia, no adaptación.
   - z-index 90: por encima del flotante de WhatsApp (80) y por debajo de la
     cabecera (100). No hay panel de menú móvil en una landing de una sola
     página, así que no hace falta el hueco intermedio que usa el sitio
     principal.
   - Redefine --hc-focus-ring a --hc-text-on-dark, el mismo patrón que usa
     .hc-tinta en base.css: el azul de marca sobre una superficie oscura da
     1,75:1 y el SC 1.4.11 pide 3:1. No hace falta una regla de foco propia:
     el :focus-visible global de base.css ya lee la variable.
*/
.hc-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 90;
  background: var(--hc-color-deep);
  border-block-start: 1px solid color-mix(in srgb, var(--hc-text-on-dark) 20%, transparent);
  padding: clamp(1rem, 3vw, 1.5rem);
  padding-block-end: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 40px -28px rgb(0 0 0 / 65%);
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
}

/* Salvaguarda explícita: sin ella, si algún día .hc-consent gana su propio
   `display` (p. ej. flex), 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. */
.hc-consent[hidden] {
  display: none;
}

.hc-consent__caja {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--hc-maxw);
  margin-inline: auto;
}

.hc-consent__titulo {
  font-size: var(--hc-size-nav);
  font-weight: 600;
  /* Dorado sobre --hc-color-deep: 8,63:1, AAA (MARCA.md §2). */
  color: var(--hc-color-accent);
}

.hc-consent__cuerpo {
  /* --hc-size-body, no --hc-size-nota: es texto de lectura, y el texto de
     lectura en móvil no baja de 1rem. */
  max-width: 68ch;
  margin-block-start: 0.35rem;
  font-size: var(--hc-size-body);
  line-height: 1.6;
  color: var(--hc-text-on-dark-soft);
}

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

.hc-consent__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Los dos botones pesan LO MISMO: mismo tamaño, misma tipografía, misma área
   táctil, mismo radio. Solo cambia el color. 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. */
.hc-consent__boton {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border-radius: var(--hc-radius-pill);
  font-family: inherit;
  font-size: var(--hc-size-nav);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.18s ease;
}

.hc-consent__boton--aceptar {
  border: 1px solid var(--hc-color-accent);
  background: var(--hc-color-accent);
  color: var(--hc-color-deep);
}

.hc-consent__boton--rechazar {
  border: 1px solid color-mix(in srgb, var(--hc-text-on-dark) 45%, transparent);
  background: transparent;
  color: var(--hc-text-on-dark);
}

@media (hover: hover) {
  .hc-consent__boton--aceptar:hover {
    background: color-mix(in srgb, var(--hc-color-accent) 88%, #fff);
  }

  .hc-consent__boton--rechazar:hover {
    background: color-mix(in srgb, var(--hc-text-on-dark) 12%, transparent);
  }
}

.hc-consent__boton:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .hc-consent__boton:active {
    transform: none;
  }
}

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

  .hc-consent__botones {
    flex-shrink: 0;
  }

  .hc-consent__boton {
    flex: 0 0 auto;
  }
}

/* ── 4. Formulario ───────────────────────────────────────────────────────────
   .hc-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.

   .hc-form__error pinta el error en COLOR y en TEXTO — nunca solo en color
   (marca/MARCA.md §3 y §6) — con un icono ⚠ que tampoco depende del color
   para leerse. */
.hc-form-panel {
  background: var(--hc-surface);
  color: var(--hc-text-primary);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* Re-ancla el anillo de foco al azul de marca (7,45:1 sobre blanco). Esta
     tarjeta es SIEMPRE clara, también cuando la sección que la envuelve
     redefine --hc-focus-ring a blanco (una banda con .hc-tinta o con
     .hc-boton--fantasma alrededor). Sin este ancla, el panel heredaría ese
     blanco y cada campo, el select y el botón de envío pintarían un
     anillo de foco de 3 px blanco sobre un panel blanco: invisible. */
  --hc-focus-ring: var(--hc-color-primary);
}

.hc-form-panel .hc-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. */
.hc-form-panel .hc-form__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

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

.hc-form-panel .hc-form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Registro de instrumento en las etiquetas: la misma rotulación que las
   cotas y fichas técnicas del sitio principal. El placeholder NO sustituye a
   esta etiqueta: cada campo lleva su <label> real (WCAG 2.2, SC 3.3.2). */
.hc-form-panel .hc-form label {
  font-size: var(--hc-size-nota);
  font-weight: 600;
  letter-spacing: var(--hc-tracking-nota);
  text-transform: uppercase;
  color: var(--hc-text-secondary);
}

/* El consentimiento NO va en versalitas: es una frase de lectura con un
   enlace dentro, no una etiqueta de campo. Ponerla en mayúsculas dificultaría
   leer justo lo que el visitante tiene que entender antes de aceptar. */
.hc-form-panel .hc-form__consentimiento label {
  font-size: var(--hc-size-meta);
  letter-spacing: normal;
  text-transform: none;
}

/* El borde es lo ÚNICO que delimita el control: el campo y el panel
   comparten el mismo fondo (--hc-surface), así que el borde hace de
   contorno de un componente de interfaz y el SC 1.4.11 le exige 3:1.
   --hc-border (un azul al 18% sobre blanco) da solo 1,32:1 ahí — no llega.
   --hc-color-primary-mid sí: 3,72:1 sobre blanco (MARCA.md lo nombra
   explícitamente como color de borde de componente). El panel de este kit
   pinta siempre --hc-surface (blanco), nunca el fondo suave, así que no
   hace falta el escalón a --hc-color-primary que MARCA.md reserva para
   bordes sobre superficie suave. */
.hc-form-panel .hc-form input[type="text"],
.hc-form-panel .hc-form input[type="tel"],
.hc-form-panel .hc-form input[type="email"],
.hc-form-panel .hc-form select,
.hc-form-panel .hc-form textarea {
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--hc-color-primary-mid);
  border-radius: var(--hc-radius-sm);
  background: var(--hc-surface);
  color: inherit;
  font-family: inherit;
  font-size: var(--hc-size-body);
  transition: border-color 0.18s ease;
}

.hc-form-panel .hc-form textarea {
  min-height: 8rem;
  resize: vertical;
}

/* El reposo ya usa --hc-color-primary-mid (ver arriba): el hover sube un
   escalón a --hc-color-primary (7,45:1) para seguir siendo un cambio
   PERCEPTIBLE (marca/MARCA.md §6) y no repetir el mismo color que el
   estado de reposo. */
@media (hover: hover) {
  .hc-form-panel .hc-form input:hover,
  .hc-form-panel .hc-form select:hover,
  .hc-form-panel .hc-form textarea:hover {
    border-color: var(--hc-color-primary);
  }
}

.hc-form-panel .hc-form [aria-invalid="true"] {
  border-color: var(--hc-color-error);
}

.hc-form-panel .hc-form input:disabled,
.hc-form-panel .hc-form select:disabled,
.hc-form-panel .hc-form textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* El error se distingue por texto Y por icono, nunca solo por color
   (marca/MARCA.md §6). landing.js escribe aquí con textContent: mientras el
   campo es
   válido, el nodo existe pero está vacío y no ocupa altura visual salvo la
   que aporte su propio contenido (ningún layout se sostiene sobre él). */
.hc-form-panel .hc-form__error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.2em;
  font-size: var(--hc-size-meta);
  font-weight: 600;
  color: var(--hc-color-error);
}

/* Los errores de CAMPO se retiran del árbol de accesibilidad mientras están
   vacíos: no anuncian nada y no ocupan altura. El global (más abajo) es la
   EXCEPCIÓN: lleva role="alert" en el marcado precisamente para que un
   lector de pantalla anuncie fallos de red, de Turnstile o del servidor sin
   que el visitante tenga que ir a buscarlos, y una región alert que nace
   fuera del árbol y se inserta en el mismo fotograma en que se rellena es el
   patrón clásico de región viva que algunos lectores de pantalla no llegan a
   anunciar — más aún aquí, donde landing.js deshabilita el botón de envío
   (le quita el foco) justo antes de escribir el mensaje, así que no hay
   ningún elemento con foco desde el que se pudiera oír el cambio tampoco. */
.hc-form-panel .hc-form__error:empty:not(.hc-form__error--global) {
  display: none;
}

.hc-form-panel .hc-form__error::before {
  content: "⚠";
}

/* El error global (data-error-de="global") lleva role="alert" en el marcado:
   landing.js lo anuncia escribiendo su texto, sin mover el foco. Un poco más
   de aire que el resto para que se lea como el cierre del formulario, no
   como el error de un campo más. */
.hc-form-panel .hc-form__error--global {
  margin-block-start: 0.25rem;
}

/* Se queda SIEMPRE en el árbol de accesibilidad — nunca display: none —, con
   role="alert" activo desde el primer byte. Mientras no tiene texto, se le
   colapsa la altura y se le retira el icono en vez de sacarlo del render:
   landing.js solo tiene que escribir el texto (mostrarErrorGlobal) para que
   se anuncie, sin depender de un cambio de `display` que algunos lectores de
   pantalla no detectan a tiempo. */
.hc-form-panel .hc-form__error--global:empty {
  min-height: 0;
}

.hc-form-panel .hc-form__error--global:empty::before {
  content: none;
}

.hc-form-panel .hc-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 (ver más abajo),
   no el checkbox: uno de 44 px junto a dos líneas de texto se vería
   descolocado. 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. */
.hc-form-panel .hc-form__consentimiento input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* El label es lo que la mayoría pulsa de verdad, y `for` ya lo hace
   equivalente al checkbox: aquí vive el objetivo de 44 px, con el texto
   centrado dentro de ese hueco mínimo. El <span> interior es el único hijo
   directo del contenedor flex, así el texto y el enlace siguen fluyendo
   como un único párrafo (con su propio ajuste de línea) en vez de convertirse
   cada uno en un flex item independiente. */
.hc-form-panel .hc-form__consentimiento label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  line-height: 1.5;
}

/* El botón de envío NO reutiliza .hc-boton: tiene su propio estado de carga
   (spinner + texto "Enviando…", que pone landing.js) y ese acoplamiento es
   más simple manteniéndolo independiente, igual que ya estaba decidido en el
   formulario del sitio principal. Al ser hijo directo de un .hc-form en
   columna, se estira a todo el ancho por el comportamiento por defecto de
   flexbox (align-items: normal se resuelve como stretch) — no hace falta un
   width: 100% explícito. */
.hc-form-panel .hc-form__enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding-inline: 2rem;
  border: 0;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-color-primary);
  color: var(--hc-text-on-dark);
  font-family: inherit;
  font-size: var(--hc-size-body);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) {
  .hc-form-panel .hc-form__enviar:hover:not(:disabled) {
    background: var(--hc-color-deep);
  }
}

.hc-form-panel .hc-form__enviar:active:not(:disabled) {
  transform: translateY(1px);
}

.hc-form-panel .hc-form__enviar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Estado de carga: landing.js pone aria-busy="true" y cambia el texto a
   "Enviando…" con textContent, así que el spinner se añade como ::before y
   nunca compite con ese texto por el mismo nodo. Al ser hijo de un
   `display: inline-flex` con `gap`, se coloca solo delante del texto sin
   necesitar posicionamiento absoluto. La animación respeta
   prefers-reduced-motion a través de la regla global de base.css (reduce
   animation-duration a 0.01ms): no hace falta repetirla aquí. */
.hc-form-panel .hc-form__enviar[aria-busy="true"]::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--hc-text-on-dark) 35%, transparent);
  border-block-start-color: var(--hc-text-on-dark);
  border-radius: 50%;
  animation: hc-girar 0.7s linear infinite;
}

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

/* ── 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— lo decide Claude al construir cada
   landing con el catálogo de arquitectura/ESTRUCTURA.md. */
.hc-cierre__alternativas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

/* ── 6. Botón flotante de WhatsApp ───────────────────────────────────────────
   56×56: por encima del mínimo táctil de 44 px (marca/MARCA.md §6), con
   margen. Los dos
   verdes son de marca AJENA (WhatsApp, no Humicalia) y por eso viven aquí y
   no en tokens.css: meterlos entre los tokens de marca invitaría a
   reutilizarlos donde no pintan nada. */
.hc-wasap {
  --hc-wasap-verde: #25d366;
  --hc-wasap-verde-hover: #1eb457;
  /* 8,13:1 sobre blanco y 4,10:1 sobre el propio verde: el verde oficial da
     solo 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. El glifo interior no
     necesita
     este aro —es un logotipo, y la SC 1.4.11 exceptúa los logotipos— pero el
     círculo que lo envuelve sí. */
  --hc-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(--hc-wasap-aro);
  border-radius: var(--hc-radius-pill);
  background: var(--hc-wasap-verde);
  box-shadow: var(--hc-shadow-float);
  color: #fff;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

.hc-wasap__glifo {
  display: block;
}

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

.hc-wasap:active {
  transform: scale(0.97);
}

/* El foco global (--hc-focus-ring, el azul de marca) da 7,45:1 sobre blanco
   pero solo 1,75:1 sobre una banda oscura. Este botón flota sobre TODA la
   página y no puede saber qué hay debajo en cada momento, así que lleva dos
   anillos concéntricos: uno claro, visible sobre fondo oscuro, y el aro
   verde oscuro que ya lleva por defecto, visible sobre fondo claro. Uno de
   los dos es siempre legible sea cual sea la sección que hay debajo. */
.hc-wasap:focus-visible {
  outline-color: var(--hc-text-on-dark);
  box-shadow:
    0 0 0 9px var(--hc-wasap-aro),
    var(--hc-shadow-float);
}

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

/*
  Definición de .hc-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.hc-consent-abierto .hc-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. */
.hc-footer {
  background: var(--hc-surface-soft);
  color: var(--hc-text-secondary);
}

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

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

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

.hc-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(--hc-text-secondary);
  text-decoration: none;
}

@media (hover: hover) {
  .hc-footer__lista a:hover {
    color: var(--hc-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). */
.hc-footer__cookies {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

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

.hc-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(--hc-border);
  font-size: var(--hc-size-meta);
}

.hc-footer__creditos a {
  color: inherit;
}

@media (hover: hover) {
  .hc-footer__creditos a:hover {
    color: var(--hc-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 en pantallas estrechas.
   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 de la
   página. Se reserva ANCHO y no alto: el texto envuelve antes de que quede
   una franja muerta al final del pie. Por encima de 1024 px no hace falta —
   el aviso es una línea corta y el botón cae en el vacío de la derecha. */
@media (max-width: 1023px) {
  .hc-footer__legal {
    padding-inline-end: calc(var(--hc-gutter) + 76px);
  }
}

/* ── 8. Primitivas del encabezado de sección ────────────────────────────────
   Eyebrow, título y entradilla de ESTRUCTURA.md §1: la única excepción a la
   regla 8 de ese apartado (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
   (.hc-banda .hc-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: primary-ink da 7,45:1 sobre
   blanco y 5,86:1 sobre el suave, pero sobre --hc-surface-dark o .hc-tinta
   no llega; ahí la sección lo pasa a --hc-text-accent-on-dark. */
.hc-eyebrow {
  margin-block-end: 0.75rem;
  font-family: var(--hc-font-body);
  font-size: var(--hc-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-color-primary-ink);
}

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

.hc-entradilla {
  max-width: 60ch;
  margin-block-start: 1rem;
  font-size: var(--hc-size-lead);
}
/* ──────────────────────────────────────────────────────────────────────────
   Estilos propios de las secciones de contenido de la landing de A Coruña.
   Se concatenan detrás de componentes.css (CLAUDE.md §1, arquitectura/
   COMPONENTES.md introducción). Usan los tokens de marca/tokens.css y las
   primitivas de encabezado de sección ya definidas en componentes.css
   (.hc-eyebrow, .hc-titulo, .hc-entradilla) — no se repiten aquí.
   ────────────────────────────────────────────────────────────────────── */

/* 1. Hero — composición C: imagen de fondo con velo (arquitectura/
   ESTRUCTURA.md §2.1), elegida para no repetir la composición de la
   landing anterior (arquitectura/VARIACION.md §2). */
.hc-hero--c {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
}

.hc-hero__imagen-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hc-hero--c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hc-color-deep) 55%, transparent),
    color-mix(in srgb, var(--hc-color-deep) 80%, transparent)
  );
}

.hc-hero__caja {
  position: relative;
  z-index: 2;
  max-width: var(--hc-maxw-narrow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hc-hero__h1 {
  font-size: var(--hc-size-display);
  font-weight: 500;
  letter-spacing: var(--hc-tracking-display);
}

.hc-hero__entradilla {
  max-width: 50ch;
  font-size: var(--hc-size-lead);
  color: var(--hc-text-on-dark-soft);
}

/* 2. Aval y garantías — rejilla de tarjetas (ESTRUCTURA §2.3) */
.hc-aval__rejilla {
  margin-block-start: 1.5rem;
  display: grid;
  gap: var(--hc-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.hc-aval__tarjeta {
  padding: 1.5rem;
  background: var(--hc-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  box-shadow: var(--hc-shadow-sm);
}

.hc-aval__cifra {
  font-family: var(--hc-font-display);
  font-size: var(--hc-size-cifra);
  font-weight: 500;
  color: var(--hc-color-primary-ink);
}

.hc-aval__texto {
  margin-block-start: 0.5rem;
  color: var(--hc-text-secondary);
}

/* 3. Contexto local — bloque editorial alterno, imagen a la DERECHA en
   escritorio, siempre arriba en móvil */
.hc-contexto--suave {
  background: var(--hc-surface-soft);
}

.hc-contexto__grid {
  display: grid;
  gap: var(--hc-gap);
  grid-template-areas:
    "imagen"
    "texto";
}

@media (min-width: 768px) {
  .hc-contexto__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "texto imagen";
    align-items: start;
  }
}

.hc-contexto__imagen {
  grid-area: imagen;
  border-radius: var(--hc-radius-lg);
}

.hc-contexto__texto {
  grid-area: texto;
}

.hc-contexto__texto h3 {
  margin-block-start: 1.75rem;
  margin-block-end: 0.5rem;
  font-size: var(--hc-size-h3);
  font-weight: 500;
}

.hc-contexto__tabla-caja {
  overflow-x: auto;
  margin-block-start: 0.75rem;
}

.hc-contexto__tabla {
  width: 100%;
  min-width: 26rem;
  border-collapse: collapse;
  font-size: var(--hc-size-meta);
}

.hc-contexto__tabla th,
.hc-contexto__tabla td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--hc-border);
}

.hc-contexto__tabla thead th {
  font-family: var(--hc-font-body);
  font-weight: 600;
  color: var(--hc-text-secondary);
}

.hc-contexto__fuente {
  margin-block-start: 0.5rem;
  font-size: var(--hc-size-nota);
  letter-spacing: var(--hc-tracking-nota);
  color: var(--hc-text-muted);
}

/* 4. El problema dominante — humedad, acordeón horizontal de 4 columnas
   (ESTRUCTURA §2.4), fondo claro: la humedad es el problema dominante de
   esta zona (datos-locales/a-coruna.md). */
.hc-problema-humedad__acordeon {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.hc-problema-humedad__acordeon input {
  display: none;
}

.hc-problema-humedad__columna {
  position: relative;
  padding: 1.25rem;
  background: var(--hc-surface-soft);
  border-radius: var(--hc-radius);
}

.hc-problema-humedad__etiqueta {
  display: block;
  min-height: 44px;
  padding: 0.5rem 0;
  font-family: var(--hc-font-body);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .hc-problema-humedad__acordeon input {
    display: block;
  }

  .hc-problema-humedad__etiqueta {
    cursor: pointer;
  }

  .hc-problema-humedad__acordeon input:focus-visible + label {
    outline: 3px solid var(--hc-focus-ring);
    outline-offset: -3px;
  }

  .hc-problema-humedad__acordeon {
    grid-template-columns: 3fr 1fr 1fr 1fr;
    transition: grid-template-columns 0.35s ease;
  }

  .hc-problema-humedad__acordeon:has(#hc-humedad-2:checked) {
    grid-template-columns: 1fr 3fr 1fr 1fr;
  }

  .hc-problema-humedad__acordeon:has(#hc-humedad-3:checked) {
    grid-template-columns: 1fr 1fr 3fr 1fr;
  }

  .hc-problema-humedad__acordeon:has(#hc-humedad-4:checked) {
    grid-template-columns: 1fr 1fr 1fr 3fr;
  }

  .hc-problema-humedad__columna {
    min-width: 0;
    overflow: hidden;
  }

  .hc-problema-humedad__columna:not(:has(input:checked)) .hc-problema-humedad__cuerpo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* 5. El otro problema — cal, bloque corto y honesto, editorial, imagen a la
   IZQUIERDA en escritorio, fondo suave */
.hc-problema-cal--suave {
  background: var(--hc-surface-soft);
}

.hc-problema-cal__grid {
  display: grid;
  gap: var(--hc-gap);
  grid-template-areas:
    "imagen"
    "texto";
}

@media (min-width: 768px) {
  .hc-problema-cal__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "imagen texto";
    align-items: start;
  }
}

.hc-problema-cal__imagen {
  grid-area: imagen;
  border-radius: var(--hc-radius-lg);
}

.hc-problema-cal__texto {
  grid-area: texto;
}

/* 6. Cómo funciona — pasos numerados (ESTRUCTURA §2.6), fondo claro */
.hc-pasos {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

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

.hc-pasos__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hc-pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--hc-radius-pill);
  background: var(--hc-color-primary);
  color: var(--hc-text-on-dark);
  font-family: var(--hc-font-display);
  font-weight: 500;
}

.hc-pasos__item h3 {
  font-size: var(--hc-size-h3);
  font-weight: 500;
}

/* 7. Banda de énfasis — full-bleed, fondo oscuro (ESTRUCTURA §2.5, CSS literal) */
.hc-banda {
  position: relative;
  width: 100%;
  background: var(--hc-surface-dark);
  color: var(--hc-text-on-dark);
  --hc-focus-ring: var(--hc-text-on-dark);
  padding-block: var(--hc-section-y);
  text-align: center;
}

.hc-banda::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hc-banda .hc-eyebrow {
  color: var(--hc-text-accent-on-dark);
}

.hc-banda__inner {
  position: relative;
}

.hc-banda__cifra {
  margin-block: 0.75rem;
  font-family: var(--hc-font-display);
  font-size: var(--hc-size-display);
  font-weight: 500;
}

.hc-banda__cuerpo {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--hc-text-on-dark-soft);
}

/* 8. FAQ — <details>/<summary> nativos (ESTRUCTURA §2.7), fondo suave */
.hc-faq--suave {
  background: var(--hc-surface-soft);
}

.hc-faq__lista {
  margin-block-start: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.hc-faq__item {
  padding: 1rem 1.25rem;
  background: var(--hc-surface);
  border-radius: var(--hc-radius);
}

.hc-faq__item summary {
  cursor: pointer;
  font-family: var(--hc-font-body);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.hc-faq__item p {
  margin-block-start: 0.75rem;
  color: var(--hc-text-secondary);
}

/* 9. Cierre de conversión — fondo claro: botones --primaria (COMPONENTES.md
   bloque 4, tabla de fondo/alternativas) */
.hc-cierre h2 {
  font-family: var(--hc-font-display);
  font-size: var(--hc-size-h2);
  font-weight: 500;
  letter-spacing: var(--hc-tracking-display);
  max-width: 22ch;
}

.hc-cierre > .hc-container > p:first-of-type {
  max-width: 60ch;
  margin-block: 1rem 2rem;
  font-size: var(--hc-size-lead);
}

/* ── Páginas secundarias: legales y gracias ── */
.hc-legal {
  max-width: var(--hc-maxw-narrow);
}

.hc-legal h1 {
  font-size: var(--hc-size-h2);
  font-weight: 500;
  letter-spacing: var(--hc-tracking-display);
  margin-block-end: 1.5rem;
}

.hc-legal h2 {
  margin-block: 2.25rem 0.75rem;
  font-size: var(--hc-size-h3);
  font-weight: 500;
}

.hc-legal h3 {
  margin-block: 1.5rem 0.5rem;
  font-family: var(--hc-font-body);
  font-size: var(--hc-size-body);
  font-weight: 600;
}

.hc-legal p,
.hc-legal ul {
  margin-block-end: 1rem;
}

.hc-legal ul {
  padding-inline-start: 1.25rem;
}

.hc-legal a {
  color: var(--hc-color-primary-ink);
}

.hc-gracias h1 {
  font-size: var(--hc-size-h2);
  font-weight: 500;
  margin-block-end: 1.25rem;
}

.hc-gracias p {
  max-width: 60ch;
  margin-block-end: 1rem;
}

.hc-gracias .hc-boton {
  margin-block-start: 1rem;
}