/* ═══════════════════════════════════════════════════════════════════
   Datifica RRHH — web de presentación (www.datifica.es)
   Las animaciones ligadas al scroll leen la variable --p (0 → 1) que
   js/animaciones.js escribe en cada elemento con [data-scroll].
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --tinta: #0b0d17;
  --tinta-2: #131629;
  --tinta-3: #1c2040;
  --crema: #fbf9f4;
  --papel: #ffffff;
  --linea: #e7e3da;
  --texto: #14162b;
  --gris: #5b5f78;
  --gris-claro: #a9adc6;
  --acento: #5c57c8;
  --acento-2: #8f8bff;
  --menta: #35d39b;
  --coral: #ff7b6b;
  --ambar: #ffb547;
  --radio: 22px;
  --ancho: 1200px;
  --titulos: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--cuerpo); font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--tinta); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(var(--ancho), 100% - 48px); margin-inline: auto; }
.contenedor--estrecho { width: min(820px, 100% - 48px); }

h2 { font-family: var(--titulos); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-family: var(--titulos); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.antetitulo { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); margin-bottom: 18px; }
.cabecera { text-align: center; padding-bottom: clamp(40px, 6vw, 72px); }
.cabecera__texto { max-width: 620px; margin: 22px auto 0; color: var(--gris); font-size: 1.1rem; }
.cabecera--clara h2 { color: #fff; }
.cabecera--clara .antetitulo { color: var(--acento-2); }

/* ── Botones ───────────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1; transition: transform .25s var(--suave), box-shadow .25s, background .25s, color .25s; will-change: transform; }
.boton svg { font-size: 1.15em; transition: transform .25s var(--suave); }
.boton:hover { transform: translateY(-2px); }
.boton:hover svg { transform: translateX(3px); }
.boton--principal { background: linear-gradient(135deg, #7d77ff, #5550cf); color: #fff; box-shadow: 0 10px 30px -8px rgba(110, 104, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.boton--principal:hover { box-shadow: 0 16px 40px -8px rgba(110, 104, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.boton--fantasma { color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); }
.boton--fantasma:hover { background: rgba(255, 255, 255, .1); }
.boton--blanco { background: #fff; color: var(--tinta); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .5); }
.boton--nav { white-space: nowrap; padding: 11px 20px; font-size: .92rem; background: #fff; color: var(--tinta); }

/* ── Barra de progreso y navegación ────────────────────────────── */
.progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--acento-2), var(--menta)); transform-origin: 0 50%; transform: scaleX(var(--pagina, 0)); }

.nav { position: fixed; top: 16px; left: 50%; z-index: 50; width: min(1160px, 100% - 28px); transform: translateX(-50%); display: flex; align-items: center; gap: 28px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgba(13, 15, 28, .55); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: #fff; transition: background .3s, box-shadow .3s, top .3s; }
.nav--compacta { top: 10px; background: rgba(13, 15, 28, .82); box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .7); }
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulos); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: #fff; }
.marca svg { width: 30px; height: 30px; stroke: none; }
.marca b { font-weight: 600; color: var(--acento-2); margin-left: 1px; }
.nav__enlaces { display: flex; gap: 4px; margin-left: auto; }
.nav__enlaces a { white-space: nowrap; padding: 9px 14px; border-radius: 999px; font-size: .93rem; font-weight: 600; color: rgba(255, 255, 255, .72); transition: color .2s, background .2s; }
.nav__enlaces a:hover, .nav__enlaces a.activo { color: #fff; background: rgba(255, 255, 255, .09); }
.nav__menu { display: none; }

/* ── Portada ───────────────────────────────────────────────────── */
.portada { position: relative; padding: clamp(118px, 15vh, 170px) 0 0; color: #fff; overflow: clip; }
.portada__fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.malla { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); transform: translateY(calc(var(--p, 0) * 120px)); }
.orbe { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .7; will-change: transform; }
.orbe--a { width: 620px; height: 620px; left: -160px; top: -180px; background: #5b54e6; animation: deriva 16s ease-in-out infinite alternate; }
.orbe--b { width: 520px; height: 520px; right: -140px; top: 60px; background: #1fa0c9; opacity: .45; animation: deriva 20s ease-in-out infinite alternate-reverse; }
.orbe--c { width: 460px; height: 460px; left: 40%; top: 420px; background: #c14fd8; opacity: .3; animation: deriva 24s ease-in-out infinite alternate; }
@keyframes deriva { from { translate: 0 0; } to { translate: 60px 50px; } }

.portada__texto { position: relative; z-index: 2; width: min(1120px, 100% - 48px); margin-inline: auto; text-align: center; transform: translateY(calc(var(--p, 0) * -60px)); opacity: calc(1 - var(--p, 0) * 1.3); }
.etiqueta { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .86); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 0 rgba(53, 211, 155, .7); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(53, 211, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 211, 155, 0); } }
.titular { margin: 22px 0 20px; font-family: var(--titulos); font-weight: 600; font-size: clamp(2.3rem, 5.5vw, 4.5rem); line-height: 1.02; letter-spacing: -.045em; }
.titular .linea { display: block; overflow: hidden; padding-bottom: .12em; }
.titular .linea > span { display: inline-block; }
.degradado { background: linear-gradient(100deg, #a9a5ff 0%, #7fd6ff 50%, #6ff0c0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entradilla { max-width: 700px; margin: 0 auto; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, .72); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* entrada inicial de la portada */
.js .entra { opacity: 0; transform: translateY(110%); animation: sube .9s var(--suave) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
.js .etiqueta.entra, .js .entradilla.entra, .js .portada__acciones.entra { transform: translateY(24px); }
@keyframes sube { to { opacity: 1; transform: none; } }

/* escena 3D de dispositivos: se endereza al hacer scroll */
.escena { position: relative; z-index: 2; width: min(1180px, 100% - 48px); margin: clamp(44px, 6vh, 72px) auto 0; perspective: 1800px; padding-bottom: clamp(60px, 9vw, 130px); }
.escena__plano { position: relative; transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(calc((1 - var(--p, 0)) * 26deg)) scale(calc(.9 + var(--p, 0) * .1)); will-change: transform; }
.escena__panel { width: 78%; margin-inline: auto; }
.escena__kiosko { position: absolute; left: -1%; bottom: -9%; width: 25%; transform: translate3d(calc((1 - var(--p, 0)) * -70px), calc((1 - var(--p, 0)) * 120px), 60px) rotate(calc((1 - var(--p, 0)) * -6deg)); translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px); transition: translate .5s var(--suave); }
.escena__movil { position: absolute; right: 1%; bottom: -11%; width: 17.5%; transform: translate3d(calc((1 - var(--p, 0)) * 70px), calc((1 - var(--p, 0)) * 170px), 90px) rotate(calc((1 - var(--p, 0)) * 7deg)); translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 12px); transition: translate .5s var(--suave); }

.navegador { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 60px 140px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 120px -20px rgba(110, 104, 255, .45); }
.navegador__barra { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #ecebf3; }
.navegador__barra i { width: 10px; height: 10px; border-radius: 50%; background: #d0cedd; }
.navegador__barra span { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: #fff; font-size: .72rem; color: #7b7e96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.movil { border-radius: clamp(18px, 2.6vw, 36px); padding: clamp(4px, .6vw, 8px); background: #0a0b12; box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14); }
.movil img { border-radius: clamp(14px, 2.1vw, 29px); }
.tableta { border-radius: clamp(14px, 1.8vw, 26px); padding: clamp(5px, .8vw, 11px); background: #0a0b12; box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14); }
.tableta img { border-radius: clamp(9px, 1.1vw, 16px); }

.flotante { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: var(--texto); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55); font-size: .86rem; line-height: 1.3; white-space: nowrap; }
.flotante b { display: block; font-weight: 700; }
.flotante small { color: var(--gris); font-size: .78rem; }
.flotante__icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #ecebff; color: var(--acento); font-size: 1.2rem; }
.flotante__icono--verde { background: #dcf8ec; color: #159a68; }
.flotante--a { left: 4%; top: 18%; transform: translate3d(0, calc((1 - var(--p, 0)) * 90px), 120px); animation: flota 6s ease-in-out infinite; }
.flotante--b { right: 3%; top: 8%; transform: translate3d(0, calc((1 - var(--p, 0)) * 140px), 140px); animation: flota 7s ease-in-out -2s infinite; }
@keyframes flota { 50% { translate: 0 -12px; } }

/* ── Cifras ────────────────────────────────────────────────────── */
.cifras { position: relative; z-index: 3; padding: clamp(20px, 4vw, 50px) 0 clamp(70px, 9vw, 120px); color: #fff; }
.cifras__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cifra { padding: 30px 26px; border-radius: var(--radio); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .1); }
.cifra strong { display: block; font-family: var(--titulos); font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1; letter-spacing: -.04em; background: linear-gradient(120deg, #fff 30%, #b9b5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra span { display: block; margin-top: 12px; color: rgba(255, 255, 255, .62); font-size: .98rem; }

/* ── Aparición al entrar en pantalla ───────────────────────────── */
.js .revela { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s var(--suave), transform .8s var(--suave); transition-delay: calc(var(--i, 0) * 90ms); }
.js .revela.visible { opacity: 1; transform: none; }

/* ── Aplicaciones: escenario fijo ──────────────────────────────── */
.apps { background: var(--crema); padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); border-radius: 44px 44px 0 0; position: relative; z-index: 4; }
.apps__cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.apps__escenario { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.apps__halo { position: absolute; inset: 12% 2% 10%; border-radius: 40px; background: linear-gradient(150deg, #e9e7ff, #f4eefc 55%, #e2f6f1); transition: background .8s, filter .8s; }
.apps__escenario[data-activo="0"] .apps__halo { background: linear-gradient(150deg, #dff5ea, #eef7e6 55%, #e6f0ff); }
.apps__escenario[data-activo="1"] .apps__halo { background: linear-gradient(150deg, #e9e7ff, #f6ecfb 55%, #ffeef0); }
.apps__escenario[data-activo="2"] .apps__halo { background: linear-gradient(150deg, #e3ecff, #ebe9ff 55%, #f4eefc); }
.apps__escenario[data-activo="3"] .apps__halo { background: linear-gradient(150deg, #101327, #1c2040 60%, #2a2360); }

.vista { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(60px) scale(.94); transition: opacity .6s var(--suave), transform .8s var(--suave), visibility 0s .6s; }
.vista.activa { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.vista.pasada { transform: translateY(-60px) scale(.94); }
.vista--kiosko .tableta { width: min(52%, 46vh); }
.vista--moviles .movil { width: min(34%, 29vh); }
.vista--moviles .movil--atras { position: absolute; transform: translate(-46%, 4%) rotate(-7deg); filter: brightness(.96); }
.vista--moviles .movil--frente { position: relative; transform: translate(34%, -2%) rotate(4deg); }
.vista--panel .navegador { width: 92%; box-shadow: 0 40px 90px -30px rgba(30, 30, 80, .45), 0 0 0 1px rgba(20, 22, 43, .08); }
.vista .movil, .vista .tableta { box-shadow: 0 40px 80px -26px rgba(30, 30, 80, .5), 0 0 0 1px rgba(20, 22, 43, .1); }

.chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 14px 34px -14px rgba(30, 30, 80, .4); font-size: .86rem; font-weight: 700; color: var(--texto); }
.chip svg { color: var(--acento); font-size: 1.15rem; }
.chip--1 { left: 6%; top: 26%; animation: flota 6s ease-in-out infinite; }
.chip--2 { right: 4%; top: 44%; animation: flota 7s ease-in-out -3s infinite; }
.chip--3 { left: 10%; bottom: 22%; animation: flota 8s ease-in-out -1s infinite; }
.flotante--aviso { left: 4%; bottom: 20%; box-shadow: 0 24px 60px -18px rgba(30, 30, 80, .45); animation: flota 6s ease-in-out infinite; }
.flotante--panel { right: 0; bottom: 20%; box-shadow: 0 24px 60px -18px rgba(30, 30, 80, .45); animation: flota 7s ease-in-out infinite; }

.tablero { width: min(78%, 440px); padding: 22px; border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); font-size: .92rem; }
.tablero header { display: flex; justify-content: space-between; align-items: center; font-family: var(--titulos); font-size: 1.15rem; }
.vivo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cuerpo); font-size: .76rem; color: rgba(255, 255, 255, .7); }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); animation: latido 2s infinite; }
.tablero__resumen { display: flex; gap: 8px; margin: 16px 0 6px; }
.tablero__resumen span { flex: 1; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: .78rem; color: rgba(255, 255, 255, .7); }
.tablero__resumen b { display: block; font-family: var(--titulos); font-size: 1.5rem; line-height: 1.1; color: #fff; }
.tablero__dep h4 { margin: 16px 0 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 700; }
.tablero__dep p { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tablero__dep em { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(143, 139, 255, .25); font-style: normal; font-size: .68rem; font-weight: 700; }
.tablero__dep small { margin-left: auto; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.e { width: 9px; height: 9px; border-radius: 50%; }
.e--dentro { background: var(--menta); box-shadow: 0 0 10px var(--menta); }
.e--pausa { background: var(--ambar); }
.e--fuera { background: #5d6079; }

.apps__carril { position: absolute; left: -6px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
.apps__carril li { width: 5px; height: 34px; border-radius: 3px; background: rgba(92, 87, 200, .18); transition: background .4s, height .4s; }
.apps__escenario[data-activo="0"] .apps__carril li:nth-child(1),
.apps__escenario[data-activo="1"] .apps__carril li:nth-child(2),
.apps__escenario[data-activo="2"] .apps__carril li:nth-child(3),
.apps__escenario[data-activo="3"] .apps__carril li:nth-child(4) { background: var(--acento); height: 54px; }

.paso { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .28; transition: opacity .5s; }
.paso.activo { opacity: 1; }
.paso__num { font-family: var(--titulos); font-size: 1rem; font-weight: 600; color: var(--acento); letter-spacing: .1em; }
.paso h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.035em; margin: 8px 0 10px; }
.paso__lema { font-size: 1.2rem; color: var(--gris); margin-bottom: 26px; max-width: 30ch; }
.paso li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); font-size: 1rem; }
.paso li svg { margin-top: 4px; font-size: 1.1rem; color: var(--acento); stroke-width: 2.4; }

/* ── Un día: scroll horizontal ─────────────────────────────────── */
.dia { position: relative; z-index: 4; background: var(--tinta); color: #fff; }
.dia__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 5vh, 56px); }
.dia__cielo { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at calc(10% + var(--p, 0) * 80%) 0%, rgba(255, 181, 71, calc(.28 - var(--p, 0) * .2)), transparent 60%), radial-gradient(ellipse 70% 80% at calc(90% - var(--p, 0) * 60%) 100%, rgba(92, 87, 200, calc(.2 + var(--p, 0) * .35)), transparent 65%); }
.dia__cabecera { position: relative; }
.dia__cabecera .antetitulo { color: var(--ambar); }
.dia__cabecera h2 { font-size: clamp(1.7rem, 3.6vw, 3rem); }
.dia__reloj { position: relative; height: 2px; margin-top: 28px; background: rgba(255, 255, 255, .14); border-radius: 2px; }
.dia__reloj::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ambar), var(--acento-2)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); border-radius: 2px; }
.dia__sol { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 0 30px 6px rgba(255, 200, 120, .6); }
.dia__pista { position: relative; display: flex; gap: 22px; padding-inline: max(24px, calc((100vw - var(--ancho)) / 2)); width: max-content; transform: translate3d(calc(var(--p, 0) * var(--recorrido, 0) * -1px), 0, 0); will-change: transform; }
.momento { flex: none; width: min(380px, 78vw); padding: 30px; border-radius: 26px; background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .11); display: flex; flex-direction: column; }
.momento time { font-family: var(--titulos); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.momento__icono { display: grid; place-items: center; width: 46px; height: 46px; margin: 22px 0 16px; border-radius: 14px; background: rgba(143, 139, 255, .18); color: var(--acento-2); font-size: 1.4rem; }
.momento h3 { font-size: 1.35rem; margin-bottom: 10px; }
.momento p { color: rgba(255, 255, 255, .68); font-size: .98rem; }
.momento--final { justify-content: center; align-items: flex-start; gap: 16px; background: linear-gradient(150deg, #5c57c8, #3a35a0); border-color: transparent; }
.momento--final h3 { font-size: 2rem; letter-spacing: -.03em; }
.momento--final p { color: rgba(255, 255, 255, .85); }
.momento--final .boton { background: #fff; color: var(--tinta); box-shadow: none; margin-top: 6px; }

/* ── Funcionalidades ───────────────────────────────────────────── */
.funciones { position: relative; z-index: 4; background: var(--crema); padding: clamp(80px, 10vw, 140px) 0; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta { position: relative; overflow: hidden; padding: 28px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); transition: transform .35s var(--suave), box-shadow .35s, border-color .35s, opacity .8s var(--suave); }
.tarjeta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--rx, 50%) var(--ry, 0%), rgba(92, 87, 200, .13), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -26px rgba(40, 36, 120, .35); border-color: #d2cff5; }
.tarjeta:hover::before { opacity: 1; }
.tarjeta__icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: #ecebff; color: var(--acento); font-size: 1.45rem; transition: transform .35s var(--suave), background .35s, color .35s; }
.tarjeta:hover .tarjeta__icono { transform: rotate(-8deg) scale(1.08); background: var(--acento); color: #fff; }
.tarjeta h3 { font-size: 1.2rem; margin-bottom: 8px; }
.tarjeta p { color: var(--gris); font-size: .97rem; }
.tarjeta--grande { grid-row: span 2; background: linear-gradient(160deg, #14162b, #25235c); color: #fff; border-color: transparent; display: flex; flex-direction: column; }
.tarjeta--grande h3 { font-size: 1.7rem; letter-spacing: -.025em; }
.tarjeta--grande p { color: rgba(255, 255, 255, .72); font-size: 1.02rem; }
.tarjeta--grande .tarjeta__icono { background: rgba(143, 139, 255, .2); color: var(--acento-2); }
.tarjeta--ancha { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; }
.tarjeta--ancha > :not(.adorno) { grid-column: 1; }
.adorno { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.circuito { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 30px; }
.circuito span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .82rem; font-weight: 700; }
.circuito span.ok { background: var(--menta); color: #06281c; }
.circuito i { width: 22px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .6)); background-size: 200% 100%; animation: corre 1.6s linear infinite; }
@keyframes corre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.barras { align-self: end; display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.barras i { width: 18px; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--acento-2), var(--acento)); transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--suave); }
.barras i:nth-child(2) { transition-delay: .08s; } .barras i:nth-child(3) { transition-delay: .16s; } .barras i:nth-child(4) { transition-delay: .24s; } .barras i:nth-child(5) { transition-delay: .32s; } .barras i:nth-child(6) { transition-delay: .4s; } .barras i:nth-child(7) { transition-delay: .48s; }
.visible .barras i, html:not(.js) .barras i { transform: none; }

.onda { display: flex; align-items: center; gap: 6px; height: 90px; padding-right: 10px; }
.onda i { width: 6px; height: 100%; border-radius: 6px; background: linear-gradient(180deg, var(--acento-2), var(--acento)); transform: scaleY(.25); animation: voz 1.2s ease-in-out infinite alternate; }
.onda i:nth-child(2) { animation-delay: -.9s; } .onda i:nth-child(3) { animation-delay: -.3s; } .onda i:nth-child(4) { animation-delay: -.7s; } .onda i:nth-child(5) { animation-delay: -.1s; } .onda i:nth-child(6) { animation-delay: -.5s; } .onda i:nth-child(7) { animation-delay: -1s; } .onda i:nth-child(8) { animation-delay: -.2s; } .onda i:nth-child(9) { animation-delay: -.6s; }
@keyframes voz { to { transform: scaleY(1); } }
.idiomas { display: grid; gap: 10px; justify-items: end; }
.idiomas span { padding: 10px 18px; border-radius: 18px 18px 4px 18px; background: #ecebff; color: var(--acento); font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.idiomas span:last-child { background: var(--acento); color: #fff; border-radius: 18px 18px 18px 4px; margin-right: 34px; }

/* ── Cinta de palabras ─────────────────────────────────────────── */
.cinta { position: relative; z-index: 4; background: var(--crema); padding: 10px 0 clamp(70px, 9vw, 120px); overflow: hidden; }
.cinta__fila { white-space: nowrap; font-family: var(--titulos); font-weight: 600; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1.12; letter-spacing: -.04em; will-change: transform; }
.cinta__fila--a { color: var(--texto); transform: translate3d(calc(var(--p, 0) * -32%), 0, 0); }
.cinta__fila--b { color: transparent; -webkit-text-stroke: 1.5px #b9b5e6; transform: translate3d(calc(-34% + var(--p, 0) * 32%), 0, 0); }

/* ── Vídeo ─────────────────────────────────────────────────────── */
.video { position: relative; z-index: 4; background: var(--tinta); padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); border-radius: 44px 44px 0 0; margin-top: -44px; }
.video__marco { width: min(1180px, 100% - 32px); margin-inline: auto; border-radius: calc(44px - var(--p, 0) * 22px); overflow: hidden; transform: scale(calc(.8 + var(--p, 0) * .2)); transform-origin: 50% 0; box-shadow: 0 60px 140px -40px rgba(110, 104, 255, calc(.25 + var(--p, 0) * .45)), 0 0 0 1px rgba(255, 255, 255, .1); will-change: transform; background: #000; }
.video__marco video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__nota { margin-top: 22px; text-align: center; color: rgba(255, 255, 255, .45); font-size: .88rem; }

/* ── Ventajas ──────────────────────────────────────────────────── */
.ventajas { position: relative; z-index: 4; background: var(--tinta); color: #fff; padding: clamp(60px, 8vw, 110px) 0 clamp(90px, 11vw, 150px); }
.ventajas .antetitulo { color: var(--acento-2); }
.manifiesto { font-family: var(--titulos); font-weight: 500; font-size: clamp(1.7rem, 4.2vw, 3.5rem); line-height: 1.16; letter-spacing: -.03em; max-width: 1040px; }
.manifiesto .pal { opacity: var(--o, .16); transition: opacity .25s linear; }
.ventajas__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(50px, 7vw, 90px); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; overflow: hidden; }
.ventaja { padding: 34px 30px; background: var(--tinta); transition: background .35s, opacity .8s var(--suave), transform .8s var(--suave); }
.ventaja:hover { background: var(--tinta-2); }
.ventaja > svg { font-size: 1.9rem; color: var(--acento-2); margin-bottom: 18px; }
.ventaja h3 { font-size: 1.3rem; margin-bottom: 8px; }
.ventaja p { color: rgba(255, 255, 255, .64); font-size: .98rem; }

/* ── Cómo empezar ──────────────────────────────────────────────── */
.empezar { position: relative; z-index: 4; background: var(--crema); padding: clamp(80px, 10vw, 140px) 0; border-radius: 44px 44px 0 0; margin-top: -44px; }
.camino { position: relative; width: min(860px, 100% - 48px); display: grid; gap: clamp(36px, 6vw, 70px); }
.camino__linea { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; background: var(--linea); }
.camino__linea span { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--acento-2), var(--acento) 60%, var(--menta)); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.hito { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 26px; align-items: start; }
.hito__nodo { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--papel); border: 3px solid var(--linea); font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; color: var(--gris-claro); transition: border-color .4s, background .4s, color .4s, transform .5s var(--suave), box-shadow .4s; }
.hito > div { padding: 6px 0; opacity: .35; transform: translateX(16px); transition: opacity .5s, transform .6s var(--suave); }
.hito h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 8px; letter-spacing: -.025em; }
.hito p { color: var(--gris); max-width: 56ch; }
.hito.alcanzado .hito__nodo { border-color: var(--acento); background: var(--acento); color: #fff; transform: scale(1.08); box-shadow: 0 12px 30px -10px rgba(92, 87, 200, .7); }
.hito.alcanzado > div { opacity: 1; transform: none; }

/* ── Confianza ─────────────────────────────────────────────────── */
.confianza { position: relative; z-index: 4; background: var(--crema); padding: 0 0 clamp(80px, 10vw, 130px); }
.confianza__rejilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: clamp(36px, 5vw, 64px); border-radius: 36px; background: var(--papel); border: 1px solid var(--linea); }
.confianza h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.confianza__lista { display: grid; gap: 6px; }
.confianza__lista li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.confianza__lista li:last-child { border-bottom: 0; }
.confianza__lista svg { font-size: 1.5rem; color: var(--acento); margin-top: 2px; }
.confianza__lista b { display: block; font-family: var(--titulos); font-size: 1.08rem; }
.confianza__lista span { color: var(--gris); font-size: .96rem; }

/* ── Preguntas ─────────────────────────────────────────────────── */
.preguntas { position: relative; z-index: 4; background: var(--crema); padding: 0 0 clamp(90px, 11vw, 150px); }
.preguntas h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 28px; text-align: center; }
details { border-bottom: 1px solid var(--linea); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(45deg); transition: transform .3s var(--suave); margin-right: 6px; }
details[open] summary::after { transform: rotate(-135deg); }
details p { padding: 0 4px 24px; color: var(--gris); max-width: 68ch; animation: abre .4s var(--suave); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ── Contacto ──────────────────────────────────────────────────── */
.contacto { position: relative; z-index: 4; overflow: hidden; background: var(--tinta); color: #fff; padding: clamp(100px, 14vw, 190px) 0; text-align: center; border-radius: 44px 44px 0 0; margin-top: -44px; }
.contacto__fondo { position: absolute; inset: 0; }
.contacto__fondo .orbe--a { left: 10%; top: auto; bottom: -260px; }
.contacto__fondo .orbe--b { right: 8%; top: -200px; background: #c14fd8; }
.contacto__caja { position: relative; transform: scale(calc(.9 + var(--p, 0) * .1)); opacity: calc(.3 + var(--p, 0) * .7); }
.contacto h2 { font-size: clamp(2.4rem, 7vw, 5.4rem); letter-spacing: -.045em; line-height: 1; }
.contacto p { max-width: 540px; margin: 26px auto 0; font-size: 1.15rem; color: rgba(255, 255, 255, .72); }

/* ── Pie ───────────────────────────────────────────────────────── */
.pie { position: relative; z-index: 4; background: var(--tinta); color: rgba(255, 255, 255, .6); padding: 36px 0 40px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pie nav a:hover { color: #fff; }
.pie__legal { display: flex; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin-top: 26px; font-size: .82rem; color: rgba(255, 255, 255, .4); }

/* ═══════════ Adaptación a pantallas pequeñas ═══════════ */
@media (max-width: 1100px) {
  .nav__enlaces { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 2px; padding: 12px; border-radius: 24px; background: rgba(13, 15, 28, .96); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--suave), visibility 0s .25s; }
  .nav--abierta .nav__enlaces { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__enlaces a { padding: 14px 16px; font-size: 1.05rem; }
  .boton--nav { margin-left: auto; }
  .nav__menu { display: grid; place-content: center; gap: 6px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); cursor: pointer; }
  .nav__menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--suave); }
  .nav--abierta .nav__menu span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav--abierta .nav__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .ventajas__rejilla { grid-template-columns: repeat(2, 1fr); }
  .cifras__rejilla { grid-template-columns: repeat(2, 1fr); }
  .confianza__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* escenario arriba, pegado; los textos pasan por debajo */
  .apps__cuerpo { grid-template-columns: 1fr; gap: 0; }
  .apps__escenario { top: 0; height: 52vh; height: 52svh; z-index: 2; background: var(--crema); padding-top: 70px; }
  .apps__halo { inset: 74px 0 8px; border-radius: 28px; }
  .vista { inset: 70px 0 0; }
  .vista--kiosko .tableta { width: min(46%, 30vh); }
  .vista--moviles .movil { width: min(30%, 17vh); }
  .tablero { width: 88%; padding: 14px 16px; font-size: .78rem; }
  .tablero header { font-size: 1rem; }
  .tablero__resumen { margin: 10px 0 2px; }
  .tablero__resumen span { padding: 6px 10px; }
  .tablero__resumen b { font-size: 1.15rem; }
  .tablero__dep h4 { margin: 10px 0 2px; }
  .tablero__dep p { padding: 4px 0; }
  .tablero__dep em { width: 22px; height: 22px; font-size: .6rem; }
  .tablero__dep:last-child { display: none; }
  .chip, .flotante--aviso, .flotante--panel { font-size: .74rem; padding: 7px 11px; }
  .chip--3 { display: none; }
  .flotante--aviso small, .flotante--panel small { display: none; }
  .flotante--aviso .flotante__icono, .flotante--panel .flotante__icono { width: 28px; height: 28px; font-size: .95rem; }
  .apps__carril { display: none; }
  .paso { min-height: 62vh; min-height: 62svh; justify-content: flex-start; padding: 44px 0 20px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .contenedor { width: calc(100% - 36px); }
  .boton--nav { display: none; }
  .nav__menu { margin-left: auto; }
  .portada__acciones .boton { width: 100%; justify-content: center; }
  .escena { width: calc(100% - 24px); }
  .escena__panel { width: 100%; }
  .escena__kiosko { display: none; }
  .escena__movil { width: 27%; right: 3%; bottom: -16%; }
  .flotante--a, .flotante--b { display: none; }
  .navegador__barra { height: 24px; }
  .navegador__barra i { width: 6px; height: 6px; }
  .navegador__barra span { font-size: .55rem; padding: 2px 8px; }
  .cifra { padding: 22px 18px; }
  .bento, .ventajas__rejilla { grid-template-columns: 1fr; }
  .tarjeta--ancha { grid-column: auto; grid-template-columns: 1fr; }
  .adorno { grid-column: 1; grid-row: auto; margin-top: 22px; justify-self: start; }
  .barras { height: 90px; }
  .onda { height: 60px; }
  .idiomas { justify-items: start; }
  .tarjeta--grande { grid-row: auto; }
  .apps, .video, .empezar, .contacto { border-radius: 28px 28px 0 0; }
  .momento { padding: 24px; }
  .camino__linea { left: 22px; }
  .hito { grid-template-columns: 48px 1fr; gap: 18px; }
  .hito__nodo { width: 48px; height: 48px; font-size: 1.1rem; }
}

/* ═══════════ Sin movimiento (preferencia del sistema) ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .entra, .js .revela { opacity: 1; transform: none; }
  .dia__fijo { position: static; height: auto; padding: 80px 0; overflow: visible; }
  .dia__pista { width: auto; transform: none; flex-wrap: wrap; }
  .dia__reloj { display: none; }
  .manifiesto .pal { opacity: 1; }
  .paso { opacity: 1; }
  .hito > div { opacity: 1; transform: none; }
}