/* Clínica Feijó (conversa #227): parede azulejada em esmalte magenta. Clima claro do site atual.
   Branco de azulejo e rejunte cinza no corpo, magenta #b55680 e vinho #3f1117 do logo, framboesa #90465f e rosa #cd98aa dos
   três cartões do site atual. Sem creme, sem dourado. Alegreya + Alegreya Sans. N3: sem efeito além de 3 revelações. */
:root {
  --fundo: #fbf9fa;
  --tinta: #3f1117;
  --suave: #6a4a51;
  --marca: #b55680;
  --marca-2: #90465f;
  --rosa: #cd98aa;
  --rosa-claro: #f4e6eb;
  --rejunte: #e7dfe2;
  --linha: #e4d7dc;
  --cartao: #ffffff;
  --raio: 4px;
  --fonte-titulo: "Alegreya", Georgia, serif;
  --fonte-texto: "Alegreya Sans", system-ui, sans-serif;
  --az: 120px;
  --oferta-botao: #b55680;
  --oferta-tinta: #fff;
}
body { font-size: clamp(17px, 1.1vw, 19px); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; color: var(--tinta); }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
a { color: inherit; }
.botao { border-radius: var(--raio); font-weight: 700; }
.link-texto { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--marca-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link-wa { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 700; color: var(--marca-2); }
.link-wa svg { width: 1.2em; height: 1.2em; flex: none; }
.link-wa span { text-decoration: underline; text-underline-offset: 4px; }
.fala { font-family: var(--fonte-titulo); font-style: italic; font-weight: 500; color: var(--tinta); }
.fala a { font-family: var(--fonte-texto); font-style: normal; font-size: .82em; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
section { scroll-margin-top: 20px; }

/* ===== faixa de horário e cabeçalho (disposição do site atual) ===== */
.faixa-topo { border-bottom: 1px solid var(--linha); background: #fff; font-size: 14px; color: var(--suave); }
.faixa-topo__linha { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 12px; }
.faixa-topo__redes { display: flex; gap: 4px; }
.faixa-topo__redes a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--tinta); }
.faixa-topo__redes svg { width: 18px; height: 18px; }
.topo { background: #fff; position: relative; z-index: 50; }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.topo__marca img { width: clamp(190px, 20vw, 270px); height: auto; }
.topo__contato { display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--suave); }
.topo__contato a:not(.botao) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.topo__contato svg { width: 18px; height: 18px; color: var(--marca); }
.topo__contato .botao { padding: .85em 1.6em; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.topo__burger { display: none; }
.menu { background: var(--marca); color: #fff; }
.menu__linha { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 36px); }
.menu a { display: inline-flex; align-items: center; min-height: 50px; padding-inline: 6px; font-weight: 500; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.menu a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ===== hero ===== */
.hero { background: #fff; padding-top: clamp(36px, 5vw, 72px); }
.hero__grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(36px, 4vw, 56px); }
.hero h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; max-width: 12ch; }
.hero__sub { margin-top: 22px; font-size: clamp(18px, 1.35vw, 21px); color: var(--suave); max-width: 38ch; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.hero__foto { margin: 0; aspect-ratio: 1394 / 929; overflow: hidden; border-radius: var(--raio); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Motivo 1: barra azulejada (padrão do logo girado 4 vezes) com friso vinho e magenta em cima */
.barra { height: var(--az); background: url(../img/azulejo.svg) 0 0 / var(--az) var(--az) repeat-x; border-top: 6px solid var(--tinta); box-shadow: inset 0 3px 0 var(--marca); }

/* ===== Motivo 3: três azulejos lisos de esmalte ===== */
.esmaltes { background: var(--fundo); }
.esmaltes__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--rejunte); margin-top: calc(var(--az) * -0.5); position: relative; }
.esmalte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: clamp(24px, 2.6vw, 36px); color: #fff; }
.esmalte::before { content: ""; position: absolute; inset: -40% auto auto -30%; width: 70%; height: 180%; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .16) 45%, rgb(255 255 255 / 0)); transform: rotate(28deg); pointer-events: none; }
.esmalte::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 -10px 24px -12px rgb(0 0 0 / .25); pointer-events: none; }
.esmalte h2 { color: inherit; font-size: clamp(26px, 2.4vw, 34px); }
.esmalte p { font-size: 18px; max-width: 30ch; }
.esmalte__link { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.esmalte--1 { background: var(--marca); }
.esmalte--2 { background: var(--marca-2); }
.esmalte--3 { background: var(--rosa); color: var(--tinta); }

/* ===== tratamentos: Motivo 2, painel de azulejos de figura avulsa ===== */
.tratamentos { padding-block: clamp(64px, 8vw, 120px); }
.tratamentos__topo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 40px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.tratamentos__topo p { font-family: var(--fonte-titulo); font-style: italic; font-size: 19px; }
.tratamentos__topo p a { font-family: var(--fonte-texto); font-style: normal; font-size: 15px; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tratamentos__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.painel { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--rejunte); position: sticky; top: 24px; }
.az { aspect-ratio: 1; background: #fff; position: relative; }
.az--padrao { background: url(../img/azulejo.svg) 0 0 / 100% 100%; }
.az--figura a { position: absolute; inset: 0; display: block; }
.az-fig { width: 100%; height: 100%; }
.az__cartela { position: absolute; left: 12%; right: 12%; bottom: 7%; padding: 2px 4px; border-top: 1.5px solid var(--marca); border-bottom: 1.5px solid var(--marca); background: #fff; font-family: var(--fonte-titulo); font-style: italic; font-weight: 500; font-size: clamp(12px, 1vw, 15px); line-height: 1.15; text-align: center; color: var(--tinta); }
.az--figura a:hover .az__cartela, .az--figura a:focus-visible .az__cartela { background: var(--rosa-claro); }
.legenda { list-style: none; margin: 0; padding: 0; }
.trat { padding-block: 22px; border-top: 1px solid var(--linha); display: grid; gap: 8px; scroll-margin-top: 24px; }
.trat:last-child { border-bottom: 1px solid var(--linha); }
.trat h3 { font-size: clamp(24px, 2vw, 30px); }
.trat__extra { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-2); font-weight: 700; }
.trat .fala { font-size: 18px; }

/* ===== perguntas e form (disposição do site atual: lado a lado) ===== */
.marcar { padding-block: clamp(64px, 8vw, 110px); background: #fff; border-top: 1px solid var(--linha); }
.marcar__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.perguntas h2, .marcar__form h2 { margin-bottom: 22px; }
.pergunta { padding-block: 20px; border-top: 3px double var(--rejunte); }
.pergunta h3 { font-size: 22px; margin-bottom: 6px; }
.pergunta p { color: var(--suave); }
.marcar__form > p { color: var(--suave); margin-bottom: 18px; }
.marcar__form { padding: clamp(22px, 3vw, 36px); background: var(--fundo); border: 1px solid var(--linha); border-top: 6px solid var(--marca); }
.form .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.campo { display: grid; gap: 6px; font-size: 15px; font-weight: 500; color: var(--tinta); }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo textarea { width: 100%; padding: 13px 14px; border: 1px solid #cdbfc4; border-radius: var(--raio); background: #fff; font-size: 17px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.form .botao { min-width: 180px; }

/* ===== sobre: Motivo 4, frase de Carl Jung pintada sobre o painel de azulejos ===== */
.sobre { padding-block: clamp(64px, 8vw, 120px); }
.sobre__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.painel-jung { margin: 0; padding: clamp(28px, 3vw, 40px); background: url(../img/azulejo.svg) 0 0 / 80px 80px; }
.painel-jung blockquote { margin: 0; padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 48px); background-color: #fff;
  background-image: linear-gradient(var(--rejunte) 2px, transparent 2px), linear-gradient(90deg, var(--rejunte) 2px, transparent 2px);
  background-size: 25% 25%; background-position: -1px -1px; }
.painel-jung blockquote p { font-family: var(--fonte-titulo); font-style: italic; font-weight: 500; font-size: clamp(25px, 2.7vw, 40px); line-height: 1.22; color: var(--marca-2); text-wrap: balance; }
.painel-jung figcaption { display: inline-block; margin-top: 14px; padding: 6px 14px; background: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--tinta); }
.sobre__texto { display: grid; gap: 12px; }
.sobre__texto h3 { font-size: 20px; margin-top: 10px; color: var(--marca-2); }
.sobre__texto .fala { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 20px; }

/* Motivo 5: fotos assentadas como azulejos */
.espaco { margin-top: clamp(64px, 8vw, 110px); }
.espaco__topo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 48px; align-items: end; margin-bottom: 28px; }
.espaco__topo p { color: var(--suave); }
.espaco__grade { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--rejunte); }
.espaco__grade a { display: block; aspect-ratio: 1; overflow: hidden; background: #fff; }
.espaco__grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.espaco__grade a:hover img { transform: scale(1.04); }

/* ===== equipe ===== */
.equipe { padding-block: clamp(64px, 8vw, 110px); background: #fff; border-top: 1px solid var(--linha); }
.equipe__topo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 48px; align-items: end; margin-bottom: 32px; }
.equipe__topo p { color: var(--suave); }
.equipe__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.pessoa { margin: 0; }
.pessoa img { width: 100%; aspect-ratio: 640 / 580; object-fit: cover; border-radius: var(--raio); background: var(--rosa-claro); }
.pessoa figcaption { display: grid; gap: 2px; padding-top: 12px; }
.pessoa b { font-family: var(--fonte-titulo); font-size: 21px; color: var(--tinta); }
.pessoa span { color: var(--suave); font-size: 16px; }
.pessoa__rt { color: var(--marca-2) !important; font-weight: 700; }

/* ===== como chegar ===== */
.contato { padding-top: clamp(64px, 8vw, 110px); background: var(--fundo); }
.contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; padding-bottom: clamp(56px, 7vw, 96px); }
.contato h2 { margin-bottom: 22px; }
.contato__endereco { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(20px, 1.6vw, 24px); font-family: var(--fonte-titulo); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 5px; }
.contato__endereco svg { width: 26px; height: 26px; flex: none; color: var(--marca); margin-top: 3px; }
.contato dl { margin: 26px 0 0; display: grid; gap: 16px; }
.contato dt { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--marca-2); font-weight: 700; }
.contato dd { margin: 2px 0 0; }
.contato dd a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
/* forma da nota do Google: um azulejo único com cercadura de padrão */
.azulejo-nota { display: grid; place-items: center; width: 200px; aspect-ratio: 1; margin-top: 30px; padding: 22px; background: url(../img/azulejo.svg) 0 0 / 100px 100px; box-shadow: 0 0 0 4px var(--rejunte); }
.azulejo-nota span { display: grid; place-items: center; align-content: center; width: 100%; height: 100%; background: #fff; text-align: center; font-size: 16px; color: var(--suave); line-height: 1.2; box-shadow: inset 0 0 0 2px var(--marca); }
.azulejo-nota b { font-family: var(--fonte-titulo); font-size: 26px; color: var(--tinta); margin-bottom: 4px; }
.azulejo-nota:hover span { background: var(--rosa-claro); }
.contato__form { padding: clamp(22px, 3vw, 36px); background: #fff; border: 1px solid var(--linha); border-top: 6px solid var(--marca-2); }

/* ===== rodapé vinho (cor do site atual) ===== */
.rodape { background: var(--tinta); color: #f3e4e9; padding-top: 56px; font-size: 16px; }
.rodape__grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; padding-bottom: 36px; }
.rodape__marca img { width: 240px; margin-bottom: 18px; }
.rodape__titulo { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rosa); margin-bottom: 10px; font-size: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li a { display: inline-flex; min-height: 34px; align-items: center; }
.rodape p + p { margin-top: 10px; }
.rodape__redes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rodape__redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.rodape__redes svg { width: 20px; height: 20px; }
.rodape__pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-block: 18px 22px; border-top: 1px solid rgb(255 255 255 / .14); font-size: 14px; color: #d9c2ca; }
.rodape__pe a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.rodape__pe svg { width: 16px; height: 16px; }

/* ===== telas médias ===== */
@media (max-width: 1080px) {
  .topo__contato a[data-email] { display: none; }
  .tratamentos__topo { grid-template-columns: 1fr 1fr; }
  .tratamentos__topo h2 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --az: 88px; }
  .hero__grade, .tratamentos__grade, .marcar__grade, .sobre__grade, .contato__grade { grid-template-columns: 1fr; }
  .painel { position: static; }
  .esmaltes__grade { grid-template-columns: 1fr; }
  .esmalte { min-height: 0; }
  .equipe__grade { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .espaco__topo, .equipe__topo { grid-template-columns: 1fr; }
}
/* ===== celular ===== */
@media (max-width: 760px) {
  .topo__contato { display: none; }
  .topo__burger { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; cursor: pointer; }
  .topo__burger span { display: block; width: 22px; height: 2px; background: var(--tinta); transition: transform .3s; }
  .menu-aberto .topo__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-aberto .topo__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu { display: none; }
  .menu-aberto .menu { display: block; }
  .menu__linha { flex-direction: column; gap: 0; padding-block: 8px; }
  .menu a { min-height: 48px; }
  .topo__linha { padding-block: 12px; }
}
@media (max-width: 640px) {
  :root { --az: 72px; }
  .faixa-topo { font-size: 13px; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); }
  .hero__acoes .botao { width: 100%; }
  .tratamentos__topo { grid-template-columns: 1fr; }
  .painel { grid-template-columns: repeat(2, 1fr); }
  .az--some { display: none; }
  .az__cartela { font-size: 14px; left: 8%; right: 8%; }
  .form .campos { grid-template-columns: 1fr; }
  .form .botao { width: 100%; }
  .espaco__grade { grid-template-columns: repeat(2, 1fr); }
  .equipe__grade { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pessoa b { font-size: 18px; }
  .pessoa span { font-size: 15px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .painel-jung { padding: 18px; background-size: 60px 60px; }
  .azulejo-nota { width: 180px; }
}