/* ===========================================================
   Star Buffet Piracicaba
   Paleta: céu noturno (base do hero) + estrela dourada (acento único
   reservado pros CTAs) + azul-céu, coral e menta só na tipografia.
   Nada de roxo/índigo. Base das seções é clara e quente.
   =========================================================== */

:root{
  /* neutros quentes, nunca #fff / #000 puros */
  --paper:#FBFAF7;
  --paper-2:#F2F6FF;
  --ink:#14203D;
  --ink-2:#4A5878;
  --ink-3:#8492AE;
  --line:#E4E8F2;

  /* céu noturno */
  --night:#111A3D;
  --night-2:#1C2A5C;

  /* acento ÚNICO: estrela */
  --star:#FFC53D;
  --star-2:#FFB01F;
  --on-star:#2A1D00;

  /* cores de apoio, só pra tipografia/ícone */
  --sky:#2E97EC;
  --coral:#FF6B8B;
  --mint:#17BE92;

  --wa:#25D366;

  --f-disp:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-s:10px; --r-m:18px; --r-l:28px;
  --sh:0 18px 45px -22px rgba(17,26,61,.45);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp); line-height:1.06; letter-spacing:-.015em; margin:0;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 100}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.sr-defs{position:absolute; width:0; height:0; overflow:hidden}
.ic{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--night); color:#fff; padding:.75rem 1.25rem; z-index:100}
.skip:focus{left:.5rem; top:.5rem}

/* cor na tipografia (o "alegre" pedido, sem virar arco-íris solto) */
.c1{color:var(--star)} .c2{color:var(--sky)} .c3{color:var(--coral)} .c4{color:var(--mint)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  background:linear-gradient(180deg,var(--star),var(--star-2)); color:var(--on-star);
  font-family:var(--f-body); font-weight:700; font-size:1rem; text-decoration:none;
  padding:.85rem 1.5rem; border-radius:999px; border:0; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(255,176,31,.9);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(255,176,31,.95)}
.btn-lg{font-size:1.06rem; padding:1.05rem 1.9rem}
.btn-sm{padding:.55rem 1.1rem; font-size:.94rem}
.btn-full{width:100%}
.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:600; color:var(--ink); border:2px solid var(--line);
  padding:.8rem 1.35rem; border-radius:999px; background:transparent; cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover{border-color:var(--sky); color:var(--sky)}
.lnk{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--ink);
  text-decoration:none; border-bottom:2px solid var(--star); padding-bottom:2px; margin-top:auto}
.lnk:hover{color:var(--sky); border-color:var(--sky)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(251,250,247,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
/* rolando pra baixo o cabeçalho sobe e some; rolando pra cima ele volta */
.hdr.recolhido{transform:translateY(-100%)}
/* a âncora do menu para ABAIXO do cabeçalho, não atrás dele */
html{scroll-behavior:smooth}
main section[id]{scroll-margin-top:90px}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-logo{height:46px; width:auto; object-fit:contain; display:block}
.logo-chip{display:inline-grid; place-items:center; background:var(--paper); border-radius:13px; padding:6px 8px; flex:0 0 auto}
.ft-marca{display:flex; align-items:center; gap:.7rem}
.brand-mark{width:38px; height:38px; border-radius:11px; background:var(--night);
  display:grid; place-items:center; color:var(--star); flex:0 0 auto}
.brand-mark .ic{width:20px; height:20px; fill:currentColor; stroke:none}
.brand-txt{font-family:var(--f-disp); font-weight:800; font-size:1.22rem; line-height:1}
.brand-txt b{color:var(--ink)}
.brand-txt small{display:block; font-family:var(--f-body); font-weight:600; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.nav{display:flex; align-items:center; gap:1.6rem}
.nav a{text-decoration:none; font-weight:600; font-size:.98rem; color:var(--ink-2)}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.btn{color:var(--on-star)}
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; gap:5px; align-items:center; justify-content:center}
.burger span{display:block; width:23px; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero: céu estrelado ---------- */
.hero{position:relative; background:linear-gradient(168deg,#0B1230 0%,var(--night) 34%,var(--night-2) 68%,#2C4088 100%);
  color:#fff; padding:clamp(3rem,7vw,5.5rem) 0 clamp(5rem,9vw,7rem); overflow:hidden; isolation:isolate}
/* ---------- céu estrelado: 3 camadas ----------
   nebulosa  = manchas suaves de luz ao fundo
   stars     = poeira de estrelinhas (pontos de tamanhos variados)
   brilhos   = as estrelas de 4 pontas com halo, que cintilam
   Tudo em CSS e SVG: sem imagem pra baixar, sem licença pra pagar,
   e nítido em qualquer tamanho de tela. */

.nebulosa{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 40% at 18% 22%, rgba(72,132,232,.30), transparent 70%),
    radial-gradient(40% 36% at 84% 30%, rgba(120,90,220,.20), transparent 72%),
    radial-gradient(52% 44% at 62% 86%, rgba(46,151,236,.22), transparent 70%);
  filter:blur(4px);}

.stars{position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2.6px 2.6px at 12% 18%, #fff 45%, transparent 60%),
    radial-gradient(1.7px 1.7px at 22% 47%, rgba(255,255,255,.85) 45%, transparent 60%),
    radial-gradient(2.1px 2.1px at 31% 12%, rgba(207,225,255,.9) 45%, transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 63%, rgba(255,255,255,.7) 45%, transparent 60%),
    radial-gradient(2.4px 2.4px at 46% 33%, #fff 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 54% 8%,  rgba(255,255,255,.8) 45%, transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 78%, rgba(255,255,255,.65) 45%, transparent 60%),
    radial-gradient(2.2px 2.2px at 66% 25%, rgba(255,197,61,.9) 45%, transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 55%, rgba(255,255,255,.75) 45%, transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 14%, #fff 45%, transparent 60%),
    radial-gradient(1.4px 1.4px at 86% 68%, rgba(207,225,255,.8) 45%, transparent 60%),
    radial-gradient(1.9px 1.9px at 92% 40%, rgba(255,255,255,.85) 45%, transparent 60%),
    radial-gradient(1.3px 1.3px at 7% 72%,  rgba(255,255,255,.7) 45%, transparent 60%),
    radial-gradient(2.0px 2.0px at 17% 88%, rgba(255,197,61,.7) 45%, transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 92%, rgba(255,255,255,.7) 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 63% 47%, rgba(255,255,255,.6) 45%, transparent 60%),
    radial-gradient(1.2px 1.2px at 77% 88%, rgba(255,255,255,.6) 45%, transparent 60%),
    radial-gradient(1.8px 1.8px at 96% 76%, rgba(255,255,255,.7) 45%, transparent 60%);}
.stars-sm{opacity:.55}

.brilhos{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.brilhos .fg{transform-box:fill-box; transform-origin:center}

@media (prefers-reduced-motion: no-preference){
  .stars{animation:poeira 6s ease-in-out infinite alternate}
  .brilhos .fg{animation:cintila 4.2s ease-in-out infinite}
  .brilhos .fg-b{animation-duration:5.6s; animation-delay:-1.4s}
  .brilhos .fg-c{animation-duration:3.4s; animation-delay:-2.6s}
}
@keyframes poeira{from{opacity:.6} to{opacity:1}}
@keyframes cintila{
  0%,100%{opacity:.35; transform:scale(.82)}
  50%    {opacity:1;   transform:scale(1.12)}
}

.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4rem); align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--star);
  background:rgba(255,197,61,.12); border:1px solid rgba(255,197,61,.32);
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1.4rem}
.display{font-size:clamp(2.5rem,5.6vw,4.15rem); font-weight:800; color:#fff;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 144}
.hero .lead{margin-top:1.35rem; font-size:clamp(1.02rem,1.7vw,1.2rem); color:#C9D3EC; max-width:34em}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem}
.tags span{font-size:.88rem; font-weight:600; color:#DDE5F8;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.35rem .95rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; align-items:center}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.32)}
.hero .btn-ghost:hover{border-color:var(--star); color:var(--star)}

.hero-img{position:relative}
.hero-img img{width:100%; aspect-ratio:4/3.15; object-fit:cover; border-radius:var(--r-l);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75); border:5px solid rgba(255,255,255,.1)}
.hero-badge{position:absolute; left:-14px; bottom:26px; display:inline-flex; align-items:center; gap:.45rem;
  background:var(--paper); color:var(--ink); font-weight:700; font-size:.86rem;
  padding:.6rem 1rem; border-radius:999px; box-shadow:var(--sh)}
.hero-badge .ic{width:16px; height:16px; fill:var(--star); stroke:none}

.clouds{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(52px,7vw,110px); z-index:1; display:block}

/* ---------- faixa de fatos ---------- */
.facts{background:var(--paper); padding:clamp(2rem,4vw,3rem) 0 0}
.facts-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.fact{display:flex; flex-direction:column; gap:.3rem; padding:1.25rem 1.35rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m)}
.fact .ic{width:26px; height:26px; color:var(--sky); margin-bottom:.35rem}
.fact:nth-child(2) .ic{color:var(--star)}
.fact:nth-child(3) .ic{color:var(--coral)}
.fact:nth-child(4) .ic{color:var(--mint)}
.fact b{font-size:1rem; line-height:1.3}
.fact span{font-size:.88rem; color:var(--ink-2); line-height:1.45}

/* ---------- seções ---------- */
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec-tint{background:var(--paper-2)}
.kicker{font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sky); margin-bottom:.7rem}
.kicker-l{color:var(--star)}
.h2{font-size:clamp(1.95rem,4.1vw,3.1rem); font-weight:800; max-width:16ch}
.h2-l{color:#fff; max-width:18ch}
.sub{margin-top:1rem; color:var(--ink-2); font-size:1.06rem; max-width:56ch}
.sec-dark .sub{color:#C4CFE8}
.note{margin-top:2rem; color:var(--ink-2); font-size:.96rem; max-width:60ch}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem}

.card{display:flex; flex-direction:column; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); padding:1.9rem 1.75rem 1.75rem; position:relative; overflow:hidden}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px}
.card-a::before{background:var(--star)} .card-b::before{background:var(--coral)} .card-c::before{background:var(--mint)}
.card-ic{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:.3rem}
.card-a .card-ic{background:var(--star); color:var(--on-star)}
.card-b .card-ic{background:var(--coral)}
.card-c .card-ic{background:var(--mint)}
.card-ic .ic{width:25px; height:25px}
.card h3{font-size:1.42rem; font-weight:800}
.card p{color:var(--ink-2); font-size:1rem}

/* ---------- split + mosaico ---------- */
.split{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split-map,.split-form{grid-template-columns:1fr 1fr; align-items:start}
.checks{margin:1.8rem 0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.2rem}
.checks li{position:relative; padding-left:1.9rem; font-size:1rem; color:var(--ink-2)}
.checks li::before{content:""; position:absolute; left:0; top:.42em; width:19px; height:19px; border-radius:50%;
  background:var(--star) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1D00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

.mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:1rem}
.mosaic figure{margin:0}
.mosaic img{width:100%; border-radius:var(--r-m); box-shadow:var(--sh)}
.m1 img{aspect-ratio:3/4; object-fit:cover}
.m2 img{aspect-ratio:1/1; object-fit:cover; margin-top:2rem}
.m3 img{aspect-ratio:1/1; object-fit:cover}
.m4 img{aspect-ratio:3/4; object-fit:cover; margin-top:-1.4rem}

/* ---------- pacotes ---------- */
.planos{align-items:stretch}
.plano{display:flex; flex-direction:column; gap:.65rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); padding:2rem 1.8rem; position:relative}
.plano-reco{border:2.5px solid var(--star); box-shadow:0 24px 50px -30px rgba(255,176,31,.9)}
.plano .tag{position:absolute; top:-13px; left:1.8rem; background:var(--star); color:var(--on-star);
  font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.32rem .85rem; border-radius:999px}
.plano h3{font-size:1.55rem; font-weight:800}
.plano-d{color:var(--ink-2); font-size:.98rem; min-height:3rem}
.plano ul{display:grid; gap:.55rem; margin:.6rem 0 1.4rem}
.plano li{position:relative; padding-left:1.55rem; font-size:.98rem; color:var(--ink-2)}
.plano li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--sky)}
.plano-reco li::before{background:var(--star)}

/* ---------- depoimentos (fundo noturno) ---------- */
.sec-dark{position:relative; background:linear-gradient(160deg,var(--night),var(--night-2)); color:#fff; overflow:hidden; isolation:isolate}
.sec-dark .wrap{position:relative; z-index:1}
/* colunas em cascata: acomoda depoimento curto e longo lado a lado sem buraco */
.deps{columns:3; column-gap:1.4rem; margin-top:2.6rem}
.dep{margin:0 0 1.4rem; break-inside:avoid; -webkit-column-break-inside:avoid;
  display:flex; flex-direction:column; gap:.9rem; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-l); padding:1.8rem 1.7rem}
.dep-destaque{background:rgba(255,197,61,.09); border-color:rgba(255,197,61,.3)}
.stars-row{display:flex; gap:.15rem; color:var(--star)}
.stars-row .ic{width:19px; height:19px; fill:currentColor; stroke:none}
.dep blockquote{margin:0; font-size:1.02rem; color:#D9E1F5; line-height:1.6}
.dep blockquote p+p{margin-top:.75rem}
.dep-cta{margin-top:.6rem; text-align:center}
.dep figcaption{display:grid; grid-template-columns:auto 1fr; gap:.15rem .75rem; align-items:center; margin-top:auto; padding-top:.4rem}
.dep .av{grid-row:span 2; width:42px; height:42px; border-radius:50%; background:rgba(255,197,61,.18);
  color:var(--star); display:grid; place-items:center; font-weight:800; font-size:1.05rem}
.dep b{font-size:1rem}
.dep small{color:#93A2C6; font-size:.84rem}

/* ---------- mapa ---------- */
.dl{margin-top:1.8rem; display:grid; grid-template-columns:auto 1fr; gap:.65rem 1.4rem; align-items:baseline}
.dl dt{font-weight:700; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.dl dd{margin:0; font-size:1.04rem}
.dl a{color:var(--sky); font-weight:600}
.map-wrap{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.map-wrap iframe{display:block; width:100%; aspect-ratio:4/3.4; border:0}

/* ---------- formulário ---------- */
.foto-side{margin:2rem 0 0}
.foto-side img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-m); box-shadow:var(--sh)}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.2rem);
  display:grid; gap:1.1rem; align-content:start}
.f{display:grid; gap:.4rem}
.f-2{grid-template-columns:1fr 1fr; gap:1rem}
.f-2>div{display:grid; gap:.4rem}
label{font-weight:700; font-size:.92rem}
.req{color:var(--coral)}
input,select,textarea{font-family:inherit; font-size:1rem; color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-s); padding:.75rem .9rem; background:#fff; width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--sky); outline:none}
textarea{resize:vertical}
.err{color:#C4304C; font-size:.86rem; font-weight:600}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#C4304C}
.form-note{font-size:.86rem; color:var(--ink-3); text-align:center}

/* ---------- rodapé ---------- */
.ft{background:var(--night); color:#C3CDE6; padding:clamp(3rem,5vw,4.5rem) 0 1.8rem; margin-top:0}
.ft-in{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem}
.ft-brand .brand-txt{display:block}
.ft-brand .brand-txt b{color:#fff}
.ft-brand p{margin-top:1.1rem; font-size:.96rem; max-width:34ch}
.ft h3{font-family:var(--f-body); font-size:.82rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--star); margin-bottom:.9rem}
.ft p{font-size:.96rem; margin-bottom:.55rem}
.ft a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28)}
.ft a:hover{color:var(--star); border-color:var(--star)}
.ft-bot{display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.14); margin-top:2.6rem; padding-top:1.4rem; font-size:.85rem; color:#8E9BBE}
.ft-bot p{color:#8E9BBE; margin:0}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{position:fixed; right:1.2rem; bottom:1.2rem; width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center; z-index:60;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.wa-float .ic{width:30px; height:30px; stroke-width:1.4}
@media (prefers-reduced-motion: no-preference){
  .wa-float{animation:wa-pulse 2.6s ease-out infinite}
}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}

/* ---------- cookies ---------- */
#cookie-bar{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:70; background:var(--night);
  color:#DCE3F5; border-radius:var(--r-m); padding:1rem 1.25rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:.9rem; box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  max-width:760px; margin-inline:auto; font-size:.92rem}
#cookie-bar[hidden]{display:none}
#cookie-bar a{color:var(--star)}
.cb-btns{display:flex; gap:.6rem}
#cookie-bar .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}

/* ---------- reveal (só com JS; sem JS tudo aparece) ---------- */
.js .reveal{opacity:0; transform:translateY(18px)}
@media (prefers-reduced-motion: no-preference){
  .js .reveal{transition:opacity .6s ease, transform .6s ease}
}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
  .hdr{transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ===================== RESPONSIVO ===================== */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr; gap:2.4rem}
  .hero-img{order:-1}
  .hero-img img{aspect-ratio:16/11}
  .hero-badge{left:auto; right:12px; bottom:-14px}
  .facts-in{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .deps{columns:2}
  .split,.split-map,.split-form{grid-template-columns:1fr; gap:2.4rem}
  .ft-in{grid-template-columns:1fr 1fr}
  .m2 img,.m4 img{margin-top:0}
}
@media (max-width:760px){
  body{font-size:17px}
  .burger{display:flex}
  .nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1.4rem;
    box-shadow:0 20px 40px -24px rgba(17,26,61,.5); display:none}
  .nav.open{display:flex}
  .nav a{padding:.95rem .25rem; border-bottom:1px solid var(--line); font-size:1.05rem}
  .nav a.btn{margin-top:.9rem; border-bottom:0; justify-content:center}
  .facts-in{grid-template-columns:1fr}
  .brand-logo{height:40px}
  /* as 3 etiquetas cabem numa linha so: fonte e respiro menores, sem quebrar palavra */
  .tags{flex-wrap:nowrap; gap:.34rem; justify-content:flex-start}
  .tags span{font-size:.7rem; padding:.3rem .58rem; white-space:nowrap; letter-spacing:-.005em}
  /* botao secundario centralizado embaixo do principal */
  .cta-row{flex-direction:column; align-items:stretch}
  .cta-row .btn-ghost{align-self:center}
  .deps{columns:1}
  .checks{grid-template-columns:1fr}
  .f-2{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr; gap:2rem}
  .mosaic{gap:.7rem}
  .hero-badge{font-size:.78rem; padding:.5rem .85rem}
  #cookie-bar{flex-direction:column; align-items:stretch; text-align:center}
  .cb-btns{justify-content:center}
}

/* celulares bem estreitos (iPhone SE e afins): as etiquetas precisam de mais folga */
@media (max-width:365px){
  .tags{gap:.28rem}
  .tags span{font-size:.645rem; padding:.28rem .48rem}
}