/* ==========================================================================
   CDM / COMEDIMA - responsive.css
   Mobile First - breakpoints optimizados para:
   320px | 375px | 425px | 768px | 1024px | 1366px | 1600px | 1920px
   ========================================================================== */

/* ============================ BASE MOBILE (<= 425px) ============================ */
@media (max-width: 425px) {
    .container {
        padding-inline: var(--space-4);
    }

    .section {
        padding-block: var(--space-7);
    }

    /* Hero: una sola columna, tarjeta login debajo del texto */
    .hero {
        padding-top: calc(var(--nav-h) + var(--space-5));
        min-height: auto;
    }
    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-top: var(--space-6);
        padding-bottom: var(--space-7);
    }
    .hero__card {
        margin: 0 auto;
        max-width: 100%;
    }
    .hero__buttons {
        flex-direction: column;
    }
    .hero__buttons .btn {
        width: 100%;
    }
    .hero__scroll {
        display: none;
    }

    /* Menu movil: panel desplegable */
    .nav__toggle {
        display: flex;
    }
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(80vw, 320px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-5);
        padding: calc(var(--nav-h) + var(--space-5)) var(--space-5) var(--space-5);
        background: var(--bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--t) var(--ease-out);
        overflow-y: auto;
        z-index: 1001;
    }
    .nav__menu.is-open {
        transform: translateX(0);
    }
    /* En movil, links en color de texto (no blanco sobre fondo claro) */
    .header.is-solid .nav__menu .nav__link,
    .nav__menu .nav__link {
        color: var(--gray-700);
        font-size: 1rem;
    }
    .nav__menu .nav__link:hover {
        color: var(--yellow-dark);
    }
    .nav__menu .lang-toggle,
    .nav__menu .theme-toggle {
        background: var(--gray-100);
        color: var(--gray-700);
    }
    .nav__lang {
        width: 100%;
    }
    .lang-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gray-100);
        margin-top: 8px;
    }
    .lang-menu:not(.is-open) {
        display: none;
    }

    /* Grids a 1 columna */
    .what-grid {
        grid-template-columns: 1fr;
    }
    .about__cols {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .about__cards {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact__wrap {
        padding: var(--space-5);
    }

    .cta__title {
        font-size: 1.6rem;
    }
    .back-top {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ============================ 375px y menores ============================ */
@media (max-width: 375px) {
    .hero__title {
        font-size: 2rem;
    }
    .section__title {
        font-size: 1.6rem;
    }
    .stat__num {
        font-size: 1.8rem;
    }
    .stats__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================ TABLET (426px - 768px) ============================ */
@media (min-width: 426px) and (max-width: 768px) {
    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
    .hero__card {
        margin: 0 auto;
        max-width: 460px;
    }
    .hero__scroll {
        display: none;
    }

    /* Menu movil sigue activo hasta 768px */
    .nav__toggle {
        display: flex;
    }
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(70vw, 340px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
        padding: calc(var(--nav-h) + var(--space-5)) var(--space-5) var(--space-5);
        background: var(--bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--t) var(--ease-out);
        overflow-y: auto;
        z-index: 1001;
    }
    .nav__menu.is-open {
        transform: translateX(0);
    }
    .nav__menu .nav__link {
        color: var(--gray-700);
    }
    .nav__menu .lang-toggle,
    .nav__menu .theme-toggle {
        background: var(--gray-100);
        color: var(--gray-700);
    }
    .nav__lang {
        width: 100%;
    }
    .lang-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--gray-100);
        margin-top: 8px;
    }
    .lang-menu:not(.is-open) {
        display: none;
    }

    .what-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
    .footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* ============================ DESKTOP PEQUENO (769px - 1024px) ============================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero__content {
        grid-template-columns: 1fr .85fr;
        gap: var(--space-6);
    }
    .what-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats__grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .footer__col:nth-child(4) {
        grid-column: 1 / -1;
    }
}

/* ============================ DESKTOP MEDIO (1025px - 1366px) ============================ */
@media (min-width: 1025px) and (max-width: 1366px) {
    :root {
        --container: 1140px;
    }
    .what-grid {
        gap: var(--space-4);
    }
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================ DESKTOP GRANDE (1367px - 1600px) ============================ */
@media (min-width: 1367px) and (max-width: 1600px) {
    :root {
        --container: 1340px;
    }
}

/* ============================ FULL HD / 4K (1601px+) ============================ */
@media (min-width: 1601px) {
    :root {
        --container: 1480px;
        --container-wide: 1760px;
        --nav-h: 84px;
    }
    body {
        font-size: 17px;
    }
    .section {
        padding-block: var(--space-9);
    }
    .hero__title {
        font-size: 5rem;
    }
}

@media (min-width: 1921px) {
    :root {
        --container: 1600px;
        --container-wide: 1920px;
    }
    body {
        font-size: 18px;
    }
    .hero__title {
        font-size: 5.6rem;
    }
}

/* ============================ ORIENTACION PAISAJE EN MOVIL ============================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
    }
    .hero__content {
        padding-top: var(--space-6);
    }
}