
:root{
  --bg:#12233a; --bg2:#0e1b2d;
  --menu1:#134fba; --menu2:#0e418f;          /* azul do menu */
  --primary1:#FFD600; --primary2:#E0B000;    /* amarelo vivo */
  --accent1:#1ad16a; --accent2:#109e4c;      /* verde WhatsApp */
  --danger1:#c72727; --danger2:#8f1c1c;      /* vermelho */
  --card1:#0e448f; --card2:#0b3671;
}
*{box-sizing:border-box} html,body{margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:#fff;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial}
a{color:#fff;text-decoration:none} img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:14px}
header.sticky{position:sticky;top:0;z-index:60;background:linear-gradient(var(--menu1),var(--menu2));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 10px 0 rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:58px;height:58px;border-radius:16px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 8px 0 rgba(0,0,0,.4)}
.brand-name .title{font-weight:900}.brand-name .slogan{opacity:.92;font-size:.92rem}
.nav-toggle{display:none;margin-left:auto;background:linear-gradient(var(--menu1),var(--menu2));border:none;color:#fff;font-weight:900;border-radius:12px;padding:10px 12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 7px 0 rgba(0,0,0,.35)}
.menu{margin-left:auto}
.menu ul{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{display:inline-block;padding:10px 12px;border-radius:10px;background:linear-gradient(var(--menu1),var(--menu2));font-weight:700;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 5px 0 rgba(0,0,0,.3)}
.menu a:hover{transform:translateY(1px)}

.btn{display:inline-block;padding:10px 14px;border-radius:14px;background:linear-gradient(var(--primary1),var(--primary2));font-weight:700;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 7px 0 rgba(0,0,0,.35); transition:transform .06s ease}
.btn:hover{transform:translateY(1px)}
.btn.whatsapp{background:linear-gradient(var(--accent1),var(--accent2))}
.btn.danger{background:linear-gradient(var(--danger1),var(--danger2))}

.hero{padding:14px 0}.banner{display:block;width:100%;border-radius:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 14px 0 rgba(0,0,0,.35)}
.section{margin:22px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:linear-gradient(var(--card1),var(--card2));border-radius:18px;padding:14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 12px 0 rgba(0,0,0,.4)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 rgba(0,0,0,.35)}
.price{display:flex;gap:10px;align-items:baseline;margin:.3rem 0 .6rem}.price .promo{font-size:1.35rem;font-weight:900;color:#00f084;text-shadow:0 2px 0 rgba(0,0,0,.45)}.price .normal{color:#ffd0d0;text-decoration:line-through}
label{display:block;margin:.35rem 0 .25rem;font-weight:700}
input,textarea,select{width:100%;padding:10px;border-radius:12px;border:none;outline:none;background:#0b3f77;color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 rgba(0,0,0,.35)}
table{width:100%;border-collapse:collapse}td,th{padding:8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}

footer{background:#072f5a;margin-top:24px;box-shadow:0 -6px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25)}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 14px}.footer-col h4{margin:.2rem 0 .6rem}.footer-bottom{background:#062748;padding:12px 14px;opacity:.95}.footer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.video-carousel{position:relative}.vc-track{display:flex;gap:16px;overflow:hidden}.vc-item{flex:0 0 calc(33.333% - 10.67px)}
.vc-nav{position:absolute;top:40%;transform:translateY(-50%);border:none;border-radius:50%;width:40px;height:40px;background:linear-gradient(var(--menu1),var(--menu2));color:#fff;font-weight:900;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 7px 0 rgba(0,0,0,.35)}
.vc-prev{left:-6px}.vc-next{right:-6px}

/* Admin layout */
.admin-wrap{display:block}.admin-side{display:none}
@media (min-width: 1024px){
  .admin-wrap{display:grid;grid-template-columns:260px 1fr;align-items:start}
  .admin-side{display:block;position:sticky;top:68px;height:calc(100vh - 68px);padding:14px;background:linear-gradient(#0d3b85,#0a2e67);box-shadow:inset 0 2px 0 rgba(255,255,255,.25), -6px 0 0 rgba(0,0,0,.35) inset;border-right:1px solid rgba(255,255,255,.15)}
  .admin-side .nav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
  .admin-side .nav a{display:block;padding:10px 12px;border-radius:12px;background:linear-gradient(var(--menu1),var(--menu2));box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 6px 0 rgba(0,0,0,.35)}
  .admin-main{padding:14px}
}

/* Menu hambúrguer e painéis no mobile */
@media (max-width: 980px){
  .menu{display:none}
  .menu.is-open{display:block; position:fixed; top:62px; right:0; width:88vw; height:calc(100vh - 62px); overflow:auto;
    background:linear-gradient(var(--menu1),var(--menu2)); padding:12px; z-index:9999; box-shadow: -8px 0 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); }
  .menu.is-open ul{flex-direction:column; gap:8px; margin-top:4px}
  .nav-toggle{display:inline-block; z-index:10000; width:54px; height:50px; padding:8px 10px; font-size:20px}
  #navBackdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998}
  .brand img{width:46px;height:46px;border-radius:12px}
}

/* Empilhar grids e tabelas no mobile e tablets pequenos */
@media (max-width: 800px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .brand-name .title{font-size:1rem}.brand-name .slogan{font-size:.8rem}
  .footer-grid{grid-template-columns:1fr}
  table.stack-mobile thead {display:none}
  table.stack-mobile tr {display:block; margin:12px 0; background:linear-gradient(var(--card1),var(--card2)); border-radius:14px; box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 8px 0 rgba(0,0,0,.35)}
  table.stack-mobile td {display:block; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
  table.stack-mobile td:last-child {border-bottom:none}
}

/* v1.3.2: vídeos da home empilhados no celular (3 por vez, com troca por grupo via setas) */
@media (max-width: 640px){
  .video-carousel .vc-track{display:block}
  .video-carousel .vc-item{flex:none;width:100%}
  .video-carousel .vc-nav{top:10px}
}
