/* ==========================================================================
   DALMI — sistema visual
   Deep lunar indigo + naranja cálido. Tipografía editorial, mucho espacio
   negativo, naranja usado sólo donde hay que mirar.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --indigo: #0b1026;
  --indigo-2: #0e1430;
  --superficie: #131b3b;
  --superficie-2: #182248;
  --linea: rgba(255, 255, 255, 0.09);
  --linea-fuerte: rgba(255, 255, 255, 0.18);
  --texto: #f2f4fb;
  --texto-suave: #98a1c0;
  --naranja: #ff7a1a;
  --naranja-claro: #ffa357;
  --max: 1160px;
  --radio: 16px;
  --transicion: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--indigo);
  color: var(--texto);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

.contenedor {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

/* El bloque estrecho limita la medida del texto, pero conserva el mismo borde
   izquierdo que el resto de contenedores: si se centrara, la columna editorial
   quedaría desalineada respecto a las listas y tarjetas. */
.contenedor.estrecho > * { max-width: 780px; }

section { padding: clamp(84px, 12vh, 150px) 0; }

.acento { color: var(--naranja); }

.eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 22px;
}

.titulo {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  max-width: 22ch;
}

.titulo.grande {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  max-width: 20ch;
}

.lead {
  color: var(--texto-suave);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  max-width: 58ch;
}

.a-la-derecha { margin-left: auto; }

/* ---------- Animación de entrada ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

.reveal.visible { opacity: 1; transform: none; }

/* Escalonado de las rejillas. Va en la hoja de estilos y no en un atributo
   `style` porque la CSP de la landing no admite estilos en línea: con el
   atributo, el navegador bloqueaba el retraso y todo entraba a la vez. */
[data-escalonado] > .reveal:nth-child(2) { --retraso: 80ms; }
[data-escalonado] > .reveal:nth-child(3) { --retraso: 160ms; }
[data-escalonado] > .reveal:nth-child(4) { --retraso: 240ms; }
[data-escalonado] > .reveal:nth-child(5) { --retraso: 320ms; }
[data-escalonado] > .reveal:nth-child(6) { --retraso: 400ms; }
[data-escalonado] > .reveal:nth-child(n + 7) { --retraso: 480ms; }

/* ---------- Navegación ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px clamp(20px, 5vw, 40px);
  transition: background var(--transicion), border-color var(--transicion), padding var(--transicion);
  border-bottom: 1px solid transparent;
}

.nav.compacta {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(11, 16, 38, 0.82);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--linea);
}

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.marca-texto {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 400;
}

.nav-links a {
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--transicion);
}

.nav-links a:hover { color: var(--texto); }

/* ---------- Botones ---------- */

.btn {
  display: inline-block;
  /* iOS pinta los <button> con su propio estilo (fondo claro y bordes) si no
     se desactiva la apariencia nativa: los chips y botones salían blancos. */
  -webkit-appearance: none;
  appearance: none;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion),
    border-color var(--transicion), color var(--transicion);
}

.btn-sm { padding: 10px 20px; font-size: 0.86rem; }

.btn-primario {
  background: var(--naranja);
  color: #150c04;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primario:hover {
    background: var(--naranja-claro);
    transform: translateY(-2px);
  }
}

.btn-lineal {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto);
}

@media (hover: hover) and (pointer: fine) {
  .btn-lineal:hover {
    border-color: var(--naranja);
    color: var(--naranja-claro);
  }
}

.enlace-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--naranja);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}

.enlace-cta:hover { border-bottom-color: var(--naranja); }

/* ---------- 1 · Hero ---------- */

/* El vídeo manda: ocupa casi todo el viewport, pero deja asomar el titular de
   la sección siguiente para que el CTA no quede a un scroll de distancia. */
.hero {
  position: relative;
  height: clamp(440px, 82svh, 780px);
  padding: 0;
  overflow: hidden;
}

.hero-medio {
  position: absolute;
  inset: 0;
  /* Fondo bajo el vídeo: mientras descarga —o si el navegador bloquea la
     reproducción— el hero muestra esto en vez de un rectángulo negro. */
  background:
    radial-gradient(90% 70% at 72% 32%, rgba(109, 60, 224, 0.28) 0%, transparent 62%),
    radial-gradient(70% 60% at 22% 78%, rgba(255, 122, 26, 0.16) 0%, transparent 60%),
    var(--indigo-2);
}

.hero-video.fallido { display: none; }

.hero-video,
.hero-nodos {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zoom anclado abajo: la marca naranja del propio vídeo ocupa el 5%-12,6%
   superior del cuadro, así que ampliar desde el borde inferior recorta el 17%
   de arriba y la deja fuera. Recortar por arriba cuesta mucha menos imagen que
   quitar el 20% del ancho, y respeta la composición: la persona está abajo. */
.hero-video {
  transform: scale(var(--zoom-video, 1.2));
  transform-origin: 50% 100%;
}

/* Velo mínimo: sólo oscurece los bordes para que la barra superior se lea y el
   vídeo funda con el fondo, sin apagar la imagen. */
.hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 16, 38, 0.55) 0%,
    rgba(11, 16, 38, 0.12) 22%,
    rgba(11, 16, 38, 0.12) 62%,
    rgba(11, 16, 38, 0.85) 88%,
    var(--indigo) 100%);
}

/* ---------- 1b · Presentación ---------- */

.presentacion {
  padding-top: clamp(46px, 7vh, 80px);
  padding-bottom: clamp(70px, 11vh, 130px);
}

.presentacion h1 {
  font-size: clamp(2.05rem, 4.8vw, 3.9rem);
  font-weight: 500;
  max-width: 19ch;
  margin-bottom: 26px;
}

.presentacion .lead { max-width: 50ch; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
}

.hero-scroll span {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--naranja);
  animation: caer 2.4s ease-in-out infinite;
}

@keyframes caer {
  0%, 100% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(18px); opacity: 0; }
}

/* ---------- 2 · Problema ---------- */

.problema .titulo {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 300;
}

.contraste {
  margin-top: 34px;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--texto);
}

.situaciones {
  list-style: none;
  margin: clamp(40px, 6vw, 70px) 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--linea);
}

.situaciones li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--linea);
  color: var(--texto-suave);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 300;
  transition: color var(--transicion), padding-left var(--transicion);
}

.situaciones li:hover { color: var(--texto); padding-left: 10px; }

.nodo {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranja);
  opacity: 0.85;
}

.remate {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 clamp(22px, 3vw, 32px);
}

/* ---------- 3 · Posicionamiento ---------- */

.posicionamiento { background: var(--indigo-2); }

.principio {
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--naranja);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--texto);
}

/* ---------- 4 · Producto ---------- */

.temas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 clamp(40px, 5vw, 60px);
}

.tema {
  -webkit-appearance: none;
  appearance: none;
  /* 12px de alto interior deja el chip en 45px: por debajo de 44 el dedo
     falla en móvil, que es de donde llega el tráfico de anuncios. */
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transicion);
}

.tema:hover { color: var(--texto); border-color: var(--texto-suave); }

.tema.activo {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(255, 122, 26, 0.08);
}

.demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: linear-gradient(150deg, var(--superficie) 0%, var(--indigo-2) 100%);
}

.demo-etiqueta {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.demo-situacion p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  transition: opacity var(--transicion);
}

.demo-flecha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-flecha .linea {
  width: clamp(24px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, var(--naranja), rgba(255, 122, 26, 0.25));
}

.demo-vacio {
  color: var(--texto-suave);
  font-weight: 300;
  font-size: 0.98rem;
  margin: 0;
}

.fichas { display: grid; gap: 14px; }

.ficha {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.ficha h3 { font-size: 1rem; margin: 0 0 2px; }
.ficha-area { color: var(--naranja); font-size: 0.8rem; margin: 0 0 6px; }
.ficha-aporta { color: var(--texto-suave); font-size: 0.88rem; font-weight: 300; margin: 0; }

.retrato {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.retrato.grande { width: 96px; height: 96px; }

.iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #2c3bb5, #6d3ce0 55%, var(--naranja));
  font-weight: 500;
  letter-spacing: 0.04em;
}


/* ---------- Identificación: tarjetas de desafío ---------- */

.microcopy {
  margin-top: 26px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.desafios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: clamp(36px, 5vw, 56px) 0;
}

/* Las cinco en una fila en escritorio: con auto-fit se quedaban en 4+1 y la
   quinta tarjeta colgaba sola. */
@media (min-width: 1040px) {
  .desafios { grid-template-columns: repeat(5, 1fr); }
}

.desafio {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  text-align: left;
  padding: 30px 24px 26px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transicion), transform var(--transicion),
    background var(--transicion);
}

.desafio:hover,
.desafio:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.05);
  outline: none;
}

.desafio.activo {
  border-color: var(--naranja);
  background: rgba(255, 122, 26, 0.08);
}

.desafio-num {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--texto-suave);
}

.desafio .nodo {
  position: absolute;
  top: 30px;
  right: 24px;
}

.desafio h3 { font-size: 1.05rem; margin: 12px 0 8px; }
.desafio p { color: var(--texto-suave); font-size: 0.92rem; font-weight: 300; margin: 0; }

/* ---------- Dos lados ---------- */

/* Tarjetas que llevan al formulario al pulsar en cualquier punto: el enlace
   de dentro se estira sobre toda la superficie. Se hace con CSS y no con un
   `click` en JS porque en Safari de iOS el toque sobre un elemento que no es
   interactivo no siempre genera el evento, y la tarjeta no respondía. */
[data-tarjeta] { position: relative; }

[data-tarjeta] .btn::after,
[data-tarjeta] .enlace-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Las dos puertas comparten ancho y alto; el puente ocupa solo lo que mide. */
.puertas-grid {
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.puerta-etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 14px;
}

.puente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.puente .hilo {
  width: clamp(30px, 6vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 122, 26, 0.15), var(--naranja), rgba(255, 122, 26, 0.15));
}

/* ---------- Acompañamientos ---------- */

.nota-formatos {
  margin-top: 28px;
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 300;
}

/* ---------- Confianza ---------- */

.criterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin: clamp(38px, 5vw, 56px) 0;
}

.criterio { padding-top: 26px; position: relative; }

.criterio .nodo {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 5px rgba(255, 122, 26, 0.13);
}

.criterio h3 { font-size: 1.05rem; }
.criterio p { color: var(--texto-suave); font-weight: 300; font-size: 0.92rem; margin: 0; }

/* ---------- Formulario en dos pasos ---------- */

.tarjeta-formulario {
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--superficie) 0%, var(--indigo-2) 100%);
}

.tarjeta-formulario form { display: grid; gap: 15px; }

.oculto { display: none !important; }

.form-intro {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto);
}

.grupo {
  border: none;
  padding: 0;
  margin: 4px 0 0;
}

.grupo legend {
  padding: 0;
  font-size: 0.84rem;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.ayuda {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--texto-suave);
  font-weight: 300;
}

.fichas-opcion { display: flex; flex-wrap: wrap; gap: 8px; }

.ficha-opcion {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.ficha-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ficha-opcion span {
  display: inline-block;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  font-size: 0.86rem;
  color: var(--texto-suave);
  transition: all var(--transicion);
}

.ficha-opcion:hover span { color: var(--texto); border-color: var(--texto-suave); }

.ficha-opcion input:checked + span {
  border-color: var(--naranja);
  background: rgba(255, 122, 26, 0.12);
  color: var(--naranja-claro);
}

.ficha-opcion input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.25); }

.ficha-opcion.desactivada span { opacity: 0.4; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Microdiagnóstico */

.diagnostico-cabecera h3 { font-size: 1.2rem; margin: 8px 0 6px; }

.ok-lead {
  margin: 0;
  font-size: 0.86rem;
  color: var(--naranja-claro);
}

.progreso {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--texto-suave);
  margin-top: 14px;
}

.progreso .barra {
  flex: 1;
  height: 2px;
  background: var(--linea-fuerte);
  border-radius: 2px;
  overflow: hidden;
}

/* El avance se marca con `data-paso` y no asignando `style.width` desde el
   JS: la CSP bloquea también los estilos en línea que escribe el script. */
.progreso .barra i {
  display: block;
  height: 100%;
  width: 33.33%;
  background: var(--naranja);
  transition: width var(--transicion);
}

.progreso .barra i[data-paso="2"] { width: 66.66%; }
.progreso .barra i[data-paso="3"] { width: 100%; }

.paso-diag { border: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.paso-diag legend {
  padding: 0;
  font-size: 1rem;
  color: var(--texto);
  margin-bottom: 4px;
}

.acciones-diag { display: flex; gap: 10px; align-items: center; }
.acciones-diag .btn { flex: 1; }
.acciones-diag .btn-sm { flex: 0 0 auto; }
/* El `display` de `.btn` gana al del atributo `hidden`: sin esto, "Atrás"
   seguía a la vista en el primer paso. */
.acciones-diag .btn[hidden] { display: none; }

.omitir { margin: 0; text-align: center; }

.enlace-sobrio {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.enlace-sobrio:hover { color: var(--texto); }

#gracias { text-align: center; padding: 26px 8px; }
#gracias h3 { font-size: 1.3rem; margin: 16px 0 8px; }
#gracias p { color: var(--texto-suave); font-weight: 300; margin: 0; }

.nodo.grande {
  display: inline-block;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 7px rgba(255, 122, 26, 0.14);
}

/* ---------- CTA fijo en móvil ---------- */

.cta-movil {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion);
  box-shadow: 0 10px 30px rgba(11, 16, 38, 0.6);
}

.cta-movil.visible { opacity: 1; transform: none; }

/* ---------- 5 · Proceso ---------- */

.pasos {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  position: relative;
}

/* Línea orgánica que hilvana los tres pasos. */
.pasos::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 122, 26, 0.35) 18%,
    rgba(255, 122, 26, 0.35) 82%, transparent);
}

.pasos li { position: relative; padding-top: 34px; }

.paso-nodo {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 5px rgba(255, 122, 26, 0.13);
}

.paso-num {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.pasos h3 { font-size: 1.18rem; }
.pasos p { color: var(--texto-suave); font-weight: 300; font-size: 0.96rem; margin: 0; }

/* ---------- 6 · Puertas ---------- */

.puertas { background: var(--indigo-2); }

.puertas-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.puerta {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4vw, 46px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background-color var(--transicion),
    transform var(--transicion);
}

.puerta.principal {
  background: linear-gradient(155deg, var(--superficie-2) 0%, var(--superficie) 100%);
  border-color: rgba(255, 122, 26, 0.32);
}

/* El resaltado sólo existe donde hay un puntero que pueda posarse. En táctil,
   iOS mantiene el `:hover` pegado a lo último que se tocó, y la sección se
   quedaba con las dos tarjetas y los dos botones encendidos a la vez. */
@media (hover: hover) and (pointer: fine) {
  /* Al pasar el ratón, la tarjeta toma el mismo aspecto que la destacada:
     el mismo degradado y el mismo borde, no sólo un borde encendido. */
  .puerta:hover {
    border-color: rgba(255, 122, 26, 0.55);
    background: linear-gradient(155deg, var(--superficie-2) 0%, var(--superficie) 100%);
    transform: translateY(-3px);
  }

  .puerta.principal:hover { border-color: rgba(255, 122, 26, 0.6); }

  /* Como el clic vale en toda la tarjeta, su botón responde aunque el ratón
     no esté encima de él: el de la destacada ya es naranja y así los dos
     reaccionan igual. */
  .puerta:hover .btn-lineal {
    border-color: var(--naranja);
    background: var(--naranja);
    color: #150c04;
  }

  .puerta:hover .btn-primario { background: var(--naranja-claro); }
}

/* Al tocar, en cambio, basta un apunte breve mientras el dedo está encima. */
.puerta:has(:active) {
  border-color: rgba(255, 122, 26, 0.45);
  transform: translateY(-2px);
}


.puerta h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.puerta p { color: var(--texto-suave); font-weight: 300; max-width: 42ch; }
/* El botón se ancla abajo para que ambas tarjetas lo alineen a la misma altura. */
.puerta .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 7 · Acompañamiento ---------- */

.programas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 60px);
}

.programa {
  padding: 32px 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background-color var(--transicion),
    transform var(--transicion);
}

/* Igual que en las puertas: el resaltado permanente es cosa del ratón. */
@media (hover: hover) and (pointer: fine) {
  .programa:hover {
    border-color: rgba(255, 122, 26, 0.55);
    background-color: rgba(255, 122, 26, 0.04);
    transform: translateY(-3px);
  }
}

.programa:has(:active) {
  border-color: rgba(255, 122, 26, 0.45);
  transform: translateY(-2px);
}

.programa.destacado {
  background: linear-gradient(160deg, var(--superficie) 0%, var(--indigo-2) 100%);
  border-color: rgba(255, 122, 26, 0.3);
}

/* Repetido tras `.destacado` para que su borde también se avive en hover. */
@media (hover: hover) and (pointer: fine) {
  .programa.destacado:hover { border-color: rgba(255, 122, 26, 0.55); }
}

.programa h3 { font-size: 1.2rem; margin-bottom: 6px; }

.programa-formato {
  color: var(--naranja);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.programa p { color: var(--texto-suave); font-weight: 300; font-size: 0.95rem; }

.programa ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linea);
}

.programa li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-weight: 300;
}

.programa li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--naranja);
  opacity: 0.75;
}

/* ---------- 8 · IA ---------- */

.ia .titulo { font-weight: 300; }

/* ---------- 9 · Personas ---------- */

.retratos,
.criterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 60px);
}

.persona h3 { font-size: 1.15rem; margin: 18px 0 2px; }
.persona-area { color: var(--naranja); font-size: 0.82rem; margin-bottom: 10px; }
.persona-aporta { color: var(--texto-suave); font-weight: 300; font-size: 0.94rem; margin: 0; }

.criterio { padding-top: 26px; position: relative; }

.criterio .nodo {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 5px rgba(255, 122, 26, 0.13);
}

.criterio h3 { font-size: 1.1rem; }
.criterio p { color: var(--texto-suave); font-weight: 300; font-size: 0.95rem; margin: 0; }

/* ---------- 10 · Cierre y formulario ---------- */

.cierre {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
}

.cierre-nodos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.cierre-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.firma {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 10px;
}

/* Formulario */



.conmutador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  margin-bottom: 6px;
}

.opcion {
  -webkit-appearance: none;
  appearance: none;
  padding: 13px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.opcion.activa { background: rgba(255, 122, 26, 0.14); color: var(--naranja); }

.tarjeta-formulario label {
  display: grid;
  gap: 7px;
  font-size: 0.84rem;
  color: var(--texto-suave);
}

.tarjeta-formulario em { font-style: normal; opacity: 0.6; }

.tarjeta-formulario input:not([type="checkbox"]),
.tarjeta-formulario select,
.tarjeta-formulario textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.03);
  color: var(--texto);
  font-family: inherit;
  /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  font-weight: 300;
  resize: vertical;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.tarjeta-formulario input::placeholder,
.tarjeta-formulario textarea::placeholder { color: #6b7396; }

.tarjeta-formulario input:focus,
.tarjeta-formulario select:focus,
.tarjeta-formulario textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.14);
}

.tarjeta-formulario select option { background: var(--indigo-2); }

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.consentimiento input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--naranja);
}

.consentimiento a { color: var(--naranja); }

/* Campo largo que puede empezar plegado. El resumen se lee como una etiqueta
   más para que el formulario no cambie de aspecto al abrirlo. */
.campo-plegable summary {
  font-size: 0.84rem;
  color: var(--texto-suave);
  cursor: pointer;
  list-style: none;
}

.campo-plegable summary::-webkit-details-marker { display: none; }

.campo-plegable summary::after {
  content: " +";
  color: var(--naranja);
  font-weight: 600;
}

.campo-plegable[open] summary::after { content: " −"; }
.campo-plegable[open] summary { margin-bottom: 7px; }

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-estado { margin: 0; font-size: 0.88rem; min-height: 1.2em; }
.form-estado.ok { color: var(--naranja-claro); }
.form-estado.error { color: #ff8080; }

/* ---------- Pie ---------- */

.pie {
  padding: 46px 0;
  border-top: 1px solid var(--linea);
  background: var(--indigo-2);
}

.pie-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}

.pie p { margin: 0; }
.pie .firma { margin: 0 0 6px; }
.pie-nota, .pie .copy { color: var(--texto-suave); font-size: 0.86rem; font-weight: 300; }
.pie a { color: var(--texto-suave); text-decoration: none; }
.pie a:hover { color: var(--naranja); }

/* ---------- Página legal ---------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(110px, 14vh, 160px) 24px 80px;
}

.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }

.legal h2 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 46px;
  color: var(--naranja);
}

.legal p, .legal li { color: var(--texto-suave); font-weight: 300; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 10px; }
.legal strong { color: var(--texto); font-weight: 500; }
.legal a { color: var(--naranja); }
.legal .volver { margin-top: 52px; }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  /* En vertical, un hero a pantalla completa recortaría el vídeo 16:9 hasta
     dejar sólo la franja central. Se le da algo de altura y se conserva el
     mismo degradado que en escritorio, para que la imagen se funda con el
     fondo en vez de cortarse en seco. */
  .hero {
    height: auto;
    aspect-ratio: 16 / 11;
  }
  .hero-video { object-fit: cover; }

  /* Con vídeo vertical propio no hay que recortar nada: el hero puede ocupar
     la pantalla como en escritorio. */
  .hero.hero-vertical {
    aspect-ratio: auto;
    height: clamp(460px, 78svh, 900px);
  }
  /* El vídeo vertical no lleva la marca de esquina, así que se muestra sin
     recortar: se ve el encuadre completo tal como se exportó. */
  .hero.hero-vertical .hero-video { --zoom-video: 1; }

  /* El degradado se prolonga sobre la sección siguiente, como en escritorio. */
  .presentacion { position: relative; padding-top: clamp(30px, 5vh, 54px); }
  .presentacion::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -70px;
    height: 70px;
    background: linear-gradient(180deg, transparent, var(--indigo));
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  .puertas-grid { grid-template-columns: 1fr; }

  .nav-links { display: none; }
  .nav { gap: 14px; }
  .nav .btn-sm { margin-left: auto; }

  .demo { grid-template-columns: 1fr; }
  .demo-flecha { transform: rotate(90deg); margin: 6px 0; justify-content: center; }

  .pasos::before { display: none; }
}

@media (max-width: 760px) {
  .cta-movil { display: block; }
  .dos-columnas { grid-template-columns: 1fr; }
  /* Deja aire para que el CTA fijo no tape el final de la página. */
  .pie { padding-bottom: 92px; }
}

/* El paso 1 en un móvil de 664px de alto: se recorta el aire entre campos
   para que quepan de una vez el formulario y su botón. */
@media (max-width: 760px) {
  .tarjeta-formulario form { gap: 11px; }
  .tarjeta-formulario label { gap: 5px; }

  .tarjeta-formulario input:not([type="checkbox"]),
  .tarjeta-formulario select,
  .tarjeta-formulario textarea {
    padding: 11px 14px;
  }

  .opcion { padding: 11px 10px; }
  .form-intro { font-size: 0.9rem; }
  .tarjeta-formulario { padding: 20px 18px; }
  .consentimiento { font-size: 0.78rem; }

  /* En una columna, el texto de cierre empujaba el formulario una pantalla
     entera hacia abajo: quien pulsa el CTA aterrizaba en la narrativa, no en
     los campos. En móvil manda el formulario y el texto cierra la página. */
  .cierre-grid { gap: 32px; }
  .cierre-texto { order: 2; }
}

@media (max-width: 560px) {
  .acciones .btn { width: 100%; }
  .hero { align-items: flex-end; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll span { animation: none; }
  * { transition-duration: 1ms !important; }
}