/* ==========================================================================
   Akthlon — "Oscuro inmersivo"
   Paletas: magma (tarjetas) · cobalto (landings, ver [data-theme])
   ========================================================================== */

:root {
  /* --- Paleta MAGMA (tarjetas). La landing la reemplaza con [data-theme="cobalto"] --- */
  color-scheme: dark;
  --bg: #140808;           --bg-rgb: 20 8 8;
  --surface: #221010;      --line: #3D1D1A;
  --text: #FFF1E8;         --muted: #CFA89B;
  --accent: #FF5A1F;       --accent-rgb: 255 90 31;       /* relleno de accion */
  --on-accent: #1A0805;    --on-accent-rgb: 26 8 5;       /* texto sobre --accent */
  --hl: #FFB02E;                                          /* acento como texto/icono sobre la pagina */
  --accent2: #FF2E63;      --accent2-rgb: 255 46 99;
  --on-accent2: #1A0508;   --on-accent2-rgb: 26 5 8;
  --a2t: #FF6F91;                                         /* acento2 como texto (contraste AA) */
  --deep: #5A1608;         --deep-rgb: 90 22 8;
  --alert: #FF8A8A;        --alert-rgb: 255 138 138;      /* la "x" de la comparativa */
  --fg-rgb: 255 255 255;   --shadow-rgb: 0 0 0;
  --card-bg: #1A0A0A;      --screen-1: #4A1A10;  --screen-2: #120707;
  --obj-accent: #FF5A1F;   --obj-accent-rgb: 255 90 31;  --obj-on: #1A0805;  /* acento sobre objetos oscuros */
  --obj-deep-rgb: 90 22 8;
  --grain: 0.07;

  /* Movimiento: una sola escala */
  --motion-fast: 160ms;
  --motion-medium: 280ms;
  --motion-slow: 500ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  --radius: 28px;
  --pad: clamp(20px, 5vw, 72px);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Landings: paleta COBALTO */
[data-theme="cobalto"] {
  color-scheme: light;
  --bg: #EEF3FF;           --bg-rgb: 238 243 255;
  --surface: #FFFFFF;      --line: #D3DDF5;
  --text: #0A1230;         --muted: #4B5878;
  --accent: #2347FF;       --accent-rgb: 35 71 255;
  --on-accent: #FFFFFF;    --on-accent-rgb: 255 255 255;
  --hl: #2347FF;
  --accent2: #00C2FF;      --accent2-rgb: 0 194 255;
  --on-accent2: #04122B;   --on-accent2-rgb: 4 18 43;
  --a2t: #0066CC;
  --deep: #C9D6FF;         --deep-rgb: 201 214 255;
  --alert: #E0245E;        --alert-rgb: 224 36 94;
  --fg-rgb: 10 18 48;      --shadow-rgb: 20 40 120;
  --card-bg: #0A1230;      --screen-1: #1B2F8F;  --screen-2: #0A1230;
  --obj-accent: #5EE0FF;   --obj-accent-rgb: 94 224 255;  --obj-on: #04122B; --obj-deep-rgb: 27 47 143;
  --grain: 0.05;
}

/* Objetos fisicos (celular, tarjeta): siempre oscuros, tambien en temas claros */
.phone, .face, .mini-card, .mini-phone {
  --text: #F4F4F1; --muted: #A3A3AD; --fg-rgb: 255 255 255; --shadow-rgb: 0 0 0; --deep-rgb: var(--obj-deep-rgb);
  --accent: var(--obj-accent); --accent-rgb: var(--obj-accent-rgb); --hl: var(--obj-accent); --on-accent: var(--obj-on);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Grano sutil, estático */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.02; margin: 0; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.hl { color: var(--hl); }
:focus-visible { outline: 3px solid var(--a2t); outline-offset: 3px; border-radius: 8px; }

/* Luz ambiental (se desplaza con el scroll vía GSAP) */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aura i { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.aura-a { left: -30vmax; top: -40vmax; background: radial-gradient(closest-side, rgb(var(--accent2-rgb) / 0.30), transparent); }
.aura-b { right: -35vmax; bottom: -45vmax; background: radial-gradient(closest-side, rgb(var(--deep-rgb) / 0.75), rgb(var(--alert-rgb) / 0.10) 60%, transparent); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95em 1.7em; background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--accent); border-radius: 999px;
  font: 600 1rem var(--font-body); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-out);
}
.btn-sm { padding: 0.5em 1.1em; font-size: 0.9rem; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
@media (hover: hover) {
  .btn:hover { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent2); }
  .btn-ghost:hover { background: transparent; border-color: var(--a2t); color: var(--a2t); }
}
.btn:active { transform: scale(0.97); }

/* Nav flotante */
.nav {
  position: fixed; z-index: 20; top: 14px; left: 0; right: 0; margin: 0 auto;
  width: min(1100px, calc(100% - 2 * var(--pad)));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 8px 8px 22px; border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.72); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.nav nav { display: flex; gap: 28px; font-size: 0.93rem; color: var(--muted); }
.nav nav a { transition: color var(--motion-fast) var(--ease-standard); }
@media (hover: hover) { .nav nav a:hover { color: var(--hl); } }
.logo { display: inline-flex; align-items: center; gap: 6px; font: 700 1.35rem var(--font-display); letter-spacing: -0.03em; }
.logo .ico { color: var(--hl); }
.logo-img { height: 36px; width: auto; }
body > footer .logo-img { height: 34px; }
@media (max-width: 720px) { .nav nav { display: none; } }

/* --------------------------------------------------------------------------
   Escena 1 · Hero
   Estado base = composición final (sin JS / reduced motion / móvil).
   GSAP anima desde el estado inicial hasta este.
   -------------------------------------------------------------------------- */
.hero-pin {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 84px var(--pad) 22px; text-align: center;
}
.hero-head { display: grid; justify-items: center; gap: 12px; }
.eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgb(var(--accent2-rgb) / 0.16); color: var(--accent2);
  font: 500 0.75rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 5.8vw, 5.2rem); font-weight: 700; line-height: 0.95; }
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
.ln > span { display: block; }
.lead { max-width: 42em; color: var(--muted); font-size: 1.12rem; }
.cap-2 { display: none; position: absolute; top: 120px; left: 0; right: 0; font: 700 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); letter-spacing: -0.03em; }

.stage { position: relative; container-type: size; display: grid; place-items: center; min-height: 0; }
.stage > * { grid-area: 1 / 1; }

.card-pos { perspective: 1400px; width: min(440px, 52cqw, calc(86cqh * 1.586)); margin-right: 22%; position: relative; z-index: 2; }
.card-pos { pointer-events: none; }
.card-tilt, .card-rot, .card3d { transform-style: preserve-3d; }
.card-rot { transform: rotate(-6deg); }
.card3d { position: relative; aspect-ratio: 1.586; }

.face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6.5% / 10%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 7% 8%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left;
  box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / 0.55);
}
.front {
  background: radial-gradient(120% 100% at 100% 0%, rgb(var(--accent2-rgb) / 0.95), transparent 58%),
              radial-gradient(90% 80% at 0% 100%, rgb(var(--deep-rgb) / 0.9), transparent 60%), var(--card-bg);
  border: 1.5px solid var(--accent);
}
.back { background: var(--accent); color: var(--on-accent); transform: rotateY(180deg); justify-content: space-between; }
.card-ico { position: absolute; top: 9%; right: 8%; width: 11%; height: auto; aspect-ratio: 1; color: var(--accent); }
.card-brand { position: absolute; top: 9%; left: 8%; font: 700 clamp(1rem, 2.2cqw, 1.5rem) var(--font-display); color: var(--text); letter-spacing: -0.03em; }
.card-name { font: 700 clamp(1.1rem, 3cqw, 2rem) var(--font-display); color: var(--accent); line-height: 1.1; }
.card-role { font-size: clamp(0.75rem, 1.6cqw, 1rem); opacity: 0.8; }
.chip { width: 38%; margin: 2% auto 0; }
.card-url { font: 500 clamp(0.75rem, 1.8cqw, 1.05rem) var(--font-mono); text-align: center; }
.sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(var(--fg-rgb) / 0.2) 48%, rgb(var(--alert-rgb) / 0.14) 54%, transparent 65%);
  background-size: 260% 100%; background-position: calc(var(--sx, 0.25) * 100%) 0;
}

.phone {
  position: relative; z-index: 1; margin-left: 26%;
  height: min(98cqh, 580px); aspect-ratio: 9 / 18.5;
  padding: 9px; border-radius: 42px; background: #060607;
  border: 2px solid #3b3b44;
  box-shadow: inset 0 0 0 1.5px #15151a, inset 0 0 0 3px rgb(var(--fg-rgb) / 0.05), 0 40px 80px rgb(var(--shadow-rgb) / 0.6), 0 0 80px rgb(var(--accent2-rgb) / 0.25);
}
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: linear-gradient(165deg, var(--screen-1), var(--screen-2) 65%); }
.notch { position: absolute; top: 10px; left: 50%; width: 31%; height: 19px; margin-left: -15.5%; border-radius: 99px; background: #000; z-index: 4; box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / 0.04); }
.notch::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a63, #0b0f1c 70%); }
.sb { position: absolute; width: 3px; border-radius: 2px; background: #2c2c33; }
.sb-l1 { left: -4px; top: 18%; height: 7%; }
.sb-l2 { left: -4px; top: 28%; height: 11%; }
.sb-r { right: -4px; top: 24%; height: 15%; }
.status { position: absolute; z-index: 3; top: 10px; left: 0; right: 0; height: 19px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 22px; font: 600 0.66rem var(--font-body); color: #fff; }
.sys { display: inline-flex; align-items: center; gap: 5px; }
.lock-ui { position: absolute; z-index: 2; top: 31%; left: 0; right: 0; display: grid; justify-items: center; gap: 4px; opacity: 0; pointer-events: none; }
.lock-ui b { font: 500 clamp(2.4rem, 4.6cqw, 3.2rem)/1 var(--font-display); letter-spacing: -0.04em; }
.lock-ui span { font-size: 0.74rem; color: rgb(var(--fg-rgb) / 0.65); }
.nfc-toast { position: absolute; z-index: 3; top: 38px; left: 8px; right: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgb(44 44 50 / 0.82); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.4), inset 0 0 0 1px rgb(var(--fg-rgb) / 0.08); opacity: 0; pointer-events: none; }
.toast-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--on-accent); }
.toast-txt { display: grid; line-height: 1.25; text-align: left; min-width: 0; }
.toast-txt b { font: 700 0.7rem var(--font-body); }
.toast-txt em { font: 600 0.7rem var(--font-body); font-style: normal; color: #fff; }
.toast-txt small { font-size: 0.62rem; color: rgb(var(--fg-rgb) / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgb(var(--fg-rgb) / 0.11) 0%, transparent 28%, transparent 70%, rgb(var(--fg-rgb) / 0.04) 100%); }
.profile { display: grid; justify-items: center; align-content: center; gap: 4px; height: 100%; padding: 44px 14px 18px; text-align: center; }
.avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent2); color: var(--on-accent2); font: 700 1.05rem var(--font-display); margin-bottom: 6px; }
.profile strong { font: 700 1.2rem var(--font-display); }
.role { font-size: 0.78rem; color: var(--muted); }
.plinks { display: grid; gap: 7px; width: 100%; margin: 14px 0 10px; }
.plinks li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgb(var(--fg-rgb) / 0.07); border: 1px solid rgb(var(--fg-rgb) / 0.08); font-size: 0.78rem; text-align: left; }
.plinks .ico { color: var(--accent); }
.plinks li:has(> a) { padding: 0; }
.plinks a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 12px; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.plinks li:has(> a:focus-visible) { outline: 3px solid var(--a2t); outline-offset: 2px; }
.plinks a:focus-visible { outline: 0; }
@media (hover: hover) { .plinks a:hover { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent); } }
html { scroll-padding-top: 70px; }
.save-btn { display: inline-block; width: 100%; padding: 9px 12px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 600 0.8rem var(--font-body); text-align: center; }

.ring { position: absolute; top: 40%; left: 50%; width: 140%; aspect-ratio: 1; margin: -70% 0 0 -70%; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }

.hero-foot { display: grid; justify-items: center; gap: 10px; padding-top: 8px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; font-size: 0.88rem; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ico { color: var(--hl); }

@media (max-width: 767px) {
  .hero-pin { min-height: 0; padding-top: 88px; gap: 8px; }
  .stage { height: 520px; }
  .card-pos { width: min(300px, 78cqw); margin: 0; justify-self: start; align-self: start; }
  .phone { margin: 0; justify-self: end; align-self: end; height: min(380px, 80cqh); }
}

/* --------------------------------------------------------------------------
   Marquee (continuo → linear)
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); }
.track { display: flex; width: max-content; }
.track span { padding: 0 28px; font: 700 clamp(1.6rem, 3vw, 2.4rem) var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--text); }
.track span::after { content: "✦"; margin-left: 56px; color: var(--hl); -webkit-text-stroke: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .track { animation: marquee 36s linear infinite; }
  @media (hover: hover) { .marquee:hover .track { animation-play-state: paused; } }
}

/* --------------------------------------------------------------------------
   Secciones comunes
   -------------------------------------------------------------------------- */
.section { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--pad) 0; }
.kicker { margin-bottom: 18px; font: 500 0.78rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--a2t); }
.section h2 { font-size: clamp(2.2rem, 5.4vw, 4.4rem); max-width: 13em; margin-bottom: 48px; }

/* Reveal gestionado por GSAP: oculto solo con .js; al terminar pasa a .revealed */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); }
}
.js .reveal.revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Escena 2 · Cómo funciona
   -------------------------------------------------------------------------- */
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.how-visual { position: sticky; top: 14vh; height: 72vh; min-height: 340px; }
.frames {
  position: relative; height: 100%; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 50% 0%, rgb(var(--accent2-rgb) / 0.28), transparent 70%), var(--surface);
}
.frame { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 24px; }
.js .frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--motion-medium) var(--ease-standard); pointer-events: none; }
.js .frame.is-active { opacity: 1; }

.f1 { position: relative; }
.mini-card { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; width: 210px; aspect-ratio: 1.586; padding: 16px; border-radius: 16px; border: 1.5px solid var(--accent); background: radial-gradient(120% 100% at 100% 0%, rgb(var(--accent2-rgb) / 0.9), transparent 60%), var(--card-bg); transform: rotate(-8deg); text-align: left; }
.mini-card .ico { position: absolute; top: 14px; right: 14px; color: var(--accent); }
.mini-card b { font: 700 1.1rem var(--font-display); color: var(--accent); }
.mini-phone { width: 110px; height: 200px; margin-top: -44px; margin-left: 150px; border-radius: 24px; border: 2px solid var(--line); background: linear-gradient(165deg, var(--screen-1), var(--screen-2)); }
.wave { position: absolute; left: 50%; top: 50%; width: 200px; aspect-ratio: 1; margin: -100px 0 0 -30px; border: 2px solid var(--hl); border-radius: 50%; opacity: 0; }
@keyframes wave-out { from { opacity: 0.8; transform: scale(0.2); } to { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: no-preference) {
  .f1.is-active .wave { animation: wave-out 1400ms var(--ease-out) 3 both; }
  .f1.is-active .w2 { animation-delay: 220ms; } .f1.is-active .w3 { animation-delay: 440ms; }
}

.browser { width: min(340px, 88%); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.bar-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bar-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.bar-top span { margin-left: 10px; font: 500 0.75rem var(--font-mono); color: var(--muted); }
.profile.compact { height: auto; padding: 28px 22px; }

.done { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.done .ico { width: 46px; height: 46px; }
.f3 strong { font: 700 1.6rem var(--font-display); } .f3 span { color: var(--muted); font-size: 0.92rem; }

.how-steps h2 { margin-bottom: 8px; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: 0.75; transition: opacity var(--motion-medium) var(--ease-standard); }
.step.is-active { opacity: 1; }
.step:first-of-type { margin-top: 12vh; }
.num { font: 500 0.9rem var(--font-mono); color: var(--hl); }
.step h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.step p { max-width: 28em; color: var(--muted); }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 24px; }
  .how-visual { top: 76px; height: 280px; min-height: 0; z-index: 3; }
  .how-steps .kicker, .how-steps h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .step { min-height: 50vh; } .step:first-of-type { margin-top: 20px; }
  .mini-card { width: 160px; } .mini-phone { width: 86px; height: 150px; margin-left: 110px; margin-top: -30px; }
}

/* --------------------------------------------------------------------------
   Casos de uso (tabs)
   -------------------------------------------------------------------------- */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tablist button { padding: 0.6em 1.2em; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
@media (hover: hover) { .tablist button:hover { border-color: var(--accent2); color: var(--text); } }
.tablist button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; min-height: 420px; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(80% 90% at 100% 0%, rgb(var(--deep-rgb) / 0.55), transparent 70%), var(--surface); }
.panel[hidden] { display: none; }
.panel-copy h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 14px; }
.panel-copy p { color: var(--muted); max-width: 26em; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) { .panel:not([hidden]) { animation: panel-in var(--motion-medium) var(--ease-out) both; } }
@media (max-width: 820px) { .panel { grid-template-columns: 1fr; } }

.mock { justify-self: center; width: min(320px, 100%); display: grid; gap: 6px; justify-items: center; padding: 26px 20px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / 0.5); text-align: center; }
.mock strong { font: 700 1.2rem var(--font-display); }
.mock-menu { text-align: left; justify-items: stretch; }
.mock-menu strong { text-align: center; margin-bottom: 8px; }
.mock-menu ul { display: grid; gap: 8px; margin-bottom: 8px; }
.mock-menu li { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: 0.92rem; }
.mock-menu b { color: var(--hl); font-family: var(--font-mono); }
.mock-badge .tag { padding: 4px 12px; border-radius: 99px; background: var(--accent2); color: var(--on-accent2); font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.mock-badge strong { font-size: 2rem; margin-top: 10px; }
.checked { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 16px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.88rem; }
.mock-team { justify-items: stretch; text-align: left; }
.mock-team ul { display: grid; gap: 14px; margin-top: 10px; }
.mock-team li { display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: 10px; font-size: 0.9rem; }
.mock-team i { height: 8px; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.mock-team b { font-family: var(--font-mono); text-align: right; }

/* --------------------------------------------------------------------------
   Bento
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 280px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.tile h3 { font-size: 1.55rem; margin-bottom: 6px; }
.tile p { color: var(--muted); max-width: 26em; }
.tile-body { position: relative; z-index: 1; }
.tile-chip { grid-column: span 3; min-height: 340px; background: radial-gradient(90% 80% at 80% 10%, rgb(var(--accent2-rgb) / 0.32), transparent 65%), var(--surface); }
.tile-edit { grid-column: span 3; min-height: 340px; }
.tile-yellow { grid-column: span 2; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tile-yellow p { color: rgb(var(--on-accent-rgb) / 0.78); }
.tile-yellow h3 { font-size: 2.4rem; }
.tile-stats { grid-column: span 2; }
.tile-violet { grid-column: span 2; background: var(--accent2); color: var(--on-accent2); border-color: var(--accent2); }
.tile-violet p { color: rgb(var(--on-accent2-rgb) / 0.78); }
@media (max-width: 900px) { .tile-chip, .tile-edit { grid-column: span 6; } .tile-yellow, .tile-stats, .tile-violet { grid-column: span 3; } }
@media (max-width: 600px) { .tile-yellow, .tile-stats, .tile-violet { grid-column: span 6; } }

.spiral { position: absolute; top: 24px; right: 24px; width: min(220px, 48%); color: var(--hl); }
.spiral rect { stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .spiral rect { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
  }
}

.fields { position: absolute; top: 24px; left: 28px; right: 28px; display: grid; gap: 10px; }
.field { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid var(--accent2); background: var(--bg); font: 500 1.1rem var(--font-body); }
.field small { width: 100%; font: 500 0.7rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--a2t); }
.caret { display: none; width: 2px; height: 1.1em; margin-left: -8px; background: var(--hl); align-self: center; }
.field.typing .caret { display: block; animation: blink 700ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stamp { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 600 0.78rem var(--font-body); opacity: 0; }
.js .stamp { visibility: hidden; }
html:not(.js) .stamp { opacity: 1; }
.pills { position: absolute; top: 24px; left: 28px; display: flex; }
.pills span { padding: 6px 14px; border-radius: 99px; background: var(--on-accent); color: var(--accent); font: 600 0.8rem var(--font-mono); transition: translate var(--motion-medium) var(--ease-out); }
.pills span + span { margin-left: -10px; background: #fff; color: #171717; }
.lock { position: absolute; top: 24px; left: 28px; width: 44px; height: 44px; }
.shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform var(--motion-medium) var(--ease-out); }

.bars { position: absolute; left: 28px; right: 28px; top: 28px; height: 110px; display: flex; align-items: flex-end; gap: 10px; }
.bar { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(to top, var(--deep), var(--accent2)); transform-origin: bottom; }
.bar:last-child { background: var(--accent); }

/* --------------------------------------------------------------------------
   Comparativa
   -------------------------------------------------------------------------- */
.compare { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.crow { display: grid; grid-template-columns: 1.1fr 1.3fr 1.3fr; align-items: center; gap: 16px; padding: 22px 28px; border-top: 1px solid var(--line); font-size: 1.02rem; }
.crow:first-child { border-top: 0; }
.crow > span { display: flex; align-items: center; gap: 10px; }
.crow > span:nth-child(2) { color: var(--muted); } .crow > span:nth-child(2) .ico { color: var(--alert); }
.crow > span:first-child { font: 500 0.78rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.crow .us { color: var(--text); font-weight: 600; } .crow .us .ico { color: var(--hl); }
.chead { font: 700 1.3rem var(--font-display); background: rgb(var(--accent-rgb) / 0.04); } .chead .us { color: var(--hl); }
@media (max-width: 640px) { .crow { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; } .chead { display: none; } }

/* --------------------------------------------------------------------------
   Prueba social
   -------------------------------------------------------------------------- */
.metric { display: grid; gap: 4px; margin-bottom: 56px; }
.big { font: 700 clamp(4.5rem, 16vw, 13rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--hl); font-variant-numeric: tabular-nums; }
.metric-label { font: 500 0.85rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote { position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.quote p { font-size: 1.08rem; }
.quote footer { font: 500 0.78rem var(--font-mono); color: var(--a2t); }

/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan:not(.plan-pro) { overflow: hidden; }
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--motion-medium) var(--ease-standard), transform var(--motion-medium) var(--ease-out); }
.plan h3 { font-size: 1.6rem; } .plan h3 small { color: var(--muted); font-size: 1rem; }
.price { font: 700 3.6rem/1 var(--font-display); letter-spacing: -0.05em; }
.price small { margin-left: 8px; font: 500 0.8rem var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
.price span { font-size: 1.5rem; vertical-align: top; margin-right: 2px; color: var(--muted); }
.plan ul { display: grid; align-content: start; gap: 10px; flex: 1; color: var(--muted); }
.plan li { display: flex; gap: 10px; align-items: flex-start; } .plan li .ico { margin-top: 3px; color: var(--hl); }
.plan-pro { border-color: var(--accent); background: radial-gradient(100% 70% at 50% 0%, rgb(var(--accent-rgb) / 0.12), transparent 70%), var(--surface); box-shadow: 0 0 60px rgb(var(--accent2-rgb) / 0.18); }
.badge { position: absolute; top: -14px; left: 32px; padding: 4px 14px; border-radius: 999px; background: var(--accent2); color: var(--on-accent2); font: 700 0.75rem var(--font-mono); letter-spacing: 0.04em; }

/* FAQ */
.faq { max-width: 880px; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 1.2rem var(--font-display); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 1.8rem; line-height: 1; color: var(--hl); transition: transform var(--motion-medium) var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--muted); max-width: 40em; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: no-preference) { details[open] p { animation: fade-up var(--motion-medium) var(--ease-out) both; } }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.final {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px;
  max-width: 1320px; width: calc(100% - 2 * var(--pad)); min-height: 80svh; margin: clamp(80px, 11vw, 150px) auto 0; padding: clamp(32px, 6vw, 88px);
  border-radius: 40px; border: 1px solid var(--line);
  background: radial-gradient(70% 90% at 100% 100%, rgb(var(--alert-rgb) / 0.28), transparent 65%), radial-gradient(90% 90% at 0% 0%, var(--deep), transparent 70%), var(--surface);
}
.final-copy { display: grid; justify-items: start; gap: 32px; }
.final h2 { font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.final-card { perspective: 1200px; justify-self: center; width: min(420px, 100%); }
.final-card .face { position: relative; aspect-ratio: 1.586; transform: rotate(-6deg); }
@media (max-width: 820px) { .final { grid-template-columns: 1fr; min-height: 0; } }

body > footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 56px var(--pad) 40px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Hover / foco en cards. Se usa `translate` (propiedad individual) porque
   GSAP y .reveal ya ocupan `transform`.
   -------------------------------------------------------------------------- */
.tile, .plan, .quote {
  --glow: rgb(var(--accent2-rgb) / 0.30);
  transition: translate var(--motion-medium) var(--ease-out), border-color var(--motion-medium) var(--ease-standard), box-shadow var(--motion-medium) var(--ease-standard);
}
.tile-yellow, .tile-violet { --glow: rgb(255 255 255 / 0.38); }

/* Halo que sigue al cursor: se mueve con translate (compuesto), no repinta el degradado */
.tile::after, .plan:not(.plan-pro)::after, .quote::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent);
  translate: calc(var(--mx, 50%) - 170px) calc(var(--my, 50%) - 170px);
  opacity: 0; transition: opacity var(--motion-medium) var(--ease-standard);
}

@media (hover: hover) {
  .tile:hover, .tile:focus-within, .quote:hover, .plan:hover, .plan:focus-within { border-color: rgb(var(--accent2-rgb) / 0.65); }
  .plan-pro:hover, .plan-pro:focus-within { border-color: var(--accent); }
  .tile-yellow:hover { border-color: rgb(var(--on-accent-rgb) / 0.5); }
  .tile-violet:hover { border-color: rgb(var(--on-accent2-rgb) / 0.5); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile:hover, .tile:focus-within, .quote:hover, .plan:hover, .plan:focus-within {
    translate: 0 -6px;
    box-shadow: 0 26px 60px rgb(var(--shadow-rgb) / 0.45), 0 0 44px rgb(var(--accent2-rgb) / 0.16);
  }
  .tile:hover::after, .plan:not(.plan-pro):hover::after, .quote:hover::after { opacity: 1; }

  /* antena NFC: los lazos "emiten" en onda */
  @keyframes loop-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  .tile-chip:hover .spiral { scale: 1.08; rotate: -3deg; }
  .spiral { transition: scale var(--motion-medium) var(--ease-out), rotate var(--motion-medium) var(--ease-out); }
  .tile-chip:hover .spiral rect { animation: loop-wave 1.3s var(--ease-standard) infinite; animation-timeline: auto; animation-range: normal; stroke-dasharray: none; }
  .tile-chip:hover .spiral rect:nth-child(4) { animation-delay: 0.15s; }
  .tile-chip:hover .spiral rect:nth-child(3) { animation-delay: 0.3s; }
  .tile-chip:hover .spiral rect:nth-child(2) { animation-delay: 0.45s; }
  .tile-chip:hover .spiral rect:nth-child(1) { animation-delay: 0.6s; }

  /* perfil editable: el campo se enciende */
  .tile-edit:hover .field { border-color: var(--accent); }
  .field { transition: border-color var(--motion-medium) var(--ease-standard); }

  /* iOS / Android: las pastillas se separan */
  .tile-yellow:hover .pills span:first-child { translate: -6px 0; }
  .tile-yellow:hover .pills span + span { translate: 8px 0; }

  /* estadísticas: las barras hacen ola */
  @keyframes bar-wave { 50% { scale: 1 0.55; } }
  .tile-stats:hover .bar { animation: bar-wave 0.9s var(--ease-standard) infinite; animation-delay: calc(var(--k) * 90ms); }

  /* candado: se abre */
  .tile-violet:hover .shackle { transform: rotate(-28deg) translateY(-2px); }

  /* planes: precio y botón reaccionan */
  .plan:hover .price { color: var(--hl); }
  .price { transition: color var(--motion-medium) var(--ease-standard); }
  .plan:hover .btn-ghost { border-color: var(--a2t); color: var(--a2t); }
  .plan-pro:hover { box-shadow: 0 26px 60px rgb(var(--shadow-rgb) / 0.45), 0 0 70px rgb(var(--accent-rgb) / 0.18); }

  /* testimonios */
  .quote:hover footer { color: var(--hl); }
  .quote footer { transition: color var(--motion-medium) var(--ease-standard); }
}

/* --------------------------------------------------------------------------
   Menú de secciones (Tarjetas / Landings) + transición entre páginas
   -------------------------------------------------------------------------- */
.pgs { display: flex; padding: 3px; border-radius: 999px; background: rgb(var(--fg-rgb) / 0.06); border: 1px solid var(--line); font: 600 0.85rem var(--font-body); }
.pg { position: relative; isolation: isolate; padding: 0.42em 1.05em; border-radius: 999px; color: var(--muted); transition: color var(--motion-fast) var(--ease-standard); }
.pg .pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); display: none; }
.pg[aria-current] { color: var(--on-accent); }
.pg[aria-current] .pill { display: block; }
@media (hover: hover) { .pg:not([aria-current]):hover { color: var(--text); } }
@media (max-width: 560px) { .nav .btn-sm { display: none; } .nav { padding-right: 8px; } }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  .nav { view-transition-name: nav; }
  .pg[aria-current] .pill { view-transition-name: pg-pill; }   /* la píldora "viaja" de un enlace al otro */
  ::view-transition-group(pg-pill) { animation-duration: 600ms; animation-timing-function: var(--ease-out-quint); }

  /* Solo al navegar entre páginas: la nueva se abre como un círculo desde el toque.
 */
  [data-nav]::view-transition-group(root) { animation-duration: 800ms; }
  [data-nav]::view-transition-old(root), [data-nav]::view-transition-new(root) { mix-blend-mode: normal; }
  [data-nav]::view-transition-old(root) { animation: vt-old 800ms var(--ease-out-quint) both; }
  [data-nav]::view-transition-new(root) { animation: vt-open 800ms var(--ease-out-quint) both; }
  @keyframes vt-old { to { transform: scale(0.94) translateY(-2%); opacity: 0.35; } }
  @keyframes vt-open {
    from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 40px)); }
    to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 40px)); }
  }
}

/* Precio con descuento: tachado + etiqueta */
.was-row { display: flex; align-items: center; gap: 10px; margin-bottom: -10px; }
.was { font: 500 1.15rem var(--font-display); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--alert); }
.off { padding: 3px 10px; border-radius: 999px; background: var(--alert); color: #fff; font: 700 0.72rem var(--font-mono); letter-spacing: 0.04em; }