/* ================================================================
   BRAND-DARK.CSS — Tema Visual Abratecnica
   Preto · Vermelho · Branco — aplica-se a todas as páginas
   ================================================================ */

/* ── Variáveis de marca ───────────────────────────────────────── */
:root {
    --br-black:      #080808;
    --br-dark:       #111111;
    --br-surface:    #181818;
    --br-card:       #1e1e1e;
    --br-card-hover: #242424;
    --br-red:        #e53e3e;
    --br-red-dk:     #b91c1c;
    --br-red-glow:   rgba(229, 62, 62, 0.22);
    --br-white:      #ffffff;
    --br-muted:      #a0a0a0;
    --br-border:     #2a2a2a;
    --br-border-red: rgba(229, 62, 62, 0.30);
    --br-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M40 0H0M0 40V0' stroke='%23e53e3e' stroke-width='0.3' opacity='0.12'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
}

/* ── ANIMAÇÕES GLOBAIS ────────────────────────────────────────── */
@keyframes br-fadeIn   { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes br-fadeOut  { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }
@keyframes br-redPulse { 0%,100%{box-shadow:0 0 0 0 var(--br-red-glow)} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes br-shimmer  { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ── BODY & FUNDO PRINCIPAL ───────────────────────────────────── */
body {
    background-color: var(--br-black) !important;
    background-image: var(--br-mesh) !important;
    background-attachment: fixed !important;
    color: var(--br-white) !important;
}

/* ── NAVBAR ───────────────────────────────────────────────────── */
.navbar,
.nav,
.navbar::before,
.navbar::after,
.nav::before {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.navbar,
.nav {
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 0 rgba(229,62,62,0.15), 0 4px 20px rgba(0,0,0,0.08) !important;
    position: relative;
}
/* linha vermelha decorativa no topo */
.navbar::after,
.nav::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--br-red) 30%, var(--br-red) 70%, transparent) !important;
    display: block !important;
}
.nav-link { color: #1a1a1a !important; font-weight: 500; letter-spacing: .3px; transition: color .2s; }
.nav-link:hover,
.nav-link.active { color: var(--br-red) !important; }
.nav-link.active::after { background: var(--br-red) !important; }
.cart-icon { color: #1a1a1a !important; }
.cart-icon:hover { color: var(--br-red) !important; }
.cart-count { background: var(--br-red) !important; font-weight: 700; }
.bar { background: #1a1a1a !important; }

/* ── PAGE HEADER / HERO ───────────────────────────────────────── */
.page-header {
    position: relative !important;
    overflow: hidden !important;
}
/* overlay suave */
.page-header::before {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.20) 0%,
            rgba(0,0,0,0.10) 40%,
            rgba(80,0,0,0.15) 80%,
            rgba(0,0,0,0.40) 100%) !important;
    z-index: 2 !important;
}
/* Linha vermelha brilhante na base do hero */
.page-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--br-red) 20%, #fff 50%, var(--br-red) 80%, transparent);
    z-index: 4;
    box-shadow: 0 0 12px var(--br-red), 0 0 28px var(--br-red-glow);
}
.page-header .container { position: relative; z-index: 3; }
.page-header h1 {
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.9), 0 0 40px rgba(229,62,62,0.3) !important;
}
.page-header p {
    color: rgba(255,255,255,0.88) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.page-header-video { z-index: 1 !important; }
.page-header-video.active { opacity: 1 !important; }

/* ── HERO SECTION ─────────────────────────────────────────────── */
.hero::before {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.40) 0%,
        rgba(0,0,0,0.20) 40%,
        rgba(80,0,0,0.25) 80%,
        rgba(0,0,0,0.55) 100%) !important;
}
/* Linha vermelha brilhante na base do hero */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--br-red) 20%, #fff 50%, var(--br-red) 80%, transparent);
    z-index: 4;
    box-shadow: 0 0 12px var(--br-red), 0 0 28px var(--br-red-glow);
}

/* ── SEÇÕES GERAIS ─────────────────────────────────────────────── */
section:not(.hero):not(.page-header) {
    background-color: var(--br-black) !important;
}
section:not(.hero):not(.page-header)[style*="background: #f7f7f7"],
section:not(.hero):not(.page-header)[style*="background: #f7fafc"],
section:not(.hero):not(.page-header)[style*="background:#f"],
.about,
.about-section,
.products-gallery,
.shop-products,
.shop-filters,
.legal-content,
.services,
.contact,
.benefits,
.materials-section,
.catalog-section,
.technical-expertise,
.applications-section {
    background-color: var(--br-black) !important;
    background-image: var(--br-mesh) !important;
}

/* ── SECTION TITLE ─────────────────────────────────────────────── */
.section-title  { color: var(--br-white) !important; }
.section-subtitle { color: var(--br-muted) !important; }
.section-header { border-color: var(--br-border) !important; }

/* ── CARDS ─────────────────────────────────────────────────────── */
.modern-card,
.service-card,
.product-card,
.shop-product-card,
.material-card,
.benefit-card,
.application-card,
.contact-card {
    background: var(--br-card) !important;
    border: 1px solid var(--br-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
    position: relative;
    overflow: hidden;
}
/* linha de cor no topo (aparece no hover) */
.modern-card::before,
.service-card::before,
.product-card::before,
.shop-product-card::before,
.material-card::before,
.benefit-card::before,
.application-card::before,
.contact-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; height: 3px !important;
    background: linear-gradient(90deg, var(--br-red), var(--br-red-dk)) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform .3s ease !important;
    z-index: 2 !important;
}
.modern-card:hover::before,
.service-card:hover::before,
.product-card:hover::before,
.shop-product-card:hover::before,
.material-card:hover::before,
.benefit-card:hover::before,
.application-card:hover::before,
.contact-card:hover::before { transform: scaleX(1) !important; }

.modern-card:hover,
.service-card:hover,
.product-card:hover,
.shop-product-card:hover,
.material-card:hover,
.benefit-card:hover,
.application-card:hover,
.contact-card:hover {
    transform: translateY(-7px) !important;
    background: var(--br-card-hover) !important;
    border-color: var(--br-border-red) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--br-border-red) !important;
}

/* textos dentro de cards */
.modern-card h3, .modern-card h4,
.service-card h3, .service-card h4,
.product-card h3, .product-card h4,
.shop-product-card h3, .shop-product-card h4,
.benefit-card h3, .benefit-card h4,
.material-card h3, .material-card h4,
.application-card h3, .application-card h4,
.contact-card h3, .contact-card h4 {
    color: var(--br-white) !important;
}
.modern-card p,
.service-card p,
.product-card p,
.benefit-card p,
.material-card p {
    color: #aaa !important;
}

/* icons inside cards */
.service-card .icon-container i,
.benefit-card i,
.material-card i,
.contact-card i {
    color: var(--br-red) !important;
}
.icon-bg { background: var(--br-red) !important; }
.feature-tag {
    background: rgba(229,62,62,0.12) !important;
    color: #f87171 !important;
}

/* ── BOTÕES ─────────────────────────────────────────────────────── */
.btn-primary,
.btn-checkout,
.btn-add-cart,
.btn-add-to-cart,
.retry-btn {
    background: var(--br-red) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--br-white) !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 12px var(--br-red-glow) !important;
    transition: background .2s, transform .2s, box-shadow .2s !important;
}
.btn-primary:hover,
.btn-checkout:hover,
.btn-add-cart:hover:not(.disabled),
.btn-add-to-cart:hover:not(.disabled) {
    background: var(--br-red-dk) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(229,62,62,0.45) !important;
    color: var(--br-white) !important;
}
.btn-primary::before { background: rgba(0,0,0,0.15) !important; }

.btn-secondary,
.btn-outline {
    background: transparent !important;
    border: 1px solid var(--br-border-red) !important;
    color: var(--br-white) !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: background .2s, border-color .2s !important;
}
.btn-secondary:hover,
.btn-outline:hover {
    background: var(--br-red-glow) !important;
    border-color: var(--br-red) !important;
    color: var(--br-white) !important;
}

/* ── FORMULÁRIOS ────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: #141414 !important;
    border: 1px solid var(--br-border) !important;
    color: var(--br-white) !important;
    border-radius: 8px !important;
    transition: border-color .2s, box-shadow .2s !important;
}
input::placeholder,
textarea::placeholder { color: #666 !important; }
input:focus,
select:focus,
textarea:focus {
    border-color: var(--br-red) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--br-red-glow) !important;
}
label { color: #ccc !important; }
.form-group label { color: #ccc !important; font-size: .85rem; font-weight: 500; }

/* ── CONTACT / FORM SECTION ─────────────────────────────────────── */
.contact-item h4 {
    color: var(--br-white) !important;
    font-weight: 600;
}
.contact-item p {
    color: var(--br-muted) !important;
}
.contact-item p a {
    color: var(--br-muted) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.contact-item p a:hover {
    color: var(--br-red) !important;
    text-decoration: underline;
}
.contact-item i {
    color: var(--br-red) !important;
}
.contact-form {
    background: var(--br-surface) !important;
    border: 1px solid var(--br-border) !important;
    border-radius: 14px !important;
}
.contact-form h3,
.contact-form h2 { color: var(--br-white) !important; }

/* ── TABLE ──────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
    background: var(--br-surface) !important;
    color: var(--br-white) !important;
    border: 1px solid var(--br-border) !important;
    padding: 10px 14px;
}
td {
    background: var(--br-card) !important;
    color: #ccc !important;
    border: 1px solid var(--br-border) !important;
    padding: 10px 14px;
}
tr:hover td { background: var(--br-card-hover) !important; }

/* ── LEGAL / ABOUT CONTENT ───────────────────────────────────────── */
.legal-text,
.legal-content .container > div,
.about-content {
    background: var(--br-card) !important;
    color: #ccc !important;
    border: 1px solid var(--br-border) !important;
    border-radius: 12px !important;
}
.legal-text h2,
.legal-text h3,
.about-content h2,
.about-content h3 { color: var(--br-white) !important; }
.legal-text p,
.about-content p { color: #bbb !important; }
.legal-text ul li,
.about-content ul li { color: #bbb !important; }
.legal-text strong,
.about-content strong { color: var(--br-white) !important; }

/* ── PAGINAÇÃO ───────────────────────────────────────────────────── */
.pagination-info { color: #aaa !important; }
.pagination .page-link {
    background: #181818 !important;
    border: 1px solid var(--br-border) !important;
    color: #aaa !important;
    border-radius: 7px !important;
}
.pagination .page-link:hover,
.pagination .page-item.active .page-link {
    background: var(--br-red) !important;
    border-color: var(--br-red) !important;
    color: var(--br-white) !important;
}

/* ── SPINNER / NOTIFICATION ────────────────────────────────────── */
.spinner {
    border-color: #2a2a2a !important;
    border-top-color: var(--br-red) !important;
}
.notification {
    background: #1a1a1a !important;
    border-left: 3px solid var(--br-red) !important;
    color: var(--br-white) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
    border-radius: 8px !important;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer {
    background: #050505 !important;
    border-top: 1px solid var(--br-border) !important;
    position: relative !important;
}
.footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--br-red) 30%, var(--br-red) 70%, transparent) !important;
}
.footer h3,
.footer h4 { color: var(--br-white) !important; }
.footer p,
.footer a  { color: #aaa !important; }
.footer a:hover { color: var(--br-red) !important; }
.footer ul li { color: #aaa !important; }
.footer-bottom { border-top: 1px solid var(--br-border) !important; }
.footer-bottom p { color: #555 !important; }
.social-links .instagram-link { color: #aaa !important; }
.social-links .instagram-link:hover { color: var(--br-red) !important; }

/* ── COOKIE BANNER ───────────────────────────────────────────── */
#cookieConsentBanner {
    background: rgba(20,20,20,0.97) !important;
    border-top: 2px solid var(--br-red) !important;
}
#cookieConsentBanner div,
#cookieConsentBanner span,
#cookieConsentBanner strong { color: #ddd !important; }
#cookieConsentBanner a { color: var(--br-red) !important; }
#cookieAcceptAll,
#cookieRejectAll,
#cookieConfig {
    background: var(--br-red) !important;
    border: none !important;
}
#cookieAcceptAll:hover,
#cookieRejectAll:hover,
#cookieConfig:hover { background: var(--br-red-dk) !important; }

/* ── MOBILE MENU ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-menu {
        background: var(--br-dark) !important;
        border: 1px solid var(--br-border) !important;
    }
    .nav-link { color: var(--br-white) !important; }
    .nav-link:hover { color: var(--br-red) !important; }
}

/* ── INLINE STYLE OVERRIDES (high-specificity) ───────────────── */
/* Override inline background colors set on section/div elements  */
section[style*="background"],
div[style*="background: #f7f7f7"],
div[style*="background: #f7fafc"],
div[style*="background:#f7"],
div[style*="background: white"],
div[style*="background: #fff"],
div[style*="background:#fff"] {
    background-color: var(--br-card) !important;
    background-image: none !important;
    color: #ccc !important;
}
section[style*="background: #f7f7f7"],
section[style*="background: #f7fafc"],
section[style*="background: rgb(247"],
section[style*="padding"][style*="background"] {
    background-color: var(--br-black) !important;
    background-image: var(--br-mesh) !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--br-dark); }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--br-red); }

/* ── SELECTION ────────────────────────────────────────────────── */
::selection { background: var(--br-red); color: #fff; }