@font-face{font-family:"Power Grotesk";src:url(assets/fontes/PowerGrotesk-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fontes/geist-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(assets/fontes/geist-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

/* tema claro, cor da marca do cliente em --marca (dados.js > cor) */
:root{--bg:#F4EFE8;--papel:#FBF8F3;--tinta:#1B1714;--suave:#6E655D;--linha:rgba(27,23,20,.1);--raio:28px;--marca:#C8553D}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{min-height:100vh;font-family:"Geist",system-ui,sans-serif;color:var(--tinta);-webkit-font-smoothing:antialiased;background:var(--bg)}

.faixa-demo{position:sticky;top:0;z-index:5;padding:9px 16px;text-align:center;font-size:13px;color:#fff;background:var(--tinta)}
.faixa-demo[hidden]{display:none}
.pagina{display:flex;flex-direction:column;gap:18px;max-width:1240px;margin:0 auto;padding:44px 56px 30px}

/* topo: o nome do negócio como logotipo, foto quadrada ao lado */
.topo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:14px}
.marca{display:flex;align-items:center;gap:18px}
.marca__foto{width:64px;height:64px;border-radius:18px;background:var(--marca);display:grid;place-items:center;overflow:hidden;font:400 26px "Power Grotesk",sans-serif;color:#fff}
.marca__foto img{width:100%;height:100%;object-fit:cover}
.marca__nome{font:400 52px/1 "Power Grotesk",sans-serif;letter-spacing:-1.5px}
.topo p{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px;color:var(--suave);font-size:15px;padding:8px 16px;border:1px solid var(--linha);border-radius:99px;background:var(--papel)}
.ponto{width:5px;height:5px;border-radius:5px;background:var(--marca)}
.troca{color:var(--marca);display:inline-block;transition:opacity .3s,translate .3s}
.troca.sai{opacity:0;translate:0 -8px}

/* grade: cartão grande à esquerda, normais empilhados à direita */
.grade{display:flex;gap:18px}
.coluna{display:flex;flex-direction:column;gap:18px;width:100%}
.largas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.largas .card:last-child:nth-child(odd){grid-column:1/-1}

/* cartão: foto desfocada com véu escuro, texto branco por cima */
.card{position:relative;display:flex;overflow:hidden;width:100%;border-radius:var(--raio);color:#fff;text-decoration:none;cursor:pointer;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 40px -24px rgba(27,23,20,.55);transition:transform .3s ease-out,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(20,16,14,.78),rgba(20,16,14,.2) 80%),var(--fundo);
  background-size:cover;background-position:var(--base,center);filter:blur(4px);transform:scale(1.06)}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 26px 50px -24px rgba(27,23,20,.6)}
.card:focus-visible{outline:3px solid var(--marca);outline-offset:4px}
.card[aria-disabled]{cursor:default;opacity:.6}
.luz{position:absolute;top:0;left:0;width:200px;height:200px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle closest-side,rgba(255,255,255,.3),transparent);transition:opacity .3s ease-out}
.conteudo{display:flex;flex-direction:column;gap:12px;padding:30px 32px;width:100%}
.card--grande .conteudo{justify-content:flex-end;min-height:400px}
.card--larga .conteudo{padding-block:32px}
.icone{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.card:hover .icone{transform:scale(1.1) rotate(-6deg)}
.icone svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.texto{display:flex;flex-direction:column;gap:8px}
.texto h2{font:400 36px/1.05 "Power Grotesk",sans-serif;letter-spacing:-1px}
.texto h5{font-size:15px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.85);max-width:56ch}

.rodape{padding:36px 0 10px;text-align:center;color:var(--suave);font-size:13px}
.sem-js{padding:40px;text-align:center;color:var(--suave)}

@media (max-width:768px){
  .pagina{padding:28px 18px 24px}
  .marca__nome{font-size:40px}
  .grade{flex-direction:column}
  .largas{grid-template-columns:1fr}
  .conteudo{padding:26px}
  .card--grande .conteudo{min-height:300px}
  .texto h2{font-size:30px}
}

.entra{opacity:0;translate:0 24px;animation:entra .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*90ms + 80ms)}
@keyframes entra{to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.entra{opacity:1;translate:none}}