/* ============================================================
   checkin-online.es — sistema DARK INMERSIVO (prototipo aprobado)
   Noche + neón (coral/ámbar/cian/violeta) + glass + animaciones.
   Mismas clases que el sitio → lo cargan las 16 páginas vía <link>.
   ============================================================ */
@property --mx{ syntax:'<percentage>'; initial-value:50%; inherits:false; }

:root{
  --coral-300:#FF9F86; --coral-400:#FF7E5F; --coral-500:#FF6A4C; --coral-600:#F0533E; --coral-700:#D23B27;
  --amber-300:#FFD97A; --amber-400:#FFB23A; --amber-500:#F59E0B;
  --blue-200:#A8E6FF; --blue-300:#6FD6FF; --blue-400:#39C6FA; --blue-500:#14B4EE; --blue-600:#0FA3E0; --blue-700:#0A87BE;
  --green-200:#A6F0C6; --green-300:#6EE7A6; --green-400:#40D68A; --green-500:#25C077; --green-600:#16A362; --green-700:#0F7D4B;
  --gold-200:#F8E6A6; --gold-300:#F2CE6A; --gold-400:#E9B844; --gold-500:#D89E22; --gold-600:#B47F13; --gold-700:#8C610C;
  --cyan:#37D6FF; --pink:#FF5FA2; --violet:#8B5CFF; --violet-600:#5E3CE0;

  --ink-950:#04060D; --ink-900:#070B15; --ink-800:#0B1120; --ink-700:#111A2E;
  --bg:#070B15; --bg-2:#0A1020;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07); --surface-3:rgba(255,255,255,.1);
  --glass:rgba(15,23,42,.5);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.17);
  --tx:#EFF2FB; --tx-body:rgba(226,232,244,.72); --tx-muted:rgba(226,232,244,.48);
  --success:#40D68A;

  --g-brand:linear-gradient(115deg,#FF6A4C,#FFB23A);
  --g-brand-hover:linear-gradient(115deg,#FF7E5F,#FFD97A);
  --g-partes:linear-gradient(120deg,#39C6FA,#5E3CE0);
  --g-partes-hover:linear-gradient(120deg,#6FD6FF,#8B5CFF);
  --g-autoses:linear-gradient(120deg,#40D68A,#0F7D4B);
  --g-autoses-hover:linear-gradient(120deg,#6EE7A6,#16A362);
  --g-partehotel:linear-gradient(120deg,#E9B844,#8C610C);
  --g-partehotel-hover:linear-gradient(120deg,#F2CE6A,#B47F13);
  --g-vibe:linear-gradient(120deg,#FF6A4C,#FF5FA2 40%,#8B5CFF 72%,#37D6FF);

  --sh-sm:0 4px 14px -4px rgba(0,0,0,.55);
  --sh-md:0 16px 40px -14px rgba(0,0,0,.7);
  --sh-lg:0 44px 90px -30px rgba(0,0,0,.85);
  --glow-brand:0 0 0 1px rgba(255,106,76,.32),0 20px 50px -14px rgba(255,106,76,.5);
  --glow-partes:0 0 0 1px rgba(57,198,250,.32),0 20px 50px -14px rgba(94,60,224,.5);
  --glow-autoses:0 0 0 1px rgba(64,214,138,.3),0 20px 50px -14px rgba(64,214,138,.46);
  --glow-partehotel:0 0 0 1px rgba(233,184,68,.3),0 20px 50px -14px rgba(233,184,68,.44);
  --sh-brand:var(--glow-brand); --sh-partes:var(--glow-partes); --sh-autoses:var(--glow-autoses); --sh-partehotel:var(--glow-partehotel);

  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;
  --f-display:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --f-body:'Manrope','Manrope Fallback',system-ui,-apple-system,sans-serif;
  --t-fast:150ms cubic-bezier(.4,0,.2,1); --t:320ms cubic-bezier(.4,0,.2,1); --t-spring:560ms cubic-bezier(.16,1,.3,1);
  --container:min(1220px,calc(100vw - 2.5rem));
  --focus:0 0 0 3px rgba(53,214,255,.6),0 0 0 6px rgba(7,11,21,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink-900)}
body{margin:0; padding:0; font-family:var(--f-body); color:var(--tx-body); line-height:1.62; background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:radial-gradient(38% 40% at var(--mx) 0%,rgba(255,106,76,.4),transparent 60%),radial-gradient(40% 42% at 88% 22%,rgba(139,92,255,.36),transparent 62%),radial-gradient(46% 44% at 6% 60%,rgba(255,95,162,.26),transparent 62%),radial-gradient(44% 46% at 84% 96%,rgba(55,214,255,.24),transparent 62%);
  filter:blur(30px) saturate(1.2); animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{0%{--mx:38%; transform:translateY(0)}100%{--mx:62%; transform:translateY(-2.5%)}}
body::after{content:""; position:fixed; inset:0; z-index:-2; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:70px 70px;
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 0,#000,transparent 75%); mask-image:radial-gradient(1200px 800px at 50% 0,#000,transparent 75%)}
img,video,picture,svg{display:block; max-width:100%; height:auto}
a{color:var(--cyan); text-decoration:none; transition:color var(--t-fast)} a:hover{color:var(--blue-200)}

h1,h2,h3,h4{font-family:var(--f-display); color:#fff; letter-spacing:-.03em; line-height:1.06; margin:0; font-weight:700; text-wrap:balance}
h1{font-size:clamp(2.6rem,1.6rem+3.6vw,4.7rem); letter-spacing:-.046em; font-weight:800; line-height:1.02}
h2{font-size:clamp(2rem,1.4rem+2.4vw,3.4rem); letter-spacing:-.04em}
h3{font-size:clamp(1.18rem,1rem+.6vw,1.55rem)}
p{margin:0; color:var(--tx-body)} strong{color:#fff}

::selection{background:rgba(53,214,255,.3); color:#fff}
:root{accent-color:var(--coral-500); caret-color:var(--cyan)}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:8px}
html{scrollbar-color:rgba(53,214,255,.5) transparent; scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--coral-500),var(--violet)); border:3px solid var(--ink-950); border-radius:99px}

.container{width:var(--container); margin-inline:auto}

.text-brand{background:linear-gradient(100deg,#FFD97A,#FF6A4C 45%,#FF5FA2); -webkit-background-clip:text; background-clip:text; color:transparent}
.text-blue{color:var(--blue-300)} .text-green{color:var(--green-300)} .text-gold{color:var(--gold-300)}

.eyebrow{display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .9rem; border-radius:var(--r-pill); background:rgba(255,178,58,.09); border:1px solid rgba(255,178,58,.28); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:700; color:var(--amber-400); font-family:var(--f-display); margin-bottom:1.1rem}
.eyebrow.blue{background:rgba(57,198,250,.1); border-color:rgba(57,198,250,.3); color:var(--cyan)}
.eyebrow.green{background:rgba(64,214,138,.1); border-color:rgba(64,214,138,.3); color:var(--green-300)}
.eyebrow.gold{background:rgba(233,184,68,.12); border-color:rgba(233,184,68,.32); color:var(--gold-300)}
.section-dark .eyebrow{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); color:#fff}

/* ===== Reveal + kinético + marquee ===== */
html.js .reveal{opacity:0; transform:translateY(40px); transition:opacity 720ms cubic-bezier(.16,1,.3,1), transform 720ms cubic-bezier(.16,1,.3,1); filter:blur(6px)}
html.js .reveal.is-visible{opacity:1; transform:none; filter:none}
h1 .l{display:inline-block; opacity:0; transform:translateY(1em) rotate(3deg); animation:rise .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i,0)*.06s)}
@keyframes rise{to{opacity:1; transform:none}}
.marquee{overflow:hidden; padding:1.2rem 0; border-block:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex; gap:2.2rem; width:max-content; animation:slide 28s linear infinite; font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--tx-muted); white-space:nowrap}
.marquee-track b{color:var(--coral-400)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1; transform:none; filter:none; transition:none}
  h1 .l{opacity:1; transform:none; animation:none}
  html{scroll-behavior:auto} *{animation:none !important}
}

/* ============ NAV ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; padding:.75rem 1.25rem}
.nav-inner{width:var(--container); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .7rem .55rem 1.1rem; background:rgba(10,16,32,.55); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-radius:var(--r-pill); border:1px solid var(--line); box-shadow:0 10px 40px -16px #000, inset 0 1px 0 rgba(255,255,255,.06); transition:background var(--t), box-shadow var(--t)}
.nav.scrolled .nav-inner{background:rgba(10,16,32,.82); box-shadow:0 16px 44px -16px #000}
.nav-brand{display:flex; align-items:center}
.nav-brand img{height:38px; width:auto}
.nav-actions{display:flex; align-items:center; gap:.35rem}
.nav-link{font-family:var(--f-display); font-weight:600; font-size:.88rem; color:var(--tx); padding:.5rem .8rem; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; transition:color var(--t-fast), background var(--t-fast)}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.08)}
.nav-link .swatch{width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor}
.swatch-blue{background:var(--blue-400); color:var(--blue-400)} .swatch-green{background:var(--green-400); color:var(--green-400)} .swatch-gold{background:var(--gold-400); color:var(--gold-400)}

/* ===== Botones ===== */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.6rem; border-radius:var(--r-pill); font-family:var(--f-display); font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); white-space:nowrap; line-height:1; will-change:transform}
.btn-brand::after,.btn-partes::after,.btn-autoses::after,.btn-partehotel::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:left 640ms ease}
.btn-brand:hover::after,.btn-partes:hover::after,.btn-autoses:hover::after,.btn-partehotel:hover::after{left:130%}
.btn-lg{padding:1.15rem 2.1rem; font-size:1.08rem}
.btn-brand{background:var(--g-brand); color:#1a0e08; box-shadow:var(--glow-brand)}
.btn-brand:hover{background:var(--g-brand-hover); transform:translateY(-2px); box-shadow:0 26px 60px -14px rgba(255,106,76,.7)}
.btn-partes{background:var(--g-partes); color:#fff; box-shadow:var(--glow-partes)}
.btn-partes:hover{background:var(--g-partes-hover); transform:translateY(-2px); box-shadow:0 26px 60px -14px rgba(94,60,224,.7)}
.btn-autoses{background:var(--g-autoses); color:#03140c; box-shadow:var(--glow-autoses)}
.btn-autoses:hover{background:var(--g-autoses-hover); transform:translateY(-2px)}
.btn-partehotel{background:var(--g-partehotel); color:#160f03; box-shadow:var(--glow-partehotel)}
.btn-partehotel:hover{background:var(--g-partehotel-hover); transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--tx); border:1px solid var(--line-2); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff; transform:translateY(-2px)}
.btn-outline{background:rgba(255,255,255,.03); color:var(--tx); border:1px solid var(--line-2)}
.btn-outline:hover{transform:translateY(-2px); background:rgba(255,255,255,.08); color:#fff; border-color:var(--coral-400)}
.btn:active{transform:translateY(0)}
.btn-arrow::after{content:"→"; display:inline-block; transition:transform var(--t-fast); font-weight:700}
.btn-arrow:hover::after{transform:translateX(4px)}

/* ===== Pills ===== */
.pill{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .95rem; border-radius:var(--r-pill); font-family:var(--f-display); font-weight:700; font-size:.82rem; backdrop-filter:blur(6px)}
.pill-glass{background:rgba(255,255,255,.06); color:var(--tx); border:1px solid var(--line-2)}
.pill-coral{background:rgba(255,106,76,.14); color:var(--coral-300); border:1px solid rgba(255,106,76,.3)}
.pill-blue{background:rgba(57,198,250,.14); color:var(--blue-300); border:1px solid rgba(57,198,250,.3)}
.pill-green{background:rgba(64,214,138,.14); color:var(--green-300); border:1px solid rgba(64,214,138,.3)}
.pill-gold{background:rgba(233,184,68,.14); color:var(--gold-300); border:1px solid rgba(233,184,68,.3)}
.pill-warning{background:rgba(255,178,58,.16); color:var(--amber-300); border:1px solid rgba(255,178,58,.36)}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--amber-400); box-shadow:0 0 12px var(--amber-400), 0 0 0 4px rgba(255,178,58,.25); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 12px var(--amber-400),0 0 0 9px rgba(255,178,58,0)}}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; isolation:isolate; padding:9rem 0 4.5rem}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.hero-image{position:relative}
.hero-image img{width:100%; height:auto; border-radius:var(--r-2xl); box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.08); mask-image:linear-gradient(to left,black 70%,transparent 100%); -webkit-mask-image:linear-gradient(to left,black 70%,transparent 100%)}
.hero::after{content:""; position:absolute; inset:-35% -10% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(42% 44% at 8% 4%,rgba(255,106,76,.42),transparent 62%),radial-gradient(40% 42% at 92% 0,rgba(53,214,255,.4),transparent 62%),radial-gradient(48% 46% at 80% 96%,rgba(139,92,255,.3),transparent 64%),radial-gradient(38% 40% at 30% 98%,rgba(255,95,162,.26),transparent 64%);
  filter:blur(22px) saturate(1.2); animation:auroraHero 22s ease-in-out infinite alternate}
@keyframes auroraHero{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.07)}100%{transform:translate3d(-2%,1%,0) scale(1.04)}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-image{order:-1; max-width:460px; margin:0 auto}.hero-image img{mask-image:none; -webkit-mask-image:none}}
.hero-top{margin:0 0 2rem; text-align:left}
.hero-top h1{margin:1.1rem 0 1.4rem}
.hero-lead{color:var(--tx-body); font-size:clamp(1.08rem,.98rem+.5vw,1.32rem); max-width:56ch; margin:0 0 1.6rem; line-height:1.58}
.hero-trust{display:flex; flex-wrap:wrap; gap:.9rem 1.9rem; color:var(--tx-muted); font-size:.92rem; margin-top:.4rem}
.hero-trust .sep{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); align-self:center}
.hero-trust strong{color:#fff} .hero-trust a{color:var(--tx-body) !important}
.hero-stars{color:var(--amber-400); letter-spacing:2px; text-shadow:0 0 14px rgba(255,178,58,.5)}

/* Escena 3D (DNI reverso escaneándose) */
.scene3d{perspective:1400px; display:flex; justify-content:center; align-items:center}
.card3d{position:relative; width:min(360px,80%); aspect-ratio:1.58/1; transform-style:preserve-3d; animation:spin3d 9s ease-in-out infinite; will-change:transform}
@keyframes spin3d{0%,100%{transform:rotateY(-22deg) rotateX(8deg)}50%{transform:rotateY(20deg) rotateX(-6deg)}}
.card3d .face{position:absolute; inset:0; border-radius:20px; overflow:hidden; background:linear-gradient(150deg,#241633,#150d22); border:1px solid var(--line-2); box-shadow:0 50px 90px -30px #000, inset 0 1px 0 rgba(255,255,255,.1); padding:2.9rem 1.35rem 1.35rem}
.card3d .face::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%); transform:translateX(-100%); animation:sheen 4s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.card3d .tag{position:absolute; top:1.1rem; left:1.35rem; font-family:var(--f-display); font-weight:700; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-muted)}
.card3d .fld{height:9px; border-radius:5px; background:rgba(255,255,255,.14); margin:.5rem 0; width:60%; overflow:hidden; position:relative}
.card3d .fld.s2{width:44%} .card3d .fld.s3{width:52%}
.card3d .fld::before{content:""; position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--cyan),var(--green-400)); animation:fill 6s ease-in-out infinite}
.card3d .fld.s2::before{animation-delay:.25s} .card3d .fld.s3::before{animation-delay:.5s}
@keyframes fill{0%,30%{width:0}55%,88%{width:100%}100%{width:100%}}
.card3d .mrz{font-family:var(--f-display),monospace; letter-spacing:.14em; color:var(--tx-body); font-size:.6rem; line-height:1.9; position:absolute; bottom:1rem; left:1.35rem; right:1.35rem; white-space:nowrap; overflow:hidden}
.card3d .scan{position:absolute; left:-4%; right:-4%; height:3px; top:0; z-index:3; border-radius:3px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 24px 4px var(--cyan); animation:scan 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scan{0%{top:0;opacity:0}8%{opacity:1}45%{top:100%;opacity:1}55%{opacity:0}100%{top:0;opacity:0}}
.card3d .sent{position:absolute; bottom:-16px; right:-8px; z-index:4; display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:700; font-size:.78rem; color:#04140c; padding:.5rem .85rem; border-radius:var(--r-pill); background:linear-gradient(120deg,var(--green-400),#16a362); box-shadow:0 14px 30px -10px rgba(64,214,138,.7); opacity:0; transform:scale(.7); animation:pop 6s ease infinite}
@keyframes pop{0%,60%{opacity:0;transform:scale(.7) translateY(6px)}70%,94%{opacity:1;transform:none}100%{opacity:0}}

/* ===== Mensaje especialización + wizard ===== */
.paths-lead{text-align:center; max-width:800px; margin:0 auto 2.6rem}
.paths-lead h2{margin:.35rem 0 .9rem} .paths-lead p{color:var(--tx-body); font-size:clamp(1rem,.96rem+.3vw,1.16rem); max-width:62ch; margin:0 auto}
.wizard{background:var(--glass); backdrop-filter:blur(18px) saturate(1.3); border-radius:22px; border:1px solid var(--line-2); box-shadow:var(--sh-lg),0 0 60px -20px rgba(255,106,76,.4); max-width:540px; overflow:hidden; margin-top:2rem}
.wz-header{background:var(--g-brand); padding:1.15rem 1.4rem; display:flex; align-items:center; gap:.85rem}
.wz-avatar{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0}
.wz-header-text .wz-name{font-family:var(--f-display); font-weight:700; color:#160b06; font-size:1rem}
.wz-header-text .wz-sub{color:rgba(22,11,6,.78); font-size:.82rem}
.wizard-step{display:none} .wizard-step.active{display:block; animation:wzIn 380ms cubic-bezier(.16,1,.3,1)}
@keyframes wzIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.wz-body{padding:1.45rem}
.wz-q{font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.04rem; margin:0 0 1.1rem; line-height:1.35}
.wz-tagline{font-size:.86rem; color:var(--tx-body); margin:-.5rem 0 1.15rem; line-height:1.5} .wz-tagline strong{color:#fff}
.wz-options{display:grid; grid-template-columns:1fr 1fr; gap:.6rem} .wz-options.single-col{grid-template-columns:1fr}
.wz-btn{background:rgba(255,255,255,.05); border:1.5px solid var(--line-2); border-radius:14px; padding:.8rem 1rem; font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--tx); cursor:pointer; text-align:left; transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); line-height:1.3}
.wz-btn:hover{background:rgba(255,255,255,.1); border-color:var(--coral-400); transform:translateY(-1px)}
.wz-btn small{color:var(--tx-muted) !important}
.wz-back-btn,.wz-restart-btn{background:none; border:none; color:var(--tx-muted); font-size:.84rem; cursor:pointer; padding:.4rem 0; font-family:var(--f-body)}
.wz-back-btn{display:inline-flex; align-items:center; gap:.3rem; margin-top:.75rem} .wz-restart-btn{display:block; margin:.3rem auto 0}
.wz-back-btn:hover,.wz-restart-btn:hover{color:#fff}
.wz-result-card{text-align:center} .wz-result-logo{height:48px; width:auto; margin:0 auto .85rem; display:block}
.wz-result-title{font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.05rem; margin:0 0 .7rem}
.wz-result-bullets{list-style:none; padding:0; margin:0 0 1.2rem; text-align:left; display:grid; gap:.5rem}
.wz-result-bullets li{font-size:.9rem; color:var(--tx-body); display:flex; gap:.5rem; align-items:flex-start} .wz-result-bullets li::before{content:"✓"; color:var(--success); font-weight:700}
.wz-result-cta{width:100%; justify-content:center; margin-bottom:.75rem}
@media(max-width:520px){.wz-options{grid-template-columns:1fr}}

/* ===== Paths (con foto opcional) ===== */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; align-items:stretch}
.path-card{position:relative; overflow:hidden; background:var(--surface); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--r-2xl); padding:0 0 2rem; box-shadow:var(--sh-md); display:flex; flex-direction:column; transition:transform var(--t-spring), box-shadow var(--t-spring), border-color var(--t), background var(--t)}
.path-photo{position:relative; aspect-ratio:16/10; overflow:hidden; margin-bottom:1.4rem}
.path-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1)}
.path-card:hover .path-photo img{transform:scale(1.06)}
.path-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(11,17,32,.92))}
.path-card > :not(.path-photo){padding-inline:2rem}
.path-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:3; box-shadow:0 0 18px currentColor}
.path-blue::before{background:var(--g-partes); color:var(--blue-400)} .path-green::before{background:var(--g-autoses); color:var(--green-400)} .path-gold::before{background:var(--g-partehotel); color:var(--gold-400)}
.path-card:hover{transform:translateY(-8px); background:var(--surface-2)}
.path-blue:hover{border-color:rgba(57,198,250,.5); box-shadow:var(--glow-partes)} .path-green:hover{border-color:rgba(64,214,138,.5); box-shadow:var(--glow-autoses)} .path-gold:hover{border-color:rgba(233,184,68,.5); box-shadow:var(--glow-partehotel)}
.path-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.path-logo{height:44px; width:auto; max-width:150px; object-fit:contain}
.path-tag{font-family:var(--f-display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:.35rem .7rem; border-radius:var(--r-pill); color:#fff}
.path-blue .path-tag{background:var(--g-partes)} .path-green .path-tag{background:var(--g-autoses)} .path-gold .path-tag{background:var(--g-partehotel)}
.path-for{font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.2rem; margin-bottom:.4rem; line-height:1.32}
.path-desc{font-size:.98rem; color:var(--tx-body); margin-bottom:1.3rem}
.path-list{list-style:none; padding:0; margin:0 0 1.7rem; display:grid; gap:.65rem}
.path-list li{display:flex; gap:.6rem; align-items:flex-start; color:var(--tx-body); font-size:.94rem}
.path-list li svg{width:20px; height:20px; flex-shrink:0; margin-top:1px}
.path-blue .path-list li svg{color:var(--blue-400)} .path-green .path-list li svg{color:var(--green-400)} .path-gold .path-list li svg{color:var(--gold-400)}
.path-list li a{color:var(--cyan) !important}
.path-cta{margin-top:auto} .path-cta .btn{width:100%}
.path-note{text-align:center; margin-top:.85rem; font-size:.82rem; color:var(--tx-muted)}
.path-domain{font-family:var(--f-display); font-weight:700}
.path-blue .path-domain{color:var(--blue-300)} .path-green .path-domain{color:var(--green-300)} .path-gold .path-domain{color:var(--gold-300)}

/* ===== Secciones ===== */
section{padding:clamp(4.5rem,7vw,7.5rem) 0; position:relative}
.section-alt{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-soft{background:linear-gradient(180deg,rgba(53,214,255,.05),transparent)}
.section-dark{background:radial-gradient(1200px 700px at 80% -10%,rgba(53,214,255,.14),transparent 60%),linear-gradient(180deg,var(--ink-800),var(--ink-950)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.heading{text-align:center; max-width:800px; margin:0 auto 3.6rem}
.heading p{font-size:clamp(1.02rem,.95rem+.3vw,1.2rem); margin-top:1rem; color:var(--tx-body)}

.reviews-widget{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--sh-md); backdrop-filter:blur(8px)}
@media(max-width:600px){.reviews-widget{padding:.85rem}}

/* ===== Problema ===== */
.problem-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.problem-card{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:2.2rem; box-shadow:var(--sh-md); position:relative; overflow:hidden; backdrop-filter:blur(10px)}
.problem-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#FF6A4C,#FFB23A); box-shadow:0 0 20px rgba(255,106,76,.6)}
.problem-card h3{margin-bottom:.6rem}
.problem-list{list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.9rem}
.problem-list li{display:flex; gap:.75rem; align-items:flex-start; color:var(--tx-body)} .problem-list li::before{content:"⚠"; color:var(--coral-400); flex-shrink:0}
.problem-list strong{color:#fff}

/* ===== Escaneo IA ===== */
.hero-image .promo-video{width:100%; aspect-ratio:16/9; height:auto; display:block; margin-bottom:clamp(3rem,7vw,5.5rem); border-radius:var(--r-2xl); box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.08); background:#000}
.ia-scan{display:grid; grid-template-columns:.8fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.ia-phone{display:flex; justify-content:center; position:relative}
.ia-phone::before{content:""; position:absolute; width:76%; height:76%; border-radius:50%; background:radial-gradient(circle,rgba(53,214,255,.4),transparent 70%); filter:blur(50px); z-index:-1}
.phone-frame{position:relative; width:min(300px,80vw); aspect-ratio:9/19; background:linear-gradient(155deg,#20201D,#050505); border-radius:44px; padding:12px; box-shadow:0 50px 90px -28px #000, inset 0 0 0 1px rgba(255,255,255,.06), 0 0 60px -10px rgba(53,214,255,.4)}
.phone-frame::before{content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:118px; height:24px; background:#050505; border-radius:0 0 15px 15px; z-index:2}
.phone-frame video{width:100%; height:100%; object-fit:cover; border-radius:34px; background:#000}
.ia-panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(1.75rem,3vw,2.7rem); box-shadow:var(--sh-lg); backdrop-filter:blur(12px)}
.ia-panel h2{margin:1.1rem 0 1rem} .ia-lead{font-size:1.06rem; margin-bottom:1.5rem}
.ia-feats{list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.75rem}
.ia-feats li{display:flex; gap:.85rem; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1rem; color:var(--tx-body)}
.ia-feats .fi{font-size:1.3rem; line-height:1.35; flex-shrink:0} .ia-feats strong{color:#fff}
.ia-warn{display:flex; gap:.7rem; align-items:flex-start; padding:1.1rem 1.25rem; border-radius:var(--r-md); background:rgba(255,178,58,.1); border:1px solid rgba(255,178,58,.32); color:var(--amber-300)}
.ia-warn .fi{font-size:1.15rem; flex-shrink:0} .ia-warn p{color:var(--amber-300)} .ia-warn strong{color:#fff}

/* ===== Producto deep-dive ===== */
.product{position:relative; overflow:hidden}
.product-blue::before,.product-green::before,.product-gold::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none}
.product-blue::before{background:radial-gradient(760px 520px at 88% 26%,rgba(57,198,250,.14),transparent 62%)}
.product-green::before{background:radial-gradient(760px 520px at 12% 26%,rgba(64,214,138,.13),transparent 62%)}
.product-gold::before{background:radial-gradient(760px 520px at 88% 26%,rgba(233,184,68,.13),transparent 62%)}
.product-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.product-grid.reverse .product-media{order:2}
.product-brandbar{display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap} .product-brandbar img{height:44px; width:auto}
.product h2{margin:.4rem 0 1.1rem} .product .lead{font-size:1.12rem; color:var(--tx-body); margin-bottom:1.7rem}
.feature-rows{list-style:none; padding:0; margin:0 0 1.9rem; display:grid; gap:1.15rem}
.feature-rows li{display:flex; gap:.95rem; align-items:flex-start}
.feature-rows .fi{width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:#fff}
.feature-rows .fi svg{width:24px; height:24px}
.product-blue .fi{background:rgba(57,198,250,.14); color:var(--blue-300); box-shadow:0 0 20px -6px rgba(57,198,250,.6)}
.product-green .fi{background:rgba(64,214,138,.14); color:var(--green-300); box-shadow:0 0 20px -6px rgba(64,214,138,.55)}
.product-gold .fi{background:rgba(233,184,68,.16); color:var(--gold-300); box-shadow:0 0 20px -6px rgba(233,184,68,.55)}
.feature-rows h3{font-family:var(--f-display); font-size:1.06rem; color:#fff; margin:0 0 .2rem} .feature-rows p{font-size:.95rem; margin:0; color:var(--tx-body)}
.product-cta{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
.product-media{position:relative}
.media-frame{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.08); border:1px solid var(--line-2); background:#0d1526; position:relative}
.media-frame::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 60px -20px rgba(53,214,255,.5); pointer-events:none}
.media-frame img{width:100%; height:auto}
.media-badge{position:absolute; background:rgba(14,21,36,.9); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:.7rem .95rem; backdrop-filter:blur(10px); display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:700; font-size:.86rem; color:#fff; z-index:3}
.media-badge .bdot{width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#03121b; font-weight:700; flex-shrink:0}
.media-badge.b1{top:-18px; left:-14px} .media-badge.b2{bottom:-18px; right:-14px}
.product-blue .bdot{background:var(--blue-400); box-shadow:0 0 18px var(--blue-400)} .product-green .bdot{background:var(--green-400); box-shadow:0 0 18px var(--green-400)} .product-gold .bdot{background:var(--gold-400); box-shadow:0 0 18px var(--gold-400)}
.stat-inline{display:flex; flex-wrap:wrap; gap:1.75rem; margin:1.5rem 0 1.9rem}
.stat-inline .sv{font-family:var(--f-display); font-weight:800; font-size:2rem; line-height:1; letter-spacing:-.04em}
.product-blue .stat-inline .sv{color:var(--blue-300)} .product-green .stat-inline .sv{color:var(--green-300)} .product-gold .stat-inline .sv{color:var(--gold-300)}
.stat-inline .sl{font-size:.85rem; color:var(--tx-muted); margin-top:.3rem}

/* ===== Comparar / decide ===== */
.decide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.decide-card{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:2.1rem; position:relative; overflow:hidden; backdrop-filter:blur(10px); transition:transform var(--t-spring), box-shadow var(--t-spring), border-color var(--t), background var(--t)}
.decide-card:hover{transform:translateY(-6px); background:var(--surface-2)}
.decide-blue:hover{border-color:rgba(57,198,250,.5); box-shadow:var(--glow-partes)} .decide-green:hover{border-color:rgba(64,214,138,.5); box-shadow:var(--glow-autoses)} .decide-gold:hover{border-color:rgba(233,184,68,.5); box-shadow:var(--glow-partehotel)}
.decide-card::before{content:""; position:absolute; top:0; left:0; bottom:0; width:4px; box-shadow:0 0 18px currentColor}
.decide-blue::before{background:var(--g-partes); color:var(--blue-400)} .decide-green::before{background:var(--g-autoses); color:var(--green-400)} .decide-gold::before{background:var(--g-partehotel); color:var(--gold-400)}
.decide-card h3{margin-bottom:.35rem} .decide-card .who{font-size:.92rem; color:var(--tx-muted); margin-bottom:1.2rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.chip{font-size:.82rem; font-weight:700; font-family:var(--f-display); padding:.4rem .8rem; border-radius:var(--r-pill)}
.decide-blue .chip{background:rgba(57,198,250,.12); color:var(--blue-300); border:1px solid rgba(57,198,250,.24)}
.decide-green .chip{background:rgba(64,214,138,.12); color:var(--green-300); border:1px solid rgba(64,214,138,.24)}
.decide-gold .chip{background:rgba(233,184,68,.12); color:var(--gold-300); border:1px solid rgba(233,184,68,.24)}
.decide-card .path-list{margin-bottom:1.6rem}

/* ===== Tecnología bento ===== */
.features{display:grid; grid-template-columns:repeat(6,1fr); gap:1.25rem}
.feature{grid-column:span 2; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.9rem; backdrop-filter:blur(10px); transition:transform var(--t-spring), box-shadow var(--t), border-color var(--t), background var(--t)}
.feature:nth-child(1){grid-column:span 4} .feature:nth-child(2){grid-column:span 2}
.feature:nth-child(3){grid-column:span 2} .feature:nth-child(4){grid-column:span 4}
.feature:nth-child(5){grid-column:span 2} .feature:nth-child(6){grid-column:span 2} .feature:nth-child(7){grid-column:span 2}
.feature:hover{transform:translateY(-6px); background:var(--surface-2); border-color:rgba(53,214,255,.35); box-shadow:0 0 0 1px rgba(53,214,255,.2),0 28px 60px -24px #000}
.feature-icon{width:54px; height:54px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.1rem; background:linear-gradient(135deg,rgba(255,106,76,.28),rgba(255,178,58,.28)); color:var(--amber-300); box-shadow:inset 0 0 0 1px rgba(255,178,58,.28),0 0 24px -6px rgba(255,106,76,.6)}
.feature-icon svg{width:26px; height:26px}
.feature h3{margin-bottom:.4rem; font-size:1.14rem} .feature p{color:var(--tx-body); font-size:.95rem}
@media(max-width:860px){.features{grid-template-columns:1fr 1fr}.feature,.feature:nth-child(n){grid-column:span 1}}

/* ===== Stats ===== */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem; padding:2.6rem; background:var(--surface); border-radius:var(--r-2xl); box-shadow:var(--sh-lg); border:1px solid var(--line-2); backdrop-filter:blur(12px)}
.stat{text-align:center}
.stat-value{font-family:var(--f-display); font-weight:800; font-size:clamp(2.2rem,1.7rem+1.6vw,3.2rem); line-height:1; letter-spacing:-.04em; color:var(--coral-400); text-shadow:0 0 26px rgba(255,106,76,.4)}
.stat:nth-child(2) .stat-value{color:var(--cyan); text-shadow:0 0 26px rgba(53,214,255,.4)}
.stat:nth-child(3) .stat-value{color:var(--green-300); text-shadow:0 0 26px rgba(64,214,138,.4)}
.stat:nth-child(4) .stat-value{color:var(--violet); text-shadow:0 0 26px rgba(139,92,255,.4)}
.stat:nth-child(5) .stat-value{color:var(--pink); text-shadow:0 0 26px rgba(255,95,162,.4)}
.stat-label{margin-top:.55rem; color:var(--tx-muted); font-size:.92rem; font-weight:600}
.integrations{margin-top:3.2rem; text-align:center}
.integrations-label{color:var(--tx-muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700; margin-bottom:1.6rem}
.integrations-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem}
.int-chip{background:#fff; border-radius:14px; padding:.6rem 1.2rem; min-width:118px; height:58px; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm); border:1px solid rgba(255,255,255,.15); transition:transform var(--t), box-shadow var(--t)}
.int-chip:hover{transform:translateY(-4px) rotate(-1.5deg); box-shadow:var(--sh-md)}
.int-chip img{max-height:28px; width:auto}
.int-wordmark{font-family:var(--f-display); font-weight:700; font-size:1.2rem; letter-spacing:-.02em}

/* ===== FAQ ===== */
.faq{max-width:840px; margin:0 auto; display:grid; gap:.85rem}
.faq details{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:.35rem 1.4rem; transition:box-shadow var(--t), border-color var(--t), background var(--t); backdrop-filter:blur(8px)}
.faq details[open]{box-shadow:var(--sh-md); border-color:rgba(53,214,255,.4); background:var(--surface-2)}
.faq summary{list-style:none; cursor:pointer; padding:1.05rem 0; font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.06rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-size:1.5rem; color:var(--cyan); transition:transform var(--t); flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.15rem; color:var(--tx-body)} .faq details a{color:var(--cyan)}

/* ===== CTA final ===== */
.cta-final{background:var(--g-vibe); color:#fff; border-radius:var(--r-2xl); padding:clamp(2.8rem,5vw,4.8rem); text-align:center; position:relative; overflow:hidden; isolation:isolate; box-shadow:var(--sh-lg)}
.cta-final::before{content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none; background:radial-gradient(38% 50% at 18% 6%,rgba(255,255,255,.4),transparent 60%),radial-gradient(40% 48% at 84% 96%,rgba(255,255,255,.26),transparent 62%); animation:auroraHero 22s ease-in-out infinite alternate}
.cta-final h2{color:#fff; margin-bottom:1rem} .cta-final .text-brand{background:linear-gradient(115deg,#fff,#FFE4C2); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta-final p{color:rgba(255,255,255,.9); font-size:1.12rem; max-width:640px; margin:0 auto 2rem}
.cta-final .btn-row{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
.cta-final .btn-partes,.cta-final .btn-partehotel,.cta-final .btn-autoses{background:#fff; box-shadow:0 14px 40px -14px rgba(0,0,0,.4)}
.cta-final .btn-partes{color:var(--violet-600)} .cta-final .btn-partehotel{color:var(--coral-600)} .cta-final .btn-autoses{color:var(--green-600)}

/* ===== Footer ===== */
footer{background:var(--ink-950); color:rgba(255,255,255,.5); padding:3.4rem 0 2rem; position:relative; overflow:hidden}
footer::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(600px 300px at 10% 0%,rgba(255,106,76,.14),transparent 60%),radial-gradient(600px 300px at 90% 8%,rgba(139,92,255,.16),transparent 60%)}
footer .container{position:relative; z-index:1}
.footer-grid{display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; align-items:flex-start; padding-bottom:2rem; border-bottom:1px solid var(--line)}
.footer-brand{max-width:400px} .footer-brand img{height:40px; width:auto; margin-bottom:.95rem} .footer-brand p{color:rgba(255,255,255,.5); font-size:.92rem; margin-top:.5rem}
.footer-cols{display:flex; flex-wrap:wrap; gap:2.5rem 3rem}
.footer-col h4{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1rem}
.footer-col a{display:block; color:rgba(255,255,255,.6); font-size:.92rem; margin-bottom:.6rem} .footer-col a:hover{color:var(--coral-300)}
.footer-bottom{padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; color:rgba(255,255,255,.45); font-size:.85rem} .footer-bottom a{color:rgba(255,255,255,.6)}
.eco-familia-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.8rem 0 0}
@media(max-width:860px){.eco-familia-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.eco-familia-grid{grid-template-columns:1fr}}

/* ===== Responsive ===== */
@media(max-width:980px){
  .paths{grid-template-columns:1fr} .problem-grid{grid-template-columns:1fr} .ia-scan{grid-template-columns:1fr; gap:2.5rem}
  .product-grid{grid-template-columns:1fr; gap:2.5rem} .product-grid.reverse .product-media{order:0} .decide-grid{grid-template-columns:1fr}
  .nav-link.hide-sm{display:none} .hero{padding-top:7rem}
}
@media(max-width:640px){
  section{padding:3.8rem 0} .hero{padding:6rem 0 3rem} .path-card > :not(.path-photo){padding-inline:1.5rem}
  .cta-final .btn-row .btn{width:100%} .footer-grid{flex-direction:column} .footer-bottom{flex-direction:column; text-align:center; gap:.5rem}
  .media-badge{display:none} .stats{padding:1.75rem 1.25rem}
}