/* ============================================================================
   eventos.beatoven.com.br — folha única
   Escuro + laranja da marca, sem a linguagem rock. Zero framework.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('f/fraunces-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  --bg:#0B0B0D; --bg2:#131316; --bg3:#1C1C21; --bg4:#26262C;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#F6F4F1; --txt2:#ABA7A2; --txt3:#7A766F;
  --or:#EE7115; --or2:#FF8F3C; --or-dim:rgba(238,113,21,.13);
  --ok:#4ADE80;
  --zap:#25D366; --zap2:#20BA5A;          /* verde oficial do WhatsApp */
  --hdbg:rgba(11,11,13,.82);
  --hoverbg:rgba(255,255,255,.04);
  --warntxt:#F5C99B; --errtxt:#FCA5A5;
  --serif:'Fraunces',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --wrap:1180px; --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sec{padding:84px 0}
.sec--tight{padding:56px 0}
@media (max-width:700px){ .sec{padding:60px 0} body{font-size:16px} }

/* ── tipografia ───────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0}
h1{font-size:clamp(2.3rem,6vw,4.05rem)}
h2{font-size:clamp(1.85rem,4vw,2.85rem)}
h3{font-size:1.22rem; line-height:1.25}
p{margin:0 0 1em}
.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--or); margin:0 0 14px
}
.lead{font-size:clamp(1.02rem,1.9vw,1.22rem); color:var(--txt2); max-width:62ch}
.muted{color:var(--txt2)} .small{font-size:14px} .tiny{font-size:12.5px; color:var(--txt3)}
.center{text-align:center} .mx{margin-left:auto;margin-right:auto}

/* ── botões ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  font-size:15.5px; font-weight:650; cursor:pointer; text-align:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--or2); outline-offset:3px}
.btn--p{background:var(--or); color:#fff; box-shadow:0 6px 22px rgba(238,113,21,.28)}
.btn--p:hover{background:var(--or2); box-shadow:0 10px 30px rgba(238,113,21,.4)}
.btn--g{background:transparent; color:var(--txt); border-color:var(--line2)}
.btn--g:hover{border-color:var(--or); color:var(--or2); background:var(--or-dim)}
/* pedido secundário: continua clicável, para de competir com o botão principal
   (regra "um pedido por tela" — dois botões iguais na mesma faixa é zero botão) */
.btn--txt{background:none; border-color:transparent; color:var(--txt2); padding:14px 10px}
.btn--txt:hover{color:var(--or2); background:none; text-decoration:underline; text-underline-offset:4px}
.btn--w{background:var(--zap); color:#fff}
.btn--w:hover{background:var(--zap2)}
.btn--full{width:100%}
.btn svg{width:19px; height:19px; flex:none}

/* ── cabeçalho ────────────────────────────────────────────────────────────── */
.hd{
  position:sticky; top:0; z-index:60; background:var(--hdbg);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s
}
.hd.stuck{border-bottom-color:var(--line)}
.hd__in{display:flex; align-items:center; gap:26px; height:78px}
.hd__logo img{height:46px; width:auto}
.hd__nav{display:flex; gap:26px; margin-left:auto; font-size:15px}
.hd__nav a{color:var(--txt2); padding:6px 0; border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s}
.hd__nav a:hover{color:var(--txt); border-bottom-color:var(--or)}
.hd .btn{padding:11px 20px; font-size:14.5px}
@media (max-width:900px){ .hd__nav{display:none} .hd__in{gap:14px} .hd .btn{margin-left:auto} }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero__bg{position:absolute; inset:0; z-index:0}
/* A foto some quando o escurecimento é radial e cai bem em cima da pizza.
   Agora o scrim é DIRECIONAL: escuro só onde o texto está (esquerda), livre
   à direita, onde estão a pizza e a garrafa. */
.hero__bg img{
  width:100%; height:100%; object-fit:cover; opacity:1;
  animation:heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.04) }
  to  { transform:scale(1.13) translate3d(-1.5%,-1%,0) }
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(102deg, rgba(11,11,13,.95) 0%, rgba(11,11,13,.87) 26%,
                            rgba(11,11,13,.45) 57%, rgba(11,11,13,.10) 100%),
    linear-gradient(180deg, rgba(11,11,13,.70) 0%, rgba(11,11,13,0) 26%,
                            rgba(11,11,13,0) 60%, rgba(11,11,13,.97) 100%);
}
@media (prefers-reduced-motion:reduce){ .hero__bg img{animation:none; transform:none} }
.hero__in{
  position:relative; z-index:1; padding:104px 20px 86px;
  /* a foto clara pede sombra no texto: o scrim sozinho ou apagava a pizza
     ou deixava a linha de apoio ilegível em cima da borda dourada */
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 26px rgba(0,0,0,.55);
}
.hero__in .btn{text-shadow:none}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal; color:var(--or2)}
.hero .lead{margin:22px 0 32px; max-width:46ch; font-size:clamp(1.05rem,2vw,1.28rem); color:#D8D4CF}
.hero__cta{display:flex; gap:13px; flex-wrap:wrap}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:40px;
  font-size:14px; color:var(--txt2)
}
.hero__trust span{display:inline-flex; align-items:center; gap:8px}
.hero__trust svg{width:17px; height:17px; color:var(--or); flex:none}
@media (max-width:700px){
  .hero__in{padding:64px 20px 58px}
  .hero__bg img{opacity:.92}
  .hero__bg::after{
    background:linear-gradient(180deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.55) 42%,
                                       rgba(11,11,13,.75) 72%, rgba(11,11,13,.97) 100%);
  }
}

.secalt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ── variantes A/B: mostra só o texto da variante ativa ───────────────────── */
:root:not([data-sim="conversa"]) [data-so="conversa"]{display:none}
:root[data-sim="conversa"] [data-so="preco"]{display:none}

/* ── grades ───────────────────────────────────────────────────────────────── */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; transition:border-color .18s, background .18s, transform .18s
}
.card:hover{border-color:var(--line2); background:var(--bg3); transform:translateY(-3px)}
.card__ico{
  width:44px; height:44px; border-radius:11px; background:var(--or-dim);
  display:grid; place-items:center; margin-bottom:16px; color:var(--or)
}

/* foto no lugar do ícone: sangra até a borda do card (o .card tem padding 26) */
.card__foto{
  display:block; width:calc(100% + 52px); max-width:none;   /* o img{max-width:100%} global capava a sangria */
  margin:-26px -26px 18px; height:auto;
  border-radius:var(--r) var(--r) 0 0; object-fit:cover; aspect-ratio:16/10
}
.card__ico svg{width:23px; height:23px}
.card h3{margin-bottom:9px}
.card p{color:var(--txt2); font-size:15.5px; margin:0}

/* ── ocasiões ─────────────────────────────────────────────────────────────── */
.oc{
  position:relative; border-radius:var(--r); overflow:hidden; min-height:270px;
  display:flex; align-items:flex-end; border:1px solid var(--line);
  transition:transform .2s ease, border-color .2s
}
.oc:hover{transform:translateY(-4px); border-color:var(--or)}
.oc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .25s, transform .5s}
.oc:hover img{opacity:.78; transform:scale(1.05)}
.oc::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,13,.96) 4%, rgba(11,11,13,.35) 55%, rgba(11,11,13,.15) 100%)}
.oc__t{position:relative; z-index:2; padding:22px}
.oc__t h3{font-size:1.32rem; margin-bottom:5px}
.oc__t p{margin:0; font-size:14.5px; color:var(--txt2)}

/* ── cardápios ────────────────────────────────────────────────────────────── */
.menu{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s
}
.menu:hover{border-color:var(--line2); transform:translateY(-4px)}
.menu--hl{border-color:var(--or)}
.menu__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg3)}
.menu__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.menu:hover .menu__img img{transform:scale(1.06)}
.menu__img::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--bg2) 2%, transparent 55%)}
.menu__tag{
  position:absolute; top:13px; right:13px; z-index:2; background:var(--or); color:#fff;
  font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px
}
.menu__b{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.menu__b h3{font-size:1.55rem; margin-bottom:4px}
.menu__n{font-size:14px; color:var(--or); font-weight:650; margin-bottom:14px}
.menu__p{font-size:14px; color:var(--txt3); margin-bottom:3px}
.menu__v{font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; margin-bottom:3px}
.menu__v small{font-size:.95rem; font-weight:400; color:var(--txt2); font-family:var(--sans)}
.menu__s{font-size:14.5px; color:var(--txt2); margin:14px 0 20px; flex:1; line-height:1.55}
.menu .btn{margin-top:auto}

/* ── simulador ────────────────────────────────────────────────────────────── */
.sim{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sim__box{display:grid; grid-template-columns:1.15fr .85fr; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
@media (max-width:900px){ .sim__box{grid-template-columns:1fr} }
.sim__f{padding:30px}
.sim__r{padding:30px; background:var(--bg3); border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:center}
@media (max-width:900px){ .sim__r{border-left:none; border-top:1px solid var(--line); justify-content:flex-start} }

/* imagem de apoio em seção 2 colunas: não deixa a foto vertical dominar o bloco */
.fig{border-radius:var(--r); border:1px solid var(--line); width:100%; max-height:520px; object-fit:cover}

.fld{margin-bottom:19px}
.fld > label,.fld__l{display:block; font-size:13.5px; font-weight:650; color:var(--txt2); margin-bottom:8px}
.inp{
  width:100%; background:var(--bg3); border:1px solid var(--line2); border-radius:10px;
  padding:12px 14px; font-size:16px; transition:border-color .15s, background .15s
}
.sim__r .inp{background:var(--bg2)}
.inp:hover{border-color:rgba(255,255,255,.26)}
.inp:focus{outline:none; border-color:var(--or); background:var(--bg4)}
select.inp{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ABA7A2'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:20px; padding-right:38px}
input[type=date].inp{min-height:47px}
.fld__row{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:520px){ .fld__row{grid-template-columns:1fr} }

/* botões-opção (cardápio, período, bebidas) */
.opts{display:grid; gap:8px}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opt{
  background:var(--bg3); border:1px solid var(--line2); border-radius:10px;
  padding:11px 12px; font-size:14px; font-weight:600; cursor:pointer; text-align:center;
  transition:all .15s
}
.opt:hover{border-color:var(--or); color:var(--or2)}
.opt[aria-pressed=true]{background:var(--or-dim); border-color:var(--or); color:var(--or2)}
.opt small{display:block; font-weight:450; font-size:12px; color:var(--txt3); margin-top:2px}
.opt[aria-pressed=true] small{color:var(--or)}

@media (max-width:440px){
  .opt{padding:10px 5px; font-size:13px}
  .opt small{font-size:10.5px; margin-top:1px}
}

/* stepper */
.step{display:flex; align-items:center; gap:0; background:var(--bg3); border:1px solid var(--line2); border-radius:10px; overflow:hidden}
.step button{
  width:46px; height:46px; background:none; border:none; cursor:pointer; color:var(--txt2);
  font-size:21px; line-height:1; transition:background .15s, color .15s
}
.step button:hover{background:var(--or-dim); color:var(--or2)}
.step input{flex:1; width:100%; background:none; border:none; text-align:center; font-size:16.5px; font-weight:650; padding:12px 0; min-width:0}
.step input:focus{outline:none}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.step input[type=number]{-moz-appearance:textfield}

/* resultado */
.res__l{font-size:13px; color:var(--txt3); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.res__v{font-family:var(--serif); font-size:clamp(2.4rem,6vw,3.2rem); font-weight:600; line-height:1.05; margin:8px 0 2px; color:var(--txt)}
.res__v2{font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,1.95rem); font-weight:600;
  line-height:1.2; margin:10px 0 20px; color:var(--txt)}
.res__pp{color:var(--or2); font-size:15.5px; font-weight:600; margin-bottom:20px}
/* Dentro da gaveta o bloco de preço fica num .card, e `.card p` (0,1,1) vencia
   `.res__v` (0,1,0) — o número saía com 15,5px. Escopo por .drw__b desempata. */
.drw__b .res__l{font-size:12.5px; margin:0}
.drw__b .res__v{font-size:clamp(2.1rem,7vw,2.7rem); margin:4px 0 2px}
.drw__b .res__pp{font-size:15px; margin:0 0 16px}
.drw__b .tiny{font-size:12.5px; line-height:1.5; margin:0}
.drw__b .res__lines{margin-bottom:14px}

.res__lines{border-top:1px solid var(--line); padding-top:15px; margin-bottom:18px; font-size:14.5px}
.res__lines div{display:flex; justify-content:space-between; gap:14px; padding:6px 0; color:var(--txt2); border-radius:6px; transition:background .12s}
.res__lines div:hover{background:var(--hoverbg)}
.res__lines b{color:var(--txt); font-weight:600}
.res__lines .neg b{color:var(--ok)}
.res__lines .tot{border-top:1px solid var(--line); margin-top:7px; padding-top:11px; font-size:16px}
.res__lines .tot b{font-size:17px}
.warn{
  background:rgba(238,113,21,.1); border:1px solid rgba(238,113,21,.32); border-radius:10px;
  padding:11px 13px; font-size:13.5px; color:var(--warntxt); margin-bottom:16px
}
/* .nota é a irmã calma da .warn: promessa, não alerta (evento pequeno) */
.nota{
  background:rgba(74,222,128,.09); border:1px solid rgba(74,222,128,.28); border-radius:10px;
  padding:11px 13px; font-size:13.5px; color:var(--txt2); margin-bottom:16px
}
.nota b{color:var(--txt)}

/* ── formulário / gaveta ──────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.68); z-index:80; opacity:0; pointer-events:none; transition:opacity .22s}
.scrim.on{opacity:1; pointer-events:auto}
.drw{
  position:fixed; top:0; right:0; bottom:0; width:min(470px,100%); z-index:90;
  background:var(--bg2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain
}
.drw.on{transform:none}
.drw__h{
  position:sticky; top:0; background:var(--bg2); border-bottom:1px solid var(--line);
  padding:20px 24px; display:flex; align-items:flex-start; gap:14px; z-index:2
}
.drw__h h3{font-size:1.35rem}
.drw__x{
  margin-left:auto; background:none; border:none; color:var(--txt3); cursor:pointer;
  font-size:26px; line-height:1; padding:0 4px; border-radius:8px; transition:color .15s, background .15s
}
.drw__x:hover{color:var(--txt); background:var(--bg4)}
.drw__b{padding:24px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.err{color:var(--errtxt); font-size:14px; margin-bottom:14px; display:none}
.err.on{display:block}

/* ── como funciona ────────────────────────────────────────────────────────── */
.tl{position:relative; padding-left:0}
.tl__i{display:grid; grid-template-columns:52px 1fr; gap:20px; padding-bottom:34px; position:relative}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{
  content:''; position:absolute; left:25px; top:52px; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--line2),transparent)
}
.tl__i:last-child::before{display:none}
.tl__n{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--or);
  background:var(--or-dim); color:var(--or2); display:grid; place-items:center;
  font-family:var(--serif); font-size:1.25rem; font-weight:600
}
.tl__i h3{margin-bottom:6px}
.tl__i p{color:var(--txt2); font-size:15.5px; margin:0}

/* ── listas incluído / providenciar ───────────────────────────────────────── */
.lst{list-style:none; margin:0; padding:0}
.lst li{
  display:flex; gap:12px; align-items:flex-start; padding:10px 12px; margin:0 -12px;
  font-size:15.5px; color:var(--txt2); border-radius:9px; transition:background .13s
}
.lst li:hover{background:var(--hoverbg)}
.lst svg{width:19px; height:19px; flex:none; margin-top:3px; color:var(--or)}
.lst--n svg{color:var(--txt3)}

/* ── galeria + lightbox ───────────────────────────────────────────────────── */
/* Faixa rolável em vez de grade: 12 fotos ocupam a altura de uma só, e a página
   já é longa. A margem negativa faz a faixa sangrar até a borda no celular —
   sem ela a última foto encostava no padding do .wrap e parecia o fim da lista. */
.gal{
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; margin:0 -20px; padding:4px 20px 16px;
  -webkit-overflow-scrolling:touch
}
.gal__i{
  flex:0 0 auto; width:232px; padding:0; background:var(--bg2); cursor:zoom-in;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  scroll-snap-align:start; transition:transform .2s ease, border-color .2s
}
.gal__i:hover{transform:translateY(-4px); border-color:var(--or)}
.gal__i img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
@media (max-width:640px){ .gal__i{width:180px} }

.lb{
  position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px
}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:calc(100vh - 120px); border-radius:10px; object-fit:contain}
.lb__b{
  position:absolute; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center;
  transition:background .2s
}
.lb__b:hover{background:rgba(255,255,255,.36)}
.lb__b svg{width:22px; height:22px}
.lb__x{top:18px; right:18px}
.lb__p{left:16px; top:50%; margin-top:-23px}
.lb__n{right:16px; top:50%; margin-top:-23px}
.lb__c{
  position:absolute; left:24px; right:24px; bottom:22px; text-align:center;
  color:var(--txt2); font-size:14px; line-height:1.45
}
@media (max-width:640px){ .lb__p{left:6px} .lb__n{right:6px} .lb{padding:14px} }


/* ── depoimentos ──────────────────────────────────────────────────────────── */
.dep{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column; transition:border-color .18s, transform .18s
}
.dep:hover{border-color:var(--line2); transform:translateY(-3px)}
.dep__q{font-size:15.5px; color:var(--txt); line-height:1.6; margin:0 0 16px; flex:1}
.dep__a{font-size:14px; color:var(--txt3); font-weight:600}
.dep__s{color:var(--or); font-size:14px; letter-spacing:2px; margin-bottom:12px}

/* ── faq ──────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:20px 44px 20px 4px; font-size:16.5px; font-weight:600;
  position:relative; list-style:none; transition:color .15s; border-radius:8px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or2)}
.faq summary::after{
  content:''; position:absolute; right:12px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--txt3); border-bottom:2px solid var(--txt3);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s, border-color .2s
}
.faq summary:hover::after{border-color:var(--or)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 44px 22px 4px; color:var(--txt2); font-size:15.5px}
.faq__a p:last-child{margin-bottom:0}

/* ── faixa cta ────────────────────────────────────────────────────────────── */
.cta{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(32px,5vw,58px);
  background:radial-gradient(90% 130% at 50% 0%, rgba(238,113,21,.16) 0%, transparent 62%), var(--bg2);
  text-align:center
}
.cta .lead{margin:16px auto 28px}
.cta__b{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* ── rodapé ───────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line); padding:52px 0 34px; font-size:14.5px; color:var(--txt2)}
.ft__g{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
@media (max-width:760px){ .ft__g{grid-template-columns:1fr; gap:26px} }
.ft h4{font-size:13px; text-transform:uppercase; letter-spacing:.13em; color:var(--txt3); margin:0 0 13px; font-weight:700; font-family:var(--sans)}
.ft a{color:var(--txt2); transition:color .15s}
.ft a:hover{color:var(--or2)}
.ft__l{display:block; padding:4px 0}
.ft img{height:58px; width:auto; margin-bottom:16px}
.ft__c{border-top:1px solid var(--line); margin-top:34px; padding-top:22px; font-size:13px; color:var(--txt3);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ── zap flutuante ────────────────────────────────────────────────────────── */
.zap{
  position:fixed; right:18px; bottom:18px; z-index:70; width:54px; height:54px; border-radius:50%;
  background:var(--zap); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45); transition:transform .18s, background .18s
}
.zap:hover{transform:scale(1.08); background:var(--zap2)}
.zap svg{width:29px; height:29px}
@media (max-width:700px){ .zap{width:50px; height:50px; right:14px; bottom:14px} }

/* ── entrada suave ────────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — variante de teste ?tema=claro
   Só troca os tokens. Duas exceções ficam escuras de propósito:
   o HERO e os cards de ocasião, porque são foto com texto por cima — inverter
   ali deixaria o texto ilegível sobre as fotos de estúdio, que são escuras.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"]{
  --bg:#FFFFFF; --bg2:#F7F5F2; --bg3:#F1EEE9; --bg4:#E7E3DC;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.17);
  --txt:#15151A; --txt2:#57534C; --txt3:#8B857C;
  --or:#D4620B; --or2:#B85207; --or-dim:rgba(212,98,11,.09);
  --ok:#15803D;
  --hdbg:rgba(255,255,255,.88);
  --hoverbg:rgba(0,0,0,.035);
  --warntxt:#8A4A08; --errtxt:#B91C1C;
}
:root[data-tema="claro"] body{background:var(--bg)}
:root[data-tema="claro"]{color-scheme:light}

/* hero e cards de ocasião seguem escuros: os tokens voltam ao original só ali */
:root[data-tema="claro"] .hero,
:root[data-tema="claro"] .oc{
  --txt:#F6F4F1; --txt2:#D6D2CC; --txt3:#B2ADA5;
  --or:#FF8F3C; --or2:#FF8F3C;
  --line2:rgba(255,255,255,.22); --or-dim:rgba(238,113,21,.16);
}
:root[data-tema="claro"] .hero,
:root[data-tema="claro"] .oc{color:var(--txt)}   /* reaplica: cor herdada não segue token redefinido */
:root[data-tema="claro"] .hero{border-bottom:none}
:root[data-tema="claro"] .hero .lead{color:#E4E0DA}
:root[data-tema="claro"] .hero .btn--g{color:#F6F4F1}

/* o botão laranja mantém texto branco nos dois temas */
:root[data-tema="claro"] .btn--p{background:#EE7115; box-shadow:0 6px 22px rgba(238,113,21,.22)}
:root[data-tema="claro"] .btn--p:hover{background:#D4620B; box-shadow:0 10px 30px rgba(238,113,21,.32)}
:root[data-tema="claro"] .menu__tag{background:#EE7115}
:root[data-tema="claro"] .tl__n{border-color:#EE7115; color:#D4620B}

/* sombra leve nos cartões: no claro a borda sozinha não separa do fundo */
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .dep,
:root[data-tema="claro"] .menu,
:root[data-tema="claro"] .sim__box{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05)}
:root[data-tema="claro"] .card:hover,
:root[data-tema="claro"] .dep:hover,
:root[data-tema="claro"] .menu:hover{box-shadow:0 2px 4px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.08)}
:root[data-tema="claro"] .card:hover{background:#FFF}

/* o degradê do card de cardápio precisa terminar na cor do card */
:root[data-tema="claro"] .menu__img::after{background:linear-gradient(0deg, var(--bg2) 2%, transparent 55%)}
:root[data-tema="claro"] .drw{box-shadow:-14px 0 40px rgba(0,0,0,.14)}
:root[data-tema="claro"] .scrim{background:rgba(20,20,24,.45)}
:root[data-tema="claro"] .zap{box-shadow:0 8px 26px rgba(0,0,0,.22)}
:root[data-tema="claro"] select.inp{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2357534C'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* ══════════════════════════════════════════════════════════════════════════
   VÍDEO — fachada de clique-para-tocar
   O player do YouTube custa ~1 MB de JS. Aqui entra só a capa (webp local, ~24 KB)
   e o iframe só é criado no clique. Domínio nocookie: sem cookie de rastreio
   do YouTube em quem nunca dá play.
   ══════════════════════════════════════════════════════════════════════════ */
.vid{
  position:relative; display:block; overflow:hidden; cursor:pointer;
  border-radius:var(--r); border:1px solid var(--line); background:var(--bg2);
  aspect-ratio:16/9; max-width:900px; margin:0 auto;
  transition:border-color .2s, transform .2s
}
.vid:hover{border-color:var(--or); transform:translateY(-3px)}
.vid:focus-visible{outline:2px solid var(--or2); outline-offset:3px}
.vid img{width:100%; height:100%; object-fit:cover; transition:transform .5s, opacity .2s}
.vid:hover img{transform:scale(1.03); opacity:.88}
.vid iframe{width:100%; height:100%; border:0; display:block}

.vid__p{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; background:var(--or); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 30px rgba(0,0,0,.45);
  transition:transform .2s, background .2s; pointer-events:none
}
.vid__p svg{width:30px; height:30px; margin-left:4px}
.vid:hover .vid__p{transform:translate(-50%,-50%) scale(1.1); background:var(--or2)}
.vid__p--s{width:50px; height:50px}
.vid__p--s svg{width:21px; height:21px; margin-left:3px}
.vid__d{
  position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.72); color:#fff;
  font-size:12px; font-weight:650; padding:3px 8px; border-radius:6px; pointer-events:none
}

/* vídeo vertical numa coluna larga: sem limite ele vira uma torre */
.fig-vid{display:flex; justify-content:center}
.fig-vid .vid{max-width:320px; width:100%; margin:0}

/* trio vertical (Shorts) */
.vids-v{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,200px));
  gap:16px; justify-content:center; margin-top:20px
}
.vid--v{aspect-ratio:9/16; max-width:none; margin:0}
.vid--mais{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--bg3); color:var(--txt2); text-align:center; padding:16px
}
.vid--mais svg{width:38px; height:38px; color:var(--or); transition:transform .2s}
.vid--mais:hover{color:var(--txt)}
.vid--mais:hover svg{transform:scale(1.1)}
.vid--mais b{font-size:15px; color:var(--txt)}
.vid--mais span{font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   FAIXA CINEMATOGRÁFICA — o vídeo entra sangrando e perde LARGURA ao subir
   SEM position:sticky de propósito. O sticky prendia o vídeo na tela e dava a
   sensação de página travada; aqui a faixa rola junto com o resto e só muda de
   largura, que é o efeito do site da Higgsfield.
   O JS só escreve --p (0 = largura total · 1 = largura de conteúdo). Sem JS o
   --p vale 1 e a faixa vira um vídeo contido normal.
   ══════════════════════════════════════════════════════════════════════════ */
.cine{position:relative; overflow:hidden}
.cine__frame{
  --cw:min(1080px, 92vw);
  width:calc(100% - (100% - var(--cw)) * var(--p, 1));
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:calc(var(--r) * var(--p, 1));
  overflow:hidden;
  border:1px solid rgba(255,255,255,calc(.09 * var(--p, 1)));
  background:var(--bg2);
  position:relative;
  will-change:width
}
.cine__frame video{width:100%; height:100%; object-fit:cover; display:block}
/* véu leve: segura o contraste do que vier por cima e amarra com o resto */
.cine__frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,13,.30) 0%, rgba(11,11,13,0) 30%,
                                     rgba(11,11,13,0) 68%, rgba(11,11,13,.45) 100%)
}
@media (prefers-reduced-motion:reduce){ .cine__frame{--p:1} }

/* lista completa de sabores dentro do card de cardápio — fechada por padrão,
   para não estourar a altura; aberta, é o que prova a diferença entre as faixas */
/* ⚠️ Sem isto, abrir a lista de sabores de UM cartão esticava os TRÊS: o grid
   nasce com align-items:stretch e a linha inteira acompanha o mais alto.
   ⚠️ E tem que valer SEMPRE, não só com algum aberto (`:has(.sab[open])`, a
   primeira tentativa): alternar stretch→start no clique fazia os cartões
   fechados ENCOLHEREM na hora em que o vizinho abria — o dono viu o primeiro
   cartão "se mexer sozinho". Altura fixa e independente é mais importante que
   os rodapés casarem no pixel. */
#cardapios .grid{align-items:start}

.sab{margin:0 0 18px; border-top:1px solid var(--line)}
.sab summary{
  cursor:pointer; list-style:none; padding:12px 22px 12px 0; position:relative;
  font-size:14px; font-weight:650; color:var(--txt2); transition:color .15s
}
.sab summary::-webkit-details-marker{display:none}
.sab summary:hover{color:var(--or2)}
.sab summary::after{
  content:''; position:absolute; right:4px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--txt3); border-bottom:2px solid var(--txt3);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s, border-color .2s
}
.sab[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sab__c{padding:0 0 6px}
.sab__c p{font-size:13.5px; line-height:1.65; color:var(--txt2); margin:0 0 12px}
.sab__c p:last-child{margin:0}
.sab__c b{color:var(--txt); font-size:12px; letter-spacing:.1em; text-transform:uppercase}