/* ═══════════════════════════════════════════
   YON PLAN — Mentori 1 a 1
   ═══════════════════════════════════════════ */

:root{
  --brand:#F4C400;
  --brand-2:#D4A800;
  --bg:#08080B;
  --text:#F6F6F7;
  --muted:#9A9AA6;
  --line:rgba(255,255,255,.09);
  --up:#2ECC71;
  --wa:#25D366;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ═══ FON ANIME ═══ */
#chart{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1000px 640px at 50% -12%, rgba(244,196,0,.09), transparent 62%),
    linear-gradient(180deg, rgba(8,8,11,.58) 0%, rgba(8,8,11,.82) 46%, rgba(8,8,11,.94) 100%);
}

.page{
  position:relative; z-index:2;
  max-width:560px; margin:0 auto;
  padding:0 16px 34px;
  display:flex; flex-direction:column; gap:22px;
}

/* ═══ BANNER ═══ */
.hero{ display:flex; flex-direction:column; }
.banner{
  position:relative;
  width:calc(100% + 32px);
  margin:0 -16px;
  height:clamp(250px,50vw,310px);
}
.banner__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 16%;
  display:block;
  filter:contrast(1.04) saturate(1.02);
  -webkit-mask-image:
    linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.28) 88%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.28) 88%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect;
}
.banner__fade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,8,11,0) 0%, rgba(8,8,11,.18) 46%,
      rgba(8,8,11,.62) 78%, rgba(8,8,11,.92) 100%),
    radial-gradient(820px 360px at 50% 104%, rgba(244,196,0,.20), transparent 64%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
}
.banner__id{
  position:absolute; left:18px; right:18px; bottom:6px;
  display:flex; align-items:center; gap:12px;
}
.banner__logo{
  width:52px; height:52px; flex-shrink:0;
  border-radius:15px; object-fit:cover; background:#000;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.banner__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.banner__tag{ font-size:12.5px; color:rgba(255,255,255,.72); }

.wordmark{
  font-size:21px; font-weight:900; letter-spacing:1.4px; line-height:1.05;
  background:linear-gradient(100deg,var(--brand-2) 0%,var(--brand) 28%,#FFF6CC 46%,
    #FFFFFF 50%,#FFF6CC 54%,var(--brand) 72%,var(--brand-2) 100%);
  background-size:280% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 20px rgba(244,196,0,.3));
  animation:shine 4.6s ease-in-out infinite;
}
@keyframes shine{
  0%,16%{ background-position:180% 0; }
  56%,100%{ background-position:-80% 0; }
}

/* ═══ INTRO ═══ */
.intro{ display:flex; flex-direction:column; gap:9px; margin-top:-6px; }
.intro__title{ font-size:23px; font-weight:900; line-height:1.18; letter-spacing:-.3px; }
.intro__desc{ font-size:14px; color:var(--muted); line-height:1.6; }

.live-count{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:99px;
  background:rgba(244,196,0,.09); border:1px solid rgba(244,196,0,.22);
  font-size:12px; font-weight:600; color:var(--brand); width:fit-content;
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--up);
  animation:ping 2.4s infinite; flex-shrink:0;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.5); }
  70%{ box-shadow:0 0 0 7px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* ═══ PROGRESS ═══ */
.progress-wrap{
  height:4px; background:rgba(255,255,255,.08);
  border-radius:99px; overflow:hidden;
  transition:opacity .4s ease; margin-top:-8px;
}
.progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:99px;
  transition:width .45s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px rgba(244,196,0,.55);
}

/* ═══ FORM CARD ═══ */
.form-card{
  background:linear-gradient(180deg, rgba(244,196,0,.07), rgba(244,196,0,.025));
  border:1px solid rgba(244,196,0,.18);
  border-radius:20px;
  padding:22px 16px;
  min-height:250px;
  margin-top:-8px;
}

.step{ display:none; flex-direction:column; gap:14px; animation:slideIn .32s cubic-bezier(.3,.9,.4,1); }
.step.active{ display:flex; }
@keyframes slideIn{ from{ opacity:0; transform:translateX(18px); } }

.q{
  font-size:16px; font-weight:800; line-height:1.3;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
}
.q__n{
  font-size:11px; font-weight:600; color:var(--brand);
  opacity:.7; white-space:nowrap; padding-top:3px;
}
.hint{ font-size:12px; color:rgba(255,255,255,.45); margin-top:-8px; }

/* ═══ CHOICES ═══ */
.choices{ display:grid; gap:9px; }
.choices--3{ grid-template-columns:repeat(3,1fr); }
.choices--2{ grid-template-columns:repeat(2,1fr); }
.choices--1{ grid-template-columns:1fr; }

.choice{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  padding:14px 8px; border-radius:14px;
  border:1px solid rgba(244,196,0,.26);
  background:rgba(244,196,0,.07);
  color:var(--text); font-family:inherit;
  cursor:pointer; text-align:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.choice:hover{
  border-color:rgba(244,196,0,.55);
  background:rgba(244,196,0,.13);
  transform:translateY(-2px);
}
.choice.sel{
  background:var(--brand); border-color:var(--brand);
  color:#000; transform:scale(1.02);
}
.choice__ico{ font-size:24px; line-height:1; }
.choice__lab{ font-size:13px; font-weight:800; letter-spacing:.2px; }
.choice__sub{ font-size:11px; opacity:.72; line-height:1.3; }

.choice--row{
  flex-direction:row; align-items:center; justify-content:flex-start;
  gap:12px; padding:14px 16px; text-align:left;
}
.choice--row .choice__ico{ font-size:21px; flex-shrink:0; }
.choice--row .choice__lab{ font-size:14px; }

.choice--inv{ padding:17px 10px 14px; }
.choice--pop{
  border-color:var(--brand); background:rgba(244,196,0,.13);
  box-shadow:0 0 0 1px rgba(244,196,0,.18), 0 4px 20px rgba(244,196,0,.14);
}
.choice__pop{
  position:absolute; top:-10px; left:50%;
  transform:translateX(-50%);
  background:var(--brand); color:#000;
  font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:20px; white-space:nowrap;
}
.choice--pop.sel .choice__pop{ background:#000; color:var(--brand); }

.choice--hot{ border-color:rgba(231,76,60,.4); background:rgba(231,76,60,.07); }
.choice--hot:hover{ border-color:rgba(231,76,60,.65); background:rgba(231,76,60,.12); }
.choice--hot.sel{ background:#E74C3C; border-color:#E74C3C; color:#fff; }

.ch--wa.sel{ background:var(--wa); border-color:var(--wa); color:#000; }
.ch--ig.sel{ background:#C13584; border-color:#C13584; color:#fff; }
.ch--tg.sel{ background:#38A6E0; border-color:#38A6E0; color:#000; }

/* ═══ INPUT ═══ */
.inp{
  width:100%; padding:14px 16px; border-radius:14px;
  border:1px solid rgba(244,196,0,.26);
  background:rgba(255,255,255,.04);
  color:var(--text); font-size:16px; font-family:inherit; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.inp:focus{ border-color:rgba(244,196,0,.65); background:rgba(244,196,0,.06); }
.inp::placeholder{ color:rgba(255,255,255,.28); }
.inp.err{ border-color:#E74C3C; animation:shake .3s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

.next{
  width:100%; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#000; font-weight:900; font-size:15px;
  border:none; cursor:pointer; font-family:inherit; letter-spacing:.2px;
  box-shadow:0 5px 22px rgba(244,196,0,.3);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.next:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 9px 30px rgba(244,196,0,.45); }
.next:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

/* ═══ GATE (filtre envestisman) ═══ */
.gate{
  background:rgba(231,76,60,.06);
  border:1px solid rgba(231,76,60,.24);
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; gap:13px;
}
.gate__lead{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.9); }
.gate__lead b{ color:#E74C3C; }

.gate__price{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 15px; border-radius:13px;
  background:rgba(244,196,0,.09);
  border:1px solid rgba(244,196,0,.26);
}
.gate__price span{
  font-size:27px; font-weight:900; color:var(--brand); letter-spacing:-.8px;
}
.gate__price small{ font-size:11.5px; color:rgba(255,255,255,.5); }

.gate__list{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.gate__list li{
  position:relative; padding-left:20px;
  font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.76);
}
.gate__list li::before{
  content:"·"; position:absolute; left:6px; top:-1px;
  color:var(--brand); font-weight:900; font-size:16px;
}
.gate__list b{ color:var(--brand); }

/* Casilla */
.agree{
  display:flex; align-items:flex-start; gap:11px;
  cursor:pointer; padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  transition:border-color .16s ease, background .16s ease;
}
.agree:hover{ border-color:rgba(244,196,0,.4); }
.agree.on{ border-color:var(--brand); background:rgba(244,196,0,.08); }
.agree input{ position:absolute; opacity:0; width:0; height:0; }
.agree__mark{
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, border-color .16s ease;
}
.agree.on .agree__mark{ background:var(--brand); border-color:var(--brand); }
.agree.on .agree__mark::after{
  content:"✓"; color:#000; font-size:13px; font-weight:900;
}
.agree__txt{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.8); }

/* ═══ HANDLE (IG / TG) ═══ */
.handle{ display:flex; flex-direction:column; gap:10px; margin-top:3px; }

/* ═══ KALANDRIYE ═══ */
.cal{ display:flex; flex-direction:column; gap:13px; }

.cal__days{
  display:flex; gap:8px;
  overflow-x:auto;
  padding-bottom:5px;
  scrollbar-width:none;
}
.cal__days::-webkit-scrollbar{ display:none; }

.day{
  flex:0 0 auto;
  width:62px; padding:10px 6px;
  border-radius:13px;
  border:1px solid rgba(244,196,0,.22);
  background:rgba(255,255,255,.035);
  color:var(--text); font-family:inherit;
  cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:2px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.day:hover{ border-color:rgba(244,196,0,.55); transform:translateY(-2px); }
.day.sel{ background:var(--brand); border-color:var(--brand); color:#000; }
.day__dow{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; opacity:.6; }
.day__num{ font-size:19px; font-weight:900; line-height:1.05; letter-spacing:-.5px; }
.day__mon{ font-size:9.5px; opacity:.55; text-transform:uppercase; letter-spacing:.4px; }

.cal__slots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  min-height:56px;
}
.cal__empty{
  grid-column:1/-1; text-align:center;
  font-size:12.5px; color:rgba(255,255,255,.35);
  padding:18px 0;
}
.slot{
  padding:11px 6px; border-radius:11px;
  border:1px solid rgba(244,196,0,.22);
  background:rgba(244,196,0,.06);
  color:var(--text); font-family:inherit;
  font-size:13px; font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.slot:hover:not(:disabled){
  border-color:rgba(244,196,0,.6);
  background:rgba(244,196,0,.14);
  transform:translateY(-2px);
}
.slot.sel{ background:var(--brand); border-color:var(--brand); color:#000; }
.slot:disabled{
  opacity:.26; cursor:not-allowed;
  text-decoration:line-through;
  background:rgba(255,255,255,.02);
  border-color:var(--line);
}
.cal__note{ font-size:11.5px; color:rgba(255,255,255,.4); text-align:center; }

/* ═══ FINAL ═══ */
.final{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:13px; padding:6px 0;
}
.final__check{ font-size:52px; animation:pop .45s cubic-bezier(.18,.89,.32,1.28); }
@keyframes pop{ from{ transform:scale(0); opacity:0; } }
.final__title{ font-size:22px; font-weight:900; color:var(--brand); }

.slotcard{
  width:100%;
  display:flex; flex-direction:column; gap:4px;
  padding:15px; border-radius:15px;
  background:rgba(244,196,0,.09);
  border:1px solid rgba(244,196,0,.3);
}
.slotcard__lab{
  font-size:10px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--brand); opacity:.75;
}
.slotcard b{ font-size:18px; font-weight:900; line-height:1.3; }
.slotcard small{ font-size:11px; color:rgba(255,255,255,.48); }

.final__msg{
  font-size:13.5px; color:var(--muted); line-height:1.6; max-width:330px;
}
.final__msg b{ color:var(--brand); }

.wa-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px; border-radius:14px;
  background:linear-gradient(135deg,#2BDD6E,#1FA851);
  color:#04210F; font-size:16px; font-weight:900;
  text-decoration:none; letter-spacing:.2px;
  box-shadow:0 6px 28px rgba(37,211,102,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  animation:breathe 2.6s ease-in-out infinite;
}
.wa-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 36px rgba(37,211,102,.5);
  animation:none;
}
@keyframes breathe{
  0%,100%{ box-shadow:0 6px 28px rgba(37,211,102,.3); }
  50%{ box-shadow:0 6px 34px rgba(37,211,102,.55); }
}

.warn{
  width:100%;
  background:rgba(231,76,60,.08);
  border:1px solid rgba(231,76,60,.26);
  border-radius:12px; padding:11px 13px;
  font-size:12px; line-height:1.55;
  color:rgba(255,255,255,.7); text-align:left;
}

.ig-link{
  font-size:12.5px; font-weight:600;
  color:var(--muted); text-decoration:none;
  padding:8px 14px; border-radius:99px;
  border:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease;
}
.ig-link:hover{ color:var(--brand); border-color:rgba(244,196,0,.4); }

/* ═══ PROOF ═══ */
.proof{ display:flex; flex-direction:column; gap:11px; }
.proof__lab{
  font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.7px;
  color:var(--brand); opacity:.8;
}

/* ═══ KARUSÈL ═══ */
.carousel{ position:relative; }
.stage{
  position:relative; height:190px;
  border-radius:15px; overflow:hidden;
  border:1px solid rgba(244,196,0,.22);
  background:rgba(255,255,255,.02);
}
.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(26px) scale(.97);
  transition:opacity .45s ease, transform .45s cubic-bezier(.3,.9,.4,1);
  pointer-events:none; text-decoration:none;
}
.slide.on{ opacity:1; transform:none; pointer-events:auto; }
.slide.out{ opacity:0; transform:translateX(-26px) scale(.97); }
.slide img{ width:100%; height:100%; object-fit:contain; padding:10px; }

.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(244,196,0,.28);
  background:rgba(8,8,11,.8); backdrop-filter:blur(6px);
  color:var(--brand); font-size:19px; line-height:1;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:2px; z-index:3;
  transition:background .16s ease, border-color .16s ease;
}
.nav:hover{ background:rgba(244,196,0,.2); border-color:rgba(244,196,0,.6); }
.nav--l{ left:8px; } .nav--r{ right:8px; }

.dots{ display:flex; gap:5px; justify-content:center; margin-top:10px; }
.dots button{
  width:6px; height:6px; border-radius:99px; border:none; padding:0;
  background:rgba(255,255,255,.2); cursor:pointer;
  transition:background .2s ease, width .25s ease;
}
.dots button.on{ background:var(--brand); width:18px; }

/* ═══ MARQUEE ═══ */
.marq{
  display:flex; flex-direction:column; gap:9px;
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq__row{ display:flex; gap:9px; width:max-content; animation:slide-l 36s linear infinite; }
.marq__row[data-dir="right"]{ animation-name:slide-r; animation-duration:42s; }
@keyframes slide-l{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes slide-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.marq:hover .marq__row{ animation-play-state:paused; }

.rev{
  flex:0 0 auto; width:250px;
  background:rgba(244,196,0,.05);
  border:1px solid rgba(244,196,0,.18);
  border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:9px; justify-content:center;
}
.rev__stars{ color:var(--brand); font-size:12px; letter-spacing:2.5px; line-height:1; }
.rev p{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.88); font-style:italic; }
.rev figcaption{ display:flex; flex-direction:column; gap:1px; }
.rev figcaption b{ font-size:11.5px; font-weight:800; color:var(--brand); }
.rev figcaption span{ font-size:10px; color:rgba(255,255,255,.4); }

.yc{
  flex:0 0 auto; width:286px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px; padding:13px 14px;
  display:flex; flex-direction:column; gap:9px;
}
.yc__head{ display:flex; align-items:center; gap:9px; }
.yc__av{
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
}
.yc__who{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.yc__who b{
  font-size:11.5px; font-weight:700; color:rgba(255,255,255,.88);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.yc__who span{ font-size:10px; color:rgba(255,255,255,.36); }
.yc .src-ico{ flex-shrink:0; opacity:.9; }
.yc__txt{ font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.82); }
.yc__foot{ display:flex; align-items:center; gap:10px; padding-top:2px; }
.yc__like{ font-size:11px; color:rgba(255,255,255,.45); }
.yc__src{
  font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:rgba(255,255,255,.28); margin-left:auto;
}

/* ═══ DISCLAIMER + FOOTER ═══ */
.disclaimer{
  font-size:11px; color:rgba(255,255,255,.32);
  text-align:center; line-height:1.5;
}
.foot{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-top:14px; border-top:1px solid var(--line); text-align:center;
}
.foot a{ font-size:12.5px; color:var(--muted); text-decoration:none; }
.foot a:hover{ color:var(--brand); }
.foot p{ font-size:10.5px; color:rgba(255,255,255,.22); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:360px){
  .choices--3{ grid-template-columns:1fr; }
  .choices--2{ grid-template-columns:1fr; }
  .cal__slots{ grid-template-columns:repeat(2,1fr); }
  .banner__logo{ width:46px; height:46px; }
  .wordmark{ font-size:18px; }
}

/* ═══ MENOS MOVIMIENTO ═══ */
@media (prefers-reduced-motion:reduce){
  .marq__row{ animation:none; }
  .wordmark{ animation:none; background-position:50% 0; }
  .wa-btn{ animation:none; }
  .slide{ transition:opacity .2s ease; transform:none !important; }
  .step{ animation:none; }
  #chart{ display:none; }
}