/* =====================================================================
   Odontoimagem — site público
   Paleta tirada do próprio universo do negócio: o grafite do negatoscópio,
   o azul clínico e o ciano da varredura, sobre um neutro frio.
   ===================================================================== */

:root{
  --ground:#f4f6fa;
  --surface:#ffffff;
  --surface-2:#eaeef6;
  --ink:#0f1b2b;
  --ink-soft:#51607a;
  --line:#d8dfeb;
  --accent:#0f5fc4;
  /* Azul exato da logomarca. Fica separado do --accent de proposito: o
     accent e usado em texto pequeno e link sobre fundo claro, onde este
     azul mais vivo cansa a leitura. Aqui ele entra como cor de area. */
  --marca:#0048fa;
  --accent-soft:#e4eefc;
  --scan:#0fa3b8;
  --zap:#1ea95c;
  --shadow:0 1px 2px rgba(15,27,43,.06),0 12px 28px -18px rgba(15,27,43,.35);
  --radius:14px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:Archivo,ui-sans-serif,system-ui,sans-serif;margin:0;
  text-wrap:balance;letter-spacing:-.02em;line-height:1.14}
h1{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.55rem,3vw,2.3rem);font-weight:700}
h3{font-size:1.12rem;font-weight:700}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--ink-soft);max-width:62ch}
/* Solta o limite de 62 caracteres em frases curtas que nao podem quebrar,
   como a do desconto do Clube Carvoeiro: ela tem 68 caracteres e batia
   no limite por tres letras. */
.lede--larga{max-width:none}
.centro{text-align:center}
.pula{position:absolute;left:-9999px}
.pula:focus{left:12px;top:12px;z-index:99;background:var(--surface);padding:.6rem 1rem;border-radius:8px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:Archivo,sans-serif;
  font-weight:600;font-size:.95rem;padding:.78rem 1.25rem;border-radius:10px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
/* As variações usam classe dupla de propósito.
   Regras de container como ".nav a" e "footer a" pintam link e têm
   especificidade 0,1,1, que vence um ".btn-primary" simples de 0,1,0:
   era isso que deixava o botão azul do cabeçalho com texto cinza em vez
   de branco. Com ".btn.btn-primary" o botão passa a 0,2,0 e ganha em
   qualquer lugar onde for colocado. */
.btn.btn-primary{background:var(--accent);color:#fff}
.btn.btn-primary:hover{background:var(--accent);color:#fff}
.btn.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
/* Vazado na cor da marca: fundo branco, contorno e texto azuis. */
.btn.btn-contorno{background:#fff;border-color:var(--accent);color:var(--accent)}
.btn.btn-contorno:hover{background:var(--accent-soft);color:var(--accent)}
.btn.btn-zap{background:var(--zap);color:#fff}
.btn.btn-zap:hover{color:#fff}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- topo ---------- */
.utility{background:var(--ink);color:#fff;font-size:.83rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  justify-content:space-between;padding-block:.5rem}
.utility a{text-decoration:none;opacity:.92}
.utility-group{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.utility-rotulo{display:inline-flex;align-items:center;gap:.4rem;opacity:.7;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.utility-area{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.utility-area:hover{border-bottom-color:#fff}
/* Botoes da barra do topo. Cheio para o que mais gente procura (resultado
   do exame), vazado para o Club. Branco sobre o azul da marca da 6,35:1. */
/* O vazado (Club) e azul em texto e contorno. Nao e o #0048fa da marca:
   sobre a barra escura ele daria 2,7:1 e ninguem leria. Este tom mais
   claro e o mesmo azul, so levantado ate 5,4:1. */
.utility-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .8rem;border-radius:999px;
  border:1px solid #4d8dff;color:#4d8dff;font-family:Archivo;font-weight:600;font-size:.8rem;
  opacity:1;line-height:1.2;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.utility-btn:hover{border-color:#7fb0ff;color:#7fb0ff;background:rgba(77,141,255,.12)}
.utility-btn--cheio{background:var(--marca);border-color:var(--marca);color:#fff}
.utility-btn--cheio:hover{background:#1a63ff;border-color:#1a63ff;color:#fff}
.utility-btn svg{width:15px;height:15px}
@media (max-width:700px){.utility-rotulo{display:none}}

.masthead{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:1.2rem;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}

/* A logomarca e uma faixa de 7 por 1. A altura manda, a largura segue,
   e no celular ela encolhe para sobrar espaco para o botao do menu. */
.brand__logo{height:38px;width:auto;display:block}
@media (max-width:600px){.brand__logo{height:30px}}

.brand-mark{width:38px;height:38px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none}
.brand small{display:block;font-family:"Source Sans 3";font-weight:400;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:-2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.3rem}
.nav a{text-decoration:none;font-size:.95rem;font-weight:600;font-family:Archivo;color:var(--ink-soft)}
.nav a:hover,.nav a.ativo{color:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:.45rem .6rem;cursor:pointer;color:var(--ink)}
@media (max-width:980px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);
       border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
       gap:0;padding:.5rem 22px 1rem;display:none}
  .nav.aberto{display:flex}
  .nav a{padding:.7rem 0;border-bottom:1px solid var(--line)}
}

/* ---------- seções ---------- */
/* Respiro vertical: 40px em cima e 40px embaixo, o que da exatamente
   80px entre duas secoes. No celular cai para 32px de cada lado, senao
   em tela pequena boa parte da rolagem seria espaco vazio.

   Faixa colorida e capa levam folga propria: ali o espaco nao separa
   secoes, ele afasta o texto da borda da cor.                          */
section{padding-block:clamp(32px,4vw,40px)}
.alt{background:var(--surface)}
.sec-head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem;max-width:70ch}

/* ---------- capa das páginas internas ---------- */
.capa{background:var(--ink);color:#fff;padding-block:clamp(30px,4.5vw,46px)}
.capa h1{color:#fff}
.capa p{color:#c6d2e6;max-width:60ch;margin-top:.6rem}
.migalha{font-size:.83rem;color:#93a6c4;margin-bottom:.7rem}
.migalha a{text-decoration:none}

/* Horario de atendimento na capa. Fica numa faixa translucida em vez de
   texto solto: e informacao de servico, nao continuacao da chamada, e
   assim o olho separa as duas coisas sem precisar de titulo. */
.capa__horario{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;
  padding:.5rem .95rem;border-radius:999px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);font-size:.9rem;color:#dbe4f2}
.capa__horario svg{color:#9fc2f5;flex:none}

/* Frase unica. No celular ela dobra dentro da propria faixa, entao o
   icone alinha pelo topo e o canto arredondado deixa de ser pilula. */
@media (max-width:560px){
  .capa__horario{align-items:flex-start;border-radius:14px}
}

/* ---------- hero com slides de fundo ----------
   A foto fica atras do texto, entao o contraste nao pode depender dela.
   Sobre as imagens ha um veu escuro em degrade, mais fechado a esquerda,
   onde o titulo cai, e mais aberto a direita, onde a foto respira.

   Os 88% do lado esquerdo saem de conta, nao de gosto: no pior caso, uma
   foto totalmente branca, o resultado composto ainda fica escuro o
   bastante para o texto branco passar com folga na norma de contraste.
   Se for mexer no veu, refaca a conta antes.                            */

.hero{position:relative;isolation:isolate;background:var(--surface);
  border-bottom:1px solid var(--line)}

.hero--foto{border-bottom:0;color:#fff;
  background:linear-gradient(120deg,var(--ink) 0%,#123a6b 100%);
  min-height:clamp(440px,64vh,640px);display:grid;align-items:center}
.hero--foto h1,.hero--foto .lede{color:#fff}
.hero--foto .eyebrow{color:#9fc2f5}

.hero__fundo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;
  background-size:cover;background-repeat:no-repeat;
  transition:opacity 1.1s ease}
.hero__slide.is-ativo{opacity:1}

.hero--foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,27,43,.88) 0%,rgba(15,27,43,.74) 42%,rgba(15,27,43,.38) 100%)}
@media (max-width:820px){
  /* Em tela estreita o texto ocupa a largura toda e nao existe "lado
     direito livre": o veu fecha por igual. */
  .hero--foto::after{background:linear-gradient(180deg,rgba(15,27,43,.82) 0%,rgba(15,27,43,.88) 100%)}
}

/* O width:100% nao e redundante. Este bloco e item de grade e carrega
   "margin-inline:auto" da classe .wrap; num item de grade, margem
   automatica cancela o esticamento e o navegador encolhe a caixa ate o
   tamanho do conteudo. Era isso que jogava o texto do hero 248px para
   dentro, desalinhado da logomarca do cabecalho. */
.hero__conteudo{position:relative;z-index:1;width:100%;padding-block:clamp(2.6rem,7vw,4.4rem)}
.hero-copy{display:flex;flex-direction:column;gap:1.1rem;max-width:640px}
.hero h1 span{color:var(--accent)}
.hero--foto h1 span{color:#8fd0ff}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.3rem}

/* Botao secundario sobre foto: contorno claro em vez do branco solido,
   que competiria com o botao principal. */
.btn.btn-claro{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.btn.btn-claro:hover{background:rgba(255,255,255,.2);color:#fff}

.seal{display:inline-flex;align-items:center;gap:.7rem;margin-top:.4rem;
  border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;background:var(--ground)}
.hero--foto .seal{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1)}
.hero--foto .seal em{color:#dbe4f2}
.hero--foto .seal a{color:#fff}
.seal strong{font-family:Archivo;font-size:1.35rem;line-height:1}
.seal em{font-style:normal;font-size:.78rem;color:var(--ink-soft);display:block}
.stars{color:var(--accent);letter-spacing:2px;font-size:.8rem}
.hero--foto .stars{color:#ffd166}

/* Pontos de navegacao. Alvo de 30px para o dedo, ainda que o ponto
   desenhado seja pequeno. */
.hero__pontos{position:absolute;left:0;right:0;bottom:18px;z-index:2;
  display:flex;justify-content:center;gap:.4rem}
.hero__ponto{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.hero__ponto::before{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.45);transition:background .2s ease,width .2s ease}
.hero__ponto.is-ativo::before{background:#fff;width:22px;border-radius:99px}
.hero__ponto:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}

/* ---------- imagens e espaços reservados ---------- */
.figura{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);position:relative}
.figura img{width:100%;height:100%;object-fit:cover}
.vazia{display:grid;place-items:center;color:var(--ink-soft);
  background:linear-gradient(148deg,var(--surface-2),var(--accent-soft));
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-align:center;padding:1rem}
.r-16{aspect-ratio:16/10}
.r-43{aspect-ratio:4/3}
.r-11{aspect-ratio:1/1}
.r-34{aspect-ratio:3/4}
.r-23{aspect-ratio:2/3}

/* ---------- faixa de destaques ----------
   Sem cartao de proposito: cartao dentro de faixa colorida vira caixa
   dentro de caixa e rouba a forca da cor. Aqui a propria faixa e o
   recipiente, e as colunas se separam por um filete claro.

   Texto branco sobre o azul da marca fica em 6,2:1, acima do minimo da
   norma. O paragrafo usa um branco levemente azulado, e nao branco com
   transparencia, porque transparencia derrubaria o contraste junto.   */

.faixa-marca{background:var(--marca);color:#fff;padding-block:clamp(32px,4.5vw,46px)}

.destaques{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.destaque{display:flex;flex-direction:column;gap:.5rem;padding:.1rem 1.7rem}
.destaque:first-child{padding-left:0}
.destaque:last-child{padding-right:0}
.destaque + .destaque{border-left:1px solid rgba(255,255,255,.22)}
.destaque .ico{color:#fff}
.destaque h3{font-size:1.02rem;color:#fff;letter-spacing:-.01em}
.destaque p{font-size:.92rem;color:#dbe6ff;line-height:1.5}

@media (max-width:900px){
  .destaques{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.8rem}
  .destaque{padding-inline:0}
  .destaque + .destaque{border-left:0}
  .destaque:nth-child(2n){padding-left:1.7rem;border-left:1px solid rgba(255,255,255,.22)}
}

@media (max-width:560px){
  .destaques{grid-template-columns:minmax(0,1fr);row-gap:0}
  .destaque{padding:1.15rem 0}
  .destaque:nth-child(2n){padding-left:0;border-left:0}
  .destaque + .destaque{border-top:1px solid rgba(255,255,255,.22)}
}

/* ---------- grades ---------- */
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:860px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perk{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow)}
.perk .ico{color:var(--accent)}
.perk h3{font-size:1rem}
.perk p{font-size:.9rem;color:var(--ink-soft)}

.fork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem}
@media (max-width:860px){.fork{grid-template-columns:minmax(0,1fr)}}
.path{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.path .corpo{padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.path ul{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:.94rem;
  display:flex;flex-direction:column;gap:.3rem}
.path .btn{align-self:flex-start;margin-top:.35rem}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .ico{color:var(--accent)}
.card h3{font-size:.98rem}
.card p{font-size:.86rem;color:var(--ink-soft)}
.centro-btn{display:flex;justify-content:center;margin-top:1.8rem}

.lab-grid,.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (max-width:900px){.lab-grid,.book-grid{grid-template-columns:minmax(0,1fr)}}
.solutions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem;margin-top:.4rem}
@media (max-width:520px){.solutions{grid-template-columns:minmax(0,1fr)}}
.sol{display:flex;align-items:center;gap:.6rem;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;
  font-size:.92rem;font-weight:600;font-family:Archivo;text-decoration:none}
.sol:hover{border-color:var(--accent)}
.sol .ico{color:var(--scan);flex:none}
.codes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.code{font-family:"IBM Plex Mono",monospace;font-size:.72rem;padding:.3rem .5rem;
  border-radius:6px;background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(15,95,196,.22)}
.mosaico{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem}

.steps{display:flex;flex-direction:column;gap:.9rem;margin-top:.4rem}
.step{display:flex;gap:.85rem;align-items:flex-start}
.step b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;display:grid;place-items:center;margin-top:2px}
.step p{font-size:.94rem;color:var(--ink-soft)}
.step strong{color:var(--ink)}
.stores{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.store{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:10px;
  padding:.55rem .85rem;background:var(--surface);font-size:.85rem;font-weight:600;
  font-family:Archivo;text-decoration:none}

.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:900px){.reviews{grid-template-columns:minmax(0,1fr)}}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.review p{font-size:.92rem;color:var(--ink-soft)}
.review .nome{font-family:Archivo;font-weight:600;font-size:.92rem}
.partners{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;margin-top:1.6rem}
@media (max-width:760px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partner{border:1px solid var(--line);border-radius:10px;min-height:74px;display:grid;
  place-items:center;padding:.8rem;text-align:center;background:var(--surface);
  font-size:.82rem;color:var(--ink-soft)}

/* Paginas de detalhe: texto de um lado, cartao de acao do outro.
   Nao usam .lab-grid porque ali as duas colunas sao blocos equilibrados
   e ficam centradas na vertical; aqui o cartao precisa comecar junto do
   texto, e ser estreito, senao ocupa metade da tela para dizer tres
   linhas. */
.detalhe{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media (max-width:900px){.detalhe{grid-template-columns:minmax(0,1fr)}}

/* ---------- home sem caixas ----------
   Cartao resolve um problema que a home nao tem: separar itens que
   competem entre si. Aqui os blocos ja vem separados por espaco e por
   fio, e a moldura so acrescentava peso. Sem ela o olho percorre a
   lista, em vez de parar em cada retangulo.

   O fio de 1px e a unidade de separacao de toda esta pagina. Onde o
   fundo muda de cor, ele some, porque a propria troca ja separa.      */

/* Link com seta, que substitui o botao fantasma em contexto de leitura */
.link-seta{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:Archivo;font-weight:600;font-size:.95rem;color:var(--accent)}
.link-seta svg{transition:transform .18s ease}
.link-seta:hover svg{transform:translateX(4px)}

/* ---- caminhos (paciente e dentista) ---- */
.caminhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,3rem)}
@media (max-width:820px){.caminhos{grid-template-columns:minmax(0,1fr)}}
.caminho{display:flex;flex-direction:column;gap:.7rem}
.caminho__foto{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.caminho__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.caminho:hover .caminho__foto img{transform:scale(1.03)}
.caminho__foto .vazia{width:100%;height:100%}
.caminho h3{font-size:1.28rem}
.lista-fina{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;
  color:var(--ink-soft);font-size:.95rem}
.lista-fina li{padding-left:1.1rem;position:relative}
.lista-fina li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.caminho .link-seta{margin-top:.3rem}

/* ---- exames em grade com fios ---- */
.grade-exames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.6rem,4vw,3.4rem);border-bottom:1px solid var(--line)}
@media (max-width:760px){.grade-exames{grid-template-columns:minmax(0,1fr)}}

.exame-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
  gap:.95rem;padding:1.15rem .4rem;border-top:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background .16s ease}
.exame-item:hover{background:var(--accent-soft)}
.exame-item .ico{color:var(--accent);margin-top:.15rem}
.exame-item__texto{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.exame-item__texto strong{font-family:Archivo;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.exame-item__texto span{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.exame-item__seta{color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:opacity .16s ease,transform .16s ease;margin-top:.15rem}
.exame-item:hover .exame-item__seta{opacity:1;transform:translateX(0)}
@media (hover:none){.exame-item__seta{opacity:.5;transform:none}}

/* Duracao do exame, na listagem. Fica abaixo do resumo e em corpo
   menor: e informacao de apoio, nao o que a pessoa esta procurando. */
.exame-item__meta{display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft)}
.exame-item__meta svg{color:var(--accent)}

.solucao-item__qtd{color:var(--ink-soft);font-weight:400}

/* Blocos de apoio, sem moldura: fio em cima e icone marcando o assunto. */
.apoios{display:flex;flex-direction:column;gap:1.4rem}
.apoio{display:flex;flex-direction:column;gap:.4rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.apoio:first-child{border-top-color:var(--accent);border-top-width:2px}
.apoio .ico{color:var(--accent)}
.apoio h3{font-size:1.02rem}
.apoio p{color:var(--ink-soft);font-size:.93rem;line-height:1.55}

/* ---- solucoes do lab ---- */
.lista-solucoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.6rem;margin-top:.4rem}
@media (max-width:520px){.lista-solucoes{grid-template-columns:minmax(0,1fr)}}
.solucao-item{display:flex;align-items:center;gap:.65rem;padding:.7rem 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  font-family:Archivo;font-weight:600;font-size:.95rem}
.solucao-item .ico{color:var(--scan);flex:none}
.solucao-item:hover{color:var(--accent)}

/* ---- artigos do blog ----
   Miniatura a esquerda e texto a direita, separados por fio. Cartao com
   imagem grande no topo empurra o terceiro artigo para fora da tela; a
   miniatura mostra a mesma quantidade de artigos em metade da altura. */
.grade-artigos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.6rem,4vw,3.4rem);border-bottom:1px solid var(--line)}
@media (max-width:760px){.grade-artigos{grid-template-columns:minmax(0,1fr)}}

.artigo-item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;
  align-items:start;padding:1.15rem .2rem;border-top:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background .16s ease}
.artigo-item:hover{background:var(--accent-soft)}
@media (max-width:400px){.artigo-item{grid-template-columns:84px minmax(0,1fr);gap:.8rem}}

.artigo-item__foto{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.artigo-item__foto img{width:100%;height:100%;object-fit:cover;display:block}
.artigo-item__texto{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.artigo-item__cat{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.artigo-item__texto strong{font-family:Archivo;font-weight:700;font-size:1rem;
  letter-spacing:-.01em;line-height:1.3}
.artigo-item__resumo{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.artigo-item__data{font-size:.78rem;color:var(--ink-soft);margin-top:.15rem}

/* Artigo sem imagem nao deixa a coluna da miniatura reservada. */
.artigo-item:not(:has(.artigo-item__foto)){grid-template-columns:minmax(0,1fr)}

/* ---- depoimentos ---- */
.depoimentos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.6rem,4vw,3rem)}
@media (max-width:860px){.depoimentos{grid-template-columns:minmax(0,1fr);row-gap:1.8rem}}
.depoimento{margin:0;display:flex;flex-direction:column;gap:.6rem;padding-top:1.4rem;
  border-top:2px solid var(--accent)}
.depoimento blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.depoimento blockquote::before{content:"\201C"}
.depoimento blockquote::after{content:"\201D"}
.depoimento figcaption{font-family:Archivo;font-weight:600;font-size:.92rem;color:var(--ink-soft)}

/* ---- convenios ---- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;margin-top:1.4rem}
/* Limite de altura e de largura juntos. So a altura nao basta: marca
   escrita e comprida e deitada, escudo e quase quadrado, entao na mesma
   altura o escudo parece bem menor. O teto de largura segura as compridas
   e permite subir a altura, o que equilibra os dois formatos. */
/* Teto de largura em 200px, e nao 170: os arquivos oficiais sao mais
   compridos que os antigos, e com o teto anterior o DentalUni ficava com
   27px de altura contra 52px dos demais.

   Sem escala de cinza. Com os arquivos oficiais coloridos, o filtro
   estragava as marcas em que a cor carrega a estrutura: no OdontoLife os
   quadrados viravam um bloco cinza unico, e no GEAP o nome e o
   complemento ficavam no mesmo tom e pareciam sobrepostos. */
.logos__marca{height:52px;width:150px;object-fit:contain;opacity:.85;
  transition:opacity .2s ease,transform .2s ease}
.logos__marca:hover{opacity:1;transform:scale(1.05)}

/* Quando o parceiro tem site cadastrado, o logo vem dentro de um link.
   O <a> precisa ser flex: em display inline ele herda a linha de texto e
   sobra um vao embaixo da imagem, que desalinha esse logo dos vizinhos.
   O foco visivel importa mais aqui do que no resto do site, porque quem
   navega por teclado nao tem outra pista de que o logo e clicavel. */
.logos__link{display:inline-flex;align-items:center;border-radius:8px;
  text-decoration:none;line-height:0}
.logos__link:hover .logos__marca,
.logos__link:focus-visible .logos__marca{opacity:1;transform:scale(1.05)}
.logos__link:hover .logos__nome{color:var(--marca)}
.logos__link:focus-visible{outline:3px solid var(--marca);outline-offset:4px}

/* Texto so para leitor de tela. Sai da tela sem sair da arvore de
   acessibilidade, ao contrario de display:none, que apagaria o aviso
   para quem mais precisa dele. */
.sr-only{position:absolute;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}
.logos__nome{font-family:Archivo;font-weight:600;font-size:.95rem;color:var(--ink-soft)}

/* ---------- pagina A Odontoimagem ----------
   Mesmo desenho da home: fio no lugar de moldura, e a cor entrando em
   faixa inteira quando precisa destacar. A pagina antes era um texto
   corrido com dois cartoes no fim; agora ela conta a historia em
   marcos, que e o formato que as pessoas leem numa pagina institucional
   sem precisar ler tudo.                                              */

.sobre-abertura{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:stretch}
@media (max-width:900px){.sobre-abertura{grid-template-columns:minmax(0,1fr)}}
.sobre-abertura p{margin-bottom:1rem;color:var(--ink-soft)}

/* O primeiro paragrafo entra maior: da o tom e convida a continuar. */
.texto-guia{font-size:1.12rem;line-height:1.6;color:var(--ink)}

/* A foto acompanha a altura da coluna de texto em vez de manter os 2:3
   rigidos. Fixa na proporcao, ela ficava mais curta que o texto agora
   que a linha do tempo entrou ao lado, e sobrava vao embaixo dela.
   Nao usa sticky de proposito: a coluna nao deve flutuar na rolagem. */
.sobre-foto{margin:0;border-radius:14px;overflow:hidden;background:var(--surface-2);
  min-height:460px}
.sobre-foto img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.sobre-foto{aspect-ratio:2/3;min-height:0;max-width:360px}}
.sobre-foto .vazia{width:100%;height:100%}

/* ---- marcos ---- */
.marcos{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:820px){.marcos{grid-template-columns:minmax(0,1fr);row-gap:1.8rem}}

.marco{padding-top:1.2rem;border-top:2px solid var(--accent);
  display:flex;flex-direction:column;gap:.35rem}

/* Versao em coluna, usada ao lado da foto em pe. O fio vertical liga os
   marcos e o ponto marca cada ano, que e como uma linha do tempo e lida
   quando corre de cima para baixo. */
.marcos--coluna{grid-template-columns:minmax(0,1fr);margin-top:2.2rem}
.marcos--coluna .marco{border-top:0;border-left:2px solid var(--line);
  padding:0 0 1.7rem 1.5rem;position:relative}
.marcos--coluna .marco:last-child{padding-bottom:0;border-left-color:transparent}
.marcos--coluna .marco::before{content:"";position:absolute;left:-8px;top:.3rem;
  width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--ground)}
.marcos--coluna .marco__ano{font-size:1.35rem}
.marcos--coluna .marco h3{font-size:1rem;margin-top:.1rem}
.marco__ano{font-family:Archivo;font-weight:800;font-size:1.9rem;line-height:1;
  letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.marco h3{font-size:1.05rem;margin-top:.2rem}
.marco p{color:var(--ink-soft);font-size:.94rem;line-height:1.55}

/* ---- missao na faixa da marca ---- */
.missao{max-width:60ch}
/* #d6e4ff, e nao um azul mais claro qualquer: em texto pequeno em caixa
   alta o minimo da norma e 4,5:1, e o tom anterior parava em 4,23. Este
   fica em 4,96 sobre o azul da marca. */
.missao__chapeu{color:#d6e4ff}
.missao__texto{font-family:Archivo;font-weight:600;font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.35;letter-spacing:-.02em;color:#fff;margin-top:.6rem}

/* ---- valores ---- */
.valores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.6rem);border-bottom:1px solid var(--line)}
@media (max-width:860px){.valores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.valores{grid-template-columns:minmax(0,1fr)}}
.valor{display:flex;align-items:center;gap:.7rem;padding:.95rem .2rem;
  border-top:1px solid var(--line);font-family:Archivo;font-weight:600;font-size:.97rem}
.valor .ico{color:var(--accent);flex:none}

/* ---- corpo clinico ---- */
.equipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,3rem)}
@media (max-width:820px){.equipe{grid-template-columns:minmax(0,1fr)}}

.pessoa{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:480px){.pessoa{grid-template-columns:96px minmax(0,1fr);gap:.9rem}}

/* Sem foto cadastrada, a coluna dela nao pode continuar reservada: os
   dados caiam nos 132px e o nome quebrava em quatro linhas. */
.pessoa--sem-foto{grid-template-columns:minmax(0,1fr)}
.pessoa__foto{border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:var(--surface-2)}
.pessoa__foto img{width:100%;height:100%;object-fit:cover;display:block}
.pessoa__dados h3{font-size:1.08rem}
.pessoa__cargo{color:var(--accent);font-size:.86rem;font-family:Archivo;font-weight:600;
  margin:.15rem 0 .6rem}
.pessoa__formacao{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;
  color:var(--ink-soft);font-size:.92rem}
.pessoa__formacao li{padding-left:.95rem;position:relative}
.pessoa__formacao li::before{content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--line)}

/* ---- chamada de fim de pagina ---- */
.chamada{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--line)}
.chamada h2{font-size:1.5rem}

/* Bloco do Odontoimagem Club */
.club{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.4rem,4vw,3rem);
  align-items:center}
@media (max-width:760px){.club{grid-template-columns:minmax(0,1fr)}.club__selo{display:none}}
.club .btn{margin-top:.8rem}
.club__selo{color:var(--accent);opacity:.18}

/* ---------- conteúdo de texto ---------- */
.conteudo{max-width:none;width:100%}
.conteudo p{margin-bottom:1rem}
.conteudo h2,.conteudo h3{margin:1.6rem 0 .7rem}
.conteudo ul,.conteudo ol{color:var(--ink-soft);padding-left:1.2rem}
.lista-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.lista-check li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-soft);font-size:.95rem}
.lista-check .ico{color:var(--accent);flex:none;margin-top:.15rem}

/* Perguntas frequentes sem caixa: cada uma e uma linha separada por
   fio, e o sinal de mais vira menos quando abre. O marcador padrao do
   navegador, aquele triangulo preto, e desligado porque destoa do resto
   do site e nao da para estilizar direito em todos eles. */
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--line)}

/* Duas colunas em tela larga. As perguntas nao dependem uma da outra,
   entao dividir em duas encurta a rolagem pela metade. */
.faq--duas{column-gap:clamp(1.6rem,4vw,3.4rem)}
@media (min-width:900px){.faq--duas{grid-template-columns:repeat(2,minmax(0,1fr))}}

.faq details{border-top:1px solid var(--line);padding:.95rem .2rem}
.faq summary{cursor:pointer;font-family:Archivo;font-weight:600;font-size:.98rem;
  list-style:none;display:flex;align-items:flex-start;gap:.7rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
/* O mais e o menos sao desenhados com CSS, nao escritos com um
   caractere. A versao anterior usava o sinal de menos tipografico e
   ele nao existe na fonte monoespacada carregada aqui: o navegador
   entao desenhava a caixinha com o codigo do caractere dentro.
   Duas barras em degrade nao dependem de fonte nenhuma e ficam
   iguais em qualquer sistema. */
.faq summary::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  margin-top:.1rem;background-color:var(--accent-soft);
  background-image:linear-gradient(var(--accent),var(--accent)),
                   linear-gradient(var(--accent),var(--accent));
  background-size:10px 2px,2px 10px;background-position:center,center;
  background-repeat:no-repeat;transition:background-color .18s ease}
.faq details[open] summary{color:var(--accent)}

/* Aberto: some a barra vertical e sobra o menos, sobre o azul cheio. */
.faq details[open] summary::before{background-color:var(--accent);
  background-image:linear-gradient(#fff,#fff);
  background-size:10px 2px;background-position:center;background-repeat:no-repeat}
.faq p{margin:.6rem 0 .2rem 1.9rem;color:var(--ink-soft);font-size:.94rem;line-height:1.55}
@media (max-width:520px){.faq p{margin-left:0}}

/* ---------- formulários ---------- */
/* O minmax(0,1fr) acima nao e detalhe de estilo, e o que impede a pagina
   de esticar. Item de grid tem largura minima automatica calculada pelo
   conteudo, e campo de formulario tem largura intrinseca de uns 170px:
   com doze colunas de "1fr" puro, o formulario exigia mais de 2000px e
   criava rolagem horizontal no celular em toda pagina que tem form.
   O min-width:0 nos campos fecha o mesmo buraco um nivel abaixo.        */
.form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.campo{display:flex;flex-direction:column;gap:.35rem;grid-column:span 12;min-width:0}
.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c8{grid-column:span 8}
@media (max-width:700px){.c6,.c4,.c3,.c8{grid-column:span 12}}
.campo label{font-size:.88rem;font-weight:600;font-family:Archivo}
.campo input,.campo select,.campo textarea{
  padding:.7rem .85rem;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;
  width:100%;min-width:0;max-width:100%}
.campo textarea{min-height:120px;resize:vertical}
.campo small{font-size:.8rem;color:var(--ink-soft)}
.obrig{color:#b91c1c}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft)}
.check input{width:auto;margin-top:.25rem}

.aviso{padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1.4rem;font-size:.95rem}
.aviso--ok{background:#dcfce7;color:#14532d;border:1px solid #86efac}
.aviso--erro{background:#fee2e2;color:#7f1d1d;border:1px solid #fca5a5}

/* ---------- cartao de contato ----------
   O cartao da pagina de contato tem estilo proprio, e nao o do resumo do
   agendamento: ali sao pares de rotulo e valor tabulados, aqui e uma
   lista de canais em que cada linha precisa ser tocavel no celular.    */

.cartao-contato{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem;align-self:start;box-shadow:var(--shadow)}
.cartao-contato h3{margin-bottom:1.1rem}

.contato-lista{list-style:none;margin:0 0 1.3rem;padding:0;
  display:flex;flex-direction:column;gap:1rem}
.contato-lista li{display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;
  line-height:1.45;color:var(--ink)}
.contato-lista .ico{color:var(--accent);flex:none;margin-top:.1rem}

/* O rotulo e menor que o valor de proposito: quem le procura o telefone,
   nao a palavra "telefone". */
.contato-lista b{display:block;font-family:Archivo;font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.15rem}
.contato-lista a{color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent}
.contato-lista a:hover{color:var(--accent);border-bottom-color:currentColor}

.cartao-contato .btn{width:100%;justify-content:center}
.cartao-contato .btn + .btn{margin-top:.6rem}

.mapa{margin-top:1.3rem;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* Linha de acao do formulario: o botao tem o tamanho do proprio texto.
   Dentro de .campo, que e uma coluna flex, ele esticava de ponta a ponta
   e parecia uma faixa, nao um botao. */
.campo--acao{flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.campo--acao .btn{align-self:flex-start}
.campo--acao small{color:var(--ink-soft);font-size:.85rem}

/* ---------- os dois canais de agendamento ----------
   Sem caixa, no mesmo desenho da home: um fio separa as colunas e a cor
   do icone diz qual e qual. O do WhatsApp usa o verde da propria marca
   dele, que e a unica cor fora da paleta permitida no site, justamente
   porque as pessoas reconhecem o canal pela cor antes de ler.        */

.canais{padding-block:clamp(32px,4vw,40px) 0}
.canais__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,4vw,3rem)}
@media (max-width:820px){
  .canais__grade{grid-template-columns:minmax(0,1fr);gap:0}
}

.canal{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding-top:.4rem}
@media (max-width:820px){
  .canal + .canal{margin-top:1.6rem}
}

.canal h2{font-size:1.18rem}
.canal p{color:var(--ink-soft);font-size:.95rem;max-width:46ch}
.canal .btn{margin-top:.3rem}
.canal__ico{color:var(--accent)}
.canal__ico--zap{color:var(--zap)}

/* ---------- agendamento ----------
   Escrito pensando primeiro no celular, que e onde o paciente agenda.
   Duas decisoes vem dai: os alvos de toque tem 48px de altura minima, e
   o botao de enviar vira uma barra fixa no rodape. Antes ele ficava no
   fim da coluna da direita, o que no celular significava rolar o
   formulario inteiro para achar o botao.                                */

.agenda{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
.agenda > *{min-width:0}
@media (max-width:960px){.agenda{grid-template-columns:minmax(0,1fr)}}

/* Quatro linhas na grade: 1 escolha de dia e horario, 2 titulo da etapa 3,
   3 campos, 4 aviso final. A etapa 3 ocupa as linhas 2 a 4 emprestando as
   linhas do pai com subgrid, e o resumo entra na linha 3.

   E isso que faz o cartao nascer exatamente no topo dos campos, sem
   sticky e sem margem chutada. Foi medido na pagina publicada:
   formulario e resumo comecam no mesmo pixel.

   O row-gap vai a zero porque o espacamento entre as etapas ja vem da
   margem de ".escolha + .passo"; mantendo os dois, o resumo descolava
   19px, metade do intervalo da grade. */
@media (min-width:961px){
  .agenda{grid-template-rows:auto auto auto auto;row-gap:0}
  .escolha{grid-row:1;grid-column:1 / -1}
  .agenda > .passo{grid-row:2 / span 3;grid-column:1;display:grid;grid-template-rows:subgrid}
  .agenda > .resumo-agenda{grid-row:3;grid-column:2}
}

/* Cabecalho numerado de cada etapa */
.passo-titulo{display:flex;align-items:center;gap:.7rem;margin:0 0 .4rem}
.passo-titulo b{flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:.85rem;display:grid;place-items:center}
.passo-titulo h2{font-size:1.25rem}
.passo-apoio{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem 42px}
@media (max-width:560px){.passo-apoio{margin-left:0}}
.passo + .passo{margin-top:2.2rem}
/* Etapa do exame, antes da grade dia/horário */
.passo--exame{margin-bottom:2.2rem}
.passo--exame select{width:100%}

/* Dia e horario lado a lado, quando a tela permite.
   O ponto de corte e 1080px e nao os 960px do resto da pagina porque
   aqui sao tres colunas somadas: calendario, horarios e o resumo da
   direita. Abaixo disso, empilha, que e o comportamento do celular.  */
.escolha{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem;grid-column:1 / -1}
.escolha > .passo{margin-top:0}
/* A etapa 3 vem depois de uma div, e nao de outra .passo, entao o
   seletor de irmao adjacente nao a alcanca. Sem esta linha ela
   grudaria no calendario. */
.escolha + .passo{margin-top:2.2rem}

@media (min-width:961px){
  .escolha{grid-template-columns:minmax(280px,340px) minmax(0,1fr);
    gap:1.8rem;align-items:start;grid-template-rows:auto auto auto}

  /* Alinha titulo, texto de apoio e conteudo entre as duas colunas.
     Sem isso, o apoio da etapa 1 ocupa duas linhas e o da etapa 2 uma,
     e os dois cartoes comecam em alturas diferentes, o que faz o par
     parecer desalinhado por descuido.

     Navegador sem subgrid ignora as duas declaracoes e cai no
     comportamento anterior, que funciona, so nao alinha. */
  .escolha > .passo{display:grid;grid-row:span 3;grid-template-rows:subgrid}

  /* Lado a lado, os horarios ganham a mesma moldura do calendario para
     as duas colunas lerem como um par, e nao como um cartao ao lado de
     um punhado de botoes soltos. */
  .escolha .horarios{border:1px solid var(--line);border-radius:14px;
    background:var(--surface);padding:.9rem}
}

/* Calendario do mes, no desenho do seletor de data do Google: cabecalho
   com o mes e as setas, linha dos dias da semana e a grade de sete
   colunas. O dia e um circulo, nao um retangulo, porque circulo separa
   melhor o numero do dia da celula vizinha quando a grade fica apertada
   no celular.

   O que muda em relacao ao Google: dia sem vaga aparece apagado e nao
   clicavel, em vez de simplesmente selecionavel. Aqui a data so existe
   se a clinica tiver horario nela.                                     */

.cal{max-width:380px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:.9rem .9rem 1rem}
@media (max-width:420px){.cal{max-width:none;padding:.7rem .5rem .9rem}}

.cal__topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.cal__mes{font-family:Archivo;font-size:1.02rem;font-weight:700;text-transform:capitalize;
  letter-spacing:-.01em;text-align:center;flex:1}
.cal__nav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);text-decoration:none;flex:none;transition:background .15s ease}
.cal__nav:hover{background:var(--surface-2)}
.cal__nav--off{opacity:.28;pointer-events:none}

.cal__semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:.25rem}
.cal__semana span{text-align:center;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);padding:.3rem 0}

.cal__grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal__celula{display:grid;place-items:center;aspect-ratio:1/1}

.cal__dia{width:92%;max-width:44px;aspect-ratio:1/1;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;color:var(--ink);
  font-size:.95rem;font-variant-numeric:tabular-nums;
  transition:background .15s ease,color .15s ease}

/* Dia com vaga: ganha peso e reage ao toque. */
a.cal__dia{font-weight:600}
a.cal__dia:hover{background:var(--accent-soft);color:var(--accent)}

/* Hoje: so o contorno, como no Google. */
.cal__dia--hoje{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}

/* Dia escolhido: circulo cheio. Vence o contorno de hoje. */
a.cal__dia--sel,a.cal__dia--sel:hover{background:var(--accent);color:#fff;box-shadow:none}

/* Sem vaga: visivel, porem apagado e sem clique. Some seria pior,
   porque o paciente perderia a nocao de onde o dia cai na semana. */
.cal__dia--off{color:var(--ink-soft);opacity:.38;cursor:default}

.cal__aviso{margin-top:.8rem;font-size:.88rem;color:var(--ink-soft);text-align:center}
.cal__aviso a{color:var(--accent);font-weight:600}

/* Horarios. O :has cobre navegador moderno; a classe .hora--sel e posta
   pelo script e cobre o resto, para a escolha nunca ficar sem retorno
   visual.                                                              */
.horarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
.hora{position:relative;min-height:48px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:.95rem;
  color:var(--ink);transition:background .15s ease,border-color .15s ease}
.hora:hover{border-color:var(--accent)}
.hora input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.hora:has(input:checked),.hora--sel{background:var(--accent);border-color:var(--accent);color:#fff}
.hora:focus-within{outline:3px solid var(--accent);outline-offset:2px}
/* Horario tomado na agenda: visivel, inativo, riscado. */
.hora--off{cursor:not-allowed;color:var(--ink-soft);background:var(--surface-2);border-style:dashed;opacity:.55;text-decoration:line-through}
.hora--off:hover{border-color:var(--line)}
.cal__dia--cheio{text-decoration:line-through}

/* Resumo lateral, so no desktop */
/* O resumo fica parado, alinhado com o topo dos campos.
   Ele nao usa sticky de proposito: como divide a linha da grade com a
   etapa 3, ja nasce na altura certa, e acompanhar a rolagem faria o
   cartao passear por cima de um formulario que esta parado. */
.resumo-agenda{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;align-self:start}
.resumo-agenda dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1rem;margin:.9rem 0 0}
.resumo-agenda dt{color:var(--ink-soft);font-size:.86rem}
.resumo-agenda dd{margin:0;font-size:.95rem;font-weight:600;word-break:break-word}
@media (max-width:960px){.resumo-agenda{display:none}}

.apoio-final{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.4rem;
  font-size:.9rem;color:var(--ink-soft)}
.apoio-final svg{color:var(--accent);flex:none;margin-top:.15rem}


/* Barra fixa do celular, com o resumo curto e o botao de enviar */
.barra-acao{display:none}
@media (max-width:960px){
  .barra-acao{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:.8rem;padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -16px rgba(15,27,43,.5)}
  .barra-acao__resumo{flex:1;min-width:0;font-size:.82rem;line-height:1.3;color:var(--ink-soft)}
  .barra-acao__resumo strong{display:block;color:var(--ink);font-family:Archivo;font-size:.95rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-acao .btn{flex:none;padding:.75rem 1.1rem}

  /* A barra ocupa o rodape, entao o conteudo ganha folga e o botao
     flutuante do WhatsApp sai de cena para nao brigar com ela.        */
  .pg-agendamento{padding-bottom:88px}
  .pg-agendamento .float{display:none}
}

.protocolo{font-family:"IBM Plex Mono",monospace;font-size:1.3rem;color:var(--accent);
  background:var(--accent-soft);padding:.5rem .9rem;border-radius:9px;display:inline-block}

/* ---------- catálogo ---------- */
.familia{margin-bottom:2.4rem}
.tabela-rolagem{overflow-x:auto}
.tabela-catalogo{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.tabela-catalogo th{text-align:left;font-family:Archivo;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft);padding:.6rem .7rem;border-bottom:1px solid var(--line)}
.tabela-catalogo td{padding:.75rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.tabela-catalogo tr:hover td{background:var(--surface)}

/* ---------- rodapé ---------- */
footer{background:var(--ink);color:#e8eef8;padding-block:52px 22px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
@media (max-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
footer .brand__logo{height:40px;margin-bottom:.2rem}
/* Texto curto sob a logo. Largura em ch para quebrar em duas ou tres
   linhas e nao virar um paragrafo que compete com as colunas de links. */
.foot-sobre{margin:.9rem 0 1.1rem;max-width:36ch;font-size:.92rem;line-height:1.55;color:#b9c7dc}
footer h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#93a6c4;
  margin:0 0 .8rem;font-family:Archivo}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.92rem}
footer a{text-decoration:none;color:#d5dfef}
/* Azul do rodape: o #0048fa da marca sobre o grafite da 2,7:1, ilegivel;
   este e o mesmo azul levantado ate 5,4:1. Vale para titulo, hover de
   link e hover de icone, para o rodape inteiro responder da mesma cor. */
footer{--foot-azul:#4d8dff}
footer h4{color:var(--foot-azul)}
footer a:hover{color:var(--foot-azul)}
.socials a:hover{color:var(--foot-azul);border-color:var(--foot-azul)}
/* Marcador em cada item das colunas: ponto azul, desenhado em CSS. */
footer ul li{position:relative;padding-left:.95rem}
footer ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--foot-azul)}
.rt{margin-top:1rem;font-size:.86rem;color:#93a6c4;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.socials{display:flex;gap:.6rem;margin-top:.9rem}
.socials a{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#93a6c4}

/* ---------- whatsapp flutuante ---------- */
.float{position:fixed;right:18px;bottom:18px;z-index:55;display:inline-flex;align-items:center;
  gap:.55rem;background:var(--zap);color:#fff;padding:.8rem 1.1rem;border-radius:999px;
  text-decoration:none;font-family:Archivo;font-weight:600;font-size:.92rem;
  box-shadow:0 10px 26px -10px rgba(30,169,92,.75)}
@media (max-width:520px){.float span{display:none}.float{padding:.9rem}}
/* So o icone: 56px de alvo, redondo. Azul da marca quando abre o chat da
   Mari, verde quando o destino e o WhatsApp; a cor diz para onde vai. */
.float--icone{padding:0;width:56px;height:56px;justify-content:center;gap:0}
.float--icone svg{width:26px;height:26px}
.float--chat{background:var(--accent);box-shadow:0 10px 26px -10px rgba(15,95,196,.8)}
.float--chat:hover{background:var(--marca)}
/* Com a foto da atendente, o botao vira o retrato dela, redondo. */
.float--foto{overflow:hidden;border:2px solid #fff}
.float--foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

@media print{.masthead,.utility,.float,footer{display:none}}


/* ---------- detalhe do artigo: texto + coluna lateral ---------- */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.post-principal{min-width:0}
.post-lateral{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.4rem}
.post-lateral__bloco{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.25rem}
.post-lateral__bloco--cta{background:var(--accent-soft);border-color:transparent}
.post-lateral__bloco--cta p{color:var(--ink-soft);font-size:.92rem;margin:.4rem 0 .9rem}
.post-lateral__titulo{font-family:Archivo;font-weight:700;font-size:1.05rem;margin:0 0 .8rem}
.post-recentes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.post-recentes li{border-top:1px solid var(--line)}
.post-recentes li:first-child{border-top:0}
.post-recentes a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.75rem;align-items:center;padding:.65rem 0;text-decoration:none;color:inherit}
.post-recentes a:not(:has(.post-recentes__foto)){grid-template-columns:minmax(0,1fr)}
.post-recentes__foto{width:64px;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.post-recentes__foto img{width:100%;height:100%;object-fit:cover;display:block}
.post-recentes__texto{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.post-recentes__texto strong{font-family:Archivo;font-weight:600;font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-recentes__texto span{font-size:.78rem;color:var(--ink-soft)}
.post-recentes a:hover strong{color:var(--accent)}
.post-lateral__todos{margin-top:1rem;width:100%;justify-content:center}
.compartilhar{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.compartilhar__rotulo{display:block;font-family:Archivo;font-weight:700;font-size:.95rem;margin-bottom:.7rem}
.compartilhar__botoes{display:flex;flex-wrap:wrap;gap:.5rem}
.compartilhar__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.compartilhar__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.compartilhar__btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.compartilhar__btn--whatsapp:hover{background:#25d366;border-color:#25d366}
.compartilhar__btn--facebook:hover{background:#1877f2;border-color:#1877f2}
.compartilhar__btn--linkedin:hover{background:#0a66c2;border-color:#0a66c2}
.compartilhar__btn--x:hover{background:#111;border-color:#111}
@media (max-width:900px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .post-lateral{position:static}
}


/* ---------- home: últimas do blog ---------- */
.sec-head--linha{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1.5rem;max-width:none;text-align:left}
.sec-head--linha>div{max-width:70ch;display:flex;flex-direction:column;gap:.7rem}
.sec-head--linha .btn{flex:none}
@media (max-width:720px){.sec-head--linha{flex-direction:column;align-items:flex-start}}
.blog-home{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2rem)}
@media (max-width:900px){.blog-home{grid-template-columns:minmax(0,1fr)}}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,27,43,.10)}
.blog-card__foto{display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.blog-card__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.blog-card:hover .blog-card__foto img{transform:scale(1.04)}
.blog-card__vazia{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.5}
.blog-card__texto{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.blog-card__meta{font-size:.78rem;color:var(--ink-soft)}
.blog-card__cat{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.blog-card__texto strong{font-family:Archivo;font-weight:700;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.blog-card__resumo{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.blog-card__ler{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.9rem;color:var(--accent)}
.blog-card__ler svg{transition:transform .18s ease}
.blog-card:hover .blog-card__ler svg{transform:translateX(4px)}

/* Âncoras do agendamento param abaixo do cabeçalho fixo, e a rolagem é suave. */
html{scroll-behavior:smooth}
#formAgenda,#horariosAgenda,#dadosAgenda{scroll-margin-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Captcha nos formulários */
.campo--captcha{grid-column:1 / -1}
.campo--captcha .g-recaptcha{margin:.2rem 0 .3rem}
.campo--captcha small{display:block;color:var(--ink-soft);font-size:.82rem}