/* INNC · Instituto de Neurologia, Neurofisiologia e Comportamento */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/inter-400-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/libre-baskerville-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter reserva A"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 105.95%; ascent-override: 91.43%; descent-override: 22.77%; line-gap-override: 0%; }
@font-face { font-family: "Inter reserva A"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.4%; ascent-override: 95.54%; descent-override: 23.79%; line-gap-override: 0%; }
@font-face { font-family: "Inter reserva R"; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 106.64%; ascent-override: 90.84%; descent-override: 22.62%; line-gap-override: 0%; }
@font-face { font-family: "Inter reserva R"; font-weight: 600; src: local("Roboto Medium"), local("Roboto-Medium"); size-adjust: 107.92%; ascent-override: 89.76%; descent-override: 22.35%; line-gap-override: 0%; }
@font-face { font-family: "Baskerville reserva G"; font-weight: 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 102.08%; ascent-override: 95.03%; descent-override: 26.45%; line-gap-override: 0%; }
@font-face { font-family: "Baskerville reserva N"; font-weight: 700; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); size-adjust: 103.6%; ascent-override: 93.63%; descent-override: 26.06%; line-gap-override: 0%; }

:root {
  --papel: #fbfaf6;
  --papel-2: #f3f4ec;
  --papel-3: #e9ece1;
  --oliva: #d9e0c1;
  --coral: #f4582e;
  --coral-forte: #bf3b15;
  --coral-escuro: #a8340f;
  --laranja: #fbb160;
  --cinza: #a5aead;
  --tinta: #1d2524;
  --tinta-2: #4a5352;
  --linha: #e2e5da;
  --verde: #2e7d4f;
  --raio: 12px;
  --topo-altura: 64px;
  --serif: "Libre Baskerville", "Baskerville reserva G", "Baskerville reserva N", Georgia, serif;
  --sans: "Inter", "Inter reserva A", "Inter reserva R", system-ui, sans-serif;
  --entra: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px); scroll-padding-bottom: 96px; scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 960px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; text-wrap: balance; color: var(--tinta); }
h3, h4 { font-weight: 600; line-height: 1.35; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--coral-forte); text-underline-offset: .2em; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--coral-escuro); }
button, summary, label { -webkit-tap-highlight-color: transparent; font: inherit; }
::selection { background: var(--laranja); color: var(--tinta); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--coral-forte); outline-offset: 2px; border-radius: 4px; }
.final :focus-visible, .rodape :focus-visible, .faixa-previa :focus-visible { outline-color: #fff; }
address { font-style: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--tinta); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 56px; color: #fff; }
.pular:focus-visible { outline-color: #fff; }

.dentro { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .dentro { padding: 0 40px; } }
@media (min-width: 1280px) { .dentro { padding: 0; } }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1.25; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao--coral { background: var(--coral-forte); color: #fff; }
.botao--coral:hover { background: var(--coral-escuro); color: #fff; }
.botao--linha { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: #fff; }
.botao--claro { background: var(--laranja); color: var(--tinta); }
.botao--claro:hover { background: #fff; color: var(--tinta); }
.botao--contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.botao--contorno-claro:hover { background: #fff; color: var(--tinta); }
.botao--pequeno { min-height: 44px; padding: 10px 16px; font-size: .9375rem; }

/* faixa do topo */
.faixa-previa { background: var(--tinta); color: #dfe3df; font-size: .8125rem; line-height: 1.3; text-align: center; padding: 8px 16px; letter-spacing: .01em; }

/* topo */
.topo { position: sticky; top: 0; z-index: 40; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo__dentro { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: var(--topo-altura); display: flex; align-items: center; gap: 16px; }
@media (min-width: 768px) { .topo__dentro { padding: 0 40px; } }
@media (min-width: 1280px) { .topo__dentro { padding: 0; } }
.topo__marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 6px; }
.logo { width: auto; height: 34px; overflow: visible; }
@media (min-width: 960px) { .logo { height: 38px; } }
.menu__lista { display: flex; gap: 2px; }
.menu__lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tinta); font-size: .9375rem; font-weight: 500; text-decoration: none; border-radius: 8px; }
.menu__lista a:hover { color: var(--coral-forte); }
.topo__zap { min-height: 44px; padding: 10px 16px; font-size: .9375rem; }
.topo__abrir { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--tinta); cursor: pointer; }
.topo__abrir svg { width: 26px; height: 26px; }
@media (max-width: 1099px) {
  .topo__zap { display: none; }
  .topo__abrir { display: inline-flex; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--linha); box-shadow: 0 18px 30px -24px rgba(29, 37, 36, .45); display: none; }
  .menu.aberto { display: block; }
  .menu__lista { flex-direction: column; padding: 8px 20px 16px; max-width: 1200px; margin: 0 auto; }
  .menu__lista a { width: 100%; min-height: 48px; padding: 0 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--linha); border-radius: 0; }
  .menu__lista li:last-child a { border-bottom: 0; }
}
@media (min-width: 1100px) { .menu { display: block !important; } .menu__so-celular { display: none; } }

/* capa */
.capa { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 30%, rgba(217, 224, 193, .45), rgba(217, 224, 193, 0) 70%), var(--papel); }
.capa__dentro { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .capa__dentro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.capa__texto { display: flex; flex-direction: column; }
.capa__onde { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.capa h1 { margin-top: 14px; font-size: clamp(2.05rem, 1.2rem + 3.4vw, 3.2rem); line-height: 1.13; }
.capa__lead { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--tinta-2); max-width: 36em; }
.selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.selos li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 10px; border: 1px solid var(--oliva); border-radius: 999px; background: #fff; font-size: .9375rem; color: var(--tinta); }
.selos svg { width: 18px; height: 18px; flex: none; }
.capa__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.capa__arte { display: grid; gap: 16px; }
.eeg { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; }
.eeg__svg { width: 100%; height: auto; aspect-ratio: 640 / 380; }
.eeg__papel path { fill: none; stroke: #eceee6; stroke-width: 1; }
.eeg__linha { fill: none; stroke: var(--tinta-2); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.eeg__linha--4 { stroke: var(--tinta); }
.eeg__rotulo { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: var(--tinta-2); }
.eeg__escala { font-family: var(--sans); font-size: 11px; fill: var(--tinta-2); text-anchor: end; }
.eeg__escala-traco { fill: none; stroke: var(--tinta-2); stroke-width: 1.4; }
.eeg__brilho { fill: url(#eeg-brilho); }
@media (max-width: 599px) { .eeg__rotulo, .eeg__escala, .eeg__escala-traco { display: none; } }
.placa { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.placa p { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.45; }
.placa svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--coral-forte); }
.placa a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--tinta); font-weight: 600; }
.placa__agora, .marcar__agora { align-items: center !important; font-weight: 600; }
.placa__ponto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--cinza); margin: 0 5px; }
[data-agora].aberto .placa__ponto { background: var(--verde); box-shadow: 0 0 0 4px rgba(46, 125, 79, .16); }
[data-agora].fechado .placa__ponto { background: var(--coral-forte); }
@media (orientation: landscape) and (max-height: 480px) {
  :root { --topo-altura: 56px; }
  .capa { padding-top: 14px; }
  .capa__dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; }
  .capa h1 { margin-top: 6px; font-size: 1.6rem; line-height: 1.15; }
  .capa__botoes { order: 3; margin-top: 14px; }
  .capa__lead { order: 4; margin-top: 14px; font-size: 1rem; }
  .selos { order: 5; margin-top: 14px; }
  .capa__botoes .botao { min-height: 44px; padding: 10px 16px; }
}

/* seções */
.instituto, .tratamos, .exames, .medicos, .marcar, .perguntas, .onde { padding: clamp(64px, 9vw, 120px) 0; }
.instituto { background: #fff; }
.tratamos { background: var(--papel-2); }
.exames { background: var(--papel); }
.medicos { background: #fff; }
.marcar { background: var(--papel-2); }
.perguntas { background: var(--papel); }
.onde { background: #fff; }
section h2 { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.2; }
.nq { white-space: nowrap; }

.foto { margin: 0; }
.foto__caixa { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--media, var(--papel-3)); aspect-ratio: 4 / 3; }
.foto__caixa img { width: 100%; height: 100%; object-fit: cover; }
.foto__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 6px; background: rgba(29, 37, 36, .8); color: #fff; font-size: .75rem; line-height: 1.3; letter-spacing: .01em; }

.instituto__dentro { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .instituto__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; } }
.instituto__texto { display: grid; gap: 18px; max-width: 38em; }
.instituto__texto h2 { margin-bottom: 6px; }
.instituto__texto p { color: var(--tinta-2); }
.instituto__texto p:first-of-type { color: var(--tinta); font-size: 1.125em; }

.tratamos__dentro { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .tratamos__dentro { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .tratamos__lado { position: sticky; top: calc(var(--topo-altura) + 32px); }
}
.tratamos__intro { margin-top: 16px; color: var(--tinta-2); }
.tratamos__foto { margin-top: 28px; }
.casos { display: grid; }
.caso { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid var(--linha); }
.caso:last-child { border-bottom: 1px solid var(--linha); }
.caso h3 { font-family: var(--serif); font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.caso p { margin-top: 8px; color: var(--tinta-2); }
.caso .caso__alerta { margin-top: 6px; color: var(--tinta); font-weight: 600; font-size: .9375rem; }
@media (min-width: 960px) { .caso { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 28px 0; } .caso h3 { font-size: 1.3125rem; } }
.desenho { width: 56px; height: 56px; overflow: visible; }
@media (min-width: 960px) { .desenho { width: 64px; height: 64px; } }
.desenho path { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.desenho .d-tracar--cor { stroke: var(--coral); stroke-width: 2.2; }

.exames__topo { display: grid; gap: 32px; align-items: end; }
@media (min-width: 960px) { .exames__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; } }
.exames__intro { margin-top: 16px; color: var(--tinta-2); max-width: 34em; }
.exames__grupos { display: grid; gap: 40px; margin-top: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) { .exames__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.grupo__titulo { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); padding-bottom: 12px; border-bottom: 2px solid var(--tinta); }
.lista-exames { display: grid; }
.item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.item h4 { font-size: 1.125rem; }
.item p { margin-top: 6px; color: var(--tinta-2); }
.item__acoes { display: flex; flex-wrap: wrap; gap: 0 22px; }
.item__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-weight: 600; text-decoration: none; }
.item__link svg { width: 18px; height: 18px; transition: transform .2s; }
.item__link:hover svg { transform: translateX(3px); }

.medicos__dentro { display: grid; gap: 40px; }
@media (min-width: 960px) { .medicos__dentro { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 64px; align-items: start; } }
.medicos__lado > p { margin-top: 16px; color: var(--tinta-2); }
.medicos__foto { margin-top: 28px; }
.equipe { display: grid; gap: 16px; }
.medico { padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.medico h3 { font-family: var(--serif); font-weight: 700; font-size: 1.3125rem; line-height: 1.3; }
.medico__registro { margin-top: 6px; font-size: .9375rem; color: var(--tinta-2); }
.medico__regua { display: block; width: 56px; height: 3px; margin: 16px 0; border-radius: 2px; background: linear-gradient(90deg, var(--coral) 0 34%, var(--laranja) 34% 68%, var(--oliva) 68%); }
.medico p:not(.medico__registro) { color: var(--tinta-2); }
.medico .botao { margin-top: 16px; }

.marcar__dentro { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .marcar__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "texto texto" "ficha lado"; gap: 40px 64px; align-items: start; }
  .marcar__texto { grid-area: texto; }
  .ficha { grid-area: ficha; }
  .marcar__lado { grid-area: lado; position: sticky; top: calc(var(--topo-altura) + 32px); }
}
.marcar__texto { max-width: 40em; }
.marcar__texto p { margin-top: 16px; color: var(--tinta-2); }
.ficha { position: relative; display: grid; gap: 18px; padding: 22px 18px 0; border-radius: 16px; background: #fff; border: 1px solid var(--linha); }
@media (min-width: 600px) { .ficha { padding: 28px 28px 0; } }
.ficha__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.ficha__grupo[hidden] { display: none; }
.ficha legend, .campo label { display: block; margin-bottom: 10px; padding: 0; font-weight: 600; font-size: 1rem; }
.campo__dica { font-weight: 400; color: var(--tinta-2); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { position: relative; display: inline-flex; }
.opcoes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.opcoes label { cursor: pointer; }
.opcoes span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1.5px solid #c9cfc2; border-radius: 999px; background: #fff; font-size: .9688rem; line-height: 1.3; color: var(--tinta); transition: background-color .15s, border-color .15s, color .15s; }
.opcoes input:hover + span { border-color: var(--tinta); }
.opcoes input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.opcoes input:focus-visible + span { outline: 2px solid var(--coral-forte); outline-offset: 2px; }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #c9cfc2; border-radius: 10px; background: #fff; color: var(--tinta); font: inherit; font-size: 1rem; line-height: 1.4; }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--coral-forte); outline-offset: 1px; border-color: var(--coral-forte); }
.ficha__privacidade { font-size: .875rem; line-height: 1.5; color: var(--tinta-2); margin-top: -8px; }
.ficha__envio { position: sticky; bottom: 0; display: grid; gap: 14px; margin: 0 -18px; padding: 16px 18px 18px; background: #fff; border-top: 1px solid var(--linha); border-radius: 0 0 16px 16px; }
@media (min-width: 600px) { .ficha__envio { margin: 0 -28px; padding: 18px 28px 24px; } }
.balao { position: relative; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #e7f3df; color: var(--tinta); font-size: .9688rem; line-height: 1.5; }
.balao.muda { animation: balao .35s var(--entra); }
@keyframes balao { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ficha__botao { width: 100%; }
.marcar__lado { display: grid; gap: 18px; }
.marcar__fone { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.marcar__fone p { font-size: 1rem; line-height: 1.6; }
.marcar__fone .marcar__agora { display: flex; align-items: center; gap: 10px; }
.marcar__fone a { font-weight: 600; }

.perguntas__dentro { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .perguntas__dentro { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .perguntas__lado { position: sticky; top: calc(var(--topo-altura) + 32px); }
}
.perguntas__foto { margin-top: 28px; }
.faq { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--coral-forte); transition: transform .25s var(--entra); }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq summary:hover span { color: var(--coral-forte); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { padding: 0 40px 20px 0; color: var(--tinta-2); }
.faq details[open] p { animation: abre .3s var(--entra); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.onde__dentro { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .onde__dentro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.onde__texto { display: grid; gap: 16px; }
.onde__texto > p:first-of-type { color: var(--tinta-2); }
.onde__endereco, .onde__linha { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.onde__endereco svg, .onde__linha svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--coral-forte); }
.onde__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mapa { margin: 0; }
.mapa__svg { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid var(--linha); background: #f2f1ea; }
.mapa__fundo { fill: #f2f1ea; }
.mapa__agua { fill: none; stroke: #bcd3dc; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mapa__servico { fill: none; stroke: #e4e6dc; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mapa__rua { fill: none; stroke: #dde1d4; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.mapa__principal { fill: none; stroke: #cdd3c6; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.mapa__avenida { fill: none; stroke: var(--cinza); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.mapa__destaque { fill: none; stroke: var(--coral); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.mapa__rotulo { font-family: var(--sans); font-size: 16px; font-weight: 600; fill: var(--tinta-2); paint-order: stroke; stroke: #f2f1ea; stroke-width: 5px; stroke-linejoin: round; }
.mapa__rotulo--destaque { fill: var(--coral-forte); }
.mapa__rotulo--agua { font-size: 13px; font-weight: 500; fill: #3d6a7a; }
.mapa__halo { fill: rgba(244, 88, 46, .12); }
.mapa__base { fill: #fff; stroke: var(--linha); stroke-width: 1; }
.mapa__etiqueta rect { fill: var(--tinta); }
.mapa__etiqueta text { font-family: var(--sans); font-size: 18px; font-weight: 700; fill: #fff; }
.mapa__etiqueta .mapa__etiqueta-sub { font-size: 15px; font-weight: 500; fill: #dfe3df; }
@media (max-width: 599px) { .mapa__svg { aspect-ratio: 440 / 490; } }
.mapa figcaption { margin-top: 8px; font-size: .8125rem; color: var(--tinta-2); }
.mapa figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-2); }

.final { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 128px) 0; background: var(--tinta); color: #fff; }
.final__dentro { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .final__dentro { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; } }
.final__estrela { width: min(300px, 62vw); height: auto; overflow: visible; }
.final h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); line-height: 1.18; }
.final p { margin-top: 16px; color: #dfe3df; font-size: 1.125rem; }
.final__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.rodape { background: #161c1b; color: #c9d0c8; font-size: .9688rem; line-height: 1.55; }
.rodape__dentro { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 900px) { .rodape__dentro { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } }
.rodape__logo { width: auto; height: 36px; overflow: visible; }
.rodape__logo .palavra { fill: #c9d0c8; }
.rodape__marca p { margin-top: 14px; max-width: 18em; }
.rodape__titulo { margin-bottom: 8px; color: #fff; font-weight: 600; }
.rodape__col p + p { margin-top: 10px; }
.rodape__links li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--laranja); text-decoration: none; }
.rodape__links li a:hover { color: #fff; text-decoration: underline; }
.rodape__links + p { margin-top: 6px; }
.rodape__base { display: grid; gap: 8px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; }
.rodape__credito a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #c9d0c8; text-decoration: none; }
.rodape__credito a:hover { color: #fff; }
.rodape__credito svg { flex: none; }

.zap-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--coral-forte); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(29, 37, 36, .55); transition: opacity .25s, transform .25s, visibility .25s; }
.zap-flutuante svg { width: 24px; height: 24px; }
.zap-flutuante:hover { background: var(--coral-escuro); color: #fff; }
html.sem-flutuante .zap-flutuante { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
@media (max-height: 480px) and (orientation: landscape) { .zap-flutuante span { display: none; } .zap-flutuante { padding: 0; width: 50px; min-height: 50px; justify-content: center; } }

/* aviso */
.aviso { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 12px; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45); }
.aviso::backdrop { background: rgba(22, 28, 27, .62); }
.aviso__caixa { display: grid; gap: 14px; padding: 28px 26px 24px; }
.aviso__marca { width: 44px; height: 44px; }
.aviso h2 { font-size: 1.5rem; line-height: 1.2; }
.aviso p { color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.55; }
.aviso__botao { width: 100%; margin-top: 6px; }
.aviso__botao:focus-visible { outline: 2px solid var(--coral-forte); outline-offset: 3px; }
@media (max-height: 480px) and (orientation: landscape) {
  .aviso__caixa { padding: 16px 20px 14px; gap: 8px; }
  .aviso__marca { display: none; }
  .aviso h2 { font-size: 1.25rem; }
  .aviso p { font-size: 1rem; line-height: 1.45; }
}

/* animações (com movimento liberado) */
@media (prefers-reduced-motion: no-preference) {
  .aviso[open] { animation: aviso-entra .22s ease-out; }
  .aviso[open]::backdrop { animation: aviso-fundo .22s ease-out; }
  @keyframes aviso-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes aviso-fundo { from { opacity: 0; } to { opacity: 1; } }

  /* logo do topo: os raios abrem a partir do centro */
  .logo .raio, .eeg__estrela .raio, .final__estrela .raio, .mapa__pino .raio { transform-box: view-box; transform-origin: 0 0; }
  .logo .raio { animation: raio .55s cubic-bezier(.2, .9, .3, 1.2) both; }
  .logo .raio--1 { animation-delay: .05s; } .logo .raio--2 { animation-delay: .1s; } .logo .raio--3 { animation-delay: .15s; } .logo .raio--4 { animation-delay: .2s; } .logo .raio--5 { animation-delay: .25s; }
  .logo .raio--6 { animation-delay: .3s; } .logo .raio--7 { animation-delay: .35s; } .logo .raio--8 { animation-delay: .4s; } .logo .raio--9 { animation-delay: .45s; } .logo .raio--10 { animation-delay: .5s; }
  .logo .palavra { animation: palavra .7s var(--entra) .35s both; }
  @keyframes raio { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
  @keyframes palavra { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

  /* capa: o traçado do EEG corre e acende a estrela */
  .eeg__linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 1.6s cubic-bezier(.45, 0, .2, 1) forwards; }
  .eeg__linha--1 { animation-delay: .1s; } .eeg__linha--2 { animation-delay: .2s; } .eeg__linha--3 { animation-delay: .3s; } .eeg__linha--4 { animation-delay: .4s; } .eeg__linha--5 { animation-delay: .5s; }
  .eeg__estrela .raio { animation: raio .6s cubic-bezier(.2, .9, .3, 1.25) both; }
  .eeg__estrela .raio--1 { animation-delay: 1.75s; } .eeg__estrela .raio--2 { animation-delay: 1.79s; } .eeg__estrela .raio--3 { animation-delay: 1.83s; } .eeg__estrela .raio--4 { animation-delay: 1.87s; } .eeg__estrela .raio--5 { animation-delay: 1.91s; }
  .eeg__estrela .raio--6 { animation-delay: 1.95s; } .eeg__estrela .raio--7 { animation-delay: 1.99s; } .eeg__estrela .raio--8 { animation-delay: 2.03s; } .eeg__estrela .raio--9 { animation-delay: 2.07s; } .eeg__estrela .raio--10 { animation-delay: 2.11s; }
  .eeg__brilho { animation: brilho 1.4s ease-out 1.7s both; }
  @keyframes tracar { to { stroke-dashoffset: 0; } }
  @keyframes brilho { from { opacity: 0; transform: scale(.6); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
  .eeg__brilho { transform-box: fill-box; transform-origin: center; }

  /* o traçado da capa começa quando o cartão entra na tela */
  html.revela .eeg:not(.visto) .eeg__linha, html.revela .eeg:not(.visto) .eeg__estrela .raio, html.revela .eeg:not(.visto) .eeg__brilho { animation-play-state: paused; }

  /* a capa espera o aviso fechar */
  html.aviso-aberto .logo .raio, html.aviso-aberto .logo .palavra, html.aviso-aberto .eeg__linha, html.aviso-aberto .eeg__estrela .raio, html.aviso-aberto .eeg__brilho { animation-play-state: paused; }

  /* entradas ao rolar (só quando o site.js está ativo) */
  html.revela [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--entra), transform .7s var(--entra); }
  html.revela [data-revelar].visto { opacity: 1; transform: none; }
  html.revela .d-tracar { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.revela .visto .d-tracar { animation: tracar 1.2s cubic-bezier(.45, 0, .2, 1) .15s forwards; }
  html.revela .visto .d-tracar--cor { animation-delay: .55s; }
  html.revela .medico__regua { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--entra) .25s; }
  html.revela .medico.visto .medico__regua { transform: none; }
  html.revela .mapa__tracar { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.revela .mapa.visto .mapa__tracar { animation: tracar 1.6s cubic-bezier(.45, 0, .2, 1) .3s forwards; }
  html.revela .mapa__pino .raio, html.revela .final__estrela .raio { transform: scale(0); }
  html.revela .mapa.visto .mapa__pino .raio { animation: raio .5s cubic-bezier(.2, .9, .3, 1.25) 1.6s both; }
  html.revela .mapa__halo { transform-box: fill-box; transform-origin: center; transform: scale(0); }
  html.revela .mapa.visto .mapa__halo { animation: halo 1.2s var(--entra) 1.7s forwards; }
  html.revela .mapa__etiqueta { opacity: 0; transition: opacity .6s ease 1.9s; }
  html.revela .mapa.visto .mapa__etiqueta { opacity: 1; }
  @keyframes halo { to { transform: scale(1); } }
  html.revela .final.visto .final__estrela .raio { animation: raio .7s cubic-bezier(.2, .9, .3, 1.2) both; }
  html.revela .final.visto .final__estrela .raio--2 { animation-delay: .05s; } html.revela .final.visto .final__estrela .raio--3 { animation-delay: .1s; } html.revela .final.visto .final__estrela .raio--4 { animation-delay: .15s; } html.revela .final.visto .final__estrela .raio--5 { animation-delay: .2s; }
  html.revela .final.visto .final__estrela .raio--6 { animation-delay: .25s; } html.revela .final.visto .final__estrela .raio--7 { animation-delay: .3s; } html.revela .final.visto .final__estrela .raio--8 { animation-delay: .35s; } html.revela .final.visto .final__estrela .raio--9 { animation-delay: .4s; } html.revela .final.visto .final__estrela .raio--10 { animation-delay: .45s; }
}