/**
 * NubeLogica — Responsive
 */

/* ============================================
   TABLET (768px+)
   ============================================ */
@media (min-width: 768px) {
    :root {
        --container-pad: 2rem;
    }

    .hero__title {
        font-size: var(--text-5xl);
    }

    .section__title {
        font-size: var(--text-4xl);
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    :root {
        --container-pad: 2.5rem;
    }

    .hero__title {
        font-size: 3.5rem;
    }

    .section__title {
        font-size: var(--text-4xl);
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   MÓVIL (max 767px)
   ============================================ */
@media (max-width: 767px) {

    /* Nav */
    .nav__menu {
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--sp-4);
        gap: var(--sp-1);
        display: none;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - 65px);
        overflow-y: auto;
    }

    .nav__menu.active {
        display: flex;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        padding: var(--sp-3) var(--sp-2);
        width: 100%;
    }

    .nav__link--cta {
        margin-top: var(--sp-2);
        justify-content: center;
        width: 100%;
    }

    /* Dropdown móvil: siempre visible inline */
    .nav__dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--border);
        border-radius: 0;
        padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
        background: transparent;
        display: none;
    }

    .nav__dropdown.mobile-open {
        display: block;
    }

    .nav__link--dropdown {
        justify-content: space-between;
    }

    .nav__chevron {
        transition: transform var(--t);
    }

    .nav__chevron.rotated {
        transform: rotate(180deg);
    }

    /* Hero */
    .hero {
        padding: calc(var(--sp-12) + 65px) 0 var(--sp-12);
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

    .hero__title {
        font-size: 2.25rem;
    }

    .hero__subtitle {
        font-size: var(--text-base-size);
    }

    .hero__cta {
        flex-direction: column;
    }

    .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Services */
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* Why */
    .why__grid {
        grid-template-columns: 1fr;
    }

    /* Modular */
    .modular-layout {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    /* CTA Parallax — deshabilitar fixed en móvil (iOS no lo soporta bien) */
    .cta-parallax {
        background-attachment: scroll;
        padding: var(--sp-20) 0;
    }

    .cta-parallax__content {
        padding: var(--sp-8) var(--sp-4);
    }

    .cta-parallax__title {
        font-size: var(--text-2xl);
    }

    .cta-parallax__sub {
        font-size: var(--text-base-size);
    }

    /* CRM spotlight */
    .crm-spotlight__container {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }

    .crm-spotlight__stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .crm-spotlight__title {
        font-size: var(--text-3xl);
    }

    /* Process */
    .process__grid {
        grid-template-columns: 1fr 1fr;
    }

    .process__grid::before {
        display: none;
    }

    /* Cases carousel — botones más compactos en móvil */
    .cases-carousel__btn {
        width: 38px;
        height: 38px;
    }

    .cases-carousel__btn svg {
        width: 20px;
        height: 20px;
    }

    /* Two col */
    .two-col {
        grid-template-columns: 1fr;
    }

    .two-col--reverse {
        direction: ltr;
    }

    /* Footer */
    .footer__content {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-8);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Comparison table */
    .comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
        min-width: 560px;
    }

    /* Modules */
    .modules-grid {
        grid-template-columns: 1fr;
    }

    /* About values */
    .about-values {
        grid-template-columns: 1fr;
    }

    /* Process full */
    .process-full__timeline::before {
        left: 24px;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Filosofía pillars */
    .philosophy-pillars {
        grid-template-columns: 1fr !important;
    }

    /* Section title */
    .section__title {
        font-size: var(--text-2xl);
    }

    .page-hero__title {
        font-size: var(--text-3xl);
    }

    .cta-block__title {
        font-size: var(--text-3xl);
    }

    /* WhatsApp btn */
    .whatsapp-btn {
        bottom: var(--sp-5);
        right: var(--sp-5);
    }
}

/* ============================================
   PEQUEÑO MÓVIL (max 480px)
   ============================================ */
@media (max-width: 480px) {
    .crm-spotlight__stats {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .footer__content {
        grid-template-columns: 1fr;
    }

    .process__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   IMPRESIÓN
   ============================================ */
@media print {
    .header,
    .whatsapp-btn,
    .nav__toggle {
        display: none !important;
    }

    .hero {
        padding-top: var(--sp-8);
    }
}