/* ============================================================
   FIGUS — Sistema de diseño del wizard.
   Dirección: editorial oscuro, contraste tech, foil holográfico,
   tipografía de display + etiquetas mono. Premium, no genérico.
   ============================================================ */
:root{
  --ink:#08070d; --ink-2:#0e0c16; --panel:#13111d;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --txt:#f4f1ea; --muted:#9b94ab; --muted-2:#6f6982;
  --gold-1:#ffe9a8; --gold-2:#e7b34d; --gold-3:#a9760f;
  --violet:#7a4cff; --cyan:#4cd6ff; --magenta:#ff52d9;
  --r:18px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* El atributo hidden SIEMPRE manda (varios componentes lo usan: dropzone, wizard). */
[hidden]{display:none!important}
/* En iOS el scroll horizontal del viewport lo maneja <html>, no <body> → clip en ambos. */
html{scroll-behavior:smooth; overflow-x:clip; max-width:100%}
body{
  background:var(--ink); color:var(--txt); min-height:100vh; overflow-x:clip; max-width:100%; position:relative;
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none}
em{font-style:normal}
.mono{font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase}

/* textura + aura de fondo */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  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='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 78% -8%, rgba(122,76,255,.26), transparent 60%),
    radial-gradient(50vw 40vw at 8% 12%, rgba(76,214,255,.14), transparent 60%),
    radial-gradient(60vw 60vw at 50% 110%, rgba(231,179,77,.12), transparent 60%)}

/* ---------------- NAV ---------------- */
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:18px;
  padding:22px clamp(18px,5vw,64px)}
.brand{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,var(--gold-1) 60%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand sup{font-size:.4em;-webkit-text-fill-color:var(--muted-2)}
.brand.small{font-size:20px}
.brand-desc{color:var(--muted);font-size:13px;letter-spacing:.01em;display:none}
@media(min-width:720px){.brand-desc{display:inline}}
.nav-cta{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));padding:10px 18px;border-radius:999px;cursor:pointer}

/* ---------------- HERO ---------------- */
.landing{position:relative;z-index:3}
.hero{display:grid;gap:0;align-items:start;text-align:center;
  padding:clamp(16px,5vw,52px) clamp(18px,5vw,64px) 60px;grid-template-columns:1fr}
.hero-art{margin:18px auto 4px}
@media(min-width:980px){
  .hero{grid-template-columns:1.05fr .95fr;column-gap:56px;row-gap:0;min-height:78vh;align-items:center;text-align:left;
    grid-template-areas:"eb art" "h1 art" "sub art" "act art" "gif art" "tru art" "fin art"}
  .hero>.eyebrow{grid-area:eb}.hero>.hero-h1{grid-area:h1}
  .hero>.hero-art{grid-area:art;align-self:center;margin:0}
  .hero>.hero-sub{grid-area:sub;margin:22px 0 0;max-width:46ch}
  .hero>.hero-actions{grid-area:act;flex-direction:row;align-items:center;gap:16px;margin-top:26px}
  .hero>.hero-actions .btn{width:auto}
  .hero>.hero-trust{grid-area:tru;align-items:flex-start}
  .hero>.hero-fine{grid-area:fin;margin:13px 0 0}
  .hero>.hero-gift{grid-area:gif;margin:14px 0 0}
  .hero .ht-line{justify-content:flex-start}.hero .hero-pays{justify-content:flex-start}.hero .hero-trust{align-items:flex-start}
  .hero-card{width:min(36vw,440px)}
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--gold-1);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;margin-bottom:22px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 12px var(--gold-2)}
.hero-h1{font-family:'Anton',sans-serif;font-weight:400;line-height:1.02;letter-spacing:.005em;
  font-size:clamp(28px,6.6vw,64px);text-transform:none;margin:0;text-wrap:balance}
.hero-h1 em{background:linear-gradient(110deg,var(--gold-1),var(--gold-2) 40%,var(--magenta) 75%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-size:clamp(15px,2.2vw,19px);line-height:1.5;max-width:42ch;margin:20px auto 0}
.hero-sub strong{color:#efe9f5}
.hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:24px}
.hero-actions .btn{width:100%;justify-content:center}
.hero-note{color:var(--muted-2);font-size:13px}
.hero-steps{list-style:none;display:flex;flex-wrap:wrap;gap:24px;margin-top:48px;
  border-top:1px solid var(--line);padding-top:24px}
.hero-steps li{color:var(--muted);font-size:14px}
.hero-steps b{font-family:'Space Mono',monospace;color:var(--gold-2);margin-right:8px}

/* footer */
.site-foot{margin-top:40px;padding:34px 20px calc(40px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  /* full-bleed: ancho completo idéntico a la home aunque esté dentro de un contenedor con max-width
     (.pr/.legal/.ct). Seguro porque html/body tienen overflow-x:clip (no genera scroll horizontal). */
  width:100vw;position:relative;left:50%;margin-left:-50vw;margin-right:-50vw}
.site-foot .foot-links{text-align:center;line-height:1.9;max-width:560px}
.site-foot .foot-links a{white-space:nowrap;margin:0 2px}
.site-foot a{color:var(--gold-1);font-size:14px;font-weight:600}
.site-foot a:hover{text-decoration:underline}
.site-foot span{color:var(--muted-2);font-size:12px;letter-spacing:.02em}
.site-foot .foot-pay{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.site-foot .pay-logo{height:24px;width:auto;color:#fff;opacity:.72}

.hero-art{display:grid;place-items:center;perspective:1200px}
.hero-card{position:relative;width:min(56vw,232px);aspect-ratio:600/838;border-radius:18px;
  transform:rotateY(-16deg) rotateX(6deg);transition:transform .5s var(--ease-out);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.6))}
.hero-card img{width:100%;height:100%;object-fit:contain;border-radius:18px;display:block}
.hero-card-glow{position:absolute;inset:-12%;z-index:-1;border-radius:30px;
  background:conic-gradient(from 0deg,var(--gold-1),var(--magenta),var(--violet),var(--cyan),var(--gold-1));
  filter:blur(50px);opacity:.45;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* tap-to-flip de la figurita del hero: premia el toque instintivo (gira + barrido holográfico, sin navegar) */
.hero-card{cursor:pointer}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.92) 50%,rgba(255,255,255,.5) 53%,transparent 68%);
  background-size:260% 260%;background-position:150% 0;opacity:0;mix-blend-mode:overlay}
.hero-card.flip{animation:figFlip .82s var(--ease-out)}
.hero-card.flip::after{animation:figSheen .82s var(--ease-out)}
@keyframes figFlip{
  0%{transform:rotateY(-16deg) rotateX(6deg) scale(1)}
  50%{transform:rotateY(164deg) rotateX(6deg) scale(1.05)}
  100%{transform:rotateY(344deg) rotateX(6deg) scale(1)}}
@keyframes figSheen{
  0%{opacity:0;background-position:150% 0}
  18%{opacity:1}
  100%{opacity:0;background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.hero-card.flip,.hero-card.flip::after{animation:none}}
/* --- hero: bloque de confianza pegado al CTA + hint "tocala" (rediseño 2026-06-10) --- */
.hero-trust{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:9px}
.ht-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:0;
  font-size:14px;line-height:1.45;color:#dcd8e4}
.ht-line strong{color:#fff}
.ht-ok{color:#18f9c9;font-weight:800;font-size:15px}
.ht-sub{color:#a9a3b8;font-size:12.5px;gap:7px 16px}
.ht-sub span{display:inline-flex;align-items:center;gap:5px}
.hero-pays{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:3px}
.hero-pays .pay{background:#fff;color:#222;border-radius:5px;height:23px;display:inline-flex;align-items:center;
  padding:0 8px;font-size:10.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.hero-price{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.04em;color:var(--gold-1);margin:11px 0 0}
.hero-price strong{color:#fff;font-weight:700}
.hero-fine{margin:13px auto 0;max-width:42ch;font-size:12px;color:#8a83a0;line-height:1.5}
.hero-card-tap{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;
  font-family:'Space Mono',monospace;font-size:11px;color:#fff;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;backdrop-filter:blur(4px);
  animation:tapPulse 2.4s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:.5;transform:translateX(-50%)}50%{opacity:.95;transform:translateX(-50%) translateY(-2px)}}
@media(hover:hover) and (pointer:fine){.hero-card-tap{display:none}}
@media(prefers-reduced-motion:reduce){.hero-card-tap{animation:none}}

/* ---------------- BOTONES ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.01em;padding:15px 26px;border-radius:999px;
  transition:transform .25s var(--ease-out),box-shadow .25s,background .25s;overflow:hidden}
.btn .arrow{transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{color:#1a0d00;background:linear-gradient(100deg,var(--gold-1),var(--gold-2) 55%,#ff9d2e);
  box-shadow:0 14px 36px rgba(231,179,77,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-primary::before{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.btn-ghost:hover{color:var(--txt);border-color:var(--txt)}

/* ---------------- WIZARD ---------------- */
.wizard{position:fixed;inset:0;z-index:50;background:var(--ink);
  display:none;flex-direction:column;opacity:0;transition:opacity .4s var(--ease)}
.wizard:not([hidden]){display:flex}   /* el atributo hidden manda: sin esto, tapa la página */
.wizard.in{opacity:1}
.wz-top{display:flex;align-items:center;gap:18px;padding:18px clamp(18px,5vw,48px)}
.wz-rail{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.wz-rail-fill{height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-1));transition:width .5s var(--ease-out)}
.wz-step{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.wz-step b{color:var(--gold-1);font-weight:700}
.wz-close{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:6px}
.wz-close:hover{color:var(--txt)}

.wz-stage{flex:1;position:relative;overflow:hidden}
.step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(14px,2.4vh,28px);
  padding:clamp(16px,3.5vh,40px) clamp(20px,6vw,56px) clamp(18px,4.5vh,52px);max-width:720px;margin:0 auto;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;     /* scrollbar oculta (Firefox/IE) */
  opacity:0;visibility:hidden;transform:translateY(24px);
  transition:opacity .45s var(--ease),transform .55s var(--ease-out),visibility .45s}
/* Centrado vertical SEGURO: `safe center` centra el contenido cuando entra en el alto del stage
   y, cuando desborda (p. ej. paso foto en mobile), se comporta como flex-start → arranca arriba y
   se puede scrollear, sin recortar el eyebrow/título bajo la barra superior (bug de iOS Safari con
   los auto-margins, que NO colapsaban a 0). */
.step::-webkit-scrollbar{width:0;height:0;display:none}   /* scrollbar oculta (Chrome/Safari) */
.step.active{opacity:1;visibility:visible;transform:none}
.step.leaving{opacity:0;transform:translateY(-24px)}
.step-meta .mono{color:var(--gold-2);font-size:12px}
.step-meta h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(28px,min(6vw,5.4vh),52px);
  line-height:1.02;margin:clamp(8px,1.4vh,14px) 0 clamp(8px,1.2vh,12px);letter-spacing:.01em}
.step-meta p{color:var(--muted);font-size:clamp(15px,2vw,18px);max-width:46ch;line-height:1.5}

/* choices */
.choices{display:grid;gap:16px;grid-template-columns:1fr 1fr;max-width:620px}
.choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:26px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--txt);
  cursor:pointer;text-align:left;transition:border-color .25s,transform .25s var(--ease-out),background .25s}
.choice:hover{border-color:var(--line-2);transform:translateY(-3px)}
.choice.sel{border-color:var(--gold-2);background:linear-gradient(180deg,rgba(231,179,77,.1),var(--panel))}
.choice b{font-size:18px}
.choice-price{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--gold-1);letter-spacing:.03em}
.choice small{color:var(--muted);font-size:13px}
.choice-ico{display:flex;gap:6px;margin-bottom:8px}
.card-mini{width:30px;height:42px;border-radius:5px;background:linear-gradient(160deg,var(--gold-1),var(--gold-3));
  box-shadow:0 6px 14px rgba(0,0,0,.4)}
.card-mini.b{transform:rotate(8deg) translateY(-2px);background:linear-gradient(160deg,var(--cyan),var(--violet))}
/* paso "¿qué querés crear?": íconos emoji */
.step[data-step="tipo"] .choice-ico{font-size:32px;line-height:1;margin-bottom:6px}
/* línea de discovery bajo el hero (figurita para regalar) */
/* link de regalo pegado al CTA: ruta del 2º producto sin competir con el botón principal */
.hero-gift{margin:14px auto 0;color:var(--muted);font-size:14px;line-height:1.5}
.hero-gift a{color:var(--gold-1);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}

/* dropzone */
.dropzone{display:block;border-radius:var(--r);border:1.5px dashed var(--line-2);background:var(--panel);
  min-height:clamp(128px,18vh,190px);cursor:pointer;position:relative;overflow:hidden;transition:border-color .25s,background .25s}
.dropzone:hover,.dropzone.drag{border-color:var(--gold-2);background:linear-gradient(180deg,rgba(231,179,77,.07),var(--panel))}
.dz-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.dz-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;
  color:var(--gold-1);background:rgba(231,179,77,.12);border:1px solid rgba(231,179,77,.3)}
.dz-empty b{font-size:17px}.dz-empty small{color:var(--muted)}
.dz-preview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px}
.dz-preview img{max-height:calc(100% - 56px);max-width:90%;border-radius:12px;object-fit:contain;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.dz-change{background:rgba(255,255,255,.08);border:1px solid var(--line-2);color:var(--txt);
  padding:8px 16px;border-radius:999px;font-size:13px;cursor:pointer}
.dz-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
/* input de archivo = capa transparente sobre la dropzone (lo activa app.js: quita 'hidden' + .dz-file).
   El tap cae DIRECTO sobre el input y no depende del reenvío del <label>, que los webviews in-app de
   Android no respetan con display:none. Queda clippeado a .dropzone (overflow:hidden) → no tapa el
   consentimiento ni "Continuar". preview/loading van por encima → "Cambiar foto" sigue tappable. */
.dz-file{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;
  opacity:0;cursor:pointer;z-index:1;-webkit-appearance:none;appearance:none;color:transparent;font-size:16px}
.dz-preview,.dz-loading{z-index:2}
@media (hover:hover) and (pointer:fine){
  /* desktop con mouse: el input NO hace overlay → drag&drop y el flujo actual quedan intactos
     (el click lo sigue reenviando el <label>). */
  .dz-file{width:1px;height:1px;inset:auto;left:0;top:0;overflow:hidden}
}
/* botón de escape al navegador real (solo Android in-app, solo si el selector no abrió). */
.dz-escape{display:block;width:100%;margin-top:10px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--gold-2);background:rgba(231,179,77,.1);color:var(--txt);font:inherit;
  font-size:14px;text-align:center;cursor:pointer;line-height:1.4}
.dz-escape b{color:var(--gold-1)}
.dz-escape small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}

/* flags */
.flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:12px;max-width:680px;
  max-height:clamp(200px,42vh,520px);overflow:auto;padding:4px}
.flagbtn{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,transform .2s var(--ease-out)}
.flagbtn:hover{transform:translateY(-3px);border-color:var(--line-2)}
.flagbtn.sel{border-color:var(--gold-2);background:linear-gradient(180deg,rgba(231,179,77,.12),var(--panel))}
.flagbtn .flag{width:46px;height:46px}
.flagbtn span{font-size:12px;color:var(--muted)}
.flagbtn.sel span{color:var(--txt)}

/* equipo: panel Selección / Clubes (aparece al elegir un país con clubes) */
.equipo-panel{max-width:680px;margin:0 0 18px;padding:16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(231,179,77,.06),var(--panel));border:1px solid var(--line-2)}
.equipo-panel[hidden]{display:none}
.equipo-panel:not([hidden]){animation:equipoIn .28s var(--ease-out)}
@keyframes equipoIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.equipo-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.equipo-head .flag{width:26px;height:26px;flex:0 0 auto}
.equipo-ttl{font-size:14px;color:var(--muted)}
.equipo-ttl b{color:var(--txt);font-weight:700}
/* segmented control */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;max-width:320px;
  padding:4px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line)}
.seg-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));transition:transform .25s var(--ease-out);
  box-shadow:0 4px 14px rgba(231,179,77,.3)}
.seg-opt{position:relative;z-index:1;background:none;border:0;cursor:pointer;padding:10px 8px;border-radius:999px;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);transition:color .2s}
.seg-opt.sel{color:var(--ink)}
/* grilla de clubes */
.clubwrap{margin-top:16px;animation:equipoIn .24s var(--ease-out)}
.clubwrap[hidden]{display:none}
.club-h{font-size:12px;letter-spacing:.04em;color:var(--muted-2);text-transform:uppercase;margin:0 2px 10px;font-weight:700}
.clubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
  max-height:clamp(200px,40vh,460px);overflow:auto;padding:2px}
.clubbtn{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;text-align:left;
  background:var(--panel);border:1px solid var(--line);color:var(--txt);cursor:pointer;
  transition:border-color .2s,transform .2s var(--ease-out),background .2s}
.clubbtn:hover{transform:translateY(-2px);border-color:var(--line-2)}
.clubbtn.sel{border-color:var(--gold-2);background:linear-gradient(180deg,rgba(231,179,77,.12),var(--panel))}
.club-sw{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(125deg,var(--c1) 0 50%,var(--c2) 50% 100%);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.club-nm{font-size:14px;font-weight:600;line-height:1.2}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}.field.small{max-width:160px}
/* etiquetas/placeholder en alto contraste: el feedback del dueño fue que los labels
   grisáceos (--muted) sobre el fondo oscuro se leían poco. Label = blanco puro,
   hint "(opcional)" un escalón abajo pero legible, placeholder casi blanco. */
.field span{font-size:13px;color:#fff;font-weight:600}
.field span i{color:var(--muted);font-weight:400}
.field input{background:var(--ink-2);border:1px solid rgba(255,255,255,.2);border-radius:12px;color:var(--txt);
  padding:14px 16px;font-family:inherit;font-size:16px;transition:border-color .2s,background .2s}
.field input:focus{outline:0;border-color:var(--gold-2);background:#15131f}
.field input::placeholder{color:rgba(255,255,255,.62)}
/* input de fecha: color-scheme dark → ícono y popup nativos legibles sobre fondo oscuro.
   El ícono de calendario se ve claro y todo el campo es clickeable (abre el picker, ver app.js). */
.field input[type="date"]{color-scheme:dark;cursor:pointer}
.field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.9}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.check{grid-column:1/-1;display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:13px;cursor:pointer;line-height:1.5}
.check a{text-decoration:underline}
.check-priv{display:block;margin-top:6px;font-size:12px;opacity:.85}
/* checkbox custom: cuadrado redondeado, tilde dorado al marcar, estados hover/focus */
.check input{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:0 0 auto;
  width:24px;height:24px;margin:1px 0 0;border:1.5px solid var(--line-2);border-radius:8px;
  background:var(--ink-2);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,transform .12s var(--ease-out)}
.check input:hover{border-color:var(--gold-2)}
.check input:active{transform:scale(.92)}
.check input:focus-visible{outline:0;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(231,179,77,.3)}
.check input:checked{border-color:var(--gold-2);box-shadow:0 4px 14px rgba(231,179,77,.28);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%231a0d00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat,
    linear-gradient(160deg,var(--gold-1),var(--gold-3))}
.wa-input{display:flex;gap:10px}
.wa-input select{flex:0 0 auto;width:120px;background:var(--ink-2);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  color:var(--txt);padding:14px 8px;font-family:inherit;font-size:16px;cursor:pointer}
.wa-input select:focus{outline:0;border-color:var(--gold-2)}
.wa-input input{flex:1;min-width:0}

/* generando */
.step-gen{align-items:center;text-align:center}
.gen-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:440px}
.gen-card{width:150px;aspect-ratio:600/838;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1a1726,#0d0b16);border:1px solid var(--line-2);
  box-shadow:0 30px 60px rgba(0,0,0,.5)}
.gen-foil{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);animation:foil 1.6s var(--ease) infinite}
@keyframes foil{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
.gen-spark{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 45%, rgba(231,179,77,.5), transparent 60%)}
.step-gen h2{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(26px,5vw,40px)}
.gen-msg{color:var(--muted)}

/* pagar (FLUJO PAGO PRIMERO) */
.step-pay{align-items:center;text-align:center}
.pay-box{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:380px;width:100%;margin:0 auto}
.pay-thumb{width:120px;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  background:#0d0b16;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pay-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pay-demo{color:#8d7cff;text-decoration:none;font-size:13.5px;font-weight:600}
.pay-demo:hover{text-decoration:underline}
.pay-price{font-size:26px;font-weight:800;color:#fff}
.pay-price small{font-size:13px;font-weight:600;color:var(--muted)}
.step-pay .btn-gold{width:100%;justify-content:center;padding:16px;font-size:16px}
.pay-err{color:#ff9a9a;font-size:13px;min-height:1.1em;margin:0}
/* resumen de datos en el paso de pago (cada fila navega a su paso para corregir) */
.pay-summary{width:100%;max-width:340px;text-align:left;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(255,255,255,.03);padding:12px 14px}
.pay-sum-h{margin:0 0 6px;font-size:12.5px;font-weight:700;color:#fff;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;gap:2px 10px}
.pay-sum-h small{font-weight:400;color:var(--muted-2);font-size:11px;white-space:nowrap}
.pay-sum-rows{display:flex;flex-direction:column}
.pay-sum-row{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  border-top:1px solid rgba(255,255,255,.06);padding:8px 0;cursor:pointer;text-align:left;font:inherit}
.pay-sum-row:first-child{border-top:0}
.pay-sum-ico{flex:0 0 auto;font-size:13px}
.pay-sum-txt{flex:1;color:var(--muted);font-size:13px;line-height:1.35;word-break:break-word}
.pay-sum-edit{flex:0 0 auto;color:#8d7cff;font-size:11.5px;font-weight:600}
.pay-sum-row:hover .pay-sum-txt,.pay-sum-row:active .pay-sum-txt{color:#fff}
.pay-reassure{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:7px;
  text-align:left;width:100%;max-width:320px}
.pay-reassure li{color:var(--muted);font-size:12.5px;line-height:1.4}
.gen-bar{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.gen-bar-fill{height:100%;width:6%;border-radius:3px;background:linear-gradient(90deg,var(--gold-2),var(--gold-1));
  transition:width .8s var(--ease-out)}
.gen-log{list-style:none;font-family:'Space Mono',monospace;font-size:12px;color:var(--muted-2);
  display:flex;flex-direction:column;gap:4px}
.gen-log li.ok{color:var(--gold-2)}

/* footer wizard */
.wz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:18px clamp(18px,5vw,48px) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line)}
.wz-foot.hide{visibility:hidden}
/* "Omitir" del paso de datos (regalo): chiquito, centrado, en su propia fila arriba de Atrás/Continuar */
.wz-skip{flex:1 0 100%;order:-1;text-align:center;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:0;margin:0}
.wz-skip:hover{color:var(--ink)}
.wz-skip[hidden]{display:none!important}

/* toast de error */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:#2a1620;border:1px solid #6b2740;color:#ffd9e2;padding:12px 18px;border-radius:12px;font-size:14px;
  opacity:0;transition:opacity .3s,transform .3s var(--ease-out);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:560px){
  .choices{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .field.small{max-width:none}
  .step{gap:24px}
  .seg{max-width:none}
  .clubgrid{grid-template-columns:1fr;max-height:clamp(220px,38vh,420px)}
  .clubbtn{min-width:0}
}
/* Pantallas BAJAS (laptops chicos, split-screen, landscape de móvil): comprime para que
   ningún paso requiera scroll y nada quede oculto (en especial el consentimiento del paso foto). */
@media(max-height:640px){
  .step{gap:12px}
  .dropzone{min-height:clamp(118px,22vh,210px)}
  .dz-empty{gap:6px}
  .dz-ico{width:52px;height:52px;font-size:26px}
  .flags{max-height:clamp(180px,38vh,520px)}
  /* el paso "evento" es el más alto (5 campos): comprimimos el form para que entre sin scroll */
  .form{gap:11px}
  .field{gap:5px}
  .field input,.wa-input select{padding:10px 13px;font-size:15px}
  .step-meta p{font-size:14px;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ============ FAQ (acordeón) ============ */
.faq{max-width:800px;margin:0 auto;padding:clamp(44px,8vw,96px) 20px;scroll-margin-top:24px}
.faq-h2{font-family:'Anton',sans-serif;font-weight:400;line-height:1;letter-spacing:.01em;
  font-size:clamp(30px,6vw,52px);margin:0 0 14px;
  background:linear-gradient(180deg,#fff,var(--gold-1) 78%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.faq-sub{color:var(--muted);font-size:clamp(15px,2vw,17px);line-height:1.6;margin:0 0 36px;max-width:56ch}
.faq-sub a{color:var(--gold-1);font-weight:600;text-decoration:underline}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),rgba(19,17,29,.55));
  transition:border-color .25s,box-shadow .25s,background .25s}
.faq-item:hover{border-color:var(--line-2)}
.faq-item.open{border-color:rgba(231,179,77,.42);
  background:linear-gradient(180deg,rgba(231,179,77,.07),rgba(19,17,29,.5));
  box-shadow:0 12px 36px rgba(0,0,0,.34),inset 0 0 0 1px rgba(231,179,77,.10)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:19px 22px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:clamp(15px,2vw,17px);
  color:var(--txt);line-height:1.4}
.faq-q:hover{color:#fff}
.faq-item.open .faq-q{color:var(--gold-1)}
.faq-ico{flex:0 0 auto;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--gold-1);
  transition:transform .3s ease,background .25s,border-color .25s,color .25s}
.faq-ico svg{width:14px;height:14px;display:block}
.faq-item.open .faq-ico{transform:rotate(180deg);color:var(--ink);border-color:transparent;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2))}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{margin:0;padding:2px 22px 22px;color:var(--muted);font-size:15px;line-height:1.68}
.faq-a strong{color:var(--txt);font-weight:600}
.faq-cta{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;
  padding:34px 22px;border:1px solid var(--line);border-radius:22px;
  background:radial-gradient(130% 150% at 50% 0%,rgba(231,179,77,.11),transparent 62%)}
.faq-cta-h{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(22px,4.5vw,32px);color:#fff;margin:0}
.faq-cta-note{color:var(--muted-2);font-size:13px}

/* ============ Paso de pago COMPACTO (2026-06-11) ============
   Misma información, menos alto: el precio + "pago único" + CTA entran SIN
   scroll en mobile. SOLO tamaños/espaciados — cero colores, así cada landing
   (home/v2 oscuras, v3 clara) mantiene su propio esquema. El reassure va
   centrado, un ítem por línea, debajo del CTA (puede caer bajo el fold). */
.step-pay{gap:10px}
.step-pay .step-meta .mono{font-size:10.5px}
.step-pay .step-meta h2{font-size:clamp(22px,3.4vh,30px);margin:4px 0}
.step-pay .step-meta p{font-size:13.5px;line-height:1.35}
.pay-box{gap:9px}
.pay-thumb{width:62px;border-radius:10px}
.pay-summary{padding:7px 12px}
.pay-sum-h{margin-bottom:1px;font-size:11.5px}
.pay-sum-row{padding:4.5px 0}
.pay-sum-txt{font-size:12px;line-height:1.25}
.pay-price{font-size:22px}
.step-pay .btn-gold{padding:14px;font-size:15.5px}
.pay-err{min-height:0}
.pay-reassure{margin-top:2px;gap:4px;align-items:center;text-align:center}
.pay-reassure li{font-size:11px;line-height:1.3}
@media(max-height:760px){
  .step-pay .step-meta h2{font-size:21px}
  .pay-thumb{width:52px}
  .step-pay{gap:7px}
  .pay-box{gap:7px}
}