/* Casa Baltazar: Auto Elétrica, site institucional + loja
   Paleta extraída da identidade real da marca (logo).
   Premium upgrade: micro-animations, glassmorphism, refined visuals. */
:root{
  --preto: #0f2c4c;
  --preto-suave: #163a60;
  --dourado: #f2a71c;
  --dourado-claro: #fbc55d;
  --azul: #3e5fae;
  --azul-escuro: #28407f;
  --creme: #f7f4ee;
  --azul-tint: #eaf1fc;
  --amarelo-tint: #fdf2dc;
  --branco: #ffffff;
  --cinza-texto: #5a5d63;
  --borda: #e7e2d6;
  --sombra: 0 1px 2px rgba(15,44,76,.04), 0 4px 12px rgba(15,44,76,.05);
  --sombra-forte: 0 2px 6px rgba(15,44,76,.05), 0 14px 34px rgba(15,44,76,.08);
  --sombra-hover: 0 4px 10px rgba(15,44,76,.06), 0 20px 44px rgba(15,44,76,.11);
  --linha: rgba(15,44,76,.08);
  --raio: 16px;
  --raio-sm: 12px;
  --header-h: 72px;
  --fonte-titulo: 'Oswald', 'Arial Narrow', sans-serif;
  --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: .3s cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--azul); outline-offset:2px; border-radius:4px;
}
.icon{ display:inline-flex; flex-shrink:0; }
.icon svg{ display:block; }
body{
  margin:0;
  font-family:var(--fonte-corpo);
  color:var(--preto);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
h1,h2,h3,h4{ font-family:var(--fonte-titulo); text-transform:uppercase; letter-spacing:.02em; margin:0; line-height:1.12; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fonte-titulo); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; color:var(--dourado); font-weight:600;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--dourado); display:inline-block; }

/* ---------- scroll reveal animation ---------- */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal{
  opacity:0; transform:translateY(18px);
  transition: opacity .45s var(--transition), transform .45s var(--transition);
}
/* rede de seguranca: se o JS nao rodar, o conteudo aparece do mesmo jeito */
.no-js .reveal, .reveal-off .reveal{ opacity:1 !important; transform:none !important; }
.reveal.visible{
  opacity:1; transform:translateY(0);
}

/* ---------- topo / aviso ---------- */
.topbar{
  background:var(--preto); color:#cfcfcf; font-size:.82rem;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding:7px 24px; gap:12px; flex-wrap:wrap; }
.topbar a{ color:#f1d9a0; font-weight:600; }
.topbar span{ opacity:.85 }

/* ---------- header (glassmorphism) ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(231,226,214,.6);
  transition: background var(--transition), box-shadow var(--transition);
}
header.site.scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 20px rgba(15,44,76,.08);
}
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:1180px; margin:0 auto; padding:12px 24px; gap:20px; }
.nav .marca{ justify-self:start; }
.nav .nav-links{ justify-self:center; }
.nav .nav-actions{ justify-self:end; }
.marca{ display:flex; align-items:center; gap:12px; }
.marca img{ width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--branco),0 0 0 3px var(--borda); transition: transform var(--transition); }
.marca:hover img{ transform:scale(1.06); }
.marca .txt{ line-height:1.05; }
.marca .txt strong{ font-family:var(--fonte-titulo); text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; }
.marca .txt small{ display:block; color:var(--dourado); font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-weight:600; font-size:.92rem; color:var(--preto-suave);
  position:relative; padding:4px 0;
  transition: color var(--transition);
}
.nav-links a::after{
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--dourado); border-radius:1px;
  transition:width var(--transition);
}
.nav-links a:hover{ color:var(--azul); }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:.92rem;
  border:2px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0; transition: opacity var(--transition);
}
.btn:hover::before{ opacity:1; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--azul); color:var(--branco); box-shadow:var(--sombra); }
.btn-primary:hover{ background:var(--azul-escuro); box-shadow:var(--sombra-hover); }
.btn-ouro{ background:linear-gradient(135deg,var(--dourado-claro),var(--dourado)); color:var(--preto); box-shadow:var(--sombra); }
.btn-ouro:hover{ filter:brightness(1.08); box-shadow:var(--sombra-hover); }
.btn-outline{ background:transparent; border-color:var(--preto); color:var(--preto); }
.btn-outline:hover{ background:var(--preto); color:var(--branco); }
.btn-whats{ background:#117A3C; color:#fff; }
.btn-whats:hover{ background:#0E6631; box-shadow:0 8px 24px rgba(17,122,60,.35); }
.btn-sm{ padding:9px 16px; font-size:.82rem; }
.btn-full{ width:100%; }

.btn-cart{
  position:relative; width:60px; height:44px; border-radius:22px;
  background:var(--preto); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cart:hover{ transform:scale(1.08); box-shadow:0 6px 20px rgba(15,44,76,.3); }
.btn-cart .badge{
  position:absolute; top:-4px; right:6px; background:var(--dourado); color:var(--preto);
  font-size:.68rem; font-weight:800; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  animation: badgePop .3s ease;
}
@keyframes badgePop {
  0%  { transform:scale(0); }
  60% { transform:scale(1.2); }
  100%{ transform:scale(1); }
}

/* o visual do header, do hamburguer e da gaveta vive no bloco PREMIUM, no fim do arquivo */

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  color:#fff; padding:86px 0 94px;
}
.hero-foto{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(100deg, rgba(15,44,76,.96) 0%, rgba(15,44,76,.90) 34%, rgba(15,44,76,.55) 64%, rgba(15,44,76,.78) 100%),
    radial-gradient(1100px 480px at 85% -10%, rgba(44,95,158,.22), transparent 60%),
    url('../fotos/foto-oficina-interior.jpg');
  background-size:cover; background-position:center 40%;
  transition: transform 8s ease;
}
.hero:hover .hero-foto{ transform:scale(1.03); }
.hero .container{ position:relative; z-index:1; }
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2.1rem,4vw,3.2rem); color:#fff; margin:14px 0 18px; }
.hero h1 em{ font-style:normal; color:var(--dourado-claro); }
.hero p.lead{ font-size:1.08rem; color:#d7d7da; max-width:52ch; line-height:1.6; margin-bottom:26px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.trust-row{ display:flex; flex-wrap:wrap; gap:26px; margin-top:38px; }
.trust-item span{ line-height:1.25; }
.trust-item{
  display:flex; align-items:center; gap:10px;
  opacity:0; animation: fadeInUp .6s ease forwards;
}
.trust-item:nth-child(1){ animation-delay:.2s; }
.trust-item:nth-child(2){ animation-delay:.4s; }
.trust-item:nth-child(3){ animation-delay:.6s; }
.trust-item strong{ display:block; font-family:var(--fonte-titulo); font-size:1.3rem; color:var(--dourado-claro); }
.trust-item span{ font-size:.78rem; color:#c7c7cc; }

.hero-badge{
  background:linear-gradient(160deg,rgba(22,58,96,.85),rgba(15,44,76,.92));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:30px;
  box-shadow:var(--sombra-forte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero-badge:hover{ transform:translateY(-4px); box-shadow:0 28px 56px rgba(0,0,0,.3); }
.hero-badge .avatar{ width:96px; height:96px; border-radius:50%; margin:0 auto 16px; box-shadow:0 0 0 5px rgba(232,195,110,.25); }
.hero-badge h3{ color:#fff; text-align:center; font-size:1.15rem; margin-bottom:6px; }
.hero-badge p{ text-align:center; color:#b7b8bd; font-size:.86rem; margin:0 0 18px; }
.hero-stars{ display:flex; justify-content:center; gap:4px; color:var(--dourado-claro); font-size:1.15rem; margin-bottom:6px; }
.hero-badge .fonte{ text-align:center; display:block; font-size:.72rem; color:#8b8c92; margin-bottom:20px; }
.hero-quote{ background:rgba(255,255,255,.06); border-left:3px solid var(--dourado); border-radius:8px; padding:14px 16px; font-size:.86rem; color:#e4e4e7; font-style:italic; margin-bottom:10px; }
.hero-quote cite{ display:block; margin-top:8px; font-style:normal; font-size:.74rem; color:#9c9da3; }

/* ---------- seções gerais ---------- */
section{ padding:92px 0; }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin:12px 0 14px; }
.section-head p{ color:var(--cinza-texto); font-size:1.02rem; line-height:1.6; }
.section-head.left{ margin:0 0 40px; text-align:left; }

.bg-preto{ background:var(--preto); color:#fff; }
.bg-preto .section-head p{ color:#c7c7cc; }
.bg-creme{ background:var(--creme); }
.bg-branco{ background:var(--branco); }
/* as duas classes antigas viram apelido, pra nao quebrar nada que ainda use */
.bg-azul-claro{ background:var(--branco); }
.bg-amarelo-claro{ background:var(--creme); }
/* quando duas secoes seguidas tem o mesmo tom, uma linha fina separa sem piscar cor */
.bg-branco + .bg-branco, .bg-creme + .bg-creme{ border-top:1px solid var(--linha); }

/* cards "porque" */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
.card{
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  padding:28px 24px; box-shadow:var(--sombra);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-hover); }
.card .icone{ width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--dourado-claro),var(--dourado)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--preto); transition: transform var(--transition); }
.card:hover .icone{ transform:rotate(-6deg) scale(1.08); }
.card h3{ font-size:1.05rem; margin-bottom:10px; text-transform:none; letter-spacing:0; }
.card p{ color:var(--cinza-texto); font-size:.92rem; line-height:1.6; margin:0; }
.card cite{ display:block; margin-top:12px; font-size:.78rem; color:var(--azul); font-style:normal; font-weight:600; }

/* avaliação google */
.avaliacao-box{
  display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--borda);
  border-radius:var(--raio); padding:20px 26px; box-shadow:var(--sombra); flex-wrap:wrap;
}
.avaliacao-box .nota{ font-family:var(--fonte-titulo); font-size:2.4rem; color:var(--preto); }
.avaliacao-box .estrelas{ color:var(--dourado); font-size:1.1rem; }
.avaliacao-box small{ color:var(--cinza-texto); display:block; }

.avaliacoes-resumo{ display:flex; align-items:center; justify-content:center; gap:16px; margin:-14px 0 38px; flex-wrap:wrap; }
.avaliacoes-resumo .nota{ font-family:var(--fonte-titulo); font-size:2.8rem; color:var(--preto); line-height:1; }
.avaliacoes-resumo .estrelas{ color:var(--dourado); font-size:1.3rem; letter-spacing:2px; }
.avaliacoes-resumo small{ display:block; color:var(--cinza-texto); font-size:.82rem; margin-top:2px; }

.avaliacoes-carrossel{ position:relative; }
.avaliacoes-grid{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:2px 2px 10px; margin:0 -2px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.avaliacoes-grid::-webkit-scrollbar{ display:none; }
.avaliacao-card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  padding:26px 24px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:14px;
  transition: transform var(--transition), box-shadow var(--transition);
  scroll-snap-align:start; flex:0 0 calc(33.333% - 15px); min-width:250px;
}
.avaliacao-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-hover), 0 0 0 1px rgba(185,134,31,.28); }
.avaliacao-card .estrelas{ color:var(--dourado); letter-spacing:2px; font-size:.92rem; }
.avaliacao-card p{ color:var(--preto-suave); font-size:.94rem; line-height:1.6; margin:0; flex:1; }
.avaliacao-card .quem{ display:flex; align-items:center; gap:12px; }
.avaliacao-card .avatar-ini{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--azul),var(--azul-escuro)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}
.avaliacao-card .quem strong{ display:block; font-size:.86rem; }
.avaliacao-card .quem .meta{ display:block; font-size:.74rem; color:var(--cinza-texto); }
.avaliacoes-cta{ text-align:center; margin-top:26px; }

.av-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--borda);
  box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; color:var(--preto); cursor:pointer;
  transition: all var(--transition);
}
.av-seta:hover{ background:var(--preto); color:#fff; box-shadow:var(--sombra-hover); }
.av-prev{ left:-21px; }
.av-next{ right:-21px; }
.avaliacoes-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.avaliacoes-dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--borda);
  cursor:pointer; transition: background var(--transition), width var(--transition);
}
.avaliacoes-dots button.ativo{ background:var(--dourado); width:24px; border-radius:5px; }

/* marcas parceiras */
.marcas-marquee{
  display:flex; margin-top:36px; padding:6px 24px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}
.marcas-marquee::-webkit-scrollbar{ display:none; }
.marcas-track{ display:flex; gap:18px; width:max-content; margin:0 auto; }

/* categorias preview */
.cat-card{
  position:relative; border-radius:var(--raio); overflow:hidden; padding:28px 22px 24px;
  background:linear-gradient(160deg,var(--preto),#1d4a78); color:#fff; min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--sombra);
  border:1px solid #2a5480;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-hover); }
.cat-card .num{ position:absolute; top:16px; right:20px; font-family:var(--fonte-titulo); font-size:2.4rem; color:rgba(255,255,255,.12); transition: color var(--transition); }
.cat-card:hover .num{ color:rgba(232,195,110,.2); }
.cat-card .foto{
  width:52px; height:52px; border-radius:12px; overflow:hidden; margin-bottom:16px;
  border:2px solid rgba(255,255,255,.18); box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.cat-card .foto img{ width:100%; height:100%; object-fit:cover; }
.cat-card h3{ font-size:1.1rem; margin-bottom:6px; color:var(--dourado-claro); min-height:2.6em; display:flex; align-items:flex-end; }
.cat-card p{ color:#c7c7cc; font-size:.85rem; margin:0 0 14px; min-height:3.4em; }
.cat-card a{ font-weight:700; font-size:.82rem; color:#fff; display:inline-flex; align-items:center; gap:6px; transition: gap var(--transition); }
.cat-card a:hover{ gap:10px; }

/* disk baterias */
.disk-box{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  background:linear-gradient(120deg,var(--azul),var(--azul-escuro)); color:#fff;
  border-radius:24px; overflow:hidden; box-shadow:var(--sombra-forte);
}
.disk-box .disk-texto{ padding:48px; }
.disk-box h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:14px; }
.disk-box p{ color:#dbe6f4; line-height:1.65; margin-bottom:22px; }
.disk-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.disk-list li{ display:flex; gap:10px; align-items:flex-start; color:#eef3fa; font-size:.94rem; }
.disk-list .icon{ color:var(--dourado-claro); margin-top:1px; }
.disk-foto{
  position:relative; min-height:260px; background-size:cover; background-position:center;
  background-image:linear-gradient(180deg, rgba(31,70,118,0) 40%, rgba(15,44,76,.85) 100%), url('../fotos/foto-entrega-moto.jpg');
}
.disk-foto .disk-tel{
  position:absolute; left:24px; right:24px; bottom:22px;
  background:rgba(15,44,76,.68); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:16px 20px;
  display:flex; align-items:center; gap:12px;
}
.disk-foto .disk-tel strong{ font-family:var(--fonte-titulo); font-size:1.15rem; display:block; }
.disk-foto .disk-tel span{ font-size:.78rem; color:#dbe6f4; }

/* seção "loja de verdade" com foto real */
.sobre-real{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.sobre-real .foto-wrap{ position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--sombra-forte); aspect-ratio:4/3.4; }
.sobre-real .foto-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.sobre-real .foto-wrap:hover img{ transform:scale(1.05); }
.sobre-real .foto-selo{
  position:absolute; left:18px; bottom:18px; background:rgba(23,24,26,.82); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 16px;
  font-size:.76rem; font-weight:700; letter-spacing:.03em; display:flex; align-items:center; gap:8px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sobre-real .foto-selo .dot{ width:8px; height:8px; border-radius:50%; background:#22c35e; box-shadow:0 0 0 3px rgba(34,195,94,.25); animation: dotPulse 2s infinite; }
@keyframes dotPulse {
  0%,100%{ box-shadow:0 0 0 3px rgba(34,195,94,.25); }
  50%    { box-shadow:0 0 0 8px rgba(34,195,94,0); }
}

/* mapa leaflet */
.mapa-leaflet{ height:320px; width:100%; border-radius:var(--raio); z-index:1; }
.leaflet-pin{ display:flex; flex-direction:column; align-items:center; transform:translateY(-6px); }
.leaflet-pin .balao{
  background:var(--preto); color:#fff; padding:6px 12px; border-radius:8px; font-size:.72rem;
  font-weight:700; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.3); margin-bottom:2px;
}
.leaflet-pin .haste{ width:2px; height:10px; background:var(--preto); }
.leaflet-pin .ponto{ width:14px; height:14px; border-radius:50%; background:var(--dourado); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); margin-top:-2px; }

/* contato */
.contato-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.info-list{ display:flex; flex-direction:column; gap:18px; margin:24px 0 28px; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .ic{ width:40px; height:40px; border-radius:10px; background:var(--creme); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--azul); transition: transform var(--transition), background var(--transition); }
.info-list li:hover .ic{ transform:scale(1.08); background:var(--dourado-claro); color:var(--preto); }
.info-list strong{ display:block; font-size:.95rem; }
.info-list span{ color:var(--cinza-texto); font-size:.88rem; }
.mapa-card{ border-radius:var(--raio); overflow:hidden; border:1px solid var(--borda); box-shadow:var(--sombra); }
.mapa-card .topo{ height:220px; background:linear-gradient(160deg,var(--preto),#1d4a78); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--fonte-titulo); text-align:center; padding:20px; }
.mapa-card .corpo{ padding:22px; background:#fff; }

/* footer */
footer.site{ background:var(--preto); color:#c7c7cc; padding:52px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:32px; }
.footer-grid h4{ color:#fff; font-size:.95rem; margin-bottom:14px; text-transform:none; letter-spacing:0; }
.footer-grid p, .footer-grid a{ font-size:.88rem; color:#a9aab0; line-height:1.8; }
.footer-grid a:hover{ color:var(--dourado-claro); }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ width:44px; height:44px; border-radius:50%; }
.footer-brand strong{ font-family:var(--fonte-titulo); color:#fff; text-transform:uppercase; }
.footer-bottom{ border-top:1px solid #1c3a5c; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#8b8c92; }

/* whatsapp flutuante */
.whats-flutuante{
  position:fixed; bottom:22px; right:22px; z-index:70;
  width:60px; height:60px; border-radius:50%; background:#117A3C; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(34,195,94,.45);
  animation:pulso 2.4s infinite;
  transition: transform var(--transition);
}
.whats-flutuante:hover{ transform:scale(1.12); }
@keyframes pulso{ 0%{box-shadow:0 0 0 0 rgba(34,195,94,.45)} 70%{box-shadow:0 0 0 16px rgba(34,195,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,195,94,0)} }

/* ---------- LOJA ---------- */
.loja-hero{
  position:relative; color:#fff; padding:56px 0 44px; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(15,44,76,.94) 0%, rgba(15,44,76,.88) 40%, rgba(15,44,76,.6) 100%),
    url('../fotos/foto-bateria-moura.jpg');
  background-size:cover; background-position:center 30%;
}
.loja-hero h1{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:12px 0 10px; }
.loja-hero p{ color:#c7c7cc; max-width:60ch; }

.filtros{ display:flex; gap:10px; flex-wrap:wrap; padding:26px 0 6px; }
.filtro-btn{
  padding:10px 18px; border-radius:999px; border:1px solid var(--borda); background:#fff;
  font-weight:600; font-size:.86rem; color:var(--preto-suave);
  transition: all var(--transition);
}
.filtro-btn:hover{ border-color:var(--azul); color:var(--azul); }
.filtro-btn.ativo{ background:var(--preto); border-color:var(--preto); color:#fff; }

.produtos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:30px 0 70px; }
.produto-card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition: transform var(--transition), box-shadow var(--transition);
}
.produto-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-hover); }
.produto-imagem{
  height:200px; background:linear-gradient(160deg,#efe9d8,var(--creme));
  display:flex; align-items:center; justify-content:center; color:var(--dourado); position:relative;
  overflow:hidden;
}
.produto-imagem img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.produto-card:hover .produto-imagem img{ transform:scale(1.08); }
.produto-tag{ position:absolute; top:10px; left:10px; background:var(--dourado); color:#1a1a1a; font-size:.68rem; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:999px; letter-spacing:.04em; z-index:2; }
.produto-corpo{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.produto-marca{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--azul); }
.produto-corpo h3{ font-family:var(--fonte-titulo); font-size:1.05rem; text-transform:none; letter-spacing:0; margin:0; }
.produto-corpo .aplicacao{ font-size:.78rem; color:var(--cinza-texto); }
.produto-corpo .desc{ font-size:.86rem; color:var(--cinza-texto); line-height:1.5; flex:1; }
.produto-rodape{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.produto-preco{ font-weight:800; font-size:1rem; color:var(--preto); }
.produto-preco.consulte{ color:var(--azul); font-size:.82rem; }
.add-carrinho{
  background:var(--preto); color:#fff; border:none; border-radius:999px; padding:9px 16px;
  font-weight:700; font-size:.8rem; display:flex; align-items:center; gap:6px;
  transition: background var(--transition), transform var(--transition);
}
.add-carrinho:hover{ background:var(--azul); transform:scale(1.04); }

.loja-vazia{ text-align:center; padding:70px 20px; color:var(--cinza-texto); }
.loja-vazia .ic{ font-size:2.6rem; margin-bottom:12px; }

/* carrinho drawer */
.overlay{ position:fixed; inset:0; background:rgba(15,44,76,.55); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.overlay.aberto{ opacity:1; pointer-events:auto; }
.carrinho-drawer{
  position:fixed; top:0; right:-420px; width:min(420px,92vw); height:100%; background:#fff; z-index:95;
  box-shadow:-14px 0 40px rgba(0,0,0,.25); transition:right .3s ease; display:flex; flex-direction:column;
}
.carrinho-drawer.aberto{ right:0; }
.carrinho-topo{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--borda); }
.carrinho-topo h3{ text-transform:none; letter-spacing:0; font-size:1.1rem; }
.fechar-x{ background:none; border:none; font-size:1.4rem; line-height:1; color:var(--preto); transition: transform var(--transition); }
.fechar-x:hover{ transform:rotate(90deg); }
.carrinho-itens{ flex:1; overflow-y:auto; padding:14px 22px; display:flex; flex-direction:column; gap:14px; }
.carrinho-item{ display:flex; gap:12px; border-bottom:1px dashed var(--borda); padding-bottom:14px; }
.carrinho-item .thumb{ width:56px; height:56px; border-radius:10px; background:var(--creme); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--dourado); overflow:hidden; }
.carrinho-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.carrinho-item .info{ flex:1; }
.carrinho-item .info strong{ font-size:.9rem; display:block; }
.carrinho-item .info small{ color:var(--cinza-texto); font-size:.78rem; }
.qtd-controle{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.qtd-controle button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--borda); background:#fff; transition: background var(--transition); }
.qtd-controle button:hover{ background:var(--creme); }
.remover-item{ color:#c0392b; font-size:.76rem; font-weight:700; background:none; border:none; padding:0; margin-top:6px; }
.carrinho-vazio{ text-align:center; color:var(--cinza-texto); padding:40px 10px; }
.carrinho-rodape{ padding:20px 22px; border-top:1px solid var(--borda); }
.carrinho-rodape small{ display:block; color:var(--cinza-texto); font-size:.76rem; margin-top:10px; text-align:center; }

/* ---------- admin ---------- */
.admin-shell{ min-height:100vh; background:var(--creme); font-family:var(--fonte-corpo); }
.admin-topbar{ background:var(--preto); color:#fff; padding:16px 26px; display:flex; align-items:center; justify-content:space-between; }
.admin-topbar .marca-admin{ display:flex; align-items:center; gap:12px; font-family:var(--fonte-titulo); text-transform:uppercase; }
.admin-topbar .marca-admin img{ width:36px; height:36px; border-radius:50%; }
.admin-wrap{ max-width:1100px; margin:0 auto; padding:32px 24px 60px; }
.login-box{ max-width:380px; margin:100px auto; background:#fff; border-radius:var(--raio); padding:36px; box-shadow:var(--sombra-forte); text-align:center; }
.login-box img{ width:70px; height:70px; border-radius:50%; margin:0 auto 16px; }
.login-box h1{ font-size:1.2rem; margin-bottom:6px; }
.login-box p{ color:var(--cinza-texto); font-size:.86rem; margin-bottom:22px; }
.campo{ text-align:left; margin-bottom:16px; }
.campo label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--borda);
  font-family:inherit; font-size:.92rem; background:#fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* checkbox e radio nao sao campo de texto: sem width:100% e sem padding,
   senao viram um retangulo gigante desalinhado do rotulo. */
.campo input[type="checkbox"],
.campo input[type="radio"]{
  width:18px; height:18px; padding:0; margin:0; flex:0 0 auto;
  accent-color:var(--azul); cursor:pointer;
}
/* rotulo que envolve um checkbox vira linha, nao bloco */
.campo label.inline,
.campo label:has(> input[type="checkbox"]),
.campo label:has(> input[type="radio"]){
  display:flex; align-items:center; gap:9px;
  font-weight:600; font-size:.86rem; margin-bottom:0; cursor:pointer;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--azul); box-shadow:0 0 0 3px rgba(44,95,158,.15);
}
.campo textarea{ resize:vertical; min-height:80px; }
.erro-msg{ background:#fde8e6; color:#a1291b; padding:10px 14px; border-radius:8px; font-size:.84rem; margin-bottom:14px; display:none; }
.erro-msg.mostrar{ display:block; }
.ok-msg{ background:#e5f6ea; color:#1f7a3a; padding:10px 14px; border-radius:8px; font-size:.84rem; margin-bottom:14px; display:none; }
.ok-msg.mostrar{ display:block; }

.admin-cabecalho{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:14px; }
.admin-cabecalho h1{ font-size:1.5rem; }
.admin-cabecalho p{ color:var(--cinza-texto); font-size:.86rem; margin-top:4px; }

.admin-grid{ display:grid; grid-template-columns:1.1fr 1.4fr; gap:26px; align-items:start; }
.painel{ background:#fff; border-radius:var(--raio); border:1px solid var(--borda); padding:24px; box-shadow:var(--sombra); }
.painel h2{ font-size:1.05rem; text-transform:none; letter-spacing:0; margin-bottom:16px; }
.linha-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.preco-opcoes{ display:flex; gap:16px; margin-bottom:10px; }
.preco-opcoes label{ display:flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; }
.upload-box{
  border:2px dashed var(--borda); border-radius:12px; padding:18px; text-align:center; cursor:pointer;
  color:var(--cinza-texto); font-size:.84rem; position:relative; background:var(--creme);
  transition: border-color var(--transition), background var(--transition);
}
.upload-box:hover{ border-color:var(--azul); background:#f0f4f9; }
.upload-box img{ max-height:110px; margin:0 auto 8px; border-radius:8px; }

.lista-produtos{ display:flex; flex-direction:column; gap:12px; max-height:720px; overflow-y:auto; }
.item-admin{ display:flex; gap:12px; background:#fff; border:1px solid var(--borda); border-radius:12px; padding:12px; align-items:center; transition: box-shadow var(--transition); }
.item-admin:hover{ box-shadow:var(--sombra); }
.item-admin .thumb{ width:56px; height:56px; border-radius:8px; background:var(--creme); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--dourado); }
.item-admin .thumb img{ width:100%; height:100%; object-fit:cover; }
.item-admin .info{ flex:1; min-width:0; }
.item-admin .info strong{ display:block; font-size:.9rem; }
.item-admin .info small{ color:var(--cinza-texto); font-size:.76rem; }
.item-admin .acoes{ display:flex; gap:8px; }
.icone-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--borda); background:#fff; display:flex; align-items:center; justify-content:center; transition: background var(--transition), border-color var(--transition); }
.icone-btn.excluir:hover{ background:#fde8e6; border-color:#e6a29b; }
.icone-btn.editar:hover{ background:#e5f0fb; border-color:#a9c8ea; }
.lista-vazia{ text-align:center; color:var(--cinza-texto); padding:30px 10px; font-size:.88rem; }

@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .disk-box{ grid-template-columns:1fr; }
  .disk-foto{ min-height:220px; order:-1; }
  .contato-grid{ grid-template-columns:1fr; }
  .produtos-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .sobre-real{ grid-template-columns:1fr; }
  .sobre-real .foto-wrap{ aspect-ratio:16/10; }
  .avaliacao-card{ flex:0 0 calc(60% - 11px); }
  .av-prev{ left:0; }
  .av-next{ right:0; }
}
@media (max-width: 680px){
  .nav-links{ display:none; }
  .hamb{ display:flex; }
  .produtos-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
  .avaliacao-card{ flex:0 0 88%; }
  .av-seta{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .linha-2{ grid-template-columns:1fr; }
  .topbar .container{ font-size:.74rem; }
  .nav{ gap:10px; padding:10px 16px; }
  .nav-actions{ gap:8px; }
  .nav-actions .btn-sm{ display:none; }
}
@media (max-width: 560px){
  /* o nome da loja nao pode quebrar em 3 linhas no topo */
  .marca .txt small{ display:none; }
  .marca img{ width:42px; height:42px; }
  .marca .txt strong{ font-size:.95rem; white-space:nowrap; }
  /* os 3 numeros do hero em grade, sem um descer sozinho */
  .trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
  .trust-item{ flex-direction:column; align-items:flex-start; gap:2px; }
  .trust-item strong{ font-size:1.15rem; }
  .trust-item span{ font-size:.7rem; }
  /* o card do Google nao pode ocupar uma tela inteira sozinho */
  .hero-badge{ padding:22px 20px; }
  .hero-badge .avatar{ width:64px; height:64px; }
  .hero-badge .hero-quote:nth-of-type(2){ display:none; }
  .cat-card h3{ min-height:0; }
  .cat-card p{ min-height:0; }
}
@media (max-width: 400px){
  .marca .txt strong{ font-size:.88rem; }
}

/* ═══════════════════════════════════════════════════════════
   CAMADA PREMIUM
   header navy, gaveta lateral, carrossel de marcas.
   Fica no fim de proposito: sobrescreve o que veio antes.
   ═══════════════════════════════════════════════════════════ */

/* ── header: mesma tonalidade do hero, sem costura ───────── */
header.site{
  position:sticky; top:0; z-index:120;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition: background .35s var(--transition), border-color .35s var(--transition), box-shadow .35s var(--transition);
}
header.site.scrolled{
  background:rgba(15,44,76,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(15,44,76,.18);
}
/* paginas sem hero escuro atras do header */
body.header-solido header.site{ background:var(--preto); border-bottom-color:rgba(255,255,255,.10); }

.nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  max-width:1180px; margin:0 auto; padding:0 24px;
  min-height:var(--header-h); gap:20px;
}
.marca img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
  transition: transform var(--transition);
}
.marca .txt strong{ color:#fff; font-size:1rem; letter-spacing:.04em; }
.marca .txt small{ color:var(--dourado-claro); letter-spacing:.14em; font-size:.62rem; }

.nav-links a{ color:rgba(255,255,255,.82); font-size:.88rem; letter-spacing:.01em; }
.nav-links a:hover{ color:#fff; }
.nav-links a::after{ background:var(--dourado); }

/* botoes redondos do topo */
.btn-cart, .hamb{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none; padding:0; position:relative;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-cart:hover, .hamb:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.btn-cart:active, .hamb:active{ transform:scale(.94); }
.btn-cart:hover{ transform:none; box-shadow:none; }
.btn-cart .badge{
  position:absolute; top:-3px; right:-3px;
  background:var(--dourado); color:var(--preto);
  font-size:.66rem; font-weight:800; min-width:19px; height:19px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 5px; border:2px solid var(--preto); animation:badgePop .3s ease;
}
.hamb{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:10px; }

/* ── mobile: hamburguer na esquerda, logo no centro, carrinho na direita ── */
@media (max-width: 900px){
  .nav{ grid-template-columns:42px 1fr 42px; gap:12px; padding:0 16px; min-height:64px; }
  .nav .hamb{ display:inline-flex; justify-self:start; order:1; }
  .nav .marca{ justify-self:center; order:2; flex-direction:row; gap:9px; }
  .nav .nav-actions{ justify-self:end; order:3; gap:0; }
  .nav .nav-links{ display:none; }
  .marca .txt strong{ font-size:.9rem; white-space:nowrap; }
  .marca .txt small{ display:none; }
  .marca img{ width:38px; height:38px; }
}
@media (max-width: 380px){
  .marca .txt{ display:none; }
  .marca img{ width:40px; height:40px; }
}

/* ── gaveta lateral do menu ──────────────────────────────── */
.menu-overlay{
  position:fixed; inset:0; z-index:190;
  background:rgba(9,26,45,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.menu-overlay.aberto{ opacity:1; visibility:visible; }

.menu-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  width:min(330px, 86vw);
  background:linear-gradient(170deg, var(--preto) 0%, #0b2340 100%);
  color:#fff; display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  box-shadow:24px 0 60px rgba(9,26,45,.35);
  overscroll-behavior:contain;
}
.menu-drawer.aberto{ transform:translateX(0); }

.menu-drawer .topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px 18px; border-bottom:1px solid rgba(255,255,255,.10);
}
.menu-drawer .topo .id{ display:flex; align-items:center; gap:11px; }
.menu-drawer .topo img{ width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.menu-drawer .topo strong{ display:block; font-family:var(--fonte-titulo); text-transform:uppercase; font-size:.95rem; letter-spacing:.05em; }
.menu-drawer .topo span{ display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dourado-claro); margin-top:3px; }
.menu-drawer .fechar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition);
}
.menu-drawer .fechar:hover{ background:rgba(255,255,255,.18); }

.menu-drawer nav{ padding:12px 12px; flex:1; overflow-y:auto; }
.menu-drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 14px; border-radius:var(--raio-sm);
  font-family:var(--fonte-titulo); text-transform:uppercase;
  font-size:1rem; letter-spacing:.05em; color:rgba(255,255,255,.9);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.menu-drawer nav a::after{
  content:'›'; font-family:var(--fonte-corpo); font-size:1.3rem;
  color:var(--dourado); opacity:0; transform:translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
.menu-drawer nav a:hover, .menu-drawer nav a:focus-visible{
  background:rgba(255,255,255,.07); color:#fff; padding-left:18px;
}
.menu-drawer nav a:hover::after, .menu-drawer nav a:focus-visible::after{ opacity:1; transform:translateX(0); }

.menu-drawer .rodape{ padding:18px 22px 26px; border-top:1px solid rgba(255,255,255,.10); }
.menu-drawer .rodape .btn{ width:100%; }
.menu-drawer .rodape .info{ margin-top:16px; font-size:.78rem; line-height:1.65; color:rgba(255,255,255,.6); }
.menu-drawer .rodape .info b{ color:#fff; display:block; font-weight:600; margin-bottom:2px; }

body.travado{ overflow:hidden; }

/* ── carrossel infinito das marcas ───────────────────────── */
.marcas-marquee{
  overflow:hidden; margin:44px auto 0; padding:10px 0;
  /* faixa contida, na largura de 4 marcas lado a lado.
     assim nao sobra deserto nas pontas numa tela larga. */
  width:min(100%, 888px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
/* sem gap no flex: o espacamento vive no margin do tile.
   assim uma copia tem largura exata e o loop nao ganha nem perde folga. */
.marcas-track{
  display:flex; gap:0; width:max-content; margin:0;
  animation: correMarcas 20s linear infinite;
  will-change:transform;
}
.marcas-marquee:hover .marcas-track{ animation-play-state:paused; }
@keyframes correMarcas{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-33.3333%,0,0); }   /* 3 copias, anda exatamente 1 */
}
@media (prefers-reduced-motion: reduce){
  .marcas-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .marcas-track .marca-tile:nth-child(n+5){ display:none; }
  .marcas-marquee{ -webkit-mask-image:none; mask-image:none; }
}

.marca-tile{
  width:196px; height:104px; margin-right:26px; flex:0 0 auto;
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  display:flex; align-items:center; justify-content:center;
  padding:22px 26px; box-shadow:none;
  filter:none; opacity:1;
  transition: border-color var(--transition), transform var(--transition);
}
.marca-tile:hover{ border-color:rgba(242,167,28,.55); transform:translateY(-2px); }
/* min-width:0 e o que impede o logo de estourar o retangulo:
   item flex nao encolhe abaixo do tamanho natural sem isso. */
.marca-tile img{
  min-width:0; min-height:0;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
}
/* a Moura e quase quadrada, as outras sao faixas largas.
   sem isso a Moura fica gigante e as outras minusculas. */
.marca-tile img[alt="Moura"], .marca-tile img[data-marca="moura"]{ max-height:56px; }

@media (max-width: 680px){
  .marca-tile{ width:158px; height:88px; margin-right:18px; padding:18px 20px; }
  .marcas-marquee{ width:100%; }
  .marca-tile img[alt="Moura"], .marca-tile img[data-marca="moura"]{ max-height:46px; }
}

/* ── acabamento geral ────────────────────────────────────── */
.card, .cat-card, .avaliacao-card, .mapa-card, .produto-card, .disk-box{ box-shadow:var(--sombra); }
.card:hover, .produto-card:hover{ box-shadow:var(--sombra-forte); }
.section-head{ margin-bottom:52px; }
.section-head h2{ letter-spacing:.005em; }
.hero{ padding:104px 0 110px; margin-top:calc(var(--header-h) * -1); padding-top:calc(104px + var(--header-h)); }
@media (max-width: 900px){
  .hero{ margin-top:-64px; padding-top:calc(84px + 64px); padding-bottom:84px; }
  section{ padding:68px 0; }
  .section-head{ margin-bottom:36px; }
}

/* ═══════════════════════════════════════════════════════════
   PAINEL ADMIN
   ═══════════════════════════════════════════════════════════ */
.admin-topbar{ position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(255,255,255,.08); }

/* preco: pilulas em vez de radio solto */
.preco-opcoes{ display:grid; grid-template-columns:1.25fr 1fr; gap:10px; margin-bottom:12px; }
.preco-opcoes label{
  display:flex !important; align-items:center; gap:9px;
  border:1px solid var(--borda); border-radius:10px; padding:11px 13px;
  background:#fff; cursor:pointer; font-size:.86rem; font-weight:600; margin:0;
  transition: border-color var(--transition), background var(--transition);
}
.preco-opcoes label:hover{ border-color:#c9d4e2; }
.preco-opcoes label:has(input:checked){ border-color:var(--azul); background:#f2f6fc; }

/* barra de busca e filtro da lista */
.lista-topo{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.lista-topo input, .lista-topo select{
  padding:10px 13px; border-radius:10px; border:1px solid var(--borda);
  font-family:inherit; font-size:.86rem; background:#fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lista-topo input{ flex:1 1 190px; min-width:0; }
.lista-topo select{ flex:0 0 auto; }
.lista-topo input:focus, .lista-topo select:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(44,95,158,.15);
}

.item-admin{ position:relative; }
.item-admin.editando{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(44,95,158,.13); }
.item-admin .info{ min-width:0; flex:1; }
.item-admin .info strong{ display:block; }
.item-admin .info small{ display:block; color:var(--cinza-texto); font-size:.78rem; margin-top:3px; }
.selo-destaque{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(242,167,28,.16); color:#8a5c04;
  font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; margin-left:7px; vertical-align:middle;
}
.icone-btn.excluir[data-confirmando="1"]{
  background:#c0392b; border-color:#c0392b; color:#fff; width:auto; padding:0 11px; font-size:.75rem; font-weight:700;
}
.btn[data-salvando]{ opacity:.65; pointer-events:none; }

@media (max-width: 680px){
  .admin-wrap{ padding:20px 16px 48px; }
  .painel{ padding:18px; }
  .preco-opcoes{ grid-template-columns:1fr; }
  .preco-opcoes label{ padding:12px 14px; }
  .linha-2{ grid-template-columns:1fr; }
  .admin-topbar{ padding:12px 16px; }
  .admin-topbar .marca-admin{ font-size:.85rem; gap:9px; }
  .admin-topbar .marca-admin img{ width:30px; height:30px; }
  .lista-produtos{ max-height:none; }
}

/* ── painel no celular ───────────────────────────────────── */
@media (max-width: 680px){
  /* o iOS da zoom sozinho em campo com fonte abaixo de 16px.
     no painel isso significa a tela pulando a cada toque. */
  .campo input, .campo select, .campo textarea,
  .lista-topo input, .lista-topo select{ font-size:16px; }

  /* alvo de toque: 32px e pequeno pra dedo, o minimo confortavel e 44 */
  .icone-btn{ width:44px; height:44px; border-radius:10px; font-size:1rem; }
  .item-admin .acoes{ gap:8px; }
  .item-admin{ padding:14px; gap:12px; }
  .item-admin .thumb{ width:52px; height:52px; }

  /* o rotulo inteiro vira area clicavel, nao so o quadradinho */
  .campo label.inline{ padding:10px 0; min-height:44px; }
  .preco-opcoes label{ min-height:52px; }

  .admin-topbar .btn-sm{ min-height:40px; padding:9px 16px; }
  .admin-topbar{ gap:10px; }
  .admin-cabecalho h1{ font-size:1.3rem; }

  /* busca em cima, filtro embaixo ocupando a linha toda */
  .lista-topo{ flex-direction:column; gap:8px; }
  .lista-topo input, .lista-topo select{ width:100%; flex:none; }

  .upload-box{ padding:22px 16px; }
  .selo-destaque{ margin-left:0; margin-top:4px; }
  .item-admin .info strong{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; }
}
.admin-topbar .marca-admin .txt-curto{ display:none; }
@media (max-width: 520px){
  /* "Painel Casa Baltazar" quebrava em duas linhas e inchava a barra */
  .admin-topbar .marca-admin .txt-longo{ display:none; }
  .admin-topbar .marca-admin .txt-curto{ display:inline; }
  .admin-topbar .marca-admin{ white-space:nowrap; }
}

@media (max-width: 520px){
  /* numa tela de 360px sobra ~120px pro nome com thumb + 2 botoes na
     mesma linha. os botoes descem pra linha propria e o nome respira. */
  .item-admin{ flex-wrap:wrap; }
  .item-admin .info{ flex:1 1 auto; }
  .item-admin .acoes{
    flex:1 0 100%; justify-content:flex-end; gap:10px;
    border-top:1px solid var(--borda); padding-top:10px; margin-top:4px;
  }
}