/* ==========================================================================
   Esteritek — hoja de estilo única
   --------------------------------------------------------------------------
   Sitio estático. Sin PHP, sin base de datos, sin compilación, sin
   dependencias externas. Un archivo HTML y este archivo CSS.

   Sistema de diseño: ui-ux-pro-max — estilo "Trust & Authority".
   Las desviaciones respecto a lo generado están documentadas en
   design-system/esteritek/MASTER.md, sección PROJECT OVERRIDES.
   ========================================================================== */

/* --- 1. Tipografía autoalojada -------------------------------------------
   Nada de @import a Google Fonts: cero peticiones a terceros y el sitio no
   se rompe si cambia una URL ajena. woff2 desde @fontsource.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- 2. Tokens -----------------------------------------------------------
   COLORES DE MARCA REALES, muestreados de los archivos del logo, no elegidos
   a ojo:
       verde oscuro  #007F2D      lima  #93C01F
       azul          #35A8E0      tinta #030300     papel #FAFAF5

   Un color de marca se aprueba mirando un logo grande. Como texto pequeno en
   una pagina web, casi siempre reprueba. Medido sobre blanco:

       azul  #35A8E0 -> 2.68:1   REPRUEBA
       lima  #93C01F -> 2.14:1   REPRUEBA
       verde #007F2D -> 5.16:1   pasa

   Solo el verde oscuro sirve como texto. El lima y el azul se usan unicamente
   sobre la superficie oscura, donde si pasan. Cada ratio va anotado.
   -------------------------------------------------------------------------- */
:root {
  /* Marca, tal cual viene del logo — sin alterar */
  --brand-green: #007F2D;   /* sobre papel   =  4.92:1  AA  */
  --brand-lime:  #93C01F;   /* sobre oscuro  =  6.22:1  AA  */
  --brand-blue:  #35A8E0;   /* sobre oscuro  =  4.97:1  AA  */

  /* Superficies oscuras derivadas del verde de marca — mismo tono, mas oscuro */
  --green-deep:    #003814;   /* blanco encima = 13.33:1  AAA */
  --green-deepest: #002C10;   /* blanco encima = 15.35:1  AAA */

  --green: #007F2D;
  --lime:  #93C01F;
  --lime-wash: #F1F7E4;

  /* Accion. DOS tokens, y esta vez los dos son colores de marca.
     El lima sobre papel mide 2.05:1 — el boton perderia su forma. El verde
     sobre la banda oscura mide 2.59:1 — el mismo problema al reves.
        superficie clara  -> verde de marca con texto blanco
        superficie oscura -> lima de marca con texto tinta                  */
  --cta:               #007F2D;  /* blanco encima = 5.16:1 AA  | vs papel  4.92:1 */
  --cta-hover:         #00611F;
  --cta-on-dark:       #93C01F;  /* tinta encima  = 8.29:1 AAA | vs oscuro 6.22:1 */
  --cta-on-dark-hover: #A8D62A;

  /* Superficies */
  --bg:          #FAFAF5;   /* el mismo papel de la hoja del logo */
  --surface:     #FFFFFF;
  --surface-alt: #F1F3EC;
  --border:      #C6CFC0;
  --border-soft: #E1E6DB;

  /* Texto */
  --ink:         #121A12;
  --text:        #121A12;   /* sobre --bg   = 16.97:1  AAA */
  --text-muted:  #4A554A;   /* sobre --bg   =  7.46:1  AAA */
  --on-dark:      #FFFFFF;
  --on-dark-soft: #D7E8D2;  /* sobre oscuro = 10.38:1  AAA */

  /* Escala de espacio */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;   --s9: 6rem;

  /* Sombra y radio */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(18, 26, 18, .06), 0 1px 3px rgba(18, 26, 18, .08);
  --shadow-md: 0 4px 6px rgba(18, 26, 18, .05), 0 10px 20px rgba(18, 26, 18, .08);
  --shadow-lg: 0 10px 15px rgba(18, 26, 18, .06), 0 24px 48px rgba(18, 26, 18, .10);

  /* Fuentes */
  --font-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Duracion de transicion — CSS, no GSAP. */
  --t: 200ms;
}

/* --- 3. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;              /* 16px mínimo: menos provoca zoom en iOS */
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* red de seguridad, no sustituto de medir */
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 600; }

p  { margin: 0 0 var(--s4); max-width: 68ch; }

a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--s2); }

/* Foco visible siempre. Nunca outline:none sin reemplazo. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--lime); }

/* Salto de anclaje: que el encabezado fijo no tape el destino. */
:target { scroll-margin-top: 5.5rem; }

.skip-link {
  position: absolute; left: var(--s4); top: -100px;
  z-index: 100;
  background: var(--green-deep); color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius);
  font-weight: 700;
  transition: top var(--t) ease;
}
.skip-link:focus { top: var(--s4); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4. Contenedor y ritmo vertical --------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section { padding-block: clamp(var(--s7), 8vw, var(--s9)); }
.section--tight { padding-block: clamp(var(--s6), 5vw, var(--s7)); }
.section--alt   { background: var(--surface-alt); }
.section--wash  { background: var(--lime-wash); }

.section-head { max-width: 60ch; margin-bottom: var(--s7); }
.section-head--compact { margin-bottom: var(--s5); }
.section-head p { color: var(--text-muted); font-size: 1.0625rem; margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  /* 14px, no 13px. En un telefono, a la distancia a la que se sostiene,
     13px en mayusculas con tracking abierto se lee mal — y este rotulo no es
     decorativo: lleva el servicio y la ciudad. */
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--s3);
}
.on-dark .eyebrow { color: var(--lime); }

/* Sobre la FOTO, no sobre verde sólido, el rótulo pequeño cambia de color.
   El lima de marca mide 6.22:1 contra el verde profundo, pero sólo 3.71:1
   contra la foto velada: es un color de luminancia media, y bajo el texto de
   13px la luminancia del fondo ya no es una constante sino un rango.
   Seguir subiendo el velo para salvar cuatro palabras habría empañado a los
   técnicos. Se cambia el texto, no la imagen. El lima sigue siendo el acento
   de marca en todas las superficies sólidas. */
.hero .eyebrow { color: var(--on-dark-soft); }

/* --- 5. Botones ----------------------------------------------------------
   Objetivo táctil mínimo 44x44 en todos los casos.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t) ease, border-color var(--t) ease,
              color var(--t) ease, transform var(--t) ease, box-shadow var(--t) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--cta); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--cta-hover); color: #fff; box-shadow: var(--shadow-md); }

/* Sobre navy: el ámbar oscuro desaparece (2.06:1 contra el fondo).
   Se invierte a ámbar brillante con texto tinta. */
.on-dark .btn--primary { background: var(--cta-on-dark); color: var(--ink); }
.on-dark .btn--primary:hover { background: var(--cta-on-dark-hover); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--green-deep); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); border-color: var(--green-deep); color: var(--green-deep); }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.on-dark .btn--ghost:hover { background: rgba(255,255,255,.10); border-color: #fff; color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* --- 6. Encabezado -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* El logo es la marca real del cliente, trazada de su propio arte y
     verificada pixel a pixel contra el original. No se recolorea ni se
     reproporciona: sólo se escala. */
}
.brand__logo { height: 35px; width: auto; display: block; }
.site-footer .brand__logo { height: 32px; }
@media (max-width: 420px) { .brand__logo { height: 30px; } }

.header-actions { display: flex; align-items: center; gap: var(--s4); }

.header-phone {
  display: none;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  color: var(--green-deep);
  text-decoration: none;
  min-height: 44px;
}
.header-phone:hover { color: var(--green); }

.header-actions .btn { min-height: 44px; padding: var(--s2) var(--s5); font-size: 0.9375rem; }

@media (min-width: 720px) { .header-phone { display: inline-flex; } }

/* --- 7. Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Color de respaldo: lo único que se ve si la foto falla. Debe ser un fondo
     sobre el que el texto YA cumpla contraste por sí solo. */
  background: var(--green-deepest);
  color: var(--on-dark);
  padding-block: clamp(var(--s8), 11vw, 7.5rem);
  overflow: hidden;
}

/* Va como <img>, no como background-image: sólo un <img> se puede precargar,
   marcar como LCP y dirigir con <picture> a dos recortes distintos. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  z-index: 0;
}

/* EL VELO — y por qué tiene esta forma y no otra.
   La foto es de clave alta: luminancia media 176/255, y su cuarto izquierdo
   promedia 219, casi blanco. El texto del hero es blanco. Sin velo el
   contraste ahí es de aproximadamente 1.2:1 — ilegible.
   Pero un velo parejo sobre toda la foto la convierte en lodo verde y tira a
   la basura lo único que hace buena a esta imagen: los dos técnicos, el vapor
   y el acero.
   Así que el velo es DIRECCIÓN DE ARTE, no un filtro. Denso sobre el espacio
   vacío de la izquierda, que es donde va el texto y donde la foto no tiene
   nada que perder; nulo pasando el 72%, donde está la gente. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(0, 40, 14, .975) 0%,
      rgba(0, 42, 15, .955) 34%,
      rgba(0, 46, 17, .92)  47%,
      rgba(0, 54, 21, .60)  58%,
      rgba(0, 60, 24, .18)  71%,
      rgba(0, 66, 27, .02)  86%),
    /* El velo horizontal no basta arriba: el techo de la nave, con sus
       lámparas, es la zona más clara de toda la foto, y ahí es donde cae el
       rótulo en lima. Un refuerzo vertical corto lo resuelve sin tocar a la
       gente, que está en la mitad inferior del encuadre. */
    linear-gradient(to bottom, rgba(0, 34, 12, .50), transparent 34%),
    linear-gradient(to top, rgba(0, 30, 11, .38), transparent 40%);
}

.hero > .wrap { position: relative; z-index: 2; }

/* REGRESIÓN, restaurado 2026-08-06. Al reescribir el bloque del hero de un
   tirón me llevé por delante estas tres reglas hermanas: el párrafo de entrada
   perdió su tamaño y su color, y la línea de la garantía perdió su display:flex
   — el icono cayó a su propio renglón.
   Ni la auditoría de maquetación ni la de contraste lo vieron, porque no es
   una columna aplastada ni un contraste bajo: es tipografía perdida. Lo vio la
   captura de pantalla. Por eso el paso de capturas no es decorativo. */
.hero h1 { color: #fff; margin-bottom: var(--s5); }

.hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 54ch;
  margin-bottom: 0;
}

.hero__note {
  margin-top: var(--s5);
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.hero__note svg { flex: none; color: var(--lime); }

/* El ancho de la columna de texto es una decisión de composición, no de estilo.
   La foto tiene su espacio vacío en el cuarto izquierdo; el texto vive ahí.
   Ensancharlo obliga a subir el velo sobre la gente para compensar, que es
   arreglar el síntoma. A 1440px esta caja termina cerca del 48% del ancho,
   justo donde el velo empieza a soltar la imagen. */
@media (min-width: 1200px) {
  /* OJO: no poner el max-width en .hero__inner. Ese elemento ES el .wrap, que
     lleva margin-inline:auto — estrecharlo lo CENTRA, y centrarlo lo empuja
     justo hacia la mitad brillante de la foto. Medido: la columna pasó de
     10-61% a 29-71% del ancho y el contraste del titular cayó de 2.27:1 a
     1.13:1. Estrechar la caja equivocada empeoró exactamente lo que intentaba
     arreglar.
     Se limitan los HIJOS, que se alinean a la izquierda dentro del wrap. */
  .hero__inner > * { max-width: 37rem; }
}

/* --- 7b. Hero apilado: TODO por debajo de 1200px -------------------------
   El velo horizontal esta calibrado para un titular de 37rem alineado a la
   izquierda — y esa columna estrecha SOLO existe a partir de 1000px. Entre
   721 y 999 el texto ocupaba el ancho completo y cruzaba entera la parte del
   velo que ya habia soltado la imagen.
   Medido: 1.18:1 a 768px y 1.22:1 a 721px. Ilegible, no "un poco justo".

   Habia mirado la captura de 768px y me parecio bien. No lo estaba: el ojo
   promedia y la medicion no. Esta banda existia sin haber sido disenada, entre
   dos anchos que si habia comprobado.

   Primer intento: extender el apilado hasta 999px. No basto — a 1024px el
   contenedor todavia no esta centrado, asi que el texto empieza a 24px del
   borde y termina cerca del 60% del ancho, ya dentro de la parte suelta del
   velo. Medido: 3.02:1.

   Corte definitivo: 1200px. A partir de ahi el contenedor de 1140px ya esta
   centrado, el texto termina cerca del 53% y el velo lo cubre con margen sin
   necesidad de oscurecer mas la fotografia. Subir la densidad del velo habria
   sido el arreglo facil, y habria apagado a los tecnicos en TODAS las
   pantallas para salvar una franja de 200px. */
@media (max-width: 1199px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  .hero > .wrap { order: 1; }
  .hero picture  { order: 2; display: block; width: 100%; margin-top: var(--s7); }
  .hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;     /* recorte ancho: es el archivo que sirve aqui */
    object-position: 50% 50%;
  }
  .hero__scrim { display: none; }
}

/* En telefono se sirve el recorte vertical 1200x900, asi que la caja cambia. */
@media (max-width: 720px) {
  .hero__img { aspect-ratio: 4 / 3; }
}

/* --- 8. Franja de confianza ----------------------------------------------- */
.trust {
  background: var(--green-deepest);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.10);
}
.trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  padding-block: var(--s6);
}
@media (min-width: 640px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }

.trust__item { display: flex; gap: var(--s3); align-items: flex-start; }
.trust__item svg { flex: none; color: var(--lime); margin-top: 2px; }
.trust__item strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.3;
}
.trust__item span { color: var(--on-dark-soft); font-size: 0.9375rem; }

/* --- 9. Rejillas ---------------------------------------------------------
   Base = una columna. El estado por defecto de una rejilla debe ser el
   seguro: una rejilla con pocos hijos nunca debe dejar contenido en una
   pista estrecha. Las columnas se añaden hacia arriba, no hacia abajo.
   -------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* (no hay regla de cuatro columnas — ver el comentario de arriba) */
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Las cuatro tarjetas de servicio NO van en cuatro columnas. Nunca.
   Medido: a 1440px, cuatro tarjetas dentro del contenedor de 1140px dejan
   255px cada una y 207px de texto — 24 caracteres por linea para parrafos de
   130 caracteres. El estandar de esta casa marca como roto cualquier cosa por
   debajo de ~45, y lo marca con razon: a 24 caracteres el ojo pierde la linea
   en cada salto.
   Cuatro columnas se veian ordenadas en una captura y se leian mal en la
   realidad. Dos columnas dan 486px de texto, unos 57 caracteres. */
@media (min-width: 1120px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.plan:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.plan__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--green-deep);
}
.plan__tag { color: var(--text-muted); font-size: 0.9375rem; }
.plan__desc { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
.plan__time {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--green);
}
.plan__time svg { flex: none; }

/* --- 12. Cobertura -------------------------------------------------------- */
.cities {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  list-style: none; padding: 0; margin: 0;
}
.cities li {
  margin: 0;
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--s2) var(--s5);
  font-weight: 600;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  color: var(--green-deep);
}
.cities svg { color: var(--green); flex: none; }

/* --- 13. Bloque de contacto ----------------------------------------------- */
.contact {
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-deepest) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(var(--s6), 5vw, var(--s8));
}
.contact h2 { color: #fff; }
.contact p { color: var(--on-dark-soft); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 860px) {
  .contact__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s8); }
}

.contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.contact__list li { margin: 0; display: flex; gap: var(--s3); align-items: flex-start; }
.contact__list svg { flex: none; color: var(--lime); margin-top: 3px; }
.contact__list a { color: #fff; font-weight: 700; }
.contact__list a:hover { color: var(--lime); }
.contact__list span { display: block; color: var(--on-dark-soft); font-size: 0.9375rem; }

/* --- 14. Pie -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #C9D6C5;
  padding-block: var(--s7) var(--s6);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--lime); }
.footer__blurb { margin-top: var(--s3); color: #9DAF99; max-width: 34ch; }

.footer__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__grid h4 {
  font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #9DAF99; margin-bottom: var(--s3);
}
.footer__list { list-style: none; padding: 0; margin: 0; }
/* Excepción de espaciado WCAG 2.5.8: los enlaces del pie miden menos de
   24px de alto, así que se separan verticalmente para cumplir igual. */
.footer__list li { margin-bottom: var(--s3); }
.footer__list a { display: inline-block; padding-block: 2px; }

.footer__bottom {
  padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between;
  color: #9DAF99;   /* sobre --ink #121A12 = 7.63:1  AAA */
}
.footer__bottom p { margin: 0; max-width: none; }

/* --- 15. Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

/* --- 16. Impresión -------------------------------------------------------- */
@media print {
  .site-header, .skip-link, .btn-row { display: none; }
  body { background: #fff; color: #000; }
  .hero, .trust, .contact, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .contact h2 { color: #000 !important; }
}

/* --- 17. Prosa y preguntas frecuentes -----------------------------------
   Añadido para SEO local, pero la medida sigue siendo la misma regla de
   siempre: una columna de lectura acotada. Sin max-width el párrafo correría
   1140px de ancho y la auditoría lo marcaría como "sin medida".
   -------------------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose p { font-size: 1.0625rem; color: var(--text-muted); }
.prose p:last-child { margin-bottom: 0; }

.faq { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--s5);
}
.faq__item h3 { margin-bottom: var(--s3); color: var(--green-deep); }
.faq__item p  { margin-bottom: 0; color: var(--text-muted); font-size: 0.9688rem; max-width: 62ch; }