/* Mentora — mobile/tablet overrides. Only media queries: desktop is untouched. */
.mobile-menu{display:none}
@media (max-width: 860px){
html,body{overflow-x:hidden;overflow-x:clip}.container{padding:0 22px}
/* NAV + menu */
.navbar{padding:12px 0}
.navbar.on-dark .mobile-toggle{background:rgba(255,255,255,0.1);color:#fff}
.mobile-toggle{color:var(--text-dark)}
.mobile-menu{display:flex;flex-direction:column;gap:6px;position:fixed;top:64px;left:14px;right:14px;z-index:99;background:#fff;border-radius:20px;padding:14px;box-shadow:0 24px 60px rgba(31,18,53,0.18);border:1px solid rgba(31,18,53,0.06);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a:not(.btn){padding:14px 16px;border-radius:12px;font-size:16px;font-weight:600;color:var(--text-dark)}
.mobile-menu a:not(.btn):active{background:var(--purple-50)}
.mobile-menu .btn{margin-top:6px;padding:16px}
/* HERO */
/* Mismo encuadre que antes (120vw desplazado -30vw) pero recortado al viewport: sin scroll horizontal */
.hero-bg{width:90vw;height:120vw;right:0;top:20px;opacity:.45;background-size:120vw 120vw;background-position:left top}
.hero{padding:112px 0 24px}
.hero-grid{gap:0}
.hero-visual{display:none}
.display-hero{font-size:clamp(42px,11.5vw,64px)}
.hero-title{margin-bottom:8px}
.hero-actions{margin:24px 0 8px}
.hero-meta:empty,.hero-meta span:empty{display:none}
/* VIDEO */
.video-section{padding:16px 0 0}
.video-frame{border-radius:var(--radius-md)}
.video-play{width:64px;height:64px;margin:-32px 0 0 -32px}
.video-play svg{width:26px;height:26px;margin-left:3px}
/* SECTION 2 — plataforma */
.section{padding:56px 0}
.features-grid{display:flex;flex-direction:column;gap:8px}
.features-grid>.phone-stack{order:2}
/* El PNG del movil tiene ~10% de aire transparente arriba y abajo: margen negativo para pegar la siguiente seccion */
.features-light{padding-bottom:0;z-index:3}
.phone-stack{min-height:0;width:100%;max-width:420px;margin:0 auto -40px;padding:8px 0 0}
/* El telefono esta algo a la izquierda dentro del PNG: left:3% lo centra visualmente */
.phone-img{width:88%;max-width:360px;transform:none;margin:0 auto;left:3%;animation-name:float-phone-m}
.phone-bg-shapes{width:56%;left:7%;top:26%}
.phone-bubble--top{top:6%;left:4%;font-size:11px;padding:12px 20px 24px}
.phone-bubble--bottom{top:auto;bottom:24%;right:4%;font-size:13px;padding:12px 18px}
.feature-mini-cards{margin-top:24px}
.lede{font-size:16px;white-space:normal}
/* SECTION 3 — mentores (oscuro) */
.features-dark{display:flex;flex-direction:column;padding:110px 0 110px;margin-top:-20px}
.features-dark-bg{clip-path:polygon(0 56px,100% 0,100% calc(100% - 56px),0 100%)}
.features-dark>.container{order:1}
.features-dark::before{right:0}
.features-dark::after,.features-learn::before{left:0}
.phone-stack-dark{order:2;position:relative;top:auto;right:auto;width:100%;max-width:420px;margin:24px auto 0;padding:24px 22px 0}
.movil2-img{width:88%;max-width:360px;margin:0 auto}
.movil2-bubble{height:60px;padding:0 16px 14px}
.movil2-bubble>span{font-size:11px}
.movil2-bubble--top{top:10%;left:6px;width:200px}
.movil2-bubble--bottom{top:auto;bottom:20%;right:6px;width:200px;padding:14px 16px 0}
.dark-grid{min-height:0;gap:0}
.dark-grid>div:nth-child(2){display:none}
.feature-list{grid-template-columns:1fr;gap:20px;margin-top:28px}
.dark-cta{margin-top:40px}
.dark-cta .btn{width:100%}
/* SECTION 4 — visión */
.features-learn{padding:64px 0 24px}
.learn-grid{display:flex;flex-direction:column;gap:8px}
.learn-grid>.phones-overlap{order:2}
.phones-overlap{height:auto;width:100%;max-width:420px;margin:0 auto;padding-top:56px}
.movil3-img{width:88%;max-width:360px;margin:0 auto}
.movil3-bubble--top{top:0;right:4px;width:210px}
.learn-features{gap:22px;margin-top:28px}
.learn-feature{align-items:flex-start;gap:16px}
.learn-feature h4{font-size:18px}
/* SECTION 5 — pasos */
.steps-section{padding:48px 0 0}
.steps-header{margin-bottom:32px}
.steps-section::before{top:150px;clip-path:polygon(0 56px,100% 0,100% 100%,0 100%)}
.steps-section .steps-grid{margin-top:72px;padding-bottom:72px}
.steps-grid{grid-template-columns:1fr;gap:16px}
.step-card{padding:26px 22px}
/* FOOTER */
.footer{padding:24px 0 32px}
.footer-top{grid-template-columns:1fr;gap:28px;padding:40px 0 28px}
.footer-cols{justify-self:start;gap:32px}
/* MODALS + TWEAKS */
.modal-card{padding:40px 22px 28px}
.modal-title{font-size:23px}
.tweaks-panel{width:auto;left:12px;right:12px;bottom:12px}
}
@keyframes float-phone-m{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width: 480px){
.container{padding:0 18px}
.hero-actions{flex-direction:column}
.hero-actions .btn{width:100%}
.movil2-bubble--top,.movil2-bubble--bottom,.movil3-bubble--top{width:180px}
.movil2-bubble>span{font-size:10px;letter-spacing:.04em}
.footer-cols{grid-template-columns:1fr 1fr;width:100%}
}