/* BestYou LAB™ — Capa visual compartida (tema oscuro editorial).
   Se carga DESPUÉS del <style> de cada página y solo reajusta tipografía, espacios,
   tarjetas, botones y menú. Para volver al diseño anterior, quita el <link> de esta hoja.
   Tipografías: Instrument Serif (titulares) + Inter (texto). */
:root{
  --font-display:'Instrument Serif','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --radius-m:18px; --radius-l:28px;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --gold:#f2c14e;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(111,141,255,.20), transparent 62%),
    radial-gradient(800px 520px at 100% 4%, rgba(180,139,255,.14), transparent 58%),
    radial-gradient(700px 500px at 50% 110%, rgba(173,79,124,.10), transparent 60%),
    var(--bg-0);
  background-attachment:fixed;
  font-size:16.5px; line-height:1.6;
}

/* ===== Titulares: serif editorial con una palabra en cursiva ===== */
h1,h2{font-family:var(--font-display); font-weight:400; letter-spacing:-.005em; line-height:1.04;}
h1{font-size:clamp(2.4rem,4.8vw,3.9rem); line-height:1.02;}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);}
h3{letter-spacing:-.005em;}
h1 em,h2 em,h3 em{font-style:italic; font-weight:400; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em;}
.brand-block h2,.cal h3{margin-bottom:6px;}
.brand-block > .wrap > h2 + p, .brand-block h2 + p{margin-top:14px; font-size:1.05rem; max-width:62ch;}
.brand-block[style*="text-align:center"] h2 + p, [style*="text-align:center"] > h2 + p{margin-left:auto; margin-right:auto;}

/* ===== Etiquetas (kicker) en cápsula ===== */
.kicker,.hero .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-1); padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); margin-bottom:16px;
}
.kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none;}

/* ===== Ritmo: más aire y sin líneas duras entre secciones ===== */
.brand-block{border-top:0; padding:84px 0;}
.section{padding:72px 0;}
@media (max-width:700px){ .brand-block{padding:56px 0;} .section{padding:48px 0;} }

/* ===== Menú superior flotante en cápsula ===== */
.topbar{background:transparent; border-bottom:0; backdrop-filter:none; top:10px; padding:0 12px;}
.topbar-in{
  background:rgba(12,14,24,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line); border-radius:999px; padding:9px 12px 9px 22px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.navpill{transition:color .2s;} .navpill:hover{color:var(--text-0);}
.navdrop-panel{border-radius:22px; padding:10px;}
.langbtn{transition:border-color .2s,color .2s;} .langbtn:hover{border-color:var(--lavender); color:var(--text-0);}

/* ===== Botones: cápsula con flecha que avanza ===== */
.btn{font-size:.92rem; padding:13px 24px; letter-spacing:.005em; transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s, border-color .2s, background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{box-shadow:0 8px 28px rgba(111,141,255,.30);}
.btn-primary:hover{box-shadow:0 12px 36px rgba(139,125,255,.45); filter:brightness(1.06);}
.btn-ghost{background:var(--glass);} .btn-ghost:hover{border-color:rgba(180,139,255,.6); background:var(--glass-2);}
.navmember{padding:9px 16px;}

/* ===== Tarjetas: cristal oscuro, esquinas amplias, elevación al pasar ===== */
.card,.mentor-plan,.deep-band,.mentor-band,.member-banner,.reframe-box,.journey-step,.price-compare .pc,.stakeholder-card{
  transition:transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s var(--ease);
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius-l); padding:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.card:hover{transform:translateY(-4px); border-color:rgba(180,139,255,.38); box-shadow:0 22px 50px rgba(0,0,0,.35);}
.lab-umbrella{border-color:rgba(111,141,255,.45);}
.card h3{font-size:1.18rem; margin-bottom:6px;}

/* ===== Paneles destacados ===== */
.mentor-band,.deep-band{border-radius:32px; padding:34px 34px 36px;}
.mentor-band h3,.deep-band h3{font-family:var(--font-display); font-weight:400; font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.08;}
.mentor-plan{border-radius:22px;}
.mentor-plan:hover{transform:translateY(-3px); border-color:rgba(180,139,255,.45);}
.member-banner{border-radius:26px;}

/* ===== Cifras con serif ===== */
.stat-n{font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; color:var(--text-0); letter-spacing:-.02em;}
.stat-n sup,.stat-n i{font-style:normal;}
.stat-l{font-size:.82rem; color:var(--text-1); margin-top:8px; max-width:20ch; margin-left:auto; margin-right:auto;}
.stats{padding:26px 10px; border-radius:28px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));}
.price-compare .pc b,.mp-prices div,.mentor-price{font-family:var(--font-display); font-weight:400; letter-spacing:-.01em;}
.price-compare .pc b{font-size:1.7rem;}
.mp-prices div,.mentor-price{font-size:2.1rem;}

/* ===== Pasos numerados ===== */
.step-num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--grad); color:#0a0a12; font-weight:700; font-size:.9rem;}

/* ===== Testimonios ===== */
#testimonios .card{padding:28px 24px 22px; position:relative;}
#testimonios .card::before{content:"“"; font-family:var(--font-display); font-size:4.2rem; line-height:.7; height:30px; color:var(--lavender); opacity:.85; display:block;}
#testimonios .card p{font-size:1rem; line-height:1.55; color:var(--text-0);}
#testimonios .card p:first-of-type::first-letter{margin:0;}

/* ===== Calendario: filas tipo aviso en vivo ===== */
.cal{padding:34px; border-radius:32px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));}
.cal h3{font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,3.6vw,2.7rem);}
.cal-row{position:relative; padding-left:44px!important; border-radius:20px!important; background:var(--glass); border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s, background .3s;}
.cal-row:hover{transform:translateX(4px); border-color:rgba(180,139,255,.5); background:var(--glass-2);}
.cal-row::before{content:""; position:absolute; left:20px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#58e0a0; box-shadow:0 0 0 0 rgba(88,224,160,.55); animation:by-pulse 2.4s infinite;}
@keyframes by-pulse{0%{box-shadow:0 0 0 0 rgba(88,224,160,.5);}70%{box-shadow:0 0 0 10px rgba(88,224,160,0);}100%{box-shadow:0 0 0 0 rgba(88,224,160,0);}}
.sched{border-radius:16px;}

/* ===== Píldoras y etiquetas ===== */
.wl-tag,.offer-badge{border-radius:999px;}
.chips span,.chip,.tag{border-radius:999px;}

/* ===== Formularios ===== */
input[type=text],input[type=email],input[type=tel],select,textarea{border-radius:14px!important; transition:border-color .2s, box-shadow .2s;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--lavender)!important; box-shadow:0 0 0 4px rgba(180,139,255,.16);}
.byp-box{border-radius:30px!important;}

/* ===== Entrada suave al hacer scroll ===== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.rv.in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none;}
  .cal-row::before{animation:none;} .btn,.card{transition:none;}
}
@media (max-width:700px){
  .topbar{top:6px; padding:0 8px;}
  .mentor-band,.deep-band,.cal{padding:24px 20px; border-radius:26px;}
}

.hero-tag{font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); max-width:56ch; line-height:1.6;}

/* ===== Móvil: que el menú en cápsula no desborde ===== */
@media (max-width:620px){
  .topbar-in{padding:8px 10px 8px 14px; gap:8px;}
  .navrow{gap:8px!important; min-width:0;}
  .navdrop{display:none!important;}
  .brandname{font-size:.92rem;}
  .navmember{padding:8px 12px; font-size:.78rem;}
  .langbtn{padding:6px 11px; font-size:.78rem;}
  h1{overflow-wrap:break-word;}
  .wrap{padding-left:20px; padding-right:20px;}
}

/* ===== Celular animado del hero (logo + scroll rápido) ===== */
.phone-wrap{display:flex; flex-direction:column; align-items:center; gap:18px;}
.phone{--h:430px; position:relative; width:250px; padding:10px; border-radius:42px; background:linear-gradient(160deg,#2a2e45,#0d0f1a 60%); border:1px solid rgba(255,255,255,.16); box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 70px rgba(111,141,255,.22), inset 0 0 0 2px rgba(255,255,255,.04); animation:by-float 7s ease-in-out infinite;}
@keyframes by-float{0%,100%{transform:translateY(0) rotate(-1.2deg);}50%{transform:translateY(-10px) rotate(1deg);}}
.phone-notch{position:absolute; top:16px; left:50%; width:74px; height:20px; margin-left:-37px; border-radius:20px; background:#05060b; z-index:3;}
.phone-screen{height:var(--h); border-radius:32px; overflow:hidden; background:radial-gradient(120% 70% at 50% 0%, rgba(111,141,255,.28), transparent 60%), #080a13; position:relative;}
.phone-track{animation:by-scroll 16s infinite; will-change:transform;}
.ps{height:var(--h); padding:54px 16px 18px; display:flex; flex-direction:column; justify-content:center; gap:10px;}
.ps-logo{align-items:center; text-align:center;}
.ps-logo img{width:150px; height:150px; border-radius:50%; object-fit:cover; box-shadow:0 0 50px rgba(111,141,255,.4);}
.ps-logo .hl-t{margin-top:14px; font-size:.78rem;}
.ps-logo p{font-size:.78rem; margin-top:4px;}
.ps-h{font-family:var(--font-display); font-size:1.5rem; line-height:1.05; color:var(--text-0); margin-bottom:6px;}
.ps-card{display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--glass);}
.ps-card span{flex:none; width:24px; height:24px; border-radius:50%; background:var(--grad); color:#0a0a12; font-weight:700; font-size:.74rem; display:flex; align-items:center; justify-content:center;}
.ps-card b{font-size:.78rem; color:var(--text-0); line-height:1.25;}
.ps-btn{margin-top:6px; padding:11px 12px; border-radius:999px; background:var(--grad); color:#0a0a12; font-weight:600; font-size:.72rem; text-align:center;}
.ps-row{position:relative; display:flex; align-items:center; gap:8px; padding:10px 12px 10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--glass);}
.ps-row i{flex:none; width:7px; height:7px; border-radius:50%; background:#58e0a0;}
.ps-row b{flex:1; font-size:.72rem; color:var(--text-0); line-height:1.2;}
.ps-row em{font-style:normal; font-size:.68rem; color:var(--gold);}
/* Pausa en el logo, baja rápido por la app, pausa, y regresa */
@keyframes by-scroll{
  0%,26%{transform:translateY(0);}
  31%,40%{transform:translateY(calc(var(--h) * -1));}
  45%,52%{transform:translateY(calc(var(--h) * -2));}
  57%,76%{transform:translateY(calc(var(--h) * -3));}
  84%,100%{transform:translateY(0);}
}
.ps-welcome p{font-size:.76rem; line-height:1.4; color:var(--text-1); margin:0;} .ps-welcome p b{color:var(--text-0);}
}
.phone-cap{max-width:30ch; text-align:center; font-size:.92rem; color:var(--text-1);}
@media (max-width:900px){ .hero-visual{margin:10px 0;} }
@media (max-width:420px){ .phone{width:220px; --h:380px;} }
@media (prefers-reduced-motion:reduce){ .phone,.phone-track{animation:none;} }

/* ===== Síguenos: botones con logo ===== */
.follow-card{margin-top:16px; max-width:760px; padding:26px 28px; border-radius:var(--radius-l); border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;}
.follow-txt{flex:1 1 320px;}
.follow-txt p{margin-top:8px; font-size:.88rem; color:var(--text-1); line-height:1.6;}
.follow-btns{display:flex; flex-wrap:wrap; gap:10px;}
.soc-btn{display:inline-flex; align-items:center; gap:10px; padding:11px 18px 11px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); font-weight:600; font-size:.88rem; color:var(--text-0); transition:transform .25s var(--ease), border-color .25s, background .25s;}
.soc-btn:hover{transform:translateY(-2px); border-color:rgba(180,139,255,.55); background:var(--glass-2);}
.soc-btn svg{flex:none; display:block;}

/* ===== Banda de promesa (Humanos + IA) ===== */
.promise-band{margin-top:26px; max-width:640px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03);}
.promise-band .pb-k{display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); margin-bottom:6px;}
.promise-band .pb-main{font-family:var(--font-display,inherit); font-size:1.2rem; line-height:1.35; color:var(--text-0); margin:0;}
.promise-band .pb-main em{font-style:italic;}
.promise-band .pb-prog{margin:10px 0 0; font-size:.92rem; line-height:1.55; color:var(--text-1,inherit);}
.promise-band .pb-nav{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:.82rem; color:var(--text-2);}
.offer-hia{margin-top:10px; font-size:.82rem; font-weight:600; color:var(--text-0); padding-top:8px; border-top:1px dashed var(--line);}

/* ===== Módulos transversales con IA ===== */
.mod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px;}
.mod-card{padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03);}
.mod-card h3{font-size:1.05rem; margin:6px 0 8px; color:var(--text-0);}
.mod-card p{font-size:.86rem; margin-top:6px; line-height:1.5;}
.mod-wk{font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);}
.mod-ai b{color:var(--text-0);}
.mod-out{padding-top:8px; border-top:1px dashed var(--line);}
.mod-note{grid-column:1/-1; font-size:.76rem; color:var(--text-2);}
@media (max-width:640px){ .mod-grid{grid-template-columns:1fr;} }
.mod-final{margin-top:16px; font-weight:600; color:var(--text-0); font-size:.95rem; max-width:680px;}
.incl-list{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.incl-list li{padding-left:22px; position:relative; font-size:.92rem;}
.incl-list li::before{content:"✓"; position:absolute; left:0; color:var(--text-0);}
.incl-q{margin-top:16px; font-weight:600; color:var(--text-0);}

/* ===== Imagen por programa ===== */
.prog-img{margin:22px 0 0; border-radius:16px; overflow:hidden; border:1px solid var(--line); max-width:640px;}
.prog-img img{display:block; width:100%; height:auto;}

/* ===== Servicios ===== */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px;}
.svc-card{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); color:var(--text-0); text-decoration:none; transition:border-color .2s,transform .2s;}
.svc-card:hover{border-color:var(--lavender); transform:translateY(-2px);}
.svc-card b{font-size:.95rem; line-height:1.3;}
.svc-card span{font-size:.8rem; color:var(--text-1,inherit); line-height:1.45;}
.svc-card em{margin-top:auto; padding-top:6px; font-style:normal; font-size:.78rem; font-weight:600; color:var(--lavender);}
@media (max-width:980px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr;} }

/* Menú: con 8 ítems, ocultar los menos críticos en pantallas medianas (siguen en el pie y en el contenido) */
@media (max-width:1240px){ .navopt{display:none!important;} }
@media (max-width:1100px){ .navopt2{display:none!important;} }
@media (max-width:860px){ .navopt3{display:none!important;} }
.mentor-band{scroll-margin-top:90px;}
#app>main:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.hamburger{background:none;border:0;padding:8px;box-sizing:content-box;cursor:pointer;}
.mnav[hidden]{display:none!important;}
.mnav{position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:60;max-height:78vh;overflow:auto;padding:10px;border-radius:22px;background:rgba(11,13,22,.97);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;}
.mnav a{padding:12px 14px;border-radius:12px;color:var(--text-0);font-size:.95rem;text-decoration:none;}
.mnav a:hover,.mnav a:focus{background:var(--glass-2,rgba(255,255,255,.06));}
.mnav .mn-grp{padding:10px 14px 2px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);}
.mnav .mn-sub{padding:8px 14px 8px 26px;font-size:.88rem;color:var(--text-1);}
.mnav .mn-cta{margin-top:8px;text-align:center;background:var(--grad);color:#0a0a12;font-weight:600;}
@media (min-width:700px){.mnav{left:auto;width:340px;right:20px;}}

/* Infinito del llamado a la acción: antes → BestYou Actual → BestJourney → BestYou Futuro → transformación */
.inf-row{display:flex; align-items:center; justify-content:center; gap:14px; margin:24px auto 6px; max-width:980px;}
.inf-svg{flex:0 1 560px; width:100%; height:auto; min-width:0;}
.inf-cap{flex:0 0 auto; font-size:.92rem; line-height:1.3; letter-spacing:.02em; color:var(--text-1); display:flex; align-items:center; gap:8px; text-align:center;}
.inf-arrow{color:var(--lavender,#b48bff); font-size:1.2rem;}
@media (max-width:760px){ .inf-row{flex-direction:column; gap:6px;} .inf-left .inf-arrow,.inf-right .inf-arrow{transform:rotate(90deg);} .inf-left{flex-direction:column;} .inf-right{flex-direction:column-reverse;} .inf-svg{flex:0 0 auto;} }

/* idioma: botón destacado y visible */
.langbtn{white-space:nowrap!important;border:1.5px solid #8fa6ff!important;background:rgba(143,166,255,.18)!important;color:#fff!important;font-weight:700!important;padding:8px 16px!important;font-size:.9rem!important}
.langbtn::before{content:"🌐 ";}
@media (max-width:700px){.langbtn{padding:7px 12px!important;font-size:.82rem!important}}