/* ==========================================================================
   Brownico | folha de estilo única
   Paleta e regras vindas de identidade/design-guide.md.
   Repaginação de 30/09/2026: foto real dos sabores, vitrine por sabor,
   depoimentos em faixa rolando e dúvidas em accordion. Os padrões de
   componente (botão, badge, accordion, foco) seguem o shadcn/ui; a vitrine
   e a faixa de depoimentos vieram do catálogo do 21st.dev, reescritas em
   CSS puro pra não depender de React nem de build.
   ========================================================================== */

/* Inter servida pelo próprio site: sem Google Fonts, sem requisição externa */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
}

:root{
  --navy:#0D2340;
  --navy-2:#132d52;
  --red:#D7262E;
  --red-2:#b81f26;
  --cream:#F7EFE6;
  --white:#FFFFFF;
  --navy-soft:#3C4A5C;
  --linha:rgba(13,35,64,.12);
  --pink:#FF8A8A;
  --ring:0 0 0 3px var(--white),0 0 0 6px var(--red);
  --max:1160px;
  --raio:16px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px; /* link de âncora não esconde o título atrás do header fixo */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* tela fixa: sem zoom de pinça ou duplo toque (o iPhone completa em js/tela-fixa.js) */
  touch-action:pan-x pan-y;
  overscroll-behavior:none;
}
body{
  background:var(--cream);
  color:var(--navy);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* sem selecionar nem copiar texto; os campos do montador continuam editáveis */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input,select,textarea{-webkit-user-select:text;user-select:text}
img,picture,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* foco visível só pra quem navega no teclado (anel duplo, estilo shadcn) */
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);border-radius:8px}
.btn:focus-visible{box-shadow:var(--ring)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.pular{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--red);color:var(--white);font-weight:800;
  padding:12px 18px;border-radius:999px;transition:top .15s;
}
.pular:focus-visible{top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* --- xadrez croata ------------------------------------------------------ */
.xadrez{
  background-color:var(--white);
  background-image:
    linear-gradient(45deg,var(--red) 25%,transparent 25%,transparent 75%,var(--red) 75%),
    linear-gradient(45deg,var(--red) 25%,transparent 25%,transparent 75%,var(--red) 75%);
  background-size:36px 36px;
  background-position:0 0,18px 18px;
}
.faixa{height:18px;width:100%}

/* --- header ------------------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--navy);
  border-bottom:3px solid var(--red);
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:46px;height:46px;object-fit:contain;background:var(--cream);border-radius:50%;padding:3px}
.marca span{
  color:var(--white);font-weight:900;font-size:22px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  color:rgba(255,255,255,.78);font-weight:600;font-size:15px;
  letter-spacing:.01em;transition:color .15s;
}
.nav a:not(.btn){position:relative;padding:6px 0}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s;
}
@media (hover:hover){
  .nav a:hover{color:var(--white)}
  .nav a:not(.btn):hover::after{transform:scaleX(1)}
}
.nav .btn{margin-left:4px;color:var(--white)}

/* --- botões ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--red);color:var(--white);
  font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:5px 5px 0 rgba(13,35,64,.45);
  transition:transform .12s, box-shadow .12s, background-color .15s;
  white-space:nowrap;
}
.btn svg{width:20px;height:20px;flex:none}
/* hover só em quem tem mouse: no celular o toque deixava o efeito grudado */
@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(13,35,64,.45)}
}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(13,35,64,.45)}
.btn-grande{font-size:18px;padding:20px 40px}
.btn-branco{background:var(--white);color:var(--red)}
.btn-contorno{
  background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.85);
}
@media (hover:hover){
  .btn-contorno:hover{background:var(--white);color:var(--navy);box-shadow:5px 5px 0 var(--red)}
}
.btn-contorno:active{box-shadow:inset 0 0 0 3px var(--white)}

/* badge: pílula pequena, maiúscula (badge do shadcn com o peso da marca) */
.tag{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:var(--red);color:var(--white);
  padding:6px 12px;border-radius:999px;
}
.tag-navy{background:var(--navy)}
.tag-branca{background:var(--white);color:var(--navy)}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:var(--white);overflow:hidden;padding:0}
.hero::before{
  /* brilho discreto atrás da foto, sem imagem extra */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 45%,rgba(215,38,46,.28),transparent 70%);
}
.hero .wrap{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  align-items:center;padding-top:64px;padding-bottom:72px;
}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:var(--pink);
}
.hero h1{
  font-size:clamp(44px,6.6vw,84px);font-weight:900;line-height:.98;
  letter-spacing:-.045em;text-transform:uppercase;margin-top:18px;
  text-shadow:6px 6px 0 var(--red);
}
.hero p{
  font-size:19px;line-height:1.6;color:rgba(255,255,255,.84);
  max-width:470px;margin-top:26px;
}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .btn-grande{font-size:17px;padding:19px 30px}
.hero-nota{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.6);margin-top:24px;
}
.hero-nota svg{width:18px;height:18px;color:var(--pink);flex:none}

/* foto do produto em moldura, com o chef espiando no canto */
.hero-foto{position:relative;justify-self:center;width:min(520px,100%)}
.hero-foto .moldura{
  position:relative;border-radius:22px;overflow:hidden;
  border:5px solid var(--white);background:#e9e7e4;
  box-shadow:14px 14px 0 var(--red);
  transform:rotate(2deg);
}
.hero-foto .moldura img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-foto .chef{
  position:absolute;left:-58px;bottom:-40px;width:150px;
  filter:drop-shadow(6px 8px 0 rgba(0,0,0,.28));
  transform:rotate(-4deg);
}
.hero-foto .selo-giro{
  position:absolute;right:-22px;top:-26px;width:118px;height:118px;
  border-radius:50%;background:var(--red);color:var(--white);
  display:grid;place-items:center;text-align:center;
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.15;
  box-shadow:0 0 0 5px var(--white),6px 8px 0 5px rgba(0,0,0,.25);
  transform:rotate(12deg);
}
.hero-foto .selo-giro b{display:block;font-size:26px;letter-spacing:-.02em}
.hero-foto figcaption{
  position:absolute;left:22px;right:22px;bottom:-54px;text-align:right;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.5);
}

/* --- faixa de garantias logo abaixo do hero ------------------------------ */
.garantias{background:var(--white);border-bottom:1px solid var(--linha)}
.garantias ul{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
}
.garantias li{
  display:flex;align-items:center;gap:14px;padding:22px 18px;
  font-size:14px;line-height:1.35;color:var(--navy-soft);
}
.garantias li + li{border-left:1px solid var(--linha)}
.garantias strong{display:block;color:var(--navy);font-size:15px;font-weight:800}
.garantias .ic{
  flex:none;width:44px;height:44px;border-radius:12px;
  background:var(--cream);color:var(--red);display:grid;place-items:center;
}
.garantias .ic svg{width:22px;height:22px}

/* --- seções ------------------------------------------------------------- */
section{padding:96px 0}
.sec-cream{background:var(--cream)}
.sec-white{background:var(--white)}
.sec-navy{background:var(--navy);color:var(--white)}
.sec-red{background:var(--red);color:var(--white)}

.sec-titulo{max-width:660px}
.sec-titulo .eyebrow{color:var(--red)}
.sec-navy .sec-titulo .eyebrow{color:var(--pink)}
.sec-red .sec-titulo .eyebrow{color:rgba(255,255,255,.75)}
.sec-titulo.centro{margin:0 auto;text-align:center}
.sec-titulo.centro .regua{margin-left:auto;margin-right:auto}
.sec-titulo.centro .lead{margin-left:auto;margin-right:auto}
h2{
  font-size:clamp(32px,4.6vw,54px);font-weight:900;line-height:1.02;
  letter-spacing:-.04em;text-transform:uppercase;margin-top:14px;
}
.regua{width:66px;height:5px;background:var(--red);margin:22px 0 24px}
.regua-centro{margin-left:auto;margin-right:auto}
.sec-navy .regua,.sec-red .regua{background:var(--white)}
.lead{font-size:18px;line-height:1.65;color:var(--navy-soft);max-width:620px}
.lead-2{margin-top:18px}
.sec-navy .lead{color:rgba(255,255,255,.8)}
.sec-red .lead{color:rgba(255,255,255,.92)}
.lead strong{color:var(--navy);font-weight:800}
.sec-navy .lead strong{color:var(--white)}
.eyebrow-red{color:var(--red)}
.btn-espaco{margin-top:30px}
.acoes-centro{justify-content:center}

/* entrada suave: só com JavaScript e só pra quem não pediu menos movimento.
   O data-anim só existe com JS, então sem ele tudo já nasce visível. */
[data-anim] .sobe{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
[data-anim] .sobe.vis{opacity:1;transform:none}

/* ==========================================================================
   QUEM PROVOU, FALOU  (index #provou)
   Faixa de mensagens rolando em duas linhas, uma pra cada lado, com as bordas
   esmaecidas (marquee do 21st.dev, em CSS puro). Para no hover. Quem pediu
   menos movimento vê as seis mensagens em grade, paradas.
   ========================================================================== */
.faixa-depo{
  position:relative;margin-top:52px;display:grid;gap:22px;overflow:hidden;
  padding:10px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.trilho{
  display:flex;gap:22px;width:max-content;
  animation:rola var(--dur,60s) linear infinite;
}
.trilho.volta{animation-direction:reverse;--dur:70s}
@media (hover:hover){
  .faixa-depo:hover .trilho{animation-play-state:paused}
}
@keyframes rola{to{transform:translateX(calc(-50% - 11px))}}

.balao{
  flex:none;width:330px;
  background:var(--white);border:3px solid var(--navy);
  border-radius:18px 18px 18px 4px;padding:18px 20px 20px;
  box-shadow:6px 6px 0 var(--navy);
  display:flex;flex-direction:column;gap:10px;
}
.balao .de{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);
}
.balao .de svg{width:16px;height:16px}
.balao p{font-size:17px;font-weight:600;line-height:1.45;color:var(--navy)}
.balao mark{background:none;color:inherit;font-weight:800;box-shadow:inset 0 -.45em 0 rgba(215,38,46,.2)}
.balao .estrelas{display:flex;gap:2px;color:var(--red);margin-top:auto}
.balao .estrelas svg{width:15px;height:15px}
.prova-nota{margin-top:36px;font-size:14px;line-height:1.6;color:var(--navy-soft)}
.prova-nota a{color:var(--red);font-weight:800;border-bottom:2px solid currentColor}

/* ==========================================================================
   SABORES  (index #sabores)
   Vitrine por sabor: foto grande de um lado, texto do outro, alternando
   (Featured Product Showcase do 21st.dev, adaptado à marca).
   ========================================================================== */
.vitrines{display:grid;gap:88px;margin-top:64px}
.vitrine{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.vitrine:nth-child(even) .vitrine-foto{order:2}
.vitrine-foto{position:relative}
.vitrine-foto .moldura{
  border-radius:20px;overflow:hidden;background:#e9e7e4;
  border:4px solid var(--cream);box-shadow:12px 12px 0 var(--red);
}
.vitrine:nth-child(even) .vitrine-foto .moldura{box-shadow:-12px 12px 0 var(--red)}
.vitrine-foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
  .vitrine:hover .vitrine-foto img{transform:scale(1.04)}
}
.vitrine-foto .tag{position:absolute;left:18px;top:18px}
.vitrine-foto .num{
  position:absolute;right:-14px;bottom:-26px;
  font-size:96px;font-weight:900;line-height:1;letter-spacing:-.06em;
  color:var(--navy);-webkit-text-stroke:3px var(--cream);
  text-shadow:5px 5px 0 var(--red);
}
.vitrine:nth-child(even) .vitrine-foto .num{right:auto;left:-14px}

.vitrine-txt .eyebrow{color:var(--pink)}
.vitrine-txt h3{
  font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1;
  letter-spacing:-.045em;text-transform:uppercase;margin-top:12px;
  text-shadow:5px 5px 0 var(--red);
}
.vitrine-txt > p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:22px;max-width:500px}
.pontos{list-style:none;margin-top:22px;display:grid;gap:10px}
.pontos li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}
.pontos li::before{
  content:"";flex:none;width:10px;height:10px;margin-top:7px;
  background:var(--red);border-radius:2px;transform:rotate(45deg);
}
.pontos strong{color:var(--white)}
.dura{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:28px;
  background:rgba(255,255,255,.14);border-radius:14px;overflow:hidden;max-width:500px;
}
.dura div{background:var(--navy-2);padding:14px 16px}
.dura dt{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.dura dd{font-size:22px;font-weight:900;letter-spacing:-.02em;margin-top:4px}
.vitrine-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.aviso-curto{
  display:flex;gap:10px;align-items:flex-start;margin-top:18px;max-width:500px;
  font-size:14px;line-height:1.5;color:rgba(255,255,255,.65);
}
.aviso-curto svg{width:18px;height:18px;flex:none;color:var(--pink);margin-top:1px}
.foto-nota{margin-top:56px;font-size:13px;color:rgba(255,255,255,.45);text-align:center}

/* ==========================================================================
   FORMATOS DE VENDA  (index #formatos)
   Três cards: pra você, evento e revenda. Os três levam ao montador
   e marcam o tipo lá, que é o que muda o roteiro da mensagem de WhatsApp.
   ========================================================================== */
.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.formato{
  display:flex;flex-direction:column;
  background:var(--white);border:3px solid var(--navy);border-radius:var(--raio);
  padding:28px 26px 30px;box-shadow:8px 8px 0 var(--navy);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
/* o hover cresce a sombra e troca a cor em vez de mexer no transform, assim
   ele não briga com a animação de entrada, que usa translate */
@media (hover:hover){
  .formato:hover{box-shadow:13px 13px 0 var(--red)}
  .formato:hover .ir{color:var(--navy)}
}
.formato .ic{
  width:52px;height:52px;border-radius:14px;background:var(--cream);color:var(--red);
  display:grid;place-items:center;margin-bottom:18px;
}
.formato .ic svg{width:26px;height:26px}
.formato h3{
  font-size:25px;font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;margin-top:16px;line-height:1.1;
}
.formato .quem{font-size:14px;font-weight:700;color:var(--red);margin-top:6px}
.formato p{font-size:16px;line-height:1.6;color:var(--navy-soft);margin-top:14px;flex:1}
.formato .ir{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:16px;border-top:2px solid var(--linha);
  font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--red);transition:color .15s;
}
.formato .ir svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover){
  .formato:hover .ir svg{transform:translateX(4px)}
}
.formatos .formato:nth-child(2).vis{transition-delay:.09s}
.formatos .formato:nth-child(3).vis{transition-delay:.18s}

/* ==========================================================================
   MONTE SEU PEDIDO  (index #pedido)
   O visitante escolhe sabor, quantidade, cidade e data; o botão abre o
   WhatsApp com a mensagem pronta. Script em js/pedido.js.
   ========================================================================== */
.pedido{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.pedido .lead{max-width:460px}

.passos-mini{list-style:none;margin-top:34px;display:grid;gap:22px}
.passos-mini li{display:flex;gap:16px;align-items:flex-start}
.passos-mini .n{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:900;box-shadow:3px 3px 0 var(--navy);
}
.passos-mini div{font-size:15px;line-height:1.55;color:var(--navy-soft)}
.passos-mini strong{
  display:block;font-size:16px;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--navy);margin-bottom:2px;
}

.montador{
  background:var(--cream);border:3px solid var(--navy);border-radius:20px;
  padding:10px 28px 28px;box-shadow:10px 10px 0 var(--red);
}
/* tipo de pedido: muda o roteiro da mensagem sem mudar de página (segmented control) */
.tipos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  margin:20px 0 6px;padding:4px;background:var(--white);
  border:2px solid var(--linha);border-radius:999px;
}
.tipos label{display:block}
.tipos input{position:absolute;opacity:0;width:0;height:0}
.tipos span{
  display:block;cursor:pointer;text-align:center;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);border-radius:999px;padding:11px 8px;
  transition:background-color .15s,color .15s;
}
.tipos input:checked + span{background:var(--red);color:var(--white);box-shadow:2px 2px 0 var(--navy)}
.tipos input:focus-visible + span{box-shadow:var(--ring)}

.item{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:16px 0;border-bottom:2px solid var(--linha);
}
.item .mini{
  width:58px;height:58px;border-radius:14px;object-fit:cover;
  border:2px solid var(--navy);background:#e9e7e4;
}
.item .nome{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.03em}
.item .sub{font-size:14px;color:var(--navy-soft);margin-top:2px}

.stepper{
  display:flex;align-items:center;background:var(--white);
  border:3px solid var(--navy);border-radius:999px;overflow:hidden;
}
.stepper button{
  width:44px;height:44px;border:0;background:none;cursor:pointer;
  font:900 22px/1 'Inter',system-ui,sans-serif;color:var(--navy);
  transition:background-color .12s,color .12s;
}
@media (hover:hover){
  .stepper button:hover{background:var(--navy);color:var(--white)}
}
.stepper button:focus-visible{box-shadow:inset 0 0 0 3px var(--red);border-radius:0}
.stepper output{min-width:34px;text-align:center;font-size:19px;font-weight:900}
.item.tem .stepper{border-color:var(--red)}
.item.tem .stepper output{color:var(--red)}

.alerta{
  margin-top:16px;font-size:14px;line-height:1.5;font-weight:600;color:var(--navy);
  background:var(--white);border-left:5px solid var(--red);
  border-radius:0 10px 10px 0;padding:12px 14px;
}
/* o aviso da data fica embaixo dos campos, não em cima */
.alerta-para{margin-top:14px}

/* botão travado enquanto falta a data do evento */
.montador .btn-off{
  background:rgba(13,35,64,.12);color:var(--navy-soft);
  box-shadow:3px 3px 0 rgba(13,35,64,.14);
  cursor:not-allowed;
}
.montador .btn-off:active{transform:none;box-shadow:3px 3px 0 rgba(13,35,64,.2)}

.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
/* o rótulo fica num span só, senão o <em> vira outra linha do flex e desalinha
   as duas caixas. O margin-top:auto garante o alinhamento mesmo se um dos
   rótulos quebrar em duas linhas numa tela estreita. */
.campos label{
  display:flex;flex-direction:column;gap:7px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
}
/* [hidden] sozinho não vence o display:flex do label */
.campos label[hidden]{display:none}
/* com três campos (revenda), a frequência ocupa a linha de baixo inteira */
.campos[data-tipo="revenda"] label[data-campo="freq"]{grid-column:1 / -1}
.campos em{font-style:normal;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--navy-soft)}
.campos em.obrig{color:var(--red);font-weight:800}
.campos select,.campos input{
  width:100%;margin-top:auto;font:600 16px 'Inter',system-ui,sans-serif;color:var(--navy);
  background:var(--white);border:3px solid var(--navy);border-radius:12px;
  padding:10px 12px;min-height:50px;
}
.campos select:focus-visible,.campos input:focus-visible{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--red);border-radius:12px}

.previa{
  margin-top:20px;background:var(--navy);color:var(--white);
  border-radius:14px;padding:14px 18px 16px;position:relative;
}
.previa span{
  display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink);margin-bottom:8px;
}
.previa span svg{width:14px;height:14px}
.previa div{font-size:15px;line-height:1.55;white-space:pre-line}

.montador .btn{display:flex;width:100%;margin-top:20px}

/* ==========================================================================
   HISTÓRIA
   ========================================================================== */
.historia{display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center}
/* moldura de xadrez por fora, miolo marinho: o chef cabe inteiro e lê limpo */
.historia-visual{
  padding:22px;border-radius:22px;
  box-shadow:12px 12px 0 rgba(13,35,64,.18);
}
.historia-card{
  background:var(--navy);border-radius:12px;
  display:flex;align-items:flex-end;justify-content:center;
  padding:26px 20px 0;
}
.historia-card img{
  width:100%;max-width:290px;height:auto;
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.3));
}

/* ==========================================================================
   DÚVIDAS  (accordion do shadcn/ui, feito com <details> nativo: abre sem JS)
   ========================================================================== */
.faq{margin-top:44px;max-width:860px;display:grid;gap:12px}
.faq details{
  background:var(--cream);border:2px solid var(--linha);border-radius:16px;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.faq details[open]{background:var(--white);border-color:var(--navy);box-shadow:6px 6px 0 var(--navy)}
/* o espaço fica dentro do summary: a linha inteira vira área de toque */
.faq summary{
  font-size:18px;font-weight:800;letter-spacing:-.01em;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:20px 22px;border-radius:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .seta{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--white);color:var(--red);display:grid;place-items:center;
  transition:transform .25s ease,background-color .2s,color .2s;
}
.faq summary .seta svg{width:18px;height:18px}
.faq details[open] summary .seta{transform:rotate(180deg);background:var(--red);color:var(--white)}
.faq .resp{padding:0 22px 22px}
.faq p{font-size:16px;line-height:1.65;color:var(--navy-soft);max-width:720px}
.faq p + p{margin-top:12px}
.faq p a{color:var(--red);font-weight:700;border-bottom:2px solid currentColor}
/* abre e fecha deslizando nos navegadores que já sabem animar o <details> */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .3s ease,content-visibility .3s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* --- cta final ---------------------------------------------------------- */
.cta{text-align:center;position:relative;overflow:hidden}
.cta img.selo{
  width:150px;height:150px;object-fit:contain;margin:0 auto 28px;
  background:var(--cream);border-radius:50%;padding:8px;
  box-shadow:0 0 0 7px var(--white);
}
.cta h2{text-shadow:5px 5px 0 rgba(13,35,64,.35)}
.cta .lead{margin:0 auto}
.cta .zap{
  font-size:clamp(24px,4vw,34px);font-weight:900;letter-spacing:-.02em;margin-top:26px;
}

/* --- rodapé ------------------------------------------------------------- */
footer{background:var(--navy);color:rgba(255,255,255,.7);padding:56px 0 44px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
footer .marca{margin-bottom:14px}
footer .marca span{font-size:20px}
footer p{font-size:14px;line-height:1.6;max-width:320px}
footer h4{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);margin-bottom:14px;
}
footer ul{list-style:none;display:grid;gap:4px}
footer ul a{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:6px 0}
footer ul a svg{width:18px;height:18px;color:var(--pink)}
@media (hover:hover){
  footer ul a:hover{color:var(--white)}
}
footer .base{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:8px;
  font-size:13px;color:rgba(255,255,255,.45);
}
footer .assin{font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* --- botão flutuante ---------------------------------------------------- */
.zap-flut{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--red);color:var(--white);
  font-weight:900;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  padding:16px 24px;border-radius:999px;
  box-shadow:5px 5px 0 rgba(13,35,64,.5);
  transition:opacity .2s,transform .2s;
}
.zap-flut svg{width:20px;height:20px}
@media (hover:hover){
  .zap-flut:hover{transform:translate(-2px,-2px)}
}
/* o flutuante some quando o montador ou o CTA final já estão na tela */
.zap-flut.some{opacity:0;pointer-events:none;transform:translateY(16px)}

/* ==========================================================================
   PÁGINAS DE SABOR  (site/sabores/*.html)
   ========================================================================== */
.voltar{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.75);
}
.voltar svg{width:16px;height:16px}

.sabor-hero{background:var(--navy);color:var(--white);padding:0;overflow:hidden;position:relative}
.sabor-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 70% at 80% 50%,rgba(215,38,46,.25),transparent 70%);
}
.sabor-hero .wrap{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding-top:60px;padding-bottom:72px;
}
.sabor-hero .eyebrow{color:var(--pink)}
.sabor-hero h1{
  font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1;
  letter-spacing:-.045em;text-transform:uppercase;margin-top:16px;
  text-shadow:6px 6px 0 var(--red);
}
.sabor-hero .resumo{
  font-size:19px;line-height:1.6;color:rgba(255,255,255,.84);
  max-width:560px;margin-top:24px;
}
.sabor-hero .hero-acoes{margin-top:30px}
.selo-disp{
  display:inline-block;margin-top:24px;
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:var(--white);color:var(--navy);padding:9px 18px;border-radius:999px;
}

/* --- foto grande do produto --------------------------------------------- */
.foto-produto{
  background:#e9e7e4;border-radius:22px;overflow:hidden;
  border:5px solid var(--white);box-shadow:14px 14px 0 var(--red);
}
.foto-produto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-legenda{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.5);
  margin-top:20px;letter-spacing:.02em;
}

/* --- blocos de conteúdo -------------------------------------------------- */
.bloco{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.bloco h2{font-size:clamp(28px,3.6vw,40px)}
.bloco .lead{max-width:none}

.lista-ingr{list-style:none;margin-top:26px;display:grid;gap:14px}
.lista-ingr li{
  position:relative;padding-left:26px;
  font-size:17px;line-height:1.55;color:var(--navy-soft);
}
.lista-ingr li::before{
  content:"";position:absolute;left:0;top:8px;
  width:11px;height:11px;background:var(--red);border-radius:2px;
}
.lista-ingr strong{color:var(--navy);font-weight:800}

/* --- ficha rápida -------------------------------------------------------- */
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.ficha-item{
  background:var(--white);border:3px solid var(--navy);border-radius:14px;
  padding:22px 20px;box-shadow:6px 6px 0 var(--navy);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),
             box-shadow .18s cubic-bezier(.2,.7,.3,1),
             background-color .18s ease, border-color .18s ease;
}
.ficha-item .rot{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);transition:color .18s ease;
}
.ficha-item .val{
  font-size:26px;font-weight:900;letter-spacing:-.03em;margin-top:8px;color:var(--navy);
  transition:color .18s ease;
}
.ficha-item .obs{font-size:14px;color:var(--navy-soft);margin-top:6px;line-height:1.4;transition:color .18s ease}
@media (hover:hover){
  .ficha-item:hover{
    transform:translate(-4px,-4px);
    box-shadow:10px 10px 0 var(--red);
    background:var(--navy);border-color:var(--navy);
  }
  .ficha-item:hover .val{color:var(--white)}
  .ficha-item:hover .rot{color:var(--pink)}
  .ficha-item:hover .obs{color:rgba(255,255,255,.75)}
}

/* --- aviso de alergênicos ------------------------------------------------ */
.aviso{
  margin-top:44px;background:var(--cream);border-left:6px solid var(--red);
  border-radius:0 12px 12px 0;padding:24px 28px;
}
.aviso .tit{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.aviso p{font-size:16px;line-height:1.6;color:var(--navy-soft);margin-top:10px}
.sec-cream .aviso{background:var(--white)}

/* --- outros sabores ------------------------------------------------------ */
.outros{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.outro{
  display:block;background:var(--navy);border-radius:var(--raio);overflow:hidden;
  box-shadow:8px 8px 0 var(--red);transition:transform .14s,box-shadow .14s;
}
@media (hover:hover){
  .outro:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--red)}
}
.outro img{width:100%;height:200px;object-fit:cover;background:#e9e7e4}
.outro .txt{padding:22px 24px}
.outro .nome{
  font-size:clamp(20px,3.6vw,26px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;color:var(--white);
}
.outro .desc{font-size:15px;color:rgba(255,255,255,.7);margin-top:6px;line-height:1.45}

/* --- nome do produto + o que ele é --------------------------------------- */
.subnome{
  display:block;font-size:15px;font-weight:700;letter-spacing:.02em;
  text-transform:none;color:var(--navy-soft);margin-top:6px;
}
.sabor-hero .subnome{font-size:19px;color:rgba(255,255,255,.6);margin-top:12px}
.outro .subnome{font-size:14px;color:rgba(255,255,255,.55);margin-top:2px}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1000px){
  .garantias ul{grid-template-columns:1fr 1fr}
  .garantias li:nth-child(3){border-left:0}
  .garantias li:nth-child(n+3){border-top:1px solid var(--linha)}
}
@media (max-width:900px){
  section{padding:68px 0}
  .nav a:not(.btn){display:none}
  /* nas páginas de sabor o "voltar" continua no header, em versão curta */
  .nav a.voltar{display:inline-flex;padding:12px 2px}
  .nav a.voltar::after{display:none}
  .voltar .longo{display:none}

  .hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:84px;gap:56px}
  .hero-foto{width:min(460px,88%)}
  .hero-foto .chef{left:-34px;bottom:-34px;width:118px}
  .hero-foto .selo-giro{width:96px;height:96px;font-size:10px;right:-14px;top:-22px}
  .hero-foto .selo-giro b{font-size:21px}
  .hero-foto figcaption{display:none}

  .vitrines{gap:72px;margin-top:48px}
  .vitrine{grid-template-columns:1fr;gap:40px}
  .vitrine:nth-child(even) .vitrine-foto{order:0}
  .vitrine:nth-child(even) .vitrine-foto .moldura{box-shadow:12px 12px 0 var(--red)}
  .vitrine:nth-child(even) .vitrine-foto .num{left:auto;right:-14px}

  .formatos{grid-template-columns:1fr}
  .pedido{grid-template-columns:1fr;gap:40px}
  .historia{grid-template-columns:1fr;gap:40px}
  .historia-visual{max-width:380px;margin:0 auto;width:100%}

  footer .wrap{grid-template-columns:1fr 1fr}
  footer .wrap > div:first-child{grid-column:1 / -1}

  .sabor-hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:56px}
  .bloco{grid-template-columns:1fr;gap:36px}
  .ficha{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  section{padding:60px 0}
  .topo .wrap{height:64px;gap:10px}
  .marca img{width:36px;height:36px}
  .marca span{font-size:17px}
  .nav{gap:14px}
  .nav .btn{
    margin-left:0;font-size:12px;padding:0 16px;min-height:44px;
    box-shadow:3px 3px 0 rgba(13,35,64,.45);
  }
  .nav .btn svg{display:none}
  .hero .wrap{padding-top:38px}
  .hero p,.lead{max-width:100%}
  .hero h1{text-shadow:4px 4px 0 var(--red)}
  .hero-foto .moldura{box-shadow:9px 9px 0 var(--red);border-width:4px}
  .hero-foto .chef{width:96px;left:-18px;bottom:-30px}
  .hero-foto .selo-giro{width:84px;height:84px;right:-8px;top:-20px}
  .hero-foto .selo-giro b{font-size:18px}
  .btn-grande{font-size:16px;padding:18px 24px;width:100%}
  .hero-acoes{flex-direction:column;align-items:stretch}
  .acoes-centro{align-items:stretch}

  .garantias ul{grid-template-columns:1fr}
  .garantias li{padding:16px 4px}
  .garantias li + li{border-left:0;border-top:1px solid var(--linha)}

  .balao{width:280px}
  .balao p{font-size:16px}

  .vitrine-foto .moldura{box-shadow:8px 8px 0 var(--red)}
  .vitrine:nth-child(even) .vitrine-foto .moldura{box-shadow:8px 8px 0 var(--red)}
  .vitrine-foto .num{font-size:72px;right:-6px;bottom:-22px}
  .vitrine:nth-child(even) .vitrine-foto .num{right:-6px}
  .vitrine-txt h3{text-shadow:4px 4px 0 var(--red);font-size:min(46px,calc((100vw - 36px) / 8.4))}
  .dura dd{font-size:18px}
  .dura div{padding:12px}
  .vitrine-acoes .btn{flex:1 1 100%}

  .formato{padding:24px 22px 26px;box-shadow:6px 6px 0 var(--navy)}
  .montador{padding:4px 16px 20px;box-shadow:6px 6px 0 var(--red)}
  .tipos span{font-size:11px;padding:11px 4px;letter-spacing:.04em}
  .item{gap:12px}
  .item .mini{width:46px;height:46px;border-radius:10px}
  .item .nome{font-size:16px}
  .item .sub{font-size:13px}
  .stepper button{width:38px;height:40px}
  .stepper output{min-width:26px}
  .campos{grid-template-columns:1fr}

  .historia-visual{padding:16px;box-shadow:8px 8px 0 rgba(13,35,64,.18)}
  .faq summary{font-size:16px;padding:18px}
  .faq .resp{padding:0 18px 18px}
  .cta img.selo{width:120px;height:120px}

  footer{padding-bottom:104px}
  footer .wrap{grid-template-columns:1fr}
  .zap-flut{
    left:16px;right:16px;padding:15px 20px;
    bottom:calc(14px + env(safe-area-inset-bottom));
  }

  .sabor-hero h1{font-size:min(44px,calc((100vw - 36px) / 9))}
  .selo-disp{font-size:11px;letter-spacing:.08em;padding:9px 14px}
  .foto-produto{box-shadow:8px 8px 0 var(--red);border-width:4px}
  .ficha{grid-template-columns:1fr}
  .ficha-item{box-shadow:5px 5px 0 var(--navy)}
  .outros{grid-template-columns:1fr}
  .aviso{padding:20px 22px}
}
/* celular estreito na página de sabor: logo + "voltar" + botão não cabem com o nome */
@media (max-width:400px){
  .topo:has(.voltar) .marca span{display:none}
}

/* ==========================================================================
   MENOS MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .btn:hover,.outro:hover,.ficha-item:hover,.zap-flut:hover{transform:none}
  .vitrine:hover .vitrine-foto img{transform:none}
  /* depoimentos parados: só a primeira linha, em grade, sem as cópias do loop */
  .faixa-depo{-webkit-mask-image:none;mask-image:none}
  .trilho{width:auto;flex-wrap:wrap;justify-content:center}
  .trilho.volta,.trilho [aria-hidden="true"]{display:none}
}

/* crédito de quem fez o site, no pé do rodapé */
.credito a{color:rgba(255,255,255,.8);font-weight:800;border-bottom:2px solid var(--red);padding-bottom:1px;transition:color .15s}
@media (hover:hover){
  .credito a:hover{color:var(--white)}
}