/* Site base Dripp One. Cores/fontes vem do design (variaveis no <head>). Mobile-first. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-top:calc(80px + 2 * var(--logo-respiro,0px))}
body{margin:0;background:var(--fundo);color:var(--texto);font:17px/1.65 var(--f-texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
@supports (overflow:clip){main{overflow-x:clip}}
/* Sem overflow:clip (iOS < 16): nada de transbordar de lado, senao a pagina ganha rolagem horizontal. */
@supports not (overflow:clip){.maior .foto,.com-recorte.maior .hero-recorte img{scale:none!important}.entrada-ativa [data-entrada=direita].vis{animation-name:entra-esmaecer}}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titulo);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,60px)}h2{font-size:clamp(28px,4vw,42px);color:var(--titulo-cor)}h3{font-size:20px}
p{margin:0 0 1em}
.in{max-width:1140px;margin:0 auto;padding:0 20px}
.estreito{max-width:780px}
.centro{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:var(--r-btn,999px);background:var(--destaque);color:var(--sobre-destaque);
  font:700 16px var(--f-texto);text-decoration:none;border:var(--borda-btn,0);cursor:pointer;box-shadow:var(--sombra-btn,0 6px 20px rgba(0,0,0,.14));transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.peq{min-height:42px;padding:0 18px;font-size:14px;box-shadow:none}

/* ---- Topo: logo a esquerda ou no centro; no celular sempre sanduiche ---- */
.topo{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fundo) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--texto) 10%,transparent)}
.topo .in{display:flex;align-items:center;gap:16px;min-height:70px;flex-wrap:wrap}
.marca{font:700 var(--logo-texto,21px)/1.15 var(--f-titulo);color:var(--titulo-cor);text-decoration:none;margin-right:auto}
/* Nome em texto no celular: teto (Design::LOGO_TEXTO_MAX_CELULAR) para nome comprido nao estourar o topo. */
@media (max-width:899px){
  .marca{font-size:min(var(--logo-texto,21px),26px)}
  /* Nome comprido: quebra em linhas AO LADO do menu (antes empurrava o sanduiche para uma 2a linha). */
  .topo .in{flex-wrap:nowrap}.marca{flex:1 1 0;min-width:0;overflow-wrap:anywhere}.sanduiche{flex:none}
}
/* "Espaco em volta da logo" (aba Design): soma acima e abaixo do topo; no celular vale a metade. */
.topo .in{padding-block:calc(var(--logo-respiro,0px) / 2);min-height:calc(70px + var(--logo-respiro,0px))}
@media (min-width:900px){.topo .in{padding-block:var(--logo-respiro,0px);min-height:calc(70px + 2 * var(--logo-respiro,0px))}}
.marca img{height:var(--logo-h,44px);width:auto;max-width:min(260px,60vw);object-fit:contain}
@media (max-width:899px){.marca img{height:min(var(--logo-h,44px),48px)}}
.logo-rodape{display:block;height:var(--logo-rodape-h,48px);width:auto;max-width:min(320px,80vw);object-fit:contain}
.logo-rodape.peq{display:inline-block;height:min(var(--logo-rodape-h,48px),32px);vertical-align:middle;margin-right:10px}
.sanduiche{display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;width:44px;height:44px;align-items:center;margin-right:-8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.sanduiche span{width:24px;height:2px;background:var(--texto);border-radius:2px;transition:transform .28s ease,opacity .2s ease}
/* Aberto: as tres linhas viram um X (5 px de vao + 2 px de linha = 7 px). */
.menu-toggle:checked+.sanduiche span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle:checked+.sanduiche span:nth-child(2){opacity:0;transform:scaleX(.3)}
.menu-toggle:checked+.sanduiche span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.links{display:none;width:100%;flex-direction:column;gap:4px;padding:6px 0 16px}
.links a:not(.btn){padding:10px 0;text-decoration:none;font-weight:600}
.menu-toggle:checked~.links{display:flex}
/* Celular: painel em cartao + fundo da pagina escurecido e desfocado (o fundo fica FORA do .topo, que ja tem
   backdrop-filter e prenderia um position:fixed dentro dele). Sem JS: abre como antes, sem o desfoque. */
.menu-fundo{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .25s ease}
html.menu-aberto .menu-fundo{opacity:1;pointer-events:auto}
html.menu-aberto{overflow:hidden}
html.menu-aberto .wa-flutuante{opacity:0;pointer-events:none;transition:opacity .2s ease}
@media (max-width:899px){
  .menu-toggle:checked~.links{position:absolute;top:100%;left:0;right:0;margin:0;padding:10px 20px 22px;gap:0;background:var(--fundo);
    border-radius:0 0 calc(var(--r,16px) + 6px) calc(var(--r,16px) + 6px);box-shadow:0 22px 40px rgba(0,0,0,.22);
    max-height:calc(100dvh - 90px);overflow:auto;animation:menu-entra .26s ease both}
  .menu-toggle:checked~.links a:not(.btn){padding:15px 4px;font-size:18px;border-bottom:1px solid color-mix(in srgb,var(--texto) 10%,transparent)}
  .menu-toggle:checked~.links a:not(.btn)[aria-current]{color:var(--destaque)}
  .menu-toggle:checked~.links .btn{margin-top:16px;width:100%;justify-content:center;text-align:center;min-height:50px;font-size:16px}
  .topo .in{position:relative}
}
@keyframes menu-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sanduiche span,.menu-fundo{transition:none}.menu-toggle:checked~.links{animation:none}}
@media (min-width:900px){
  .sanduiche{display:none}
  .links{display:flex;width:auto;flex-direction:row;align-items:center;gap:26px;padding:0}
  .links a:not(.btn){padding:0;font-size:15px}
  .menu-logo_centro .in{flex-direction:column;justify-content:center;padding-top:calc(14px + var(--logo-respiro,0px));padding-bottom:calc(12px + var(--logo-respiro,0px));gap:10px}
  .menu-logo_centro .marca{margin:0}
}

/* ---- Fundos por bloco ---- */
.bloco{padding:84px 0;position:relative}
.f-suave{background:var(--suave)}
.f-principal{background:var(--principal);color:var(--sobre-principal)}
.f-principal h2,.f-principal h3{color:var(--sobre-principal)}
/* Fundo "Com imagem" (qualquer bloco, menos capa e parallax): imagem + camada de cor desenhada como 1a camada do proprio
   background (degrade liso com a cor na forca escolhida). Sem ::before/isolation de proposito: isso criava um contexto de
   empilhamento e a foto que "ultrapassa a borda" para baixo ficava atras da secao seguinte (06/10, tatakua).
   O texto acompanha a camada: claro na escura/colorida, escuro na "clara". Cards do bloco mantem o fundo deles. */
.f-imagem{--fc-cor:#000;--fc-tinta:color-mix(in srgb,var(--fc-cor) calc(var(--fundo-camada,.6) * 100%),transparent);
  background-image:linear-gradient(var(--fc-tinta),var(--fc-tinta)),var(--fundo-img);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}
.f-imagem.fc-principal{--fc-cor:var(--principal);color:var(--sobre-principal)}
.f-imagem.fc-destaque{--fc-cor:var(--destaque);color:var(--sobre-destaque)}
.f-imagem.fc-complementar{--fc-cor:var(--complementar);color:var(--sobre-complementar)}
.f-imagem.fc-clara{--fc-cor:#fff;color:#111}
.f-imagem.fc-nenhuma{--fc-cor:transparent}
.f-imagem>.in>h2,.f-imagem>.in>.sobre,.f-imagem .texto h2,.f-imagem .texto .sobre,.f-imagem.v-icones .topico h3{color:inherit}
.f-imagem.v-cards .topico,.f-imagem details{color:var(--texto)}
.f-imagem.v-cards .topico h3{color:var(--titulo-cor)}
.f-imagem .btn.contorno{color:inherit}
.f-imagem.fundo-fixo{background-attachment:fixed}
@media (hover:none),(max-width:900px){.f-imagem.fundo-fixo{background-attachment:scroll}}
.f-pattern{background-color:var(--fundo);background-image:radial-gradient(color-mix(in srgb,var(--complementar) 30%,transparent) 1.4px,transparent 1.6px);background-size:22px 22px}

/* ---- Capa (hero) ---- */
.b-hero{background:var(--principal);color:var(--sobre-principal);padding:110px 0 118px;overflow:hidden}
.b-hero.com-img{background:#111;color:#fff}
.b-hero h1{max-width:840px}
.b-hero .sub{font-size:clamp(18px,2.4vw,22px);max-width:660px;opacity:.95;margin-bottom:30px}
.b-hero .in{position:relative;z-index:1}
/* Altura escolhida (% da tela, descontando o menu fixo de ~70px no 100%): conteudo centralizado na vertical. */
.b-hero.alt{display:flex;align-items:center;padding:60px 0;min-height:calc(var(--hero-h) * (1vh - .7px));min-height:calc(var(--hero-h) * (1svh - .7px))}
.b-hero.alt>.in{width:100%}
/* Frase de chamada em metade da largura (so no computador; no celular ocupa tudo). */
@media (min-width:900px){
  .b-hero.chamada-esquerda .chamada,.b-hero.chamada-direita .chamada{max-width:50%}
  .b-hero.chamada-direita .chamada{margin-left:auto}
}
.hero-fotos{position:absolute;inset:0}
.hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.hero-fotos img.on{opacity:.5}
/* Frase de chamada no centro (50%): centralizada no computador; no celular ocupa tudo, tambem centralizada. */
.b-hero.chamada-centro .chamada{text-align:center}
.b-hero.chamada-centro h1,.b-hero.chamada-centro .sub{margin-inline:auto}
@media (min-width:900px){.b-hero.chamada-centro .chamada{max-width:50%;margin-inline:auto}}
/* Video do YouTube de fundo: imagem na hora; o iframe (cobrindo, sem controles, sem clique) aparece quando toca.
   O scale esconde as bordas/titulo que o YouTube mostra nos primeiros segundos. */
.b-hero.com-video{background:#111;color:#fff}
.hero-video{position:absolute;inset:0;overflow:hidden;container-type:size}
.hero-video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Capa do video no YouTube (sem imagem de seguranca): miniatura personalizada costuma ter borda/faixa (ex.: branca na
   lateral) que aparece em tela ultra wide, e a hqdefault e' 4:3 com faixas pretas. Amplia um pouco; a .hero-video corta. */
.hero-video .poster-yt{transform:scale(1.08)}
/* Enquadramento no celular (campo foco_mobile da capa): --fx/--fy = 0% | 100% (sem = centro). Imagem e imagem de seguranca
   por object-position; o video desloca o iframe (que e' maior que a capa) para o mesmo canto. Computador nao muda. */
@media (max-width:899px){
  .b-hero .hero-fotos img,.b-hero .hero-video .poster{object-position:var(--fx,50%) var(--fy,50%)}
  .b-hero .hero-video iframe{top:var(--fy,50%);left:var(--fx,50%);transform:translate(calc(var(--fx,50%) * -1),calc(var(--fy,50%) * -1)) scale(1.18);transform-origin:var(--fx,50%) var(--fy,50%)}
}
.hero-video .poster-yt.hq{transform:scale(1.36)}
.hero-video iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);border:0;
  transform:translate(-50%,-50%) scale(1.18);pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero-video iframe.on{opacity:1}
.hero-camada{position:absolute;inset:0;background:#000;opacity:var(--camada,.5)}
.camada-principal .hero-camada{background:var(--principal)}
.camada-destaque .hero-camada{background:var(--destaque)}
.camada-complementar .hero-camada{background:var(--complementar)}
.camada-clara .hero-camada{background:#fff}
.b-hero.com-video.camada-clara{color:#111}
.b-hero.com-video .btn.contorno{color:inherit}
/* Menu sobre a capa (sensacao de tela toda): o topo sai do fluxo (fixo) e a capa sobe por baixo dele.
   --topo-h: altura do topo (o site.js mede; aqui a estimativa). Transparente: so no alto da pagina (classe
   topo-livre, do site.js), ao rolar volta ao normal; sem JS fica solido. Esmaecido: translucido o tempo todo. */
:root{--topo-h:calc(70px + var(--logo-respiro,0px))}
@media (min-width:900px){:root{--topo-h:calc(70px + 2 * var(--logo-respiro,0px))}}
body:has(.b-hero.sob-menu) .topo{position:fixed;left:0;right:0;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.b-hero.sob-menu{padding-top:calc(var(--topo-h) + 90px)}
.b-hero.sob-menu.alt{padding-top:calc(var(--topo-h) + 40px);min-height:calc(var(--hero-h) * 1vh);min-height:calc(var(--hero-h) * 1svh)}
body:has(.b-hero.menu-capa-esmaecido) .topo{background:color-mix(in srgb,var(--fundo) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:transparent}
html.topo-livre:not(.menu-aberto) .topo{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--topo-livre-cor,#fff)}
html.topo-livre:not(.menu-aberto) .topo .marca{color:inherit}
html.topo-livre:not(.menu-aberto) .topo .sanduiche span{background:currentColor}
@media (prefers-reduced-motion:reduce){.hero-video iframe,body:has(.b-hero.sob-menu) .topo{transition:none}}
/* Capa com imagem recortada (PNG sem fundo). Celular: texto em cima, imagem embaixo. Computador: metade texto,
   metade imagem (o lado do texto vem da "frase de chamada"). Posicao: classes ph-* (horizontal) e pv-* (vertical,
   so no computador) viram --px/--py, que posicionam a imagem e sao o ponto de onde ela cresce ao ser aumentada
   (--esc, "Aumentar a imagem"; pode passar da capa, o main corta so o lado). */
.b-hero.com-recorte,.b-hero.com-recorte.alt{overflow:visible;padding-bottom:0}
.b-hero.com-recorte.alt{align-items:stretch}
.b-hero.com-recorte .hero-fotos{overflow:hidden}
.hero-duas{display:grid;gap:26px}
.com-recorte.alt .hero-duas{grid-template-rows:1fr auto}
.com-recorte .chamada{position:relative;z-index:2;align-self:center}
.hero-recorte{--px:50%;--py:100%;display:flex;justify-content:center;align-items:flex-end;min-width:0;align-self:end}
.hero-recorte.ph-esquerda{--px:0%;justify-content:flex-start}
.hero-recorte.ph-direita{--px:100%;justify-content:flex-end}
.hero-recorte img{width:min(100%,400px);max-height:46vh;max-height:46svh;object-fit:contain;object-position:var(--px) var(--py);transform-origin:var(--px) var(--py)}
.com-recorte.maior .hero-recorte img{scale:min(var(--esc,1),1.1)}
/* Menor que 100%: encolhe de verdade (sem buraco no lugar), e o flex poe na posicao escolhida. */
.com-recorte.menor .hero-recorte img{width:calc(min(100%,400px) * var(--esc,1));max-height:calc(46svh * var(--esc,1))}
.b-hero.com-recorte:not(.rec-base){padding-bottom:48px}
@media (min-width:900px){
  .hero-duas{grid-template-columns:1fr 1fr;gap:40px}
  .com-recorte.alt .hero-duas{grid-template-rows:none}
  .b-hero.com-recorte .chamada{max-width:none;margin:0;padding-bottom:118px}
  .b-hero.com-recorte.alt .chamada{padding-bottom:60px}
  .com-recorte.chamada-direita .hero-recorte{order:-1}
  .hero-recorte{align-self:stretch}
  .hero-recorte.pv-centro{--py:50%;align-items:center}
  .hero-recorte.pv-topo{--py:0%;align-items:flex-start}
  .b-hero.com-recorte:not(.rec-base){padding-bottom:0}
  .com-recorte:not(.rec-base) .hero-recorte{padding-bottom:60px}
  .hero-recorte img{width:100%;max-height:min(82vh,760px)}
  .com-recorte.maior .hero-recorte img{scale:var(--esc,1)}
  .com-recorte.menor .hero-recorte img{width:calc(100% * var(--esc,1));max-height:calc(min(82vh,760px) * var(--esc,1))}
}
.pontos{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:0;z-index:2}
.pontos button{width:28px;height:28px;padding:9px;background-clip:content-box;border-radius:50%;border:0;background-color:rgba(255,255,255,.5);cursor:pointer}
.pontos button.on{background-color:#fff}

/* ---- Foto + texto ---- */
.duas{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.duas{grid-template-columns:1fr 1fr}.duas.sem-img{grid-template-columns:1fr}.v-texto_foto .duas .foto{order:2}}
.foto{border-radius:var(--r,22px);box-shadow:var(--sombra-forte,0 14px 40px rgba(0,0,0,.14));width:100%;object-fit:cover;aspect-ratio:4/3}
.foto.inteira{aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none;width:auto;max-width:100%;justify-self:center}
/* Posicao da foto na coluna (horizontal so muda algo na imagem inteira; vertical quando o texto e' mais alto). */
.foto{--px:50%;--py:50%}
.foto.ph-esquerda{--px:0%;justify-self:start}.foto.ph-direita{--px:100%;justify-self:end}
.foto.pv-topo{--py:0%;align-self:start}.foto.pv-base{--py:100%;align-self:end}
/* Foto maior que o bloco ou passando da borda: sobe so a IMAGEM (nao a secao), assim ela fica acima do fundo das
   secoes vizinhas (mesmo que elas tambem transbordem) e o texto do proprio bloco continua por cima, legivel.
   Na capa a imagem ja fica no .in (z-index 1), acima do fundo do bloco seguinte. */
/* Ordem: quem ultrapassa a borda fica por cima de quem so esta aumentado; o texto sempre por cima. */
.maior .foto{position:relative;z-index:2}
.ultra .foto{position:relative;z-index:3}
:is(.maior,.ultra) .texto{position:relative;z-index:4}
.b-hero.ultra>.in{z-index:3}
.maior .foto{transform-origin:var(--px) var(--py);scale:min(var(--esc,1),1.12)}
@media (min-width:900px){.maior .foto{scale:var(--esc,1)}}
.menor .foto{width:calc(100% * var(--esc,1))}
.menor .foto.inteira{width:auto;max-width:calc(100% * var(--esc,1))}
.menor .foto:not(.ph-esquerda):not(.ph-direita){justify-self:center}
/* Esmaecer a imagem (efeito fixo, capa recortada e foto + texto): degrade que some no fundo ou imagem mais clara.
   "Mais clara" usa filter (nao opacity) para nao brigar com a animacao de entrada. */
.esm-base{-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 96%);mask-image:linear-gradient(to bottom,#000 45%,transparent 96%)}
.esm-bordas{-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.esm-clara{filter:opacity(.5)}
/* Ultrapassar a borda: a imagem inteira desce (ou sobe) por cima da secao vizinha.
   transform (nao translate/scale): soma com a entrada (translate) e com o aumento (scale) sem brigar. */
.ultra-baixo .hero-recorte img,.ultra-baixo .foto{transform:translateY(22%)}
.ultra-baixo_mais .hero-recorte img,.ultra-baixo_mais .foto{transform:translateY(40%)}
.ultra-cima .foto{transform:translateY(-22%)}
.ultra-cima_mais .foto{transform:translateY(-40%)}
/* Celular (foto e texto empilhados): a foto fica do lado da borda que ela ultrapassa. Para baixo = texto primeiro e a foto
   embaixo, descendo sobre a secao seguinte; para cima = foto primeiro (ja e' a ordem do HTML), subindo sobre a anterior.
   Sem isso a foto que desce cairia por cima do proprio texto. (A capa recortada ja poe a imagem abaixo do texto.)
   No celular a foto e' menor e o deslocamento (22%/40% da altura dela) nao vencia o espaco interno da secao (84 px): a
   secao encolhe esse espaco do lado da borda, para a foto passar de verdade. */
@media (max-width:899px){
  .ultra-baixo .duas .foto,.ultra-baixo_mais .duas .foto{order:2}
  .b-foto_texto.ultra-baixo{padding-bottom:20px}.b-foto_texto.ultra-baixo_mais{padding-bottom:12px}
  .b-foto_texto.ultra-cima{padding-top:20px}.b-foto_texto.ultra-cima_mais{padding-top:12px}
}
.texto .btn{margin-top:6px}

/* ---- 3 topicos / cards ---- */
.tres{display:grid;gap:22px;margin-top:14px}
@media (min-width:760px){.tres{grid-template-columns:repeat(3,1fr)}}
.topico .num{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-sm,16px);background:var(--complementar);color:var(--sobre-complementar);font:700 18px var(--f-titulo);margin-bottom:14px}
.v-cards .topico{background:var(--cartao);border-radius:var(--r,20px);padding:26px;box-shadow:var(--sombra,0 2px 14px rgba(0,0,0,.06));border:var(--borda,0)}
.topico h3:last-child{margin:0}
.grade{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:10px}
.card{background:var(--cartao);color:var(--texto);border-radius:var(--r,18px);padding:24px;box-shadow:var(--sombra,0 2px 12px rgba(0,0,0,.06));border:var(--borda,0);border-top:4px solid var(--complementar)}
.card h3{color:var(--titulo-cor)}
.card h3:last-child{margin:0}
.card p{margin:0;opacity:.85}
.marcadores{columns:2 280px;padding-left:1.2em;margin:0}
.marcadores li{margin-bottom:10px;break-inside:avoid}
.marcadores li::marker{color:var(--complementar)}

/* ---- Depoimentos ---- */
.numeros{font:700 20px var(--f-titulo);color:var(--complementar)}
.dep{margin:0;border-top:0;border-left:4px solid var(--destaque)}
.dep blockquote{margin:0 0 10px;font-style:italic}
.dep figcaption{font-weight:700}
.dep-grande{max-width:820px;margin:10px auto 0;text-align:center}
.dep-grande blockquote{margin:0 0 14px;font:600 clamp(22px,3vw,30px)/1.4 var(--f-titulo)}
.dep-grande figcaption{font-weight:700;color:var(--complementar)}

/* ---- Galeria / FAQ ---- */
.fotos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fotos img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm,14px);width:100%}
details{background:var(--cartao);border-radius:var(--r-sm,14px);padding:16px 20px;margin-bottom:10px;border:1px solid color-mix(in srgb,var(--texto) 10%,transparent);box-shadow:0 2px 10px rgba(0,0,0,.05)}
summary{font-weight:700;cursor:pointer}
details p{margin:10px 0 0}

/* ---- Cardapio (mobile first) ---- */
.menu-intro{max-width:640px;margin:0 auto 18px;opacity:.85}
.menu-filtro{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:10px 2px;margin:0 -20px 14px;padding-left:20px;padding-right:20px;position:sticky;top:70px;top:calc(70px + var(--logo-respiro,0px));z-index:5;
  background:color-mix(in srgb,var(--fundo) 94%,transparent);backdrop-filter:blur(6px);scrollbar-width:none}
.menu-filtro::-webkit-scrollbar{display:none}
.menu-filtro button{flex:none;scroll-snap-align:start;min-height:42px;padding:0 18px;border-radius:var(--r-btn,999px);
  border:1.5px solid color-mix(in srgb,var(--texto) 18%,transparent);background:var(--cartao);color:var(--texto);font:600 15px var(--f-texto);cursor:pointer}
.menu-filtro button[aria-pressed="true"]{background:var(--destaque);color:var(--sobre-destaque);border-color:var(--destaque)}
.menu-itens{display:grid;gap:12px}
.prato{display:flex;gap:14px;align-items:flex-start;background:var(--cartao);color:var(--texto);border-radius:var(--r,18px);
  padding:16px;box-shadow:var(--sombra,0 2px 12px rgba(0,0,0,.06));border:var(--borda,0)}
.prato[hidden]{display:none}
.prato-emoji{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-sm,14px);
  background:var(--suave);font-size:30px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.prato-txt{flex:1;min-width:0}
.prato h3{font-size:17px;margin:0 0 4px;color:var(--titulo-cor)}
.prato p{margin:0;font-size:14px;opacity:.8}
.prato-preco{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.prato-preco b{font:700 17px var(--f-titulo);color:var(--titulo-cor)}
.prato-preco s{font-size:13px;opacity:.6}
.em-promo .prato-preco b{color:var(--destaque)}
.selo-promo{display:inline-block;vertical-align:middle;font:700 11px var(--f-texto);text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:var(--r-btn,999px);background:var(--destaque);color:var(--sobre-destaque)}
/* Lista compacta (estilo menu): linhas com divisoria, sem cartao. */
.menu-lista{gap:0;max-width:820px;margin:0 auto}
.menu-lista .prato{background:none;box-shadow:none;border:0;border-radius:0;padding:14px 0;border-bottom:1px dashed color-mix(in srgb,var(--texto) 20%,transparent)}
.menu-lista .prato-emoji{width:40px;height:40px;font-size:24px}
@media (min-width:700px){.menu-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.menu-cards{grid-template-columns:repeat(3,1fr)}.menu-filtro{justify-content:center;flex-wrap:wrap;position:static;background:none;backdrop-filter:none}}

/* ---- Videos do YouTube (1, 2 ou 3, centralizados) ---- */
/* Colunas com largura definida: sem isso a coluna seguia o conteudo (capa 480 px, player 300 px) e o video mudava de tamanho no play. */
.videos{display:grid;gap:22px;margin:14px auto 0;grid-template-columns:minmax(0,1fr);width:100%}
.videos.n1{max-width:880px}
@media (min-width:760px){.videos.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.videos.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.video{margin:0}
.yt,.video iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r,16px);overflow:hidden;background:#000;border:0;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.yt:hover img{opacity:1}
.play{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);background:var(--destaque);border-radius:var(--r-sm,14px)}
.play::after{content:"";position:absolute;left:28px;top:14px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--sobre-destaque)}
.video figcaption{text-align:center;font-weight:600;margin-top:10px}
/* Feed: YouTube usa .videos/.yt (acima). Instagram: cartao no lugar do post (carrega o post oficial no clique). */
.ig-posts{display:grid;gap:10px;margin:14px auto 0;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));max-width:100%;font-size:13px}
.ig-posts.n1{--n:1;max-width:300px}.ig-posts.n2{--n:2}.ig-posts.n3{--n:3}
@media (min-width:760px){.ig-posts{gap:20px;font-size:16px}.ig-posts.n2{max-width:600px}.ig-posts.n3{max-width:900px}}
.ig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1/1;text-align:center;padding:8px;border-radius:var(--r,16px);
  background:linear-gradient(135deg,#feda75,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5);color:#fff;text-decoration:none;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.15);transition:transform .15s}
.ig:hover{transform:translateY(-2px)}
.ig-posts iframe{width:100%;min-height:560px;grid-column:1/-1;max-width:420px;justify-self:center;border:0;border-radius:var(--r,16px);background:#fff}
.feed-mais{margin:26px 0 0}

/* ---- CTAs ---- */
.b-cta .faixa{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.b-cta .faixa h2{margin:0;font-size:clamp(22px,3vw,30px)}
.b-cta .faixa p{margin:6px 0 0}
.b-cta .centro .texto{max-width:720px;margin:0 auto}
.v-3{background-size:cover;background-position:center}
.v-3.com-img{padding:120px 0}
.card-cta{background:var(--cartao);color:var(--texto);max-width:620px;margin:0 auto;padding:36px;border-radius:var(--r,24px);box-shadow:var(--sombra-forte,0 20px 50px rgba(0,0,0,.25));border:var(--borda,0)}
.card-cta h2{color:var(--titulo-cor)}
.parallax{background-color:var(--principal);background-size:cover;background-position:center;background-attachment:fixed;color:#fff;padding:130px 0}
.parallax::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.parallax .in{position:relative}
.parallax h2{color:#fff}
.parallax .in{max-width:760px}
/* iPhone/celular nao suporta fundo fixo: vira fundo normal (sem pulo). */
@media (hover:none),(max-width:900px){.parallax{background-attachment:scroll}}

/* ---- Contato ---- */
.dados{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.dados b{display:inline-block;min-width:92px}
.redes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.redes .rede{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:inherit;background:color-mix(in srgb,currentColor 10%,transparent);transition:background .2s,transform .2s}
.redes .rede:hover{background:color-mix(in srgb,currentColor 20%,transparent);transform:translateY(-1px)}
.mapa{width:100%;height:260px;border:0;border-radius:var(--r,16px);margin-top:8px}
/* Mapa so no clique (LGPD): placeholder com botao; vira iframe pelo site.js. */
.mapa-clique{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;background:color-mix(in srgb,currentColor 6%,transparent);border:1px dashed color-mix(in srgb,currentColor 25%,transparent)}
.mapa-clique span{font-size:12px;opacity:.7}
/* Galeria: foto clicavel + lightbox (tela cheia, arrastar pro lado, setas/teclado; passar da ultima fecha). */
[data-galeria-foto]{display:block;cursor:zoom-in;border-radius:inherit;-webkit-tap-highlight-color:transparent}
[data-galeria-foto] img{display:block;width:100%}
/* ---- Vitrine (imoveis, produtos): card com mini slider (desliza; setas no computador), lightbox com miniaturas ---- */
.vitrine{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.vitrine{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.vit-grade3{grid-template-columns:repeat(3,1fr)}}
.vit-item{display:flex;flex-direction:column;background:var(--cartao);color:var(--texto);border-radius:var(--r,18px);overflow:hidden;
  box-shadow:var(--sombra,0 2px 12px rgba(0,0,0,.06));border:var(--borda,0)}
.vit-fotos{position:relative;aspect-ratio:4/3;background:var(--suave)}
.vit-trilho{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.vit-trilho::-webkit-scrollbar{display:none}
.vit-trilho a{flex:0 0 100%;scroll-snap-align:center;display:block;height:100%}
.vit-trilho img{width:100%;height:100%;object-fit:cover}
.vit-pontos{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;pointer-events:none}
.vit-pontos span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:background .2s,transform .2s}
.vit-pontos span.on{background:#fff;transform:scale(1.25)}
.vit-qtd{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font:600 12px var(--f-texto);pointer-events:none}
.vit-seta{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.9);
  color:#111;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.vit-seta.ant{left:8px}.vit-seta.prox{right:8px}
.vit-fotos:hover .vit-seta,.vit-seta:focus-visible{opacity:1}
.vit-seta[disabled]{display:none}
@media (hover:none){.vit-seta{display:none}}
.vit-txt{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.vit-txt h3{margin:0;font-size:19px;color:var(--titulo-cor)}
.vit-preco{margin:0;font-size:14px;opacity:.85}
.vit-preco b{font:700 22px var(--f-titulo);color:var(--destaque);opacity:1;margin-right:2px}
.vit-desc{margin:0;font-size:15px;opacity:.85}
.vitrine-ativa .com-fotos .vit-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.vit-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:6px}
.vit-btn{min-height:46px;padding:0 22px;font-size:15px}
.vit-mais{border:0;background:none;padding:6px 0;color:inherit;font:600 15px var(--f-texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.f-principal .vit-item{color:var(--texto)}
.f-principal .vit-item h3{color:var(--titulo-cor)}

/* ---- Tabela de precos (07/10): tabela no computador, cards deslizando no celular ---- */
.tp-tabela-wrap{display:none}
.tp-cards{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:0 -20px;padding:18px 20px 8px;scroll-padding-inline:20px}
.tp-cards::-webkit-scrollbar{display:none}
.tp-card{flex:0 0 min(84%,340px);scroll-snap-align:center;position:relative;display:flex;flex-direction:column;gap:10px;background:var(--cartao);color:var(--texto);
  border-radius:var(--r,18px);padding:26px 22px 22px;box-shadow:var(--sombra,0 2px 12px rgba(0,0,0,.06));border:var(--borda,0)}
.tp-card.tp-dest{outline:2px solid var(--destaque);outline-offset:-2px}
.tp-card h3{margin:0;font-size:20px;color:var(--titulo-cor)}
.tp-preco{margin:0;font-size:14px;opacity:.85}
.tp-preco b{font:700 28px/1.1 var(--f-titulo);color:var(--destaque);opacity:1;margin-right:2px}
.tp-consulta b{font-size:22px}
.tp-desc{margin:0;font-size:15px;opacity:.85}
.tp-lista{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid color-mix(in srgb,var(--texto) 12%,transparent);display:flex;flex-direction:column;gap:9px;font-size:15px}
.tp-lista li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.tp-li-nao span:last-child{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.tp-sim,.tp-nao{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700;line-height:1}
.tp-sim{background:color-mix(in srgb,var(--destaque) 16%,transparent);color:var(--destaque)}
.tp-nao{background:color-mix(in srgb,var(--texto) 8%,transparent);color:color-mix(in srgb,var(--texto) 45%,transparent)}
.tp-acoes{margin-top:auto;padding-top:8px}
.tp-btn{width:100%;min-height:48px;padding:0 20px;font-size:15px}
.tp-selo{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:4px 12px;border-radius:999px;
  background:var(--destaque);color:var(--sobre-destaque);font:700 12px var(--f-texto);letter-spacing:.02em}
.tp-dica{margin:6px 0 0;text-align:center;font-size:13px;opacity:.6}
.tp-nota{max-width:640px;margin:18px auto 0;font-size:14px;opacity:.75}
.tp-exemplo .in>*:not(.tp-aviso-exemplo){opacity:.45;filter:saturate(.6)}
.tp-aviso-exemplo{margin:0 auto 14px;width:fit-content;padding:6px 14px;border-radius:999px;border:1.5px dashed currentColor;font-size:13px;font-weight:600;opacity:.8}
.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f-principal .tp-card{color:var(--texto)}
.f-principal .tp-card h3{color:var(--titulo-cor)}
@media (min-width:760px){
  .tp-cards,.tp-dica{display:none}
  .tp-tabela-wrap{display:block;background:var(--cartao);color:var(--texto);border-radius:var(--r,18px);box-shadow:var(--sombra,0 2px 12px rgba(0,0,0,.06));
    border:var(--borda,0);padding:30px 18px 12px;margin-top:8px}
  .tp-tabela{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
  .tp-tabela th,.tp-tabela td{padding:13px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid color-mix(in srgb,var(--texto) 9%,transparent)}
  .tp-tabela tbody tr:last-child th,.tp-tabela tbody tr:last-child td{border-bottom:0}
  .tp-tabela tbody th{text-align:left;font-weight:600;font-size:15px}
  .tp-canto{width:26%}
  .tp-n2 .tp-canto{width:34%}
  .tp-plano{position:relative;vertical-align:top!important;padding:22px 14px 20px!important}
  .tp-plano>*{display:block;margin:0 auto 8px}
  .tp-plano .tp-nome{font:700 19px var(--f-titulo);color:var(--titulo-cor)}
  .tp-plano .tp-desc{font-weight:400;font-size:14px;max-width:220px}
  .tp-plano{border-bottom:0!important;padding-bottom:6px!important}
  .tp-plano .tp-preco b{font-size:clamp(22px,2.3vw,28px)}
  .tp-plano .tp-preco{white-space:nowrap}
  .tp-plano .tp-consulta{white-space:normal}.tp-plano .tp-consulta b{font-size:20px}
  .tp-canto,.tp-linha-btn td:first-child{border-bottom:0!important}
  .tp-linha-btn td{padding:4px 14px 20px;vertical-align:top}
  .tp-linha-btn .tp-btn{display:flex;width:100%;min-height:44px;font-size:14px;padding:0 12px}
  .tp-tabela .tp-dest{background:color-mix(in srgb,var(--destaque) 7%,transparent)}
  .tp-plano.tp-dest{border-radius:var(--r-sm,14px) var(--r-sm,14px) 0 0;box-shadow:inset 0 3px 0 var(--destaque)}
  .tp-plano .tp-selo{top:0}
  .tp-txt{font-weight:600;font-size:15px}
  .f-principal .tp-tabela-wrap{color:var(--texto)}
  .f-principal .tp-tabela-wrap .tp-nome{color:var(--titulo-cor)}
}

.lb{position:fixed;inset:0;z-index:1100;background:rgba(8,8,8,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;opacity:0;transition:opacity .2s ease;touch-action:pan-x}
.lb.aberta{opacity:1}
.lb-trilho{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-trilho::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:56px 12px 64px;box-sizing:border-box}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.lb-x,.lb-ant,.lb-prox{position:absolute;z-index:2;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;width:46px;height:46px;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-x{top:10px;right:10px}
.lb-ant,.lb-prox{top:50%;transform:translateY(-50%)}
.lb-ant{left:12px}.lb-prox{right:12px}
.lb-ant[disabled]{opacity:.25;cursor:default}
.lb-cont{position:absolute;top:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font:600 14px var(--f-texto);pointer-events:none}
.lb-dica{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.55);font:13px var(--f-texto);pointer-events:none}
@media (hover:none){.lb-ant,.lb-prox{display:none}}
html.lb-aberta{overflow:hidden}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}
/* Lightbox: trilho e setas num palco (na galeria ocupa tudo). Vitrine (lb-produto): miniaturas + painel de detalhes,
   foto em cima no celular e ao lado no computador. */
.lb-palco{position:relative;flex:1;display:flex;min-height:0}
.lb-minis{display:flex;gap:8px;justify-content:center;padding:4px 12px 12px;overflow-x:auto;scrollbar-width:none}
.lb-minis button{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;opacity:.6;transition:opacity .15s,border-color .15s}
.lb-minis button.on{opacity:1;border-color:#fff}
.lb-minis img{width:100%;height:100%;object-fit:cover}
.lb-info{background:var(--fundo);color:var(--texto);padding:22px 20px 28px;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;border-radius:18px 18px 0 0;display:flex;flex-direction:column;gap:10px}
.lb-info h3{margin:0;font-size:22px;color:var(--titulo-cor)}
.lb-info .vit-preco b{font-size:26px}
.lb-info .vit-desc-toda{margin:0;font-size:16px}
.lb-info .vit-acoes{margin-top:6px}
.lb-produto .lb-palco{flex:0 0 auto;height:min(56vh,620px);height:min(56svh,620px)}
.lb-produto .lb-slide{padding:54px 8px 8px}
.lb-produto .lb-info{flex:1;min-height:0}
@media (min-width:900px){
  .lb-produto{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr) auto}
  .lb-produto .lb-palco{height:auto;grid-column:1;grid-row:1}
  .lb-produto .lb-slide{padding:60px 70px 12px}
  .lb-produto .lb-minis{grid-column:1;grid-row:2}
  .lb-produto .lb-info{grid-column:2;grid-row:1 / span 2;border-radius:0;padding:70px 32px 32px}
  .lb-produto .lb-x{right:412px}
  .lb-produto .lb-cont{right:400px}
}

/* Pop-up: centralizado, cabe em qualquer tela (rola por dentro se o texto for grande), botoes grandes no celular. */
.popup{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s ease}
.popup[hidden]{display:none}
.popup.aberto{opacity:1}
.popup-fundo{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.popup-caixa{position:relative;width:min(100%,440px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--cartao,var(--fundo,#fff));color:var(--texto,#1f2937);border-radius:var(--r,16px);box-shadow:0 24px 60px rgba(0,0,0,.35);transform:translateY(12px) scale(.98);transition:transform .25s ease;outline:none}
.popup.aberto .popup-caixa{transform:none}
.popup-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
.popup-corpo{padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px}
.popup-corpo h2{margin:0;font-family:var(--f-titulo);color:var(--titulo-cor,inherit);font-size:clamp(20px,5vw,26px);line-height:1.2;padding-right:28px}
.popup-corpo p{margin:0;line-height:1.55}
.popup-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.popup-acoes [data-popup-cta]{display:contents}
.popup-x{position:absolute;top:8px;right:8px;z-index:1;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.popup-aberto,.popup-aberto body{overflow:hidden}
@media (max-width:480px){.popup-acoes{flex-direction:column;align-items:stretch}.popup-acoes .btn{width:100%;justify-content:center;text-align:center}}
@media (prefers-reduced-motion:reduce){.popup,.popup-caixa{transition:none}}
/* Politica de privacidade */
.politica-pg{padding:48px 0 64px}
.politica-pg .in{max-width:780px}
.politica-pg h1{font-size:clamp(28px,5vw,40px);margin:0 0 6px}
.politica-pg h2{font-size:20px;margin:28px 0 8px}
.politica-pg p,.politica-pg li{line-height:1.65}
.politica-pg ul{padding-left:20px}
.politica-pg .atualizada{opacity:.7;font-size:14px}
.rodape .politica{opacity:.85}
.form{background:var(--cartao);color:var(--texto);border-radius:var(--r,22px);padding:26px;box-shadow:var(--sombra,0 8px 30px rgba(0,0,0,.08));border:var(--borda,0);display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.form input,.form textarea{font:inherit;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--texto) 18%,transparent);border-radius:var(--r-sm,12px);background:var(--fundo);color:var(--texto)}
.form input:focus,.form textarea:focus{outline:2px solid var(--complementar);border-color:transparent}
.form .hp{position:absolute;left:-9999px}
.aviso{margin:0;font-weight:700;color:var(--complementar)}
.lgpd{margin:0;font-size:12px;opacity:.7}

/* ---- Rodapes ---- */
.rodape{background:color-mix(in srgb,var(--principal) 90%,#000);color:color-mix(in srgb,var(--sobre-principal) 80%,transparent);padding:34px 0 96px;font-size:14px}
.rodape a{color:inherit}
.rodape .linha{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;align-items:center}
.rodape .colunas{display:grid;gap:24px;padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.15)}
@media (min-width:760px){.rodape .colunas{grid-template-columns:2fr 1fr 1fr}}
.rodape .colunas b{display:block;color:var(--sobre-principal);margin-bottom:8px}
.rodape .colunas p{margin:0 0 6px}
.marca-rodape{font:700 var(--logo-texto-rodape,20px)/1.2 var(--f-titulo)}
.chamada-final{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,.15)}
.chamada-final h2{margin:0;color:var(--sobre-principal)}
.credito{opacity:.75}
/* Aba "Demonstracao · Quero um site assim" (so sites de demonstracao): fixa na borda esquerda, texto de baixo para cima. */
.demo-aba{position:fixed;left:0;top:50%;z-index:45;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  writing-mode:vertical-rl;rotate:180deg;padding:16px 9px;border-radius:12px 0 0 12px;background:#111;color:#fff;text-decoration:none;
  font:600 12px/1 var(--f-texto);letter-spacing:.06em;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:padding .2s}
.demo-aba span{text-transform:uppercase;opacity:.75}
.demo-aba b{color:var(--destaque);font-weight:700;letter-spacing:.02em}
.demo-aba:hover,.demo-aba:focus-visible{padding-left:13px}
/* Celular: so "DEMONSTRACAO", fina (~20 px) para caber na margem do site sem cobrir o texto; o link e o aria-label seguem completos. */
@media (max-width:899px){.demo-aba{padding:10px 4px;font-size:10px;gap:0}.demo-aba b{display:none}}
@media print{.demo-aba{display:none}}
.wa-flutuante{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.18);z-index:50;transform-origin:50% 60%}
.wa-flutuante.esq{right:auto;left:18px}   /* aba WhatsApp: lado esquerdo */
.wa-flutuante svg{display:block}
/* A animacao "chama" pausa no hover, para depois do clique e some pra quem pediu menos movimento. */
.wa-flutuante.chama:hover,.wa-flutuante.chama:hover::before{animation-play-state:paused}
.wa-flutuante.parado,.wa-flutuante.parado::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.wa-flutuante.chama,.wa-flutuante.chama::before{animation:none!important}}

/* ---- Animacao de entrada dos blocos (a capa nao anima). So liga com JS (site.js poe .anim-ativo):
   sem JS ou com erro, o conteudo aparece normal. ---- */
.anim-ativo main>.bloco:not(.b-hero):not(.anim-propria)>.in{transition:opacity .7s ease,transform .7s ease}
.anim-ativo.anim-esmaecer main>.bloco:not(.b-hero):not(.anim-propria)>.in:not(.vis){opacity:0}
.anim-ativo.anim-deslizar main>.bloco:not(.b-hero):not(.anim-propria)>.in:not(.vis){opacity:0;transform:translateY(32px)}
.anim-ativo.anim-lateral main>.bloco:not(.b-hero):not(.anim-propria)>.in:not(.vis){opacity:0;transform:translateX(-40px)}
.anim-ativo.anim-zoom main>.bloco:not(.b-hero):not(.anim-propria)>.in:not(.vis){opacity:0;transform:scale(.95)}

/* Entrada da imagem (capa recortada, foto + texto): esmaecer ou vir da direita. So com JS (site.js poe .entrada-ativa
   e .vis quando a imagem aparece). Animacao (keyframes), nao transicao: sempre parte do "de", nao importa se a
   imagem ja tinha sido pintada antes do JS (com transicao, a capa as vezes piscava em vez de entrar). */
.entrada-ativa [data-entrada]:not(.vis){opacity:0}
.entrada-ativa [data-entrada=esmaecer].vis{animation:entra-esmaecer .9s ease both}
.entrada-ativa [data-entrada=direita].vis{animation:entra-direita .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra-esmaecer{from{opacity:0}to{opacity:1}}
@keyframes entra-direita{from{opacity:0;translate:min(30vw,240px) 0}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
  .entrada-ativa [data-entrada]{opacity:1!important;animation:none!important}
  .anim-ativo main>.bloco>.in{opacity:1!important;transform:none!important}}
@media print{.anim-ativo main>.bloco>.in,.entrada-ativa [data-entrada]{opacity:1!important;transform:none!important;animation:none!important}}

/* Sobretitulo (linha pequena acima do titulo): herda a cor do contexto (legivel em qualquer fundo). */
.sobre{margin:0 0 .5rem;font:600 .78rem/1.35 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.sobre.centro{text-align:center}
.b-cta .faixa .sobre{margin:0 0 .5rem}

/* Botao contornado (estilo_botao = contorno): so a borda. Cor com contraste garantido (Design::css): --contorno no fundo
   da pagina, --contorno-principal na capa e nos blocos de fundo principal; sobre foto (capa com foto, parallax) herda. */
.btn.contorno{background:transparent;color:var(--contorno);border:2px solid currentColor;box-shadow:none}
.f-principal .btn.contorno,.b-hero .btn.contorno{color:var(--contorno-principal)}
.b-hero.com-img .btn.contorno,.parallax .btn.contorno{color:inherit}
/* Numeracao romana dos topicos (variante Com numeros): serifa de titulo, sem zero a esquerda. */
.topico .num.romano{font-family:var(--f-titulo);letter-spacing:.04em}

/* Agendamento online (08/10): bloco (faixa ou cartao) + janela da agenda (site.js). No celular a janela sobe de baixo. */
.b-agenda .ag-faixa{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.b-agenda .ag-faixa>div:first-child{flex:1 1 320px;min-width:0}
.b-agenda .ag-faixa h2{margin-bottom:8px}
.b-agenda .ag-faixa p{margin:0}
/* No computador o bloco acompanha a tela (~90%, teto de 1440 px) em vez dos 1140 px fixos do site (pedido do usuario, 09/10). */
.b-agenda>.in{max-width:min(90vw,1440px)}
.b-agenda .ag-cartao p.centro{max-width:640px;margin-left:auto;margin-right:auto}
.b-agenda .ag-cartao{max-width:none;margin:0 auto;padding:clamp(24px,5vw,44px);border-radius:var(--r,16px);background:var(--cartao,var(--fundo));color:var(--texto);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.b-agenda.f-principal .ag-cartao,.b-agenda.f-imagem .ag-cartao{color:var(--texto)}
.b-agenda.f-principal .ag-cartao h2,.b-agenda.f-imagem .ag-cartao h2{color:var(--titulo-cor,inherit)}
.ag-passos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 26px;padding:0}
.ag-passos li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:15px;line-height:1.4}
.ag-passos b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--principal);color:var(--sobre-principal);font-size:17px}
@media (max-width:560px){.ag-passos{grid-template-columns:1fr;gap:10px}.ag-passos li{flex-direction:row;text-align:left}.ag-passos b{flex:none}.b-agenda .ag-faixa-btn,.b-agenda .ag-faixa-btn .btn{width:100%}}

.ag-janela{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s ease}
.ag-janela[hidden]{display:none}
.ag-janela.aberto{opacity:1}
.ag-fundo{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ag-caixa{position:relative;width:min(100%,480px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--cartao,var(--fundo,#fff));color:var(--texto,#1f2937);border-radius:var(--r,16px);box-shadow:0 24px 60px rgba(0,0,0,.35);padding:22px 22px 20px;transform:translateY(12px) scale(.98);transition:transform .25s ease;outline:none}
.ag-janela.aberto .ag-caixa{transform:none}
.ag-caixa h2{margin:0 0 14px;font-family:var(--f-titulo);color:var(--titulo-cor,inherit);font-size:clamp(20px,5vw,24px);line-height:1.2;padding-right:40px}
.ag-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--suave,rgba(0,0,0,.06));color:inherit;font-size:24px;line-height:1;cursor:pointer}
.ag-aberto,.ag-aberto body{overflow:hidden}
.ag-corpo{display:flex;flex-direction:column;gap:14px}
.ag-corpo p{margin:0}
.ag-sub{opacity:.8;line-height:1.5}
.ag-msg{padding:12px 14px;border-radius:12px;background:var(--suave,rgba(0,0,0,.05));line-height:1.5}
.ag-erro{background:rgba(220,38,38,.1);color:inherit;border-left:3px solid #dc2626}
.ag-resumo{font-weight:700;font-size:17px;line-height:1.4}
.ag-ini{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--principal);color:var(--sobre-principal);font-weight:700}
.ag-profs{display:flex;flex-direction:column;gap:10px}
.ag-prof{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;border:1.5px solid rgba(127,127,127,.3);border-radius:14px;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:17px;text-align:left;cursor:pointer}
.ag-prof:hover,.ag-prof:focus-visible{border-color:var(--principal)}
.ag-quem{display:flex;align-items:center;gap:10px}
.ag-quem b{flex:1;min-width:0}
.ag-link{background:none;border:0;color:inherit;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 6px}
.ag-semana{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600}
.ag-seta{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(127,127,127,.3);background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.ag-seta:disabled{opacity:.3;cursor:default}
.ag-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ag-dia{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px;border:1.5px solid rgba(127,127,127,.3);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-transform:capitalize}
.ag-dia small{font-size:11px;opacity:.75}
.ag-dia b{font-size:18px;line-height:1.2}
.ag-dia.on{background:var(--principal);border-color:var(--principal);color:var(--sobre-principal)}
.ag-dia.on small{opacity:.9}
.ag-dia.vazio{opacity:.35;cursor:default}
.ag-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.ag-horas .ag-msg{grid-column:1/-1}
.ag-hora{min-height:46px;border:1.5px solid rgba(127,127,127,.3);border-radius:12px;background:transparent;color:inherit;font:inherit;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer}
.ag-hora:hover,.ag-hora:focus-visible{border-color:var(--principal);background:var(--principal);color:var(--sobre-principal)}
.ag-form{display:flex;flex-direction:column;gap:12px}
.ag-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.ag-form input{min-height:48px;padding:0 14px;border:1.5px solid rgba(127,127,127,.35);border-radius:12px;background:transparent;color:inherit;font:inherit;font-weight:400}
.ag-form input:focus{outline:2px solid var(--principal);outline-offset:1px}
.ag-form .hp{position:absolute;left:-9999px}
.ag-form .btn,.ag-acoes .btn{width:100%;justify-content:center;text-align:center}
.ag-lgpd{font-size:13px;opacity:.75;line-height:1.5}
.ag-lgpd a{color:inherit}
.ag-voltar{align-self:flex-start;background:none;border:0;color:inherit;font:inherit;font-weight:600;opacity:.8;cursor:pointer;min-height:44px;padding:0}
.ag-acoes{display:flex;flex-direction:column;gap:10px}
.ag-ok{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto;border-radius:50%;background:#16a34a;color:#fff;font-size:34px;font-weight:700}
.ag-ok-pend{background:#d97706}
.ag-link-campo{width:100%;min-height:44px;padding:0 12px;border:1.5px dashed rgba(127,127,127,.45);border-radius:12px;background:transparent;color:inherit;font:13px/1 ui-monospace,monospace}
@media (max-width:560px){
  .ag-janela{align-items:flex-end;padding:0}
  .ag-caixa{width:100%;max-height:92dvh;border-radius:var(--r,16px) var(--r,16px) 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(40px)}
  .ag-dias{gap:4px}.ag-dia{padding:7px 0}.ag-dia b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.ag-janela,.ag-caixa{transition:none}}

/* Logos de clientes e parceiros (09/10): grade ou faixa rolando; todos com a mesma altura, venha o logo quadrado ou comprido. */
.lg-grade,.lg-trilho{list-style:none;margin:28px 0 0;padding:0;display:flex;align-items:center;gap:28px 44px}
.lg-grade{flex-wrap:wrap;justify-content:center}
.lg-item{display:flex;align-items:center;justify-content:center}
.lg-item a{display:flex;align-items:center;justify-content:center}
.lg-item img{display:block;width:auto;height:auto;max-height:var(--lg-h);max-width:var(--lg-w);object-fit:contain}
.lg-medio{--lg-h:56px;--lg-w:180px}.lg-pequeno{--lg-h:40px;--lg-w:140px}.lg-grande{--lg-h:84px;--lg-w:240px}
.lg-cinza img{filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
.lg-cinza .lg-item:hover img,.lg-cinza a:focus-visible img{filter:none;opacity:1}
.lg-cartao .lg-item{background:#fff;border-radius:var(--r,14px);padding:14px 22px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.lg-faixa{display:flex;overflow:hidden;margin-top:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lg-faixa .lg-trilho{margin:0;flex:none;min-width:100%;justify-content:space-around;padding:8px 22px;animation:lg-rolar var(--lg-dur,30s) linear infinite}
.lg-faixa:hover .lg-trilho,.lg-faixa:focus-within .lg-trilho{animation-play-state:paused}
@keyframes lg-rolar{to{transform:translateX(-100%)}}
@media (max-width:640px){.lg-grade,.lg-trilho{gap:20px 28px}.lg-medio{--lg-h:44px;--lg-w:130px}.lg-pequeno{--lg-h:34px;--lg-w:110px}.lg-grande{--lg-h:64px;--lg-w:180px}}
@media (prefers-reduced-motion:reduce){.lg-faixa{-webkit-mask-image:none;mask-image:none}.lg-faixa .lg-trilho{animation:none;flex-wrap:wrap;justify-content:center;flex:1 1 100%}.lg-faixa .lg-copia{display:none}}

/* Mini CRM (03/11): pop-up antes do WhatsApp, no visual da janela da agenda (.ag-*). */
.ag-form textarea{min-height:64px;padding:10px 14px;border:1.5px solid rgba(127,127,127,.35);border-radius:12px;background:transparent;color:inherit;font:inherit;font-weight:400;resize:vertical}
.ag-form textarea:focus{outline:2px solid var(--principal);outline-offset:1px}
.crm-janela .btn.crm-continuar{background:#1FA855;border-color:#1FA855;color:#fff}
.crm-pular{align-self:center}