/* ============================================================
   A PADARIA — por Patrícia Drumond
   Paleta oficial (PDF do catálogo):
   Laranja Carnaval #F77315 · Verde Amizade #11908F · Amarelo Quindim #FAD117
   Visual leve e delicado — poucas bordas, tipografia clara.
   ============================================================ */
:root{
  --laranja:#F77315;
  --laranja-esc:#d95f0a;
  --verde:#11908F;
  --verde-esc:#0c6b6a;
  --amarelo:#FAD117;

  --tinta:#2b2622;         /* texto principal */
  --tinta-suave:#7a7068;   /* texto secundário */
  --creme:#F7F1E7;         /* fundo geral (kraft claro) */
  --creme-2:#FCF8F1;
  --papel:#ffffff;
  --linha:#ece4d6;

  --raio:18px;
  --raio-sm:12px;
  --sombra:0 14px 40px rgba(43,38,34,.07);
  --sombra-sm:0 6px 20px rgba(43,38,34,.05);
  --max:1120px;

  --ff:"Work Sans", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  font-weight:400;
  color:var(--tinta);
  background:var(--creme);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* títulos delicados */
h1,h2,h3,h4{font-weight:400;letter-spacing:.01em}
.kicker{display:block;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:.72rem;color:var(--laranja)}

/* ---------- Padronagem (fundo sutil da marca) ---------- */
.padronagem{background-image:url("../img/padronagem.svg");background-size:200px;background-repeat:repeat}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ff);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.8rem 1.7rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-laranja{background:var(--laranja);color:#fff}
.btn-laranja:hover{background:var(--laranja-esc)}
.btn-linha{background:transparent;border-color:currentColor}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-esc)}
.btn-amarelo{background:var(--amarelo);color:var(--tinta)}
.btn-amarelo:hover{background:#ecc40f}
.btn-sm{padding:.55rem 1.15rem;font-size:.85rem}

/* ---------- Logo (imagem oficial) ---------- */
.logo-img{height:72px;width:auto}

/* ---------- Header ---------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(247,241,231,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a.link{font-weight:500;font-size:.98rem;color:var(--tinta);position:relative;padding:.2rem 0}
.nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--laranja);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a.link:hover::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:1.5px;background:var(--tinta);margin:6px 0}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--verde)}
.hero .padronagem-hero{position:absolute;inset:0;opacity:.09;background-image:url("../img/padronagem-branco.svg");background-size:220px;background-repeat:repeat}
.hero-inner{position:relative;text-align:center;color:#fff;padding:104px 24px 108px;max-width:820px;margin:0 auto}
.hero .grafismo-wave{width:120px;height:18px;color:var(--amarelo);margin:0 auto 26px}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);line-height:1.08;margin:0;font-weight:300;letter-spacing:.005em}
.hero h1 .risca{color:var(--amarelo);font-weight:500}
.hero .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero .btn-linha{color:#fff}
.hero .btn-linha:hover{background:#fff;color:var(--verde)}

/* ---------- Faixa Sobre / Encomendas ---------- */
.info{padding:84px 0}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.card-info{background:var(--papel);border-radius:var(--raio);padding:40px;box-shadow:var(--sombra-sm)}
.card-info.destaque{background:var(--creme-2)}
.card-info h2{font-size:1.7rem;margin:.35rem 0 1rem;font-weight:400}
.card-info .kicker{margin-bottom:2px}
.card-info.destaque .kicker{color:var(--verde)}
.card-info p{margin:0 0 16px;color:var(--tinta-suave);font-weight:300}
.card-info .btn{margin-top:6px}
.horario-box{margin-top:20px;padding-top:20px;border-top:1px solid var(--linha)}
.horario-box .h-dia{font-weight:600;color:var(--tinta)}
.horario-box .h-hora{color:var(--tinta-suave)}

/* ---------- Cardápio ---------- */
.cardapio{padding:20px 0 96px}
.sec-title{text-align:center;margin:0 auto 8px}
.sec-title .kicker{margin-bottom:10px}
.sec-title h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:0;font-weight:300}
.sec-sub{text-align:center;color:var(--tinta-suave);margin:10px auto 34px;max-width:560px;font-weight:300}

/* filtros de categoria */
.filtros{position:sticky;top:92px;z-index:20;background:rgba(247,241,231,.92);backdrop-filter:blur(8px);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 0;margin-bottom:8px;border-bottom:1px solid var(--linha)}
.chip{border:1px solid var(--linha);background:var(--papel);color:var(--tinta-suave);border-radius:999px;
  padding:.5rem 1.15rem;font-weight:500;font-size:.88rem;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--laranja);color:var(--tinta)}
.chip.ativo{background:var(--laranja);border-color:var(--laranja);color:#fff}

.categoria{margin-top:60px;scroll-margin-top:186px}
.cat-cabecalho{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--linha)}
.cat-cabecalho h3{font-size:1.6rem;margin:0;font-weight:400}
.cat-cabecalho .cat-count{margin-left:auto;font-weight:500;color:var(--tinta-suave);font-size:.85rem}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.produto{display:flex;flex-direction:column;background:var(--papel);border-radius:var(--raio);
  box-shadow:var(--sombra-sm);overflow:hidden;transition:transform .16s ease, box-shadow .16s ease}
.produto:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.p-foto{position:relative;aspect-ratio:4/3;background:var(--creme-2);display:grid;place-items:center;overflow:hidden}
.p-foto img{width:100%;height:100%;object-fit:cover}
.p-foto .ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:#c9bda9}
.p-foto .ph svg{width:34px;height:22px}
.p-foto .ph span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.p-foto .barra{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--acc,var(--laranja));opacity:.9}
.p-corpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.produto h4{font-size:1.1rem;margin:0 0 8px;font-weight:600;color:var(--tinta);letter-spacing:.005em}
.p-desc{color:var(--tinta-suave);font-size:.9rem;font-weight:300;margin:0;flex:1}
.p-preco{margin-top:16px;font-size:1.15rem;font-weight:500;color:var(--acc,var(--laranja))}

/* ---------- Faixa CTA ---------- */
.cta{background:var(--laranja);color:#fff;text-align:center;padding:76px 24px;position:relative;overflow:hidden}
.cta .padronagem-hero{position:absolute;inset:0;opacity:.12;background-image:url("../img/padronagem-branco.svg");background-size:210px}
.cta-inner{position:relative;max-width:620px;margin:0 auto}
.cta h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 14px;font-weight:300}
.cta p{font-size:1.05rem;margin:0 0 28px;font-weight:300;opacity:.96}
.cta .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .btn-linha{color:#fff}
.cta .btn-linha:hover{background:#fff;color:var(--laranja)}

/* ---------- Footer (claro, como o header) ---------- */
.rodape{background:var(--creme);color:var(--tinta);padding:72px 0 32px;border-top:1px solid var(--linha)}
.rodape .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px}
.rodape .logo-img{height:96px}
.rodape .lema{margin-top:20px;max-width:280px;color:var(--tinta-suave);font-weight:300}
.rodape h5{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laranja);font-weight:600;margin:0 0 16px}
.rodape p{color:var(--tinta-suave);margin:.3rem 0;font-weight:300}
.rodape a.fl{color:var(--tinta-suave);display:inline-block;margin-top:6px;border-bottom:1px solid transparent;transition:.15s}
.rodape a.fl:hover{color:var(--tinta);border-color:var(--laranja)}
.rd-social{display:inline-flex;gap:.55rem;align-items:center;margin-top:12px;font-weight:500;color:var(--tinta)}
.rd-social svg{width:20px;height:20px}
.rd-social.ig:hover{color:var(--laranja)}
.rd-social.wa:hover{color:var(--verde)}
.rodape .base{margin-top:52px;padding-top:24px;border-top:1px solid var(--linha);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--tinta-suave)}

/* ---------- WhatsApp flutuante ---------- */
.zap{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .15s}
.zap:hover{transform:scale(1.07)}
.zap svg{width:29px;height:29px;fill:#fff}

/* ---------- Aviso de erro ---------- */
.aviso{max-width:640px;margin:40px auto;background:#fff;border-radius:var(--raio);padding:30px;text-align:center;color:var(--tinta-suave);box-shadow:var(--sombra-sm)}
.aviso code{background:var(--creme);padding:.15rem .4rem;border-radius:6px;color:var(--laranja-esc);font-weight:600}

/* ---------- Responsivo ---------- */
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){
  .info-grid{grid-template-columns:1fr}
  .rodape .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav .link{display:none}
  .menu-btn{display:block}
  .nav.aberto{position:absolute;top:92px;left:0;right:0;flex-direction:column;background:var(--creme-2);
    padding:20px 24px;gap:16px;border-bottom:1px solid var(--linha);box-shadow:var(--sombra)}
  .nav.aberto .link{display:block}
  .grid{grid-template-columns:1fr}
  .filtros{top:80px}
  .categoria{scroll-margin-top:150px}
  .topo .wrap{height:80px}
  .logo-img{height:60px}
  .rodape .cols{grid-template-columns:1fr}
}