/* Quiropraxia Alexandre Zuppo: estilo comum a todas as páginas (tokens, cabeçalho, botões, secções, rodapé). */

/* Layout: a coluna é o fio da página. O herói é a pergunta «Onde dói?» com a coluna interativa; depois quem cuida, a primeira consulta
   em quatro passos, uma faixa da cor da parede do consultório com mitos e verdades, avaliações, perguntas e contacto. */
:root {
  --papel: #F4F9F9;      /* fundo, branco com um pouco da parede */
  --folha: #FFFFFF;      /* superfícies */
  --tinta: #0E2A33;      /* texto */
  --nevoa: #4D6870;      /* texto secundário */
  --linha: #D3E4E6;
  --parede: #2BBDCB;     /* a parede turquesa do consultório */
  --parede-texto: #0B2A31;
  --azul: #0A76AB;       /* o azul do logo */
  --gema: #F2C12E;       /* o amarelo do logo */
  --osso: #E9DDC4;       /* as vértebras */
  --osso-borda: #9A8763;
  --disco: #A9CBD1;
  --alerta: #A8402C;     /* sinais de alerta (semântico) */
  --alerta-fundo: #FBEFEB;
  --sombra: 0 1px 2px rgba(14, 42, 51, .06), 0 18px 40px -22px rgba(14, 42, 51, .35);
  --f-titulo: "Gloock", "Iowan Old Style", Georgia, serif;
  --f-texto: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --largura: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0A1C22; --folha: #10262E; --tinta: #E2F0F1; --nevoa: #9BB5BA; --linha: #20404A;
    --parede: #1E8F9B; --parede-texto: #F1FBFC; --azul: #63B9E3; --gema: #F2C12E;
    --osso: #D7CCB4; --osso-borda: #8E8065; --disco: #2E5560; --alerta: #F0907A; --alerta-fundo: #2A1A17;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0A1C22; --folha: #10262E; --tinta: #E2F0F1; --nevoa: #9BB5BA; --linha: #20404A;
  --parede: #1E8F9B; --parede-texto: #F1FBFC; --azul: #63B9E3; --gema: #F2C12E;
  --osso: #D7CCB4; --osso-borda: #8E8065; --disco: #2E5560; --alerta: #F0907A; --alerta-fundo: #2A1A17;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--azul); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
.faixa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.miolo { max-width: var(--largura); margin-inline: auto; }
.olho { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.botao { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .8rem 1.4rem; border-radius: 999px; font: 600 1rem/1.2 var(--f-texto); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s; }
.botao:hover { transform: translateY(-2px); }
.botao-zap { background: var(--tinta); color: var(--papel); }
.botao-zap svg { width: 22px; height: 22px; flex: none; }
/* o clique cai sempre no link, não no ícone: o GTM lê o texto do elemento clicado («Agendar...») */
a[href*="wa.me"] svg, a[href*="wa.me"] img { pointer-events: none; }
.botao-leve { background: transparent; color: var(--tinta); border-color: var(--linha); }

/* aviso de protótipo */
.prototipo { background: var(--gema); color: #2A2208; font: 500 .8rem/1.4 var(--f-mono); text-align: center; padding-block: .45rem; }

/* cabeçalho */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; gap: 1.5rem; min-height: 96px; }
/* o logo original (vetor do cartão), no azul dele, sem fundo, na horizontal: coluna + «Quiropraxia / Alexandre Zuppo» */
.marca { display: flex; align-items: center; margin-right: auto; }
.marca img { height: 64px; width: auto; }
.menu { display: flex; gap: 1.4rem; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .95rem; }
.menu a:hover { color: var(--azul); }
.topo .botao { min-height: 44px; padding: .55rem 1.1rem; font-size: .92rem; }

/* herói: onde dói */
.heroi { padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.heroi .miolo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.heroi-texto { display: grid; gap: 1.3rem; align-content: start; padding-top: .6rem; }
.heroi h1 { font-size: clamp(4rem, 10vw, 7.4rem); line-height: .92; letter-spacing: -.035em; }
.heroi h1 span { color: var(--azul); }
.heroi-lede { font-size: 1.15rem; color: var(--nevoa); max-width: 30em; }
.zonas { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.zonas-rotulo { display: flex; align-items: center; gap: .55rem; margin-top: .4rem; font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.zonas-rotulo svg { width: 18px; height: 18px; color: var(--azul); flex: none; }
/* 16/10: as opções têm de parecer botões (o Marcelo demorou a perceber que mudavam o painel): marcador de escolha, sombra, seta */
.zona { display: inline-flex; align-items: center; gap: .55rem; font: 600 .95rem/1.2 var(--f-texto); color: var(--tinta); background: var(--folha); border: 1.5px solid color-mix(in srgb, var(--azul) 35%, var(--linha)); border-radius: 999px; padding: .6rem 1rem .6rem .7rem; cursor: pointer; box-shadow: 0 2px 0 color-mix(in srgb, var(--azul) 18%, transparent), 0 6px 14px -10px rgba(14, 42, 51, .5); transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .15s; }
.zona::before { content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--azul) 55%, var(--linha)); flex: none; box-sizing: border-box; transition: all .2s; }
.zona::after { content: "→"; font-weight: 600; color: var(--azul); margin-left: -.1rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.zona:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 4px 0 color-mix(in srgb, var(--azul) 25%, transparent), 0 10px 18px -10px rgba(14, 42, 51, .55); }
.zona:hover::after { opacity: 1; transform: none; }
.zona:active { transform: translateY(1px); box-shadow: none; }
.zona[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--papel); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--azul) 80%, transparent); }
.zona[aria-pressed="true"]::before { border-color: var(--papel); background: radial-gradient(circle, var(--papel) 0 3px, transparent 3.5px); }
.zona[aria-pressed="true"]::after { content: "→"; color: var(--papel); opacity: 1; transform: none; }
.zonas.convite .zona:not([aria-pressed="true"]) { animation: convite .9s ease both; }
@keyframes convite { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); border-color: var(--azul); } }
.prova-social { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: .6rem; }
.estrelas { display: flex; align-items: baseline; gap: .5rem; color: var(--nevoa); font-size: .95rem; }
.estrelas b { font: 400 1.6rem/1 var(--f-titulo); color: var(--tinta); }
.estrelas i { font-style: normal; color: var(--gema); letter-spacing: .08em; }

/* a lâmina: coluna + painel */
.lamina { display: grid; grid-template-columns: 190px minmax(0, 1fr); background: var(--folha); border: 1px solid var(--linha); border-radius: 28px; box-shadow: var(--sombra); overflow: hidden; }
.lamina-coluna { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--parede) 16%, var(--folha)), color-mix(in srgb, var(--parede) 6%, var(--folha))); border-right: 1px solid var(--linha); padding: 1.2rem .4rem; }
.lamina-coluna svg { display: block; width: 100%; height: auto; }
.lamina-coluna small { position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; font: 400 .68rem/1.3 var(--f-mono); color: var(--nevoa); letter-spacing: .04em; }
.painel { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.painel-faixa { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.painel h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.painel-bloco { display: grid; gap: .3rem; }
.painel-bloco h3 { font: 600 .82rem/1.3 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--nevoa); }
.painel-bloco p { color: var(--tinta); }
.hoje { background: color-mix(in srgb, var(--gema) 18%, var(--folha)); border-radius: 14px; padding: .9rem 1.1rem; }
.hoje h3 { color: color-mix(in srgb, var(--tinta) 80%, var(--gema)); }
.alerta { border: 1px solid color-mix(in srgb, var(--alerta) 35%, var(--linha)); background: var(--alerta-fundo); border-radius: 14px; padding: .9rem 1.1rem; }
.alerta h3 { color: var(--alerta); }
.alerta ul { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.painel.troca { animation: troca .35s ease; }
@keyframes troca { from { opacity: .35; transform: translateY(6px); } }

/* coluna SVG */
.vert { cursor: pointer; }
.vert-corpo { fill: var(--osso); stroke: var(--osso-borda); stroke-width: 1.2; transition: fill .25s, stroke .25s; }
.vert-proc { fill: var(--osso); stroke: var(--osso-borda); stroke-width: 1.2; transition: fill .25s; }
.disco { fill: var(--disco); }
.vert.ativa .vert-corpo, .vert.ativa .vert-proc, .sacro.ativa path, .cranio.ativa path { fill: var(--parede); stroke: color-mix(in srgb, var(--parede) 60%, var(--tinta)); }
.vert:hover .vert-corpo { stroke: var(--azul); }
.sacro path { fill: var(--osso); stroke: var(--osso-borda); stroke-width: 1.2; transition: fill .25s; cursor: pointer; }
.cranio path { fill: none; stroke: var(--osso-borda); stroke-width: 1.6; stroke-dasharray: 4 5; cursor: pointer; }
.cranio.ativa path { fill: none; stroke-dasharray: none; stroke-width: 2.4; stroke: var(--parede); }
.chave { stroke: var(--azul); stroke-width: 1.6; fill: none; }
.chave-texto { font: 500 12px var(--f-mono); fill: var(--azul); }
.empilha { animation: empilha .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes empilha { from { transform: translateY(14px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .empilha, .painel.troca, .zonas.convite .zona { animation: none !important; } .botao:hover { transform: none; } html { scroll-behavior: auto; } }

/* secções */
.secao { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.secao-cab { display: grid; gap: .8rem; max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao-cab h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.secao-cab p:not(.olho) { color: var(--nevoa); font-size: 1.1rem; }

/* quem cuida */
.quem .miolo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.quem-foto { position: relative; }
.quem-foto img { border-radius: 24px; aspect-ratio: 5 / 4; object-fit: cover; object-position: 60% 35%; width: 100%; }
.quem-foto figcaption { position: absolute; left: 1rem; bottom: 1rem; background: var(--folha); color: var(--tinta); border-radius: 12px; padding: .5rem .8rem; font: 400 .78rem/1.35 var(--f-mono); box-shadow: var(--sombra); }
.quem-texto { display: grid; gap: 1.1rem; }
.quem-texto h2 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.quem-texto .papel-sub { font-size: 1.2rem; color: var(--azul); font-weight: 500; }
.numeros { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.numeros div { display: grid; }
.numeros b { font: 400 2.2rem/1 var(--f-titulo); }
.numeros span { color: var(--nevoa); font-size: .92rem; }

/* primeira consulta */
.consulta { background: var(--folha); border-block: 1px solid var(--linha); }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: passo; }
.passo { display: grid; gap: .8rem; align-content: start; position: relative; }
.passo img { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.passo-n { display: flex; align-items: center; gap: .7rem; font: 500 .8rem/1 var(--f-mono); color: var(--azul); letter-spacing: .06em; text-transform: uppercase; }
.passo-n::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--azul); color: var(--papel); font: 500 .9rem/1 var(--f-mono); }
.passo h3 { font-size: 1.55rem; }
.passo p { color: var(--nevoa); font-size: .98rem; }

/* mitos: a parede do consultório */
.mitos { background: var(--parede); color: var(--parede-texto); }
.mitos .olho { color: var(--parede-texto); opacity: .8; }
.mitos .secao-cab p:not(.olho) { color: var(--parede-texto); opacity: .85; }
.mitos-grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mito { text-align: left; font: inherit; color: var(--tinta); background: var(--folha); border: 0; border-radius: 20px; padding: 1.4rem; display: grid; gap: .9rem; align-content: start; cursor: pointer; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .5); transition: transform .2s; min-height: 12rem; }
.mito:hover { transform: translateY(-3px); }
.mito-frase { font: 400 1.35rem/1.2 var(--f-titulo); }
.mito-pergunta { font: 500 .8rem/1.3 var(--f-mono); color: var(--azul); letter-spacing: .05em; text-transform: uppercase; margin-top: auto; }
.mito-resposta { display: grid; gap: .5rem; }
.mito-resposta p { color: var(--nevoa); font-size: .98rem; }
.selo { justify-self: start; font: 500 .78rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .7rem; border-radius: 999px; }
.selo-mito { background: var(--alerta-fundo); color: var(--alerta); }
.selo-verdade { background: color-mix(in srgb, var(--parede) 22%, var(--folha)); color: color-mix(in srgb, var(--parede) 45%, var(--tinta)); }

/* avaliações */
.avaliacoes-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.4rem; }
.nota { display: flex; align-items: center; gap: 1rem; }
.nota b { font: 400 4rem/1 var(--f-titulo); }
.nota div { display: grid; color: var(--nevoa); font-size: .95rem; }
.nota i { font-style: normal; color: var(--gema); font-size: 1.2rem; letter-spacing: .1em; }
.depoimentos { columns: 3 280px; column-gap: 1.2rem; }
.depoimento { break-inside: avoid; margin: 0 0 1.2rem; background: var(--folha); border: 1px solid var(--linha); border-radius: 20px; padding: 1.4rem; display: grid; gap: .8rem; }
.depoimento blockquote { margin: 0; font: 400 1.3rem/1.3 var(--f-titulo); }
.depoimento figcaption { color: var(--nevoa); font-size: .92rem; }

/* perguntas */
.perguntas .miolo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.perguntas img { border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-top: 1.6rem; }
details { border-top: 1px solid var(--linha); }
details:last-child { border-bottom: 1px solid var(--linha); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-block: 1.2rem; font: 400 1.35rem/1.25 var(--f-titulo); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.6rem/1 var(--f-mono); color: var(--azul); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 1.3rem; color: var(--nevoa); max-width: 38em; }

/* contacto */
.contato { background: var(--tinta); color: var(--papel); }
.contato .miolo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contato h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; }
.contato h2 span { color: var(--parede); }
.contato .olho { color: var(--parede); }
.contato-texto { display: grid; gap: 1.3rem; }
.contato-texto p { color: color-mix(in srgb, var(--papel) 75%, var(--tinta)); font-size: 1.1rem; max-width: 30em; }
.contato .botao-zap { background: var(--parede); color: #062026; }
.dados { display: grid; gap: 0; background: color-mix(in srgb, var(--papel) 6%, var(--tinta)); border: 1px solid color-mix(in srgb, var(--papel) 14%, var(--tinta)); border-radius: 22px; padding: .4rem 1.4rem; }
.dados div { display: grid; gap: .2rem; padding-block: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--papel) 12%, var(--tinta)); }
.dados div:last-child { border-bottom: 0; }
.dados dt { font: 500 .74rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--parede); }
.dados dd { margin: 0; font-size: 1.1rem; user-select: all; }
.dados a { color: var(--papel); }
.rodape { background: var(--tinta); color: color-mix(in srgb, var(--papel) 60%, var(--tinta)); border-top: 1px solid color-mix(in srgb, var(--papel) 12%, var(--tinta)); padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); font-size: .88rem; }
.rodape .miolo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; }

@media (max-width: 1000px) {
  .menu { display: none; }
  .heroi .miolo, .quem .miolo, .perguntas .miolo, .contato .miolo { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mitos-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .marca img { height: 46px; }
  .topo .miolo { min-height: 80px; }
  .topo .botao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* escondido só visualmente: o texto continua no clique (conversão do GTM pelo texto) */
  .topo .botao { padding: .55rem .8rem; }
  .lamina { grid-template-columns: minmax(0, 1fr); }
  .lamina-coluna { border-right: 0; border-bottom: 1px solid var(--linha); padding: .8rem .6rem 1.6rem; }
  .passos, .mitos-grelha { grid-template-columns: minmax(0, 1fr); }
  .mito { min-height: 0; }
  .zona { font-size: .9rem; padding: .55rem .85rem; }
}

/* barra do celular: Menu + WhatsApp embaixo da tela (geradores/barra_celular.py) */
.barra-cel { display: none; }
@media (max-width: 1000px) {
  .topo .botao-zap { display: none; }
  .barra-cel { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .6rem max(12px, env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
  .barra-menu summary { list-style: none; cursor: pointer; min-height: 52px; padding: 0 1.1rem; display: flex; align-items: center; gap: .45rem;
    border: 1px solid var(--linha); border-radius: 999px; background: var(--folha); color: var(--tinta); font: 700 1rem/1 var(--f-texto); }
  .barra-menu summary::-webkit-details-marker { display: none; }
  .barra-menu summary::after { content: none !important; }
  .barra-zap span { white-space: nowrap; }
  .barra-menu[open] summary { border-color: var(--azul); color: var(--azul); }
  .barra-menu nav { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); display: grid; padding: .5rem;
    background: var(--folha); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra); max-height: 70vh; overflow: auto; }
  .barra-menu nav a { padding: .85rem 1rem; border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
  .barra-menu nav a:hover, .barra-menu nav a[aria-current="page"] { background: var(--papel); color: var(--azul); }
  .barra-zap { flex: 1; justify-content: center; min-height: 52px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* menu com submenus (geradores/navegacao.py) */
.menu { align-items: center; }
.m-item { position: relative; }
.m-topo { display: inline-flex; align-items: center; gap: .3rem; padding-block: .6rem; }
.m-topo[aria-current] { color: var(--azul); }
.m-seta { transition: transform .2s; flex: none; }
.m-sub { position: absolute; top: 100%; left: -1rem; z-index: 30; min-width: 270px; display: grid; padding: .5rem;
  background: var(--folha); border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.m-item:hover .m-sub, .m-item:focus-within .m-sub { opacity: 1; visibility: visible; transform: none; }
.m-item:hover .m-seta, .m-item:focus-within .m-seta { transform: rotate(180deg); }
.menu .m-sub a { padding: .55rem .8rem; border-radius: 10px; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.menu .m-sub a:hover, .menu .m-sub a[aria-current="page"] { background: var(--papel); color: var(--azul); }
.menu-cel { display: none; }
@media (max-width: 1000px) {
  .menu-cel { display: block; }
  .menu-cel > summary { list-style: none; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
    border: 1px solid var(--linha); background: var(--folha); color: var(--tinta); }
  .menu-cel > summary::-webkit-details-marker { display: none; }
  .menu-cel > summary::after { content: none !important; }
  .menu-cel[open] > summary { border-color: var(--azul); color: var(--azul); }
  .menu-cel-painel { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; max-height: calc(100vh - 170px);
    overflow: auto; display: grid; gap: .2rem; padding: .7rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px));
    background: var(--folha); border-bottom: 1px solid var(--linha); box-shadow: 0 24px 40px -24px rgba(14, 42, 51, .45); }
  .menu-cel-painel a { display: block; padding: .7rem .4rem; color: var(--tinta); text-decoration: none; font-weight: 500; }
  .menu-cel-painel a[aria-current="page"] { color: var(--azul); font-weight: 700; }
  .menu-cel-painel .mc-inicio { font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid var(--linha); }
  .mc-sec { border-bottom: 1px solid var(--linha); }
  .mc-sec > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem .4rem;
    font: 700 1.1rem/1.2 var(--f-texto); color: var(--tinta); min-height: 48px; }
  .mc-sec > summary::-webkit-details-marker { display: none; }
  .mc-sec > summary::after { content: none !important; }
  .mc-sec[open] > summary .m-seta { transform: rotate(180deg); }
  .mc-sec > div { display: grid; padding: 0 0 .6rem .8rem; border-left: 3px solid var(--parede); margin: 0 0 .6rem .4rem; }
}

/* hambúrguer: caixa 46x46 com o ícone centrado (o summary herdava o padding das perguntas frequentes) */
@media (max-width: 1000px) {
  .menu-cel > summary { padding: 0 !important; margin: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    font-size: 0; line-height: 0; box-sizing: border-box; }
  .menu-cel > summary svg { display: block; width: 26px; height: 26px; }
}
/* botões de mapa junto ao endereço */
.mapas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.mapas a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid currentColor; color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem; }
.mapas a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.mapas svg { flex: none; }

/* ícones dos apps (geradores/endereco.py) */
.mapas a { background: var(--folha); color: var(--tinta); border-color: var(--linha); }
.mapas a:hover { border-color: var(--azul); background: var(--folha); }
.mapas .ic, .rodape-atalhos .ic { width: 24px; height: 24px; flex: none; }
.rodape-atalhos { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem; padding-bottom: 1.1rem; margin-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--papel) 14%, var(--tinta)); }
.rodape-atalhos a { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .45rem 1rem .45rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 10%, var(--tinta)); color: var(--papel); text-decoration: none; font-weight: 600; font-size: .95rem; }
.rodape-atalhos a:hover { background: color-mix(in srgb, var(--papel) 18%, var(--tinta)); }