/* ========================================================================
       BRUM ESTHETICS v6 — direcao visual aprovada (ADR-0009, ticket #4)
       Mobile-first (alvo 390px). Este :root e a fonte unica de tokens (ticket #3).
       Campo dominante ESCURO: marrom luz-de-vela (--vela). Acento vivo: rose
       mineral (--rose). Metal: latao da logo (--latao), so fio/monograma/marcador.
       Creme, terracota e serifa de contraste sairam da paleta (04-1-anti-default).
       Regra dura: --latao nunca em texto corrido; --rose-mist e superficie pontual.
       Motion nao-porteira: o estado FINAL e o default aqui.
    ======================================================================== */

    /* ---- FONTES PROPRIAS (ticket #5): sem Google Fonts, sem terceiro no critical path.
       Bricolage Grotesque v9 (SIL OFL) + DM Sans v17. Variaveis: 1 arquivo por corte. ---- */
    @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800;
      font-stretch: 75% 100%; font-display: swap;
      src: url('/assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800;
      font-stretch: 75% 100%; font-display: swap;
      src: url('/assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
      src: url('/assets/fonts/dm-sans-var-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
      src: url('/assets/fonts/dm-sans-var-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap;
      src: url('/assets/fonts/dm-sans-var-italic-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap;
      src: url('/assets/fonts/dm-sans-var-italic-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

    /* ========================================================================
       PALETA "SALA" — redesenho 10/09/2026 (_design/direcao-redesign-2026-09.md §3).
       As cores de campo foram amostradas de assets/nat.webp: o fundo da pagina E a
       parede da sala da Brum. Por isso o painel do hero le como a sala continuando
       dentro da pagina, em vez de um bege generico atras de um rosto.

       Este :root e a fonte unica de tokens das 7 paginas. Os nomes v5/v6/v9
       (--vela, --rose, --latao, --porcelain, --linen...) CONTINUAM existindo como
       alias: 3.700 linhas de CSS ja apontam para eles, e re-tema por token nao e
       renomear classe. Trocar o VALOR aqui repinta o site inteiro.

       PALETA V1 terracota/dourado/off-white — 22/09/2026 (ordem do Vitor,
       .scratch/paleta-terracota-20260922/afrodite-paleta.md). --iris deixa de
       ser roxo e vira terracota; --sala sai da faixa "creme" (h24, nao 30-55).

       Gate: scripts/check-anti-default.py aborta se --creme, --telha ou
       --font-display sumirem de :root (§0.1 da direcao). Eles ficam:
         eixo1 creme     = FALSE (--creme -> #F4EEEA, h24 s31 l94 — fora de 30..55)
         eixo2 serifa    = FALSE (--font-display = Bricolage Grotesque, grotesco)
         eixo3 terracota = TRUE  (--telha -> #A4472C, h13.5 — dentro de 10..30)
       O gate so reprova com os TRES juntos.
    ======================================================================== */
    :root {
      /* ---- CAMPO (§3.2) ---------------------------------------------------- */
      --sala:        #F4EEEA;   /* campo dominante de todas as paginas */
      --sala-fundo:  #EADFD7;   /* banda recuada, alternancia de secao */
      --linho:       #FBF8F6;   /* superficie elevada: linha ativa, input */
      --umbra:       #2D1E18;   /* campo escuro: SO fechamento e rodape */

      /* ---- TINTA ----------------------------------------------------------- */
      --tinta-rgb:   42,29,23;
      --tinta:       rgb(var(--tinta-rgb));   /* #2A1D17 — terracota V1 22/09 */
      --tinta-suave: #65524A;                 /* apoio/meta — terracota V1 22/09 */

      /* ---- ACENTO UNICO: terracota (V1 22/09, substitui o roxo --iris) ------ */
      --iris-rgb:    164,71,44;
      --iris:        rgb(var(--iris-rgb));    /* #A4472C — 5.19:1 sobre --sala */
      --iris-escuro: #88381F;                 /* hover do botao primario */
      --iris-claro:  #E8A283;                 /* acento SOBRE campo escuro apenas */

      /* ---- METAL — atomo do logo. --dourado NUNCA em texto (2.15:1) --------- */
      --dourado-rgb: 198,154,63;
      --dourado:     rgb(var(--dourado-rgb));
      --gold-ink:    #7A5A16;   /* unico tom de ouro admitido em texto (5.28:1) */

      /* ---- ALIAS EXIGIDOS PELO GATE (§0.1) — nao remover -------------------- */
      --creme: var(--sala);
      --telha: var(--iris);

      /* ---- ALIAS DE COMPATIBILIDADE v5/v6/v9 ------------------------------- */
      --vela-rgb:      45,30,24;
      --vela:          var(--umbra);
      --vela-deep:     #221610;
      --vela-soft:     #3D2A21;
      --vela-lift:     #4E372C;
      --pedra:         var(--sala);
      --basalto:       var(--umbra);
      --basalto-alto:  #3D2A21;
      --basalto-deep:  #221610;
      --gelo:          var(--linho);
      --neblina:       #CDBDB3;
      --grafite:       var(--tinta);
      --vidro:         var(--iris-claro);
      --vidro-deep:    var(--iris-escuro);

      --rose-rgb:      164,71,44;
      --rose:          var(--iris);
      --rose-deep:     var(--iris);
      --rose-mist:     var(--sala-fundo);
      --rose-clay:     var(--iris-claro);
      --latao-rgb:     var(--dourado-rgb);
      --latao:         var(--dourado);

      --ink-rgb:       var(--tinta-rgb);
      --ink:           var(--tinta);
      --ink-soft:      var(--tinta-suave);
      --muted:         var(--tinta-suave);
      --ink-inverse:   var(--linho);   /* texto sobre --iris e sobre campo escuro */
      --espresso-rgb:  var(--tinta-rgb);
      --espresso:      var(--tinta);
      --espresso-deep-rgb: 34,22,16;
      --espresso-deep: rgb(var(--espresso-deep-rgb));

      --porcelain:     var(--linho);
      --linen:         var(--sala);
      --parchment:     var(--sala-fundo);
      --sand-solid:    var(--sala-fundo);
      --surface:       var(--linho);
      --spot-bg:       var(--sala-fundo);
      --panel-image:   none;
      --panel-position: 50% 50%;
      --bh-tinta:      var(--tinta);
      --bh-terracota:  var(--iris);
      --bh-reserve:    0px;

      --ink-on-dark-rgb: 244,238,234;
      --ink-on-dark:   var(--sala);
      --muted-on-dark: #CDBDB3;
      --clay:          var(--tinta-suave);

      /* ---- FIO (§3.5): separacao por cor de superficie e por fio, sem sombra - */
      --line:          rgba(var(--tinta-rgb), 0.12);
      --line-strong:   rgba(var(--tinta-rgb), 0.18);
      --line-inverse:  rgba(244, 238, 234, 0.14);
      --gold-thread:   rgba(var(--dourado-rgb), 0.55);
      --gold-glow:     rgba(var(--dourado-rgb), 0.16);

      /* ---- FOCO: anel visivel e a UNICA sombra admitida no sistema ---------- */
      --focus-ring:      0 0 0 2px var(--sala), 0 0 0 4px var(--iris);
      --focus-ring-dark: 0 0 0 2px var(--umbra), 0 0 0 4px var(--dourado);

      /* ---- TIPOGRAFIA (§3.3): grotesco de display, sem serifa de contraste -- */
      --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
      --font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --font-quote:   var(--font-sans);
      --fw-light: 340; --fw-reg: 400; --fw-med: 500; --fw-semi: 600;

      /* ---- Altura do banner de cookies, escrita pelo brum-tracking.js (§7).
         Rodada 2 do code-review (11/09): o comentario antigo dizia que o
         default nao-zero evitava a CTA fixa nascer colada no pe antes do JS
         — falso, o valor sempre foi 0px. Zero e o certo quando nao ha banner
         (consentimento ja dado): a CTA some via translateY(110%) nesse
         estado e usa `bottom: 0` fixo (v7.css), sem ler esta variavel. So
         quando o banner fica visivel showBanner() escreve a altura real,
         antes que o usuario role o suficiente pra CTA aparecer — o fallback
         de 0px em `bottom: var(--cookie-banner-height, 0px)` (v7.css)
         cobre so a janela entre o primeiro paint e esse rAF duplo. */
      --cookie-banner-height: 0px;


      --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
      --text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
      --text-base: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
      --text-md:   clamp(1.0625rem, 1.0rem + 0.35vw, 1.25rem);
      --text-lg:   clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
      --text-xl:   clamp(1.5rem, 1.28rem + 1.0vw, 2rem);
      --text-2xl:  clamp(1.9rem, 1.55rem + 1.6vw, 2.85rem);
      --text-3xl:  clamp(2.4rem, 1.9rem + 2.3vw, 3.75rem);
      --text-hero: clamp(2.9rem, 2.05rem + 3.7vw, 5.5rem);

      --leading-tight: 1.02; --leading-snug: 1.12;
      --leading-normal: 1.62; --leading-relaxed: 1.7;
      --tracking-tight: -0.03em; --tracking-wide: 0.06em;
      --tracking-caps: 0.16em; --tracking-brand: 0.20em;
      --tracking-body: 0.005em;

      /* ---- ESPACAMENTO ---- */
      --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
      --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem;
      --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem;
      --section-y: clamp(3.5rem, 2.4rem + 5vw, 8rem);
      --section-y-lg: clamp(5rem, 3rem + 7vw, 11rem);
      --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
      --stack: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);

      /* ---- CONTEINERES ---- */
      --max: 1200px; --max-narrow: 720px; --max-wide: 1360px;
      --header-h: clamp(58px, 4rem + 1vw, 76px);

      /* ---- RAIO (§3.5): raio 0 em toda superficie. Excecao unica: botao e
         input, 2px. Raio grande + bege e a assinatura do template do nicho. ---- */
      --radius-xs: 2px; --radius-sm: 0; --radius: 0;
      --radius-lg: 0; --radius-btn: 2px; --radius-pill: 2px;

      /* ---- SOMBRAS (§3.5): NENHUMA. Separacao por cor de superficie e por fio.
         Os quatro nomes ficam porque ha 41 pontos de uso; o valor e none. ---- */
      --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

      /* ---- MOTION ---- */
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
      --ease: var(--ease-out);
      --dur-fast: 150ms; --dur-quick: 250ms; --dur: 400ms;
      --dur-slow: 650ms; --dur-slower: 900ms; --reveal-y: 8px;
      /* v6: tokens do motion-spec-v6.md §Tokens */
      --parallax-soft: 24px;   /* deslocamento maximo de figura em parallax desktop */
      --parallax-mobile: 10px; /* idem em <=767px */
      --stagger: 70ms;         /* stagger canonico de filhos */

      /* ---- Z-INDEX ---- */
      --z-base: 1; --z-raised: 10; --z-sticky: 100;
      --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200;

      /* ---- ALIASES LEGADOS (referencias vivas em inline-style/JS/faq/cookie) ---- */
      --chalk: var(--porcelain);
      --warm:  var(--linen);
      --stone: var(--muted);
      --dim:   var(--clay);
      --sand:  var(--gold-ink);
      --gold-deep: var(--gold-ink);
      --white: var(--porcelain);

      /* ---- LITERAIS SEM TOKEN DE MARCA. Alfa NAO mora no nome: opacidade se
         escreve no ponto de uso com rgba(var(--x-rgb), N). ---- */
      --black: #000;              /* utilitario de mascara, nao e cor de marca */
      --white-pure-rgb: 255,255,255;
      --white-pure: rgb(var(--white-pure-rgb));
    }

    /* ---------------------------------------------------------------- RESET */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      color: var(--ink);
      background: var(--creme);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img, picture, svg, video { display: block; max-width: 100%; height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    ::selection { background: var(--gold-glow); color: var(--ink); }

    /* ------------------------------------------------------------------ A11Y */
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
      border-radius: var(--radius-sm);
    }
    .is-dark :where(a, button, select, summary, [tabindex]):focus-visible { box-shadow: var(--focus-ring-dark); }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .skip-link {
      position: absolute; top: -60px; left: var(--gutter); z-index: var(--z-toast);
      /* R3 do QA: media 159x37 (mobile) / 176x40 (desktop). Primeiro alvo
         tabulado da pagina — entra na regua de 48px como qualquer controle. */
      display: inline-flex; align-items: center; min-height: 48px;
      background: var(--rose); color: var(--ink-inverse);
      padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm);
      font-size: var(--text-sm); transition: top var(--dur-quick) var(--ease-standard);
    }
    .skip-link:focus { top: var(--space-2xs); }

    /* ------------------------------------------------------ TIPOGRAFIA (helpers) */
    .fr-display, .hero-content h1, .cf-headline {
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      letter-spacing: var(--tracking-tight);
      line-height: var(--leading-tight);
    }
    .fr-head, .section h2, .nathalia-content h2, .booking-modal h2 {
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 64, "wght" var(--fw-semi), "wdth" 90;
      letter-spacing: -0.015em;
      line-height: var(--leading-snug);
    }
    .fr-sub, .section h3, .section h4, .popular-card h3, .combo-card h3, .service-title {
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      line-height: var(--leading-snug);
    }
    .fr-quote, .testimonial-quote {
      font-family: var(--font-quote);
      font-variation-settings: "wght" var(--fw-reg);
      font-style: italic; letter-spacing: 0.01em;
      line-height: var(--leading-relaxed);
    }

    h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
    p { text-wrap: pretty; }

    /* --------------------------------------- EYEBROW + SISTEMA DE ÍNDICE (— NN ·) */
    .eyebrow, .booking-eyebrow, .overline {
      display: block;
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--fw-med);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: var(--space-xs);
    }
    /* Índice editorial: "NN ·" em gold-ink (AA 4.7:1); o fio dourado puro fica
       nos elementos decorativos (ponto do BE., hairlines, foco). */
    .eyebrow[data-index]::before {
      content: attr(data-index) " · ";
      color: var(--gold-ink);
      font-variant-numeric: tabular-nums;
      letter-spacing: var(--tracking-wide);
    }
    .is-dark .eyebrow, .is-dark .eyebrow[data-index]::before { color: var(--dourado); }

    /* --------------------------------------------------------------- LAYOUT */
    .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: var(--section-y); position: relative; }
    .section-anchor { display: block; position: relative; top: calc(var(--header-h) * -1); visibility: hidden; }

    .title { max-width: var(--max-narrow); margin-bottom: var(--space-xl); }
    .title h2 { font-size: var(--text-2xl); color: var(--ink); }
    .title p { margin-top: var(--space-sm); color: var(--muted); font-size: var(--text-md); }

    /* Bandas escuras — respiro tonal */
    .is-dark { background: var(--vela); color: var(--ink-on-dark); }
    .is-dark h2, .is-dark h3, .is-dark h4,
    .is-dark .title h2, .is-dark .closing-card h2 { color: var(--ink-on-dark); }
    .is-dark p, .is-dark .title p, .is-dark .closing-card p { color: var(--muted-on-dark); }
    .is-dark .eyebrow, .is-dark .booking-eyebrow { color: var(--dourado); }

    /* --------------------------------------------------------------- BOTÕES */
    .btn, .nav-cta, .book-btn, .discreet-btn, .cookie-btn, .btn-dark, .btn-ghost, .cf-secondary, .chosen-visit {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
      min-height: 44px;
      padding: 0.85em 1.6em;
      border-radius: var(--radius-btn);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--fw-med);
      letter-spacing: 0.02em;
      text-align: center;
      cursor: pointer;
      transition: background var(--dur-quick) var(--ease-standard),
                  color var(--dur-quick) var(--ease-standard),
                  border-color var(--dur-quick) var(--ease-standard),
                  transform var(--dur-quick) var(--ease-out),
                  box-shadow var(--dur-quick) var(--ease-out);
    }
    /* Sublinhado dourado que cresce sob o rótulo (o fio) */
    .btn::after, .nav-cta::after, .book-btn::after, .discreet-btn::after, .chosen-visit::after {
      content: ""; position: absolute; left: 1.6em; right: 1.6em; bottom: 0.55em;
      height: 1px; background: var(--gold-thread);
      transform: scaleX(0); transform-origin: left center;
      transition: transform var(--dur-quick) var(--ease-out);
    }
    .btn:hover::after, .nav-cta:hover::after, .book-btn:hover::after,
    .discreet-btn:hover::after, .chosen-visit:hover::after { transform: scaleX(1); }

    .btn-primary, .nav-cta, .book-btn, .discreet-btn, .btn-dark, .cookie-btn.is-primary {
      background: var(--rose); color: var(--ink-inverse); border: 1px solid var(--rose);
    }
    .btn-primary:hover, .nav-cta:hover, .book-btn:hover, .discreet-btn:hover,
    .btn-dark:hover, .cookie-btn.is-primary:hover {
      transform: translateY(-1px); box-shadow: var(--shadow-md);
      background: color-mix(in srgb, var(--rose) 88%, var(--vela-lift));
    }
    .btn-secondary, .btn-ghost, .cf-secondary, .cookie-btn {
      background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
    }
    .btn-secondary:hover, .btn-ghost:hover, .cf-secondary:hover, .cookie-btn:hover {
      border-color: var(--ink); background: var(--linen);
    }
    .is-dark .btn-secondary, .is-dark .cf-secondary {
      color: var(--ink-on-dark); border-color: var(--line-inverse);
    }
    .is-dark .btn-secondary:hover, .is-dark .cf-secondary:hover {
      background: rgba(var(--ink-on-dark-rgb), 0.06); border-color: var(--ink-on-dark);
    }
    /* v6 §08 (8a): saiu do style="" inline em index.html (.nathalia-cta-row).
       Nao e sobre secao escura (#nathalia usa --linen) - e o fundo cheio
       --vela-soft com fio --gold-thread que dava o par com o btn-primary
       rose ao lado, so preso em atributo em vez de classe.
       CORRECAO (8b, 06/09/2026): o `color` era --ink (#2A2118), que e o token de
       texto sobre campo CLARO, em cima de --vela-soft (#33271C), que e superficie
       ESCURA - par medido em 1,09:1, ilegivel. O defeito veio do style="" original
       (commit 3ea72d4 e anteriores), nao da 8a: a 8a copiou o par errado fielmente
       para a classe. O fundo cheio fica (e ele que da o par com o btn-primary rose);
       o texto passa a --ink-on-dark, que e o token que a casa ja usa em cima de
       superficie escura (.is-dark .btn-secondary, linha 323). Nenhum token novo. */
    .btn-secondary--on-dark {
      color: var(--ink-on-dark); border-color: var(--gold-thread); background: var(--vela-soft);
    }
    .btn-secondary--on-dark:hover {
      border-color: var(--latao); background: color-mix(in srgb, var(--vela-soft) 90%, var(--porcelain));
    }
    .btn:disabled, .book-btn:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
    .btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

    /* Link-seta */
    .chosen-visit { padding-inline: 0; background: none; border: 0; color: var(--ink-on-dark); }
    .chosen-visit::after { left: 0; right: 0; bottom: 0.7em; transform: scaleX(1); background: var(--gold-thread); }
    .chosen-visit:hover { transform: translateX(2px); box-shadow: none; background: none; }

    /* ------------------------------------------------------- CHIPS / TAGS */
    .combo-label, .pkg-label, .skin-pill, .badge, .contact-chip, .section-count {
      display: inline-flex; align-items: center; gap: 0.45em;
      border-radius: var(--radius-pill);
      padding: 0.4em 0.85em;
      font-size: var(--text-xs);
      font-weight: var(--fw-med);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      line-height: 1.3;
      background: var(--linen); color: var(--clay);
      border: 1px solid transparent;
      transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
    }
    /* Chip destaque: superficie elevada + ponto de latao */
    .combo-label, .pkg-label {
      background: var(--espresso); color: var(--creme); align-self: flex-start;
      /* Bug #4 (28/08, ac05f8d): como grid-item (area "label label" nos cards de 2
         colunas de #combos/#bridal), justify-self herda "stretch" do grid por
         padrao e o chip vira barra full-width — display:inline-flex no proprio
         elemento nao evita isso. justify-self:flex-start mantem o chip do tamanho
         do conteudo; inofensivo fora de grid (contexto flex ignora justify-self).
         Cor mantida em --espresso/--creme (paleta viva em producao/art9-removal-6);
         ac05f8d tinha --vela-lift/--ink de uma paleta que nunca foi ao ar. */
      justify-self: flex-start;
    }
    .combo-label::before, .pkg-label::before {
      content: ""; width: 4px; height: 4px; border-radius: 50%;
      background: var(--dourado); flex: none;
    }
    .is-dark .combo-label, .is-dark .pkg-label {
      background: rgba(var(--ink-on-dark-rgb), 0.1); color: var(--ink-on-dark);
    }

    /* Badges do hero / âncoras */
    .badge, .contact-chip {
      min-height: 40px; text-transform: none; letter-spacing: 0.01em;
      font-size: var(--text-sm); color: var(--muted);
      border-color: var(--line);
    }
    .badge:hover, .contact-chip:hover { background: var(--porcelain); color: var(--ink); border-color: var(--line-strong); }
    .contact-chip.is-primary { background: var(--rose); color: var(--ink-inverse); border-color: var(--rose); }
    .contact-chip.is-primary:hover { background: color-mix(in srgb, var(--rose) 88%, var(--vela-lift)); color: var(--ink-inverse); }
    .skin-pill { text-transform: none; letter-spacing: 0.02em; font-size: var(--text-sm); }
    .skin-pill-row, .hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

    /* -------------------------------------------- CARD GENÉRICO + PREÇO ISK */
    .popular-card, .combo-card, .testimonial-card, .bridal-card, .service-accordion,
    .service-pkg-card, .rhythm-detail,
    .booking-channel-btn, .booking-service-btn, .faq-item {
      background: var(--porcelain);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    .popular-card, .combo-card, .bridal-card, .rhythm-detail {
      display: flex; flex-direction: column; gap: var(--space-xs);
      padding: var(--space-md);
    }
    .popular-card:hover, .combo-card:hover:hover, .service-pkg-card:hover {
      box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px);
    }
    .popular-card, .combo-card, .service-pkg-card, .gallery-item img, .booking-channel-btn, .booking-service-btn {
      transition: transform var(--dur-quick) var(--ease-out),
                  box-shadow var(--dur-quick) var(--ease-out),
                  border-color var(--dur-quick) var(--ease-standard),
                  background var(--dur-quick) var(--ease-standard);
    }

    /* Preço = herói: tinta, tabular, nunca dourado */
    .combo-price, .service-price, .pkg-price, .forhim-price, .booking-service-price,
    .cf-price {
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-variant-numeric: tabular-nums;
      color: var(--telha);
      letter-spacing: 0;
      white-space: nowrap;
    }
    .combo-price { font-size: var(--text-xl); }
    .service-price, .pkg-price, .forhim-price, .booking-service-price { font-size: var(--text-md); }
    .combo-value small {
      font-size: var(--text-sm); color: var(--clay); text-decoration: line-through;
      font-variant-numeric: tabular-nums;
    }
    .combo-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
    .combo-save {
      display: inline-flex; align-items: center; gap: 0.4em;
      font-size: var(--text-xs); font-weight: var(--fw-med);
      letter-spacing: var(--tracking-wide); text-transform: uppercase;
      color: var(--gold-ink); background: var(--linen);
      padding: 0.35em 0.8em; border-radius: var(--radius-pill);
      font-variant-numeric: tabular-nums;
    }
    /* Gate/for-him: o fundo claro do chip empilhava sobre o card (mais 5%), levando o
       fundo a #443B31 — dourado caia p/ 4.23:1 (reprova AA). Sem o fundo, sobre o card,
       da 5.34:1. Hairline dourada preserva a forma de pill. */
    .is-dark .combo-save { color: var(--dourado); background: none; border: 1px solid var(--gold-thread); }
    .is-dark .combo-price, .is-dark .service-price, .is-dark .pkg-price, .is-dark .forhim-price, .is-dark .cf-price { color: var(--ink-on-dark); }
    .is-dark .combo-value { color: var(--muted-on-dark); }

    /* --------------------------------------------------- MOTION NÃO-PORTEIRA
       O estado final é o default. GSAP anima a partir daqui; sem JS, tudo aparece. */
    .reveal { opacity: 1; transform: none; }
    .reveal.active { opacity: 1; transform: none; }

    @media (prefers-reduced-motion: reduce) {
      :root { --reveal-y: 0px; }
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .reveal, .hero-content > *, .hero-portrait-card { opacity: 1 !important; transform: none !important; }
    }

    /* ======================================================= 00 · HEADER/NAV */
    .nav {
      position: sticky; top: 0; z-index: var(--z-sticky);
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
      min-height: var(--header-h);
      padding-inline: var(--gutter);
      background: color-mix(in srgb, var(--creme) 88%, transparent);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border-bottom: 1px solid transparent;
      transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard);
    }
    .nav.is-scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--creme) 95%, transparent); }
    .brand-mini { display: inline-flex; align-items: center; flex: none; }
    .nav-logo { width: auto; height: 30px; object-fit: contain; }

    .nav-links { display: flex; align-items: center; gap: var(--space-2xs); }
    .nav-link {
      position: relative; display: none; padding: 0.5em 0.2em;
      font-size: var(--text-sm); color: var(--muted); white-space: nowrap;
      transition: color var(--dur-quick) var(--ease-standard);
    }
    .nav-link::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0.15em; height: 2px;
      background: var(--gold-thread); transform: scaleX(0); transform-origin: left center;
      transition: transform var(--dur-quick) var(--ease-out);
    }
    .nav-link:hover, .nav-link:focus-visible { color: var(--ink); }
    .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
    .nav-cta { padding: 0.6em 1.2em; min-height: 40px; }
    .nav-cta::after { display: none; }

    .language-switcher { display: inline-flex; align-items: center; }
    .language-select {
      appearance: none; -webkit-appearance: none;
      padding: 0.5em 1.6em 0.5em 0.7em; min-height: 40px;
      border: 1px solid var(--line); border-radius: var(--radius-sm);
      background: transparent; color: var(--muted);
      font-size: var(--text-xs); letter-spacing: var(--tracking-wide); cursor: pointer;
      background-image: linear-gradient(45deg, transparent 50%, var(--clay) 50%), linear-gradient(135deg, var(--clay) 50%, transparent 50%);
      background-position: right 0.75em top 55%, right 0.5em top 55%;
      background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
      transition: border-color var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
    }
    .language-select:hover { border-color: var(--line-strong); color: var(--ink); }

    /* CTA fixa mobile — zona do polegar. v6 §00: um botao P1 so, largura total
       menos --space-sm de cada lado, fundo --vela + blur, texto --porcelain
       (15.9:1). Aparece quando o hero sai da tela, some quando #contact entra
       (mobileCtaObserver em site.js) — nunca dois CTA de agenda empilhados. */
    .mobile-sticky-cta {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
      display: flex; max-width: 100vw;
      padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
      background: color-mix(in srgb, var(--vela) 92%, transparent);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border-top: 1px solid var(--line-inverse);
      transform: translateY(110%);
      transition: transform var(--dur) var(--ease-out), bottom var(--dur) var(--ease-standard);
    }
    body.show-mobile-cta .mobile-sticky-cta { transform: translateY(0); }
    .mobile-sticky-cta .contact-chip.is-primary {
      flex: 1 1 auto; width: 100%; justify-content: center; text-align: center;
      min-height: 48px; background: var(--rose-deep); color: var(--porcelain); border-color: var(--rose-deep);
    }
    .mobile-sticky-cta .contact-chip.is-primary:hover,
    .mobile-sticky-cta .contact-chip.is-primary:active { background: var(--rose-deep); color: var(--porcelain); }

    /* ============================================================== 00 · HERO */
    .hero {
      padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section-y);
      background: var(--creme);
      /* A entrada do retrato parte de x:44 (GSAP) e o card fica nessa posição
         até a timeline rodar — ~13px para fora da tela entre 768 e 1024px.
         clip, e não hidden: hidden criaria contexto de scroll e mataria o
         position:sticky usado adiante. Não afeta o eixo vertical. */
      overflow-x: clip;
    }
    .hero-layout {
      width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
      display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start;
    }
    .hero-content { display: flex; flex-direction: column; gap: var(--space-sm); }
    .hero-logo { width: auto; height: clamp(44px, 10vw, 64px); object-fit: contain; align-self: flex-start; }

    /* Linha-marca EN — elemento de marca, fora do dicionário i18n */
    .brand-line {
      font-family: var(--font-display);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-lg); color: var(--muted); line-height: 1.2;
      display: inline-flex; align-items: baseline; gap: 0.05em; align-self: flex-start;
    }
    /* O italico (DM Sans) tem sidebearing esquerdo minimo: "just be" saia como
       "justbe". O espaco existe no markup; falta respiro optico. */
    .brand-line em { margin-inline-start: 0.14em; }
    .brand-line em { font-style: italic; font-family: var(--font-sans); color: var(--ink); }
    .brand-dot {
      width: 0.3em; height: 0.3em; border-radius: 50%;
      background: var(--dourado); display: inline-block; flex: none;
      transform: translateY(-0.05em);
    }
    .hero-eyebrow-line { margin-bottom: 0; }
    .hero-content h1 { font-size: var(--text-3xl); color: var(--ink); }
    /* Nome da marca em dois pesos da MESMA familia: "BRUM" em versalete de peso
       620 e "Esthetics" em italico. Duas linhas em vez de uma frase corrida —
       "Reykjavik" saiu do h1 e virou a linha de lugar abaixo, com pin. O h1 nao
       leva mais data-i18n de proposito: o i18n usa textContent e apagaria os
       spans; nome proprio nao traduz. */
    .hero-title { display: flex; flex-direction: column; line-height: 0.98; }
    .hero-title-mark {
      font-size: 0.44em; font-variation-settings: "opsz" 88, "wght" 600, "wdth" 88;
      letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 0.14em;
    }
    .hero-title-name { font-variation-settings: "opsz" 88, "wght" 200, "wdth" 100; }
    .hero-place {
      display: flex; align-items: center; gap: var(--space-2xs);
      margin: 0; font-size: var(--text-xs); color: var(--clay);
      letter-spacing: var(--tracking-wide); text-transform: uppercase;
    }
    .hero-place-pin { flex: none; }
    .hero-place-rule { flex: 1; height: 1px; background: var(--gold-thread); }
    .hero-subtitle { font-size: var(--text-md); color: var(--muted); max-width: 54ch; }
    .hero-badges { margin-top: var(--space-2xs); }
    /* Rosé no hero: chips com lavagem de rosé — acento sem gritar. */
    .hero-badges .badge {
      background: var(--rose-mist); border-color: transparent; color: var(--ink);
    }
    .hero-badges .badge:hover {
      background: var(--rose); color: var(--ink-inverse); border-color: var(--rose);
    }
    .hero-badge-secondary { display: none; }
    .hero-microcopy {
      display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
      font-size: var(--text-xs); color: var(--clay);
      letter-spacing: var(--tracking-wide); text-transform: uppercase;
    }
    .hero-microcopy span { display: inline-flex; align-items: center; gap: 0.5em; }
    .hero-microcopy span + span::before {
      content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--dourado);
    }
    .hero-reassurance { font-size: var(--text-sm); color: var(--muted); max-width: 48ch; }

    .hero-trust-strip {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-sm); margin-top: var(--space-2xs);
      padding-top: var(--space-md); border-top: 1px solid var(--line);
    }
    .hero-trust-item { display: flex; flex-direction: column; gap: 2px; }
    .hero-trust-item strong {
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); font-weight: 400; color: var(--vela);
    }
    .hero-trust-item span { font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }

    .hero-portrait-card { display: flex; flex-direction: column; gap: var(--space-sm); }
    .hero-portrait-image { overflow: hidden; border-radius: var(--radius-lg); background: var(--linen); }
    .hero-portrait-image img {
      width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
      /* Bug #1 (28/08): entre 768 e 1023px o hero-layout ainda e 1 coluna (grid
         de 2 colunas so entra em min-width:1024px) mas nao havia teto de altura
         aqui - card ocupava a largura toda do container e a foto esticava para
         ~1050px de altura (medido em 900px de viewport), sangrando varias
         dobras. 1024px+ ja renderiza contido (~465-620px medido em
         1024/1440/1920) e fica abaixo deste teto, entao nao muda; <768px segue
         com o proprio teto (54svh) que vem depois na cascata. */
      max-height: min(620px, 62vh);
    }
    .hero-founder-caption {
      display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm);
      padding: var(--space-sm) 0 0; border-top: 1px solid var(--line);
    }
    .hero-founder-caption strong {
      display: block; font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-md); color: var(--ink);
    }
    .hero-founder-caption small {
      display: block; font-size: var(--text-xs); color: var(--clay);
      letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-3xs);
    }
    .hero-founder-caption p { font-size: var(--text-sm); color: var(--muted); max-width: 40ch; }
    .hero-caption-mark {
      font-family: var(--font-display); font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-lg); color: var(--line-strong); letter-spacing: 0.02em; flex: none;
    }

    /* ================================================ 01 · POPULAR TREATMENTS */
    .popular-head {
      display: flex; flex-direction: column; gap: var(--space-md);
      margin-bottom: var(--space-xl);
    }
    .popular-head h2 { font-size: var(--text-2xl); }
    .popular-head p { margin-top: var(--space-sm); color: var(--muted); max-width: 56ch; }
    .popular-head > a { align-self: flex-start; }
    .popular-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
    .popular-card h3 { font-size: var(--text-lg); color: var(--ink); }
    .popular-card p { font-size: var(--text-sm); color: var(--muted); }
    .popular-card-spacer { flex: 1; min-height: var(--space-2xs); }
    .popular-card.is-priority { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
    .popular-book-btn { align-self: stretch; }

    /* ================================================== 02 · DRAINAGE RHYTHM */
    .rhythm { background: var(--linen); }

    /* Toggle segmentado */
    /* O bloco ANTES / DEPOIS (.ba, .ba-pair, .ba-shot, .ba-tag, .ba-caption) foi
       removido em 21/08/2026 junto com as fotos de cliente (ADR-0010). */
    /* v6 §03: .rhythm-tabs/.rhythm-tab (tablist de 1 item) saiu do DOM e do CSS —
       era ruido de interface. Volta se e quando houver um segundo tipo de pacote. */

    /* v6 §03: figura S2 (maos trabalhando uma perna). Mobile-first: faixa 16:9
       acima do mapa; vira coluna esquerda 3:4 no desktop (regra em min-width:1024).
       position:relative + img absolute/oversized (v6 §03 3d): a mesma folga de
       --parallax-soft (24px) do hero, usada aqui pro parallax da mao (-24px
       desktop, -10px mobile — ambos cabem no buffer de 24px). Sem isso o
       translateY do scrub abriria vao com o --linen por baixo. */
    .rhythm-figure {
      position: relative;
      margin: 0 0 var(--space-md); overflow: hidden; border-radius: var(--radius);
      aspect-ratio: 16 / 9;
    }
    .rhythm-figure img {
      position: absolute; left: 0; right: 0; width: 100%; object-fit: cover;
      top: calc(-1 * var(--parallax-soft)); height: calc(100% + 2 * var(--parallax-soft));
    }
    .rhythm-panel[hidden] { display: none; }
    .rhythm-map { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    /* v6 §03 (3d), conserto do fio: o fio nascia no MESMO x/y dos .rhythm-node e
       pintava atras deles (fio absolute + antes no DOM; nos relative + depois =
       nos por cima) — sobrava so ~8px de traco na fresta entre os dois cards
       (medido: .scratch/v6-03-3c-medicao.md). Decisao do Vitor: "fio vertical a
       esquerda, descendo pelos nos" no desktop. padding-top aqui abre uma calha
       PROPRIA acima dos nos (mobile, fio horizontal) pro fio nao ficar coberto;
       o desktop troca essa calha pra padding-left (override em min-width:768px,
       abaixo). Nos (grid items) nascem depois do padding — o fio, absolute
       com left/top:0, fica DENTRO da calha, nunca embaixo dos nos. */
    .rhythm-track {
      position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2xs); padding-top: var(--space-sm);
    }
    /* v6 §03 momento-assinatura: a trilha se desenha. Estado FINAL aqui (scale 1,
       fio completo) — sem JS a secao fica integra. A fatia de motion anima
       --rhythm-fio-scale de 0 a 1 (gsap.fromTo com essa custom property) por cima
       deste estado, nunca o contrario.
       Dois layouts, dois eixos (medido em 05/09/2026, 1440 e 390 — ver
       .scratch/v6-03-3c-medicao.md): em <=767px os dois .rhythm-node ficam
       LADO A LADO (.rhythm-track em 2 colunas) — fio HORIZONTAL, scaleX,
       transform-origin left. Em >=768px .rhythm-track vira 1 coluna e os nós
       EMPILHAM — fio VERTICAL à esquerda, descendo pelos nós, scaleY,
       transform-origin top (override abaixo, no bloco min-width:768px). */
    .rhythm-track-fio {
      --rhythm-fio-scale: 1;
      /* top:0 (nao mais 50%/translateY): a calha e' o padding-top da track, o
         fio fica nela — nao mais atras dos nos. */
      position: absolute; left: 0; right: 0; top: 0; height: 2px;
      background: var(--latao); border-radius: 1px;
      transform: scaleX(var(--rhythm-fio-scale));
      transform-origin: left center;
      pointer-events: none; z-index: 0;
    }
    .rhythm-node {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: var(--space-sm); min-height: 44px;
      background: var(--porcelain); border: 1px solid var(--line); border-radius: var(--radius);
      transition: border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-out);
    }
    .rhythm-node strong {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-2xl); color: var(--ink); line-height: 1;
    }
    .rhythm-node small { font-size: var(--text-xs); color: var(--clay); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
    .rhythm-node span { font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
    .rhythm-node.is-active { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
    .rhythm-node:hover { border-color: var(--line-strong); }
    .rhythm-detail { gap: var(--space-2xs); }
    /* v6 §00: P1 da secao, ultimo elemento do bloco. */
    .rhythm-cta-row { margin-top: var(--space-lg); display: flex; justify-content: flex-start; }
    @media (max-width: 767px) { .rhythm-cta-row .btn { width: 100%; min-height: 48px; } }
    .rhythm-detail h3 { font-size: var(--text-lg); color: var(--ink); }
    .rhythm-detail p { font-size: var(--text-sm); color: var(--muted); }
    .discreet-actions { margin-top: var(--space-2xs); display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


    /* ==================================================== 04 · SERVICES/CATÁLOGO */
    .service-tabs {
      display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg);
      overflow-x: auto; scrollbar-width: none;
      padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--line);
      /* Gruda abaixo do header ao rolar o painel: trocar de categoria nao pode exigir
         voltar ao inicio da secao — era esse o "desce, le e sobe de novo". */
      position: sticky; top: var(--header-h); z-index: 20;
      background: var(--creme); padding-top: var(--space-xs);
    }
    .service-tabs::-webkit-scrollbar { display: none; }
    .service-tab {
      position: relative; flex: none; min-height: 44px; padding: 0.5em 0;
      font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
      text-transform: uppercase; color: var(--clay); white-space: nowrap;
      transition: color var(--dur-quick) var(--ease-standard);
    }
    .service-tab::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--space-2xs) * -1 - 1px);
      height: 2px; background: var(--gold-thread);
      transform: scaleX(0); transform-origin: left center;
      transition: transform var(--dur-quick) var(--ease-out);
    }
    .service-tab:hover { color: var(--ink); }
    .service-tab.is-active { color: var(--ink); }
    .service-tab.is-active::after { transform: scaleX(1); }
    .service-panel[hidden] { display: none; }
    .service-panel-shell { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }

    .service-editorial {
      position: relative; display: flex; align-items: flex-end;
      min-height: 220px; padding: var(--space-md);
      border-radius: var(--radius-lg); overflow: hidden;
      background-image: var(--panel-image); background-size: cover;
      background-position: var(--panel-position, center);
      color: var(--ink-on-dark);
    }
    .service-editorial::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(var(--espresso-deep-rgb), 0.78) 0%, rgba(var(--espresso-deep-rgb), 0.25) 55%, rgba(var(--espresso-deep-rgb), 0.08) 100%);
    }
    .service-editorial > div { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); }
    .service-editorial h3 { font-size: var(--text-xl); color: var(--ink-on-dark); }
    .service-editorial p { font-size: var(--text-sm); color: var(--muted-on-dark); max-width: 46ch; }
    /* Variante sem foto (ADR-0010): mesma caixa e mesmo texto claro, fundo solido da
       marca no lugar da imagem. Sem imagem, o degrade de legibilidade nao tem funcao. */
    .service-editorial.is-typographic {
      background-image: none;
      background-color: rgb(var(--espresso-deep-rgb));
    }
    .service-editorial.is-typographic::before { content: none; }

    .service-menu { display: flex; flex-direction: column; gap: var(--space-2xs); }
    .service-accordion { overflow: hidden; }
    /* Menu de servicos: a linha e o produto. Nome, o que e, e preco ficam sempre
       a vista; so o detalhe tecnico longo recolhe. Preco atras de clique e o maior
       motivo de abandono medido, entao ele nunca entra no que colapsa. */
    .service-accordion > button {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: baseline;
      column-gap: var(--space-sm); row-gap: 4px;
      width: 100%; padding: var(--space-sm) var(--space-md); min-height: 72px;
      text-align: left; cursor: pointer;
      transition: background var(--dur-quick) var(--ease-standard);
    }
    .service-accordion > button > span:first-child { display: contents; }
    .service-title { grid-column: 1; grid-row: 1; font-size: var(--text-md); color: var(--ink); line-height: 1.25; }
    .service-price {
      grid-column: 2; grid-row: 1; white-space: nowrap;
      font-variant-numeric: tabular-nums;
      display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    }
    /* Duracao fica colada no preco porque a decisao de agendar mistura os dois:
       quanto custa e quanto do meu dia isso ocupa. Rotulo curto, nao descricao. */
    .service-duration {
      font-size: max(0.875rem, var(--text-sm)); line-height: 1.2; color: var(--muted);
      font-weight: 400; letter-spacing: 0.01em;
    }
    .is-dark .service-duration { color: rgba(var(--white-pure-rgb), 0.72); }
    .service-benefit {
      grid-column: 1 / -1; grid-row: 2;
      font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-normal);
    }
    /* Chevron em borda CSS: o estado aberto/fechado precisa de um sinal visivel,
       e nao vale puxar uma familia de icones inteira por causa de um glifo. */
    .service-accordion > button::after {
      content: ""; grid-column: 3; grid-row: 1; align-self: center;
      width: 0.5rem; height: 0.5rem; margin-left: 0.25rem;
      border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
      transform: rotate(-45deg) translate(-2px, -2px);
      transition: transform var(--dur-quick) var(--ease-standard);
    }
    .service-accordion.is-open > button::after { transform: rotate(45deg) translate(0, 0); }
    .service-accordion > button:hover { background: var(--linen); }
    .service-accordion > button:active { transform: translateY(1px); }
    .service-accordion:not(.is-open) > .service-accordion-content { display: none; }
    .service-accordion-content {
      display: block; padding: var(--space-sm) var(--space-md) var(--space-md);
      border-top: 1px solid var(--line);
    }
    .service-accordion-content p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); }
    .service-accordion.diamond-card { border-color: var(--line-strong); }

    /* ===== DESTAQUES — letreiro rotativo dos mais procurados ===== */
    .spotlight { margin-bottom: var(--space-lg); }
    .spotlight-frame {
      position: relative; overflow: hidden; border-radius: 0;
      min-height: clamp(340px, 34vw, 420px);
    }
    .spot {
      position: absolute; inset: 0; display: flex; align-items: center;
      padding: clamp(var(--space-md), 5vw, var(--space-2xl));
      cursor: pointer; opacity: 0; visibility: hidden;
      transition: opacity 0.75s var(--ease-standard), visibility 0s linear 0.75s;
    }
    .spot.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
    .spot[data-tone="espresso"] { background: var(--espresso-deep); --spot-bg: var(--espresso-deep); }
    .spot[data-tone="vela"] { background: var(--vela-soft); --spot-bg: var(--vela-soft); }
    .spot[data-tone="creme"] { background: var(--parchment); --spot-bg: var(--parchment); }
    /* Foto ocupa a metade direita e o painel "entra" nela por um gradiente da
       propria cor do tom — o texto segue dono da esquerda. A foto respira com
       um zoom lento a cada troca; e decoracao, entao aria-hidden no HTML. */
    .spot-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; pointer-events: none; overflow: hidden; }
    .spot-visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
    .spot.is-active .spot-visual img { animation: spot-zoom 5.5s var(--ease-standard) forwards; }
    @keyframes spot-zoom { from { transform: scale(1.14); } to { transform: scale(1.02); } }
    .spot-visual::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, var(--spot-bg), transparent);
      background: linear-gradient(90deg, var(--spot-bg) 0%,
        color-mix(in srgb, var(--spot-bg) 62%, transparent) 32%,
        color-mix(in srgb, var(--spot-bg) 14%, transparent) 72%, transparent 100%);
    }
    .spot-inner { position: relative; z-index: 1; max-width: 56ch; display: flex; flex-direction: column; gap: var(--space-sm); }
    .spot-kicker {
      font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--dourado);
    }
    .spot[data-tone="creme"] .spot-kicker { color: var(--telha); }
    .spot-title {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.03;
      color: var(--ink-on-dark);
    }
    .spot[data-tone="creme"] .spot-title { color: var(--ink); }
    .spot-text { font-size: var(--text-md); color: var(--muted-on-dark); max-width: 44ch; }
    .spot[data-tone="creme"] .spot-text { color: var(--muted); }
    .spot-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-2xs); }
    .spot-price {
      font-family: var(--font-display); font-size: clamp(1.5rem, 2.9vw, 2.2rem);
      color: var(--dourado);
    }
    .spot[data-tone="creme"] .spot-price { color: var(--telha); }
    /* duracao no destaque: informa sem disputar com o preco */
    .spot-duration { font-size: var(--text-sm); color: var(--muted-on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .spot[data-tone="creme"] .spot-duration { color: var(--muted); }
    .spot-cta {
      padding: 0.7rem 1.6rem; border-radius: var(--radius-pill); cursor: pointer;
      background: var(--rose); color: var(--ink-inverse);
      font-size: var(--text-sm); letter-spacing: 0.04em;
      transition: transform var(--dur-quick) var(--ease-standard), background var(--dur-quick) var(--ease-standard);
    }
    .spot-cta:hover { transform: translateY(-1px); }
    .spot[data-tone="creme"] .spot-cta { background: var(--rose); color: var(--ink-inverse); }
    /* Entrada dos elementos ao trocar de painel */
    .spot .spot-kicker, .spot .spot-title, .spot .spot-text, .spot .spot-row {
      transform: translateY(18px); opacity: 0;
      transition: transform 0.7s var(--ease-standard), opacity 0.7s var(--ease-standard);
    }
    .spot.is-active .spot-kicker { transform: none; opacity: 1; transition-delay: 0.1s; }
    .spot.is-active .spot-title  { transform: none; opacity: 1; transition-delay: 0.18s; }
    .spot.is-active .spot-text   { transform: none; opacity: 1; transition-delay: 0.26s; }
    .spot.is-active .spot-row    { transform: none; opacity: 1; transition-delay: 0.34s; }
    /* Pontos com barra de progresso */
    .spot-dots { display: flex; gap: var(--space-2xs); margin-top: var(--space-sm); }
    /* O trilho e de 4px por desenho, mas o BOTAO nao pode ser: 44x4 reprova a SC 2.5.8
       (minimo 24x24). A caixa passa a ter 24px de altura e fica transparente; o trilho
       visivel de 4px vem do ::before, centrado. Desenho identico, alvo de toque real. */
    .spot-dot {
      position: relative; width: 44px; height: 24px; border-radius: var(--radius-pill);
      background: none; cursor: pointer;
    }
    .spot-dot::before, .spot-dot::after {
      content: ""; position: absolute; left: 0; right: 0;
      top: 50%; height: 4px; margin-top: -2px; border-radius: var(--radius-pill);
    }
    .spot-dot::before { background: var(--line-strong); }
    .spot-dot::after {
      background: var(--telha); transform: scaleX(0); transform-origin: left;
    }
    .spot-dot.is-active::after { transform: scaleX(1); }
    .spot-dot.is-running::after { animation: spot-progress 4.5s linear forwards; }
    @keyframes spot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @media (prefers-reduced-motion: reduce) {
      .spot, .spot .spot-kicker, .spot .spot-title, .spot .spot-text, .spot .spot-row { transition: none; }
      .spot-dot.is-running::after { animation: none; transform: scaleX(1); }
      .spot.is-active .spot-visual img { animation: none; transform: scale(1.02); }
    }
    @media (max-width: 720px) {
      .spotlight-frame { min-height: 0; }
      .spot { position: relative; inset: auto; display: none; padding: var(--space-lg) var(--space-md); }
      .spot.is-active { display: flex; }
      .spot-visual { display: none; }
    }

    .service-pkg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin-top: var(--space-md); }
    .service-pkg-card {
      display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
      padding: var(--space-sm); background: var(--linen); border-color: transparent;
    }
    .service-pkg-card strong {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-xl); color: var(--ink); line-height: 1.1;
    }
    .service-pkg-card small { font-size: var(--text-xs); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
    .service-pkg-card.is-best { border-color: var(--line-strong); background: var(--porcelain); }
    .service-pkg-card .pkg-label { font-size: 0.6875rem; padding: 0.3em 0.7em; }

    .service-peeling-package {
      display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs);
      margin-top: var(--space-md); padding: var(--space-sm);
      background: var(--linen); border-radius: var(--radius);
    }
    .service-peeling-package p { font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; }

    /* ================================================================ 05 · ABOUT */
    .about { background: var(--creme); }
    .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
    .image-stack { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--linen); }
    .image-stack img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .about-text { display: flex; flex-direction: column; gap: var(--space-sm); max-width: var(--max-narrow); }
    .about-text h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
    .about-text p { color: var(--muted); line-height: var(--leading-relaxed); }
    .wellness-copy { color: var(--ink) !important; font-style: italic; }
    .signature-strip {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-sm); margin-top: var(--space-md);
      padding-top: var(--space-md); border-top: 1px solid var(--line);
    }
    /* v6 §08 (8a): tres blocos colados ganham fio --latao separando-os -
       so entre itens (nao antes do primeiro), por isso :not(:first-child). */
    .mini-stat:not(:first-child) { border-left: 1px solid var(--latao); padding-left: var(--space-sm); }
    .mini-stat { display: flex; flex-direction: column; gap: var(--space-3xs); }
    .mini-stat strong {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-xl); color: var(--gold-ink); line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .mini-stat span { font-size: var(--text-sm); color: var(--muted); }

    /* ============================================================= 06 · NATHALIA */
    .nathalia-section { padding-block: var(--section-y); background: var(--linen); }
    /* minmax(0,…): sem isso o mínimo automático da coluna trava no min-content
       do carrossel de credenciais (.nathalia-cred-item = flex 0 0 78%) e a
       coluna infla p/ 655px numa tela de 375px, estourando a seção inteira. */
    .nathalia-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
    /* v6 §08 (8a): o badge deixa de ser um bloco embaixo da foto e passa a
       flutuar sobre ela (canto inferior-esquerdo) - o wrap vira o ancora de
       posicionamento; sem gap de flex porque o badge sai do fluxo. */
    .nathalia-photo-wrap { position: relative; }
    .nathalia-photo-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--parchment); }
    .nathalia-photo-frame img {
      width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
      /* Defeito 5 (28/08): #nathalia .nathalia-photo-frame vira width:100vw (regra
         "sangria total", ~linha 1370) sem teto de altura - medido 1920x2400 em
         1920px de viewport (4,37x o nativo de 439px), foto ocupando mais de uma
         tela. object-fit:cover + este teto mantem a sangria em largura (decisao
         do ticket #7) mas limita a altura a uma faixa; object-position segue o
         mesmo enquadramento (rosto no topo) ja usado pro mobile na linha ~1876. */
      max-height: min(620px, 72vh); object-position: center 22%;
    }
    /* v6 §08 (8a): unico uso de glass da pagina - se justifica porque a foto
       tem tom variavel e o badge precisa de contraste garantido em cima dela,
       nao de um fundo claro que depende de onde ele cai. Par medido:
       --porcelain sobre --vela a 92% = 15,9:1. */
    .nathalia-photo-badge {
      position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: 2;
      display: flex; align-items: center; gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--vela) 92%, transparent);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .nathalia-badge-icon { color: var(--dourado); font-size: var(--text-md); line-height: 1; }
    .nathalia-badge-text { display: flex; flex-direction: column; }
    .nathalia-badge-text strong {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); color: var(--porcelain);
    }
    .nathalia-badge-text span { font-size: var(--text-xs); color: var(--muted-on-dark); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

    .nathalia-content { display: flex; flex-direction: column; gap: var(--space-sm); max-width: var(--max-narrow); }
    .nathalia-content h2 { font-size: var(--text-2xl); }
    .nathalia-name-accent { font-style: italic; }
    .nathalia-name-accent::after {
      content: ""; display: inline-block; width: 0.22em; height: 0.22em;
      border-radius: 50%; background: var(--dourado); margin-left: 0.18em; vertical-align: baseline;
    }
    .nathalia-content p { color: var(--muted); line-height: var(--leading-relaxed); }

    /* Credenciais como timeline vertical (E-E-A-T legível, sem caixa de selos) */
    .nathalia-credentials {
      position: relative;
      padding-left: var(--space-md);
    }
    .nathalia-credentials::before {
      content: ""; position: absolute; left: 2px; top: 0.6em; bottom: 0.6em;
      width: 1px; background: var(--line-strong);
    }
    /* O rotulo vive FORA do trilho: e legenda da faixa, nao um item dela. */
    .nathalia-cred-title {
      font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
      text-transform: uppercase; color: var(--clay);
      margin-top: var(--space-md); margin-bottom: var(--space-md);
    }
    .nathalia-cred-item { position: relative; display: flex; gap: var(--space-2xs); padding-bottom: var(--space-md); }
    .nathalia-cred-dot {
      position: absolute; left: calc(var(--space-md) * -1); top: 0.5em;
      width: 5px; height: 5px; border-radius: 50%; background: var(--dourado);
      box-shadow: 0 0 0 3px var(--linen);
    }
    .nathalia-cred-body { display: flex; flex-direction: column; gap: 2px; }
    .nathalia-cred-body strong {
      font-family: var(--font-display); font-weight: 400;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); color: var(--ink); line-height: var(--leading-snug);
    }
    .nathalia-cred-body span { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }
    .nathalia-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
    /* Estava inline no HTML (style="min-width:200px"), onde nenhuma media query
       alcancava: em mobile o botao travava em 200px e empurrava o documento. */
    .nathalia-cta-row .btn-primary { min-width: 200px; }

    /* ============================================================ 07 · SKIN CARE */
    .soft-skin { background: var(--creme); }
    .soft-skin-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
    .soft-skin-grid h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
    .soft-skin-grid p { color: var(--muted); max-width: 56ch; }
    /* v6 §04 (4b): pill-row agora fica entre h2 e p (markup movido), sem margin-top
       de bloco anterior — o espaco vem do fluxo normal do h2. */
    .skin-pill-row { margin-top: var(--space-sm); }
    /* v6 §04 (4b2): sem respiro embaixo, o paragrafo colava nas pilulas (gap zero
       medido em 1440 e 390) e o indice escaneavel lia como continuacao do texto.
       .skin-pill-row so existe em #skin-care (grep -n "skin-pill-row" index.html) —
       ainda assim escopado a #skin-care para nao propagar se outra secao adotar
       a classe depois. */
    #skin-care .skin-pill-row { margin-bottom: var(--space-sm); }

    /* Oferta concreta: nome do servico + preco, clicaveis, e um CTA.
       v6 §04 (4b): fio --latao + fundo --porcelain — sem isso o bloco se dissolvia
       no fundo --creme da secao e o CTA nao lia como o fim do bloco. */
    .skin-offer {
      margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-3xs);
      padding: var(--space-sm); border: 1px solid var(--latao); border-radius: var(--radius);
      background: var(--porcelain);
    }
    .skin-offer-row {
      display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
      width: 100%; min-height: 44px; padding: var(--space-2xs) 0; text-align: left;
      border-bottom: 1px solid var(--line);
      transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
    }
    /* v6 §04 (4c): hover discreto — tinta --rose a 8% + preco em --rose-deep.
       Sem tween GSAP: e' :hover puro, transiciona no CSS (motion-spec-v6.md §04). */
    .skin-offer-row:hover { border-color: var(--dourado); background: rgba(var(--rose-rgb), 0.08); }
    .skin-offer-name { font-size: var(--text-sm); color: var(--ink); }
    .skin-offer-price {
      font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 550, "wdth" 96;
      font-size: var(--text-md); color: var(--ink); white-space: nowrap;
      transition: color var(--dur-quick) var(--ease-out);
    }
    .skin-offer-row:hover .skin-offer-price { color: var(--rose-deep); }
    .skin-offer-cta { margin-top: var(--space-2xs); align-self: flex-start; }
    .skin-pill { counter-increment: skinstep; }
    .skin-pill::before {
      content: counter(skinstep, decimal-leading-zero);
      color: var(--gold-ink); font-variant-numeric: tabular-nums;
      letter-spacing: var(--tracking-wide);
    }
    .skin-pill-row { counter-reset: skinstep; }
    /* .soft-skin-visual saiu em 21/08/2026 (ADR-0010): era so moldura da foto. */

    /* v6 §04 (4b): still-life da coluna direita (spec-midia-v6.md §S3), no lugar
       do painel tipografico. 3:4 em qualquer viewport — master e derivados ja
       nascem nessa proporcao (4a), entao um so aspect-ratio serve mobile e desktop. */
    .skin-figure {
      margin: 0; overflow: hidden; border-radius: var(--radius-lg); position: relative;
      aspect-ratio: 3 / 4; background: var(--linen);
    }
    /* v6 §04 (4c): mesma folga --parallax-soft (24px) do #drainage (site.css:686-698) —
       o still-life translada -20px no scrub desktop; sem esta folga o translateY
       abriria vao com o --linen de fundo por baixo da imagem. */
    .skin-figure img {
      position: absolute; left: 0; right: 0; width: 100%; object-fit: cover;
      top: calc(-1 * var(--parallax-soft)); height: calc(100% + 2 * var(--parallax-soft));
    }

    /* =============================================================== 08 · COMBOS */
    .combos { background: var(--linen); }
    .combo-bento { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
    .combo-card h3 { font-size: var(--text-lg); color: var(--ink); }
    .combo-card p { font-size: var(--text-sm); color: var(--muted); }
    /* v6 §05 item 2: o bloco de dinheiro (value->price->meta) e' uma unidade
       e pertence ao rodape do card, junto com a acao - nao ao fim do texto.
       margin-top:auto migrou do .discreet-actions pro .combo-value: o grupo
       inteiro (value, price, meta, actions) e' empurrado pra base do card. */
    .combo-card .combo-value { margin-top: auto; }
    .combo-card .discreet-actions { padding-top: var(--space-2xs); }
    /* v6 §05 (5b-fix D1): destaque so por borda/sombra, nunca por tamanho de
       celula (o span 2 forcava o 4o card pra linha 2 com 76% de vazio — ver
       .scratch/v6-05-d1-medicao.md). box-shadow nao ocupa espaco de layout,
       entao o anel dourado nao desalinha a altura/topo do card com os irmaos. */
    .combo-card.is-featured {
      border-color: var(--line-strong);
      /* Rodada 2 do code-review (11/09): --shadow-lg e --shadow-md sao `none`
         (§3.5, sombra nenhuma). `0 0 0 2px X, none` misturava uma keyword
         com uma lista de sombras — invalido em computed-value time, e a
         propriedade inteira caia pro initial (o anel dourado sumia). So o
         anel, sem a segunda camada morta. */
      box-shadow: 0 0 0 2px var(--gold-thread);
    }
    #combos .combo-card.is-featured:hover {
      box-shadow: 0 0 0 2px var(--gold-thread); /* §3.5: sombra nenhuma; o anel de 0px de blur e um fio, nao sombra */
    }
    /* v6 §05 (5b-fix D1, acabamento): o selo "Recommended" vivia no fluxo
       entre .combo-media e o h3, empurrando SO o h3 do featured ~40px
       abaixo dos 3 irmaos. Tirado do fluxo e sobreposto no canto superior
       direito da foto: #combos .combo-card ja e o ancestral posicionado
       (position:relative, ~linha 1191) e a media comeca rente ao topo do
       card (a negative margin cancela o padding), entao top/right relativos
       ao card acertam o canto da imagem sem calcular a altura variavel do
       aspect-ratio 16:9. Fica de fora do flex-flow (gap deixa de contar
       com ele), entao o h3 sobe pro mesmo lugar dos outros 3 — o chip
       ganha z-index pra ficar por cima da imagem e do gradiente da 5b
       (::after de .combo-media, que ja da contraste por baixo dele nessa
       ponta clara da foto). Escopo travado em #combos .is-featured: nao
       toca no `.combo-label` "Recommended" gemeo de #for-him
       (index.html:1072, secao/estilo proprios e ja escuros) nem nos chips
       "Package" de #services (mesma classe, contexto sem imagem). */
    #combos .combo-card.is-featured .combo-label {
      position: absolute;
      top: var(--space-xs);
      right: var(--space-xs);
      z-index: 1;
      margin: 0;
    }

    /* v6 §05 (5b): as 4 imagens reais (spec-midia-v6.md §S10) substituem os
       gradientes quase-brancos que motivaram o diagnostico ("quatro cards
       quase identicos"). ESCOPO DELIBERADO EM #combos: `.combo-bg-release`
       tambem aparece em `.forhim-package` (#for-him) e `.bridal-tier` (#bridal)
       — essas duas secoes tem fatia propria (§06/§07) e continuam com o
       gradiente antigo. Sem o prefixo `#combos` aqui, a regra abaixo bateria
       nos 3 cards de fora e vazaria a foto de ferramenta/oleo para a noiva. */
    #combos .combo-card.has-image { background: var(--porcelain); }

    /* Faixa 16:9 no topo, sangrando ate a borda do card (a moldura do card
       fica no padding, nao no wrapper da imagem). overflow:hidden segura o
       scale(1.03) do hover da 5c sem vazar quadrado. */
    #combos .combo-card { position: relative; }
    #combos .combo-media {
      overflow: hidden; position: relative;
      aspect-ratio: 16 / 9;
      margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
      border-radius: var(--radius) var(--radius) 0 0;
      background: var(--linen);
    }
    #combos .combo-media img {
      display: block; width: 100%; height: 100%; object-fit: cover;
      /* v6 §05 (5c): a peca que a 5b deixou pendente — mesma familia do
         .gallery-item:hover img (site.css ~1487), --dur/--ease-out da casa. */
      transition: transform var(--dur) var(--ease-out);
    }
    /* Overlay por baixo da imagem, escuro na base e limpo no topo — mesma
       familia de tratamento do .cf-hero-overlay (site.css:1408) e do
       .gallery-item (site.css:798), so que mais discreto (pico 45%, nao 78-85%):
       aqui e acabamento tonal do still-life, nao legenda sobre foto. */
    #combos .combo-media::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(to top, rgba(var(--espresso-deep-rgb), 0.45) 0%, rgba(var(--espresso-deep-rgb), 0) 100%);
    }
    #combos .combo-card h3 { margin-top: var(--space-sm); }
    /* .combo-value ja herda text-decoration:line-through da regra generica
       (site.css ~421); aqui so a cor muda para --muted, pedido explicito da
       spec §05 ("fica riscado em --muted"). O --clay generico segue valendo
       para os outros cards que usam a mesma classe. */
    #combos .combo-value { color: var(--muted); }

    /* Hover do card: eleva 4px e ganha a sombra da spec (site.css ~396 da o
       -2px generico; aqui o §05 pede -4px + sombra propria). */
    #combos .combo-card:hover {
      transform: translateY(-4px);
      box-shadow: none; /* §3.5: sombra nenhuma */
    }
    /* v6 §05 (5c): a foto escala por baixo do overflow:hidden do .combo-media
       — a peca de motion que a 5b deixou anotada como pendente (site.css
       ~1220). Escopo em :hover do card (nao so da media) para o
       .is-featured herdar o mesmo gesto sem regra extra. */
    #combos .combo-card:hover .combo-media img {
      transform: scale(1.03);
    }

    /* v6 §05 (5c) — reduced-motion: a spec pede "hover perde so o
       translateY, mantem a sombra" (motion-spec-v6.md §05). O media query
       global (site.css ~446) so zera transition-duration; sem isto o hover
       ainda saltava -4px e escalava a foto, so que sem a transicao suave —
       exatamente o que a spec veta. box-shadow fica de fora da regra: e o
       unico feedback de hover que sobrevive. */
    @media (prefers-reduced-motion: reduce) {
      #combos .combo-card:hover { transform: none; }
      #combos .combo-card:hover .combo-media img { transform: none; }
    }

    /* v6 §05 (5c) — mobile 390: e touch, entao :hover nao aplica de forma
       confiavel (spec: "Sem hover"). Feedback de toque proprio: scale(0.985)
       em 150ms no :active, mesma familia do .bh-card-btn:active (site.css
       ~2910). Gate por (hover:none)+(pointer:coarse) — o mesmo par ja usado
       na trava de largura (site.css ~2431) — para nao disputar com o
       :hover do mouse em telas hibridas. */
    @media (hover: none) and (pointer: coarse) {
      #combos .combo-card {
        transition: transform 150ms var(--ease-standard);
      }
      #combos .combo-card:active {
        transform: scale(0.985);
      }
    }

    /* -- Ticket #7 (card dissolvido) valia so ate a v6 §05: com foto real no
       topo, elevacao no hover e o .is-featured de 2 colunas, a lista sem caixa
       (fundo transparente, filete embaixo) nao comporta mais nenhum dos tres.
       #combos volta a ser grade de cartao a partir de 480px (regra generica
       ja empilha 2 colunas ali, site.css ~1683); #for-him e #bridal continuam
       dissolvidos (fatia deles, nao mexida aqui). */

    /* ============================================================== 09 · FOR HIM */
    /* v6 §06 (6b): banda ganha foto full-bleed (spec-midia-v6.md §S11).
       .for-him vira o clip: overflow:hidden esconde a folga --parallax-soft
       que .forhim-bg reserva pro scrub (6c) sem abrir vao com o --vela por
       baixo — mesmo truque de .bh-hero-band/.rhythm-figure/.skin-figure. */
    .for-him { background: var(--vela); color: var(--ink-on-dark); overflow: hidden; }
    .for-him .title h2 { color: var(--ink-on-dark); }
    .for-him .title p { color: var(--muted-on-dark); }
    .for-him .eyebrow { color: var(--dourado); }
    .for-him .eyebrow[data-index]::before { color: var(--dourado); }
    .forhim-bg {
      position: absolute; left: 0; right: 0; z-index: 0; overflow: hidden;
      top: calc(-1 * var(--parallax-soft)); height: calc(100% + 2 * var(--parallax-soft));
    }
    .forhim-bg-img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center;
    }
    /* Overlay 84% (mobile, 4:5) → 78% (>=768px, 21:9). Sem --vela-deep-rgb no
       tema: color-mix em vez de criar token novo (regra da fronteira: nao
       mexer em tokens globais). Medido em .scratch/v6-06-6a-midia.md §S11. */
    .forhim-bg-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--vela-deep) 84%, transparent); }
    @media (min-width: 768px) {
      .forhim-bg-overlay { background: color-mix(in srgb, var(--vela-deep) 78%, transparent); }
    }
    /* Conteudo por cima da banda: .container ja e' filho direto de .for-him
       (position:relative vem de .section), so falta o z-index. */
    .for-him .container { position: relative; z-index: 1; }
    .forhim-packages { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-lg); }
    /* Neutraliza os gradientes claros .combo-bg-* herdados da secao Combos:
       sobre banda escura eles apagavam o texto (creme sobre creme). */
    .for-him .combo-card, .for-him .combo-card.has-image[class*="combo-bg-"] {
      background: rgba(var(--ink-on-dark-rgb), 0.05); border-color: var(--line-inverse); box-shadow: none;
    }
    .for-him .combo-card:hover, .for-him .combo-card.has-image[class*="combo-bg-"]:hover {
      background: rgba(var(--ink-on-dark-rgb), 0.09); border-color: rgba(var(--ink-on-dark-rgb), 0.28);
    }
    /* v6 §06 (6b): os 2 .forhim-package abandonam o combo-bg-release (gradiente
       do Deep Release, de #combos) — fundo claro dentro da banda escura
       quebrava a leitura. Fundo --vela-soft com fio --gold-thread; --latao
       cheio so entra no hover (regra dura: --latao nunca em texto corrido,
       e aqui e' so borda). Depois de .for-him .combo-card (mesma
       especificidade, cascata decide — tem que vir depois). */
    .for-him .forhim-package {
      background: var(--vela-soft); border-color: var(--gold-thread);
    }
    .for-him .forhim-package:hover {
      background: color-mix(in srgb, var(--vela-soft) 90%, var(--porcelain));
      border-color: var(--latao);
    }
    .for-him .combo-card h3, .for-him .combo-price { color: var(--ink-on-dark); }
    .for-him .combo-card p { color: var(--muted-on-dark); }
    .for-him .combo-value { color: var(--muted-on-dark); }
    .for-him .combo-save { color: var(--dourado); background: none; border: 1px solid var(--gold-thread); }
    .for-him .combo-label { background: rgba(var(--ink-on-dark-rgb), 0.12); color: var(--ink-on-dark); }
    .for-him .book-btn, .for-him .discreet-btn {
      background: var(--rose); color: var(--ink-inverse); border-color: var(--rose);
    }
    .for-him .book-btn:hover, .for-him .discreet-btn:hover { background: color-mix(in srgb, var(--rose) 88%, var(--vela-lift)); }
    .forhim-protocol-meta {
      font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
      text-transform: uppercase; color: var(--dourado);
    }
    .forhim-menu {
      display: grid; grid-template-columns: 1fr; gap: 0;
      border-top: 1px solid var(--line-inverse);
    }
    .forhim-item {
      display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm);
      padding: var(--space-sm) 0; border-bottom: 1px solid var(--line-inverse);
      /* v6 §06 (6c): hover so por fundo. A spec original mandava .forhim-price
         em --latao no hover; 6a mediu --latao a 4,12:1 sobre a banda composta
         (reprova AA pra texto normal) -- emenda: feedback fica no fundo do
         item, cor de texto nao muda. */
      transition: background var(--dur-quick) var(--ease-standard);
    }
    .forhim-item:hover { background: rgba(var(--latao-rgb), 0.07); }
    .forhim-name { display: flex; flex-direction: column; gap: 2px; }
    .forhim-svc {
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); color: var(--ink-on-dark);
    }
    .forhim-svc em { font-style: normal; font-size: var(--text-xs); color: var(--muted-on-dark); letter-spacing: var(--tracking-wide); }
    .forhim-benefit { font-size: var(--text-sm); color: var(--muted-on-dark); line-height: 1.45; }
    .forhim-price { color: var(--ink-on-dark); }
    .forhim-book { margin-top: var(--space-md); justify-self: flex-start; }
    .forhim-faq { margin-top: var(--space-xl); border-top: 1px solid var(--line-inverse); padding-top: var(--space-lg); }
    /* v6 §00: P1 da secao, ultimo elemento do bloco. */
    .forhim-cta-row { margin-top: var(--space-lg); display: flex; justify-content: flex-start; }
    @media (max-width: 767px) { .forhim-cta-row .btn { width: 100%; min-height: 48px; } }
    .forhim-faq-title {
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-lg); color: var(--ink-on-dark); margin-bottom: var(--space-md);
    }
    .forhim-faq-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
    /* Acordeao: no mobile a FAQ aberta virava uma parede de texto. <details> mantem o
       conteudo indexavel pelo Google e deixa o visitante escolher o que ler. */
    .forhim-faq-item { border-bottom: 1px solid var(--line-inverse); }
    .forhim-faq-item summary {
      cursor: pointer; list-style: none; display: flex; align-items: baseline;
      gap: var(--space-sm); padding-block: var(--space-sm);
    }
    .forhim-faq-item summary::-webkit-details-marker { display: none; }
    .forhim-faq-item summary::after {
      content: "+"; margin-left: auto; color: var(--dourado); font-size: var(--text-md);
      line-height: 1; flex-shrink: 0; transition: transform var(--dur-quick) var(--ease-out);
    }
    .forhim-faq-item[open] summary::after { content: "\2013"; }
    .forhim-faq-item summary:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; }
    .forhim-faq-item h4 {
      font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 550, "wdth" 96;
      font-size: var(--text-base); color: var(--ink-on-dark); line-height: 1.35; margin: 0;
    }
    .forhim-faq-item p {
      font-size: var(--text-sm); color: var(--muted-on-dark); line-height: 1.55;
      max-width: 52ch; padding-bottom: var(--space-sm);
    }
    /* v6 §06 (6b): era link de texto solto (border-bottom fino); vira peso de
       botao secundario reaproveitando .btn/.btn-secondary (a casa ja resolve
       o hover certo em banda escura via .is-dark .btn-secondary, site.css
       ~323). So sobra a seta, que nao faz parte do botao generico. */
    .forhim-page-link { margin-top: var(--space-lg); gap: 0.5em; }
    .forhim-page-link::after { content: "→"; color: var(--dourado); transition: transform var(--dur-quick) var(--ease-out); }
    .forhim-page-link:hover::after { transform: translateX(3px); }

    /* =============================================================== 10 · BRIDAL */
    .bridal { background: var(--creme); }

    /* v6 §07 (7b) — banda de abertura full-bleed (afrodite-v6-bloco7-2026-09-05.md
       §3/4/5). Mobile-first: 320px fixos, poster so (o gate de video em
       site.js remove o <video> do DOM abaixo de 768px/Save-Data — a banda
       nunca conta com JS pra decidir a altura). Mesmo truque de stacking de
       .bh-hero-band (site.css ~2865): .bridal-band abre seu proprio contexto
       (position:relative + z-index:0) para o z-index:-1 da midia nao furar
       ate a raiz da pagina. Overlay 0.68 chapado (nao 0.76 do hero): aqui a
       midia e argumento de venda, nao textura — ver §3 da spec. */
    .bridal-band {
      position: relative; z-index: 0; overflow: hidden;
      height: 320px;
    }
    /* v6 §07 (7d): mesma folga --parallax-soft (24px) do .bh-hero-media
       (site.css ~2999) e do .skin-figure img (site.css ~1163) — a figura
       sticky que ia carregar o parallax foi revogada na sessao 14 e virou
       esta banda full-bleed; o alvo do scrub (-18px, index.html) passou a
       ser .bridal-band-media inteira, entao ela (nao um filho) precisa da
       folga pra o overflow:hidden do .bridal-band pai nunca abrir vao com
       o --creme por baixo. left/right/top+height (nao inset:0) pra bottom
       ficar auto e nao sobre-restringir o box junto com a altura calculada. */
    .bridal-band-media {
      position: absolute; left: 0; right: 0; z-index: -1; overflow: hidden;
      top: calc(-1 * var(--parallax-soft)); height: calc(100% + 2 * var(--parallax-soft));
    }
    .bridal-band-poster, .bridal-band-video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      display: block; object-fit: cover; object-position: center;
    }
    /* Fade poster->video identico ao bh-hero-video (site.css ~2908): o
       poster e' quem pinta por padrao (sem JS, sem <video> ou gate travado,
       ele fica); o <video> só ganha opacidade depois do 'canplay' via
       .is-visible (site.js, initGatedVideos). */
    .bridal-band-video { opacity: 0; transition: opacity var(--dur-slower) var(--ease-out); }
    .bridal-band-video.is-visible { opacity: 1; }
    .bridal-band-overlay {
      position: absolute; inset: 0; z-index: -1;
      background: rgba(var(--espresso-deep-rgb), 0.68);
    }
    .bridal-band-inner {
      position: relative; z-index: 1; height: 100%;
      display: flex; flex-direction: column; justify-content: flex-end;
      gap: var(--space-2xs);
      padding-block: var(--space-md);
    }
    /* Indice editorial "06 ·" herdado de .eyebrow[data-index]::before (gold-ink,
       site.css ~256) reprova a 2,20:1 sobre a banda composta (pior caso
       #68635D, spec §5) — mesmo defeito que a §06 cometeu com --latao.
       Porcelain aqui e' o par ja medido (5,67:1), igual ao texto do eyebrow. */
    .bridal-band-eyebrow { color: var(--porcelain); margin-bottom: 0; }
    .bridal-band-eyebrow[data-index]::before { color: var(--porcelain); }
    .bridal-band-title {
      margin: 0; color: var(--porcelain);
      font-size: var(--text-2xl); max-width: 18ch;
    }
    /* So >=768px (regra abaixo): em 390px o lead sairia da banda pra nao
       empurrar a altura acima dos 320px fixos (spec §3) — a copia de fora,
       .bridal-lead (mobile), cobre esse caso sobre --creme. */
    .bridal-band-lead {
      display: none; margin: 0; max-width: 48ch;
      color: var(--linen); font-size: var(--text-sm);
    }
    .bridal-band-cta { margin-top: var(--space-3xs); }
    /* Unico preenchimento solido claro da banda (spec §4): rose-mist, nao
       --rose (que e' o CTA "vivo" padrao do site). Rodada 2 do code-review
       (11/09): rose-mist virou --sala-fundo (superficie CLARA) nesta paleta,
       mas o token --ink-inverse tambem virou claro (--linho, pensado pra
       texto sobre --rose/--dourado/--umbra, que sao ESCUROS) — o par
       rose-mist/ink-inverse citado aqui antes tinha os dois claros,
       contraste ~1,26:1, texto invisivel. Corrigido para --ink (escuro),
       que mede alto contraste sobre --sala-fundo (ver comentario da
       --tinta em §variaveis). */
    .bridal-band-cta .book-btn {
      background: var(--rose-mist); border-color: var(--rose-mist); color: var(--ink);
    }
    .bridal-band-cta .book-btn:hover {
      background: color-mix(in srgb, var(--rose-mist) 88%, var(--vela-lift)); color: var(--ink);
    }
    /* .bridal-lead (fora da banda, mobile) some a partir de 768px: a copia de
       dentro da banda (.bridal-band-lead, acima) assume. Duas instancias
       porque os pais (.bridal-band full-bleed vs .container central) sao
       elementos diferentes — nao da pra mover uma unica copia entre eles so
       com CSS (order/grid-area exigem o mesmo container). */
    @media (min-width: 768px) {
      .bridal-band { height: min(56vh, 520px); }
      .bridal-band-inner { justify-content: center; gap: var(--space-sm); }
      .bridal-band-lead { display: block; }
      .bridal > .container > .bridal-lead { display: none; }
    }

    /* v6 item 9: gap banda->lead e lead->timeline eram 0px nos dois lados em 390 -
       o paragrafo entalado lia como item da timeline, nao como abertura da secao.
       --space-lg acima > --space-md abaixo de proposito: o lead pertence a
       timeline, nao a banda; o respiro maior corta o vinculo errado. */
    .bridal-lead { max-width: 62ch; margin-block: var(--space-lg) var(--space-md); font-size: var(--text-base); }
    .bridal-timeline {
      display: grid; grid-template-columns: 1fr; gap: 0;
      margin-bottom: var(--space-xl); position: relative;
      counter-reset: bridalstep;
    }
    .bridal-step {
      position: relative; counter-increment: bridalstep;
      padding: 0 0 var(--space-lg) var(--space-xl);
      border-left: 1px solid var(--line-strong);
    }
    .bridal-step:last-child { border-left-color: transparent; padding-bottom: 0; }
    .bridal-step::before {
      content: counter(bridalstep, decimal-leading-zero);
      position: absolute; left: 0; top: -0.15em;
      transform: translateX(-50%) translateX(0.5px);
      font-family: var(--font-display); font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-lg); color: var(--gold-ink);
      background: var(--creme); padding-block: 0.1em; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .bridal-dot {
      position: absolute; left: 0; top: 2.4em;
      width: 5px; height: 5px; border-radius: 50%; background: var(--dourado);
      transform: translateX(-50%); box-shadow: 0 0 0 3px var(--creme);
    }
    /* v6 §07 (7c): fio --latao que liga os 4 dots — decorativo, por cima do
       border-left/border-top estrutural que ja existe em .bridal-step. Posicao
       exata (left/width ou top/height) e calculada em JS contra os dots de
       verdade (site.js inline, positionBridalFio) porque no desktop os dots
       vivem em colunas de grid com gap: nao da pra cravar em CSS puro sem
       herdar erro de arredondamento. Aqui so o visual e o estado de repouso. */
    .bridal-fio {
      position: absolute; background: var(--latao); opacity: 0.65;
      transition: opacity var(--dur-quick) var(--ease-standard);
      pointer-events: none;
      /* Fallback sem JS/reduced-motion (positionBridalFio nunca roda: o
         matchMedia devolve antes por "!motion"): linha vertical aproximada
         entre o 1o e o 4o dot. JS refina o left/top/width/height exatos
         quando a animacao esta ativa — ver comentario acima. */
      left: 0; top: 2.4em; bottom: 2.4em; width: 1px;
    }
    #bridal:has(.bridal-card:hover) .bridal-fio { opacity: 1; }
    .bridal-step h3 { font-size: var(--text-md); color: var(--ink); margin-bottom: var(--space-3xs); }
    .bridal-step p { font-size: var(--text-sm); color: var(--muted); }
    .bridal-tiers { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); max-width: 560px; margin-inline: auto; }
    .bridal-tier { background: var(--porcelain); }
    .bridal-extra { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-lg); }
    .bridal-card {
      background: var(--linen); border-color: transparent; box-shadow: none; border-radius: 0;
      transition: transform var(--dur-quick) var(--ease-out);
    }
    /* Hover spec §07: translateY(-2px) no card + fio a 100% de opacidade
       (regra acima, :has()). Generico .popular-card/.combo-card:hover (linha
       ~395) deixa .bridal-card de fora de proposito — nao duplicar aqui. */
    .bridal-card:hover { transform: translateY(-2px); }
    .bridal-card h4 { font-size: var(--text-md); color: var(--ink); }
    .bridal-card p { font-size: var(--text-sm); color: var(--muted); }
    .bridal-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--clay); max-width: 62ch; }
    /* -- Ticket #7 opcao 3: #bridal ja empilha em toda largura (excluido do
       carrossel mobile por pedido do Vitor em 09/08 - ver linha ~1707), entao
       dissolve em TODAS as telas, nao so desktop. */
    #bridal .combo-card.bridal-tier {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas: "label label" "title price" "desc desc" "value value" "meta meta" "cta cta";
      align-items: baseline; column-gap: var(--space-sm); row-gap: var(--space-3xs);
      background: transparent; border: none; border-radius: 0; box-shadow: none;
      border-bottom: 1px solid var(--line); padding: var(--space-md) 0;
    }
    #bridal .combo-card.bridal-tier:hover { box-shadow: none; transform: none; border-bottom-color: var(--line-strong); }
    #bridal .bridal-tiers > .combo-card.bridal-tier:last-child { border-bottom: none; }
    #bridal .combo-card.bridal-tier .combo-label { grid-area: label; margin-bottom: var(--space-3xs); }
    #bridal .combo-card.bridal-tier h3 { grid-area: title; margin: 0; }
    #bridal .combo-card.bridal-tier p { grid-area: desc; }
    #bridal .combo-card.bridal-tier .combo-value { grid-area: value; }
    #bridal .combo-card.bridal-tier .combo-price {
      grid-area: price; justify-self: end; font-size: var(--text-lg); font-variant-numeric: tabular-nums;
    }
    #bridal .combo-card.bridal-tier .combo-meta { grid-area: meta; }
    #bridal .combo-card.bridal-tier .discreet-actions { grid-area: cta; margin-top: var(--space-2xs); }

    /* v6 §07: 2o tier "The Whole Canvas" — .bridal-tiers tinha max-width:560px
       (regra acima) dimensionado para 1 card so; em 1440 sobrava vazio grande
       sob a coluna "01" da timeline. De 768px pra cima os 2 tiers viram
       colunas lado a lado (o divisor de linha do "Ticket #7 dissolvido" gira
       de horizontal p/ vertical, entre as colunas); abaixo de 768 continua
       empilhado no max-width:560 centralizado, sem mudanca. */
    @media (min-width: 768px) {
      .bridal-tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-2xl);
        max-width: none; margin-inline: 0;
      }
      #bridal .combo-card.bridal-tier { border-bottom: none; }
      #bridal .bridal-tiers > .combo-card.bridal-tier:first-child {
        border-right: 1px solid var(--line); padding-right: var(--space-2xl);
      }
      #bridal .bridal-tiers > .combo-card.bridal-tier:last-child { padding-left: var(--space-2xl); }
    }

    /* ======================================================== 11 · BRUM x CHOSEN */
    .chosen-feature { background: var(--vela-deep); color: var(--ink-on-dark); }
    .chosen-feature .eyebrow { color: var(--dourado); }
    .chosen-feature .eyebrow[data-index]::before { color: var(--dourado); }
    .chosen-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
    .chosen-copy { display: flex; flex-direction: column; gap: var(--space-sm); }
    .cf-headline { font-size: var(--text-2xl); color: var(--ink-on-dark); }
    .cf-headline em { font-style: italic; }
    .cf-lead { color: var(--muted-on-dark); max-width: 52ch; }
    .cf-meta { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--dourado); }
    .cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-2xs); }

    .cf-browser {
      display: block; border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid var(--line-inverse); background: rgba(var(--ink-on-dark-rgb), 0.04);
      transition: transform var(--dur) var(--ease-out), border-color var(--dur-quick) var(--ease-standard);
    }
    .cf-browser:hover { transform: translateY(-3px); border-color: rgba(var(--ink-on-dark-rgb), 0.26); }
    .cf-bar {
      display: flex; align-items: center; gap: var(--space-3xs);
      padding: var(--space-2xs) var(--space-xs); background: rgba(var(--ink-on-dark-rgb), 0.06);
    }
    .cf-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink-on-dark-rgb), 0.28); }
    .cf-url { margin-left: var(--space-2xs); font-size: var(--text-xs); color: var(--muted-on-dark); }
    .cf-viewport { background: var(--vela); }
    .cf-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--space-2xs) var(--space-xs);
      font-size: var(--text-xs); color: var(--muted-on-dark);
      border-bottom: 1px solid var(--line-inverse);
    }
    .cf-nav-brand { letter-spacing: var(--tracking-wide); }
    .cf-hero { position: relative; }
    .cf-hero img {
      width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
      /* Defeito 7 (28/08): mesma familia do defeito 5 - #chosen-feature .cf-browser
         tambem vira width:100vw sem teto (medido 1918x1199 em 1920px, 4,37x o
         nativo de 439px). Teto de altura evita a foto de beachwear dominar a
         viewport. */
      max-height: min(480px, 56vh);
    }
    .cf-hero-overlay {
      position: absolute; inset: auto 0 0 0;
      display: flex; flex-direction: column; gap: var(--space-3xs);
      padding: var(--space-md) var(--space-sm) var(--space-sm);
      background: linear-gradient(to top, rgba(var(--espresso-deep-rgb), 0.85), transparent);
    }
    .cf-tag { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--dourado); }
    .cf-hero-title {
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-md); color: var(--ink-on-dark);
    }
    .cf-price { font-size: var(--text-sm); }
    .cf-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .cf-thumbs img {
      width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
      /* Defeito 7: mesmo teto do .cf-hero acima, versao menor (thumb decorativa,
         aria-hidden) - sem isso os 3 quadrados viravam 638x638px em 1920px. */
      max-height: min(220px, 24vh);
    }

    /* ============================================================== 12 · GALLERY */
    .gallery { background: var(--creme); }
    /* Defeito 8 (28/08): em 1024-1279px (3 colunas, .gallery-item:first-child
       ocupando 2x2), o auto-placement "sparse" (padrao) deixava os 7 itens sobrarem
       1 celula vaga na ultima linha (buraco vazio, medido/reproduzido no calculo do
       grid). dense faz o browser preencher buracos anteriores reordenando o fluxo
       visual; em 1280px+ (4 colunas) o grid ja fecha exato (comentario "sem celula
       vazia" na media query 1280px), dense nao muda nada la. Ignorado no mobile
       (a media query <768px troca pra display:flex/carrossel). */
    .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); grid-auto-flow: dense; }
    .gallery-item { overflow: hidden; border-radius: var(--radius); background: var(--linen); }
    .gallery-item img {
      width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover;
      transition: transform var(--dur) var(--ease-out);
    }
    .gallery-item:hover img { transform: scale(1.03); }
    /* Imagem-âncora: curadoria, não catálogo */
    .gallery-item:first-child { grid-column: span 2; }
    .gallery-item:first-child img { aspect-ratio: 16 / 10; }

    /* -- Ticket #7 opcao 1 (sangria total): a foto/visual quebra o container
       de 1200px pra largura cheia da viewport em #nathalia e #chosen-feature;
       o texto continua dentro do container. Como a foto sai do grid, o
       lado-a-lado do desktop (5fr/7fr) fica sem sentido pra estas duas
       secoes especificas - viram empilhadas (foto sangrando entre os
       blocos de texto) em vez de lado a lado; as outras 9 secoes nao mudam.

       Defeito 8 (28/08): #gallery .gallery-grid ESTAVA nesta lista e saiu.
       O grid multi-celula nunca teve o par 5fr/7fr que justifica a sangria
       aqui (a justificativa acima fala so de foto unica x layout lado-a-lado);
       o <img sizes> de cada .gallery-item (index.html ~1175-1181) sempre
       declarou larguras de container contido (560px/280px), nunca 100vw -
       sinal de que a inclusao do gallery nesta regra foi descuido, nao
       decisao. Em 100vw a grade ficava 2,56x-4,43x maior que o nativo e
       colidia com o header sticky; contida, os numeros voltam a bater com
       o sizes ja existente. */
    /* 28/08 - ORDEM DO VITOR: a sangria total sai do DESKTOP nestas duas secoes.
       Motivo medido, nao estetico: `assets/nat.webp` tem 960px nativos e
       `assets/chosen-hero.webp` tem 740px - em 100vw eles renderizavam a 1440 e
       1918px (1,5x e 2,59x acima do arquivo), e nenhum arquivo maior existe em
       disco (conferido em `marcas/brum-esthetics/Site/assets/` e no repo da
       Chosen). Sem pixel, sangrar = borrar. Contidas na coluna de ~440px do
       lado-a-lado 5fr/7fr elas voltam a render abaixo do nativo, nitidas, e o
       `sizes` de 440px que o markup sempre declarou volta a bater.
       O mobile (max-width:767px) NAO muda: la a sangria continua, aprovada. */
    #nathalia .nathalia-photo-frame { box-shadow: none; }
    /* v6 §08 (8a): .nathalia-photo-wrap { gap } removido - o badge saiu do
       fluxo flex (agora position:absolute, sobre a foto) e o gap nao tinha
       mais nenhum segundo item pra separar. */
    /* border-radius:0 do #gallery .gallery-item ficou mesmo com o grid saindo da
       sangria total (linha acima): a regra e incondicional (fora de @media) e
       tambem vale no carrossel mobile ja aprovado - remover mudaria o mobile. */
    #gallery .gallery-item { border-radius: 0; }

    /* ========================================================= 13 · TESTIMONIALS */
    .testimonials { background: var(--linen); }
    .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
    .testimonial-card { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
    .testimonial-card::before {
      content: "\201C"; position: absolute; top: 0.05em; right: var(--space-md);
      font-family: var(--font-display); font-size: 4rem; line-height: 1;
      color: var(--gold-glow); pointer-events: none;
    }
    /* v5-Gate: era --dourado (#B98A45 = 2.43:1 sobre o card #FBF8F2, reprova AA e tambem
       o minimo 3:1 de componente grafico). As estrelas sao a UNICA indicacao visual da nota,
       logo carregam informacao. Mesmo tratamento dado ao numeral do indice em F2/F3. */
    .testimonial-stars { color: var(--gold-ink); font-size: var(--text-sm); letter-spacing: 0.15em; }
    .testimonial-quote { font-size: var(--text-md); color: var(--ink); }
    .testimonial-footer { display: flex; align-items: center; gap: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px solid var(--line); }
    .testimonial-avatar {
      display: inline-flex; align-items: center; justify-content: center; flex: none;
      width: 38px; height: 38px; border-radius: 0;
      background: var(--espresso); color: var(--creme);
      font-family: var(--font-display); font-size: var(--text-sm);
    }
    .testimonial-name {
      display: block;
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); color: var(--ink);
    }
    .testimonial-service { display: block; font-size: var(--text-xs); color: var(--clay); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
    /* v6 §00: P1 da secao, ultimo elemento do bloco. */
    .testimonials-cta-row { margin-top: var(--space-lg); display: flex; justify-content: center; }
    @media (max-width: 767px) { .testimonials-cta-row .btn { width: 100%; min-height: 48px; } }

    /* ====================================================== 14 · FECHO + FOOTER */
    .brand-closing { padding-block: var(--section-y); background: var(--vela-deep); color: var(--ink-on-dark); }
    .closing-card {
      max-width: var(--max-narrow); margin-inline: auto; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
    }
    .closing-card img { width: auto; height: 44px; object-fit: contain; margin-bottom: var(--space-2xs); }
    .closing-brand { font-size: var(--text-xs); letter-spacing: var(--tracking-brand); text-transform: uppercase; color: var(--muted-on-dark); }
    .closing-card h2 { font-size: var(--text-2xl); color: var(--ink-on-dark); }
    .closing-card p { color: var(--muted-on-dark); }
    .closing-contact a { color: var(--ink-on-dark); border-bottom: 1px solid var(--gold-thread); padding-bottom: 1px; }
    .closing-contact a:hover { border-bottom-color: var(--dourado); }
    /* v6 §00: P1 do fecho, ultimo elemento do bloco. */
    .closing-cta { margin-top: var(--space-md); min-height: 48px; }
    @media (max-width: 767px) { .closing-cta { width: 100%; } }

    .simple-footer { background: var(--vela-deep); color: var(--muted-on-dark); border-top: 1px solid var(--line-inverse); padding-block: var(--space-lg); }
    .footer-inner {
      width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
      display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md);
      font-size: var(--text-sm);
    }
    .footer-inner strong { color: var(--ink-on-dark); font-weight: var(--fw-med); }
    .footer-inner a { color: var(--muted-on-dark); border-bottom: 1px solid transparent; transition: color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard); }
    .footer-inner a:hover { color: var(--ink-on-dark); border-bottom-color: var(--gold-thread); }
    /* Linha-marca no rodapé */
    .footer-brand-line {
      flex-basis: 100%; font-family: var(--font-sans); font-style: italic;
      font-variation-settings: "wght" var(--fw-reg);
      font-size: var(--text-sm); color: var(--muted-on-dark);
      display: inline-flex; align-items: baseline; gap: 0.15em;
    }

    /* Assinatura do estudio: separada do rodape operacional por uma hairline, um degrau
       abaixo dele em peso. Nao compete com telefone e FAQ, que sao o que o visitante
       da Brum veio buscar. Zero cor nova: mesmos tokens do .simple-footer. */
    .footer-studio {
      width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
      margin-block-start: var(--space-md); padding-block-start: var(--space-md);
      border-top: 1px solid var(--line-inverse);
      display: flex; flex-wrap: wrap; align-items: baseline;
      gap: var(--space-2xs) var(--space-lg);
    }
    .footer-studio-eyebrow {
      font-size: var(--text-xs); letter-spacing: var(--tracking-brand);
      text-transform: uppercase; color: var(--muted-on-dark);
    }
    .footer-studio-brands { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
    .footer-studio-brands a {
      display: inline-flex; flex-direction: column; gap: 0.1em;
      color: var(--muted-on-dark); border-bottom: 1px solid transparent;
      transition: color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
    }
    .footer-studio-brands a:hover { color: var(--ink-on-dark); border-bottom-color: var(--gold-thread); }
    .footer-studio-name { font-size: var(--text-sm); }
    .footer-studio-note { font-size: var(--text-xs); color: var(--muted-on-dark); opacity: 0.75; }
    /* A assinatura vai na segunda linha a esquerda, mesmo padrao ja usado por
       `.footer-brand-line`. Nasceu da colisao com o pill fixo `.store-float`
       (removido em 19/09/2026); o padrao fica por consistencia. */
    /* Quebra de linha em flexbox: sem ela o proprio link teria `flex-basis: 100%` e a
       area clicavel varreria a largura toda (medido: 1120px de alvo para 113px de texto). */
    .footer-studio-break { flex-basis: 100%; height: 0; }
    .footer-studio-sign {
      font-size: var(--text-xs);
      color: var(--muted-on-dark); border-bottom: 1px solid transparent;
      transition: color var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
    }
    .footer-studio-sign:hover { color: var(--ink-on-dark); border-bottom-color: var(--gold-thread); }
    @media (max-width: 640px) {
      .footer-studio { flex-direction: column; align-items: flex-start; }
    }

    /* ======================================================== 15 · BOOKING MODAL */
    .booking-backdrop {
      position: fixed; inset: 0; z-index: var(--z-overlay);
      display: flex; align-items: flex-end; justify-content: center;
      background: rgba(var(--espresso-rgb), 0.55);
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    }
    .booking-backdrop[hidden] { display: none; }
    .booking-modal {
      position: relative; width: 100%; max-width: var(--max-narrow);
      max-height: 92vh; overflow-y: auto;
      padding: var(--space-lg) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
      background: var(--porcelain);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      box-shadow: var(--shadow-lg);
    }
    .booking-close {
      position: absolute; top: var(--space-sm); right: var(--gutter);
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 0;
      font-size: 1.4rem; color: var(--muted);
      transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
    }
    .booking-close:hover { background: var(--linen); color: var(--ink); }
    .booking-modal h2 { font-size: var(--text-xl); color: var(--ink); }
    .booking-modal > p { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2xs); }
    .booking-channels { display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); margin-top: var(--space-2xs); }
    /* O canal e o passo que fecha: rotulo em tinta cheia p/ marcar a mudanca de etapa. */
    .booking-channel-label { color: var(--ink); margin-top: 0; }
    .booking-channel-btn {
      display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm) var(--space-md); min-height: 44px;
    }
    .booking-channel-btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
    .channel-label {
      font-family: var(--font-display); font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-md); color: var(--ink);
    }
    .channel-sub { font-size: var(--text-xs); color: var(--clay); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
    .booking-label {
      display: block; margin: var(--space-md) 0 var(--space-2xs);
      font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
      text-transform: uppercase; color: var(--clay);
    }
    .modal-intent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
    .agenda-panel { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--line); }
    .agenda-sub, .agenda-msg, .agenda-status, .agenda-ok { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 var(--space-sm); }
    .agenda-ok { color: var(--ink); }
    .agenda-status:empty { display: none; }
    .agenda-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-sm); }
    .agenda-row.agenda-times {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      max-height: 220px; overflow-y: auto; padding-right: 4px;
    }
    /* chips de dia e horario: mesmo vocabulario dos cards de servico (borda fina, selecionado em espresso + ponto dourado) */
    .agenda-day, .agenda-slot {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
      background: var(--surface, #fff); color: var(--ink); font: inherit; font-size: var(--text-sm);
      cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
    }
    .agenda-slot { padding: 0 8px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
    .agenda-day:hover, .agenda-slot:hover { border-color: var(--line-strong); background: var(--linen); }
    .agenda-day.is-selected, .agenda-slot.is-selected {
      border-color: var(--espresso); background: var(--linen); font-weight: 600;
    }
    .agenda-day.is-selected::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dourado); flex: none;
    }
    .agenda-day:focus-visible, .agenda-slot:focus-visible { outline: 2px solid var(--espresso); outline-offset: 2px; }
    .agenda-form { display: grid; gap: var(--space-sm); }
    .agenda-field { display: grid; gap: 4px; font-size: 0.85rem; color: var(--ink-soft); }
    .agenda-field input {
      min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-xs);
      background: var(--surface, #fff); color: var(--ink); font: inherit; font-size: 1rem;
    }
    .agenda-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink); }
    .agenda-submit { justify-self: start; }
    .agenda-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
    .booking-services { display: grid; grid-template-columns: 1fr; gap: var(--space-3xs); }
    .booking-service-btn {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
      padding: var(--space-2xs) var(--space-sm); min-height: 44px; text-align: left;
      font-size: var(--text-sm); color: var(--ink);
    }
    .booking-service-btn:hover { border-color: var(--line-strong); background: var(--linen); }
    .booking-service-btn[aria-selected="true"], .booking-service-btn.is-selected {
      border-color: var(--espresso); background: var(--linen);
    }
    .booking-service-btn[aria-selected="true"]::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dourado); flex: none;
    }
    .booking-service-price { font-size: var(--text-sm); }
    /* duracao: contexto ao lado do preco, sem competir com ele */
    .booking-service-duration {
      font-size: var(--text-xs); color: var(--muted); white-space: nowrap;
      margin-left: auto; font-variant-numeric: tabular-nums;
    }
    .booking-divider { height: 1px; background: var(--line); margin: var(--space-md) 0; }
    .booking-talk { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--muted); }
    .booking-talk a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .booking-fast-actions .booking-channel-btn { text-align: left; }

    /* ==================================================== BREAKPOINTS (min-width) */
    @media (min-width: 480px) {
      .popular-grid, .combo-bento, .forhim-packages,
      .bridal-extra, .testimonials-grid, .booking-channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      /* .bridal-tiers fica de fora desta lista de propósito: desde o ticket #7
         (lista com filete) ela é sempre 1 coluna, nunca 2 — ver linha ~1553. */
      .popular-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
      .popular-head > a { flex: none; }
    }

    @media (min-width: 768px) {
      /* Nav em 3 níveis. O menu inteiro pede 995px em islandês ("Samsetningar",
         "Spurt & svarað") — em 768px a viewport útil é 753px, então mostrar tudo
         aqui estourava 78px. Neste degrau entram só as âncoras da home: For Him e
         FAQ ficam de fora porque são página própria, alcançável pelo corpo.
         Com gap de 16px o islandês pede 695px e sobra folga de 58px.
         Marcados por classe, não por [href$=".html"]: o Netlify serve clean URLs
         e o href vira /for-him no ar, então o seletor de atributo passava local
         e falhava em produção. */
      .nav-link { display: inline-block; }
      .nav-link-page { display: none; }
      .nav-links { gap: var(--space-sm); }
      .hero-badge-secondary { display: inline-flex; }
      .mobile-sticky-cta { display: none; }
      .hero-trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .about-grid, .soft-skin-grid, .nathalia-grid, .chosen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* v6 §08 (8a): #about inverte o lado - texto na coluna 1 (esquerda),
         imagem na coluna 2 (direita), formando zigue-zague com #nathalia
         (foto à esquerda). O DOM continua com a imagem primeiro (mobile
         precisa dela acima do texto); o order troca so a partir daqui. */
      .about-grid { grid-template-columns: 1.1fr 0.9fr; }
      .about-text { order: 1; }
      .image-stack { order: 2; }
      /* v6 item 11: brum-gallery-7.webp e' 900x1200 (retrato 3:4), mas .image-stack
         img forcava aspect-ratio 4/3 (regra base, mobile) - espremia a foto vertical
         num quadro horizontal e sobrava 262px de vazio abaixo dela (align-items:center
         partia o vazio 131/131). stretch + height:100% fazem a coluna da foto
         acompanhar o texto; aspect-ratio:auto deixa a altura de verdade (100%)
         decidir a proporcao, que passa a ser o 3:4 nativo do arquivo - object-fit:cover
         (intocado) para de cortar. So aqui, dentro do >=768px: a regra base
         (~1030-1032) fica intacta pro mobile. */
      .about-grid { align-items: stretch; }
      .image-stack { height: 100%; }
      .image-stack img { aspect-ratio: auto; height: 100%; }
      .soft-skin-grid { grid-template-columns: 1.1fr 0.9fr; }
      .service-panel-shell { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
      .svc-group .service-editorial { min-height: 100%; position: sticky; top: calc(var(--header-h) + var(--space-md)); }
      .rhythm-map { grid-template-columns: 0.7fr 1.3fr; align-items: start; }
      /* v6 §03 (3d): a calha troca de eixo — padding-top (mobile, fio deitado)
         vira padding-left (desktop, fio em pe). Sem isso o fio nasce por baixo
         dos nos empilhados (mesmo x/y, nos pintam por cima — ver comentario
         acima do .rhythm-track base). */
      .rhythm-track { grid-template-columns: 1fr; padding-top: 0; padding-left: var(--space-md); }
      /* Nós empilham (1 coluna) — o fio vira vertical, à esquerda, descendo
         por eles. Estado final (scaleY 1); a fatia de motion anima
         --rhythm-fio-scale sobre esta mesma declaração. */
      .rhythm-track-fio {
        left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
        transform: scaleY(var(--rhythm-fio-scale));
        transform-origin: top center;
      }
      .bridal-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
      .bridal-step { border-left: 0; border-top: 1px solid var(--line-strong); padding: var(--space-xl) 0 0; }
      .bridal-step:last-child { border-top-color: var(--line-strong); }
      .bridal-step::before { top: calc(var(--space-xl) * -1 + 0.2em); left: 0; transform: none; background: transparent; }
      .bridal-dot { top: 0; left: 0; transform: translateY(-50%); box-shadow: 0 0 0 4px var(--creme); }
      /* Fallback sem JS/reduced-motion, eixo desktop (fio horizontal). */
      .bridal-fio { left: 0; top: 0; bottom: auto; width: 100%; height: 1px; }
      .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
      .gallery-item:first-child img { aspect-ratio: 1 / 1; }
      /* Defeito 8: em 3 colunas, ancora 2x2 (4 celulas) + 6 itens 1x1 = 10 celulas
         num grid de 3 colunas - sobra 1 linha com 1 unico item e 2 celulas vazias
         (grid-auto-flow:dense nao resolve, o buraco e no FIM do fluxo, nao um vao
         no meio). Mesma solucao ja usada em 1280px/4-colunas (regra abaixo): os
         2 ultimos itens tambem viram span-2, fechando a conta em 12 celulas exatas
         (4+2+2+2+2=12, sem sobra). Sem isso a regra de 1280px nao alcança 768-1279px. */
      .gallery-item:nth-last-child(-n+2) { grid-column: span 2; }
      .gallery-item:nth-last-child(-n+2) img { aspect-ratio: 16 / 10; }
      .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      /* .bridal-tiers fica 1fr (lista dissolvida, ticket #7) mesmo no desktop. */
      .forhim-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
      .forhim-faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
      .forhim-book { grid-column: 1 / -1; }
      .booking-channels, .booking-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .modal-intent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .booking-backdrop { align-items: center; }
      .booking-modal { border-radius: var(--radius-lg); max-height: 88vh; padding-inline: var(--space-xl); }
      .service-tabs { justify-content: center; gap: var(--space-xl); }
    }

    /* v6 item 12: 1091px de biografia contra 620px de retrato deixava 463px
       de vazio abaixo da foto - nao e problema de tamanho, e' de duracao de
       leitura (a foto para de acompanhar o texto). A coluna da foto vira
       sticky: acompanha o scroll da biografia ate o fim, sem esticar o
       enquadramento (que destruiria object-position:center 22%, calibrado
       pro rosto no topo - reprovado na simulacao) e sem reduzir o teto de
       620px (Defeito 5 de 28/08 continua valendo).
       Guarda 1, altura: min-height:760px evita cortar a foto em laptop baixo
       (viewport 900px cabe: 620 foto + header-h ate 76 + 32 de folga = 728px
       < 900px; abaixo de 760px o sticky nao entra e o comportamento e' o de
       hoje). Guarda 2, token: --header-h ja existe (clamp 58-76px) e ja e' a
       var de altura da nav usada em .nav/.svc-cat-head - reaproveitada aqui
       em vez de --nav-h novo, pra nao duplicar token. Guarda 3,
       reduced-motion: sticky e' layout, nao animacao - NAO entra no
       matchMedia "motion" do index.html (que so gate tweens GSAP); fica
       ativo com ou sem prefers-reduced-motion, de proposito.
       Encosta em §08 (FECHADO): o parallax de 8b anima .nathalia-photo-frame
       (filho); o sticky vai no pai, .nathalia-photo-wrap - propriedades e
       elementos diferentes, nenhum tween de y disputado. O wrap sticky
       continua sendo o contexto de posicionamento do .nathalia-photo-badge
       (absolute), entao o badge nao se move em relacao ao frame. */
    @media (min-width: 768px) and (min-height: 760px) {
      .nathalia-photo-wrap {
        position: sticky;
        top: calc(var(--header-h) + var(--space-md));
        align-self: start;
      }
    }

    @media (min-width: 1024px) {
      /* Menu completo: com gap de 16px o islandês pede 931px de 1009 úteis. */
      .nav-link-page { display: inline-block; }
      /* v6 §06 (6b): 3 colunas (regra de 768px, ~linha 1832) deixava cada FAQ
         estreitíssima com so 1 aberta por vez — de 1024 pra cima vira 2, o
         par cabe confortável e nada fica orfao numa 3a coluna vazia. */
      .forhim-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
      .hero { padding-block: clamp(3rem, 2rem + 3vw, 6rem) var(--section-y-lg); }
      .hero-layout { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: center; }
      .hero-content h1 { font-size: var(--text-hero); }
      .popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      /* #combos §05 (5b-fix D1): grade uniforme de 4 colunas — o span 2 do
         .is-featured (Glow & Relax) deixava o 4o card sozinho na linha 2 com
         852px de 1120 vazios (76%, medido em .scratch/v6-05-5b-medicao.md
         §D1) e nenhum dos 4 botoes alinhava. Decisao do Vitor: largar o
         span, destaque so por borda/sombra (regra em .combo-card.is-featured,
         ~linha 1177). Isolado de .popular-grid, que segue em 3. */
      #combos .combo-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .booking-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .service-pkg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* .nathalia-grid/.chosen-grid deixaram de virar 5fr/7fr aqui: desde o
         ticket #7 (sangria total) a foto sangra fora do grid, sem sticky,
         e o par empilhado (regra #nathalia/#chosen-feature acima) vale em
         toda largura. */
      /* Drenagem: prova visual e escolha de pacote lado a lado, sem rolagem
         entre ver o resultado e escolher o ritmo (pedido de 09/08). */
      #drainage .container {
        display: grid; grid-template-columns: 6fr 6fr;
        column-gap: var(--space-2xl); align-items: start;
      }
      #drainage .title { grid-column: 1 / -1; }
      /* v6 §03: a figura S2 volta a ocupar a coluna 1 e o .rhythm-panel a coluna 2.
         .rhythm-flow so existe no DOM para agrupar figura+painel no mobile (faixa
         16:9 acima do mapa); no desktop ele nao deve virar uma 3a coluna nem
         espremer as duas reais, entao vira `display:contents` e os 2 filhos
         (figure, .rhythm-panel) caem direto no grid 6fr/6fr do .container, na
         ordem em que aparecem no DOM. */
      #drainage .rhythm-flow { display: contents; }
      .rhythm-figure { aspect-ratio: 3 / 4; margin-bottom: 0; }
      /* .rhythm-map fica 1 coluna interna: com a figura de volta na coluna 1,
         so sobra metade da largura do container para track+detail lado a lado. */
      #drainage .rhythm-map { grid-template-columns: 1fr; }
    }

    @media (min-width: 1280px) {
      /* Aqui há espaço sobrando: o nav volta ao respiro do design (24px). */
      .nav-links { gap: var(--space-md); }
      /* 7 imagens em 4 colunas: ancora 2x2 + 4 pequenas + 2 largas fecham a grade
         sem celula vazia. Composicao deliberada, nao catalogo. */
      .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .gallery-item:nth-last-child(-n+2) { grid-column: span 2; }
      .gallery-item:nth-last-child(-n+2) img { aspect-ratio: 16 / 10; }
    }

    /* Tela larga (1600+): o contêiner de 1200px deixava ~1/3 do monitor em
       margem e o site parecia uma coluna centrada. Sobe para --max-wide e
       o hero ganha um pouco mais de ar entre texto e retrato. */
    @media (min-width: 1600px) {
      :root { --max: var(--max-wide); }
      .hero-layout { gap: var(--space-3xl); }
    }

    /* ===============================================================
       MOBILE (<768px) — composição própria, não o desktop espremido.
       O hero empilhava 9 grupos antes de qualquer respiro: brand-line,
       eyebrow, h1, subtitle, 7 badges, 2 botões, 3 bullets de microcopy,
       1 frase de reassurance e a trust-strip. Aqui ele é:
       eyebrow → h1 → uma frase → 4 atalhos → ação → prova.
       Nada é perdido: microcopy e reassurance repetem o que a trust-strip
       e as seções abaixo já dizem. =============================== */
    @media (max-width: 767px) {
      .hero .brand-line,
      .hero-microcopy,
      .hero-reassurance { display: none; }

      /* Os 7 filtros de categoria voltam ao mobile — são a porta de entrada para
         #services e precisam estar logo no início. */
      /* Sem margem negativa: sangrar ate a borda com calc(gutter * -1) empurrava a
         largura do documento e criava rolagem horizontal na pagina inteira. */
      /* min-width:0 e o que permite o item de grid encolher abaixo do proprio conteudo.
         Sem isso os 7 chips em nowrap esticavam .hero-content para 791px num viewport
         de 375. */
      .hero-content, .hero-badges { min-width: 0; }
      /* A faixa rolavel de uma linha foi REMOVIDA e nao deve voltar: em 375px ela
         mostrava 3 dos 7 chips e cortava o 3o no meio da palavra, na borda da tela.
         Um corte assim nao le como "arrasta pro lado", le como layout quebrado — e o
         caminho para 4 categorias ficava invisivel. Chips compactos em wrap cabem
         todos em 3 linhas, que custam ~60px a mais e nao escondem nada. */
      .hero-badges {
        display: flex; flex-wrap: wrap; gap: var(--space-3xs) 0.375rem;
        padding-block: 0; max-width: 100%;
      }
      /* Alvo de toque continua acima do minimo de 34px do iOS; o que encolheu foi
         a folga lateral e o gap, para os 7 chips caberem em 2 linhas em vez de 3
         (146px -> ~100px). Nao voltar a 38px + gap 8: era o que jogava a ultima
         fileira para debaixo da sticky CTA. */
      .hero-badges .badge {
        flex: 0 1 auto; white-space: nowrap;
        min-height: 34px; display: inline-flex; align-items: center;
        padding-inline: 0.6rem; font-size: var(--text-xs);
      }

      /* "Tratamentos populares" fora do mobile: 428px (metade da tela) de carrossel
         com auto-avanco na entrada de #services, e os 3 cards (Drenagem, Pos-
         cirurgica, Limpeza de Pele) ja aparecem nas categorias logo abaixo. No
         desktop continua, que la ele nao disputa a dobra com a lista. */
      .spotlight { display: none; }

      /* Categorias de #services no mobile: TODAS a vista, sem swipe.
         A tira rolavel escondia 2 das 6 categorias atras de um gesto que ninguem
         descobre — quem nao ve, nao clica. Em wrap as 6 ocupam 2-3 linhas e o
         usuario escolhe de uma vez. Chip com borda em vez de underline: em varias
         linhas o sublinhado do ativo some no meio do texto e o alvo deixa de
         parecer clicavel. */
      .service-tabs {
        flex-wrap: wrap; overflow-x: visible;
        gap: var(--space-2xs);
        /* Solto, nao sticky: 3 linhas grudadas comeriam ~140px permanentes em cima
           do header — o oposto do objetivo de ver a lista de servicos junto. */
        position: static; top: auto; z-index: auto;
        padding-top: 0; padding-bottom: var(--space-sm);
      }
      .service-tab {
        min-height: 38px; display: inline-flex; align-items: center;
        padding: 0 var(--space-xs); font-size: var(--text-xs);
        border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
        white-space: nowrap;
        transition: color var(--dur-quick) var(--ease-standard),
                    background var(--dur-quick) var(--ease-standard),
                    border-color var(--dur-quick) var(--ease-standard);
      }
      /* O underline vira o proprio chip preenchido. */
      .service-tab::after { content: none; }
      .service-tab.is-active {
        background: var(--espresso-deep); border-color: var(--espresso-deep);
        color: var(--ink-on-dark);
      }
      /* A foto editorial da categoria sai no mobile: 220px de min-height eram o
         que impedia categorias + servicos na mesma tela, e a linha de servico e o
         produto. A imagem continua no desktop, onde ela cabe ao lado da lista. */
      .svc-group .service-editorial { display: none; }

      /* Linha de servico compacta. Havia DUAS molduras empilhadas — o padding do
         card (regra de cards, item 6) mais o do proprio botao — e cada servico
         custava 149px: com 8 servicos em #body a lista passava de duas telas. O
         card entrega o padding ao botao; nada de conteudo sai. */
      #services .service-accordion { padding: 0; }
      #services .service-accordion > button {
        padding: var(--space-2xs) var(--space-sm); min-height: 0;
      }
      #services .service-benefit { line-height: var(--leading-normal); }

      /* A lista rola DENTRO do painel, com altura fixa. Duas razoes: a secao
         inteira cabe em uma tela (categorias + servicos juntos, sem subir e
         descer) e trocar de categoria nao muda mais a altura da secao, entao o
         resto da pagina nao pula ao alternar entre 1 e 8 servicos. O card
         cortado na borda inferior e o que sinaliza que ha mais abaixo. */
      #services .service-panels {
        height: max(320px, calc(100dvh - var(--header-h) - 250px));
        overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to bottom, var(--black) calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to bottom, var(--black) calc(100% - 28px), transparent 100%);
      }
      #services .service-panels::-webkit-scrollbar { display: none; }

      .hero-badge-secondary { display: inline-flex; }

      .hero-eyebrow-line { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
      .hero-subtitle { font-size: var(--text-base); }
      /* Com o bloco ancorado no rodape (justify-content:flex-end), cada pixel de
         padding-bottom sobe o bloco inteiro e o h1 acaba pousando no queixo da
         foto. Encolher o respiro desce o texto e libera o rosto sem esconder
         nada — o oposto do atalho que ja derrubou o scroll-snap daqui. */
      .hero { padding-block: var(--space-md) var(--space-md); }

      /* Um CTA só na dobra: duas barras cheias empilhadas competiam entre si e
         comiam meia dobra. O serviço em destaque fica na badge de serviço. */
      .hero .btns { gap: var(--space-xs); }

      /* Os 4 selos de confiança: a frase de apoio de cada um é leitura de desktop e
         triplicava a altura do bloco. Em 2x2 os rótulos sozinhos liam como uma lista
         orfã de 4 fragmentos alinhados em colunas que nada alinhavam. Como uma linha
         corrida separada por ponto medio eles voltam a ler como uma credencial só,
         em ~36px no lugar de 75px. */
      .hero-trust-strip {
        gap: var(--space-2xs) var(--space-sm);
        padding-top: var(--space-sm);
      }
      /* CORRECAO 31/07: a versao "linha corrida" desta faixa economizava 40px
         escondendo os quatro <span> com display:none — as frases que explicam
         cada rotulo sumiam so no mobile. Economia paga com conteudo nao e
         economia, e e exatamente o erro que derrubou o scroll-snap daqui.
         As frases voltaram; a altura sai do tamanho da fonte, nao do corte. */
      .hero-trust-item strong { font-size: var(--text-sm); }
      .hero-trust-item span { font-size: var(--text-xs); line-height: var(--leading-snug); }

      /* Cards de pacote: preço junto do nome e "o que inclui" como lista.
         O beneficio de cada item VOLTA a aparecer: e a dor que o servico resolve, a
         informacao que faz decidir. Quem sai e a frase de fecho, que e atmosfera. */
      .combo-note { display: none; }
      .combo-list span { font-size: var(--text-xs); color: var(--muted-on-dark, var(--muted)); }
      .combo-list { gap: 0.4em; margin-block: var(--space-xs); }
      .combo-card { padding: var(--space-md); }

      /* O número era o último elemento, depois da descrição. No celular quem escaneia
         quer nome → quanto custa → o que inclui. Reordenado por CSS: a ordem do DOM
         (e portanto a leitura por leitor de tela e o tab dos botões) fica intacta. */
      .combo-card { display: flex; flex-direction: column; }
      .combo-card .combo-label { order: 1; align-self: flex-start; }
      .combo-card h3 { order: 2; }
      .combo-card .combo-price { order: 3; margin-block: var(--space-3xs) 0; }
      .combo-card .combo-value { order: 4; font-size: var(--text-xs); }
      .combo-card .combo-meta { order: 5; margin-top: var(--space-2xs); }
      .combo-card .forhim-protocol-meta { order: 6; margin-top: var(--space-2xs); }
      .combo-card p { order: 7; margin-top: var(--space-sm); }
      .combo-card .combo-list { order: 8; }
      .combo-card .combo-note { order: 9; }
      /* v6 item 3: margem fixa no grupo de acao colava o botao no texto e
         herdava a raggedness do <p> (35px de amplitude no card featured,
         que tem 2 linhas a mais em PT). margin-top:auto no .discreet-actions
         ancora o grupo na base do card (ha folga: 36px nos cards 2-4, 1px no
         featured), igual ao conserto do item 2 em 1440. O .btn solto (fora
         de .discreet-actions, se existir) mantem a margem fixa. */
      .combo-card .discreet-actions,
      .combo-card .btn { order: 10; }
      .combo-card .btn { margin-top: var(--space-md); }
      .combo-card .discreet-actions { margin-top: auto; padding-top: var(--space-md); }

      /* "(45 min)" quebrava entre "(45" e "min)". */
      .forhim-svc em, .service-row em { white-space: nowrap; }

      /* ---- CARROSSEL: cards lado a lado em vez de empilhados ----
         A pagina tinha 27 telas de rolagem. Empilhar 5 combos, 6 populares e 3 pacotes
         de noiva é o que a produzia. Em faixa horizontal com snap, cada secao cabe em
         cerca de uma tela e NENHUM produto e escondido — so muda o eixo da leitura. */
      /* 09/08: bridal-tiers, testimonials-grid, bridal-timeline e credenciais
         SAIRAM da faixa por pedido do Vitor — nesses blocos o swipe atrapalhava;
         voltam a empilhar, com formatacao compacta logo abaixo. */
      .popular-grid, .combo-bento, .forhim-packages,
      .gallery-grid {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        gap: var(--space-2xs); min-width: 0; max-width: 100%;
        padding-block: var(--space-3xs) var(--space-2xs);
        scroll-snap-type: x mandatory; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .popular-grid::-webkit-scrollbar, .combo-bento::-webkit-scrollbar,
      .forhim-packages::-webkit-scrollbar,
      .gallery-grid::-webkit-scrollbar { display: none; }

      .popular-grid > *, .combo-bento > *, .forhim-packages > * {
        flex: 0 0 82%; scroll-snap-align: center; min-width: 0;
      }
      /* Altura uniforme p/ a faixa nao ficar serrilhada. */
      .popular-grid > *, .combo-bento > *, .forhim-packages > * { height: auto; }

      /* Depoimentos empilhados e compactos: citacao em corpo de leitura, nao
         de destaque; card enxuto. 3 cards curtos custam menos que uma faixa
         que esconde 2 deles. */
      .testimonial-card { padding: var(--space-sm); }
      .testimonial-quote { font-size: var(--text-sm); line-height: 1.55; }
      .testimonials-grid { gap: var(--space-2xs); }
      /* Noivas em lista com filete (ticket #7): sem gap entre linhas, o
         padding-block de #bridal .combo-card.bridal-tier ja da o respiro. */
      .bridal-tier { padding: var(--space-sm) 0; }

      /* 03/08: os tres depoimentos e as sete fotos eram as duas ultimas pilhas
         verticais da pagina (1,69 e 1,19 tela). Mesmo gesto dos combos, mesmo
         conteudo: 3 depoimentos continuam 3, 7 fotos continuam 7. */
      .gallery-grid > * {
        flex: 0 0 58%; scroll-snap-align: center; min-width: 0;
        grid-column: auto; grid-row: auto;
      }
      /* A primeira foto e a de abertura: mais larga, como no desktop. */
      .gallery-grid > :first-child { flex-basis: 76%; }

      /* O container corta a faixa na largura da tela; sem isto o flex vaza a pagina. */
      .container { min-width: 0; }

      /* No celular o For Him vira chamada: titulo, os dois protocolos em faixa e o link.
         O menu de 6 servicos e a FAQ continuam existindo — em /for-him.html, que e a
         pagina feita para ser enviada a esse publico. Repetir tudo aqui custava 2,7
         telas de rolagem a TODO visitante para servir uma fatia dele. */
      .forhim-menu, .forhim-faq-title, .forhim-faq-grid { display: none; }
      .forhim-faq { margin-top: var(--space-md); padding-top: var(--space-md); }
      .forhim-page-link { margin-top: 0; }

      /* Noivas: a lista de parceiros e leitura de desktop; a linha do tempo fica. */
      .bridal-extra { display: none; }

      /* Enquadramento do retrato no mobile: o rosto sobe no frame para nao ficar
         centralizado no torso. Altura livre — a foto acompanha a largura. */
      .hero-portrait-image img { object-position: center 22%; }

      /* 09/08: a linha do tempo VOLTOU a ser vertical (o swipe saiu, pedido do
         Vitor). A base ja e a timeline com borda e numeros; aqui so compacta. */
      .bridal-timeline { margin-bottom: var(--space-lg); }
      .bridal-step { padding-bottom: var(--space-md); }

      /* Titulos e respiros no mobile: escala menor, mesmo conteudo. */
      .section .title { margin-bottom: var(--space-sm); }
      .section .title h2 { font-size: var(--text-xl, 1.6rem); line-height: 1.15; }
      .section .title p { font-size: var(--text-sm); }
      .eyebrow { margin-bottom: var(--space-2xs); }

      /* Nathalia: desde o ticket #7 (sangria total) a foto sangra 100vw em vez de
         encolher (regra em #nathalia .nathalia-photo-frame, linha ~1345). O problema
         de altura que a largura reduzida resolvia (secao mais alta, 1,68 tela) agora
         se resolve achatando a proporcao em vez de estreitar a largura: 4:5 vertical
         numa faixa de 100vw ficava alta demais, 16:10 mantem o rosto visivel e curto. */
      #nathalia .nathalia-photo-frame img { aspect-ratio: 16 / 10; object-position: center 22%; }
      #nathalia p { font-size: var(--text-sm); }
      /* 09/08: credenciais de volta ao trilho VERTICAL da base (o swipe saiu,
         pedido do Vitor). So aperta o respiro entre itens. */
      #nathalia .nathalia-cred-title { margin-bottom: var(--space-2xs); }
      #nathalia .nathalia-cred-item { margin-bottom: var(--space-sm); }

      /* Cartao de servico no mobile. O beneficio e a frase que diz o que o servico
         resolve; em 0.72rem (11.5px) ela estava na tela mas ninguem lia. O grid do
         cabecalho agora vem da regra base, valida nos dois tamanhos, entao aqui so
         sobra o corpo do texto crescendo. */
      .service-benefit, .forhim-benefit {
        font-size: 1rem;
        line-height: var(--leading-normal);
      }

      .hero-logo { max-height: 12dvh; width: auto; }

      /* Noivas (+251px): a linha do tempo e o argumento; os cards de pacote rolam na faixa. */
      /* CORRECAO 01/08: 0.72rem e 0.7rem davam 11.5px e 11.2px medidos no auditor. A folga
         devia sair de espaco e escala "que ninguem le" — mas o passo do programa de noiva
         E conteudo: e o que a cliente le para entender o que recebe. Piso de 13px no texto
         do passo e 12px na nota. Custo: ~20px na secao, dentro da folga que ja existia. */
      #bridal .bridal-step p { font-size: 0.8125rem; line-height: 1.4; }
      #bridal .bridal-timeline { gap: var(--space-2xs); }
      /* v6 item 9: --text-sm resolvia a 13,18px em 390, abaixo do piso de 15px
         pro paragrafo de abertura do #bridal (maior ticket da pagina). Esta
         regra tem #bridal na especificidade e vencia o --text-base da base
         (site.css ~1546); alinhando as duas pra nao reabrir o degrau. */
      #bridal .bridal-lead { font-size: var(--text-base); }
      #bridal .bridal-note { font-size: 0.75rem; }

      /* Hero: o logo ja identifica a marca, entao o h1 cede escala. O subtitulo NAO:
         e a unica frase que nomeia os servicos, e ficava em 13,18px porque esta regra
         contradizia a de ~1491 dentro DESTA MESMA media query — a de baixo vencia calada.
         Medido a 390x844: subir para --text-base custa 16px de hero (976 -> 992) e o CTA
         primario continua acima da dobra (809 de 844). O tamanho fica definido la em cima. */
      .hero h1 { font-size: clamp(1.75rem, 1.4rem + 3.2vw, 2.4rem); }
      .hero-logo { max-height: 9dvh; }
      .hero .btns { margin-top: var(--space-xs); }
      .hero-trust-strip { margin-top: var(--space-xs); }

      /* Noivas: o titulo saiu de .title (agora .bridal-band-title, dentro da
         banda full-bleed — v6 §07/7b) e cabe em --text-2xl mesmo nos 320px
         fixos da banda (eyebrow+h2+cta medem ~200px, sobra folga). Sem
         override aqui de proposito: nao e' pendencia, e' a conta fechada. */
      #bridal .bridal-step h3 { font-size: var(--text-sm); }

      /* Ajuste fino nas que passavam por pouco. */
      #for-him .title p, #chosen-feature p, #about p { font-size: var(--text-sm); }
    }

    /* ===================================================== ESCALA MOBILE: CABER, NAO CORTAR
       Medido num iPhone 13 (390x664 uteis): as secoes estouravam a tela por 104-162px,
       e #nathalia/#drainage por ~440px. As duas saidas anteriores foram as erradas —
       esconder conteudo (display:none) e rolagem interna (overflow-y:auto, que come o
       gesto). Aqui a folga sai de ESPACO e ESCALA, que ninguem le:
       bloco de titulo, gaps de grade e altura de imagem. Nenhum texto, preco ou servico
       deixa de existir. Ordem importa: este bloco vem depois dos ajustes mobile acima
       para vencer na cascata com a mesma especificidade. */
    @media (max-width: 767px) {
      /* 1. O bloco de titulo (eyebrow + h2 + paragrafo) repete em toda secao e e a
            folga mais barata: ~40px por secao, sem tirar uma palavra. */
      .section .title { gap: var(--space-3xs); margin-bottom: var(--space-sm); }
      .section .title h2 { font-size: var(--text-lg); line-height: 1.18; }
      .section .title p { line-height: var(--leading-normal); }

      /* 2. Grades de cards: o respiro de desktop somava ~60px por secao empilhada.
         .testimonials-grid, .gallery-grid e .forhim-packages sairam desta lista:
         viraram faixa horizontal acima e o gap delas e o do trilho (--space-2xs).
         Esta regra vem depois no arquivo e vencia por cascata. */
      .chosen-grid, .about-grid, .soft-skin-grid, .nathalia-grid { gap: var(--space-sm); }

      /* 3. Imagens: sao o maior bloco unico de cada secao e escalam sem perda de
            leitura — proporcao preservada, so menores. */
      .about .image-stack { max-width: 70%; margin-inline: auto; }
      /* O retrato do hero saiu daqui: encolher a largura era o que empurrava a
         legenda para baixo e a deixava mais alta que a propria foto. Regra unica
         no item 8 abaixo. */

      /* 4. #drainage: o painel de ritmo (460px) e a maior peca da secao. Reduzir o
            respiro interno o encaixa sem esconder nenhuma etapa. */
      #drainage .rhythm-panel { padding: var(--space-sm); }
      #drainage .rhythm-panel li { padding-block: var(--space-3xs); }

      /* 5. #nathalia era a mais alta (1,68 tela). Desde o ticket #7 a foto sangra
            100vw (nao encolhe mais); o respiro sobra pra texto e credenciais. */
      #nathalia .nathalia-content { gap: var(--space-2xs); }
      #nathalia .nathalia-credentials { padding-top: var(--space-2xs); }

      /* 6. Cards: o padding de desktop multiplicado por N cards empilhados e o que
            estoura as grades. Menos moldura, o mesmo conteudo dentro dela. */
      .popular-card, .combo-card, .testimonial-card, .bridal-card, .service-accordion,
      .rhythm-detail, .faq-item {
        padding: var(--space-sm);
      }
      .service-accordion > button { padding-block: var(--space-2xs); }

      /* 7. Galeria: 6 fotos em 2 colunas. Quadrado no lugar de retrato encaixa a grade
            inteira — nenhuma foto sai, todas ficam menores. */
      .gallery-grid { gap: var(--space-2xs); }
      .gallery-grid img { aspect-ratio: 1 / 1; }

      /* 8. Hero mobile: a foto e o fundo, nao um cartao.
         Historico: tres rodadas de "reduzir altura" espremeram o retrato ate
         180x120 (foto vertical deitada em paisagem) com uma legenda mais alta
         que a propria foto. O cartao horizontal resolveu a altura, mas o retrato
         continuava um selo de 127px disputando espaco com o texto.
         Direcao escolhida (ref do Vitor, 31/07): retrato sangrando na dobra
         inteira, conteudo por cima. A foto deixa de competir com o texto porque
         vira o palco dele — e o veu escuro tira o site do creme chapado sem
         mexer numa cor da paleta.
         CORRECAO 31/07 (medido, nao achado): o conteudo do hero ocupa 601px e a
         dobra do iPhone 13 oferece 728 uteis. Sobram 113px acima do texto, que
         nao sustentam um retrato: com a foto atras de tudo, o h1 pousava no rosto
         da Nathalia em qualquer object-position — subir mais cortava a cabeca.
         Decisao do Vitor: no mobile a foto vira FAIXA propria no topo, com o
         rosto limpo, e o texto desce para fundo solido. O credito dela passa a
         ficar abaixo da dobra; o CTA continua acima, que e o que precisa ser
         visto sem rolar.
         DOM intacto: o cartao continua depois do conteudo no HTML (ordem certa
         para leitor de tela) e so a ORDEM VISUAL muda, via `order`.
         Por que faixa e nao fundo com veu mais forte: o veu que dava
         legibilidade tinha sido desenhado para o RODAPE do hero — valia 0.06
         de opacidade entre 18% e 26% da altura, que e exatamente onde o
         subtitulo cai. Escurecer o terco superior a ponto de salvar o texto
         apagava o rosto. Duas zonas que nao disputam resolvem os dois
         problemas de uma vez, e nenhuma regra "on-dark" precisa existir. */
      .hero { position: relative; isolation: isolate; overflow: hidden; }
      .hero-layout {
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-sm);
        padding-block: 0 var(--space-md);
      }

      /* 09/08: a faixa paisagem virou RETRATO EMOLDURADO, pedido no desenho do
         Vitor — Nathalia e o destaque do hero, nao um fundo. O cartao fica no
         gutter (nao sangra), com moldura interna clara sobre a foto. */
      .hero-portrait-card {
        order: -1;
        position: relative; inset: auto; z-index: 0;
        display: flex; flex-direction: column; gap: var(--space-2xs);
        max-width: none; margin: 0; padding: 0;
        /* `.hero-layout` usa `align-items: start`, entao todo filho encolhe pro
           tamanho do conteudo. Sem este stretch o cartao herdava a largura da
           foto (216px de 390) e sobrava faixa vazia a direita: a foto parecia
           torta. Medido em 390x844, 19/08. */
        align-self: stretch;
      }
      .hero-portrait-image {
        position: relative; inset: auto;
        height: auto; border-radius: var(--radius-lg); overflow: hidden;
        box-shadow: var(--shadow-md);
      }
      .hero-portrait-image img {
        /* Teto de altura em svh (<=38svh, ticket dobra) protege a primeira tela.
           `aspect-ratio` NAO pode conviver com `max-height` aqui: quando o teto morde,
           a razao passa a mandar na largura e a foto encolhe pro meio da coluna,
           deixando faixa vazia (medido em 390x844, 19/08). A altura e fixa e o
           `object-fit: cover` faz o corte; `object-position` sobe o enquadramento
           pra cabeca nao cortar. */
        width: 100%; height: 32svh; aspect-ratio: auto;
        object-fit: cover; object-position: 50% 12%;
      }
      /* A moldura: um filete claro recuado da borda, por cima da foto. */
      .hero-portrait-image::after {
        content: ""; position: absolute; inset: 10px;
        border: 1px solid rgba(var(--ink-on-dark-rgb), 0.65);
        border-radius: 0;
        pointer-events: none;
      }
      .hero-content { position: relative; z-index: 1; }

      /* NAO reintroduzir inversao "on-dark" aqui. Enquanto o texto ficava sobre
         a foto, este bloco reescrevia h1, subtitulo, brand-line, badges (com
         blur), primario em creme e secundario com borda branca. Com a faixa,
         nada disso e texto sobre imagem: o estilo base sobre o creme ja passa
         AA e o CTA primario volta a ser o marrom escuro, o bloco de maior peso
         visual da dobra — que era justamente o que a inversao tirava dele. */

      /* Credito da foto: colado na faixa, ja no creme, e realinhado ao gutter
         porque o cartao sangra para fora dele. O paragrafo "One therapist. One
         room." continua fora: e a mesma promessa que a faixa de confianca faz
         logo abaixo. */
      .hero-founder-caption {
        position: relative; z-index: 1;
        margin: 0 var(--gutter); padding: 0; border: 0; background: none;
        gap: var(--space-3xs);
      }
      .hero-founder-caption p, .hero-caption-mark { display: none; }

      /* 9. Fechamento das que passavam por pouco (69-120px). Especificidade de ID
            porque a regra base tambem usa ID — sem isso a media query nao vence. */
      /* Retrato mais largo = grade mais baixa. 1/1 chegou a ser testado aqui e PIOROU
         a secao em 100px: quadrado e mais alto que 16/10, nao mais baixo. */
      /* Na faixa os itens tem larguras diferentes (abertura mais larga), entao
         aspect-ratio serrilharia a tira. Altura fixa + cover mantem o topo e a
         base alinhados sem cortar nada que importe. */
      #gallery .gallery-grid img { aspect-ratio: auto; height: 208px; object-fit: cover; }
      #for-him .forhim-packages { gap: var(--space-2xs); }
      #for-him .forhim-package { padding: var(--space-sm); }
      #chosen-feature .chosen-copy { gap: var(--space-2xs); }
      #chosen-feature .chosen-visual img { aspect-ratio: 4 / 3; }
      #services .service-menu { gap: var(--space-3xs); }
      /* O aspect-ratio da foto agora e o da FAIXA (5/4), definido junto do resto
         do hero mobile acima. A regra 4/5 que vivia aqui vinha depois na cascata
         e vencia por ordem, devolvendo o retrato vertical. Nao recriar. */
      .hero-content { gap: var(--space-2xs); }

      /* 10. Rodada 03/08 — o que sobrou depois que o texto foi cortado nos 4 idiomas.
         Aqui NAO se corta mais copy: o que restou nos cards de #for-him e #bridal
         e a lista do que vem dentro do pacote ("Massagem de Recuperacao + Liberacao
         Miofascial..."). Encurtar aquilo nao e economia de palavra, e tirar item
         que a cliente esta comprando. A altura sai de moldura, nao de conteudo. */

      /* Botoes de acao empilhavam 2x45px. Duas colunas fixas fizeram PIOR
         (medido: rotulo quebrou em 3 linhas dentro de 122px e o par foi de 53
         para 94px). Entao lado a lado so quando o rotulo couber inteiro: sem
         quebra, e quem nao couber desce sozinho. */
      .combo-card .discreet-actions, .bridal-tiers .discreet-actions {
        display: flex; flex-wrap: wrap; gap: var(--space-2xs);
      }
      .combo-card .discreet-actions > *,
      .bridal-tiers .discreet-actions > * { flex: 1 1 auto; white-space: nowrap; }
      /* Os dois botoes lado a lado valem os 53px de altura que economizam, mas
         grid item nasce com min-width:auto e "@brumesthetics" e palavra unica e
         indivisivel (~117px numa coluna 1fr de 112px): o botao recusava encolher,
         vazava a capsula em 320 e alargava o layout viewport de 360 para 387 — o
         banner de cookie era so a vitima visivel. Coluna 2 fica no tamanho
         natural; a 1 encolhe (min-width:0) e quebra a palavra. */
      .nathalia-cta-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs); }
      .nathalia-cta-row > * { width: 100%; }
      /* So o primario cede: e ele que carrega o min-width de 200px la em cima,
         e o texto dele quebra. O secundario mantem min-width auto para nunca ser
         espremido abaixo da palavra que carrega. */
      .nathalia-cta-row .btn-primary { min-width: 0; overflow-wrap: anywhere; }
      .nathalia-cta-row .btn { padding-inline: var(--space-xs); }

      /* A foto da Nathalia era o maior bloco unico da secao mais alta da pagina;
         desde o ticket #7 ela sangra 100vw em vez de encolher (regra ~1853
         ja fixa 16:10 pra controlar altura nessa faixa e nao regride aqui). */

      /* Texto dentro de card em faixa: o corpo pode ser um degrau menor que o
         texto de leitura da pagina — e legenda de produto, nao artigo. */
      .combo-card p, .bridal-tiers .combo-card p, .forhim-packages .combo-card p {
        font-size: var(--text-xs); line-height: 1.45;
      }

      /* #drainage: aperta a entrelinha da lista de sessoes, nenhuma etapa a menos.
         (--leading-normal e 1.55, MAIOR que o que a lista ja usava: aquilo
         esticou em vez de encolher. Aqui vai o valor menor, na mao.) */
      #drainage .rhythm-detail { line-height: 1.4; }
      #drainage .rhythm-detail li { padding-block: 2px; }
    }

    /* ============================================== RITMO MOBILE: UMA SECAO POR GESTO
       Historico obrigatorio, porque este bloco ja foi um erro: aqui existiu um
       scroll-snap `mandatory` com min-height:100dvh em toda secao. Foi REMOVIDO porque,
       para caber, o CSS foi escondendo conteudo real ate caber — o mobile mostrava 2
       depoimentos de 3, 5 fotos de 8, e cortava os paragrafos de #about e #nathalia;
       no desktop sumiam a FAQ do For Him e a 7a foto em diante. A regra que nasceu dali
       continua valendo e nao se negocia: NENHUMA secao cabe as custas de conteudo
       escondido. Cabe por texto mais curto de verdade (cortado nos 4 idiomas, some do
       site inteiro), por respiro menor ou por rolagem interna declarada e visivel.

       O que muda em 03/08/2026 e o tipo de snap: `proximity` no lugar de `mandatory`.
       A rolagem imanta na secao mais proxima — o "um gesto, uma secao" que se queria —
       mas quando a secao passa da tela o usuario rola livre por dentro dela. Com isso o
       layout perde o poder de exigir corte: o que nao couber, rola, e ninguem fica preso.

       Orcamento de uma tela: 100svh e a area visivel com as barras do Safari ABERTAS
       (664px num iPhone 14), nao os 844px do aparelho. Menos a barra fixa de CTA sobram
       ~600px, e e contra esse numero que cada secao foi medida. O header nao entra na
       conta porque se recolhe ao descer (.nav.is-tucked, em assets/js/site.js). */
    @media (max-width: 767px) {
      :root {
        --cta-h: calc(3.85rem + env(safe-area-inset-bottom, 0px));
        --screen: calc(100svh - var(--cta-h));
      }
      html {
        scroll-snap-type: y proximity;
        scroll-padding-top: var(--space-2xs);
      }
      /* v6 §02 (2d): desliga o snap so durante a troca de filtro do rail —
         .svc-group escondendo/mostrando encolhe #services (snap target) e o
         Chrome re-imanta a pagina pro topo da secao sozinho, sem gesto do
         usuario. Classe ligada/desligada por JS em applyFilter, site.js. */
      html.is-svc-filtering { scroll-snap-type: none; }
      main > section, main > .hero {
        min-height: var(--screen);
        scroll-snap-align: start;
        /* `normal` (nao `always`): rolagem rapida pode atravessar duas secoes de uma
           vez, que e o que o gesto pediu. `always` transforma a pagina em slideshow
           e obriga 12 gestos para chegar ao contato. */
        scroll-snap-stop: normal;
        /* O conteudo se centra na tela em vez de encostar no topo: com secoes de
           altura igual, o que da o ritmo e o miolo alinhado, nao a borda. min-height
           (nao height) garante que a secao maior cresce em vez de cortar. */
        display: flex; flex-direction: column; justify-content: center;
      }
      /* Precisa da classe para vencer `.section { padding-block: var(--section-y) }`.
         --section-y vale 3.5rem no mobile: 112px de respiro em 600px de tela e um
         sexto da secao gasto em nada. Com as secoes de altura igual o respiro entre
         elas passa a ser a propria troca de tela, nao o padding. */
      main > .section, main > .nathalia-section, main > .brand-closing {
        padding-block: var(--space-lg);
      }
      /* A ultima secao e curta e nao deve esticar meia tela de vazio ate o rodape. */
      main > section:last-of-type { min-height: 0; }

      .nav {
        transition: transform var(--dur) var(--ease-standard),
                    border-color var(--dur) var(--ease-standard),
                    background var(--dur) var(--ease-standard);
      }
      .nav.is-tucked { transform: translateY(-100%); }
    }
    @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
      /* Quem pediu menos movimento nao quer a pagina decidindo onde parar. */
      html { scroll-snap-type: none; }
      .nav { transition: none; }
    }

    /* Trava de largura: as faixas horizontais (carrosseis de card no mobile) empurravam
       o documento para 675px numa tela de 390. Quem corta o vazamento e o
       `body { overflow-x: hidden }` do topo deste arquivo, sozinho: medido em 390/390
       nas 4 paginas sem nenhuma trava aqui.
       O `html { overflow-x: clip }` que morava nesta regra era redundante E custava caro:
       overflow diferente de visible no elemento raiz mata `position: sticky` dos filhos.
       Com ele, o `.nav` media top=-2068 em scrollY 2000 (fora da tela, nunca grudava);
       sem ele, top=0. Nao devolver o clip para o `html` sem medir o nav de novo. */
    @media (hover: none) and (pointer: coarse) {
      main, main > section, main > .hero, .container { max-width: 100%; min-width: 0; }
    }

    @media (min-width: 768px) {
      #for-him .forhim-packages { gap: var(--space-sm); }
    }

    /* ============================================================ MODO READ (documento legal)
       cookie-policy.html e afins. Antes vivia num <style> proprio de 89 linhas que
       redeclarava os tokens: a paleta nova (--telha, --vela) nunca chegava la.
       Medida estreita, leitura calma, Bricolage Grotesque so nos titulos.
       Duas regras do RESET precisam ser desfeitas aqui, e so aqui:
       `a{text-decoration:none}` (:137) e `ul{list-style:none}` (:138). Num documento
       legal o sublinhado do link e a bolinha da lista sao estrutura, nao enfeite. */
    .page-legal {
      line-height: var(--leading-relaxed);
    }
    .page-legal main a {
      color: var(--gold-ink);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }
    .page-legal main a:hover { color: var(--ink); }
    /* R3 do QA: os links de contato da politica mediam 83x17 e 172x17. Sao links
       DENTRO de frase — inline-flex quebraria a prosa. Padding vertical em
       elemento inline amplia o alvo sem mexer na linha. */
    .page-legal main a { padding-block: 16px; }
    /* Rodada 2 do code-review (11/09): os DOIS links do .contact-box (tel + FAQ)
       sao a excecao — ficam em linhas consecutivas dentro do MESMO <p>,
       separados so por <br/>. Padding vertical em elemento inline nao reserva
       espaco na line box (CSS2.1 §10.6.1): as duas areas de toque expandidas se
       sobrepunham, e quem pintava por cima era o posterior no documento (o
       FAQ) — tocar embaixo do telefone abria o FAQ em vez de discar. Aqui SIM
       ha controle por perto, entao os dois viram inline-flex: a mesma area de
       toque, mas agora reservada na propria line box, sem vazar pro vizinho. */
    .page-legal .contact-box a { display: inline-flex; align-items: center; }
    .page-legal main ul {
      list-style: disc;
      margin: var(--space-xs) 0 0 var(--space-md);
    }
    .page-legal main li + li { margin-top: var(--space-2xs); }

    .page-legal .top {
      display: flex; align-items: center; gap: var(--space-sm);
      /* Alinha o "voltar" a coluna de texto do <main> em vez de colar na borda da
         janela: em tela larga a barra e full-width, mas o link comeca onde o texto
         comeca. Abaixo de --max-narrow o max() devolve o gutter normal. */
      padding: var(--space-sm) max(var(--gutter), calc((100% - var(--max-narrow)) / 2));
      border-bottom: 1px solid var(--line);
      background: var(--creme);
    }
    .page-legal .top a {
      /* R3 do QA: media 215x44. A regua e 48. */
      display: inline-flex; align-items: center; min-height: 48px;
      font-size: var(--text-sm); color: var(--muted); text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color var(--dur-quick) var(--ease-standard),
                  border-color var(--dur-quick) var(--ease-standard);
    }
    .page-legal .top a:hover { color: var(--ink); border-bottom-color: var(--gold-thread); }

    .page-legal main {
      max-width: var(--max-narrow);
      margin-inline: auto;
      padding: var(--space-xl) var(--gutter) 5rem;
    }
    .page-legal h1 {
      font-family: var(--font-display); font-optical-sizing: auto;
      font-variation-settings: "opsz" 88, "wght" var(--fw-semi), "wdth" 88;
      font-size: var(--text-3xl);
      letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
      color: var(--ink); margin-bottom: var(--space-2xs);
    }
    .page-legal .updated {
      font-size: var(--text-xs); color: var(--clay);
      letter-spacing: var(--tracking-wide); text-transform: uppercase;
      margin-bottom: var(--space-xl);
    }
    /* Fase 5 (hermes-fase5-copy.md §2): aviso de idioma da cookie-policy — o corpo
       legal fica so em EN, este e o unico texto que muda por idioma. Escondido
       via [hidden] quando o visitante ja esta em EN (script inline da propria
       pagina), nunca via CSS de idioma: sem isso o aviso soaria redundante. */
    .page-legal .lang-note {
      font-size: var(--text-sm); color: var(--clay);
      margin: 0 0 var(--space-lg);
      padding: var(--space-2xs) var(--space-xs);
      background: var(--linen); border-left: 2px solid var(--gold-thread);
      border-radius: var(--radius-sm, 4px);
    }
    .page-legal .lang-note[hidden] { display: none; }
    .page-legal h2 {
      font-family: var(--font-display); font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-lg); line-height: var(--leading-snug);
      color: var(--ink); margin: var(--space-xl) 0 var(--space-xs);
      padding-top: var(--space-md); border-top: 1px solid var(--line);
    }
    .page-legal p, .page-legal li { font-size: var(--text-base); color: var(--muted); }
    .page-legal p + p { margin-top: var(--space-xs); }
    .page-legal main strong { color: var(--ink); font-weight: var(--fw-med); }
    .page-legal .contact-box {
      margin-top: var(--space-xl); padding: var(--space-md);
      background: var(--linen); border: 1px solid var(--line);
      border-left: 2px solid var(--gold-thread);
      border-radius: var(--radius-lg);
    }
    .page-legal .contact-box p { font-size: var(--text-sm); }

    /* ============================================ TOQUE E ZOOM NO CELULAR (auditoria 01/08)
       Achados confirmados por leitura de CSS depois da rodada mobile de 31/07, com o
       auditor rodando em contexto movel de verdade (hasTouch + UA de iPhone), nao em
       viewport estreito. O que NAO entrou aqui, por ter sido descartado na confirmacao:
       - ancora sob o header: `html` ja tem scroll-padding-top (:123). Medido: as secoes
         param a 79.9px com header de 67.9px. Falso positivo do medidor, que so olha
         scroll-margin-top no alvo e ignora scroll-padding-top no scroller.
       - contraste "needsEye" (66 no index): fundo com imagem ou gradiente, o auditor se
         recusa a calcular. Falha real de contraste = 0.
       - links dentro de linha de texto corrido: tem excecao explicita na SC 2.5.8. */
    @media (max-width: 767px) {
      /* iOS da zoom automatico ao focar um campo com fonte < 16px, e depois nao volta:
         o visitante fica com a pagina deslocada. --text-xs resolve em 12.1px medidos.
         16px aqui nao e escolha estetica, e o limiar do WebKit. */
      .language-select, .lang-select { font-size: 16px; }

      /* Links soltos no rodape: 17-21px de altura medidos. Como sao `display:block`
         dentro de .footer-inner, e nao links no meio de uma frase, a excecao "inline"
         da SC 2.5.8 nao vale. A altura vem de padding, o texto nao muda de tamanho. */
      .footer-inner a {
        display: inline-flex; align-items: center; min-height: 44px;
      }

      /* Mesmo motivo da regra acima: os links da assinatura do estudio tambem sao blocos
         soltos no rodape, fora da excecao "inline" da SC 2.5.8. */
      .footer-studio-brands a, .footer-studio-sign {
        display: inline-flex; align-items: center; min-height: 44px;
      }
      .footer-studio-brands a { flex-direction: column; justify-content: center; align-items: flex-start; }

      /* Telefone da secao de contato: 102x23 medidos, unico conteudo do <p>, logo nao
         cabe a excecao "inline" da SC 2.5.8. Aqui `min-height` seria errado: o link tem
         sublinhado dourado (`:1253`) e a borda desceria junto com a caixa, deslocada do
         texto. O alvo cresce por pseudo-elemento transparente e o desenho fica intacto. */
      .closing-contact a { position: relative; }
      .closing-contact a::after {
        content: ""; position: absolute; left: 0; right: 0;
        top: 50%; height: 44px; margin-top: -22px;
      }

      /* CTA para a pagina do For Him: 23px de altura, e e um dos poucos caminhos para
         aquela pagina a partir da home. */
      .forhim-page-link { min-height: 44px; }
    }
  

/* ============================================================ v5 · COOKIE CONSENT BANNER
   Movido de index.html para cá na issue #13: banner passa a ser injetado pelo
   assets/js/brum-tracking.js nas 3 páginas (index, faq, cookie-policy), então o
   CSS precisa estar num arquivo que as 3 já carregam (site.css), não só no index.
============================================================================ */
    /* ============================================================ v5 · COOKIES
       Banner + modal de preferências. Mesma lógica de consentimento; visual nos
       tokens v5, sem borda dourada. Opção mais privada (Essential only) legível,
       nunca escondida. Switches acessíveis com foco visível.
    ============================================================================ */
    #brum-cookie-banner {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay);
      display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
      padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
      background: var(--porcelain);
      border-top: 1px solid var(--line-strong);
      box-shadow: none; /* §3.5 + §7: o banner separa por fio, nao por sombra */
      transform: translateY(100%);
      transition: transform var(--dur) var(--ease-out);
    }
    #brum-cookie-banner.is-visible { transform: translateY(0); }
    #brum-cookie-banner.is-hidden  { transform: translateY(100%); }

    /* R3 do QA (10/09): o link da politica media 75x16 no banner e 90x18 na
       pagina de politica — abaixo da regua de 48px da direcao. Ele e texto
       DENTRO da frase do aviso: inline-flex quebraria a frase e altura real
       estouraria o teto de 104px do banner. Padding vertical em elemento
       inline aumenta a area de toque sem mover a linha; e as tres opcoes de
       consentimento sobem uma camada para que essa area nunca roube o toque
       delas (verificado por elementFromPoint no centro dos tres botoes).
       Rodada 2 do code-review (11/09): `.cookie-modal .cookie-text a` nao
       casava nada — o modal e injetado como `#brum-cookie-modal` (id, sem a
       classe `.cookie-modal`) e nao tem link nenhum dentro do texto
       (`cookie-modal-desc` e so texto). Nao existe link a alargar la dentro;
       tirei o seletor morto. */
    #brum-cookie-banner .cookie-text a { padding-block: 16px; }
    #brum-cookie-banner .cookie-actions { position: relative; z-index: 1; }

    /* Enquanto o banner de cookies decide, a CTA fixa espera fora da tela.
       Empilhá-la acima do banner (bottom: var(--cookie-banner-height)) punha a
       barra no MEIO do viewport em 390px — banner de 253px + CTA de 61px = 314px
       de overlay fixo cobrindo conteúdo na primeira visita. Medido em 09/08 via
       elementFromPoint: clique no telefone da seção de contato acertava a CTA. O
       banner já carrega os próprios botões; a CTA entra quando ele sai. */
    @media (max-width: 767px) {
      body.cookie-banner-visible .mobile-sticky-cta { transform: translateY(110%); }

      /* ---- Espia do carrossel x banner de cookies (ticket cookie-compacto, 21/08) ----
         TENTATIVA REVERTIDA em 21/08, rodada 2. A ideia era o hero RESERVAR a altura
         do banner (`body.cookie-banner-visible .bh-hero { height: calc(... - var(
         --cookie-banner-height)) }`) para a espia do 2o card sobreviver na primeira
         visita. Funcionava — e o preco era a `.bh-hero-figure` (flex:1 1 auto)
         absorver a folga toda e cair no piso de 92px: a foto da Nathalia virava uma
         tira com o rosto cortado na testa e no queixo.
         O enquadramento da foto (assets/nat-hero.webp, object-position 42% 20%) e
         peca APROVADA pela Nathalia, que decide o visual da marca — nao e variavel
         de ajuste de layout. Vitor decidiu: foto inteira, espia so depois do
         consentimento. A espia deixou de ser requisito com o banner aberto.
         Nao reintroduzir sem decisao dela. */
    }

    .cookie-text {
      flex: 1; min-width: 260px;
      font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-normal);
    }
    .cookie-text strong {
      display: block; margin-bottom: var(--space-3xs);
      font-family: var(--font-display); font-weight: 400;
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-md); color: var(--ink);
    }
    .cookie-text a {
      color: var(--gold-ink); text-decoration: underline;
      text-underline-offset: 3px; text-decoration-thickness: 1px;
    }
    .cookie-text a:hover { color: var(--ink); }

    .cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
    /* R3 do QA: era 44px. A regua da direcao e 48 e este e o controle de
       consentimento — o alvo mais sensivel da pagina. */
    .cookie-btn { min-height: 48px; padding: 0.7em 1.3em; white-space: nowrap; }
    .cookie-btn::after { display: none; }

    /* ---- Modal de preferências ---- */
    #brum-cookie-modal-backdrop {
      position: fixed; inset: 0; z-index: var(--z-modal);
      display: flex; align-items: flex-end; justify-content: center;
      background: rgba(var(--espresso-rgb), 0.55);
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    }
    #brum-cookie-modal-backdrop[hidden] { display: none; }
    #brum-cookie-modal {
      width: 100%; max-width: var(--max-narrow); max-height: 90vh; overflow-y: auto;
      padding: var(--space-lg) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
      background: var(--porcelain);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      box-shadow: var(--shadow-lg);
    }
    .cookie-modal-title {
      font-family: var(--font-display); font-weight: 400;
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 64, "wght" var(--fw-semi), "wdth" 90;
      font-size: var(--text-xl); color: var(--ink);
      letter-spacing: -0.015em; line-height: var(--leading-snug);
      margin-bottom: var(--space-2xs);
    }
    .cookie-modal-desc {
      font-size: var(--text-sm); color: var(--muted);
      line-height: var(--leading-relaxed); margin-bottom: var(--space-md);
    }
    .cookie-toggle-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: var(--space-sm); padding: var(--space-sm) 0;
      border-top: 1px solid var(--line);
    }
    .cookie-toggle-row:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: var(--space-md); }
    .cookie-toggle-label {
      font-family: var(--font-display); font-weight: 400;
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 40, "wght" 550, "wdth" 94;
      font-size: var(--text-base); color: var(--ink); margin-bottom: 2px;
    }
    .cookie-toggle-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

    .cookie-toggle { position: relative; flex: none; width: 46px; height: 26px; margin-top: 3px; }
    .cookie-toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .cookie-toggle-track {
      position: absolute; inset: 0;
      background: var(--parchment); border: 1px solid var(--line-strong);
      border-radius: var(--radius-pill); cursor: pointer;
      transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
    }
    .cookie-toggle-track::after {
      content: ""; position: absolute; top: 3px; left: 3px;
      width: 18px; height: 18px; border-radius: 0;
      background: var(--porcelain); box-shadow: var(--shadow-xs);
      transition: transform var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-standard);
    }
    .cookie-toggle input:checked + .cookie-toggle-track { background: var(--espresso); border-color: var(--espresso); }
    .cookie-toggle input:checked + .cookie-toggle-track::after { transform: translateX(20px); background: var(--creme); }
    .cookie-toggle input:disabled + .cookie-toggle-track { opacity: 0.55; cursor: default; }
    .cookie-toggle input:focus-visible + .cookie-toggle-track { box-shadow: var(--focus-ring); }

    .cookie-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

    @media (min-width: 768px) {
      #brum-cookie-banner { padding-inline: var(--space-2xl); flex-wrap: nowrap; }
      #brum-cookie-modal-backdrop { align-items: center; }
      #brum-cookie-modal { border-radius: var(--radius-lg); padding-inline: var(--space-xl); }
    }
    @media (max-width: 599px) {
      /* Banner compacto (ticket cookie-compacto, 19/08). Alvo <=150px em 390x844 e
         <=160px em 360x800, sem perder analise+marketing nem o link da Politica.
         A fileira unica com os TRES botoes de rotulo cheio ja foi tentada (nota
         historica abaixo) e estourava 387px em 360px mesmo com rotulo quebravel.
         Saida: titulo flui junto da descricao (strong vira inline, poupa uma
         linha inteira), texto encurtado pra 1-2 linhas reais, e a fileira de
         acao fica com 2 BOTOES (Aceitar tudo / essencial) + "Personalizar"
         como link de texto — mesma acao (abre o modal), sem 3o botao na fileira. */
      #brum-cookie-banner {
        padding: 0.4rem var(--space-sm) calc(0.4rem + env(safe-area-inset-bottom, 0px));
        gap: 0.25rem;
      }
      /* 21/08 rodada 3 (ticket letreiro-hero): o banner precisa ceder altura para o
         hero caber inteiro na PRIMEIRA visita. 16px/1.28 dava 3 linhas (61,9px) em
         390px; 14,5px/1.18 cabe em 2 linhas reais sem cortar nada do texto legal.
         14px em aviso de cookie e' tamanho de rotulo legitimo (nao e' corpo de
         texto); WCAG 2.5.8 fala de ALVO DE TOQUE, e os 3 controles seguem em 44px.
         Nada de line-clamp aqui: truncar aviso de consentimento seria esconder
         informacao obrigatoria. */
      .cookie-text {
        min-width: 0;
        font-size: 0.905rem;
        line-height: 1.18;
      }
      .cookie-text strong {
        display: inline; margin-bottom: 0; margin-right: 0.3em;
        font-size: 0.905rem;
      }
      .cookie-actions {
        width: 100%;
        display: flex; flex-wrap: nowrap; align-items: center;
        justify-content: space-between; gap: var(--space-2xs);
      }
      .cookie-btn { flex: 0 1 auto; min-width: 0; white-space: nowrap;
        min-height: 48px; /* R3 do QA: era 44 */ padding-block: 0; padding-inline: 0.85em; font-size: 0.92rem;
        display: inline-flex; align-items: center; justify-content: center; }
      /* "Personalizar/Customize/Sérsníða" vira link de texto: mesma acao (abre o
         modal via addEventListener ja existente no id), sem peso de 3o botao.
         Hit-area invisivel (::before) mantem o alvo de toque confortavel mesmo
         com padding visual pequeno — mesmo padrao usado em .closing-contact a. */
      #cookie-btn-customize {
        min-height: 48px; /* R3 do QA: era 44 */ display: inline-flex; align-items: center;
        background: none; border: none; box-shadow: none;
        padding: 0.5em 0.25em; text-decoration: underline;
        text-underline-offset: 3px; color: var(--muted); flex: 0 0 auto;
        position: relative; font-weight: inherit;
      }
      #cookie-btn-customize::before { content: ""; position: absolute; inset: -6px; }
      #cookie-btn-customize:hover { color: var(--ink); }
    }

/* ============================================================
   V7 PORT (2026-08-20) - hero full-bleed, menu accordion unico,
   about-panel/stats/faq da v7. Ported from redesign-mobile.html
   by hefesto-frontend. Direcao visual fechada pela Nathalia.
   ============================================================ */
.rm-eyebrow{font-weight:var(--fw-med);}
.rm-section{padding:var(--section-y) 0;}
.rm-eyebrow{font:var(--fw-med) var(--text-xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--space-2xs);}

.rm-eyebrow{font-weight:var(--fw-med);}
.rm-section{padding:var(--section-y) 0;}
.rm-eyebrow{font:var(--fw-med) var(--text-xs)/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--space-2xs);}
/* 1 — hero: OPTION A, full-bleed editorial. Photo fills the whole hero,
   scrim bottom-up, large display headline sits directly on the image.
   Source photo (nat-hero.webp) is pre-cropped to remove the "BRUM
   ESTHETICS" wall logo entirely (see assets/nat-hero.webp) — the fix for
   the "logo duplicates the title" defect happens at the asset, so no
   object-position trick can ever bring the wall text back into frame. */
/* ==== HERO 05 (creme) + ESPIA DO CARROSSEL — porte mobile 21/08/2026 =============
   Variante aprovada A2 + C2 + P0. Tudo escala por clamp(); a dobra e' 100svh com
   fallback 100vh. O hero e' um flex column: o carrossel e' o ultimo filho, entao a
   espia cabe na dobra por construcao, sem numero magico. */
.bh-hero{
  --bh-creme:#F6F1E7; --bh-tinta:#1E1A15; --bh-terracota:#9C5A43;
  --bh-navh:68px;                 /* nav sticky ocupa a dobra; medido 68px */
  --bh-gap:clamp(.5rem,2.4svh,1.6rem);
  position:relative; display:flex; flex-direction:column;
  /* altura DEFINIDA (nao so minima): e' o que faz o flex-shrink agir e a banda
     de video absorver a folga. Sem isso o hero cresce e estoura a dobra. */
  height:calc(100vh - var(--bh-navh));
  height:calc(100svh - var(--bh-navh));
  min-height:520px;
  overflow-x:clip;
  background:var(--bh-creme); color:var(--bh-tinta);
  padding:clamp(.55rem,1.8svh,1.6rem) 0 calc(clamp(.4rem,1.2svh,1rem) + env(safe-area-inset-bottom));
}
/* v6 §01: video de textura vira BANDA DE FUNDO atras de head+foot (nao atras
   do carrossel .bh-peek, que fica na base creme, cartoes claros continuam
   legiveis). .bh-hero-band e' o unico container posicionado: a midia (video)
   e' absolute dentro dele e o preenche por inteiro (banda ganha altura do
   fluxo normal de head+foot, o video so cobre essa area). */
.bh-hero-band{
  /* z-index:0 (nao so position:relative) e' o que faz a banda abrir SEU
     PROPRIO stacking context — sem isso o z-index:-1 da midia furava ate a
     raiz da pagina e o creme de fundo do .bh-hero pintava por cima do video. */
  position:relative; z-index:0; flex:1 1 auto; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(180px,32svh,360px);
  padding-block:var(--bh-gap);
  color:var(--porcelain);
}
.bh-hero-head,.bh-hero-foot{padding-inline:clamp(1.15rem,5vw,1.6rem);position:relative;z-index:1;}
.bh-eyebrow{
  margin:0; font-size:clamp(.62rem,2.7vw,.72rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--porcelain);
  /* --rose reprovava AA no frame mais claro do video (texto pequeno, precisa
     4.5:1) — porcelain fica, o acento rose sobra pro em do titulo (texto
     grande, so precisa 3:1) e pro link/CTA abaixo. */
}
.bh-hero-title{
  margin:clamp(.45rem,1.8svh,1.6rem) 0 0;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.72rem,min(11.2vw,5.6svh),3.9rem);
  line-height:.9; letter-spacing:-.045em; text-wrap:balance;
  color:var(--porcelain);
}
.bh-hero-title span,.bh-hero-title em{display:block;font-style:normal;}
.bh-hero-title em{color:var(--rose);}
/* .bh-hero-media: a banda propriamente dita — poster (LCP) + video + overlay,
   os tres absolute/inset:0 dentro dela. z-index:-1 dentro do stacking context
   de .bh-hero-band (position:relative) fica ATRAS do head/foot estaticos sem
   precisar de z-index positivo neles. */
.bh-hero-media{
  /* estica --parallax-soft alem do topo/base da banda: o scrub (GSAP, y:-24px
     em index.html) translada a midia dentro dessa folga, entao o overflow:hidden
     da .bh-hero-band recorta a sobra e nunca abre vao com o creme por baixo. */
  position:absolute; left:0; right:0;
  top:calc(-1 * var(--parallax-soft)); height:calc(100% + 2 * var(--parallax-soft));
  z-index:-1; overflow:hidden;
}
.bh-hero-poster,.bh-hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover; object-position:center;
}
.bh-hero-video{
  opacity:0; transition:opacity var(--dur-slower) var(--ease-out);
}
.bh-hero-video.is-visible{opacity:1;}
.bh-hero-overlay{
  position:absolute; inset:0;
  /* 0.76, nao 0.62: medido no PIXEL MAIS CLARO do poster real (225,214,199,
     dobra iluminada do linho), nao numa media do clipe. Em 0.62 o rose sobre
     essa dobra cai a 2.7:1 e reprova AA — 0.76 garante >=4.5:1 (texto) e
     >=3:1 (texto grande) mesmo no frame mais claro do loop. */
  background:rgba(var(--espresso-deep-rgb),0.76);
}
.bh-hero-sub{
  margin:var(--bh-gap) 0 0; max-width:31ch;
  font-size:clamp(.85rem,min(3.7vw,2.05svh),1.05rem); line-height:1.45; color:var(--linen);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bh-hero-cta{
  display:flex; align-items:center; gap:clamp(.9rem,4vw,1.25rem);
  margin-top:clamp(.5rem,1.7svh,1.3rem);
  /* nowrap por idioma (21/08): o par cabe em EN (328px) e IS (323px), mas PT
     (418px) e ES (420px) estouram os 390px e o link caia para baixo do botao.
     O texto de i18n esta fechado e o tamanho do botao e do link e aprovado,
     entao quem cede e a LARGURA do link: ele encolhe e quebra em 2 linhas ao
     lado do botao, em vez de empilhar. EN/IS nao sao afetados - cabem, logo
     nao ha encolhimento. */
  flex-wrap:nowrap;
}
.bh-hero-cta .bh-btn{flex:0 0 auto;}   /* o botao nunca encolhe */
.bh-hero-cta .bh-link{min-width:0;}    /* so o link cede largura */
.bh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 1.35rem; border:0; border-radius:var(--radius-pill);
  background:var(--rose); color:var(--ink-inverse);
  font:inherit; font-size:clamp(.88rem,3.6vw,.95rem); font-weight:600;
  cursor:pointer; transition:transform 110ms ease-out;
}
.bh-btn:active{transform:scale(.97);}          /* feedback no pointer-down */
.bh-link{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--porcelain); font-size:clamp(.8rem,3.3vw,.88rem);
  /* texto porcelain (precisa 4.5:1, --rose sozinho nao passava no frame claro
     do video); o acento rose sobrevive so no sublinhado, que nao carrega
     texto e nao entra no calculo de contraste de texto. */
  text-decoration:underline; text-decoration-color:var(--rose); text-underline-offset:3px;
}

/* ---- espia do carrossel: 1o card inteiro, 2o cortado ---- */
.bh-peek{margin-top:var(--bh-gap);}
.bh-peek-hint{
  margin:0 0 clamp(.3rem,1svh,.55rem); padding-inline:clamp(1.15rem,5vw,1.6rem);
  font-size:clamp(.62rem,2.7vw,.72rem); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave);  /* AA: 6.39:1 sobre o creme; #8a7d6d dava 3.56 e reprovava */
}
.bh-svc{
  display:flex; gap:.7rem; margin:0; padding:.2rem clamp(1.15rem,5vw,1.6rem) .4rem;
  list-style:none;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:clamp(1.15rem,5vw,1.6rem);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;             /* momentum nativo do iOS */
  scrollbar-width:none;
}
.bh-svc::-webkit-scrollbar{display:none;}
.bh-svc:focus-visible{outline:2px solid var(--bh-terracota);outline-offset:2px;}
.bh-card{
  flex:0 0 clamp(228px,71vw,282px);
  scroll-snap-align:start;
}
.bh-card-btn{
  display:flex; flex-direction:column; gap:.3rem;
  width:100%; height:100%; min-height:clamp(92px,13svh,124px);
  padding:clamp(.55rem,1.5svh,.85rem) .95rem clamp(.5rem,1.4svh,.8rem);
  border:1px solid rgba(var(--tinta-rgb),.16);
  border-radius:2px; background:transparent; color:inherit;
  font:inherit; text-align:left; text-decoration:none; cursor:pointer;
  transition:transform 110ms ease-out, background-color 110ms ease-out;
}
.bh-card-btn:active{transform:scale(.985); background:rgba(var(--tinta-rgb),.04);}
.bh-card-title{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.02em;line-height:1.15;}
.bh-card-text{font-size:clamp(.75rem,1.95svh,.82rem);line-height:1.35;color:var(--tinta-suave);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bh-card-price{margin-top:auto;padding-top:.4rem;font-size:.95rem;font-weight:600;
  color:var(--bh-terracota);font-variant-numeric:tabular-nums;}
.bh-card--all .bh-card-btn{border-style:dashed;}
.bh-card--all .bh-card-price{font-size:1.15rem;}

/* ---- 21/08: no mobile a espia vira FAIXA DE PRECOS de uma linha ----
   Medido ao vivo (Playwright, 375x667, nao por screenshot): o card de 120px
   comia a altura e sobravam 139px para a foto do hero - uma faixa horizontal
   que cortava o rosto da Nathalia no queixo. Trocando o card por
   "nome + preco" em uma linha (47px de altura, alvo de toque >=44px
   preservado no padding), a foto vai a 213px e volta a mostrar rosto e
   ombros, que e o enquadramento que ela aprovou. O corte lateral do 2o item
   continua sendo o sinal de swipe. Desktop (>=1024px) nao e afetado. */
@media (max-width:1023px){
  .bh-svc{gap:1.15rem;}
  .bh-card{flex:0 0 auto;}
  .bh-card-btn{
    flex-direction:row; align-items:center; gap:.5em;
    width:auto; height:auto; min-height:44px;
    padding:.62rem .1rem; border:0; white-space:nowrap;
  }
  .bh-card-text{display:none;}
  .bh-card-title{font-size:.82rem; font-weight:500;}
  .bh-card-price{margin-top:0; padding-top:0; font-size:.82rem;}
  .bh-card--all .bh-card-btn{border:0;}
  .bh-card--all .bh-card-price{font-size:.82rem;}
}
@media (max-height:700px){
  .bh-peek-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .bh-hero-title{letter-spacing:-.05em;}
}
@media (prefers-reduced-motion:reduce){
  .bh-svc{scroll-behavior:auto;}
  .bh-btn,.bh-card-btn{transition:none;}
  .bh-btn:active,.bh-card-btn:active{transform:none;}
  /* v6 §01: motion nunca e' porteira — sem JS ou com reduce, so o poster
     (que ja e' o LCP) fica visivel; o video nunca recebe opacidade. O JS
     tambem nunca chama load()/play() nesse ramo (ver bh-hero-video-gate).
     v6 §07 (7b): mesma trava pra .bridal-band-video — o gate generico
     (initGatedVideos, site.js) e' o mesmo, entao o reforco !important e'
     o mesmo por simetria/defesa-em-profundidade. */
  .bh-hero-video,.bridal-band-video{opacity:0 !important;}
}
@media (prefers-contrast:more){
  .bh-card-btn{border-color:var(--bh-tinta);}
  .bh-card-text,.bh-link{color:var(--bh-tinta);}
}

/* ============ 21/08 rodada 3 - LETREIRO (marquee) + folga da primeira visita ====
   Correcao de briefing: a faixa de servicos volta a PASSAR sozinha (loop continuo),
   nao fica parada esperando swipe. O movimento e' feito com scrollLeft nativo (ver
   assets/js/site.js, initHeroMarquee), entao o arraste do dedo e o momentum do iOS
   continuam funcionando e interrompem a animacao. Snap sai enquanto o letreiro
   corre: scroll-snap brigaria com o scroll programatico a cada frame.
   Sob prefers-reduced-motion o JS nem inicia: a faixa continua legivel, arrastavel
   e com snap, so nao anda sozinha.
   ================================================================================ */
.bh-svc.is-marquee{ scroll-snap-type:none; scroll-behavior:auto; }
.bh-svc.is-marquee .bh-card{ scroll-snap-align:none; }
.bh-svc.is-marquee .bh-card[data-marquee-clone]{ pointer-events:auto; }

@media (max-width:1023px){
  /* Folga devolvida ao hero para o letreiro subir acima do banner de cookies.
     Sao SO espacos mortos - nenhuma reducao vem da foto nem da tipografia:
       - a dica "arraste" vira sr-only (o movimento ja comunica o gesto, e o texto
         segue no acessivel);
       - o respiro entre CTA e letreiro cai de --bh-gap para ~10px;
       - o padding vertical do trilho encolhe.
     Com o banner ABERTO o hero reserva exatamente essa folga (--bh-reserve), entao
     a .bh-hero-figure (flex:1 1 auto) NAO perde altura: e' o que separa esta rodada
     da tentativa revertida em 21/08, que descontava o banner inteiro e esmagava a
     foto aprovada pela Nathalia. */
  /* teto de --bh-reserve = folga morta liberada + a sobra que a figura ganhou;
     calibrado ao vivo para a foto NUNCA ficar abaixo da altura de hoje. */
  .bh-hero{ --bh-reserve:clamp(15px,5svh,43px); }
  .bh-peek-hint{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; }
  .bh-peek{ margin-top:clamp(.35rem,1.2svh,.8rem); }
  .bh-svc{ padding-top:0; padding-bottom:.15rem; }
  body.cookie-banner-visible .bh-hero{
    height:calc(100vh - var(--bh-navh) - var(--bh-reserve));
    height:calc(100svh - var(--bh-navh) - var(--bh-reserve));
  }
}
/* tela baixa (375x667): a dica ja era sr-only antes desta rodada, ha menos folga
   morta para devolver - reservar o mesmo tanto comeria a foto. Depois do bloco
   acima de proposito: mesma especificidade, quem vem por ultimo vence. */
@media (max-width:1023px) and (max-height:700px){
  .bh-hero{ --bh-reserve:clamp(10px,2.1svh,20px); }
}

/* 2 — photo-menu cards: full-bleed photo button, icon + label + arrow */
.rm-menu{display:flex;flex-direction:column;gap:var(--space-sm);}
.rm-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;min-height:132px;text-decoration:none;color:var(--ink-on-dark);border:1px solid var(--line-strong);}
.rm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.rm-card .rm-card-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--vela-rgb),.92) 0%,rgba(var(--vela-rgb),.66) 45%,rgba(var(--vela-rgb),.34) 100%);z-index:1;}
.rm-card-body{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-sm);height:100%;padding:var(--space-md);min-height:132px;}
.rm-card-icon{font-size:1.5rem;line-height:1;flex:0 0 auto;}
.rm-card-text{flex:1 1 auto;}
.rm-card-label{font-family:var(--font-display);font-size:var(--text-lg);display:block;margin-bottom:2px;}
.rm-card-sub{font-size:var(--text-xs);color:var(--muted-on-dark);display:block;}
.rm-card-arrow{flex:0 0 auto;font-size:1.2rem;opacity:.85;}
.rm-card.no-photo{background:var(--vela);}
.rm-card.no-photo .rm-card-scrim{display:none;}
@media(min-width:700px){.rm-menu{display:grid;grid-template-columns:1fr 1fr;}}

/* 3 — about panel, full color (vela = ink field of the brand) */
.rm-about{background:var(--vela);color:var(--ink-on-dark);}
.rm-about-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:center;}
.rm-about-photo{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;max-width:340px;margin:0 auto;border:1px solid var(--line-inverse);}
.rm-about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:saturate(1.02) contrast(1.03);}
.rm-about-text h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 var(--space-sm);}
.rm-about-text p{color:var(--muted-on-dark);line-height:var(--leading-normal);margin:0 0 var(--space-md);}
.rm-pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--dourado);color:var(--ink-inverse);border:0;border-radius:var(--radius-pill);padding:.85rem 1.5rem;font:var(--fw-semi) var(--text-sm)/1 var(--font-sans);letter-spacing:var(--tracking-wide);cursor:pointer;min-height:44px;}
@media(min-width:800px){.rm-about-grid{grid-template-columns:1fr 1.2fr;}}

/* 4 — stats strip, real Brum numbers */
.rm-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--linen);}
.rm-stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm) var(--space-xs);text-align:center;}
.rm-stat strong{display:block;font-family:var(--font-display);font-size:clamp(1.1rem,5vw,var(--text-2xl));color:var(--telha);line-height:1.05;overflow-wrap:break-word;}
.rm-stat span{display:block;font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-caps);margin-top:.35rem;}
@media(min-width:700px){.rm-stats-row{grid-template-columns:repeat(4,1fr);}}

/* 5 — short FAQ accordion (reuses .service-accordion look from site.css, new wrapper) */
.rm-faq-list{max-width:640px;margin:0 auto;}

/* 6 — footer with signature */
.rm-footer{background:var(--vela);color:var(--ink-on-dark);text-align:center;padding:var(--space-xl) var(--gutter);}
.rm-footer img{width:96px;height:auto;margin:0 auto var(--space-sm);opacity:.9;}
.rm-footer .signature{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--dourado);margin:var(--space-sm) 0 var(--space-md);}
.rm-footer-links{display:flex;flex-direction:column;gap:.5rem;color:var(--muted-on-dark);font-size:var(--text-sm);}
.rm-footer-links a{color:var(--ink-on-dark);text-decoration:none;}

.rm-diverge{position:fixed;bottom:8px;right:8px;max-width:calc(100vw - 16px);background:#111;color:#fff;font:11px/1.4 monospace;padding:6px 10px;border-radius:4px;opacity:.55;z-index:999;}

/* ============================================================
   DESKTOP LAYER (>=1024px) — everything below is additive, scoped
   inside the media query. Mobile/tablet rules above are UNCHANGED.
   Editorial asymmetric composition per client Pinterest refs:
   2-col grid w/ overlap, blob-mask portrait, giant type watermark,
   curved dividers, botanical accent. Same linen/ink/gold/rose tokens.
   ============================================================ */
@media(min-width:1024px){

  /* botanical accent (single discreet svg, reused via mask on ::before) */
  .rm-section{position:relative;}

  /* 1 — HERO v6: video de textura full-bleed atras de head+foot (banda
     .bh-hero-band), magazine cover — nao mais split em duas colunas (a foto
     da Nathalia saiu do hero, ver motion-spec-v6.md §01). O carrossel
     .bh-peek segue fora da banda, na base creme. */
  .bh-hero{
    display:block; height:auto; min-height:auto;
    padding:0 0 clamp(2rem,4vh,3rem);
  }
  .bh-hero-band{
    min-height:clamp(460px,68vh,720px);
    padding:clamp(3rem,7vh,5.5rem) clamp(2rem,6vw,5rem);
    justify-content:flex-start;
  }
  .bh-hero-head,.bh-hero-foot{padding-inline:0;max-width:44ch;}
  .bh-hero-title{font-size:clamp(3rem,5.4vw,5rem);}
  .bh-peek{margin-top:clamp(2rem,4vh,3rem);padding-inline:clamp(2rem,6vw,5rem);}
  .bh-peek-hint,.bh-svc{padding-inline:0;}
  .bh-svc{scroll-padding-inline-start:0;}
  .bh-card{flex:0 0 clamp(260px,23vw,320px);}

  /* 2 — SERVICES: editorial grid, first card spans 2 cols/rows (feature) */
  #services .container{max-width:var(--max-wide);}
  #services .title{max-width:46ch;text-align:left;margin:0 0 var(--space-xl);}
  .rm-menu{
    display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:var(--space-md);
  }
  .rm-card:nth-child(1){grid-column:span 2;grid-row:span 2;min-height:auto;}
  .rm-card:nth-child(6){grid-column:span 2;min-height:auto;}
  .rm-card{min-height:auto;}
  .rm-card-body{padding:var(--space-lg);}
  .rm-card:nth-child(1) .rm-card-label{font-size:var(--text-2xl);}

  /* 3 — ABOUT: asymmetric, photo overshoots column, watermark word behind */
  .rm-about{position:relative;overflow:hidden;}
  .rm-about::before{
    content:"Nathalia";position:absolute;top:50%;right:0;transform:translateY(-50%);
    font-family:var(--font-display);font-style:italic;font-weight:var(--fw-light);
    font-size:clamp(6rem,14vw,11rem);color:var(--ink-on-dark);opacity:.06;
    white-space:nowrap;pointer-events:none;z-index:0;
  }
  .rm-about-grid{
    grid-template-columns:.8fr 1fr;gap:clamp(2.5rem,5vw,5rem);
    max-width:var(--max-wide);position:relative;z-index:1;
  }
  .rm-about-photo{
    max-width:none;width:100%;aspect-ratio:3/4;
    border-radius:0;
    transform:translateY(-4%);
  }
  .rm-about-text{max-width:46ch;}
  .rm-about-text h2{font-size:var(--text-3xl);}

  /* 4 — STATS: 4-up already handled by existing >=700px rule; widen + number scale */
  .rm-stats-row{max-width:var(--max-wide);margin:0 auto;gap:var(--space-lg);}
  .rm-stat strong{font-size:clamp(2.2rem,3.5vw,var(--text-3xl));}
  [data-count]{display:inline-block;}

  /* 5 — FAQ: two columns, eyebrow/title left-aligned as a header row */
  #faq .container{max-width:var(--max-wide);}
  #faq .title{text-align:left;max-width:46ch;margin:0 0 var(--space-xl);}
  .rm-faq-list{max-width:none;column-count:2;column-gap:var(--space-xl);}
  .rm-faq-list .title{column-span:all;}
  .rm-faq-list article{break-inside:avoid;margin-bottom:var(--space-sm);}

  /* 6 — CLOSING: watermark + wider layout */
  #contact{position:relative;overflow:hidden;}
  /* §8: o wordmark fantasma gigante "Beauty" SAI. Era grafismo de fundo — o
     veto da Nathalia em _design/BRAND_DATA.json cobre exatamente isso. */
  #contact::before{ content:none; }
  #contact > *{position:relative;z-index:1;}

  /* Option A hero is a full-bleed photo now (no linen base to curve into),
     so the old half-oval divider is removed — clean straight edge into
     #services instead. */
  #services{
    clip-path:none;
  }
  .rm-section:not(.rm-about):not(#contact)::after{content:none;}

  .rm-footer-links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--space-lg);}
}

/* ============================================================
   v7 MENU UNICO (2026-08-20) - substitui o photo-menu de cards.
   Uma so arvore de DOM. A divergencia desktop/mobile e SO css:
   >=1024px o reveal vira duas colunas (lista | detalhe);
   <1024px ele expande no lugar, coluna unica. Sem display:none
   em bloco duplicado, sem modal, sem biblioteca de animacao.
   ============================================================ */
.v7-tabs{display:flex;gap:var(--space-2xs);margin-bottom:var(--space-lg);flex-wrap:wrap;}
.v7-tab{min-height:44px;padding:0 var(--space-md);border:1px solid var(--line);background:transparent;
  color:var(--muted);border-radius:var(--radius-pill);cursor:pointer;
  font:var(--fw-med) var(--text-sm)/1 'DM Sans',var(--font-sans);letter-spacing:var(--tracking-wide);}
.v7-tab[aria-selected="true"]{background:var(--tinta);color:var(--creme);border-color:var(--tinta);}
.v7-tab:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.v7-cat{border-top:1px solid var(--line);}
.v7-cat:last-child{border-bottom:1px solid var(--line);}
.v7-head{width:100%;display:grid;grid-template-columns:2.75rem 1fr 1.25rem;gap:var(--space-sm);
  align-items:start;padding:var(--space-md) 0;min-height:48px;background:none;border:0;
  text-align:left;color:var(--tinta);cursor:pointer;font-family:inherit;}
.v7-head:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.v7-num{font:var(--fw-med) var(--text-xs)/1.6 'DM Sans',var(--font-sans);
  letter-spacing:var(--tracking-caps);color:var(--muted);}
.v7-name{display:block;font-family:'Bricolage Grotesque',var(--font-display);
  font-size:var(--text-xl);line-height:1.06;letter-spacing:var(--tracking-tight);}
.v7-blurb{display:block;margin-top:var(--space-3xs);color:var(--muted);
  font-size:var(--text-sm);max-width:52ch;}
.v7-meta{display:block;margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--muted);}
.v7-range{color:var(--telha);font-weight:var(--fw-med);}
.v7-sign{justify-self:end;align-self:center;width:1.25rem;height:1.25rem;position:relative;}
.v7-sign::before,.v7-sign::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;
  background:var(--tinta);}
.v7-sign::after{transform:rotate(90deg);}
.v7-head[aria-expanded="true"] .v7-sign::after{transform:rotate(0deg);}

.v7-reveal[hidden]{display:none;}
.v7-reveal{display:grid;gap:var(--space-lg);padding-bottom:var(--space-xl);}
.v7-photo{display:none;}
.v7-list{list-style:none;margin:0;padding:0;}
.v7-svc{border-top:1px solid var(--line);}
.v7-svc:first-child{border-top:0;}
.v7-svc-btn{width:100%;min-height:48px;display:grid;grid-template-columns:1fr auto;
  gap:var(--space-sm);align-items:baseline;padding:var(--space-xs) 0;background:none;border:0;
  text-align:left;color:var(--tinta);cursor:pointer;font-family:inherit;}
.v7-svc-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.v7-svc-n{font-size:var(--text-base);line-height:1.25;}
.v7-svc-d{display:block;margin-top:2px;color:var(--muted);font-size:var(--text-xs);}
.v7-svc-p{font-size:var(--text-base);color:var(--telha);white-space:nowrap;}
.v7-svc-long{margin:0;padding:0 0 var(--space-sm);color:var(--muted);
  font-size:var(--text-sm);max-width:62ch;}
.v7-svc-long[hidden]{display:none;}

.v7-detail-title{font:var(--fw-med) var(--text-xs)/1 'DM Sans',var(--font-sans);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);
  margin:0 0 var(--space-sm);}
.v7-pk{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs);}
.v7-pk-item{display:grid;grid-template-columns:1fr auto;gap:var(--space-sm);align-items:baseline;
  padding:var(--space-xs) var(--space-sm);background:var(--linen);border-radius:var(--radius);}
.v7-pk-t{font-size:var(--text-sm);line-height:1.3;}
.v7-pk-s{display:block;margin-top:2px;color:var(--muted);font-size:var(--text-xs);}
.v7-pk-tag{display:inline-block;margin-left:var(--space-2xs);padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--parchment);color:var(--muted);font-size:var(--text-xs);}
.v7-pk-v{font-size:var(--text-sm);color:var(--telha);white-space:nowrap;}
.v7-empty{margin:0;color:var(--muted);font-size:var(--text-sm);}

@media (min-width:1024px){
  /* desktop: painel lado a lado. Lista a esquerda, detalhe a direita. */
  .v7-reveal{grid-template-columns:1.15fr 0.85fr;gap:var(--space-xl);align-items:start;}
  .v7-detail{position:sticky;top:var(--space-lg);}
  .v7-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border-radius:var(--radius-lg);margin-bottom:var(--space-sm);}
  .v7-long-cat{margin:0 0 var(--space-md);color:var(--muted);font-size:var(--text-sm);}
  /* CONSERTO do buraco da coluna esquerda: categoria com <=2 servicos
     (categoria de 1 servico so) nao usa duas colunas.
     O detalhe ocupa a largura e vira faixa horizontal. */
  .v7-reveal.is-wide{grid-template-columns:1fr;gap:var(--space-md);}
  .v7-reveal.is-wide .v7-detail{position:static;display:grid;
    grid-template-columns:minmax(0,26rem) 1fr;gap:var(--space-lg);align-items:start;}
  .v7-reveal.is-wide .v7-photo{aspect-ratio:16/10;margin-bottom:0;}
  .v7-reveal.is-wide .v7-long-cat{margin-bottom:var(--space-sm);}
}

@media (prefers-reduced-motion: no-preference){
  .v7-reveal:not([hidden]){animation:v7in 200ms cubic-bezier(0.16,1,0.3,1);}
  .v7-sign::before,.v7-sign::after{transition:transform 200ms cubic-bezier(0.16,1,0.3,1);}
  @keyframes v7in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}

/* V7 PORT - cabecalho de secao (eyebrow + display title + subtitulo). */
.v7-sec-head{max-width:34ch;margin:0 auto var(--space-lg);text-align:center;}
.v7-sec-title{font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(1.9rem,6vw,2.9rem);line-height:1.06;letter-spacing:var(--tracking-tight);
  color:var(--ink);margin:0 0 var(--space-xs);}
.v7-sec-sub{font-size:var(--text-sm);color:var(--muted);line-height:var(--leading-relaxed);margin:0;}
.is-dark .v7-sec-title{color:var(--ink-on-dark);}
.is-dark .v7-sec-sub{color:var(--muted-on-dark);}

    /* ============================================================
       SERVICOS V8 - indice tipografico
       spec: _design/SERVICOS-V8-DIRECAO.md
       Substitui o par abas+acordeao. Assinatura: contraste de LARGURA
       (wdth 100 caixa-alta na categoria x wdth 85 no nome do servico).
       ============================================================ */

    .svc { margin-top: var(--space-xl); position: relative; }

    /* --- rail de categorias: filtro por aba (v6 §02 2b) ---
       mobile: scroll horizontal + snap + mascara de fade (affordance).
       .svc-rail.is-scroll-end e a classe que a fatia 2c aplica quando
       scrollLeft + clientWidth >= scrollWidth, pra remover a mascara. */
    .svc-rail {
      position: sticky; top: var(--header-h); z-index: 4;
      display: flex; gap: 8px; align-items: center;
      min-height: 44px;
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
      -webkit-overflow-scrolling: touch;
      background: var(--porcelain);
      border-bottom: 1px solid rgba(var(--latao-rgb), 0.28);
      scrollbar-width: none;
      mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    .svc-rail::-webkit-scrollbar { display: none; }
    .svc-rail.is-scroll-end { mask-image: none; -webkit-mask-image: none; }

    .svc-chip {
      flex: 0 0 auto; scroll-snap-align: start;
      display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
      padding-inline: var(--space-xs);
      font-family: var(--font-display);
      font-variation-settings: "opsz" 24, "wght" 600, "wdth" 100;
      font-size: 13px; line-height: 1; text-transform: uppercase;
      letter-spacing: var(--tracking-caps);
      color: var(--muted); background: transparent;
      border: 1px solid transparent; border-radius: var(--radius-pill);
      text-decoration: none; white-space: nowrap; cursor: pointer;
      transition: background var(--dur-quick) var(--ease-standard),
                  color var(--dur-quick) var(--ease-standard),
                  border-color var(--dur-quick) var(--ease-standard);
    }
    .svc-chip:hover { background: rgba(var(--rose-rgb), 0.10); }
    /* Rodada 2 do code-review (11/09): rose-mist/ink-inverse aqui tambem
       eram os dois claros (ver comentario em .bridal-band-cta .book-btn) —
       trocado para --ink. */
    .svc-chip[aria-selected="true"] {
      background: var(--rose-mist); color: var(--ink); border-color: var(--rose-deep);
    }
    .svc-chip:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

    .svc-chip-count {
      font-family: var(--font-sans); font-weight: 400; font-size: 11px;
      letter-spacing: 0; text-transform: none; color: var(--muted);
    }
    .svc-chip-count:empty { display: none; }
    .svc-chip[aria-selected="true"] .svc-chip-count { color: var(--ink); opacity: 0.75; }

    /* --- layout --- */
    .svc-layout { display: block; }
    .svc-group { scroll-margin-top: calc(var(--header-h) + 92px); }

    /* --- faixa de imagem da categoria (topo de cada .svc-group) ---
       overflow:hidden e obrigatorio: e o container do parallax translateY
       de 16px que a fatia 2c (motion) vai animar dentro dela. */
    .svc-cat-media {
      height: clamp(120px, 22vw, 200px);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin: var(--space-md) 0 var(--space-sm);
    }
    .svc-cat-media img {
      display: block; width: 100%; height: 100%; object-fit: cover;
    }

    /* --- cabecalho de categoria (sticky, logo abaixo do rail) --- */
    .svc-cat-head {
      position: sticky; top: calc(var(--header-h) + 48px); z-index: 3;
      display: flex; align-items: center; min-height: 44px;
      margin: var(--space-lg) calc(var(--gutter) * -1) 0;
      padding-inline: var(--gutter);
      font-family: var(--font-display);
      font-variation-settings: "opsz" 24, "wght" 600, "wdth" 100;
      font-size: 13px; line-height: 1; text-transform: uppercase;
      letter-spacing: var(--tracking-caps);
      color: var(--gold-ink);
      background: var(--porcelain);
      border-bottom: 1px solid var(--line-strong);
    }

    .svc-group .service-editorial { margin-block: var(--space-md); }

    /* --- lista de registros --- */
    .svc-rows { list-style: none; margin: 0; padding: 0; }
    .svc-item { margin-inline: calc(var(--gutter) * -1); }
    .svc-item + .svc-item { border-top: 1px solid var(--line); }

    .svc-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "name price";
      align-items: center; gap: 12px;
      width: 100%; min-height: 56px;
      padding: 14px var(--gutter);
      background: none; border: 0; text-align: left; cursor: pointer;
      color: inherit; font: inherit;
      transition: background var(--dur-quick) var(--ease-out);
    }
    .svc-name {
      grid-area: name; min-width: 0;
      font-family: var(--font-display);
      font-variation-settings: "opsz" 32, "wght" 500, "wdth" 85;
      font-size: 19px; line-height: 1.15; letter-spacing: -0.005em;
      color: var(--ink); overflow-wrap: anywhere;
    }
    .svc-benefit { display: none; }
    .svc-leader { display: none; }
    .svc-price {
      grid-area: price; white-space: nowrap;
      font-family: var(--font-sans); font-weight: 500; font-size: 16px;
      font-variant-numeric: tabular-nums; color: var(--ink);
    }

    .svc-row:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
    .svc-row:active { background: rgba(var(--espresso-rgb), 0.06); }

    /* islandes: nome quebrado alinha o preco ao topo e mata o leader */
    .svc-item.is-wrapped .svc-row { align-items: start; }
    .svc-item.is-wrapped .svc-leader { display: none; }

    /* --- host do detalhe: bottom sheet no mobile --- */
    .svc-detail-host[hidden] { display: none; }
    .svc-detail-host {
      position: fixed; inset: 0; z-index: 80;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .svc-detail-scrim {
      position: absolute; inset: 0;
      background: rgba(var(--espresso-rgb), 0.38);
      opacity: 0; transition: opacity 320ms var(--ease-out);
    }
    .svc-detail-host.is-open .svc-detail-scrim { opacity: 1; }
    .svc-detail-panel {
      position: relative; width: 100%; max-height: 88dvh;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: var(--space-sm) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
      background: var(--porcelain);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      box-shadow: var(--shadow-lg);
      transform: translateY(100%);
      transition: transform 320ms var(--ease-out);
    }
    .svc-detail-host.is-open .svc-detail-panel { transform: translateY(0); }
    .svc-detail-handle {
      display: block; width: 36px; height: 4px; margin: 0 auto var(--space-sm);
      border-radius: var(--radius-pill); background: var(--line-strong);
    }
    .svc-detail-close {
      position: absolute; top: var(--space-2xs); right: var(--space-2xs);
      width: 44px; height: 44px; display: grid; place-items: center;
      background: none; border: 0; cursor: pointer; color: var(--muted);
      border-radius: var(--radius-pill);
    }
    .svc-detail-close::before,
    .svc-detail-close::after {
      content: ""; grid-area: 1 / 1;
      width: 16px; height: 1.5px; background: currentColor;
    }
    .svc-detail-close::before { transform: rotate(45deg); }
    .svc-detail-close::after  { transform: rotate(-45deg); }
    .svc-detail-close:hover { color: var(--ink); }
    .svc-detail-close:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

    .svc-detail-title {
      margin: 0 44px var(--space-3xs) 0;
      font-family: var(--font-display);
      font-variation-settings: "opsz" 32, "wght" 600, "wdth" 85;
      font-size: 26px; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink);
    }
    .svc-detail-price {
      margin: 0 0 var(--space-sm);
      font-family: var(--font-sans); font-weight: 500; font-size: 17px;
      font-variant-numeric: tabular-nums; color: var(--gold-ink);
    }
    .svc-detail-price:empty { display: none; }
    .svc-detail-slot p { font-size: 16px; line-height: var(--leading-relaxed); max-width: 62ch; }

    /* ---------- >=768: detalhe vira modal centrado ---------- */
    @media (min-width: 768px) {
      .svc-detail-host { align-items: center; padding: var(--space-lg); }
      .svc-detail-panel {
        max-width: 640px; max-height: 82dvh;
        border-radius: var(--radius-lg);
        transform: translateY(12px); opacity: 0;
        transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
      }
      .svc-detail-host.is-open .svc-detail-panel { transform: none; opacity: 1; }
      .svc-detail-handle { display: none; }
    }

    /* ---------- >=1024: mestre-detalhe, painel nunca cobre a lista ---------- */
    @media (min-width: 1024px) {
      .svc-layout {
        /* 2f: era "3fr 5fr 4fr" (toc 3 | lista 5 | detalhe 4) sobre
           max-width:1200px, o que dava 288/480/384px exatos. O toc saiu
           (commit 8f74d1d) e sobraram 2 filhos; fixar os px que a lista
           e o detalhe ja tinham (480/384) em vez de redistribuir por fr
           (5fr 4fr sobre o mesmo max-width mudaria os dois tamanhos).
           max-width cai para 480+384+24(gap) = 888px, mantendo o bloco
           centralizado (margin-inline:auto) como antes. */
        display: grid;
        grid-template-columns: 480px 384px;
        gap: 24px; align-items: start;
        max-width: 888px; margin-inline: auto;
      }
      /* rail fica visivel (spec v6): linha unica, sem scroll, sticky no
         topo do bloco (top:0 dentro de #services, que e position:relative). */
      .svc-rail {
        position: sticky; top: 0;
        overflow-x: visible; flex-wrap: wrap;
        scroll-snap-type: none;
        mask-image: none; -webkit-mask-image: none;
      }

      .svc-group { scroll-margin-top: calc(var(--header-h) + 32px); }
      .svc-cat-head { top: calc(var(--header-h) + 24px); margin-inline: 0; padding-inline: 0; }

      .svc-item { margin-inline: 0; }
      .svc-row {
        grid-template-columns: minmax(0, 1fr) 1fr auto;
        grid-template-areas: "name benefit price";
        padding-inline: 0;
      }
      .svc-name { font-size: 21px; transition: font-variation-settings var(--dur-quick) var(--ease-out); }
      .svc-price { font-size: 17px; }
      .svc-benefit {
        grid-area: benefit; min-width: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
        font-family: var(--font-sans); font-weight: 400; font-size: 14px;
        line-height: 1.35; color: var(--muted);
      }
      .svc-item.is-wrapped .svc-benefit { display: none; }

      .svc-row:hover { background: rgba(var(--vela-rgb), 0.055); }
      .svc-row:hover .svc-name { font-variation-settings: "opsz" 32, "wght" 600, "wdth" 85; }
      .svc-item.is-selected { background: var(--linen); box-shadow: inset 3px 0 0 var(--gold-ink); }

      .svc-detail-host, .svc-detail-host[hidden] {
        display: block; position: sticky; inset: auto;
        top: calc(var(--header-h) + 24px);
        max-height: calc(100dvh - var(--header-h) - 48px);
        overflow: auto; z-index: 1;
      }
      .svc-detail-scrim { display: none; }
      .svc-detail-panel {
        width: auto; max-width: none; max-height: none;
        opacity: 1; transform: none;
        padding: var(--space-md);
        background: var(--porcelain);
        border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
        box-shadow: none;
        transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
      }
      .svc-detail-host.is-swapping .svc-detail-panel { opacity: 0; transform: translateY(8px); }
      .svc-detail-close { display: none; }
      .svc-detail-title { margin-right: 0; }
    }

    /* ---------- reduced motion: nenhum transform animado ---------- */
    @media (prefers-reduced-motion: reduce) {
      .svc-detail-panel,
      .svc-detail-host.is-open .svc-detail-panel,
      .svc-detail-host.is-swapping .svc-detail-panel {
        transform: none !important;
        transition: opacity 120ms linear !important;
      }
      .svc-detail-scrim { transition: opacity 120ms linear !important; }
      .svc-name { transition: none !important; }
    }