/* ==========================================================================
   SuperSapiens para Maestros — Landing Page
   Stylesheet principal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuentes y variables raíz
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600&display=swap');

:root{
  --ss-roleno-blue:#1B69FF;--ss-offblack:#1D1C22;--ss-pure-white:#FCFCFD;--ss-cyan-500:#03C5FB;
  --ss-ink-75:#FBFBFB;--ss-ink-100:#F6F6F8;--ss-ink-150:#F0F0F0;--ss-ink-200:#EFEFF0;
  --ss-ink-300:#D2D2D2;--ss-ink-400:#999D9E;--ss-ink-500:#646369;--ss-ink-600:#38383B;
  --ss-blue-050:#F0F5FF;--ss-blue-200:#A6C3FF;
  --font-display:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-micro:'Plus Jakarta Sans','Inter',sans-serif;
  --font-mono:ui-monospace,'SF Mono','Roboto Mono',monospace;
  --radius-pill:40px;--ease-standard:cubic-bezier(0.2,0,0,1);--ease-emphasized:cubic-bezier(0.2,0,0,1.2);
  --duration-fast:120ms;--duration-normal:200ms;--max:1240px;--gutter:clamp(20px,5vw,96px);
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.45;color:var(--ss-offblack);background:var(--ss-pure-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ss-roleno-blue);color:#fff}
img{display:block;max-width:100%}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* --------------------------------------------------------------------------
   4. Eyebrow (título superior de secciones)
   -------------------------------------------------------------------------- */
.eyebrow{font-family:var(--font-micro);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ss-roleno-blue);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.eyebrow-cyan{color:var(--ss-cyan-500)}
.eyebrow-cyan::before{background:var(--ss-cyan-500)}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:-0.005em;border:1px solid transparent;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow 200ms var(--ease-standard);white-space:nowrap;text-decoration:none}
.btn:active{transform:scale(0.98)}
.btn-primary{background:var(--ss-roleno-blue);color:#fff;box-shadow:0 8px 24px rgba(27,105,255,0.18)}
.btn-primary:hover{background:#3B7FFF;box-shadow:0 12px 32px rgba(27,105,255,0.28)}
.btn-secondary{background:#fff;color:var(--ss-offblack);border-color:var(--ss-offblack)}
.btn-secondary:hover{background:var(--ss-ink-100)}
.btn-white{background:#fff;color:var(--ss-offblack)}
.btn-white:hover{background:var(--ss-ink-100)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,0.3)}
.btn-outline-white:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.55)}
.btn-sm{height:40px;padding:0 20px;font-size:13.5px}
.btn svg{transition:transform 320ms var(--ease-emphasized)}
.btn:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   6. Animaciones de aparición (.reveal)
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 660ms var(--ease-standard),transform 660ms var(--ease-standard)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:70ms}.reveal.d2{transition-delay:140ms}.reveal.d3{transition-delay:210ms}
.reveal.d4{transition-delay:280ms}.reveal.d5{transition-delay:350ms}.reveal.d6{transition-delay:420ms}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{animation:none!important;transition-duration:0.01ms!important}}

/* --------------------------------------------------------------------------
   7. Navegación (header + menú móvil)
   -------------------------------------------------------------------------- */
.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(252,252,253,0.78);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(29,28,34,0.06)}
.nav{display:flex;align-items:center;height:76px;position:relative}
a.nav-logo{text-decoration:none}
.nav-logo img{height:40px;width:auto;display:block}
/* Pill switcher de audiencia */
.nav-audience{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:var(--ss-ink-150);border-radius:100px;padding:3px;gap:2px}
.na-pill{font-size:14.5px;font-weight:500;color:var(--ss-ink-500);text-decoration:none;padding:7px 20px;border-radius:100px;transition:color var(--duration-fast),background var(--duration-fast),box-shadow var(--duration-fast);white-space:nowrap}
.na-pill:hover{color:var(--ss-offblack)}
.na-pill[aria-current="page"]{background:#fff;color:var(--ss-offblack);box-shadow:0 1px 4px rgba(29,28,34,0.10),0 0 0 1px rgba(29,28,34,0.04)}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--ss-ink-200);background:transparent;color:var(--ss-offblack);cursor:pointer;padding:0;align-items:center;justify-content:center;transition:background var(--duration-fast)}
.nav-burger:hover{background:var(--ss-ink-100)}
.nav-burger svg{width:18px;height:18px}
.nav-burger .ic-close{display:none}
body.menu-open{overflow:hidden}
body.menu-open .nav-burger .ic-open{display:none}
body.menu-open .nav-burger .ic-close{display:block}
.mobile-menu{position:fixed;top:76px;left:0;right:0;bottom:0;width:100%;max-width:100vw;height:calc(100dvh - 76px);background:var(--ss-pure-white);z-index:49;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard);display:flex;flex-direction:column;padding:24px var(--gutter) 32px;overflow-y:auto;overflow-x:hidden}
body.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
.mobile-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.mobile-menu li a{display:block;padding:16px 0;border-bottom:1px solid var(--ss-ink-150);font-size:20px;line-height:1.15;font-weight:500;letter-spacing:-0.015em;color:var(--ss-offblack);text-decoration:none}
.mobile-menu .mm-ctas{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.mobile-menu .mm-ctas .btn{width:100%;height:56px;justify-content:center}
.mm-link{font-size:14px;font-weight:500;color:var(--ss-ink-500);text-decoration:none;text-align:center;padding:8px 0;transition:color var(--duration-fast)}
.mm-link:hover{color:var(--ss-offblack)}
@media(max-width:880px){.nav-audience{display:none}.nav{height:64px}.nav-logo img{height:34px}.nav-burger{display:inline-flex}.nav-cta .btn{display:none}.mobile-menu{top:64px;height:calc(100dvh - 64px)}}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero{padding:clamp(24px,3vw,48px) 0 clamp(56px,7vw,88px);position:relative;overflow:hidden;background:var(--ss-pure-white)}
.hero-watermark{position:absolute;right:-160px;top:-120px;width:720px;height:720px;pointer-events:none;opacity:0.04;color:var(--ss-roleno-blue);transform:rotate(8deg)}
.hero-watermark svg{width:100%;height:100%}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;position:relative}
.hero-copy{max-width:600px}
.hero-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.hero-tag{font-family:var(--font-micro);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ss-ink-500);background:var(--ss-ink-100);border:1px solid var(--ss-ink-200);padding:5px 11px;border-radius:100px}
.hero-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-0.022em;color:var(--ss-offblack);margin:0 0 20px}
.hero-h1 .accent{color:var(--ss-roleno-blue);font-weight:700}
.hero-sub{font-size:clamp(15px,1.25vw,17px);line-height:1.65;color:var(--ss-ink-500);margin-bottom:36px;max-width:500px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;aspect-ratio:1/1;min-height:500px}
.hero-bg{position:absolute;inset:0;border-radius:48px;background:radial-gradient(120% 80% at 100% 0%,rgba(27,105,255,0.10) 0%,transparent 60%),linear-gradient(160deg,#F0F5FF 0%,#E8F0FF 40%,#FCFCFD 100%);overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(3,197,251,0.18),transparent 65%);filter:blur(40px);transform:translate(-10%,30%)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(27,105,255,0.04) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(180deg,black,transparent)}
.hero-shot{position:absolute;height:auto;border-radius:18px;border:1px solid rgba(255,255,255,0.75);box-shadow:0 28px 52px rgba(29,28,34,0.18),0 8px 18px rgba(27,105,255,0.12);background:#fff}
.hero-shot-main{left:0;top:9%;width:96%;z-index:2;animation:float-s2 7s ease-in-out infinite}
.hero-shot-secondary{right:-5%;bottom:7%;width:76%;z-index:3;box-shadow:0 32px 64px rgba(29,28,34,0.22),0 10px 22px rgba(27,105,255,0.14);animation:float-s3 6s ease-in-out infinite 0.6s}
@keyframes float-s1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes float-s2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float-s3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-float{position:absolute;z-index:5;background:#fff;border-radius:14px;padding:9px 13px;box-shadow:0 6px 20px rgba(29,28,34,0.13),0 1px 4px rgba(29,28,34,0.06);display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.3;white-space:nowrap}
.hero-float .hf-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-float .hf-ico svg{width:15px;height:15px}
.hero-float .hf-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;color:var(--ss-ink-500);display:block}
.hero-float .hf-val{font-weight:600;color:var(--ss-offblack);display:block;margin-top:1px}
.hfc-a{top:6%;right:-3%;animation:fc1 5s ease-in-out infinite}
.hfc-b{bottom:33%;left:-5%;animation:fc1 5.5s ease-in-out infinite 1.2s}
.hfc-c{bottom:14%;right:-4%;animation:fc1 4.8s ease-in-out infinite 0.6s}
@keyframes fc1{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:1100px){.hero-float{display:none}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:460px;max-width:540px;margin:0 auto}}
@media(max-width:640px){.hero{padding:44px 0 60px}.hero-visual{min-height:330px;max-width:100%;overflow:hidden}.hero-bg{border-radius:32px}.hero-shot-main{width:96%;left:2%;top:12%}.hero-shot-secondary{width:74%;right:2%;bottom:12%}.hero-ctas .btn{flex:1 1 auto;min-width:0}}

/* Hero con capturas de teléfono en portrait (página aprendices)
   — una captura centrada grande + pills flotantes a los lados     */
.hero-phones .hero-shot-main{width:46%;left:50%;transform:translateX(-50%);top:4%;animation:float-phone 7s ease-in-out infinite}
.hero-phones .hero-shot-secondary{display:none}
@keyframes float-phone{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
/* Pills reposicionadas para flanquear el teléfono centrado */
.hero-phones .hfc-a{top:8%;right:2%}
.hero-phones .hfc-b{bottom:36%;left:2%}
.hero-phones .hfc-c{bottom:14%;left:50%;transform:translateX(-50%);animation:fc1 4.8s ease-in-out infinite 0.6s}
@media(max-width:640px){.hero-phones .hero-shot-main{width:62%;left:50%}}

/* --------------------------------------------------------------------------
   9. Features
   -------------------------------------------------------------------------- */
.features{padding:clamp(44px,5vw,72px) 0;background:var(--ss-blue-050);border-radius:40px 40px 0 0;border-top:none}
.section-head{margin-bottom:56px}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-0.02em;margin:8px 0 12px;color:var(--ss-offblack)}
.section-head h2 b{font-weight:700}
.section-head p{font-size:16px;line-height:1.65;color:var(--ss-ink-500);max-width:560px;margin:0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.fcard{background:#fff;border:1px solid var(--ss-ink-150);border-radius:24px;padding:30px 26px;transition:transform 400ms var(--ease-standard),box-shadow 400ms var(--ease-standard),border-color 400ms var(--ease-standard)}
.fcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(27,105,255,0.09),0 3px 10px rgba(29,28,34,0.05);border-color:var(--ss-blue-200)}
.fcard-ico{width:44px;height:44px;border-radius:12px;background:var(--ss-blue-050);color:var(--ss-roleno-blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background 320ms,color 320ms,transform 400ms var(--ease-emphasized)}
.fcard-ico svg{width:20px;height:20px}
.fcard:hover .fcard-ico{background:var(--ss-roleno-blue);color:#fff;transform:rotate(-5deg) scale(1.08)}
.fcard h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin:0 0 8px;color:var(--ss-offblack)}
.fcard p{font-size:13.5px;line-height:1.6;color:var(--ss-ink-500);margin:0}
.feat-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   10. Ecosistema (maestros + aprendices)
   -------------------------------------------------------------------------- */
.ecosystem{padding:clamp(40px,5vw,72px) 0;background:var(--ss-pure-white);border-top:none}
.eco-head{text-align:center;margin-bottom:64px}
.eco-head .eyebrow{justify-content:center;margin-bottom:16px}
.eco-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-0.02em;color:var(--ss-offblack);max-width:680px;margin:8px auto 16px}
.eco-head h2 b{font-weight:700}
.eco-head p{font-size:16px;line-height:1.65;color:var(--ss-ink-500);max-width:540px;margin:0 auto}
.eco-diagram{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start}
.eco-side{background:#fff;border:1px solid var(--ss-ink-150);border-radius:28px;padding:36px 32px}
.eco-side-label{font-family:var(--font-micro);font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ss-ink-400);margin-bottom:16px}
.eco-side h3{font-size:18px;font-weight:600;letter-spacing:-0.015em;color:var(--ss-offblack);margin:0 0 12px}
.eco-side p{font-size:14.5px;line-height:1.6;color:var(--ss-ink-500);margin:0 0 20px}
.eco-tags{display:flex;gap:7px;flex-wrap:wrap}
.eco-tag{font-size:12px;font-weight:500;color:var(--ss-ink-600);background:var(--ss-ink-100);border:1px solid var(--ss-ink-150);padding:5px 12px;border-radius:100px}
.eco-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 clamp(16px,2.5vw,36px);gap:8px}
.eco-conn-line{width:1px;flex:1;min-height:32px;background:linear-gradient(to bottom,transparent,var(--ss-ink-200) 40%,var(--ss-ink-200) 60%,transparent)}
.eco-conn-pills{display:flex;flex-direction:column;gap:6px;align-items:center}
.eco-conn-pill{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ss-roleno-blue);background:var(--ss-blue-050);border:1px solid var(--ss-blue-200);padding:5px 12px;border-radius:100px}
@media(max-width:860px){.eco-diagram{grid-template-columns:1fr;gap:24px}.eco-connector{flex-direction:row;padding:0}.eco-conn-line{width:40px;height:1px;flex:none;min-height:auto}}

/* --------------------------------------------------------------------------
   11. Sección Aprendiz (app + features)
   -------------------------------------------------------------------------- */
.aprendiz{padding:clamp(48px,6vw,88px) 0;background:var(--ss-ink-75);border-top:1px solid var(--ss-ink-150)}
.aprendiz-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.aprendiz-phones{display:flex;align-items:center;justify-content:center;position:relative;border-radius:32px;padding:32px 20px;background:radial-gradient(ellipse 90% 80% at 50% 60%,rgba(27,105,255,0.10) 0%,rgba(3,197,251,0.07) 45%,transparent 80%)}
.aprendiz-phones img{width:100%;max-width:360px;height:auto;filter:drop-shadow(0 20px 44px rgba(29,28,34,0.18)) drop-shadow(0 4px 10px rgba(27,105,255,0.10));animation:float-s2 6s ease-in-out infinite;position:relative;z-index:1}
.aprendiz-copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-0.018em;margin:8px 0 14px;color:var(--ss-offblack)}
.aprendiz-copy h2 b{font-weight:700}
.aprendiz-copy p{font-size:15px;line-height:1.65;color:var(--ss-ink-500);margin-bottom:28px;max-width:460px}
.claim{font-size:13.5px;font-style:italic;color:var(--ss-ink-400);margin-bottom:28px!important}
.aprendiz-items{display:flex;flex-direction:column}
.aitem{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--ss-ink-150)}
.aitem:first-child{border-top:1px solid var(--ss-ink-150)}
.aitem-ico{width:34px;height:34px;border-radius:9px;background:var(--ss-blue-050);color:var(--ss-roleno-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background 300ms,color 300ms}
.aitem-ico svg{width:17px;height:17px}
.aitem:hover .aitem-ico{background:var(--ss-roleno-blue);color:#fff}
.aitem strong{display:block;font-size:14px;font-weight:600;color:var(--ss-offblack);margin-bottom:2px}
.aitem p{font-size:13px;line-height:1.5;color:var(--ss-ink-500);margin:0}
.ai-badge{display:inline-flex;align-items:center;gap:7px;background:var(--ss-offblack);color:var(--ss-cyan-500);font-family:var(--font-micro);font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:5px}
.ai-badge svg{width:12px;height:12px}
.store-row{display:flex;gap:10px;flex-wrap:nowrap;max-width:100%}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:var(--ss-offblack);color:#fff;padding:11px 18px;border-radius:13px;text-decoration:none;transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast);border:1px solid rgba(255,255,255,0.06)}
.store-badge:hover{transform:translateY(-2px);background:#000}
.store-badge svg{width:20px;height:20px;flex-shrink:0}
.store-badge .bs{font-family:var(--font-micro);font-size:9px;letter-spacing:0.13em;text-transform:uppercase;opacity:0.6;line-height:1;font-weight:600;display:block}
.store-badge .bn{font-family:var(--font-display);font-size:14px;font-weight:500;line-height:1.2;margin-top:2px;display:block}
@media(max-width:1100px){.aprendiz-layout{grid-template-columns:1fr 1fr}.aprendiz-phones{grid-column:1/-1;justify-content:center}.aprendiz-phones img{max-width:480px}}
@media(max-width:640px){.aprendiz-layout{grid-template-columns:1fr}.store-row{gap:8px}.store-badge{flex:1 1 0;min-width:0;padding:10px 11px}.store-badge .bn{font-size:12.5px}.store-badge .bs{font-size:8px}.store-badge svg{width:18px;height:18px}.aprendiz-phones{padding:24px 12px}.aprendiz-phones img{max-width:300px}}

/* --------------------------------------------------------------------------
   12. Simulador de ingresos
   -------------------------------------------------------------------------- */
.simulator{padding:clamp(40px,5vw,72px) 0;background:var(--ss-blue-050);border-top:none}
.sim-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,80px);align-items:center}
.sim-copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-0.018em;margin:8px 0 14px;color:var(--ss-offblack)}
.sim-copy p{font-size:15px;line-height:1.65;color:var(--ss-ink-500);margin:0 0 24px}
.sim-visual{position:relative;display:flex;align-items:center;justify-content:center}
.sim-visual img{width:100%;max-width:620px;height:auto;filter:drop-shadow(0 24px 56px rgba(27,105,255,0.14)) drop-shadow(0 6px 16px rgba(29,28,34,0.10));transition:transform 600ms var(--ease-standard)}
.sim-visual:hover img{transform:translateY(-6px)}
.sim-visual-glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(27,105,255,0.10),transparent 70%);pointer-events:none;filter:blur(32px)}
@media(max-width:860px){.sim-layout{grid-template-columns:1fr}}
@media(max-width:640px){.sim-visual{overflow:hidden}.sim-visual-glow{inset:0}.sim-visual img{max-width:112%;width:112%;margin-left:-6%}}

/* --------------------------------------------------------------------------
   13. CTA final
   -------------------------------------------------------------------------- */
.cta-final{padding:clamp(48px,6vw,88px) 0;background:var(--ss-offblack);position:relative;overflow:hidden}
.cta-watermark{position:absolute;right:-180px;bottom:-200px;width:620px;height:620px;color:#fff;opacity:0.04;pointer-events:none}
.cta-watermark svg{width:100%;height:100%}
.cta-inner{position:relative;background:#0C0F1A;border-radius:40px;padding:clamp(52px,7vw,96px) clamp(36px,5vw,80px);overflow:hidden;isolation:isolate}
.cta-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 100% 0%,rgba(27,105,255,0.35) 0%,transparent 55%),radial-gradient(60% 50% at 0% 100%,rgba(3,197,251,0.18) 0%,transparent 55%);z-index:-1}
.cta-inner .eyebrow-cyan{margin-bottom:20px}
.cta-inner h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.08;letter-spacing:-0.02em;color:#fff;margin:0 0 20px;max-width:680px}
.cta-inner h2 b{font-weight:700}
.cta-inner p{font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:rgba(255,255,255,0.75);max-width:560px;margin-bottom:40px}
.cta-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:560px){.cta-inner{border-radius:28px}.cta-ctas .btn{flex:1 1 auto;justify-content:center}}

/* --------------------------------------------------------------------------
   14. Formulario de contacto
   -------------------------------------------------------------------------- */
.contact{padding:clamp(40px,5vw,72px) 0;background:var(--ss-pure-white);border-top:1px solid var(--ss-ink-150)}
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:start}
.contact-copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-0.018em;margin:8px 0 14px;color:var(--ss-offblack)}
.contact-copy p{font-size:15px;line-height:1.65;color:var(--ss-ink-500);margin:0 0 10px}
.contact-note{font-size:14px;color:var(--ss-ink-400)!important;margin:0!important}
.cform{display:flex;flex-direction:column;gap:14px}
.cform-field{display:flex;flex-direction:column;gap:5px}
.cform-field label{font-size:12.5px;font-weight:600;color:var(--ss-ink-600)}
.cform-field input,.cform-field textarea{width:100%;padding:12px 15px;border:1px solid var(--ss-ink-200);border-radius:12px;font-family:var(--font-body);font-size:15px;color:var(--ss-offblack);background:#fff;transition:border-color var(--duration-fast),box-shadow var(--duration-fast);outline:none;resize:none}
.cform-field input:focus,.cform-field textarea:focus{border-color:var(--ss-roleno-blue);box-shadow:0 0 0 3px rgba(27,105,255,0.09)}
.cform-field textarea{min-height:110px}
.cform .btn{align-self:flex-start;margin-top:4px}
/* Estados de error en campos */
.cform-field input.field-error,.cform-field textarea.field-error{border-color:#E53935;box-shadow:0 0 0 3px rgba(229,57,53,0.09)}
.field-msg{font-size:12.5px;font-weight:500}
.field-msg.error{color:#E53935}
/* Aviso tras envío */
.cform-notice{font-size:14px;line-height:1.55;border-radius:12px;padding:0;max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease,opacity 0.35s ease;opacity:0}
.cform-notice.success{background:#EDFDF4;color:#0A6640;border:1px solid #B7EDD0;padding:13px 16px;max-height:120px;opacity:1}
.cform-notice.fallback{background:#FFF8E6;color:#7A4F00;border:1px solid #F5DFA0;padding:13px 16px;max-height:120px;opacity:1}
.cform-notice a{color:inherit;font-weight:600}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
footer{padding:60px 0 44px;background:var(--ss-offblack);border-top:none;border-radius:40px 40px 0 0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:28px}
.footer-brand p{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.55;margin:14px 0 20px;max-width:280px}
.footer-stores{display:flex;gap:8px;flex-wrap:wrap}
.footer-store{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.85);padding:8px 13px;border-radius:9px;text-decoration:none;font-size:12.5px;font-weight:500;border:1px solid rgba(255,255,255,0.12);transition:background var(--duration-fast)}
.footer-store:hover{background:rgba(255,255,255,0.13)}
.footer-store svg{width:15px;height:15px;flex-shrink:0}
.footer-nav h4{font-family:var(--font-micro);font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin:0 0 14px}
.footer-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.footer-nav a{font-size:13.5px;color:rgba(255,255,255,0.6);text-decoration:none;font-weight:500}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:rgba(255,255,255,0.35)}
.footer-social{display:flex;gap:10px}
.footer-social a{display:flex;width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);align-items:center;justify-content:center;color:rgba(255,255,255,0.45);transition:color var(--duration-fast),background var(--duration-fast)}
.footer-social a:hover{background:rgba(255,255,255,0.08);color:#fff}
.footer-social a svg{width:14px;height:14px}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr;gap:28px}footer{padding:44px 0 32px}}

/* --------------------------------------------------------------------------
   16. Audience switcher (nav pill) — compartido por ambas páginas
   -------------------------------------------------------------------------- */
.audience-switch{display:flex;align-items:center;gap:3px;background:var(--ss-ink-100);border:1px solid var(--ss-ink-200);border-radius:var(--radius-pill);padding:4px}
.aud-pill{font-family:var(--font-micro);font-size:12px;font-weight:600;letter-spacing:0.04em;padding:6px 15px;border-radius:calc(var(--radius-pill) - 4px);text-decoration:none;color:var(--ss-ink-500);transition:background var(--duration-fast),color var(--duration-fast);white-space:nowrap}
.aud-pill:hover{color:var(--ss-offblack)}
.aud-pill.active{background:var(--ss-pure-white);color:var(--ss-offblack);box-shadow:0 1px 4px rgba(29,28,34,0.08)}
@media(max-width:880px){.audience-switch{display:none}}

/* --------------------------------------------------------------------------
   17. Crossover — teaser que enlaza a la otra página (fondo oscuro)
   -------------------------------------------------------------------------- */
.crossover{padding:clamp(40px,5vw,72px) 0;background:var(--ss-offblack);border-top:none}
.crossover-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.crossover-copy .eyebrow{color:var(--ss-cyan-500)}
.crossover-copy .eyebrow::before{background:var(--ss-cyan-500)}
.crossover-copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.6vw,36px);line-height:1.1;letter-spacing:-0.02em;color:#fff;margin:12px 0 0;max-width:520px}
.crossover-copy h2 b{font-weight:700}
@media(max-width:760px){.crossover-inner{flex-direction:column;align-items:flex-start}}

/* --------------------------------------------------------------------------
   18. Hero variante aprendiz (fondo oscuro, acento cyan)
   -------------------------------------------------------------------------- */
.hero-aprendiz{background:var(--ss-offblack)}
.hero-aprendiz .hero-watermark{color:var(--ss-cyan-500);opacity:0.05;right:-120px;top:-80px}
.hero-aprendiz .hero-tag{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.65)}
.hero-aprendiz .hero-h1{color:#fff}
.hero-aprendiz .hero-h1 .accent{color:var(--ss-cyan-500)}
.hero-aprendiz .hero-sub{color:rgba(255,255,255,0.62)}
.hero-aprendiz .hero-bg{background:radial-gradient(110% 80% at 100% 0%,rgba(3,197,251,0.18) 0%,rgba(27,105,255,0.12) 45%,rgba(29,28,34,0.5) 100%)}
.hero-aprendiz .hero-bg::before{background:radial-gradient(closest-side,rgba(3,197,251,0.22),transparent 65%)}
.hero-aprendiz .hero-bg::after{background-image:linear-gradient(to right,rgba(3,197,251,0.05) 1px,transparent 1px);background-size:80px 80px}
.hero-aprendiz .hero-shot{border-color:rgba(255,255,255,0.18)}
.hero-aprendiz .hero-shot-main{top:6%;width:68%;left:50%;transform:translateX(-50%);animation:float-s2 7s ease-in-out infinite}
.hero-aprendiz .hero-shot-secondary{display:none}

/* --------------------------------------------------------------------------
   19. Sección "Cómo funciona" — 3 pasos para el aprendiz
   -------------------------------------------------------------------------- */
.how-it-works{padding:clamp(44px,5vw,72px) 0;background:var(--ss-ink-100);border-top:none;border-radius:0}
.hiw-head{margin-bottom:48px}
.hiw-head .eyebrow{margin-bottom:16px}
.hiw-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-0.02em;color:var(--ss-offblack);margin:8px 0 12px}
.hiw-head h2 b{font-weight:700}
.hiw-head p{font-size:16px;line-height:1.65;color:var(--ss-ink-500);max-width:540px;margin:0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card{background:#fff;border:1px solid var(--ss-ink-150);border-radius:24px;padding:30px 26px;transition:transform 400ms var(--ease-standard),box-shadow 400ms var(--ease-standard),border-color 400ms var(--ease-standard)}
.step-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(3,197,251,0.09),0 3px 10px rgba(29,28,34,0.05);border-color:rgba(3,197,251,0.35)}
.step-num{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--ss-blue-050);color:var(--ss-roleno-blue);font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:20px;transition:background 300ms,color 300ms}
.step-card:hover .step-num{background:var(--ss-roleno-blue);color:#fff}
.step-card h3{font-size:17px;font-weight:600;letter-spacing:-0.012em;color:var(--ss-offblack);margin:0 0 10px}
.step-card p{font-size:14px;line-height:1.6;color:var(--ss-ink-500);margin:0}
@media(max-width:760px){.steps-grid{grid-template-columns:1fr;gap:14px}}

/* --------------------------------------------------------------------------
   20. CTA descarga de app (para aprendices)
   -------------------------------------------------------------------------- */
.app-cta{padding:clamp(48px,6vw,88px) 0;background:var(--ss-pure-white);border-top:1px solid var(--ss-ink-150)}
.app-cta-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.app-cta-copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.07;letter-spacing:-0.022em;color:var(--ss-offblack);margin:8px 0 16px}
.app-cta-copy h2 b{font-weight:700}
.app-cta-copy p{font-size:16px;line-height:1.65;color:var(--ss-ink-500);margin:0 0 32px;max-width:460px}
.app-stores-large{display:flex;gap:32px;flex-wrap:nowrap;align-items:center}
.store-badge-lg{display:inline-flex;align-items:center;gap:10px;background:var(--ss-offblack);color:#fff;padding:9px 14px;border-radius:12px;text-decoration:none;transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast);border:1px solid rgba(255,255,255,0.06)}
.store-badge-lg:hover{transform:translateY(-3px);background:#000}
.store-badge-lg svg{width:20px;height:20px;flex-shrink:0}
.store-badge-lg .bs{font-family:var(--font-micro);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;opacity:0.6;line-height:1;font-weight:600;display:block}
.store-badge-lg .bn{font-family:var(--font-display);font-size:14px;font-weight:500;line-height:1.2;margin-top:3px;display:block}
.app-cta-visual{display:flex;justify-content:center;align-items:center;position:relative;border-radius:32px;padding:32px 20px;background:radial-gradient(ellipse 90% 80% at 50% 60%,rgba(3,197,251,0.12) 0%,rgba(27,105,255,0.07) 45%,transparent 80%)}
.app-cta-visual img{width:100%;max-width:320px;filter:drop-shadow(0 24px 56px rgba(29,28,34,0.18)) drop-shadow(0 6px 16px rgba(3,197,251,0.12));animation:float-s2 6s ease-in-out infinite}
#descarga .app-cta-visual img{max-width:200px}
@media(max-width:860px){.app-cta-layout{grid-template-columns:1fr}}
@media(max-width:560px){.app-stores-large{gap:8px}.store-badge-lg{flex:1 1 0;padding:12px 14px}.store-badge-lg .bn{font-size:14px}}

/* ── QR store badges ─────────────────────────────────────── */
.store-qr-pair{display:flex;flex-direction:row;align-items:center;gap:10px}
.store-qr-img{width:80px;height:80px;border-radius:2px;border:1px solid rgba(0,0,0,0.09);display:block;background:#fff;object-fit:contain;flex-shrink:0}
@media(max-width:860px){.store-qr-img{display:none}}