/* ==========================================================================
   Face Excellence Clinic — Implantes Dentários
   Identidade: preto e dourado do logo e do Instagram (@face.excellence),
   serifa elegante no título, estrutura e efeitos da LP da Nero.
   Toda cor mora aqui, como token. Nenhum arquivo usa cor literal.
   ========================================================================== */

:root {
  --ink: #0a0907;
  --coal: #13110d;
  --graphite: #1d1a14;
  --paper: #f4f3f2;
  --cream: #fbf8f0;
  --white: #fff;
  --gold: #ddb01e;
  --gold-hi: #f6de58;
  --gold-deep: #9c7a0c;
  --gold-ink: #2d2607;
  --mute: #c9c2b2;
  --dim: #8b8474;
  --text-l: #3d3a33;
  --text-l2: #6a655a;
  --line-d: rgba(221, 176, 30, .22);
  --line-w: rgba(255, 255, 255, .12);
  --line-l: rgba(10, 9, 7, .14);
  --glow: rgba(221, 176, 30, .34);
  --glow-soft: rgba(221, 176, 30, .08);
  --glow-spot: rgba(221, 176, 30, .16);
  --shine: rgba(255, 255, 255, .55);
  --veil: rgba(10, 9, 7, .82);
  --veil-2: rgba(10, 9, 7, .6);
  --shadow: rgba(0, 0, 0, .55);
  --ok: #9fe2b5;
  --err: #ffb4a8;
  --wa: #25d366;

  --f-display: 'Montserrat', system-ui, sans-serif;
  --f-title: 'Montserrat', system-ui, sans-serif;
  --f-thin: 'Montserrat', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, monospace;

  --wrap: 1180px;
  --gutter: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografia ---------- */

.kicker {
  font-family: var(--f-mono); font-weight: 500; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: flex; align-items: center; gap: 14px;
}
.kicker::before { content: ''; width: 38px; height: 1px; background: currentColor; flex: none; }
.sec--paper .kicker { color: var(--gold-deep); }

.display {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; letter-spacing: -.02em;
}
.display--md { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; }

.title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.85rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; max-width: 22ch;
}

.outline { display: block; color: transparent; -webkit-text-stroke: 1.2px var(--gold); }
.gold { color: var(--gold); }
.sec--paper .gold { color: var(--gold-deep); }

.lead { font-size: 1.1rem; max-width: 56ch; margin-top: 20px; color: var(--mute); }
.lead strong { color: var(--white); }
.sec--paper .lead { color: var(--text-l); }
.sec--paper .lead strong { color: var(--ink); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-family: var(--f-thin); font-weight: 700; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; padding: 19px 30px 16px; min-height: 44px;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: transparent; color: var(--gold); }
.btn--dark { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.btn--dark:hover { background: transparent; color: var(--ink); }
.btn--ghost { border-color: var(--line-d); color: var(--white); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: 13px 18px 10px; font-size: .72rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */

.header {
  position: sticky; top: 0; z-index: 50; background: var(--veil);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-d);
}
.header__in { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: block; flex: none; }
.brand img { height: 50px; width: auto; }
.brand--lg img { height: 84px; }

.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a {
  font-family: var(--f-thin); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--mute); padding-top: 3px; transition: color .2s;
}
.nav a:hover { color: var(--gold); }

/* ---------- Seções ---------- */

.sec { padding: clamp(56px, 7.5vw, 100px) 0; position: relative; }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--cream { background: var(--cream); color: var(--ink); }
.sec--ink { background: var(--ink); color: var(--white); }
.sec--spot { background: radial-gradient(50% 60% at 100% 0%, var(--glow) 0%, var(--glow-soft) 36%, transparent 64%), var(--ink); }
.sec__head { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------- Reveal ---------- */

.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(26px); }