/* Creperia La Maria — hotsite de eventos. Direção NOVA (2026-07): crêperie francesa
   (ref. La Crêperie de Josselin, Paris) — bordô do toldo + creme envelhecido + dourado
   velho + script no hero. Mobile-first; motion degrada com prefers-reduced-motion. */
:root{
  --vermelho:#6E1F2E; --vermelho-2:#4E1521; --dourado:#C89B5A; --dourado-2:#A67C3B;
  --creme:#F7F1E5; --creme-2:#EBDFC8; --papel:#FDFAF3;
  --tinta:#2B1B20; --tinta-2:#6D5A54; --verde-zap:#25D366;
  --r:22px; --sombra:0 16px 48px rgba(43,27,32,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:Inter,system-ui,sans-serif;background:var(--creme);color:var(--tinta);
     line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,4.5vw,2.6rem);text-align:center;margin-bottom:10px}
section{padding:56px 20px;scroll-margin-top:84px}
img{max-width:100%;display:block}
a{color:var(--vermelho)}
.sub{text-align:center;color:var(--tinta-2);max-width:560px;margin:0 auto 30px}

/* header */
.topo{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:10px 20px;background:rgba(247,241,229,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--creme-2)}
/* barrado do toldo, como nas crêperies parisienses */
.topo::after{content:"";position:absolute;left:0;right:0;top:100%;height:11px;
  background:radial-gradient(circle at 50% 0,var(--vermelho) 63%,transparent 66%);
  background-size:28px 11px;background-repeat:repeat-x;pointer-events:none}
.logo{height:52px;width:auto}
.topo nav{display:none;gap:22px;margin-left:12px}
.topo nav a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.92rem}
.topo nav a:hover{color:var(--vermelho)}
.topo-acoes{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn-fantasma{border:2px solid var(--vermelho);color:var(--vermelho);text-decoration:none;
  font-weight:800;font-size:.85rem;padding:9px 14px;border-radius:999px;white-space:nowrap}
.btn-fantasma:hover{background:var(--vermelho);color:#fff}
.btn-zap{background:var(--verde-zap);color:#fff;text-decoration:none;font-weight:800;
  font-size:.85rem;padding:11px 16px;border-radius:999px;white-space:nowrap}
@media(min-width:860px){.topo nav{display:flex}}

/* hero */
.hero{display:grid;gap:28px;padding:40px 20px 30px;max-width:1120px;margin:0 auto;
  grid-template-columns:1fr;align-items:center}
.hero-tag{font-weight:800;color:var(--vermelho);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(2.4rem,7.5vw,4.2rem);margin-bottom:18px}
.hero h1 em{font-family:Parisienne,cursive;font-style:normal;font-weight:400;
  color:var(--vermelho);position:relative;font-size:1.16em;letter-spacing:0}
.hero-sub{font-size:clamp(1rem,2.5vw,1.15rem);color:var(--tinta-2);max-width:480px}
.hero-preco{margin-top:18px;font-size:1.05rem}
.hero-preco b{font-family:Fraunces,serif;font-size:1.9rem;color:var(--vermelho)}
.hero-ctas{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn-principal{display:inline-block;background:var(--vermelho);color:#fff;text-decoration:none;
  font-weight:800;padding:16px 26px;border-radius:999px;font-size:1.02rem;border:0;
  cursor:pointer;box-shadow:0 10px 26px rgba(110,31,46,.35);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.btn-principal:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px rgba(110,31,46,.42)}
.btn-secundario{display:inline-block;background:transparent;border:2px solid var(--creme-2);
  color:var(--tinta);text-decoration:none;font-weight:700;padding:14px 22px;
  border-radius:999px;cursor:pointer;font-size:.95rem}
.btn-secundario:hover{border-color:var(--dourado)}
.hero-nota{margin-top:16px;color:var(--tinta-2);font-size:.85rem}
.hero-video{position:relative;justify-self:center}
.hero-video video{width:min(320px,78vw);aspect-ratio:9/16;object-fit:cover;
  border-radius:28px;box-shadow:var(--sombra);border:6px solid #fff}
@media(min-width:860px){
  .hero{grid-template-columns:1.15fr .85fr;padding-top:56px}
  .hero-video video{width:340px}
}

/* marquee */
.marquee{padding:10px 0 30px}
.fita{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fita-trilho{display:flex;gap:14px;width:max-content;animation:rolar 36s linear infinite}
.fita img{height:200px;width:auto;border-radius:16px;object-fit:cover}
@keyframes rolar{to{transform:translateX(-50%)}}
@media(max-width:600px){.fita img{height:140px}}

/* números */
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:860px;
  margin:0 auto;text-align:center;padding-top:20px}
@media(min-width:700px){.numeros{grid-template-columns:repeat(4,1fr)}}
.num b{display:block;font-family:Fraunces,serif;font-size:2.6rem;color:var(--vermelho)}
.num span{color:var(--tinta-2);font-size:.85rem}

/* como funciona */
.passos{display:grid;gap:20px;max-width:1020px;margin:30px auto 0}
@media(min-width:820px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{background:var(--papel);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.passo img{height:210px;width:100%;object-fit:cover}
.passo h3{padding:18px 18px 6px;font-size:1.15rem}
.passo h3 span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--dourado);color:#fff;font-family:Inter;font-size:.95rem;margin-right:8px}
.passo p{padding:0 18px 22px;color:var(--tinta-2);font-size:.93rem}

/* cardápio temático */
.tema-caixa{display:grid;gap:0;max-width:1020px;margin:0 auto;align-items:center;
  background:var(--papel);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
.tema-caixa img{width:100%;height:100%;object-fit:cover;max-height:340px}
.tema-texto{padding:22px 26px 30px}
.tema-texto h2{margin-bottom:12px}
.tema-texto p:not(.script-tag){color:var(--tinta-2);margin-bottom:22px}
.script-tag{font-family:Parisienne,cursive;color:var(--dourado-2);font-size:1.5rem;
  text-align:center;line-height:1.1}
@media(min-width:860px){
  .tema-caixa{grid-template-columns:1.05fr .95fr}
  .tema-caixa img{max-height:440px}
  .tema-texto{padding:38px 42px}
  .tema-texto h2,.tema-texto .script-tag{text-align:left}
}

/* depoimentos (estrutura pronta; seção entra quando houver material real) */
.dep-grid{display:grid;gap:18px;max-width:1020px;margin:26px auto 0}
@media(min-width:860px){.dep-grid{grid-template-columns:repeat(3,1fr)}}
.dep{background:var(--papel);border-radius:var(--r);padding:22px;box-shadow:var(--sombra)}
.dep video{width:100%;aspect-ratio:9/16;border-radius:14px;object-fit:cover;background:#000}
.dep p{font-size:.95rem;color:var(--tinta-2);font-style:italic}
.dep b{display:block;margin-top:10px;font-size:.85rem}

/* pacotes */
.pacotes{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.cards{display:grid;gap:18px;max-width:1060px;margin:0 auto}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.card-pacote{background:var(--papel);border-radius:var(--r);padding:28px 24px;text-align:center;
  box-shadow:var(--sombra);position:relative;display:flex;flex-direction:column}
.card-pacote.destaque{outline:3px solid var(--vermelho);transform:scale(1.03)}
.card-pacote .selo{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--vermelho);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;
  padding:6px 14px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.card-pacote h3{font-size:1.35rem}
.card-pacote .pessoas{color:var(--tinta-2);font-size:.9rem;margin:4px 0 14px}
.card-pacote .preco{font-family:Fraunces,serif;font-size:2.3rem;color:var(--tinta)}
.card-pacote .pp{color:var(--tinta-2);font-size:.9rem}
.card-pacote .pix{margin:10px auto 16px;background:#E8F8EE;color:#0B7A3E;font-weight:700;
  font-size:.85rem;padding:7px 14px;border-radius:999px;width:fit-content}
.card-pacote ul{list-style:none;text-align:left;margin:0 auto 20px;color:var(--tinta-2);
  font-size:.88rem;display:grid;gap:7px;max-width:250px}
.card-pacote ul li::before{content:"✓ ";color:var(--dourado-2);font-weight:800}
.card-pacote .btn-principal{margin-top:auto}
.mini-nota{text-align:center;color:var(--tinta-2);font-size:.82rem;max-width:520px;
  margin:26px auto 0}

/* wizard */
.montar{background:var(--vermelho);padding:64px 16px}
.montar-caixa{background:var(--papel);border-radius:28px;max-width:640px;margin:0 auto;
  padding:34px 24px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.montar h2{color:var(--tinta)}
.etapas{display:flex;justify-content:center;gap:26px;margin:22px 0 26px}
.etapa-dot{width:34px;height:34px;border-radius:50%;background:var(--creme-2);color:var(--tinta-2);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;position:relative}
.etapa-dot span{position:absolute;top:38px;font-size:.62rem;font-weight:700;color:var(--tinta-2);
  left:50%;transform:translateX(-50%)}
.etapa-dot.ativo{background:var(--vermelho);color:#fff}
.etapa{display:grid;gap:6px;padding-top:14px}
.etapa.oculta{display:none}
.etapa label{font-weight:700;font-size:.95rem;margin-top:12px}
.etapa label small{color:var(--tinta-2);font-weight:500}
.etapa input,.etapa select{padding:15px;border:2px solid var(--creme-2);border-radius:14px;
  font-size:1.05rem;background:#fff;width:100%}
.etapa input:focus,.etapa select:focus{outline:none;border-color:var(--dourado)}
.etapa .btn-principal{margin-top:18px;text-align:center}
.linha-btn{display:flex;gap:10px;margin-top:18px}
.linha-btn .btn-principal{flex:1;margin-top:0}
.sabores{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-height:340px;
  overflow-y:auto;padding:4px}
.sabor{border:2px solid var(--creme-2);border-radius:13px;padding:10px 12px;cursor:pointer;
  font-size:.88rem;background:#fff;transition:border-color .15s,background .15s}
.sabor small{display:block;color:var(--tinta-2);font-size:.72rem;line-height:1.35}
.sabor.on{border-color:var(--vermelho);background:#F6E9EA}
.sabor .tipo{font-size:.62rem;font-weight:800;letter-spacing:.05em;color:var(--dourado-2)}
.contagem{text-align:center;color:var(--tinta-2);font-weight:700;font-size:.9rem;margin-top:10px}
.resultado{background:var(--creme);border-radius:18px;padding:22px;display:grid;gap:8px}
.resultado .rl{display:flex;justify-content:space-between;font-size:.95rem}
.resultado .rl b{font-variant-numeric:tabular-nums}
.resultado .rl.total{font-size:1.25rem;border-top:2px dashed var(--creme-2);padding-top:12px;
  margin-top:6px}
.resultado .rl.pix{color:#0B7A3E;font-weight:800}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--tinta-2);
  font-weight:500;margin-top:10px}
.consent input{width:auto;margin-top:2px}
.btn-zapzao{background:var(--verde-zap);box-shadow:0 10px 26px rgba(37,211,102,.4);
  text-align:center;margin-top:16px}
.btn-zapzao.desabilitado{opacity:.45;pointer-events:none}

/* galeria */
.grade{columns:2;column-gap:14px;max-width:1020px;margin:30px auto 0}
@media(min-width:820px){.grade{columns:3}}
.grade img{border-radius:16px;margin-bottom:14px;box-shadow:var(--sombra)}

/* faq */
.faq{max-width:640px;margin:0 auto}
.faq details{background:var(--papel);border-radius:14px;padding:16px 20px;margin-top:12px;
  box-shadow:0 4px 14px rgba(43,27,32,.07)}
.faq summary{font-weight:700;cursor:pointer;font-size:.98rem}
.faq details p{padding-top:10px;color:var(--tinta-2);font-size:.92rem}

/* rodapé + zap flutuante */
.rodape{background:var(--vermelho-2);color:var(--creme-2);text-align:center;padding:44px 20px 100px}
.rodape .endereco{font-size:.88rem;opacity:.85;margin-top:6px}
.rodape a{color:#fff}
.logo-rodape{height:74px;margin:0 auto 14px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.lgpd{font-size:.75rem;opacity:.75;margin-top:12px}
.zap-flutuante{position:fixed;right:18px;bottom:18px;z-index:60;width:60px;height:60px;
  border-radius:50%;background:var(--verde-zap);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.5);animation:pulsar 2.6s infinite}
@keyframes pulsar{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

@media(prefers-reduced-motion:reduce){
  .fita-trilho{animation:none}
  .zap-flutuante{animation:none}
  html{scroll-behavior:auto}
  *{transition:none!important}
}