/* ============================================
   MOBILE.CSS — overrides para mobile/tablet
   Cargado por todas las páginas públicas.
   ============================================ */

/* ================ GLOBALES (todos los breakpoints) ================ */

/* Evitar zoom automático de Safari al rotar dispositivo */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevenir scroll horizontal por elementos que se salgan */
body {
    overflow-x: hidden;
}

/* Tap highlight más sobrio (azul flash horrible por defecto) */
a, button, [role="button"], .nav-burger, .nav-dropdown-trigger {
    -webkit-tap-highlight-color: rgba(45, 74, 122, 0.18);
}

/* Touch action: permitir pinch-zoom pero evitar double-tap zoom delay en botones */
button, .hero-cta, .cta-button, .plan-button, .link-cta {
    touch-action: manipulation;
}

/* SVG/img defaults para no romper layout */
img { max-width: 100%; height: auto; }

/* Logout mobile-only — oculto en desktop */
.nav-mobile-logout { display: none; }


/* Hamburger button (oculto en desktop) */
.nav-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 250;
    position: relative;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}
.nav-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-burger.is-open span:nth-child(2) {
    opacity: 0;
}
.nav-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    /* Show hamburger */
    .nav-burger { display: flex !important; }

    /* Nav top más compacto en mobile (más espacio para contenido)
       — incluye .navbar del dashboard */
    body > nav,
    nav.recursos-nav,
    nav.navbar {
        height: 56px !important;
    }
    body > nav .nav-brand,
    nav.recursos-nav .nav-brand,
    nav.navbar .nav-brand {
        font-size: 0.78rem !important;
    }
    body > nav .nav-brand img,
    nav.recursos-nav .nav-brand img,
    nav.navbar .nav-brand img {
        height: 20px !important;
        width: 20px !important;
    }

    /* Compensar nav fijo más pequeño */
    body > nav .nav-links,
    nav.recursos-nav .nav-links,
    nav.navbar .nav-links {
        top: 56px !important;
    }

    /* Public + dashboard navs — empujar hamburger a la derecha */
    body > nav,
    nav.recursos-nav,
    nav.navbar {
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0 16px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 100;
    }

    /* Dashboard: ocultar nav-user (el logout va dentro del overlay como nav-mobile-logout) */
    nav.navbar .nav-user {
        display: none !important;
    }
    /* En desktop el nav-mobile-logout está oculto; en mobile aparece dentro del overlay */
    .nav-mobile-logout {
        color: var(--copper, #C26B3C) !important;
        font-weight: 500;
        opacity: 1 !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* Dashboard: padding del main para compensar nav fijo de 56px */
    body main.container,
    body main {
        padding-top: 72px !important;
    }

    /* Mobile nav overlay — full-bleed slide-in panel (COMPACTO: cabe todo sin scroll) */
    body > nav .nav-links,
    nav.recursos-nav .nav-links,
    nav.navbar .nav-links {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0E1729;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 22px 32px !important;
        gap: 0 !important;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 200;
        flex: none !important;
    }
    body > nav .nav-links.is-open,
    nav.recursos-nav .nav-links.is-open,
    nav.navbar .nav-links.is-open {
        transform: translateX(0);
    }

    /* Bloquear scroll del body cuando el menú está abierto */
    body.nav-mobile-open {
        overflow: hidden;
    }

    /* Top-level links — compactos */
    body > nav .nav-links > a,
    nav.recursos-nav .nav-links > a,
    nav.navbar .nav-links > a {
        color: white !important;
        font-family: "Space Grotesk", system-ui, sans-serif !important;
        font-size: 0.98rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        padding: 11px 2px !important;
        border-bottom: none;
        border-radius: 0 !important;
        background: transparent !important;
        opacity: 0.92;
        display: block;
    }
    body > nav .nav-links > a:hover,
    nav.recursos-nav .nav-links > a:hover,
    nav.navbar .nav-links > a:hover {
        color: white !important;
        opacity: 1;
        background: transparent !important;
    }

    /* Dropdowns en mobile: ACCORDION — colapsado por default, expand con tap */
    .nav-dropdown {
        display: block !important;
        width: 100%;
        padding: 0 !important;
        border-bottom: none;
    }
    .nav-dropdown::after { display: none; }
    .nav-dropdown-trigger {
        color: white !important;
        font-family: "Space Grotesk", system-ui, sans-serif !important;
        font-size: 0.98rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        padding: 11px 2px !important;
        pointer-events: auto !important;
        cursor: pointer;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        text-align: left;
        opacity: 0.92;
        gap: 8px !important;
    }
    .nav-dropdown.is-expanded .nav-dropdown-trigger {
        color: white !important;
        opacity: 1;
    }
    /* Caret visible en mobile como chevron */
    .nav-dropdown-caret {
        display: inline-block !important;
        font-size: 0.85em !important;
        opacity: 0.5 !important;
        transition: transform 0.2s ease !important;
    }
    .nav-dropdown.is-expanded .nav-dropdown-caret {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    /* Menu colapsado por default */
    .nav-dropdown-menu {
        display: none !important;
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 8px 12px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
    .nav-dropdown.is-expanded .nav-dropdown-menu {
        display: block !important;
    }
    .nav-dropdown-item {
        color: white !important;
        background: transparent !important;
        font-family: "Space Grotesk", system-ui, sans-serif !important;
        font-size: 0.92rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        padding: 8px 2px !important;
        border-radius: 0 !important;
        display: block !important;
        justify-content: flex-start !important;
        opacity: 0.78;
    }
    .nav-dropdown-item:hover {
        background: transparent !important;
        color: white !important;
        opacity: 1;
    }
    .nav-dropdown-sep { display: none !important; }
    .nav-dropdown-cta {
        color: var(--copper, #C26B3C) !important;
        font-weight: 500;
        opacity: 1 !important;
        padding-top: 10px !important;
    }
    .nav-badge { display: none !important; }

    /* PADDING reducido en bandas full-bleed */
    .hero,
    .page-header,
    .tres-salidas,
    .manifesto,
    .cta-section,
    .cta-final {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .hero-inner {
        padding: 100px 0 60px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
        max-width: 100% !important;
    }
    /* Forzar word-wrap en todos los headings y párrafos de bandas oscuras */
    .hero h1,
    .hero p,
    .page-header h1,
    .page-header > p,
    .tres-salidas h2,
    .manifesto-quote,
    .cta-section h2,
    .cta-final h2 {
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    /* Mockup window — no rebasar el viewport */
    .hero-visual,
    .hero-visual .mockup-window,
    .mockup-window {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .mockup-typing {
        overflow: hidden !important;
    }
    .mockup-typing span {
        max-width: 100% !important;
    }
    .page-header {
        padding-top: 110px !important;
        padding-bottom: 60px !important;
    }
    .page-header h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
    .page-header > p {
        font-size: 1rem !important;
    }
    .tres-salidas {
        padding-top: 56px !important;
        padding-bottom: 72px !important;
    }
    .tres-salidas h2 {
        font-size: 1.4rem !important;
    }
    .tres-salidas-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .manifesto {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    .manifesto-quote {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }
    .cta-section,
    .cta-final {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    .cta-section h2,
    .cta-final h2 {
        font-size: 1.45rem !important;
    }

    /* Hero del landing — split → stack */
    .hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
    }
    .hero p {
        font-size: 1rem !important;
    }
    .hero-visual .mockup-window {
        transform: none !important;
        max-width: 480px;
        margin: 0 auto;
    }

    /* Mockup window — escala/padding en mobile */
    .mockup-window {
        max-width: 100% !important;
    }
    .mockup-body {
        padding: 16px 16px 18px !important;
    }
    .mockup-results li {
        font-size: 0.82rem !important;
    }
    .mockup-field-value {
        font-size: 0.85rem !important;
    }

    /* Casos de uso & Capacidades & Pricing — single column */
    .perfiles-grid,
    .capacidades-grid,
    .pricing-cards,
    .plans {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .plans { gap: 16px !important; }

    /* Modulos list */
    .modulos-list a {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 16px 18px !important;
    }
    .modulos-list .modulo-arrow { display: none; }

    /* TOC chips en /producto */
    .producto-toc {
        padding: 0 20px 28px !important;
        gap: 6px !important;
    }
    .producto-toc a {
        font-size: 0.6rem !important;
        padding: 7px 10px !important;
    }

    /* /producto módulos */
    .modulo {
        padding: 48px 20px !important;
    }
    .modulo-header {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .modulo-title h2 {
        font-size: 1.4rem !important;
    }
    .modulo-body {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* /nosotros prose sections */
    .prose-section {
        padding: 40px 20px !important;
    }
    .prose-section h2 {
        font-size: 1.4rem !important;
    }
    .approach-item {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 20px 0 !important;
    }

    /* Footer 4-col en mobile */
    .footer-grid,
    .footer-public .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
    .footer-brand,
    .footer-public .footer-brand {
        grid-column: span 2 !important;
    }
    footer,
    footer.footer-public {
        padding: 48px 20px 32px !important;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* ROI stat line */
    .roi-stat-line {
        padding: 0 20px 60px !important;
    }
    .roi-stat-line p {
        font-size: 1rem !important;
    }

    /* Touch targets — botones más grandes */
    .hero-cta,
    .cta-button,
    .plan-button {
        padding: 16px 28px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 480px) {
    .producto-toc { flex-wrap: wrap; justify-content: center; }
    .producto-toc a { flex: 0 0 auto; }
}