/* ==========================================================================
   PALETA E FONTES · Dra. Natália Menezes

   Carrega DEPOIS do base.css e ganha dele. Se a paleta não aparecer, o mais
   provável é que a ordem dos dois <link> no index.html esteja invertida.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. PALETA

     De onde vieram as cores: do manual de marca dela, feito pela Portugal
     Indica (enviado pelo Fernando em 15/09/2026). São três cores:
       verde, a cor principal ............ #868F65
       marrom, o destaque ................ #84520F
       tons de pele, o creme de fundo .... #F7EFEB
     Os valores foram tirados da imagem do manual. Se a designer passar os
     hex oficiais, é só trocar aqui.

     O verde do manual é claro demais pra botão com texto branco (3,4:1).
     A cor de marca da página é o mesmo verde mais fechado, que dá 5:1.
     O verde original do manual entra como --marca-clara, e o marrom entra
     como cor de detalhe no bloco 3.8 lá embaixo.
     ------------------------------------------------------------------ */

  --marca-rgb:        107 116  81;   /* #6B7451 · verde do manual, fechado pra botão */
  --marca-escura-rgb:  83  91  62;   /* #535B3E · hover e fim do degradê */
  --marca-clara-rgb:  169 176 138;   /* #A9B08A · verde claro, detalhe no rodapé escuro */
  --neutro-rgb:       244 236 231;   /* #F4ECE7 · tons de pele do manual */
  --tinta-rgb:         46  42  37;   /* #2E2A25 · texto principal */
  --tinta-suave-rgb:  102  98  90;   /* #66625A · texto secundário */
  --escuro-rgb:        47  51  39;   /* #2F3327 · rodapé, verde quase preto */
  --detalhe:          #84520F;       /* marrom do manual */

  /* ------------------------------------------------------------------
     2. FONTES
     Playfair Display combina com o desenho do monograma dela e com a
     tipografia serifada que ela já usa nos posts.
     ------------------------------------------------------------------ */

  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-titulo:  700;
  --peso-h2:      600;
}


/* ==========================================================================
   3. SÓ DESTA PÁGINA

   3.1 As fotos chegaram recortadas, com fundo transparente. A moldura branca
       com sombra do modelo só funciona em foto retangular: no recorte ela
       vira uma caixa branca com a pessoa flutuando dentro. Este bloco troca
       a moldura por um esmaecido e põe teto de altura nas três, pra foto de
       corpo em pé não esticar a seção inteira. Não apagar.
   ========================================================================== */

.hero__foto, .destaque__foto, .sobre__foto {
  display: flex; align-items: flex-end; justify-content: center;
}
.hero__foto::before, .destaque__foto::before, .sobre__foto::before {
  transform: none; border: 0;
  background: linear-gradient(to bottom, rgb(var(--marca-rgb) / .2), rgb(var(--neutro-rgb) / .85));
}
.hero__foto::before { inset: 48px 0 0; }   /* a cabeça sai por cima do painel */
.hero__foto img, .destaque__foto img, .sobre__foto img {
  width: auto; max-width: 100%; object-fit: contain;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 18px 26px rgb(var(--tinta-rgb) / .22));
}
.hero__foto img { max-height: 620px; }
.destaque__foto img, .sobre__foto img { max-height: 560px; }
@media (max-width: 899px) {
  .hero__foto img { max-height: 480px; }
  .destaque__foto img, .sobre__foto img { max-height: 440px; }
}

/* 3.2 O degradê do modelo termina na cor clara. Com a paleta dela, a ponta
       clara sumia em cima do fundo creme e a metade da manchete do topo
       ficava quase invisível. Aqui o degradê fica dentro da família do verde,
       que segura o contraste do começo ao fim.

       Trocar só o background-image: o atalho "background" zera junto o
       background-clip e a palavra vira uma tarja cheia. */
.texto-degrade { background-image: linear-gradient(135deg, var(--marca-escura), var(--marca)); }

/* 3.3 Em 15/09/2026 ela mandou o logo sem fundo: o monograma NM em traço fino,
       quase preto (43, 29, 24). O modelo recorta o logo num círculo com borda,
       porque conta com um selo cheio: aqui isso comia as pontas do M e deixava
       um anel em volta do vazio. Então o desenho fica inteiro, na proporção
       dele, sem moldura.

       O traço escuro também sumia no rodapé, que é verde quase preto. O filtro
       joga o desenho todo pro branco, e só lá. */
.marca-topo img, .rodape__marca img {
  border-radius: 0; object-fit: contain; width: auto; border: 0;
}
.marca-topo img  { height: 46px; }
.rodape__marca img { height: 38px; opacity: .92; }
@media (min-width: 900px) { .marca-topo img { height: 52px; } }

/* 3.4 "Dermatologia clínica e cirúrgica" é uma linha comprida pro cabeçalho.
       No modelo o nome e a especialidade correm colados, então essa linha
       quebrava no meio ("Dermatologia" em cima, "clínica e cirúrgica"
       embaixo) e ainda empurrava o menu, a ponto de "Por que tratar?" virar
       três linhas numa tela de 1440px. Aqui a especialidade ganha a linha
       de baixo e o menu para de quebrar. */
.marca-topo__nome, .marca-topo__sub { display: block; }
.cabecalho__nav a { white-space: nowrap; }

/* 3.5 Os dois quadros do Instagram levam print de tela. O modelo desenha eles
       quase quadrados e corta o que sobra, o que comeria a bio do perfil no
       primeiro e uma fileira inteira de posts no segundo. Aqui o quadro fica
       na proporção do próprio print (4 por 5) e o corte tira só 1%. */
.insta-slot { min-height: 0; aspect-ratio: 4 / 5; background: var(--branco); }

/* 3.6 O horário dela muda em cada dia da semana. Uma linha só ("segunda a
       sexta") ficaria mentirosa, então o rodapé lista dia por dia. */
.rodape__horarios { display: grid; gap: 3px; margin-top: 4px; }
.rodape__horarios span { font-size: 12px; color: rgb(255 255 255 / .45); }

/* 3.7 As seis credenciais entram em duas fileiras de três. O base.css já faz
       isso; esta regra só impede que a última fileira fique torta quando a
       tela é estreita demais pra três colunas. */
@media (min-width: 600px) and (max-width: 799px) {
  .credenciais { grid-template-columns: repeat(2, 1fr); }
}

/* 3.8 O marrom do manual de marca entra nos detalhes que ficam em fundo claro:
       a barrinha embaixo dos títulos, os ícones da lista de dores e a borda
       das citações. O verde claro sumiria no creme nesses lugares. */
.barrinha { background: var(--detalhe); }
.dores__item > .icone { color: var(--detalhe); }
.solucao__texto, .citacao { border-left-color: var(--detalhe); }

/* ==========================================================================
   3.9 AS CORES DO MANUAL NO FUNDO DAS SEÇÕES

   Pedido do Fernando em 15/09/2026: a página tem que parecer da marca dela,
   com as cores do manual pintando o fundo das seções inteiras. A ordem
   alterna claro e escuro pra cada seção ter começo e fim visíveis:

     topo ............. tons de pele
     faixa de números . verde
     dores ............ cinza esverdeado (o fundo do próprio manual)
     tratamentos ...... verde
     diferenciais ..... tons de pele
     sobre ............ marrom
     depoimentos ...... verde claro
     perguntas ........ tons de pele
     Instagram ........ cinza esverdeado
     chamada final .... marrom
     rodapé ........... verde quase preto

   O verde de fundo é o do manual mais fechado (#5E6647), porque texto
   branco em cima do verde puro dá 3,4:1. Assim dá 6:1. Branco em cima do
   marrom dá 6,6:1.
   ========================================================================== */
:root {
  --pele:          #F7EFEB;
  --verde-fundo:   #5E6647;
  --verde-claro:   #E3E6D8;
  --cinza-verde:   #ECEDE5;
  --marrom:        #84520F;
  --marrom-escuro: #6B4209;
  --luz-verde:     #D9DEC4;   /* destaque de texto em cima do verde */
  --luz-marrom:    #F1DCC0;   /* destaque de texto em cima do marrom */
}

/* ---- fundos claros ---- */
.hero__fundo { background: var(--pele); }
#problema     { background: var(--cinza-verde); }
#problema .linha-topo { display: none; }
#problema .dores__painel { background: rgb(255 255 255 / .45); }
#diferenciais { background: var(--pele); }
#avaliacoes   { background: var(--verde-claro); }
#faq          { background: var(--pele); }
#instagram    { background: var(--cinza-verde); }

/* ---- faixa de números, verde ---- */
.numeros { background: var(--verde-fundo); border: 0; }
.numeros__valor { color: var(--pele); }
.numeros__texto { color: rgb(247 239 235 / .82); }

/* ---- texto em qualquer seção escura ---- */
#destaque h2, #destaque h3, #sobre h2, #sobre h3 { color: var(--pele); }
#destaque p, #sobre p { color: rgb(255 255 255 / .84); }
#destaque .citacao, #sobre .citacao { background: rgb(255 255 255 / .08); color: var(--pele); }

/* ---- tratamentos, verde ---- */
#destaque { background: var(--verde-fundo); }
#destaque .bolha--marca  { background: rgb(255 255 255 / .05); }
#destaque .bolha--neutra { background: rgb(134 143 101 / .45); }
#destaque .rotulo { color: var(--pele); }
#destaque .texto-degrade { background-image: linear-gradient(135deg, var(--luz-verde), var(--pele)); }
#destaque .barrinha { background: var(--luz-verde); }
#destaque .citacao { border-left-color: var(--luz-verde); }
#destaque .beneficios li { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); }
#destaque .beneficios li:hover { border-color: rgb(255 255 255 / .45); }
#destaque .beneficios strong { color: var(--pele); }
#destaque .beneficios p { color: rgb(255 255 255 / .75); }
#destaque .beneficios .icone { color: var(--luz-verde); }
#destaque .destaque__foto::before { background: linear-gradient(to bottom, rgb(247 239 235 / .1), rgb(247 239 235 / .32)); }

/* ---- sobre, marrom ---- */
#sobre { background: var(--marrom); }
#sobre .rotulo, #sobre .destaque-marca { color: var(--luz-marrom); }
#sobre .barrinha { background: var(--luz-marrom); }
#sobre .citacao { border-left-color: var(--luz-marrom); }
#sobre .sobre__bio strong { color: var(--pele); }
#sobre .credenciais li { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); }
#sobre .credenciais span { color: var(--pele); }
#sobre .credenciais .icone { color: var(--luz-marrom); }
#sobre .sobre__foto::before { background: linear-gradient(to bottom, rgb(247 239 235 / .1), rgb(247 239 235 / .3)); }
#sobre .botao--marca { background: var(--pele); color: var(--marrom); }
#sobre .botao--marca:hover { background: var(--branco); }
#sobre :focus-visible, #destaque :focus-visible { outline-color: var(--pele); }

/* ---- chamada final, marrom ---- */
.secao.chamada-final { background: linear-gradient(to right, var(--marrom), var(--marrom-escuro)); }
.chamada-final .botao--branco { color: var(--marrom); }

/* 3.10 A seção de tratamentos e a chamada final têm dois botões cada: o do
        WhatsApp e o da agenda da Doctoralia. O .botao--contorno do modelo é
        verde em cima de fundo claro, e as duas seções são escuras (verde e
        marrom), então ele some. Aqui o contorno vira creme.

        O par de botões fica alinhado à esquerda nos tratamentos, que é onde o
        texto está, e centralizado na chamada final. No celular eles empilham. */
.botao--contorno-claro {
  border: 2px solid rgb(247 239 235 / .55); color: var(--pele);
  padding: 14px 32px; font-size: 16px;                /* 14 + 2 de borda = a altura do botão cheio */
}
.botao--contorno-claro:hover { background: rgb(247 239 235 / .14); border-color: var(--pele); }
.chamada-final .botao--contorno-claro { padding: 16px 38px; font-size: 18px; }
.botoes-final { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.chamada-final .botoes-final { justify-content: center; }

/* No celular os dois empilham. Sem isto o de baixo fica 11px mais largo que o
   de cima, e o degrau aparece porque eles ficam encostados um no outro. */
@media (max-width: 620px) {
  .botoes-final a { flex: 1 1 100%; justify-content: center; }
}
.rodape__contato a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 3.11 A seção de tratamentos passou de quatro pra cinco grupos em 15/09/2026,
        quando a cirurgia virou item próprio a pedido dela. O modelo desenha
        dois por linha, então o quinto ficava sozinho na esquerda com um buraco
        do lado. Aqui ele ocupa a linha inteira. */
#destaque .beneficios > li:nth-child(5):last-child { grid-column: 1 / -1; }

/* ==========================================================================
   3.12 A SEÇÃO DE CIRURGIA (passo a passo)

   Seção nova de 15/09/2026, entre tratamentos e diferenciais. Ela usa os
   cartões do modelo, só que com número no lugar do ícone, e reaproveita a
   lista de benefícios pras quatro dúvidas de baixo.

   A cor é o cinza esverdeado do manual, pra ela não encostar no verde escuro
   dos tratamentos, que vem logo acima, nem no creme dos diferenciais, logo
   abaixo.
   ========================================================================== */
.secao--passos { background: var(--cinza-verde); }

.passos { list-style: none; padding: 0; margin: 0 0 40px; }
.passos .cartao { align-items: flex-start; text-align: left; }

/* o número no lugar do ícone: mesmo círculo, fonte de título */
.passos__numero {
  font-family: var(--fonte-titulo);
  font-size: 30px; font-weight: 700; line-height: 1;
  margin-bottom: 20px;
}
.cartao:hover .passos__numero { color: var(--branco); }

.passos__duvidas {
  background: var(--branco);
  border: 1px solid rgb(var(--marca-rgb) / .15);
  border-radius: var(--raio-g);
  padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.passos__duvidas > h3 {
  font-family: var(--fonte-corpo);
  font-size: 17px; font-weight: 700; color: var(--tinta);
}
.passos__duvidas .beneficios li { background: rgb(var(--neutro-rgb) / .35); }
.passos__duvidas .beneficios .icone { color: var(--marrom); }
@media (min-width: 760px) {
  .passos__duvidas .beneficios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .passos__duvidas { padding: 24px 20px; }
}

/* ==========================================================================
   3.13 CONTRASTE E ÁREA DE TOQUE NO CELULAR

   Conferência de 15/09/2026, medindo texto por texto em 375px de largura.
   Quarenta e cinco textos estavam abaixo do mínimo de leitura (4,5 pra texto
   normal, 3 pra título grande). Quase todos por pouco, entre 3,4 e 4,4: são
   cinzas e cremes com transparência que funcionam em tela grande e somem no
   celular, onde a tela é menor e quase sempre tem sol batendo.

   Depois deste bloco sobram três, e os três são o verde do WhatsApp com texto
   branco, que dá 1,98. Esse fica: é a cor oficial do aplicativo, é como o
   botão é reconhecido no mundo inteiro, e escurecer até passar no teste
   deixaria ele com cara de outra coisa.
   ========================================================================== */

/* --- faixa de números: creme a 82% em cima do verde dava 4,2 --- */
.numeros__texto { color: rgb(247 239 235 / .95); }

/* --- tratamentos: o cartão e a citação tinham fundo BRANCO a 8% em cima do
       verde, o que clareia o fundo e come o contraste do texto claro. Preto a
       13% escurece, e aí o creme do texto respira. --- */
#destaque .beneficios li, #destaque .citacao { background: rgb(0 0 0 / .13); }
#destaque .beneficios p { color: rgb(255 255 255 / .90); }

/* --- os rótulos de seção usavam o verde da marca em cima de fundo claro, o
       que dava de 3,9 a 4,4 dependendo da seção. O verde fechado resolve os
       cinco de uma vez. --- */
#problema .rotulo, #avaliacoes .rotulo, #faq .rotulo, #diferenciais .rotulo,
#cirurgia .rotulo, .instagram__seguidores,
#instagram .botao--contorno .icone { color: var(--marca-escura); }

/* --- ícones das credenciais: o bege claro em cima do marrom dava 4,1 --- */
#sobre .credenciais .icone { color: var(--pele); }

/* --- rodapé: branco a 45% e a 40% em cima do verde quase preto --- */
.rodape__contato small, .rodape__horarios span { color: rgb(255 255 255 / .62); }
.rodape__base p { color: rgb(255 255 255 / .58); }

/* --- ÁREA DE TOQUE ---
   O dedo não acerta alvo de 20 pixels de altura. O mínimo que a Apple e o
   Google pedem é 44. Aqui os links continuam do mesmo tamanho na tela: o que
   cresce é a área clicável em volta deles. --- */
.menu-lateral__topo button {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin-right: -10px;                      /* pra não empurrar o "Menu" */
}
.menu-lateral__lista a { min-height: 48px; }
.rodape__contato a { display: inline-block; padding: 10px 0; }

/* A especialidade no cabeçalho vinha em 11px, que é abaixo do que se lê num
   celular na rua. Em 12px ainda sobram 58 pixels de folga na barra, então não
   volta a empurrar o menu (que é o problema do bloco 3.4). */
.marca-topo__sub { font-size: 12px; }
.botao-texto { padding: 11px 0; }

/* Os links rápidos do rodapé são sete. Empilhados com 44 pixels cada, viravam
   trezentos pixels de rodapé no celular. Em duas colunas eles ganham a altura
   de toque e o rodapé encolhe pela metade. */
.rodape__links a { padding: 11px 0; }
@media (max-width: 899px) {
  .rodape__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .rodape__redes a { width: 44px; height: 44px; }
}

/* ==========================================================================
   3.14 O CABEÇALHO NO VERDE DA MARCA

   Pedido do Fernando em 15/09/2026. O modelo desenha a barra do topo em branco
   com um pouco de transparência; aqui ela fica no verde do manual, com o mesmo
   desfoque por trás. Vale nas duas telas, computador e celular.

   O verde é o quase preto do rodapé (#2F3327), e não o verde médio das seções.
   Com o verde médio a barra sumia em cima da seção de tratamentos, que é
   pintada nesse mesmo verde: rolando a página, o topo e a seção viravam uma
   mancha só. No quase preto ela se separa das três cores do miolo, e ainda
   fecha a página com o rodapé, que é da mesma cor.

   Como a barra ficou escura, tudo que estava em cima dela precisou virar
   claro: o nome, a especialidade, o logo (que é traço quase preto e sumia), os
   links do menu e o risquinho do menu do celular.

   O botão do WhatsApp continua no verde dele. São dois verdes diferentes, mas
   um é oliva fechado e o outro é o verde limão saturado do aplicativo: em cima
   da barra escura ele salta mais do que saltava no branco.
   ========================================================================== */
.cabecalho {
  background: rgb(47 51 39 / .93);        /* o mesmo verde quase preto do rodapé */
  border-bottom: 1px solid rgb(255 255 255 / .10);
}
.cabecalho.rolou { box-shadow: 0 4px 22px rgb(0 0 0 / .22); }

.marca-topo img { opacity: .95; }
.marca-topo__nome { color: var(--pele); }
.marca-topo__sub  { color: rgb(247 239 235 / .72); }

.cabecalho__nav a { color: rgb(247 239 235 / .88); }
.cabecalho__nav a:hover { color: var(--pele); background: rgb(255 255 255 / .12); }

.cabecalho__nav a.destaque {
  color: var(--pele);
  background: rgb(255 255 255 / .12);
  border-color: rgb(247 239 235 / .45);
}
.cabecalho__nav a.destaque:hover {
  background: var(--pele);
  color: var(--verde-fundo);
  border-color: var(--pele);
}

.abrir-menu { color: var(--pele); }

/* --- o cabeçalho no celular ---
   Com a barra escura ficou visível uma coisa que o fundo branco escondia: o
   nome e a especialidade não cabem lado a lado numa tela de celular. "Dra.
   Natália Menezes" pede 185 pixels e "Dermatologia clínica e cirúrgica" pede
   195, e sobram 166. Os dois quebravam em duas linhas cada, e a marca saía 82
   pixels de altura dentro de uma barra de 80.

   No celular fica só o nome, numa linha. A especialidade não se perde: ela é a
   primeira coisa escrita embaixo da barra, no rótulo do topo ("Dermatologista
   em Casa Caiada, Olinda"). De 900 pixels pra cima nada muda. */
@media (max-width: 899px) {
  .marca-topo__sub  { display: none; }
  .marca-topo__nome { font-size: clamp(14px, 4.4vw, 19px); white-space: nowrap; }
}

/* Em tela bem estreita (iPhone SE e parecidos) nem o nome sozinho cabe com o
   logo do tamanho normal. Aqui o logo encolhe e as folgas das pontas diminuem. */
@media (max-width: 360px) {
  .marca-topo img { height: 40px; }
  .cabecalho__espaco { width: 16px; }
  .cabecalho__barra { padding-inline: 14px; }
}

/* ==========================================================================
   3.15 O BOTÃO DO WHATSAPP NA PALETA DELA

   Pedido do Fernando em 18/09/2026: sair do verde limão do aplicativo. O
   botão agora usa o verde da marca, o mesmo dos outros botões cheios, e
   continua com o ícone do WhatsApp, que é o que diz pra onde ele leva.
   Com isso o 1,98 de contraste do bloco 3.13 deixou de existir: verde da
   marca com texto branco dá 5:1.

   Na seção de tratamentos o fundo já é verde, então lá o botão inverte:
   fundo creme e letra verde, igual ao botão da seção Sobre. O botão que
   flutua no canto ganha um anel creme pra não sumir quando passa por cima
   das seções verdes.
   ========================================================================== */
:root { --whatsapp: var(--marca); }
.botao--whatsapp { box-shadow: var(--sombra-marca); }
.botao--whatsapp:hover { filter: none; background: var(--marca-escura); box-shadow: var(--sombra-marca); }

#destaque .botao--whatsapp { background: var(--pele); color: var(--verde-fundo); box-shadow: 0 8px 20px rgb(0 0 0 / .18); }
#destaque .botao--whatsapp:hover { background: var(--branco); }

.whatsapp-flutuante { border: 2px solid rgb(247 239 235 / .85); }
@keyframes pulso-whatsapp {
  0%   { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 0 rgb(var(--marca-rgb) / .45); }
  70%  { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 16px rgb(var(--marca-rgb) / 0); }
  100% { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 0 rgb(var(--marca-rgb) / 0); }
}

/* O botão da Doctoralia no topo, ao lado do WhatsApp. Contorno verde em vez
   de fundo cheio, porque o WhatsApp continua sendo o caminho principal. A
   altura bate com a do botão cheio. */
.hero .botoes { flex-wrap: wrap; gap: 12px 14px; }
.hero .botoes .botao--whatsapp { padding-inline: 26px; }
.hero .botao--contorno { padding: 14px 24px; background: rgb(255 255 255 / .5); }
.hero .botao--contorno:hover { background: var(--marca); }
.hero .botoes .botao-texto { flex-basis: 100%; }   /* o "Conhecer" desce pra linha de baixo */
@media (min-width: 900px) {
  .hero__texto .botoes { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .hero .botoes .botao-texto { flex-basis: auto; }
}
@media (max-width: 620px) {
  .hero .botoes .botao { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   3.16 O CONSULTÓRIO

   Seção nova de 18/09/2026, entre Sobre (marrom) e avaliações (verde claro),
   com fundo em tons de pele pra separar as duas. Texto de um lado e as três
   fotos do outro: a da parede verde com o logo em pé, grande, e as outras
   duas empilhadas do lado. As duas pequenas são recortadas em paisagem, e o
   object-position escolhe o pedaço que interessa de cada uma.
   ========================================================================== */
#consultorio { background: var(--pele); }
#consultorio .rotulo { color: var(--marca-escura); }

.consultorio__grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .consultorio__grade { grid-template-columns: 5fr 7fr; gap: 64px; }
}
.consultorio__texto p { color: var(--tinta-suave); margin-bottom: 14px; }
.consultorio__texto .botao { margin-top: 8px; }

.consultorio__info { list-style: none; padding: 0; margin: 20px 0; }
.consultorio__info li { display: flex; gap: 12px; align-items: flex-start; color: var(--tinta); font-weight: 500; line-height: 1.5; }
.consultorio__info small { color: var(--tinta-suave); font-weight: 400; font-size: 14px; }
.consultorio__info .icone { color: var(--detalhe); margin-top: 2px; }

.consultorio__fotos {
  display: grid; gap: 14px;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.consultorio__fotos img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--raio-g);
  box-shadow: 0 14px 30px rgb(var(--tinta-rgb) / .14);
}
.consultorio__principal { grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.consultorio__fotos img:nth-child(2) { object-position: 50% 62%; }   /* a mesa e as cadeiras */
.consultorio__fotos img:nth-child(3) { object-position: 60% 55%; }   /* a cadeira de exame */

@media (max-width: 599px) {
  .consultorio__fotos { gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .consultorio__principal { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .consultorio__fotos img:not(.consultorio__principal) { aspect-ratio: 1; }
}