/* ============================================================
   HERO (section 1) — Proteção Brasil
   ============================================================ */

/* ---------- Base compartilhada ---------- */
:root {
  --azul: #001994; --azul-escuro: #000f5c; --azul-2: #0a2bb5; --azul-claro: #eef1ff;   --azul-noite:#08122e;   --ink:#eef3ff;
  --dourado: #c9a227; --dourado-claro: #e6c25a; --dourado-escuro: #a8841c;
  --verde: #16a34a; --verde-claro: #22c55e; --verde-escuro: #15803d; --whatsapp: #25d366;
  --texto: #1f2733; --texto-suave: #5a6a7a; --branco: #ffffff; --cinza-fundo: #f5f7fd; --borda: #dfe4f2;
  --sombra: 0 8px 30px rgba(0,25,148,.10); --sombra-forte: 0 24px 60px rgba(0,15,92,.28); --raio: 14px;
  --fonte-titulo: 'Montserrat','Segoe UI',Arial,sans-serif;
  --fonte-texto: 'Open Sans','Segoe UI',Arial,sans-serif;
    --ft:'Sora',system-ui,sans-serif;      /* títulos */
  --fc:'Inter',system-ui,sans-serif;     /* corpo */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }
body {   font-family:var(--fc);background:var(--azul-noite);color:var(--ink);
 line-height: 1.6; background: #000c4a; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; text-align: center;
  color: var(--branco); padding: 128px 0 96px; overflow: hidden;
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(201,162,39,.30), transparent 60%),
    radial-gradient(760px 560px at 12% 115%, rgba(10,43,181,.6), transparent 62%),
    linear-gradient(160deg, #001994 0%, #001573 52%, #000c4a 100%);
}
/* textura de grade (fluindo) + brasão de fundo */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(900px 600px at 50% 30%, #000, transparent 72%);
  mask-image: radial-gradient(900px 600px at 50% 30%, #000, transparent 72%);
  animation: grade-flui 26s linear infinite;
}
@keyframes grade-flui { from { background-position: 0 0, 0 0; } to { background-position: 46px 46px, 46px 46px; } }
.hero::after {
  content: ""; position: absolute; right: -120px; bottom: -140px; width: 520px; height: 520px;
  background: url("../../img/logo-branco.png") center/contain no-repeat;
  opacity: .05; transform: rotate(-8deg); pointer-events: none;
}

/* luzes de fundo animadas (aurora) */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-fx .blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .55; mix-blend-mode: screen; will-change: transform;
}
.hero-fx .b2 { width: 640px; height: 640px; right: -12%; top: 8%;
  background: radial-gradient(circle, rgba(38,86,255,.55), transparent 66%); animation: blob-b 24s ease-in-out infinite; }
.hero-fx .b3 { width: 480px; height: 480px; left: 26%; bottom: -20%;
  background: radial-gradient(circle, rgba(120,160,255,.45), transparent 68%); animation: blob-c 28s ease-in-out infinite; }
@keyframes blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-140px,60px) scale(1.12); } }
@keyframes blob-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-90px) scale(1.22); } }

.hero-inner {
  position: relative; z-index: 1; width: min(1200px, 92%); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 20px; text-align: left;
}
.hero-copy { min-width: 0; order: 1; animation: hero-entra .8s ease-out both; }

/* Imagem dos veículos — texto à esquerda, imagem à direita */
.hero-logo { margin: 0; display: flex; justify-content: center; order: 2; position: relative; animation: hero-entra 1s ease-out .1s both; }
.truck-stage { position: relative; width: 100%; max-width: 760px; margin: 0 auto; }
.hero-logo img.truck-img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; max-width: 760px; max-height: 84vh; margin: 0 auto;
  filter: drop-shadow(0 24px 46px rgba(0,0,0,.5)); animation: hero-flutua 4.5s ease-in-out infinite;
}

/* luz/spotlight atrás do caminhão */
.spotlight { position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none; }
.spotlight::before {
  content: ""; position: absolute; inset: 6% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(230,194,90,.55), rgba(90,130,255,.22) 46%, transparent 74%);
  filter: blur(30px); animation: halo-pulsa 5.5s ease-in-out infinite;
}
.spotlight::after {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(230,194,90,.28) 72%, rgba(255,240,190,.12) 80%, transparent 88%);
  filter: blur(26px); mix-blend-mode: screen; animation: spot-spin 16s linear infinite;
}
@keyframes spot-spin { to { transform: rotate(360deg); } }

/* halo dourado pulsando atrás do caminhão */
.hero-logo::before {
  content: ""; position: absolute; inset: 14% 6%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(230,194,90,.30), rgba(10,43,181,.20) 55%, transparent 78%);
  filter: blur(16px); animation: halo-pulsa 5s ease-in-out infinite;
}
@keyframes hero-flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes hero-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes halo-pulsa { 0%,100% { opacity: .6; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- Coberturas orbitando o caminhão (3D via z-index) ---------- */
.orbit { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
.orb { position: absolute; top: var(--top); left: var(--left); transform: translate(-50%, -50%); }
/* posições ao redor do caminhão (desktop) */
.orb.p1 { --top: 74%; --left: -3%; }
.orb.p2 { --top: 7%;  --left: 15%; }
.orb.p3 { --top: 3%;  --left: 73%; }
.orb.p4 { --top: 72%; --left: 78%; }
.orb.p5 { --top: 92%; --left: 38%; }
.orb.p6 { --top: 42%; --left: 96%; }
.orb-card {
  display: flex; align-items: center; gap: 8px; padding: 8px 15px 8px 8px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(10,22,58,.82), rgba(10,22,58,.5));
  border: 1px solid rgba(230,194,90,.4);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  font-size: 1.12rem; font-weight: 700; letter-spacing: .01em; color: #fff; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  pointer-events: auto; animation: orb-float 6s ease-in-out infinite;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.orb-card:hover { border-color: rgba(230,194,90,.8); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 22px rgba(230,194,90,.35); }
.orb .ico-wrap {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,194,90,.55), rgba(230,194,90,.12));
  box-shadow: inset 0 0 0 1px rgba(230,194,90,.35);
}
.orb svg { width: 15px; height: 15px; flex: none; color: var(--dourado-claro); }
/* profundidade */
.orb.front { z-index: 3; }
.orb.back  { z-index: 0; }
.orb.back .orb-card { font-size: 1.02rem; padding: 7px 13px 7px 7px; opacity: .82; filter: saturate(.85) brightness(.92); }
.orb.back .ico-wrap { width: 24px; height: 24px; }
.orb:nth-child(1) .orb-card { animation-delay: 0s; }
.orb:nth-child(2) .orb-card { animation-delay: -1.4s; }
.orb:nth-child(3) .orb-card { animation-delay: -2.6s; }
.orb:nth-child(4) .orb-card { animation-delay: -3.4s; }
.orb:nth-child(5) .orb-card { animation-delay: -4.7s; }
.orb:nth-child(6) .orb-card { animation-delay: -5.5s; }
@keyframes orb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -.015em;
  margin-bottom: 20px; text-shadow: 0 6px 26px rgba(0,0,0,.28);
}
/* preço com brilho dourado varrendo */
.hero h1 .destaque {
  background: linear-gradient(110deg, var(--dourado-claro) 0%, #fff7d6 18%, var(--dourado-claro) 36%, var(--dourado-claro) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: preco-brilho 3.4s linear infinite;
}
@keyframes preco-brilho { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* "sem susto." — degradê prateado com reflexo indo e voltando */
.hero h1 .sem-susto {
  font-size: 0.66em;
  background: linear-gradient(100deg, #f2f5fa 0%, #cfd9e9 38%, #93a9d2 72%, #5f7fc0 100%);
  background-size: 190% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-shadow: none;
  animation: susto-sheen 6s ease-in-out infinite alternate;
}
@keyframes susto-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* aproxima o texto de apoio da caixa de preço */
.hero .preco-wrap { margin-bottom: 8px; }

.hero-lead {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  margin-top: 2px; padding: 12px 16px; max-width: 50ch;
  font-size: 1.02rem; line-height: 1.6; letter-spacing: .015em; word-spacing: .06em;
  text-align: center; color: rgba(255,255,255,.88); font-weight: 500;
}
.hero-lead .lead-ico {
  flex: none; width: 28px; height: 28px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,194,90,.32), rgba(230,194,90,.08));
  box-shadow: inset 0 0 0 1px rgba(230,194,90,.3); color: var(--dourado-claro);
}
.hero-lead .lead-ico svg { width: 16px; height: 16px; }
.hero-lead .realce {
  color: var(--dourado-claro); font-weight: 700; letter-spacing: .02em;
}

/* linha fina dourada sob "À partir de R$ 98,48" */
.hero h1 .preco-linha { position: relative; display: inline-block; white-space: nowrap; font-size: 0.5em; padding-bottom: 16px; }
.hero h1 .preco-linha::after {
  content: ""; position: absolute; left: -16%; right: -16%; bottom: 4px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--dourado) 22%, var(--dourado) 78%, transparent 100%);
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1;
  color: rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  animation: flutua 2s ease-in-out infinite;
}
.hero-scroll svg { width: 22px; height: 22px; }
@keyframes flutua { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 8px; width: min(560px, 92%); }
  .hero-copy { order: 1; padding-top: 6%; display: flex; flex-direction: column; align-items: center; }
  .hero-logo { order: 2; margin-bottom: 14px; }
  .truck-stage { max-width: 470px; }
  .hero-logo img.truck-img { width: clamp(240px, 75vw, 470px); max-width: 100%; max-height: none; margin: 0 auto; }
  /* orbit 3D com rótulo, compacto pra caber na tela */
  .orb-card { font-size: .9rem; padding: 6px 12px 6px 6px; gap: 6px; }
  .orb .ico-wrap { width: 25px; height: 25px; }
  .orb svg { width: 13px; height: 13px; }
  .orb.back .orb-card { font-size: .86rem; padding: 6px 11px 6px 6px; opacity: .9; }
  .orb.back .ico-wrap { width: 23px; height: 23px; }
  /* posições em 3 linhas (topo/meio/base) dentro dos limites da imagem */
  .orb.p2 { --top: 7%;  --left: 27%; }  /* topo-esq  fundo  (Colisão)     */
  .orb.p3 { --top: 7%;  --left: 73%; }  /* topo-dir  fundo  (Incêndio)    */
  .orb.p1 { --top: 46%; --left: 20%; }  /* meio-esq  frente (Roubo)       */
  .orb.p6 { --top: 46%; --left: 82%; }  /* meio-dir  fundo  (Muito +)     */
  .orb.p5 { --top: 90%; --left: 27%; }  /* base-esq  frente (Rastreador)  */
  .orb.p4 { --top: 90%; --left: 72%; }  /* base-dir  frente (Reboque 24h) */
  .hero-lead { align-self: center; margin-inline: auto; max-width: min(560px, 94%); text-align: center; }
}
@media (max-width: 640px) {
  .hero { min-height: 100svh; padding: 74px 0 8px; align-items: center; }
  .hero-inner { gap: 2px; align-content: center; text-align: center; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: 12vw; line-height: 0.9; margin-bottom: 2px; text-align: center; }
  .hero h1 .sem-susto { font-size: 13.5vw; line-height: 0.95; display: inline-block; }
  .hero h1 .preco-linha { padding-bottom: 10px; }
  .hero .preco-wrap { margin-bottom: 2px; }
  .hero .preco-box { padding: 10px 30px 8px; margin: 8px auto 6px; max-width: calc(100vw - 48px); }
  .hero .preco-box .valor { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .hero-lead { font-size: .88rem; line-height: 1.4; text-align: center; max-width: min(520px, 92%); padding: 9px 14px; margin-top: -16px; margin-inline: auto; }
  .orb-card { font-size: .84rem; padding: 6px 11px 6px 6px; }
  .orb.back .orb-card { font-size: .8rem; }
  .orb .ico-wrap { width: 24px; height: 24px; }
  .orb svg { width: 13px; height: 13px; }
  .hero-logo img.truck-img { width: 100%; max-width: 100%; max-height: 42vh; object-fit: contain; }
  .hero-scroll { display: none; }
}
/* telas baixas: aperta o texto e diminui a caixa de preço (sem mexer no
   tamanho do caminhão) p/ nada cortar e o título não encostar na nav */
@media (max-width: 640px) and (max-height: 720px) {
  .hero { padding-top: 66px; }
  .hero-inner { gap: 0; }
  .hero h1 { margin-bottom: 0; }
  .hero .preco-wrap { margin-bottom: 0; }
  .hero .preco-box { padding: 6px 22px 4px; margin: 4px auto 4px; border-radius: 14px; }
  .hero .preco-box .apartir { font-size: .64rem; letter-spacing: .1em; }
  .hero .preco-box .valor { font-size: clamp(1.15rem, 6.4vw, 1.55rem); }
  .hero .preco-nota { font-size: .55rem; margin-top: 1px; }
  .hero-lead { font-size: .82rem; line-height: 1.32; padding: 7px 12px; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll, .hero-logo img, .hero-copy, .hero-logo,
  .hero-fx .blob, .orb-card, .spotlight::before, .spotlight::after { animation: none; }
  .hero h1 .destaque, .hero h1 .sem-susto, .hero-logo::before, .hero::before { animation: none; }
}



.hl{font-size:clamp(2.3rem,10.5vw,4.4rem);margin-bottom:4px;cursor:default;display:inline-block}
.hl .l1{display:block;color:#fff;transition:transform .35s var(--ease),letter-spacing .35s var(--ease)}
.hl .l2{display:block;position:relative;
  background:linear-gradient(100deg,#fff 8%,#cfe0ff 42%,#7f9fe0 92%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:sheen 6s ease-in-out infinite alternate;
  transition:transform .35s var(--ease)}
@keyframes sheen{from{background-position:0 0}to{background-position:100% 0}}
.hl .l2::after{content:"";position:absolute;left:50%;bottom:-6px;height:3px;width:0;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);transform:translateX(-50%);
  transition:width .4s var(--ease)}
.hl:hover .l1{transform:translateY(-4px);letter-spacing:.01em}
.hl:hover .l2{transform:translateY(3px) scale(1.03)}
.hl:hover .l2::after{width:86%}

/* animação letra a letra (o JS envolve cada caractere da l1 em .ch e define --i) */
.hl.rv .l1 .ch{
  display:inline-block; opacity:0; transform:translateY(60%) rotateX(-60deg);
  transform-origin:50% 100%;
  animation:letra-entra .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--d,0s) + var(--i,0) * 35ms);
}
.hl.rv .l1 .ch.sp{width:.32em}
@keyframes letra-entra{
  to{opacity:1; transform:translateY(0) rotateX(0)}
}

/* .l2 mantém o gradiente/sheen intacto (não pode ser fatiada em spans) e entra como bloco único */
.hl.rv .l2{
  opacity:0; transform:translateY(40%);
  animation:l2-entra .55s cubic-bezier(.2,.7,.2,1) forwards, sheen 6s ease-in-out .55s infinite alternate;
  animation-delay:calc(var(--d,0s) + 380ms), calc(var(--d,0s) + 380ms);
}
@keyframes l2-entra{
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .hl.rv .l1 .ch{animation:none; opacity:1; transform:none}
  .hl.rv .l2{animation:sheen 6s ease-in-out infinite alternate; opacity:1; transform:none}
}




.depo-sec{background:var(--azul-noite);overflow:hidden}
.depo-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.depo-bg video,.depo-bg img{width:100%;height:100%;object-fit:cover;opacity:.10;filter:grayscale(.4) contrast(1.1)}
.depo-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--azul-noite) 0%,rgba(8,18,46,.55) 40%,rgba(8,18,46,.55) 60%,var(--azul-noite) 100%)}
.depo-sec .wrap{position:relative;z-index:1}
.depo-sec .eyebrow{margin-bottom:6px}
.depo-sec h2.tt{margin-bottom:22px}   /* título colado nos cards */
.depos{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:none}
.depos::-webkit-scrollbar{display:none}
.depo{flex:0 0 86%;scroll-snap-align:center;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,rgba(42,79,184,.22),rgba(255,255,255,.05));
  border:1px solid var(--linha);transition:transform .22s var(--ease),border-color .22s ease,box-shadow .22s ease}
.depo:hover{transform:translateY(-5px);border-color:rgba(230,194,90,.5);box-shadow:0 26px 56px rgba(0,0,0,.5)}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;background:#000}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s,transform .35s var(--ease)}
.yt:hover img{opacity:1;transform:scale(1.05)}
.yt .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yt .pl i{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--ok),var(--ok-2));box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:pulso 2.2s infinite;transition:transform .2s var(--ease)}
.yt:hover .pl i{transform:scale(1.12)}
@keyframes pulso{70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.yt .pl svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.depo iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.depo .corpo{padding:16px 16px 18px}
.depo .fala{font-family:var(--ft);font-weight:700;font-size:1rem;line-height:1.35;color:#fff;margin-bottom:12px}
.depo .quem{display:flex;align-items:center;gap:11px}
.depo .av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ft);font-weight:800;font-size:1rem;color:var(--azul-esc);
  background:linear-gradient(135deg,var(--ouro-claro),var(--ouro-esc))}
.depo .quem b{display:block;font-size:.88rem;color:#fff;font-family:var(--fc);font-weight:600}
.depo .quem span{display:block;font-size:.76rem;color:var(--ink-dim)}
.depo .stars{color:var(--ouro);font-size:.82rem;letter-spacing:2px;margin-top:2px}
.dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .2s,width .2s}
.dots button.on{background:var(--ouro);width:22px;border-radius:5px}


.preco-box{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin:5px auto 16px;padding:16px 130px 12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(230,194,90,.14),rgba(230,194,90,.05));border:1.5px solid rgba(230,194,90,.55);
  box-shadow:0 0 0 6px rgba(230,194,90,.06),0 22px 50px rgba(0,0,0,.4);
  animation:preco-in .9s .2s var(--ease) both,preco-glow 3.6s 1.1s ease-in-out infinite}
@keyframes preco-in{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes preco-glow{0%,100%{box-shadow:0 0 0 6px rgba(230,194,90,.06),0 22px 50px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 10px rgba(230,194,90,.12),0 22px 60px rgba(230,194,90,.22)}}
.preco-box .apartir{font-family:var(--fc);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-claro);opacity:.9}
/* gradiente dourado ESTÁTICO — sem animar background-position (evita os
   caracteres "pulando"/tremendo, artefato de repaint no background-clip:text) */
.preco-box .valor{font-family:var(--ft);font-weight:800;font-size:clamp(1.9rem,8vw,3.2rem);line-height:1.05;white-space:nowrap;
  background:linear-gradient(110deg,var(--ouro-esc) 0%,#fff6d5 45%,var(--ouro) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(230,194,90,.28))}
.preco-box .valor sup{font-size:.44em;vertical-align:super;-webkit-text-fill-color:var(--ouro);margin-left:2px}
.preco-box .mes{font-family:var(--fc);font-size:.9rem;font-weight:600;color:var(--ink-dim)}
.preco-nota{display:block;font-size:.66rem;color:var(--ink-dim);opacity:.75;margin-top:4px;letter-spacing:.02em}

.hero p.lede{font-size:1rem;font-weight:400;color:var(--ink-dim);max-width:520px;margin:0 auto 22px}
.hero p.lede b{color:#fff;font-weight:600}

.bens{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:24px}
.bens span{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:#dbe5ff;
  border:1px solid var(--linha);background:var(--card);padding:9px 15px;border-radius:999px;
  transition:transform .2s var(--ease),border-color .2s ease,background .2s ease}
.bens span:hover{transform:translateY(-3px);border-color:rgba(230,194,90,.55);background:rgba(230,194,90,.12)}
.bens svg{width:16px;height:16px;color:var(--ouro);flex-shrink:0}

.selo-linha{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:.8rem;color:var(--ink-dim)}
.selo-linha b{color:var(--ok)}





/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--fonte-titulo); font-weight: 800; text-decoration: none; text-align: center;
  border-radius: 999px; cursor: pointer; border: 2px solid transparent; line-height: 1.1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn-verde {
  background: linear-gradient(180deg, var(--verde-claro), var(--verde)); color: var(--branco);
  padding: 15px 34px; box-shadow: 0 10px 24px rgba(22,163,74,.34);
}
.btn-verde:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22,163,74,.45); }
.btn svg { width: 20px; height: 20px; }
@keyframes btn-pulsa { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.btn-pulse { animation: btn-pulsa 1.4s ease-in-out infinite; }
.btn-pulse:hover { animation-play-state: paused; }

/* ---------- Header flutuante (pill) ---------- */
.site-nav {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: center; pointer-events: none;
}
.nav-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 28px;
  width: min(1040px, 92%); padding: 10px 12px 10px 24px; border-radius: 18px;
  background: rgba(0,12,74,.55); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 12px 34px rgba(0,8,46,.32);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-nav.scrolled .nav-pill { background: rgba(0,10,60,.92); box-shadow: 0 14px 40px rgba(0,8,46,.5); }

.nav-logo { display: flex; align-items: center; }
/* logo maior que a pill: "bordas saindo" para fora do menu */
.nav-logo img { height: 90px; width: auto; display: block; margin: -28px 0; filter: drop-shadow(0 6px 16px rgba(0,8,46,.45)); }

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(180deg, var(--verde-claro), var(--verde));
  color: #fff; box-shadow: 0 12px 28px rgba(22,163,74,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(22,163,74,.55); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: wa-pulso 2.4s infinite;
}
@keyframes wa-pulso { 70% { box-shadow: 0 0 0 14px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (max-width: 640px) { .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; } .wa-float svg { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

.nav-links { list-style: none; display: flex; align-items: center; gap: 30px; margin: auto; }
.nav-links a {
  color: rgba(255,255,255,.88); text-decoration: none; font-family: var(--fonte-titulo);
  font-weight: 700; font-size: .95rem; transition: color .15s ease;
}
.nav-links a:hover { color: var(--dourado-claro); }
.nav-cta { padding: 12px 26px; font-size: .95rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-pill { padding: 8px 8px 8px 18px; justify-content: space-between; }
}
@media (max-width: 640px) {
  .nav-logo img { height: 90px; margin: -20px 0; }
}
@media (prefers-reduced-motion: reduce) { .btn-pulse { animation: none; } }

/* ---------- Galeria de imagens (carrossel) ---------- */
.galeria { background: #ffffff; overflow: hidden; }
.galeria .wrap { text-align: center; }
.galeria .eyebrow { color: var(--dourado-escuro); }
.galeria h2.tt { color: var(--azul); }
.galeria h2.tt em { color: var(--dourado-escuro); }
.gal-stage { position: relative; margin-top: 26px; }
.gal-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 12px 16px; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-item {
  flex: 0 0 88%; scroll-snap-align: center; margin: 0;
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(14,28,71,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gal-item:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(14,28,71,.3); }
.gal-item img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain;
  background: linear-gradient(165deg, #eef1ff, #f7f9ff);
  transition: transform .4s ease;
}
.gal-item:hover img { transform: scale(1.03); }
.gal-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.gal-arrow {
  position: absolute; top: calc(50% - 8px); transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(14,28,71,.14); background: rgba(255,255,255,.94); color: var(--azul);
  box-shadow: 0 12px 28px rgba(14,28,71,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.gal-arrow svg { width: 22px; height: 22px; }
.gal-arrow--prev { left: 4px; }
.gal-arrow--next { right: 4px; }
.gal-arrow:hover { background: var(--azul); color: #fff; transform: translateY(-50%) scale(1.07); }
@media (min-width: 640px) { .gal-item { flex-basis: calc((100% - 32px) / 2.4); } }
@media (min-width: 900px) {
  .gal-item { flex-basis: calc((100% - 48px) / 3); }
  .gal-item img { aspect-ratio: 3 / 4; }
  .gal-arrow { display: flex; }
}
.gal-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.gal-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(14,28,71,.22); transition: background .2s, width .2s; }
.gal-dots button.on { background: var(--dourado-escuro); width: 22px; border-radius: 5px; }

/* ---------- Ícone de cabeçalho de seção ---------- */
.sec-ico {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado-escuro));
  color: #0e1c47; box-shadow: 0 12px 26px rgba(201,162,39,.35);
}
.sec-ico svg { width: 27px; height: 27px; }

/* ---------- Rodapé ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(160deg, #001573 0%, #000c4a 100%);
  color: rgba(255,255,255,.72);
  text-align: center;
  padding: 54px 20px 60px;
  font-size: .9rem; line-height: 1.6;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}
.site-footer .wrap { width: min(760px, 92%); margin: 0 auto; }
.site-footer img { height: 84px; width: auto; margin: 0 auto 18px; filter: drop-shadow(0 6px 16px rgba(0,8,46,.5)); }
.site-footer p { margin: 4px 0; }
.site-footer strong { font-family: var(--fonte-titulo); font-weight: 800; }
.site-footer a { color: var(--dourado-claro); text-decoration: none; font-weight: 600; transition: color .15s ease; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* contatos com ícone (WhatsApp / e-mail) */
.site-footer .foot-contatos {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin: 12px 0 4px; padding: 0;
}
.site-footer .foot-contatos li { display: inline-flex; align-items: center; gap: 8px; }
.fc-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(230,194,90,.14); border: 1px solid rgba(230,194,90,.35);
  color: var(--dourado-claro);
}
.fc-ico svg { width: 16px; height: 16px; }

.site-footer .foot-enderecos {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  max-width: 720px; margin: 22px auto 0; text-align: left;
}
.site-footer .foot-end {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px 16px;
}
.site-footer .foot-end .fc-ico { margin-top: 1px; }
.site-footer .foot-end strong {
  display: block; color: var(--dourado-claro); font-family: var(--fonte-titulo);
  font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px;
}
.site-footer .foot-end div span { display: block; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.7); }
@media (min-width: 720px) { .site-footer .foot-enderecos { grid-template-columns: 1fr 1fr; } }
.site-footer .legal {
  margin-top: 18px; max-width: 620px; margin-inline: auto;
  font-size: .76rem; line-height: 1.5; color: rgba(255,255,255,.5);
}