@font-face { font-family: 'Geist'; src: url('../fuentes/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #040306;
  --blanco: #F5F3FA;
  --niebla: rgb(245 243 250 / 0.62);
  --tenue: rgb(245 243 250 / 0.14);
  --lila: #8B6CFF;
  --lila-claro: #CDBEFF;
  --azul: #5A9BFF;
  --rojo: #ff5d7a;
  --entra: cubic-bezier(0.16, 1, 0.3, 1);
  --letra: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --borde: clamp(16px, 5vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fondo); color: var(--blanco); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--letra); font-size: 1rem; line-height: 1.55; background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
img, svg, canvas { display: block; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lila-claro); outline-offset: 3px; }
::selection { background: rgb(139 108 255 / 0.4); }

.saltar { position: absolute; left: 12px; top: 12px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--blanco); color: var(--fondo); text-decoration: none; transform: translateY(-160%); }
.saltar:focus-visible { transform: none; }


.fibras, .fibras-halo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fibras-halo { filter: blur(10px) saturate(1.2); opacity: 0.8; mix-blend-mode: screen; }

.fibras-halo.ya-borroso { filter: none; }
.sin-js .fibras, .sin-js .fibras-halo { display: none; }
main, .cabecera { position: relative; z-index: 2; }


.cabecera { position: fixed; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--borde); z-index: 10; transition: opacity 1s var(--entra), transform 1s var(--entra); }
.con-js:not(.listo) .cabecera { opacity: 0; transform: translateY(-8px); }
.marca { width: 92px; height: auto; }
.pildora { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--blanco); background: rgb(16 13 24 / 0.78); border: 1px solid rgb(255 255 255 / 0.1); padding: 10px 16px; border-radius: 999px; transition: background 0.3s, border-color 0.3s; }
.pildora:hover { background: rgb(139 108 255 / 0.18); border-color: rgb(139 108 255 / 0.5); }


.hero-titulo, .historia-titulo, .nace-titulo, .conecta-frase, .balanza-fijo, .cierre-titulo, .pd-titulo { font-weight: 500; letter-spacing: -0.025em; text-shadow: 0 0 28px rgb(4 3 6 / 0.85), 0 0 2px rgb(4 3 6 / 0.6); }
.hero-texto, .historia-texto, .nace-texto, .conecta-sub { color: var(--niebla); font-size: clamp(0.92rem, 1.05vw, 1.02rem); line-height: 1.6; max-width: 46ch; text-shadow: 0 0 18px rgb(4 3 6 / 0.9); }
.luz, .nace-titulo em, .conecta-frase strong { color: var(--lila-claro); font-style: normal; font-weight: 500; }


.con-js .cifra:not([data-cifra]) { visibility: hidden; }
.cifra-palabra { white-space: nowrap; }
.cifra-letra.oculta { opacity: 0; }
.cifra-letra.ruido { opacity: 0.55; filter: blur(0.6px); color: var(--lila-claro); }

.con-js .revela { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity 1s var(--entra) 0.2s, transform 1s var(--entra) 0.2s, filter 1s var(--entra) 0.2s; }
.con-js .revela.visto { opacity: 1; transform: none; filter: none; }


.fijada { position: relative; }
.con-js .fijada { height: calc(var(--alto, 2) * 100svh); }
.fijo { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 100px var(--borde); }
.con-js .fijo { position: sticky; top: 0; height: 100svh; }
.con-js .salida { opacity: clamp(0, (1 - var(--p, 0)) * 7, 1); will-change: opacity; } 


.hero-caja { margin-left: 48%; max-width: 30rem; }
.hero-titulo { font-size: clamp(2rem, min(3.5vw, 6.4vh), 3.5rem); line-height: 1.06; }
.hero-titulo .luz { display: block; }
.hero-texto { margin-top: 1.4rem; }


.historia .fijo { justify-content: flex-end; padding-bottom: 16svh; }
.historia-caja { max-width: 34rem; }
.historia-titulo { font-size: clamp(1.4rem, min(2.3vw, 4.4vh), 2.3rem); line-height: 1.15; }
.historia-texto { margin-top: 1.1rem; }


.nace .fijo { justify-content: flex-start; align-items: flex-end; padding-top: 20svh; }
.nace-caja { max-width: 32rem; margin-right: 6%; }
.nace-titulo { font-size: clamp(1.6rem, min(2.8vw, 5vh), 2.7rem); line-height: 1.1; }
.nace-texto { margin-top: 1.1rem; }

.respiro { height: 80svh; }


.conecta .fijo { justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 13svh; }
.conecta-caja { max-width: 40rem; }
.conecta-frase { font-size: clamp(1.25rem, min(2vw, 3.8vh), 2rem); line-height: 1.22; }
.conecta-sub { margin: 1.1rem auto 0; }


.balanza-fijo { align-items: center; text-align: center; gap: 0.35em; font-size: clamp(1.5rem, min(3.4vw, 6vh), 3.2rem); line-height: 1.1; }
.balanza-menos { color: rgb(245 243 250 / calc(1 - var(--tacha, 0) * 0.65)); }
.tachable { background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 55% / calc(var(--tacha, 0) * 100%) 2px; }
.balanza-mas { color: var(--lila-claro); opacity: calc(0.12 + var(--mas, 0) * 0.88); transform: translateY(calc((1 - var(--mas, 0)) * 20px)); }
.sin-js .balanza-mas { opacity: 1; transform: none; }


.pd { min-height: 120svh; display: grid; place-items: end center; padding: 42svh var(--borde) 10svh; perspective: 1400px; }

.ventana { width: min(720px, 100%); background: rgb(14 12 22 / 0.93); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 14px; overflow: hidden;
  box-shadow: 0 -20px 80px rgb(60 110 255 / 0.12), 0 40px 120px rgb(0 0 0 / 0.7); transform-origin: 50% 100%;
  transition: transform 1.6s var(--entra), opacity 1.2s var(--entra); }

.pd.espera .ventana { transition: none; will-change: transform, opacity; position: relative; overflow: visible;
  opacity: clamp(0, var(--e, 0) * 2.5, 1);
  transform: translateY(calc((1 - var(--e, 0)) * 220px)) rotateX(calc((1 - var(--e, 0)) * 28deg)) scale(calc(0.7 + var(--e, 0) * 0.3)); }
.pd.espera .ventana::before { content: ''; position: absolute; inset: -2px; border-radius: 16px; pointer-events: none; opacity: var(--luz, 0);
  box-shadow: 0 0 0 1px rgb(150 170 255 / 0.55), 0 0 60px rgb(80 130 255 / 0.55), 0 0 140px rgb(139 108 255 / 0.4); }
.pd.espera .ventana-barra, .pd.espera .ventana-cuerpo { border-radius: inherit; }
.pd.espera .ventana-cuerpo > * { opacity: clamp(0, (var(--x, 0) - 0.5 - var(--i, 0) * 0.07) * 6, 1);
  transform: translateY(calc(clamp(0, 1 - (var(--x, 0) - 0.5 - var(--i, 0) * 0.07) * 6, 1) * 16px)); }
.pd.espera .ventana-botones i { transition: none; }
.pd.espera .ventana-botones i:nth-child(1) { background: color-mix(in srgb, var(--lila-claro) calc(clamp(0, (var(--x, 0) - 0.85) * 8, 1) * 100%), rgb(255 255 255 / 0.16)); }
.pd.espera .ventana-botones i:nth-child(2) { background: color-mix(in srgb, var(--azul) calc(clamp(0, (var(--x, 0) - 0.88) * 8, 1) * 100%), rgb(255 255 255 / 0.16)); }
.pd.espera .ventana-botones i:nth-child(3) { background: color-mix(in srgb, var(--blanco) calc(clamp(0, (var(--x, 0) - 0.91) * 8, 1) * 100%), rgb(255 255 255 / 0.16)); }
.ventana-barra { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / 0.07); font-size: 0.76rem; color: var(--niebla); }
.ventana-botones { display: flex; gap: 7px; }
.ventana-botones i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.ventana-nombre { flex: 1; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.ventana-cuerpo { padding: clamp(22px, 4.5vw, 44px); font-size: clamp(0.95rem, 1.15vw, 1.04rem); line-height: 1.65; color: rgb(245 243 250 / 0.82); }
.ventana-cuerpo p + p { margin-top: 1em; }
.pd-titulo { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.15; color: var(--blanco); margin-bottom: 1.3rem; text-shadow: none; }
.pd-marca { color: var(--azul); }
.ventana-cuerpo strong { color: var(--blanco); font-weight: 600; }


.cierre { min-height: 110svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 44svh var(--borde) 12svh; gap: clamp(2rem, 5vh, 3.2rem); }
.cierre-titulo { font-size: clamp(1.35rem, min(2.4vw, 4.4vh), 2.3rem); line-height: 1.18; max-width: 30ch; outline: none; }
.cierre-logo { width: min(240px, 56vw); height: auto; }
.plaza { width: min(560px, 100%); }
.plaza-etiqueta { display: block; font-size: 0.78rem; color: var(--niebla); text-align: left; margin-bottom: 8px; }
.plaza-fila { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgb(18 15 26 / 0.8); border: 1px solid rgb(255 255 255 / 0.12); }
.plaza-fila:focus-within { border-color: var(--lila); }
.plaza-correo { flex: 1; min-width: 0; background: none; border: 0; padding: 0 16px; outline: none; font-size: 1rem; }
.plaza-correo::placeholder { color: rgb(245 243 250 / 0.38); }

.boton-cta { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 8px 8px 8px 20px; background: var(--blanco); color: var(--fondo); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: box-shadow 0.3s; }
.boton-bola { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E6DEFF, var(--lila) 55%, #4B2EE0); box-shadow: 0 0 14px rgb(139 108 255 / 0.8); transition: transform 0.4s var(--entra); }
.boton-cta:hover { box-shadow: 0 0 40px rgb(139 108 255 / 0.45); }
.boton-cta:hover .boton-bola { transform: translateX(3px) scale(1.08); }
.plaza-error { margin-top: 10px; color: var(--rojo); font-size: 0.9rem; }
.gracias { outline: none; }
.gracias h3 { font-weight: 500; font-size: 1.5rem; }
.vista-previa { margin-top: 10px; font-size: 0.82rem; color: var(--niebla); }

.cambiar-titular { position: fixed; left: 14px; bottom: 14px; z-index: 30; padding: 6px 10px; border-radius: 6px; border: 1px dashed rgb(255 255 255 / 0.25); background: rgb(4 3 6 / 0.7); color: var(--niebla); font-size: 0.72rem; cursor: pointer; }
.sin-js .cambiar-titular { display: none; }

.etiqueta-revision { position: fixed; right: 14px; bottom: 14px; z-index: 30; padding: 6px 10px; border-radius: 6px; border: 1px dashed rgb(255 255 255 / 0.25); background: rgb(4 3 6 / 0.7); color: var(--niebla); font-size: 0.72rem; pointer-events: none; }


.sin-js .fijo { min-height: auto; padding-top: 18vh; padding-bottom: 6vh; }
.sin-js .pd, .sin-js .cierre { min-height: auto; padding-top: 18vh; padding-bottom: 6vh; }
.sin-js .respiro { display: none; }


@media (max-width: 760px) {
  .pildora { font-size: 0.62rem; padding: 8px 12px; }
  .hero .fijo { justify-content: flex-end; padding-bottom: 14svh; }
  .hero-caja { margin-left: 0; }
  .nace .fijo { align-items: flex-start; }
  .nace-caja { margin-right: 0; }
  .plaza-fila { flex-direction: column; border-radius: 18px; }
  .plaza-correo { padding: 12px 14px; }
  .boton-cta { width: 100%; justify-content: space-between; }
  .etiqueta-revision { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .con-js .fijada { height: auto; }
  .con-js .fijo { position: static; height: auto; }
  .balanza-mas { opacity: 1; transform: none; }
  .con-js .revela { opacity: 1; transform: none; filter: none; }
  .pd.espera .ventana, .pd.espera .ventana-cuerpo > * { opacity: 1; transform: none; }
  .pd.espera .ventana::before { opacity: 0; }
  .con-js .salida { opacity: 1; }
}