/* ==== Tropical Gardenia Show — folha unica ==============================
   Paleta tirada do proprio letreiro da casa: sol poente, palmeira,
   letra azul. O sol nasce no topo da pagina e se poe no rodape.        */

@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.woff2)format('woff2');
  font-weight:400 900;font-stretch:62% 125%;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:Archivo;src:url(/assets/fonts/archivo-latin-ext.woff2)format('woff2');
  font-weight:400 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-latin.woff2)format('woff2');
  font-weight:400 800;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:Figtree;src:url(/assets/fonts/figtree-latin-ext.woff2)format('woff2');
  font-weight:400 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --noite:#17101F; --noite-2:#241832; --noite-3:#2E2040;
  /* cores AMOSTRADAS do letreiro oficial (preparar_logo.py) */
  --azul:#1848C0; --azul-claro:#CBD6F5;
  --sol:#F0A830; --brasa:#F07848;
  --palmeira:#00A848; --rosa:#D6377B;
  /* variantes acessíveis: as da marca são claras demais para texto/botão */
  --brasa-txt:#B93A15;   /* 5,1:1 no creme  */
  --zap:#1E7A38;         /* 5,4:1 com branco */
  --areia:#F8F2E4; --areia-2:#EDE4D0;
  --tinta:#1A1420; --tinta-fraca:#5A4F62;
  --raio:14px;
  --passo:clamp(4rem,9vw,7.5rem);
  --dentro:clamp(1.15rem,4vw,2rem);
  --larg:1180px;
  --display:Archivo,'Arial Narrow',system-ui,sans-serif;
  --texto:Figtree,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* color-scheme: sem isto a barra de rolagem e os campos nativos saem CLAROS
   num site escuro. touch-action mata o atraso de ~300ms do duplo-toque. */
html{-webkit-text-size-adjust:100%;color-scheme:dark light;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(240,168,48,.28)}
section[id],[id]:target{scroll-margin-top:92px}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
/* Corpo maior de propósito: o público da casa é de 40 a 70 anos, e boa parte
   lê no celular com óculos. 17–19px em vez dos 16px de praxe. */
body{margin:0;background:var(--areia);color:var(--tinta);
  font-family:var(--texto);font-size:clamp(1.06rem,1.02rem + .2vw,1.19rem);
  line-height:1.7;overflow-x:hidden;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-underline-offset:3px;text-decoration-thickness:.08em}
a:hover{color:var(--brasa-txt)}
:where(a,button,summary,input,textarea):focus-visible{
  outline:3px solid var(--brasa);outline-offset:3px;border-radius:4px}

.env{width:min(100% - var(--dentro)*2,var(--larg));margin-inline:auto}
.pula{position:absolute;left:-9999px;top:0;background:var(--sol);color:var(--tinta);
  padding:.7rem 1.1rem;z-index:100;font-weight:700;border-radius:0 0 var(--raio) 0}
.pula:focus{left:0}

/* ---- tipografia -------------------------------------------------------- */
.grito,h1,h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.88;letter-spacing:-.015em;margin:0;text-wrap:balance;
  font-stretch:72%;overflow-wrap:break-word}
/* h1 usa "pretty": só evita palavra órfã. "balance" reequilibra as linhas e
   deixava "DANÇA" sozinha numa linha inteira no desktop. */
/* 5,7rem é o teto em que "AQUI VOCÊ DANÇA" e "TODOS OS RITMOS" (15 caracteres
   cada) cabem numa linha só na coluna do hero — a quebra cai exatamente na
   virada de cor, em vez de deixar "DANÇA" sozinha. */
h1{font-size:clamp(2.15rem,9vw,5.7rem);text-wrap:pretty}
h2{font-size:clamp(1.75rem,5.6vw,3.5rem)}
h3{font-family:var(--display);font-weight:800;font-stretch:88%;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);line-height:1.15;margin:0;
  letter-spacing:-.01em}
.olho{font-family:var(--display);font-weight:700;font-stretch:92%;
  text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;
  color:var(--brasa-txt);margin:0 0 1rem}
.escuro .olho{color:var(--sol)}
.abre{font-size:clamp(1.1rem,1rem + .55vw,1.35rem);line-height:1.55;
  max-width:56ch;color:var(--tinta-fraca)}
.escuro .abre{color:#D9CFE4}
p{margin:0 0 1.1rem;max-width:66ch}
.mini{font-size:.87rem;line-height:1.5;color:var(--tinta-fraca)}
/* --tinta-fraca so vale sobre CREME. Todo contexto de fundo NOITE precisa estar
   listado aqui: .rodape e .cartaz pintam escuro sem usar a classe .escuro,
   e sem isso o texto fica 2,4:1 (o axe nao ve o defeito se so olhar a faixa) */
.escuro .mini,.rodape .mini,.cartaz .mini{color:#BDB2CA}

/* ---- secoes ------------------------------------------------------------ */
.faixa{padding-block:var(--passo);position:relative;overflow:hidden}
/* cabeca de pagina: a faixa de ritmos encosta na base da secao */
.faixa--topo{padding-bottom:0}
.escuro{background:var(--noite);color:var(--areia)}
.escuro h1,.escuro h2,.escuro h3{color:var(--areia)}
/* :not(.bt) e essencial — sem isso .escuro a venceria a cor dos botoes
   e o texto sumiria (ambar sobre ambar) */
.escuro a:not(.bt){color:var(--sol)}
.escuro a:not(.bt):hover{color:#FFD07A}
.creme{background:var(--areia)}
.creme-2{background:var(--areia-2)}

/* o sol: nasce no hero, se poe no rodape */
.sol{position:absolute;left:50%;translate:-50% 0;pointer-events:none;
  width:min(135vw,1000px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--sol) 0%,var(--brasa) 34%,
    rgba(226,84,42,.22) 55%,transparent 70%);
  opacity:.5;z-index:0}
.sol--nasce{bottom:-58%}
.sol--poe{top:62%;opacity:.34}
.acima{position:relative;z-index:1}

/* ---- botoes ------------------------------------------------------------ */
/* text-align:center é o que faltava — justify-content centraliza a CAIXA, mas
   quando o rótulo quebra em duas linhas cada linha herda o alinhamento à
   esquerda. Era o caso de "Reservar no WhatsApp" na barra do celular. */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;
  font-family:var(--display);font-weight:800;font-stretch:90%;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer;
  text-align:center;text-wrap:balance;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,
             box-shadow .16s ease}
.bt .ic-zap{width:1.15em;height:1.15em;flex:none}
.bt:hover{transform:translateY(-2px)}
.bt--zap{background:var(--zap);color:#fff}
.bt--zap:hover{background:#17612C;color:#fff}
.bt--sol{background:var(--sol);color:var(--tinta)}
.bt--sol:hover{background:#FFBB4D;color:var(--tinta)}
.bt--linha{border-color:currentColor;color:inherit;background:transparent}
.escuro .bt--linha{color:var(--areia)}
.escuro .bt--linha:hover{background:var(--areia);color:var(--noite)}
.creme .bt--linha:hover,.creme-2 .bt--linha:hover{background:var(--tinta);color:var(--areia)}
.botoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
/* no celular os botões empilham com larguras diferentes e a coluna fica
   irregular; largura cheia deixa a pilha alinhada e o alvo de toque maior */
@media (max-width:520px){
  .botoes{flex-direction:column;align-items:stretch;gap:.65rem}
  .botoes .bt{width:100%}
}

/* ---- topo -------------------------------------------------------------- */
[id]{scroll-margin-top:90px} /* topo sticky (74px) nao pode engolir o alvo da ancora */
.ic{display:inline-block;vertical-align:-.08em}
.topo{position:sticky;top:0;z-index:50;background:rgba(23,16,31,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(248,242,228,.14)}
.topo__linha{display:flex;align-items:center;gap:1rem;min-height:74px}
/* cor explícita: sem ela a marca herda o azul de link, que é cor de fundo
   CLARO, e qualquer texto solto aqui sairia em 2,4:1 sobre o topo escuro */
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;
  color:var(--areia)}
.marca img{height:52px;width:auto;display:block;
  transition:transform .18s ease;transform-origin:left center}
.marca:hover img{transform:scale(1.04)}
.marca em{font-style:normal;font-size:.6rem;letter-spacing:.24em;line-height:1.3;
  color:var(--sol);font-family:var(--display);font-weight:700;font-stretch:96%;
  text-transform:uppercase;border-left:1px solid rgba(248,242,228,.28);
  padding-left:.7rem}
@media (max-width:520px){.marca img{height:44px}.marca em{display:none}}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a{color:var(--areia);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.55rem .7rem;border-radius:8px}
.nav a:hover{background:rgba(248,242,228,.12);color:var(--sol)}
.nav a[aria-current=page]{color:var(--sol);box-shadow:inset 0 -2px 0 var(--sol)}
.nav .bt{margin-left:.5rem;min-height:44px;padding:.55rem 1.1rem;font-size:.92rem}
.menu-bt{display:none;margin-left:auto;background:none;border:2px solid rgba(248,242,228,.35);
  color:var(--areia);border-radius:10px;min-height:46px;min-width:46px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.1em;padding:0 .9rem;cursor:pointer}
@media (max-width:900px){
  .menu-bt{display:block}
  .nav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--noite);padding:1rem var(--dentro) 1.6rem;gap:.15rem;
    border-bottom:1px solid rgba(248,242,228,.14);display:none}
  .nav[data-aberto=sim]{display:flex}
  .nav a{padding:.85rem .6rem;font-size:1.05rem}
  .nav .bt{margin:.6rem 0 0}
}

/* ---- hero -------------------------------------------------------------- */
.hero{background:var(--noite);color:var(--areia);position:relative;overflow:hidden;
  padding-block:clamp(3.2rem,8vw,6rem) 0}
.hero__grade{position:relative;z-index:1;display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);align-items:center}
.hero__grade>*{min-width:0}
@media (max-width:860px){.hero__grade{grid-template-columns:minmax(0,1fr)}}
.hero h1{margin-bottom:1.3rem}
.hero h1 .risca{color:var(--sol);display:block}
.hero__fotos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hero__fotos img{border-radius:var(--raio);aspect-ratio:3/4;object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hero__fotos img:first-child{grid-row:span 2;aspect-ratio:3/5}
@media (max-width:860px){
  .hero__fotos{grid-template-columns:repeat(3,1fr)}
  .hero__fotos img,.hero__fotos img:first-child{aspect-ratio:3/4;grid-row:auto}
}
.selo{display:inline-flex;align-items:center;gap:.5rem;background:rgba(245,165,36,.16);
  border:1px solid rgba(245,165,36,.42);color:var(--sol);border-radius:999px;
  padding:.4rem .95rem;font-weight:700;font-size:.83rem;margin-bottom:1.4rem}

/* ---- marquee de ritmos ------------------------------------------------- */
.ritmos{background:var(--sol);color:var(--noite);overflow:hidden;
  padding-block:.85rem;border-block:3px solid var(--noite)}
.ritmos__trilho{display:flex;width:max-content;animation:correr 42s linear infinite}
.ritmos__set{display:flex;list-style:none;margin:0;padding:0}
.ritmos li{font-family:var(--display);font-weight:900;font-stretch:76%;
  text-transform:uppercase;font-size:clamp(1.05rem,3vw,1.9rem);letter-spacing:.01em;
  padding-inline:1.1rem;white-space:nowrap;display:flex;align-items:center;gap:2.2rem}
.ritmos li::after{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--noite);flex:none}
@keyframes correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ritmos__trilho{animation:none;width:auto}
  .ritmos__set{flex-wrap:wrap;justify-content:center}
  .ritmos__eco{display:none}
}

/* ---- cartazes do fim de semana ---------------------------------------- */
.cartazes{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:2.6rem}
.cartaz{background:var(--noite);color:var(--areia);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  border:1px solid rgba(248,242,228,.13)}
.cartaz__foto{position:relative}
.cartaz__foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.cartaz__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--noite) 4%,rgba(23,16,31,.15) 60%,transparent)}
.cartaz__dia{position:absolute;left:0;bottom:0;z-index:1;padding:0 1.1rem .4rem;
  font-family:var(--display);font-weight:900;font-stretch:66%;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,3.3rem);line-height:.85;color:var(--areia)}
.cartaz__hora{position:absolute;right:1rem;bottom:.9rem;z-index:1;background:var(--sol);
  color:var(--noite);border-radius:999px;padding:.25rem .8rem;font-weight:800;
  font-family:var(--display);font-stretch:92%;font-size:1rem}
.cartaz__corpo{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;
  gap:.6rem;flex:1}
.cartaz__corpo h3{color:var(--sol)}
.cartaz__corpo p{margin:0;font-size:.96rem;color:#D9CFE4}
.cartaz__link{margin-top:auto;padding-top:.5rem;font-weight:700;font-size:.93rem}

/* ---- faixa da oferta --------------------------------------------------- */
.oferta{background:var(--azul);color:var(--areia);border-radius:var(--raio);
  padding:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.4rem;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;margin-top:2.4rem}
.oferta>*{min-width:0}
@media (max-width:820px){.oferta{grid-template-columns:minmax(0,1fr);text-align:center;
  justify-items:center}}
.oferta__valor{font-family:var(--display);font-weight:900;font-stretch:70%;
  font-size:clamp(3.4rem,11vw,5.2rem);line-height:.8;color:var(--sol)}
.oferta h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:.4rem}
.oferta p{margin:0;color:#CBD6F5}

/* ---- listas ------------------------------------------------------------ */
.cards{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:2.4rem;padding:0;list-style:none}
.card{background:#fff;border:1px solid var(--areia-2);border-radius:var(--raio);
  padding:1.35rem 1.4rem;border-top:4px solid var(--brasa)}
.escuro .card{background:var(--noite-2);border-color:rgba(248,242,228,.12);
  border-top-color:var(--sol)}
.card h3{margin-bottom:.5rem}
.card p{margin:0;font-size:.96rem}

.nomes{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:2.2rem 0 0;list-style:none}
.nomes li{background:var(--noite-2);color:var(--areia);border-radius:999px;
  padding:.5rem 1.05rem;font-family:var(--display);font-weight:700;font-stretch:88%;
  font-size:.95rem;border:1px solid rgba(248,242,228,.16)}
.creme .nomes li,.creme-2 .nomes li{background:#fff;color:var(--azul);
  border-color:var(--areia-2)}

.elenco{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2.4rem;padding:0;list-style:none}
.elenco li{border-left:3px solid var(--sol);padding:.15rem 0 .15rem 1rem}
.elenco strong{display:block;font-family:var(--display);font-weight:800;font-stretch:88%;
  font-size:1.08rem;letter-spacing:-.005em}
.elenco span{font-size:.92rem;color:var(--tinta-fraca)}
.escuro .elenco span{color:#BDB2CA}

/* ---- prova social ------------------------------------------------------ */
.provas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:2.2rem;padding:0;list-style:none}
.prova{background:var(--noite-2);border-radius:var(--raio);padding:1.3rem;
  border:1px solid rgba(248,242,228,.13)}
.prova b{display:block;font-family:var(--display);font-weight:900;font-stretch:76%;
  font-size:clamp(2rem,5vw,2.7rem);line-height:.9;color:var(--sol)}
.prova span{font-size:.9rem;color:#BDB2CA}

/* ---- depoimentos (avaliações reais do Google) -------------------------- */
.depos{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  margin-top:2.4rem}
.depos>*{min-width:0}
.depo{margin:0;background:#fff;border:1px solid var(--areia-2);border-radius:var(--raio);
  padding:1.4rem 1.45rem;display:flex;flex-direction:column;gap:.8rem}
.escuro .depo{background:var(--noite-2);border-color:rgba(248,242,228,.13)}
.depo__nota{display:flex;gap:.12rem;color:var(--sol);line-height:1}
.depo blockquote{margin:0;font-size:1.06rem;line-height:1.55;font-weight:500;
  text-wrap:pretty}
.depo blockquote::before{content:"“"}
.depo blockquote::after{content:"”"}
.depo figcaption{margin-top:auto;font-size:.85rem;color:var(--tinta-fraca);
  font-weight:600}
.escuro .depo figcaption{color:#BDB2CA}

/* ---- faq --------------------------------------------------------------- */
.faq{margin-top:2.4rem;border-top:1px solid var(--areia-2)}
.faq details{border-bottom:1px solid var(--areia-2)}
.faq summary{cursor:pointer;padding:1.15rem .3rem;font-family:var(--display);
  font-weight:800;font-stretch:88%;font-size:clamp(1.02rem,2.2vw,1.2rem);
  list-style:none;display:flex;gap:1rem;align-items:flex-start;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--brasa-txt);
  font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--brasa-txt)}
.faq p{padding:0 .3rem 1.3rem;margin:0;max-width:74ch}

/* ---- mapa / local ------------------------------------------------------ */
.local{display:grid;gap:2rem;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;margin-top:2.4rem}
.local>*,.cards>*,.cartazes>*,.rodape__grade>*,.elenco>*{min-width:0}
@media (max-width:860px){.local{grid-template-columns:minmax(0,1fr)}}
.local iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--raio);
  background:var(--noite-2)}
.endereco{font-style:normal;font-size:1.06rem;line-height:1.75}
.endereco strong{font-family:var(--display);font-weight:800;font-stretch:88%}
.horarios{list-style:none;padding:0;margin:1.6rem 0 0;max-width:24rem}
.horarios li{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;
  border-bottom:1px dashed rgba(248,242,228,.22)}
.creme .horarios li,.creme-2 .horarios li{border-bottom-color:var(--areia-2)}
.horarios b{font-family:var(--display);font-weight:800;font-stretch:88%}
.horarios span{color:var(--sol);font-weight:700}
.creme .horarios span,.creme-2 .horarios span{color:var(--brasa-txt)}

/* ---- galeria ----------------------------------------------------------- */
.galeria{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  margin-top:2.4rem}
.galeria img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;width:100%}

/* ---- migalhas ---------------------------------------------------------- */
.migalhas{font-size:.85rem;padding-block:1rem 0;color:var(--tinta-fraca)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.migalhas li::after{content:"›";margin-left:.4rem;opacity:.5}
.migalhas li:last-child::after{content:""}

/* ---- rodape ------------------------------------------------------------ */
.rodape{background:var(--noite);color:var(--areia);position:relative;overflow:hidden;
  padding-block:var(--passo) 2rem;margin-top:0}
.rodape__grade{position:relative;z-index:1;display:grid;gap:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.rodape h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:1rem}
.rodape h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sol);margin-bottom:.9rem;font-stretch:92%;font-weight:700}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.rodape a{color:var(--areia);text-decoration:none}
.rodape a:hover{color:var(--sol);text-decoration:underline}
.creditos{position:relative;z-index:1;margin-top:2.8rem;padding-top:1.4rem;
  border-top:1px solid rgba(248,242,228,.16);font-size:.83rem;color:#BDB2CA;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}
.creditos p{margin:0;max-width:none}

/* ---- "tem show hoje?" — preenchido por JS, some sem JS ------------------ */
.hoje{display:block;border-radius:var(--raio);padding:.85rem 1.15rem;
  margin-bottom:1.4rem;font-size:1rem;line-height:1.45;border:1px solid transparent}
/* sem JS o elemento fica vazio: tem que sumir de verdade. `.hoje` sozinho
   venceria o [hidden] do navegador e deixaria uma caixa vazia na página. */
.hoje[hidden]{display:none}
.hoje--sim{background:rgba(0,168,72,.14);border-color:rgba(0,168,72,.5);color:var(--areia)}
.hoje--nao{background:rgba(248,242,228,.07);border-color:rgba(248,242,228,.22);
  color:#D9CFE4}
.hoje strong{font-family:var(--display);font-weight:800;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.04em;margin-right:.3rem}
.hoje--sim strong{color:#5AD98A}
.hoje a{color:var(--sol);font-weight:600}

/* ---- resposta rápida: o bloco que a IA e o Google extraem --------------- */
.resposta{background:#fff;border-left:5px solid var(--sol);border-radius:0 var(--raio) var(--raio) 0;
  padding:1.5rem 1.7rem;margin-top:2.2rem;box-shadow:0 2px 14px rgba(26,20,32,.06)}
.escuro .resposta{background:var(--noite-2);box-shadow:none;
  border:1px solid rgba(248,242,228,.13);border-left:5px solid var(--sol)}
.resposta p{margin:0 0 .8rem;max-width:70ch}
.resposta p:last-child{margin-bottom:0}
.resposta strong{font-weight:700}

/* ---- tratamento das fotos ---------------------------------------------
   as fotos vêm de reel: escuras, ruidosas e com luz de palco magenta.
   um grau leve e IGUAL em todas faz elas lerem como um conjunto.        */
.foto{filter:saturate(1.12) contrast(1.06)}

.rodape__logo{width:min(220px,58%);height:auto;margin-bottom:1.3rem}

/* cartaz: o dia é o herói do card, precisa vencer qualquer foto atrás */
/* o card e NOITE dentro de uma faixa creme — link azul da marca daria 2,4:1 */
.cartaz a:not(.bt){color:var(--sol)}
.cartaz a:not(.bt):hover{color:#FFD07A}
.cartaz{transition:transform .18s ease,border-color .18s ease}
.cartaz:hover{transform:translateY(-4px);border-color:rgba(240,168,48,.45)}
.cartaz__dia{text-shadow:0 2px 18px rgba(23,16,31,.95),0 1px 3px rgba(23,16,31,.9)}
.cartaz__foto::after{background:linear-gradient(to top,var(--noite) 6%,
  rgba(23,16,31,.55) 42%,rgba(23,16,31,.1) 78%,transparent)}

/* ---- botão flutuante de WhatsApp (desktop) -----------------------------
   Mesmo padrão do site da Prático: fica no canto, com um balão que diz o que
   acontece ao clicar. No CELULAR ele some — lá quem manda é a barra fixa, e
   dois botões de WhatsApp na mesma tela seria ruído.                      */
.zap-fixo{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;
  align-items:center;gap:12px;text-decoration:none}
.zap-fixo__balao{background:#fff;border:1px solid var(--areia-2);border-radius:12px;
  padding:.6rem .85rem;font-size:.86rem;line-height:1.35;color:var(--tinta);
  box-shadow:0 14px 28px -14px rgba(26,20,32,.55);font-weight:600}
.zap-fixo__balao b{display:block;color:var(--zap);font-weight:800}
.zap-fixo__bola{width:60px;height:60px;border-radius:50%;background:var(--zap);
  display:grid;place-items:center;color:#fff;flex:none;
  box-shadow:0 14px 30px -8px rgba(30,122,56,.65);animation:pulsa 2.6s infinite}
.zap-fixo__bola svg{width:32px;height:32px}
.zap-fixo:hover .zap-fixo__bola{background:#17612C}
@keyframes pulsa{
  0%{box-shadow:0 14px 30px -8px rgba(30,122,56,.65),0 0 0 0 rgba(30,122,56,.5)}
  70%{box-shadow:0 14px 30px -8px rgba(30,122,56,.65),0 0 0 18px rgba(30,122,56,0)}
  100%{box-shadow:0 14px 30px -8px rgba(30,122,56,.65),0 0 0 0 rgba(30,122,56,0)}}
@media (prefers-reduced-motion:reduce){.zap-fixo__bola{animation:none}}
@media (max-width:720px){.zap-fixo{display:none}}

/* ---- barra fixa de reserva no celular ---------------------------------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:.6rem var(--dentro) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(23,16,31,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(248,242,228,.16)}
/* duas saídas, não uma: metade deste público prefere LIGAR a digitar.
   Hierarquia clara: o WhatsApp é a ação principal (verde cheio), "Ligar" é
   alternativa (contorno) — dois botões cheios brigariam entre si. */
.barra__par{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:stretch}
.barra .bt{width:100%;padding-inline:1rem;min-height:56px;font-size:1.05rem;
  letter-spacing:.02em;white-space:nowrap}
.barra .bt--zap{box-shadow:0 6px 18px -6px rgba(30,122,56,.75)}
.barra .bt--ligar{background:transparent;color:var(--areia);
  border-color:rgba(248,242,228,.45);padding-inline:1.25rem}
.barra .bt--ligar:hover{background:rgba(248,242,228,.12);border-color:var(--areia)}
@media (max-width:720px){.barra{display:block}body{padding-bottom:92px}}
@media (max-width:360px){
  .barra .bt{font-size:.98rem;padding-inline:.7rem}
  .barra .bt--ligar{padding-inline:.9rem}
}