/* ==========================================================================
   Hackathón HD* — Design tokens
   Fuente: brand-book.md — actualizar aquí si cambian valores de marca.
   ========================================================================== */

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue-Regular.otf") format("opentype"),
       url("../assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* KIN668 — tipografía de cuerpo/texto normal.
   El .TTF original fallaba la validación OTS del navegador (KIN668:error),
   así que se re-serializó limpio y se exportó a WOFF2 con fontTools. */
@font-face {
  font-family: "KIN668";
  src: url("../assets/fonts/KIN668.woff2") format("woff2"),
       url("../assets/fonts/KIN668-clean.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — paleta base HD* */
  --color-bg: #F5F6EC;          /* crema / off-white cálido */
  --color-bg-alt: #FFFFFF;
  --color-ink: #000000;         /* negro wordmark */

  /* Color — paleta Hackathón */
  --color-navy: #001B2E;        /* wordmark HACKATHÓN, datos, texto de detalle */
  --color-coral: #C97A94;       /* acento línea doble-diamante */
  --color-discover: #E8B93A;    /* etapa Discover */
  --color-dream: #C81E7A;       /* etapa Dream */
  --color-design: #D4707A;      /* etapa Design */
  --color-delivery: #5B3A8E;    /* etapa Delivery */

  /* Color — estados tipo kanban */
  --color-status-done: #D08CA1;     /* Ejecutado */
  --color-status-next: #889FC1;     /* Por ejecutar */
  --color-status-deliver: #5E9B79;  /* Entregables */

  /* Color — CTA / cierre */
  --color-cta: #8C1F4E;         /* magenta-berry vibrante (acentos varios) */
  --color-cyan: #4FC3F7;        /* cyan brillante — acento hero + botones CTA */

  /* Tipografía */
  --font-display: "Bebas Neue", "Poppins", sans-serif;   /* H1 / titulares de impacto */
  --font-mono: "Space Mono", "IBM Plex Mono", monospace; /* agenda, datos, números */
  --font-body: "KIN668", "Inter", "Poppins", -apple-system, sans-serif; /* cuerpo / UI */

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --radius: 12px;
  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Scroll reveal (activado por js/main.js). Sin JS, todo queda visible. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--in {
  opacity: 1;
  transform: none;
}

/* Reveal escalonado de hijos (etapas, objetivos, entregables, logos).
   El contenedor lleva .stagger; sus hijos entran en cascada al revelar. */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.stagger.reveal--in > * {
  opacity: 1;
  transform: none;
}
.stagger.reveal--in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.reveal--in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.reveal--in > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.reveal--in > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.reveal--in > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.reveal--in > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.reveal--in > *:nth-child(7) { transition-delay: 0.47s; }
.stagger.reveal--in > *:nth-child(8) { transition-delay: 0.54s; }
.stagger.reveal--in > *:nth-child(9) { transition-delay: 0.61s; }
.stagger.reveal--in > *:nth-child(10) { transition-delay: 0.68s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Textura + viñeta globales — sensación de capas/profundidad "premium"
   Dos overlays fijos sobre TODO: grano (ruido SVG) muy sutil + viñeta en
   los contornos del viewport. pointer-events:none para no bloquear clics.
   ========================================================================== */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
/* Grano/ruido fino: da textura táctil de "material" a los fondos planos */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.09;
  mix-blend-mode: multiply;
}
/* Viñeta: oscurece los contornos → profundidad, el contenido "flota" */
body::after {
  background: radial-gradient(125% 105% at 50% 40%,
    transparent 48%,
    rgba(0, 27, 46, 0.06) 78%,
    rgba(0, 27, 46, 0.16) 100%);
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-sm);
  color: var(--color-ink);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

p {
  margin: 0 0 var(--space-sm);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section {
  padding: var(--space-xl) 0;
}

.numeral {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-navy);
}

.pill {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #fff;
}
.pill--done    { background: var(--color-status-done); }
.pill--next    { background: var(--color-status-next); }
.pill--deliver { background: var(--color-status-deliver); }

.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: var(--color-cyan);
  color: var(--color-navy);       /* texto oscuro: contraste legible sobre cyan */
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   Layout base de secciones
   ========================================================================== */
.narrow { max-width: 760px; }
.section .narrow { margin-left: auto; margin-right: auto; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cta);
  margin-bottom: var(--space-sm);
}

.section-outro {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: var(--space-lg);
  text-align: center;
}
.section-outro em { color: var(--color-cta); font-style: normal; }

/* Variantes de fondo por sección */
.section { position: relative; }
/* Capa blanca sobre la crema: sombra sutil arriba/abajo = sensación de layer
   apilado, da profundidad entre secciones. */
.section--tint {
  background: var(--color-bg-alt);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 -1px 0 rgba(0, 27, 46, 0.06),
    0 1px 0 rgba(0, 27, 46, 0.06);
}
.section--dark {
  background: var(--color-navy);
  color: #E8ECF0;
}
.section--dark h2, .section--dark .lead { color: #fff; }

/* Variante con textura "código fuente" tenue de fondo (brand-book §4.4) */
.section--code { position: relative; overflow: hidden; }
.section--code::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(201, 122, 148, 0.06) 0,
      rgba(201, 122, 148, 0.06) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: auto, 30px 30px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 70%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 70%);
  opacity: 0.7;
}
.section--code .container { position: relative; z-index: 1; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
/* Estado al hacer scroll (lo activa js/main.js): fondo crema sólido */
.site-header.is-scrolled {
  background: rgba(245, 246, 236, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: rgba(0, 27, 46, 0.08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.site-header__logo { display: flex; align-items: center; }
/* logo HDO (lockup cuadrado): altura fija, ancho automático */
.site-header__logo img { height: 52px; width: auto; }
/* logo blanco sobre hero oscuro; rosa al hacer scroll */
.site-header__logo-dark { display: none; }
.site-header__logo-light { display: block; }
.site-header.is-scrolled .site-header__logo-dark { display: block; }
.site-header.is-scrolled .site-header__logo-light { display: none; }

.site-header__nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-md);
}
.site-header__nav a {
  font-size: 0.95rem;
  color: #EAF0F4;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-header.is-scrolled .site-header__nav a { color: var(--color-navy); }
.site-header__nav a:hover { color: var(--color-coral); }
.site-header.is-scrolled .site-header__nav a:hover { color: var(--color-cta); }

/* ==========================================================================
   Botones y links
   ========================================================================== */
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn--full { width: 100%; text-align: center; font-size: 1.05rem; }
.btn:hover { filter: brightness(1.08); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-navy);
  text-decoration: none;
}
.section--dark .link-arrow { color: #E8ECF0; }
.link-arrow:hover { color: var(--color-cta); }

/* ==========================================================================
   1. Hero — lockup glitch + textura código (brand-book §4.2 / §4.4)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--space-xl) + 3.5rem) 0 var(--space-xl);
  background: var(--color-navy);
  color: #EAF0F4;
}
.hero__inner { position: relative; z-index: 3; width: 100%; }

/* --- Galería de fondo: slides a pantalla completa en cross-fade + Ken Burns --- */
.hero__gallery { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}
.hero__slide.is-active {
  opacity: 1;
  animation: hero-kenburns 9s ease-out forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1.08) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.5%, -1.5%); }
}

/* --- Scrim de legibilidad: más denso a la izquierda (donde vive el copy) y
       abajo, para asegurar contraste WCAG del texto sobre la foto --- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 27, 46, 0.92) 0%,
      rgba(0, 27, 46, 0.80) 34%,
      rgba(0, 27, 46, 0.45) 62%,
      rgba(0, 27, 46, 0.30) 100%),
    linear-gradient(0deg,
      rgba(0, 27, 46, 0.85) 0%,
      rgba(0, 27, 46, 0.15) 45%,
      rgba(0, 27, 46, 0.35) 100%),
    radial-gradient(120% 90% at 82% 8%, rgba(140, 31, 78, 0.30), transparent 55%);
}

/* --- Overlay glitch: franjas RGB coral/cyan que "saltan" cada tanto --- */
.hero__glitch {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(201, 122, 148, 0.0), rgba(201, 122, 148, 0.14) 50%, rgba(201, 122, 148, 0.0)),
    linear-gradient(90deg, rgba(79, 195, 247, 0.0), rgba(79, 195, 247, 0.10) 50%, rgba(79, 195, 247, 0.0));
  background-size: 100% 100%, 100% 100%;
  animation: hero-rgb 7s steps(1, end) infinite;
}
@keyframes hero-rgb {
  0%, 96%, 100% { transform: translate(0, 0); opacity: 0.35; }
  97% { transform: translate(-6px, 2px); opacity: 0.7; }
  98% { transform: translate(5px, -3px); opacity: 0.55; }
  99% { transform: translate(-3px, 1px); opacity: 0.7; }
}

/* --- Líneas de escaneo (scanlines) tenues, aire "interfaz/video" --- */
.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.0) 0,
    rgba(0, 0, 0, 0.0) 2px,
    rgba(0, 0, 0, 0.16) 3px,
    rgba(0, 0, 0, 0.0) 4px
  );
  opacity: 0.5;
  animation: hero-scan 8s linear infinite;
}
@keyframes hero-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 400px; }
}

/* Retícula tenue de puntos, aire "interfaz de datos" */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(rgba(234, 240, 244, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 40%, #000, transparent 75%);
          mask-image: radial-gradient(120% 90% at 30% 40%, #000, transparent 75%);
}

/* --- Indicadores de slide --- */
.hero__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--space-lg);
  z-index: 3;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.hero__dot {
  width: 28px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(234, 240, 244, 0.28);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero__dot:hover { background: rgba(234, 240, 244, 0.55); }
.hero__dot.is-active { background: var(--color-coral); transform: scaleY(1.5); }

/* --- P (Problema): titular protagonista del hero --- */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  max-width: 22ch;
  text-wrap: balance;
  margin: 0.4rem 0 var(--space-md);
  color: #fff;
  text-shadow: 0 0 40px rgba(140, 31, 78, 0.25);
}
.hero__title-accent { color: #4FC3F7; display: block; }

/* --- A (Agitación): tensión, en mono para contraste --- */
.hero__agitate {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  max-width: 46ch;
  color: #B7C4CE;
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-coral);
}

/* --- S (Solución): "La respuesta se llama Hackathón HD*" --- */
.hero__solution {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  color: #EAF0F4;
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}

.glitch { position: relative; display: inline-block; }
/* variante inline: el nombre del servicio como la solución, tamaño medio */
.glitch--inline {
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 0 28px rgba(140, 31, 78, 0.45);
}
/* variante para fondos claros: texto base en color de marca, misma aberración */
.glitch--dark {
  color: var(--color-navy);
  text-shadow: none;
}
/* variante titular: cada línea de la frase accent del hero con glitch.
   Hereda el cyan de .hero__title-accent; inline para respetar el <br>. */
.glitch--title {
  color: inherit;
  text-shadow: 0 0 40px rgba(79, 195, 247, 0.35);
}
.glitch--title > span { position: relative; z-index: 2; display: inline-block; }
.glitch > span[aria-hidden] { position: relative; z-index: 2; display: block; }
/* dos capas duplicadas con aberración cromática coral / azul */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--color-coral);
  transform: translate(-2px, 0);
  animation: glitch-a 3.6s steps(2, end) infinite;
  mix-blend-mode: screen;
}
.glitch::after {
  color: #4FC3F7;
  transform: translate(2px, 0);
  animation: glitch-b 3.9s steps(2, end) infinite;
  mix-blend-mode: screen;
}
/* Cortes horizontales aleatorios que "saltan" cada tanto */
@keyframes glitch-a {
  0%, 92%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  93% { transform: translate(-6px, -2px); clip-path: inset(20% 0 55% 0); }
  95% { transform: translate(5px, 1px);   clip-path: inset(65% 0 8% 0); }
  97% { transform: translate(-4px, 2px);  clip-path: inset(40% 0 40% 0); }
}
@keyframes glitch-b {
  0%, 90%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(6px, 1px);   clip-path: inset(10% 0 70% 0); }
  94% { transform: translate(-5px, -1px); clip-path: inset(55% 0 20% 0); }
  96% { transform: translate(3px, 2px);   clip-path: inset(75% 0 5% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { animation: none; }
  .hero__slide.is-active { animation: none; transform: none; }
  .hero__glitch, .hero__scan { animation: none; }
}

.kicker--light { color: var(--color-coral); }

.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  max-width: 52ch;
  margin-top: 0;
  color: #C6D2DB;
}
.hero__sub strong { color: #fff; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-lg) 0 var(--space-md);
}
.hero .link-arrow { color: #EAF0F4; }
.hero .link-arrow:hover { color: var(--color-coral); }

.hero__note {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-coral);
  opacity: 0.85;
}

/* botón con glow para el hero oscuro */
.btn--glow {
  box-shadow: 0 0 0 rgba(79, 195, 247, 0.6);
  animation: btn-pulse 3s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.0); }
  50%      { box-shadow: 0 0 32px 2px rgba(79, 195, 247, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--glow { animation: none; }
}

/* utilería accesible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   2. Problema
   ========================================================================== */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  color: var(--color-coral);
  border-left: 4px solid var(--color-coral);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}
.bridge { font-size: 1.2rem; }

/* ==========================================================================
   3a. "¿Qué es?" estilo slide 20 — video del logo de fondo + copy encima
   ========================================================================== */
/* sección sin padding vertical propio arriba para que el bloque de video
   arranque limpio; el padding lo maneja el contenido */
.section--flush { padding-top: 0; }

/* Estructura como el slide 20: el video (logo HACKATHÓN) ocupa la parte
   superior; la caja de texto vive en una franja crema inferior, del mismo
   tono del video, para que se vea continuo y NO choque con el logo. */
.whatis {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #F5F6EC;
  margin-bottom: var(--space-md);
}
.whatis__video {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;               /* banda ancha: recorta arriba/abajo, logo centrado */
  max-height: 60vh;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  z-index: 0;
}
.whatis__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* leve solapamiento con la base del video para fundir la franja crema,
     pero el texto arranca con aire respecto al logo (padding-top) */
  margin-top: -3vh;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  display: flex;
  justify-content: center;
  background: linear-gradient(0deg, #F5F6EC 85%, rgba(245, 246, 236, 0) 100%);
}
/* Caja de texto transparente (borde transparente), centrada */
.whatis__box {
  background: transparent;
  border: 1px solid transparent;
  text-align: center;
  max-width: 64ch;
  padding: 0 var(--space-md);
}
.whatis__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
}
/* párrafo en mono, como el slide del deck */
.whatis__lead {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-navy);
  margin: 0;
}
.whatis__lead strong { font-weight: 700; }

/* ==========================================================================
   3. Qué es — diferenciadores + ficha rápida
   ========================================================================== */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}
.diff-card {
  background: var(--color-bg-alt);
  border: 1px solid rgba(0, 27, 46, 0.1);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.diff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 27, 46, 0.12);
  border-color: var(--color-coral);
}
.diff-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-sm);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(201, 122, 148, 0.14);
  transition: transform 0.25s ease, background 0.25s ease;
}
.diff-card:hover .diff-card__icon {
  transform: scale(1.1) rotate(-6deg);
  background: rgba(201, 122, 148, 0.24);
}
.diff-card__no {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}
@media (prefers-reduced-motion: reduce) {
  .diff-card__icon { transition: none; }
  .diff-card:hover .diff-card__icon { transform: none; }
}

.quickfacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.quickfacts li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
}
.quickfacts__k {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.quickfacts__v { font-weight: 700; font-size: 1.1rem; }

/* ==========================================================================
   4. Las 4 etapas
   ========================================================================== */
.etapas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.etapa {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-md);
  border-top: 6px solid var(--stage, var(--color-navy));
  box-shadow: 0 1px 3px rgba(0, 27, 46, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.etapa:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 27, 46, 0.14);
}
/* la barra de color se ilumina en hover */
.etapa:hover .etapa__num,
.etapa:hover h3 { filter: saturate(1.3); }
.etapa--discover { --stage: var(--color-discover); }
.etapa--dream    { --stage: var(--color-dream); }
.etapa--design   { --stage: var(--color-design); }
.etapa--delivery { --stage: var(--color-delivery); }
.etapa__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--stage);
}
.etapa h3 { color: var(--stage); margin: var(--space-xs) 0; }
.etapa__do { font-weight: 500; }
.etapa__out {
  font-size: 0.9rem;
  color: var(--color-navy);
  opacity: 0.85;
  margin-top: var(--space-sm);
}
.etapa__out span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* ==========================================================================
   4b. Diagrama "montaña" del proceso (réplica del deck fuente)
   ========================================================================== */
.journey {
  margin: var(--space-lg) 0;
}

/* headers de etapa: 4 barras */
.journey__stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: var(--space-sm);
}
.journey__stage {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  border-radius: 6px;
  color: #fff;
}
.journey__stage--discover { background: var(--color-discover); color: var(--color-navy); }
.journey__stage--dream    { background: var(--color-dream); }
.journey__stage--design   { background: var(--color-design); }
.journey__stage--delivery { background: var(--color-delivery); }

/* cuerpo: eje izq · plot · eje der */
.journey__body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm);
  align-items: stretch;
}
.journey__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-sm) 0;
}
.journey__axis-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-coral);
  padding: 1rem 0.35rem;
  border-radius: 4px;
  text-align: center;
  min-height: 11em;           /* cabe "REALIDAD"/"ABSTRACTO" (8-9 letras) sin recorte */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: visible;
}
/* el eje reparte sus dos etiquetas arriba/abajo con la línea punteada al centro */
.journey__axis { min-height: 340px; }

/* zona del gráfico */
.journey__plot {
  position: relative;
  min-height: 340px;
}
/* línea punteada horizontal ideas/realidad */
.journey__divider {
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px dashed rgba(0, 27, 46, 0.35);
}
/* separadores verticales de etapa */
.journey__plot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(0, 27, 46, 0.08) calc(25% - 1px),
    rgba(0, 27, 46, 0.08) 25%
  );
  pointer-events: none;
}
.journey__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Línea del diagrama: sólida y continua. Se estira con el viewBox (mismas
   unidades que los % de los nodos) para que puntos y línea coincidan. */

/* Nodo = un ancla de tamaño 0 posicionada EXACTAMENTE sobre la línea.
   El punto (::before) se centra en esa coordenada; la etiqueta (span hijo)
   flota al lado sin desplazar el punto. Así los círculos caen sobre el vector. */
.journey__node {
  position: absolute;
  width: 0; height: 0;
  z-index: 2;
}
.journey__node::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-coral);
  box-shadow: 0 0 0 4px rgba(201, 122, 148, 0.25);
  /* animación sutil: el halo "respira". Cada nodo desfasado (--i) para que
     el pulso recorra la línea en cascada, no todos a la vez. */
  animation: node-pulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 122, 148, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(201, 122, 148, 0.06); }
}
/* Nodo final "Plan de acción": destacado en color CTA (es el entregable clave) */
.journey__node--final::before {
  background: var(--color-cta);
  width: 20px; height: 20px;
  box-shadow: 0 0 0 5px rgba(140, 31, 78, 0.22);
  animation: node-pulse-final 3.2s ease-in-out infinite;
}
@keyframes node-pulse-final {
  0%, 100% { box-shadow: 0 0 0 5px rgba(140, 31, 78, 0.22); }
  50%      { box-shadow: 0 0 0 11px rgba(140, 31, 78, 0.05); }
}
.journey__node--final span { font-weight: 700; color: var(--color-cta); }
@media (prefers-reduced-motion: reduce) {
  .journey__node::before, .journey__node--final::before { animation: none; }
}
.journey__node span {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}
/* etiqueta por defecto: a la derecha del punto, centrada verticalmente */
.journey__node span {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* etiqueta a la izquierda (nodos del lado derecho: Soluciones, Prototipos) */
.journey__node--left span {
  left: auto;
  right: 16px;
}
/* etiqueta arriba del punto (picos: Sueños, Modelos) para no tapar la línea */
.journey__node--peak span {
  left: 50%;
  top: -14px;
  transform: translate(-50%, -100%);
}

.journey__caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-navy);
  margin-top: var(--space-md);
}
.journey__start, .journey__end { color: var(--color-cta); font-weight: 700; }

/* ==========================================================================
   5. Objetivos — números grandes
   ========================================================================== */
/* --- Los 5 objetivos: cada fila revela una foto al hover + glitch en el texto --- */
.objectives {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  gap: 0;
}
.objective {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: #EAF0F4;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: padding-left 0.35s ease;
}
.objectives .objective:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
/* los hijos van por encima de la foto */
.objective > * { position: relative; z-index: 1; }
/* Foto de fondo (aparece al hover) */
.objective::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(90deg, rgba(0,27,46,0.62), rgba(0,27,46,0.15)), var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.objective:hover::before,
.objective:focus-within::before {
  opacity: 1;
  transform: scale(1);
}
.objective:hover, .objective:focus-within { padding-left: calc(var(--space-lg) + 0.5rem); }

.objective__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 0.8;
  color: #4a6274;
  min-width: 1.4em;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
.objective:hover .objective__num,
.objective:focus-within .objective__num {
  color: #fff;
  transform: scale(1.08);
  text-shadow: 0 0 24px rgba(79, 195, 247, 0.6);
}
.objective__emoji {
  font-size: 1.4em;
  filter: grayscale(60%);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.objective:hover .objective__emoji,
.objective:focus-within .objective__emoji {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.15) rotate(-6deg);
}
.objective__text { position: relative; font-weight: 500; transition: text-shadow 0.3s ease; }
/* Sombra para legibilidad cuando la foto se revela detrás */
.objective:hover .objective__text,
.objective:focus-within .objective__text { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); }
.objective:hover .objective__emoji,
.objective:focus-within .objective__emoji { filter: grayscale(0) drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
/* Glitch SOLO al hover (activa las capas ::before/::after de .glitch) */
.glitch--obj { color: inherit; }
.glitch--obj > span[aria-hidden] { position: relative; z-index: 2; display: inline-block; }
.glitch--obj::before,
.glitch--obj::after { opacity: 0; transition: opacity 0.2s ease; }
.objective:hover .glitch--obj::before,
.objective:focus-within .glitch--obj::before,
.objective:hover .glitch--obj::after,
.objective:focus-within .glitch--obj::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .objective, .objective::before, .objective__num, .objective__emoji { transition: none; }
  .objective::before { transform: none; }
}

/* ==========================================================================
   6. Entregables
   ========================================================================== */
.deliverables {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-md);
}
.deliverables li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin: 0 calc(var(--space-sm) * -1);
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}
.deliverables li:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}
.deliverables__n {
  font-family: var(--font-mono);
  color: var(--color-coral);
  font-weight: 700;
}
/* GamePlan: el entregable estrella, resaltado */
.deliverables__star {
  color: #fff;
  font-weight: 700;
  background: rgba(94, 155, 121, 0.12);
  border-bottom-color: var(--color-status-deliver);
}
.deliverables__star .deliverables__n { color: var(--color-status-deliver); }
.deliverables__star::after {
  content: "★";
  margin-left: auto;
  color: var(--color-status-deliver);
  font-size: 0.9rem;
}

/* ==========================================================================
   7. Participantes — chips
   ========================================================================== */
.chips {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.chips li {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--color-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  cursor: default;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.chips__emoji {
  display: inline-block;
  transition: transform 0.25s ease;
}
.chips li:hover {
  transform: translateY(-4px);
  background: var(--color-coral);
  box-shadow: 0 8px 20px rgba(140, 31, 78, 0.35);
}
.chips li:hover .chips__emoji {
  transform: scale(1.35) rotate(-8deg);
}
@media (prefers-reduced-motion: reduce) {
  .chips li, .chips__emoji { transition: none; }
  .chips li:hover { transform: none; }
  .chips li:hover .chips__emoji { transform: none; }
}

/* ==========================================================================
   1b. Cintillo de logos — marquee animado (prueba social bajo el hero)
   ========================================================================== */
.logo-strip {
  /* Fondo oscuro para que los logos en negativo (blanco) resalten. Un pelo
     más claro que el navy del hero/#problema para diferenciar la franja. */
  background: #052538;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.logo-strip__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EAF0F4;
  opacity: 0.6;
  text-align: center;
  margin: 0 0 var(--space-sm);
}
/* Viewport recorta; máscara difumina los bordes izq/der (fade en las orillas) */
.logo-strip__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* El track = 2 grupos idénticos lado a lado; se desplaza -50% en bucle. */
.logo-strip__track {
  display: flex;
  width: max-content;
  animation: logo-marquee 32s linear infinite;
}
.logo-strip:hover .logo-strip__track { animation-play-state: paused; }
.logo-strip__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-left: clamp(2.5rem, 6vw, 5rem);
  margin: 0;
  list-style: none;
  flex-shrink: 0;
}
.logo-strip__group img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  /* logos en blanco: los dejamos tal cual (brightness alto) y semitransparentes */
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.logo-strip__group img:hover { opacity: 1; }
/* Walmart es gris (no blanco puro): lo aclaramos para que resalte igual sobre
   el fondo oscuro sin desaparecer. */
.logo-strip__group img[alt="Walmart"],
.logo-strip__group img[src*="Walmart"] {
  filter: brightness(0) invert(1);
}
.logo-strip__more {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-coral);
  text-align: center;
  margin: var(--space-sm) 0 0;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .logo-strip__group[aria-hidden] { display: none; }
}

/* ==========================================================================
   8. Prueba social
   ========================================================================== */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
}
.logo-wall img {
  height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-wall img:hover { filter: grayscale(0); opacity: 1; }
.logo-wall__more {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: var(--space-md);
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}
.badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(0, 27, 46, 0.2);
  border-radius: 999px;
  color: var(--color-navy);
}
/* Variante para el footer (fondo oscuro): badges en claro */
.badges--footer {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.badges--footer .badge {
  color: rgba(234, 240, 244, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}

/* --- Emojis de apoyo (uso selectivo: escaneabilidad, no decoración total) --- */
.qf-emoji { margin-right: 0.35ch; }
.etapa__emoji { margin-right: 0.4ch; }
.bignum-emoji { margin-right: 0.3ch; font-size: 1.1em; }

/* ==========================================================================
   8. FAQ — acordeón semántico (SEO/GEO) con <details>/<summary>
   ========================================================================== */
.faq {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.faq__item {
  background: var(--color-bg-alt);
  border: 1px solid rgba(0, 27, 46, 0.10);
  border-radius: 12px;
  padding: 0 var(--space-md);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq__item[open] {
  border-color: var(--color-coral);
  box-shadow: 0 6px 24px rgba(0, 27, 46, 0.07);
}
.faq__item summary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) 2rem var(--space-md) 0;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Signo +/− a la derecha */
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-coral);
  transition: transform 0.25s ease;
  line-height: 1;
}
.faq__item[open] summary::after {
  content: "−";
}
.faq__item summary:hover { color: var(--color-cta); }
.faq__answer {
  padding: 0 0 var(--space-md);
}
.faq__answer p {
  margin: 0;
  color: #45525C;
  line-height: 1.65;
}
.faq__cta {
  margin-top: var(--space-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-navy);
}
.faq__cta a { color: var(--color-cta); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__item summary::after { transition: none; }
}

/* ==========================================================================
   8b. Galería — mosaico de fotos reales (prueba social visual)
   ========================================================================== */
.gallery {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}
.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--color-navy);
}
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.gallery__item:hover img { transform: scale(1.06); }

/* caption: aparece sobre un gradiente al hover */
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 27, 46, 0.85), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption { opacity: 1; transform: none; }

/* ícono "ampliar" en esquina */
.gallery__item::after {
  content: "⤢";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 27, 46, 0.55);
  color: #fff;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery__item:hover::after { opacity: 1; }

/* ==========================================================================
   Media-split — foto de acento junto a texto (Qué es / Quién participa)
   ========================================================================== */
.media-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-lg);
}
.media-split--reverse .media-split__text { order: 2; }
.media-split--reverse .media-split__figure { order: 1; }
.media-split__text h2 { margin-top: 0; }
.media-split__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(0, 27, 46, 0.18);
  aspect-ratio: 4 / 3;
}
.media-split__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.media-split__figure:hover img { transform: scale(1.05); }

/* ==========================================================================
   Lightbox — visor de foto a pantalla completa
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;                 /* por encima de los overlays de textura/viñeta */
  display: none;
  place-items: center;
  background: rgba(0, 12, 20, 0.94);
  backdrop-filter: blur(4px);
  padding: var(--space-lg);
}
.lightbox.is-open { display: grid; animation: lb-fade 0.25s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lightbox__caption {
  position: absolute;
  bottom: var(--space-md);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #EAF0F4;
  margin: 0;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--color-cta); transform: scale(1.05); }
.lightbox__close {
  top: var(--space-md); right: var(--space-md);
  width: 48px; height: 48px;
  font-size: 1.2rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }

/* ==========================================================================
   9. CTA final + formulario
   ========================================================================== */
.section--cta {
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(140, 31, 78, 0.18), transparent 70%),
    var(--color-navy);
  color: #fff;
}
.cta__title { color: #fff; text-align: center; }
.cta__sub { text-align: center; opacity: 0.85; max-width: 48ch; margin: 0 auto var(--space-lg); }

.lead-form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cfd8e0;
}
.lead-form input,
.lead-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-navy);
  background: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.lead-form textarea { resize: vertical; }
.lead-form input:focus,
.lead-form textarea:focus {
  outline: 2px solid var(--color-coral);
  outline-offset: 1px;
}

.alt-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.alt-contact span { opacity: 0.7; }
.alt-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--color-coral); }
.alt-contact a:hover { color: var(--color-coral); }

.cta__note {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-top: var(--space-md);
}
.drdo {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: var(--color-coral);
  margin: var(--space-lg) auto 0;
  max-width: 24ch;
}
.drdo cite { display: block; font-size: 0.9rem; font-style: normal; opacity: 0.7; margin-top: var(--space-sm); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #000;
  color: #cfd8e0;
  padding: var(--space-lg) 0;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__tag {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #fff;
  margin-top: var(--space-sm);
}
.site-footer__meta { text-align: right; }
.site-footer__meta a { color: #fff; text-decoration: none; }
.site-footer__units { font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.6; }

/* ==========================================================================
   Responsive — mobile first fallback (colapsa grids)
   ========================================================================== */
@media (max-width: 860px) {
  .diff-grid { grid-template-columns: 1fr; }
  .etapas-grid { grid-template-columns: repeat(2, 1fr); }
  .deliverables { grid-template-columns: 1fr; }
  .site-header__nav { display: none; }

  /* galería a 2 columnas; media-split apilado */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .media-split { grid-template-columns: 1fr; gap: var(--space-md); }
  .media-split--reverse .media-split__text { order: 1; }
  .media-split--reverse .media-split__figure { order: 2; }

  /* whatis en móvil: el video 16:9 queda bajo; damos algo más de alto
     y compactamos la caja de texto para que quepa sin tapar el logo */
  .whatis { aspect-ratio: auto; min-height: 62vh; }
  .whatis__box { padding: var(--space-xs) var(--space-sm); }

  /* diagrama */
  .journey__node span { font-size: 0.72rem; }
  .journey__stage { font-size: 0.95rem; }
}
@media (max-width: 560px) {
  .etapas-grid { grid-template-columns: 1fr; }
  .lead-form__row { grid-template-columns: 1fr; }
  .site-footer__inner { flex-direction: column; }
  .site-footer__meta { text-align: left; }

  /* galería: mantener mosaico simple, wide/tall ocupan todo el ancho */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }

  /* diagrama con etiquetas mínimas */
  .journey__stage { font-size: 0.78rem; letter-spacing: 0; padding: 0.4rem 0.2rem; }
  .journey__plot { min-height: 300px; }
  .journey__node span { font-size: 0.62rem; }
  .journey__node::before { width: 11px; height: 11px; }
  .journey__axis-label { font-size: 0.6rem; min-height: 8em; }
  /* en móvil los dos picos se enciman: separa sus etiquetas a los lados */
  .journey__node--peak-l span { left: auto; right: 10px; top: 50%; transform: translateY(-50%); }
  .journey__node--peak-r span { left: 10px; top: 50%; transform: translateY(-50%); }

  /* Hero en móvil: ajustar escalas y evitar overflow. */
  .hero { padding-top: calc(var(--space-xl)); }
  /* En móvil el copy ocupa todo el ancho: cambia el scrim de lateral a vertical
     para garantizar contraste parejo del texto sobre la foto. */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(0, 27, 46, 0.55) 0%,
        rgba(0, 27, 46, 0.80) 40%,
        rgba(0, 27, 46, 0.92) 100%),
      radial-gradient(120% 60% at 50% 0%, rgba(140, 31, 78, 0.28), transparent 60%);
  }
  .hero__title { max-width: 100%; }
  .hero__sub, .hero__agitate, .hero__note { max-width: 100%; }
  .hero__agitate { padding-left: var(--space-sm); }
  .hero__note { word-break: break-word; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .hero__actions .btn { width: 100%; text-align: center; }
  .hero__actions .link-arrow { text-align: left; }
}

/* Blindaje global contra scroll horizontal accidental */
html, body { overflow-x: hidden; }
.hero__gallery, .hero__scrim, .hero__glitch, .hero__scan, .hero__grid { max-width: 100vw; }



.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ============================================================
   Validación de formulario — borde rojo en campos faltantes
   ============================================================ */
.lead-form.was-validated input:invalid,
.lead-form.was-validated textarea:invalid {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 1px #ff4d4f;
}