/* ============================================================================
   GT Services — hoja de estilos única
   ----------------------------------------------------------------------------
   Un solo archivo, sin compilación ni dependencias. Se sirve tal cual.

    1. Tokens                     8. Páginas interiores
    2. Reset y base               9. Formulario y contacto
    3. Utilidades                10. Pie de página
    4. Tipografía                11. WhatsApp flotante
    5. Componentes               12. Responsive
    6. Cabecera y navegación     13. Movimiento reducido e impresión
    7. Secciones de la portada

   CRITERIO DE COLOR
   Azul marino = autoridad y fondo institucional. Marfil = respiro y lectura.
   Dorado = SOLO acento: filetes, numeración, palabra destacada y el botón
   principal. Verde = exclusivamente WhatsApp, nunca decorativo.

   CRITERIO DE CONTRASTE
   Los tonos de texto están elegidos para superar 4.5:1 sobre su fondo. El
   dorado claro (--gold) no se usa nunca para texto pequeño sobre marfil: para
   eso existe --gold-ink, que sí alcanza el contraste exigido.
   ========================================================================== */

/* =============================================================
   0. Tipografías auto-alojadas
   -------------------------------------------------------------
   Antes se pedían a Google en cada visita: dos conexiones externas, bloqueo
   del pintado y la IP del visitante enviada a un tercero (lo que no encajaba
   con la política de privacidad del propio sitio). Ahora los archivos viven
   en assets/fonts/ y se declaran aquí mismo — no en un archivo aparte —
   porque un @import añadiría una petición encadenada en la ruta crítica.

   Se incluyen dos alfabetos:
     · «latin»    — español e inglés (á é í ó ú ñ ü ¿ ¡)
     · «cyrillic» — ruso

   El truco está en `unicode-range`: el navegador mira qué letras hay en la
   página y descarga SOLO los archivos que necesita. Quien lee en español no
   se descarga ni un byte de cirílico, y al revés.

   Para volver a descargarlas:  python tools/descargar-fuentes.py
   ============================================================= */

/* Inter — variable: un solo archivo cubre los pesos 300 a 600. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/inter-300-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader redonda — los títulos usan siempre peso 400: en una serif
   editorial el peso ligero es justamente lo que da el aire de firma. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader cursiva — solo para las palabras destacadas y las citas. */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Chino ------------------------------------------------------------
   Dos ajustes de composición que el chino necesita y las lenguas latinas no:

   · El chino no separa las palabras con espacios, así que un renglón puede
     cortarse en cualquier punto. `line-break: strict` impide que un signo de
     puntuación quede solo al principio de una línea, que es la falta de
     composición más visible en un texto chino.

   · Los ideogramas son cuadrados y densos. Con el interlineado pensado para
     el alfabeto latino se ven apelmazados, así que se abre un poco.

   El `letter-spacing` negativo que llevan algunos titulares es para el latino
   y en chino aprieta los ideogramas: se anula.                              */
:root:lang(zh), [lang="zh"] {
  line-break: strict;
  overflow-wrap: break-word;
}
html[lang="zh"] body { line-height: 1.75; }
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] .h1,
html[lang="zh"] .h2,
html[lang="zh"] .h3 {
  letter-spacing: 0;
  line-height: 1.35;
}
/* La cursiva dorada de los titulares: el chino no tiene cursiva de verdad, y
   el navegador la falsifica inclinando el ideograma, que queda mal. Se marca
   con el color, que es lo que de verdad la distingue. */
html[lang="zh"] .em { font-style: normal; }

/* ---- Cirílico (ruso) --------------------------------------------------
   Inter sí trae cirílico, así que el texto de cuerpo usa la misma fuente en
   los tres idiomas.

   Newsreader NO trae cirílico. Para los títulos en ruso se usa PT Serif,
   diseñada por una fundición rusa precisamente para este alfabeto. No hace
   falta cambiar ningún `font-family`: al no encontrar la letra en Newsreader,
   el navegador pasa sola a la siguiente familia de la lista (ver --serif).  */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/inter-300-600-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ptserif-400-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ptserif-400-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* ---- Azul marino: color principal ---- */
  --navy-950: #040C18;
  --navy-900: #071528;
  --navy-800: #0B1F3A;   /* color de marca */
  --navy-700: #12294A;
  --navy-600: #1B375F;
  --navy-500: #294C7C;
  --steel:    #3A5B8C;   /* azul medio, solo para luces y degradados */

  /* ---- Marfil y blanco cálido: fondos de lectura ---- */
  --ivory:   #F8F5F0;
  --ivory-2: #F1ECE3;
  --ivory-3: #E8E1D5;
  --paper:   #FFFFFF;

  /* ---- Grises de texto ---- */
  --carbon:      #1C1F24;   /* títulos y texto fuerte */
  --carbon-soft: #4A515B;   /* cuerpo de texto        7.4:1 sobre marfil */
  --carbon-mute: #646B75;   /* apoyo y metadatos      5.1:1 sobre marfil */

  /* ---- Dorado: acento, siempre discreto ---- */
  --gold:      #A9853F;   /* filetes, iconos, superficies */
  --gold-ink:  #8A6A28;   /* texto pequeño sobre marfil   4.7:1 */
  --gold-soft: #C6A461;   /* sobre azul marino            6.6:1 */
  --gold-pale: #E4D3AC;
  --gold-glow: rgba(169, 133, 63, .16);

  /* ---- Líneas y divisores ---- */
  --line:        rgba(28, 31, 36, .14);
  --line-soft:   rgba(28, 31, 36, .07);
  --line-strong: rgba(28, 31, 36, .22);
  --line-gold:   rgba(169, 133, 63, .38);
  --line-onnavy: rgba(248, 245, 240, .15);
  --line-onnavy-s: rgba(248, 245, 240, .09);

  /* ---- Estados ---- */
  --error:      #B4432A;
  --error-soft: #F0B4A4;
  --ok:         #1F7A5C;
  --ok-soft:    #8FD9BE;

  /* ---- Verde: EXCLUSIVAMENTE WhatsApp ---- */
  --wa:      #25D366;
  --wa-dark: #128C7E;

  /* ---- Tipografías ----
     Las familias van en orden y el navegador recorre la lista CARÁCTER A
     CARÁCTER: si la primera no tiene ese signo, pasa a la siguiente. Eso es
     lo que permite tener cuatro idiomas con un solo `font-family`.

     «PT Serif» va detrás de «Newsreader» porque Newsreader no tiene letras
     cirílicas. En español e inglés nunca llega a usarse.

     Las familias chinas van AL FINAL de las dos listas. Ninguna de las
     fuentes anteriores tiene ideogramas, así que el chino cae hasta ellas
     solo, mientras que el texto latino sigue viéndose con Inter y Newsreader
     exactamente igual que antes.

     Para el chino NO se descarga ninguna fuente. Una CJK completa pesa varios
     megabytes —son decenas de miles de caracteres— y no hay forma de
     subdividirla por rangos como con el cirílico, porque no se sabe de
     antemano qué ideogramas aparecerán. Se usa la del sistema, que en
     Windows, macOS, Android e iOS siempre está instalada: se ve nativa, no
     pesa nada y no hay ningún salto de fuente al cargar.                    */
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
         "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei";
  --cjk-serif: "Songti SC", "SimSun", "宋体", "Noto Serif CJK SC",
               "Source Han Serif SC";

  --serif: "Newsreader", "PT Serif", "Iowan Old Style", Georgia, "Times New Roman",
           var(--cjk-serif), serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
           var(--cjk), sans-serif;

  /* ---- Ritmo y medidas ---- */
  --gutter:    clamp(1.25rem, 5vw, 4.5rem);
  --maxw:      1280px;
  --maxw-text: 68ch;
  --radius:    3px;
  --radius-lg: 6px;
  --radius-xl: 10px;

  /* ---- Curvas ---- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);

  /* ---- Sombras: suaves y en capas, nunca duras ---- */
  --shadow-xs: 0 1px 2px rgba(4, 12, 24, .04);
  --shadow-sm: 0 1px 2px rgba(4, 12, 24, .05), 0 4px 14px rgba(4, 12, 24, .05);
  --shadow-md: 0 2px 6px rgba(4, 12, 24, .06), 0 14px 40px rgba(4, 12, 24, .09);
  --shadow-lg: 0 30px 80px rgba(4, 12, 24, .18);
  --shadow-gold: 0 10px 30px rgba(169, 133, 63, .28);

  --topbar-h: 42px;   /* barra fina de contacto, se va al hacer scroll */
  --nav-h:    78px;   /* cabecera blanca, siempre visible */
}


/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--carbon);
  background: var(--ivory);
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Red de seguridad: una palabra larguísima parte antes que desbordar la
     columna. El ruso las tiene a menudo («Конфиденциальность» son 18 letras)
     y en una pantalla de 360 px no caben de otra forma. Solo actúa cuando no
     hay más remedio: no afecta al texto normal. */
  overflow-wrap: break-word;
}

/* En ruso además se permite la partición con guion, que queda mejor que un
   corte seco. Solo en el texto corrido: en los titulares un guion cantaría. */
html[lang="ru"] p,
html[lang="ru"] li,
html[lang="ru"] dd { hyphens: auto; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--navy-800); color: var(--ivory); }

/* Foco visible en todas partes: nunca se elimina, solo se adapta al fondo. */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible,
.on-navy-d :focus-visible,
.hero :focus-visible,
.header :focus-visible,
.mobile-nav :focus-visible,
.footer :focus-visible { outline-color: var(--gold-pale); }


/* =============================================================
   3. Utilidades
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 980px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--gold); color: #14100A;
  border-radius: var(--radius);
  font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-md);
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Fondos de sección */
.on-navy   { background: var(--navy-800); color: var(--ivory); }
.on-navy-d { background: var(--navy-900); color: var(--ivory); }
.on-ivory  { background: var(--ivory);   color: var(--carbon); }
.on-ivory-2{ background: var(--ivory-2); color: var(--carbon); }
.on-paper  { background: var(--paper);   color: var(--carbon); }

.section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Grano finísimo sobre los fondos azules: quita el aspecto de "color plano"
   de plantilla y aporta la textura impresa de una firma. */
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* Filete dorado superior: firma visual que separa bloques mayores. */
.edge-gold { position: relative; }
.edge-gold::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  opacity: .5;
}

/* Revelado al hacer scroll.
   El contenido es VISIBLE por defecto: solo se oculta cuando el JavaScript
   confirma que va a animarlo (clase .reveal-ready en <html>). Si el script no
   llega a cargarse, la web se ve entera igualmente. Además la animación de
   seguridad revela a los 6 s cualquier elemento que siguiera oculto. */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: revealSafety .01s 6s forwards;
}
html.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
@keyframes revealSafety { to { opacity: 1; transform: none; } }


/* =============================================================
   4. Tipografía
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--carbon);
}
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4,
.on-navy-d h1, .on-navy-d h2, .on-navy-d h3, .on-navy-d h4,
.hero h1, .hero h2, .hero h3,
.footer h2, .cta h2 { color: var(--ivory); }

.display {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 17ch;
}
.h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 22ch; line-height: 1.06; }
.h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.01em; }
.h4 { font-size: 1.1rem; letter-spacing: -.005em; }

/* Palabra destacada en cursiva — el único adorno tipográfico del sitio. */
.em { font-style: italic; color: var(--gold-ink); }
.on-navy .em, .on-navy-d .em, .hero .em, .footer .em, .cta .em { color: var(--gold-soft); }

/* Antetítulo con filete dorado. */
.kicker {
  font-family: var(--sans);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.5rem;
}
.kicker::before {
  content: ""; width: 32px; height: 1px; flex: none;
  background: currentColor; opacity: .6;
}
.kicker--center { justify-content: center; }
.kicker--center::after {
  content: ""; width: 32px; height: 1px; flex: none;
  background: currentColor; opacity: .6;
}
.kicker--bare::before, .kicker--bare::after { display: none; }
.on-navy .kicker, .on-navy-d .kicker, .hero .kicker,
.footer .kicker, .cta .kicker { color: var(--gold-soft); }

.lede {
  font-size: clamp(1.03rem, 1.3vw, 1.18rem);
  line-height: 1.72;
  color: var(--carbon-soft);
  max-width: 60ch;
}
.on-navy .lede, .on-navy-d .lede, .hero .lede,
.cta .lede, .info-side .lede { color: rgba(248, 245, 240, .82); }

.muted { color: var(--carbon-mute); }
.on-navy .muted, .on-navy-d .muted { color: rgba(248, 245, 240, .62); }

.section-head { max-width: 48rem; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 1.4rem; }
.section-head--center .lede { margin-inline: auto; }


/* =============================================================
   5. Componentes
   ============================================================= */

/* ---- 5.1 Botones ------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .7rem;
  min-height: 48px;                     /* objetivo táctil cómodo en móvil */
  padding: .95rem 1.6rem;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-align: center;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out),
              border-color .4s var(--ease-out), transform .35s var(--ease-out),
              box-shadow .4s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .4s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #14100A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), var(--shadow-sm);
}
.btn--gold:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--shadow-gold);
}

.btn--navy { background: var(--navy-800); color: var(--ivory); }
.btn--navy:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }

.btn--ghost { border-color: var(--line-strong); color: var(--carbon); background: transparent; }
.btn--ghost:hover { border-color: var(--navy-800); background: var(--navy-800); color: var(--ivory); }

.btn--ghost-light { border-color: var(--line-onnavy); color: var(--ivory); background: transparent; }
.btn--ghost-light:hover {
  border-color: var(--gold-soft);
  background: rgba(248, 245, 240, .07);
  color: var(--ivory);
}

.btn--wa { background: var(--wa-dark); color: #fff; }
.btn--wa:hover { background: #0F7A6C; box-shadow: 0 10px 26px rgba(18, 140, 126, .28); }

.btn--sm { min-height: 40px; padding: .6rem 1.15rem; font-size: .73rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.3rem; }

/* ---- 5.2 Enlace con subrayado animado ---------------------------------- */
.link-u {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-800);
  padding-bottom: .3rem;
  position: relative;
}
.on-navy .link-u, .on-navy-d .link-u { color: var(--gold-soft); }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.link-u:hover::after, .link-u:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-u .arrow { transition: transform .4s var(--ease-out); }
.link-u:hover .arrow { transform: translateX(4px); }

/* ---- 5.3 Iconos lineales ----------------------------------------------- */
.ico {
  width: 26px; height: 26px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 18px; height: 18px; }
.ico--lg { width: 30px; height: 30px; }

/* ---- 5.4 Filete dorado decorativo -------------------------------------- */
.rule-gold { width: 46px; height: 1px; background: var(--gold); opacity: .85; }

/* ---- 5.5 Etiquetas de área (chips) ------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem;
  font-size: .73rem; font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--line-onnavy);
  border-radius: 999px;
  color: rgba(248, 245, 240, .78);
  background: rgba(248, 245, 240, .04);
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out),
              background-color .4s var(--ease-out);
}
a.chip:hover, a.chip:focus-visible {
  border-color: var(--gold-soft);
  color: var(--ivory);
  background: rgba(198, 164, 97, .12);
}
.chip .ico { width: 15px; height: 15px; color: var(--gold-soft); }

/* Variante sobre marfil */
.chip--light {
  border-color: var(--line);
  color: var(--carbon-soft);
  background: var(--paper);
}
a.chip--light:hover { border-color: var(--gold); color: var(--carbon); background: var(--paper); }


/* =============================================================
   6. Cabecera y navegación
   -------------------------------------------------------------
   Dos piezas:
     · .topbar  — franja azul con los datos de contacto. Es estática:
                  desaparece al hacer scroll, como en la prensa impresa.
     · .header  — cabecera blanca, pegajosa (sticky). Al quedarse fija gana
                  una sombra sutil y nada más: no salta ni cambia de altura.
   ============================================================= */

/* ---- 6.1 Barra superior de contacto ------------------------------------ */
.topbar {
  background: var(--navy-950);
  color: rgba(248, 245, 240, .8);
  font-size: .8rem;
  border-bottom: 1px solid rgba(248, 245, 240, .08);
}
.topbar .container {
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.75rem; flex-wrap: wrap;
  padding-block: .35rem;
}
.topbar-info { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.6rem; }
.topbar-info > * { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-info .ico { width: 15px; height: 15px; color: var(--gold-soft); }
.topbar-info a { transition: color .3s var(--ease-out); }
.topbar-info a:hover { color: var(--gold-soft); }

.topbar-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topbar .socials { margin-top: 0; gap: .35rem; }
.topbar .socials a, .topbar .socials .social-pending {
  width: 28px; height: 28px; border-color: transparent;
  color: rgba(248, 245, 240, .7);
}
.topbar .socials a:hover { background: transparent; border-color: transparent; color: var(--gold-soft); }
/* En la franja superior, una red sin dirección todavía no se muestra: tres
   iconos apagados ahí arriba darían sensación de web a medio terminar. En el
   pie sí siguen visibles y atenuados, que es donde tienen sentido. */
.topbar .socials .social-pending { display: none; }
.topbar .socials:empty { display: none; }

/* En móvil solo caben el teléfono y el idioma. */
.topbar-info .topbar-hide { display: none; }

/* ---- 6.2 Cabecera clara ------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(4, 12, 24, .1);
}

.header .container {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}

.brand { display: flex; align-items: center; flex: none; color: var(--navy-800); }
.brand img, .brand svg { height: 52px; width: auto; }

.nav { display: none; margin-inline: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.3rem); }
.nav a {
  position: relative;
  display: flex; align-items: center;
  min-height: 44px;            /* área de pulsación cómoda, no solo el texto */
  font-size: .8rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--carbon-soft);
  padding-block: .6rem;
  transition: color .35s var(--ease-out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--navy-800); }
.nav a[aria-current="page"] { color: var(--navy-800); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; }

/* ---- 6.3 Selector de idioma -------------------------------------------- */
/* Dos contextos: sobre la barra azul y sobre fondo claro. */
.lang {
  display: flex; align-items: center;
  border: 1px solid rgba(248, 245, 240, .24);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang button {
  min-height: 36px;            /* cómodo de pulsar con el pulgar */
  padding: .34rem .72rem;
  font-size: .71rem; font-weight: 600; letter-spacing: .1em;
  color: rgba(248, 245, 240, .68);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.lang button:hover { color: var(--ivory); }
.lang button[aria-pressed="true"] { background: var(--gold); color: #14100A; }
.lang .sep { width: 1px; align-self: stretch; background: rgba(248, 245, 240, .24); }

.lang--light { border-color: var(--line); }
.lang--light button { color: var(--carbon-mute); }
.lang--light button:hover { color: var(--carbon); }
.lang--light .sep { background: var(--line); }

.header .btn { display: none; }

/* ---- 6.4 Botón de menú (móvil) ----------------------------------------- */
.burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy-800);
}
.burger span {
  display: block; width: 18px; height: 1.6px; background: currentColor;
  position: relative; transition: background-color .3s var(--ease-out);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.6px;
  background: currentColor; transition: transform .4s var(--ease-out);
}
.burger span::before { top: -5px; }
.burger span::after  { top:  5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---- 6.5 Menú desplegable móvil ---------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 890;
  background: var(--paper);
  padding: calc(var(--nav-h) + 1.25rem) var(--gutter) 3rem;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav nav a {
  display: block; padding: 1.05rem 0;
  font-family: var(--serif); font-size: 1.55rem;
  color: var(--navy-800);
  transition: color .3s var(--ease-out), padding-left .3s var(--ease-out);
}
.mobile-nav nav a:hover { color: var(--gold-ink); padding-left: .5rem; }
.mobile-nav .btn { margin-top: 2rem; width: 100%; }
.mobile-nav .contact-line {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--carbon-soft);
  display: grid; gap: .7rem;
}
.mobile-nav .contact-line a { display: inline-flex; align-items: center; gap: .6rem; }
.mobile-nav .contact-line .ico { color: var(--gold); }
.mobile-nav .contact-line a:hover { color: var(--gold-ink); }
body.is-locked { overflow: hidden; }


/* =============================================================
   7. Secciones de la portada
   ============================================================= */

/* ---- 7.1 Portada a sangre completa -------------------------------------
   La fotografía ocupa toda la portada y el texto se apoya sobre un degradado
   azul que entra desde la izquierda. El degradado no es decorativo: es lo que
   garantiza que el texto blanco tenga contraste suficiente pase lo que pase
   con la fotografía que haya detrás.                                        */
.hero {
  position: relative;
  min-height: clamp(520px, 72vh, 700px);
  display: grid; align-items: center;
  padding-block: clamp(3rem, 5.5vw, 4.5rem);
  background: var(--navy-800);
  color: var(--ivory);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media picture {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: 70% center;   /* el interés visual queda a la derecha */
}
/* La fotografía ya llega con la luz dorada del atardecer, así que solo se
   afina el contraste. Si algún día se cambia por una foto fría, añadir aquí
   sepia(.16) hue-rotate(-6deg) para recuperar el tono. */
.hero-media img { filter: saturate(1.02) contrast(1.05) brightness(.96); }

.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(7, 21, 40, .97) 0%,
      rgba(9, 26, 48, .94) 28%,
      rgba(11, 31, 58, .78) 46%,
      rgba(11, 31, 58, .42) 66%,
      rgba(11, 31, 58, .18) 100%),
    linear-gradient(180deg, rgba(4, 12, 24, .5) 0%, transparent 28%, rgba(4, 12, 24, .45) 100%);
}

.hero > .container { position: relative; z-index: 2; }
.hero-copy { max-width: 40rem; }

/* El titular es largo a propósito (dice qué se hace y dónde). Se ajusta el
   cuerpo para que ocupe tres o cuatro líneas, no cinco, y así los
   indicadores de confianza siguen entrando en la primera pantalla. */
.hero .display { font-size: clamp(2.1rem, 4vw, 3.35rem); max-width: 21ch; }
.hero .display .em { display: block; }
.hero .lede { margin-top: 1.4rem; max-width: 44ch; }
.hero .btn-row { margin-top: 2rem; }

/* Indicadores de confianza bajo los botones. */
.hero-trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 2.5vw, 1.85rem);
  border-top: 1px solid rgba(248, 245, 240, .18);
  max-width: 42rem;
}
.hero-trust li { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.hero-trust .ico { width: 21px; height: 21px; color: var(--gold-soft); margin-top: 1px; }
.hero-trust span {
  font-size: .84rem; font-weight: 500; line-height: 1.35;
  color: rgba(248, 245, 240, .92);
  /* Dentro de un contenedor flexible el navegador reserva de ancho, como
     mínimo, la palabra más larga — y en ruso eso desborda una columna de
     360 px. `min-width: 0` le permite encogerse y `anywhere` autoriza el
     corte. Con `break-word` a secas no basta: ese no cambia el ancho mínimo. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- 7.2 Cinta de áreas ------------------------------------------------- */
.ticker {
  background: var(--navy-950);
  border-block: 1px solid rgba(248, 245, 240, .08);
  overflow: hidden;
  padding-block: 1rem;
}
.ticker-track { display: flex; width: max-content; animation: tickerMove 58s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker span {
  font-size: .73rem; letter-spacing: .21em; text-transform: uppercase;
  color: rgba(248, 245, 240, .55);
  padding-inline: 1.6rem;
  display: inline-flex; align-items: center; gap: 1.6rem;
  white-space: nowrap;
}
.ticker span::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); opacity: .8;
}
@keyframes tickerMove { to { transform: translateX(-50%); } }

/* ---- 7.3 Nosotros ------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

.about-figure { position: relative; }
.about-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  filter: saturate(.82) contrast(1.04);
}
.about-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 1.6rem 1.4rem;
  background: linear-gradient(to top, rgba(4, 12, 24, .9), transparent);
  color: var(--ivory);
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Filete dorado vertical junto a la imagen. */
.about-figure::before {
  content: ""; position: absolute; left: -14px; top: 12%; bottom: 12%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .7;
}

/* Cita editorial dentro del texto de «Nosotros». */
.about-quote {
  margin: 2rem 0 0;
  padding: 1.4rem 0 1.4rem 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.5;
  color: var(--carbon);
  max-width: 44ch;
}

.pillars {
  display: grid; gap: 1px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar {
  background: var(--ivory);
  padding: 1.8rem 1.6rem;
  transition: background-color .5s var(--ease-out);
}
.pillar:hover { background: var(--paper); }
.pillar .ico { color: var(--gold); margin-bottom: 1rem; }
.pillar h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.pillar p { font-size: .89rem; color: var(--carbon-soft); line-height: 1.62; }

/* ---- 7.4 Servicios ------------------------------------------------------
   Rejilla plana de tarjetas compactas: diez áreas que se recorren de un
   vistazo, con el detalle largo reservado para servicios.html.             */

/* Cabecera partida: título a la izquierda, contexto a la derecha. */
.section-head--split { max-width: none; display: grid; gap: 1.5rem 4rem; }
.section-head--split .lede { margin-top: 0; align-self: end; }

.svc-grid { display: grid; gap: 1.1rem; }

.svc {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.4rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .5s var(--ease-out);
}
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale));
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.svc:hover, .svc:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(28, 31, 36, .05);
}
.svc:hover::before, .svc:focus-within::before { transform: scaleX(1); }

.svc-icon {
  color: var(--navy-800);
  margin-bottom: 1.15rem;
  transition: color .5s var(--ease-out), transform .5s var(--ease-out);
}
.svc:hover .svc-icon { color: var(--gold); transform: translateY(-2px); }

.svc h3 { font-size: 1.14rem; line-height: 1.2; margin-bottom: .55rem; }
.svc p { font-size: .86rem; color: var(--carbon-soft); line-height: 1.58; }
.svc > p { flex: 1; }

.svc-owner {
  margin-top: 1.05rem; padding-top: .95rem;
  border-top: 1px solid var(--line-soft);
  font-size: .74rem; color: var(--carbon-mute); line-height: 1.4;
}
.svc-owner strong { color: var(--carbon-soft); font-weight: 600; }

.svc-actions {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
/* min-height de 28 px: por debajo de 24 el objetivo de pulsación no cumple
   el mínimo de accesibilidad, y estos enlaces no van dentro de un párrafo,
   así que no les aplica la excepción de los enlaces en línea. */
.svc-actions .link-u { font-size: .72rem; min-height: 28px; padding-bottom: .3rem; }
.svc-actions .icon-link {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 28px;
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--carbon-mute);
  transition: color .35s var(--ease-out);
}
.svc-actions .icon-link:hover { color: var(--wa-dark); }

/* ---- 7.5 Franja de imagen ---------------------------------------------- */
.band {
  position: relative; overflow: hidden;
  height: clamp(190px, 26vw, 320px);
  background: var(--navy-950);
}
.band img {
  position: absolute; inset: -12% 0;
  width: 100%; height: 124%; object-fit: cover;
  filter: saturate(.5) contrast(1.1) brightness(.58);
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 12, 24, .95), rgba(4, 12, 24, .52) 45%, rgba(4, 12, 24, .93));
}
.band-quote {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center;
  padding-inline: var(--gutter);
}
.band-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  line-height: 1.42; color: var(--ivory); max-width: 32ch;
}

/* ---- 7.6 Equipo (sin fotografías: no se inventan rostros) --------------- */
.team-grid {
  display: grid; gap: 1px;
  background: var(--line-onnavy);
  border: 1px solid var(--line-onnavy);
  border-radius: var(--radius);
  overflow: hidden;
}

.member {
  position: relative;
  background: var(--navy-800);
  padding: clamp(1.9rem, 3vw, 2.9rem) clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.6rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column;
  transition: background-color .55s var(--ease-out);
}
.member::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.member:hover, .member:focus-within { background: var(--navy-700); }
.member:hover::before, .member:focus-within::before { transform: scaleX(1); }

/* Monograma en lugar de retrato: no se generan rostros de personas reales. */
.member-initials {
  font-family: var(--serif);
  font-size: 2.5rem; line-height: 1;
  color: var(--gold-soft);
  letter-spacing: -.03em;
  margin-bottom: 1.3rem;
  display: flex; align-items: baseline; gap: .8rem;
}
.member-initials::after {
  content: ""; flex: 1; height: 1px; background: var(--line-onnavy);
  transition: background-color .55s var(--ease-out);
}
.member:hover .member-initials::after { background: var(--line-gold); }

.member h3 { font-size: 1.34rem; color: var(--ivory); margin-bottom: .45rem; }
.member .role {
  font-size: .76rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1.05rem; line-height: 1.55;
}
.member .role .en {
  display: block; font-weight: 400;
  color: rgba(248, 245, 240, .5); letter-spacing: .07em;
}

/* La segunda línea del cargo está siempre en inglés: es el nombre del puesto
   reconocible internacionalmente. Tiene sentido debajo del español o del ruso,
   pero cuando la web ya está en inglés aparecería el mismo texto dos veces.
   `lang` lo pone main.js en la etiqueta <html> al cambiar de idioma. */
html[lang="en"] .member .role .en,
html[lang="en"] .profile .role .en { display: none; }
.member p { font-size: .88rem; color: rgba(248, 245, 240, .72); line-height: 1.68; }

.member-areas { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.member-areas li {
  font-size: .7rem; letter-spacing: .04em;
  padding: .3rem .65rem;
  border: 1px solid var(--line-onnavy); border-radius: 999px;
  color: rgba(248, 245, 240, .66);
}
.member-actions {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.3rem;
}

/* ---- 7.7 Confianza ------------------------------------------------------ */
/* Sustituye a la antigua lista de «razones»: mismo contenido, presentación
   ejecutiva y sin repetir dos bloques casi idénticos. */
.trust-grid {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.trust-item {
  position: relative;
  background: var(--ivory);
  padding: 2rem 1.7rem 1.9rem;
  display: flex; flex-direction: column;
  transition: background-color .5s var(--ease-out);
}
.trust-item:hover { background: var(--paper); }
.trust-item .ico {
  color: var(--gold);
  margin-bottom: 1.1rem;
  transition: transform .5s var(--ease-out);
}
.trust-item:hover .ico { transform: translateY(-2px); }
.trust-num {
  position: absolute; top: 1.6rem; right: 1.7rem;
  font-size: .68rem; letter-spacing: .16em;
  color: var(--carbon-mute);
  font-variant-numeric: tabular-nums;
}
.trust-item h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.trust-item p { font-size: .89rem; color: var(--carbon-soft); line-height: 1.64; }

/* Se conserva el estilo antiguo `.reasons` por si alguna página lo usa. */
.reasons { display: grid; gap: 0; border-top: 1px solid var(--line); }
.reason {
  display: grid; gap: .5rem 1.75rem;
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease-out), padding-inline .5s var(--ease-out);
}
.reason:hover { background: var(--ivory-2); padding-inline: 1.1rem; }
.reason-num {
  font-size: .72rem; letter-spacing: .16em; color: var(--gold-ink);
  font-variant-numeric: tabular-nums; padding-top: .35rem;
}
.reason h3 { font-size: 1.32rem; }
.reason p { font-size: .93rem; color: var(--carbon-soft); max-width: 52ch; }

/* ---- 7.8 Proceso de consulta -------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line-onnavy); position: relative; }
.step {
  background: var(--navy-800);
  padding: 2.1rem 1.7rem;
  position: relative;
  transition: background-color .5s var(--ease-out);
}
.step:hover { background: var(--navy-700); }
.step-num {
  font-family: var(--serif); font-size: 2.9rem; line-height: 1;
  color: rgba(198, 164, 97, .3);
  margin-bottom: .95rem;
  font-variant-numeric: lining-nums;
  transition: color .5s var(--ease-out);
}
.step:hover .step-num { color: rgba(198, 164, 97, .55); }
.step h3 { font-size: 1.15rem; color: var(--ivory); margin-bottom: .55rem; }
.step p { font-size: .875rem; color: rgba(248, 245, 240, .7); line-height: 1.66; }

.steps-note {
  margin-top: 2.2rem; font-size: .875rem; font-style: italic;
  color: rgba(248, 245, 240, .64);
}

/* Vías de contacto rápidas bajo el proceso: reduce la fricción del primer paso. */
.contact-ways {
  display: grid; gap: 1px;
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  background: var(--line-onnavy);
  border: 1px solid var(--line-onnavy);
  border-radius: var(--radius);
  overflow: hidden;
}
.contact-way {
  background: var(--navy-900);
  padding: 1.6rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: background-color .45s var(--ease-out);
}
.contact-way:hover { background: var(--navy-700); }
.contact-way .ico { color: var(--gold-soft); margin-top: 3px; }
.contact-way h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248, 245, 240, .62);
  margin-bottom: .35rem;
}
.contact-way p { font-size: .98rem; color: var(--ivory); line-height: 1.45; }
.contact-way small {
  display: block; margin-top: .3rem;
  font-size: .78rem; color: rgba(248, 245, 240, .58);
}

/* ---- 7.9 Llamado a la acción -------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--navy-950); color: var(--ivory);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 100% at 50% 0%, rgba(169, 133, 63, .22), transparent 70%);
}
.cta .container { position: relative; }
.cta-inner { text-align: center; max-width: 48rem; margin-inline: auto; }
.cta .btn-row { justify-content: center; }


/* =============================================================
   8. Páginas interiores
   ============================================================= */
.page-hero {
  background: var(--navy-800); color: var(--ivory);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 100% at 82% 0%, rgba(58, 91, 140, .5), transparent 65%),
    radial-gradient(45% 70% at 2% 100%, rgba(169, 133, 63, .12), transparent 70%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(248, 245, 240, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(248, 245, 240, .04) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(72% 70% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 70% at 50% 40%, #000 20%, transparent 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .display { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.breadcrumb {
  font-size: .78rem; color: rgba(248, 245, 240, .62);
  margin-bottom: 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center;
}
.breadcrumb a { transition: color .3s var(--ease-out); }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span { margin-inline: .5rem; opacity: .55; }

/* Índice lateral de servicios */
.detail-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.detail-index { position: static; }
.detail-index h2 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--carbon-mute);
  margin-bottom: 1.15rem;
}
.detail-index ol { border-left: 1px solid var(--line); }
.detail-index a {
  display: block; padding: .58rem 0 .58rem 1.15rem;
  font-size: .875rem; color: var(--carbon-soft);
  border-left: 1px solid transparent; margin-left: -1px;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.detail-index a:hover,
.detail-index a.is-active { color: var(--navy-800); border-left-color: var(--gold); }

.detail-item {
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.detail-item:first-child { padding-top: 0; }
.detail-item:last-child { border-bottom: 0; }
.detail-item > .kicker { margin-bottom: .9rem; }
.detail-item h2 { font-size: clamp(1.65rem, 2.8vw, 2.2rem); margin-bottom: 1rem; }
.detail-item > p { max-width: var(--maxw-text); color: var(--carbon-soft); }

/* Fotografía de cabecera de un área. Solo la llevan tres de las diez: las
   suficientes para dar aire a una página larga sin convertirla en un álbum. */
.detail-figure {
  position: relative;
  margin: 0 0 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-800);
}
.detail-figure img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}
.detail-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 31, 58, .3), transparent 55%);
  pointer-events: none;
}

.detail-cols { display: grid; gap: 1.85rem; margin-top: 2.1rem; }
.detail-cols h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: .9rem;
}
.detail-cols li {
  position: relative; padding-left: 1.15rem; margin-bottom: .55rem;
  font-size: .9rem; color: var(--carbon-soft); line-height: 1.6;
}
.detail-cols li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--gold);
}

.detail-owner {
  margin-top: 1.85rem; padding: 1.2rem 1.4rem;
  background: var(--ivory-2); border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .89rem; color: var(--carbon-soft);
}
.detail-owner strong { font-weight: 600; color: var(--carbon); }
.detail-owner a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; }
.detail-owner a:hover { color: var(--gold-ink); }

.detail-note {
  margin-top: 1.3rem; font-size: .82rem; font-style: italic;
  color: var(--carbon-mute); max-width: var(--maxw-text);
}

/* Preguntas frecuentes */
.faq { margin-top: 2.1rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-size: .96rem; font-weight: 500; position: relative;
  transition: color .35s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy-800); }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg); transition: transform .4s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p {
  padding-bottom: 1.25rem; font-size: .9rem; color: var(--carbon-soft);
  max-width: var(--maxw-text);
}

/* Perfiles ampliados */
.profile {
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.profile:last-of-type { border-bottom: 0; }
.profile-head { display: grid; gap: 1.25rem; align-items: baseline; margin-bottom: 1.6rem; }
.profile-initials {
  font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: .9; color: var(--gold); letter-spacing: -.04em;
}
.profile h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); margin-bottom: .4rem; }
.profile .role {
  font-size: .8rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--carbon-mute);
}
.profile .role .en { display: block; font-weight: 400; opacity: .78; }
.profile > p { max-width: var(--maxw-text); color: var(--carbon-soft); }

/* Texto legal */
.legal { max-width: 72ch; }
.legal h2 { font-size: 1.5rem; margin: 2.6rem 0 .9rem; }
.legal h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.legal p, .legal li {
  font-size: .94rem; color: var(--carbon-soft);
  margin-bottom: .85rem; line-height: 1.74;
}
.legal a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-ink); }
.legal ul li { position: relative; padding-left: 1.2rem; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--gold);
}
.legal .updated { font-size: .82rem; color: var(--carbon-mute); font-style: italic; }

/* Créditos fotográficos */
.credits-list li {
  padding-block: 1.05rem; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--carbon-soft);
}
.credits-list a {
  color: var(--navy-800); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-gold);
}
.credits-list a:hover { color: var(--gold-ink); }


/* =============================================================
   9. Formulario y contacto
   ============================================================= */
.contact-split { display: grid; gap: 0; }

.form-side {
  background: var(--navy-800);
  padding: clamp(2.5rem, 5vw, 4.25rem) var(--gutter);
  position: relative;
}
.info-side {
  position: relative; overflow: hidden;
  background: var(--navy-950);
  padding: clamp(2.5rem, 5vw, 4.25rem) var(--gutter);
}
.info-side > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.5) brightness(.68) contrast(1.06);
}
.info-side::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(11, 31, 58, .84), rgba(4, 12, 24, .94));
}
.info-side > .info-inner { position: relative; z-index: 2; }

.info-list { margin-top: 2.1rem; display: grid; gap: 1.4rem; }
.info-list > div { display: flex; gap: 1rem; align-items: flex-start; }
.info-list .ico { color: var(--gold-soft); margin-top: 2px; }
.info-list dt {
  font-size: .71rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248, 245, 240, .62); margin-bottom: .22rem;
}
.info-list dd { font-size: .98rem; color: var(--ivory); }
.info-list a { transition: color .3s var(--ease-out); }
.info-list a:hover { color: var(--gold-soft); }

.form { display: grid; gap: 1.15rem; margin-top: 2.1rem; }
.field { display: grid; gap: .45rem; }
.field--2 { display: grid; gap: 1.15rem; }

.form label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(248, 245, 240, .68);
}
.form label .req { color: var(--gold-soft); }

.form input, .form select, .form textarea {
  width: 100%;
  min-height: 48px;
  font-family: var(--sans); font-size: .95rem; color: var(--ivory);
  background: rgba(248, 245, 240, .05);
  border: 1px solid rgba(248, 245, 240, .18);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.form textarea { resize: vertical; min-height: 130px; }
.form input::placeholder, .form textarea::placeholder { color: rgba(248, 245, 240, .36); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: rgba(248, 245, 240, .32); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gold-soft);
  background: rgba(248, 245, 240, .09);
  box-shadow: 0 0 0 3px rgba(198, 164, 97, .16);
}
.form select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C6A461' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 11px;
  padding-right: 2.4rem;
}
.form select option { background: var(--navy-800); color: var(--ivory); }

/* Campo trampa antispam — invisible para personas, no para robots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: .8rem; align-items: flex-start; margin-top: .4rem; }
.consent input {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  accent-color: var(--gold);
}
.consent label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .85rem; line-height: 1.55;
  color: rgba(248, 245, 240, .76);
}
.consent a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* Errores: no dependen solo del color — llevan icono y texto explicativo. */
.field-error {
  display: none;
  font-size: .8rem; color: var(--error-soft);
  letter-spacing: 0; text-transform: none; font-weight: 400;
  line-height: 1.45;
}
.field-error:not(:empty) { display: flex; gap: .4rem; align-items: flex-start; }
.field-error:not(:empty)::before {
  content: "!";
  flex: none;
  width: 15px; height: 15px; margin-top: 1px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
  border: 1px solid currentColor; border-radius: 50%;
}
.form input[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  border-color: var(--error-soft);
  background: rgba(180, 67, 42, .1);
}

.form-status {
  font-size: .9rem; line-height: 1.6;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-onnavy);
  background: rgba(248, 245, 240, .05);
  color: rgba(248, 245, 240, .88);
}
.form-status:empty { display: none; }
.form-status a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.form-status.is-error { border-color: rgba(240, 180, 164, .5); background: rgba(180, 67, 42, .12); }
.form-status.is-ok { border-color: rgba(143, 217, 190, .45); background: rgba(31, 122, 92, .16); }

/* Confirmación de envío: un panel visible, no una línea de texto perdida. */
.form-success {
  display: none;
  margin-top: 2.1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(198, 164, 97, .45);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(198, 164, 97, .14), rgba(248, 245, 240, .04));
  text-align: center;
}
.form-success.is-visible { display: block; }
.form-success .tick {
  width: 54px; height: 54px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold-soft); border-radius: 50%;
  color: var(--gold-soft);
}
.form-success .tick svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.form-success h3 { font-size: 1.5rem; color: var(--ivory); margin-bottom: .7rem; }
.form-success p { font-size: .94rem; color: rgba(248, 245, 240, .8); max-width: 42ch; margin-inline: auto; }
.form-success .btn { margin-top: 1.6rem; }

.form button[type="submit"] { justify-self: start; }
.form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; transform: none; }
/* Formulario oculto tras un envío correcto. */
.form.is-sent { display: none; }


/* =============================================================
   10. Pie de página
   ============================================================= */
.footer {
  position: relative;
  background: var(--navy-950); color: var(--ivory);
  padding-block: clamp(3.25rem, 6vw, 5rem) 0;
}
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .45;
}
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.footer .brand { color: var(--ivory); margin-bottom: 1.3rem; }
.footer .brand img, .footer .brand svg { height: 44px; }
.footer p {
  font-size: .875rem; color: rgba(248, 245, 240, .66);
  line-height: 1.7; max-width: 36ch;
}

.footer h2 {
  font-family: var(--sans); font-size: .71rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 1.2rem;
}
.footer nav li, .footer .contact-col li { margin-bottom: .62rem; }
.footer nav a, .footer .contact-col a, .footer .contact-col span {
  font-size: .875rem; color: rgba(248, 245, 240, .7);
  transition: color .35s var(--ease-out);
}
.footer nav a:hover, .footer .contact-col a:hover { color: var(--gold-soft); }
.footer .contact-col li { display: flex; gap: .68rem; align-items: flex-start; }
.footer .contact-col .ico { color: var(--gold-soft); margin-top: 2px; }

.socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.socials a, .socials .social-pending {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-onnavy); border-radius: var(--radius);
  color: rgba(248, 245, 240, .72);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out),
              background-color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.socials a:hover {
  border-color: var(--gold-soft); color: var(--gold-soft);
  background: rgba(248, 245, 240, .05);
}
/* Red social todavía sin dirección: se ve, pero no enlaza a ninguna parte.
   En cuanto se rellena en config/site.js pasa a ser un enlace normal. */
.socials .social-pending { opacity: .5; cursor: default; }
.socials .social-pending:hover { opacity: .7; }

.footer-bottom {
  border-top: 1px solid var(--line-onnavy);
  padding-block: 1.7rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
  font-size: .8rem; color: rgba(248, 245, 240, .62);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-bottom a { transition: color .3s var(--ease-out); }
.footer-bottom a:hover { color: var(--gold-soft); }
.footer-bottom .lang { border-color: var(--line-onnavy); }


/* =============================================================
   11. Botón flotante de WhatsApp
   ============================================================= */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 880;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem;
  background: var(--paper); color: var(--carbon);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 34px 70px rgba(4, 12, 24, .26); }
.wa-float .wa-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--wa); border-radius: 50%; color: #fff;
}
.wa-float .wa-icon svg { width: 19px; height: 19px; fill: currentColor; }
.wa-float .wa-text { display: none; padding-right: .5rem; }
.wa-float .wa-text b { display: block; font-size: .92rem; font-weight: 600; letter-spacing: .01em; }
.wa-float .wa-text small { font-size: .72rem; color: var(--carbon-mute); }

/* Con la ventana abierta, el botón flotante se retira: si no, tapa la esquina
   de la ventana y compiten por el mismo sitio. */
.wa-float[aria-expanded="true"] {
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.96);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}


/* =============================================================
   11.b Ventana de chat de WhatsApp
   -------------------------------------------------------------
   Reproduce el inicio de una conversación y termina en el botón que abre
   WhatsApp de verdad. El verde se usa SOLO donde el visitante espera ver
   WhatsApp — cabecera y botón —; el resto sigue la paleta del sitio, para
   que no parezca un widget pegado de fuera.
   ============================================================= */
.wa-chat {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 885;                     /* por encima del botón, bajo el menú */
  width: min(360px, calc(100vw - 2rem));
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(4, 12, 24, .3);
  overflow: hidden;
  transform-origin: bottom right;
}
.wa-chat[hidden] { display: none; }

/* Entrada: la ventana crece desde la esquina donde estaba el botón. */
.wa-chat.is-open { animation: waChatIn .34s var(--ease-out) both; }
@keyframes waChatIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---- Cabecera ---- */
.wa-chat-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--wa-dark);
  color: #fff;
}
.wa-chat-avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
}
.wa-chat-avatar svg { width: 22px; height: 22px; fill: #fff; }
.wa-chat-id { flex: 1; min-width: 0; line-height: 1.3; }
.wa-chat-id b { display: block; font-size: .95rem; font-weight: 600; }
.wa-chat-id small { font-size: .74rem; color: rgba(255, 255, 255, .8); }
.wa-chat-x {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  transition: background-color .3s var(--ease-out);
}
.wa-chat-x:hover { background: rgba(255, 255, 255, .18); }
.wa-chat-x svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round;
}

/* ---- Cuerpo de la conversación ---- */
.wa-chat-body {
  padding: 1.1rem 1rem;
  background: var(--ivory-2);
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  /* Trama muy tenue: recuerda al fondo de WhatsApp sin copiarlo. */
  background-image: radial-gradient(rgba(28, 31, 36, .045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.wa-bubble {
  position: relative;
  max-width: 85%;
  padding: .65rem .85rem;
  background: var(--paper);
  border-radius: 2px 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(4, 12, 24, .1);
  font-size: .88rem; line-height: 1.5;
  color: var(--carbon);
}
/* Cada burbuja entra sola cuando el JavaScript la va soltando. */
.wa-chat[data-anima] .wa-bubble { display: none; }
.wa-chat[data-anima] .wa-bubble.is-in {
  display: block;
  animation: waBubbleIn .3s var(--ease-out) both;
}
@keyframes waBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Puntos de «escribiendo…» ---- */
.wa-typing {
  display: none;
  gap: .28rem; align-items: center;
  padding: .75rem .85rem;
  background: var(--paper);
  border-radius: 2px 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(4, 12, 24, .1);
}
.wa-typing.is-on { display: flex; }
.wa-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--carbon-mute);
  animation: waDot 1.2s infinite ease-in-out;
}
.wa-typing span:nth-child(2) { animation-delay: .18s; }
.wa-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes waDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ---- Opciones de área ----
   Funcionan como las respuestas rápidas de WhatsApp: el visitante elige y el
   mensaje ya sale clasificado. Van dentro de la conversación, no en el pie,
   porque forman parte del diálogo. */
.wa-opts {
  display: none;
  width: 100%;
  flex-direction: column; gap: .4rem;
  margin-top: .3rem;
}
.wa-opts.is-in { display: flex; animation: waBubbleIn .32s var(--ease-out) both; }

.wa-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 42px;
  padding: .6rem .9rem;
  background: var(--paper);
  border: 1px solid rgba(18, 140, 126, .35);
  border-radius: 10px;
  font-size: .85rem; font-weight: 500;
  color: var(--wa-dark);
  box-shadow: 0 1px 2px rgba(4, 12, 24, .07);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out),
              color .25s var(--ease-out), transform .25s var(--ease-out);
}
.wa-opt svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.wa-opt:hover, .wa-opt:focus-visible {
  background: var(--wa-dark); border-color: var(--wa-dark); color: #fff;
  transform: translateX(2px);
}
.wa-opt:hover svg, .wa-opt:focus-visible svg { opacity: 1; transform: translateX(3px); }

/* La última («Otra consulta») es la salida genérica: se marca menos. */
.wa-opt:last-child {
  border-color: var(--line);
  color: var(--carbon-mute);
  font-weight: 400;
}
.wa-opt:last-child:hover, .wa-opt:last-child:focus-visible {
  background: var(--carbon); border-color: var(--carbon); color: #fff;
}

/* ---- Pie ---- */
.wa-chat-foot { padding: .7rem 1rem .85rem; background: var(--paper); }
.wa-chat-nota {
  display: block; margin-top: .6rem; text-align: center;
  font-size: .71rem; color: var(--carbon-mute);
}

/* Pantallas bajas — sobre todo el móvil en horizontal, donde quedan unos
   360 px de alto. Sin esto la ventana se saldría por arriba. */
@media (max-height: 560px) {
  .wa-chat-body { max-height: 30vh; padding-block: .8rem; }
  .wa-chat-head { padding-block: .6rem; }
  .wa-chat-foot { padding-block: .7rem .8rem; }
  .wa-chat-nota { display: none; }
}


/* =============================================================
   12. Responsive
   ============================================================= */

/* --- 540 px: dos columnas en listas cortas y campos de formulario --- */
@media (min-width: 540px) {
  .detail-cols { grid-template-columns: repeat(2, 1fr); }
  .field--2 { grid-template-columns: 1fr 1fr; }
  .contact-ways { grid-template-columns: repeat(3, 1fr); }
}

/* --- 600 px: las tarjetas de servicio ya caben de dos en dos --- */
@media (min-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 720 px: tabletas --- */
@media (min-width: 720px) {
  .pillars    { grid-template-columns: repeat(2, 1fr); }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .steps      { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  .topbar-info .topbar-hide { display: inline-flex; }

  .reason     { grid-template-columns: auto 1fr; }
  .reason h3  { grid-column: 2; }
  .reason p   { grid-column: 2; }
  .reason-num { grid-row: 1 / span 2; }

  .profile-head { grid-template-columns: auto 1fr; gap: 2rem; }
  .footer-grid  { grid-template-columns: repeat(2, 1fr); }
  .wa-float .wa-text { display: block; }
}

/* --- 860 px: la portada pasa a texto sobre foto --- */
@media (min-width: 860px) {
  .hero-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .hero-trust li { flex-direction: column; gap: .55rem; }
  .section-head--split { grid-template-columns: 1.15fr 1fr; }
}

/* --- 960 px: escritorio --- */
@media (min-width: 960px) {
  .header .btn { display: inline-flex; }
  .nav     { display: block; }
  .burger  { display: none; }
  .mobile-nav { display: none; }

  /* Las dos columnas cierran a la misma altura: si no, la fotografía acaba
     mucho antes que el texto y deja un hueco que parece un error. */
  .about-grid   { grid-template-columns: .82fr 1.18fr; align-items: stretch; }
  .about-figure { height: 100%; }
  .about-figure img { height: 100%; object-fit: cover; }
  .svc-grid   { grid-template-columns: repeat(3, 1fr); }
  /* Si la última fila queda con una sola tarjeta, se centra en vez de
     quedarse suelta a la izquierda. */
  .svc-grid > :last-child:nth-child(3n + 1) { grid-column: 2; }
  /* Dos columnas, no cuatro: los perfiles necesitan aire para leerse bien. */
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .steps      { grid-template-columns: repeat(4, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }

  .contact-split { grid-template-columns: 1.08fr .92fr; }
  .footer-grid   { grid-template-columns: 1.5fr 1fr 1.1fr 1.15fr; }

  .detail-layout { grid-template-columns: 250px 1fr; }
  .detail-index  { position: sticky; top: calc(var(--nav-h) + 24px); }

  .form-side, .info-side { padding-inline: clamp(2.25rem, 4vw, 4rem); }
}

/* --- 1240 px: las diez áreas en dos filas de cinco --- */
@media (min-width: 1240px) {
  .svc-grid { grid-template-columns: repeat(5, 1fr); }
  /* La regla de centrado anterior solo aplica a la rejilla de tres. */
  .svc-grid > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .detail-cols { grid-template-columns: repeat(3, 1fr); }
}

/* Transiciones entre páginas — nativas, sin librerías. */
@view-transition { navigation: auto; }


/* =============================================================
   13. Movimiento reducido e impresión
   ============================================================= */

/* Solo se desactiva lo REALMENTE intrusivo: la cinta en bucle y el paralaje.
   Los micro-detalles (hover, fundidos, subrayados) se mantienen. En Windows
   esta preferencia viene activada de fábrica en muchos equipos y apagarlo
   todo dejaría la web muerta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .band img { position: absolute; inset: 0; height: 100%; transform: none !important; }
  html.reveal-ready .reveal { animation-delay: .01s; }

  /* Los puntos de «escribiendo…» son una animación en bucle, igual que la
     cinta: se paran. El JavaScript además muestra los tres mensajes de golpe
     en lugar de irlos soltando (ver initWaChat en main.js). */
  .wa-typing span { animation: none; opacity: .55; }
  .wa-chat.is-open { animation: none; }
  .wa-chat[data-anima] .wa-bubble.is-in { animation: none; }
  .wa-opts.is-in { animation: none; }
}

@media print {
  .header, .mobile-nav, .wa-float, .ticker, .band, .skip-link,
  .lang, .burger, .socials { display: none !important; }
  body { background: #fff; color: #000; }
  .on-navy, .on-navy-d, .hero, .footer, .cta, .form-side, .info-side {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, .h2, h1, h2, h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .section { padding-block: 1.5rem; }
}