/* Alavanca Fisioterapia e Ortopedia · exemplo de estilo da Studios Prumo
   Ideia: a clínica mede o movimento. Índigo profundo de base, coral só onde dói, lilás onde alivia.
   O goniômetro dobra o joelho na abertura, o mapa do corpo vira de frente para costas num círculo
   que se abre, e o plano de sessões se preenche com a rolagem. */

@font-face { font-family: "Archivo"; src: url("fontes/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fontes/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --faixa: 32px;
  --gelo: #F3F3F9;
  --branco: #FFFFFF;
  --noite: #161A3D;
  --noite-2: #4D5175;
  --lilas: #CEC8FF;
  --lilas-claro: #E9E6FF;
  --lilas-escuro: #5A4ED1;
  --coral: #E8492F;
  --coral-botao: #C93A22;
  --corpo: #D8D4F4;
  --linha: rgba(22, 26, 61, 0.12);
  --titulo: "Archivo", "Arial", system-ui, sans-serif;
  --texto: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --curva: cubic-bezier(0.22, 0.8, 0.24, 1);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--faixa); background: var(--gelo); color: var(--noite); font: 400 1.0625rem/1.6 var(--texto); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; max-width: 100%; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--lilas-escuro); outline-offset: 3px; border-radius: 6px; }
.chamada :focus-visible, .rodape :focus-visible { outline-color: var(--lilas); }

/* Faixa da Studios Prumo (igual em todos os exemplos) */
.faixa-prumo { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: var(--faixa); padding: 4px 16px; background: #0E0E10; color: #F2F0EB; font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; text-align: center; text-decoration: none; }
.faixa-prumo:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-prumo:focus-visible { outline: 2px solid #6875FF; outline-offset: -4px; border-radius: 0; }
@media (max-width: 480px) { :root { --faixa: 40px; } .faixa-prumo { font-size: 11px; } }

/* Tipografia */
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; font-stretch: 112%; letter-spacing: -0.025em; line-height: 1; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 18ch; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-stretch: 105%; letter-spacing: -0.01em; line-height: 1.15; }
.selo { justify-self: start; display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--lilas-claro); color: var(--lilas-escuro); font: 700 0.74rem/1.2 var(--texto); text-transform: uppercase; letter-spacing: 0.1em; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--noite-2); max-width: 44ch; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px; font: 700 1rem/1 var(--texto); text-decoration: none; cursor: pointer; transition: transform 220ms var(--curva), background-color 200ms, border-color 200ms; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao-coral { background: var(--coral-botao); color: var(--branco); }
.botao-coral:hover { background: #B13019; }
.botao-linha { border-color: var(--noite); color: var(--noite); }
.botao-linha:hover { background: var(--noite); color: var(--branco); }
.botao-claro { background: var(--branco); color: var(--noite); }

/* Topo */
.topo { position: sticky; top: var(--faixa); z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px var(--margem); background: rgba(243, 243, 249, 0.96); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--noite); }
.marca-simbolo { width: 38px; height: 38px; flex: none; }
.a-barra { stroke: var(--noite); stroke-width: 4; stroke-linecap: round; fill: none; }
.a-apoio { fill: var(--coral); }
.a-carga { fill: var(--lilas-escuro); }
.marca-texto { display: grid; line-height: 1; }
.marca-nome { font: 800 1.3rem/1 var(--titulo); font-stretch: 118%; letter-spacing: -0.02em; }
.marca-sub { font: 600 0.66rem/1.4 var(--texto); text-transform: uppercase; letter-spacing: 0.12em; color: var(--noite-2); }
.menu { display: none; margin-left: auto; gap: 26px; }
.menu a { font-weight: 600; text-decoration: none; color: var(--noite-2); }
.menu a:hover { color: var(--noite); }
.topo > .botao { margin-left: auto; min-height: 44px; padding: 0 20px; }
@media (min-width: 980px) { .menu { display: flex; } .topo > .botao { margin-left: 0; } }

/* Seções */
section { position: relative; padding: clamp(72px, 9vw, 128px) var(--margem); }
.cabeca { max-width: var(--largura); margin: 0 auto clamp(32px, 5vw, 56px); display: grid; gap: 16px; }
.cabeca > p:not(.selo) { color: var(--noite-2); max-width: 54ch; font-size: 1.1rem; }

/* 1. Abertura */
.abertura { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-top: clamp(40px, 6vw, 88px); }
.abertura-texto { display: grid; gap: 22px; }
.abertura h1 .linha { display: block; overflow: clip; padding-bottom: 0.06em; }
.abertura h1 .linha > span { display: inline-block; }
.abertura h1 .linha:last-child > span { color: var(--lilas-escuro); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.abertura-figura { position: relative; display: grid; gap: 8px; justify-items: center; }
.abertura-figura::before { content: ""; position: absolute; inset: 6% 8% 14%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, var(--lilas-claro), rgba(233, 230, 255, 0) 70%); z-index: -1; }
.abertura-figura figcaption { font-size: 0.82rem; color: var(--noite-2); }
.gonio { width: min(100%, 620px); height: auto; overflow: visible; }
.gonio-arco { fill: none; stroke: var(--lilas-escuro); stroke-width: 2; opacity: 0.4; }
.gonio-base { stroke: var(--linha); stroke-width: 2; }
.gonio .tique { stroke: var(--noite-2); stroke-width: 2; stroke-linecap: round; opacity: 0.4; }
.gonio .tique-longa { stroke-width: 3; opacity: 0.7; }
.gonio .percorrida { stroke: var(--coral); opacity: 1; }
.gonio-numeros text { fill: var(--noite-2); font: 600 15px var(--texto); text-anchor: middle; }
.gonio-meta { fill: var(--lilas-escuro); }
.gonio-meta-texto { fill: var(--lilas-escuro); font: 700 13px var(--texto); text-anchor: middle; }
.braco { fill: var(--coral); }
.braco-fixo { fill: var(--noite); }
.braco-movel { transform-box: view-box; transform-origin: 280px 330px; transform: rotate(-135deg); }
.pivo { fill: var(--gelo); stroke: var(--noite); stroke-width: 4; }
.pivo-centro { fill: var(--coral); }
.gonio-leitura { fill: var(--noite); font: 800 76px var(--titulo); font-stretch: 112%; text-anchor: middle; letter-spacing: -0.03em; }
@media (min-width: 960px) { .abertura { grid-template-columns: 1fr 1fr; } }

/* Entrada orquestrada (CSS puro) */
.entra { animation: entrar 900ms var(--curva) both; animation-delay: calc(var(--i) * 90ms + 60ms); }
.abertura h1 .entra { animation-name: subir; animation-duration: 780ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(24px); } }
@keyframes subir { from { transform: translateY(105%); } }
.braco-movel { animation: dobrar 1700ms cubic-bezier(0.45, 0.05, 0.3, 1) 450ms both; }
@keyframes dobrar { from { transform: rotate(0deg); } }
.gonio .percorrida { animation: marcar 260ms ease-out both; animation-delay: calc(560ms + var(--a) * 9.5ms); }
@keyframes marcar { from { opacity: 0.15; } }
.gonio-meta, .gonio-meta-texto { animation: entrar 600ms var(--curva) 2100ms both; }

/* Revelação na rolagem */
.js [data-revelar] { opacity: 0; transform: translateY(32px); transition: opacity 800ms var(--curva), transform 900ms var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-revelar].visto { opacity: 1; transform: none; }

/* 2. Tratamentos */
.grade-trat { max-width: var(--largura); margin: 0 auto; display: grid; gap: 14px; }
.trat { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 20px; background: var(--branco); box-shadow: 0 1px 0 var(--linha); }
.trat p { color: var(--noite-2); }
.trat h3::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: var(--coral); }
.trat:nth-child(even) h3::before { background: var(--lilas-escuro); }
.nota-preco { max-width: var(--largura); margin: 20px auto 0; font-weight: 600; color: var(--noite-2); }
@media (min-width: 640px) { .grade-trat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grade-trat { grid-template-columns: repeat(4, 1fr); } }

/* 3. Onde dói: mapa do corpo */
.onde-doi { background: var(--branco); }
.mapa { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
.mapa-corpo { display: grid; gap: 16px; justify-items: center; padding: clamp(16px, 3vw, 32px); border-radius: 28px; background: var(--gelo); }
.vistas { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--branco); box-shadow: 0 1px 0 var(--linha); }
.vistas button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--noite-2); font: 700 0.92rem var(--texto); cursor: pointer; transition: background-color 200ms, color 200ms; }
.vistas button[aria-pressed="true"] { background: var(--noite); color: var(--branco); }
.palco-corpo { position: relative; width: min(100%, 330px); aspect-ratio: 300 / 640; }
.corpo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: clip-path 760ms var(--curva); clip-path: circle(0% at 50% 38%); pointer-events: none; }
.palco-corpo[data-vista-atual="frente"] .corpo-frente, .palco-corpo[data-vista-atual="costas"] .corpo-costas { clip-path: circle(85% at 50% 38%); pointer-events: auto; }
.silhueta { fill: var(--corpo); }
.anatomia { fill: none; stroke: var(--branco); stroke-width: 1.8; stroke-linecap: round; opacity: 0.95; }
.anatomia circle { fill: var(--branco); stroke: none; }
.sombra-chao { fill: rgba(22, 26, 61, 0.1); }
.calor { opacity: 0; transition: transform 600ms var(--curva), opacity 400ms; pointer-events: none; }
.calor.ligado { opacity: 1; }
.ponto { cursor: pointer; }
.ponto-alvo { fill: transparent; }
.ponto-anel { fill: var(--branco); stroke: var(--coral); stroke-width: 2; opacity: 0.9; }
.ponto-nucleo { fill: var(--coral); }
.ponto-pulso { fill: var(--coral); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ponto:hover .ponto-anel { stroke-width: 3; }
.ponto.ativa .ponto-anel { fill: var(--coral); }
.ponto.ativa .ponto-nucleo { fill: var(--branco); }
.mapa.em-cena .ponto.ativa .ponto-pulso { animation: pulso 1600ms ease-out infinite; }
@keyframes pulso { from { opacity: 0.45; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
.js .mapa-corpo .ponto { opacity: 0; transform-box: fill-box; }
.js .mapa-corpo.visto .ponto { opacity: 1; transition: opacity 500ms var(--curva) 350ms; }
.mapa-lado { display: grid; gap: 18px; }
.regioes { display: flex; flex-wrap: wrap; gap: 8px; }
.regioes button { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--linha); border-radius: 12px; background: var(--gelo); color: var(--noite); font: 600 0.95rem var(--texto); cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms; }
.regioes button:hover { border-color: var(--noite-2); }
.regioes button[aria-pressed="true"] { background: var(--coral-botao); border-color: var(--coral-botao); color: var(--branco); }
.regiao-ficha { display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: var(--noite); color: var(--gelo); transition: opacity 180ms var(--curva), transform 240ms var(--curva); }
.regiao-ficha.trocando { opacity: 0; transform: translateY(10px); }
.regiao-especialidade { font: 700 0.74rem/1.3 var(--texto); text-transform: uppercase; letter-spacing: 0.12em; color: var(--lilas); }
.regiao-nome { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.regiao-colunas { display: grid; gap: 18px; }
.regiao-subtitulo { margin-bottom: 8px; font-weight: 700; color: var(--lilas); }
.regiao-queixas, .regiao-tratamentos { display: grid; gap: 8px; }
.regiao-queixas li, .regiao-tratamentos li { position: relative; padding-left: 22px; color: rgba(243, 243, 249, 0.88); }
.regiao-queixas li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.regiao-tratamentos li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 10px; height: 6px; border-left: 2.5px solid var(--lilas); border-bottom: 2.5px solid var(--lilas); transform: rotate(-45deg); }
.regiao-agendar { justify-self: start; }
.regiao-alerta { font-size: 0.85rem; color: rgba(243, 243, 249, 0.7); }
@media (min-width: 640px) { .regiao-colunas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .mapa { grid-template-columns: 0.9fr 1.1fr; } .mapa-lado { position: sticky; top: calc(var(--faixa) + 96px); } }

/* 4. Plano */
.plano-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.passos { display: grid; gap: 28px; }
.passos li { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.passo-num { grid-row: span 2; font: 800 1.1rem var(--titulo); font-stretch: 112%; color: var(--coral-botao); }
.passos p { color: var(--noite-2); max-width: 46ch; }
.trilha { --f: clamp(0, (var(--p, 1) - 0.12) * 1.9, 1); display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--branco); box-shadow: 0 1px 0 var(--linha), 0 24px 60px rgba(22, 26, 61, 0.08); }
.trilha-titulo { font: 800 1.2rem var(--titulo); font-stretch: 110%; }
.trilha-sessoes { display: flex; flex-wrap: wrap; gap: 8px; }
.trilha-sessoes li { --liga: clamp(0, var(--f) * 15 - var(--k), 1); position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--gelo); font-weight: 600; font-size: 0.92rem; }
.trilha-sessoes li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); opacity: var(--liga); transform: scale(calc(0.3 + var(--liga) * 0.7)); }
.trilha-sessoes li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--coral); opacity: var(--liga); }
.trilha-sessoes .reavaliacao { background: var(--lilas-claro); color: var(--lilas-escuro); }
.trilha-sessoes .reavaliacao::before { background: var(--lilas-escuro); border-radius: 3px; transform: rotate(45deg) scale(calc(0.3 + var(--liga) * 0.7)); }
.trilha-sessoes .reavaliacao::after { border-color: var(--lilas-escuro); }
.trilha figcaption { font-size: 0.82rem; color: var(--noite-2); }
@media (min-width: 980px) { .plano-grade { grid-template-columns: 1fr 1fr; } .trilha { position: sticky; top: calc(var(--faixa) + 100px); } }

/* 5. Diferenciais */
.diferenciais { background: var(--lilas-claro); }
.diferenciais .selo { background: var(--branco); }
.dif { max-width: var(--largura); margin: 0 auto; display: grid; gap: 28px; }
.dif li { display: grid; gap: 12px; align-content: start; }
.dif p { color: var(--noite-2); }
.dif-marca { position: relative; display: block; width: 64px; height: 44px; }
.dm-apoio { position: absolute; left: 24px; bottom: 0; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--coral); }
.dm-barra { position: absolute; left: 2px; right: 2px; bottom: 13px; height: 6px; border-radius: 6px; background: var(--noite); transform-origin: 32px 50%; transform: rotate(calc((var(--p, 0.5) - 0.5) * -34deg)); }
.dm-barra::after { content: ""; position: absolute; right: -2px; top: -12px; width: 14px; height: 14px; border-radius: 50%; background: var(--lilas-escuro); }
@media (min-width: 640px) { .dif { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .dif { grid-template-columns: repeat(4, 1fr); } }

/* 6. Estrutura */
.ambientes { max-width: var(--largura); margin: 0 auto; display: grid; gap: 14px; }
.ambientes li { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 20px; background: var(--branco); overflow: hidden; }
.ambientes p { color: var(--noite-2); }
.amb-icone { width: 72px; height: 72px; margin-bottom: 6px; transform: translateY(calc((0.5 - var(--p, 0.5)) * 28px)); }
.amb-icone :is(path, rect, circle) { fill: none; stroke: var(--lilas-escuro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .ambientes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ambientes { grid-template-columns: repeat(4, 1fr); } }

/* 7. Agenda */
.agenda { background: var(--branco); }
.agenda-form { position: relative; max-width: var(--largura); margin: 0 auto; display: grid; gap: 28px; padding: clamp(20px, 3vw, 40px); border-radius: 28px; background: var(--gelo); }
.agenda-passo { display: grid; gap: 12px; min-width: 0; }
.agenda-rotulo { font: 800 1.1rem var(--titulo); font-stretch: 110%; }
.agenda-dia-escolhido { font: 600 0.95rem var(--texto); color: var(--lilas-escuro); }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 2px; border: 1.5px solid var(--linha); border-radius: 14px; background: var(--branco); color: var(--noite); font: 600 0.72rem/1.1 var(--texto); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background-color 180ms, border-color 180ms, color 180ms, transform 180ms var(--curva); }
.dia strong { font: 800 1.3rem/1 var(--titulo); text-transform: none; letter-spacing: 0; }
.dia:hover:not(:disabled) { border-color: var(--noite-2); transform: translateY(-2px); }
.dia[aria-pressed="true"] { background: var(--noite); border-color: var(--noite); color: var(--branco); }
.dia:disabled { opacity: 0.45; cursor: not-allowed; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hora { min-height: 44px; border: 1.5px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--noite); font: 700 1rem var(--texto); cursor: pointer; transition: background-color 180ms, border-color 180ms, color 180ms; }
.js .hora { animation: entrar 420ms var(--curva) both; animation-delay: calc(var(--i) * 22ms); }
.hora:hover:not(:disabled) { border-color: var(--noite-2); }
.hora[aria-pressed="true"] { background: var(--coral-botao); border-color: var(--coral-botao); color: var(--branco); }
.hora:disabled { color: var(--noite-2); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
.campos { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-weight: 700; font-size: 0.9rem; }
.campo input, .campo select { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid rgba(22, 26, 61, 0.28); border-radius: 12px; background: var(--branco); color: var(--noite); font: 400 1rem var(--texto); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--lilas-escuro); outline-offset: 0; border-color: var(--lilas-escuro); }
.agenda-dados .botao { justify-self: start; }
.agenda-aviso { color: var(--coral-botao); font-weight: 700; }
.ticket { display: grid; gap: 8px; padding: 22px 24px; border-radius: 18px; background: var(--noite); color: var(--gelo); border-left: 10px solid var(--coral); animation: carimbar 600ms var(--curva) both; }
@keyframes carimbar { from { opacity: 0; transform: scale(0.94) rotate(-1.5deg); } }
.ticket-selo { font: 700 0.74rem var(--texto); text-transform: uppercase; letter-spacing: 0.12em; color: var(--lilas); }
.ticket-quando { font: 800 clamp(1.4rem, 3vw, 2rem)/1.1 var(--titulo); font-stretch: 110%; }
.ticket-nota { font-size: 0.85rem; color: rgba(243, 243, 249, 0.72); }
@media (min-width: 720px) { .campos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .agenda-form { grid-template-columns: 1.1fr 1fr; } .agenda-dados, .ticket { grid-column: 1 / -1; } }

/* 8. Unidades */
.lista-unidades { max-width: var(--largura); margin: 0 auto; display: grid; gap: 14px; }
.lista-unidades li { display: grid; gap: 10px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: var(--branco); border-top: 6px solid var(--lilas-escuro); }
.lista-unidades li:nth-child(2) { border-top-color: var(--coral); }
.lista-unidades address, .lista-unidades p { color: var(--noite-2); }
@media (min-width: 820px) { .lista-unidades { grid-template-columns: 1fr 1fr; } }

/* 9. Perguntas */
.perguntas { background: var(--branco); }
.faq { max-width: var(--largura); margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--gelo); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 20px; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--coral); border-bottom: 2.5px solid var(--coral); transform: rotate(45deg) translate(-3px, -3px); transition: transform 300ms var(--curva); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 20px 20px; color: var(--noite-2); max-width: 70ch; }

/* 10. Chamada */
.chamada { display: grid; justify-items: center; gap: 18px; text-align: center; background: var(--noite); color: var(--gelo); overflow: clip; }
.chamada h2 { max-width: 20ch; }
.chamada p { max-width: 48ch; color: rgba(243, 243, 249, 0.82); font-size: 1.1rem; }
.chamada-numero { font-size: 0.85rem; }
.chamada-alavanca { width: min(420px, 80vw); height: auto; }
.ch-barra { fill: var(--gelo); }
.ch-carga { fill: var(--lilas); }
.ch-apoio { fill: var(--coral); }
.ch-barra-g { transform-box: view-box; transform-origin: 200px 80px; transform: rotate(calc((0.5 - var(--p, 0.5)) * 22deg)); }

/* Rodapé */
.rodape { padding: clamp(56px, 7vw, 88px) var(--margem) 28px; background: #0F1230; color: rgba(243, 243, 249, 0.75); }
.rodape-colunas { max-width: var(--largura); margin: 0 auto; display: grid; gap: 32px; }
.rodape h3 { margin-bottom: 14px; font-size: 1rem; color: var(--gelo); }
.rodape ul { display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--gelo); }
.rodape-marca { display: grid; gap: 14px; align-content: start; }
.rodape .marca { color: var(--gelo); }
.rodape .a-barra { stroke: var(--gelo); }
.rodape .marca-sub { color: rgba(243, 243, 249, 0.7); }
.rodape-legal { max-width: var(--largura); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(243, 243, 249, 0.14); display: grid; gap: 6px; font-size: 0.78rem; }
@media (min-width: 760px) { .rodape-colunas { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .braco-movel, .gonio .percorrida, .gonio-meta, .gonio-meta-texto, .js .hora, .ticket, .mapa.em-cena .ponto.ativa .ponto-pulso { animation: none !important; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .js .mapa-corpo .ponto { opacity: 1; }
  .corpo, .calor, .regiao-ficha, .botao, .dia { transition: none; }
  .dm-barra, .amb-icone, .ch-barra-g { transform: none; }
}