/* ============================================================
   ÉLITE XAU Signals · landing estática
   Tema bloqueado en oscuro. Acento único: oro apagado.
   Sistema de radios concéntricos: carcasa 20 / núcleo 14 / botón 12.
   Curva de movimiento única: --ease. Sin linear, sin ease-in-out.
   ============================================================ */

/* ---------- tipografías autoalojadas (subconjunto latino) ---------- */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:400 700; font-stretch:75% 125%;
  src:url("assets/fonts/archivo-400_700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:400;
  src:url("assets/fonts/plexmono-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:500;
  src:url("assets/fonts/plexmono-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --bg:        #0A0908;
  --bg-2:      #0E0D0B;
  --surface:   #141210;
  --surface-2: #1A1714;
  --line:      rgba(233,226,212,.09);
  --line-2:    rgba(233,226,212,.15);

  --ink:       #EFEAE0;
  --ink-2:     #B3AB9C;
  --ink-3:     #7E7768;

  --gold:      #C9A961;
  --gold-hi:   #E6CD90;
  --gold-dim:  rgba(201,169,97,.13);

  /* Luz y materia. Las sombras se tiñen del fondo, nunca negro puro. */
  --lift:      0 1px 0 rgba(255,255,255,.05) inset;
  --shadow-sm: 0 10px 30px -14px rgba(0,0,0,.75);
  --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.85), 0 2px 10px -4px rgba(0,0,0,.5);
  --glow:      0 18px 46px -18px rgba(201,169,97,.4);

  --r-shell: 20px;
  --r:       14px;
  --r-btn:   12px;

  --wrap: 1200px;
  --ease:  cubic-bezier(.32,.72,0,1);
  --ease-s: cubic-bezier(.22,1,.36,1);

  --f-sans: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.6;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; }

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

.skip{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--gold); color:#17130A; padding:.7rem 1.1rem; border-radius:var(--r-btn); z-index:100;
}
.skip:focus{ width:auto; height:auto; overflow:visible; clip-path:none; left:1rem; top:1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); }
.wrap--n{ max-width:880px; }

/* ---------- atmósfera: grano + viñeta fijos, nunca sobre contenedores con scroll ---------- */
.grain,.vignette{ position:fixed; inset:0; pointer-events:none; }
.grain{
  z-index:60; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  z-index:0;
  background:radial-gradient(130% 90% at 50% 0%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ---------- tipografía ---------- */
.h-display{
  font-size:clamp(2.4rem,5.6vw,4.4rem);
  font-weight:700;
  font-stretch:112%;
  line-height:1.03;
  letter-spacing:-.03em;
}
.h-display--sm{ font-size:clamp(2.1rem,4.9vw,3.6rem); }

.h2{
  font-size:clamp(1.75rem,3.3vw,2.6rem);
  font-weight:600;
  font-stretch:108%;
  line-height:1.13;
  letter-spacing:-.024em;
  max-width:19ch;
}
.lede{ margin-top:1.05rem; color:var(--ink-2); max-width:56ch; font-size:1.03rem; }

.eyebrow{
  display:inline-block; border:1px solid var(--line-2); border-radius:999px;
  padding:.34rem .85rem; margin-bottom:1.15rem;
  font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.19em; color:var(--gold); background:var(--gold-dim); white-space:nowrap;
}
@media (max-width:480px){ .eyebrow{ font-size:.62rem; letter-spacing:.13em; padding-inline:.7rem; } }

/* ---------- botones ---------- */
.btn{
  --btn-lift:0px;
  position:relative; display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap;
  padding:.92rem 1.25rem .92rem 1.5rem; border-radius:var(--r-btn); border:1px solid transparent;
  font-weight:600; font-size:.98rem; letter-spacing:-.005em;
  transform:translateY(var(--btn-lift));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn__ico{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  transition:transform .5s var(--ease), background .35s var(--ease);
}
.btn__ico svg{ width:12px; height:12px; }
.btn:active{ --btn-lift:1px; }

.btn--gold{
  color:#171205;
  background:linear-gradient(180deg, #D5B876, var(--gold) 58%, #BB9B51);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -16px rgba(201,169,97,.5);
}
.btn--gold .btn__ico{ background:rgba(22,18,6,.14); }
.btn--gold:hover{ --btn-lift:-2px; box-shadow:var(--lift), var(--glow); }
.btn--gold:hover .btn__ico{ transform:translate(3px,-1px); background:rgba(22,18,6,.2); }

.btn--line{
  border-color:var(--line-2); color:var(--ink); background:rgba(255,255,255,.02);
  box-shadow:var(--lift);
}
.btn--line .btn__ico{ background:rgba(255,255,255,.05); }
.btn--line:hover{ --btn-lift:-2px; border-color:rgba(201,169,97,.5); color:var(--gold-hi); box-shadow:var(--lift), var(--shadow-sm); }
.btn--line:hover .btn__ico{ transform:translate(3px,-1px); }

.btn--ghost{ border-color:var(--line-2); color:var(--ink-2); padding-inline:1.35rem; }
.btn--ghost:hover{ border-color:var(--ink-3); color:var(--ink); }

.btn--sm{ padding:.58rem .8rem .58rem 1.05rem; font-size:.9rem; gap:.55rem; }
.btn--sm .btn__ico{ width:22px; height:22px; }
.btn--lg{ padding:1.1rem 1.5rem 1.1rem 2rem; font-size:1.05rem; }
.btn--lg .btn__ico{ width:30px; height:30px; }

/* línea de fricción bajo un CTA: qué pasa exactamente al pulsar */
.after-cta{ margin-top:.95rem; font-size:.85rem; color:var(--ink-3); }

/* ---------- marca ---------- */
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark{
  width:13px; height:13px; flex:none; border-radius:2px; transform:rotate(45deg);
  background:linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, #9C7C3C);
  box-shadow:0 0 14px rgba(201,169,97,.35);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__txt b{ font-weight:700; font-size:.98rem; letter-spacing:.02em; font-stretch:108%; white-space:nowrap; }
@media (max-width:400px){ .brand__txt b{ font-size:.88rem; } .brand__mark{ width:11px; height:11px; } }
.brand__txt i{ font-style:normal; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.26em; color:var(--ink-3); margin-top:.28rem; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,9,8,.72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
/* barra de progreso de lectura, sin JS */
.nav__bar{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%; transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(201,169,97,.25), var(--gold));
  opacity:0; transition:opacity .5s var(--ease);
}
.nav.is-stuck .nav__bar{ opacity:1; }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .nav__bar{ animation:progress linear; animation-timeline:scroll(root block); scale:0 1; }
    @keyframes progress{ from{ scale:0 1; } to{ scale:1 1; } }
  }
}

.nav__in{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav__links{ display:flex; gap:2rem; font-size:.95rem; color:var(--ink-2); }
.nav__links a{ position:relative; transition:color .35s var(--ease); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__end{ display:flex; align-items:center; gap:.75rem; }

.burger{ display:none; width:42px; height:42px; background:rgba(255,255,255,.02); border:1px solid var(--line-2); border-radius:var(--r-btn); padding:0; cursor:pointer; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--ink); margin:3.5px auto; transition:transform .5s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; }
  .nav__links{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(10,9,8,.94);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    padding:.5rem clamp(1.15rem,4vw,2rem) 1.5rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease), transform .5s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.95rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink); }
  .nav__links a::after{ display:none; }
  .nav__links a:last-child{ border-bottom:0; }
  /* los enlaces entran escalonados cuando se abre el panel */
  @media (prefers-reduced-motion: no-preference){
    .nav__links a{ opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .5s var(--ease); }
    .nav__links.is-open a{ opacity:1; transform:none; }
    .nav__links.is-open a:nth-child(1){ transition-delay:.06s; }
    .nav__links.is-open a:nth-child(2){ transition-delay:.11s; }
    .nav__links.is-open a:nth-child(3){ transition-delay:.16s; }
    .nav__links.is-open a:nth-child(4){ transition-delay:.21s; }
  }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-top:clamp(3rem,6.5vw,5rem); padding-bottom:clamp(3.5rem,7vw,6rem); }
.hero__glow{
  position:absolute; inset:-40% -15% auto -20%; height:min(880px,105vh); z-index:-1;
  background:
    radial-gradient(48% 46% at 26% 42%, rgba(201,169,97,.20), transparent 66%),
    radial-gradient(38% 40% at 74% 16%, rgba(201,169,97,.09), transparent 70%),
    radial-gradient(60% 50% at 50% 0%, rgba(120,92,40,.10), transparent 72%);
}
/* La deriva solo en escritorio: en móvil un compositor activo permanente
   cuesta batería y no aporta nada en una pantalla pequeña. */
@media (prefers-reduced-motion: no-preference) and (min-width:900px){
  .hero__glow{ animation:drift 26s var(--ease-s) infinite alternate; will-change:transform; }
  @keyframes drift{ from{ transform:translate3d(-1.5%,0,0) scale(1); } to{ transform:translate3d(2.5%,1.5%,0) scale(1.07); } }
}
.hero__in{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero__sub{ margin-top:1.5rem; font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--ink-2); max-width:44ch; }
.hero__cta{ margin-top:2.2rem; display:flex; gap:.85rem; flex-wrap:wrap; }

.live{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.71rem; text-transform:uppercase; letter-spacing:.17em;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.025); box-shadow:var(--lift);
  padding:.42rem .95rem .42rem .8rem; margin-bottom:1.9rem; white-space:nowrap;
}
.live__dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(201,169,97,.55); }
@media (prefers-reduced-motion: no-preference){
  .live__dot{ animation:pulse 2.6s var(--ease-s) infinite; }
  @keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(201,169,97,0);} 100%{ box-shadow:0 0 0 0 rgba(201,169,97,0);} }
}
@media (max-width:420px){ .live{ font-size:.64rem; letter-spacing:.11em; padding-inline:.75rem; } }

@media (max-width:860px){
  .hero{ padding-top:clamp(2.25rem,6vw,3.5rem); }
  .hero__in{ grid-template-columns:1fr; gap:2.5rem; }
  .shot--hero{ aspect-ratio:4/3; }
  .hero__sub{ max-width:none; }
  /* El primario ocupa el ancho completo. El secundario se queda pequeño
     para que la jerarquía no se pierda al apilarse. */
  .hero__cta{ gap:.75rem; }
  .hero__cta .btn--gold{ flex:1 1 100%; justify-content:space-between; }
  .hero__cta .btn--ghost{ flex:0 1 auto; }
}

/* ---------- doble bisel: carcasa + núcleo ---------- */
.shell{
  padding:6px; border-radius:var(--r-shell);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 46%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.shell--gold{
  background:linear-gradient(160deg, rgba(201,169,97,.24), rgba(201,169,97,.03) 52%);
  border-color:rgba(201,169,97,.22);
}

/* ---------- capturas ----------
   El marco arranca como hueco marcado. Cuando el archivo existe, la imagen
   se dibuja encima al cargar. Así nunca se ve el icono de imagen rota. */
.shot{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r); background:var(--surface); border:1px solid rgba(201,169,97,.16);
  box-shadow:var(--lift);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1.25rem; text-align:center;
}
.shot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(201,169,97,.05) 0 1px, transparent 1px 12px);
}
.shot__empty,.shot figcaption{
  position:relative; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em; color:var(--ink-3);
}
.shot__empty{ text-transform:uppercase; }
.shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:2; transition:opacity .6s var(--ease);
}
.shot--hero{ aspect-ratio:6/5; }
.shot--p{ aspect-ratio:9/14; }
.shot--l{ aspect-ratio:16/10; }

.shot.has-img{ padding:0; border-color:var(--line); }
.shot.has-img img{ opacity:1; }
.shot.has-img .shot__empty{ display:none; }
.shot.has-img figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; text-align:left;
  padding:1.6rem .95rem .8rem; letter-spacing:.06em; color:var(--ink-2);
  background:linear-gradient(transparent, rgba(6,5,4,.92));
}

/* ---------- cinta de métricas ---------- */
.strip{ position:relative; border-block:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), var(--bg)); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip__i{ padding:2.1rem 1.25rem; border-left:1px solid var(--line); }
.strip__i:first-child{ border-left:0; padding-left:0; }
.strip__i b{ display:block; font-family:var(--f-mono); font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:500; color:var(--gold); letter-spacing:-.02em; }
.strip__i span{ display:block; margin-top:.4rem; font-size:.88rem; color:var(--ink-3); }
@media (max-width:820px){
  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .strip__i{ padding:1.5rem 1rem; }
  .strip__i:nth-child(odd){ border-left:0; padding-left:0; }
  .strip__i:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- secciones ---------- */
.sec{ position:relative; padding-block:clamp(5rem,9.5vw,8rem); }
.sec--tight{ padding-bottom:clamp(3rem,6vw,5rem); }
.sec--cmp{ background:linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg)); border-block:1px solid var(--line); }
.sec__head{ margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.sec__head--c{ text-align:center; }
.sec__head--c .h2{ margin-inline:auto; max-width:22ch; }
.sec__head--c .lede{ margin-inline:auto; }

/* ---------- bento con foco que sigue al cursor ---------- */
.bento{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-radius:var(--r-shell); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.cell{ position:relative; background:var(--bg); padding:clamp(1.7rem,2.7vw,2.4rem); transition:background .5s var(--ease); }
.cell--wide{ grid-column:span 2; }
.cell--tint{ background:linear-gradient(150deg, rgba(201,169,97,.075), transparent 58%), var(--surface); }
.cell::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(201,169,97,.15), transparent 68%);
}
.cell:hover{ background-color:rgba(255,255,255,.016); }
.cell:hover::after{ opacity:1; }
.cell h3{ font-size:1.16rem; font-weight:600; letter-spacing:-.016em; margin-bottom:.7rem; font-stretch:104%; }
.cell p{ color:var(--ink-2); font-size:.98rem; max-width:46ch; }
@media (max-width:860px){
  .bento{ grid-template-columns:1fr; }
  .cell--wide{ grid-column:span 1; }
  .cell::after{ display:none; }
}

/* ---------- comparativa ---------- */
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.6rem); align-items:start; }
.cmp__col{ border-radius:var(--r); padding:clamp(1.6rem,2.9vw,2.35rem); }
.cmp__col--bad{ border:1px solid var(--line); background:rgba(255,255,255,.008); }
.cmp__col--good{
  border-radius:var(--r-shell);
  background:linear-gradient(155deg, rgba(201,169,97,.13), transparent 55%), var(--surface);
  border:1px solid rgba(201,169,97,.26);
  box-shadow:var(--lift), var(--shadow-lg);
}
.cmp__t{ font-size:1rem; font-weight:600; letter-spacing:.01em; padding-bottom:1.25rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem; }
.cmp__col--bad .cmp__t{ color:var(--ink-3); }
.cmp__col--good .cmp__t{ color:var(--gold); }
.cmp__list li{ position:relative; padding-left:1.7rem; margin-bottom:1.05rem; font-size:.97rem; }
.cmp__list li:last-child{ margin-bottom:0; }
.cmp__list li::before{ content:""; position:absolute; left:0; top:.62em; }
.cmp__col--bad li{ color:var(--ink-3); }
.cmp__col--bad li::before{ width:11px; height:1px; background:var(--ink-3); }
.cmp__col--good li{ color:var(--ink); }
.cmp__col--good li::before{
  width:7px; height:7px; border-radius:1px; transform:rotate(45deg) translateY(-1px);
  background:linear-gradient(140deg, var(--gold-hi), var(--gold));
}
@media (max-width:820px){ .cmp{ grid-template-columns:1fr; } }

/* ---------- cómo funciona ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); counter-reset:s; }
.step{ counter-increment:s; padding-top:1.6rem; border-top:1px solid var(--line-2); position:relative; }
.step::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; top:-.85rem; left:0;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--gold);
  background:var(--bg); padding-right:.7rem;
}
.step:nth-child(2){ margin-top:clamp(0rem,3vw,2.6rem); }
.step:nth-child(3){ margin-top:clamp(0rem,6vw,5.2rem); }
.step h3{ font-size:1.22rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.7rem; font-stretch:104%; }
.step p{ color:var(--ink-2); font-size:.97rem; }
@media (max-width:820px){
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .step:nth-child(2),.step:nth-child(3){ margin-top:0; }
}

/* ============================================================
   PRECIOS
   La puerta gratuita gana por superficie, luz y posición.
   Las cifras nunca gritan: van en cuerpo pequeño y en gris.
   ============================================================ */
.free{ position:relative; }
.free__core{
  border-radius:calc(var(--r-shell) - 6px);
  background:
    radial-gradient(75% 110% at 6% 0%, rgba(201,169,97,.13), transparent 58%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--lift);
  padding:clamp(1.85rem,3.7vw,3.15rem);
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
}
.free__t{ font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:600; letter-spacing:-.024em; font-stretch:106%; line-height:1.15; }
.free__p{ margin-top:1.05rem; color:var(--ink-2); max-width:54ch; font-size:1rem; }
.free .btn{ margin-top:1.9rem; }
.fine{ margin-top:1.1rem; font-size:.86rem; color:var(--ink-3); max-width:52ch; }

/* el coste se enuncia, no se exhibe: sin caja, para no competir con el CTA */
.free__cost{
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid rgba(201,169,97,.16);
}
.free__cost b{ font-family:var(--f-mono); font-size:1.15rem; font-weight:500; color:var(--gold-hi); letter-spacing:-.01em; word-spacing:-.28em; }
.free__cost span{ font-size:.88rem; color:var(--ink-2); }

.ticks{ margin-top:1.7rem; display:grid; gap:.75rem; }
.ticks li{ position:relative; padding-left:1.6rem; font-size:.97rem; color:var(--ink); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:1px;
  transform:rotate(45deg); background:linear-gradient(140deg, var(--gold-hi), var(--gold));
}
.ticks--sm li{ font-size:.93rem; color:var(--ink-2); }
.ticks--sm li::before{ background:var(--ink-3); }

.free__aside{
  border-left:1px solid rgba(201,169,97,.18);
  padding-left:clamp(1.5rem,2.6vw,2.25rem);
}
.free__inc{ font-size:.92rem; font-weight:600; color:var(--gold); letter-spacing:-.005em; }
.free__aside .ticks{ margin-top:1.1rem; }

@media (max-width:880px){
  .free__core{ grid-template-columns:1fr; gap:1.75rem; }
  .free__aside{ border-left:0; border-top:1px solid rgba(201,169,97,.18); padding-left:0; padding-top:1.75rem; }
}

/* planes de pago: presentes, claros, deliberadamente secundarios */
.plans{ margin-top:clamp(1.5rem,3vw,2.25rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.4rem); }
.plan{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.45rem,2.5vw,1.9rem);
  background:rgba(255,255,255,.012);
  display:flex; flex-direction:column;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.plan:hover{ border-color:var(--line-2); background:rgba(255,255,255,.028); transform:translateY(-3px); }
.plan__t{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.plan__price{ margin-top:.85rem; display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
.plan__price b{ font-size:1.16rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.plan__price span{ font-size:.87rem; color:var(--ink-3); }
.plan__day{ margin-top:.35rem; font-family:var(--f-mono); font-size:.76rem; color:var(--ink-3); letter-spacing:.02em; }
.plan .ticks{ margin-top:1.35rem; margin-bottom:1.9rem; }
.plan .btn{ margin-top:auto; width:100%; justify-content:space-between; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }

.plans__note{
  margin-top:1.75rem; font-size:.93rem; color:var(--ink-3);
  max-width:62ch; padding-left:1.1rem; border-left:1px solid var(--line-2);
}

/* ---------- galería testimonios (raíl horizontal con difuminado en los bordes) ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,268px);
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding:.35rem clamp(1.15rem,4vw,2rem) 1.35rem;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.rail > *{ scroll-snap-align:center; }
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
@media (min-width:1240px){ .rail{ padding-inline:max(clamp(1.15rem,4vw,2rem), calc((100% - var(--wrap))/2 + 1.5rem)); } }
.rail-wrap::before,.rail-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(1.5rem,6vw,5rem); pointer-events:none; z-index:2;
}
.rail-wrap::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.rail-wrap::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }

/* ---------- galería de resultados de miembros ----------
   Son capturas de móvil con texto pequeño, así que la rejilla las deja a
   tamaño de vistazo y quien quiera leerlas las abre a pantalla completa. */
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.5rem); }
.shot--m{ aspect-ratio:800/1520; }
@media (max-width:900px){ .galeria{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .galeria{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; } }

.lupa{
  position:absolute; inset:0; z-index:4; width:100%; height:100%;
  border:0; background:transparent; cursor:zoom-in; padding:0;
  transition:background .4s var(--ease);
}
.shot--m:hover .lupa{ background:rgba(201,169,97,.07); }
.shot--m:not(.has-img) .lupa{ display:none; }

.descargo{
  margin-top:clamp(1.75rem,3vw,2.5rem); max-width:70ch;
  font-size:.88rem; line-height:1.7; color:var(--ink-3);
  padding-left:1.1rem; border-left:1px solid var(--line-2);
}

/* visor a pantalla completa */
.visor{
  border:0; padding:0; background:transparent; max-width:min(92vw,560px); max-height:92dvh;
}
.visor::backdrop{ background:rgba(6,5,4,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.visor img{ width:100%; height:auto; border-radius:var(--r); display:block; }
.visor__x{
  position:absolute; top:.65rem; right:.65rem; width:38px; height:38px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:50%; background:rgba(10,9,8,.72); color:var(--ink);
  font-size:1.1rem; line-height:1; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.visor__x:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* ---------- cinta de balances ----------
   Se mueve sola pero es un contenedor con scroll de verdad, así que en móvil
   se arrastra con el dedo. El movimiento se para al pasar el cursor, al
   enfocar con el teclado y mientras alguien la está tocando. */
.cinta{
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-block:.35rem 1.25rem;
}
.cinta::-webkit-scrollbar{ display:none; }
.cinta__via{
  display:flex; gap:clamp(1rem,2.2vw,1.5rem); width:max-content;
  padding-inline:clamp(1.15rem,4vw,2rem);
}
.shot--b{ aspect-ratio:16/9; width:min(78vw,620px); flex:none; }
@media (min-width:1240px){
  .cinta__via{ padding-inline:max(clamp(1.15rem,4vw,2rem), calc((100vw - var(--wrap))/2)); }
}

/* ---------- vídeos ----------
   Rejilla asimétrica: uno destacado a la izquierda y dos apilados a la
   derecha. Tres piezas, tres celdas, sin huecos de relleno. */
.vids{
  display:grid; gap:clamp(1rem,2.2vw,1.5rem);
  grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr;
}
.vid--grande{ grid-row:span 2; }
.shot--v{ aspect-ratio:16/9; }
.vid--grande.shot--v{ aspect-ratio:auto; min-height:340px; }
@media (max-width:860px){
  .vids{ grid-template-columns:1fr; grid-template-rows:none; }
  .vid--grande{ grid-row:auto; }
  .vid--grande.shot--v{ aspect-ratio:16/9; min-height:0; }
}

.vid{ overflow:hidden; }
.vid__play{
  position:relative; z-index:4; display:none;
  width:60px; height:60px; padding:0; cursor:pointer;
  border:1px solid rgba(201,169,97,.5); border-radius:50%;
  background:rgba(10,9,8,.55); color:var(--gold-hi);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--lift), var(--shadow-sm);
  transition:transform .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.vid__play svg{ width:17px; height:17px; margin-left:2px; }
.vid__play:hover{ transform:scale(1.07); background:rgba(201,169,97,.16); border-color:var(--gold); }
.vid__play:active{ transform:scale(.98); }
/* solo hay play cuando hay vídeo detrás */
.vid[data-video]:not([data-video=""]) .vid__play{ display:grid; place-items:center; }
.vid.is-playing{ padding:0; border-color:var(--line); }
.vid.is-playing::before{ display:none; }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; }
.vid.is-playing .vid__play,
.vid.is-playing figcaption,
.vid.is-playing .shot__empty{ display:none; }
@media (prefers-reduced-motion: reduce){ .vid__play{ transition:none; } }

/* ---------- cierre ---------- */
.close{ position:relative; padding-block:clamp(5.5rem,10vw,9rem); border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.close__glow{
  position:absolute; inset:auto 0 -60% 0; height:130%;
  background:radial-gradient(46% 58% at 50% 100%, rgba(201,169,97,.20), transparent 70%);
}
.close__in{ position:relative; text-align:center; }
.close__p{ margin:1.5rem auto 0; color:var(--ink-2); max-width:46ch; font-size:1.06rem; }
.close .btn{ margin-top:2.4rem; }
.close .after-cta{ margin-inline:auto; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.45rem 3rem 1.45rem 0; position:relative;
  font-size:1.06rem; font-weight:500; letter-spacing:-.014em;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-hi); }
.faq summary::after,.faq summary::before{
  content:""; position:absolute; right:.35rem; top:50%; background:var(--gold);
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.faq summary::before{ width:13px; height:1.5px; transform:translateY(-50%); }
.faq summary::after{ width:1.5px; height:13px; right:.35rem; margin-right:5.75px; transform:translateY(-50%); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(90deg); opacity:0; }
.faq__b > div{ overflow:hidden; }
.faq__b p{ color:var(--ink-2); font-size:.99rem; max-width:64ch; padding:0 2.5rem 1.65rem 0; }

/* La altura del details la resuelve el navegador de golpe: animarla exige
   ::details-content y hoy no es fiable. Lo que sí se anima, y se nota igual,
   es la entrada del contenido. Solo opacity y transform. */
@media (prefers-reduced-motion: no-preference){
  .faq details[open] .faq__b > div{ animation:faqIn .45s var(--ease) both; }
  @keyframes faqIn{ from{ opacity:0; transform:translate3d(0,-8px,0); } to{ opacity:1; transform:none; } }
}

/* ---------- footer ---------- */
.foot{ position:relative; padding-block:clamp(3rem,6vw,4.5rem) 2.5rem; }
.foot__top{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; padding-bottom:2.25rem; border-bottom:1px solid var(--line); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.93rem; color:var(--ink-2); }
.foot__nav a{ transition:color .35s var(--ease); }
.foot__nav a:hover{ color:var(--gold-hi); }
.brand--f .brand__txt b{ font-size:.92rem; }

.lang{ display:flex; align-items:center; gap:.9rem; }
.lang__lb{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.lang__list{ display:flex; gap:.35rem; }
.lang__list a,.lang__list span{
  display:block; padding:.32rem .6rem; border-radius:6px;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em;
}
.lang__list a[aria-current]{ background:var(--gold-dim); color:var(--gold); }
.lang__list span{ color:var(--ink-3); opacity:.5; cursor:default; }

.foot__legal{ margin-top:2.25rem; display:grid; gap:1rem; }
.foot__legal p{ font-size:.82rem; line-height:1.65; color:var(--ink-3); max-width:96ch; }
.foot__legal b{ color:var(--ink-2); font-weight:600; }
.foot__c{ margin-top:.75rem; }

/* ---------- entrada en pantalla ----------
   El hero queda fuera a propósito. Un elemento con opacity:0 no cuenta como
   pintado, así que revelarlo por scroll retrasaría el LCP casi un segundo en
   una página que vive del tráfico de pago. Aquí solo se mueve, nunca se oculta. */
@media (prefers-reduced-motion: no-preference){
  .hero__copy > *,
  .hero .shell{ animation:heroIn .7s var(--ease) both; }
  .hero__copy > *:nth-child(2){ animation-delay:.05s; }
  .hero__copy > *:nth-child(3){ animation-delay:.1s; }
  .hero__copy > *:nth-child(4){ animation-delay:.15s; }
  .hero__copy > *:nth-child(5){ animation-delay:.2s; }
  .hero .shell{ animation-delay:.12s; }
  @keyframes heroIn{ from{ transform:translate3d(0,14px,0); } to{ transform:none; } }

  [data-reveal]{ opacity:0; transform:translate3d(0,22px,0); filter:blur(6px); }
  [data-reveal].in{
    opacity:1; transform:none; filter:blur(0);
    transition:opacity .85s var(--ease), transform .85s var(--ease), filter .7s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce){
  .btn,.plan,.cell,.nav__links a{ transition:none; }
  .btn:hover{ --btn-lift:0px; }
}


/* ============================================================
   PÁGINAS LEGALES
   Compartidas por aviso-legal, privacidad y terminos.
   ============================================================ */
.legal{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(4rem,8vw,6rem); }
.legal h1{
  font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:700; font-stretch:110%;
  letter-spacing:-.026em; line-height:1.08;
}
.legal h2{
  font-size:1.14rem; font-weight:600; margin-top:2.9rem; letter-spacing:-.012em;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.legal h3{ font-size:1rem; font-weight:600; margin-top:1.7rem; color:var(--ink); }
.legal p, .legal li{ color:var(--ink-2); font-size:.97rem; line-height:1.72; margin-top:.95rem; }
.legal ul, .legal ol{ list-style:disc; padding-left:1.35rem; }
.legal ol{ list-style:decimal; }
.legal li{ margin-top:.5rem; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--gold-hi); }

.legal .dato{ color:var(--ink); font-weight:600; }
.legal .todo{
  color:var(--gold); font-family:var(--f-mono); font-size:.84rem;
  background:var(--gold-dim); padding:.1rem .4rem; border-radius:5px;
}

.legal__intro{ margin-top:1.4rem; font-size:1.02rem; color:var(--ink-2); max-width:64ch; }
.legal__fecha{ margin-top:1rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ficha del titular */
.ficha{
  margin-top:1.6rem; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--lift); overflow:hidden;
}
.ficha div{ display:grid; grid-template-columns:13rem 1fr; gap:1rem; padding:.9rem 1.35rem; border-top:1px solid var(--line); }
.ficha div:first-child{ border-top:0; }
.ficha dt{ font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); font-family:var(--f-mono); }
.ficha dd{ margin:0; color:var(--ink); font-size:.95rem; }
@media (max-width:620px){ .ficha div{ grid-template-columns:1fr; gap:.25rem; } }

/* caja de aviso destacado */
.aviso{
  margin-top:1.8rem; padding:clamp(1.25rem,2.6vw,1.85rem);
  border:1px solid rgba(201,169,97,.3); border-radius:var(--r);
  background:linear-gradient(155deg, rgba(201,169,97,.09), transparent 60%), var(--surface);
  box-shadow:var(--lift);
}
.aviso p:first-child{ margin-top:0; }
.aviso p{ color:var(--ink); }

.volver{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:2rem;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.volver:hover{ color:var(--gold); }

.legal__nav{
  display:flex; flex-wrap:wrap; gap:.55rem; margin-top:3.5rem;
  padding-top:2rem; border-top:1px solid var(--line);
}
.legal__nav a{
  padding:.5rem .95rem; border:1px solid var(--line-2); border-radius:var(--r-btn);
  font-size:.88rem; color:var(--ink-2); text-decoration:none;
}
.legal__nav a:hover{ border-color:var(--gold); color:var(--gold-hi); }
.legal__nav a[aria-current]{ background:var(--gold-dim); border-color:rgba(201,169,97,.4); color:var(--gold); }