/* Estilo compartilhado dos modelos de demonstração. As cores e fontes vêm de cada página (:root). */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--bg);color:var(--tinta);font:400 1.0625rem/1.65 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:var(--peso-display);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:clamp(2.1rem,5vw,3.7rem)}
h3{font-size:clamp(1.5rem,2.8vw,2.1rem)}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:1.18rem;line-height:1.55}

/* faixa de demonstração */
.demo{position:sticky;top:0;z-index:40;display:flex;justify-content:center;align-items:center;gap:8px 18px;flex-wrap:wrap;background:#0E3F4C;color:#F3EEE4;font:500 .85rem/1.3 "Figtree",system-ui,sans-serif;padding:8px 16px;text-align:center}
.demo a{color:#F2B544;font-weight:700;white-space:nowrap}

/* botões */
.btn{display:inline-flex;align-items:center;gap:.6em;font:700 1rem/1 var(--corpo);text-decoration:none;padding:1.05em 1.5em;border-radius:999px;border:2px solid transparent;transition:transform .2s,filter .2s}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-cta{background:var(--cta);color:var(--cta-tinta)}
.btn-contorno{border-color:currentColor}

/* topo */
header.site{position:sticky;top:34px;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--tinta) 12%,transparent)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:var(--peso-display);font-size:1.45rem;letter-spacing:-.02em}
.logo svg{width:38px;height:38px;flex:none}
nav.main{display:flex;gap:26px;font-weight:700;font-size:.95rem}
nav.main a{white-space:nowrap;text-decoration:none;padding:.4em 0;border-bottom:2px solid transparent}
nav.main a:hover{border-color:currentColor}
header.site .btn{padding:.8em 1.2em;font-size:.9rem}

/* abertura */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,120px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.sobre-titulo{font-weight:700;color:var(--destaque-tinta);margin-bottom:14px}
.hero h1{font-size:clamp(2.8rem,7.4vw,5.8rem);letter-spacing:-.035em;line-height:.95}
.hero .lead{margin:28px 0 32px;max-width:40ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.selo-linha{margin-top:32px;font-size:.95rem;display:flex;align-items:center;gap:10px}
.selo-linha b{font-family:var(--display);font-size:1.9rem;line-height:1}
.arte{position:relative;aspect-ratio:1;max-width:540px;justify-self:end;width:100%}
.arte .prato{position:absolute;inset:6% 0 0 6%;border-radius:50%;overflow:hidden;background:var(--bg2)}
.arte .prato img{width:100%;height:100%;object-fit:cover}
.arte .bola{position:absolute;border-radius:50%}
.arte .b1{width:38%;aspect-ratio:1;top:-6%;left:-8%;background:var(--destaque)}
.arte .b2{width:20%;aspect-ratio:1;bottom:-2%;right:4%;background:var(--escuro);z-index:2}
.arte .enfeite{position:absolute;z-index:2}

/* atalhos */
.chips{position:sticky;top:108px;z-index:20;background:var(--escuro);color:var(--claro)}
.chips .wrap{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.chips .wrap::-webkit-scrollbar{display:none}
.chips span{font-size:.9rem;opacity:.75;white-space:nowrap;align-self:center;margin-right:8px}
.chips a{white-space:nowrap;text-decoration:none;font-weight:700;font-size:.92rem;padding:.5em 1em;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--claro) 35%,transparent)}
.chips a:hover{background:var(--destaque);color:var(--escuro2);border-color:var(--destaque)}

/* itens */
.itens{background:var(--claro);padding:clamp(56px,8vw,112px) 0}
.itens > .wrap > header{max-width:720px;margin-bottom:clamp(32px,5vw,64px)}
.itens > .wrap > header p{margin-top:20px}
.item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid color-mix(in srgb,var(--tinta) 15%,transparent)}
.item:nth-of-type(even) .foto{order:2}
.item .foto img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%}
.item .tag{font-weight:700;color:var(--destaque-tinta);margin-bottom:12px;display:block}
.item h3{margin-bottom:18px}
.pilulas{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px;padding:0;list-style:none}
.pilulas li{font-size:.92rem;padding:.35em .85em;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--tinta) 30%,transparent)}

/* opções */
.opcoes-faixa{background:var(--escuro);color:var(--claro);padding:clamp(56px,8vw,112px) 0}
.opcoes-faixa h2{max-width:14ch}
.opcoes-faixa .intro{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.opcoes-faixa .intro p{max-width:42ch;margin:0;opacity:.85}
.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.opcao{border-radius:var(--raio);padding:32px 28px;display:flex;flex-direction:column;gap:12px;background:var(--escuro2)}
.opcao.destaque{background:var(--destaque);color:var(--escuro2)}
.opcao h3{font-size:1.7rem}
.opcao p{margin:0 0 4px;flex:1}
.opcao ul{margin:0 0 16px;padding-left:1.1em;font-size:.97rem}
.opcao .btn{align-self:flex-start}
.opcao:not(.destaque) .btn-cta{background:var(--claro);color:var(--escuro2)}
.opcao.destaque .btn-cta{background:var(--escuro2);color:var(--claro)}

/* avaliações */
.avaliacoes{padding:clamp(56px,8vw,112px) 0}
.avaliacoes .aviso{font-size:.92rem;opacity:.75;margin:14px 0 36px}
.depo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.depo figure{margin:0;background:var(--claro);border-radius:var(--raio);padding:28px}
.depo figure:nth-child(2){background:var(--escuro);color:var(--claro)}
.depo blockquote{margin:0 0 18px;font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.3}
.depo figcaption{font-size:.88rem;opacity:.8}

/* sobre */
.sobre{background:var(--claro);padding:clamp(56px,8vw,112px) 0}
.sobre .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.sobre .fotos{position:relative;padding-bottom:18%}
.sobre .fotos img{border-radius:var(--raio);width:100%;height:auto;aspect-ratio:9/7;object-fit:cover}
.sobre .fotos .f2{position:absolute;width:48%;aspect-ratio:1;right:-4%;bottom:0;border:8px solid var(--claro)}
.sobre h2{margin-bottom:28px}
.assinatura{font-family:var(--display);font-weight:var(--peso-display);font-size:1.3rem;margin:8px 0 24px}

/* onde */
.onde{padding:clamp(56px,8vw,112px) 0}
.onde .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);margin-top:40px}
.mapa{position:relative;border-radius:var(--raio);overflow:hidden;min-height:340px}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
.mapa span{position:absolute;left:16px;bottom:16px;background:var(--bg);font-size:.88rem;font-weight:700;padding:8px 12px;border-radius:999px}
.infos{display:grid;gap:24px;align-content:start}
.infos h3{font-size:1.2rem;margin-bottom:6px}
.infos p{margin:0}

/* final */
.final{background:var(--destaque);color:var(--escuro2);padding:clamp(64px,9vw,128px) 0;text-align:center}
.final h2{max-width:18ch;margin:0 auto 28px}
.final .btn-cta{background:var(--escuro2);color:var(--claro)}
footer.site{background:var(--escuro2);color:var(--claro);padding:32px 0 110px;font-size:.88rem}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;opacity:.85}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:10px;background:#1F7A4D;color:#fff;text-decoration:none;font-weight:700;padding:14px 20px 14px 16px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.wa-float svg{width:26px;height:26px}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .ctas,.selo-linha,.sobre-titulo{animation:sobe .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation-delay:.12s}.hero .ctas{animation-delay:.2s}.selo-linha{animation-delay:.28s}
  .arte .prato{animation:abre 1.2s cubic-bezier(.2,.7,.2,1) both}
  .arte .b1{animation:sobe 1s cubic-bezier(.2,.7,.2,1) .3s both}
  @keyframes sobe{from{opacity:0;transform:translateY(18px)}}
  @keyframes abre{from{clip-path:circle(0% at 30% 70%)}to{clip-path:circle(75% at 50% 50%)}}
}

@media (max-width:1180px){ nav.main{display:none} }
header.site .btn{white-space:nowrap}
@media (max-width:820px){
  .hero .wrap,.sobre .wrap,.onde .grid{grid-template-columns:1fr}
  .arte{max-width:420px;justify-self:center;margin-top:16px}
  .item{grid-template-columns:1fr;gap:28px}
  .item:nth-of-type(even) .foto{order:0}
  .item .foto{max-width:380px}
  .opcoes,.depo{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .demo{font-size:.78rem}
  header.site{top:50px}
  header.site .wrap{height:62px}
  .logo{font-size:1.2rem}
  .logo svg{width:32px;height:32px}
  header.site .btn span,header.site .btn{font-size:0;padding:.75em;gap:0}
  header.site .btn svg{font-size:1rem}
  .chips{top:112px}
  html{scroll-padding-top:170px}
  .hero .ctas .btn{width:100%;justify-content:center}
  .wa-float span{display:none}
  .wa-float{padding:16px}
}