:root{
  --amarelo:#FFC20E;
  --amarelo-esc:#E8A800;
  --creme:#FFF3D4;
  --creme-claro:#FFFAEC;
  --marrom:#3D2314;
  --marrom-med:#5C3317;
  --marrom-suave:#8A7059;
  --vermelho:#E1251B;
  --vermelho-esc:#B01810;
  --dourado:#C89B3C;
  --verde:#2E7D32;
  --azul:#1B4E8C;
  --branco:#fff;

  --display:'Bevan',Georgia,serif;
  --corpo:'Karla',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;

  --max:1180px;
  --r:14px;
}

.anim-on .hero .selo-marca,
.anim-on .hero h1,
.anim-on .hero-sub,
.anim-on .hero-acoes,
.anim-on .hero-foto,
.anim-on .rotas .rota,
.anim-on .credenciais .cred,
.anim-on .cab,
.anim-on .razoes .razao,
.anim-on .vitrine .vcard,
.anim-on .escada .deg,
.anim-on .jornada .fase,
.anim-on .duo-foto,
.anim-on .duo-texto,
.anim-on .promessas li,
.anim-on .form-box,
.anim-on .faq details,
.anim-on .rodape-grid > div{opacity:0}

*{box-sizing:border-box}
/* Base do rem. Quase todo tamanho deste arquivo é em rem, então é aqui que se
   levanta junto o texto miúdo (notas, rótulos, legendas) que ficou pequeno
   demais. Era 16px, o padrão do navegador. Os títulos ficam de fora: estão
   travados em px logo abaixo. */
html{scroll-behavior:smooth;font-size:18px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  font-family:var(--corpo);
  font-size:1rem;
  line-height:1.6;
  color:var(--marrom);
  background:var(--amarelo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--marrom);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:8px;top:8px;z-index:99;background:var(--branco);padding:10px 16px;border-radius:8px}

h1,h2,h3{
  font-family:var(--display);font-weight:400;line-height:1.08;margin:0;
  letter-spacing:-.005em;text-wrap:balance;
}
/* Em px de propósito: assim o aumento da base não mexe nos títulos. */
h1{font-size:clamp(35.7px,5.6vw,68px)}
h2{font-size:clamp(28px,3.6vw,45.9px)}
h3{font-size:clamp(17.9px,1.8vw,23px)}
p{margin:0 0 1em}

.olho{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--vermelho);margin:0 0 .7rem;display:block;
}
.olho--claro{color:var(--amarelo)}

.topo{
  position:sticky;top:0;z-index:60;
  background:var(--marrom);color:var(--creme);
  border-bottom:2px solid var(--dourado);
}
.topo-in{
  max-width:var(--max);margin:0 auto;padding:9px 22px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.topo-msg{font-size:.83rem;line-height:1.35;margin:0}
.topo-msg b{color:var(--amarelo)}
.relogio{display:flex;gap:7px;align-items:center;font-family:var(--mono)}
.relogio .un{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,194,14,.35);
  border-radius:7px;padding:3px 8px;text-align:center;min-width:46px;
}
.relogio .n{display:block;font-size:1rem;font-weight:600;color:var(--amarelo);line-height:1.15}
.relogio .l{display:block;font-size:.53rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72}

.navrotas{background:var(--creme);border-bottom:2px solid var(--marrom)}
.navrotas-in{
  max-width:var(--max);margin:0 auto;padding:10px 22px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.navrotas .marca{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--marrom-med);margin-right:auto;text-decoration:none;
}
.navrotas .marca b{color:var(--marrom)}
.navlink{
  font-size:.83rem;font-weight:700;text-decoration:none;
  border:1.5px solid var(--marrom);border-radius:100px;padding:5px 14px;
  color:var(--marrom);background:transparent;transition:background .15s;
}
.navlink:hover{background:var(--amarelo)}
.navlink[aria-current="page"]{background:var(--marrom);color:var(--amarelo);border-color:var(--marrom)}

.hero{position:relative;overflow:hidden;padding:56px 0 0}
.hero::before,.hero::after{
  content:"";position:absolute;width:230px;height:230px;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.32) 2px,transparent 2px),
    linear-gradient(90deg,rgba(255,255,255,.32) 2px,transparent 2px);
  background-size:76px 76px;opacity:.85;
}
.hero::before{top:-38px;left:-40px}
.hero::after{bottom:110px;right:-52px}
.hero-in{position:relative;z-index:2}

/* Um pouco menor que o h1 padrão para o título do hero fechar em duas linhas
   na coluna de 696px — a 68px, "que vende sozinha." estourava e quebrava em
   quatro. O vw também desce junto, senão volta a quebrar entre 1060 e 1200. */
.hero h1{max-width:17ch;font-size:clamp(35.7px,5.3vw,65px)}
.hero h1 em{font-style:normal;color:var(--vermelho);display:block}
/* Em px: o texto do hero abaixo do título fica no tamanho que tinha antes de a
   base do rem subir para 18px. */
.hero-sub{font-size:clamp(16.3px,1.7vw,19.5px);max-width:54ch;margin:1.1rem 0 0;color:var(--marrom-med)}
.selo-marca{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  background:var(--marrom);color:var(--amarelo);
  padding:6px 13px;border-radius:100px;margin-bottom:1.4rem;
}

.carrossel{position:relative;width:100%;max-width:470px;margin:0 auto}
.carrossel-janela{overflow:hidden;border-radius:var(--r)}
.carrossel-trilho{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);touch-action:pan-y}

.carrossel-trilho img{
  flex:0 0 100%;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  padding:14px;
}
.carrossel[data-arrastando="1"] .carrossel-trilho{transition:none}

.carrossel-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:2px solid var(--marrom);background:var(--creme-claro);color:var(--marrom);
  font-size:1.2rem;line-height:1;display:grid;place-items:center;
  box-shadow:2px 2px 0 var(--marrom);transition:background .15s;
}
.carrossel-seta:hover{background:var(--amarelo)}
.carrossel-seta--ant{left:-6px}
.carrossel-seta--prox{right:-6px}

.carrossel-pontos{display:flex;gap:7px;justify-content:center;margin-top:14px}
.carrossel-ponto{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--marrom);background:transparent;transition:background .15s,transform .15s;
}
.carrossel-ponto[aria-current="true"]{background:var(--marrom);transform:scale(1.25)}

@media (prefers-reduced-motion:reduce){
  .carrossel-trilho{transition:none}
}
@media (max-width:520px){
  .carrossel{max-width:320px}
  .carrossel-seta{width:34px;height:34px}
  .carrossel-seta--ant{left:-4px}
  .carrossel-seta--prox{right:-4px}
}

.hero-split{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;align-items:center}
.hero-foto{position:relative}

.hero-foto > img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(61,35,20,.28))}
.hero-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}

.rotas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:2.4rem 0 0}
.rota{
  display:block;text-align:left;cursor:pointer;text-decoration:none;
  background:var(--creme-claro);border:2px solid var(--marrom);border-radius:var(--r);
  padding:22px 22px 20px;box-shadow:5px 5px 0 var(--marrom);
  transition:transform .16s ease,box-shadow .16s ease;
  font-family:var(--corpo);color:var(--marrom);width:100%;
}
.rota:hover,.rota:focus-visible{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--marrom)}
.rota .rt{font-family:var(--display);font-size:1.22rem;line-height:1.15;display:block;margin-bottom:.45rem}
.rota .rd{font-size:.92rem;color:var(--marrom-med);margin:0}
.rota .rp{
  display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho);font-weight:600;
}

.credenciais{
  margin:2.6rem 0 0;border-top:2px solid var(--marrom);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.cred{padding:16px 16px 30px 0}
/* Em px pelo mesmo motivo do .hero-sub: faixa de credenciais do hero. */
.cred .cn{font-family:var(--display);font-size:24px;line-height:1;display:block}
.cred .cl{font-size:13.1px;color:var(--marrom-med);display:block;margin-top:.3rem}

section{padding:66px 0}
.sec-creme{background:var(--creme-claro);border-top:2px solid var(--marrom);border-bottom:2px solid var(--marrom)}
.sec-escura{background:var(--marrom);color:var(--creme)}
.sec-escura h2,.sec-escura h3{color:var(--branco)}
.sec-escura p{color:rgba(255,243,212,.86)}
.cab{max-width:62ch;margin-bottom:2.4rem}
.cab p{font-size:1.03rem;color:var(--marrom-med);margin:.85rem 0 0}
.sec-escura .cab p{color:rgba(255,243,212,.8)}

.razoes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.razoes--2{grid-template-columns:repeat(2,1fr)}
.razao{background:var(--branco);border:2px solid var(--marrom);border-radius:var(--r);padding:24px}
.razao .rnum{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--vermelho);
  font-weight:600;display:block;margin-bottom:.9rem;
}
.razao h3{margin-bottom:.55rem}
.razao p{font-size:.95rem;color:var(--marrom-med);margin:0}

/* 345px, não 336: com a base do rem em 18px o texto do botão "Enviar mix e
   receber a tabela" cresceu e quebrava em duas linhas dentro da bandeja. */
.folha-grid{display:grid;grid-template-columns:1fr 345px;gap:26px;align-items:start}
.folha{background:var(--branco);border:2px solid var(--marrom);border-radius:var(--r);overflow:hidden}
.folha-topo{
  background:var(--marrom);color:var(--creme);padding:13px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.folha-topo .ft{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.folha-busca{
  font-family:var(--corpo);font-size:.85rem;padding:7px 12px;border-radius:100px;
  border:1px solid rgba(255,243,212,.35);background:rgba(255,255,255,.08);color:var(--creme);
  width:200px;max-width:100%;
}
.folha-busca::placeholder{color:rgba(255,243,212,.5)}
.folha-busca:focus{outline:none;background:var(--branco);color:var(--marrom);border-color:var(--amarelo)}

.grupo-tit{
  display:flex;align-items:center;gap:12px;
  background:var(--creme);border-bottom:1.5px solid var(--marrom);border-top:1.5px solid var(--marrom);
  padding:9px 18px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--marrom-med);
}
.grupo-tit:first-child{border-top:0}
.grupo-tit .gq{margin-left:auto;font-size:.62rem;opacity:.7;letter-spacing:.08em}

.linha{
  display:grid;grid-template-columns:74px 1fr 92px 116px;gap:14px;align-items:center;
  padding:11px 18px;border-bottom:1px solid #EDE3D2;
}
.linha:last-child{border-bottom:0}
.linha[data-qt="1"]{background:#FFFBEC;box-shadow:inset 3px 0 0 var(--vermelho)}
.prod-foto{
  width:74px;height:74px;border-radius:10px;background:var(--creme-claro);
  border:1.5px solid #E3D4B6;display:block;flex:none;padding:5px;overflow:hidden;
}
.prod-foto img{height:100%;width:100%;object-fit:contain}
.pnome{font-weight:700;font-size:.95rem;line-height:1.28;margin:0}
.pmeta{font-family:var(--mono);font-size:.7rem;color:var(--marrom-suave);margin:.22rem 0 0;letter-spacing:.02em}
.tag{
  display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:2px;
}
.tag--novo{background:var(--marrom);color:var(--amarelo)}
.pcx{font-family:var(--mono);font-size:.76rem;color:var(--marrom-med);text-align:center;line-height:1.3}
.contador{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.cbt{
  width:31px;height:31px;border-radius:8px;cursor:pointer;flex:none;
  border:1.5px solid var(--marrom);background:var(--creme);
  font-size:1.05rem;font-weight:700;line-height:1;color:var(--marrom);
  display:grid;place-items:center;transition:background .13s;
}
.cbt:hover{background:var(--amarelo)}
.cqt{
  width:44px;text-align:center;font-family:var(--mono);font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;border-radius:7px;background:transparent;padding:4px 2px;color:var(--marrom);
}
.cqt:focus{border-color:var(--marrom);background:#fff;outline:none}
.sem-resultado{padding:26px 18px;font-size:.9rem;color:var(--marrom-suave)}

.bandeja{
  position:sticky;top:74px;
  background:var(--marrom);color:var(--creme);
  border:2px solid var(--marrom);border-radius:var(--r);overflow:hidden;
}
.bandeja-topo{padding:16px 18px 12px;border-bottom:1px solid rgba(255,243,212,.18)}
.bandeja-topo h3{font-size:1.15rem;color:var(--amarelo)}
.bandeja-topo p{font-size:.78rem;margin:.3rem 0 0;color:rgba(255,243,212,.7)}
.bandeja-lista{padding:12px 18px;max-height:262px;overflow-y:auto;min-height:96px}
.vazio{font-size:.86rem;color:rgba(255,243,212,.6);margin:1.1rem 0;line-height:1.5}
.bitem{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted rgba(255,243,212,.2);font-size:.83rem}
.bitem:last-child{border-bottom:0}
.bitem span:last-child{font-family:var(--mono);color:var(--amarelo);white-space:nowrap}
.bandeja-pe{padding:14px 18px 18px;background:rgba(0,0,0,.16)}
.btotais{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.82rem;margin-bottom:4px}
.btotais b{color:var(--amarelo)}
.bnota{font-size:.72rem;color:rgba(255,243,212,.62);margin:.7rem 0 .9rem;line-height:1.45}
.blimpar{
  background:none;border:0;color:rgba(255,243,212,.6);font-family:var(--corpo);
  font-size:.75rem;cursor:pointer;text-decoration:underline;padding:8px 0 0;display:block;margin:0 auto;
}
.blimpar:hover{color:var(--amarelo)}

.btn{
  display:inline-block;text-align:center;cursor:pointer;text-decoration:none;
  font-family:var(--corpo);font-weight:700;font-size:1rem;line-height:1.2;
  padding:15px 26px;border-radius:10px;border:2px solid var(--marrom);
  background:var(--vermelho);color:#fff;box-shadow:4px 4px 0 var(--marrom);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--marrom)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn--amarelo{background:var(--amarelo);color:var(--marrom)}

.btn--branco{background:var(--branco);color:var(--marrom)}
.btn--verde{background:var(--verde);color:#fff}
.btn--bloco{display:block;width:100%}
.btn--fantasma{background:transparent;color:var(--marrom);box-shadow:none}

.vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vitrine--3{grid-template-columns:repeat(3,1fr)}
.vcard{
  background:var(--branco);border:2px solid var(--marrom);border-radius:var(--r);
  padding:16px;position:relative;display:flex;flex-direction:column;
}
.vcard .vf{height:170px;margin-bottom:14px;overflow:hidden}
.vcard .vf img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(61,35,20,.18))}
.vcard .ex-sel{
  position:absolute;top:-11px;left:16px;background:var(--vermelho);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:4px;
}
.vcard h3{font-size:1.02rem;margin:0 0 .5rem}
.vcard p{font-size:.87rem;color:var(--marrom-med);margin:0}

.jornada{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--creme);border-radius:var(--r);overflow:hidden}
.fase{padding:26px 24px;border-right:2px solid rgba(255,243,212,.35);position:relative}
.fase:last-child{border-right:0}
.fase[data-ativa="1"]{background:rgba(255,194,14,.14)}
.fase .fd{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;color:var(--amarelo);display:block;margin-bottom:.5rem}
.fase h3{font-size:1.25rem;margin-bottom:.6rem}
.fase p{font-size:.92rem;margin:0}
.fase .agora{
  display:inline-block;margin-top:1rem;background:var(--amarelo);color:var(--marrom);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;padding:3px 9px;border-radius:4px;
}
/* Variante de quatro colunas, usada nas janelas de entrega. Em fundo claro a
   borda e o texto trocam de cor pelo modificador --clara, em vez de style
   inline em cada fase. */
.jornada--4{grid-template-columns:repeat(4,1fr)}
.jornada--4 .fase{padding:24px 20px}
.jornada--clara{border-color:var(--marrom)}
.jornada--clara .fase{border-right-color:rgba(61,35,20,.25);border-bottom-color:rgba(61,35,20,.25)}
.jornada--clara .fase .fd{color:var(--vermelho)}
.jornada--clara .fase p{color:var(--marrom-med)}

.escada{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.deg{border:2px solid var(--marrom);border-radius:var(--r);padding:22px;color:#fff;overflow:hidden;text-align:center}
.deg .dfoto{height:130px;margin:-4px 0 14px;overflow:hidden}
.deg .dfoto img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.deg .dm{font-family:var(--display);font-size:1.45rem;color:var(--amarelo);display:block}
.deg .dp{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;opacity:.85;display:block;margin:.25rem 0 .9rem}
.deg .ds{font-family:var(--display);font-size:2.1rem;line-height:1;display:block}
.deg .dl{font-size:.74rem;opacity:.8;display:block;margin-top:.2rem}
.deg p{font-size:.9rem;margin:1.1rem 0 0;color:rgba(255,255,255,.9)}
.deg--tommy{background:#9B1B1B;min-height:430px}
.deg--visconti{background:var(--azul);min-height:472px}
.deg--bauducco{background:var(--marrom);min-height:514px}

.deg--visconti .dfoto{height:168px}
.deg--bauducco .dfoto{height:206px}
.fonte{font-size:.74rem;color:var(--marrom-suave);margin-top:1.3rem}
.sec-escura .fonte{color:rgba(255,243,212,.5)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
/* Só o respiro horizontal: no celular o grid vira uma coluna e o `gap` viraria
   espaço vertical entre a foto e o texto, que continua sendo os 34px de cima. */
.duo--folgado{column-gap:72px}
.duo--inverso .duo-foto{order:2}
.duo-foto img{width:100%;border-radius:var(--r)}

.duo-foto--solta img{
  border-radius:0;
  width:auto;max-width:100%;max-height:470px;margin:0 auto;
  filter:drop-shadow(0 14px 22px rgba(61,35,20,.25));
}
/* Coluna de texto mais estreita, para o título quebrar em linhas curtas. */
.duo--estreito .duo-texto{max-width:460px}

/* Título em duas cores: o nome da marca em branco, a promessa em amarelo. */
.sec-escura .duo-tit{color:var(--amarelo)}
.duo-tit .dt-nome{display:block;color:var(--branco)}
.duo-sub{
  font-family:var(--display);font-size:clamp(19.5px,1.9vw,25.5px);line-height:1.2;
  margin:1.1rem 0 1.2rem;
}
.sec-escura .duo-sub{color:var(--amarelo-esc)}

.duo ul{list-style:none;padding:0;margin:1.3rem 0 0}
.duo ul li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(61,35,20,.14);font-size:.94rem}
.duo ul li:last-child{border-bottom:0}
.duo ul li b{display:block}
.sec-escura .duo ul li{border-bottom-color:rgba(255,243,212,.2)}
.duo .marc{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--amarelo);color:var(--marrom);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.75rem;
}

.form-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:start}
.form-box{background:var(--creme-claro);border:2px solid var(--marrom);border-radius:var(--r);padding:28px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo--largo{grid-column:1/-1}
label{font-size:.79rem;font-weight:700;letter-spacing:.01em;color:var(--marrom)}
label .op{font-weight:400;color:var(--marrom-suave)}
input,select,textarea{
  font-family:var(--corpo);font-size:.97rem;color:var(--marrom);
  padding:11px 13px;border:1.5px solid #C9B48E;border-radius:9px;background:#fff;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--marrom);outline:none;box-shadow:0 0 0 3px rgba(255,194,14,.5)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--vermelho);background:#FFF7F6}
.resumo-mix{
  background:var(--branco);border:1.5px dashed var(--marrom-suave);border-radius:10px;
  padding:12px 14px;margin:0 0 1.1rem;font-size:.82rem;color:var(--marrom-med);
}
.resumo-mix b{color:var(--marrom)}
.ajuda{font-size:.75rem;color:var(--marrom-suave);margin:.9rem 0 1.2rem;line-height:1.5}
.erro{color:var(--vermelho);font-size:.78rem;font-weight:700;margin-top:.4rem;display:none}

.sec-escura .form-box p{color:var(--marrom-med)}

.sec-escura .form-box .ajuda{color:#7E6450}
.sec-escura .form-box .erro{color:var(--vermelho)}
.resumo-mix a{color:var(--vermelho);font-weight:700}
.erro[data-on="1"]{display:block}
.ok{display:none;text-align:center;padding:30px 16px}
.ok[data-on="1"]{display:block}
.ok h3{color:var(--marrom);font-size:1.5rem;margin-bottom:.7rem}
.ok p{color:var(--marrom-med);font-size:.95rem;max-width:42ch;margin:0 auto 1.3rem}
.ok .ok-acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.promessas{list-style:none;padding:0;margin:0}
.promessas li{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid rgba(255,243,212,.2)}
.promessas li:last-child{border-bottom:0}
.promessas .pi{
  flex:none;width:29px;height:29px;border-radius:50%;background:var(--amarelo);color:var(--marrom);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.8rem;
}
.promessas .pt{font-weight:700;font-size:.95rem;display:block;color:#fff}
.promessas .pd{font-size:.87rem;color:rgba(255,243,212,.78);margin:.15rem 0 0}

.faq{max-width:none}
details{border-bottom:1.5px solid var(--marrom);padding:16px 0}
details:first-of-type{border-top:1.5px solid var(--marrom)}
summary{
  cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--vermelho);flex:none}
details[open] summary::after{content:"–"}
details p{margin:.85rem 0 0;font-size:.95rem;color:var(--marrom-med);max-width:70ch}

footer{background:var(--marrom);color:rgba(255,243,212,.75);padding:44px 0 34px;font-size:.87rem}
footer a{color:var(--amarelo);text-decoration:none}
footer a:hover{text-decoration:underline}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.rodape-grid h3{font-family:var(--display);font-size:1rem;color:#fff;margin:0 0 .7rem;font-weight:400}
.rodape-logo{width:200px;max-width:100%;height:auto;margin:0 0 1rem}
.legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,243,212,.16);font-size:.76rem;color:rgba(255,243,212,.5)}

.zap{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--verde);color:#fff;font-weight:700;font-size:.92rem;
  padding:13px 19px;border-radius:100px;border:2px solid var(--marrom);
  box-shadow:3px 3px 0 var(--marrom);
}
.zap:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--marrom)}

.mixbar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  background:var(--marrom);border-top:2px solid var(--dourado);
  padding:10px 16px;align-items:center;gap:12px;
}

body.tem-mixbar{padding-bottom:var(--h-mixbar,70px)}
body.tem-mixbar .zap{bottom:calc(var(--h-mixbar,70px) + 14px)}
.mixbar[data-on="1"]{display:flex}

.mixbar .mb-txt{color:var(--creme);font-size:.78rem;line-height:1.3;flex:1;margin:0}
.mixbar .mb-txt b{color:var(--amarelo);display:block;font-family:var(--mono)}
.mixbar .btn{padding:11px 16px;font-size:.85rem;box-shadow:2px 2px 0 #000}

@media (max-width:1000px){
  .jornada--4{grid-template-columns:1fr 1fr}
  .jornada--4 .fase:nth-child(2n){border-right:0}
  .jornada--4 .fase:nth-child(-n+2){border-bottom:2px solid rgba(255,243,212,.35)}
  .jornada--4.jornada--clara .fase:nth-child(-n+2){border-bottom-color:rgba(61,35,20,.25)}
  .folha-grid{grid-template-columns:1fr}
  .bandeja{position:static}
  .vitrine{grid-template-columns:1fr 1fr}
  .form-grid,.duo{grid-template-columns:1fr}
  .duo--inverso .duo-foto{order:0}
  .duo--estreito .duo-texto{max-width:none}
}

@media (max-width:1060px){
  .hero-split{grid-template-columns:1fr}
  .hero-foto{max-width:460px}
}
@media (max-width:760px){
  section{padding:48px 0}
  .rotas{grid-template-columns:1fr}
  .credenciais{grid-template-columns:1fr 1fr}
  .razoes,.jornada,.escada,.rodape-grid{grid-template-columns:1fr}
  .deg--tommy,.deg--visconti,.deg--bauducco{min-height:0}
  .fase{border-right:0;border-bottom:2px solid rgba(255,243,212,.35)}
  .fase:last-child{border-bottom:0}
  .linha{grid-template-columns:58px 1fr;grid-template-areas:"art nome" "cx cx" "ct ct";gap:8px 12px}
  .prod-foto{grid-area:art;width:58px;height:58px}
  .linha>div:nth-child(2){grid-area:nome}
  .pcx{grid-area:cx;text-align:left}
  .contador{grid-area:ct;justify-content:flex-start}
  .campos{grid-template-columns:1fr}
  .topo-in{justify-content:center;text-align:center}
  .zap span{display:none}
  .zap{padding:14px}
  .hero::before,.hero::after{display:none}
  .folha-topo{gap:8px}
  .folha-busca{width:100%}
}
@media (max-width:460px){
  .vitrine{grid-template-columns:1fr}
}

@media (max-width:420px){
  h1{font-size:clamp(1.55rem,8.2vw,2.1rem)}
}

/* ------------------------------------------------------------------
   BARRA DE CONSENTIMENTO DE COOKIES

   Irmã da .mixbar: mesma ancoragem na base, mesmo fundo marrom, mesma
   borda dourada no topo. A diferença é a camada — a base da tela já
   tem o botão de WhatsApp em z-index 70 e a barra do pedido em 65, e
   a pergunta sobre cookies precisa ficar acima das duas (80) sem
   passar por cima do link de acessibilidade (99).

   Quando a barra está aberta, ela publica a própria altura em
   --h-consentimento e as outras duas peças sobem. É o mesmo arranjo
   que o site já usa com --h-mixbar.
   ------------------------------------------------------------------ */

.consentimento{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:var(--marrom);border-top:2px solid var(--dourado);
  padding:14px 16px;
  box-shadow:0 -6px 24px rgba(61,35,20,.28);
}
.consentimento[data-on="1"]{display:block}

body.tem-consentimento .mixbar{bottom:var(--h-consentimento,0px)}
body.tem-consentimento .zap{bottom:calc(var(--h-consentimento,0px) + 14px)}
body.tem-consentimento.tem-mixbar .zap{
  bottom:calc(var(--h-consentimento,0px) + var(--h-mixbar,70px) + 14px);
}

.cs-in{max-width:var(--max);margin:0 auto}

.cs-aviso{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cs-icone{color:var(--amarelo);flex:none}

.cs-txt{
  color:var(--creme);font-size:.78rem;line-height:1.45;margin:0;
  flex:1;min-width:260px;
}
.cs-txt b{color:var(--amarelo)}
.cs-txt a{color:var(--amarelo);text-decoration:underline}

.cs-acoes{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.cs-b{padding:11px 18px;font-size:.85rem;box-shadow:2px 2px 0 #000}
.cs-b:hover,.cs-b:focus-visible{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
/* O "Personalizar" é fantasma sobre fundo escuro: a regra base pinta
   o texto de marrom, que sumiria aqui. */
.consentimento .btn--fantasma{color:var(--creme);border-color:var(--creme)}

.consentimento :focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

/* O painel das três categorias. Formato de card do site — 2px de
   borda marrom e canto de 14px —, só que sobre o fundo escuro da
   barra, então o fundo do card é o creme claro. */
.cs-painel{
  background:var(--creme-claro);border:2px solid var(--marrom);border-radius:var(--r);
  padding:18px;margin:0;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start;
  max-height:min(58vh,420px);overflow-y:auto;
}
.cs-cat label{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;cursor:pointer;
}
.cs-cat label input{width:auto;flex:none;accent-color:var(--vermelho)}
.cs-cat label input:disabled{cursor:not-allowed}
.cs-cat b{font-weight:700;color:var(--marrom)}
.cs-cat p{
  margin:.4rem 0 0;font-size:.72rem;line-height:1.45;color:var(--marrom-med);
}
.cs-acoes--painel{grid-column:1/-1;justify-content:flex-end}
.cs-acoes--painel .cs-b{box-shadow:2px 2px 0 var(--marrom)}
.cs-acoes--painel .cs-b:hover{box-shadow:1px 1px 0 var(--marrom)}

@media (max-width:760px){
  .cs-painel{grid-template-columns:1fr;max-height:min(62vh,380px)}
  .cs-acoes{width:100%}
  .cs-acoes .cs-b{flex:1;min-width:0}
  .cs-txt{min-width:0}
}
@media (max-width:420px){
  .consentimento{padding:11px 12px}
  .cs-aviso{gap:10px}
  .cs-txt{font-size:.74rem;line-height:1.4}

  /* Empilhar os três em coluna comia um terço da tela do celular. Em
     duas linhas: "Personalizar" atravessa em cima, e "Recusar" e
     "Aceitar tudo" dividem a de baixo — lado a lado, do mesmo tamanho,
     que é como recusar continua sendo tão fácil quanto aceitar. */
  .cs-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cs-acoes .cs-b{width:100%;padding:12px 10px;font-size:.82rem}
  .cs-acoes .cs-b[data-acao="preferencias"]{grid-column:1 / -1}
  .cs-acoes--painel{grid-template-columns:1fr}
}

/* Link dentro da nota de privacidade do formulário. Sem isto ele
   herda color:inherit e some no meio do texto apagado — o precedente
   do site para link dentro do form-box é o .resumo-mix a. */
.form-box .ajuda a{color:var(--vermelho);font-weight:700}
.sec-escura .form-box .ajuda a{color:var(--vermelho)}

/* O atributo hidden precisa vencer o display das classes acima —
   senão o painel de preferências nasce aberto junto com o aviso. */
.cs-painel[hidden],.cs-aviso[hidden]{display:none}

/* ------------------------------------------------------------------
   PÁGINAS LEGAIS

   O site nasceu com duas landing pages e nenhum modelo de página de
   texto. Estas regras são o mínimo que faltava: medida de leitura,
   respiro entre blocos e uma tabela — o resto (seções, .cab, .olho,
   details, rodapé) já vem pronto das LPs.
   ------------------------------------------------------------------ */

.doc{max-width:70ch}
.doc h3{
  font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--marrom);margin:2.4rem 0 .6rem;line-height:1.3;
}
.doc h3:first-child{margin-top:0}
.doc p{margin:.75rem 0;color:var(--marrom-med)}
.doc ul{margin:.75rem 0;padding-left:1.15rem;color:var(--marrom-med)}
.doc li{margin:.35rem 0}
.doc a{color:var(--vermelho);font-weight:700}
.doc strong{color:var(--marrom)}

/* O aviso do que falta preencher antes de publicar. Vermelho de
   propósito: é para incomodar até alguém resolver. */
.doc-pendente{
  background:#FFF7F6;border:2px solid var(--vermelho);border-radius:var(--r);
  padding:16px 18px;margin:0 0 2rem;
}
.doc-pendente p{margin:.4rem 0;color:var(--marrom)}
.doc-pendente b{color:var(--vermelho)}

.doc-atualizado{
  font-family:var(--mono);font-size:.75rem;color:var(--marrom-suave);
  margin:0 0 2rem;
}

.doc-tabela{width:100%;overflow-x:auto;margin:1.1rem 0}
.doc-tabela table{border-collapse:collapse;width:100%;min-width:520px;font-size:.82rem}
.doc-tabela th,.doc-tabela td{
  border:1px solid var(--marrom-suave);padding:9px 11px;
  text-align:left;vertical-align:top;
}
.doc-tabela th{background:var(--creme);font-weight:700;color:var(--marrom)}
.doc-tabela td{color:var(--marrom-med)}

/* A seção de texto das páginas legais precisa de fundo próprio: o
   body do site é amarelo, e documento longo sobre amarelo não se lê. */
.sec-doc{background:var(--branco);border-bottom:2px solid var(--marrom)}