/* =====================================================================
   MADRUGA — Linhas de Competição
   Sistema de design. Paleta e tipografia extraídas do logo.
   ===================================================================== */

:root {
    /* --- Cores do logo --- */
    --md-red:        #D21F26;   /* vermelho do MADRUGA */
    --md-red-hot:    #F03239;   /* hover / brilho */
    --md-red-deep:   #8E1218;   /* sombra do vermelho */
    --md-black:      #0A0A0C;   /* fundo base */
    --md-coal:       #121215;   /* superfície 1 */
    --md-coal-2:     #1A1A1F;   /* superfície 2 */
    --md-steel:      #C9CCD1;   /* prata do "LINHAS DE COMPETIÇÃO" */
    --md-bone:       #EDEDEA;   /* branco sujo */
    --md-ash:        #7A7E85;   /* texto secundário */
    --md-line:       #26262C;   /* bordas */

    /* --- Tipografia --- */
    --font-display: 'Anton', 'Oswald', Impact, sans-serif;
    --font-head:    'Oswald', 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

    --shadow-hard: 6px 6px 0 var(--md-black);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   BASE
   ===================================================================== */
html { scroll-behavior: smooth; }

body {
    background-color: var(--md-black);
    color: var(--md-bone);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* Textura de concreto sutil (aplicada no proprio body, sem camada fixa) */
body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

::selection { background: var(--md-red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--md-black); }
::-webkit-scrollbar-thumb { background: var(--md-line); }
::-webkit-scrollbar-thumb:hover { background: var(--md-red); }

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
.font-head    { font-family: var(--font-head); }

/* Título de seção: caixa alta, comprimido, com barra vermelha */
.section-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: .96;
    letter-spacing: -.01em;
    /* respiro para acentos (Ã, É, Ç) na segunda linha */
    padding-top: .06em;
    color: var(--md-bone);
}
.section-title em {
    font-style: normal;
    color: var(--md-red);
}

/* Texto com contorno (estilo estêncil) */
.text-outline {
    -webkit-text-stroke: 1.5px var(--md-steel);
    color: transparent;
}

/* Eyebrow / kicker */
.kicker {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--md-red);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.kicker::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--md-red);
}

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .95rem 2rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s var(--ease-out);
    position: relative;
    overflow: hidden;
}

/* Primário — vermelho de combate */
.btn-red {
    background: var(--md-red);
    color: #fff;
    border-color: var(--md-red);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn-red:hover {
    background: var(--md-red-hot);
    border-color: var(--md-red-hot);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(210, 31, 38, .35);
}

/* Secundário — contorno de aço */
.btn-steel {
    background: transparent;
    color: var(--md-bone);
    border-color: var(--md-line);
}
.btn-steel:hover {
    border-color: var(--md-red);
    color: var(--md-red);
}

/* Sólido claro */
.btn-bone {
    background: var(--md-bone);
    color: var(--md-black);
    border-color: var(--md-bone);
}
.btn-bone:hover { background: var(--md-red); border-color: var(--md-red); color: #fff; }

.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none !important; }

/* =====================================================================
   FITA DE PERIGO / STRIPES
   ===================================================================== */
.hazard-bar {
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        var(--md-red) 0 14px,
        var(--md-black) 14px 28px
    );
}

/* Marquee infinito */
.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 0;
}
.marquee__track {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    min-width: 100%;
    animation: marquee-scroll 28s linear infinite;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* =====================================================================
   CARDS DE PRODUTO
   ===================================================================== */
.product-card {
    background: var(--md-coal);
    border: 1px solid var(--md-line);
    transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
    position: relative;
}
.product-card:hover {
    border-color: var(--md-red);
    transform: translateY(-4px);
}
.product-card__media {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, #1e1e24 0%, var(--md-black) 72%);
}
.product-img {
    transition: transform .7s var(--ease-out);
}
.product-card:hover .product-img { transform: scale(1.07); }

/* Selo de tag no card */
.tag-badge {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .3rem .7rem;
}
.tag-novo     { background: var(--md-bone); color: var(--md-black); }
.tag-sale     { background: var(--md-red);  color: #fff; }
.tag-esgotado { background: var(--md-coal-2); color: var(--md-ash); border: 1px solid var(--md-line); }

/* Número de índice grande no card de categoria */
.index-num {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 2px rgba(233, 237, 234, .22);
    transition: -webkit-text-stroke-color .35s var(--ease-out);
}
.cat-card:hover .index-num { -webkit-text-stroke-color: var(--md-red); }

.cat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--md-line);
    background: var(--md-coal);
    transition: border-color .35s var(--ease-out);
}
.cat-card:hover { border-color: var(--md-red); }
.cat-card__img {
    transition: transform .8s var(--ease-out), filter .5s var(--ease-out);
    filter: grayscale(1) contrast(1.15);
}
.cat-card:hover .cat-card__img {
    transform: scale(1.08);
    filter: grayscale(0) contrast(1);
}

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.field {
    width: 100%;
    background: var(--md-coal);
    border: 1px solid var(--md-line);
    color: var(--md-bone);
    padding: .85rem 1rem;
    font-family: var(--font-body);
    font-size: .9rem;
    transition: border-color .2s ease, background-color .2s ease;
}
.field::placeholder { color: var(--md-ash); }
.field:focus {
    outline: none;
    border-color: var(--md-red);
    background: var(--md-coal-2);
}
select.field option { background: var(--md-coal); color: var(--md-bone); }

.label {
    display: block;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--md-ash);
    margin-bottom: .5rem;
}

/* =====================================================================
   SUPERFÍCIES
   ===================================================================== */
.panel {
    background: var(--md-coal);
    border: 1px solid var(--md-line);
}
.panel-2 { background: var(--md-coal-2); border: 1px solid var(--md-line); }

.divider-red {
    height: 3px;
    width: 64px;
    background: var(--md-red);
}

/* =====================================================================
   ANIMAÇÕES DE ENTRADA
   ===================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.active { opacity: 1; transform: translateY(0); }

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

.hero-text-wrapper {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.swiper-slide-active .hero-text-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .25s;
}

/* =====================================================================
   SWIPER
   ===================================================================== */
.swiper-button-next,
.swiper-button-prev { color: var(--md-bone) !important; }
.swiper-button-next::after,
.swiper-button-prev::after { content: '' !important; }

.swiper-pagination-bullet {
    background: var(--md-steel);
    opacity: .35;
    border-radius: 0;
    width: 26px;
    height: 3px;
    transition: all .3s ease;
}
.swiper-pagination-bullet-active {
    background: var(--md-red);
    opacity: 1;
    width: 48px;
}

/* =====================================================================
   GALERIA DO PRODUTO
   ===================================================================== */
.gallery-thumb {
    border: 2px solid var(--md-line);
    cursor: pointer;
    transition: border-color .2s ease;
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--md-red); }

/* Quantidade */
.qty-btn {
    border: 1px solid var(--md-line);
    color: var(--md-bone);
    transition: all .2s ease;
}
.qty-btn:hover { background: var(--md-red); border-color: var(--md-red); color: #fff; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast {
    position: fixed;
    top: 96px;
    right: 20px;
    z-index: 9999;
    transform: translateX(130%);
    transition: transform .45s var(--ease-out);
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    border-left: 4px solid var(--md-red);
}
.toast.show { transform: translateX(0); }

/* =====================================================================
   COOKIE BANNER / DRAWER
   ===================================================================== */
.cookie-banner {
    transform: translateY(110%);
    transition: transform .5s var(--ease-out);
}
.cookie-banner.show { transform: translateY(0); }

/* =====================================================================
   WHATSAPP
   ===================================================================== */
@keyframes pulse-wpp {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.btn-wpp { animation: pulse-wpp 2.4s infinite; }

/* =====================================================================
   CHECKOUT
   ===================================================================== */
.checkout-step { opacity: .35; transition: opacity .3s ease; }
.checkout-step.active { opacity: 1; }
.step-line { height: 2px; background: var(--md-line); transition: background-color .3s ease; }
.step-line.done { background: var(--md-red); }

/* =====================================================================
   TRANSIÇÕES DE PÁGINA
   ===================================================================== */
.page-content { animation: fadeInUp .6s var(--ease-out) both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   UTILITÁRIOS
   ===================================================================== */
.clip-slash { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.link-underline {
    position: relative;
    display: inline-block;
}
.link-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--md-red);
    transition: width .3s var(--ease-out);
}
.link-underline:hover::after { width: 100%; }

/* =====================================================================
   PÁGINAS INSTITUCIONAIS (texto corrido)
   ===================================================================== */
.rich-text { color: var(--md-ash); font-size: .95rem; line-height: 1.75; }
.rich-text > * + * { margin-top: 1.1rem; }

.rich-text h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--md-bone);
    margin-top: 2.75rem;
    padding-top: .1em;
}
.rich-text h2 + * { margin-top: .9rem; }
.rich-text h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--md-red);
    margin-top: .7rem;
}

.rich-text h3 {
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .95rem;
    color: var(--md-bone);
    margin-top: 1.8rem;
}

.rich-text strong { color: var(--md-bone); font-weight: 600; }

.rich-text a {
    color: var(--md-steel);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}
.rich-text a:hover { color: var(--md-red); }

.rich-text ul, .rich-text ol { padding-left: 1.1rem; }
.rich-text ul { list-style: none; padding-left: 0; }
.rich-text ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-top: .6rem;
}
.rich-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    background: var(--md-red);
    transform: rotate(45deg);
}
.rich-text ol { list-style: decimal; }
.rich-text ol li { margin-top: .6rem; padding-left: .3rem; }
.rich-text ol li::marker { color: var(--md-red); font-weight: 700; }

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.rich-text th, .rich-text td {
    border: 1px solid var(--md-line);
    padding: .7rem .9rem;
    text-align: left;
}
.rich-text th {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    color: var(--md-bone);
    background: var(--md-coal-2);
}
.rich-text .nota { font-size: .8rem; color: var(--md-ash); opacity: .8; }