/* Bellaris Clinic: a grega do medalhão, um fio só (sites/bellaris/LEITURA.md).
   O meandro grego que cerca o busto no logo vira linha contínua de fio fino: régua de seção, uma volta por etapa,
   vão com a inscrição da nota do Google. Clima do site atual: hero e fecho pretos, corpo papel e pedra, grafite.
   Sem dourado e sem creme. Jost do site atual nos títulos (500) + Newsreader do site atual no texto.
   N3 sem efeito nenhum: sem animação, parallax ou sombra difusa grande. Nada acima de z-index 110. */
:root {
  --preto: #0b0b0c;
  --grafite: #26272a;
  --grafite-2: #3a3b3f;
  --papel: #f6f6f4;
  --pedra: #e8e8e5;
  --cinza: #6e7073;
  --cinza-claro: #b7b8b7;
  --fundo: var(--papel);
  --tinta: #1c1d1f;
  --suave: #55575a;
  --marca: var(--preto);
  --marca-2: var(--grafite);
  --linha: rgb(11 11 12 / .14);
  --linha-escura: rgb(246 246 244 / .16);
  --fonte-titulo: "Jost", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Newsreader", Georgia, serif;
  --raio: 0px;
  --sec: clamp(72px, 9vw, 128px);
  --volta: 18px;
}
body { font-size: clamp(16.5px, 1.08vw, 18.5px); line-height: 1.6; }
h1, h2, h3 { font-weight: 500; color: inherit; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.04; }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.2; letter-spacing: -0.01em; }
section { padding-block: var(--sec); }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Botões: retângulo reto, versal espaçada como no site atual */
.botao { border-radius: 0; font: 500 .8rem/1 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; padding: 1.15em 1.6em; }
.botao:hover { box-shadow: none; background: var(--grafite); }
.botao--claro { --b-fundo: var(--papel); --b-tinta: var(--preto); }
.botao--claro:hover { background: #fff; }
.link-acao { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: 500 .78rem/1.2 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-block: .3em; }
.link-acao svg { width: 1.2em; height: 1.2em; }

/* ===== Motivo 1: a grega de fio único ===== */
.grega { display: block; flex: 1 1 auto; min-width: 0; height: var(--volta); background: var(--grega-claro) left center / var(--volta) var(--volta) round no-repeat; }
.grega--escura, .tratamos .grega, .fecho .grega { background-image: var(--grega-escuro); }
.grega--curta { flex: 1 1 0; }
.grega--tres { flex: none; width: calc(var(--volta) * 3); }
.losango { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--cinza); stroke-width: 1; }
.tratamos .losango, .hero .losango { stroke: #8a8b8e; }
.cabeca { margin-bottom: clamp(36px, 5vw, 64px); }
.cabeca__rotulo { display: flex; align-items: baseline; gap: .9em; font: 500 12px/1 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); margin-bottom: .9rem; }
.cabeca__num { font-family: var(--fonte-texto); letter-spacing: 0; font-size: .95rem; color: var(--cinza-claro); }
.cabeca__linha { display: flex; align-items: center; gap: 10px; }

/* ===== Cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: 50; background: var(--preto); color: var(--papel); border-bottom: 1px solid var(--linha-escura); }
.topo__linha { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.topo__marca { margin-right: auto; display: flex; align-items: center; min-height: 44px; }
.topo__marca img { width: auto; height: 34px; }
.topo__menu { display: flex; gap: 1.7rem; font: 500 12px/1 var(--fonte-titulo); letter-spacing: .16em; text-transform: uppercase; }
.topo__menu a { padding-block: 12px; border-bottom: 1px solid transparent; }
.topo__menu a:hover { border-color: currentColor; }
.topo__cta { padding: 1em 1.3em; font-size: 12px; }
.topo__burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; position: relative; color: var(--papel); }
.topo__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s; }
.topo__burger span:first-child { top: 18px; }
.topo__burger span:last-child { top: 27px; }
.menu-aberto .topo__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-aberto .topo__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ===== Motivo 3: primeira tela em três zonas sobre o preto ===== */
.hero { background: var(--preto); color: var(--papel); padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4vw, 56px); }
.hero__grade { display: grid; grid-template-columns: 1.15fr .9fr .75fr; gap: clamp(24px, 3vw, 48px); align-items: end; }
.hero__titulo { align-self: start; font-size: clamp(3.2rem, 7.4vw, 7.4rem); line-height: .9; letter-spacing: -0.045em; padding-top: .1em; }
.hero__retrato { margin: 0; aspect-ratio: 4 / 5; max-height: min(74vh, 640px); width: 100%; overflow: hidden; background: var(--grafite); outline: 1px solid var(--linha-escura); outline-offset: 10px; }
.hero__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero__lado { display: grid; gap: 1.1rem; justify-items: start; padding-bottom: .2rem; }
.hero__sub { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.45; color: var(--papel); }
.hero__conduz { font-size: .95rem; color: rgb(246 246 244 / .62); }
.hero__fio { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3.5vw, 48px); }
.hero__medalhao { width: 46px; height: 46px; flex: none; }

/* ===== Premissa ===== */
.premissa { background: var(--pedra); }
.premissa__grade { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(24px, 4vw, 64px); }
.premissa__rotulo { font: 500 12px/1.4 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); padding-top: .6rem; }
.premissa__texto { display: grid; gap: 1.2em; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.45; color: var(--grafite); max-width: 36em; }

/* ===== 01 e 02: procedimentos ===== */
.bloco { background: var(--papel); }
.bloco + .bloco { padding-top: 0; }
.bloco__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: start; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mosaico img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaico__grande { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; object-position: 50% 30%; }
.bloco__texto h2 { margin-bottom: 1.1rem; }
.bloco__lead { font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--grafite); max-width: 32em; margin-bottom: 1.8rem; }
.procs { border-top: 1px solid var(--linha); margin-bottom: 2rem; }
.procs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--linha); }
.procs a { font: 500 1.02rem/1.3 var(--fonte-titulo); letter-spacing: -0.005em; min-height: 26px; }
.procs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.procs span { color: var(--suave); font-size: .95rem; }

/* ===== 03 O que tratamos (preto) ===== */
.tratamos { background: var(--preto); color: var(--papel); }
.tratamos .cabeca__rotulo { color: rgb(246 246 244 / .62); }
.tratamos .cabeca__num { color: #6a6b6e; }
.tratamos__intro { font-size: clamp(1.15rem, 1.6vw, 1.45rem); max-width: 30em; color: rgb(246 246 244 / .86); margin-bottom: clamp(28px, 4vw, 48px); }
.queixas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.queixa { display: grid; gap: 12px; }
.queixa img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.25); }
.queixa:hover img { filter: none; }
.queixa__nome { display: flex; align-items: baseline; gap: .7em; font: 400 clamp(1.1rem, 1.5vw, 1.35rem)/1.2 var(--fonte-texto); border-top: 1px solid var(--linha-escura); padding-top: .6rem; min-height: 44px; }
.queixa__nome b { font: 500 12px/1 var(--fonte-titulo); letter-spacing: .12em; color: #8a8b8e; }
.tratamos__fim { margin-top: clamp(32px, 4vw, 48px); }

/* ===== 04 Como trabalhamos: motivo 2, uma volta da grega por etapa ===== */
.como { background: var(--pedra); }
.voltas { display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: v; }
.volta { min-width: 0; }
.volta__desenho { position: relative; aspect-ratio: 9 / 4; margin-bottom: 1.4rem; }
.volta__desenho svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.volta__desenho path { fill: none; stroke: var(--grafite); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.volta__em-pe { display: none !important; }
.volta__num { position: absolute; left: calc(100% * 2 / 9 + 8px); top: 25%; height: 25%; display: flex; align-items: center; font: 500 .78rem/1 var(--fonte-titulo); letter-spacing: .18em; color: var(--grafite); }
.volta__texto { padding-right: clamp(16px, 2vw, 32px); }
.volta__texto h3 { margin-bottom: .6rem; }
.volta__num-m { display: none; }
.volta__texto p { color: var(--suave); font-size: .98rem; }
.transp { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linha); }
.transp h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.transp li { font-size: clamp(1.08rem, 1.4vw, 1.25rem); padding: .9rem 0; border-bottom: 1px solid var(--linha); color: var(--grafite); }
.transp li:first-child { padding-top: 0; }

/* ===== 05 Quem conduz ===== */
.dra { background: var(--papel); }
.dra__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 88px); align-items: start; }
.dra__foto { margin: 0; }
.dra__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.dra__texto { display: grid; gap: 1rem; max-width: 40rem; }
.dra__cargo { font: 500 12px/1.5 var(--fonte-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.dra__registro { font-size: .95rem; color: var(--suave); font-style: italic; }
.formacao { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .95rem; }
.formacao caption { text-align: left; font: 500 12px/1 var(--fonte-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); padding-bottom: .8rem; }
.formacao th, .formacao td { text-align: left; padding: .75rem 0; border-top: 1px solid var(--linha); vertical-align: top; }
.formacao th { font: 500 .95rem/1.35 var(--fonte-titulo); width: 48%; padding-right: 1rem; }
.formacao td { color: var(--suave); }
.formacao tr:last-child th, .formacao tr:last-child td { border-bottom: 1px solid var(--linha); }

/* ===== 06 Onde estamos ===== */
.unidades { background: var(--papel); padding-top: 0; }
.unidades h2 { margin-bottom: clamp(28px, 4vw, 48px); max-width: 14em; }
.unidades__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 64px); }
.unidade { border-top: 1px solid var(--linha); padding-top: 1.1rem; display: grid; gap: 12px; align-content: start; }
.unidade address { font-style: normal; color: var(--suave); }
.unidade__horario { color: var(--grafite); }
.unidade__acoes { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
/* Motivo 4: a nota do Google no vão da grega */
.inscricao { display: flex; align-items: center; gap: 12px; margin-block: .2rem; }
.inscricao a { flex: none; font: 500 12px/1.2 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--preto); padding-block: .8rem; }
.inscricao a:hover { text-decoration: underline; text-underline-offset: 4px; }
.curto { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1rem 1.4rem; align-items: end; margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 2.4vw, 32px); background: var(--pedra); }
.curto__titulo { grid-column: 1 / -1; font: 500 .76rem/1 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.curto .form-ok { grid-column: 1 / -1; margin-top: 0; }

/* Campos (os dois forms) */
form label { display: grid; gap: .45rem; }
form label span { font: 500 12px/1.2 var(--fonte-titulo); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
form input, form select, form textarea { width: 100%; min-height: 46px; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--grafite); border-radius: 0; background: transparent; font-family: var(--fonte-titulo); font-size: 1rem; color: var(--tinta); }
form textarea { resize: vertical; min-height: 84px; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-bottom-color: var(--preto); box-shadow: 0 1px 0 var(--preto); }
form ::placeholder { color: #9a9b9c; }
.form-ok { display: grid; gap: .6rem; border-radius: 0; }

/* ===== 07 Dúvidas ===== */
.duvidas { background: var(--pedra); }
.duvidas__grade { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(24px, 4vw, 64px); }
.duvidas__cabeca h2 { margin-bottom: 1rem; }
.duvidas__cabeca p { color: var(--suave); max-width: 22em; }
.duvidas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); }
.duvida { display: grid; gap: 12px; align-content: start; }
.duvida h3 { font-size: clamp(1.08rem, 1.3vw, 1.2rem); }
.duvida p { color: var(--suave); font-size: .98rem; }

/* ===== 08 Agendar ===== */
.agendar { background: var(--papel); }
.agendar__grade { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(24px, 4vw, 64px); }
.agendar__texto h2 { margin-bottom: 1rem; }
.agendar__texto p { font-size: clamp(1.08rem, 1.3vw, 1.2rem); color: var(--grafite); max-width: 20em; }
.principal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.8rem; }
.principal__msg, .principal__pe, .principal .form-ok { grid-column: 1 / -1; }
.principal__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.principal__pe p { font-size: .88rem; color: var(--suave); max-width: 26em; }

/* ===== Fecho (preto, foto P&B) ===== */
.fecho { position: relative; background: var(--preto); color: var(--papel); overflow: hidden; padding-block: clamp(96px, 12vw, 168px); text-align: center; }
.fecho__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .34; }
.fecho__texto { position: relative; display: grid; justify-items: center; gap: 1.1rem; }
.fecho__medalhao { width: 64px; height: 64px; }
.fecho h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 14em; }
.fecho p { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: rgb(246 246 244 / .82); margin-bottom: .6rem; }

/* ===== Rodapé ===== */
.rodape { background: var(--preto); color: rgb(246 246 244 / .74); padding-block: clamp(48px, 6vw, 80px) 32px; font-size: .95rem; border-top: 1px solid var(--linha-escura); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.rodape__marca { display: grid; gap: 1rem; max-width: 24rem; }
.rodape__marca img { width: 220px; height: auto; }
.rodape__titulo { font: 500 12px/1 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--papel); margin: 0 0 .8rem; }
.rodape__titulo + p { margin-bottom: 1.3rem; }
.rodape li a, .rodape p a { display: inline-block; padding-block: .25rem; }
.rodape a:hover { color: var(--papel); }
.rodape__legal { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--linha-escura); font-size: .85rem; }
.rodape__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Telas médias ===== */
@media (max-width: 1100px) {
  .topo__menu { gap: 1.1rem; }
  .hero__grade { grid-template-columns: 1fr 1fr; }
  .hero__titulo { grid-column: 1 / -1; }
  .queixas { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .topo__linha { gap: .8rem; min-height: 64px; }
  .topo__burger { display: block; }
  .topo__cta { display: none; }
  .topo__menu { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; padding: .6rem 20px 1.2rem; background: var(--preto); border-bottom: 1px solid var(--linha-escura); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
  .menu-aberto .topo__menu { opacity: 1; visibility: visible; transform: none; }
  .topo__menu a { border-bottom: 1px solid var(--linha-escura); font-size: .85rem; }
  .premissa__grade, .bloco__grade, .transp, .dra__grade, .duvidas__grade, .agendar__grade { grid-template-columns: 1fr; }
  .bloco--inverso .mosaico { order: -1; }
  .queixas { grid-template-columns: repeat(2, 1fr); }
  .curto { grid-template-columns: 1fr 1fr; }
  .curto .botao { grid-column: 1 / -1; justify-self: start; }
  .dra__foto { max-width: 460px; }
  /* motivo 2 no celular e tablet estreito: a grega em pé na margem, uma volta por etapa, contínua de uma etapa à outra */
  .voltas { grid-template-columns: 1fr; }
  .volta { display: grid; grid-template-columns: 52px 1fr; gap: 0 1.2rem; }
  .volta__desenho { aspect-ratio: auto; margin: 0; min-height: 150px; }
  .volta__deitada { display: none !important; }
  .volta__em-pe { display: block !important; }
  .volta__num { display: none; }
  .volta__num-m { display: inline-block; margin-right: .6em; font: 500 12px/1 var(--fonte-titulo); letter-spacing: .16em; color: var(--suave); vertical-align: .2em; }
  .volta__texto { padding: 1.2rem 0 1.8rem; }
}
@media (max-width: 640px) {
  .topo__marca img { height: 28px; }
  .hero__grade { grid-template-columns: 1fr; gap: 22px; }
  .hero__titulo { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hero__retrato { max-height: none; aspect-ratio: 4 / 4.4; outline-offset: 6px; }
  .hero__lado .botao { width: 100%; }
  .unidades__grade, .duvidas__lista, .principal, .curto, .rodape__grade { grid-template-columns: 1fr; }
  .curto .botao { width: 100%; }
  .principal__pe .botao { width: 100%; }
  .mosaico { gap: 10px; }
  .procs li { flex-direction: column; }
  .inscricao a { letter-spacing: .12em; font-size: 12px; }
  .fecho h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .fecho .botao { width: 100%; }
  :root { --volta: 15px; }
}