/* ==========================================================================
   Support Vida: base do site, carregada em todas as páginas.
   Tokens, botões, cabeçalho, rodapé, CTA, modais e aviso de cookies. A referência é
   o wireframe "Support Vida Wireframe Home" (desktop 1440, grade de 12 colunas com
   120 de margem; mobile 390 com 16 de margem). O conteúdo fica em home.css (home),
   paginas.css (internas) e blog.css.

   As fontes são provisórias: a escolha final da sans geométrica segue aberta.
   Para trocar, basta mudar --titulo, --corpo e o <link> de cada página.
   ========================================================================== */

:root {
  /* Texto */
  --tinta:        #2B211E;
  --tinta-suave:  #544A46;
  --tinta-fraca:  #6B5F5A;

  /* Superfícies */
  --fundo:        #FBF9F8;
  --quente:       #FBEFEB;
  --branco:       #FFFFFF;
  --linha:        #DDD6D2;
  --escuro:       #241A18;
  --escuro-fundo: #1C1512;
  --escuro-linha: #4A3D38;
  --tinta-sobre-whats: #0F2A1A;

  /* Vermelho da marca. O #E52021 fica para detalhes: texto branco sobre ele não
     alcança 4,5:1, por isso as faixas usam o tom abaixo. */
  --vermelho:       #C4171A;
  --vermelho-forte: #A81316;
  --vermelho-vidro: #7A0C0F;  /* texto vermelho sobre vidro claro: link, botão branco e selos */
  --rosa:           #FBE3E1;
  --whatsapp:       #25D366;

  /* Vidro líquido: claro o bastante para o texto, aberto o bastante para o coração. */
  --liq-fundo:      linear-gradient(150deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .52) 48%, rgba(255, 255, 255, .64));
  --liq-claro:      linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76) 52%, rgba(255, 255, 255, .86));
  --liq-vermelho:   linear-gradient(150deg, rgba(214, 28, 32, .94), rgba(176, 20, 24, .92) 55%, rgba(196, 23, 26, .94));
  --liq-verde:      linear-gradient(150deg, rgba(62, 226, 124, .94), rgba(34, 204, 98, .92) 55%, rgba(48, 216, 110, .94));
  --liq-borda:      rgba(255, 255, 255, .78);
  --liq-sombra:     inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .42), inset 0 0 14px rgba(255, 255, 255, .3), 0 0 0 1px rgba(70, 45, 40, .07), 0 10px 28px rgba(36, 26, 24, .13);
  --liq-sombra-cor: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(255, 255, 255, .22), inset 0 0 12px rgba(255, 255, 255, .14), 0 8px 22px rgba(36, 26, 24, .2);
  --sombra-header:  0 6px 20px rgba(36, 26, 24, .06);
  --liq-filtro:     blur(14px) saturate(175%) brightness(1.04);
  /* Botões: vidro flat, sem brilho interno, refração ou reflexo. */
  --flat-claro:     rgba(255, 255, 255, .74);
  --flat-claro-forte: rgba(255, 255, 255, .9);
  --flat-vermelho:  rgba(176, 20, 24, .9);
  --flat-verde:     rgba(12, 122, 65, .92);
  --flat-verde-forte: rgba(9, 100, 53, .96);
  --flat-borda:     rgba(43, 33, 30, .14);
  --flat-borda-clara: rgba(255, 255, 255, .5);
  --flat-filtro:    blur(10px);
  --vidro-solido:   rgba(255, 255, 255, .9);
  --vidro-pagina:   rgba(251, 249, 248, .78);
  --header-vidro:   rgba(251, 249, 248, .84);
  --modal-fundo:    rgba(43, 33, 30, .55);

  --sombra-vidro:   0 8px 24px rgba(36, 26, 24, .08);
  --sombra-elevada: 0 16px 36px rgba(36, 26, 24, .14);

  /* Tecido dos painéis: base da rampa de cor de js/hero-tecido.js */
  --hero-base:      #2B060A;

  --titulo: "Plus Jakarta Sans", system-ui, sans-serif;
  --corpo:  "DM Sans", system-ui, sans-serif;

  --largura: 1200px;
  --margem:  clamp(16px, 4vw, 40px);
  --suave:   cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.5 var(--corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--titulo); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
picture { display: contents; }
source { display: none; }  /* com o picture em contents, ele viraria item de grade ou flex */

:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: 8px;
  background: var(--tinta); color: var(--branco); font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Revelação ao rolar. Usa a propriedade `translate`, separada do `transform` dos
   hovers, para que o estado final nunca cancele a elevação dos cards. */
.revela, .reveal { opacity: 0; translate: 0 18px; transition: opacity .7s var(--suave), translate .7s var(--suave); }
.revela.visivel, .reveal.in-view { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .revela, .reveal { opacity: 1; translate: none; transition: none; }
}

.topbar, .header, main, .rodape { position: relative; z-index: 1; }

/* Vidro ---------------------------------------------------------------------*/
.vidro {
  background: var(--liq-fundo);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--vidro-filtro, var(--liq-filtro));
  border: 1px solid var(--liq-borda);
  box-shadow: var(--liq-sombra);
}
/* js/coracao.js liga esta classe quando o aparelho não dá conta do blur. */
.sem-blur .vidro, .sem-blur .depo, .sem-blur .menu, .sem-blur .btn, .sem-blur .hero-selos li,
.sem-blur .hero-numeros, .sem-blur .depo-seta, .sem-blur .voltar-topo, .sem-blur .whatsapp-float, .sem-blur .link-forte {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.sem-blur .vidro, .sem-blur .depo { background: var(--vidro-solido); }

/* Botões ---------------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px;
  font: 700 16px/1 var(--titulo); white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--suave), box-shadow .2s var(--suave), background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { flex: none; }

.btn-primary { background: var(--flat-vermelho); color: var(--branco); }
.btn-branco  { background: var(--flat-claro); border-color: var(--flat-borda-clara); color: var(--vermelho-vidro); }
/* Verde mais fechado que o #25D366 da marca: a logo e o texto brancos não alcançam
   contraste sobre ele (1,98:1). */
.btn-whats   { background: var(--flat-verde); color: var(--branco); }
.btn-outline { background: var(--flat-claro); border-color: var(--flat-borda); color: var(--tinta); }
.btn-header  { min-height: 48px; padding: 0 24px; }
.btn-pequeno { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn-sm      { min-height: 44px; padding: 0 20px; font-size: 14px; }

@media (hover: hover) {
  .btn-primary:hover { background: var(--vermelho-forte); }
  .btn-branco:hover  { background: var(--flat-claro-forte); }
  .btn-whats:hover   { background: var(--flat-verde-forte); }
  .btn-outline:hover { background: var(--flat-claro-forte); border-color: var(--vermelho); color: var(--vermelho-forte); }
}

.etiqueta {
  display: inline-flex; align-items: center; min-height: 26px; padding: 4px 12px;
  border-radius: 13px; background: var(--rosa); color: var(--vermelho-forte);
  font: 700 12px/1.2 var(--titulo); letter-spacing: .06em; text-transform: uppercase;
}

/* 00 Cabeçalho -------------------------------------------------------------- */
.topbar { background: var(--quente); font-size: 13px; }
.topbar-dentro {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: calc(var(--largura) + 2 * var(--margem)); min-height: 40px;
  margin: 0 auto; padding: 0 var(--margem);
}
.topbar-contato { display: flex; gap: 28px; }
.topbar a { padding: 8px 0; }
@media (hover: hover) { .topbar a:hover { color: var(--vermelho-forte); } }
.so-estreito { display: none; }

/* Só o menu fica fixo ao rolar. */
.header { position: sticky; top: 0; z-index: 50; transition: background-color .25s ease, box-shadow .25s ease; }
.header.scrolled {
  background: var(--header-vidro);
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--liq-filtro);
  box-shadow: inset 0 -1px 0 var(--liq-borda), var(--sombra-header);
}
.header-dentro {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: calc(var(--largura) + 2 * var(--margem)); min-height: 84px;
  margin: 0 auto; padding: 0 var(--margem);
}
.header-logo { flex: none; }
.header-logo img { width: auto; height: 60px; }

.menu {
  display: flex; gap: 4px; padding: 6px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 26px;
}
.menu a {
  padding: 10px 18px; border-radius: 20px;
  font: 700 14px/20px var(--titulo);
  transition: background-color .15s ease, color .15s ease;
}
.menu a.atual { background: var(--rosa); color: var(--vermelho-forte); }
@media (hover: hover) { .menu a:not(.atual):hover { color: var(--vermelho-forte); } }

/* Pílula com mola (js/site.js): repousa na página atual e segue o mouse e o foco. Sem
   JS, vale o fundo de .atual acima. O clip segura a passada da mola nas pontas. */
.menu-viva { position: relative; overflow: clip; }
.menu-viva a { position: relative; z-index: 1; }
.menu-viva a.atual { background: transparent; box-shadow: none; }
.menu-viva.em-outro a.atual { color: var(--tinta); }
.menu-viva a.destino { color: var(--vermelho-forte); }
.menu-pilula {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--pilula-l, 0);
  border-radius: 20px; background: var(--rosa);
  transform: translateX(var(--pilula-x, 0));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), width .45s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease;
}
.menu-pilula.sem-mola { transition: opacity .15s ease; }
.menu-pilula.sem-alvo { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .menu-pilula, .menu-pilula.sem-mola { transition: none; } }

.hamburger {
  display: none; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 44px; padding: 0;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; cursor: pointer;
}
.hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .2s var(--suave), opacity .15s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none; position: absolute; left: var(--margem); right: var(--margem); top: calc(100% - 4px);
  flex-direction: column; padding: 8px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: var(--sombra-elevada);
}
.mobile-menu a { padding: 12px 14px; min-height: 44px; border-radius: 12px; font: 700 15px/20px var(--titulo); }
.mobile-menu a.atual { background: var(--rosa); color: var(--vermelho-forte); }

/* Seções --------------------------------------------------------------------*/
main { display: block; }
.secao, .hero {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin-inline: auto;
}
/* Tecido: a imagem fica sempre por baixo, e js/hero-tecido.js põe o canvas animado
   por cima. Sem WebGL, com movimento reduzido ou sem JS, fica só a imagem. */
.hero-tecido {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s ease; pointer-events: none;
}
.hero-tecido.ativa { opacity: 1; }

/* CTA ----------------------------------------------------------------------- */
.cta { margin-top: 56px; }
.cta-faixa {
  display: flex; align-items: center; gap: 32px; min-height: 120px;
  padding: 24px 48px; border-radius: 24px;
  position: relative; isolation: isolate;
  background: var(--hero-base); color: var(--branco);
}
/* Mesmo tecido do hero: imagem por baixo e canvas por cima (js/hero-tecido.js). */
.cta-fundo, .pagina-fundo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit;
  background: var(--hero-base) url("../images/hero-tecido.webp") center / cover no-repeat;
}
.cta h2 { flex: 1 1 440px; max-width: 440px; font-size: 30px; line-height: 1.2; font-weight: 800; text-wrap: balance; }
.cta-acoes { display: flex; gap: 14px; flex: none; }

/* Rodapé --------------------------------------------------------------------*/
.rodape {
  margin-top: 64px; padding: 40px 0 24px;
  background: var(--escuro-fundo); color: var(--branco); font-size: 13px; line-height: 20px;
}
.rodape-dentro, .rodape-legal {
  max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-inline: var(--margem);
}
.rodape-dentro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.rodape a { text-underline-offset: 3px; }
@media (hover: hover) { .rodape a:hover { text-decoration: underline; } }
.rodape :focus-visible { outline-color: var(--branco); }
.rodape h2 { margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 700; }
.rodape-marca img { width: auto; height: 56px; }
.rodape-marca p { margin: 12px 0; }
.rodape-sociais { display: flex; gap: 16px; }
.rodape-mapa, .rodape-contato { display: flex; flex-direction: column; align-items: flex-start; }
.rodape-respiro { display: block; height: 8px; }
.rodape-emergencia { align-self: start; padding: 16px; border-radius: 14px; background: var(--vermelho); }
.rodape-emergencia strong { display: block; margin-bottom: 4px; font-size: 15px; line-height: 20px; }
.rodape-emergencia a { font-weight: 700; text-decoration: underline; }
.rodape-legal { margin-top: 28px; font-size: 12px; }
.rodape-legal > p { padding-top: 16px; border-top: 1px solid var(--escuro-linha); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; }
.link-btn { padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.rodape .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-links a[href^="http"] { text-decoration: underline; text-underline-offset: 3px; }

/* Botões fixos ---------------------------------------------------------------*/
.whatsapp-float {
  position: fixed; right: 30px; bottom: 32px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--flat-verde);
  transition: transform .2s var(--suave);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float svg, .whatsapp-float svg path { fill: var(--branco); }
.whatsapp-float:active { transform: scale(.95); }
@media (hover: hover) { .whatsapp-float:hover { transform: scale(1.06); } }

/* Só aparece depois do hero; antes disso, não há para onde voltar. */
.voltar-topo {
  position: fixed; right: 36px; bottom: 104px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--linha); border-radius: 50%;
  background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-vidro);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .25s ease, translate .25s var(--suave), visibility .25s;
}
.voltar-topo.visivel { opacity: 1; visibility: visible; translate: 0 0; }
@media (hover: hover) { .voltar-topo:hover { color: var(--vermelho-forte); border-color: var(--vermelho); } }

/* Modais: os mesmos fluxos de agendamento do site atual ----------------------*/
/* showModal não trava a rolagem da página atrás. O gutter evita o salto da barra. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.modal {
  inset: 0; margin: 0; width: auto; height: auto; max-width: none; max-height: none;
  display: grid; place-items: center; padding: 0; border: 0; background: transparent; overflow: hidden;
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: var(--modal-fundo); }
.modal-card {
  position: relative; width: min(430px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: clamp(24px, 4vw, 32px); border-radius: 20px;
  background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-elevada);
  animation: modalEntra .28s var(--suave) both;
}
@keyframes modalEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.h-display { font-family: var(--titulo); font-weight: 800; letter-spacing: -.01em; }
.h-3 { margin: 0; padding-right: 34px; font-size: 24px; line-height: 1.2; }
.modal-sub { margin: 8px 0 20px; font-size: 14px; line-height: 1.5; color: var(--tinta-fraca); }
.modal-fechar {
  position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--tinta-fraca); cursor: pointer;
}
.modal-fechar:hover { background: var(--quente); color: var(--tinta); }
.modal-opcoes { display: flex; flex-direction: column; gap: 10px; }
.modal-opcao {
  display: flex; align-items: center; gap: 14px; padding: 13px 15px;
  border: 1px solid var(--linha); border-radius: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
.modal-opcao:hover { border-color: var(--vermelho); background: var(--fundo); }
.modal-opcao-whats:hover { border-color: var(--whatsapp); }
.icon-tint {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; background: var(--rosa); color: var(--vermelho-forte);
}
.icon-tint svg { width: 20px; height: 20px; }
.modal-opcao-whats .icon-tint { background: var(--quente); color: var(--tinta-sobre-whats); }
.modal-opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal-opcao .rotulo { font: 700 15px/1.3 var(--titulo); }
.modal-opcao .valor { font-size: 14px; line-height: 1.35; color: var(--tinta-fraca); }
.modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-campo { display: flex; flex-direction: column; gap: 6px; }
.modal-campo label, .modal-form legend { padding: 0; font: 700 13px/1.3 var(--titulo); color: var(--tinta-suave); }
.modal-campo input, .modal-campo select {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--tinta);
  font: 400 16px/1.3 var(--corpo);
}
.modal-campo input:focus, .modal-campo select:focus { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.modal-form fieldset { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.modal-form .btn { width: 100%; min-height: 52px; }
.form-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-fraca); }
.text-link { color: var(--vermelho-forte); text-decoration: underline; text-underline-offset: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; font-size: 14px; font-weight: 500; }
.pill input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pill span {
  display: block; padding: 10px 15px; border: 1px solid var(--linha); border-radius: 12px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pill span:hover { border-color: var(--vermelho); }
.pill input:checked + span { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }
.pill input:focus-visible + span { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.pill input:disabled + span { opacity: .4; border-style: dashed; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }

/* Aviso de cookies (js/consent.js) */
.cookie-banner {
  position: fixed; left: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); z-index: 70;
  display: flex; flex-direction: column; gap: 14px; width: min(440px, calc(100vw - 24px));
  padding: 18px 20px; border: 1px solid var(--linha); border-radius: 18px;
  background: var(--branco); box-shadow: var(--sombra-elevada);
}
.cookie-banner[hidden] { display: none; }
.cookie-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
.cookie-texto a { color: var(--vermelho-forte); text-decoration: underline; }
.cookie-acoes { display: flex; justify-content: flex-end; gap: 10px; }
/* Até 1160: a faixa do CTA não cabe em uma linha ------------------------------*/
@media (max-width: 1160px) {
  .cta-faixa { flex-wrap: wrap; padding: 28px 40px; }
  .cta h2 { flex: 1 1 100%; max-width: none; }
  .menu a { padding: 10px 14px; }
}

/* Abaixo de 1000: cabeçalho compacto ------------------------------------------*/
@media (max-width: 999px) {
  .menu { display: none; }
  .hamburger { display: flex; }
  .btn-header { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 14px; }
  .header-dentro { min-height: 68px; gap: 10px; }
  .header-logo { margin-right: auto; }
  .header-logo img { height: 48px; }
  .mobile-menu.open { display: flex; }

  .cta { margin-top: 48px; }
  .rodape-dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .rodape-emergencia { grid-column: 1 / -1; }
}

/* Abaixo de 700 ---------------------------------------------------------------*/
@media (max-width: 699px) {
  .topbar { font-size: 12px; }
  .topbar-dentro { min-height: 44px; gap: 8px; white-space: nowrap; }
  .topbar-contato { flex: 1; justify-content: space-between; gap: 8px; }
  .topbar-dentro > span { margin-left: 8px; }
  .so-largo { display: none; }
  .so-estreito { display: inline; }

  .cta-faixa { display: block; padding: 24px; border-radius: 22px; }
  .cta h2 { margin-bottom: 16px; font-size: 24px; line-height: 30px; }
  .cta-acoes { flex-direction: column; gap: 10px; }
  .cta-acoes .btn { width: 100%; min-height: 52px; }

  .rodape { margin-top: 48px; padding-top: 28px; font-size: 14px; }
  .rodape-dentro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rodape-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .rodape-mapa h2 { grid-column: 1 / -1; }
  .rodape-mapa a, .rodape-sociais a, .rodape-links > a, .rodape-links .link-btn { display: flex; align-items: center; min-height: 44px; }
  .rodape-contato a { padding: 6px 0; }
  .rodape-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; margin-top: 8px; font-size: 13px; }
  .rodape-links .link-btn { text-align: left; }
  .rodape-links > span { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; }

  .voltar-topo { right: 22px; bottom: 84px; width: 44px; height: 44px; }
  .whatsapp-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}

/* Celulares bem estreitos: logo, Agendar e menu precisam caber na mesma linha. */
@media (max-width: 359px) {
  .topbar-endereco { display: none; }
  .header-logo img { height: 38px; }
  .btn-header { padding: 0 14px; }
}

/* Vidro líquido --------------------------------------------------------------
   Três camadas: fundo translúcido em degradê, brilho interno nas bordas e, quando o
   navegador permite, refração (js/vidro-liquido.js define --vidro-filtro). Os botões
   ficam de fora: são vidro flat, logo abaixo. */
.menu, .mobile-menu, .modal-card, .cookie-banner {
  -webkit-backdrop-filter: var(--liq-filtro);
  backdrop-filter: var(--vidro-filtro, var(--liq-filtro));
  border-color: var(--liq-borda);
  box-shadow: var(--liq-sombra);
}
.menu { background: var(--liq-claro); border: 1px solid var(--liq-borda); }
.mobile-menu, .modal-card, .cookie-banner { background: var(--vidro-solido); border: 1px solid var(--liq-borda); }
.menu a.atual { background: var(--rosa); box-shadow: inset 0 1px 1px var(--liq-borda); }
.menu-viva a.atual { background: transparent; box-shadow: none; }
.menu-pilula { box-shadow: inset 0 1px 1px var(--liq-borda); }


/* Botões: vidro flat. Fundo translúcido liso, borda fina e blur simples, sem sombra. */
.btn, .voltar-topo, .whatsapp-float, .hamburger {
  -webkit-backdrop-filter: var(--flat-filtro);
  backdrop-filter: var(--flat-filtro);
  box-shadow: none;
}
.voltar-topo, .hamburger { background: var(--flat-claro); border: 1px solid var(--flat-borda); }
.whatsapp-float { border: 0; }
@media (hover: hover) {
  .voltar-topo:hover, .hamburger:hover { background: var(--flat-claro-forte); }
}

/* Quem pediu menos transparência no sistema recebe tudo sólido. */
@media (prefers-reduced-transparency: reduce) {
  .vidro, .menu, .btn-branco, .btn-outline, .voltar-topo, .hamburger, .mobile-menu, .modal-card {
    background: var(--branco); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .btn-primary, .btn-whats, .whatsapp-float { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-primary { background: var(--vermelho-forte); }
  .btn-whats, .whatsapp-float { background: #0C7A41; }
}