:root {
  --navy: #13304f;
  --navy-deep: #0a1a2e;
  --blue: #2c598e;
  --blue-bright: #5b8fc7;
  --sky: #7cacdb;
  --paper: #fbfcfe;
  --paper-2: #f1f5fa;
  --paper-3: #e8eff7;
  --ink: #0e1f30;
  --muted: #516477;
  --line: #e4ecf4;
  --term: #0b1a2c;
  --term-line: #1a3450;
  --green: #4fb286;
  --amber: #e2b04a;
  --rose: #e26d5c;
  /* Sombras teñidas de navy, ultra-difusas y de baja opacidad */
  --shadow-sm:
    0 1px 2px rgba(19, 48, 79, 0.04), 0 2px 8px -3px rgba(19, 48, 79, 0.06);
  --shadow-md:
    0 2px 6px rgba(19, 48, 79, 0.04), 0 12px 32px -12px rgba(19, 48, 79, 0.1);
  --shadow-lg:
    0 6px 16px rgba(19, 48, 79, 0.05), 0 28px 60px -22px rgba(19, 48, 79, 0.18);
  /* Radios crisp: contenedores nunca pasan de ~16-20px */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --glass: saturate(180%) blur(20px);
  /* Curva con masa y física de resorte: nada de ease/linear genéricos */
  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* El sistema de tamaños está pensado en px "grandes"; en escritorio la
   página respira mejor al 90% (equivale al zoom 90% del navegador).
   En móvil se mantiene al 100% para no reducir la legibilidad. */
@media (min-width: 941px) {
  html {
    zoom: 0.9;
  }
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

/* Foco visible para navegación con teclado (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
/* El ratón no muestra el contorno; solo el teclado */
:focus:not(:focus-visible) {
  outline: none;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
/* Enlace "saltar al contenido" para navegación con teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  left: 0;
}
.mono {
  font-family: "JetBrains Mono", monospace;
}
h1,
h2,
h3 {
  font-family: "Sora", sans-serif;
  line-height: 1.07;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Grano sutil sobre toda la página: rompe la planicie digital sin
   ensuciar. Fijo, sin eventos y casi imperceptible. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sensación física al presionar cualquier control principal */
.btn-primary:active,
.btn-ghost:active,
.nav-cta:active,
.summit-cta:active,
.contact-action:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.08s;
}

/* chevron bg pattern */
.chev-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}

/* ===== NAV ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}
/* El contenido del nav se alinea al mismo contenedor que el resto de la página */
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links-wrap {
  margin-left: auto;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  font-family: "Sora", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}
.lang-toggle .lang-opt {
  transition: color 0.2s;
}
.lang-toggle .lang-opt.active {
  color: var(--sky);
}
.lang-toggle .lang-sep {
  opacity: 0.5;
}
nav.scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(19, 48, 79, 0.85);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 12px 32px -16px rgba(10, 26, 46, 0.5);
}
nav .brand {
  display: flex;
  align-items: center;
  height: 64px;
}
nav .brand img {
  height: 64px;
  width: auto;
}
nav .links {
  display: flex;
  align-items: center;
  gap: 32px;
}
nav .links a {
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0.85;
  transition: 0.2s;
  position: relative;
}
nav .links a:hover {
  opacity: 1;
}
/* Subrayado animado + indicador de sección activa (scrollspy) */
nav .links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--sky);
  transition: width 0.25s;
}
nav .links a:not(.nav-cta):hover::after,
nav .links a.active::after {
  width: 100%;
}
nav .links a.active {
  opacity: 1;
}
.nav-cta {
  background: var(--blue-bright) !important;
  color: #fff !important;
  padding: 10px 19px;
  border-radius: 10px;
  font-weight: 600;
  opacity: 1 !important;
  font-size: 14px;
  transition: 0.2s !important;
}
.nav-cta:hover {
  background: var(--blue) !important;
  transform: translateY(-1px);
}
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.burger span {
  width: 23px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: 0.4s var(--ease-fluid);
}
/* Morph fluido de hamburguesa a X */
.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== HERO (oscuro) ===== */
.hero {
  padding: 140px 0 0;
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px 420px at 78% 8%,
    rgba(91, 143, 199, 0.16),
    transparent 62%
  );
  pointer-events: none;
}
.hero .chev-bg {
  opacity: 0.8;
}
.hero .chev-bg svg {
  position: absolute;
  top: -40px;
  right: -120px;
  width: 780px;
  height: 780px;
}
/* Cuadrícula interactiva: se dibuja y anima por completo en main.js */
.hero-canvas-grid {
  position: absolute;
  inset: 0;
  /* El canvas es un elemento reemplazado: inset:0 solo no lo estira y
     usa su tamaño intrínseco (los atributos width/height que fija
     main.js). Con el zoom:0.9 de escritorio eso deja hueco a la
     derecha/abajo, así que se fuerza el 100% explícito. */
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
}
.hero h1 {
  /* Máximo 3 líneas: tamaño contenido y columna ancha para que el
     titular fluya horizontal en vez de apilarse. */
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: -0.038em;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--sky), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 18.5px;
  color: #bccfe2;
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.6;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 13px 26px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 600;
  font-family: "Sora", sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px -8px rgba(19, 48, 79, 0.5);
  transition: 0.45s var(--ease-fluid);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(19, 48, 79, 0.6);
  background: var(--blue);
}
/* Sobre el hero oscuro, el botón primario se invierte a blanco */
.hero .btn-primary {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 24px -8px rgba(2, 10, 20, 0.6);
}
.hero .btn-primary:hover {
  background: var(--sky);
  color: var(--navy);
}
.hero .btn-ghost {
  color: #fff;
}
.btn-ghost {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  font-family: "Sora", sans-serif;
  padding: 14px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.82;
  transition: 0.2s;
}
.btn-ghost:hover {
  opacity: 1;
}
.hero-trust {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13.5px;
  color: #a9bdd2;
}

/* ===== TERMINAL DEL HERO (motivo >>_ del isotipo) =====
   Double-bezel: carcasa exterior con hairline + núcleo con su propio
   radio concéntrico, como una placa de vidrio en una bandeja. */
.hero-terminal {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 172, 219, 0.18);
  border-radius: calc(var(--r-md) + 6px);
  padding: 6px;
  box-shadow:
    0 50px 100px -30px rgba(3, 10, 20, 0.6),
    0 18px 50px -25px rgba(3, 10, 20, 0.45);
}
.terminal-core {
  background: rgba(8, 18, 32, 0.85);
  border: 1px solid rgba(124, 172, 219, 0.16);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(124, 172, 219, 0.15);
}
.terminal-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.terminal-bar .dot:nth-child(1) {
  background: #ff5f57;
}
.terminal-bar .dot:nth-child(2) {
  background: #febc2e;
}
.terminal-bar .dot:nth-child(3) {
  background: #28c840;
}
.terminal-title {
  margin-left: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-family: "JetBrains Mono", monospace;
}
.terminal-body {
  margin: 0;
  padding: 22px 22px 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.85;
  color: #cfe0f2;
  min-height: 250px;
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal-body .tok-prompt {
  color: var(--sky);
}
.terminal-body .tok-cmd {
  color: #fff;
}
.terminal-body .tok-ok {
  color: var(--green);
}
.terminal-body .tok-key {
  color: var(--blue-bright);
}
.caret {
  display: inline-block;
  color: var(--sky);
  font-weight: 700;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes navItemIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== LOGOS / TRUST STRIP ===== */
.stripe {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.stripe .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 140px;
}
.stat b {
  font-family: "Sora";
  font-size: 25px;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.stat span {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.stat b .gt {
  color: var(--blue-bright);
  font-size: 18px;
}
.sep {
  width: 1px;
  height: 40px;
  background: var(--line);
}

/* ===== SECTION ===== */
section.block {
  padding: 128px 0;
  position: relative;
}
/* Compensa el nav fijo al saltar a una ancla (#servicios, etc.): sin
   esto la sección queda tapada por el nav al llegar */
section[id] {
  scroll-margin-top: 110px;
}
.sec-head {
  max-width: 820px;
  margin-bottom: 72px;
}
.sec-head p {
  max-width: 640px;
}
.sec-head.center p {
  margin-inline: auto;
}
.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sec-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--blue);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sec-eyebrow .gt {
  color: var(--sky);
  font-weight: 700;
}
.sec-head h2 {
  font-size: clamp(29px, 3.8vw, 44px);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}
.sec-head p {
  font-size: 17.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.6;
}

/* ===== SOBRE NOSOTROS ===== */
.about {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.about .chev-bg svg {
  position: absolute;
  left: -160px;
  bottom: -200px;
  width: 760px;
  height: 760px;
  opacity: 0.5;
}
.about .wrap {
  position: relative;
  z-index: 2;
}
/* "Galleta de la fortuna": los dos chevrons del isotipo arrancan
   juntos en el centro de la sección y se abren hacia los lados; el
   contenido se revela mientras se separan. .cracked lo agrega un
   observer propio en main.js (ver "Reveal on scroll"). */
.about-crack {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.crack-chev {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 227.5px;
  transition:
    transform 1.32s var(--ease-fluid),
    opacity 1.04s var(--ease-fluid) 0.23s;
}
.crack-chev-1 {
  transform: translate(calc(-50% - 52px), -50%);
}
.crack-chev-2 {
  transform: translate(calc(-50% + 52px), -50%);
  opacity: 0.7;
}
.about.cracked .crack-chev-1 {
  transform: translate(-900px, -50%);
  opacity: 0;
}
.about.cracked .crack-chev-2 {
  transform: translate(900px, -50%);
  opacity: 0;
}
.about-grid {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.98s var(--ease-fluid) 0.58s,
    transform 0.98s var(--ease-fluid) 0.58s;
}
.about.cracked .about-grid {
  opacity: 1;
  transform: none;
}
.about h2 {
  font-size: clamp(30px, 4vw, 46px);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.1;
}
.about h2 em {
  font-style: normal;
  color: var(--blue-bright);
}
/* Sin caja de equipo ni nombres: título a la izquierda, y a la
   derecha un único panel con el texto (intacto, sin repartir en
   tarjetas ni destacar ningún párrafo sobre los demás). */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.about-block {
  padding: 50px 54px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.about-block p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.about-block p:last-child {
  margin-bottom: 0;
}
.about-block p strong {
  color: var(--navy);
  font-weight: 600;
}

/* ===== SERVICIOS ===== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc {
  background: #fff;
  border: 1px solid rgba(228, 236, 244, 0.9);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  position: relative;
}
/* Sombra azul y suave al pasar el mouse, en vez del levantado + barra
   creciente de antes. Va en un ::after con opacity (no animando
   box-shadow directo): box-shadow no es una propiedad que el
   compositor pueda animar, exige repintar en cada frame, y en la
   práctica se ve saltar de golpe en vez de transicionar. Con opacity
   sobre una sombra ya calculada, la transición sí es fluida. */
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 45px -14px rgba(124, 172, 219, 0.45);
  opacity: 0;
  transition: opacity 0.5s var(--ease-fluid);
  pointer-events: none;
  z-index: -1;
}
.svc:hover::after {
  opacity: 1;
}
.svc .ic {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--line);
}
.svc .ic svg {
  width: 24px;
  height: 24px;
}
.svc h3 {
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.svc p {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.svc .ex {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.svc .ex span {
  background: var(--paper-2);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ===== VALORES ===== */
.values {
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.values::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    620px 380px at 82% 12%,
    rgba(91, 143, 199, 0.14),
    transparent 62%
  );
  pointer-events: none;
}
.values .wrap {
  position: relative;
  z-index: 2;
}
.values .sec-eyebrow {
  color: var(--sky);
}
.values .sec-head h2 {
  color: #fff;
}
.values .sec-head p {
  color: #a9bdd2;
}
.val-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.val {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  position: relative;
  transition: 0.45s var(--ease-fluid);
}
.val:hover {
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-3px);
  border-color: rgba(124, 172, 219, 0.4);
}
.val .vnum {
  font-family: "JetBrains Mono";
  font-size: 12px;
  color: var(--sky);
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
}
.val .vnum .gt {
  color: var(--blue-bright);
}
.val h3 {
  font-size: 21px;
  color: #fff;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.val p {
  font-size: 14.5px;
  color: #a9bdd2;
  line-height: 1.6;
}
.val .vico {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 32px;
  height: 32px;
  color: rgba(124, 172, 219, 0.25);
}
.val:hover .vico {
  color: var(--sky);
  transition: color 0.3s;
}

/* ===== PROCESO (pasos estilo P1) =====
   En móvil/tablet los pasos son una tarjeta apilada normal (grid). En
   escritorio ancho, .timeline los coloca en un camino ascendente no
   lineal (motivo "cumbre"), conectado por una línea punteada que se
   dibuja de izquierda a derecha al entrar en pantalla (ver .timeline-line
   más abajo y el observer de ".reveal" en main.js). */
.timeline {
  position: relative;
}
.timeline-line {
  display: none;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
}
.step {
  position: relative;
  padding: 30px 24px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: 0.5s var(--ease-fluid);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky);
}
.step-num {
  display: block;
  font-family: "Sora";
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, var(--blue), var(--blue-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 17.5px;
  color: var(--navy);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step p {
  font-size: 14px;
  color: var(--muted);
}
/* Camino ascendente: solo en escritorio ancho, donde hay espacio para
   que los pasos se desplacen fuera de una fila recta */
@media (min-width: 1100px) {
  .timeline {
    height: 420px;
    margin-top: 12px;
  }
  .timeline-line {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    clip-path: inset(0 100% 0 0);
    /* Lineal a propósito: --ease-fluid remata tan rápido que el trazo
       de la línea (pensado para VERSE dibujar de izquierda a derecha)
       quedaría casi terminado a los 300ms de una animación de 1.4s */
    transition: clip-path 1.1s linear 0.1s;
  }
  .timeline.in .timeline-line {
    clip-path: inset(0 0% 0 0);
  }
  .timeline-line svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .timeline-line path {
    fill: none;
    stroke: url(#timelineGrad);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 0.5 17;
  }
  .tl-grad-a {
    stop-color: var(--blue);
  }
  .tl-grad-b {
    stop-color: var(--sky);
  }
  .steps {
    display: block;
    position: relative;
    height: 100%;
  }
  .step {
    position: absolute;
    width: 210px;
  }
  /* El nodo queda en el borde superior de la tarjeta (marcado con un
     punto, ::before) y la tarjeta cuelga hacia abajo desde ahí. Así la
     línea, que conecta los nodos, se queda arriba y no queda tapada por
     el cuerpo de las tarjetas vecinas. */
  .step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--blue-bright);
    border: 3px solid var(--paper);
    box-shadow: 0 2px 6px rgba(19, 48, 79, 0.25);
    transform: translate(-50%, -50%);
  }
  /* Especificidad extra: .step también lleva la clase .reveal, y
     .reveal.in (definida más abajo) fija su propio `transform` para el
     fade — sin este refuerzo, esa regla ganaría por orden en la hoja y
     el paso perdería el translate(-50%) que lo centra en su nodo */
  .steps .step.reveal {
    transform: translate(-50%, 0);
  }
  .steps .step.reveal:hover {
    transform: translate(-50%, -6px);
  }
  /* Posiciones no lineales de cada paso: suben y bajan como un
     recorrido de ascenso, no una fila ni una onda simétrica */
  .steps .step:nth-child(1) {
    left: 11%;
    top: 42%;
  }
  .steps .step:nth-child(2) {
    left: 35%;
    top: 10%;
  }
  .steps .step:nth-child(3) {
    left: 63%;
    top: 28%;
  }
  .steps .step:nth-child(4) {
    left: 88%;
    top: 4%;
  }
}

/* ===== FOOTER ===== */
footer {
  background: var(--navy-deep);
  color: #9fb2c8;
  padding: 60px 0 30px;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
footer .foot-brand img {
  height: 62px;
  width: auto;
  margin-bottom: 16px;
}
.foot-brand p {
  font-size: 14px;
  max-width: 290px;
  color: #7e92a8;
}
.foot-col h4 {
  color: #cdd9e6;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  font-family: "Sora";
  font-weight: 600;
}
.foot-col a {
  display: block;
  color: #9fb2c8;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  transition: 0.2s;
}
.foot-col a:hover {
  color: #fff;
  transform: translateX(2px);
}
.foot-col span {
  display: block;
  color: #9fb2c8;
  font-size: 14px;
  margin-bottom: 10px;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: #6a7d92;
  flex-wrap: wrap;
  gap: 12px;
}
.foot-bottom .mono {
  color: var(--sky);
}

/* ===== CUMBRE / MONTAÑAS ===== */
.summit {
  background: linear-gradient(
    180deg,
    var(--navy-deep) 0%,
    var(--navy) 55%,
    #0c2138 100%
  );
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;
}
.summit-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.summit .sec-eyebrow {
  color: var(--sky);
}
.summit h2 {
  font-size: clamp(30px, 4vw, 46px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 22px;
  line-height: 1.1;
}
.summit h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--sky), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.summit-copy p {
  color: #bccfe2;
  font-size: 17px;
  margin-bottom: 18px;
  max-width: 480px;
}
/* Scrubbing reveal: las palabras del párrafo pasan de apagadas a
   encendidas conforme avanza el scroll (progreso, no un solo disparo) */
[data-scrub] .sw {
  opacity: 0.16;
  transition: opacity 0.3s linear;
}
[data-scrub] .sw.on {
  opacity: 1;
}
.summit-copy p strong {
  color: #fff;
  font-weight: 600;
}
.summit-cta {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-family: "Sora";
  font-weight: 600;
  font-size: 15.5px;
  padding: 11px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: 0.45s var(--ease-fluid);
}
.summit-cta:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  transform: translateY(-2px);
}
/* stage */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.92;
  max-width: 540px;
  margin: 0 auto;
}
.stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Mountains start as the logo's bright chevrons (visible on the dark bg),
   then morph their `d` via JS and settle into mountain tones. */
.m-front,
.m-back {
  transition: stroke 1.54s ease 0.39s;
}
.m-front {
  stroke: var(--blue-bright);
}
.m-back {
  stroke: var(--sky);
}
.summit.go .m-front {
  stroke: #4d80ba;
}
.summit.go .m-back {
  stroke: #6f9fcf;
}
.snow,
.flag,
.route-g,
.glow {
  opacity: 0;
}
.summit.go .snow {
  opacity: 1;
  transition: opacity 0.2s 1.3s;
}
.summit.go .flag {
  opacity: 1;
  transition: opacity 0.2s 1.5s;
}
.summit.go .route-g {
  opacity: 1;
  transition: opacity 0.2s 1.1s;
}
.summit.go .glow {
  opacity: 0.85;
  transition: opacity 0.91s 1.1s;
}
.route {
  stroke-dasharray: 8 9;
  stroke-dashoffset: 560;
}
.summit.go .route {
  transition: stroke-dashoffset 0.2s ease 1.1s;
  stroke-dashoffset: 0;
}

/* ===== */
/* ===== GARANTÍAS (banda oscura de confianza) ===== */
.promise {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  position: relative;
  overflow: hidden;
}
.promise::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    620px 320px at 18% 0%,
    rgba(91, 143, 199, 0.14),
    transparent 62%
  );
  pointer-events: none;
}
.promise .wrap {
  padding: 72px 28px;
  position: relative;
  z-index: 2;
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.promise-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: 0.45s var(--ease-fluid);
}
.promise-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(124, 172, 219, 0.45);
}
.promise-item .pi-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(124, 172, 219, 0.14);
  display: grid;
  place-items: center;
  color: var(--sky);
}
.promise-item .pi-ic svg {
  width: 22px;
  height: 22px;
}
.promise-item h4 {
  font-family: "Sora";
  font-size: 15.5px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.promise-item p {
  font-size: 13.5px;
  color: #a9bdd2;
  line-height: 1.55;
}

/* ===== FAQ ===== */
.faq {
  background: var(--paper);
}
/* FAQ editorial: sin cajas, los ítems se separan solo con una línea */
.faq-grid {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Sora";
  font-weight: 600;
  font-size: 16.5px;
  color: var(--navy);
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq-item summary:hover {
  color: var(--blue);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .qmark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}
.faq-item summary .qmark::before {
  content: "+";
  font-size: 22px;
  color: var(--blue);
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] summary .qmark {
  transform: rotate(45deg);
}
/* Contenedor que se anima en altura (la transición la maneja el JS) */
.faq-item .faq-a {
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item .faq-a-inner {
  padding: 0 4px 26px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 680px;
}

/* ===== CONTACTO (sección completa, estilo P1) ===== */
.contact-sec {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  position: relative;
  overflow: hidden;
}
.contact-sec .cc-chev {
  position: absolute;
  right: -70px;
  bottom: -140px;
  width: 560px;
  height: 560px;
  opacity: 0.07;
  pointer-events: none;
}
.contact-sec .wrap {
  position: relative;
  z-index: 2;
}
.contact-sec .sec-eyebrow {
  color: var(--sky);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.contact-intro h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  color: #fff;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.contact-intro p {
  color: #bccfe2;
  font-size: 16.5px;
  margin-bottom: 24px;
  line-height: 1.6;
}
/* Opciones rápidas de contacto (WhatsApp / llamada) */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}
.contact-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: 0.45s var(--ease-fluid);
}
.contact-action:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-md);
}
.contact-action.wa:hover {
  border-color: rgba(79, 178, 134, 0.55);
}
.contact-action.cal:hover {
  border-color: rgba(124, 172, 219, 0.55);
}
.contact-action .ca-ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.contact-action.wa .ca-ic {
  background: rgba(79, 178, 134, 0.16);
  color: var(--green);
}
.contact-action.cal .ca-ic {
  background: rgba(124, 172, 219, 0.16);
  color: var(--sky);
}
.contact-action .ca-ic svg {
  width: 22px;
  height: 22px;
}
.contact-action .ca-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.contact-action .ca-txt strong {
  font-family: "Sora";
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.contact-action .ca-txt small {
  font-size: 12.5px;
  color: #a9bdd2;
}
.contact-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-perks li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #dbe7f4;
  font-size: 14.5px;
}
.contact-perks li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--green);
}
/* Double-bezel sutil: anillo exterior separado del cuerpo del formulario */
.contact-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 0 0 5px rgba(255, 255, 255, 0.03),
    0 0 0 6px rgba(255, 255, 255, 0.06);
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 13px;
  color: #a9bdd2;
  margin-bottom: 7px;
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  padding: 13px 15px;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7e94ab;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(255, 255, 255, 0.09);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237CACDB' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.field select option {
  background: var(--navy-deep);
  color: #fff;
}
.field textarea {
  resize: vertical;
  min-height: 88px;
}
.contact-form .btn-primary {
  background: #fff;
  color: var(--navy);
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.contact-form .btn-primary:hover {
  background: var(--sky);
  color: var(--navy);
}
.form-note {
  font-size: 12px;
  color: #8fb3d6;
  text-align: center;
  margin-top: 14px;
  font-family: "JetBrains Mono";
}
/* Validación inline del formulario */
.field .invalid {
  border-color: var(--rose);
}
.form-error {
  color: #ffab9e;
  font-size: 13.5px;
  text-align: center;
  margin-top: 14px;
}
.form-error[hidden] {
  display: none;
}
/* Botón de envío mientras la petición está en curso */
.btn-primary.busy {
  opacity: 0.65;
  pointer-events: none;
}

/* =====================================================================
   AGENDADOR DE LLAMADAS (modal <dialog> con calendario y horarios)
   Misma familia visual que la sección de contacto: panel navy, bordes
   translúcidos y acentos sky/blanco.
   ===================================================================== */
/* El disparador es un <button>; se le quita el estilo nativo */
button.contact-action {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.sched {
  /* El reset global (* { margin: 0 }) borra el margin:auto nativo del
     <dialog>; se restaura aquí para que quede centrado */
  margin: auto;
  width: min(720px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  color: #fff;
  padding: 0;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 0 0 5px rgba(255, 255, 255, 0.03),
    0 40px 90px -30px rgba(4, 12, 22, 0.8);
  overflow: visible;
}
.sched::backdrop {
  background: rgba(7, 16, 28, 0.65);
  backdrop-filter: blur(6px);
}
.sched[open] {
  animation: schedIn 0.5s var(--ease-fluid);
}
.sched[open]::backdrop {
  animation: schedFade 0.4s ease-out;
}
@keyframes schedIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes schedFade {
  from {
    opacity: 0;
  }
}
/* Sin scroll de fondo mientras el modal está abierto */
body:has(.sched[open]),
body:has(.thanks[open]) {
  overflow: hidden;
}
.sched-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sched-head h3 {
  font-family: "Sora";
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.sched-head p {
  color: #a9bdd2;
  font-size: 14px;
  line-height: 1.5;
}
.sched-close {
  flex-shrink: 0;
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #a9bdd2;
  cursor: pointer;
  transition: 0.3s var(--ease-fluid);
}
.sched-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sched-close svg {
  width: 16px;
  height: 16px;
}
.sched-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  padding: 24px 28px 28px;
}

/* --- Columna 1: calendario --- */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month {
  font-family: "Sora";
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.cal-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  color: #dbe7f4;
  cursor: pointer;
  transition: 0.3s var(--ease-fluid);
}
.cal-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.cal-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.cal-arrow svg {
  width: 15px;
  height: 15px;
}
.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #7e94ab;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0 8px;
}
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #dbe7f4;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.cal-day:hover:not(:disabled):not(.sel) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
.cal-day:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: default;
}
.cal-day.today {
  border-color: rgba(124, 172, 219, 0.55);
}
.cal-day.sel {
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  border-color: #fff;
}
.cal-hint {
  margin-top: 14px;
  font-size: 11.5px;
  color: #8fb3d6;
  font-family: "JetBrains Mono";
}

/* --- Columna 2: horarios y datos --- */
.sched-day {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sky);
  margin-bottom: 10px;
  min-height: 20px;
  text-transform: capitalize;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 18px;
  max-height: 152px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  padding-right: 2px;
}
/* Mensaje de estado dentro de la rejilla (elige un día / sin horarios) */
.slot-grid .slot-empty {
  grid-column: 1 / -1;
  color: #7e94ab;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 26px 8px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
}
.slot {
  padding: 9px 4px;
  font-family: "JetBrains Mono";
  font-size: 12.5px;
  font-weight: 500;
  color: #dbe7f4;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.slot:hover:not(.sel) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(124, 172, 219, 0.55);
}
.slot.sel {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  font-weight: 700;
}
.sched-fields .field {
  margin-bottom: 12px;
}
.sched-fields .btn-primary {
  background: #fff;
  color: var(--navy);
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}
.sched-fields .btn-primary:hover {
  background: var(--sky);
}
.sched-fields .form-note {
  margin-top: 12px;
}

/* =====================================================================
   MODAL DE AGRADECIMIENTO
   Aparece al confirmar el formulario de contacto o la llamada; se
   cierra solo tras 5s (la barra inferior marca la cuenta regresiva).
   ===================================================================== */
.thanks {
  margin: auto;
  width: min(360px, calc(100vw - 32px));
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  color: #fff;
  padding: 34px 30px 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 0 0 5px rgba(255, 255, 255, 0.03),
    0 40px 90px -30px rgba(4, 12, 22, 0.8);
}
.thanks::backdrop {
  background: rgba(7, 16, 28, 0.65);
  backdrop-filter: blur(6px);
}
.thanks[open] {
  animation: schedIn 0.5s var(--ease-fluid);
}
.thanks[open]::backdrop {
  animation: schedFade 0.4s ease-out;
}
.thanks.closing {
  animation: thanksOut 0.3s var(--ease-fluid) forwards;
}
@keyframes thanksOut {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}
.thanks-check {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 178, 134, 0.16);
  color: var(--green);
}
.thanks-check svg {
  width: 26px;
  height: 26px;
}
.thanks h3 {
  font-family: "Sora";
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.thanks p {
  color: #bccfe2;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 26px;
}
/* Barra que se vacía en 8s para marcar la cuenta regresiva del cierre */
.thanks-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.thanks-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sky);
  transform-origin: left;
  transform: scaleX(1);
}
.thanks[open] .thanks-bar::after {
  animation: thanksShrink 8s linear forwards;
}
@keyframes thanksShrink {
  to {
    transform: scaleX(0);
  }
}
/* La cuenta regresiva es funcional (indica el tiempo real hasta el
   cierre), no decorativa: se mantiene también con menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .thanks[open],
  .thanks.closing,
  .thanks[open]::backdrop {
    animation-duration: 0.01s;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition:
    opacity 0.85s var(--ease-fluid),
    transform 0.85s var(--ease-fluid),
    filter 0.85s var(--ease-fluid);
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (max-width: 940px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 70px;
  }
  .hero-terminal {
    max-width: 520px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-block {
    padding: 44px 36px;
  }
  .summit-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .stage {
    max-width: 440px;
    order: -1;
  }
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .val-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .promise-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 680px) {
  /* El que se oculta/muestra es .links (el propio menú), no su
     contenedor: .nav-links-wrap con display:none escondía TODO su
     interior sin importar el display que .links.mobile-open pidiera
     — un padre display:none nunca lo gana un hijo, ni con !important.
     Selector "nav .links" (no solo ".links") para igualar la
     especificidad de la regla base y ganarle por orden en la hoja. */
  nav .links {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
  }
  .burger {
    display: flex;
  }
  .links.mobile-open {
    display: flex !important;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--navy);
    padding: 22px 28px;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
  }
  /* Los enlaces del menú móvil entran en cascada, no todos a la vez */
  .links.mobile-open a {
    animation: navItemIn 0.5s var(--ease-fluid) backwards;
  }
  .links.mobile-open a:nth-child(1) { animation-delay: 0.05s; }
  .links.mobile-open a:nth-child(2) { animation-delay: 0.1s; }
  .links.mobile-open a:nth-child(3) { animation-delay: 0.15s; }
  .links.mobile-open a:nth-child(4) { animation-delay: 0.2s; }
  .links.mobile-open a:nth-child(5) { animation-delay: 0.25s; }
  .links.mobile-open a:nth-child(6) { animation-delay: 0.3s; }
  .links.mobile-open a:nth-child(7) { animation-delay: 0.35s; }
  .svc-grid {
    grid-template-columns: 1fr;
  }
  .about-block {
    padding: 34px 24px;
  }
  /* Línea del tiempo vertical: en escritorio ancho el camino es
     horizontal (.timeline, más arriba), pero en una sola columna aquí
     abajo no había ninguna línea conectando los pasos */
  .steps {
    grid-template-columns: 1fr;
    position: relative;
    padding-left: 36px;
  }
  .steps::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 7px;
    border-left: 2.5px dotted var(--blue-bright);
  }
  .step::before {
    content: "";
    position: absolute;
    top: 45px;
    left: -35px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--blue-bright);
    border: 3px solid var(--paper);
    box-shadow: 0 0 0 1px var(--line);
  }
  .stripe .sep {
    display: none;
  }
  .stripe .wrap {
    justify-content: center;
    gap: 26px;
  }
  .hero {
    padding: 115px 0 0;
  }
  section.block {
    padding: 74px 0;
  }
  .promise-grid {
    grid-template-columns: 1fr;
  }
  .faq-item summary {
    font-size: 15px;
    padding: 20px 2px;
  }
  .faq-item .faq-a-inner {
    padding: 0 2px 20px;
  }
  /* Agendador: una sola columna y panel casi a lo ancho */
  .sched {
    width: calc(100vw - 20px);
  }
  .sched-head {
    padding: 20px 20px 16px;
  }
  .sched-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px 20px 22px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  .slot-grid {
    max-height: 126px;
  }
}