/* Instituto do Joelho Cachoeiro, prévia da Capixel (05/11/2026). Código próprio, sem modelo.
   Barlow 400 e 600 (OFL) com preload; reservas Arial (computador e iPhone) e Roboto (Android) com as medidas da Barlow.
   Ideia: o joelho medido em graus, como no exame do ortopedista. O anel do logo marca a articulação e o arco verde mede a flexão. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/barlow-400.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: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/barlow-600.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: "Barlow reserva A"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 95.92%; ascent-override: 104.25%; descent-override: 20.85%; line-gap-override: 0%; }
@font-face { font-family: "Barlow reserva A"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 91.19%; ascent-override: 109.66%; descent-override: 21.93%; line-gap-override: 0%; }
@font-face { font-family: "Barlow reserva R"; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 96.5%; ascent-override: 103.62%; descent-override: 20.72%; line-gap-override: 0%; }
@font-face { font-family: "Barlow reserva R"; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 96.87%; ascent-override: 103.23%; descent-override: 20.65%; line-gap-override: 0%; }

:root {
  --grafite: #2f3337;
  --grafite-2: #555b61;
  --anel: #8b8f93;
  --folha: #6db04f;
  --folha-traco: #4e9a47;
  --folha-clara: #ebf5e5;
  --verde: #2d6a3c;
  --verde-escuro: #23542f;
  --papel: #ffffff;
  --nevoa: #f2f5f3;
  --nevoa-2: #e5eae7;
  --linha: #d6ddd8;
  --noite: #23282b;
  --noite-2: #1b1f21;
  --largura: 1160px;
  --margem: clamp(20px, 4vw, 40px);
  --topo-altura: 68px;
  --fonte: "Barlow", "Barlow reserva A", "Barlow reserva R", Arial, sans-serif;
  --curva: cubic-bezier(.2, .7, .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 { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
body {
  margin: 0; background: var(--papel); color: var(--grafite);
  font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; } }
img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ol, ul, address, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--verde); text-underline-offset: .2em; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--verde-escuro); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, label { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
::selection { background: #d5ebc9; color: var(--grafite); }
input { caret-color: var(--verde); accent-color: var(--verde); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--noite); color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; color: #fff; }
.pular:focus-visible { outline-color: #fff; }
.sem-quebra { white-space: nowrap; }
.final :focus-visible, .rodape :focus-visible { outline-color: #fff; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.65rem); line-height: 1.1; letter-spacing: -.012em; }
h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.004em; }
p { text-wrap: pretty; }
.intro { font-size: 1.0625em; color: var(--grafite-2); max-width: 36em; margin-top: 14px; }
.dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-left: var(--margem); padding-right: var(--margem); }

/* ---------- botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 24px; border-radius: 6px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--verde { background: var(--verde); color: #fff; }
.botao--verde:hover { background: var(--verde-escuro); color: #fff; }
.botao--linha { border-color: var(--verde); color: var(--verde); background: transparent; }
.botao--linha:hover { background: var(--folha-clara); color: var(--verde-escuro); }
.botao--claro { background: #fff; color: var(--verde); }
.botao--claro:hover { background: var(--folha-clara); color: var(--verde-escuro); }
.botao--linha-claro { border-color: rgba(255, 255, 255, .72); color: #fff; }
.botao--linha-claro:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- faixa da prévia e topo ---------- */
.faixa-previa { background: var(--noite-2); color: #d9dde0; font-size: .8125rem; line-height: 1.3; text-align: center; padding: 8px 16px; letter-spacing: .01em; }

.topo { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.topo.rolou { border-color: var(--linha); box-shadow: 0 8px 24px -20px rgba(34, 38, 41, .55); }
.topo__dentro { position: relative; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); height: var(--topo-altura); display: flex; align-items: center; gap: 18px; }
.topo__marca { display: flex; align-items: center; gap: 9px; margin-right: auto; min-height: 48px; color: #3a3d40; text-decoration: none; }
.topo__marca:hover { color: #3a3d40; }
.topo__simbolo { width: 44px; height: 44px; flex: none; }
.logo-texto { display: grid; line-height: 1; text-transform: uppercase; }
.logo-texto__a { font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.logo-texto__b { font-size: 1.4375rem; font-weight: 600; letter-spacing: .03em; margin-top: 1px; }
.logo-texto__c { font-size: .625rem; font-weight: 600; letter-spacing: .1em; margin-top: 3px; color: #5d6166; }
.topo__nav { display: none; gap: 2px; }
.topo__nav a { color: var(--grafite); text-decoration: none; font-size: 1rem; font-weight: 600; padding: 10px 12px; border-radius: 6px; transition: background-color .2s, color .2s; }
.topo__nav a:hover { background: var(--nevoa); color: var(--verde-escuro); }
.topo__zap { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 6px; background: var(--verde); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color .2s; }
.topo__zap:hover { background: var(--verde-escuro); color: #fff; }
.topo__zap svg { width: 20px; height: 20px; }
@media (max-width: 459px) { .topo__zap span { display: none; } .topo__zap { width: 46px; padding: 0; justify-content: center; } }
.topo__menu { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--linha); border-radius: 6px; background: var(--papel); color: var(--grafite); cursor: pointer; }
.topo__menu svg { width: 24px; height: 24px; }
.topo__menu:hover { border-color: var(--verde); color: var(--verde); }
.topo__menu-fechar, .topo.menu-aberto .topo__menu-abrir { display: none; }
.topo.menu-aberto .topo__menu-fechar { display: block; }
@media (max-width: 1079px) {
  .topo__dentro { gap: 10px; }
  .topo__nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px var(--margem) 14px; background: var(--papel); border-bottom: 1px solid var(--linha); box-shadow: 0 18px 30px -24px rgba(34, 38, 41, .5); }
  .topo.menu-aberto .topo__nav { display: flex; }
  .topo__nav a { display: flex; align-items: center; min-height: 52px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--nevoa-2); font-size: 1.125rem; }
  .topo__nav a:last-child { border-bottom: 0; }
  .topo__nav a:hover { background: transparent; color: var(--verde); }
}
@media (min-width: 1080px) { .topo__nav { display: flex; } .topo__menu { display: none; } }
@media (max-width: 380px) { .topo__simbolo { width: 38px; height: 38px; } .logo-texto__b { font-size: 1.25rem; } }

/* ---------- capa ---------- */
.capa { background: var(--papel); }
.capa__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 36px var(--margem) 56px; display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .capa__dentro { grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; padding-top: 64px; padding-bottom: 80px; } }
@media (min-width: 1200px) { .capa__dentro { grid-template-columns: minmax(0, 1fr) 480px; gap: 88px; } }
.capa__onde { font-size: 1rem; font-weight: 600; color: var(--verde); margin-bottom: 14px; max-width: 46em; }
.capa h1 { font-size: clamp(2.05rem, 1.3rem + 3vw, 3.55rem); line-height: 1.06; letter-spacing: -.016em; max-width: 15em; }
.capa__lead { margin-top: 20px; font-size: 1.125rem; color: var(--grafite-2); max-width: 33em; }
@media (min-width: 1024px) { .capa__lead { font-size: 1.25rem; } }
.capa__hora { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 24px; font-size: 1rem; color: var(--grafite-2); }

.status { display: inline-flex; align-items: center; gap: 8px; min-width: 8.6em; font-weight: 600; color: var(--grafite-2); }
.status:not(.pronto) { visibility: hidden; }
.status__ponto { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; flex: none; }
.status.aberto { color: #1d6b3c; }
.status.aberto .status__ponto { background: #1f8a4c; }

/* foto da capa com a medida do joelho por cima */
.capa__foto { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #b9b6b0 url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAACwBQCdASoYAB4APu1qq08ppiQiMBgIATAdiWUAvKQLWk6+INth5IGv8yceAaTG8rdylTvf5wAA/gaj49AKVPmEIyq+g63O3QOZChx9WN4q9Y27HRHJlHBARsbIo1cJ1JppKVOkLUEUQoFdvHrEibCfUEc41B6AsUV9mTaUU7QRcG3Uy1EmCS7HQUAAAA==") center / cover no-repeat; }
.capa__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) { .capa__foto { max-width: none; } }
@media (max-width: 959px) { .capa__foto { justify-self: center; } }
.medida__desenho { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.medida__halo path { fill: none; stroke: rgba(16, 20, 22, .4); stroke-width: 10; stroke-linecap: round; }
.medida__halo .m-ext { stroke-width: 7; }
.medida__halo .m-arco { stroke-width: 15; }
.medida__traco path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
.medida__traco .m-ext { stroke: rgba(255, 255, 255, .9); stroke-width: 2.6; }
.medida__traco .m-arco { stroke: #93d36f; stroke-width: 8; }
.medida__traco .m-marcas { stroke-width: 2.6; }
.medida__traco .m-centro { fill: #fff; stroke: none; }
.legenda { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--grafite); font-size: .8125rem; line-height: 1.3; }

/* ---------- o que tratamos ---------- */
.tratamentos { background: var(--nevoa); padding: 72px 0 80px; }
@media (min-width: 960px) { .tratamentos { padding: 100px 0 104px; } }
.cabeca { max-width: 46em; }
.foto-faixa { position: relative; margin-top: 36px; margin-bottom: 8px; }
.foto-faixa img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 6px; background: var(--nevoa-2); }
@media (max-width: 640px) { .foto-faixa img { aspect-ratio: 4 / 3; } }
.foto-faixa .legenda { left: calc(var(--margem) + 12px); }
.casos { display: grid; margin-top: 28px; border-top: 1px solid var(--linha); }
@media (min-width: 860px) { .casos { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.caso { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--linha); align-content: start; }
@media (min-width: 1024px) { .caso { grid-template-columns: 88px minmax(0, 1fr); column-gap: 26px; } }
.caso__desenho { grid-row: 1 / span 2; width: 68px; height: 68px; }
@media (min-width: 1024px) { .caso__desenho { width: 88px; height: 88px; } }
.caso__desenho path { fill: none; stroke: var(--grafite-2); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.caso__desenho .d-verde { stroke: var(--folha-traco); stroke-width: 3.4; }
.caso h3 { align-self: end; }
.caso p { color: var(--grafite-2); }
.tratamentos__fim { margin-top: 32px; }
@media (max-width: 639px) {
  .caso { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 24px 0; }
  .caso__desenho { grid-row: 1; width: 48px; height: 48px; }
  .caso h3 { align-self: center; }
  .caso p { grid-column: 1 / -1; }
}

/* ---------- médicos ---------- */
.medicos { padding: 76px 0 84px; }
@media (min-width: 960px) { .medicos { padding: 104px 0 108px; } }
.medicos__dentro { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .medicos__dentro { grid-template-columns: minmax(0, 1fr) 414px; gap: 72px; } }
.nomes { display: grid; gap: 26px; margin-top: 30px; }
@media (min-width: 640px) and (max-width: 959px) { .nomes { grid-template-columns: 1fr 1fr; gap: 32px; } }
.nomes li { position: relative; padding-top: 18px; }
.nomes li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; max-width: 360px; height: 7px;
  background: linear-gradient(var(--anel), var(--anel)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--anel) 0 1px, transparent 1px 14px) left bottom / 100% 7px no-repeat;
  transform-origin: left center;
}
.nomes li::after { content: ""; position: absolute; left: 0; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--folha); }
.nomes p { margin-top: 6px; color: var(--grafite-2); max-width: 30em; }
.medicos__foto { justify-self: start; width: 100%; max-width: 276px; }
@media (min-width: 960px) { .medicos__foto { max-width: 414px; justify-self: end; margin-top: 8px; } }
.medicos__botoes { margin-top: 30px; }
.medicos__foto img { width: 100%; height: auto; aspect-ratio: 828 / 466; border-radius: 6px; background: var(--nevoa-2); }
.medicos__foto figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--grafite-2); }

/* ---------- como agendar ---------- */
.agendar { background: var(--nevoa); padding: 76px 0 84px; }
@media (min-width: 960px) { .agendar { padding: 104px 0 108px; } }
.agendar__dentro { display: grid; gap: 44px; align-items: start; }
@media (min-width: 960px) { .agendar__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; } }
.passos { counter-reset: passo; display: grid; gap: 18px; margin-top: 28px; max-width: 34em; }
.passos li { counter-increment: passo; position: relative; padding-left: 52px; min-height: 36px; padding-top: 4px; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--folha); color: var(--verde); font-weight: 600; font-size: 1rem; background: var(--papel);
}
.convenio { margin-top: 30px; padding: 18px 20px 18px 18px; border: 1px solid var(--linha); background: var(--papel); border-radius: 8px; max-width: 34em; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.convenio__cartao { grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: 2px; }
.convenio__cartao rect, .convenio__cartao path { fill: none; stroke: var(--grafite-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.convenio__cartao .d-verde { stroke: var(--folha-traco); stroke-width: 3; }
.convenio h3 { font-size: 1.1875rem; }
.convenio p { margin-top: 4px; color: var(--grafite-2); }
.agendar__foto { position: relative; margin-top: 32px; max-width: 380px; }
.agendar__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--nevoa-2); }
@media (max-width: 959px) { .agendar__foto { max-width: 520px; } .agendar__foto img { aspect-ratio: 4 / 3; } }

.ficha { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 26px 22px 24px; display: grid; gap: 20px; box-shadow: 0 30px 50px -44px rgba(34, 38, 41, .45); }
@media (min-width: 600px) { .ficha { padding: 32px 30px 28px; } }
.ficha__titulo { font-size: 1.375rem; }
.ficha__intro { margin-top: -12px; color: var(--grafite-2); }
.campo { display: grid; gap: 8px; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: 1rem; padding: 0; }
.campo input[type="text"] { width: 100%; min-height: 50px; padding: 10px 14px; font-size: 1.0625rem; border: 1.5px solid #b9c2bc; border-radius: 6px; background: #fff; }
.campo input[type="text"]:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.campo input[aria-invalid="true"] { border-color: #b3261e; }
.campo__erro { color: #b3261e; font-size: .9375rem; }
.campo--escolha legend { margin-bottom: 8px; }
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas label { position: relative; display: inline-flex; cursor: pointer; }
.escolhas input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.escolhas span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid #b9c2bc; border-radius: 999px; font-size: 1rem; line-height: 1.2; background: #fff; transition: background-color .15s, border-color .15s, color .15s; }
.escolhas label:hover span { border-color: var(--verde); }
.escolhas input:checked + span { background: var(--folha-clara); border-color: var(--verde); color: var(--verde-escuro); font-weight: 600; }
.escolhas input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.ficha__previa { display: grid; gap: 8px; }
.ficha__previa-rotulo { font-weight: 600; font-size: 1rem; }
.balao { position: relative; padding: 12px 16px; border-radius: 12px 12px 12px 4px; background: #e3f3d8; color: #1e2a20; font-size: 1rem; line-height: 1.5; min-height: calc(5 * 1.5em + 24px); }
.ficha__botao { width: 100%; }
.ficha__nota { font-size: .9375rem; color: var(--grafite-2); }
@media (max-width: 480px) { .balao { min-height: calc(7 * 1.5em + 24px); } }
@media (max-width: 370px) { .balao { min-height: calc(8 * 1.5em + 24px); } }
@media (max-width: 340px) { .balao { min-height: calc(9 * 1.5em + 24px); } }

/* ---------- perguntas ---------- */
.perguntas { padding: 76px 0 84px; }
@media (min-width: 960px) { .perguntas { padding: 104px 0 108px; } }
.perguntas__dentro { display: grid; gap: 36px; }
@media (min-width: 960px) { .perguntas__dentro { grid-template-columns: 400px minmax(0, 1fr); gap: 72px; align-items: start; } .perguntas__lado { position: sticky; top: calc(var(--topo-altura) + 32px); } }
.perguntas__foto { position: relative; margin-top: 28px; overflow: hidden; border-radius: 6px; }
.perguntas__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--nevoa-2); }
.perguntas__luz { position: absolute; left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(180deg, rgba(147, 211, 111, 0), rgba(147, 211, 111, .32) 50%, rgba(147, 211, 111, 0)); transform: translateY(-110%); pointer-events: none; }
.faq { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--verde); transition: transform .25s var(--curva); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq summary:hover { color: var(--verde-escuro); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { padding: 0 36px 20px 0; color: var(--grafite-2); max-width: 40em; }

/* ---------- onde fica ---------- */
.onde { background: var(--nevoa); padding: 76px 0 84px; }
@media (min-width: 960px) { .onde { padding: 104px 0 108px; } }
.onde__dentro { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .onde__dentro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.onde__pino { display: inline-block; width: .82em; height: .82em; margin-right: .22em; vertical-align: -.06em; color: var(--verde); }
.onde__endereco { margin-top: 18px; font-size: 1.125rem; line-height: 1.55; }
.onde__lista { display: grid; gap: 16px; margin-top: 26px; }
.onde__lista div { display: grid; gap: 2px; }
.onde__lista dt { font-weight: 600; font-size: .9375rem; color: var(--grafite-2); }
.onde__lista dd { display: grid; gap: 2px; }
.onde__lista a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-weight: 600; }
.status--longo { min-height: 1.6em; }
.onde__mapa { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px; border-radius: 6px; overflow: hidden; background: var(--nevoa-2); }
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.onde__mapa.foco-teclado { outline: 2px solid var(--verde); outline-offset: 3px; }
.onde__espera { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: var(--grafite-2); }
.onde__espera a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; background: var(--noite); color: #fff; padding: 84px 0 92px; }
@media (min-width: 960px) { .final { padding: 108px 0 116px; } }
.final__dentro { position: relative; z-index: 1; }
.final h2 { max-width: 16em; }
.final p { margin-top: 14px; color: #c9ced2; max-width: 34em; }
.final__marca { position: absolute; z-index: 0; width: 360px; height: 360px; right: max(-60px, calc((100vw - 1160px) / 2 - 100px)); top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
@media (max-width: 720px) { .final__marca { width: 220px; height: 220px; right: -70px; top: 22px; transform: none; opacity: .32; } }
.final__anel { fill: none; stroke: #9aa0a6; stroke-width: 2.4; }
.final__folha { fill: url(#folha); }
.final__lamina { fill: #9aa0a6; }

/* ---------- rodapé ---------- */
.rodape { background: var(--noite-2); color: #b9bec2; padding: 56px 0 28px; font-size: 1rem; }
.rodape a { color: #e6e9eb; display: inline-flex; align-items: center; min-height: 44px; }
.rodape a:hover { color: #fff; }
.rodape__dentro { display: grid; gap: 28px; }
@media (min-width: 720px) { .rodape__dentro { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .rodape__dentro { grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: 40px; } }
.rodape__logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.125rem; }
.rodape__logo svg { width: 38px; height: 38px; flex: none; }
.rodape__marca p + p { margin-top: 8px; }
.rodape__titulo { color: #fff; font-weight: 600; margin-bottom: 6px; }
.rodape__col p + p { margin-top: 2px; }
.rodape__base { margin-top: 36px; }
.rodape__empresa, .rodape__aviso { padding-top: 14px; font-size: .9375rem; color: #a9aeb3; }
.rodape__empresa { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.rodape__aviso { padding-top: 4px; }
.rodape__credito { margin-top: 10px; font-size: .9375rem; }
.rodape__credito a { gap: 8px; text-decoration: none; color: #c3c7cb; }
.rodape__credito a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__credito svg { width: 20px; height: 20px; flex: none; }

/* ---------- botão flutuante ---------- */
.zap-flutuante {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--verde); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
  transition: opacity .3s, transform .35s var(--curva), background-color .2s;
}
.zap-flutuante svg { width: 24px; height: 24px; }
.zap-flutuante:hover { background: var(--verde-escuro); color: #fff; }
html.sem-flutuante .zap-flutuante { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .zap-flutuante { transition: opacity .2s; } html.sem-flutuante .zap-flutuante { transform: none; } }
@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 de prévia (uma vez por visita) ---------- */
.aviso { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 10px; background: var(--papel); color: var(--grafite); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45); }
.aviso::backdrop { background: rgba(27, 31, 33, .62); }
.aviso__caixa { display: grid; gap: 14px; padding: 28px 26px 24px; text-align: left; }
.aviso__marca { width: 44px; height: 44px; }
.aviso h2 { font-size: 1.5rem; line-height: 1.2; }
.aviso p { color: var(--grafite-2); font-size: 1.0625rem; line-height: 1.55; }
.aviso__botao { width: 100%; margin-top: 6px; }
.aviso__botao:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
@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); } to { opacity: 1; transform: none; } }
@keyframes aviso-fundo { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 420px) {
  .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; }
}

/* ---------- celular: botões na largura toda ---------- */
@media (max-width: 480px) {
  .botoes { flex-direction: column; align-items: stretch; }
  .botao { display: block; width: 100%; padding: 15px 18px; text-align: center; text-wrap: balance; }
  .botao svg { display: inline-block; vertical-align: -5px; margin-right: 8px; }
}
/* celular deitado: título e botão principal na primeira tela; menu com rolagem própria */
@media (max-height: 480px) and (orientation: landscape) {
  .topo__nav { max-height: calc(100vh - var(--topo-altura) - 34px); overflow-y: auto; }
  .capa__dentro { padding-top: 12px; gap: 28px; }
  .capa__onde { font-size: .9375rem; margin-bottom: 4px; }
  .capa h1 { font-size: 1.4rem; max-width: none; }
  .capa__lead { font-size: .9375rem; line-height: 1.5; margin-top: 8px; }
  .capa .botoes { margin-top: 12px; }
  .capa .botao { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
  .capa__hora { margin-top: 12px; }
}

/* ---------- animações: só com movimento liberado e com JS; sem isso, tudo já vem pronto ---------- */
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 76, .45); } 100% { box-shadow: 0 0 0 9px rgba(31, 138, 76, 0); } }
@keyframes luz { from { transform: translateY(-110%); } to { transform: translateY(400%); } }
@keyframes pousar { 0% { transform: translateY(-22px); opacity: 0; } 60% { transform: translateY(3px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes entrar-folha { from { opacity: 0; transform: rotate(-14deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* capa: o anel marca o joelho, as linhas seguem a coxa e a canela, o arco mede a flexão */
  html.js .medida .m-coxa, html.js .medida .m-canela, html.js .medida .m-ext, html.js .medida .m-arco, html.js .medida .m-anel { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  html.js .medida .m-marcas, html.js .medida .m-centro { opacity: 0; }
  html.js .medida.medir .m-anel { animation: tracar .7s cubic-bezier(.5, .05, .3, 1) forwards; }
  html.js .medida.medir .m-centro { animation: aparecer .3s ease .35s forwards; }
  html.js .medida.medir .m-coxa { animation: tracar .7s cubic-bezier(.5, .05, .3, 1) .2s forwards; }
  html.js .medida.medir .m-ext { animation: tracar .55s cubic-bezier(.5, .05, .3, 1) .75s forwards; }
  html.js .medida.medir .m-canela { animation: tracar .7s cubic-bezier(.5, .05, .3, 1) .75s forwards; }
  html.js .medida.medir .m-arco { animation: tracar 1s cubic-bezier(.45, 0, .2, 1) 1.35s forwards; }
  html.js .medida.medir .m-marcas { animation: aparecer .6s ease 1.7s forwards; }
  /* o que tratamos: o desenho de cada caso se traça quando aparece */
  html.js .caso .d-tracar { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  html.js .caso.visivel .d-tracar { animation: tracar 1.2s cubic-bezier(.5, .05, .3, 1) forwards; }
  html.js .caso.visivel .d-verde { animation-delay: .55s; }
  /* médicos: a régua de cada nome se desenha, uma depois da outra */
  html.js .nomes li::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.5, .05, .25, 1); }
  html.js .nomes li::after { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1) .9s; }
  html.js .nomes.visivel li::before { transform: scaleX(1); }
  html.js .nomes.visivel li::after { transform: scale(1); }
  html.js .nomes.visivel li:nth-child(2)::before { transition-delay: .3s; }
  html.js .nomes.visivel li:nth-child(2)::after { transition-delay: 1.2s; }
  /* como agendar: os números dos passos surgem em sequência */
  html.js .passos li::before { transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease; }
  html.js .passos.visivel li::before { transform: none; opacity: 1; }
  html.js .passos.visivel li:nth-child(2)::before { transition-delay: .2s; }
  html.js .passos.visivel li:nth-child(3)::before { transition-delay: .4s; }
  /* perguntas: uma faixa de luz passa uma vez pela radiografia */
  html.js .perguntas__foto.visivel .perguntas__luz { animation: luz 1.6s cubic-bezier(.45, 0, .3, 1) .2s 1 both; }
  /* onde fica: o pino desce uma vez; o ponto verde do horário pulsa três vezes quando está aberto */
  html.js .onde__pino { opacity: 0; }
  html.js .onde__dentro.visivel .onde__pino { animation: pousar .7s cubic-bezier(.3, .8, .4, 1) .15s forwards; }
  .status.aberto .status__ponto { animation: pulso 1.8s ease-out 3; }
  /* chamada final: o anel do logo se fecha e o traço verde entra */
  html.js .final__anel { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  html.js .final__folha, html.js .final__lamina { opacity: 0; transform-origin: 66px 51px; transform-box: view-box; }
  html.js .final.visivel .final__anel { animation: tracar 1.6s cubic-bezier(.5, .05, .35, 1) .1s forwards; }
  html.js .final.visivel .final__folha { animation: entrar-folha .9s cubic-bezier(.3, .8, .4, 1) .9s forwards; }
  html.js .final.visivel .final__lamina { animation: entrar-folha .9s cubic-bezier(.3, .8, .4, 1) 1.15s forwards; }
}