/* Dr. Lucas Schmidt · Cirurgia Plástica — sistema visual (ver 02-conceito/sistema.md) */
:root{
  /* o porcelanato Calacatta da recepção, grafite, o dourado do logo e o laranja da haste dos óculos */
  --marmore-1:#f8f5f0;
  --marmore-2:#eee9e1;
  --marmore-3:#e1dbd1;
  --grafite:#22252a;
  --grafite-2:#5d6168;
  --ouro:#a5853f;
  --ouro-texto:#7d6124;   /* dourado para texto pequeno: 5,3:1 sobre o mármore */
  --ouro-claro:#cdb27a;
  --haste:#c9482a;
  --haste-texto:#b53c20;  /* laranja para texto pequeno: 5,3:1 sobre o mármore */
  --haste-clara:#ee8a66;
  --gel-1:#ffffff; --gel-2:#f6ece4; --gel-3:#e3ecef; --gel-4:#d8d1c6;
  --noite:#1b1d21;
  --noite-2:#2a2d33;
  --marfim:#f3ede3;
  --marfim-2:rgba(243,237,227,.7);
  --serifa:"Besley", Georgia, "Times New Roman", serif;
  --sans:"Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --borda:clamp(18px, 4vw, 56px);
  --largura:1320px;
  --respiro:clamp(72px, 11vw, 160px);
  --curva:cubic-bezier(.2,.7,.2,1);
  --filete-ouro:color-mix(in oklch,var(--ouro) 55%,transparent);
  --filete:color-mix(in oklch,var(--grafite) 16%,transparent);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{font-family:var(--sans);color:var(--grafite);background:var(--marmore-1);overflow-x:hidden;font-size:clamp(16px,1.2vw,17.5px);line-height:1.56}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit;word-spacing:inherit}
:focus-visible{outline:2px solid var(--haste);outline-offset:3px;border-radius:2px}
.pular{position:absolute;left:-999px;top:8px;background:var(--grafite);color:#fff;padding:10px 16px;z-index:50;border-radius:4px}
.pular:focus{left:8px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* peças compartilhadas */
.rotulo{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-texto);line-height:1.4}
.rotulo b{color:var(--grafite);font-weight:600}
.titulo{font-family:var(--serifa);font-weight:400;font-size:clamp(38px,5.2vw,84px);line-height:1;letter-spacing:-.028em;text-wrap:balance}
.titulo em{font-style:italic;color:var(--haste)}
.botao{display:inline-flex;align-items:center;gap:10px;background:var(--grafite);color:#fff;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;padding:16px 26px;border-radius:4px;transition:transform .3s ease,background .3s ease}
.botao:hover{transform:translateY(-2px);background:#111317}
.botao svg{width:19px;height:19px;fill:currentColor;flex:none}
.botao.claro{background:var(--marfim);color:var(--noite)}
.botao.claro:hover{background:#fff}
.elo{text-decoration:underline;text-decoration-color:var(--haste);text-underline-offset:5px;text-decoration-thickness:1px}
.elo:hover{text-decoration-thickness:2px}
.grao{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.secao{position:relative;isolation:isolate;padding:var(--respiro) var(--borda)}
.secao>.dentro{max-width:var(--largura);margin:0 auto}

/* quem explica: a assinatura de toda prancha */
.assina{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.assina img{width:clamp(54px,6.4vw,96px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:1px solid var(--ouro);padding:4px;background:rgba(255,255,255,.7);flex:none}
.assina .rotulo{font-size:11px;letter-spacing:.2em}
.assina .pergunta-t{font-family:var(--serifa);font-weight:400;font-style:italic;font-size:clamp(20px,1.95vw,29px);line-height:1.15;margin-top:5px;letter-spacing:-.01em}

/* a entrada das seções: um gesto só */
.revela{opacity:0;transform:translateY(14px);transition:opacity 1s ease var(--d,0s),transform 1.1s var(--curva) var(--d,0s)}
.visto .revela,.revela.visto{opacity:1;transform:none}
.traco{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.3,.6,.2,1) var(--d,.2s)}
.visto .traco{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revela,.traco{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}