/* ═══════════════════════════════════════════════════════════════
   responsive.css — Mejoras responsive para todos los dispositivos
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. HISTORIA SECTION (faltaban breakpoints) ──────────── */

@media (max-width: 1100px) {
    .historia-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .historia-side {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    .historia-section {
        padding: 48px 16px;
    }

    .historia-text {
        font-size: 1.05rem;
    }

    .historia-text p:first-child::first-letter {
        font-size: 2.6rem;
    }

    .historia-card h3 {
        font-size: 1.2rem;
    }

    .historia-card p {
        font-size: 0.92rem;
    }

    .historia-values {
        grid-template-columns: 1fr 1fr;
    }

    .historia-awards li {
        font-size: 1rem;
    }
}

@media (max-width: 540px) {
    .historia-section {
        padding: 36px 14px;
    }

    .historia-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .historia-title__line {
        max-width: 48px;
    }

    .historia-text {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .historia-text p:first-child::first-letter {
        font-size: 2.2rem;
    }

    .historia-values {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .historia-card {
        padding: 0.85rem 0.8rem;
    }

    .historia-awards h3 {
        font-size: clamp(1.3rem, 4vw, 1.6rem);
    }

    .historia-awards li {
        font-size: 0.92rem;
        gap: 8px;
    }

    .historia-image img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 400px) {
    .historia-section {
        padding: 28px 10px;
    }

    .historia-title {
        font-size: 1.3rem;
        gap: 8px;
    }

    .historia-title__line {
        max-width: 30px;
    }

    .historia-text {
        font-size: 0.88rem;
    }

    .historia-card h3 {
        font-size: 1.05rem;
    }
}

/* ─── 2. CARRUSEL / PRESENTACION (breakpoints faltantes) ─── */

@media (max-width: 400px) {
    .carrusel-hero {
        min-height: 360px;
    }

    .carrusel-content h1 {
        font-size: clamp(1.2rem, 5vw, 1.4rem);
    }

    .carrusel-content .carrusel-subtitle {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }

    .carrusel-btn {
        font-size: 0.75rem;
        padding: 8px 14px;
        max-width: 220px;
        min-width: 0;
    }

    .carrusel-controls {
        bottom: 8px;
    }

    .carrusel-dot {
        width: 16px;
        height: 3px;
    }
}

/* ─── 3. NAVBAR - mejoras táctiles ────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    .navbar__dd:hover .navbar__dd-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
    }

    .navbar__dd-trigger {
        cursor: pointer;
    }

    .navbar__dd-trigger[aria-expanded="true"] ~ .navbar__dd-menu,
    .navbar__dd-menu.is-touch-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
    .navbar__dd-trigger {
        pointer-events: none;
    }
}

/* ─── 4. MODAL DE CATALOGO - responsive faltante ──────────── */

@media (max-width: 400px) {
    .cm-modal {
        padding: 0.1rem;
    }

    .cm-modal__dialog {
        border-radius: 12px;
        width: calc(100vw - 0.2rem);
        max-height: calc(100vh - 0.2rem);
    }

    .cm-modal__bar,
    .cm-modal__content {
        padding: 0.4rem;
    }

    .cm-hero {
        min-height: 180px;
        border-radius: 14px;
    }

    .cm-hero__body {
        padding: 0.6rem;
    }

    .cm-hero__body h3 {
        font-size: clamp(1.3rem, 5vw, 1.6rem);
    }

    .cm-product-item img {
        height: 140px;
    }

    .cm-product-item__body h5 {
        font-size: 0.85rem;
    }

    .cm-product-item__body {
        padding: 0.55rem;
    }

    .cm-thumb-row {
        grid-auto-columns: minmax(90px, 120px);
    }

    .cm-thumb-item img {
        height: 78px;
    }

    .acm-product-detail__media .acm-gallery-main img {
        min-height: 200px;
    }
}

/* ─── 5. ACARRUSEL PRODUCT DETAIL (detalle en modal) ──────── */

@media (max-width: 880px) {
    .acm-product-detail {
        grid-template-columns: 1fr !important;
    }

    .acm-product-detail__media {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 540px) {
    .acm-product-detail__media .acm-gallery-main {
        min-height: 220px;
    }

    .acm-product-detail__info {
        padding: 0.7rem;
    }

    .acm-product-detail__title {
        font-size: clamp(1.3rem, 5vw, 1.6rem);
    }

    .pis-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 6. FOOTER - extra small ─────────────────────────────── */

@media (max-width: 400px) {
    .otros-footer {
        padding: 36px 0 18px;
    }

    .otros-footer__top section h3 {
        font-size: 0.72rem;
    }

    .otros-footer__social a {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .otros-footer__bottom p {
        font-size: 0.78rem;
    }
}

/* ─── 7. PANTALLAS MUY GRANDES (>1400px) ──────────────────── */

@media (min-width: 1400px) {
    .carrusel-hero {
        min-height: 70vh;
        max-height: 860px;
    }

    .colecciones-section {
        padding: 80px 20px 90px;
    }

    .colecciones-inner,
    .historia-inner {
        width: min(100%, 1320px);
    }

    .historia-section {
        padding: 80px 20px;
    }
}

/* ─── 8. prefers-reduced-motion (accesibilidad) ────────────── */

@media (prefers-reduced-motion: reduce) {
    .hl-loader__spinner {
        animation: none;
        border-color: #936647;
        opacity: 0.4;
    }

    .carrusel-slide.active {
        animation: none;
    }

    .carrusel-shine {
        animation: none;
        display: none;
    }

    .carrusel-content.is-animated .carrusel-title,
    .carrusel-content.is-animated .carrusel-subtitle,
    .carrusel-content.is-animated .carrusel-actions,
    .carrusel-content.is-exiting .carrusel-title,
    .carrusel-content.is-exiting .carrusel-subtitle,
    .carrusel-content.is-exiting .carrusel-actions {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .coleccion-card {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .coleccion-card::after {
        display: none;
    }

    .coleccion-card:hover,
    .coleccion-card:focus-visible {
        transform: none;
    }

    .coleccion-card:hover img,
    .coleccion-card:focus-visible img {
        transform: none;
    }

    .coleccion-card__tag {
        animation: none;
    }

    .oa-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .oa-card__img-wrap::after {
        display: none;
    }

    .historia-card,
    .historia-copy,
    .historia-side,
    .cm-modal__dialog,
    .pr-reveal,
    .pr-hero__media img,
    .pr-hero:hover .pr-hero__media img {
        transition: none;
        animation: none;
        transform: none;
    }

    .pr-hero__media img {
        transform: none !important;
    }

    .cm-modal__dialog {
        animation: none;
    }

    @keyframes none {
        from {
        }
        to {
        }
    }
}

/* ─── 9. ORIENTACIÓN HORIZONTAL EN MÓVIL ──────────────────── */

@media (max-height: 500px) and (orientation: landscape) {
    .carrusel-hero {
        min-height: 320px;
    }

    .carrusel-content h1 {
        font-size: clamp(1.2rem, 3.5vw, 1.8rem);
    }

    .carrusel-content .carrusel-subtitle {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    }

    .carrusel-actions {
        margin-top: 0.8rem;
    }

    .carrusel-btn {
        padding: 8px 16px;
        font-size: 0.75rem;
        min-width: 140px;
    }

    .carrusel-controls {
        bottom: 8px;
    }

    .historia-section {
        padding: 32px 16px;
    }

    .historia-inner {
        gap: 24px;
    }
}

/* ─── 10. SOPORTE CONTENEDOR MODAL ────────────────────────── */

@container (max-width: 400px) {
    .cm-products-grid {
        gap: 0.5rem;
    }

    .cm-product-item {
        grid-column: span 12;
    }
}

/* ─── 11. LOADER MINI (para dropdown del navbar) ──────────── */

.hl-loader-mini {
    list-style: none;
    padding: 0.25rem 0;
}

.hl-loader-mini em {
    font-style: italic;
    color: #8b755a;
    font-size: 0.82rem;
}