/**
 * Responsive — móvil, tablet y escritorio
 * Breakpoints: 360 · 480 · 600 · 768 · 1024 · 1280
 */

main,
.site-header,
.hero,
.catalog,
.about,
.promo-strip,
.site-footer {
    width: 100%;
    max-width: 100%;
}

/* —— Base fluida en todos los tamaños —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.site-header {
    padding-top: env(safe-area-inset-top, 0);
}

/* Áreas táctiles mínimas (44px recomendado) */
.nav__toggle,
.nav__cart,
.nav__links a,
.btn,
.qty-control__btn,
.cart-panel__close,
.cart-item__qty button {
    min-height: 44px;
    min-width: 44px;
}

.nav__links a {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav__cart {
    min-width: auto;
    padding: 0.5rem 0.85rem;
}

/* Overlay menú móvil */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(26, 20, 14, 0.55);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

.nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Tablet y móvil (≤1024px) */
@media (max-width: 1024px) {
    :root {
        --header-h: 4.75rem;
    }

    .catalog__grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-md);
    }

    .hero__scene {
        min-height: 360px;
    }

    .hero__signboard {
        padding: var(--space-md) var(--space-lg);
        border-width: 6px;
    }
}

/* Móvil y tablet portrait (≤768px) */
@media (max-width: 768px) {
    :root {
        --header-h: 4.25rem;
        --space-xl: 2.75rem;
        --space-lg: 2rem;
    }

    .nav {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.5rem 0.75rem;
        padding: 0.65rem max(1rem, env(safe-area-inset-right)) 0.65rem max(1rem, env(safe-area-inset-left));
    }

    .nav__toggle {
        display: flex;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-items: center;
        justify-content: center;
    }

    .nav__logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        font-size: clamp(0.85rem, 3.5vw, 1.15rem);
        min-width: 0;
    }

    .nav__logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: min(52vw, 220px);
    }

    .nav__cart {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .nav__cart-label {
        display: none;
    }

    .nav-overlay {
        display: block;
    }

    .nav__links {
        grid-column: 1 / -1;
        grid-row: 2;
        position: fixed;
        top: calc(var(--header-h) + 14px + env(safe-area-inset-top, 0));
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        flex-direction: column;
        gap: 0;
        background: var(--color-paper);
        padding: 0.5rem;
        border: 4px solid var(--color-wood);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-3d);
        max-height: calc(100dvh - var(--header-h) - 2rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--transition),
            transform var(--transition),
            visibility 0s linear 0.35s;
        pointer-events: none;
        z-index: 95;
    }

    .nav__links.is-open {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
        transition:
            opacity var(--transition),
            transform var(--transition),
            visibility 0s;
        pointer-events: auto;
    }

    .nav__links li {
        border-bottom: 1px dashed rgba(107, 68, 35, 0.25);
    }

    .nav__links li:last-child {
        border-bottom: none;
    }

    .nav__links a {
        padding: 0.85rem 1rem;
        font-size: 1.05rem;
        justify-content: center;
    }

    .nav__toggle.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav__toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero */
    .hero {
        padding: var(--space-lg) max(1rem, env(safe-area-inset-left)) var(--space-md) max(1rem, env(safe-area-inset-right));
    }

    .hero__scene {
        min-height: auto;
        padding: var(--space-sm) 0;
    }

    .hero__signboard {
        padding: var(--space-md) var(--space-sm);
        border-width: 5px;
    }

    .hero__signboard::before {
        inset: 8px;
    }

    .hero__since {
        font-size: 1.15rem;
    }

    .hero__tagline {
        font-size: 1rem;
        padding: 0 0.25rem;
    }

    .hero__cta {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .hero__floats li {
        font-size: 1.75rem;
        opacity: 0.85;
    }

    .hero__floats li:nth-child(1) { top: 2%; left: 2%; }
    .hero__floats li:nth-child(2) { top: 5%; right: 3%; }
    .hero__floats li:nth-child(3) { bottom: 8%; left: 4%; }
    .hero__floats li:nth-child(4) { bottom: 5%; right: 5%; }
    .hero__floats li:nth-child(5) { display: none; }

    .hero__ribbon {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 0.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        line-height: 1.5;
        padding: var(--space-sm) 0.75rem;
    }

    .hero__ribbon span:nth-child(even) {
        display: none;
    }

    /* Catálogo: una columna en móvil estrecho */
    .catalog {
        padding: var(--space-lg) max(1rem, env(safe-area-inset-left)) var(--space-lg) max(1rem, env(safe-area-inset-right));
    }

    .catalog__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .section-head__eyebrow {
        font-size: 1.35rem;
    }

    .promo-strip {
        padding: var(--space-md) max(1rem, env(safe-area-inset-left)) var(--space-md) max(1rem, env(safe-area-inset-right));
    }

    .promo-strip__inner {
        grid-template-columns: 1fr;
    }

    .about {
        padding: var(--space-lg) max(1rem, env(safe-area-inset-left)) var(--space-lg) max(1rem, env(safe-area-inset-right));
    }

    .about__panel {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-md);
        border-width: 4px;
    }

    .about__content .btn {
        width: 100%;
        max-width: 320px;
    }

    .about__deco {
        margin: 0 auto;
    }

    .site-footer {
        padding: var(--space-lg) max(1rem, env(safe-area-inset-left)) max(var(--space-md), env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    }

    .footer__brand,
    .footer__grid {
        text-align: center;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Carrito a pantalla completa en móvil */
    .cart-panel__drawer {
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-top: 6px solid var(--color-wood);
        top: auto;
        bottom: 0;
        height: min(92dvh, 100%);
        max-height: 100dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .cart-panel.is-open .cart-panel__drawer {
        transform: translateY(0);
    }

    .cart-panel__foot {
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }

    .cart-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }

    .cart-item__subtotal {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .cart-item__actions {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .cart-item__qty button {
        width: 2.25rem;
        height: 2.25rem;
    }

    .toast {
        bottom: max(var(--space-md), env(safe-area-inset-bottom));
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        transform: translateY(120%);
        width: auto;
        max-width: none;
    }

    .toast.is-visible {
        transform: translateY(0);
    }

    /* Menos movimiento 3D en pantallas táctiles */
    .product-card:hover .product-card__frame {
        transform: translateY(-4px);
    }

    .product-card:hover .product-card__img {
        transform: scale(1.04) translateY(-4px);
    }

    .promo-card:hover {
        transform: translateY(-2px);
    }
}

/* Móvil medio (≤600px) */
@media (max-width: 600px) {
    .catalog__grid {
        grid-template-columns: 1fr;
    }

    .product-card__frame {
        padding: var(--space-sm);
    }

    .product-card__name {
        font-size: 1.35rem;
    }

    .product-card__amount {
        font-size: 1.45rem;
    }

    .btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
    }

    .cart-panel__total strong {
        font-size: 1.35rem;
    }
}

/* Móvil pequeño (≤480px) */
@media (max-width: 480px) {
    :root {
        --header-h: 3.85rem;
    }

    .nav__logo-icon {
        font-size: 1.35rem;
    }

    .nav__logo-text {
        max-width: 42vw;
    }

    .hero__title {
        letter-spacing: 0.04em;
    }

    .hero__signboard {
        border-width: 4px;
    }

    .product-card__visual {
        aspect-ratio: 4 / 3;
    }

    .product-card__badge {
        font-size: 0.95rem;
        top: -6px;
        right: 8px;
    }

    .qty-control__input {
        width: 3.25rem;
        font-size: 0.95rem;
    }

    .entrega-option__box {
        padding: 0.65rem;
    }

    .cart-panel__head h2 {
        font-size: 1.25rem;
    }
}

/* Móvil muy pequeño (≤360px) */
@media (max-width: 360px) {
    .nav {
        gap: 0.35rem 0.5rem;
    }

    .nav__logo-text {
        max-width: 38vw;
        font-size: 0.8rem;
    }

    .hero__ribbon {
        font-size: 0.65rem;
    }

    .section-head__title {
        font-size: 1.65rem;
    }
}

/* Tablet landscape / escritorio pequeño (601px – 900px): 2 columnas catálogo */
@media (min-width: 601px) and (max-width: 900px) {
    .catalog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .promo-strip__inner .promo-card:last-child {
        grid-column: 1 / -1;
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
}

/* Pantallas grandes */
@media (min-width: 1280px) {
    .hero,
    .catalog,
    .about,
    .promo-strip__inner,
    .nav,
    .footer__inner {
        max-width: 1280px;
    }

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

/* Solo dispositivos con hover preciso (ratón) */
@media (hover: hover) and (pointer: fine) {
    .nav__cart:hover {
        transform: translateY(-2px) scale(1.02);
    }
}

/* Pantallas táctiles: sin hover que “se queda pegado” */
@media (hover: none) {
    .nav__links a::after {
        display: none;
    }

    .btn--primary:active,
    .btn--cart:active,
    .nav__cart:active {
        transform: scale(0.98);
    }
}

/* Preferencia usuario: menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .hero__floats li,
    .about__crate,
    .awning span {
        animation: none !important;
    }

    .product-card:hover .product-card__frame,
    .product-card:hover .product-card__img {
        transform: none;
    }
}

/* Orientación horizontal en móvil */
@media (max-width: 768px) and (orientation: landscape) {
    .hero__scene {
        min-height: 280px;
    }

    .hero__floats {
        display: none;
    }

    .nav__links {
        max-height: calc(100dvh - var(--header-h) - 1rem);
    }

    .cart-panel__drawer {
        height: 100dvh;
        top: 0;
        bottom: auto;
        border-radius: 0;
        transform: translateX(100%);
    }

    .cart-panel.is-open .cart-panel__drawer {
        transform: translateX(0);
    }
}