
/* === Font Awesome local: garante as fontes certas === */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/fa/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fa/webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fa/webfonts/fa-brands-400.woff2") format("woff2");
}

/* Se algum reset quebrar a família, força aqui: */
.fa-solid,.fas { font-family:"Font Awesome 6 Free" !important; font-weight:900 !important; }
.fa-regular,.far { font-family:"Font Awesome 6 Free" !important; font-weight:400 !important; }
.fa-brands,.fab { font-family:"Font Awesome 6 Brands" !important; font-weight:400 !important; }


/* --- Fix Font Awesome caso algum reset sobrescreva a família da fonte --- */
.fa-solid, .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.fa-regular, .far { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
.fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* === Custom utilities, tema e UX === */
.bg-gradient-overlay{background:linear-gradient(180deg,rgba(11,18,32,.7) 0%,rgba(11,18,32,.9) 100%)}
.backdrop-blur-md{backdrop-filter:blur(10px)}
.swiper-pagination-bullet{background:#E11D48;opacity:.7;transition:opacity .3s ease}
.swiper-pagination-bullet-active{opacity:1}
[data-accordion]>div>button{transition:color .3s ease}
[data-accordion]>div>div{transition:max-height .35s ease;overflow:hidden}

/* === THEME PRO (fosco) === */
:root{
  --bg:#0a0f14;--surface:#0e1420;--border:rgba(255,255,255,.06);
  --text:#e6edf3;--muted:#9aa4b2;--primary:#E11D48;--cta:#22C55E;
  --radius:16px;--shadow:0 10px 30px rgba(0,0,0,.35);--ease:cubic-bezier(.22,.61,.36,1);--dur:420ms;
}
body{background:var(--bg);color:var(--text)}
.bg-background{background:var(--bg)!important}
.bg-card{background:var(--surface)!important;border:1px solid var(--border)}
.text-text{color:var(--text)!important}

/* Header fosco + sombra ao rolar */
header.sticky{backdrop-filter:blur(10px);background:rgba(14,20,32,.58)!important;border-color:var(--border);transition:background .3s,box-shadow .3s}
header.sticky.scrolled{background:rgba(14,20,32,.92)!important;box-shadow:var(--shadow)}

/* Cards premium */
.card-pro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.card-pro:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.45);border-color:rgba(225,29,72,.25)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;padding:.65rem 1rem;border-radius:12px;transition:transform var(--dur) var(--ease),filter var(--dur),background-color var(--dur)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-cta{background:var(--cta);color:#08140d;border:1px solid #16a34a}
.btn-primary{background:var(--primary);color:#fff;border:1px solid #be123c}

/* Imagens suaves */
img.smooth{transition:transform var(--dur) var(--ease)}
img.smooth:hover{transform:scale(1.01)}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.5rem;box-shadow:var(--shadow);display:none;transform-origin:top left;animation:dropdownIn .18s var(--ease)}
.dropdown-menu a{display:block;padding:.5rem .75rem;border-radius:.5rem;color:var(--text)}
.dropdown-menu a:hover{background:rgba(255,255,255,.06)}
.dropdown.open .dropdown-menu{display:block}
/* abrir no hover também */
.dropdown:hover .dropdown-menu{ display:block; }

/* Tipografia + marca */
h1,h2,h3{letter-spacing:.2px}
h1{font-weight:800} h2{font-weight:800}
p,li{color:var(--muted)}
.text-primary{color:#ff4d6d}
.brand-word{font-weight:800;letter-spacing:.3px;background:linear-gradient(90deg,#fff 0%,#ffb3c2 40%,#ff4d6d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Títulos de seção */
.section-title{font-weight:800;letter-spacing:.2px;color:#e9eef6;position:relative;display:block!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;line-height:1.15}
.section-title small{display:block;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:#9aa4b2;margin-bottom:.35rem;text-align:center}
.section-title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-12px;width:78%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,77,109,.95),transparent);opacity:.9}

/* Swatches (variantes) */
.swatch{width:36px;height:28px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.swatch .dot{width:18px;height:18px;border-radius:9999px;background:currentColor}
.swatch:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.swatch[aria-pressed="true"]{outline:2px solid rgba(255,255,255,.7)}

/* Ícones dos catálogos */
.cat-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow)}
.cat-icon i{font-size:36px;line-height:1;color:var(--text);opacity:.95}

/* Container central */
.container-unificado{max-width:72rem;margin-inline:auto;padding-inline:1.5rem}
@media(min-width:768px){.container-unificado{padding-inline:2rem}}

/* Zoom suave nas imagens dos cards */
.kit-card-img{transition:transform var(--dur) var(--ease);will-change:transform}
.card-pro:hover .kit-card-img{transform:scale(1.02)}

/* Harmonizar altura no header */
#kit-search-wrap--header .btn{height:40px}
#kit-search-wrap--header input{height:40px}

/* Imagens dos cards sem cortar, mesmas dimensões */
.kit-card-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#0b1220;padding:.5rem;border-radius:.5rem}

/* Lightbox */
#lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:9999;padding:16px}
#lightbox.open{display:flex;animation:lbFade .25s var(--ease)}
#lightbox img{max-width:min(1100px,95vw);max-height:85vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:transform .2s ease;cursor:zoom-in}
#lightbox .close-btn{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--text);padding:.5rem .7rem;border-radius:10px;font-weight:700;cursor:pointer}
#lightbox .close-btn:hover{background:rgba(255,255,255,.18)}
@keyframes lbFade{from{opacity:0} to{opacity:1}}
@keyframes dropdownIn{from{transform:scale(.98);opacity:0} to{transform:scale(1);opacity:1}}

/* Animação de sublinhado do menu */
.nav-link{position:relative;padding:.25rem 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--text);opacity:.35;transition:width .25s var(--ease)}
.nav-link:hover::after{width:100%}

/* Toast (notificações) */
.toast{min-width:260px;max-width:90vw;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.35);color:#e6edf3;background:#0e1420;display:flex;align-items:center;gap:10px;animation:toastIn .18s ease-out}
.toast.ok{border-color:rgba(34,197,94,.35)}
.toast.ok .dot{background:#22c55e}
.toast.err{border-color:rgba(225,29,72,.35)}
.toast.err .dot{background:#e11d48}
.toast .dot{width:10px;height:10px;border-radius:999px}
.toast .msg{font-size:.95rem;line-height:1.25rem}
@keyframes toastIn{from{transform:translateY(6px);opacity:0} to{transform:translateY(0);opacity:1}}
/* margem de scroll pra não ficar escondido pelo header sticky */
#kits { scroll-margin-top: 88px; }


/* ===== Price block (cards) ===== */
.price-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin:.35rem 0 .75rem 0;
}
.price-left{display:flex; flex-direction:column; line-height:1.1}
.price-de{
  font-size:.75rem; color:var(--muted);
}
.price-de .old{
  text-decoration:line-through; opacity:.85;
}
.price-now{
  font-size:1.35rem; font-weight:800;
  color:var(--cta);
}
.price-badge{
  font-size:.70rem; font-weight:700; letter-spacing:.02em;
  padding:.25rem .5rem; border-radius:10px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35);
  color:#b7f1c8;
}


