/* ============================================================
   TAPnRATE — landing
   Paleta: noche cálida + oro de marca + auroras que siguen al cursor
   ============================================================ */

:root{
  /* Superficies */
  --bg:        #0B0A09;
  --bg-2:      #100E0C;
  --bg-3:      #16130F;
  --panel:     rgba(255,250,240,.035);

  /* Tinta */
  --ink:       #F7F2E9;
  --ink-2:     #CFC6B8;
  --mute:      #968C80;

  /* Marca */
  --gold:      #C0A068;
  --gold-lite: #E4CE9E;
  --gold-deep: #8E7340;

  /* Auroras (los colores que llaman la atención) */
  --a1: #FFB443;   /* ámbar */
  --a2: #C0A068;   /* oro de marca */
  --a3: #7C5CFF;   /* violeta */
  --a4: #FF4D7E;   /* rosa */

  --line:      rgba(247,242,233,.10);
  --line-2:    rgba(247,242,233,.18);

  --ease:      cubic-bezier(.22,.9,.24,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --wrap: 1200px;
  --pad:  clamp(1.25rem, 5vw, 4rem);

  --font-ui:   "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-disp: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.62 var(--font-ui);
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#100E0C; padding:.75rem 1.25rem; border-radius:0 0 12px 0;
  font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--gold-lite);
  outline-offset:3px;
  border-radius:6px;
}

/* ── Fondo: aurora reactiva al cursor (la firma del sitio) ───── */
.aurora{
  position:fixed; inset:-20vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at calc(var(--mx,50%) + 20vmax) calc(var(--my,38%) + 20vmax),
      color-mix(in oklab, var(--a1) 62%, transparent) 0%, transparent 62%),
    radial-gradient(46vmax 46vmax at calc(var(--mx2,62%) + 20vmax) calc(var(--my2,18%) + 20vmax),
      color-mix(in oklab, var(--a3) 52%, transparent) 0%, transparent 60%),
    radial-gradient(30vmax 30vmax at calc(var(--mx3,28%) + 20vmax) calc(var(--my3,72%) + 20vmax),
      color-mix(in oklab, var(--a4) 40%, transparent) 0%, transparent 62%);
  filter:blur(72px) saturate(140%);
  opacity:.42;
}
/* Navegadores sin color-mix: auroras planas, mismo efecto */
@supports not (color:color-mix(in oklab, red 50%, blue)){
  .aurora{
    background:
      radial-gradient(38vmax 38vmax at calc(var(--mx,50%) + 20vmax) calc(var(--my,38%) + 20vmax), rgba(255,180,67,.62) 0%, transparent 62%),
      radial-gradient(46vmax 46vmax at calc(var(--mx2,62%) + 20vmax) calc(var(--my2,18%) + 20vmax), rgba(124,92,255,.5) 0%, transparent 60%),
      radial-gradient(30vmax 30vmax at calc(var(--mx3,28%) + 20vmax) calc(var(--my3,72%) + 20vmax), rgba(255,77,126,.38) 0%, transparent 62%);
  }
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

main,.nav,.foot,.menu-movil{ position:relative; z-index:2; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap-narrow{ max-width:840px; }
.section{ padding-block:clamp(5rem,11vw,9.5rem); position:relative; }
.section-alt{ background:linear-gradient(180deg, transparent, var(--bg-2) 14%, var(--bg-2) 86%, transparent); }

/* ── Tipografía ─────────────────────────────────────────────── */
.eyebrow{
  margin:0 0 1.25rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}

.hero-title,.h2{
  font-family:var(--font-disp);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.028em;   /* tracking negativo: el texto grande se lee muy separado */
  margin:0;
  text-wrap:balance;
}
.hero-title{ font-size:clamp(3.1rem,9.2vw,7.4rem); line-height:.9; letter-spacing:-.038em; }
.h2{ font-size:clamp(2.15rem,5.2vw,4rem); margin-bottom:1.4rem; }

.hero-title em,.h2 em{
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg,var(--gold-lite),var(--gold) 45%,var(--a1));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-right:.06em;
}

.lead{
  margin:0 0 2.5rem;
  max-width:56ch;
  font-size:clamp(1.05rem,1rem + .45vw,1.25rem);
  line-height:1.65;
  color:var(--ink-2);
}

.badge{
  display:inline-block;
  background:linear-gradient(100deg,var(--a1),var(--gold-lite));
  color:#140F06;
  font:800 .68rem/1 var(--font-ui);
  letter-spacing:.1em; text-transform:uppercase;
  padding:.42em .7em; border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 6px 22px rgba(255,180,67,.28);
}

/* ── Botones ────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.86em 1.5em;
  border-radius:999px;
  font:700 .95rem/1 var(--font-ui);
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s var(--ease-out), box-shadow .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
  will-change:transform;
}
.btn-lg{ padding:1.05em 1.9em; font-size:1rem; }

.btn-gold{
  background:linear-gradient(100deg,var(--gold-lite),var(--gold) 60%,var(--gold-deep));
  color:#140F06;
  box-shadow:0 10px 30px -12px rgba(192,160,104,.75);
}
.btn-gold:hover{ box-shadow:0 16px 44px -14px rgba(228,206,158,.9); }

.btn-ghost{
  border-color:var(--line-2);
  color:var(--ink);
  background:rgba(247,242,233,.02);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-lite); }

/* Respuesta al pulsar: instantánea, no al soltar */
.btn:active{ transform:scale(.965); transition-duration:60ms; }

/* ── Nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:.95rem var(--pad);
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(11,10,9,.62);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px rgba(0,0,0,.9);
  padding-block:.65rem;
}
@supports not (backdrop-filter:blur(4px)){
  .nav.is-stuck{ background:rgba(11,10,9,.94); }
}

.nav-brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.nav-mark{ color:var(--gold); flex:none; }
.nav-word{ font:800 1.02rem/1 var(--font-ui); letter-spacing:.04em; }
.nav-word i{ font-style:normal; color:var(--gold); }

.nav-links{ position:relative; display:none; gap:.35rem; align-items:center; }
.nav-links a{
  position:relative;
  padding:.55rem .75rem;
  font-size:.9rem; font-weight:600;
  color:var(--ink-2); text-decoration:none;
  border-radius:999px;
  transition:color .25s var(--ease);
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav-links a:hover,.nav-links a.is-active{ color:var(--ink); }
.nav-links .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--a1);
  box-shadow:0 0 0 0 rgba(255,180,67,.55);
  animation:dotPing 2.4s var(--ease) infinite;
}
@keyframes dotPing{ 0%{box-shadow:0 0 0 0 rgba(255,180,67,.5)} 70%{box-shadow:0 0 0 7px rgba(255,180,67,0)} 100%{box-shadow:0 0 0 0 rgba(255,180,67,0)} }

/* subrayado que se desliza entre enlaces */
.nav-ink{
  position:absolute; bottom:.28rem; left:0;
  height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold));
  border-radius:2px;
  opacity:0;
  pointer-events:none;
}

.nav-cta{ display:none; }

.nav-burger{
  width:44px; height:44px; display:grid; place-content:center; gap:6px;
  background:none; border:1px solid var(--line-2); border-radius:12px;
  cursor:pointer;
}
.nav-burger span{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .34s var(--ease), opacity .2s; }
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.menu-movil{
  position:fixed; inset:64px .75rem auto; z-index:99;
  display:flex; flex-direction:column; gap:.25rem;
  padding:1rem;
  background:rgba(16,14,12,.9);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--line-2);
  border-radius:22px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transform-origin:top right;
  transition:opacity .3s var(--ease-out), transform .42s var(--ease-out);
}
.menu-movil[hidden]{ display:none; }
.menu-movil.is-in{ opacity:1; transform:none; }
.menu-movil:not(.is-in){ opacity:0; transform:translateY(-10px) scale(.96); }
.menu-movil a{ padding:.85rem .9rem; text-decoration:none; font-weight:600; border-radius:12px; }
.menu-movil a:not(.btn):active{ background:rgba(247,242,233,.06); }
.menu-movil .btn{ margin-top:.5rem; }

@media (min-width:1140px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-burger,.menu-movil{ display:none !important; }
}

/* ── Reveal al hacer scroll ─────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .85s var(--ease-out), transform .95s var(--ease-out);
}
.reveal.is-visible{ opacity:1; transform:none; }
/* Defensa: si un elemento lleva .reveal y data-split a la vez, nunca desaparece */
.reveal[data-split]{ opacity:1; transform:none; }

.split-word{ display:inline-block; }
/* Entrada corta a propósito: la página queda completamente legible
   en menos de medio segundo, para que una miniatura o una captura
   nunca agarre el titular a medias. */
[data-split] .split-word{
  opacity:0;
  transform:translateY(.34em);
  transition:opacity .38s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * 28ms);
}
[data-split].is-visible .split-word{ opacity:1; transform:none; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero{
  /* Alto suficiente para respirar, pero no tanto que la sección
     siguiente quede fuera del primer vistazo. */
  min-height:clamp(580px,86svh,880px);
  display:flex; align-items:center;
  padding:clamp(6rem,12vh,8.5rem) 0 clamp(4rem,8vh,6rem);
  position:relative;
}
.hero-inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(3rem,7vw,5rem);
  align-items:center;
}
@media (min-width:1000px){
  .hero-inner{ grid-template-columns:1.05fr .95fr; }
}

.hero-sub{
  margin:1.9rem 0 2.4rem;
  max-width:46ch;
  font-size:clamp(1.05rem,1rem + .5vw,1.28rem);
  line-height:1.62;
  color:var(--ink-2);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero-meta{
  list-style:none; margin:2.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  font-size:.86rem; color:var(--mute);
}
.hero-meta li{ display:flex; align-items:center; gap:.5rem; }
.hero-meta li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* La tarjeta que se arrastra */
.hero-stage{
  perspective:1300px;
  display:grid; place-items:center;
  position:relative;
  min-height:clamp(260px,38vw,420px);
}
.card3d{
  position:relative;
  width:min(430px,78vw);
  aspect-ratio:1.586;
  transform-style:preserve-3d;
  cursor:grab;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  transform:
    translate3d(var(--tx,0px),var(--ty,0px),0)
    rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg)) rotateZ(var(--rz,0deg))
    scale(var(--sc,1));
  will-change:transform;
  outline-offset:14px;
}
.card3d.is-grabbed{ cursor:grabbing; }

.card3d-glow{
  position:absolute; inset:-14% -10% -26%;
  background:radial-gradient(50% 50% at 50% 55%, rgba(192,160,104,.45), transparent 70%);
  filter:blur(38px);
  transform:translateZ(-60px);
  opacity:.9;
  pointer-events:none;
}

.card3d-face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.1rem,3.2vw,1.7rem);
  border-radius:clamp(16px,3vw,22px);
  overflow:hidden;
  background:
    linear-gradient(145deg,#2A2218 0%, #191410 42%, #221B12 100%);
  border:1px solid rgba(228,206,158,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 40px 80px -40px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.4);
}
.card-shine{
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,240,210,.16) 47%, rgba(255,255,255,.05) 52%, transparent 66%);
  transform:translateX(var(--shine,0%));
  pointer-events:none;
}
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.card-mark{ color:var(--gold-lite); }
.card-chip{
  width:38px; height:28px; border-radius:6px;
  background:linear-gradient(135deg,#E4CE9E,#A98C52 60%,#E8D6AC);
  box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
  position:relative;
}
.card-chip::after{
  content:""; position:absolute; inset:5px 7px;
  border:1px solid rgba(0,0,0,.28); border-radius:2px;
}
.card-kicker{
  margin:0 0 .5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
}
.card-name{ margin:0; font-family:var(--font-disp); font-size:clamp(1.4rem,4.6vw,1.95rem); letter-spacing:-.02em; }
.card-branch{ margin:.15rem 0 0; font-size:.82rem; color:var(--mute); }
.card-bottom{ display:flex; align-items:center; justify-content:space-between; }
.card-stars{ color:var(--gold-lite); letter-spacing:.15em; font-size:.95rem; }
.card-brand{ font:800 .78rem/1 var(--font-ui); letter-spacing:.1em; color:var(--ink-2); }
.card-brand i{ font-style:normal; color:var(--gold); }

.stage-hint{
  position:absolute; bottom:-.5rem;
  margin:0;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
  transition:opacity .5s var(--ease);
}
.stage-hint.is-gone{ opacity:0; }

.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  width:22px; height:34px; border:1px solid var(--line-2); border-radius:12px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:2px; height:6px; border-radius:2px;
  background:var(--gold);
  animation:cue 2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translate(-50%,0);opacity:0} 25%{opacity:1} 75%{transform:translate(-50%,12px);opacity:0} 100%{opacity:0} }

/* ── Cifras ─────────────────────────────────────────────────── */
.strip{ border-block:1px solid var(--line); background:rgba(0,0,0,.22); }
.strip-grid{
  display:grid; gap:2rem 1.5rem;
  grid-template-columns:repeat(2,1fr);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:820px){ .strip-grid{ grid-template-columns:repeat(4,1fr); } }
.strip-item b{
  display:block;
  font-family:var(--font-disp); font-weight:500;
  font-size:clamp(2.6rem,5.5vw,3.6rem); line-height:1; letter-spacing:-.03em;
  color:var(--gold-lite);
}
.strip-item span{ display:block; margin-top:.6rem; font-size:.9rem; color:var(--mute); max-width:22ch; }

/* ── Pasos ──────────────────────────────────────────────────── */
.pasos{
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:22px; overflow:hidden;
}
@media (min-width:880px){ .pasos{ grid-template-columns:repeat(3,1fr); } }
.paso{
  background:var(--bg);
  padding:clamp(1.8rem,3.6vw,2.8rem);
  transition:background-color .45s var(--ease);
}
.paso:hover{ background:var(--bg-3); }
.paso-num{
  font-family:var(--font-disp); font-size:.95rem; letter-spacing:.1em;
  color:var(--gold);
}
.paso h3{
  margin:.9rem 0 .7rem;
  font-family:var(--font-disp); font-weight:500; font-size:1.65rem; letter-spacing:-.02em;
}
.paso p{ margin:0; color:var(--ink-2); font-size:.98rem; }

/* ── Features ───────────────────────────────────────────────── */
.feats{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  margin-top:3rem;
}
.feat{
  padding:1.75rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  transition:border-color .4s var(--ease), transform .4s var(--ease-out), background-color .4s var(--ease);
}
.feat:hover{ border-color:rgba(192,160,104,.45); transform:translateY(-4px); background:rgba(192,160,104,.05); }
.feat h3{
  margin:0 0 .6rem;
  font-size:1.08rem; font-weight:700; letter-spacing:-.005em;
}
.feat p{ margin:0; color:var(--mute); font-size:.94rem; }

/* ── Reward Cards ───────────────────────────────────────────── */
.rewards{ overflow:hidden; }
.rewards::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 78% 40%, rgba(255,180,67,.12), transparent 70%);
}
.rewards-grid{ display:grid; gap:clamp(3rem,6vw,5rem); align-items:center; }
@media (min-width:1000px){ .rewards-grid{ grid-template-columns:1.02fr .98fr; } }

.checks{ list-style:none; margin:0 0 2.5rem; padding:0; display:grid; gap:1.1rem; }
.checks li{
  position:relative;
  padding-left:2rem;
  color:var(--ink-2);
  font-size:.99rem;
}
.checks li b{ color:var(--ink); font-weight:700; }
.checks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-lite),var(--gold));
  box-shadow:0 0 0 4px rgba(192,160,104,.13);
}
.checks li::after{
  content:""; position:absolute; left:4.6px; top:.72em;
  width:5px; height:2.5px; border-left:1.6px solid #16120A; border-bottom:1.6px solid #16120A;
  transform:rotate(-45deg);
}

.rewards-demo{ display:grid; justify-items:center; gap:1rem; }
.loyal{
  width:min(430px,100%);
  padding:clamp(1.2rem,3vw,1.6rem);
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,250,240,.075), rgba(255,250,240,.028));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(247,242,233,.16);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,.12) inset;
  position:relative; overflow:hidden;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .14s var(--ease-out);
}
@supports not (backdrop-filter:blur(4px)){
  .loyal{ background:#1A1612; }
}
.loyal:active{ transform:scale(.988); }

.loyal-head{ display:flex; align-items:center; gap:.7rem; }
.loyal-mark{ color:var(--gold); flex:none; }
.loyal-id{ margin-right:auto; }
.loyal-biz{ margin:0; font-weight:700; font-size:1rem; }
.loyal-sub{ margin:0; font-size:.76rem; color:var(--mute); }
.loyal-wallet{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:999px;
  padding:.4em .7em;
  white-space:nowrap;
}

.loyal-stamps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem;
  margin:1.4rem 0 1.2rem;
}
.stamp{
  aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  border:1.5px dashed rgba(247,242,233,.22);
  color:transparent;
  background:rgba(0,0,0,.2);
  transform:scale(var(--s,1));
  will-change:transform;
}
.stamp svg{ width:52%; height:52%; opacity:0; transition:opacity .2s var(--ease); }
.stamp.is-on{
  border-style:solid;
  border-color:transparent;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));
  color:#16120A;
  box-shadow:0 8px 22px -10px rgba(228,206,158,.75);
}
.stamp.is-on svg{ opacity:1; }

.loyal-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.loyal-prize{ margin:0; font-size:.82rem; color:var(--mute); }
.loyal-prize span{ color:var(--gold-lite); font-weight:700; }
.loyal-btn{
  font:700 .82rem/1 var(--font-ui);
  color:#16120A;
  background:linear-gradient(100deg,var(--gold-lite),var(--gold));
  border:0; border-radius:999px;
  padding:.7em 1.1em;
  cursor:pointer;
  transition:transform .12s var(--ease-out);
}
.loyal-btn:active{ transform:scale(.94); }

.loyal-win{
  display:grid; grid-template-rows:0fr;
  margin-top:0;
  border-radius:14px;
  background:linear-gradient(100deg,var(--a1),var(--gold-lite));
  color:#16120A;
  box-shadow:0 14px 34px -18px rgba(255,180,67,.9);
  transition:grid-template-rows .5s var(--ease-out), margin-top .5s var(--ease-out);
}
.loyal-win span{
  overflow:hidden;
  display:block;
  text-align:center;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.76rem;
  line-height:0;
  transition:line-height .5s var(--ease-out), padding .5s var(--ease-out);
  padding:0 .85rem;
}
.loyal-win.is-in{ grid-template-rows:1fr; margin-top:1.1rem; }
.loyal-win.is-in span{ line-height:1; padding:.95rem .85rem; }
.loyal-win[hidden]{ display:none; }

.demo-note{ margin:0; font-size:.78rem; color:var(--mute); letter-spacing:.03em; }

/* ── Panel ──────────────────────────────────────────────────── */
.panel{
  position:relative;
  margin-top:3rem;
  border:1px solid var(--line-2);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-3);
  box-shadow:0 50px 100px -60px rgba(0,0,0,1);
}
.panel-tag{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
  border:1px solid var(--line-2); border-radius:999px; padding:.35em .65em;
}
.panel-bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.3);
}
.pdot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.panel-bar b{
  margin-left:.8rem;
  font:500 .76rem/1 var(--font-ui); color:var(--mute); letter-spacing:.02em;
}
.panel-body{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--line);
}
.kpi,.chart,.panel-list{ background:var(--bg-3); padding:1.5rem; }
.kpi span{ display:block; font-size:.8rem; color:var(--mute); }
.kpi b{
  display:block; margin:.35rem 0 .25rem;
  font-family:var(--font-disp); font-weight:500; font-size:2.2rem; letter-spacing:-.03em;
  color:var(--ink);
}
.kpi i{ font-style:normal; font-size:.74rem; color:var(--gold); }

.chart{ grid-column:1/-1; display:flex; align-items:flex-end; gap:.4rem; height:170px; }
.chart i{
  flex:1; display:block;
  height:var(--h);
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--gold-lite),rgba(192,160,104,.18));
  transform-origin:bottom;
  animation:bars .8s var(--ease-out) backwards;
}
.chart i:nth-child(1){animation-delay:.02s}  .chart i:nth-child(2){animation-delay:.06s}
.chart i:nth-child(3){animation-delay:.10s}  .chart i:nth-child(4){animation-delay:.14s}
.chart i:nth-child(5){animation-delay:.18s}  .chart i:nth-child(6){animation-delay:.22s}
.chart i:nth-child(7){animation-delay:.26s}  .chart i:nth-child(8){animation-delay:.30s}
.chart i:nth-child(9){animation-delay:.34s}  .chart i:nth-child(10){animation-delay:.38s}
.chart i:nth-child(11){animation-delay:.42s} .chart i:nth-child(12){animation-delay:.46s}
@keyframes bars{ from{ transform:scaleY(0) } }

.panel-list{ grid-column:1/-1; list-style:none; margin:0; display:grid; gap:.7rem; }
.panel-list li{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--ink-2); }
.panel-list b{ color:var(--gold-lite); font-weight:700; }

/* ── Precios ────────────────────────────────────────────────── */
.planes{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:3rem;
  align-items:start;
}
.plan{
  position:relative;
  padding:2rem 1.75rem;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .45s var(--ease-out);
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.plan h3{ margin:0; font-size:1.1rem; font-weight:700; letter-spacing:.02em; }
.plan-price{ margin:1rem 0 .2rem; display:flex; align-items:baseline; gap:.5rem; }
.plan-price b{
  font-family:var(--font-disp); font-weight:500; font-size:2.9rem; line-height:1; letter-spacing:-.035em;
  color:var(--ink);
}
.plan-price span{ font-size:.82rem; color:var(--mute); }
.plan-note{ margin:0 0 1.6rem; font-size:.8rem; color:var(--gold); }
.plan ul{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.75rem; }
.plan li{ position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--ink-2); }
.plan li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.plan .btn{ margin-top:auto; width:100%; }

.plan-pro{ border-color:rgba(192,160,104,.4); background:rgba(192,160,104,.045); }
.plan-new{
  border-color:rgba(255,180,67,.42);
  background:linear-gradient(170deg, rgba(255,180,67,.1), rgba(124,92,255,.06));
}
.badge-abs{ position:absolute; top:-.7rem; left:1.75rem; }

.planes-foot{ margin:2rem 0 0; font-size:.88rem; color:var(--mute); }
.planes-foot b{ color:var(--ink-2); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{ margin-top:3rem; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.45rem 0;
  background:none; border:0;
  color:var(--ink);
  font:600 clamp(1rem,.98rem + .3vw,1.14rem)/1.4 var(--font-ui);
  text-align:left;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.qa-q:hover{ color:var(--gold-lite); }
.qa-q i{
  position:relative; flex:none; width:16px; height:16px;
  transition:transform .45s var(--ease-out);
}
.qa-q i::before,.qa-q i::after{
  content:""; position:absolute; left:0; top:50%;
  width:16px; height:1.6px; background:var(--gold);
  transition:transform .45s var(--ease-out), opacity .3s;
}
.qa-q i::after{ transform:rotate(90deg); }
.qa.is-open .qa-q i{ transform:rotate(135deg); }
.qa.is-open .qa-q i::after{ opacity:0; }

.qa-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-out);
}
.qa-a > div{ overflow:hidden; }
.qa.is-open .qa-a{ grid-template-rows:1fr; }
.qa-a p{ margin:0 0 1.5rem; max-width:68ch; color:var(--ink-2); font-size:.97rem; }

/* ── Clientes: acceso al panel y soporte ────────────────────── */
.clientes-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  margin-top:3rem;
  align-items:start;
}
.cliente-card{
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,3.2vw,2.2rem);
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
}
/* La tarjeta de acceso es la acción principal de esta sección:
   se le da el borde de marca y las demás se quedan calladas. */
.cliente-card:first-child{
  border-color:rgba(192,160,104,.4);
  background:rgba(192,160,104,.05);
}
.cliente-card h3{
  margin:0 0 .8rem;
  font-family:var(--font-disp); font-weight:500;
  font-size:1.7rem; letter-spacing:-.02em;
}
.cliente-intro{ margin:0 0 1.6rem; color:var(--ink-2); font-size:.97rem; }

.acceso-form{ display:grid; gap:.7rem; }
.acceso-label{
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.acceso-input{
  width:100%;
  padding:.95em 1.1em;
  font:500 1rem/1.2 var(--font-ui);
  color:var(--ink);
  background:rgba(0,0,0,.3);
  border:1px solid var(--line-2);
  border-radius:14px;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.acceso-input::placeholder{ color:var(--mute); font-weight:400; }
.acceso-input:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(0,0,0,.45);
}
.acceso-input:focus-visible{ outline:2px solid var(--gold-lite); outline-offset:2px; }
.acceso-form .btn{ width:100%; }

.acceso-msg{
  margin:0; min-height:1.2em;
  font-size:.84rem; color:var(--a1);
}
.acceso-msg:empty{ min-height:0; }

.cliente-nota{
  margin:1.4rem 0 0;
  font-size:.84rem; line-height:1.6; color:var(--mute);
}
.cliente-nota a{ color:var(--gold-lite); text-decoration:underline; text-underline-offset:3px; }

.soporte-lista{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:1.1rem; }
.soporte-lista li{ display:grid; gap:.3rem; }
.soporte-lista b{ font-size:.95rem; color:var(--ink); }
.soporte-lista span{ font-size:.9rem; color:var(--mute); }

.cliente-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:auto; }
.cliente-acciones .btn{ flex:1 1 auto; }

/* ── CTA final ──────────────────────────────────────────────── */
.cta{ text-align:center; }
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(192,160,104,.14), transparent 70%);
}
.cta-inner{ position:relative; }
.cta-mark{ color:var(--gold); margin-bottom:1.6rem; animation:markFloat 6s ease-in-out infinite; }
@keyframes markFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.cta .lead{ margin-inline:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.cta-foot{ margin:1.8rem 0 0; font-size:.84rem; color:var(--mute); }

/* ── Footer ─────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding-block:3.5rem 3rem; background:rgba(0,0,0,.3); }
.foot-grid{ display:grid; gap:2.2rem; }
@media (min-width:880px){ .foot-grid{ grid-template-columns:1.2fr 1fr 1.2fr; align-items:start; } }
.foot-tag{ margin:.9rem 0 0; font-size:.88rem; color:var(--mute); }
.foot-contacto{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.45rem; }
.foot-contacto a{
  font-size:.88rem; color:var(--ink-2); text-decoration:none;
  width:fit-content; transition:color .25s var(--ease);
}
.foot-contacto a:hover{ color:var(--gold-lite); }
.foot-nav{ display:grid; gap:.6rem; align-content:start; }
.foot-nav a{ font-size:.9rem; color:var(--ink-2); text-decoration:none; width:fit-content; transition:color .25s var(--ease); }
.foot-nav a:hover{ color:var(--gold-lite); }
.foot-legal{ margin:0; font-size:.76rem; line-height:1.7; color:var(--mute); }
@media (min-width:880px){ .foot-legal{ text-align:right; } }

/* ── Accesibilidad del movimiento ───────────────────────────────
   Sólo se apagan los efectos realmente intrusivos (bucles grandes,
   parallax). Las microinteracciones se conservan: Windows activa
   "reducir movimiento" de fábrica en muchos equipos y apagarlo todo
   dejaría la página muerta.                                       */
@media (prefers-reduced-motion:reduce){
  .cta-mark,.scroll-cue span,.nav-links .dot{ animation:none; }
  .chart i{ animation:none; }
  .reveal{ transition-duration:.4s; transform:none; }
  [data-split] .split-word{ transform:none; transition-delay:0ms; }
  html{ scroll-behavior:auto; }
}

@media (prefers-reduced-transparency:reduce){
  .nav.is-stuck,.menu-movil{ background:#100E0C; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .loyal{ background:#1A1612; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (prefers-contrast:more){
  :root{ --line:rgba(247,242,233,.3); --line-2:rgba(247,242,233,.5); --mute:#C6BCAE; }
  .aurora{ opacity:.2; }
}