/* ============================================================
   Wobe — site institucional
   Mistura das 3 direções:
     · base creme, manifesto, food service, cases e rodapé  → 01 Caderno
     · cor nacional organizando o catálogo, seletor de origem → 02 Passaporte
     · hero full-bleed, faixa de atributos, canto vivo no B2B → 03 Boutique
   Depende de tokens.css (paleta + fontes + reset).
   ============================================================ */

/* --c = cor da origem ativa · --on = cor legível sobre ela · --on-inv = o contraste */
:root{--c:var(--us);--on:var(--creme);--on-inv:var(--marrom)}

body{background:var(--creme);color:var(--marrom)}

/* ---------- peças compartilhadas ---------- */
.pill{
  display:inline-block;border:0;border-radius:999px;
  padding:clamp(14px,1.4vw,18px) clamp(22px,2.5vw,32px);
  font-weight:700;font-size:clamp(13px,1.17vw,15px);
  letter-spacing:.04em;text-transform:uppercase;
}
.pill-solid{background:var(--marrom);color:var(--creme)}
.pill-ghost{background:transparent;color:var(--marrom);border:1.5px solid var(--marrom)}
.pill-creme{background:var(--creme);color:var(--marrom)}
.pill-out-creme{background:transparent;color:var(--creme);border:1.5px solid var(--creme)}
.pill:hover{filter:brightness(1.07)}
.pill-ghost:hover{background:rgba(74,24,17,.06);filter:none}

.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}
.h2{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1;
    font-size:clamp(30px,4.375vw,56px)}
.h2 em,h1 em{font-family:var(--script);font-weight:400;font-style:italic}

/* ---------- header (01) ---------- */
.hdr{border-bottom:1px solid rgba(74,24,17,.15);background:var(--creme);position:relative;z-index:3}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;flex-wrap:wrap}
.hdr img{height:36px;width:auto}
.hdr nav{display:flex;gap:clamp(16px,2.8vw,34px);
         font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.hdr nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hdr .side{display:flex;gap:14px;align-items:center;font-size:13px;font-weight:600}
.hdr .side .pill{padding:10px 18px;font-size:12.5px}

/* ---------- hero full-bleed (03) ---------- */
.hero{position:relative;height:clamp(500px,52vw,660px);overflow:hidden;background:var(--marrom-2)}
.hero>img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(45,14,8,.25) 0%,rgba(45,14,8,.55) 45%,rgba(45,14,8,.9) 100%)}
.hero-in{position:absolute;inset:0;z-index:1;color:var(--creme);
  padding-block:clamp(26px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between}
.hero-top{display:flex;justify-content:space-between;gap:16px;
  font-size:clamp(9px,.86vw,11px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.hero-btm{max-width:900px}
.hero h1{font-family:var(--display);font-weight:900;
  font-size:clamp(38px,7.6vw,98px);line-height:.94;letter-spacing:-.025em}
.hero .cta{display:flex;gap:14px;margin-top:clamp(24px,3.4vw,42px);flex-wrap:wrap}
.hero .selo{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  border:1.5px solid rgba(255,248,214,.5);border-radius:999px;padding:8px 15px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- faixa de atributos (03) ---------- */
/* os três atributos institucionais do manual da marca */
.atributos{background:var(--marrom);color:var(--creme);padding-block:clamp(20px,2.5vw,30px)}
.atributos .wrap{display:flex;gap:clamp(14px,3vw,44px);justify-content:center;align-items:center;
  flex-wrap:wrap;text-align:center;
  font-family:var(--display);font-weight:300;font-size:clamp(13px,1.7vw,22px);letter-spacing:-.01em}
.atributos .wrap span{white-space:nowrap}
.atributos i{opacity:.45;font-style:normal}

/* ---------- seletor de origem (02) ---------- */
.sabores{padding-block:clamp(52px,7vw,92px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:34px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:12px}
.contador{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.55}

.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tab{
  position:relative;background:transparent;color:var(--marrom);
  border:1.5px solid rgba(74,24,17,.2);border-radius:16px;padding:22px 12px 20px;
  font-family:var(--display);font-weight:900;font-size:clamp(13px,1.35vw,17px);
  transition:background .3s,color .3s,border-color .3s;
}
.tab .dot{display:block;margin:0 auto 11px;background:var(--tc)}
.tab:hover{border-color:rgba(74,24,17,.45)}
.tab[aria-selected="true"]{background:var(--tc);color:var(--ton);border-color:var(--tc)}
.tab[aria-selected="true"] .dot{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.tab .breve{
  display:block;margin-top:6px;font-family:var(--body);font-weight:700;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.6;
}

/* ---------- painel do produto ativo (02 + 03) ---------- */
.produto{padding-block:clamp(24px,2.6vw,34px) clamp(52px,7vw,92px)}
.produto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,52px);align-items:center}
.produto-fig{
  aspect-ratio:1/1;border-radius:clamp(18px,2.2vw,28px);overflow:hidden;position:relative;
  background:var(--c);transition:background .5s ease;
}
.produto-fig img{width:100%;height:100%;object-fit:cover}
/* selo sobre a foto de um prato que ainda não chegou às gôndolas */
.fig-tag{position:absolute;top:18px;left:18px;background:var(--c);color:var(--on);
  padding:8px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* estado "em breve": nada de foto emprestada — a cor da origem e o nome do prato */
.embreve{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:32px;color:var(--on);transition:color .5s ease;
}
.embreve .marca{width:clamp(64px,7vw,92px);height:auto;object-fit:contain;opacity:.9}
.embreve .txt{
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;opacity:.85;
  border:1.5px solid currentColor;border-radius:999px;padding:9px 20px;
}
.embreve .nome{font-family:var(--script);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:.95}

.produto .origem{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.7;margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.produto .origem .dot{width:12px;height:12px;background:var(--c);transition:background .5s ease}
.produto h3{font-family:var(--script);font-weight:400;
  font-size:clamp(46px,8vw,104px);line-height:.9;color:var(--marrom)}
.produto .desc{font-size:clamp(16px,1.45vw,19px);line-height:1.55;margin-top:20px;opacity:.85;max-width:480px}
.specs{display:flex;gap:26px;margin-top:28px;padding-top:26px;
  border-top:1px solid rgba(74,24,17,.15);flex-wrap:wrap}
.specs dt{font-family:var(--display);font-weight:900;font-size:21px}
.specs dd{font-size:12px;opacity:.7;margin-top:2px}
.specs.oculto{display:none}

/* ---------- nas gôndolas (01) ---------- */
.gondolas{padding-block:clamp(52px,7vw,92px);background:var(--offwhite);
  border-block:1px solid rgba(74,24,17,.08)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--creme);border-radius:20px;overflow:hidden;border:1px solid rgba(74,24,17,.1)}
.card-fig{aspect-ratio:1/1;overflow:hidden;position:relative}
.card-fig img{width:100%;height:100%;object-fit:cover}
.card-tag{position:absolute;top:15px;left:15px;background:var(--creme);
  padding:6px 12px;border-radius:999px;font-size:10.5px;font-weight:700;
  color:var(--marrom);letter-spacing:.09em;text-transform:uppercase;box-shadow:0 1px 6px rgba(45,14,8,.18)}
.card-body{padding:clamp(20px,2.1vw,26px)}
.card-pais{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:11px;opacity:.7}
.card-pais .dot{width:8px;height:8px}
.card h3{font-family:var(--script);font-weight:400;font-size:clamp(30px,3.2vw,42px);
  line-height:1;color:var(--marrom)}
.card p{font-size:14.5px;line-height:1.5;margin-top:12px;opacity:.8}
.card .meta{margin-top:14px;padding-top:12px;border-top:1px solid rgba(74,24,17,.12);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}

/* ---------- manifesto (01) ---------- */
.manifesto{background:var(--creme-2);padding-block:clamp(60px,8.6vw,112px);position:relative;overflow:hidden}
.manifesto .ilustra{position:absolute;top:-30px;width:460px;opacity:.85;pointer-events:none;
  right:max(calc(50% - 700px),-70px)}
.manifesto .wrap{position:relative;z-index:1}
.manifesto .eyebrow,.manifesto .lede,.manifesto .pilares{max-width:720px}
.manifesto .lede{font-family:var(--display);font-weight:400;
  font-size:clamp(23px,3.3vw,42px);line-height:1.19;letter-spacing:-.01em}
.manifesto .lede strong{font-weight:900}
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.pilares dt{font-family:var(--display);font-size:21px;font-weight:900}
.pilares dd{font-size:14px;line-height:1.6;margin-top:7px;opacity:.8}

/* ---------- food service (01 + canto vivo da 03) ---------- */
.b2b{background:var(--marrom);color:var(--creme);padding-block:clamp(56px,8vw,104px)}
.b2b-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4.4vw,56px);align-items:center}
.b2b-fig{aspect-ratio:4/3;overflow:hidden;border-radius:0}
.b2b-fig img{width:100%;height:100%;object-fit:cover}
.b2b .eyebrow{opacity:.6}
.b2b p{font-size:clamp(16px,1.4vw,18px);line-height:1.6;margin-top:22px;opacity:.85;max-width:520px}
.b2b .pill{margin-top:32px;border-radius:0}

/* ---------- pré-lançamento do burrito: a cor do México, texto em marrom ---------- */
.prelanc{background:var(--mx);color:var(--marrom);padding-block:clamp(56px,8vw,104px)}
.prelanc .eyebrow{opacity:.85;display:flex;align-items:center;gap:10px}
.prelanc .eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--marrom)}
.prelanc-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:end}
.prelanc-lede{font-size:clamp(16px,1.4vw,18px);line-height:1.6;max-width:480px}
.prelanc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.prelanc figure{background:var(--creme);border-radius:clamp(16px,2vw,24px);overflow:hidden}
.prelanc figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prelanc figcaption{padding:18px 22px 20px;font-size:15px;line-height:1.45}
.prelanc figcaption strong{display:block;font-family:var(--display);font-weight:900;font-size:clamp(20px,2vw,26px);margin-bottom:2px}
.prelanc-base{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)}
.prelanc-base p{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.prelanc .pill{border-radius:0}
@media(max-width:720px){.prelanc-head,.prelanc-grid{grid-template-columns:1fr}}

/* ---------- onde encontrar (cases da 01, com as redes reais) ---------- */
.cases{padding-block:clamp(52px,7vw,92px)}
.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:38px}
.marcas li{padding:32px 14px;border:1px solid rgba(74,24,17,.15);border-radius:16px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:19px;opacity:.85}
.cases .regiao{margin-top:28px;font-size:clamp(15px,1.3vw,17px);line-height:1.6;max-width:760px;opacity:.8}
.cases .regiao a{text-decoration:underline;text-underline-offset:3px}
.b2b .ja{font-size:14px;margin-top:18px;opacity:.65}
.fs-menu{margin-top:26px;border-top:1px solid rgba(255,248,214,.2)}
.fs-menu li{padding:16px 0;border-bottom:1px solid rgba(255,248,214,.2)}
.fs-menu h3{font-family:var(--display);font-weight:900;font-size:clamp(19px,1.7vw,22px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fs-menu h3 span{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.b2b .fs-menu p{margin-top:6px;font-size:clamp(15px,1.3vw,16.5px);line-height:1.5;opacity:.9}
.fs-menu strong{color:var(--creme);font-weight:700}
.card .meta a{text-decoration:underline;text-underline-offset:2px}

/* ---------- rodapé (01) ---------- */
.ft{background:var(--marrom-2);color:var(--creme);padding-block:72px 36px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.ft img{height:42px;width:auto;margin-bottom:18px}
.ft-sobre{font-size:14px;line-height:1.6;opacity:.8;max-width:320px}
.ft h2{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:16px}
.ft ul{display:flex;flex-direction:column;gap:9px;font-size:14px}
.ft a:hover{opacity:.75}
.ft-base{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,248,214,.12);
  display:flex;justify-content:space-between;gap:16px;font-size:12px;opacity:.6;flex-wrap:wrap}

/* ============================================================
   Responsivo
   ============================================================ */
@media(max-width:900px){
  .produto-grid{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr 1fr}
  .b2b-grid{grid-template-columns:1fr}
  .pilares{grid-template-columns:1fr 1fr}
  .tabs{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:34px}
  .manifesto .ilustra{width:320px;right:-60px;opacity:.5}
}
@media(max-width:720px){
  .hdr .wrap{padding-block:16px}
  .hdr nav{order:3;width:100%;flex-wrap:wrap;gap:13px;font-size:12px}
  .hdr img{height:30px}
  .cards{grid-template-columns:1fr}
  .marcas{grid-template-columns:1fr 1fr}
  .pilares{grid-template-columns:1fr;gap:20px}
  .tabs{grid-template-columns:repeat(2,1fr);gap:10px}
  .tab{padding:16px 10px 15px}
  .hero-top span:last-child{display:none}
  .specs{gap:18px}
}
@media(max-width:520px){
  .ft-grid{grid-template-columns:1fr}
  .ft{padding-block:52px 30px}
  .ft-base{margin-top:36px}
  .manifesto .ilustra{display:none}
  .tabs{grid-template-columns:1fr}
  .tab{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:13px 16px;text-align:left}
  .tab .dot{margin:0}
  .tab .breve{margin:0 0 0 auto}
}

/* ---------- botão fixo de WhatsApp ---------- */
.wa-fixo{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:50;
  display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;
  background:#13874a;color:#fff;font-weight:700;font-size:14.5px;
  box-shadow:0 6px 20px rgba(45,14,8,.28);transition:transform .2s ease,box-shadow .2s ease}
.wa-fixo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(45,14,8,.34)}
.wa-fixo:focus-visible{outline:3px solid var(--marrom);outline-offset:3px}
@media(max-width:520px){.wa-fixo{padding:14px}.wa-fixo span{display:none}}
@media print{.wa-fixo{display:none}}