/* ═══════════════════════════════════════════════════════════════
   Dra. Patrícia Nascimento — Harmonização Facial
   Conceito: "Luz que esculpe" · Registro: Cinematográfico
   Motivo: a linha do perfil (traço dourado contínuo)
   ═══════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, effects, utilities;

/* ─── TOKENS ─── */
@layer tokens {
  @font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Hanken Grotesk";
    src: url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  /* fallbacks métricos: anulam o salto de layout no swap */
  @font-face {
    font-family: "Fraunces Fallback"; src: local("Georgia");
    size-adjust: 106%; ascent-override: 92%; descent-override: 26%;
  }
  @font-face {
    font-family: "Hanken Fallback"; src: local("Arial");
    size-adjust: 100%; ascent-override: 100%; descent-override: 26%;
  }

  :root {
    /* cores extraídas de dra-patricia.jpg — matiz quente em tudo */
    --surface-0: #14100D;            /* fundo da foto (preto quente)   */
    --surface-1: #1B1512;            /* um passo acima                 */
    --surface-2: #241C16;            /* cabelo / sombra                */
    --material:  #1D1712;            /* seções-assinatura (marrom pele)*/

    --ink-900: #F2E9DC;              /* marfim quente (pele em luz)    */
    --ink-600: #B4A48F;              /* secundário matizado            */
    --ink-450: #8A7C6B;

    --brand-300: #E0BE82;
    --brand-500: #C9A25E;            /* ouro velho (brinco)            */
    --brand-700: #8A6A3B;
    --accent-400: #C07A66;
    --accent-500: #A85F4C;           /* terracota (lábios)             */

    /* ouro metálico: NUNCA sólido — gradiente com especular deslocado */
    --gold: linear-gradient(105deg, #7C5B30 0%, #C9A25E 36%, #EED49A 50%, #C9A25E 64%, #8A6A3B 100%);

    --line: oklch(78% .07 80 / .14);
    --line-strong: oklch(78% .07 80 / .3);
    --focus: #E8CD96;
    --danger: #D98B74;
    --shadow-hue: 75;                /* matiz do ouro p/ sombras tingidas */

    --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --font-body: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;

    --fs-hero: clamp(2.9rem, 8.5vw, 7rem);
    --fs-h2: clamp(2rem, 4.6vw, 3.5rem);
    --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
    --fs-body: 1.0625rem;
    --fs-small: .8125rem;

    --space-4: .25rem; --space-8: .5rem; --space-16: 1rem;
    --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem;
    --section-y: clamp(5rem, 12vw, 11rem);
    --container: 1280px;
    --gutter: clamp(20px, 4vw, 48px);

    --r-sm: 6px;                     /* Cinematográfico: raios contidos */
    --r-md: 10px;

    --header-h: 88px; --header-h-compact: 64px;
    --z-header: 100; --z-fab: 150; --z-menu: 200; --z-dialog: 300;
    --z-toast: 400; --z-consent: 500;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-elastic: linear(0, .6 30%, 1.1 55%, .96 75%, 1);

    interpolate-size: allow-keywords; /* FAQ e alturas animáveis */
    color-scheme: dark;
  }

  @media (prefers-contrast: more) {
    :root { --line: oklch(78% .07 80 / .35); --ink-600: #C9BBAA; }
  }
}

/* ─── BASE ─── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  html {
    scroll-padding-top: calc(var(--header-h-compact) + 16px);
    scrollbar-gutter: stable;
    overflow-x: clip;               /* nunca overflow:hidden aqui */
    background: var(--surface-0);
    scrollbar-color: var(--brand-700) var(--surface-0);
    scrollbar-width: thin;
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: var(--fs-body); line-height: 1.7;
    font-feature-settings: "kern", "liga";
    background: var(--surface-0); color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
  }
  html:has(dialog.menu[open]) { overflow: hidden; }

  ::selection { background: var(--accent-400); color: #181009; }

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

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 420; font-variation-settings: "opsz" 100;
    letter-spacing: -.03em; line-height: 1.04;
    text-wrap: balance;
    font-optical-sizing: auto;
  }
  @supports (text-box-trim: trim-both) { h1, h2 { text-box-trim: trim-both; } }
  h2 { font-size: var(--fs-h2); margin-block-end: var(--space-24); }
  h3 { font-size: var(--fs-h3); }
  p { text-wrap: pretty; hanging-punctuation: first; max-width: 62ch; }
  p + p { margin-block-start: var(--space-16); }
  img, svg, video { max-width: 100%; }
  img { display: block; height: auto; }
  a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
  a:hover { text-decoration-color: var(--brand-500); }
  button { font: inherit; color: inherit; cursor: pointer; }
  address { font-style: normal; line-height: 1.8; }
  [id] { scroll-margin-top: calc(var(--header-h-compact) + 24px); }

  /* grão de filme sobre toda a página — matéria de cinema (fixo, sem transform) */
  body::after {
    content: ""; position: fixed; inset: -50%; z-index: 95; pointer-events: none;
    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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    opacity: .045; mix-blend-mode: overlay;
  }
  @media (prefers-reduced-motion: reduce) { body::after { display: none; } }
}

/* ─── LAYOUT ─── */
@layer layout {
  .section { padding-block: var(--section-y); padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; }
  .section--material {
    max-width: none; background: var(--material);
    border-block: 1px solid var(--line);
  }
  .section--material > * { max-width: var(--container); margin-inline: auto; }
  .section--narrow { max-width: 72ch; }
  .section__head p { color: var(--ink-600); font-size: 1.125rem; }
}

/* ─── COMPONENTES ─── */
@layer components {

  /* ····· botões (E.1) ····· */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding-inline: 26px; border-radius: var(--r-sm);
    font-size: .9375rem; font-weight: 560; letter-spacing: .005em;
    text-decoration: none; border: 0; position: relative;
    transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
    will-change: transform;
  }
  .btn--primary {
    background: var(--gold); color: #181009;
    box-shadow:
      inset 0 1px 0 oklch(1 0 0 / .35),
      0 1px 2px oklch(30% .05 var(--shadow-hue) / .5),
      0 10px 28px -8px oklch(45% .08 var(--shadow-hue) / .45);
  }
  .btn--primary::before { /* borda especular superior */
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(to bottom, oklch(92% .08 90 / .7), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  }
  .btn--primary:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 oklch(1 0 0 / .45), 0 2px 4px oklch(30% .05 var(--shadow-hue) / .5), 0 16px 36px -8px oklch(45% .08 var(--shadow-hue) / .55); }
  .btn--primary:active { scale: .985; transition-duration: .12s; }
  .btn--ghost {
    background: transparent; border: 1px solid var(--line-strong); color: var(--ink-900);
  }
  .btn--ghost:hover { border-color: var(--brand-500); background: oklch(78% .07 80 / .06); }
  .btn--icon { min-height: 44px; min-width: 44px; padding: 0; background: transparent; border: 0; border-radius: var(--r-sm); }
  .btn--icon:hover { background: var(--surface-1); }
  .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .btn.is-loading .btn__label { visibility: hidden; }
  .btn.is-loading::after {
    content: ""; position: absolute; width: 20px; height: 20px;
    border: 1.5px solid transparent; border-top-color: #181009; border-radius: 50%;
    animation: spin 1.4s linear infinite;
  }
  @keyframes spin { to { rotate: 1turn; } }

  /* link com o motivo desenhado sob o texto (hover do header/rodapé/corpo) */
  .link-motif {
    position: relative; text-decoration: none; color: var(--ink-900); font-weight: 520;
    padding-block-end: 6px; display: inline-block;
  }
  .link-motif::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M1 8 C10 2 18 9 27 4 C31 2 35 3 39 5' fill='none' stroke='%23C9A25E' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size .28s var(--ease-out);
  }
  .link-motif:hover::after, .link-motif:focus-visible::after { background-size: 100% 100%; }

  /* ····· placa de registro (E.6) ····· */
  .placa {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 52px; padding: 8px 16px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-1);
  }
  .placa__label { font-size: .6875rem; letter-spacing: .12em; color: var(--ink-450); text-transform: uppercase; }
  .placa__number {
    font-size: 1.0625rem; font-variant-numeric: tabular-nums; color: var(--ink-900);
    text-shadow: 0 1px 0 oklch(1 0 0 / .07), 0 -1px 0 oklch(0 0 0 / .5); /* relevo seco */
  }

  /* ····· divisor com o motivo (E.4) ····· */
  .divider { display: flex; align-items: center; gap: 18px; margin-block-end: var(--space-48); color: var(--brand-500); }
  .divider__line { flex: 1; height: 1px; background: var(--line); }
  .divider__motif { width: 34px; height: 34px; opacity: .85; }

  .placeholder { color: var(--accent-400); font-size: .85em; }

  /* ····· HEADER (item 15) ····· */
  .site-header { /* base no CSS crítico do <head> */ }
  .site-header__inner { /* base no CSS crítico */ }
  .logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; position: relative; }
  .logo svg { display: block; height: 40px; width: auto; }
  .logo__mark { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(6px); }
  .logo__full { transition: opacity .28s, transform .28s var(--ease-out); }
  .logo__mark { transition: opacity .28s, transform .28s var(--ease-out); }

  .site-header__utils { display: flex; align-items: center; gap: 20px; }
  .phone { display: flex; flex-direction: column; text-decoration: none; line-height: 1.3; position: relative; padding-inline-start: 14px; }
  .phone__number { font-variant-numeric: tabular-nums; font-weight: 560; font-size: .9375rem; }
  .phone__hours { font-size: .75rem; color: var(--ink-600); }
  .phone__status {
    position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-500); box-shadow: 0 0 8px oklch(78% .12 85 / .8);
  }
  .phone__status[data-open="false"] { background: var(--accent-400); box-shadow: none; }
  .header-wa { display: none; }

  /* estados */
  .site-header[data-scrolled="true"] {
    background: oklch(from var(--surface-0) l c h / .78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-image: linear-gradient(90deg, transparent, var(--line-strong) 30% 70%, transparent) 1;
  }
  .site-header[data-scrolled="true"] .site-header__inner { height: var(--header-h-compact); }
  .site-header[data-scrolled="true"] .logo__full { opacity: 0; transform: translateY(-6px); }
  .site-header[data-scrolled="true"] .logo__mark { opacity: 1; transform: none; }
  .site-header[data-hidden="true"] { transform: translateY(-100%); }

  /* compactação sem JS onde houver suporte */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .site-header { animation: hdr-bg linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
      .site-header__inner { animation: hdr-h linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
      .logo__full { animation: logo-out linear both; animation-timeline: scroll(root); animation-range: 60px 140px; }
      .logo__mark { animation: logo-in linear both; animation-timeline: scroll(root); animation-range: 60px 140px; }
    }
  }
  @keyframes hdr-bg {
    to { background: oklch(from var(--surface-0) l c h / .78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
         border-image: linear-gradient(90deg, transparent, var(--line-strong) 30% 70%, transparent) 1; }
  }
  @keyframes hdr-h { to { height: var(--header-h-compact); } }
  @keyframes logo-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes logo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* toggle que morfa */
  .menu-toggle { inline-size: 44px; block-size: 44px; display: grid; place-content: center; gap: 6px; background: none; border: 0; }
  .menu-toggle span { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out), width .3s var(--ease-out); }
  .menu-toggle span:first-child { width: 24px; } .menu-toggle span:last-child { width: 16px; }
  .menu-toggle[aria-expanded="true"] span { width: 22px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  /* ····· MENU fullscreen (Cinematográfico) ····· */
  dialog.menu {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: calc(var(--header-h-compact) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    border: 0; background: var(--surface-0); color: var(--ink-900);
    display: grid; grid-template-rows: 1fr auto; overflow-y: auto; overscroll-behavior: contain;
    z-index: var(--z-menu);
    transition: opacity .32s var(--ease-out), display .32s allow-discrete, overlay .32s allow-discrete;
  }
  dialog.menu:not([open]) { display: none; opacity: 0; }
  dialog.menu[open] { opacity: 1; }
  @starting-style { dialog.menu[open] { opacity: 0; } }
  dialog.menu::backdrop { background: oklch(10% .01 var(--shadow-hue) / .6); }
  .menu__motif { position: absolute; right: -4vw; top: 50%; translate: 0 -50%; height: 80vh; width: auto; opacity: .5; pointer-events: none; }
  .menu__nav ul { list-style: none; padding: 0; display: grid; align-content: center; gap: 4px; height: 100%; }
  .menu__nav a {
    display: inline-block; font-family: var(--font-display); font-weight: 420; letter-spacing: -.03em;
    font-size: clamp(2.5rem, 7.5vh, 5.25rem); line-height: 1.15; text-decoration: none;
    padding-block: 2px; color: var(--ink-900);
    transition: color .24s, translate .24s var(--ease-out);
  }
  .menu__nav a:hover, .menu__nav a:focus-visible { color: var(--brand-300); translate: 8px 0; }
  .menu__nav a[aria-current="true"] { color: var(--brand-500); }
  /* escadinha */
  .menu__nav li { transition: opacity .4s var(--ease-out), translate .4s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
  @starting-style { dialog.menu[open] .menu__nav li { opacity: 0; translate: 0 24px; } }
  .menu__footer { display: grid; gap: 6px; padding-top: 32px; border-top: 1px solid var(--line); color: var(--ink-600); font-size: .9375rem; }
  .menu__phone { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--ink-900); text-decoration: none; font-weight: 560; }
  .menu__footer .btn { justify-self: start; margin-top: 12px; }

  /* ····· FAB (E.1) ····· */
  .fab {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: var(--z-fab); display: inline-flex; align-items: center; gap: 8px;
    height: 52px; padding-inline: 16px; border-radius: 999px;
    background: var(--surface-1); color: var(--brand-300);
    border: 1px solid var(--line-strong); text-decoration: none; font-weight: 560; font-size: .875rem;
    box-shadow: 0 8px 30px -6px oklch(20% .04 var(--shadow-hue) / .6);
    opacity: 0; translate: 0 12px; pointer-events: none;
    transition: opacity .3s, translate .3s var(--ease-out), padding .3s;
  }
  .fab.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
  .fab.is-compact .fab__label { display: none; }
  .fab.is-compact { padding-inline: 14px; }

  /* ····· HERO ····· */
  .hero__inner {
    max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: 0;
    width: 100%; position: relative;
  }
  .hero__text { position: relative; z-index: 2; padding-block: 48px; }
  .hero__title { font-size: var(--fs-hero); }
  .hero__line { display: block; }
  .hero__line--back { position: relative; z-index: 1; }
  .hero__line--front {
    position: relative; z-index: 3; margin-inline-start: clamp(1rem, 8vw, 7rem);
    background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__city {
    display: block; font-family: var(--font-body); font-weight: 400; letter-spacing: 0;
    font-size: clamp(1rem, 2vw, 1.375rem); color: var(--ink-600); margin-top: var(--space-16);
  }
  .hero__sub { margin-top: var(--space-24); color: var(--ink-600); font-size: 1.125rem; max-width: 46ch; }
  .hero__sub strong { color: var(--ink-900); font-weight: 560; }
  .hero__actions { display: flex; align-items: center; gap: 28px; margin-top: var(--space-32); flex-wrap: wrap; }
  .hero__meta { margin-top: var(--space-24); font-size: var(--fs-small); color: var(--ink-450); letter-spacing: .04em; }

  .hero__figure {
    position: relative; z-index: 2; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter) * -1);
    justify-self: stretch; align-self: stretch; min-height: 70svh;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
    mask-composite: intersect;
  }
  .hero__img {
    width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%;
    filter: contrast(1.04) saturate(1.06) sepia(.12); /* gradação unificada da casa */
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__img { animation: kenburns 26s ease-in-out infinite alternate; }
  }
  @keyframes kenburns { from { scale: 1; } to { scale: 1.06; } }

  .hero__scroll {
    position: absolute; bottom: 28px; left: 50%; translate: -50% 0; color: var(--ink-450);
    width: 44px; height: 56px; display: grid; place-items: center;
  }
  .hero__scroll svg { height: 34px; }
  @media (prefers-reduced-motion: no-preference) { .hero__scroll svg { animation: drip 2.6s var(--ease-out) infinite; } }
  @keyframes drip { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(6px); opacity: 1 } }

  /* sequência de entrada (uma vez, coreografada) */
  @media (prefers-reduced-motion: no-preference) {
    .hero__line, .hero__city { opacity: 0; translate: 0 24px; animation: rise .7s var(--ease-out) forwards; }
    .hero__line--back { animation-delay: .16s; }
    .hero__line--front { animation-delay: .22s; }
    .hero__city { animation-delay: .28s; }
    .hero__sub, .hero__actions, .hero__meta { opacity: 0; animation: fade .6s ease .7s forwards; }
    .site-header { animation: fade .5s ease .08s backwards; }
    .hero__figure { opacity: 0; animation: fade 1s ease .42s forwards; }
  }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
  @keyframes fade { to { opacity: 1; } }

  /* ····· PROVA ····· */
  .prova { border-block: 1px solid var(--line); background: var(--surface-1); }
  .prova__grid {
    max-width: var(--container); margin-inline: auto; padding: var(--space-24) var(--gutter);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); align-items: center;
  }
  .prova__item { text-decoration: none; display: grid; gap: 2px; }
  .prova__big { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
  .prova__big span { color: var(--brand-500); }
  .prova__small { font-size: var(--fs-small); color: var(--ink-600); }
  a.prova__item:hover .prova__big { color: var(--brand-300); }

  /* ····· TRATAMENTOS (lista + preview) ····· */
  .svc-list { list-style: none; padding: 0; margin-top: var(--space-32); }
  .svc {
    display: grid; grid-template-columns: 1fr; gap: 6px; padding: 26px 8px;
    border-top: 1px solid var(--line); text-decoration: none; position: relative;
    transition: padding-left .28s var(--ease-out), background-color .28s;
  }
  .svc-list li:last-child .svc { border-bottom: 1px solid var(--line); }
  .svc::before { /* marcador: fragmento do motivo */
    content: ""; position: absolute; left: -4px; top: 34px; width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9 1C10.5 4 10 7 7 8.5C5 9.6 3 9.4 1.8 8.2' fill='none' stroke='%23C9A25E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0; transition: opacity .24s, translate .24s var(--ease-out); translate: -6px 0;
  }
  .svc:hover, .svc:focus-visible { padding-left: 24px; background: oklch(78% .07 80 / .04); }
  .svc:hover::before, .svc:focus-visible::before { opacity: 1; translate: 0 0; }
  .svc__name {
    font-family: var(--font-display); font-weight: 430; letter-spacing: -.02em;
    font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.1; color: var(--ink-900);
    transition: font-variation-settings .15s;
  }
  .svc:hover .svc__name { font-variation-settings: "wght" 520; }
  .svc__name em { font-style: normal; font-size: .45em; color: var(--brand-500); letter-spacing: .04em; vertical-align: middle; margin-left: 10px; }
  .svc__desc { color: var(--ink-600); max-width: 58ch; }
  .svc-preview {
    position: fixed; z-index: 60; width: 240px; aspect-ratio: 3 / 4; pointer-events: none;
    border-radius: var(--r-md); overflow: hidden; opacity: 0; scale: .92;
    border: 1px solid var(--line-strong);
    box-shadow: 0 24px 60px -12px oklch(10% .03 var(--shadow-hue) / .8);
    transition: opacity .24s, scale .24s var(--ease-out);
  }
  .svc-preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) sepia(.28) contrast(1.05); }
  .svc-preview.is-on { opacity: 1; scale: 1; }

  /* ····· MÉTODO (scrollytelling) ····· */
  .metodo { padding-block: var(--section-y); }
  .metodo__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-48); padding-inline: var(--gutter); }
  .metodo__visual { position: sticky; top: calc(var(--header-h-compact) + 24px); align-self: start; padding-block: 24px; }
  .metodo__svg { width: min(100%, 420px); height: auto; }
  .metodo__caption { margin-top: var(--space-16); font-size: var(--fs-small); color: var(--ink-450); }
  .seg { stroke-dasharray: 1; stroke-dashoffset: 0; }
  body.fx .seg { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
  body.fx .seg.is-on { stroke-dashoffset: 0; }
  .metodo__steps { display: grid; gap: clamp(3rem, 10vh, 6rem); padding-block: 10vh; }
  .metodo__steps h2 { margin-block-end: 0; }
  .step { max-width: 52ch; }
  .step h3 { margin-block-end: 10px; color: var(--ink-900); }
  .step p { color: var(--ink-600); }
  .step { transition: opacity .4s; }
  body.fx .step { opacity: .38; }
  body.fx .step.is-active { opacity: 1; }

  /* ····· PROFISSIONAL ····· */
  .profissional__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-48); align-items: center; }
  .profissional__fig { position: relative; }
  .profissional__fig img {
    aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% 15%;
    filter: contrast(1.04) saturate(1.06) sepia(.12);
    border-radius: var(--r-md);
    transition: filter .4s, scale .5s var(--ease-out);
  }
  .profissional__fig:hover img { filter: contrast(1.06) saturate(1.12) sepia(.06); scale: 1.02; }
  .profissional__fig figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-450); }
  .profissional__text .placa { margin-block: var(--space-16) var(--space-24); }

  /* revelação por máscara com borda-motivo */
  .reveal { position: relative; clip-path: inset(0 100% 0 0); }
  .reveal.is-in { clip-path: inset(0); transition: clip-path .9s var(--ease-out); }
  .reveal::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
    background: var(--gold); opacity: 0; translate: 0 0;
  }
  .reveal.is-in::after { animation: edge .9s var(--ease-out) forwards; }
  @keyframes edge { 0% { opacity: 1; left: 0 } 90% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
      @keyframes reveal-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
    }
  }

  /* ····· PRIMEIRA CONSULTA ····· */
  .consulta__steps { list-style: none; padding: 0; counter-reset: passo; display: grid; gap: var(--space-24); margin-block: var(--space-32); }
  .consulta__steps li { counter-increment: passo; padding-inline-start: 56px; position: relative; }
  .consulta__steps li::before {
    content: counter(passo, decimal-leading-zero);
    position: absolute; left: 0; top: 4px;
    font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-500); font-variant-numeric: tabular-nums;
  }
  .consulta__steps h3 { margin-block-end: 4px; }
  .consulta__steps p { color: var(--ink-600); }
  .consulta__tip { padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-600); }

  /* ····· FAQ ····· */
  .faq__list { display: grid; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 8px; font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -.015em;
    min-height: 44px; transition: color .2s;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--brand-300); }
  .faq details:not([open]) summary { color: var(--ink-600); }
  .faq details[open] summary { color: var(--ink-900); }
  .faq__icon { flex: none; width: 14px; height: 14px; position: relative; }
  .faq__icon::before, .faq__icon::after {
    content: ""; position: absolute; inset: 50% auto auto 0; width: 14px; height: 1.5px; background: var(--brand-500);
    transition: rotate .3s var(--ease-out);
  }
  .faq__icon::after { rotate: 90deg; }
  .faq details[open] .faq__icon::after { rotate: 45deg; }
  .faq details[open] .faq__icon::before { rotate: -45deg; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease-out), content-visibility .32s; transition-behavior: allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  .faq__body { padding: 0 8px 24px; color: var(--ink-600); max-width: 62ch; }

  /* ····· ONDE / MAPA ····· */
  .onde__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-48); margin-top: var(--space-32); align-items: start; }
  .mapa { position: relative; }
  .mapa__facade {
    position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
    background: var(--surface-1);
  }
  .mapa__papel { display: block; width: 100%; height: auto; aspect-ratio: 640 / 420; }
  .mapa__pulse { animation: pulse 3s ease-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes pulse { 0% { scale: .4; opacity: .9 } 100% { scale: 1.8; opacity: 0 } }
  @media (prefers-reduced-motion: reduce) { .mapa__pulse { animation: none; opacity: .4; } }
  .mapa__load { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; }
  .mapa__note { position: absolute; left: 12px; bottom: 8px; font-size: .72rem; color: var(--ink-450); }
  .mapa__live { aspect-ratio: 640 / 420; border-radius: var(--r-md); border: 1px solid var(--line-strong); overflow: hidden; background: var(--surface-1); }
  .mapa__live .leaflet-tile-pane { filter: grayscale(1) sepia(.4) brightness(.72) contrast(1.1); }
  .mapa__live::after { /* tint duotone da marca */
    content: ""; position: absolute; inset: 0; z-index: 500; pointer-events: none;
    background: var(--material); mix-blend-mode: color; opacity: .55;
  }
  .pin { position: relative; }
  .pin__pulse {
    position: absolute; inset: 6px; border: 1px solid var(--brand-500); border-radius: 50%;
    animation: pulse 3s ease-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .pin__pulse { animation: none; opacity: .4; } }
  .onde__info { display: grid; gap: var(--space-24); }
  .onde__actions { display: flex; gap: 16px; flex-wrap: wrap; }
  .onde__facts { display: grid; gap: 14px; }
  .onde__facts div { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
  .onde__facts dt { font-size: var(--fs-small); color: var(--ink-450); }
  .onde__facts dd { color: var(--ink-900); }
  .onde__alt { font-size: .9375rem; color: var(--ink-600); }

  /* ····· CONTATO / FORM (E.3) ····· */
  .contato { border-top: 1px solid var(--line); background: var(--surface-1); max-width: none; }
  .contato__grid { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-48); align-items: start; }
  .contato h2 { margin-block-end: var(--space-16); }
  .contato p { color: var(--ink-600); margin-block-end: var(--space-24); }
  .contato__hours { display: flex; align-items: center; gap: 10px; margin-top: var(--space-16); font-size: .9375rem; }
  .contato__hours .phone__status { position: static; }
  .form { display: grid; gap: var(--space-16); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(20px, 3vw, 36px); }
  .form__field { display: grid; gap: 6px; }
  .form__field label { font-size: .9375rem; font-weight: 520; }
  .form__field input, .form__field textarea {
    height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-1); color: var(--ink-900); font: inherit; font-size: 16px;
    transition: box-shadow .16s, border-color .16s;
  }
  .form__field textarea { height: auto; min-block-size: 120px; padding: 14px 16px; resize: vertical; field-sizing: content; }
  .form__field input::placeholder, .form__field textarea::placeholder { color: var(--ink-450); }
  .form__field input:focus, .form__field textarea:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 1px var(--brand-500), 0 0 0 4px oklch(78% .07 80 / .18);
  }
  .form__field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
  .form__error { color: var(--danger); font-size: .875rem; }
  .form__legal { font-size: var(--fs-small); color: var(--ink-450); margin: 0; }
  .form__ok { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-1); }

  /* ····· RODAPÉ (15-B) ····· */
  .site-footer { border-top: 1px solid var(--line); background: var(--surface-0); overflow: clip; }
  .site-footer__inner { max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter) 0; }
  .site-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-48); padding-bottom: var(--space-48); }
  .site-footer__col { display: grid; gap: 10px; align-content: start; color: var(--ink-600); font-size: .9375rem; }
  .site-footer__col a { text-decoration: none; color: var(--ink-600); width: fit-content; min-height: 32px; display: inline-flex; align-items: center; }
  .site-footer__col a:hover { color: var(--brand-300); }
  .site-footer__hours { display: flex; align-items: center; gap: 10px; }
  .site-footer__hours .phone__status { position: static; }
  .placa--footer { margin-top: 10px; }
  .site-footer__giant {
    font-family: var(--font-display); font-weight: 380; letter-spacing: -.04em; line-height: .8;
    font-size: clamp(3rem, 11.5vw, 11rem); white-space: nowrap; text-align: center;
    color: transparent; -webkit-text-stroke: 1px var(--line-strong);
    transform: translateY(.18em); user-select: none;
    max-width: none; hanging-punctuation: none;
  }
  .site-footer__base {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-block: 24px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-450);
  }
  .site-footer__reg { font-size: .8125rem; color: var(--ink-450); width: 100%; margin-top: -8px; font-variant-numeric: tabular-nums; }
  .site-footer__reg .reg-num { color: var(--brand-300); font-weight: 600; }
  .totop { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-600); min-height: 44px; }
  .totop svg { rotate: -90deg; transition: translate .24s var(--ease-out); }
  .totop:hover svg { translate: 0 -4px; }
  .totop:hover { color: var(--brand-300); }

  /* ····· TOAST (E.12) ····· */
  .toast {
    position: fixed; right: 20px; bottom: 90px; z-index: var(--z-toast);
    max-width: 340px; padding: 14px 18px 16px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-900);
    font-size: .9375rem; box-shadow: 0 16px 40px -8px oklch(10% .03 var(--shadow-hue) / .8);
    transition: opacity .3s, translate .3s var(--ease-out);
  }
  .toast[hidden] { display: block; opacity: 0; translate: 0 8px; pointer-events: none; visibility: hidden; }
  .toast::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; background: var(--gold); transform-origin: left; animation: toastbar 4s linear forwards; }
  @keyframes toastbar { from { scale: 1 1 } to { scale: 0 1 } }

  /* ····· CURSOR (complemento — o nativo continua visível) ····· */
  .cursor {
    position: fixed; z-index: 90; top: 0; left: 0; pointer-events: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--brand-500); translate: -50% -50%;
    transition: width .24s var(--ease-out), height .24s var(--ease-out), background-color .24s, opacity .3s;
    display: grid; place-items: center; opacity: 0;
  }
  .cursor.is-live { opacity: .92; }
  .cursor.is-active { width: 64px; height: 64px; background: oklch(20% .03 var(--shadow-hue) / .82); border: 1px solid var(--line-strong); backdrop-filter: blur(4px); }
  .cursor__label { font-size: .72rem; font-weight: 560; color: var(--brand-300); opacity: 0; transition: opacity .2s; letter-spacing: .03em; }
  .cursor.is-active .cursor__label { opacity: 1; }

  /* ····· páginas internas (política/termos/404) ····· */
  .doc { max-width: 72ch; margin-inline: auto; padding: calc(var(--header-h) + 48px) var(--gutter) var(--section-y); }
  .doc h1 { font-size: var(--fs-h2); margin-block-end: var(--space-32); }
  .doc h2 { font-size: 1.5rem; margin-block: var(--space-32) var(--space-16); }
  .doc p, .doc li { color: var(--ink-600); }
  .doc ul { padding-inline-start: 22px; display: grid; gap: 8px; margin-block: var(--space-16); }
  .doc time { color: var(--ink-450); font-size: var(--fs-small); }

  .nf { min-height: 82svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 24px) var(--gutter) 64px; }
  .nf svg { width: 140px; height: auto; margin-inline: auto; margin-bottom: 24px; }
  .nf h1 { font-size: var(--fs-h2); }
  .nf p { color: var(--ink-600); margin: 16px auto 32px; }
  .nf nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
}

/* ─── EFEITOS (o site funciona inteiro se esta camada falhar) ─── */
@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    .btn--magnetic { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .3s var(--ease-elastic); }
    .btn--magnetic .btn__label { transform: translate(calc(var(--mx, 0) * .6), calc(var(--my, 0) * .6)); display: inline-block; transition: transform .3s var(--ease-elastic); }
  }
}

/* ─── UTILITIES + RESPONSIVO + REDUCED MOTION ─── */
@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (max-width: 1100px) {
    .phone { display: none; }
  }
  @media (max-width: 768px) {
    .site-header .btn--primary { display: none; }
    .header-wa { display: inline-flex; }
    .hero__inner { grid-template-columns: 1fr; gap: 0; }
    .hero__figure {
      order: -1; min-height: 46svh; margin-inline: calc(var(--gutter) * -1);
      mask-image: linear-gradient(to bottom, #000 78%, transparent);
      -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
    }
    .hero__text { padding-block: 0 64px; }
    .hero__scroll { display: none; }
    .prova__grid { grid-template-columns: 1fr 1fr; }
    .metodo__grid { grid-template-columns: 1fr; gap: var(--space-24); }
    .metodo__visual { position: static; }
    .metodo__svg { width: 180px; margin-inline: auto; }
    .metodo__steps { padding-block: 0; }
    .profissional__grid, .onde__grid, .contato__grid { grid-template-columns: 1fr; }
    .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-32); }
    .site-footer__giant { white-space: normal; }
    .menu__nav a { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  }
  @media (min-width: 769px) and (max-width: 1100px) {
    .prova__grid { grid-template-columns: 1fr 1fr; }
    .onde__grid, .contato__grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
    .site-header, .site-header__inner, .logo__full, .logo__mark { animation: none !important; transition: none !important; }
    .site-header[data-hidden="true"] { transform: none; }
    .hero__line, .hero__city, .hero__sub, .hero__actions, .hero__meta, .hero__figure, .site-header { opacity: 1 !important; translate: none !important; }
    .reveal { clip-path: none; }
    .reveal::after { display: none; }
    body.fx .seg { stroke-dashoffset: 0; }
    body.fx .step { opacity: 1; }
  }
}