/* Juan Te Avisa — v5 "Premium oscuro con producto a la vista"
   Capa que se carga DESPUÉS de styles.css. No cambia la estructura ni los scripts:
   solo profundidad, jerarquía y la app a la vista. */
:root{
  --maxw:1240px;
  --gold-grad:linear-gradient(135deg,#f6e3a0 0%,#e8cb6a 38%,#c9a227 72%,#a07a17 100%);
  --glass:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.13);
  --deep:0 50px 90px -42px rgba(2,8,20,.95),0 18px 40px -26px rgba(2,8,20,.7);
}
body{background:#071a33}

/* ---------- tipografía y etiquetas ---------- */
.sec-head h2{font-size:clamp(2.7rem,5.8vw,4.9rem);line-height:.92}
.lead{line-height:1.55}
.eyebrow{display:inline-flex;align-items:center;gap:.8em;font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold-grad);flex:none}
.paper .eyebrow{color:var(--gold-deep)}

/* ---------- botones ---------- */
.btn{border-radius:10px}
.btn-gold{background:var(--gold-grad);color:#0a1f3d;box-shadow:0 20px 36px -18px rgba(232,203,106,.6),0 2px 0 rgba(255,255,255,.4) inset}
.btn-gold:hover{background:var(--gold-grad);filter:brightness(1.07);transform:translateY(-3px)}
.btn-ghost{background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.btn-sm{border-radius:8px}

/* ---------- menú ---------- */
.nav{background:rgba(7,26,51,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}

/* ---------- portada ---------- */
.hero{
  padding:clamp(48px,6vw,96px) 0 clamp(236px,22vw,330px);
  background:
    radial-gradient(1000px 620px at 84% 6%,rgba(232,203,106,.17),transparent 62%),
    radial-gradient(760px 520px at -4% 104%,rgba(40,86,160,.34),transparent 66%),
    linear-gradient(180deg,#0a1f3d,#071a33);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 28%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 80% at 72% 28%,#000,transparent 72%);
}
.hero .wrap{grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,88px)}
.hero .eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(3rem,6vw,5.2rem);line-height:.9;margin-bottom:24px}
.hero h1 .acc{display:block;margin-top:.12em;font-size:.92em}
.hero .lead{font-size:clamp(1.1rem,1.5vw,1.28rem);color:rgba(255,255,255,.78);margin-bottom:32px}
.hero .assure{margin-top:30px}
.file{width:min(100%,520px);justify-self:end}
.portrait{
  border-radius:8px 28px 28px 28px;border:1px solid rgba(232,203,106,.4);
  box-shadow:var(--deep),0 0 0 10px rgba(232,203,106,.045),0 0 120px -20px rgba(232,203,106,.28);
}
.hero-app{
  position:absolute;left:-8%;bottom:-31%;width:70%;margin:0;border-radius:16px;overflow:hidden;
  background:#0a1226;border:1px solid var(--glass-line);box-shadow:var(--deep),0 0 0 6px rgba(7,26,51,.55);z-index:4;
  animation:floatIn .9s var(--ease) .55s both,heroFloat 7s ease-in-out 1.7s infinite;
}
.hero-app img{width:100%;height:auto;display:block}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;background:linear-gradient(180deg,transparent,#071a33)}
@keyframes floatIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.frame-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:linear-gradient(180deg,#16233f,#101b33);border-bottom:1px solid var(--glass-line);font-size:.74rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.frame-bar i:first-child{background:var(--gold)}
.frame-bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .file{justify-self:center;width:min(100%,430px)}
  .hero-app{position:relative;left:auto;bottom:auto;width:94%;margin:-26px auto 0}
  .hero{padding-bottom:clamp(96px,14vw,130px)}
}

/* ---------- barra de cifras (tarjeta de cristal que sube sobre la portada) ---------- */
.proof-strip{padding:0 0 clamp(52px,6vw,84px);background:#071a33;border:0}
.proof-card{
  position:relative;z-index:6;margin-top:clamp(-104px,-7vw,-60px);
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);border-radius:24px;padding:clamp(28px,3.6vw,48px);box-shadow:var(--deep);
}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);text-align:center}
.proof-item{padding:0 8px}
.proof-item+.proof-item{border-left:1px solid var(--glass-line)}
.proof-num{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(38px,5.4vw,64px);line-height:1;letter-spacing:.01em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-num.sm{font-size:clamp(26px,3.6vw,42px);padding-top:.2em}
.proof-label{display:block;margin-top:10px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.proof-note{margin:clamp(20px,2.6vw,30px) auto 0;max-width:760px;text-align:center;font-size:12.5px;line-height:1.55;color:var(--muted);opacity:.85}
@media(max-width:720px){
  .proof-grid{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .proof-item+.proof-item{border-left:0}
  .proof-item:nth-child(even){border-left:1px solid var(--glass-line)}
}

/* ---------- promesa vs. realidad ---------- */
.ledger{border:0;display:grid;gap:16px}
.ledger .item{
  background:#fff;border:1px solid rgba(16,38,74,.07);border-radius:6px 22px 6px 22px;
  padding:clamp(24px,2.8vw,38px);box-shadow:0 34px 64px -42px rgba(10,31,61,.55);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.ledger .item:hover{transform:translateY(-3px);box-shadow:0 44px 74px -40px rgba(10,31,61,.6)}

/* ---------- los 8 pasos: cuadrícula alineada ---------- */
.steps{gap:18px}
.steps li{
  border:1px solid var(--glass-line);border-radius:6px 22px 6px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.015));
  margin-top:0!important;overflow:hidden;
}
.steps li::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--gold-grad)}
.steps li:hover{background:linear-gradient(180deg,rgba(232,203,106,.14),rgba(232,203,106,.03));transform:translateY(-5px)}

/* ---------- la app por dentro ---------- */
.app-show{
  background:radial-gradient(900px 520px at 10% 0%,rgba(40,86,160,.30),transparent 70%),radial-gradient(700px 420px at 100% 100%,rgba(232,203,106,.10),transparent 70%),#071a33;
  position:relative;overflow:hidden;
}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);align-items:stretch}
.bento-card{
  margin:0;position:relative;border-radius:20px;overflow:hidden;background:#0a1226;border:1px solid var(--glass-line);
  box-shadow:var(--deep);display:flex;flex-direction:column;transition:translate .45s var(--ease),border-color .3s;
  transform:perspective(1200px) rotateX(calc((1 - var(--p,1)) * 18deg)) translateY(calc((1 - var(--p,1)) * 110px)) scale(calc(.9 + var(--p,1) * .1));
  opacity:calc(.35 + var(--p,1) * .65);
  transform-origin:50% 100%;will-change:transform;
}
.bento-card:hover{translate:0 -6px;border-color:rgba(232,203,106,.5)}
.b-crm{grid-column:span 7;grid-row:span 2}
.b-emp,.b-dash{grid-column:span 5}
.bento-card img{width:100%;height:auto;display:block}
.b-crm img{flex:1;min-height:0;object-fit:cover;object-position:top left}
.bento-card figcaption{padding:16px 22px 22px;border-top:1px solid var(--glass-line);background:linear-gradient(180deg,#0e1a33,#0a1226)}
.bento-card figcaption b{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1.55rem;letter-spacing:.01em;color:#fff;line-height:1}
.bento-card figcaption span{display:block;margin-top:7px;color:var(--muted);font-size:.96rem}
.app-show .cta-row{margin-top:clamp(32px,4vw,52px)}
@media(max-width:900px){.b-crm,.b-emp,.b-dash{grid-column:1/-1;grid-row:auto}.b-crm img{flex:none}}

/* ---------- PRO: dos columnas en tarjeta y precio con brillo ---------- */
.pro-col{
  background:#fff;border:1px solid rgba(16,38,74,.08);border-radius:6px 24px 6px 24px;
  padding:clamp(26px,3.2vw,42px);box-shadow:0 40px 74px -48px rgba(10,31,61,.55);
}
.price{
  background:radial-gradient(700px 360px at 100% 0%,rgba(232,203,106,.2),transparent 65%),linear-gradient(160deg,#10305c,#071a33);
  border:1px solid rgba(232,203,106,.55);border-radius:26px;box-shadow:var(--deep),0 0 0 8px rgba(232,203,106,.045);
}
.plan-card{border-radius:16px;background:linear-gradient(180deg,rgba(232,203,106,.14),rgba(232,203,106,.04))}
.waitlist{border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}

/* ---------- herramientas ---------- */
.tool{border:1px solid var(--glass-line)}

/* ---------- prueba social ---------- */
.dark-2{background:radial-gradient(900px 480px at 90% 0%,rgba(40,86,160,.22),transparent 70%),#071a33}
.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;border:0;padding:0;margin-bottom:clamp(40px,5vw,64px)}
.stat div{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--glass-line);
  border-radius:6px 24px 6px 24px;padding:clamp(26px,3.2vw,44px);font-size:clamp(2.4rem,5.2vw,3.9rem);
}
.stat div span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:640px){.stat{grid-template-columns:1fr}}
.case{border-radius:18px;box-shadow:var(--deep)}
.vid-frame{border-radius:18px;box-shadow:var(--deep)}

/* ---------- cierre ---------- */
.final{
  background:radial-gradient(900px 480px at 85% 100%,rgba(232,203,106,.22),transparent 65%),radial-gradient(700px 420px at 0% 0%,rgba(40,86,160,.42),transparent 70%),#0a1f3d;
  padding:clamp(88px,11vw,160px) 0;
}
.final h2{font-size:clamp(3rem,8vw,6.8rem);max-width:none;line-height:.9}

@media(prefers-reduced-motion:reduce){.hero-app{animation:none}.bento-card,.ledger .item{transition:none}.bento-card{transform:none}.bento-card:hover,.ledger .item:hover{transform:none;translate:none}}