/**
 * Co-Dream — Responsive layer (mobile-first)
 * Breakpoints: sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536
 * Carga después de styles.css
 */

:root {
    --hero-blocks-max: 850px;
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;
    --container-max: 80rem; /* ~max-w-7xl */
    --space-page: clamp(1rem, 3vw + 0.5rem, 5rem);
    --space-section: clamp(2.5rem, 5vw + 1rem, 5rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-h1: clamp(1.75rem, 1.15rem + 2.8vw, 3rem);
    --text-h2: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
    --text-h3: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    --touch-min: 44px;
}

/* --- Fase 1: contenedores y ultrawide --- */
.codream-container,
.section-block-inner,
.page-header-content,
.plans-container,
.grid-container,
.hof-carousel-wrap,
.footer-grid {
    max-width: min(var(--container-max), 100%);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1536px) {
    header,
    body.page-beneficios header,
    body.page-hero-tight header {
        padding-left: max(var(--space-page), calc((100vw - var(--container-max)) / 2));
        padding-right: max(var(--space-page), calc((100vw - var(--container-max)) / 2));
    }
    .hero-section,
    .section-block,
    .plans-section,
    footer {
        padding-left: max(var(--space-page), calc((100vw - var(--container-max)) / 2));
        padding-right: max(var(--space-page), calc((100vw - var(--container-max)) / 2));
    }
}

/* Tipografía fluida (Fase 3) */
body {
    font-size: var(--text-base);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
.page-header h1 { font-size: var(--text-h1); }

/* Grid catálogo / muro: mobile 1 → tablet 2 → laptop 3+ */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    padding-left: clamp(0.75rem, 3vw, 1.25rem);
    padding-right: clamp(0.75rem, 3vw, 1.25rem);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .banner-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px;
    }
    .item-main { grid-row: 1 / 3; grid-column: 1; }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .impacto-social-grid,
    .causes-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .banner-grid {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 200px 200px;
    }
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .grid-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Hero compacto móvil */
@media (max-width: 639px) {
    .hero-section { padding: 1.25rem 1rem; }
    .banner-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(160px, 42vw) 120px 120px;
        margin-bottom: 1.5rem;
    }
    .progress-container.progress-hero { padding: 1rem; }
    .plans-container { flex-direction: column; align-items: center; }
    .plan-card { width: 100%; max-width: 22rem; }
}

/* Bloques hero (progreso, stats, fondo comunitario): mismo ancho en responsive */
@media (max-width: 767px) {
    .hero-section .progress-container,
    .hero-section .stats-grid,
    .hero-section .ticker-bar {
        width: 100%;
        max-width: var(--hero-blocks-max, 850px);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .hero-section .ticker-bar {
        margin-bottom: 2rem;
    }
    .social-proof-badge {
        left: max(1.25rem, calc(50% - var(--hero-blocks-max, 850px) / 2));
        right: auto;
        width: min(var(--hero-blocks-max, 850px), calc(100vw - 2.5rem));
        max-width: min(var(--hero-blocks-max, 850px), calc(100vw - 2.5rem));
    }
}

/* Home: causas sociales ↔ Wall of Fame — mismo ritmo que secciones superiores */
@media (max-width: 767px) {
    .impacto-social-section.section-block,
    .hall-of-fame-section.section-block {
        padding: 20px;
    }
    #impacto-social-section .section-cta {
        scroll-margin-bottom: 5rem;
    }
}

/* --- Fase 2: scroll lock global --- */
html.modal-scroll-locked,
body.modal-scroll-locked {
    overflow: hidden !important;
    overflow-x: hidden !important;
    max-width: 100vw;
    touch-action: none;
}
body.modal-scroll-locked {
    touch-action: none;
}
body.modal-scroll-locked .modal-overlay,
body.modal-scroll-locked .academia-modal,
body.modal-scroll-locked .impacto-modal,
body.modal-scroll-locked .impacto-modal .impacto-modal-wrapper,
body.modal-scroll-locked .welcome-modal-overlay,
body.modal-scroll-locked .codream-confirm-overlay,
body.modal-scroll-locked .codream-success-overlay {
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modales: bottom sheet móvil, centrado desktop */
@media (max-width: 767px) {
    .modal-overlay:not(#login-modal):not(#checkout-modal),
    .codream-confirm-overlay,
    .codream-success-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .modal-overlay:not(#login-modal):not(#checkout-modal) .modal,
    .codream-confirm-modal,
    .codream-success-modal,
    .academia-upsell-card,
    #modal-nueva-propuesta .modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: min(92dvh, 720px) !important;
        overflow-y: auto !important;
        animation: codream-sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #login-modal.modal-overlay,
    #checkout-modal.modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    #login-modal .modal,
    #checkout-modal .modal {
        width: 100% !important;
        max-width: 100% !important;
        min-height: min(100dvh, 100%) !important;
        max-height: 100dvh !important;
        border-radius: 20px 20px 0 0 !important;
        padding-top: max(1.25rem, env(safe-area-inset-top)) !important;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
        animation: codream-sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .welcome-modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    }
    .welcome-modal-card {
        border-radius: 16px !important;
        width: 100% !important;
        max-width: min(100%, 640px) !important;
        max-height: min(90dvh, 720px) !important;
        overflow-y: auto !important;
        margin: auto !important;
    }

    /* Upsell academia: bottom sheet (no aplica al modo cine) */
    #modal-upsell.academia-modal-upsell {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Modo cine — paridad index / beneficios: viewport completo + scroll interno */
    #modal-cine.academia-modal.academia-modal-cine {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        z-index: 10050 !important;
    }

    #modal-cine .academia-cine-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-width: 0;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #modal-cine .academia-cine-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, auto) auto;
        gap: 0;
        padding: 12px;
        padding-top: max(56px, env(safe-area-inset-top, 0px));
        min-height: min-content;
        min-width: 0;
        overflow: visible;
    }

    #modal-cine .academia-cine-video-col {
        padding-right: 0;
        padding-bottom: 12px;
        flex-shrink: 0;
        min-height: 0;
    }

    #modal-cine .academia-cine-video-col .cine-video-ratio {
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 16/9;
        max-height: 42vh;
        min-height: 160px;
    }

    #modal-cine .academia-cine-playlist-col {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 16px;
        border-radius: 10px;
        overflow: visible;
    }

    #modal-cine .cine-playlist {
        flex: 0 0 auto;
        overflow: visible;
    }

    #modal-cine .academia-cine-close {
        top: max(12px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    body.academia-cine-open .dream-os-floating-wrap {
        visibility: hidden;
        pointer-events: none;
    }

    /* Modal impacto causa — scroll completo hasta el CTA */
    #modal-impacto.impacto-modal {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        z-index: 10050 !important;
    }

    #modal-impacto .impacto-modal-wrapper,
    #modal-impacto .academia-cine-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-width: 0;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(160px, calc(120px + env(safe-area-inset-bottom, 0px)));
        box-sizing: border-box;
    }

    #modal-impacto .impacto-grid.academia-cine-grid {
        height: auto !important;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, auto) auto;
        gap: 0;
        padding: 12px;
        padding-top: max(56px, env(safe-area-inset-top, 0px));
        min-height: min-content;
        min-width: 0;
        overflow: visible;
    }

    #modal-impacto .impacto-col-izq.academia-cine-video-col {
        padding-right: 0;
        padding-bottom: 12px;
        flex-shrink: 0;
        min-height: 0;
    }

    #modal-impacto .impacto-col-izq .cine-video-ratio {
        padding-bottom: 0;
        height: auto;
        aspect-ratio: 16/9;
        max-height: 42vh;
        min-height: 160px;
    }

    #modal-impacto .impacto-col-der.academia-cine-playlist-col {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 16px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        border-radius: 10px;
        overflow: visible;
    }

    #modal-impacto .impacto-cta-seleccionar {
        flex-shrink: 0;
        margin-top: 16px;
        margin-bottom: 8px;
    }

    #modal-impacto .impacto-auditoria-link {
        flex-shrink: 0;
        margin-bottom: 12px;
    }

    body.impacto-modal-open .dream-os-floating-wrap {
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes codream-sheet-up {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .modal-overlay,
    .codream-confirm-overlay,
    .codream-success-overlay,
    .welcome-modal-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* --- Fase 4: áreas táctiles --- */
@media (max-width: 767px) {
    .btn-primary,
    .btn-outline,
    .btn-cta,
    .btn-cta-link,
    .btn-login,
    .btn-wallet,
    .checkout-payment-btn,
    .plan-card .btn-primary,
    .nav-toggle,
    .modal-close-btn,
    .welcome-modal-close,
    .academia-cine-close,
    .codream-confirm-btn,
    .codream-success-close,
    .social-proof-close {
        min-height: var(--touch-min);
        min-width: var(--touch-min);
    }
    .nav-links-drawer a {
        min-height: var(--touch-min);
    }
}

/* Hover solo en dispositivos con puntero (Fase 4) */
@media (hover: none) {
    .banner-item:hover,
    .plan-card:hover,
    .crecimiento-card:hover,
    .causa-card:hover {
        transform: none;
    }
    .btn-primary:hover,
    .btn-outline:hover,
    .btn-login:hover,
    .btn-wallet:hover,
    .nav-links-desktop a:hover,
    .footer-socials a:hover {
        box-shadow: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled) {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
    .btn-primary:active:not(:disabled) {
        transform: translateY(0);
        filter: brightness(0.96);
    }
    .plan-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(20, 241, 149, 0.15);
    }
}

.btn-primary:disabled,
.btn-outline:disabled,
.checkout-payment-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* Inputs legibles iOS (≥16px evita zoom) */
@media (max-width: 767px) {
    input,
    select,
    textarea,
    .form-group input,
    .beneficios-search-input {
        font-size: max(16px, 1rem) !important;
    }
}

/* Toasts móvil: ancho completo inferior */
@media (max-width: 639px) {
    .codream-toast-container {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        max-width: none;
    }
}

/* --- Header sitio: 1 fila en desktop; hamburger si no cabe (≤1399px) --- */
:root {
    --bp-nav-compact: 1400px;
}

@media (min-width: 1400px) {
    header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: clamp(12px, 1.5vw, 24px);
        flex-wrap: nowrap;
    }
    .logo {
        grid-column: 1;
    }
    .nav-toggle {
        display: none !important;
    }
    .nav-links-desktop {
        grid-column: 2;
        display: flex !important;
        justify-content: center;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .header-actions {
        grid-column: 3;
        justify-self: end;
    }
}

@media (max-width: 1399px) {
    header {
        flex-wrap: nowrap;
        padding: 14px clamp(16px, 3vw, 40px);
        gap: 10px;
    }
    body.page-beneficios header,
    body.page-hero-tight header {
        padding: 14px clamp(16px, 3vw, 40px);
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        order: 10;
    }
    .nav-links-desktop {
        display: none !important;
    }
    .header-actions {
        order: 11;
        flex-shrink: 0;
    }
    .logo {
        order: 1;
        flex-shrink: 0;
    }

    .nav-links-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100%;
        height: 100dvh;
        background: var(--bg-card);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 24px 0 max(32px, env(safe-area-inset-bottom));
        gap: 0;
        z-index: 200;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
    }
    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-backdrop {
        display: block;
        pointer-events: none;
    }
    body.nav-open .nav-backdrop {
        pointer-events: auto;
        opacity: 1;
    }
    body.nav-open .nav-links-drawer {
        transform: translateX(0);
    }
    .nav-links-drawer a,
    .nav-links-drawer a:visited {
        margin-left: 0;
        padding: 16px 24px;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        box-sizing: border-box;
        text-decoration: none;
        color: var(--text-main);
        font-weight: 500;
    }
    .nav-links-drawer a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--accent-green);
    }
    .nav-links-drawer .btn-wallet {
        margin: 12px 24px 0;
        width: calc(100% - 48px);
        justify-content: center;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 1rem;
    }
    .nav-links-drawer .nav-close {
        margin: 0 24px 16px auto;
    }
}

@media (max-width: 768px) {
    .proponer-btn-wrap {
        text-align: center;
    }
    .proponer-btn-wrap .btn-proponer-causa {
        justify-content: center;
    }
    .btn-login-text {
        display: none;
    }
    .btn-login-chevron {
        display: none;
    }
}