/* ============================================================
   NASSER GROUP INTERNACIONAL
   Sistema visual: onyx + oro metálico + red de nodos.
   Display: Saira · Cuerpo: Inter (autohospedadas).
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  /* Superficies — AZUL CORPORATIVO Nasser Group (tono de la referencia) */
  --onyx:      #1A365D;   /* azul principal */
  --panel-1:   #234270;
  --panel-2:   #2C5282;   /* azul medio */
  --panel-3:   #35608F;
  --navy-deep: #12294A;

  /* ACENTO AZUL (sustituye por completo al dorado en todo el sitio).
     Se conservan los nombres --gold-* para no tocar cada componente. */
  --gold-1: #1F5FA0;
  --gold-2: #2E86C1;
  --gold-3: #8FD0F0;   /* azul claro: acentos sobre fondo oscuro */
  --gold-grad:   linear-gradient(135deg, #1F5FA0, #2E86C1 50%, #56B0E5);
  --gold-soft:   linear-gradient(135deg, #2E86C1, #8FD0F0);
  --gold-flat:   #2E86C1;
  --on-accent:   #FFFFFF;  /* texto sobre botón azul */

  /* Acero (apoyo) y azul (secundario) */
  --chrome-grad: linear-gradient(135deg, #3A3A3C, #7A7A7B 52%, #D9DCE0);
  --blue-grad:   linear-gradient(135deg, #0B3D76, #1778B3 55%, #93B8CC);
  --blue-2: #1778B3;

  /* Texto (sobre azul corporativo) */
  --white: #FFFFFF;
  --text:  #D6E1EF;
  --muted: #9DB0C7;

  /* Superficies CLARAS (secciones blancas corporativas) */
  --light-1:   #EEF2F7;
  --light-2:   #E2E9F2;
  --light-card:#FFFFFF;
  --ink:       #1A365D;          /* títulos en azul corporativo sobre claro */
  --ink-soft:  #4A5C74;          /* texto secundario sobre claro */
  --light-line:rgba(26, 54, 93, .14);
  --gold-ink:  linear-gradient(135deg, #1A365D, #2C5282 55%, #2E86C1); /* acento sobre claro */
  --blue-ink:  linear-gradient(135deg, #1A365D, #2C5282);

  /* Líneas / bordes */
  --hair:      rgba(78, 159, 209, .34);
  --hair-soft: rgba(255, 255, 255, .1);
  --gold-border: linear-gradient(160deg, rgba(143,208,240,.6), rgba(31,95,160,.2) 60%, rgba(255,255,255,.05));

  /* Tipografía */
  /* Archivo en todo el sistema. El carácter no lo pone una fuente
     rara, lo ponen el peso, el tamaño y la caja (ver .section-title). */
  --f-title:   "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ritmo — contenedor ancho y márgenes reducidos (aprovechar el espacio) */
  --container: 1560px;
  --gutter: clamp(16px, 2.5vw, 40px);
  --section-y: clamp(56px, 7vw, 104px);
  /* Escala de curvatura: la página respira, no es una parrilla de cajas.
     No hay un solo radio, hay una ESCALA coherente. */
  --r-lg: 22px;   /* superficies grandes: tarjetas, fotos, formulario */
  --r-md: 14px;   /* piezas medianas: chips grandes, media interna */
  --r-sm: 10px;   /* controles: botones, inputs */
  --radius: var(--r-lg);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

/* overflow-x: clip (no 'hidden') — 'hidden' crea contexto de scroll y
   ROMPE position:sticky del header. 'clip' evita el scroll lateral sin romperlo. */
html, body { overflow-x: clip; }

body {
  font-family: var(--f-body);
  /* Profundidad con color: glow cálido (oro) arriba-derecha, frío (azul) abajo */
  background:
    radial-gradient(62% 48% at 82% -6%, rgba(46,134,193, .14), transparent 60%),
    radial-gradient(55% 45% at 2% 24%, rgba(44, 82, 130, .35), transparent 62%),
    radial-gradient(85% 60% at 50% 116%, rgba(18, 41, 74, .5), transparent 60%),
    var(--onyx);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.68;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

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

/* Fondo OPACO a propósito. Antes era un azul claro al 25 % con texto
   blanco: sobre el banner oscuro se leía, pero en cualquier sección
   clara ese 25 % dejaba pasar el blanco de abajo y el texto seleccionado
   caía a 1.14 de contraste — se borraba al seleccionarlo. Con el fondo
   opaco el blanco funciona en toda la página (6.56 sobre este azul). */
::selection    { background: #1F5FA0; color: #FFFFFF; }
::-moz-selection { background: #1F5FA0; color: #FFFFFF; }

:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--gold-flat); color: #1a1205; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---- Red de nodos (canvas firma) -------------------------- */
#ng-nodes {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

/* El contenido va por encima del canvas */
.site-header, main, section, footer, .wa-float, .lightbox { position: relative; z-index: 1; }

/* ---- Layout ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Hairline divisoria superior dorada (se "dibuja" al revelar) */
.section::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; transform: scaleX(0); transform-origin: center;
  /* Se apaga por los DOS extremos. Antes arrancaba opaca en el borde
     izquierdo y se veía el corte seco de donde nacía. */
  background: linear-gradient(90deg, transparent, var(--hair) 50%, transparent);
  transition: transform 1.1s var(--ease);
}
.section.is-visible::before { transform: scaleX(1); }

/* ---- Tipografía de marca ---------------------------------- */
.eyebrow {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 14px;
}
/* Guion/línea del eyebrow: eliminado en todo el sitio (look más limpio) */
.eyebrow-tick { display: none; }
[data-reveal].is-visible .eyebrow-tick,
.is-visible .eyebrow-tick { transform: scaleX(1); }

.section-title {
  font-family: var(--f-title);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.03em;
  line-height: 1.14;
  font-size: clamp(1.75rem, 2.9vw, 2.6rem);
  color: var(--white);
  margin-top: 12px;
}

.section-lead {
  max-width: 64ch;
  margin-top: 16px;
  color: var(--text);
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.68;
}

.section-head { max-width: 820px; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow,
.section-head--center .section-lead { margin-inline: auto; }
.section-head--center .section-lead { margin-top: 22px; }

/* Palabra de acento: color PLANO. Sin degradados en texto. */
.gold-text { color: #8FD0F0; }

/* ---- Botones ---------------------------------------------- */
.btn {
  --b-pad-y: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* Caja normal, no MAYÚSCULA espaciada: se lee como una frase, no como
     una etiqueta de sistema. */
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .97rem;
  padding: var(--b-pad-y) 26px;
  border-radius: 999px;              /* píldora: rompe la retícula cuadrada */
  position: relative;
  transition: transform .25s var(--ease), box-shadow .3s, background .3s, color .3s;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

/* Relleno PLANO. Sin degradado, sin brillo simulado encima. */
.btn-gold {
  color: #FFFFFF;
  background: #1F5FA0;
}
.btn-gold:hover { background: #14406F; transform: translateY(-2px); }

.btn-ghost {
  color: var(--white);
  border: 1px solid var(--hair);
  background: transparent;
}
.btn-ghost:hover { border-color: rgba(143,208,240, .6); color: var(--gold-3); transform: translateY(-2px); }

.btn-block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
/* HEADER BLANCO siempre (también al hacer scroll), pegado arriba. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(26, 54, 93, .12);
  transition: box-shadow .3s;
}
.site-header.scrolled {
  background: #FFFFFF;
  box-shadow: 0 6px 24px -12px rgba(26, 54, 93, .35);
  border-bottom: 1px solid rgba(26, 54, 93, .12);
}
/* Header a ancho completo (como GSS): logo | nav centrado | CTA derecha.
   Sin max-width del contenedor: márgenes reducidos, no encuadrado al centro. */
.header-inner {
  display: grid;
  /* 1fr auto 1fr -> el nav queda centrado EXACTO en el viewport */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  height: 74px;
  max-width: none;
  padding-inline: clamp(16px, .5rem + 1.6vw, 36px);
}
.header-inner .brand { justify-self: start; }
.header-inner .nav   { justify-self: center; }
.header-inner .header-cta { justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.ng-logo { flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(46,134,193,.35)); }
/* Logo PNG suelto (sin círculo ni fondo) */
.brand-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  background: none; border: 0; box-shadow: none;
}
.brand-badge img { width: 48px; height: 48px; object-fit: contain; display: block; }

/* --- Header blanco: textos y controles en azul --- */
.site-header .brand-text strong { color: var(--ink); }
.site-header .brand-text em { color: var(--gold-flat); }
.site-header .nav a { color: #33455E; font-weight: 600; }
.site-header .nav a:hover { color: var(--ink); }
.site-header .nav-toggle span { background: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--f-display); }
.brand-text strong {
  font-family: var(--f-title);
  font-weight: 800; letter-spacing: .14em; font-size: .96rem; color: var(--white);
}
.brand-text em {
  font-style: normal; font-weight: 500; letter-spacing: .34em; font-size: .56rem;
  color: var(--gold-flat); margin-top: 3px;
}

.nav { display: flex; gap: clamp(18px, 2vw, 34px); }
.nav a {
  font-family: var(--f-display); font-weight: 500; font-size: .9rem;
  letter-spacing: .04em; color: var(--text); position: relative; padding: 6px 0;
  transition: color .25s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: #2E86C1; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after { transform: scaleX(1); }

/* CTA a la derecha (orden natural: logo · nav · CTA). */
.header-cta { padding: 11px 22px; }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; }
.nav-toggle span { display: block; height: 2px; width: 24px; margin-inline: auto; background: var(--gold-3); transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px var(--gutter) 26px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(26, 54, 93, .12);
}
/* Sin esta línea el menú no se cierra nunca. El atributo `hidden` del
   HTML vale `display:none`, pero eso vive en la hoja del navegador y el
   `display:flex` de aquí arriba le gana por ser de autor. El JS pone
   `hidden = true` y no ocurre nada visible: en el teléfono el menú queda
   abierto desde que carga la página. En el escritorio no se notaba
   porque a partir de 881px lo tapa un `display:none !important`. */
.nav-mobile[hidden] { display: none; }

.nav-mobile a { font-family: var(--f-display); color: #33455E; padding: 12px 4px; border-bottom: 1px solid rgba(26,54,93,.1); }
.nav-mobile .btn-gold { color: #fff; }
.nav-mobile .btn { margin-top: 12px; }

/* ============================================================
   HERO — texto a la izquierda + tarjeta de medios a la derecha
   ============================================================ */
.hero {
  position: relative;
  /* Menos relleno abajo: la franja de aliados cierra el banner y el
     recuadro del video se le monta encima. */
  padding-top: clamp(44px, 5.5vw, 82px);
  /* En variable porque la franja de aliados la usa para pegarse al borde
     inferior. Si los dos valores se separan, la franja se sale del banner
     y tapa la barra azul de abajo. */
  --pad-abajo: clamp(48px, 5.5vw, 84px);
  padding-bottom: var(--pad-abajo);
  background:
    radial-gradient(80% 70% at 85% 10%, rgba(46,134,193,.22), transparent 60%),
    radial-gradient(70% 60% at 0% 90%, rgba(18,41,74,.6), transparent 60%),
    linear-gradient(160deg, #1A365D 0%, #16305A 55%, #12294A 100%);
  /* `clip` en vez de `hidden`: recorta a los lados (nada de barra
     horizontal) pero deja que el recuadro del video sobresalga por
     abajo. Con `hidden` quedaría cortado justo donde empieza el efecto. */
  overflow-x: clip;
  overflow-y: visible;
  /* Cuánto baja el recuadro sobre la franja de aliados. */
  --solape: clamp(26px, 3vw, 48px);
}

/* Fondo del héroe: foto real de aula, tratada en azul para que NO compita
   con el texto ni con el video (queda como textura de marca). */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* La foto del atardecer ya viene oscura y desenfocada: no hace falta
     apagarla más, solo sostener el contraste. */
  filter: contrast(1.04);
  transform: scale(1.03);
}
.hero-bg-veil {
  position: absolute; inset: 0;
  /* Velo cargado a la IZQUIERDA, que es donde va el titular y donde la
     foto tiene el cielo naranja más claro. A la derecha se abre para que
     la silueta de la refinería se vea detrás del recuadro del video. */
  background:
    linear-gradient(100deg,
      rgba(7, 18, 36, .92) 0%,
      rgba(7, 18, 36, .8)  34%,
      rgba(9, 24, 46, .55) 62%,
      rgba(9, 24, 46, .42) 100%);
}
/* Por encima de la franja de aliados: el recuadro del video vive aquí
   dentro y tiene que montársele encima, no quedar debajo.

   Y más ancho que el resto del sitio: el banner es lo único que debe
   llenar la pantalla de lado a lado. Con el ancho normal quedaban dos
   franjas muertas a los costados en pantallas grandes. */
.hero > .container {
  position: relative; z-index: 2;
  max-width: var(--container-hero);
}
:root { --container-hero: 1720px; }

/* Las columnas del banner van en variables porque la franja de aliados
   usa exactamente la misma rejilla: así su pista termina siempre donde
   termina el texto, sin porcentajes calculados a mano que se descuadran
   al cambiar de ancho de pantalla. */
:root {
  --hero-cols: 1fr 1.06fr;
  --hero-gap: clamp(30px, 4vw, 56px);
}

.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--hero-gap);
  align-items: center;
}
@media (min-width: 960px) {
  /* El recuadro pesa más que el texto, como en la maqueta. */
  .hero-grid { grid-template-columns: var(--hero-cols); align-items: center; }
}

/* --- Columna de texto --- */
.hero-copy { text-align: left; }

/* Kicker limpio: sin línea, sin puntos, sin guiones */
.hero-kicker {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.78rem, .9vw, .86rem);
  font-weight: 700;
  color: var(--gold-3);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------------
   Acento del titular: naranja de refinería sobre el azul del banner.
   Van los dos colores del degradado en variables para poder pasarlo a
   plano de una sola línea (ver .hero .gold-text, más abajo).
   ------------------------------------------------------------------ */
.hero {
  /* Azul claro, no naranja. El naranja solo existía aquí: un color que
     aparece una vez en toda la página se lee como accidente, no como
     decisión. Este es el mismo azul de los acentos del resto del sitio.
     8.4 de contraste sobre el fondo del banner. */
  --acento-mate: #8FD0F0;
}
/* Naranja plano. Se probó el degradado y funcionaba, pero el remate
   quedaba más apagado que el arranque justo en la última palabra del
   titular; en mate las tres líneas pesan igual.
   Para volver al degradado:
     background: linear-gradient(102deg, var(--acento-1), var(--acento-2));
     -webkit-background-clip: text; background-clip: text;
     -webkit-text-fill-color: transparent;                              */
.hero .gold-text {
  color: var(--acento-mate);
}

.hero-title {
  font-family: var(--f-title);
  font-weight: 800;
  color: var(--white);
  /* El titular es lo primero que se lee: tiene que pesar. El tope en ch
     lo mantiene en 2–3 líneas parejas en vez de estirarse en una sola. */
  font-size: clamp(2.15rem, 4.4vw, 3.9rem);
  /* Interlineado y tracking cerrados, como la maqueta: es lo que separa
     a una grotesca de display de una de texto agrandada. */
  line-height: 1.04;
  letter-spacing: -0.036em;
  /* Caja ancha a propósito: en 17ch el titular caía en tres líneas
     cortas y el bloque se leía como una columna estrecha y vertical.
     A 25ch entra en dos líneas largas y el banner respira a lo ancho. */
  max-width: 25ch;
  text-wrap: balance;
}

.hero-sub {
  /* Ancho + balance para que caiga en 2 líneas parejas, sin palabras sueltas */
  max-width: 48ch;
  text-wrap: balance; margin-top: 20px;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--text);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Recuadro de medios (video / imagen) ---------------------------
   Se sale del banner por abajo y queda montado sobre la franja de
   aliados. El margen negativo es lo que lo baja; el z-index, lo que
   lo mantiene por encima.                                          */
.hero-card {
  position: relative; overflow: hidden;
  /* Cuadrado, como la maqueta. Es la única superficie del sitio sin
     redondeo: aquí el corte recto es el efecto. */
  border-radius: 0;
  aspect-ratio: 4 / 3;
  background: #12294A;
  /* Sin borde ni filo interior: el video llega hasta el canto. La sombra
     no es un marco — es lo que lo despega de la franja que tiene debajo. */
  border: 0;
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.7);
  z-index: 3;
}
@media (min-width: 960px) {
  /* Sigue saliéndose del banner por abajo, pero ahora se monta sobre la
     barra azul de marca en vez de sobre la franja de aliados, que se
     mudó a su propia sección. El efecto es el mismo; el solape es menor
     porque la barra es delgada. */
  .hero-card {
    align-self: end;
    margin-bottom: calc(-1 * var(--solape));
  }
}
.hero-card-media { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Control de reproducción: botón real, no adorno. El video va sin
   sonido, así que lo único que hace falta es pausar y seguir. */
.hero-card-play {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  color: #fff; background: rgba(10, 25, 45, .55);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.hero-card-play:hover { background: rgba(10, 25, 45, .8); border-color: rgba(255,255,255,.55); transform: scale(1.07); }
.hero-card-play:focus-visible { outline: 2px solid #F0754A; outline-offset: 3px; }
/* Se enseña un ícono u otro según el estado; nunca los dos. */
.hero-card-play .ico-pausa { display: block; }
.hero-card-play .ico-play  { display: none; }
.hero-card-play[data-estado="pausado"] .ico-pausa { display: none; }
.hero-card-play[data-estado="pausado"] .ico-play  { display: block; }

/* ============================================================
   TARJETAS con borde dorado + rim-light (reutilizable)
   ============================================================ */
.card-base, .prog-card, .testi-card, .contacto-form-wrap {
  position: relative;
  background:
    linear-gradient(180deg, rgba(46, 50, 64, .55), rgba(22, 24, 32, .82));
  border-radius: var(--radius);
  isolation: isolate;
}
/* Borde 1px en degradado oro */
.prog-card::before, .testi-card::before, .contacto-form-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--gold-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .7; transition: opacity .35s;
}
.prog-card:hover::before, .testi-card:hover::before { opacity: 1; }

/* Rim-light que sigue al cursor (JS define --mx/--my) */
.rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(143,208,240,.16), transparent 62%);
}
.prog-card:hover .rim, .testi-card:hover .rim, .contacto-form-wrap:hover .rim { opacity: 1; }

/* ============================================================
   CONTACTO + REGISTRO — dos formularios, una sola sección.
   Se cambia por botón; sin JS se ven los dos apilados.
   ============================================================ */
.ancla-registro { position: absolute; top: -90px; }   /* el header sticky no tapa el destino */

.cr-tabs {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  max-width: 720px; margin: 0 auto clamp(24px, 3vw, 36px);
}
@media (min-width: 620px) { .cr-tabs { grid-template-columns: 1fr 1fr; } }

/* Mismo criterio que las pestañas de público: seleccionar no oscurece
   la tarjeta, la marca. Las dos parejas de pestañas del sitio se
   comportan igual, que es lo que hace que se lean como un sistema. */
.cr-tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 16px 18px; text-align: left;
  border-radius: var(--r-md);
  border: 1px solid rgba(26,54,93,.16);
  background: #FFFFFF;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.cr-tab:hover { border-color: rgba(46,134,193,.45); }
.cr-tab:focus-visible { outline: 2px solid var(--sel); outline-offset: 3px; }
.cr-tab.is-active {
  background: var(--sel-tinte);
  border-color: var(--sel-borde);
}

.cr-tab-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(31,95,160,.1); color: #1F5FA0;
  transition: background .25s, color .25s;
}
.cr-tab.is-active .cr-tab-ico { background: var(--sel-vivo); color: #FFFFFF; }

.cr-tab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cr-tab-txt strong {
  font-family: var(--f-title); font-weight: 700; font-size: 1.02rem;
  color: var(--white); letter-spacing: -.024em; line-height: 1.24;
}
.cr-tab-txt em { font-style: normal; font-size: .84rem; color: #6E7785; }
.cr-tab.is-active .cr-tab-txt strong { color: var(--sel); }

/* Con JS solo se ve el panel activo; sin JS se ven los dos. */
.js .cr-panel { display: none; }
.js .cr-panel.is-active { display: block; animation: crEntra .3s var(--ease); }
@keyframes crEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cr-panel + .cr-panel { margin-top: 26px; }

.cr-sub {
  font-size: .95rem; color: var(--muted);
  margin-bottom: 14px; line-height: 1.6;
}

/* ============================================================
   COMPAÑÍAS ALIADAS — franja al pie del banner, de borde a borde.
   Logos en gris para no competir con el video ni con el titular;
   recuperan su color real al pasar el cursor.
   ============================================================ */
.tira-aliados {
  position: relative;
  /* De borde a borde de la pantalla, fuera del contenedor: una fila de
     logos que se desplaza necesita todo el ancho o se ve que se corta. */
  width: 100%;
  padding-block: clamp(6px, 1vw, 14px);
}

/* Solo la pista se recorta y se desvanece; el rótulo, nunca. */
.tira-viewport {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden;
  /* Se desvanece por los dos lados: los logos entran y salen de escena
     en vez de aparecer y desaparecer de golpe contra el borde. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.tira-pista {
  display: flex; align-items: center;
  /* SIN `gap`. El desplazamiento es de -50 %, o sea la mitad EXACTA del
     ancho total; con `gap` esa mitad cae en medio de un hueco y el
     bucle da un salto al reiniciar. Puesto como margen de cada logo,
     media pista mide exactamente una vuelta y el corte no se ve. */
  width: max-content;
  animation: tiraCorre calc(var(--n, 8) * 3.6s) linear infinite;
}
@keyframes tiraCorre { to { transform: translateX(-50%); } }

/* El cursor encima detiene la franja para poder leer y hacer clic. */
.tira-aliados:hover .tira-pista,
.tira-aliados:focus-within .tira-pista { animation-play-state: paused; }

/* Con pocos logos no hay desplazamiento: se centran y ya. También se
   quita el desvanecido de los extremos, que ahí no tiene qué velar. */
.tira-aliados--quieta .tira-viewport { -webkit-mask-image: none; mask-image: none; }
.tira-aliados--quieta .tira-pista {
  animation: none;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 20px;
}

/* Todos los logos vienen ya normalizados por área de tinta en un lienzo
   de 480x200 (ver sql/aliados-normalizar.php), así que aquí basta con
   darles a todos la MISMA caja en esa misma proporción. */
.tira-item {
  flex: 0 0 auto;
  width: clamp(104px, 9vw, 132px);
  aspect-ratio: 12 / 5;
  margin-right: clamp(20px, 2.2vw, 36px);
  /* Caja simple, sin rejilla ni flex. Con grid la fila no podía bajar
     del mínimo automático de la imagen y los logos altos se salían por
     arriba y por abajo. Como bloque normal, el 100 % de la imagen se
     resuelve contra estos 36 px y `object-fit: contain` la encaja. */
  display: block; overflow: hidden;
  padding: 0; background: none; border: 0; border-radius: 0;
}
.tira-item img {
  /* La imagen ocupa la caja entera y `contain` la encaja dentro sin
     deformarla. Con `max-height: 100%` y alto automático el navegador
     resolvía primero por ancho y los logos altos se salían de la fila. */
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  /* Sobre fondo claro. El brillo alto de antes era para levantarlos
     contra el azul marino del banner; aquí los borraba. */
  filter: grayscale(1) contrast(.95);
  opacity: .5;
  transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.tira-item:hover img,
.tira-item:focus-visible img {
  filter: none;                        /* color real de la marca */
  opacity: 1;
  transform: scale(1.06);
}

/* Sin animación para quien la tenga desactivada en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .tira-pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ============================================================
   DISTINTIVO DE PÚBLICO — el sitio vende a dos clientes distintos.
   B2B (empresas) y B2C (personas) tienen que distinguirse de un
   vistazo, sin leer. Se resuelve con una píldora de color invertido:
   empresas = azul lleno · personas = azul claro.
   ============================================================ */
.publico {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.publico svg { flex: 0 0 auto; }

/* B2B: sólido, corporativo */
.publico--empresas { background: #1A365D; color: #FFFFFF; }
/* B2C: claro, cercano */
.publico--personas { background: #DCE9F6; color: #14406F; }

/* Cambio de público a mitad de la página: un aviso corto al cierre
   de cada sección para quien cayó en la que no le toca. */
.cambio-publico {
  margin-top: clamp(28px, 3.5vw, 42px);
  padding-top: 22px;
  border-top: 1px solid rgba(26,54,93,.12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; text-align: center;
}
.cambio-publico p { color: #6E7785; font-size: .97rem; margin: 0; }
.cambio-publico a {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .97rem; color: #1F5FA0;
  transition: gap .3s, color .3s;
}
.cambio-publico a:hover { color: #14406F; gap: 11px; }

/* ============================================================
   SERVICIOS — un solo bloque. Lista a la izquierda, detalle a la
   derecha. En móvil se vuelve acordeón. Toda la sección cabe en
   una pantalla en vez de seis tarjetas apiladas.
   ============================================================ */
.serv-panel {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  /* stretch (no start): el panel de detalle iguala la altura de la lista,
     así el bloque termina parejo y no queda un escalón en la última casilla. */
  align-items: stretch;
}
@media (min-width: 900px) { .serv-panel { grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: 22px; } }

/* ---- Selector ---- */
.serv-lista { display: grid; gap: 8px; align-content: start; }

.serv-tab {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px 16px; text-align: left;
  border-radius: var(--r-md);
  border: 1px solid rgba(26,54,93,.13);
  background: #FFFFFF;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.serv-tab:hover { border-color: rgba(46,134,193,.45); }
/* Igual que las pestañas de arriba: el elegido se marca, no se apaga en
   azul marino. Seis tarjetas en columna con una negra en medio partía la
   lista en dos mitades. */
.serv-tab.is-active {
  background: var(--sel-tinte);
  border-color: var(--sel-borde);
}

.serv-tab-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(31,95,160,.1); color: #1F5FA0;
  transition: background .25s, color .25s;
}
.serv-tab.is-active .serv-tab-ico { background: var(--sel-vivo); color: #FFFFFF; }

.serv-tab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.serv-tab-txt strong {
  font-family: var(--f-title); font-weight: 700; font-size: .99rem;
  color: var(--white); letter-spacing: -.024em; line-height: 1.25;
}
.serv-tab-txt em {
  font-style: normal; font-size: .82rem; color: #6E7785; line-height: 1.35;
}
.serv-tab.is-active .serv-tab-txt strong { color: var(--sel); }

.serv-tab-flecha { flex: 0 0 auto; color: #9AA7B8; transition: color .25s, transform .25s; }
.serv-tab.is-active .serv-tab-flecha { color: var(--sel-vivo); transform: translateX(2px); }

/* ---- Detalle (escritorio) ---- */
/* Es item de .serv-panel: con align-items:stretch toma la altura de la
   fila (la marca la lista de 6). Su hijo activo se estira dentro. */
.serv-detalles { position: relative; display: grid; }
.serv-detalle {
  display: grid; grid-template-columns: 1fr;
  border-radius: var(--r-lg);
  border: 1px solid rgba(26,54,93,.13);
  background: #FFFFFF;
  overflow: hidden;
}
@media (min-width: 620px) { .serv-detalle { grid-template-columns: .85fr 1fr; } }

/* Con JS solo se ve el activo; sin JS se ven todos apilados (nunca se rompe). */
.js .serv-detalle { display: none; }
.js .serv-detalle.is-active { display: grid; animation: servEntra .35s var(--ease); }
@keyframes servEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.js .serv-detalle + .serv-detalle { margin-top: 0; }
.serv-detalle + .serv-detalle { margin-top: 14px; }

.serv-det-foto { position: relative; min-height: 240px; background: #E7ECF3; }
.serv-det-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.serv-det-cuerpo { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; }
.serv-det-titulo {
  font-family: var(--f-title); font-weight: 700; font-size: 1.22rem;
  color: var(--white); letter-spacing: -.028em; line-height: 1.22; text-wrap: balance;
}
.serv-det-texto {
  margin-top: 10px; color: var(--muted);
  font-size: 1rem; line-height: 1.62; text-wrap: pretty;
}

.serv-items {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(26,54,93,.1);
  display: grid; gap: 7px;
}
.serv-items li {
  position: relative; padding-left: 18px;
  font-size: .93rem; color: #4A5C74; line-height: 1.45;
}
.serv-items li::before {
  content: "";
  position: absolute; left: 0;
  /* Altura entera y posición redondeada al píxel. Con 1.5px unos guiones
     caían sobre un píxel y salían gruesos y otros a caballo entre dos y
     salían lavados: la lista se veía con grosores distintos. */
  top: 9px; width: 8px; height: 2px;
  background: #2E86C1; border-radius: 0;
}

.serv-det-cta {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-weight: 600; font-size: .93rem; color: #1F5FA0;
  transition: gap .3s, color .3s;
}
.serv-det-cta:hover { color: #14406F; gap: 11px; }

/* ---- Acordeón de móvil ---- */
.serv-movil { display: none; }
@media (max-width: 899px) {
  .serv-detalles { display: none; }
  .js .serv-movil {
    display: none;
    padding: 4px 16px 18px;
    border: 1px solid rgba(26,54,93,.13); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: #FFFFFF; margin-top: -8px;
  }
  .js .serv-movil.is-active { display: block; animation: servEntra .3s var(--ease); }
  .js .serv-tab.is-active { border-radius: var(--r-md) var(--r-md) 0 0; }
  .serv-movil .serv-items { margin-top: 12px; }
  .serv-movil .serv-det-cta { padding-top: 16px; }
}

/* ============================================================
   PROGRAMAS — tarjeta sobria: foto, etiqueta, título, texto, enlace.
   Sin número gigante, sin badge de vidrio, sin mayúsculas forzadas.
   ============================================================ */
.prog-grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prog-grid { grid-template-columns: repeat(4, 1fr); } }

.prog-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  transition: transform .4s var(--ease);
}
.prog-card:hover { transform: translateY(-4px); }

.prog-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #E7ECF3;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.prog-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.prog-card:hover .prog-foto img { transform: scale(1.05); }
.prog-foto-ph { position: absolute; inset: 0; background: #D6DEE9; }

.prog-body {
  position: relative; z-index: 1;
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; flex: 1;
}
.prog-tag {
  font-size: .78rem; color: #6E7785; letter-spacing: 0;
  text-transform: none; margin-bottom: 8px;
}
.prog-name {
  font-family: var(--f-title); font-weight: 700;
  font-size: 1.1rem; color: var(--white);
  letter-spacing: -.028em; line-height: 1.25; text-wrap: balance;
}
.prog-desc {
  margin-top: 10px; color: var(--muted);
  font-size: .97rem; line-height: 1.6; text-wrap: pretty;
}
.prog-btn {
  margin-top: 20px; padding-top: 0; border-top: 0; width: auto;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--f-body); font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: .92rem; color: #1F5FA0;
  transition: gap .3s, color .3s;
}
.prog-btn svg { transition: transform .3s; }
.prog-btn:hover { color: #14406F; gap: 11px; }

/* ============================================================
   MÉTODO
   ============================================================ */
.metodo-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); }
@media (min-width: 920px) { .metodo-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

.metodo-intro .btn { margin-top: 30px; }
.metodo-intro { position: sticky; top: 100px; }
@media (max-width: 919px) { .metodo-intro { position: static; } }

.metodo-list { display: grid; gap: 4px; }
.metodo-item {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 28px 8px 28px 0;
}
.metodo-line {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--hair), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease);
}
.metodo-item.is-visible .metodo-line { transform: scaleX(1); }
.metodo-ico {
  width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--gold-3); border: 1px solid var(--hair);
  background: radial-gradient(120% 120% at 30% 20%, rgba(46,134,193,.15), rgba(255,255,255,.015));
  transition: transform .4s var(--ease);
}
.metodo-item:hover .metodo-ico { transform: translateY(-3px) rotate(-3deg); }
.metodo-item h3 { font-family: var(--f-title); font-weight: 700; text-transform: none; font-size: 1.14rem; color: var(--white); letter-spacing: -.005em; line-height: 1.25; }
.metodo-item p { margin-top: 8px; color: var(--muted); font-size: 1.03rem; line-height: 1.65; max-width: 56ch; }

/* Stats */
.stats-row {
  margin-top: clamp(48px, 7vw, 90px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 720px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel-1); padding: 32px 24px; text-align: center; }
.stat-num {
  display: block; font-family: var(--f-title); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  color: #8FD0F0;
}
.stat-label { display: block; margin-top: 8px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-family: var(--f-display); line-height: 1.4; }

/* ============================================================
   FRANJA DE MARCA — banda azul sólida entre el banner y lo que sigue
   ============================================================ */
.franja-marca {
  height: 22px;
  background: #2E86C1;
  width: 100%;
}
@media (max-width: 700px) { .franja-marca { height: 16px; } }

/* ============================================================
   NOSOTROS — texto + collage de fotos reales + Misión/Visión/Valores
   ============================================================ */
.nos-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4.5vw, 64px); align-items: center; }
@media (min-width: 980px) { .nos-grid { grid-template-columns: 1.02fr 1fr; } }

.nos-copy .section-head { margin-bottom: 0; }
.nos-parrafo { margin-top: 16px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 60ch; }
.nos-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Fotos reales: la SEDE manda, la dirección acompaña a la derecha -----
   Una sola señal por superficie: borde hairline, sin sombra.            */
.nos-media {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  gap: 14px;
}
.nos-retrato, .nos-foto {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(26,54,93,.13);
  background: #E7ECF3;
}
.nos-retrato img, .nos-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.nos-retrato:hover img, .nos-foto:hover img { transform: scale(1.04); }

.nos-foto--principal { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; }
.nos-foto--apoyo     { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9;  }
/* El retrato ocupa la columna derecha completa: sin aspect-ratio, se
   estira a la altura de las dos fotos de la izquierda. */
.nos-retrato         { grid-column: 2; grid-row: 1 / span 2; }
.nos-retrato img     { object-position: 50% 16%; }

.nos-placa {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 15px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(to top, rgba(12,28,52,.92) 18%, rgba(12,28,52,0));
}
.nos-placa strong {
  font-family: var(--f-title); font-weight: 700; font-size: 1.02rem;
  color: #fff; letter-spacing: -.026em; line-height: 1.18;
}
.nos-placa span { font-size: .79rem; color: #B9D4EA; line-height: 1.35; }

.nos-sello {
  position: absolute; left: 14px; bottom: 14px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(12,28,52,.8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .74rem; font-weight: 600; color: #fff; letter-spacing: .01em;
}
@media (max-width: 620px) {
  .nos-media { grid-template-columns: 1fr 1fr; }
  .nos-foto--principal { grid-column: 1 / -1; grid-row: 1; }
  .nos-retrato { grid-column: 1; grid-row: 2; aspect-ratio: 3 / 4; }
  .nos-foto--apoyo { grid-column: 2; grid-row: 2; aspect-ratio: 3 / 4; }
}

/* --- Misión / Visión / Valores ------------------------------
   Misma superficie para las tres (borde hairline, sin sombra).
   El acento azul solo vive en el ícono; nada de barras decorativas. */
/* Silueta de balancín al fondo de la sección. Muy tenue y anclada abajo
   a la derecha: da carácter industrial sin competir con el texto. Se
   apaga en móvil, donde el ancho no le deja sitio. */
.section#nosotros { position: relative; overflow: hidden; }
.section#nosotros::after {
  content: "";
  /* A la IZQUIERDA y volteada: a la derecha chocaba con el collage de
     fotos. Apoyada en el borde inferior de la sección, no colgando de
     él, para que se vea entera. */
  position: absolute; left: -3%; bottom: -6%;
  width: min(56%, 760px); aspect-ratio: 1400 / 781;
  background: url("../img/silueta-balancin.png") no-repeat left bottom / contain;
  transform: scaleX(-1);
  opacity: .06;
  pointer-events: none; z-index: 0;
}
.section#nosotros > .container { position: relative; z-index: 1; }
@media (max-width: 760px) { .section#nosotros::after { display: none; } }

.nos-pilares {
  margin-top: clamp(36px, 4.5vw, 60px);
  display: grid; gap: clamp(20px, 2.6vw, 34px); grid-template-columns: 1fr;
}
@media (min-width: 760px) { .nos-pilares { grid-template-columns: repeat(3, 1fr); } }

/* Sin caja blanca. Eran tres rectángulos idénticos, que es lo que hace
   que un bloque se lea como plantilla. Ahora cada pilar se apoya en una
   regla superior y el ícono va suelto, sin recuadro: pesa menos y deja
   ver el fondo de la sección. */
.pilar-card {
  padding: 24px 22px 24px 0;
  background: none;
  border: 0;
  border-top: 2px solid rgba(26, 54, 93, .16);
  border-radius: 0;
  transition: border-color .35s var(--ease);
}
.pilar-card:hover { border-top-color: var(--sel-vivo); }

.pilar-head { display: flex; align-items: center; gap: 11px; }
.pilar-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; color: var(--sel-vivo);
  transition: transform .35s var(--ease);
}
.pilar-card:hover .pilar-ico { transform: translateY(-2px); }
.pilar-titulo {
  font-family: var(--f-title); font-weight: 700; font-size: 1.06rem;
  color: var(--white);
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.2;
}
.pilar-texto {
  margin-top: 14px; color: var(--muted);
  font-size: .98rem; line-height: 1.65; max-width: 44ch;
  text-wrap: pretty;
}

/* ============================================================
   GALERÍA — carrusel (izq) + 3 bloques estáticos (der)
   ============================================================ */
.galeria-layout { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  /* Más separación entre el carrusel y los 3 bloques de la derecha */
  .galeria-layout { grid-template-columns: 2fr 1fr; align-items: stretch; gap: 32px; }
}

/* La galería usa el ancho global del sitio (ya es amplio). */

/* ---- Carrusel grande (un poco más ancho y alto) ---- */
.gal-carousel {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--hair); background: #0B0B0F;
  aspect-ratio: 16 / 10; min-width: 0;
}
@media (max-width: 540px) { .gal-carousel { aspect-ratio: 4 / 3; } }
/* En escritorio manda la ALTURA, no la proporción: es lo único que deja
   cerrar la sección dentro de una pantalla. Los tres bloques laterales
   la siguen por la propia rejilla. */
@media (min-width: 900px) {
  /* El mínimo manda: apretando a 300 px las fotos quedaban demasiado
     chicas para leerse. Con 380 la sección sigue cabiendo de una pasada
     en una pantalla normal y las fotos se ven. */
  .gal-carousel { aspect-ratio: auto; height: clamp(380px, 52vh, 520px); }
}

.gal-track { display: flex; height: 100%; transition: transform .6s var(--ease); will-change: transform; touch-action: pan-y; cursor: grab; }
.gal-track.dragging { transition: none; cursor: grabbing; }
.gal-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.gal-slide .gal-item { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96) contrast(1.02); cursor: zoom-in; }
.gal-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 50px 24px 20px; color: #fff; font-family: var(--f-display);
  letter-spacing: .04em; font-size: .95rem;
  background: linear-gradient(transparent, rgba(6,7,10,.85));
}

.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(12,14,19,.5); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(5px); transition: background .25s, color .25s, transform .25s, border-color .25s;
}
.gal-arrow:hover { background: #2E86C1; color: #FFFFFF; border-color: transparent; }
.gal-arrow:active { transform: translateY(-50%) scale(.94); }
.gal-prev { left: 14px; }
.gal-next { right: 14px; }

.gal-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
.gal-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: 0; cursor: pointer; transition: width .3s, background .3s; padding: 0; }
.gal-dot.is-active { width: 26px; border-radius: 5px; background: #2E86C1; }

.gal-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: rgba(255,255,255,.14); }
.gal-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: #2E86C1; }
.gal-progress i.run { animation: galProg 6s linear forwards; }
@keyframes galProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 3 bloques estáticos (derecha) ---- */
.gal-side { display: grid; gap: 10px; grid-auto-rows: 1fr; min-width: 0; }
/* Sin height:100% para no crear bucle con el aspect-ratio del carrusel.
   align-items:stretch del layout hace que el lateral iguale la altura del carrusel. */
@media (min-width: 900px) { .gal-side { grid-template-rows: repeat(3, 1fr); gap: 10px; min-height: 0; } }
.gal-side-item {
  position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--hair);
  min-height: 120px; aspect-ratio: 16 / 10; background: #0B0B0F;
}
/* En escritorio los 3 bloques llenan exactamente la altura del carrusel
   (sin piso de altura que los desborde por debajo). */
@media (min-width: 900px) { .gal-side-item { aspect-ratio: auto; min-height: 0; } }
/* Media del lateral en absoluto: NO aporta altura intrínseca, así el alto del
   carrusel manda y el lateral se iguala (sin bucle ni desbordamiento). */
.gal-side-item .gal-item { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); cursor: zoom-in; }
.gal-side-item .gal-ph { position: absolute; inset: 0; }
.gal-side-item:hover .gal-item { transform: scale(1.06); }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 11px; font-size: .78rem; color: #fff; font-family: var(--f-display); letter-spacing: .03em;
  background: linear-gradient(transparent, rgba(6,7,10,.82));
  transform: translateY(8px); opacity: 0; transition: transform .4s, opacity .4s;
}
.gal-side-item:hover .gal-cap { transform: translateY(0); opacity: 1; }
.gal-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s; }
.gal-side-item:hover .gal-rim { box-shadow: inset 0 0 0 1px rgba(143,208,240,.6), inset 0 0 30px rgba(46,134,193,.12); }

/* ---- Placeholder [FOTO REAL] (carrusel y lateral) ---- */
.gal-ph {
  width: 100%; height: 100%; display: grid; place-items: center; align-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(20,28,48,.03) 0 12px, transparent 12px 24px),
    radial-gradient(120% 120% at 30% 10%, rgba(46,134,193,.16), #EDF0F4 72%);
}
.gal-ph-mark {
  font-family: var(--f-display); font-size: .74rem; letter-spacing: .22em; color: #1A365D;
  border: 1px dashed rgba(26,54,93,.5); padding: 8px 13px; border-radius: var(--r-sm);
}
.galeria-nota { margin-top: 22px; color: var(--muted); font-size: .9rem; text-align: center; }

/* ---- Galería sobre el azul de marca ------------------------------
   Única sección que rompe la alternancia de grises claros: el mismo
   #2E86C1 de la franja, para que el bloque de fotos se lea como una
   pieza aparte. Al cambiar el fondo hay que remapear la paleta
   completa; si no, los títulos siguen en tinta oscura sobre azul.   */
/* Se ancla por id a propósito: la alternancia de grises
   (.section:nth-of-type(even)) se declara 340 líneas más abajo y con la
   misma especificidad. Hoy no pisa esta regla solo porque la galería
   cae en posición impar; el día que se agregue una sección antes, la
   pisaría. Con el id no depende del orden. */
.section#galeria {
  background-color: #2E86C1;
  background-image: none;
  --text:  #FFFFFF;
  --muted: #FFFFFF;
  --white: #FFFFFF;                    /* títulos */
  --hair:      rgba(255,255,255,.34);
  --hair-soft: rgba(255,255,255,.2);
}
/* Onda al entrar en la sección: rompe el corte recto entre el gris del
   resto de la página y el azul de la galería. Va como SVG en línea —
   una imagen aparte para dos curvas sería una petición de más. */
.section#galeria {
  position: relative;
  /* La sección tiene que caber de una sola pasada: relleno justo para
     que la onda no pise el rótulo, y nada más. */
  padding-top: clamp(74px, 8vw, 118px);
  padding-bottom: clamp(38px, 4vw, 58px);
}
/* Cabecera compacta: aquí el protagonista son las fotos. */
.section#galeria .section-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.section#galeria .section-lead { margin-top: 14px; }
.section#galeria::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: clamp(70px, 9vw, 140px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v52c-190 46-360-26-540-10S620 118 430 106 130 44 0 70Z' fill='%23E9EBEE'/%3E%3Cpath d='M0 0h1440v22c-200 54-372-14-556 2S596 96 404 84 122 26 0 50Z' fill='%23BFE0EC' opacity='.55'/%3E%3C/svg%3E")
    no-repeat center top / 100% 100%;
  transform: none;
  z-index: 1; pointer-events: none;
}
/* La hairline de sección sobra: la onda ya hace de separación. */
.section#galeria::after { display: none; }
.section#galeria > .container { position: relative; z-index: 2; }
/* Blanco pleno, no atenuado: sobre este azul cada punto de contraste
   cuenta y el texto chico ya va justo. */
.section#galeria .eyebrow { color: #FFFFFF; }
.section#galeria .eyebrow-tick { background: #FFFFFF; }
/* El acento del título ya no puede ir en azul: quedaría invisible. */
.section#galeria .gold-text { color: #CFE9FB; }

/* Los acentos del carrusel eran de este mismo azul y se perdían
   contra el fondo. Pasan a blanco, que es lo único que destaca. */
.section#galeria .gal-arrow:hover { background: #FFFFFF; color: #1A365D; }
.section#galeria .gal-dot.is-active { background: #FFFFFF; }
.section#galeria .gal-progress i { background: #FFFFFF; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(2, 2, 4, .92); backdrop-filter: blur(6px);
  padding: 5vw;
  animation: lbIn .25s var(--ease);
}
@keyframes lbIn { from { opacity: 0; } }
.lightbox[hidden] { display: none; }
.lightbox-fig { max-width: 92vw; max-height: 86vh; text-align: center; }
.lightbox-fig img { max-width: 100%; max-height: 80vh; border-radius: var(--r-md); border: 1px solid var(--hair); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.lightbox-fig figcaption { margin-top: 14px; color: var(--text); font-family: var(--f-display); letter-spacing: .04em; }
.lightbox-close { position: absolute; top: 18px; right: 24px; font-size: 2.4rem; color: var(--white); line-height: 1; width: 48px; height: 48px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.6rem; color: var(--white); width: 56px; height: 56px; border-radius: 50%; transition: background .25s, color .25s; }
.lightbox-nav:hover { background: rgba(143,208,240,.16); color: var(--gold-3); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testi-card { padding: 34px 30px; display: flex; flex-direction: column; }
.testi-card > * { position: relative; z-index: 1; }
.testi-quote { color: var(--gold-2); opacity: .8; margin-bottom: 14px; }
.testi-cita { color: var(--text); font-size: 1.04rem; line-height: 1.6; font-style: italic; }
.testi-pie { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair-soft); }
.testi-foto {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--f-display); font-weight: 700; color: #FFFFFF; background: #2E86C1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.testi-datos { display: flex; flex-direction: column; line-height: 1.3; }
.testi-datos strong { color: var(--white); font-family: var(--f-title); letter-spacing: .02em; }
.testi-datos em { font-style: normal; color: var(--gold-flat); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }

/* Las tarjetas de aliados (.aliado, .aliados-row) se retiraron cuando
   las alianzas pasaron a la tira del banner. Su CSS vivía aquí y ya no
   lo usa ningún marcado: ver .tira-aliados, más arriba. */

/* ============================================================
   UBICACIÓN
   ============================================================ */
/* ---- Barra plegable ------------------------------------------------
   La sección entra cerrada: una sola línea con la dirección. Se abre al
   pulsar. Va con <details>, así que el navegador hace el trabajo: pliega
   sin JavaScript y el buscador igual ve lo de dentro.                  */
/* Franja de borde a borde, sin esquinas redondeadas ni márgenes: es una
   banda de la página, no una tarjeta flotando dentro de una sección.

   La paleta va explícita: al quitarle la clase `.section` para que
   llegara a los cantos, la franja dejó de heredar el remapeo del tema
   claro y `--white` volvió a valer blanco de verdad. El título salía
   blanco sobre fondo casi blanco y se borraba al pasar el cursor. */
.ubicacion {
  padding-block: 0;
  --text:      #46505F;
  --muted:     #6E7785;
  --white:     #14171F;
  --panel-1:   #FFFFFF;
  --hair:      rgba(26, 54, 93, .32);
  --hair-soft: rgba(20, 28, 48, .12);
  color: var(--text);
}
.ubi-plegable {
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  border-radius: 0;
  background: var(--panel-1);
}
.ubi-barra {
  display: block;
  padding-block: clamp(20px, 2.4vw, 30px);
  cursor: pointer; list-style: none;
  transition: background .25s var(--ease);
}
.ubi-barra-fila { display: flex; align-items: center; gap: 16px; }
.ubi-barra::-webkit-details-marker { display: none; }   /* triángulo del navegador */
.ubi-barra:hover { background: var(--sel-tinte); }
.ubi-barra:focus-visible { outline: 2px solid var(--sel-vivo); outline-offset: -2px; }

.ubi-barra-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(31, 95, 160, .1); color: #1F5FA0;
}
.ubi-barra-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.ubi-barra-txt strong {
  font-family: var(--f-title); font-weight: 700; font-size: 1.06rem;
  color: var(--white); letter-spacing: -.02em; line-height: 1.2;
}
.ubi-barra-txt em { font-style: normal; font-size: .88rem; color: var(--muted); }

.ubi-barra-accion {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: #1F5FA0;
}
.ubi-chevron { transition: transform .3s var(--ease); }
/* Un solo rótulo a la vez, según esté abierta o cerrada. */
.ubi-plegable[open] .ubi-abrir,
.ubi-plegable:not([open]) .ubi-cerrar { display: none; }
.ubi-plegable[open] .ubi-chevron { transform: rotate(180deg); }
.ubi-plegable[open] .ubi-barra { border-bottom: 1px solid var(--hair-soft); }

.ubi-plegable > .ubicacion-grid { padding-block: clamp(24px, 3vw, 40px); }

/* En móvil la barra se partía en tres renglones. Se recorta a lo
   esencial: ícono, título con la dirección debajo, y solo el chevron. */
@media (max-width: 560px) {
  .ubi-barra { padding-block: 16px; }
  .ubi-barra-fila { gap: 12px; }
  .ubi-barra-ico { width: 36px; height: 36px; }
  .ubi-barra-txt strong { font-size: .98rem; }
  .ubi-barra-txt em { font-size: .82rem; }
  .ubi-abrir, .ubi-cerrar { display: none !important; }
}

/* Las dos columnas arrancan arriba y miden lo mismo: la ficha y el
   mapa son un solo bloque, no dos piezas sueltas de distinto alto. */
.ubicacion-grid {
  display: grid; gap: clamp(22px, 2.6vw, 34px);
  grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 900px) { .ubicacion-grid { grid-template-columns: 0.92fr 1.28fr; } }

/* ---- Ficha de la sede ---- */
.ubicacion-ficha {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: rgba(255,255,255,.55);
  overflow: hidden;
}

/* Foto real de la fachada: sirve para reconocer el sitio al llegar. */
.ubicacion-foto { margin: 0; aspect-ratio: 16 / 8; overflow: hidden; }
.ubicacion-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.ubicacion-ficha:hover .ubicacion-foto img { transform: scale(1.03); }

.ubicacion-datos {
  margin: 0; padding: clamp(20px, 2.4vw, 26px);
  display: grid; gap: 17px; flex: 1;
}
.ubicacion-datos li { display: flex; gap: 14px; align-items: flex-start; }
.u-ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--gold-3); border: 1px solid var(--hair); background: rgba(46,134,193,.06);
}
.ubicacion-datos strong {
  display: block; color: var(--white);
  font-family: var(--f-display); letter-spacing: .04em;
  text-transform: uppercase; font-size: .74rem; margin-bottom: 2px;
}
.ubicacion-datos span,
.ubicacion-datos a { color: var(--text); font-size: .95rem; line-height: 1.5; }
.ubicacion-datos a { text-decoration: none; }
.ubicacion-datos a:hover { text-decoration: underline; }
/* Punto de referencia: en la Costa Oriental se llega por referencias. */
.u-ref { display: block; margin-top: 4px; font-style: normal; font-size: .86rem; color: var(--muted); }

.ubicacion-acciones {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px);
}
.ubicacion-acciones .btn { flex: 1 1 auto; justify-content: center; gap: 8px; }

/* ---- Mapa ---- */
.ubicacion-mapa {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--hair); min-height: 340px;
}
.ubicacion-mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4) contrast(1.05) brightness(.85); }
.mapa-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(143,208,240,.18), inset 0 0 60px rgba(0,0,0,.5); border-radius: inherit; }

/* En una sola columna el mapa no necesita tanto alto. */
@media (max-width: 899px) {
  .ubicacion-mapa { aspect-ratio: 16 / 11; min-height: 260px; }
}

/* ============================================================
   OFERTA — el desvío por público, arriba del todo.
   Dos pestañas grandes: se elige empresa o persona y debajo se
   abre el catálogo que corresponde. Sin JS quedan los dos.
   ============================================================ */
/* Anclas invisibles: #servicios y #programas siguen funcionando aunque
   su panel esté oculto, porque estas viven siempre en el documento. */
.ancla { position: absolute; width: 0; height: 0; scroll-margin-top: 96px; }

.of-tabs {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  margin-bottom: clamp(30px, 4vw, 46px);
}
@media (min-width: 700px) { .of-tabs { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------
   Pestañas de público. El estado elegido NO se rellena de azul marino:
   ese bloque oscuro pesaba más que el contenido que anunciaba.

   Estas cuatro variables gobiernan los TRES selectores del sitio
   —público, servicios y contacto— para que se comporten igual. Azul
   claro SÓLIDO, no un tinte translúcido: el tinte dejaba ver el fondo
   y se ensuciaba. Y bien separado del azul marino de la cabecera, para
   que «elegido» no se confunda con la barra de navegación.
   ------------------------------------------------------------------ */
:root {
  --sel:        #14314F;                  /* texto: 10.9 sobre el relleno */
  --sel-vivo:   #2472A8;                  /* ícono lleno: blanco a 5.2 */
  --sel-tinte:  #DCEBF7;                  /* relleno de la tarjeta */
  --sel-borde:  rgba(36, 114, 168, .45);
}

.of-tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; cursor: pointer;
  background: var(--panel-1);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
/* Sin barra lateral: el tinte, el borde y el ícono ya dicen cuál está
   elegida, y la franja de color partía la tarjeta en dos. */
.of-tab:hover { border-color: rgba(46,134,193,.45); transform: translateY(-2px); }
.of-tab:focus-visible { outline: 2px solid var(--sel); outline-offset: 3px; }
.of-tab.is-active {
  background: var(--sel-tinte);
  border-color: var(--sel-borde);
  transform: none;
}

.of-tab-ico {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: rgba(46,134,193,.1); color: #1F5FA0;
  transition: background .25s, color .25s;
}
.of-tab.is-active .of-tab-ico { background: var(--sel-vivo); color: #FFFFFF; }

.of-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.of-tab-txt strong {
  font-family: var(--f-title); font-weight: 700; font-size: 1.04rem;
  color: var(--white); letter-spacing: -.01em; line-height: 1.2;
}
.of-tab-txt em { font-style: normal; font-size: .84rem; color: var(--muted); line-height: 1.35; }
.of-tab.is-active .of-tab-txt strong { color: var(--sel); }

/* Con JS solo se ve el panel activo; sin JS, los dos. */
.js .of-panel[hidden] { display: none; }
.js .of-panel { display: none; }
.js .of-panel.is-active { display: block; animation: crEntra .3s var(--ease); }
.of-panel + .of-panel { margin-top: clamp(38px, 5vw, 60px); }
/* Los paneles ya viven dentro del .container de la sección: no repiten
   ni el relleno de sección ni su propia caja. */
.of-panel > .section-head { margin-bottom: clamp(28px, 3.4vw, 42px); }

/* ============================================================
   CONTACTO / FORMULARIO
   ============================================================ */
.contacto-grid { display: grid; gap: clamp(32px, 5vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .contacto-grid { grid-template-columns: 0.9fr 1.1fr; } }

/* Las dos listas de puntos comparten regla. La de currículos se quedó
   sin estilo al separar los formularios: sus <li> no eran flex, el
   círculo del tilde colapsaba a cero y solo quedaba la marca blanca
   flotando encima de la primera letra. */
.contacto-puntos,
.reg-puntos { margin: 26px 0; display: grid; gap: 12px; }
.contacto-puntos li,
.reg-puntos li { display: flex; align-items: center; gap: 12px; color: var(--text); }
/* `display: block` explícito: en línea, el ancho y el alto no aplican y
   vuelve a colapsar en cuanto alguien lo use fuera de un contenedor flex. */
.check {
  display: block; width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 50%; position: relative; background: #2E86C1;
}
.check::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.contacto-wa {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 14px;
  color: var(--gold-3); font-family: var(--f-display); font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 14px 20px; transition: border-color .3s, background .3s;
}
.contacto-wa:hover { border-color: rgba(143,208,240,.6); background: rgba(46,134,193,.08); }

.contacto-form-wrap { padding: clamp(26px, 4vw, 40px); }
.contacto-form-wrap > * { position: relative; z-index: 1; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-family: var(--f-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.req { color: var(--gold-3); }
.opt { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .8em; }

.field input, .field textarea, .select-wrap select {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm); color: var(--white);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); font-family: var(--f-body); font-size: 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: #717886; }
.field input:focus, .field textarea:focus, .select-wrap select:focus {
  outline: none; border-color: rgba(143,208,240,.65); background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(46,134,193,.14);
}
.field textarea { resize: vertical; min-height: 92px; }

.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gold-3); border-bottom: 2px solid var(--gold-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap select option { background: var(--panel-2); color: var(--white); }

.field-error { color: #e98c7a; font-size: .82rem; min-height: 0; display: none; }
.field-error.show { display: block; }
.field input.invalid, .field textarea.invalid, .select-wrap select.invalid { border-color: rgba(233,140,122,.6); }

/* Honeypot: invisible para humanos */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { margin-top: 6px; position: relative; }
.btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #FFFFFF; animation: spin .7s linear infinite; }
.form-submit.loading .btn-spinner { display: inline-block; }
.form-submit.loading .btn-label { opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-nota { font-size: .84rem; color: var(--muted); margin-top: 4px; }
/* Avisos de envío del formulario.
   Los colores anteriores —texto #bfeccc sobre un velo verde— venían de
   cuando esta sección era oscura. Al pasarla a fondo claro quedaron en
   1,05 de contraste: el mensaje estaba ahí, pero no se leía. Ahora son
   opacos y medidos: 8,05 el de éxito y 8,60 el de error, muy por encima
   del 4,5 que pide la norma. Es el aviso que confirma que una solicitud
   llegó; si no se lee, el visitante la manda otra vez. */
.form-status { font-size: .95rem; min-height: 0; }
.form-status.show { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-sm); font-weight: 500; }
.form-status.ok  { background: #E7F4EC; border: 1px solid #4E9E6E; color: #14532D; }
.form-status.err { background: #FBEAE7; border: 1px solid #B4544A; color: #7F1D1D; }
.form-flash { padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-weight: 500; }
.form-flash--ok  { background: #E7F4EC; border: 1px solid #4E9E6E; color: #14532D; }
.form-flash--err { background: #FBEAE7; border: 1px solid #B4544A; color: #7F1D1D; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   PIE DE PÁGINA — azul oscuro plano.
   Sin franja curva de color arriba: el corte es limpio.
   Contraste verificado contra #12294A (WCAG AA):
     #FFFFFF  15.1:1   ·  #C9D9EC  10.1:1
     #A9C0DC   7.8:1   ·  #8FD0F0   8.6:1
   ============================================================ */
.site-footer {
  background: #12294A;
  color: #C9D9EC;
  border-top: 0;
  margin-top: 0;
}

.footer-inner {
  display: grid; gap: clamp(34px, 4vw, 56px);
  grid-template-columns: 1fr;
  padding-block: clamp(46px, 6vw, 72px);
}
@media (min-width: 820px) { .footer-inner { grid-template-columns: 1.5fr 1fr 1.1fr; } }

/* ---- Marca ---- */
.footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.footer-logo img { width: 52px; height: 52px; object-fit: contain; }
.footer-logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.footer-logo-txt strong {
  font-family: var(--f-title); font-weight: 700; font-size: 1.24rem;
  color: #FFFFFF; letter-spacing: -.01em;
}
.footer-logo-txt em {
  font-style: normal; font-size: .72rem; color: #A9C0DC;
  letter-spacing: .16em; text-transform: uppercase; margin-top: 3px;
}

.footer-desc {
  color: #C9D9EC; margin-top: 18px; max-width: 40ch;
  font-size: .95rem; line-height: 1.7;
}

.footer-redes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.footer-redes a {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,217,236,.16);
  color: #C9D9EC; padding: 0;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.footer-redes a:hover {
  background: rgba(143,208,240,.18); border-color: #8FD0F0;
  color: #FFFFFF; transform: translateY(-2px);
}

/* ---- Columnas ---- */
.footer-col h3 {
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: .16em; font-size: .74rem; color: #FFFFFF; margin-bottom: 18px;
}
.footer-col a, .footer-col span {
  display: block; color: #C9D9EC; padding: 6px 0;
  transition: color .25s; font-size: .94rem;
}
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* La flecha va DENTRO del enlace. Necesita las dos clases: con solo
   `.footer-ext` pierde contra `.footer-col span { display: block }`, que
   tiene más especificidad, y se cae al renglón siguiente separada de la
   palabra a la que pertenece. */
.footer-col .footer-ext { display: inline; font-size: .78rem; opacity: .7; }
.footer-horario { color: #A9C0DC; font-size: .88rem; }

/* ---- Barra inferior ---- */
.footer-bottom {
  border-top: 1px solid rgba(201,217,236,.16);
  background: #0E2140;
}
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  justify-content: space-between; align-items: center;
  padding-block: 20px; font-size: .84rem; color: #A9C0DC;
}
.footer-legales { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-legales a { color: #A9C0DC; transition: color .25s; }
.footer-legales a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer-sep { color: rgba(169,192,220,.45); }

/* Entrada al panel: se distingue de los legales sin llamar la atención
   de quien no la busca. El candado la identifica de un vistazo. */
.footer-panel { display: inline-flex; align-items: center; gap: 6px; }
.footer-panel svg { opacity: .8; }
.footer-panel:hover svg { opacity: 1; }

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */
.legal { padding-block: clamp(50px, 7vw, 90px); }
.legal-caja { max-width: 76ch; }
.legal-cuerpo { margin-top: 26px; }
.legal-cuerpo p {
  color: var(--text); font-size: 1.03rem; line-height: 1.75;
  margin-bottom: 16px; text-wrap: pretty;
}
.legal-volver { margin-top: 30px; }
.legal-volver a { color: #1F5FA0; font-weight: 600; }
.legal-volver a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   PÁGINA DE ERROR (404 / 403)
   Misma silueta de balancín que cierra «Quiénes somos»: quien
   cae aquí tiene que reconocer al instante que sigue en el
   sitio de Nasser y no en una pantalla del servidor.
   ============================================================ */
.err { padding-block: clamp(46px, 6vw, 84px); position: relative; overflow: hidden; }
.err::after {
  content: "";
  position: absolute; right: -4%; bottom: -8%;
  width: min(52%, 700px); aspect-ratio: 1400 / 781;
  background: url("../img/silueta-balancin.png") no-repeat right bottom / contain;
  opacity: .06; pointer-events: none;
}
@media (max-width: 760px) { .err::after { display: none; } }

.err-caja { max-width: 72ch; position: relative; z-index: 1; }

/* El número grande es decoración, no titular: va marcado como
   aria-hidden y el encabezado real es el <h1> de abajo. Se deja
   con poco contraste para que no compita con él. */
.err-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(5.5rem, 17vw, 11rem); line-height: .82;
  letter-spacing: -.055em;
  color: var(--white); opacity: .09;
  margin: 6px 0 -6px -.06em;
}

.err-lead { margin-top: 12px; }

.err-rutas {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 10px;
}
@media (min-width: 620px) { .err-rutas { grid-template-columns: repeat(2, 1fr); } }

.err-rutas a {
  display: block; height: 100%;
  padding: 15px 17px;
  background: var(--panel-1);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-sm);
  transition: border-color .2s, transform .2s, background .2s;
}
.err-rutas a:hover {
  border-color: rgba(46,134,193,.55);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.err-rutas strong {
  display: block; color: var(--white);
  font-family: var(--f-display); font-size: 1.02rem; margin-bottom: 3px;
}
.err-rutas span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.err-pie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  /* Icono BLANCO sobre el verde oficial de WhatsApp (#25D366).
     El negro sobre verde no se lee y no es el color de la marca. */
  color: #FFFFFF; background: #25D366;
  box-shadow: 0 10px 26px -8px rgba(18, 138, 74, .65);
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.wa-float:hover { background: #1EBE5B; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(43,214,110,.5); animation: waPulse 2.6s ease-out infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(43,214,110,.45);} 70%,100% { box-shadow: 0 0 0 18px rgba(43,214,110,0);} }
.wa-float:hover { transform: scale(1.08) translateY(-2px); }

/* ============================================================
   TEMA CLARO — toda la página DESPUÉS del héroe
   El héroe (y el header) se mantienen oscuros/premium. De ahí
   hacia abajo el sitio pasa a claro, con los ACENTOS de palabras
   en ORO (versión más profunda para que sea legible sobre claro).
   Se logra remapeando las variables en .section / footer + overrides
   puntuales donde había colores oscuros fijos.
   ============================================================ */
.section {
  --text:  #46505F;                 /* cuerpo sobre claro */
  --muted: #6E7785;
  --white: #14171F;                 /* títulos -> tinta oscura */
  --panel-1: #FFFFFF;
  --panel-2: #F4F6F9;
  --panel-3: #ECEEF2;
  --hair:      rgba(26,54,93, .32);   /* hairline oro más profundo */
  --hair-soft: rgba(20, 28, 48, .12);
  color: var(--text);
}

/* Fondos claros con leve alternancia + glow oro tenue (no quedan planos) */
.section {
  background-color: #F1F4F8;
  background-image: radial-gradient(120% 80% at 100% 0%, rgba(46,134,193,.06), transparent 55%);
}
.section:nth-of-type(even) { background-color: #E8ECF2; }
.section::before { background: linear-gradient(90deg, transparent, rgba(26,54,93,.4) 50%, transparent); }

/* Acento de palabra: ORO legible sobre claro */
.section .gold-text { color: #1F5FA0; }
.site-footer .gold-text { color: #8FD0F0; }
/* El eyebrow es letra pequeña (0,74rem), en mayúsculas y con 0,32em de
   separación: de las cosas más difíciles de leer que hay en la página.
   El gris anterior (#7C8696) medía 3,10 sobre las secciones pares, muy
   por debajo del 4,5 que exige la norma. Este pasa en los tres fondos
   —impar 5,13 · par 4,77 · tarjeta blanca 5,66— y a simple vista es el
   mismo gris. */
.section .eyebrow { color: #5E6875; }

/* Tarjetas -> blancas, borde oro suave y sombra de elevación */
.prog-card, .testi-card, .contacto-form-wrap {
  background: #FFFFFF;
  box-shadow: none;                      /* una sola señal: el borde de abajo */
}
.prog-card::before, .testi-card::before, .contacto-form-wrap::before {
  background: rgba(26,54,93,.14);
  opacity: 1;
}
.prog-card:hover::before, .testi-card:hover::before { background: rgba(46,134,193,.45); }
.prog-card:hover { box-shadow: none; }

/* Ícono y número van SOBRE la foto: se mantienen en vidrio azul oscuro
   (no se remapean al tema claro o desaparecerían contra la imagen). */
.prog-btn { border-top-color: rgba(20,28,48,.1); }
.prog-btn:hover { color: #1A365D; }

/* Botón fantasma sobre claro */
.section .btn-ghost { color: var(--white); border-color: rgba(20,28,48,.2); background: rgba(255,255,255,.55); }
.section .btn-ghost:hover { border-color: var(--gold-flat); color: #1A365D; background: #fff; }

/* MÉTODO (claro, acento ORO) */
.metodo-ico {
  color: #1A365D; border-color: rgba(26,54,93,.32);
  background: linear-gradient(135deg, rgba(46,134,193,.16), rgba(255,255,255,.5));
}
.metodo-item:hover .metodo-ico { background: linear-gradient(135deg, rgba(46,134,193,.24), rgba(255,255,255,.5)); }
.metodo-line { background: linear-gradient(90deg, rgba(26,54,93,.4), transparent); }
.stats-row { background: rgba(20,28,48,.1); border-color: rgba(20,28,48,.1); }
.stat { background: #fff; }
.stat-num {
  color: #1F5FA0;
}

/* GALERÍA (placeholders claros) */
.gal-item { border-color: rgba(20,28,48,.12); }
.gal-placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(20,28,48,.03) 0 10px, transparent 10px 20px),
    radial-gradient(120% 120% at 30% 10%, rgba(46,134,193,.15), #EDF0F4 72%);
}
.gal-ph-mark { color: #1A365D; border-color: rgba(26,54,93,.45); }
.gal-item:hover .gal-rim { box-shadow: inset 0 0 0 1px rgba(26,54,93,.55), inset 0 0 30px rgba(46,134,193,.1); }

/* TESTIMONIOS */
.testi-cita { color: var(--text); }
.testi-pie { border-top-color: rgba(20,28,48,.1); }
.testi-quote { color: var(--gold-2); opacity: .9; }

/* UBICACIÓN */
.u-ico { color: #1A365D; border-color: rgba(26,54,93,.32); background: rgba(46,134,193,.08); }
.ubicacion-mapa { border-color: rgba(26,54,93,.3); }
.ubicacion-mapa iframe { filter: grayscale(.2) contrast(1.02) brightness(1); }
.mapa-frame { box-shadow: inset 0 0 0 1px rgba(26,54,93,.25), inset 0 0 50px rgba(20,28,48,.12); }

/* CONTACTO (formulario claro) */
.contacto-puntos li { color: var(--text); }
.contacto-wa { color: #1A365D; border-color: rgba(26,54,93,.35); }
.contacto-wa:hover { border-color: var(--gold-flat); background: rgba(46,134,193,.1); }
.field label { color: var(--white); }
.field input, .field textarea, .select-wrap select {
  color: var(--white); background: #FFFFFF; border: 1px solid rgba(20,28,48,.18);
}
.field input::placeholder, .field textarea::placeholder { color: #9AA2B0; }
.field input:focus, .field textarea:focus, .select-wrap select:focus {
  border-color: var(--gold-flat); background: #fff; box-shadow: 0 0 0 3px rgba(46,134,193,.16);
}
.select-wrap select option { background: #fff; color: var(--white); }
.req { color: #2C5282; }
.opt { color: var(--muted); }
.form-nota { color: var(--muted); }

/* El pie NO se aclara con el resto del tema: es azul oscuro y punto.
   Aquí vivía un bloque «FOOTER claro» que lo repintaba de gris y, por
   venir después, le ganaba a la definición azul de arriba. Se eliminó:
   el pie se define en un solo sitio (ver «PIE DE PÁGINA»). */

/* ============================================================
   SECCIONES CON ACENTO AZUL (intercaladas con las doradas)
   Método · Testimonios · Ubicación. Un solo metal por sección:
   aquí el azul reemplaza al oro (incluidos botones), sin mezclar.
   ============================================================ */

/* Palabra de acento -> azul metálico */
.metodo .gold-text, .testimonios .gold-text, .ubicacion .gold-text {
  color: #1F5FA0;
}
/* Hairline superior + tick del eyebrow -> azul */
.metodo.section::before, .testimonios.section::before, .ubicacion.section::before {
  background: linear-gradient(90deg, transparent, rgba(23,120,179,.45) 50%, transparent);
}
.metodo .eyebrow-tick, .testimonios .eyebrow-tick, .ubicacion .eyebrow-tick { background: var(--blue-ink); }

/* ---- MÉTODO (azul) ---- */
.metodo-ico {
  color: #0B3D76; border-color: rgba(23,120,179,.34);
  background: linear-gradient(135deg, rgba(23,120,179,.14), rgba(255,255,255,.5));
}
.metodo-item:hover .metodo-ico { background: linear-gradient(135deg, rgba(23,120,179,.24), rgba(255,255,255,.5)); }
.metodo-line { background: linear-gradient(90deg, rgba(23,120,179,.42), transparent); }
.metodo .stat-num {
  color: #1F5FA0;
}
.metodo .btn-ghost:hover { border-color: var(--blue-2); color: #0B3D76; background: #fff; }

/* ---- TESTIMONIOS (azul) ---- */
.testimonios .testi-card::before {
  background: linear-gradient(160deg, rgba(23,120,179,.5), rgba(11,61,118,.12) 60%, rgba(20,28,48,.05));
}
.testimonios .testi-quote { color: var(--blue-2); }
.testimonios .rim { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(23,120,179,.14), transparent 62%); }
.testimonios .testi-foto { background: linear-gradient(135deg, #0B3D76, #1778B3); color: #eaf3fb; }
.testimonios .testi-datos em { color: var(--blue-2); }

/* ---- UBICACIÓN (azul) ---- */
.ubicacion .u-ico { color: #0B3D76; border-color: rgba(23,120,179,.34); background: rgba(23,120,179,.08); }
.ubicacion-mapa { border-color: rgba(23,120,179,.34); }
.ubicacion-ficha { border-color: rgba(23,120,179,.28); background: rgba(255,255,255,.72); }
.ubicacion-datos strong { color: #0B3D76; }
.ubicacion .btn-ghost { border-color: rgba(23,120,179,.4); color: #0B3D76; }
.ubicacion .btn-ghost:hover { border-color: var(--blue-2); background: #fff; }
.ubicacion .mapa-frame { box-shadow: inset 0 0 0 1px rgba(23,120,179,.3), inset 0 0 50px rgba(20,28,48,.12); }
/* El CTA de esta sección pasa a azul (no mezclar metales) */
.ubicacion .btn-gold {
  color: #fff; background: linear-gradient(135deg, #0B3D76, #1778B3 60%, #4f9bcb);
  box-shadow: 0 6px 22px -8px rgba(23,120,179,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.ubicacion .btn-gold:hover { box-shadow: 0 10px 30px -8px rgba(23,120,179,.75), inset 0 1px 0 rgba(255,255,255,.4); }

/* ============================================================
   REVEAL (entrada al scroll)
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Secuencia de entrada del hero (al cargar) */
.hero [data-reveal] { transition-duration: 1s; }

/* ============================================================
   RESPONSIVE — header / nav
   ============================================================ */
@media (max-width: 880px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: flex; justify-self: end; margin-left: 0; }
  .header-inner { grid-template-columns: auto 1fr; gap: 12px; }
}
@media (min-width: 881px) { .nav-mobile { display: none !important; } }

@media (max-width: 600px) {
  .hero-marks { gap: 8px 18px; }
  .wa-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-video { display: none; }
  .section::before, .metodo-line, .eyebrow-tick { transform: scaleX(1) !important; }
  #ng-nodes { display: none; }
}

/* ============================================================
   VIDEOS EN LA GALERÍA
   Se comportan igual que una foto: mismo encuadre, mismo recorte
   y misma ampliación. Lo único que se agrega es la marca que los
   distingue antes de pulsar.
   ============================================================ */
.gal-item--video { cursor: zoom-in; }
.gal-slide .gal-item--video,
.gal-side-item .gal-item--video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #0B0B0F;
}
.gal-side-item .gal-item--video { position: absolute; inset: 0; }

.gal-marca-video {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(11, 16, 26, .68);
  border: 1px solid rgba(255,255,255,.22);
  padding: 4px 9px; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Ampliado: el video ocupa el mismo hueco que la imagen. */
#lightbox-video {
  max-width: 100%; max-height: 82vh;
  display: block; margin-inline: auto;
  border-radius: var(--r-md); background: #000;
}
#lightbox-img[hidden], #lightbox-video[hidden] { display: none; }