/* =============================================================================
   GR AGENCY — hoja de estilos única
   Manual de marca v3.0. Reglas duras que este archivo respeta:
   · Proporción por sección: azul 60% / marfil 30% / oro 10%.
   · Fondos: azul pleno o marfil. Nunca un azul intermedio.
   · Oro sobre marfil: JAMÁS con texto (2.3:1). Solo filete, punto o arco del logo.
   · Blanco: restringido a las letras del logo (y al glifo del botón de WhatsApp,
     que funciona como signo, no como texto de lectura).
   · Único recurso ornamental: el filete (línea fina en oro).
   · Barlow nunca por encima de 500. Cormorant solo 500/600 y nunca en párrafos.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --azul-noche:  #152344;
  --oro-oscuro:  #D8B463;   /* oro SOLO sobre fondo azul */
  --oro-claro:   #C39A45;   /* oro SOLO sobre fondo marfil, uso muy restringido */
  --marfil:      #F4F1EA;
  --acero-claro: #5C6373;   /* texto secundario sobre marfil */
  --acero-azul:  #8A93A6;   /* texto secundario sobre azul */
  --blanco:      #FFFFFF;

  /* Derivados funcionales (no son colores nuevos: son el azul o el oro con alfa) */
  --velo-azul:      rgba(21, 35, 68, 0.66);
  --azul-borde:     rgba(244, 241, 234, 0.14);
  --marfil-borde:   rgba(21, 35, 68, 0.12);
  --oro-borde:      rgba(216, 180, 99, 0.38);
  --campo-fondo:    rgba(244, 241, 234, 0.06);

  --ff-marca:  "Marcellus", "Times New Roman", serif;
  --ff-titulo: "Cormorant Garamond", "Times New Roman", serif;
  --ff-texto:  "Barlow", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 22px;
  --header-h: 64px;
  --sec-y: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --header-h: 76px; --sec-y: 112px; }
}

/* ---------- 2. Reset acotado ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--azul-noche);
  color: var(--marfil);
  font-family: var(--ff-texto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--oro-oscuro); outline-offset: 3px; border-radius: 2px; }
.section-ivory :focus-visible { outline-color: var(--azul-noche); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--marfil); color: var(--azul-noche);
  padding: 10px 16px; font-size: 14px; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 3. Tipografía del sistema ---------- */
h1, h2, h3 { font-family: var(--ff-titulo); font-weight: 600; margin: 0 0 .4em; line-height: 1.14; }
h1 { font-size: clamp(40px, 8.4vw, 68px); letter-spacing: .005em; }
h2 { font-size: clamp(30px, 4.6vw, 38px); }
h3 { font-size: 21px; font-weight: 500; line-height: 1.25; }

.eyebrow {
  font-family: var(--ff-marca);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
@media (min-width: 768px) { .eyebrow { font-size: 13px; } }

.caption { font-size: 13px; line-height: 1.5; }

/* Centrado por el filete, no por la caja (manual 1.2).
   El centro de la caja del archivo está en x=442,5 u y el centro del filete
   —el eje óptico— en x=422,3 u. Centrar por la caja corre la firma 20,2 u a la
   izquierda del centro real: poco para detectarlo, suficiente para que la pieza
   se sienta mal armada. Esta clase la devuelve a su eje: 20,2 / 549 = 3,67%. */
.firma-centrada { transform: translateX(3.67%); }

/* El filete: único recurso ornamental permitido */
.rule {
  display: block;
  width: 72px; height: 1px;
  margin: 22px 0 26px;
  background: var(--oro-oscuro);
}
.rule-short { width: 40px; margin: 12px 0 18px; }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); }
.section-navy  { background: var(--azul-noche); color: var(--marfil); }
.section-ivory { background: var(--marfil);     color: var(--azul-noche); }

.section-navy  .eyebrow { color: var(--oro-oscuro); }
/* Sobre marfil el oro no puede llevar texto: el eyebrow va en acero. */
.section-ivory .eyebrow { color: var(--acero-claro); }
.section-ivory .rule    { background: var(--oro-claro); }
.section-ivory .caption { color: var(--acero-claro); }
.section-navy  .caption { color: var(--acero-azul); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-lead { color: var(--acero-azul); max-width: 52ch; }
.section-ivory .section-lead { color: var(--acero-claro); }

.grid-2 { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
}

/* ---------- 5. Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--ff-texto); font-weight: 500; font-size: 15px;
  letter-spacing: .04em; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-gold  { background: var(--oro-oscuro); color: var(--azul-noche); }
.btn-gold:hover { background: #E3C57E; }
.btn-ghost { border-color: var(--azul-borde); color: var(--marfil); }
.btn-ghost:hover { border-color: var(--oro-oscuro); }
.btn-block { width: 100%; }
.section-ivory .btn-gold { background: var(--azul-noche); color: var(--marfil); }

.link-gold { color: var(--oro-oscuro); text-underline-offset: 4px; }
.section-ivory .link-gold { color: var(--azul-noche); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: var(--azul-noche);
  border-bottom-color: var(--oro-borde);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--marfil); }
/* Firma horizontal armada. Mínimo del manual: 190 px de ancho — a esa medida
   el lockup (proporción 4,56:1) mide 41,6 px de alto. Nunca por debajo. */
.brand-lockup { width: 190px; height: auto; }
@media (min-width: 900px) { .brand-lockup { width: 224px; } }

.nav-toggle {
  width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; display: block; width: 22px; height: 1px; background: var(--marfil);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars::before { transform: translateY(-7px); }
.nav-toggle-bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: rotate(-45deg); }

.nav {
  position: fixed; inset: var(--header-h) 0 auto;
  background: var(--azul-noche);
  border-bottom: 1px solid var(--oro-borde);
  padding: 8px var(--gutter) 28px;
  display: none;
}
.nav.is-open { display: block; }
.nav-list { display: grid; gap: 2px; margin-bottom: 20px; }
.nav-list a {
  display: block; padding: 14px 0; text-decoration: none;
  font-size: 17px; letter-spacing: .02em;
  border-bottom: 1px solid var(--azul-borde);
}
.nav-list a.is-current { color: var(--oro-oscuro); }

.lang { display: flex; align-items: center; gap: 6px; }
.lang-btn {
  font-family: var(--ff-marca); font-size: 12px; letter-spacing: .16em;
  padding: 8px 4px; color: var(--acero-azul);
  transition: color .2s var(--ease);
}
.lang-btn:hover { color: var(--marfil); }
.lang-btn.is-active { color: var(--oro-oscuro); }
.lang-sep { color: var(--acero-azul); opacity: .5; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    position: static; display: flex; align-items: center; gap: 34px;
    background: none; border: 0; padding: 0;
  }
  .nav-list { display: flex; gap: 30px; margin: 0; }
  .nav-list a {
    padding: 6px 0; border: 0; font-size: 14px; letter-spacing: .06em;
    position: relative;
  }
  .nav-list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--oro-oscuro); transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
  }
  .nav-list a:hover::after, .nav-list a.is-current::after { transform: scaleX(1); }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--header-h) + 28px) 92px;
  overflow: hidden;
  background: var(--azul-noche);
}
.hero-inner { position: relative; text-align: center; }

/* Marca del hero: el video de la animación y, debajo, la firma estática que
   queda visible si el video no corre. Los dos ocupan la misma caja para que no
   haya salto de layout cuando uno reemplaza al otro. */
.hero-mark {
  position: relative;
  /* Grande: es la pieza central del sitio. Acotado por ancho Y por alto, porque
     al ser cuadrado se come la pantalla en viewports bajos y dejaba los botones
     fuera de vista. El video es de 1280x1280, así que hasta 620px sigue estando
     a 2x en pantallas retina. */
  width: min(clamp(300px, 88vw, 620px), 56svh);
  aspect-ratio: 1;
  margin: 0 auto 10px;
}
.hero-mark > * {
  position: absolute; inset: 0; margin: auto;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .5s var(--ease);
  /* El fondo del video ahora ES el azul institucional exacto (corregido cuadro
     por cuadro, ver README), así que el borde del cuadro ya no se nota. Igual
     queda un desvanecido corto del 6% como red por si algún dispositivo maneja
     el color del video con un criterio propio. Cae en zona vacía: el contenido
     del video arranca recién al 12.5% del cuadro. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-logo {
  height: 150px; width: auto;                /* mínimo firma vertical: 130px */
  opacity: 1;
  transition: opacity .4s var(--ease);
}
@media (min-width: 768px) { .hero-logo { height: 172px; } }

/* Con el video listo, la firma estática se retira: el video ya termina en el logo. */
.hero.hero-video-ready .hero-video { opacity: 1; }
.hero.hero-video-ready .hero-logo  { opacity: 0; }

/* Cada bloque del hero entra con un retardo propio: el texto no aparece de
   golpe sino que se encadena después de la animación. Los delays solo se
   aplican al revelar (data-intro="done"); ver bloque 7b. */
.hero-inner > * { transition: opacity .7s var(--ease); }
.hero-eyebrow { color: var(--oro-oscuro); }
/* Ancho de la caja del titular. A 16ch el título actual rompía en cuatro
   líneas; a 22ch entra en dos y el hero baja de alto, que es justo lo que
   necesita después de agrandar el video. */
.hero-title { max-width: 22ch; margin-inline: auto; }
.hero .rule { margin-inline: auto; }
.hero-sub { color: var(--marfil); max-width: 46ch; margin-inline: auto; opacity: .88; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px;
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  display: grid; justify-items: center; gap: 14px;
  padding: 8px 12px; text-decoration: none;
  transition: opacity .5s var(--ease);
}
.scroll-cue-label {
  font-family: var(--ff-marca); font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-oscuro); white-space: nowrap;
  opacity: 0; transition: opacity .6s var(--ease);
}
.scroll-cue-line { display: block; width: 1px; height: 36px; background: var(--oro-oscuro); opacity: .8; }
@media (min-width: 768px) { .scroll-cue-label { font-size: 12px; } }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-line { animation: cue 2.6s var(--ease) infinite; transform-origin: top; }
  @keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .35; } 45% { transform: scaleY(1); opacity: .9; } }
}
/* Una vez que la animación terminó, el indicador de scroll ya cumplió su función. */

/* ---------- 7b. Cortina de entrada ----------
   TODO lo de este bloque depende de que js/hero.js haya puesto data-intro en
   <html>. Si el JS no corre, no existe el atributo, ninguna de estas reglas
   aplica y la página se ve entera: nadie queda encerrado en una pantalla azul.  */

/* Scroll trabado mientras dura la cortina. position:fixed además del overflow
   porque en iOS el overflow solo no alcanza para frenar el arrastre con el dedo. */
html[data-intro="idle"] body,
html[data-intro="playing"] body {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

/* Pantalla azul: no se ve nada salvo la señal. Se ocultan con opacidad y no con
   display para que nada cambie de lugar al revelarse. */
html[data-intro="idle"] .site-header,
html[data-intro="playing"] .site-header,
html[data-intro="idle"] .wa,
html[data-intro="playing"] .wa,
html[data-intro="idle"] .hero-inner > :not(.hero-mark),
html[data-intro="playing"] .hero-inner > :not(.hero-mark) {
  opacity: 0;
  pointer-events: none;
}
html[data-intro="idle"] .site-header,
html[data-intro="playing"] .site-header,
html[data-intro="idle"] .wa,
html[data-intro="playing"] .wa { transition: opacity .8s var(--ease); }

/* La marca aparece recién cuando arranca la animación. */
html[data-intro="idle"] .hero-mark { opacity: 0; }
html[data-intro="playing"] .hero-mark { opacity: 1; transition: opacity .45s var(--ease); }

/* La señal: rótulo visible solo en reposo; al arrancar la animación se retira.
   Durante la cortina se ancla al VIEWPORT y no al hero. Es importante: el hero
   puede ser más alto que la pantalla (su contenido no siempre entra en 100svh),
   y como el scroll está trabado, una señal colgada del hero podía quedar por
   debajo del borde, invisible e inalcanzable. Siendo lo único que se ve, tiene
   que estar sí o sí en pantalla. Al revelarse vuelve a su posición normal. */
html[data-intro="idle"] .scroll-cue,
html[data-intro="playing"] .scroll-cue {
  position: fixed;
  bottom: clamp(28px, 7vh, 64px);
  z-index: 10;
}
html[data-intro="idle"] .scroll-cue-label { opacity: 1; }
html[data-intro="playing"] .scroll-cue { opacity: 0; pointer-events: none; }

/* El revelado: escalonado, para que el texto entre detrás de la animación. */
html[data-intro="done"] .hero-inner > :nth-child(2) { transition-delay: .05s; }
html[data-intro="done"] .hero-inner > :nth-child(3) { transition-delay: .13s; }
html[data-intro="done"] .hero-inner > :nth-child(4) { transition-delay: .21s; }
html[data-intro="done"] .hero-inner > :nth-child(5) { transition-delay: .29s; }
html[data-intro="done"] .hero-inner > :nth-child(6) { transition-delay: .37s; }
html[data-intro="done"] .site-header { transition-delay: .30s; }
html[data-intro="done"] .wa          { transition-delay: .55s; }
html[data-intro="done"] .scroll-cue-label { opacity: 0; }

/* ---------- 8. La agencia ---------- */
.col-text p { max-width: 56ch; }

/* Principio rector. Sobre marfil el destacado va en azul y el oro solo como
   filete (manual 2.2): el oro no lleva texto sobre fondo claro. */
.principio { margin: 0 0 40px; }
.principio blockquote { margin: 0; }
.principio blockquote p {
  font-family: var(--ff-titulo); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2;
  color: var(--azul-noche); margin: 0 0 14px; max-width: 18ch;
}
.principio figcaption { max-width: 42ch; }

.datos { display: grid; gap: 26px; }
.dato { padding-left: 16px; border-left: 1px solid var(--oro-claro); }
.dato dt {
  font-family: var(--ff-marca); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acero-claro); margin-bottom: 6px;
}
.dato dd { margin: 0; font-size: 15px; color: var(--azul-noche); max-width: 46ch; }

/* ---------- 9. Cómo trabajamos — los tres pilares ---------- */
.pilares { display: grid; gap: 0; border-top: 1px solid var(--azul-borde); }
.pilar { padding: 32px 0; border-bottom: 1px solid var(--azul-borde); }
.pilar-num {
  display: block;
  font-family: var(--ff-titulo); font-weight: 500; font-size: 32px;
  color: var(--oro-oscuro); line-height: 1; margin-bottom: 14px;
}
.pilar h3 { color: var(--marfil); margin-bottom: .3em; }
/* El sumario es la frase corta del manual (4.4); el párrafo la desarrolla. */
.pilar-sumario {
  font-family: var(--ff-texto); font-weight: 500; font-size: 15px;
  color: var(--oro-oscuro); margin: 0 0 12px;
}
.pilar p { color: var(--acero-azul); max-width: 54ch; }
.pilar-marca, .pilar-estado {
  font-family: var(--ff-marca); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; margin: 14px 0 0;
}
.pilar-marca { color: var(--oro-oscuro); }
/* El tercer pilar todavía no está en marcha: se dice, no se disimula. */
.pilar-estado {
  color: var(--acero-azul);
  display: inline-block; padding: 5px 12px; border: 1px solid var(--azul-borde);
}
@media (min-width: 768px) {
  .pilar { display: grid; grid-template-columns: 96px 1fr; column-gap: 28px; padding: 40px 0; }
  .pilar-num { font-size: 40px; margin: 0; }
  .pilar > :not(.pilar-num) { grid-column: 2; }
}
@media (min-width: 1080px) {
  .pilares { grid-template-columns: repeat(3, 1fr); column-gap: 52px; border-top: 0; }
  .pilar { display: block; border-top: 1px solid var(--azul-borde); border-bottom: 0; padding: 30px 0 0; }
  .pilar-num { font-size: 38px; margin-bottom: 16px; }
}

/* Timeline del manual (4.4). El punto en oro sobre azul está permitido. */
.hitos {
  display: flex; flex-wrap: wrap; gap: 22px 34px;
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--azul-borde);
  font-family: var(--ff-marca); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acero-azul);
}
.hitos li { display: inline-flex; align-items: center; gap: 10px; }
.hito-punto { width: 5px; height: 5px; background: var(--oro-oscuro); border-radius: 50%; }

/* ---------- 10. Valores ---------- */
.valores { display: grid; gap: 34px; }
@media (min-width: 700px)  { .valores { grid-template-columns: repeat(2, 1fr); gap: 40px 44px; } }
@media (min-width: 1024px) { .valores { grid-template-columns: repeat(4, 1fr); gap: 36px; } }
.valor { padding-top: 22px; border-top: 1px solid var(--oro-claro); }
.valor h3 {
  font-family: var(--ff-titulo); font-weight: 600; font-size: 24px;
  color: var(--azul-noche); margin: 0 0 10px;
}
.valor p { font-size: 15px; color: var(--acero-claro); margin: 0; }

/* ---------- 11. Alianzas (oculta hasta activar) ---------- */
.alianzas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; align-items: center; }
@media (min-width: 768px) { .alianzas { grid-template-columns: repeat(4, 1fr); gap: 48px; } }
.alianza img { max-height: 56px; width: auto; margin-inline: auto; opacity: .85; filter: brightness(0) invert(1); }

/* ---------- 12. Contacto ---------- */
.form-card {
  max-width: 720px;
  border: 1px solid var(--azul-borde);
  padding: 8px 20px 28px;
}
@media (min-width: 768px) { .form-card { padding: 8px 36px 36px; } }

.tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -20px 26px; border-bottom: 1px solid var(--azul-borde); }
@media (min-width: 768px) { .tabs { margin: 0 -36px 30px; } }
.tab {
  padding: 18px 14px; text-align: center;
  font-family: var(--ff-marca); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acero-azul); border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
@media (min-width: 768px) { .tab { font-size: 12px; letter-spacing: .2em; } }
.tab:hover { color: var(--marfil); }
.tab.is-active { color: var(--oro-oscuro); border-bottom-color: var(--oro-oscuro); }

.field { margin-bottom: 20px; }
.field-row { display: grid; gap: 0; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; gap: 20px; } }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--acero-azul);
}
.field input, .field textarea {
  width: 100%; padding: 13px 14px;
  font-family: var(--ff-texto); font-size: 16px; font-weight: 400;
  color: var(--marfil); background: var(--campo-fondo);
  border: 1px solid var(--azul-borde); border-radius: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover, .field textarea:hover { border-color: rgba(244,241,234,.28); }
.field input:focus, .field textarea:focus { border-color: var(--oro-oscuro); background: rgba(244,241,234,.09); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #E08A7E; }
.field-hint  { font-size: 12px; color: var(--acero-azul); margin: 6px 0 0; }
.field-error { font-size: 13px; color: #E9A79C; margin: 7px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 16px 0 0; font-size: 15px; min-height: 1.6em; }
.form-status.is-ok   { color: var(--oro-oscuro); }
.form-status.is-error{ color: #E9A79C; }
.form-legal { margin-top: 14px; }
.contacto-alt { margin-top: 28px; color: var(--acero-azul); font-size: 15px; }
.contacto-alt a { margin-inline: 4px; }

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--azul-noche); border-top: 1px solid var(--oro-borde); padding-block: 56px 40px; }
.footer-inner { display: grid; gap: 40px; }
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: auto 1fr auto; gap: 64px; align-items: start; }
  .footer-legal { text-align: right; }
}
.footer-brand img { height: 130px; width: auto; }   /* mínimo firma vertical: 130px */
.footer-data .eyebrow { color: var(--oro-oscuro); }
.footer-name { font-family: var(--ff-titulo); font-weight: 600; font-size: 24px; margin: 0; }
.footer-role { font-size: 14px; color: var(--acero-azul); margin: 2px 0 16px; }
.footer-list { display: grid; gap: 8px; font-size: 15px; }
.footer-list a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.footer-list a:hover { border-bottom-color: var(--oro-oscuro); }
.footer-legal .caption { margin: 0; }

/* ---------- 14. WhatsApp flotante ---------- */
.wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul-noche); color: var(--marfil);
  border: 1px solid var(--oro-oscuro);
  box-shadow: 0 6px 22px rgba(21, 35, 68, .34);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.wa:hover { background: var(--oro-oscuro); color: var(--azul-noche); }
@media (min-width: 768px) { .wa { right: 26px; bottom: 26px; width: 58px; height: 58px; } }
@supports (padding: max(0px)) {
  .wa { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ---------- 15. Entrada por scroll (progresiva) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- 16. Impresión ---------- */
@media print {
  .site-header, .wa, .scroll-cue, .hero-video { display: none !important; }
  /* En papel vale la firma estática, no el frame congelado del video. */
  .hero-logo { opacity: 1 !important; }
  .hero-mark { aspect-ratio: auto; height: auto; }
  body, .section-navy { background: #fff !important; color: #000 !important; }
}