/* ============================================================
   ESTANDARTE — responsive.css
   Media queries. Mobile-first sobre la base de main.css.
   ============================================================ */

/* Desktop intermedio: reducir padding del contenedor */
@media (max-width: 1200px) {
    :root { --container-pad: 40px; }
}

/* Tablet */
@media (max-width: 992px) {
    :root {
        --fs-64: 2.75rem;
        --fs-48: 2.25rem;
        --fs-36: 1.75rem;
        --header-height: 80px;
    }

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

    /* Logo escalado al header más bajo (mantiene proporción 241x120) */
    .site-header__brand img,
    .custom-logo,
    .custom-logo-link img {
        width: auto;
        height: 72px;
    }

    /* Footer tablet: marca a todo el ancho, las 3 columnas de enlaces debajo */
    .site-footer__cols {
        gap: var(--space-xl) var(--space-lg);
    }
    .site-footer__col--brand {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .site-footer__col--links,
    .site-footer__col--help,
    .site-footer__col--contact {
        flex: 1 1 30%;
        min-width: 180px;
    }

    /* ── Barra superior móvil: hamburguesa (izq) · logo (centro) · iconos (der) ── */
    .site-header__inner { justify-content: flex-start; gap: var(--space-sm); }
    .menu-toggle { order: 1; }
    .site-header__brand { order: 2; margin-inline: auto; }
    .site-header__mobile-shop { order: 3; }

    /* Iconos carrito + cuenta a la derecha */
    .site-header__mobile-shop {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        position: relative;
        z-index: 102;
    }
    .site-header__mobile-shop .header-account-wrap { position: relative; }
    /* El dropdown de cuenta sí flota aquí (barra superior, no drawer) */
    .site-header__mobile-shop .header-account__menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: auto;
        min-width: 200px;
        padding: 24px 24px 16px;
        background: var(--color-white);
        border-radius: 5px;
        box-shadow: 0 8px 24px rgba(0, 3, 47, 0.16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
    }
    .site-header__mobile-shop .header-account__menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .site-header__mobile-shop .header-account__link { width: 100%; }
    .site-header__mobile-shop .header-account__link::after { display: none; }

    /* Con el drawer abierto, los iconos de la barra no deben flotar sobre el
       overlay ni sobre el panel: se ocultan mientras el menú está abierto. */
    html.nav-open .site-header__mobile-shop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Navegación mobile — hamburguesa */
    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px; height: 44px;
        padding: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 102;
    }
    .menu-toggle__bar {
        display: block;
        width: 100%; height: 2px;
        background: var(--color-navy);
        transition: transform var(--transition), opacity var(--transition);
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Sin backdrop-filter en móvil: si no, crea un "containing block" que
       confina el drawer y el overlay (position:fixed) a la barra del header
       en vez de a toda la pantalla, y el overlay no oscurecería la página. */
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--color-white);
    }

    /* Drawer: popup lateral que entra desde la izquierda (junto a la hamburguesa) */
    .site-header__drawer {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: min(360px, 85vw);
        padding: calc(var(--header-height) + var(--space-md)) var(--space-lg) var(--space-lg);
        background: var(--color-white);
        box-shadow: 8px 0 24px rgba(0, 3, 47, 0.15);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 101;
    }
    .site-header__drawer.is-open { transform: translateX(0); }

    .site-nav { width: 100%; }
    .has-ecommerce-header .site-nav__menu,
    .site-nav__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav__item {
        display: block;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--color-bg-alt);
    }
    .site-nav__link {
        flex: 1 1 auto;
        padding: var(--space-sm) 0;
        border-bottom: none;
    }
    .site-nav__link:hover,
    .current-menu-item > .site-nav__link { border-bottom: none; }

    /* Toggle como botón de acordeón */
    .site-nav__toggle {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    /* Submenú: acordeón estático (no dropdown flotante) */
    .site-nav__submenu {
        position: static;
        width: 100%;
        flex-basis: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 var(--space-xs) var(--space-sm);
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: hidden;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition), visibility var(--transition);
    }
    .site-nav__submenu.is-open {
        visibility: visible;
        max-height: 60vh;
        overflow-y: auto;
    }
    /* En acordeón, sin el padding grande ni divisores del dropdown desktop */
    .site-nav__submenu .site-nav__link {
        border-top: none;
        padding: var(--space-xs) 0;
        font-size: var(--fs-16);
    }
    .site-nav__submenu .site-nav__link::after { display: none; }

    /* Mega menú de Productos y Servicios: acordeón apilado en móvil */
    .site-nav__mega {
        position: static;
        transform: none;
        left: auto;
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .prod-mega { grid-template-columns: 1fr; gap: 16px; }
    .prod-mega__col { gap: 8px; }
    .prod-mega__media { display: none; } /* sin imágenes en el acordeón móvil */
    .prod-mega__title { margin: 8px 0 2px; font-size: var(--fs-18); }
    .prod-mega__link { border-top: none; padding: var(--space-xs) 0; font-size: var(--fs-16); }

    /* En mobile el hover no abre el dropdown (se usa el toggle) */
    .site-nav__item--has-children:hover > .site-nav__submenu {
        opacity: 1;
        visibility: hidden;
        transform: none;
    }
    .site-nav__item--has-children:hover > .site-nav__submenu.is-open {
        visibility: visible;
    }

    /* Acciones (CTA + carrito/cuenta) apiladas dentro del drawer */
    .site-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        margin-top: auto;
    }
    .site-header__cta { display: inline-flex; } /* Contáctanos visible dentro del drawer */
    .site-header__shop { justify-content: center; }

    /* Overlay oscuro del drawer (efecto popup). Se anulan los disparadores
       de dropdown de desktop; solo el drawer abierto activa el overlay. */
    .site-header::after {
        display: block;
        inset: 0;
        z-index: 100;
    }
    .site-header:has(.site-nav__item--has-children:hover)::after,
    .site-header:has(.site-nav__item--has-children:focus-within)::after,
    .site-header:has(.site-nav__toggle[aria-expanded="true"])::after,
    .site-header:has(.site-nav__submenu.is-open)::after {
        opacity: 0;
        visibility: hidden;
    }
    .site-header:has(.site-header__drawer.is-open)::after {
        opacity: 1;
        visibility: visible;
    }

    .site-header__inner { flex-wrap: nowrap; }
}

/* Bloqueo de scroll del fondo con el drawer abierto */
html.nav-open, html.nav-open body { overflow: hidden; }

/* Mobile */
@media (max-width: 768px) {
    :root {
        --container-pad: 20px;
        --fs-64: 2.25rem;
        --fs-48: 1.875rem;
        /* Ritmo vertical más compacto en móvil */
        --space-3xl: 3.25rem; /* 52px */
        --space-2xl: 2.5rem;  /* 40px */
    }

    body { font-size: var(--fs-16); }

    .post-list { grid-template-columns: 1fr; }

    /* Hero: la caja del título abraza el texto (no se estira a todo el ancho) */
    .hero__title {
        display: block;
        width: min-content;
        max-width: 100%;
        padding: 14px 20px;
        font-size: var(--fs-36);
    }
    .hero__subtitle { padding: 8px 16px; font-size: var(--fs-24); }

    .site-footer { padding-block: var(--space-xl); text-align: center; }
    .site-footer__cols { flex-direction: column; gap: var(--space-lg); }
    .site-footer__col { flex: 1 1 100%; }
    .site-footer__col--brand { max-width: 100%; }
    /* Centrar la información del footer en móvil */
    .site-footer__logo { margin-inline: auto; }
    .site-footer__social { justify-content: center; }
    .site-footer__bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
    .whatsapp-float svg { width: 30px; height: 30px; }

    .search-form { flex-direction: column; }
}

/* Mobile pequeño */
@media (max-width: 480px) {
    .error-404__title { font-size: var(--fs-48); }

    /* Hero más bajo y compacto */
    .hero__track { height: 400px; }
    .hero__title { font-size: 1.75rem; padding: 12px 16px; }
    .hero__subtitle { font-size: var(--fs-20); }
    .hero__cta { width: 100%; }
    .hero__cta .btn { width: auto; } /* el CTA del hero no ocupa todo el ancho */

    /* reCAPTCHA: que no desborde en pantallas muy estrechas */
    .contact-form__recaptcha { overflow: hidden; }
}

/* Respeto a preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}