/* =========================================================
   ANSELMO MINIS — Stylesheet
   Liquid glass + red/black theme
   ========================================================= */

:root {
    --bg-0: #080809;
    --bg-1: #0f0f11;
    --bg-2: #15151a;
    --bg-card: rgba(20, 20, 24, 0.55);
    --red-1: #ff1a1a;
    --red-2: #d70000;
    --red-3: #8a0000;
    --red-glow: #ff3535;
    --yellow: #ffd23a;
    --text: #ffffff;
    --text-dim: #b8b8c0;
    --text-mut: #8a8a94;
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-med: rgba(255, 255, 255, 0.12);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --shadow-red: 0 6px 30px rgba(255, 26, 26, 0.35);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
    --gradient-red: linear-gradient(135deg, #ff1a1a 0%, #8a0000 100%);
    --gradient-red-soft: linear-gradient(135deg, rgba(255,26,26,0.25), rgba(138,0,0,0.15));
    --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-0);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    /* BG fixo em todos os dispositivos - só o site rola, a imagem fica parada */
    background-image:
        linear-gradient(180deg, rgba(8,8,9,0.78) 0%, rgba(8,8,9,0.88) 100%),
        url('../assets/images/bgsite.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Mobile: usa bgcelular.jpg (otimizado para retrato) */
@media (max-width: 720px) {
    body {
        background-image:
            linear-gradient(180deg, rgba(8,8,9,0.78) 0%, rgba(8,8,9,0.88) 100%),
            url('../assets/images/bgcelular.jpg');
    }
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ===== Liquid Glass base ===== */
.glass-panel,
.glass-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
                rgba(20, 20, 24, 0.55);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--border-soft);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 4px 20px rgba(0,0,0,0.3);
}

/* ===== TOP BAR ===== */
.topbar {
    background: linear-gradient(90deg, var(--red-3) 0%, var(--red-2) 50%, var(--red-3) 100%);
    color: #fff;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}

.topbar-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.topbar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.topbar-icon {
    font-size: 16px;
    opacity: 0.95;
}

.topbar-text { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-text strong { font-weight: 600; font-size: 13px; }
.topbar-text span { font-size: 11px; opacity: 0.85; }

/* ===== HEADER ===== */
.header {
    background: rgba(10, 10, 12, 0.8);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    padding: 17px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-soft);
    overflow: visible;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow: visible;
}

.logo-link {
    flex-shrink: 0;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    z-index: 101;
    transition: transform 0.25s var(--ease);
}
.logo-link:hover { transform: scale(1.03); }
.logo-img {
    height: 158px;
    width: auto;
    max-width: none;
    filter: drop-shadow(0 6px 28px rgba(255, 26, 26, 0.55));
}

.search-form {
    flex: 1;
    max-width: 380px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 11px 48px 11px 18px;
    border-radius: 999px;
    background: rgba(30, 30, 35, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-soft);
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s;
}
.search-input:focus { border-color: rgba(255, 26, 26, 0.45); box-shadow: 0 0 0 3px rgba(255,26,26,0.1); }
.search-input::placeholder { color: var(--text-mut); }

.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: color 0.2s;
}
.search-btn:hover { color: var(--red-1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    position: relative;
    color: #fff;
    font-size: 13px;
    transition: transform 0.25s var(--ease), border-color 0.25s;
}
.action-item:hover { transform: translateY(-1px); border-color: var(--border-med); }
.action-item i { font-size: 17px; }

.action-text { display: flex; flex-direction: column; line-height: 1.15; }
.action-label { font-size: 11px; color: var(--text-dim); }
.action-sub { font-weight: 600; font-size: 13px; }
.action-sub-text { font-size: 12px; color: var(--text-dim); margin-left: 2px; }

.action-item.icon-only { padding: 10px 16px; }

.badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 26, 26, 0.6);
    border: 2px solid #0a0a0c;
}

.mobile-menu-btn { display: none; padding: 10px 14px; }

/* ===== NAV ===== */
.main-nav {
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 101px;
    z-index: 90;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nav-garagem {
    margin-left: auto;
}

.nav-link.garagem {
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255,255,255,0.15);
    border-color: rgba(255, 26, 26, 0.4);
}
.nav-link.garagem:hover {
    background: linear-gradient(135deg, #ff3535, var(--red-1));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 35px rgba(255, 26, 26, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nav-link.garagem i { font-size: 13px; }

.nav-link {
    padding: 10px 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dim);
    transition: all 0.25s var(--ease);
    border: 1px solid transparent;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.04); border-color: var(--border-soft); }
.nav-link.active {
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    color: #fff;
    box-shadow: var(--shadow-red);
    border-color: rgba(255, 26, 26, 0.3);
}
.nav-link i { font-size: 11px; }
.nav-link.active i { font-size: 13px; }

/* ===== HERO ===== */
.hero { margin-top: 20px; }

.hero-inner {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 210px;
    padding: 25px 50px 18px;
    background:
        linear-gradient(135deg, rgba(20,10,15,0.6) 0%, rgba(40,5,5,0.7) 50%, rgba(20,5,5,0.8) 100%);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(255, 90, 20, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 70%, rgba(255, 26, 26, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #1a0505 0%, #2a0808 40%, #400a0a 100%);
    z-index: -1;
}

.hero-glow {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 400px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(255, 120, 40, 0.5), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}

.hero-content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 140px;
    margin-bottom: 15px;
}

.hero-left { position: relative; z-index: 2; }

.hero-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-title {
    font-size: clamp(22px, 3.2vw, 36px);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.accent { color: var(--yellow); }

.hero-sub {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 14px;
    line-height: 1.4;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--red-1) 0%, var(--red-2) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
    border: 1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(255, 26, 26, 0.55);
}
.btn-primary i {
    background: rgba(255,255,255,0.2);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Hero cars - stylized SVG backgrounds */
.hero-right {
    position: relative;
    height: 100%;
    min-height: 140px;
}
.hero-cars {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 140px;
}
.hero-car {
    position: absolute;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6));
}
.hero-car::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 15px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
    filter: blur(8px);
}
.car-red {
    width: 60%;
    height: 70%;
    bottom: 10%;
    left: 8%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.4) 0%, transparent 15%),
        linear-gradient(135deg, #ff2525 0%, #8a0505 100%);
    clip-path: polygon(10% 80%, 25% 20%, 75% 20%, 90% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 30px 30px 8px 8px;
}
.car-blue {
    width: 55%;
    height: 65%;
    bottom: 5%;
    right: 5%;
    background:
        radial-gradient(circle at 25% 35%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #2548ff 0%, #0a1a6e 100%);
    clip-path: polygon(8% 80%, 25% 15%, 75% 15%, 92% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 30px 30px 8px 8px;
    z-index: 2;
}
.car-black {
    width: 28%;
    height: 40%;
    top: 10%;
    left: 35%;
    opacity: 0.85;
    background:
        radial-gradient(circle at 30% 35%, rgba(255,255,255,0.3) 0%, transparent 18%),
        linear-gradient(135deg, #2a2a2a 0%, #050505 100%);
    clip-path: polygon(10% 80%, 25% 20%, 75% 20%, 90% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 20px 20px 6px 6px;
}
.car-white {
    width: 28%;
    height: 42%;
    top: 12%;
    right: 8%;
    opacity: 0.9;
    background:
        radial-gradient(circle at 30% 35%, rgba(255,255,255,0.8) 0%, transparent 20%),
        linear-gradient(135deg, #f5f5f5 0%, #a0a0a0 100%);
    clip-path: polygon(10% 80%, 28% 20%, 78% 20%, 90% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 20px 20px 6px 6px;
}

.hero-features {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 12px 20px;
    border-radius: 14px;
    margin-top: 8px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    border: 1px solid var(--border-soft);
}

.hf-text { display: flex; flex-direction: column; line-height: 1.2; }
.hf-text strong { font-size: 13px; font-weight: 600; }
.hf-text span { font-size: 11px; color: var(--text-dim); }

/* ===== SECTIONS ===== */
.section { margin-top: 40px; }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.section-head .section-title { margin-bottom: 0; }

.section-controls { display: flex; align-items: center; gap: 8px; }

.slide-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-dim);
    transition: all 0.2s;
}
.slide-btn:hover { color: #fff; border-color: var(--border-med); }

.view-all {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}

/* ===== BRANDS ROW ===== */
.brands-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
.brands-row::-webkit-scrollbar { height: 6px; }
.brands-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.brand-card {
    flex: 1 1 0;
    min-width: 130px;
    height: 82px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ease);
    padding: 15px;
    position: relative;
}
.brand-card:hover { transform: translateY(-3px); border-color: rgba(255,26,26,0.3); }

.brand-text {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.brand-text.hotwheels {
    background: linear-gradient(135deg, #ff7a00 0%, #ff0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-size: 18px;
    text-shadow: 0 0 15px rgba(255, 122, 0, 0.5);
}
.brand-text.minigt { color: #fff; font-size: 15px; line-height: 0.9; font-style: italic; }
.brand-text.minigt em { color: var(--red-1); font-size: 22px; font-weight: 900; }
.brand-text.matchbox { color: #ff6b00; font-size: 18px; letter-spacing: 1px; }
.brand-text.maisto { color: #d70000; font-size: 20px; font-style: italic; }
.brand-text.johnny { color: #ffd700; font-size: 12px; line-height: 1.1; }
.brand-text.tarmac { color: #fff; font-size: 14px; letter-spacing: 2px; line-height: 1.1; }
.brand-text.tarmac small { color: var(--red-1); font-size: 10px; letter-spacing: 1px; }
.brand-text.greenlight { color: #22c55e; font-size: 14px; letter-spacing: 1px; }

.brand-next {
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    color: #fff;
    font-size: 18px;
    box-shadow: var(--shadow-red);
    transition: transform 0.25s var(--ease);
}
.brand-next:hover { transform: scale(1.05); }

/* ===== CATEGORIES ===== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.category-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1.05;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    border: 1px solid var(--border-soft);
    transition: all 0.3s var(--ease);
    cursor: pointer;
    isolation: isolate;
}
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.9) 100%);
    z-index: 1;
}
.category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 26, 26, 0.4);
    box-shadow: 0 10px 30px rgba(255,26,26,0.2);
}
.category-card.active {
    border-color: rgba(255, 26, 26, 0.6);
    box-shadow: 0 0 30px rgba(255,26,26,0.25);
}
.category-card.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,26,26,0.2) 0%, transparent 50%);
    z-index: 1;
}

.category-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s var(--ease);
}
.category-card:hover .category-image { transform: scale(1.05); }

.cat-esportivos {
    background:
        radial-gradient(circle at 50% 60%, rgba(255,26,26,0.3) 0%, transparent 60%),
        linear-gradient(135deg, #5a0000 0%, #2a0000 100%);
}
.cat-esportivos::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 15%;
    width: 70%;
    height: 35%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #ff3333 0%, #8a0505 100%);
    clip-path: polygon(5% 80%, 20% 20%, 80% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 25px 25px 6px 6px;
}
.cat-jdm {
    background:
        radial-gradient(circle at 50% 60%, rgba(80,130,200,0.25) 0%, transparent 60%),
        linear-gradient(135deg, #1a2030 0%, #050810 100%);
}
.cat-jdm::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 15%;
    width: 70%;
    height: 35%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #4a6aa0 0%, #1a2850 100%);
    clip-path: polygon(5% 80%, 20% 20%, 80% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 20px 20px 6px 6px;
}
.cat-classicos {
    background:
        radial-gradient(circle at 50% 60%, rgba(180,180,180,0.15) 0%, transparent 60%),
        linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
}
.cat-classicos::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 10%;
    width: 80%;
    height: 30%;
    background: linear-gradient(135deg, #404040 0%, #0a0a0a 100%);
    clip-path: polygon(5% 80%, 15% 30%, 35% 10%, 65% 10%, 85% 30%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 15px 15px 6px 6px;
}
.cat-caminhoes {
    background:
        radial-gradient(circle at 50% 60%, rgba(200,80,80,0.25) 0%, transparent 60%),
        linear-gradient(135deg, #200808 0%, #0a0303 100%);
}
.cat-caminhoes::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 10%;
    width: 80%;
    height: 40%;
    background: linear-gradient(135deg, #c01a1a 0%, #500808 100%);
    clip-path: polygon(0% 70%, 30% 70%, 30% 30%, 60% 30%, 60% 70%, 100% 70%, 100% 100%, 0% 100%);
    border-radius: 8px;
}
.cat-tunados {
    background:
        radial-gradient(circle at 50% 60%, rgba(255,200,20,0.2) 0%, transparent 60%),
        linear-gradient(135deg, #1a1300 0%, #050400 100%);
}
.cat-tunados::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 12%;
    width: 76%;
    height: 34%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #ffd23a 0%, #8a6800 100%);
    clip-path: polygon(5% 80%, 20% 20%, 80% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 20px 20px 6px 6px;
}
.cat-raros {
    background:
        radial-gradient(circle at 50% 60%, rgba(150,150,180,0.2) 0%, transparent 60%),
        linear-gradient(135deg, #1a1a1f 0%, #05050a 100%);
}
.cat-raros::after {
    content: '';
    position: absolute;
    bottom: 40%;
    left: 12%;
    width: 76%;
    height: 34%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.6) 0%, transparent 20%),
        linear-gradient(135deg, #c0c0c8 0%, #505058 100%);
    clip-path: polygon(5% 80%, 20% 20%, 80% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 20px 20px 6px 6px;
}

.category-info {
    position: relative;
    z-index: 2;
    color: #fff;
}
.category-info h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}
.category-info span {
    font-size: 11px;
    color: var(--text-dim);
}

.category-arrow {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 2;
    transition: all 0.2s;
}
.category-card.active .category-arrow {
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    box-shadow: 0 2px 10px rgba(255,26,26,0.5);
}
.category-card:hover .category-arrow { transform: translateX(3px); }

/* ===== PRODUCTS ===== */
.products-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-bottom: 6px;
}

.product-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,26,26,0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 20px rgba(255,26,26,0.15);
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    z-index: 3;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
.badge-new { background: linear-gradient(135deg, var(--red-1), var(--red-2)); }
.badge-hot { background: linear-gradient(135deg, #ff6a00, #ff2a00); }
.badge-rare { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a0f00; }

.product-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #0a0a0d;
    position: relative;
    overflow: hidden;
}
.product-image::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 15%;
    width: 70%;
    height: 8px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.8), transparent 70%);
    filter: blur(4px);
}

.prod-1 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,26,26,0.15) 0%, transparent 60%),
        linear-gradient(135deg, #1a0a0a 0%, #050202 100%);
}
.prod-1::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5) 0%, transparent 18%),
        linear-gradient(135deg, #ff2525 0%, #7a0505 100%);
    clip-path: polygon(5% 80%, 20% 20%, 80% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 25px 25px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

.prod-2 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(180,180,180,0.2) 0%, transparent 60%),
        linear-gradient(135deg, #15151a 0%, #05050a 100%);
}
.prod-2::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.8) 0%, transparent 22%),
        linear-gradient(135deg, #f5f5f5 0%, #a0a0a0 100%);
    clip-path: polygon(8% 80%, 22% 18%, 78% 18%, 92% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 25px 25px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

.prod-3 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,210,58,0.15) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0a 0%, #020202 100%);
}
.prod-3::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.3) 0%, transparent 18%),
        linear-gradient(135deg, #2a2a2a 0%, #050505 100%);
    clip-path: polygon(5% 80%, 18% 15%, 50% 10%, 82% 15%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 30px 30px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
}
.prod-3::after {
    background: radial-gradient(ellipse, rgba(255,210,58,0.3), transparent 70%);
    filter: blur(6px);
    bottom: 8%;
}

.prod-4 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(220,220,220,0.25) 0%, transparent 60%),
        linear-gradient(135deg, #15151a 0%, #05050a 100%);
}
.prod-4::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.9) 0%, transparent 22%),
        linear-gradient(135deg, #ffffff 0%, #c0c0c0 100%);
    clip-path: polygon(5% 80%, 18% 20%, 82% 20%, 95% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 22px 22px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

.prod-5 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(20,150,180,0.2) 0%, transparent 60%),
        linear-gradient(135deg, #05151a 0%, #020810 100%);
}
.prod-5::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 8%;
    width: 84%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #3ab0c0 0%, #0a4555 100%);
    clip-path: polygon(3% 80%, 15% 25%, 85% 25%, 97% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 15px 15px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

.prod-6 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,200,20,0.2) 0%, transparent 60%),
        linear-gradient(135deg, #151505 0%, #0a0a02 100%);
}
.prod-6::before {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 8%;
    width: 84%;
    height: 50%;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5) 0%, transparent 20%),
        linear-gradient(135deg, #ffd23a 0%, #7a5500 100%);
    clip-path: polygon(3% 80%, 15% 25%, 85% 25%, 97% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);
    border-radius: 15px 15px 6px 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

.product-accent {
    height: 3px;
    width: 40%;
    margin: 0 18px;
    border-radius: 2px;
    margin-top: -3px;
    position: relative;
    z-index: 2;
}

.product-info {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-info h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #fff;
    line-height: 1.25;
}
.product-brand {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 14px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.product-price {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.product-actions { display: flex; gap: 8px; }

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}
.icon-btn:hover { color: var(--red-1); border-color: rgba(255,26,26,0.3); }

.cart-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red-1), var(--red-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(255,26,26,0.4);
    transition: transform 0.2s;
}
.cart-btn:hover { transform: scale(1.08); }

/* ===== OFFERS BANNER ===== */
.offers-banner {
    margin-top: 40px;
    border-radius: var(--radius-lg);
    padding: 28px 38px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--red-2) 0%, var(--red-1) 50%, var(--red-2) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: var(--shadow-red);
    border: 1px solid rgba(255,255,255,0.1);
}
.offers-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 100%, rgba(0,0,0,0.3) 0%, transparent 60%);
    pointer-events: none;
}

.offers-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.offers-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.offers-text h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    margin-bottom: 4px;
}
.offers-text p {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

.btn-glass-light {
    padding: 13px 26px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    transition: all 0.25s var(--ease);
}
.btn-glass-light:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }
.btn-glass-light i { font-size: 11px; }

/* ===== BOTTOM FEATURES ===== */
.bottom-features {
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 20px 30px;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bf-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bf-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
}

.bf-text { display: flex; flex-direction: column; line-height: 1.2; }
.bf-text strong { font-size: 13px; font-weight: 600; }
.bf-text span { font-size: 11px; color: var(--text-dim); }

/* ===== FOOTER ===== */
.footer {
    background: linear-gradient(180deg, rgba(15,15,20,0.9) 0%, rgba(5,5,8,1) 100%);
    border-top: 1px solid var(--border-soft);
    padding: 60px 0 0;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul li a {
    font-size: 13px;
    color: var(--text-dim);
    transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--red-1); }
.footer-col p { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; max-width: 340px; }

.footer-logo { height: 60px; margin-bottom: 16px; filter: drop-shadow(0 4px 15px rgba(255,26,26,0.4)); }

.footer-social {
    display: flex;
    gap: 10px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s;
}
.footer-social a:hover {
    background: var(--gradient-red);
    border-color: rgba(255,26,26,0.5);
    transform: translateY(-2px);
}

.payment-icons { display: flex; gap: 10px; font-size: 28px; color: var(--text-dim); }

.footer-bottom {
    border-top: 1px solid var(--border-soft);
    padding: 20px 0;
    text-align: center;
}
.footer-bottom p { font-size: 12px; color: var(--text-mut); }

/* ===== Créditos ARK Agency ===== */
.ark-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e8e8ea;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all .25s ease;
    vertical-align: middle;
}
.ark-credit img {
    height: 16px;
    width: auto;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.25));
    transition: filter .25s ease;
}
.ark-credit:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}
.ark-credit:hover img {
    filter: drop-shadow(0 0 10px rgba(255,255,255,.6));
}

/* ===== WHATSAPP FLOAT ===== */
.wa-float { display: none !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ===== TABLET (<= 1024px) ===== */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }

    /* Header */
    .action-text { display: none; }
    .action-sub-text { display: none; }
    .action-item { padding: 10px 14px; }
    .header-actions { gap: 8px; }

    /* Nav */
    .main-nav { top: auto; position: relative; }
    .nav-list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .nav-list::-webkit-scrollbar { display: none; }
    .nav-link { white-space: nowrap; padding: 9px 16px; font-size: 13px; }

    /* Hero */
    .hero-inner { padding: 40px 30px 25px; }
    .hero-features { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Brands */
    .brand-card { min-width: 140px; flex: 0 0 140px; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(3, 1fr); }

    /* Products */
    .products-row { grid-template-columns: repeat(3, 1fr); }

    /* Offers */
    .offers-banner { padding: 24px 28px; }

    /* Bottom features */
    .bottom-features { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ===== MOBILE (<= 720px) ===== */
@media (max-width: 720px) {
    /* Top bar */
    .topbar { padding: 8px 0; }
    .topbar-inner { gap: 12px; }
    .topbar-item { font-size: 11px; }
    .topbar-text span { display: none; }
    .topbar-text strong { font-size: 11px; }

    /* Header */
    .header { padding: 12px 0; }
    .header-inner { flex-wrap: wrap; gap: 12px; }
    .logo-link { height: 55px; }
    .logo-img { height: 130px; }

    .search-form {
        order: 3;
        width: 100%;
        max-width: none;
        flex-basis: 100%;
    }
    .search-input { padding: 11px 50px 11px 18px; font-size: 13px; }

    .header-actions {
        margin-left: auto;
        gap: 6px;
    }
    .action-item { padding: 8px 10px; }
    .action-item i { font-size: 16px; }
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }

    /* Nav - slides in from right when open */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 85%;
        max-width: 320px;
        padding: 60px 20px 20px;
        z-index: 150;
        transition: right 0.3s var(--ease);
        background: rgba(8, 8, 9, 0.99);
        border-left: 1px solid var(--border-soft);
    }

    .main-nav.open { right: 0; }
    .main-nav .container { padding: 0; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 8px; }
    .nav-link { padding: 14px 18px; font-size: 14px; justify-content: space-between; }
    .main-nav.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(4px);
        z-index: -1;
    }
    .nav-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--border-soft);
        color: #fff;
        font-size: 16px;
    }

    /* Hero */
    .hero { margin-top: 16px; }
    .hero-inner {
        padding: 18px 18px 14px;
        min-height: auto;
        border-radius: var(--radius-lg);
    }
    .hero-content {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: auto;
    }
    .hero-right {
        min-height: 110px;
        order: -1;
    }
    .hero-cars { min-height: 110px; }
    .hero-title { font-size: clamp(20px, 7vw, 28px); }
    .hero-sub { font-size: 12px; margin-bottom: 10px; }
    .hero-badge { font-size: 10px; padding: 6px 14px; margin-bottom: 14px; }
    .btn-primary { padding: 12px 22px; font-size: 14px; }
    .hero-features {
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
        padding: 14px 14px;
    }
    .hf-icon { width: 32px; height: 32px; font-size: 13px; }
    .hf-text strong { font-size: 11px; }
    .hf-text span { font-size: 10px; }

    /* Sections */
    .section { margin-top: 30px; }
    .section-title { font-size: 13px; }

    /* Brands */
    .brands-row { gap: 10px; }
    .brand-card { min-width: 120px; flex: 0 0 120px; height: 70px; }
    .brand-next { width: 70px; height: 70px; flex: 0 0 70px; }
    .brand-text.hotwheels,
    .brand-text.maisto { font-size: 15px; }
    .brand-text.matchbox { font-size: 14px; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .category-card { aspect-ratio: 1 / 1; padding: 12px; }
    .category-info h3 { font-size: 14px; }
    .category-info span { font-size: 10px; }

    /* Products */
    .products-row {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding-bottom: 10px;
    }
    .products-row::-webkit-scrollbar { display: none; }
    .product-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
    .product-image { height: 160px; }

    .section-controls .view-all { display: none; }

    /* Offers banner */
    .offers-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 20px;
        text-align: left;
    }
    .offers-text h3 { font-size: 17px; }
    .offers-text p { font-size: 13px; }
    .btn-glass-light { width: 100%; justify-content: center; }

    /* Bottom features */
    .bottom-features {
        grid-template-columns: 1fr;
        padding: 16px 20px;
        gap: 14px;
    }

    /* Footer */
    .footer { padding: 40px 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }

    /* WA float */
    .wa-float { width: 52px; height: 52px; font-size: 26px; bottom: 18px; right: 18px; }
}

/* ===== SMALL MOBILE (<= 380px) ===== */
@media (max-width: 380px) {
    .action-item.icon-only { padding: 8px; }
    .logo-link { height: 48px; }
    .logo-img { height: 100px; }
    .hero-title { font-size: 22px; }
}

/* ===== Show mobile menu button only on mobile ===== */
@media (max-width: 720px) {
    .mobile-menu-btn { display: flex !important; }
}

@media (min-width: 721px) {
    .mobile-menu-btn { display: none; }
}

/* ===== Animation keyframes ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-car { animation: float 4s ease-in-out infinite; }
.hero-car.car-blue { animation-delay: 0.5s; }
.hero-car.car-black { animation-delay: 1s; }
.hero-car.car-white { animation-delay: 1.5s; }

@keyframes pulse-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.hero-glow { animation: pulse-glow 5s ease-in-out infinite; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media (min-width: 721px) {
    .mobile-menu-btn { display: none; }
}

/* ===== Animation keyframes ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-car { animation: float 4s ease-in-out infinite; }
.hero-car.car-blue { animation-delay: 0.5s; }
.hero-car.car-black { animation-delay: 1s; }
.hero-car.car-white { animation-delay: 1.5s; }

@keyframes pulse-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.hero-glow { animation: pulse-glow 5s ease-in-out infinite; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* =========================================================
   HERO BANNER (banner-hero.png)
   ========================================================= */
.hero-banner {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 50px rgba(255,26,26,0.12);
    border: 1px solid rgba(255,26,26,0.12);
    background: #000;
}
.hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s var(--ease);
}
.hero-banner:hover .hero-banner-img { transform: scale(1.01); }

.hero-banner-glow {
    position: absolute;
    inset: -30px;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(255,26,26,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(255,26,26,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255,26,26,0.1) 0%, transparent 50%);
    filter: blur(24px);
    z-index: -1;
    pointer-events: none;
    animation: banner-glow-pulse 7s ease-in-out infinite;
}
@keyframes banner-glow-pulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

.hero-banner-cta {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: cta-appear 0.8s ease 0.4s forwards;
}
.hero-banner-cta .btn-primary { pointer-events: auto; }
@keyframes cta-appear {
    from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.hero-banner-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(8,8,10,0.6));
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 1024px) {
    .hero-banner { border-radius: var(--radius-lg); }
    .hero-banner-cta { left: 4%; }
}
@media (max-width: 720px) {
    .hero-banner-cta {
        top: auto;
        bottom: 12%;
        left: 50%;
        transform: translate(-50%, 0);
        animation: none;
        opacity: 1;
    }
    .hero-banner-cta .btn-primary { padding: 10px 20px; font-size: 12px; }
}
@media (max-width: 480px) {
    .hero-banner-cta { display: none; }
}

.hero-banner-cta {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: cta-appear 0.8s ease 0.4s forwards;
}
.hero-banner-cta .btn-primary { pointer-events: auto; }
@keyframes cta-appear {
    from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.hero-banner-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(8,8,10,0.6));
    pointer-events: none;
    z-index: 2;
}

/* =========================================================
   APPLE-STYLE REVEAL ANIMATIONS (all pages)
   - Initially invisible, slides up on reveal
   - ease-out-expo curve = Apple presentation feel
   ========================================================= */
[data-reveal],
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.9s cubic-bezier(.16, 1, .3, 1),
        transform 0.9s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
[data-reveal].in-view,
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Slide variants */
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].in-view { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].in-view { transform: scale(1); }

/* Staggered children utilities — apply on parent */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(.16, 1, .3, 1),
        transform 0.8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
[data-stagger].in-view > * { opacity: 1; transform: translateY(0); }
[data-stagger].in-view > *:nth-child(1)  { transition-delay: 0.00s; }
[data-stagger].in-view > *:nth-child(2)  { transition-delay: 0.07s; }
[data-stagger].in-view > *:nth-child(3)  { transition-delay: 0.14s; }
[data-stagger].in-view > *:nth-child(4)  { transition-delay: 0.21s; }
[data-stagger].in-view > *:nth-child(5)  { transition-delay: 0.28s; }
[data-stagger].in-view > *:nth-child(6)  { transition-delay: 0.35s; }
[data-stagger].in-view > *:nth-child(7)  { transition-delay: 0.42s; }
[data-stagger].in-view > *:nth-child(8)  { transition-delay: 0.49s; }
[data-stagger].in-view > *:nth-child(9)  { transition-delay: 0.56s; }
[data-stagger].in-view > *:nth-child(10) { transition-delay: 0.63s; }
[data-stagger].in-view > *:nth-child(11) { transition-delay: 0.70s; }
[data-stagger].in-view > *:nth-child(12) { transition-delay: 0.77s; }

/* Auto apply on common elements (no HTML change needed)
   SEM opacity:0 inicial — conteúdo sempre visível como padrão.
   A transição ainda rola quando .in-view é (re)adicionado, mas nunca bloqueia.  */
.hero-banner,
.section,
.section-title,
.offers-banner,
.bottom-features,
.product-layout,
.product-tabs-section,
.form-card,
.summary-card,
.checkout-steps,
.breadcrumb {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.9s cubic-bezier(.16, 1, .3, 1),
        transform 0.9s cubic-bezier(.16, 1, .3, 1);
}
.hero-banner.in-view,
.section.in-view,
.section-title.in-view,
.offers-banner.in-view,
.bottom-features.in-view,
.product-layout.in-view,
.product-tabs-section.in-view,
.form-card.in-view,
.summary-card.in-view,
.checkout-steps.in-view,
.breadcrumb.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Grid children stagger — animam ao entrar, mas padrão é visível */
.brands-row > *,
.categories-grid > *,
.products-row > *,
.bottom-features > .bf-item,
.hero-features > .hero-feature,
.footer-grid > * {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.75s cubic-bezier(.16, 1, .3, 1),
        transform 0.75s cubic-bezier(.16, 1, .3, 1);
}
.brands-row.in-view > *,
.categories-grid.in-view > *,
.products-row.in-view > *,
.bottom-features.in-view > .bf-item,
.hero-features.in-view > .hero-feature,
.footer-grid.in-view > * {
    opacity: 1;
    transform: translateY(0);
}
.brands-row.in-view > *:nth-child(1),
.categories-grid.in-view > *:nth-child(1),
.products-row.in-view > *:nth-child(1),
.bottom-features.in-view > .bf-item:nth-child(1),
.hero-features.in-view > .hero-feature:nth-child(1),
.footer-grid.in-view > *:nth-child(1) { transition-delay: 0s; }
.brands-row.in-view > *:nth-child(2),
.categories-grid.in-view > *:nth-child(2),
.products-row.in-view > *:nth-child(2),
.bottom-features.in-view > .bf-item:nth-child(2),
.hero-features.in-view > .hero-feature:nth-child(2),
.footer-grid.in-view > *:nth-child(2) { transition-delay: 0.06s; }
.brands-row.in-view > *:nth-child(3),
.categories-grid.in-view > *:nth-child(3),
.products-row.in-view > *:nth-child(3),
.bottom-features.in-view > .bf-item:nth-child(3),
.hero-features.in-view > .hero-feature:nth-child(3),
.footer-grid.in-view > *:nth-child(3) { transition-delay: 0.12s; }
.brands-row.in-view > *:nth-child(4),
.categories-grid.in-view > *:nth-child(4),
.products-row.in-view > *:nth-child(4),
.bottom-features.in-view > .bf-item:nth-child(4),
.hero-features.in-view > .hero-feature:nth-child(4),
.footer-grid.in-view > *:nth-child(4) { transition-delay: 0.18s; }
.brands-row.in-view > *:nth-child(5),
.categories-grid.in-view > *:nth-child(5),
.products-row.in-view > *:nth-child(5) { transition-delay: 0.24s; }
.brands-row.in-view > *:nth-child(6),
.categories-grid.in-view > *:nth-child(6),
.products-row.in-view > *:nth-child(6) { transition-delay: 0.30s; }
.brands-row.in-view > *:nth-child(7),
.products-row.in-view > *:nth-child(7) { transition-delay: 0.36s; }
.brands-row.in-view > *:nth-child(8) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .hero-banner, .section, .section-title, .offers-banner, .bottom-features,
    .product-layout, .product-tabs-section, .form-card, .summary-card,
    .checkout-steps, .breadcrumb,
    .brands-row > *, .categories-grid > *, .products-row > *,
    .bottom-features > .bf-item, .hero-features > .hero-feature,
    .footer-grid > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ACERVO — Grid de estoque na home (5 cols x 3 rows)
   ========================================================= */
.acervo-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}
.acervo-page-info{
    font-size:12px;
    font-weight:600;
    color:var(--text-dim);
    padding:0 8px;
    min-width:56px;
    text-align:center;
}
@media (max-width:1024px){
    .acervo-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
    .acervo-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .acervo-page-info{font-size:11px}
}
@media (max-width:420px){
    .acervo-grid{grid-template-columns:1fr}
}

/* =========================================================
   BOTÃO RIFA (menu) — verde com glow
   ========================================================= */
.nav-rifa {
    margin-right: 8px;
}
.nav-link.rifa {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow:
        0 6px 28px rgba(34, 197, 94, 0.45),
        0 0 20px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.18);
    border: 1px solid rgba(34, 197, 94, 0.5);
    animation: rifa-pulse 2.6s ease-in-out infinite;
}
.nav-link.rifa:hover {
    background: linear-gradient(135deg, #34e57a 0%, #22c55e 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 10px 40px rgba(34, 197, 94, 0.7),
        0 0 30px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
.nav-link.rifa i {
    font-size: 14px;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}
@keyframes rifa-pulse {
    0%, 100% {
        box-shadow:
            0 6px 28px rgba(34, 197, 94, 0.45),
            0 0 20px rgba(34, 197, 94, 0.3),
            inset 0 1px 0 rgba(255,255,255,0.18);
    }
    50% {
        box-shadow:
            0 8px 36px rgba(34, 197, 94, 0.65),
            0 0 40px rgba(34, 197, 94, 0.55),
            inset 0 1px 0 rgba(255,255,255,0.22);
    }
}

/* =========================================================
   LANÇAMENTOS — linha única com scroll horizontal
   (sem limite, sem quebra para linha de baixo)
   ========================================================= */
.products-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 14px;
    margin: 0 -4px;
    scrollbar-color: rgba(255,26,26,0.4) transparent;
}
.products-row::-webkit-scrollbar { height: 6px; }
.products-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.products-row::-webkit-scrollbar-thumb { background: rgba(255,26,26,0.4); border-radius: 3px; }
.products-row::-webkit-scrollbar-thumb:hover { background: rgba(255,26,26,0.6); }

.products-row > .product-card {
    flex: 0 0 calc((100% - 18px * 4) / 5);
    min-width: 200px;
    max-width: 260px;
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .products-row > .product-card { flex-basis: calc((100% - 18px * 2) / 3); }
}
@media (max-width: 720px) {
    .products-row > .product-card { flex-basis: 70%; min-width: 200px; }
    .products-row { gap: 12px; }
}
@media (max-width: 420px) {
    .products-row > .product-card { flex-basis: 82%; }
}

/* =========================================================
   ACERVO — breakpoints ajustados (15 items sem órfãos)
   ========================================================= */
.acervo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 1200px) {
    .acervo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .acervo-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .acervo-grid { grid-template-columns: repeat(2, 1fr); }
    /* 15 / 2 = 7 rows + 1 órfão; esconde último para não bugar */
    .acervo-grid > article:nth-child(15) { display: none; }
}
@media (max-width: 380px) {
    .acervo-grid { grid-template-columns: 1fr; }
    .acervo-grid > article:nth-child(15) { display: block; }
}


/* =========================================================
   MOBILE: paged layouts (Lançamentos 2x2 / Acervo 2x10)
   + MINHA GARAGEM no rodapé oposto ao WhatsApp
   ========================================================= */
@media (max-width: 720px) {
    /* --- Lançamentos: grid 2 colunas × 2 linhas (paginado via JS) --- */
    .products-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding: 4px !important;
        margin: 0 !important;
    }
    .products-row > .product-card {
        flex: unset !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        scroll-snap-align: none !important;
    }
    .products-row::-webkit-scrollbar { display: none !important; }

    /* --- Acervo: grid 2 colunas (até 10 linhas por página, paginado via JS) --- */
    .acervo-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .acervo-grid > article:nth-child(15) { display: flex !important; }

    /* --- Paginação via JS: esconde cards fora da página atual --- */
    .paged-hidden { display: none !important; }

    /* --- Info de página (ex.: 1 / 2) sempre visível no mobile --- */
    .acervo-page-info, .row-page-info {
        font-size: 11px;
        color: rgba(255,255,255,0.75);
        padding: 0 6px;
        letter-spacing: 0.4px;
    }

    /* --- Controles do cabeçalho da seção compactos no mobile --- */
    .section-controls { gap: 6px; }
    .slide-btn.glass-btn {
        width: 34px; height: 34px;
        min-width: 34px;
    }
    .slide-btn[disabled] {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* --- Product card otimizado para 2-col mobile --- */
    .products-row .product-card,
    .acervo-grid .product-card {
        font-size: 12px;
    }
    .products-row .product-card h3,
    .acervo-grid .product-card h3 {
        font-size: 13px;
        line-height: 1.25;
    }
    .products-row .product-card .product-brand,
    .acervo-grid .product-card .product-brand {
        font-size: 10px;
    }
    .products-row .product-card .product-price,
    .acervo-grid .product-card .product-price {
        font-size: 14px;
    }
    .products-row .product-card .product-image,
    .acervo-grid .product-card .product-image {
        height: 120px;
    }
    .products-row .product-card .product-info,
    .acervo-grid .product-card .product-info {
        padding: 10px 10px 12px;
    }

    /* RIFA e GARAGEM somem do menu hamburguer no mobile */
    .nav-rifa,
    .nav-garagem { display: none !important; }
}

/* Override também em telas muito pequenas (≤420px) */
@media (max-width: 420px) {
    .products-row > .product-card {
        flex-basis: auto !important;
        width: 100% !important;
    }
    .acervo-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .acervo-grid > article:nth-child(15) { display: flex !important; }
    .products-row .product-card .product-image,
    .acervo-grid .product-card .product-image {
        height: 100px;
    }
}

/* Tablet (721-1024px): 3 colunas padrão */
@media (min-width: 721px) and (max-width: 1024px) {
    .acervo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   MOBILE CTA STRIP — RIFA + GARAGEM entre marcas e categorias
   ========================================================= */
.mobile-cta-strip {
    display: none; /* oculto por padrão; só aparece no mobile */
}
@media (max-width: 720px) {
    .mobile-cta-strip {
        display: flex;
        gap: 12px;
        margin: 0 0 4px;
        padding: 0;
    }
    .mcta-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .mcta-btn:active { transform: scale(0.96); }
    .mcta-btn i { font-size: 15px; }

    /* RIFA — verde */
    .mcta-rifa {
        background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
        box-shadow: 0 6px 24px rgba(34,197,94,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
        animation: rifa-pulse 3s ease-in-out infinite;
    }
    /* GARAGEM — vermelho */
    .mcta-garagem {
        background: linear-gradient(135deg, #ff1a1a 0%, #d70000 100%);
        box-shadow: 0 6px 24px rgba(255,26,26,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
    }
}

/* =========================================================
   SAFETY: minimal — apenas remove overflow horizontal no body
   (NÃO mexe em overflow-x do html para não quebrar IO/observer)
   ========================================================= */
body { overflow-x: clip; }

/* Correção definitiva: 15 itens no acervo.
   Em 2-col mobile esconde o 15º (7 linhas cheias). Tablet/Desktop mostra tudo. */
@media (max-width: 720px) {
    .acervo-grid > article:nth-child(15) { display: none !important; }
}

/* =========================================================
   FALLBACK: se IntersectionObserver não disparar, garante que
   seções apareçam via animação após pequena espera
   ========================================================= */
@keyframes revealFallback {
    to { opacity: 1 !important; transform: translateY(0) !important; }
}
.hero-banner,
.section,
.section-title,
.offers-banner,
.bottom-features,
.product-layout,
.product-tabs-section,
.form-card,
.summary-card,
.checkout-steps,
.breadcrumb,
.brands-row,
.categories-grid,
.products-row,
.hero-features,
.footer-grid {
    animation: revealFallback 0.8s cubic-bezier(.16,1,.3,1) 1.5s forwards;
}
/* Se IO marcar .in-view antes, a transição definida acima assume o controle */
.in-view {
    animation: none !important;
}

/* =========================================================
   FOOTER — Acesso Admin discreto
   ========================================================= */
.footer-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(.16, 1, .3, 1);
}
.footer-admin-link i { font-size: 10px; color: rgba(255,26,26,0.8); }
.footer-admin-link:hover {
    color: #fff;
    background: rgba(255,26,26,0.12);
    border-color: rgba(255,26,26,0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,26,26,0.25);
}
.footer-admin-link:hover i { color: #ff1a1a; }

/* wrapper do bloco footer-bottom com admin link centralizado */
.footer-bottom .container { display: flex; flex-direction: column; align-items: center; gap: 6px; }