/* ==========================================================================
   Traço — harmonização orofacial (site modelo de portfólio)
   Conceito: a medida antes do procedimento. "Traço" é o traço do rosto e a
   linha desenhada na análise facial. Assinatura: o close de rosto com as
   linhas de análise se desenhando; ecos: régua na borda e ficha de avaliação.
   ========================================================================== */

:root {
  --porcelana: #F3EFED;
  --branco: #FBF9F8;
  --ameixa: #2A2026;
  --ameixa-2: #66585F;
  --malva: #9E6577;
  --noite: #1F171C;
  --linha: rgba(42, 32, 38, .14);
  --traco: #F6EFE9;

  --f-titulo: "Gloock", Georgia, "Times New Roman", serif;
  --f-texto: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, Consolas, monospace;

  --largura: 1240px;
  --respiro: max(20px, calc((100% - var(--largura)) / 2));
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  position: relative;
  margin: 0;
  background: var(--grao), var(--porcelana);
  color: var(--ameixa);
  font: 400 18px/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--malva); outline-offset: 4px; border-radius: 4px; }

.pular { position: absolute; left: -999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--ameixa); color: var(--porcelana); font: 600 14px var(--f-texto); text-decoration: none; }
.pular:focus { left: 12px; }

/* ----- régua na borda esquerda (rola junto com a página) ----- */
.regua {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 5;
  width: 14px;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(42, 32, 38, .45) 0 1px, transparent 1px 48px) left top / 14px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(42, 32, 38, .22) 0 1px, transparent 1px 8px) left top / 7px 100% no-repeat;
}

/* ----- marca ----- */
.marca, .rodape__marca { display: inline-flex; align-items: baseline; gap: 12px; color: var(--ameixa); text-decoration: none; }
.marca__nome { font: 400 30px/1 var(--f-titulo); letter-spacing: -.01em; }
.marca__sub { font: 400 11.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--ameixa-2); }

/* ----- topo ----- */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 16px var(--respiro);
  background: var(--grao), var(--porcelana);
  box-shadow: 0 1px 0 var(--linha);
}
.topo__menu { display: flex; gap: 26px; margin-left: auto; }
.topo__menu a { font: 500 15px/1 var(--f-texto); color: var(--ameixa); text-decoration: none; opacity: .8; transition: opacity .2s ease; }
.topo__menu a:hover { opacity: 1; }

/* ----- botões e links ----- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 10px;
  font: 600 15px/1 var(--f-texto); letter-spacing: .01em; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.botao--cheio { background: var(--ameixa); color: var(--porcelana); }
.botao--cheio:hover { background: #41323A; }
.botao--pequeno { min-height: 40px; padding: 0 16px; font-size: 14px; }
.botao:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
.link { font: 600 15px/1 var(--f-texto); color: var(--ameixa); text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid var(--malva); }
.link:hover { color: var(--malva); }

/* ----- tipografia ----- */
.rotulo {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 400 12.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--malva);
}
/* a cruz de marcação antes de cada rótulo */
.rotulo::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
}
.rotulo--claro { color: #D3A7B5; }
.titulo { margin: 18px 0 0; font: 400 clamp(38px, 4.6vw, 66px)/1.04 var(--f-titulo); letter-spacing: -.012em; text-wrap: balance; }
.titulo--grande { font-size: clamp(44px, 6vw, 92px); line-height: 1; }
.intro { margin: 20px 0 0; max-width: 56ch; font-size: clamp(18px, 1.35vw, 20px); color: var(--ameixa-2); }

/* ==========================================================================
   CAPA
   ========================================================================== */
.capa {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  padding: clamp(30px, 5vw, 72px) var(--respiro) clamp(70px, 9vw, 130px);
}
.capa__titulo { margin: 22px 0 0; font: 400 clamp(50px, 7vw, 106px)/.98 var(--f-titulo); letter-spacing: -.02em; text-wrap: balance; }
.capa__lide { margin: 26px 0 0; max-width: 44ch; font-size: clamp(18px, 1.45vw, 21px); color: var(--ameixa-2); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 32px; }
.capa__rt { margin: 36px 0 0; padding-top: 14px; max-width: 48ch; border-top: 1px solid var(--linha); font: 400 12.5px/1.5 var(--f-mono); color: var(--ameixa-2); }

/* ----- a análise (assinatura) ----- */
.analise { margin: 0; }
.analise__quadro { position: relative; overflow: hidden; border-radius: 6px; background: #1A1416; }
.analise__quadro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.analise__linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.analise .t { fill: none; stroke: var(--traco); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.analise .t1, .analise .t4 { stroke-dasharray: 6 8; opacity: .9; }
.analise .pontos circle { fill: var(--malva); stroke: var(--traco); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.analise .rotulos text { font: 400 24px var(--f-mono); letter-spacing: .04em; fill: var(--traco); }
.analise figcaption { margin-top: 12px; font: 400 12px/1.5 var(--f-mono); color: var(--ameixa-2); }

/* sequência do desenho (só com JS e movimento permitido) */
.js .analise .t2, .js .analise .t3, .js .analise .t5 { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.js .analise .t1, .js .analise .t4 { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.js .analise .pontos circle, .js .analise .rotulos text { opacity: 0; }
.analise--desenhar .t1 { animation: crescer .9s cubic-bezier(.6, .05, .3, 1) .3s forwards; }
.analise--desenhar .t2 { animation: desenhar 1s cubic-bezier(.6, .05, .3, 1) 1s forwards; }
.analise--desenhar .t3 { animation: desenhar 1s cubic-bezier(.6, .05, .3, 1) 1.5s forwards; }
.analise--desenhar .t4 { animation: crescer .8s cubic-bezier(.6, .05, .3, 1) 2s forwards; }
.analise--desenhar .t5 { animation: desenhar 1s cubic-bezier(.6, .05, .3, 1) 2.3s forwards; }
.analise--desenhar .pontos circle:nth-child(1) { animation: aparecer .4s ease .8s forwards; }
.analise--desenhar .pontos circle:nth-child(2) { animation: aparecer .4s ease 1.9s forwards; }
.analise--desenhar .pontos circle:nth-child(3) { animation: aparecer .4s ease 1.8s forwards; }
.analise--desenhar .rotulos text:nth-child(1) { animation: aparecer .6s ease 1s forwards; }
.analise--desenhar .rotulos text:nth-child(2) { animation: aparecer .6s ease 2.2s forwards; }
.analise--desenhar .rotulos text:nth-child(3) { animation: aparecer .6s ease 1.9s forwards; }
.analise--desenhar .rotulos text:nth-child(4) { animation: aparecer .6s ease 3s forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes crescer { to { transform: scaleX(1); } }
@keyframes aparecer { to { opacity: 1; } }
.js-garantia .analise .t2, .js-garantia .analise .t3, .js-garantia .analise .t5 { stroke-dashoffset: 0; }
.js-garantia .analise .t1, .js-garantia .analise .t4 { transform: none; }
.js-garantia .analise .pontos circle, .js-garantia .analise .rotulos text { opacity: 1; }

/* ==========================================================================
   AVALIAÇÃO + ficha
   ========================================================================== */
.avaliacao {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
  padding: clamp(80px, 11vw, 160px) var(--respiro);
  background: var(--grao), var(--branco);
}
.etapas { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.etapas li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.etapas__nome { padding-top: 4px; font: 400 12.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--malva); }
.etapas p { margin: 0; color: var(--ameixa-2); }

.ficha {
  margin: 0;
  padding: 26px 30px 24px;
  border-radius: 6px;
  background: #FFFEFD;
  box-shadow: 0 1px 2px rgba(42, 32, 38, .06), 0 34px 70px -40px rgba(42, 32, 38, .5);
  font: 400 13px/1.4 var(--f-mono);
  color: var(--ameixa);
}
.ficha__topo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ameixa); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ficha__topo span:last-child { color: var(--malva); }
.ficha__campo { display: flex; align-items: flex-end; gap: 14px; margin: 16px 0 6px; }
.ficha__campo .ficha__rotulo { margin: 0; }
.ficha__grupo { padding: 16px 0; border-top: 1px dashed rgba(42, 32, 38, .2); }
.ficha__rotulo { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ameixa-2); }
.ficha__linha { display: block; flex: 1; min-width: 40px; height: 24px; border-bottom: 1px solid rgba(42, 32, 38, .28); }
.ficha__barra { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 12px; align-items: center; margin: 7px 0; font-size: 12.5px; }
.ficha__barra i {
  position: relative; height: 8px; border-radius: 4px;
  background:
    repeating-linear-gradient(to right, rgba(42, 32, 38, .22) 0 1px, transparent 1px 10%),
    rgba(158, 101, 119, .12);
}
.ficha__barra i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 2.6); border-radius: 4px; background: var(--malva); }
.ficha__barra b { font-weight: 500; text-align: right; }
.ficha__opcoes { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; }
.ficha__opcoes span { display: inline-flex; align-items: center; gap: 8px; }
.ficha__opcoes i { width: 14px; height: 14px; border: 1.5px solid var(--ameixa); border-radius: 3px; }
.ficha__opcoes i.x {
  background:
    linear-gradient(45deg, transparent 45%, var(--malva) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--malva) 45% 55%, transparent 55%);
}
.ficha__etapa { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0; font-size: 12px; }
.ficha__etapa > span:first-child { width: 58px; flex: none; color: var(--ameixa-2); }
.ficha__assina { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(42, 32, 38, .28); text-align: right; font-size: 12px; color: var(--ameixa-2); }

/* ==========================================================================
   PROCEDIMENTOS
   ========================================================================== */
.procedimentos { padding: clamp(80px, 11vw, 160px) var(--respiro); }
.procedimentos__topo { max-width: 760px; }
.lista-proc { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ameixa); }
.proc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .65fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: baseline;
  padding: 26px 0 26px 30px;
  border-bottom: 1px solid var(--linha);
}
/* a marca de régua de cada linha */
.proc::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 18px; background: var(--ameixa); }
.proc::after { content: ""; position: absolute; left: 0; top: 40px; width: 16px; height: 1.5px; background: var(--malva); }
.proc__nome { margin: 0; font: 400 clamp(24px, 2.2vw, 32px)/1.12 var(--f-titulo); }
.proc__texto { margin: 0; color: var(--ameixa-2); }
.proc__dado { margin: 0; font: 400 13px/1.45 var(--f-mono); }
.proc__dado span { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--malva); }

/* ==========================================================================
   A CLÍNICA
   ========================================================================== */
.clinica { padding: clamp(80px, 11vw, 160px) var(--respiro); background: var(--grao), var(--branco); }
.clinica__fotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.clinica__sala { grid-column: 1 / 9; grid-row: 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.clinica__espelho { grid-column: 9 / 13; grid-row: 1; align-self: end; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.clinica__equipe { grid-column: 1 / 5; grid-row: 2; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
/* o texto mora dentro da grade das fotos, na segunda linha */
.clinica__texto { grid-column: 6 / 13; grid-row: 2; align-self: center; padding-left: clamp(0px, 2vw, 30px); }

/* ==========================================================================
   RESPONSÁVEL TÉCNICA (faixa escura)
   ========================================================================== */
.rt {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
  padding: clamp(80px, 10vw, 150px) var(--respiro);
  background: var(--grao), var(--noite);
  color: #EFE7E3;
}
.rt__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.rt .titulo { color: #FBF6F3; }
.rt__bio { margin: 22px 0 0; max-width: 52ch; font-size: clamp(18px, 1.4vw, 20px); color: #CDBFC6; }
.rt__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.rt__dados li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); font: 500 16px/1.4 var(--f-texto); color: #FBF6F3; }
.rt__dados span { display: block; margin-bottom: 4px; font: 400 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #B4A0AA; }

/* ==========================================================================
   DÚVIDAS
   ========================================================================== */
.duvidas {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding: clamp(80px, 10vw, 150px) var(--respiro);
}
.duvidas .titulo { margin: 0; }
.duvida { border-top: 1px solid var(--linha); }
.duvida:last-child { border-bottom: 1px solid var(--linha); }
.duvida summary {
  position: relative;
  padding: 22px 46px 22px 0;
  list-style: none; cursor: pointer;
  font: 400 clamp(20px, 1.7vw, 24px)/1.3 var(--f-titulo);
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 13px; margin-top: -6.5px;
  background:
    linear-gradient(var(--malva), var(--malva)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--malva), var(--malva)) center / 1.5px 13px no-repeat;
  transition: transform .25s ease;
}
.duvida[open] summary::after { transform: rotate(45deg); }
.duvida p { margin: 0 0 24px; max-width: 60ch; color: var(--ameixa-2); }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contato {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
  padding: clamp(80px, 10vw, 150px) var(--respiro);
  background: var(--grao), var(--branco);
}
.contato__foto { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.contato .titulo { margin-top: 16px; }
.contato__lista { display: grid; max-width: 620px; margin: 30px 0 30px; padding: 0; list-style: none; }
.contato__lista li { padding: 13px 0; border-top: 1px solid var(--linha); font-size: 16.5px; }
.contato__lista li:last-child { border-bottom: 1px solid var(--linha); }
.contato__lista span { display: block; margin-bottom: 3px; font: 400 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--malva); }
.contato__lista a { color: var(--ameixa); text-decoration: none; }
.contato__lista a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { padding: 44px var(--respiro) 110px; }
.rodape__legal { margin: 22px 0 0; max-width: 90ch; font: 400 12.5px/1.7 var(--f-mono); color: var(--ameixa-2); }
.rodape__nota { margin: 16px 0 0; font: 400 12px/1.5 var(--f-mono); color: var(--ameixa-2); opacity: .8; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (min-width: 1101px) {
  :root { --respiro: max(64px, calc((100% - var(--largura)) / 2)); }
}
@media (max-width: 1100px) {
  .regua { display: none; }
  .topo__menu { display: none; }
  .topo { justify-content: space-between; }
}
@media (max-width: 900px) {
  .capa, .avaliacao, .rt, .duvidas, .contato { grid-template-columns: minmax(0, 1fr); }
  .analise { max-width: 560px; }
  .proc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clinica__sala { grid-column: 1 / -1; }
  .clinica__espelho { grid-column: 1 / 7; grid-row: 2; }
  .clinica__equipe { grid-column: 7 / 13; grid-row: 2; }
  .clinica__texto { grid-column: 1 / -1; grid-row: 3; padding: 20px 0 0; }
  .rt__foto { max-width: 440px; }
  .contato__foto { max-width: 280px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .marca__sub { display: none; }
  .acoes .botao, .contato .botao { width: 100%; }
  .etapas li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rt__dados { grid-template-columns: minmax(0, 1fr); }
  .ficha { padding: 22px 18px; }
  .ficha__barra { grid-template-columns: 70px minmax(0, 1fr) 36px; }
  .analise .rotulos text { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .analise .t2, .js .analise .t3, .js .analise .t5 { stroke-dashoffset: 0; }
  .js .analise .t1, .js .analise .t4 { transform: none; }
  .js .analise .pontos circle, .js .analise .rotulos text { opacity: 1; }
  .analise--desenhar .t, .analise--desenhar circle, .analise--desenhar text { animation: none !important; }
}