/* ============================================================
   GAFAS MEDELLÍN — home.css
   Ajustes y animaciones específicos de home.php
   ============================================================ */

/* ─── SCROLL-REVEAL ─────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.65s var(--ease-smooth),
        transform 0.65s var(--ease-smooth);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay escalonado */
.categories-grid .category-card:nth-child(1) { transition-delay: 0ms; }
.categories-grid .category-card:nth-child(2) { transition-delay: 80ms; }
.categories-grid .category-card:nth-child(3) { transition-delay: 160ms; }
.categories-grid .category-card:nth-child(4) { transition-delay: 240ms; }
.categories-grid .category-card:nth-child(5) { transition-delay: 320ms; }

.products-grid .product-card:nth-child(1) { transition-delay: 0ms; }
.products-grid .product-card:nth-child(2) { transition-delay: 60ms; }
.products-grid .product-card:nth-child(3) { transition-delay: 120ms; }
.products-grid .product-card:nth-child(4) { transition-delay: 180ms; }

.testimonials-grid .testimonial-card:nth-child(1) { transition-delay: 0ms; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 100ms; }
.testimonials-grid .testimonial-card:nth-child(3) { transition-delay: 200ms; }

.brands-rail .brand-item:nth-child(1) { transition-delay: 0ms; }
.brands-rail .brand-item:nth-child(2) { transition-delay: 50ms; }
.brands-rail .brand-item:nth-child(3) { transition-delay: 100ms; }
.brands-rail .brand-item:nth-child(4) { transition-delay: 150ms; }
.brands-rail .brand-item:nth-child(5) { transition-delay: 200ms; }
.brands-rail .brand-item:nth-child(6) { transition-delay: 250ms; }

/* ─── SKELETON ─────────────────────────────────────────────── */
.product-card--skeleton { pointer-events: none; }

.skeleton-box {
    background: var(--color-light-gray);
    border-radius: var(--radius-base);
    position: relative;
    overflow: hidden;
    height: 240px;
}

.skeleton-line {
    height: 14px;
    background: var(--color-light-gray);
    border-radius: 2px;
    margin-top: var(--space-2);
    position: relative;
    overflow: hidden;
}
.skeleton-line--sm  { width: 40%; height: 11px; }
.skeleton-line--md  { width: 55%; }

.skeleton-box::after,
.skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.6) 50%,
        transparent 100%
    );
    animation: shimmer 1.4s infinite;
    transform: translateX(-100%);
}

/* ─── CATEGORIES ──────────────────────────────────────────── */
.categories-section { background: var(--color-off-white); }

/*
 * Grid de 2 categorías: MUJER y HOMBRE del mismo tamaño siempre.
 * Usamos aspect-ratio fijo en la card para que sean idénticas.
 */
.categories-grid--two {
    /* Override: dos columnas iguales, sin primera-card grande */
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 900px;
    margin-inline: auto;
    gap: var(--space-4);
}

/* Las cards de la grilla --two NO tienen efecto de primera card grande */
.categories-grid--two .category-card:first-child {
    grid-row: auto !important;
    grid-column: auto !important;
}

/* Altura fija igual para ambas cards */
.categories-grid--two .category-card {
    height: 420px;
}

.categories-grid--two .category-card .category-card__img {
    min-height: unset;
    height: 100%;
}

/* ─── BRANDS ──────────────────────────────────────────────── */
.brands-section { border-top: 1px solid var(--color-light-gray); }

/* ─── MID-BANNER ──────────────────────────────────────────── */
.mid-banner {
    background: var(--color-black);
}

/* ─── NEWSLETTER ──────────────────────────────────────────── */
.newsletter-section {
    background: var(--color-black);
    margin-bottom: 0;
}

/* ─── Pantallas muy anchas ─────────────────────────────────── */
@media (min-width: 1600px) {
    .mid-banner { height: 100vh; }
    .categories-grid--two .category-card { height: 520px; }
}

/* ─── Tablet ──────────────────────────────────────────────── */
@media (max-width: 992px) {
    /* La grilla general de 3 col pasa a 2 col */
    .categories-section .categories-grid:not(.categories-grid--two) {
        grid-template-columns: repeat(2, 1fr);
    }
    .categories-section .categories-grid:not(.categories-grid--two) .category-card:first-child {
        grid-column: 1 / 3;
    }

    /* --two: reducir altura en tablet */
    .categories-grid--two .category-card { height: 340px; }
}

/* ─── Mobile 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .categories-section .categories-grid:not(.categories-grid--two) {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    /* --two en mobile: mantener dos columnas iguales */
    .categories-grid--two {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3);
        max-width: 100%;
    }
    .categories-grid--two .category-card { height: 260px; }

    .mid-banner { min-height: 340px; }
    .mid-banner__title { font-size: var(--size-3xl); }
}

/* ─── Mobile 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .categories-section .categories-grid:not(.categories-grid--two) {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    .categories-section .categories-grid:not(.categories-grid--two) .category-card:first-child {
        grid-column: 1 / 3;
        height: 180px;
    }
    .categories-section .categories-grid:not(.categories-grid--two) .category-card { height: 140px; }

    /* --two en mobile pequeño: mismo tamaño */
    .categories-grid--two {
        gap: var(--space-2);
    }
    .categories-grid--two .category-card { height: 200px; }
    .categories-grid--two .category-card:first-child {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 200px !important;
    }

    .brands-rail {
        gap: var(--space-4);
        flex-wrap: wrap;
        justify-content: center;
    }

    .mid-banner { min-height: 280px; }
    .mid-banner__title { font-size: var(--size-2xl); }
}

/* ─── Reducir movimiento ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}