/* ═══════════════════════════════════════════════════════════════════════
   WELCOME · CAPA MOBILE-FIRST 2026
   Se carga DESPUÉS de welcome.css y welcome-landing.css.
   TODO vive dentro de media queries (max-width / hover:none): el diseño
   de escritorio queda intacto. Objetivo: navegación, jerarquía y zonas de
   toque pensadas para el pulgar, con menos fatiga de scroll y foco en la
   conversión (inscripción y pago).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1 · BARRA DE ACCIÓN INFERIOR (zona del pulgar) — visible solo en teléfono
   ───────────────────────────────────────────────────────────────────────── */
.mobile-cta{display:none}

@media(max-width:767px){
    .mobile-cta{
        display:flex;gap:10px;
        position:fixed;left:0;right:0;bottom:0;z-index:90;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));
        background:rgba(6,10,24,.88);
        -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
        border-top:1px solid rgba(255,255,255,.10);
        box-shadow:0 -12px 34px -14px rgba(0,0,0,.6);
        transform:translateY(130%);
        transition:transform .42s cubic-bezier(.22,1,.36,1);
    }
    .mobile-cta.show{transform:none}
    .mcta-btn{
        flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
        height:52px;border-radius:100px;
        font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:.98rem;
        white-space:nowrap;letter-spacing:-.1px;-webkit-tap-highlight-color:transparent;
        position:relative;overflow:hidden;
    }
    .mcta-btn i{font-size:1.02rem}
    .mcta-primary{background:linear-gradient(120deg,#1D4ED8 0%,#4F46E5 45%,#7C3AED 100%);color:#fff;box-shadow:0 10px 24px -8px rgba(79,70,229,.7)}
    .mcta-pay{background:linear-gradient(120deg,#FBBF24 0%,#F59E0B 50%,#EA580C 100%);color:#2A1500;box-shadow:0 10px 24px -8px rgba(245,158,11,.6)}
    .mcta-btn:active{transform:scale(.97)}

    /* Deja aire bajo el contenido para que la barra no lo tape */
    body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

    /* Reubica flotantes por encima de la barra (a11y ← izq, chat → der) */
    .pchat-fab{bottom:calc(84px + env(safe-area-inset-bottom))!important}
    .pchat-panel{
        bottom:calc(84px + env(safe-area-inset-bottom))!important;
        max-height:min(560px,calc(100vh - 190px))!important;
    }
    .a11y-fab{bottom:calc(84px + env(safe-area-inset-bottom))!important}
    .a11y-panel{bottom:calc(150px + env(safe-area-inset-bottom))!important}

    /* El botón "subir" estorba en el pulgar teniendo barra + nav fijos */
    #totop{display:none!important}
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · RITMO VERTICAL — acorta la página y reduce la fatiga de scroll
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
    .wrap{padding:0 18px}
    .sec{padding:56px 0}
    .sec-tight{padding:44px 0}
    .sec-head{margin-bottom:34px}
    .sec-head p{font-size:.98rem}
    .cta{padding:0 0 56px}
    .catalog{padding-top:34px}
    .cat-section{margin-bottom:34px}
    footer{padding-top:46px}
}
@media(max-width:400px){
    .wrap{padding:0 15px}
}

/* ─────────────────────────────────────────────────────────────────────────
   3 · CTAs PRIMARIAS A ANCHO COMPLETO (tap targets grandes, jerarquía clara)
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
    .hero-cta{flex-direction:column;gap:11px;width:100%}
    .hero-cta .btn{width:100%}

    .cta-btns{flex-direction:column;gap:11px}
    .cta-btns .btn{width:100%}

    .eg-actions .btn,
    .eg-hero-cta .btn,
    .inst-hero-cta .btn,
    .ip-hero-cta .btn,
    .ip-final-cta .btn,
    .ip-venue-cta .btn,
    .pf-right .btn{flex:1 1 100%;width:100%}

    /* Botón grande: cómodo pero sin exagerar altura */
    .btn-lg{padding:15px 26px;font-size:1rem}
    .btn{min-height:46px}
}

/* ─────────────────────────────────────────────────────────────────────────
   4 · HERO — más compacto, titular legible, señales de confianza ordenadas
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
    .hero-slide .hero-grid{padding:40px 0 82px;gap:28px}
    .hero h1{font-size:clamp(1.95rem,7.6vw,2.5rem);letter-spacing:-.7px;line-height:1.1;margin-bottom:16px}
    .hero p.lead{font-size:1rem;line-height:1.6;margin-bottom:24px}
    .eyebrow{margin-bottom:16px;padding:7px 14px;font-size:.72rem}

    .hero-trust{gap:9px 16px;font-size:.82rem}
    .hero-trust div{gap:8px}

    .hero-card,.hero-feature{padding:22px}
    .hero-card h3{margin-bottom:14px}
    .hc-row{padding:13px 0;gap:13px}
    .hf-badge{width:48px;height:48px;font-size:1.2rem;margin-bottom:14px}

    /* Zona de toque cómoda para los puntos del carrusel */
    .hero-dots{gap:14px}
    .hero-dot{position:relative}
    .hero-dot::after{content:"";position:absolute;inset:-13px}
}

/* ─────────────────────────────────────────────────────────────────────────
   5 · NAV — hamburguesa y "Paga aquí" con zona de toque ≥44px
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
    .nav-toggle{
        display:grid;place-items:center;
        width:44px;height:44px;padding:0;border-radius:12px;font-size:1.35rem;
        -webkit-tap-highlight-color:transparent;
    }
    .nav .wrap{gap:12px}
}
@media(max-width:520px){
    .nav-actions{gap:8px}
    .nav-actions .btn-pay{width:46px;height:46px;padding:0;border-radius:50%}
    .nav-actions .btn-pay i{font-size:1.05rem}
    .brand-mark{width:38px;height:38px}
    .brand-txt b{font-size:.96rem}
}

/* Drawer: respeta el notch superior y agranda el cierre */
@media(max-width:1080px){
    .drawer{padding-top:max(24px,calc(env(safe-area-inset-top) + 18px))}
    .drawer-close{width:44px;height:44px}
    .drawer a.d-link,.d-toggle{padding-top:15px;padding-bottom:15px}
}

/* ─────────────────────────────────────────────────────────────────────────
   6 · FRANJA DE ESTADÍSTICAS — compacta en 2×2
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
    .stats{margin-top:-42px}
    .stat{padding:22px 12px}
    .stat-ico{width:42px;height:42px;margin-bottom:11px}
    .stat span{font-size:.68rem;letter-spacing:.3px}
}

/* ─────────────────────────────────────────────────────────────────────────
   7 · CATÁLOGO / PROGRAMAS — buscador y tarjetas cómodas al tacto
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
    .finder{border-radius:20px;padding:12px;gap:10px}
    .finder-search{flex:1 1 100%}
    .finder-search input{padding-top:14px;padding-bottom:14px}
    .finder-filters{width:100%}
    .chips,.chipset{width:100%}
    .chip{padding:11px 16px;font-size:.85rem}

    .prog-grid{grid-template-columns:1fr;gap:14px}
    .prog,.pcard{padding:20px}
    .pcard-cta{padding:13px}

    .cat-section-head{gap:12px;padding-bottom:14px;margin-bottom:16px}
    .cat-section-ico{width:44px;height:44px;font-size:1.1rem}
    .cat-section-t h3{font-size:1.2rem}
}

/* ─────────────────────────────────────────────────────────────────────────
   8 · ENCABEZADOS DE PÁGINA — sin parallax (roto en iOS) y más ajustados
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:900px){
    .page-header{
        background-attachment:scroll;
        padding:108px 20px 54px;min-height:288px;
    }
    .page-header p{font-size:1.02rem}
    .ph-quick{gap:8px}
    .ph-pill{padding:10px 15px;font-size:.84rem}
}

/* ─────────────────────────────────────────────────────────────────────────
   9 · GRIDS DE TARJETAS — una columna y separación cómoda
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:560px){
    .steps,.feats,.venues,.testimonials-grid{grid-template-columns:1fr;gap:16px}
    .step,.feat,.venue{padding:24px 22px}
    .testimonial-body{padding:22px}
    .eg-panel-main{padding:30px 22px}
    .eg-panel-side{padding:26px 22px}
    .eg-hero-in{padding:100px 20px 44px}
    .ip-hero-in{padding:104px 20px 44px}
    .ip-final-in{padding:64px 20px}
    .ip-venue-media img,.ip-why-media img{min-height:240px}
}

/* Footer: centrado y respirado en pantallas muy estrechas */
@media(max-width:520px){
    .f-grid{gap:28px;text-align:center}
    .f-brand p{margin-left:auto;margin-right:auto}
    .f-col a,.f-col span{justify-content:center}
    .f-bottom{flex-direction:column;text-align:center;gap:12px}
}

/* ─────────────────────────────────────────────────────────────────────────
   10 · TÁCTIL — anula estados :hover "pegajosos" que saltan al tocar
   (en escritorio no aplica: hover:hover queda intacto)
   ───────────────────────────────────────────────────────────────────────── */
@media(hover:none){
    .prog:hover,.pcard:hover,.step:hover,.feat:hover,.venue:hover,
    .testimonial:hover,.tcard:hover,.path-card:hover,.eg-svc:hover,
    .eg-sede:hover,.ip-mode:hover,.ip-why-item:hover,.ilcard:hover,
    .method:hover,.tcar-nav:hover,.btn:hover,.step:hover,
    .stat:hover .stat-ico{transform:none}

    .prog:hover img,.pcard:hover img,
    .testimonial:hover .testimonial-img img,.ipg:hover img,
    .ip-mode:hover .ip-mode-img img,.ilcard:hover .ilcard-media img,
    .campus-showcase:hover .campus-img,.platform-showcase:hover .platform-img,
    .ip-venue-media:hover img{transform:none}

    /* El realce de foco sí importa; el "hover-fill" del CTA de tarjeta se
       reserva a :active para que no quede pegado tras el toque */
    .prog:hover .btn-outline,.pcard:hover .pcard-cta{background:inherit;color:inherit}
    .pcard:active .pcard-cta{background:var(--brand-grad);color:#fff;border-color:transparent}
}

/* Sin destello gris al tocar enlaces/botones (usamos :active propios) */
@media(max-width:900px){
    a,button,.btn,.chip,.mcta-btn,.d-link,.pcard,.prog{-webkit-tap-highlight-color:transparent}
}