/* Odontologia Premier: "mapa de linhas" (LEITURA.md). Papel creme do site atual, tinta quase preta, 5 cores de linha
   derivadas da marca (terracota e sálvia do site), Red Hat Display nos títulos e estações, Poppins do site no texto. */
:root {
  --fundo: #f6f1ec; --papel: #fbf8f4; --tinta: #262a25; --suave: #5b6058; --linha: #ddd3c7;
  --marca: #8f5d46; --marca-2: #535d52; --cartao: #fffdf9; --raio: 10px;
  --fonte-titulo: "Red Hat Display", system-ui, sans-serif; --fonte-texto: "Poppins", system-ui, sans-serif;
  --cI: #8f5d46; --cP: #86681f; --cA: #3d6a85; --cE: #a5566b; --cS: #535d52;
}
body { font-size: clamp(15px, 1vw, 17px); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; }
.sobre { font: 700 .78rem/1.2 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-bottom: .9rem; }
.link-seta { display: inline-flex; gap: .45em; align-items: center; font-weight: 600; color: var(--tinta); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-seta svg { width: 1.1em; height: 1.1em; }
.botao--claro { --b-fundo: #fbf8f4; --b-tinta: var(--tinta); }

/* Pílula de linha: o marcador do sistema todo */
.pilula { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--c); color: #fff; font: 800 max(12px, .82rem)/1 var(--fonte-titulo); }
.pilula + .pilula { margin-left: -.28em; box-shadow: 0 0 0 2px var(--papel); }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.topo__logo { display: flex; align-items: center; min-height: 48px; }
.topo__logo img { width: 200px; height: auto; }
.topo__nav { display: flex; gap: 1.6rem; margin-left: auto; font: 600 .95rem var(--fonte-titulo); }
.topo__nav a { position: relative; padding-block: .4rem; }
.topo__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.topo__nav a:hover::after { transform: scaleX(1); }
.topo__cta { padding: .75em 1.2em; }

/* Mapa (primeira tela) */
.mapa { padding-top: clamp(28px, 4vw, 56px); }
.mapa__topo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .6rem 3rem; align-items: end; }
.mapa__topo .sobre { grid-column: 1 / -1; margin: 0; }
.mapa h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: .98; }
.mapa__sub { color: var(--suave); max-width: 46ch; }
.mapa__acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.mapa__quadro { position: relative; margin-top: clamp(20px, 3vw, 36px); padding: clamp(10px, 2vw, 24px); background: var(--papel); border: 1px solid var(--linha); border-radius: 18px; }
.mapa__svg { width: 100%; height: auto; overflow: visible; }
.mapa__svg--empe { display: none; }
.traco { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s; }
.est { cursor: pointer; outline: none; transition: opacity .3s; }
.est__alvo { fill: transparent; }
.est__ponto { fill: #fff; stroke-width: 4; transition: r .2s, fill .2s; }
.est__capsula { fill: #fff; stroke: var(--tinta); stroke-width: 4; transition: fill .2s; }
.est__nome { font: 600 15px var(--fonte-titulo); fill: var(--tinta); }
.est__nome--hub { font-size: 19px; font-weight: 800; }
.est__sub { font: 600 12px var(--fonte-texto); fill: var(--marca); letter-spacing: .12em; text-transform: uppercase; }
.est:hover .est__ponto, .est:focus-visible .est__ponto { r: 12; }
.est:focus-visible .est__nome { text-decoration: underline; }
.est.ativa .est__ponto { fill: var(--tinta); stroke: var(--tinta) !important; r: 12; }
.est.ativa .est__capsula { fill: var(--tinta); }
.est.ativa .est__nome { font-weight: 800; }
.pil text, .mapa__linha-nome { font: 800 13px var(--fonte-titulo); fill: #fff; }
.mapa__linha-nome { fill: var(--suave); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
/* linha em foco: as outras apagam */
[data-mapa][data-foco] .traco, [data-mapa][data-foco] .est, [data-mapa][data-foco] .pil, [data-mapa][data-foco] .mapa__linha-nome { opacity: .14; }
[data-mapa][data-foco="I"] [data-linha~="I"], [data-mapa][data-foco="P"] [data-linha~="P"], [data-mapa][data-foco="A"] [data-linha~="A"],
[data-mapa][data-foco="E"] [data-linha~="E"], [data-mapa][data-foco="S"] [data-linha~="S"] { opacity: 1; }

/* Legenda */
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1rem; font-size: .9rem; }
.legenda__titulo { font: 700 .75rem var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.legenda__linhas { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.legenda__linha { display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: .3em .9em .3em .35em; border: 1px solid var(--linha); border-radius: 999px; background: var(--cartao); cursor: pointer; font: 600 .88rem var(--fonte-titulo); }
.legenda__linha[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.legenda__item { display: inline-flex; align-items: center; gap: .5em; color: var(--suave); }
.legenda__integra { display: inline-block; width: 26px; height: 14px; border: 3px solid var(--tinta); border-radius: 999px; background: #fff; flex: none; }
.legenda__nota svg { width: 16px; height: 16px; color: var(--cP); }
.legenda__nota a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Ficha do tratamento: faixa sob o mapa */
.fichas { margin-top: 1.2rem; }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .4rem 3rem; padding: clamp(18px, 2.4vw, 30px); background: var(--tinta); color: #f4efe8; border-radius: 18px; }
.ficha__cab { display: grid; gap: .6rem; align-content: start; }
.ficha__corpo { display: grid; gap: .5rem; align-content: start; }
.ficha__onde { display: flex; align-items: center; gap: .6rem; font: 700 .78rem var(--fonte-titulo); letter-spacing: .12em; text-transform: uppercase; color: #cfc6ba; }
.ficha__onde .pilula + .pilula { box-shadow: 0 0 0 2px var(--tinta); }
.ficha h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: #fff; }
.ficha__texto { font-size: 1.05rem; }
.ficha__extra { color: #cfc6ba; font-size: .95rem; }
.ficha__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .6rem; }
.ficha .link-seta { color: #f4efe8; }

/* Barra de horário e urgência (bloco do site atual, logo abaixo da abertura) */
.horario-barra { margin-top: clamp(28px, 4vw, 48px); background: var(--marca-2); color: #f4efe8; }
.horario-barra__in { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2.4rem; padding-block: 1.1rem; }
.horario-barra__item { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .92rem; }
.horario-barra__item b { font-family: var(--fonte-titulo); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; align-self: center; }
.horario-barra__urg { margin-left: auto; }

/* Caminho */
.caminho { padding-block: clamp(64px, 9vw, 120px); }
.caminho__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.caminho h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.06; font-weight: 700; }
.caminho__fonte { margin-top: 1rem; font-size: .88rem; }
.caminho__fonte a, .caminho__plano a, .equipe__topo a { text-decoration: underline; text-underline-offset: 3px; color: var(--suave); }
.caminho__texto { display: grid; gap: 1rem; padding-top: .4rem; border-top: 10px solid var(--cA); }
.caminho__texto p:first-child { padding-top: 1rem; }
.caminho__plano { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; }

/* Clínica: fotos reais com placa de estação */
.clinica { padding-block: clamp(56px, 8vw, 110px); background: var(--papel); border-block: 1px solid var(--linha); }
.clinica__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem 4rem; align-items: end; margin-bottom: 2.4rem; }
.clinica__topo .sobre { grid-column: 1 / -1; margin: 0; }
.clinica h2, .equipe h2, .leituras h2, .contato h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.clinica__miudo { grid-column: 2; color: var(--suave); font-size: .92rem; }
.clinica__plataforma { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.lugar { margin: 0; min-width: 0; }
.lugar__foto { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px 10px 0 0; background: #e8e0d6; }
.lugar__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.placa { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 44px; padding: .45rem .7rem; background: var(--tinta); color: #fff; border-radius: 0 0 10px 10px; }
.placa__nome { font: 700 .95rem/1.1 var(--fonte-titulo); }
.placa__linhas { display: inline-flex; }
.placa .pilula { width: 24px; height: 24px; font-size: 12px; }
.placa .pilula + .pilula { box-shadow: 0 0 0 2px var(--tinta); }
.lugar__legenda { margin-top: .5rem; font-size: .8rem; line-height: 1.4; color: var(--suave); }
.aviso-linha { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-top: 2rem; padding: 1rem 1.2rem; border: 1.5px solid var(--tinta); border-radius: 10px; background: var(--cartao); }
.aviso-linha b { font: 800 .78rem var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; }

/* Equipe por setor */
.equipe { padding-block: clamp(64px, 9vw, 120px); }
.equipe__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem 4rem; align-items: end; margin-bottom: 2.6rem; }
.equipe__topo .sobre { grid-column: 1 / -1; margin: 0; }
.equipe__setores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.setor { padding-block: 1.6rem; border-top: 1px solid var(--linha); min-width: 0; }
.setor--largo { grid-column: 1 / -1; }
.setor__cab { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.1rem; }
.setor__ponto { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--tinta); background: #fff; flex: none; }
.setor h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.setor__linhas { display: inline-flex; }
.setor__conta { margin-left: auto; font-size: .85rem; color: var(--suave); }
.setor__gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem 1rem; list-style: none; margin: 0; padding: 0; }
.setor__gente figure { margin: 0 0 .6rem; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; background: #cfd3c9; }
.setor__gente img { width: 100%; height: 100%; object-fit: cover; }
.pessoa__nome { font: 700 .98rem/1.25 var(--fonte-titulo); }
.pessoa__cargo { font-size: .82rem; line-height: 1.4; color: var(--suave); }
.pessoa__cargo span { display: block; font-size: max(12px, .76rem); letter-spacing: .02em; }
.equipe__miudo { margin-top: 1.4rem; font-size: .82rem; color: var(--suave); }

/* Leituras do blog */
.leituras { padding-block: clamp(56px, 7vw, 96px); background: var(--papel); border-block: 1px solid var(--linha); }
.leituras__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 2rem 4rem; align-items: start; }
.leituras__lista { list-style: none; margin: 0; padding: 0; }
.leituras__lista li { border-top: 1px solid var(--linha); }
.leituras__lista li:last-child { border-bottom: 1px solid var(--linha); }
.leituras__lista a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .8rem 1.2rem; padding: 1.1rem 0; min-height: 56px; }
.leituras__data { font-size: .8rem; color: var(--suave); white-space: nowrap; }
.leituras__titulo { font: 700 1.05rem/1.3 var(--fonte-titulo); }
.leituras__lista svg { width: 22px; height: 22px; transition: transform .3s; }
.leituras__lista a:hover svg { transform: translateX(4px); }
.leituras__lista a.leituras__todos { display: flex; justify-content: space-between; font-weight: 600; }

/* Contato */
.contato { padding-block: clamp(64px, 9vw, 120px); }
.contato__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem 5rem; }
.contato__sub { color: var(--suave); margin: .8rem 0 1.6rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo { display: grid; gap: .35rem; font-size: .88rem; font-weight: 500; }
.campo i { font-style: normal; color: var(--suave); font-weight: 400; }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--cartao); font-size: 1rem; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marca); }
.form__enviar { margin-top: 1.2rem; }
.contato__info { display: grid; gap: 1.6rem; align-content: start; padding: 1.6rem; background: var(--papel); border: 1px solid var(--linha); border-radius: 18px; }
.contato__rot, .rodape__rot { font: 700 .75rem var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--marca); margin-bottom: .4rem; }
.contato__forte { font: 700 1.15rem var(--fonte-titulo); }
.contato__bloco .link-seta { margin-top: .6rem; }
.contato__horario { margin: 0; display: grid; gap: .3rem; }
.contato__horario div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--linha); padding-bottom: .3rem; font-size: .92rem; }
.contato__horario dd { margin: 0; text-align: right; }
.contato__miudo { margin-top: .6rem; font-size: .82rem; color: var(--suave); }

/* Rodapé */
.rodape { background: var(--marca-2); color: #eee8df; padding-block: 56px 28px; }
.rodape__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 2.4rem; }
.rodape__marca img { width: 210px; margin-bottom: 1rem; }
.rodape__marca p { font-size: .88rem; max-width: 44ch; }
.rodape__redes { margin-top: .8rem; }
.rodape__redes a, .rodape__contato a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__rot { color: #e6d3c3; }
.rodape__legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.rodape__legenda li { display: flex; align-items: center; gap: .6rem; }
.rodape__legenda .pilula { box-shadow: 0 0 0 2px #eee8df; }
.rodape__legenda .legenda__integra { border-color: #eee8df; background: transparent; }
.rodape__aqui { width: 18px; height: 18px; border-radius: 50%; background: #eee8df; box-shadow: 0 0 0 4px color-mix(in srgb, #eee8df 30%, transparent); flex: none; margin-inline: 4px; }
.rodape__contato p { margin-bottom: .4rem; }
.rodape__miudo { margin-top: 2.4rem; font-size: .78rem; opacity: .75; }

/* Tablet */
@media (max-width: 1100px) {
  .clinica__plataforma { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topo__nav { gap: 1rem; }
}
/* Celular e tablet estreito: mapa em pé */
@media (max-width: 760px) {
  .topo__nav { display: none; }
  .topo__linha { gap: 1rem; min-height: 64px; justify-content: space-between; }
  .topo__logo img { width: 160px; }
  .mapa__topo, .caminho__in, .clinica__topo, .equipe__topo, .leituras__in, .contato__in, .rodape__in { grid-template-columns: minmax(0, 1fr); }
  .clinica__miudo { grid-column: auto; }
  .mapa__svg--deitado { display: none; }
  .mapa__svg--empe { display: block; max-width: 420px; margin-inline: auto; }
  .mapa__quadro { padding: 8px 4px; }
  .est__nome { font-size: 15.5px; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .horario-barra__urg { margin-left: 0; }
  .clinica__plataforma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .equipe__setores { grid-template-columns: minmax(0, 1fr); }
  .setor__gente { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .7rem; }
  .pessoa__nome { font-size: .86rem; }
  .pessoa__cargo { font-size: 12px; }
  .leituras__lista a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .leituras__data { grid-column: 2; grid-row: 1; }
  .leituras__titulo { grid-column: 2; grid-row: 2; }
  .leituras__lista .pilula { grid-row: 1 / span 2; }
  .leituras__lista svg { grid-column: 3; grid-row: 1 / span 2; }
  .campos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) {
  .setor__gente { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .setor__gente { gap: .9rem .5rem; }
  .pessoa__nome { font-size: .8rem; }
  .pessoa__cargo, .pessoa__cargo span { font-size: 12px; }
  .legenda__linha { font-size: .82rem; }
}