/* ============================================================
   MASSITA — Massas & Risotos no Pote · Gramado
   Design system herdado do cardápio físico e do rótulo do pote:
   verde-cantina dominante, painel creme chanfrado com filete
   dourado, script do logo como acento, faixa tricolor.
   ============================================================ */

:root{
  --verde:#16301F;
  --verde-fundo:#112418;
  --verde-borda:#2C4C38;
  --creme:#F7EFDC;
  --marfim:#FBF6E9;
  --texto-claro:#F2EAD4;
  --texto-suave:#CBC2A6;
  --marrom:#462B15;
  --marrom-suave:#7A5A3C;
  --dourado:#C69F49;
  --dourado-claro:#E0BE6C;
  --it-verde:#2F9E58;
  --it-branco:#F6F2E6;
  --it-verm:#CE2B37;
  --sombra:0 18px 50px -18px rgba(0,0,0,.55);
  --raio:14px;
  --chanfro:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  --f-display:"Young Serif",Georgia,serif;
  --f-script:"Allura",cursive;
  --f-body:"Figtree",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--texto-claro);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(198,159,73,.10), transparent 60%),
    var(--verde);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--dourado-claro)}
:focus-visible{outline:3px solid var(--dourado-claro);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--dourado);color:var(--marrom);padding:.75rem 1.25rem;font-weight:700;z-index:100}
.skip-link:focus{left:12px;top:12px}

.wrap{width:min(1120px,92%);margin-inline:auto}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.15;margin:0 0 .5em;color:var(--marfim);letter-spacing:.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.22rem}
p{margin:0 0 1em}
.script{font-family:var(--f-script);font-weight:400;color:var(--dourado-claro);font-size:1.5em;line-height:1;letter-spacing:.01em}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--dourado-claro);margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--dourado)}
.lead{font-size:1.08rem;color:var(--texto-claro);max-width:56ch}
.muted{color:var(--texto-suave)}

/* Faixa tricolor (do logo) */
.tricolor{display:block;width:120px;height:4px;margin:1rem 0 1.6rem;background:linear-gradient(90deg,var(--it-verde) 0 33.3%,var(--it-branco) 33.3% 66.6%,var(--it-verm) 66.6% 100%);border-radius:2px}
.tricolor.centro{margin-inline:auto}

/* ---------- Header ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(17,36,24,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(198,159,73,.25)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0}
.marca{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.marca .script{font-size:2rem;color:var(--marfim)}
.marca small{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dourado-claro);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{color:var(--texto-claro);text-decoration:none;font-weight:600;font-size:.95rem;padding:.6rem 0}
.nav a:hover{color:var(--dourado-claro)}
.nav a[aria-current="page"]{color:var(--dourado-claro);border-bottom:2px solid var(--dourado)}
.so-mobile,.zap-topo{display:none}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn svg{flex:none}
.btn-ouro{background:linear-gradient(180deg,var(--dourado-claro),var(--dourado));color:var(--marrom);box-shadow:0 10px 24px -10px rgba(198,159,73,.7)}
.btn-ouro:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(198,159,73,.8)}
.btn-linha{border-color:rgba(198,159,73,.6);color:var(--marfim)}
.btn-linha:hover{background:rgba(198,159,73,.12)}
.btn-creme{background:var(--marfim);color:var(--marrom)}
.btn-creme:hover{transform:translateY(-2px)}

/* ---------- Hero ---------- */
.hero{padding:3.5rem 0 2.5rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-acao{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero-foto{position:relative;justify-self:end;width:min(420px,100%)}
.moldura{position:relative;clip-path:var(--chanfro);border:1.5px solid var(--dourado);background:var(--verde-fundo);padding:10px}
.moldura::after{content:"";position:absolute;inset:6px;border:1px solid rgba(198,159,73,.45);clip-path:var(--chanfro);pointer-events:none}
.moldura img{clip-path:var(--chanfro);width:100%;height:auto}

/* Selo redondo — o rótulo do pote */
.selo{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:128px;height:128px;border-radius:50%;background:var(--marfim);color:var(--marrom);border:2px solid var(--marrom);box-shadow:var(--sombra);transform:rotate(-7deg);z-index:2}
.selo .script{color:var(--marrom);font-size:1.45rem}
.selo strong{font-family:var(--f-display);font-size:1.3rem;line-height:1}
.selo small{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.selo-hero{right:-18px;bottom:26px}
.selo-grande{position:static;width:190px;height:190px;transform:rotate(-6deg)}
.selo-grande strong{font-size:2.5rem}
.selo-grande small{font-size:.68rem}

/* ---------- Faixa de informações (bilhete) ---------- */
.bilhete{margin-top:2.6rem;border-block:1px solid rgba(198,159,73,.35);background:rgba(17,36,24,.5)}
.bilhete-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.1rem 0}
.bilhete-item{display:flex;align-items:center;gap:.7rem;font-size:.93rem}
.bilhete-item svg{flex:none;color:var(--dourado-claro)}
.bilhete-item strong{display:block;color:var(--marfim);font-size:.98rem}
.bilhete-item span{display:block;color:var(--texto-suave);font-size:.82rem}

/* ---------- Seções ---------- */
.secao{padding:4.2rem 0}
.secao-alt{background:var(--verde-fundo);border-block:1px solid rgba(198,159,73,.18)}
.cabeca{max-width:60ch;margin-bottom:2.2rem}
.cabeca.centro{margin-inline:auto;text-align:center}

/* Cards de diferenciais */
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.card{background:rgba(247,239,220,.05);border:1px solid rgba(198,159,73,.28);border-radius:var(--raio);padding:1.5rem 1.3rem}
.card svg{color:var(--dourado-claro);margin-bottom:.9rem}
.card h3{color:var(--marfim);font-size:1.08rem;margin-bottom:.4rem}
.card p{color:var(--texto-suave);font-size:.93rem;margin:0}

/* ---------- Cardápio (o cartão físico) ---------- */
.cartao{position:relative;background:var(--creme);color:var(--marrom);clip-path:var(--chanfro);border:1.5px solid var(--dourado);padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--sombra)}
.cartao::after{content:"";position:absolute;inset:8px;border:1px solid rgba(198,159,73,.55);clip-path:var(--chanfro);pointer-events:none}
.cartao h2,.cartao h3{color:var(--marrom)}
.cartao .fita{display:inline-block;background:var(--verde);color:var(--marfim);font-family:var(--f-display);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem 1.6rem;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);margin-bottom:1.2rem}
.prato{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.2rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px dashed rgba(122,90,60,.45)}
.prato:last-of-type{border-bottom:0}
.prato h3{font-size:1.12rem;margin:0}
.prato p{grid-column:1;margin:0;color:var(--marrom-suave);font-size:.92rem}
.preco{font-family:var(--f-display);font-size:1.3rem;color:var(--verde);white-space:nowrap}
.preco small{font-size:.72rem;font-family:var(--f-body);font-weight:700;letter-spacing:.06em}
.cartao-nota{margin-top:1.4rem;font-size:.82rem;color:var(--marrom-suave)}
.cartao-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.cartao-col-full{grid-column:1/-1}

/* ---------- Galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.galeria figure{margin:0;position:relative;clip-path:var(--chanfro);border:1px solid rgba(198,159,73,.4);overflow:hidden;background:var(--verde-fundo)}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .3s ease}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{position:absolute;inset-inline:0;bottom:0;padding:2.2rem .9rem .8rem;font-size:.82rem;font-weight:600;color:var(--marfim);background:linear-gradient(180deg,transparent,rgba(10,20,14,.85))}

/* ---------- Localização ---------- */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.mapa{clip-path:var(--chanfro);border:1.5px solid var(--dourado);min-height:380px;background:var(--verde-fundo)}
.mapa iframe{width:100%;height:100%;min-height:380px;border:0;clip-path:var(--chanfro);filter:saturate(.9)}
.local-lista{list-style:none;margin:1.2rem 0 1.8rem;padding:0;display:grid;gap:.85rem}
.local-lista li{display:flex;gap:.7rem;align-items:flex-start}
.local-lista svg{flex:none;color:var(--dourado-claro);margin-top:.15rem}

/* ---------- Chamada morador / turista (cruzada) ---------- */
.cruzada{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;background:linear-gradient(120deg,rgba(198,159,73,.16),rgba(198,159,73,.04));border:1.5px solid var(--dourado);clip-path:var(--chanfro);padding:2rem clamp(1.5rem,4vw,3rem)}
.cruzada h2{margin-bottom:.3rem}
.cruzada p{margin:0;color:var(--texto-suave)}

/* ---------- Passos (almoço) ---------- */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:passo}
.passo{counter-increment:passo;background:rgba(247,239,220,.05);border:1px solid rgba(198,159,73,.28);border-radius:var(--raio);padding:1.6rem 1.4rem;position:relative}
.passo::before{content:counter(passo,decimal-leading-zero);font-family:var(--f-display);font-size:2.1rem;color:var(--dourado);display:block;margin-bottom:.6rem}
.passo h3{font-size:1.08rem}
.passo p{color:var(--texto-suave);font-size:.93rem;margin:0}

/* Condições da oferta */
.condicoes{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.condicoes li{display:flex;gap:.65rem;align-items:flex-start;color:var(--marrom)}
.condicoes svg{flex:none;color:var(--it-verde);margin-top:.2rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;max-width:820px;margin-inline:auto}
.faq details{background:rgba(247,239,220,.05);border:1px solid rgba(198,159,73,.28);border-radius:var(--raio);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.3rem;font-weight:700;color:var(--marfim);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:1.4rem;color:var(--dourado-claro);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{padding:0 1.3rem 1.2rem;margin:0;color:var(--texto-suave)}

/* ---------- CTA final ---------- */
.final{text-align:center;padding:4.5rem 0}
.final .script{display:block;font-size:2.6rem;margin-bottom:.4rem}

/* ---------- Rodapé ---------- */
.rodape{background:var(--verde-fundo);border-top:1px solid rgba(198,159,73,.25);padding:3rem 0 2rem;font-size:.92rem}
.rodape-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.rodape h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:var(--dourado-claro)}
.rodape address{font-style:normal;color:var(--texto-suave)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rodape a{color:var(--texto-claro);text-decoration:none}
.rodape a:hover{color:var(--dourado-claro)}
.rodape-base{border-top:1px solid rgba(198,159,73,.2);padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--texto-suave);font-size:.82rem}

/* ---------- Animação de entrada ---------- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutua{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--dourado-claro),var(--dourado));color:var(--marrom);box-shadow:0 12px 28px -8px rgba(0,0,0,.6)}
.zap-flutua:hover{transform:translateY(-2px)}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .hero-grid,.local-grid{grid-template-columns:1fr}
  .hero-foto{justify-self:center}
  .grade-4{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:1fr 1fr}
  .bilhete-in{grid-template-columns:1fr 1fr;gap:1rem 1.5rem}
  .cartao-grid{grid-template-columns:1fr}
  .cruzada{grid-template-columns:1fr;text-align:center;justify-items:center}
  .passos{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .topo-in{gap:.6rem}
  .marca .script{font-size:1.65rem}
  .marca small{font-size:.5rem;letter-spacing:.22em}
  .nav{position:fixed;inset:62px 0 auto 0;background:var(--verde-fundo);border-bottom:1px solid rgba(198,159,73,.3);flex-direction:column;align-items:stretch;padding:1rem 4% 1.3rem;gap:.2rem;transform:translateY(-130%);transition:transform .25s ease;box-shadow:0 18px 30px -18px rgba(0,0,0,.7)}
  .nav.aberto{transform:none}
  .nav a{padding:.9rem .4rem;border-bottom:1px solid rgba(198,159,73,.12)}
  .nav a[aria-current="page"]{border-bottom-color:var(--dourado)}
  .nav .btn{margin-top:.8rem;border-bottom:0}
  .so-mobile{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:1px solid rgba(198,159,73,.5);border-radius:10px;color:var(--marfim);cursor:pointer;order:3}
  /* CTA sempre visível no topo, mesmo com menu fechado */
  .zap-topo{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.55rem .9rem;border-radius:999px;background:linear-gradient(180deg,var(--dourado-claro),var(--dourado));color:var(--marrom);font-weight:700;font-size:.85rem;text-decoration:none;order:2}
  .grade-4,.galeria{grid-template-columns:1fr}
  .bilhete-in{grid-template-columns:1fr}
  .zap-flutua{bottom:14px;right:14px}
  .selo-hero{right:4px;bottom:12px;width:108px;height:108px}
  .secao{padding:3rem 0}
}

/* ============================================================
   MONTE SEU POTE — as etapas da comanda viram o coração do site
   ============================================================ */
.monte{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.etapa{background:var(--creme);color:var(--marrom);clip-path:var(--chanfro);border:1.5px solid var(--dourado);padding:1.6rem 1.5rem;position:relative}
.etapa-larga{grid-column:1/-1}
.etapa-cabeca{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.etapa-num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--verde);color:var(--marfim);font-family:var(--f-display);font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.etapa-cabeca h3{margin:0;font-size:1.18rem;color:var(--marrom);letter-spacing:.04em;text-transform:uppercase}
.etapa-cabeca span{font-size:.82rem;color:var(--marrom-suave);display:block;text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.fichas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.fichas li{border:1px solid rgba(122,90,60,.4);border-radius:999px;padding:.42rem .95rem;font-size:.92rem;background:rgba(255,255,255,.5)}
.fichas li em{font-style:normal;color:var(--it-verm);font-size:.8rem}
.etapa-nota{margin:1rem 0 0;font-size:.85rem;color:var(--marrom-suave)}
.etapa-preco{position:absolute;top:1.4rem;right:1.5rem;font-family:var(--f-display);font-size:1.1rem;color:var(--verde)}

/* Trilha de preço dentro do monte */
.trilha{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
.trilha div{border:1px dashed rgba(122,90,60,.5);border-radius:10px;padding:.9rem 1.1rem}
.trilha strong{display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--verde)}
.trilha span{font-size:.87rem;color:var(--marrom-suave)}

@media (max-width:860px){
  .monte{grid-template-columns:1fr}
  .trilha{grid-template-columns:1fr}
  .etapa-preco{position:static;display:block;margin-top:.4rem}
}

/* ============================================================
   COMANDA INTERATIVA — pedido direto pelo WhatsApp
   Mantém a linguagem do papel: checkbox, numeração, filete.
   ============================================================ */
.comanda{background:var(--creme);color:var(--marrom);clip-path:var(--chanfro);border:1.5px solid var(--dourado);padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:var(--sombra);position:relative}
.comanda::after{content:"";position:absolute;inset:8px;border:1px solid rgba(198,159,73,.55);clip-path:var(--chanfro);pointer-events:none}
.comanda h2,.comanda h3{color:var(--marrom)}

/* Escolha de produto (massa vs risoto) */
.tipos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.8rem}
.tipo{position:relative}
.tipo input{position:absolute;opacity:0;width:0;height:0}
.tipo span{display:block;border:1.5px solid rgba(122,90,60,.4);border-radius:12px;padding:1rem 1.1rem;cursor:pointer;transition:all .16s ease;background:rgba(255,255,255,.55)}
.tipo strong{display:block;font-family:var(--f-display);font-size:1.05rem;color:var(--marrom)}
.tipo small{display:block;color:var(--marrom-suave);font-size:.85rem;margin-top:.15rem}
.tipo b{display:block;font-family:var(--f-display);color:var(--verde);font-size:1.15rem;margin-top:.5rem}
.tipo input:checked + span{border-color:var(--verde);background:rgba(47,158,88,.1);box-shadow:0 0 0 2px rgba(22,48,31,.15)}
.tipo input:focus-visible + span{outline:3px solid var(--dourado);outline-offset:2px}

/* Blocos numerados do pedido */
.bloco{border-top:1px dashed rgba(122,90,60,.45);padding:1.5rem 0}
.bloco:first-of-type{border-top:0;padding-top:0}
.bloco[hidden]{display:none}
.bloco-cabeca{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.bloco-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--verde);color:var(--marfim);font-family:var(--f-display);font-size:.95rem;display:flex;align-items:center;justify-content:center}
.bloco-cabeca h3{margin:0;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em}
.bloco-cabeca .dica{width:100%;margin:0;font-size:.85rem;color:var(--marrom-suave);padding-left:2.6rem}
.contador{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--verde);background:rgba(47,158,88,.12);border-radius:999px;padding:.25rem .8rem}
.contador.cheio{background:rgba(198,159,73,.25);color:var(--marrom)}

/* Opções clicáveis */
.opcoes{display:flex;flex-wrap:wrap;gap:.55rem}
.opcao{position:relative}
.opcao input{position:absolute;opacity:0;width:0;height:0}
.opcao span{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(122,90,60,.4);border-radius:999px;padding:.5rem 1rem;font-size:.93rem;cursor:pointer;background:rgba(255,255,255,.55);transition:all .16s ease;min-height:40px;user-select:none}
.opcao span::before{content:"";width:15px;height:15px;border:1.5px solid rgba(122,90,60,.55);border-radius:4px;flex:none;transition:all .16s ease}
.opcao input:checked + span{border-color:var(--verde);background:rgba(47,158,88,.13);font-weight:600}
.opcao input:checked + span::before{background:var(--verde);border-color:var(--verde);box-shadow:inset 0 0 0 2px var(--creme)}
.opcao input:focus-visible + span{outline:3px solid var(--dourado);outline-offset:2px}
.opcao input:disabled + span{opacity:.42;cursor:not-allowed}
.opcao em{font-style:normal;color:var(--it-verm);font-size:.78rem}
.opcao .mais{color:var(--marrom-suave);font-size:.8rem;font-weight:700}

/* Campos de texto */
.campo{display:grid;gap:.4rem;margin-top:.4rem}
.campo label{font-size:.88rem;font-weight:700;color:var(--marrom)}
.campo input,.campo textarea,.campo select{font-family:var(--f-body);font-size:1rem;padding:.7rem .9rem;border:1.5px solid rgba(122,90,60,.4);border-radius:10px;background:rgba(255,255,255,.7);color:var(--marrom);min-height:46px;width:100%}
.campo textarea{min-height:72px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(47,158,88,.18)}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Resumo fixo do pedido */
.resumo{position:sticky;bottom:0;margin-top:1.6rem;background:var(--verde);color:var(--texto-claro);border-radius:14px;padding:1.2rem 1.4rem;box-shadow:0 -8px 30px -14px rgba(0,0,0,.5);z-index:10}
.resumo-linhas{display:grid;gap:.35rem;font-size:.9rem;margin-bottom:.9rem}
.resumo-linhas div{display:flex;justify-content:space-between;gap:1rem;color:var(--texto-suave)}
.resumo-linhas div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resumo-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid rgba(198,159,73,.35);padding-top:.8rem;margin-bottom:.9rem}
.resumo-total strong{font-family:var(--f-display);font-size:1.6rem;color:var(--marfim)}
.resumo-total span{font-size:.82rem;color:var(--texto-suave)}
.resumo .btn{width:100%}
.resumo .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.resumo-aviso{margin:.7rem 0 0;font-size:.78rem;color:var(--texto-suave);text-align:center}

/* Aviso de erro */
.erro{color:var(--it-verm);font-size:.85rem;font-weight:600;margin:.5rem 0 0;padding-left:2.6rem}
.erro[hidden]{display:none}

@media (max-width:760px){
  .tipos,.campo-duplo{grid-template-columns:1fr}
  .bloco-cabeca .dica,.erro{padding-left:0}
  .resumo{margin-inline:-.6rem;border-radius:14px 14px 0 0}
  .opcao span{font-size:.9rem;padding:.5rem .85rem}
}
@media print{.resumo{position:static}}

/* ============================================================
   FLUXO POR ETAPAS — avanço automático, voltar, carrinho
   ============================================================ */
/* Trilha de progresso */
.trilho{display:flex;align-items:center;gap:.4rem;margin-bottom:1.6rem;flex-wrap:wrap}
.trilho-item{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--marrom-suave);white-space:nowrap}
.trilho-bolha{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(122,90,60,.4);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:rgba(255,255,255,.5);transition:all .2s ease}
.trilho-item.ativo .trilho-bolha{background:var(--verde);border-color:var(--verde);color:var(--marfim)}
.trilho-item.ativo{color:var(--marrom);font-weight:700}
.trilho-item.feito .trilho-bolha{background:var(--dourado);border-color:var(--dourado);color:var(--marrom)}
.trilho-traco{flex:1;height:1px;background:rgba(122,90,60,.3);min-width:12px}

/* Etapas navegáveis */
.etapa-passo{animation:entra .22s ease}
.etapa-passo[hidden]{display:none}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.etapa-passo{animation:none}}

/* Barra de navegação da etapa */
.nav-etapa{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed rgba(122,90,60,.4);flex-wrap:wrap}
.btn-voltar{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1.5px solid rgba(122,90,60,.45);color:var(--marrom);border-radius:999px;padding:.6rem 1.2rem;font-family:var(--f-body);font-size:.92rem;font-weight:600;cursor:pointer;min-height:44px;transition:all .16s ease}
.btn-voltar:hover{background:rgba(122,90,60,.1);border-color:var(--marrom-suave)}
.btn-voltar[hidden]{display:none}
.btn-avancar{display:inline-flex;align-items:center;gap:.5rem;background:var(--verde);color:var(--marfim);border:0;border-radius:999px;padding:.7rem 1.5rem;font-family:var(--f-body);font-size:.95rem;font-weight:700;cursor:pointer;min-height:44px;margin-left:auto;transition:all .16s ease}
.btn-avancar:hover{background:#1d4029}
.btn-avancar[disabled]{opacity:.4;cursor:not-allowed}

/* Carrinho — itens já adicionados */
.carrinho{margin-bottom:1.6rem}
.carrinho[hidden]{display:none}
.carrinho h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--marrom-suave);margin-bottom:.7rem}
.item-lista{display:grid;gap:.6rem;list-style:none;margin:0 0 1rem;padding:0}
.item{display:flex;align-items:flex-start;gap:.9rem;background:rgba(255,255,255,.6);border:1px solid rgba(122,90,60,.3);border-radius:12px;padding:.9rem 1rem}
.item-corpo{flex:1;min-width:0}
.item-corpo strong{display:block;font-family:var(--f-display);font-size:1rem;color:var(--marrom)}
.item-corpo small{display:block;color:var(--marrom-suave);font-size:.85rem;margin-top:.15rem;line-height:1.45}
.item-preco{font-family:var(--f-display);color:var(--verde);font-size:1.05rem;white-space:nowrap}
.item-remover{background:none;border:0;color:var(--marrom-suave);cursor:pointer;font-size:1.4rem;line-height:1;padding:0 .2rem;min-width:32px;min-height:32px;border-radius:6px}
.item-remover:hover{color:var(--it-verm);background:rgba(206,43,55,.1)}

/* Pergunta final: mais alguma coisa? */
.mais-um{display:grid;gap:.8rem;text-align:center;padding:1.5rem 0}
.mais-um p{margin:0;font-family:var(--f-display);font-size:1.2rem;color:var(--marrom)}
.mais-um-acoes{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Entrega */
.entrega-campos{display:grid;gap:1rem;margin-top:1rem}
.entrega-campos[hidden]{display:none}
.aviso-entrega{background:rgba(198,159,73,.16);border:1px solid rgba(198,159,73,.5);border-radius:10px;padding:.8rem 1rem;font-size:.87rem;color:var(--marrom);margin-top:.8rem}
.opcao input:disabled + span{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.opcao .indisponivel{font-size:.72rem;color:var(--marrom-suave);text-decoration:none;display:block;font-weight:700}

@media (max-width:760px){
  .trilho-item span:not(.trilho-bolha){display:none}
  .trilho-item.ativo span:not(.trilho-bolha){display:inline}
  .nav-etapa{gap:.6rem}
  .btn-avancar,.btn-voltar{flex:1;justify-content:center}
  .mais-um-acoes .btn,.mais-um-acoes .btn-voltar{width:100%}
}

/* Botão de adicionar outro item — contorno dourado, não confunde com "voltar" */
.btn-adicionar{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:rgba(198,159,73,.12);border:1.5px dashed var(--dourado);color:var(--marrom);border-radius:999px;padding:.75rem 1.5rem;font-family:var(--f-body);font-size:.95rem;font-weight:700;cursor:pointer;min-height:48px;transition:all .16s ease}
.btn-adicionar:hover{background:rgba(198,159,73,.24);border-style:solid}
.mais-um{padding:1.8rem 0 .6rem}
.mais-um p{font-size:1.35rem}
.mais-um small{display:block;color:var(--marrom-suave);font-size:.88rem;margin-top:-.4rem}

/* ============================================================
   VITRINE — grade de massas e páginas individuais
   ============================================================ */
.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.vitrine a{text-decoration:none;color:inherit;display:block}
.vit-card{background:var(--creme);clip-path:var(--chanfro);border:1.5px solid var(--dourado);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;height:100%}
.vitrine a:hover .vit-card{transform:translateY(-4px);box-shadow:0 16px 34px -16px rgba(0,0,0,.55)}
.vit-foto{aspect-ratio:1/1;overflow:hidden;background:var(--verde-fundo)}
.vit-foto img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vitrine a:hover .vit-foto img{transform:scale(1.05)}
.vit-corpo{padding:1.1rem 1.2rem 1.3rem}
.vit-corpo h3{font-family:var(--f-display);font-size:1.22rem;color:var(--marrom);margin:0 0 .25rem}
.vit-corpo p{color:var(--marrom-suave);font-size:.9rem;margin:0 0 .7rem;line-height:1.5}
.vit-preco{display:flex;align-items:baseline;gap:.5rem;font-family:var(--f-display);color:var(--verde);font-size:1.1rem}
.vit-preco small{font-family:var(--f-body);font-size:.76rem;color:var(--marrom-suave);font-weight:600}

/* Página individual de massa */
.massa-hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:3rem 0 1rem}
.massa-foto{clip-path:var(--chanfro);border:1.5px solid var(--dourado);overflow:hidden;background:var(--verde-fundo)}
.massa-foto img{width:100%;height:auto;display:block}
.massa-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.tag{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(198,159,73,.5);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;color:var(--texto-claro)}
.tag strong{color:var(--dourado-claro)}

/* Migalhas de pão */
.migalhas{font-size:.82rem;color:var(--texto-suave);padding:1rem 0 0}
.migalhas a{color:var(--dourado-claro);text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.migalhas span{margin:0 .4rem;opacity:.5}

/* Avaliações — prova social */
.avaliacoes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.aval{background:rgba(247,239,220,.06);border:1px solid rgba(198,159,73,.28);border-radius:var(--raio);padding:1.3rem}
.aval-estrelas{color:var(--dourado-claro);font-size:1rem;letter-spacing:.12em;margin-bottom:.5rem}
.aval p{font-size:.92rem;color:var(--texto-claro);margin:0;font-style:italic;line-height:1.55}
.nota-google{display:inline-flex;align-items:center;gap:.7rem;background:rgba(247,239,220,.08);border:1px solid rgba(198,159,73,.35);border-radius:999px;padding:.55rem 1.3rem;margin-bottom:1.4rem}
.nota-google strong{font-family:var(--f-display);font-size:1.5rem;color:var(--dourado-claro);line-height:1}
.nota-google span{font-size:.86rem;color:var(--texto-suave)}

@media (max-width:960px){
  .vitrine{grid-template-columns:1fr 1fr}
  .massa-hero{grid-template-columns:1fr;gap:1.6rem;padding-top:1.6rem}
  .avaliacoes{grid-template-columns:1fr}
}
@media (max-width:600px){
  .vitrine{grid-template-columns:1fr}
}

/* ============================================================
   BANCADA — foto ampla + grade de ingredientes reais
   ============================================================ */
.bancada-foto{position:relative;clip-path:var(--chanfro);border:1.5px solid var(--dourado);overflow:hidden;background:var(--verde-fundo)}
.bancada-foto img{width:100%;height:auto;display:block}
.bancada-legenda{position:absolute;inset-inline:0;bottom:0;padding:2.6rem 1.4rem 1.1rem;background:linear-gradient(180deg,transparent,rgba(10,20,14,.9));color:var(--marfim);font-size:.92rem;font-weight:600}
.bancada-legenda span{display:block;color:var(--texto-suave);font-weight:400;font-size:.84rem;margin-top:.15rem}

.ingredientes{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin-top:1.6rem}
.ing{text-align:center}
.ing-foto{aspect-ratio:1/1;clip-path:var(--chanfro);border:1px solid rgba(198,159,73,.42);overflow:hidden;background:var(--verde-fundo)}
.ing-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.ing:hover .ing-foto img{transform:scale(1.07)}
.ing p{margin:.5rem 0 0;font-size:.82rem;color:var(--texto-claro);font-weight:600;line-height:1.3}

@media (max-width:960px){ .ingredientes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){
  .ingredientes{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .ing p{font-size:.76rem}
  .bancada-legenda{font-size:.84rem;padding:2rem 1rem .9rem}
}