/* Fontes hospedadas no proprio site (subconjunto latin, cobre o portugues com acentos).
   Sao variaveis: um arquivo cobre toda a faixa de pesos usada. Os nomes de familia sao os
   mesmos do Google Fonts, entao nada muda visualmente. */
@font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 400; font-display:swap;
  src:url("/fontes/cormorant-garamond-latin-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:300; font-display:swap;
  src:url("/fontes/cormorant-garamond-latin-italico-300.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url("/fontes/jost-latin-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Sistema de design do Dr. Rafael Dourado — fonte única de verdade.
   Alterou aqui, mudou no site inteiro e na documentação. */
/* ==========================================================================
   FICHAS DE DESIGN — a fonte única de verdade do site.
   Nada abaixo deste bloco inventa um valor novo.
   ========================================================================== */
:root {
  /* Declaramos tratar os DOIS esquemas de cor. Não é firula: o navegador do celular
     só deixa a página em paz quando ela demonstra cuidar do próprio tema escuro —
     senão ele escurece tudo sozinho e o areia quente vira marrom. O que fazemos no
     escuro está no bloco prefers-color-scheme lá embaixo. */
  color-scheme: light dark;

  /* Azul-marinho — a cor da marca, medida no logotipo */
  --azul-950:#03121F; --azul-900:#051D36; --azul-800:#072747; --azul-700:#0B3660;
  /* azul de SUPERFICIE: mesmo matiz da marca, saturacao baixa - e o que cobre area grande */
  --fundo-950:#010813; --fundo-900:#071523; --fundo-800:#142538; --fundo-700:#1B3A5C;
  --azul-600:#14497D; --azul-500:#1E5C99; --azul-400:#4A80B4; --azul-300:#8FB0CE;
  --azul-200:#C6D7E6; --azul-100:#E8EFF5;

  /* Dourado do LOGOTIPO — medido no degradê da arte.
     Só a marca e o botão de conversa usam este. */
  --ouro-700:#7A590C; --ouro-650:#8A6410; --ouro-600:#A87B11; --ouro-500:#D2A522;
  --ouro-400:#E7BE4A; --ouro-300:#EFCB63; --ouro-200:#F5DFA0; --ouro-100:#FBF1D6;
  --ouro-degrade: linear-gradient(105deg,#F0C428 0%,#D2A522 55%,#A87B11 100%);

  /* Bronze — o dourado de INTERFACE, na saturação medida nas duas referências.
     Croma 0,055 contra 0,144 do ouro do logotipo: é o que separa refinado de chamativo. */
  --bronze-700:#786744; --bronze-650:#897854; --bronze-600:#9C8A66; --bronze-500:#B5A27D;
  --bronze-400:#CEBC96; --bronze-300:#E2CFA8; --bronze-200:#ECE0C8; --bronze-100:#FBEFD6;
  --bronze-fio: linear-gradient(90deg,transparent,#B5A27D 22%,#CEBC96 50%,#B5A27D 78%,transparent);

  /* Neutros quentes — o respiro. Matiz 82, o mesmo das referências. */
  --areia-50:#FAF7F0; --areia-100:#F5EFE4; --areia-150:#F1EADE; --areia-200:#EBE2D3;
  --areia-300:#E3DEDE; --areia-400:#D4C9B7;

  /* Texto */
  /* tres niveis, todos acima de 4,5 de contraste no fundo mais escuro em que aparecem */
  --tinta:#14202E; --tinta-media:#4C5663; --tinta-fraca:#5E6774;
  --tinta-clara:#FFFFFF; --tinta-clara-media:rgba(255,255,255,.78); --tinta-clara-fraca:rgba(255,255,255,.62);

  /* Apoio e traços */
  --sucesso:#1F7A5C; --alerta:#9A5B10; --erro:#A32A24;
  --fio:rgba(11,54,96,.11); --fio-forte:rgba(11,54,96,.24);
  --fio-claro:rgba(255,255,255,.16); --fio-claro-forte:rgba(255,255,255,.34);

  /* Tipografia */
  --fonte-titulo:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --fonte-texto:"Jost","Century Gothic",Futura,-apple-system,"Segoe UI",system-ui,sans-serif;
  --t-display:clamp(3.25rem,7.4vw,6.5rem);
  --t-titulo-1:clamp(2.5rem,5vw,4rem);
  --t-titulo-2:clamp(1.875rem,3.2vw,2.75rem);
  --t-titulo-3:clamp(1.375rem,2vw,1.75rem);
  --t-destaque:clamp(1.1875rem,1.6vw,1.5rem);
  --t-corpo:clamp(1.0625rem,1.15vw,1.1875rem); --t-apoio:.9375rem; --t-miudo:.8125rem; --t-rotulo:.6875rem;
  --altura-display:.99; --altura-titulo:1.12; --altura-texto:1.8;
  --entreletra-display:-.022em; --entreletra-rotulo:.28em;
  --largura-leitura:60ch;

  /* Espaço — base 4 */
  --esp-1:4px;  --esp-2:8px;  --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;
  --esp-7:48px; --esp-8:64px; --esp-9:96px; --esp-10:128px; --esp-11:160px; --esp-12:200px;
  --secao-y:clamp(80px,9vw,168px);
  --container:1240px; --coluna-texto:720px; --goteira:clamp(24px,5vw,64px);

  /* Forma */
  --raio-0:0; --raio-1:2px; --raio-2:4px; --raio-pilula:999px;
  --arco:50% 50% 0 0 / 34% 34% 0 0;

  /* Sombras — usadas com parcimônia */
  /* espalhamento muito negativo: sombra difusa e azulada, nunca borrão cinza */
  --sombra-1:0 10px 28px -24px rgba(20,37,54,.50);
  --sombra-2:0 16px 40px -30px rgba(20,37,54,.55);
  --sombra-3:0 28px 64px -34px rgba(20,37,54,.60);
  --sombra-foco:0 0 0 2px var(--areia-50), 0 0 0 4px var(--bronze-500);

  /* Movimento */
  --curva:cubic-bezier(.16,1,.32,1); --rapido:180ms; --padrao:280ms; --lento:520ms;
  --revelar:1s; --aproximar:1.6s;
}

/* ==========================================================================
   CELULAR NO MODO ESCURO — por que este bloco existe

   O Samsung Internet, o Chrome do Android e os navegadores embutidos das redes
   sociais escurecem por conta própria QUALQUER página que não prove ter tema
   escuro. O algoritmo deles inverte o areia (#FAF7F0, matiz quente) e o resultado
   é marrom, com a escrita preta virando branca. Nenhuma regra de cor vence isso:
   o escurecimento acontece depois da folha de estilo, na hora de pintar a tela.

   O único jeito de fazer o navegador recuar é ter este bloco. Ao encontrá-lo, ele
   entende que a página se encarrega das próprias cores e não encosta em nada.
   Os valores repetem de propósito os do tema claro: a clínica tem uma identidade
   só, e ela é a mesma no computador e no celular.

   Não apague este bloco por parecer redundante — sem ele o site volta a ficar
   marrom no celular, e só no celular.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --areia-50:#FAF7F0; --areia-100:#F5EFE4; --areia-150:#F1EADE; --areia-200:#EBE2D3;
    --areia-300:#E3DEDE; --areia-400:#D4C9B7;
    --tinta:#14202E; --tinta-media:#4C5663; --tinta-fraca:#5E6774;
    --tinta-clara:#FFFFFF;
  }
  body {
    background:linear-gradient(150deg,var(--areia-50) 0%,var(--areia-100) 100%);
    color:var(--tinta);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--tinta);
  /* iluminação: o fundo não é chapado, é um degradê de 150 graus preso à janela */
  background:linear-gradient(150deg,var(--areia-50) 0%,var(--areia-100) 100%);
  background-attachment:fixed;
  font-family:var(--fonte-texto); font-size:var(--t-corpo); font-weight:300;
  line-height:var(--altura-texto);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; }
/* As fotos passaram a ser servidas em WebP com <picture> por cima do <img>.
   Sem isto o <picture> entra na arvore de layout como uma caixa inline no meio
   do caminho, e toda regra do tipo ".heroi__foto img { height:100% }" passa a
   medir a altura do <picture> (que e automatica) em vez da moldura — resultado:
   a foto colapsa e some da tela. display:contents apaga a caixa do <picture> e
   devolve o <img> a posicao de filho direto da moldura. */
picture { display:contents; }
h1,h2,h3,h4 { font-family:var(--fonte-titulo); font-weight:300; margin:0 0 var(--esp-5); }
h1 { font-size:var(--t-display);  line-height:var(--altura-display); letter-spacing:var(--entreletra-display); }
h2 { font-size:var(--t-titulo-1); line-height:var(--altura-titulo); letter-spacing:-.015em; }
h3 { font-size:var(--t-titulo-2); line-height:var(--altura-titulo); letter-spacing:-.01em; }
h4 { font-family:var(--fonte-texto); font-size:var(--t-miudo); font-weight:500;
     text-transform:uppercase; letter-spacing:.16em; color:var(--tinta); margin-bottom:var(--esp-5); }
p { margin:0 0 var(--esp-5); max-width:var(--largura-leitura); }
a { color:var(--azul-700); text-underline-offset:.24em; text-decoration-thickness:1px; }
code { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.84em;
       color:var(--azul-800); background:var(--areia-200); padding:.1em .4em; border-radius:var(--raio-1);
       overflow-wrap:anywhere; }
:focus-visible { outline:none; box-shadow:var(--sombra-foco); border-radius:var(--raio-1); }
.rolagem { overflow-x:auto; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--goteira); }
.secao { padding-block:var(--secao-y); border-top:1px solid var(--fio); }
/* o degrade para na areia-150: mais escuro que isso e o texto de 11px reprova no contraste */
.secao--areia { background:linear-gradient(150deg,var(--areia-100) 0%,var(--areia-150) 100%); }
.secao--escura { background:radial-gradient(90% 120% at 22% 0%, var(--fundo-800) 0%, var(--fundo-900) 62%, var(--fundo-950) 100%);
                 color:var(--tinta-clara); border-top-color:rgba(255,255,255,.08); }
.secao--escura h2,.secao--escura h3,.secao--escura h4 { color:var(--tinta-clara); }
.secao--escura p { color:var(--tinta-clara-media); }

/* Composição editorial: rótulo fixo à esquerda, conteúdo à direita */
.bloco { display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
.bloco__lado { position:sticky; top:96px; }
/* sem isto, o bloco de codigo estica a coluna e a pagina rola de lado no celular */
.bloco > *, .grade-2 > *, .grade-3 > * { min-width:0; }
.codigo { max-width:100%; }
@media (max-width:900px) { .bloco { grid-template-columns:1fr; gap:var(--esp-6); } .bloco__lado { position:static; } }

.numero-secao {
  font-family:var(--fonte-titulo); font-size:.9375rem; font-weight:400;
  color:var(--bronze-700); letter-spacing:.08em; display:block; margin-bottom:var(--esp-3);
}
.secao--escura .numero-secao { color:var(--bronze-400); }
.olho {
  display:block; font-size:var(--t-rotulo); font-weight:500; text-transform:uppercase;
  letter-spacing:var(--entreletra-rotulo); color:var(--tinta-media); margin-bottom:var(--esp-4);
}
.secao--escura .olho { color:var(--tinta-clara-fraca); }
.olho--ouro { color:var(--bronze-700); }
.fio-ouro { width:56px; height:1px; background:var(--bronze-fio); border:0; margin:0 0 var(--esp-6); }
.fio-h { height:1px; background:var(--fio); border:0; margin-block:var(--esp-8); }
.entrada { color:var(--tinta-media); font-size:var(--t-destaque); font-weight:200; line-height:1.55; max-width:40ch; }
.secao--escura .entrada { color:var(--tinta-clara-media); }
.italico { font-style:italic; }
.ouro { color:var(--bronze-700); }
.secao--escura .ouro { color:var(--bronze-400); }
.miudo { font-size:var(--t-miudo); color:var(--tinta-fraca); line-height:1.6; max-width:52ch; }
.secao--escura .miudo { color:var(--tinta-clara-fraca); }
.hex { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.88em; }

/* ==========================================================================
   TOPO
   ========================================================================== */
.topo {
  position:sticky; top:0; z-index:60;
  background:rgba(250,248,246,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--fio);
}
.topo__interno { display:flex; align-items:center; justify-content:space-between; gap:var(--esp-6); padding-block:var(--esp-4); }
.topo__marca { display:flex; align-items:center; gap:var(--esp-5); }
.topo__marca img { height:30px; width:auto; display:block; }
.topo__etiqueta { font-size:var(--t-rotulo); letter-spacing:var(--entreletra-rotulo); text-transform:uppercase; color:var(--tinta-fraca); white-space:nowrap; }
@media (max-width:1140px) { .topo__etiqueta { display:none; } }
.indice { display:flex; flex-wrap:nowrap; gap:var(--esp-5); font-size:var(--t-rotulo);
          text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
@media (max-width:1240px) { .indice a:nth-child(n+8) { display:none; } }
.indice a { color:var(--tinta-media); text-decoration:none; transition:color var(--padrao) var(--curva); }
.indice a:hover { color:var(--azul-700); }
@media (max-width:1000px) { .indice { display:none; } }

/* ==========================================================================
   ABERTURA
   ========================================================================== */
.abertura {
  position:relative; overflow:hidden;
  background:radial-gradient(118% 92% at 78% 10%, var(--fundo-700) 0%, var(--fundo-800) 44%, var(--fundo-950) 100%);
  color:var(--tinta-clara); padding-block:clamp(96px,14vw,208px);
}
.abertura__marca-fundo {
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(44vw,580px); opacity:.045; pointer-events:none;
}
.abertura__interno { position:relative; z-index:1; }
.abertura__base { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,6vw,80px);
                  align-items:end; margin-top:clamp(40px,5vw,72px); }
@media (max-width:900px) { .abertura__base { grid-template-columns:1fr; } .abertura__marca-fundo { display:none; } }
.abertura h1 { color:#fff; margin-bottom:var(--esp-6); }
.abertura .entrada { color:var(--tinta-clara-media); max-width:46ch; }
.abertura__assinatura { width:min(230px,38vw); justify-self:end; }
@media (max-width:900px) { .abertura__assinatura { justify-self:start; width:180px; } }
.abertura__meta { display:flex; flex-wrap:wrap; gap:var(--esp-3) var(--esp-7); margin-top:var(--esp-8);
                  font-size:var(--t-rotulo); text-transform:uppercase; letter-spacing:var(--entreletra-rotulo);
                  color:var(--tinta-clara-fraca); }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.botao {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-3);
  min-height:56px; padding:var(--esp-4) var(--esp-7);
  font-family:var(--fonte-texto); font-size:var(--t-rotulo); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--raio-1); cursor:pointer; background:none;
  transition:background var(--padrao) var(--curva), color var(--padrao) var(--curva),
             border-color var(--padrao) var(--curva), box-shadow var(--padrao) var(--curva);
}
.botao--primario { background:var(--azul-700); color:#fff; }
.botao--primario:hover { background:var(--azul-900); box-shadow:var(--sombra-2); }
.botao--contorno { color:var(--azul-700); border-color:var(--fio-forte); }
.botao--contorno:hover { border-color:var(--azul-700); background:rgba(11,54,96,.035); }
.botao--claro { background:#fff; color:var(--azul-800); }
.botao--claro:hover { background:var(--areia-200); }
.botao--fantasma { color:#fff; border-color:var(--fio-claro-forte); }
.botao--fantasma:hover { border-color:#fff; background:rgba(255,255,255,.07); }
.botao--conversa { background:var(--ouro-degrade); color:var(--azul-950); border-radius:var(--raio-pilula); padding-inline:var(--esp-6); }
.botao--conversa:hover { box-shadow:var(--sombra-2); }
.botao[disabled],.botao--inativo { opacity:.4; pointer-events:none; }

.ligacao {
  display:inline-flex; align-items:center; gap:var(--esp-3);
  font-size:var(--t-rotulo); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--azul-700); padding-bottom:var(--esp-2);
  border-bottom:1px solid var(--fio-forte);
  transition:border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.ligacao i { font-style:normal; transition:transform var(--padrao) var(--curva); }
.ligacao:hover { border-color:var(--bronze-500); }
.ligacao:hover i { transform:translateX(5px); }
.secao--escura .ligacao { color:#fff; border-color:var(--fio-claro-forte); }

/* ==========================================================================
   GRADES E PEÇAS
   ========================================================================== */
.grade-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
.grade-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
@media (max-width:820px) { .grade-2,.grade-3 { grid-template-columns:1fr; } }

.item { border-top:1px solid var(--fio); padding-top:var(--esp-5); }
.secao--escura .item { border-top-color:var(--fio-claro); }
.item__n { font-family:var(--fonte-titulo); font-size:1rem; color:var(--bronze-700); display:block; margin-bottom:var(--esp-3); }
.secao--escura .item__n { color:var(--bronze-400); }
.item h3 { font-size:var(--t-titulo-3); margin-bottom:var(--esp-3); }
.item p { font-size:var(--t-apoio); color:var(--tinta-media); margin-bottom:0; }
.secao--escura .item p { color:var(--tinta-clara-media); }

.mostra { border-top:1px solid var(--fio); padding-top:var(--esp-5); margin-bottom:var(--esp-8); }
.mostra__titulo { font-size:var(--t-rotulo); font-weight:500; letter-spacing:var(--entreletra-rotulo);
                  text-transform:uppercase; color:var(--tinta-fraca); margin-bottom:var(--esp-6); }
.mostra__area { padding:clamp(28px,4vw,56px); background:#fff; border:1px solid var(--fio); border-radius:var(--raio-2); }
.mostra__area--areia { background:var(--areia-100); }
.mostra__area--escura { background:radial-gradient(90% 130% at 20% 0%, var(--fundo-800), var(--fundo-900));
                        border-color:var(--fundo-900); }
.mostra__area--escura, .mostra__area--escura h2, .mostra__area--escura h3,
.mostra__area--escura h4 { color:var(--tinta-clara); }
.mostra__area--escura p { color:var(--tinta-clara-media); }
.mostra__area--escura .olho { color:var(--tinta-clara-fraca); }
.mostra__area--escura .miudo { color:var(--tinta-clara-fraca); }
.fila { display:flex; flex-wrap:wrap; gap:var(--esp-4); align-items:center; }

.grade-cores { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--esp-4); }
.cor__amostra { height:96px; border-radius:var(--raio-2); }
.cor__nome { font-size:var(--t-miudo); font-weight:400; margin-top:var(--esp-3); }
.cor__hex { font-size:var(--t-miudo); color:var(--tinta-media); font-family:ui-monospace,Consolas,monospace; }
.cor__uso { font-size:var(--t-miudo); color:var(--tinta-fraca); line-height:1.55; margin-top:var(--esp-2); }

.tabela { width:100%; border-collapse:collapse; font-size:var(--t-apoio); }
.tabela th,.tabela td { text-align:left; padding:var(--esp-4) var(--esp-4) var(--esp-4) 0; border-bottom:1px solid var(--fio); vertical-align:top; }
.tabela th { font-size:var(--t-rotulo); font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--tinta-fraca); }
.tabela td:first-child { color:var(--tinta); }
.selo { display:inline-block; font-size:var(--t-miudo); padding:1px 10px; border-radius:var(--raio-pilula); }
.selo--aprova { background:#E6F1EC; color:var(--sucesso); }
.selo--atencao{ background:var(--ouro-100); color:var(--alerta); }
.selo--reprova{ background:#F9E8E7; color:var(--erro); }

.regras { list-style:none; padding:0; margin:0; }
.regras li { position:relative; padding-left:var(--esp-6); margin-bottom:var(--esp-4);
             font-size:var(--t-apoio); color:var(--tinta-media); max-width:var(--largura-leitura); }
.regras li::before { position:absolute; left:0; top:0; font-size:.9rem; }
.regras--sim li::before { content:"·"; color:var(--bronze-600); font-size:1.4rem; line-height:.9; }
.regras--nao li::before { content:"✕"; color:var(--erro); font-size:.75rem; top:2px; }
.secao--escura .regras li { color:var(--tinta-clara-media); }
.secao--escura .regras--nao li::before { color:#E08C86; }

.cartao-tratamento { border-top:1px solid var(--fio); padding-top:var(--esp-5); }
.cartao-tratamento h3 { font-size:var(--t-titulo-3); margin-bottom:var(--esp-3); }
.cartao-tratamento p { font-size:var(--t-apoio); color:var(--tinta-media); }

.avaliacao { border-left:1px solid var(--bronze-500); padding-left:var(--esp-6); }
.avaliacao__estrelas { color:var(--ouro-500); letter-spacing:.18em; font-size:.8rem; }
.avaliacao__texto { font-family:var(--fonte-titulo); font-size:1.375rem; line-height:1.45; margin:var(--esp-3) 0 var(--esp-5); }
.avaliacao__autor { font-size:var(--t-rotulo); text-transform:uppercase; letter-spacing:.16em; color:var(--tinta-fraca); }

.numero-forte { font-family:var(--fonte-titulo); font-size:clamp(3rem,5vw,4.25rem); font-weight:300;
                line-height:1; color:var(--azul-700); letter-spacing:-.02em; }
.secao--escura .numero-forte { color:var(--ouro-400); }
.numero-forte + p { font-size:var(--t-rotulo); text-transform:uppercase; letter-spacing:.16em;
                    color:var(--tinta-fraca); margin-top:var(--esp-3); }

.foto-arco { border-radius:var(--arco); overflow:hidden; background:var(--areia-200); aspect-ratio:4/5; display:grid; place-items:center; }
.foto-reta { border-radius:var(--raio-1); overflow:hidden; background:var(--areia-200); aspect-ratio:4/5; display:grid; place-items:center; }
.foto-arco img,.foto-reta img { width:44%; opacity:.32; }

.campo { display:block; margin-bottom:var(--esp-6); max-width:420px; }
.campo__rotulo { display:block; font-size:var(--t-rotulo); font-weight:500; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--tinta-media); margin-bottom:var(--esp-3); }
.campo__entrada { width:100%; min-height:56px; padding:var(--esp-4) 0; font-family:var(--fonte-texto);
                  font-size:var(--t-corpo); font-weight:300; color:var(--tinta); background:transparent;
                  border:0; border-bottom:1px solid var(--fio-forte); border-radius:0;
                  transition:border-color var(--rapido) var(--curva); }
.campo__entrada::placeholder { color:var(--tinta-fraca); }
.campo__entrada:focus { outline:none; border-bottom-color:var(--bronze-500); box-shadow:none; }
.campo__ajuda { font-size:var(--t-miudo); color:var(--tinta-fraca); margin-top:var(--esp-3); }
.campo--erro .campo__entrada { border-bottom-color:var(--erro); }
.campo--erro .campo__ajuda { color:var(--erro); }

.acordeao { border-top:1px solid var(--fio); }
.acordeao details { border-bottom:1px solid var(--fio); }
.acordeao summary { list-style:none; cursor:pointer; padding:var(--esp-6) 0; display:flex;
                    justify-content:space-between; align-items:baseline; gap:var(--esp-5);
                    font-family:var(--fonte-titulo); font-size:var(--t-titulo-3); font-weight:300;
                    transition:color var(--padrao) var(--curva); }
.acordeao summary::-webkit-details-marker { display:none; }
.acordeao summary:hover { color:var(--azul-600); }
.acordeao summary::after { content:"+"; font-family:var(--fonte-texto); font-weight:300; font-size:1.25rem;
                           color:var(--bronze-700); transition:transform var(--padrao) var(--curva); }
.acordeao details[open] summary::after { transform:rotate(45deg); }
.acordeao p { padding-bottom:var(--esp-6); color:var(--tinta-media); font-size:var(--t-apoio); }

.assinatura-cro { display:inline-flex; align-items:center; gap:var(--esp-3); font-size:var(--t-rotulo);
                  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-media);
                  padding-bottom:var(--esp-3); border-bottom:1px solid var(--bronze-500); }
.assinatura-cro strong { font-weight:500; color:var(--tinta); }

.escala-espaco { display:flex; align-items:center; gap:var(--esp-4); margin-bottom:var(--esp-3); font-size:var(--t-miudo); color:var(--tinta-media); }
.escala-espaco b { display:block; height:10px; flex:none;
                   background:linear-gradient(90deg,var(--bronze-500),var(--bronze-400)); }
.escala-espaco code { min-width:88px; background:none; padding:0; color:var(--tinta-media); }

.caixa-nota { background:var(--areia-200); border-left:1px solid var(--bronze-500); padding:var(--esp-6) var(--esp-7); }
.caixa-nota p:last-child { margin-bottom:0; }
/* areia-200 e escura demais para o nivel mais fraco de texto */
.caixa-nota .miudo, .ressalva .miudo, .citacao cite,
.mostra__area--areia .miudo { color:var(--tinta-media); }
.secao--escura .caixa-nota { background:rgba(255,255,255,.05); }

.codigo { background:var(--fundo-950); color:#CFDCE9; border-radius:var(--raio-2); padding:clamp(24px,3vw,40px);
          overflow-x:auto; font-size:var(--t-miudo); line-height:1.85;
          font-family:ui-monospace,Consolas,monospace; white-space:pre; }

.rodape { background:var(--fundo-950); color:var(--tinta-clara-media); padding-block:var(--esp-9); }
.rodape img { height:40px; margin-bottom:var(--esp-6); }
.rodape p { color:var(--tinta-clara-media); }
/* sem isto os links do rodape herdam o azul da marca e somem no fundo escuro */
.rodape a { color:var(--bronze-300); text-decoration:none; border-bottom:1px solid rgba(226,207,168,.3); transition:border-color var(--rapido) var(--curva); }
.rodape a:hover { border-color:var(--bronze-300); }

/* ==========================================================================
   PADRÕES DE SEÇÃO — composições inteiras, não peças soltas
   ========================================================================== */
/* Trilha de etapas numeradas */
.trilha { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.trilha__passo { padding:0 var(--esp-5); border-left:1px solid var(--fio-claro); }
.trilha__passo:first-child { border-left:0; padding-left:0; }
.trilha__n { font-family:var(--fonte-titulo); font-size:.9375rem; color:var(--bronze-400); letter-spacing:.08em; }
.trilha__passo h3 { font-size:1.25rem; margin:var(--esp-4) 0 var(--esp-3); }
.trilha__passo p { font-size:var(--t-miudo); line-height:1.65; margin:0; }
@media (max-width:900px) {
  .trilha { grid-template-columns:1fr; }
  .trilha__passo { border-left:0; border-top:1px solid var(--fio-claro); padding:var(--esp-5) 0; }
  .trilha__passo:first-child { border-top:0; padding-top:0; }
}

/* Manifesto: uma frase só, em corpo grande e centralizada */
.manifesto { font-family:var(--fonte-titulo); font-weight:300; font-size:var(--t-titulo-1);
             line-height:1.24; letter-spacing:-.012em; text-align:center;
             max-width:26ch; margin:0 auto; }

/* Chamada final */
.chamada { text-align:center; }
.chamada p { margin-inline:auto; }
.chamada .olho { text-align:center; }

/* Figura clínica: legenda e nota de autorização coladas na imagem */
.figura-clinica { margin:0; }
.figura-clinica__quadro { position:relative; background:var(--areia-200); aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; }
.figura-clinica__quadro img { width:34%; opacity:.3; }
.chip { position:absolute; left:var(--esp-4); bottom:var(--esp-4); background:#fff;
        border-radius:var(--raio-pilula); padding:3px 14px; font-size:var(--t-rotulo);
        letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); }
.legenda { display:block; font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase;
           color:var(--tinta-fraca); margin-top:var(--esp-3); }
.nota-imagem { font-size:var(--t-miudo); color:var(--tinta-fraca); line-height:1.6; margin-top:var(--esp-3); }

/* Ressalva dirigida ao paciente */
.ressalva { background:var(--areia-200); border-left:1px solid var(--bronze-500);
            padding:var(--esp-5) var(--esp-6); font-size:var(--t-apoio); color:var(--tinta-media); }
.ressalva p { margin:0; }

/* Citação assinada pelo profissional */
.citacao { background:var(--areia-200); border-left:1px solid var(--bronze-500); padding:var(--esp-7); }
/* citacao e ressalva tem fundo claro proprio: o texto nunca herda a cor da secao,
   senao dentro de uma secao escura sai branco sobre areia */
.citacao, .citacao blockquote, .ressalva, .ressalva p { color:var(--tinta); }
.secao--escura .citacao, .secao--escura .ressalva { background:var(--areia-200); }
.secao--escura .citacao cite, .secao--escura .ressalva .miudo { color:var(--tinta-media); }
.citacao blockquote { font-family:var(--fonte-titulo); font-weight:300; font-size:var(--t-titulo-2);
                      line-height:1.3; margin:0 0 var(--esp-5); max-width:none; }
.citacao cite { font-style:normal; font-size:var(--t-rotulo); letter-spacing:.16em;
                text-transform:uppercase; color:var(--tinta-fraca); }

/* Par de fotos em arco, deslocado */
.par-arco { display:grid; grid-template-columns:1fr 1fr; gap:var(--esp-5); align-items:start; }
.par-arco > :last-child { margin-top:var(--esp-9); }

/* Fotografia com camada de proteção: o único jeito de pôr texto sobre foto */
.sobre-foto { position:relative; overflow:hidden; background:var(--fundo-800);
              min-height:320px; display:grid; place-items:center; text-align:center;
              padding:clamp(40px,6vw,88px); }
.sobre-foto__foto { position:absolute; inset:0; display:grid; place-items:center; }
.sobre-foto__foto img { width:22%; opacity:.16; }
.sobre-foto::after { content:""; position:absolute; inset:0;
                     background:linear-gradient(180deg, rgba(3,18,31,.62) 0%, rgba(3,18,31,.72) 100%); }
.sobre-foto__conteudo { position:relative; z-index:1; }
.sobre-foto__conteudo h3 { color:#fff; max-width:18ch; margin-inline:auto; }
.sobre-foto__conteudo p { color:rgba(255,255,255,.86); max-width:44ch; margin-inline:auto; }

/* Toda fotografia do site aproxima um pouco ao passar o mouse. A moldura corta o
   excesso, então a imagem cresce por dentro sem empurrar o que está ao redor. */
.heroi__foto, .foto-emoldurada, .foto-larga, .antes-depois__quadro,
.esteira figure, .foto-arco, .foto-reta { overflow:hidden; }
.heroi__foto img, .foto-emoldurada img, .foto-larga img, .antes-depois__quadro img,
.esteira img, .foto-arco img, .foto-reta img {
  transition:transform var(--aproximar) var(--curva);
}
.heroi__foto:hover img, .foto-emoldurada:hover img, .foto-larga:hover img,
.antes-depois__item:hover .antes-depois__quadro img, .esteira figure:hover img,
.foto-arco:hover img, .foto-reta:hover img { transform:scale(1.05); }
@media (prefers-reduced-motion:reduce) {
  .heroi__foto img, .foto-emoldurada img, .foto-larga img, .antes-depois__quadro img,
  .esteira img, .foto-arco img, .foto-reta img { transition:none; transform:none !important; }
}

/* Esteira de resultados: as fotos andam para o lado, sem parar.
   Valores medidos no site da Dentalle — 40 segundos, linear, infinito,
   e a folga de 1,5rem que entra no cálculo do laço. */
.esteira { display:flex; gap:1.5rem; overflow:hidden; user-select:none; }
.esteira__trilha { display:flex; flex-shrink:0; gap:1.5rem; min-width:100%;
                   animation:andar 40s linear infinite; }
.esteira:hover .esteira__trilha { animation-play-state:paused; }
@keyframes andar {
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-100% - 1.5rem)); }
}
.esteira figure { margin:0; flex:0 0 auto; width:clamp(260px,30vw,420px); aspect-ratio:1;
                  overflow:hidden; border-radius:var(--raio-2); background:var(--fundo-800); }
.esteira img { width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce) {
  .esteira__trilha { animation:none; }
  .esteira { overflow-x:auto; }
}

/* Antes e depois: dois painéis com etiqueta, e a seta que liga um ao outro.
   Nada de comparador de arrastar aqui — as duas fotos têm enquadramento,
   expressão e luz diferentes, e a barra deslizante só funciona com par alinhado. */
.antes-depois { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,40px);
                align-items:center; }
.antes-depois__item { margin:0; position:relative; }
.antes-depois__quadro { position:relative; overflow:hidden; border-radius:var(--raio-2);
                        aspect-ratio:3/2; background:var(--fundo-800); }
.antes-depois__quadro img { width:100%; height:100%; object-fit:cover; display:block; }
.antes-depois__etiqueta { position:absolute; left:var(--esp-4); bottom:var(--esp-4);
                          background:rgba(255,255,255,.94); color:var(--tinta);
                          border-radius:var(--raio-pilula); padding:4px 16px;
                          font-size:var(--t-rotulo); letter-spacing:.14em; text-transform:uppercase; }
.antes-depois__seta { font-family:var(--fonte-texto); font-size:1.5rem; color:var(--bronze-400);
                      line-height:1; }
/* em fundo claro o bronze claro sumiria */
.secao:not(.secao--escura) .antes-depois__seta { color:var(--bronze-600); }
@media (max-width:700px) {
  .antes-depois { grid-template-columns:1fr; }
  .antes-depois__seta { transform:rotate(90deg); justify-self:center; }
}

/* Localização */
.local { display:grid; grid-template-columns:1.35fr 1fr; gap:var(--esp-5); align-items:stretch; }
.local__mapa { background:var(--areia-200); min-height:400px; overflow:hidden; }
.local__mapa iframe { width:100%; height:100%; border:0; display:block;
                      filter:saturate(.86) contrast(1.02); }
.local__cartao { background:#fff; border:1px solid var(--fio); padding:var(--esp-6); display:flex; flex-direction:column; gap:var(--esp-4); }
@media (max-width:820px) { .local { grid-template-columns:1fr; } }

/* Capitular, só na primeira letra da página Sobre */
.capitular::first-letter { font-family:var(--fonte-titulo); font-weight:300; font-size:3.6em;
                           line-height:.82; float:left; margin:.08em .1em 0 0; color:var(--azul-700); }

/* Rodapé completo */
.rodape__grade { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--esp-7); }
/* h3, h4 e h5 juntos: o documento passou a usar h3 aqui para nao pular nivel de
   titulo depois dos h3 das secoes (leitor de tela navega por esses niveis).
   O h5 fica declarado junto para nao quebrar nada que ainda o use. */
.rodape__grade h3,
.rodape__grade h4,
.rodape__grade h5 { font-family:var(--fonte-texto); font-size:var(--t-rotulo); font-weight:500;
                    letter-spacing:var(--entreletra-rotulo); text-transform:uppercase;
                    color:var(--tinta-clara-fraca); margin:0 0 var(--esp-4); }
.rodape__grade ul { list-style:none; margin:0; padding:0; font-size:var(--t-apoio); }
.rodape__grade li { margin-bottom:var(--esp-3); }
.rodape__legal { border-top:1px solid rgba(255,255,255,.12); margin-top:var(--esp-8);
                 padding-top:var(--esp-5); font-size:var(--t-miudo); color:var(--tinta-clara-fraca); }
.rodape__legal p { color:var(--tinta-clara-fraca); font-size:var(--t-miudo); max-width:none; }
@media (max-width:820px) { .rodape__grade { grid-template-columns:1fr 1fr; } }

@media (max-width:560px) {
  .tabela th,.tabela td { padding:var(--esp-3) var(--esp-3) var(--esp-3) 0; }
  .acordeao summary { font-size:1.125rem; overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
}

/* ==========================================================================
   ACESSIBILIDADE — PULAR PARA O CONTEÚDO
   Primeiro elemento focável da página. Fica fora da tela até receber o foco
   pelo teclado; aí desce e aparece. Quem usa mouse nunca o vê.
   ========================================================================== */
.pular {
  position:absolute; left:var(--esp-4); top:-100px; z-index:200;
  display:inline-flex; align-items:center; min-height:48px;
  padding:var(--esp-3) var(--esp-6); background:var(--azul-700); color:#fff;
  font-family:var(--fonte-texto); font-size:var(--t-rotulo); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border-radius:0 0 var(--raio-1) var(--raio-1);
  transition:top var(--rapido) var(--curva);
}
.pular:focus { top:0; }

/* ==========================================================================
   MENU DE CELULAR
   Até 1300px o menu horizontal não cabe numa linha só (medido em 25/09: precisa
   de ~1261px). Antes desta gaveta ele simplesmente sumia e o visitante de
   telefone ficava sem navegação nenhuma.
   ========================================================================== */
.menu-botao {
  display:none; align-items:center; justify-content:center; gap:6px;
  width:48px; height:48px; padding:0; flex-direction:column;
  background:none; border:1px solid var(--fio-forte); border-radius:var(--raio-1);
  cursor:pointer; color:var(--azul-800);
}
.menu-botao span { display:block; width:20px; height:1px; background:currentColor;
                   transition:transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva); }
@media (max-width:1300px) { .menu-botao { display:flex; } }

.gaveta { position:fixed; inset:0; z-index:100; background:var(--areia-50);
          display:flex; flex-direction:column; padding:var(--esp-5) var(--goteira) var(--esp-8);
          overflow-y:auto; overscroll-behavior:contain; animation:gaveta-entra .28s var(--curva); }
.gaveta[hidden] { display:none; }
@keyframes gaveta-entra { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.gaveta__topo { display:flex; align-items:center; justify-content:space-between;
                padding-block:var(--esp-4); margin-bottom:var(--esp-7);
                border-bottom:1px solid var(--fio); }
.gaveta__topo img { height:38px; width:auto; display:block; }
.gaveta__fechar { width:48px; height:48px; display:grid; place-items:center;
                  background:none; border:1px solid var(--fio-forte); border-radius:var(--raio-1);
                  font-size:1.5rem; line-height:1; color:var(--azul-800); cursor:pointer; }

.gaveta__links { display:flex; flex-direction:column; }
.gaveta__links a { display:block; padding:var(--esp-5) 0; border-bottom:1px solid var(--fio);
                   font-family:var(--fonte-titulo); font-size:1.65rem; font-weight:300;
                   color:var(--tinta); text-decoration:none; }
.gaveta__links a:hover { color:var(--azul-700); }
.gaveta__acoes { margin-top:var(--esp-8); display:flex; flex-direction:column; gap:var(--esp-4); }
.gaveta__acoes .botao { width:100%; }
.gaveta__pe { margin-top:auto; padding-top:var(--esp-7); font-size:var(--t-miudo);
              color:var(--tinta-fraca); line-height:1.6; }

/* Trava a rolagem do fundo enquanto a gaveta está aberta. */
body.gaveta-aberta { overflow:hidden; }

@media (prefers-reduced-motion:reduce) { .gaveta { animation:none; } }

/* ==========================================================================
   PÁGINAS LEGAIS (Política de Privacidade e Termos de Uso)
   Coluna estreita, tipografia de leitura longa. Sem herói e sem foto: são
   documentos para ler, não para vender.
   ========================================================================== */
.legal__barra { border-bottom:1px solid var(--fio); background:var(--areia-50);
                position:sticky; top:0; z-index:60; }
.legal__barra-interno { display:flex; align-items:center; justify-content:space-between;
                        gap:var(--esp-5); padding-block:var(--esp-4); }
.legal__barra img { height:38px; width:auto; display:block; }
@media (max-width:560px) { .legal__barra .ligacao { display:none; } }

.legal { background:var(--areia-50); padding-block:clamp(48px,6vw,88px); }
.legal__caixa { max-width:calc(var(--coluna-texto) + var(--goteira) * 2); }
.legal h1 { font-size:clamp(2.25rem,4.5vw,3.25rem); margin-bottom:var(--esp-5); }
.legal h2 { font-size:var(--t-titulo-3); margin-top:var(--esp-8); margin-bottom:var(--esp-4); }
.legal p, .legal li { max-width:none; }
.legal ul { margin:0 0 var(--esp-5); padding-left:var(--esp-6); }
.legal li { margin-bottom:var(--esp-3); color:var(--tinta-media); }
.legal p { color:var(--tinta-media); }
.legal strong { color:var(--tinta); font-weight:500; }
.legal a { color:var(--azul-700); }
.legal__data { font-size:var(--t-miudo); color:var(--tinta-fraca); text-transform:uppercase;
               letter-spacing:.12em; margin-bottom:var(--esp-7); }
.legal__tabela { width:100%; border-collapse:collapse; margin:0 0 var(--esp-6);
                 font-size:var(--t-apoio); color:var(--tinta-media); }
.legal__tabela th { text-align:left; font-family:var(--fonte-texto); font-size:var(--t-rotulo);
                    font-weight:500; letter-spacing:var(--entreletra-rotulo); text-transform:uppercase;
                    color:var(--tinta); border-bottom:1px solid var(--fio-forte);
                    padding:var(--esp-3) var(--esp-4) var(--esp-3) 0; }
.legal__tabela td { border-bottom:1px solid var(--fio); padding:var(--esp-4) var(--esp-4) var(--esp-4) 0;
                    vertical-align:top; }
.legal__tabela td:last-child, .legal__tabela th:last-child { padding-right:0; }
@media (max-width:560px) { .legal__tabela, .legal__tabela tbody, .legal__tabela tr, .legal__tabela td { display:block; width:100%; }
  .legal__tabela thead { display:none; }
  .legal__tabela tr { border-bottom:1px solid var(--fio); padding-block:var(--esp-4); }
  .legal__tabela td { border:0; padding:0 0 var(--esp-2); }
  .legal__tabela td:first-child { color:var(--tinta); font-weight:500; } }
.legal__links { margin-top:var(--esp-3); }
.rodape__legal .legal__links a { color:var(--bronze-300); }

/* Caixa de ressalva etica/legal, usada nas paginas de duvidas sobre facetas
   e reaproveitavel em qualquer pagina .legal. Precisa estar aqui (nao so no
   <style> local do index.html) porque as paginas de conteudo carregam so
   este arquivo. */
.aviso { background:var(--areia-200); border-left:1px solid var(--bronze-500);
         padding:var(--esp-5) var(--esp-6); font-size:var(--t-apoio); color:var(--tinta-media); }
.aviso p { margin:0; max-width:none; }