/* Hipótese A · Mesma visita — Dr. Fabricio Leão */

:root {
  /* cor (amostrada do retrato e do consultório) */
  --travertino: #efe7dc;
  --travertino-claro: #f7f1e8;
  --areia: #d9c6b0;
  --madeira: #8a6a55;
  --madeira-escura: #6a4e3c;
  --cafe: #3a2a20;
  --cafe-suave: #5a4536;
  --camisa: #c5bcc0;
  --pele: #d9ab95;
  --ambar: #c0823a;
  --ambar-luz: #f0c27f;

  /* tipo */
  --serif: "Hedvig Letters Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hedvig Letters Sans", "Segoe UI", system-ui, sans-serif;
  --t-titulo: clamp(2.45rem, 1.1rem + 3.55vw, 5.2rem);
  --t-apoio: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  --t-rotulo: 0.9375rem;

  /* espaço */
  --margem: clamp(1.25rem, 4.6vw, 5.5rem);
  --nav-h: clamp(64px, 8vh, 84px);
  --raio: 28px;

  /* tempo */
  --respira: 30s;
  --suave: cubic-bezier(.22, .61, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--travertino);
  color: var(--cafe);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- navegação ---------- */
.nav {
  position: absolute; z-index: 20; inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margem);
}
.nav-marca { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.nav-nome { font-family: var(--serif); font-size: 1.25rem; letter-spacing: -.005em; }
.nav-esp, .nav-reg { font-size: .875rem; color: var(--cafe-suave); letter-spacing: .02em; }
.nav-reg { display: none; }
.nav-agendar {
  font-size: .9375rem; letter-spacing: .04em; text-decoration: none;
  padding: .55em 1.15em; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--cafe) 30%, transparent);
  background: color-mix(in oklab, var(--travertino-claro) 55%, transparent);
  backdrop-filter: blur(8px);
  transition: background .3s, color .3s;
}
.nav-agendar:hover { background: var(--cafe); color: var(--travertino-claro); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: max(100svh, 720px);
  overflow: clip;
  isolation: isolate;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 1.5rem) var(--margem) 3rem;
}

/* malha: manchas radiais sobrepostas, respirando */
.malha { position: absolute; inset: 0; z-index: -3; overflow: hidden;
  background:
    linear-gradient(in oklab 160deg, var(--travertino-claro) 0%, var(--travertino) 45%, #e6dacb 100%);
}
.mancha {
  position: absolute; display: block; border-radius: 50%;
  width: var(--w); aspect-ratio: 1;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  background: radial-gradient(closest-side in oklch, var(--c) 0%, color-mix(in oklch, var(--c) 45%, transparent) 55%, color-mix(in oklch, var(--c) 0%, transparent) 100%);
  will-change: transform;
  animation: respira var(--respira) var(--suave) infinite alternate;
  animation-delay: var(--d);
}
.m1 { --c: #e2cdb4; --w: 78vmax; --x: 8%;  --y: 4%;   --d: 0s; }
.m2 { --c: #f8f2ea; --w: 62vmax; --x: 30%; --y: 55%;  --d: -9s; }
.m3 { --c: #c9ab92; --w: 70vmax; --x: 88%; --y: 92%;  --d: -17s; opacity: .75; }
.m4 { --c: #cfc4c6; --w: 56vmax; --x: 6%;  --y: 102%; --d: -4s; opacity: .8; }
.m5 { --c: #ecd2ad; --w: 50vmax; --x: 70%; --y: 18%;  --d: -22s; opacity: .85; }
@keyframes respira {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vmax, -2vmax, 0) scale(1.08); }
  100% { transform: translate3d(-2vmax, 2.5vmax, 0) scale(.96); }
}
.grao {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url("../img/grao.png") repeat;
  background-size: 220px;
  opacity: .045; mix-blend-mode: multiply;
}

/* ---------- retrato ---------- */
.retrato {
  position: absolute; z-index: 1; margin: 0;
  right: clamp(-6rem, -4vw, 0rem); bottom: 0;
  height: min(93svh, 1010px);
  aspect-ratio: 1600 / 1583;
}
.painel {
  position: absolute; left: 17%; right: -12%; top: 21%; bottom: 0;
  border-radius: 140px var(--raio) 0 0;
  overflow: hidden;
  background: #cdb8a3;
  box-shadow: 0 40px 80px -30px rgb(58 42 32 / .35);
}
.painel img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; opacity: .78; transform: scale(1.04); }
.painel::after { /* véu morno: madeira embaixo, luz no alto */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 55% 18% in oklch, rgb(247 226 196 / .55), rgb(247 226 196 / 0)),
    linear-gradient(in oklab 180deg, rgb(239 231 220 / .30) 0%, rgb(160 124 98 / .30) 60%, rgb(106 78 60 / .55) 100%);
}
.luz { /* luz de estúdio dourada atrás da cabeça */
  position: absolute; left: 22%; top: -4%; width: 76%; aspect-ratio: 1;
  background: radial-gradient(closest-side in oklch, rgb(246 214 168 / .75), rgb(246 214 168 / 0));
  z-index: 0;
}
.retrato picture { position: absolute; inset: 0; z-index: 1; }
.pessoa {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%);
          mask-image: linear-gradient(to right, transparent 0%, #000 11%);
}

/* prova sobre o ombro direito (abaixo do queixo, nunca no rosto) */
.prova {
  position: absolute; z-index: 3; margin: 0;
  right: calc(4vw + 2rem); top: 67%;
  width: min(23rem, 44%);
  padding: 1.25rem 1.4rem 1.1rem;
  border-radius: 20px;
  background: color-mix(in oklab, var(--travertino-claro) 84%, transparent);
  border: 1px solid rgb(255 255 255 / .6);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 24px 50px -24px rgb(58 42 32 / .45);
}
.prova p { margin: 0 0 .85rem; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--cafe); }
.prova footer { display: grid; gap: .35rem; font-size: .9375rem; line-height: 1.35; color: var(--cafe-suave); }
.prova cite { font-style: normal; }
.prova p, .prova-num { text-wrap: pretty; }
.prova-num { padding-top: .55rem; border-top: 1px solid color-mix(in oklab, var(--cafe) 18%, transparent); color: var(--cafe); }
.prova-num b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }

/* ---------- texto ---------- */
.texto { position: relative; z-index: 4; width: min(50vw, 46rem); }

.assina { margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; }
.assina-reg::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--madeira); vertical-align: middle; margin-right: .9rem; }
.assina-nome { font-family: var(--serif); font-size: 1.375rem; }
.assina-reg { font-size: var(--t-rotulo); letter-spacing: .03em; color: var(--cafe-suave); }

.titulo {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-titulo);
  line-height: 1.02; letter-spacing: -.022em;
  font-variation-settings: "opsz" 24;
}
.titulo span { display: block; }
.titulo .t2 { color: var(--madeira-escura); margin-top: .08em; }
.titulo .p { display: inline-block; }

.apoio { margin: 1.5rem 0 0; max-width: 34em; font-size: var(--t-apoio); line-height: 1.55; color: var(--cafe-suave); }

/* o fio: a visita numa linha só */
.fio { margin-top: 2.1rem; }
.fio-rotulo {
  margin: 0 0 .9rem; font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase;
  color: var(--madeira-escura);
}
.fio-trilho { position: relative; padding-top: 1px; }
.fio-traco {
  position: absolute; left: 0; right: -12%; top: 7px; height: 1px;
  background: linear-gradient(to right, var(--madeira) 0%, var(--madeira) 82%, transparent 100%);
  transform-origin: left center;
}
.fio-brilho { /* luz que percorre o fio, devagar */
  position: absolute; top: 4px; left: 0; width: 120px; height: 7px; border-radius: 99px;
  background: radial-gradient(closest-side, rgb(240 194 127 / .95), rgb(240 194 127 / 0));
  opacity: 0;
}
.paradas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.parada { position: relative; display: flex; flex-direction: column; padding-top: 1.7rem; }
.ponto {
  position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--travertino); border: 1px solid var(--madeira);
  transition: background .6s, border-color .6s, box-shadow .9s;
}
.parada b { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.15; }
.parada small { font-size: var(--t-rotulo); line-height: 1.35; color: var(--cafe-suave); margin-top: .2rem; }
.parada.acesa .ponto, html:not(.js) .ponto {
  background: var(--ambar); border-color: var(--ambar);
  box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 22px 4px rgb(240 194 127 / .7);
}

.acoes { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.botao {
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.7em; border-radius: 999px;
  background: var(--cafe); color: var(--travertino-claro);
  font-size: 1.0625rem; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgb(58 42 32 / .7);
  transition: background .3s, transform .3s var(--suave);
}
.botao::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar-luz); }
.botao:hover { background: #24190f; transform: translateY(-2px); }
.ligar { font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--cafe) 35%, transparent); padding-bottom: 2px; }
.ligar span { color: var(--cafe-suave); margin-right: .25em; }
.local { margin: 1.4rem 0 0; font-size: var(--t-rotulo); color: var(--cafe-suave); letter-spacing: .01em; }

a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; }

/* ---------- entrada (só com JS) ---------- */
.js .pessoa { opacity: 0; translate: 0 12px; filter: brightness(.9) saturate(.9); }
.js .painel, .js .luz { opacity: 0; }
.js .titulo .p { opacity: 0; translate: 0 .35em; }
.js .assina, .js .apoio, .js .fio-rotulo, .js .paradas b, .js .paradas small, .js .acoes, .js .local, .js .prova, .js .nav { opacity: 0; }
.js .fio-traco { transform: scaleX(0); }
.js .ponto { scale: .4; opacity: 0; }

.entra .pessoa { opacity: 1; translate: 0 0; filter: none;
  transition: opacity 1.3s var(--suave) .1s, translate 1.6s var(--suave) .1s, filter 2s var(--suave) .1s; }
.entra .painel { opacity: 1; transition: opacity 1.4s var(--suave); }
.entra .luz { opacity: 1; transition: opacity 2.4s var(--suave) .4s; }
.entra .nav, .entra .assina { opacity: 1; transition: opacity 1s var(--suave) .15s; }
.entra .titulo .p { opacity: 1; translate: 0 0;
  transition: opacity .8s var(--suave), translate 1s var(--suave);
  transition-delay: calc(.35s + var(--i) * 80ms); }
.entra .apoio { opacity: 1; transition: opacity 1s var(--suave) 1.35s; }
.entra .fio-rotulo { opacity: 1; transition: opacity 1s var(--suave) 1.7s; }
.entra .fio-traco { transform: scaleX(1); transition: transform 1.9s cubic-bezier(.45, .05, .2, 1) 1.8s; }
.entra .ponto { scale: 1; opacity: 1;
  background: var(--ambar); border-color: var(--ambar);
  box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 22px 4px rgb(240 194 127 / .7);
  transition: scale .6s var(--suave), opacity .4s, background .6s, border-color .6s, box-shadow .9s;
  transition-delay: calc(1.95s + var(--n) * .55s); }
.entra .paradas b, .entra .paradas small { opacity: 1; transition: opacity .9s var(--suave); }
.entra .parada:nth-child(1) b, .entra .parada:nth-child(1) small { transition-delay: 2.05s; }
.entra .parada:nth-child(2) b, .entra .parada:nth-child(2) small { transition-delay: 2.6s; }
.entra .parada:nth-child(3) b, .entra .parada:nth-child(3) small { transition-delay: 3.15s; }
.entra .acoes { opacity: 1; transition: opacity 1s var(--suave) 1.55s; }
.entra .local { opacity: 1; transition: opacity 1s var(--suave) 1.75s; }
.entra .prova { opacity: 1; transition: opacity 1.2s var(--suave) 3.5s; }
.entra .fio-brilho { animation: percorre 9s var(--suave) 4.2s infinite; }
@keyframes percorre {
  0%   { left: -60px; opacity: 0; }
  8%   { opacity: 1; }
  45%  { left: calc(100% - 40px); opacity: .9; }
  55%, 100% { left: calc(100% + 20px); opacity: 0; }
}

.fora .mancha, .fora .fio-brilho { animation-play-state: paused; }

/* ---------- notebook baixo ---------- */
@media (min-width: 981px) and (max-height: 800px) {
  :root { --t-titulo: clamp(2.4rem, 0.8rem + 3.6vw, 4.6rem); }
  .assina { margin-bottom: 1.1rem; }
  .apoio { margin-top: 1.1rem; }
  .fio { margin-top: 1.5rem; }
  .acoes { margin-top: 1.6rem; }
  .local { display: none; }
}

/* ---------- celular e tablet ---------- */
@media (max-width: 980px) {
  :root { --t-titulo: clamp(2rem, 9.4vw, 3.6rem); --nav-h: 64px; }
  .titulo .q { display: none; }
  .hero { --rw: min(120vw, 720px); display: block; min-height: 0; padding: 0 0 2.75rem; }
  .malha .m1 { --x: 80%; --y: 8%; }
  .malha .m2 { --x: 20%; --y: 62%; }
  .malha .m3 { --x: 100%; --y: 48%; }
  .malha .m4 { --x: 0%; --y: 92%; }
  .malha .m5 { --x: 60%; --y: 20%; }
  .nav-esp, .assina { display: none; }
  .nav-reg { display: block; }
  .nav-nome { font-size: 1.125rem; }

  .retrato {
    position: relative; right: auto; bottom: auto;
    height: auto; width: var(--rw); aspect-ratio: 1600 / 1583;
    margin: calc(var(--nav-h) - 10px) 0 0 calc(50% - var(--rw) * .565);
  }
  .painel { left: 20%; right: 7%; top: 22%; border-radius: 90px 22px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 96%); }
  .pessoa {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  }
  .luz { left: 18%; width: 80%; }

  .texto { width: auto; margin-top: calc(var(--rw) * -.26); padding: 0 var(--margem); display: flex; flex-direction: column; }
  .apoio { order: 5; }
  .local { order: 6; }
  .assina { margin-bottom: .9rem; }
  .assina-nome { font-size: 1.2rem; }
  .apoio { margin-top: 1.6rem; font-size: 1.0625rem; }
  .fio { margin-top: 1.5rem; }
  .paradas { gap: .6rem; }
  .parada b { font-size: 1.1875rem; }
  .parada small { font-size: .875rem; }
  .fio-traco { right: 0; background: var(--madeira); }
  .acoes { margin-top: 1.6rem; gap: .9rem 1.4rem; justify-content: center; }
  .botao { width: 100%; justify-content: center; }
  .local { margin-top: 1.1rem; }

  .prova {
    position: relative; inset: auto; width: auto;
    margin: 2.2rem var(--margem) 0;
  }
  /* a prova sai do retrato e vai para baixo do texto */
  .retrato .prova { display: none; }
  .prova-celular { display: block; }
}
@media (min-width: 981px) { .prova-celular { display: none; } }

@media (min-width: 981px) and (max-width: 1200px) {
  .prova { right: calc(4vw + 1rem); width: min(21rem, 40%); padding: 1rem 1.15rem .95rem; }
  .prova p { font-size: 1.0625rem; margin-bottom: .7rem; }
}

@media (min-width: 600px) and (max-width: 980px) {
  .texto { max-width: 40rem; margin-left: auto; margin-right: auto; }
  .prova-celular { max-width: 34rem; margin-left: auto !important; margin-right: auto !important; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .pessoa, .js .painel, .js .luz, .js .titulo .p, .js .assina, .js .apoio, .js .fio-rotulo,
  .js .paradas b, .js .paradas small, .js .acoes, .js .local, .js .prova, .js .nav, .js .ponto { opacity: 1; translate: none; scale: none; }
  .js .pessoa { filter: none; }
  .js .fio-traco { transform: none; }
  .ponto { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 22px 4px rgb(240 194 127 / .7); }
}