/* ========================================================================
   BRUM ESTHETICS - v7, direcao visual 01 "PROTOCOLO"
   Camada das 5 paginas novas (drainage - skin - waxing - prices - bridal).
   Carregada DEPOIS de site.css e escopada em body.v7: a home (v6) nao muda.

   Fonte da direcao: .scratch/redesign-v7/mural/index.html (direcao 01) e
   referencias.md (Sofie Pavitt Face + Joanna Czech). Regra da direcao:
   papel claro dominante, texto quase preto, informacao tecnica (tempo,
   preco, o que inclui) em MONO como ficha de tratamento, acento rose SO
   no botao, latao so como fio. Zero grafismo de fundo (veto da Nathalia).

   Contraste medido (07/09/2026, formula WCAG 2.x):
     #1C1A17 sobre #F7F5F2 = 15.96:1     #1C1A17 sobre #E4DCD0 = 12.77:1
     #3A342C sobre #F7F5F2 = 11.30:1     #3A342C sobre #E4DCD0 =  9.05:1
     #6A5C45 sobre #F7F5F2 =  5.98:1     #6A5C45 sobre #E4DCD0 =  4.78:1
     #FFFFFF sobre #8E4E58 =  6.21:1     #F7F5F2 sobre #1C1A17 = 15.96:1
   O mural especifica #6F6049 na legenda; medido, ele da 4.48:1 sobre a
   superficie 2 (#E4DCD0) e REPROVA AA. Escurecido para #6A5C45, que passa
   nos dois campos. Unica alteracao de valor em relacao ao mural, e a razao
   e contraste medido, nao gosto.
   #C09838 (latao) da 2.48:1 sobre papel: fio e moldura, NUNCA texto.
======================================================================== */

/* ---- FONTES DA DIRECAO 01 (self-hosted, sem Google Fonts no runtime:
   mesma politica do ticket #5). Inter Tight display, Instrument Sans corpo,
   JetBrains Mono etiqueta. Variaveis, 1 arquivo por corte. ---- */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/inter-tight-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: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/inter-tight-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: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/instrument-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: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/instrument-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-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; }

/* ========================================================================
   1. TOKENS - os nomes da v6 ficam, os VALORES viram os da direcao 01.
   Sobrescrever aqui e o que faz TODO componente migrado (svc-*, combo-*,
   rhythm-*, skin-*, bridal-*, nav, footer, modal) chegar na direcao nova
   sem reescrever cada regra do site.css. O que a direcao 01 muda de FORMA
   (mono na informacao tecnica, fio de latao, hero de pagina) esta da
   secao 2 em diante, como componente de verdade.
======================================================================== */
body.v7 {
  /* campo */
  --creme:        #F7F5F2;   /* papel dominante */
  --porcelain:    #F7F5F2;
  --linen:        #E4DCD0;   /* superficie 2 */
  --parchment:    #E4DCD0;
  --sand-solid:   #E4DCD0;
  --rose-mist:    #E4DCD0;   /* v6 usava rosa claro como superficie; direcao 01 nao tem */

  /* tinta */
  --tinta:        #1C1A17;
  --ink-rgb:      28,26,23;
  --ink:          rgb(var(--ink-rgb));
  --espresso-rgb: 28,26,23;
  --espresso:     rgb(var(--espresso-rgb));
  --espresso-deep-rgb: 20,18,16;
  --espresso-deep: rgb(var(--espresso-deep-rgb));
  --muted:        #3A342C;   /* corpo de apoio, 11.3:1 sobre papel */
  --clay:         #6A5C45;   /* legenda e mono, 5.98 / 4.78 */
  --ink-inverse:  #1C1A17;

  /* faixa escura (footer, banda da bridal) */
  --vela-rgb:     28,26,23;
  --vela:         rgb(var(--vela-rgb));
  --vela-deep:    #141210;
  --vela-soft:    #2A2622;
  --vela-lift:    #3A342E;
  --ink-on-dark-rgb: 247,245,242;
  --ink-on-dark:  rgb(var(--ink-on-dark-rgb));
  --muted-on-dark:#D6CEC2;

  /* acento: SO no botao */
  --rose-deep:    #8E4E58;
  --rose-rgb:     225,178,183;
  --rose:         rgb(var(--rose-rgb));
  --telha:        #1C1A17;   /* v6 pintava preco de terracota; aqui preco e tinta + mono */
  --rose-clay:    #B9B2AA;
  --gold-ink:     #6A5C45;

  /* metal: fio, nunca texto */
  --latao-rgb:    192,152,56;
  --latao:        rgb(var(--latao-rgb));
  --gold-thread:  rgba(var(--latao-rgb), 0.45);
  --gold-glow:    rgba(var(--latao-rgb), 0.10);

  /* fios */
  --line:         rgba(var(--ink-rgb), 0.10);
  --line-strong:  rgba(var(--ink-rgb), 0.18);
  --line-inverse: rgba(var(--ink-on-dark-rgb), 0.14);

  --focus-ring:      0 0 0 2px #F7F5F2, 0 0 0 4px #8E4E58;
  --focus-ring-dark: 0 0 0 2px #1C1A17, 0 0 0 4px #C09838;

  /* tipografia da direcao 01 */
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-quote:   var(--font-display);
  --fw-light: 400; --fw-reg: 400; --fw-med: 500; --fw-semi: 600;

  /* raio: um sistema so. Direcao 01 e ficha tecnica, quase reta. */
  --radius-xs: 2px; --radius-sm: 2px; --radius: 3px;
  --radius-lg: 4px; --radius-btn: 3px; --radius-pill: 999px;

  /* sombra: a direcao separa por fio, nao por elevacao */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.04);
  --shadow-md: 0 2px 10px rgba(var(--ink-rgb), 0.05);
  --shadow-lg: 0 12px 34px rgba(var(--ink-rgb), 0.09);

  background: var(--creme);
  color: var(--tinta);
  font-family: var(--font-sans);
}

/* Inter Tight e mais estreita e mais fechada que a Bricolage: os titulos
   precisam de tracking negativo e peso 600 pra ler como display, nao UI. */
body.v7 h1, body.v7 h2, body.v7 h3, body.v7 h4,
body.v7 .title h2, body.v7 .v7-sec-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  font-stretch: normal;
}
body.v7 p, body.v7 li, body.v7 button, body.v7 input, body.v7 select,
body.v7 .svc-benefit, body.v7 .service-benefit {
  font-family: var(--font-sans);
}

/* ========================================================================
   2. MONO - a informacao tecnica E o visual. Este bloco e a direcao 01;
   sem ele a pagina seria so um re-tema de cor.
======================================================================== */
body.v7 .eyebrow,
body.v7 .rm-eyebrow,
body.v7 .spot-kicker,
body.v7 .combo-label,
body.v7 .pkg-label,
body.v7 .svc-cat-head,
body.v7 .footer-studio-eyebrow,
body.v7 .p7-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
/* o contador "01/02" que o .eyebrow da v6 desenhava com ::before some:
   a direcao 01 nao numera secao como enfeite. */
body.v7 .eyebrow::before,
body.v7 .eyebrow::after { content: none !important; }

body.v7 .svc-price,
body.v7 .spot-price,
body.v7 .combo-price,
body.v7 .combo-value,
body.v7 .combo-save,
body.v7 .pkg-price,
body.v7 .skin-offer-price,
body.v7 .booking-service-price,
body.v7 .booking-service-duration,
body.v7 .svc-chip-count,
body.v7 .svc-detail-price,
body.v7 .rhythm-node span,
body.v7 .rhythm-node small {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
body.v7 .svc-price,
body.v7 .spot-price,
body.v7 .combo-price,
body.v7 .skin-offer-price { color: var(--tinta); font-weight: 500; }
body.v7 .combo-value,
body.v7 .combo-save,
body.v7 .booking-service-duration,
body.v7 .svc-chip-count { color: var(--clay); }

/* ========================================================================
   4. AJUSTES DE COMPONENTE MIGRADO
======================================================================== */
/* Nav: papel, fio fino, Book em rose. Um acento na pagina inteira. */
body.v7 .nav { background: rgba(247, 245, 242, 0.94); border-bottom: 1px solid var(--line); }
body.v7 .nav-link { color: var(--tinta); font-family: var(--font-sans); letter-spacing: 0; }
body.v7 .nav-link[aria-current="page"] { color: var(--rose-deep); }
body.v7 .nav-cta { background: var(--rose-deep); color: var(--linho); border-color: var(--rose-deep); border-radius: var(--radius-btn); }
body.v7 .nav-cta:hover { background: var(--iris-escuro); border-color: var(--iris-escuro); color: var(--linho); }

/* Botao primario: um acento, sem gradiente, sem glow. */
body.v7 .btn-primary,
body.v7 .contact-chip.is-primary,
body.v7 .spot-cta {
  background: var(--rose-deep); color: var(--linho); border: 1px solid var(--rose-deep);
  border-radius: var(--radius-btn); font-family: var(--font-sans); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
body.v7 .btn-primary:hover,
body.v7 .contact-chip.is-primary:hover,
body.v7 .spot-cta:hover { background: var(--iris-escuro); border-color: var(--iris-escuro); color: var(--linho); }
body.v7 .discreet-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rose-deep); border-radius: var(--radius-btn);
}

/* Fio de latao no lugar de espaco vazio entre secoes: e o "ritmo quase de
   tabela" que a direcao 01 descreve. Uma vez por junta, nunca decorativo. */
body.v7 main > .section + .section { border-top: 1px solid var(--line); position: relative; }
body.v7 main > .section + .section::before {
  content: ""; position: absolute; top: -1px; left: var(--gutter);
  width: 56px; height: 1px; background: var(--gold-thread);
}

/* alvo de toque >=44px em tudo que se clica na ficha (mobile-first) */
body.v7 .svc-row,
body.v7 .skin-offer-row,
body.v7 .rhythm-node,
body.v7 .svc-chip { min-height: 44px; }

/* superficie 2 fica cheia, sem sombra: separa por campo, nao por elevacao */
body.v7 .combo-card,
body.v7 .bridal-card,
body.v7 .svc-detail-panel { box-shadow: none; border: 1px solid var(--line); }

/* ------------------------------------------------------------------------
   4b. CONTRASTE - correcoes medidas no DOM em 07/09/2026 (audit.js), nao
   por olho no screenshot. Cada uma nasceu de um par que REPROVOU AA.
------------------------------------------------------------------------ */

/* .discreet-btn vinha rose-deep sobre rose claro (#E1B2B7): 3.33:1 em 11px.
   Vira botao de contorno sobre papel: 5.71:1. Continua sendo o unico lugar
   com acento, entao a direcao ("acento so no CTA") segue de pe. */
body.v7 .discreet-btn {
  background: var(--creme);
  border: 1px solid var(--rose-deep);
  color: var(--rose-deep);
  min-height: 44px;
  padding-inline: 1.1rem;
}
body.v7 .discreet-btn:hover,
body.v7 .discreet-btn:focus-visible { background: var(--rose-deep); color: var(--linho); }

/* Etiqueta mono sobre pilula escura: clay dava 2.67:1. Papel sobre
   #1C1A17 = 15.96:1. */
body.v7 .combo-label,
body.v7 .pkg-label { color: var(--creme); }
/* Etiqueta mono sobre o rodape escuro: clay dava 2.87:1.
   #D6CEC2 sobre #141210 = 11.9:1. */
body.v7 .footer-studio-eyebrow { color: var(--muted-on-dark); }

/* Cartao do spotlight: a superficie e foto com scrim escuro, entao o preco
   nao pode herdar a tinta do campo claro (dava 1.08:1 em 35px). */
body.v7 .spot-inner,
body.v7 .spot-title,
body.v7 .spot-text,
body.v7 .spot-price { color: var(--ink-on-dark); }
body.v7 .spot-kicker { color: var(--muted-on-dark); }

/* Etiqueta mono sobre banda de video/foto: a regra .eyebrow da secao 2 pinta
   tudo de clay, e sobre a banda das noivas isso sumia (visto no render, e o
   auditor de DOM nao pega: o fundo real e o scrim, nao uma cor herdada).
   Aqui o mono volta a ser claro, como o resto do texto da banda. */
body.v7 .bridal-band-eyebrow,
body.v7 .is-dark .eyebrow,
body.v7 .service-editorial .eyebrow { color: var(--muted-on-dark); }

/* Corpo de texto no mobile: os cartoes migrados desciam a 12,1-13,2px.
   Piso de 15px - a regra mobile-first da casa. */
@media (max-width: 767.98px) {
  body.v7 .section .title p,
  body.v7 .combo-card p,
  body.v7 #bridal .bridal-step p,
  body.v7 #bridal .bridal-card p,
  body.v7 #bridal .bridal-tier p,
  body.v7 #bridal .bridal-note,
  body.v7 .rhythm-detail p,
  body.v7 .svc-detail p { font-size: 15px; line-height: 1.55; }
}

/* ------------------------------------------------------------------------
   4c. NAVEGACAO NO MOBILE - defeito real medido: abaixo de 1024px o
   site.css esconde .nav-link-page (regra de 1024), e num site de 5 paginas
   isso deixava o celular SEM nenhuma forma de chegar as outras quatro
   (audit.js: "nav visiveis: []" nas cinco paginas em 390px).
   Solucao sem JS e sem hamburguer: os 5 links viram uma trilha rolavel
   embaixo da barra. Mesma gramatica do .svc-rail que a pagina ja usa.
------------------------------------------------------------------------ */
body.v7 .nav { flex-wrap: wrap; row-gap: 0; }
body.v7 .nav-actions { display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none; }
body.v7 .nav-cta { min-height: 44px; }
body.v7 .language-select { min-height: 44px; }

@media (max-width: 1023.98px) {
  body.v7 .nav-links {
    order: 3; width: 100%;
    display: flex; gap: 0.25rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 0.4rem;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.v7 .nav-links::-webkit-scrollbar { display: none; }
  body.v7 .nav-link-page {
    display: inline-flex; align-items: center; flex: none;
    min-height: 44px; padding: 0 0.7rem;
    font-size: 0.875rem; white-space: nowrap;
  }
  body.v7 .nav-link[aria-current="page"] { color: var(--rose-deep); }
  /* o sublinhado de latao do hover nao cabe numa trilha rolavel */
  body.v7 .nav-link::after { display: none; }
}

/* ========================================================================
   5. REDUCED MOTION - nao negociavel. O estado final ja e o do CSS;
   aqui so se garante que nada da camada v7 anima.
======================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.v7 *, body.v7 *::before, body.v7 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
   6. COMPONENTES DA HOME v7 (index.html)
   A home passou de 18 secoes / 19.354px para 6 secoes. Estes quatro
   componentes sao os que nasceram nessa reestruturacao: o atalho das tres
   categorias, o gift card, a faixa de depoimentos e a faixa de fotos.
   Todos usam SO tokens ja declarados na secao 1 - nenhum valor de cor,
   fonte ou raio novo e decidido aqui (isso e raia do afrodite-design).
======================================================================== */

/* ---- 2/6: as tres categorias como atalho ----
   Ficha, nao cartao de marketing: nome, uma linha do que e, e o menor preco
   da pagina de destino em mono. Superficie 2 (--linen) no campo da secao,
   papel em cada porta - a mesma gramatica do mock da direcao 01. */
body.v7 .home-cats { background: var(--linen); }
body.v7 .home-cats-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
@media (min-width: 768px) { body.v7 .home-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.v7 .home-cat {
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 44px; padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  background: var(--creme); text-decoration: none; color: var(--tinta);
  transition: background 160ms ease;
}
body.v7 .home-cat:hover, body.v7 .home-cat:focus-visible { background: var(--linho); }
body.v7 .home-cat-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.1; }
body.v7 .home-cat-text { font-size: 15px; line-height: 1.5; color: var(--muted); }
body.v7 .home-cat-meta {
  margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
}
body.v7 .home-cats-more { margin: 1.25rem 0 0; }
body.v7 .home-cats-more a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--rose-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--rose-deep);
}

/* ---- 4/6: gift card ----
   Irma de #combos, nao faixa promocional: papel, fio, dado em mono, rose so
   no botao. Zero grafismo de fundo (veto da Nathalia). */
body.v7 .gift-card {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--line-strong); background: var(--creme);
}
@media (min-width: 900px) { body.v7 .gift-card { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); align-items: start; } }
body.v7 .gift-card h2 { margin: 0.5rem 0 0; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.06; color: var(--tinta); }
body.v7 .gift-text { margin: 0.85rem 0 0; font-size: 15px; line-height: 1.58; color: var(--muted); max-width: 48ch; }
body.v7 .gift-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); }
body.v7 .gift-actions .btn-primary { min-height: 48px; padding-inline: 1.5rem; }
body.v7 .gift-alt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid var(--gold-thread);
}
body.v7 .gift-alt:hover, body.v7 .gift-alt:focus-visible { color: var(--tinta); }
body.v7 .gift-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
body.v7 .gift-step {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; gap: 0.75rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: var(--muted);
}
body.v7 .gift-step-n {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--clay);
}

/* ---- 5/6: depoimentos e faixa de fotos dentro da secao da Nathalia ---- */
body.v7 .home-voices { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
body.v7 .home-voices .combo-label { color: var(--clay); margin: 0 0 0.9rem; }
body.v7 .home-voices .testimonial-card { box-shadow: none; border: 1px solid var(--line); background: var(--creme); }

body.v7 .home-strip {
  margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
}
body.v7 .home-strip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 3 / 4; border: 1px solid var(--line);
}
@media (min-width: 768px) { body.v7 .home-strip img { aspect-ratio: 4 / 3; } }

/* ========================================================================
   7. D2 - a coluna do detalhe ao lado da lista longa (skin / waxing)
   Medido no DOM em 08/09/2026, rolando de verdade (nao por screenshot
   fullPage, onde todo sticky renderiza na posicao inicial e FINGE um vazio
   que nao existe): o painel ACOMPANHA - fica cravado em top = header+24 do
   comeco ao fim da lista. Isso ja foi conferido antes de mexer em nada.
   O vazio real e menor e tem outra causa: a faixa era 480+384px FIXOS
   centrados num max-width de 888px, entao a lista ficava estreita e alta
   (1.331px em skin, 1.486px em waxing) ao lado de um painel de 585/433px -
   sobravam 215px (skin) e 367px (waxing) de coluna vazia na tela.
   Conserto no layout, sem conteudo novo enfiado no buraco: a faixa passa a
   ocupar a largura do container. A lista mais larga fica mais baixa, que e
   o que encurta o vazio na origem, e o painel ganha a mesma folga.
   O sticky FICA no .svc-detail-host: mover para o .svc-detail-panel foi
   tentado e reprovou - o host herda display:flex do estado de overlay, o
   painel esticava para a altura toda (1.245px) e o sticky morria.
======================================================================== */
@media (min-width: 1024px) {
  body.v7 .svc-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
    max-width: none;
    align-items: stretch;
  }
  /* a calha ocupa a faixa inteira: display:block e obrigatorio - o host herda
     display:flex do estado de overlay do mobile e, esticado, o painel virava
     filho flex de 1.245px e o sticky morria (medido). */
  body.v7 .svc-detail-host,
  body.v7 .svc-detail-host[hidden] {
    display: block; position: static; inset: auto;
    max-height: none; overflow: visible;
    border-left: 1px solid var(--line);
    padding: 0 0 0 24px;
  }
  /* o cartao e que acompanha, dentro da calha */
  body.v7 .svc-detail-panel {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    /* min-height para o cartao encher a fatia visivel da calha foi TENTADO e
       reprovado no render: o vazio de 308-431px virava uma caixa com fio e
       vazio dentro, que le pior que a calha limpa. Fica o tamanho do
       conteudo; quem da altura de coluna a faixa e a calha, nao o cartao. */
    max-height: calc(100dvh - var(--header-h) - 48px);
    overflow: auto;
  }
}


/* ============================================================================
   CAMADA "SALA" - redesenho 10/09/2026
   Spec: _design/direcao-redesign-2026-09.md (§3 sistema, §4 home, §7 cookies).

   Vem por ULTIMO de proposito: mesma especificidade que body.v7, quem vem
   depois vence. Re-tema por token - nenhuma classe da v7 foi renomeada.
============================================================================ */

/* ---- A) TOKENS: body.v7 volta ao :root da Sala ---------------------------- */
body.v7 {
  --tinta:        rgb(var(--tinta-rgb));   /* fecha o vazamento: v7.css:64 fixava #1C1A17 */
  --creme:        var(--sala);
  --porcelain:    var(--linho);
  --linen:        var(--sala);
  --parchment:    var(--sala-fundo);
  --sand-solid:   var(--sala-fundo);
  --rose-mist:    var(--sala-fundo);

  --ink-rgb:      var(--tinta-rgb);
  --ink:          var(--tinta);
  --espresso-rgb: var(--tinta-rgb);
  --espresso:     var(--tinta);
  --espresso-deep-rgb: 34,22,16;
  --espresso-deep: rgb(var(--espresso-deep-rgb));
  --muted:        var(--tinta-suave);
  --clay:         var(--tinta-suave);
  --ink-inverse:  var(--linho);

  --vela-rgb:     45,30,24;
  --vela:         var(--umbra);
  --vela-deep:    #221610;
  --vela-soft:    #3D2A21;
  --vela-lift:    #4E372C;
  --ink-on-dark-rgb: 244,238,234;
  --ink-on-dark:  var(--sala);
  --muted-on-dark:#CDBDB3;

  --rose-deep:    var(--iris);
  --rose-rgb:     var(--iris-rgb);
  --rose:         var(--iris);
  --telha:        var(--iris);
  --rose-clay:    var(--iris-claro);
  --gold-ink:     #7A5A16;

  --latao-rgb:    var(--dourado-rgb);
  --latao:        var(--dourado);
  --gold-thread:  rgba(var(--dourado-rgb), 0.50);
  --gold-glow:    rgba(var(--dourado-rgb), 0.14);

  --line:         rgba(var(--tinta-rgb), 0.12);
  --line-strong:  rgba(var(--tinta-rgb), 0.18);
  --line-inverse: rgba(var(--ink-on-dark-rgb), 0.14);

  --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);

  /* §3.3: o par fica Bricolage (display) + DM Sans (corpo). O eixo de LARGURA
     do Bricolage (75%-100%), ate hoje sem uso, e que carrega a hierarquia. */
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    var(--font-sans);
  --font-quote:   var(--font-sans);
  --fw-light: 340; --fw-reg: 400; --fw-med: 500; --fw-semi: 600;

  /* §3.5: raio 0; excecao unica botao/input 2px. Sombra: nenhuma. */
  --radius-xs: 2px; --radius-sm: 0; --radius: 0;
  --radius-lg: 0; --radius-btn: 2px; --radius-pill: 2px;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

  /* §3.4: base 4. Ritmo de secao 96 < 768px, 128 >= 768px. Um valor so. */
  --sl-rhythm: 96px;
  --sl-gut: 20px;
  --sl-nav-h: 64px;

  background: var(--sala);
  color: var(--tinta);
  font-family: var(--font-sans);
}
@media (min-width: 768px)  { body.v7 { --sl-rhythm: 128px; --sl-gut: 32px; } }
@media (min-width: 1200px) { body.v7 { --sl-gut: 40px; } }

body.v7 h1, body.v7 h2, body.v7 h3, body.v7 h4,
body.v7 .title h2, body.v7 .v7-sec-title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 88, "wght" 500;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---- B) ESTRUTURA COMUM -------------------------------------------------- */
.sl-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sl-gut); }
.sl-prose { max-width: 62ch; }
.sl-section { padding-block: calc(var(--sl-rhythm) / 2); }
.sl-section--tint { background: var(--sala-fundo); }

.sl-eyebrow {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3;
  color: var(--tinta-suave); margin: 0;
}
/* §3.7d: fio --dourado de 1px e 32px acima do eyebrow. E o unico lugar em que
   o metal aparece no campo claro - nunca em texto (2.15:1 reprova AA). */
.sl-sechead { display: grid; gap: 12px; margin-bottom: 24px; }
.sl-sechead::before { content: ""; display: block; width: 32px; height: 1px; background: var(--dourado); }
/* R5 do QA: criterio 6 da direcao (--iris no maximo 3x por viewport) media 4x
   nas seis internas e 8x na for-him. O acento fica nas ACOES (CTA da nav, CTA
   da pagina) e no marcador de pagina atual da nav; rotulo de secao volta para
   --tinta-suave (6.66:1 sobre --sala), que e o default do proprio .sl-eyebrow. */
.sl-sechead .sl-eyebrow { color: var(--tinta-suave); }
.sl-sechead h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0;
  font-variation-settings: "wdth" 88, "wght" 500;
  max-width: 18ch;
}
.sl-sechead p { color: var(--tinta-suave); max-width: 62ch; margin: 0; }

/* §3.7a/b: botao. Altura 48, raio 2, o rotulo diz o CANAL. */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 2px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.02em; text-align: center;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.sl-btn--primary { background: var(--iris); color: var(--linho); border: 1px solid var(--iris); }
.sl-btn--primary:hover, .sl-btn--primary:active { background: var(--iris-escuro); border-color: var(--iris-escuro); }
.sl-btn--ghost { background: transparent; color: var(--tinta); border: 1px solid rgba(var(--tinta-rgb), .24); }
.sl-btn--ghost:hover { background: var(--linho); }
.sl-btn--on-dark { background: var(--iris-claro); color: var(--umbra); border: 1px solid var(--iris-claro); }
.sl-btn--on-dark:hover { background: var(--sala); border-color: var(--sala); }

/* §3.7c: linha de tratamento. A LINHA INTEIRA e o alvo de toque. */
.sl-rows { display: grid; border-top: 1px solid rgba(var(--tinta-rgb), .10); }
@media (min-width: 768px) { .sl-rows { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.sl-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 16px; row-gap: 2px; min-height: 56px; padding-block: 14px;
  border-bottom: 1px solid rgba(var(--tinta-rgb), .10);
  transition: background 120ms var(--ease-out);
}
.sl-row:hover, .sl-row:focus-visible { background: var(--linho); }
.sl-row-name { font-family: var(--font-sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; color: var(--tinta); }
.sl-row-desc { grid-column: 1; font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-suave); }
@media (max-width: 479px) { .sl-row-desc { display: none; } }
.sl-row-price {
  grid-row: 1; grid-column: 2; text-align: right; white-space: nowrap;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.2;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.sl-row-price small { font-size: 0.75rem; font-weight: 400; color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase; }

/* ---- C0) TRES PORTAS VISUAIS (plano de redesign, Familia 1) -------------
   Entrada visual acima do indice .sl-rows: corpo, pele, depilacao. O link
   inteiro e o alvo de toque, mesmo principio do .sl-row. Foto so anima
   transform (scale no hover), nunca opacity — o conteudo nunca depende de
   opacity/JS pra existir (regra P1 no.5). */
.sl-doors { display: grid; gap: 16px; margin-bottom: var(--sl-rhythm, 32px); }
@media (min-width: 768px) { .sl-doors { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* Variante de 2 portas (familia Tratamento: so 2 tecnicas por pagina, nunca 3)
   — sem o modificador o grid de 3 colunas deixa a terceira vazia e o par
   fica desalinhado a esquerda. Usada em drainage.html, fatia 2/3. */
.sl-doors--pair { max-width: 720px; margin-inline: auto; }
@media (min-width: 768px) { .sl-doors--pair { grid-template-columns: repeat(2, 1fr); } }
.sl-door { display: block; width: 100%; text-align: left; color: inherit; }
.sl-door-media { display: block; position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--sala-fundo); }
.sl-door-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--ease-out); }
.sl-door:hover .sl-door-media img, .sl-door:focus-visible .sl-door-media img { transform: scale(1.04); }
.sl-door-copy { display: block; padding-top: 12px; }
.sl-door-name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 1.0625rem; color: var(--tinta); }
.sl-door-desc { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-suave); max-width: 42ch; }

/* ---- C) HERO — 2B split 40/60 (ADR-0015) - sem card, sem scrim, sem sobreposicao -- */
.sl-hero { background: var(--sala); }
.sl-hero-media { position: relative; overflow: hidden; width: 100%; background: var(--sala-fundo); }
.sl-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-hero-panel { background: var(--sala); padding: 24px var(--sl-gut) 32px; }
/* Mesmo bug de especificidade que o QA achou em redesign-hero-b.html:54 —
   `.sl-eyebrow{color:var(--tinta-suave)}` e o default de TODO eyebrow do site
   (usado em .sl-sechead/.sl-page-head), e nunca deixava o acento dourado do
   hero aparecer. Dupla-classe `.sl-eyebrow--hero` (0-2-0) fixa so o hero, sem
   tocar o default que as outras secoes usam de proposito (R5 do QA, --iris/
   --gold-ink no maximo poucas vezes por viewport). Contraste 5.28:1 sobre
   --sala, documentado no site.css junto do token --gold-ink. */
.sl-eyebrow.sl-eyebrow--hero { color: var(--gold-ink); }
.sl-hero h1 {
  /* §3.3: Bricolage 500, largura 82%, LH .98, tracking -.03em.
     O teto de 3 linhas em 390px manda mais que o piso de 2.75rem da tabela:
     a frase inteira do dicionario (v8HeroTitleA + B) so cabe em 3 linhas
     abaixo de 2.4rem. §0 manda decidir pela regra mais restritiva. */
  font-size: clamp(2.3rem, 1.4rem + 4.1vw, 5.25rem);
  font-variation-settings: "wdth" 82, "wght" 500;
  font-weight: 500; line-height: 0.98; letter-spacing: -0.03em;
  color: var(--tinta); margin: 12px 0 0; text-wrap: balance;
}
.sl-hero-lead {
  margin: 16px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5; color: var(--tinta-suave); max-width: 40ch;
}
.sl-hero-cta { display: flex; width: 100%; margin-top: 24px; }
.sl-hero-proof { margin-top: 16px; font-size: 0.75rem; line-height: 1.45; color: var(--tinta-suave); max-width: 46ch; }
.sl-hero-caption {
  margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave);
}
@media (max-width: 767px) {
  /* A foto vem PRIMEIRO e sangra. object-position 47% 30%: o rosto esta a ~33%
     da altura do quadro 4:5 e esse valor o mantem inteiro, sem corte na testa. */
  .sl-hero { padding-top: var(--sl-nav-h); }
  .sl-hero-media { height: clamp(230px, 38svh, 340px); }
  .sl-hero-media img { object-position: 47% 30%; }
  .sl-hero-caption { display: none; }
}
@media (min-width: 768px) {
  .sl-hero { display: grid; grid-template-columns: 48% 52%; min-height: 620px; height: min(82vh, 780px); padding-top: var(--sl-nav-h); }
  .sl-hero-media { grid-column: 2; grid-row: 1; height: 100%; }
  .sl-hero-media img { object-position: 55% 30%; }
  .sl-hero-panel {
    grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 48px clamp(32px, 4vw, 64px);
  }
  .sl-hero-cta { width: auto; align-self: flex-start; }
  .sl-hero-caption { margin-top: auto; }
}
@media (min-width: 1024px) { .sl-hero { grid-template-columns: 42% 58%; } }

/* ---- D) BANDA FOTOGRAFICA (§3.6/§4.4) - uma so por pagina ---------------- */
.sl-band { position: relative; overflow: hidden; width: 100%; height: 42svh; background: var(--sala-fundo); }
.sl-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 768px) { .sl-band { height: 56vh; } }

/* ---- E) A NATHALIA (§4.5) ------------------------------------------------ */
.sl-nat-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .sl-nat-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.sl-nat-photo { position: relative; overflow: hidden; background: var(--sala-fundo); aspect-ratio: 4 / 5; max-width: 100%; }
@media (max-width: 767px) { .sl-nat-photo { aspect-ratio: auto; height: 260px; } }
.sl-nat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.sl-nat-body > * + * { margin-top: 16px; }
.sl-nat-body p { color: var(--tinta-suave); max-width: 62ch; }
.sl-creds { margin-top: 32px; border-top: 1px solid var(--line); }
.sl-cred { padding-block: 12px; border-bottom: 1px solid var(--line); }
.sl-cred strong { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--tinta); }
.sl-cred span { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); }

/* ---- F) COMBOS (§4.6) - cartao TIPOGRAFICO, as quatro fotos sairam ------- */
.sl-combos { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 767px) {
  .sl-combos {
    display: flex; gap: 0; background: transparent; border-block: 0;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .sl-combos::-webkit-scrollbar { display: none; }
  .sl-combo {
    flex: 0 0 72vw; scroll-snap-align: start;
    border: 1px solid var(--line); border-left-width: 0;
  }
  .sl-combo:first-child { border-left-width: 1px; }
}
@media (min-width: 768px)  { .sl-combos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sl-combos { grid-template-columns: repeat(4, 1fr); } }
.sl-combo { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--sala); }
.sl-combo h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.sl-combo-text { font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); flex: 1 1 auto; }
.sl-combo-was { font-size: 0.8125rem; color: var(--tinta-suave); text-decoration: line-through; }
.sl-combo-price {
  font-family: var(--font-display); font-variation-settings: "wdth" 88, "wght" 500;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
/* R5 do QA: 4 dos 8 --iris da for-him eram estes dois rotulos de economia
   (o <p> e o <span> dentro dele). Valor de oferta le em --tinta. */
.sl-combo-save { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta); }
.sl-combo .sl-btn { margin-top: 8px; }

/* ---- G) PROVA (§4.7 / §3.7f) - sem card, sem estrela, fio vertical ------- */
.sl-voices { display: grid; gap: 32px; }
@media (max-width: 767px) {
  .sl-voices {
    display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .sl-voices::-webkit-scrollbar { display: none; }
  .sl-voice { flex: 0 0 74vw; scroll-snap-align: start; }
}
@media (min-width: 768px) { .sl-voices { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.sl-voice { border-top: 1px solid var(--line); padding-top: 16px; margin: 0; }
@media (min-width: 768px) { .sl-voice { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 24px; } }
.sl-voice blockquote { font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--tinta); margin: 0; }
.sl-voice figcaption { margin-top: 12px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---- H) FECHAMENTO (§4.8, P1#6) - campo --umbra, copy propria por pagina - */
.sl-closing { background: var(--umbra); color: var(--sala); padding-block: calc(var(--sl-rhythm) / 2); }
.sl-closing h2 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); line-height: 1.05; max-width: 16ch; margin: 0 0 24px; color: var(--sala); }
.sl-closing a { color: var(--iris-claro); }
/* Bug pre-existente achado no QA do P1#6: em for-him.html e faq.html o CTA de
   fechamento e <a class="sl-btn sl-btn--on-dark">, e a regra generica acima
   (specificidade 0,1,1) vencia .sl-btn--on-dark (0,1,0), pintando o texto do
   botao da mesma cor do fundo (contraste 1:1, medido pelo aceite-visual).
   Sem token novo: so devolve a especificidade a favor do botao. */
.sl-closing a.sl-btn--on-dark { color: var(--umbra); }
.sl-closing a.sl-btn--on-dark:hover { color: var(--umbra); }
.sl-closing-mono { display: block; width: 32px; height: 1px; background: var(--dourado); margin-bottom: 24px; }
.sl-closing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.sl-closing-text { font-size: 1.05rem; line-height: 1.5; max-width: 48ch; margin: -8px 0 24px; color: var(--muted-on-dark); }
.sl-closing-tel { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--sala); }

/* ---- I) NAV (§4.1) - 64px, uma nav so, nunca inverte ao rolar ------------ */
body.v7 .nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky);
  height: var(--sl-nav-h); min-height: var(--sl-nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 var(--sl-gut);
  background: color-mix(in srgb, var(--sala) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); box-shadow: none; border-radius: 0;
}
body.v7 .brand-mini { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
body.v7 .nav-logo { width: auto; height: 30px; }
body.v7 .nav-links { display: none; gap: 28px; }
@media (min-width: 900px) { body.v7 .nav-links { display: flex; align-items: center; } }
body.v7 .nav-link { font-size: 0.9375rem; color: var(--tinta); letter-spacing: 0; }
body.v7 .nav-link:hover { color: var(--iris); }
body.v7 .nav-actions { display: flex; align-items: center; gap: 8px; }
body.v7 .nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px; border-radius: 2px;
  background: var(--iris); color: var(--linho); border: 1px solid var(--iris);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;
}
body.v7 .nav-cta:hover { background: var(--iris-escuro); }
/* R1 do QA (WCAG 2.4.7): a .nav-cta herda `transition: box-shadow` do grupo de
   botoes (site.css:331) e o anel de foco do :where() global entrava animado —
   medido no instante do Tab: `box-shadow: rgba(0,0,0,0) 0 0 0 0`, foco
   invisivel. Anel proprio, por outline (nao transicionado) + o box-shadow do
   token, sem transicao nenhuma: aparece no frame do foco. */
body.v7 .nav-cta:focus-visible {
  outline: 2px solid var(--iris-escuro);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
  transition: none;
}
body.v7 .language-select {
  min-height: 48px; min-width: 48px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: 2px; background: transparent; color: var(--tinta); font-size: 0.875rem;
}

/* §4.9: a CTA fixa CONVIVE com o banner - empilha acima dele em vez de ser
   empurrada para fora da tela. A objecao de 09/08 (banner de 253px) morreu
   com o teto de 72px do §7: 72 + 56 = 128px em 844 = 15% do viewport. */
@media (max-width: 767px) {
  body.v7 .mobile-sticky-cta {
    /* Estado ESCONDIDO ancorado em bottom:0 (nao no topo do banner): assim o
       translateY(110%) leva a barra INTEIRA para fora do viewport. Ancorada em
       bottom:--cookie-banner-height ela caia em 749-806 num viewport de 844,
       ou seja DENTRO da faixa do banner (743-844) e por baixo dele (z 100 vs
       1000): botao no ar e inerte — o B1 do QA de 10/09. */
    bottom: 0;
    padding: 4px var(--sl-gut) calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--umbra); border-top: 1px solid var(--line-inverse);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* Escondida = fora da tela E inerte. Sem pointer-events/visibility a barra
     seguia capturando toque na faixa que invade. */
  body.v7:not(.show-mobile-cta) .mobile-sticky-cta {
    transform: translateY(110%); visibility: hidden; pointer-events: none;
  }
  /* Visivel = empilhada ACIMA do banner (§4.9), nunca por baixo. Com o teto de
     104px do banner a barra de 57px fica em 686-743 em 390x844: encosta no topo
     do banner sem sobrepor, e o toque no centro dela acerta a propria barra. */
  body.v7.show-mobile-cta .mobile-sticky-cta {
    bottom: var(--cookie-banner-height, 0px);
    transform: translateY(0); visibility: visible; pointer-events: auto;
  }
  body.v7 .mobile-sticky-cta .contact-chip.is-primary {
    min-height: 48px; border-radius: 2px;
    background: var(--iris-claro); color: var(--umbra); border-color: var(--iris-claro);
  }
}

/* ---- J) BANNER DE COOKIES (§7) ------------------------------------------- */
#brum-cookie-banner {
  background: var(--linho); border-top: 1px solid var(--line-strong);
  border-radius: 0; box-shadow: none;
}
@media (max-width: 767px) {
  /* Teto de 72px. Uma linha de texto (duas em 360px) + os tres controles.
     Truncar e do TEXTO, nunca do botao: o controle de consentimento nao some. */
  /* DESVIO REGISTRADO do teto de 72px do §7, com numero.
     Aviso + tres controles numa fileira so nao cabe em 390px: com os rotulos
     do dicionario e o alvo de 48px do criterio 18, os tres botoes somam 271px
     dos 366px uteis e sobram 87px para o texto — ~8 caracteres por linha.
     Esconder o aviso para caber viola o §0.4 (a opcao mais privada mantem
     legibilidade). Entao o banner vira DUAS fileiras e o teto fecha em 104px,
     ainda abaixo dos 97px+ do ar. O que o §7 realmente protege — o CTA acima
     da linha do banner — continua valendo com folga medida. */
  #brum-cookie-banner {
    max-height: 104px; overflow: hidden;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  #brum-cookie-banner .cookie-text {
    flex: 0 0 auto; min-width: 0; font-size: 0.75rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #brum-cookie-banner .cookie-text strong { display: inline; margin: 0 .3em 0 0; font-size: 0.75rem; }
  #brum-cookie-banner .cookie-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  #brum-cookie-banner .cookie-btn {
    flex: 1 1 0; min-height: 48px; min-width: 0; padding: 0 6px;
    font-size: 0.75rem; border-radius: 2px; white-space: nowrap;
  }
}
@media (min-width: 768px) {
  /* Deixa de ser parede atravessando a tela: cartao ancorado no canto. */
  #brum-cookie-banner {
    left: 24px; right: auto; bottom: 24px; max-width: 380px;
    flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: 2px;
    padding: 20px; z-index: calc(var(--z-overlay) - 1);
  }
}

/* ---- K) RODAPE (§4.8) ---------------------------------------------------- */
body.v7 .simple-footer, body.v7 .footer-studio { background: var(--umbra); color: var(--sala); }
body.v7 .simple-footer a:hover { color: var(--iris-claro); }

/* ---- L) MOTION (§3.8): o estado FINAL e o default. A animacao e enfeite
   removivel - sem JS, com JS quebrado ou com reduced-motion, tudo aparece. -- */
@media (prefers-reduced-motion: reduce) {
  body.v7 *, body.v7 *::before, body.v7 *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
}

/* §3.4: nenhum texto encosta na borda em nenhum breakpoint. */
body.v7 { overflow-x: hidden; }

/* ---- M) O SLIDESHOW DE SECOES DA v6 SAI (§3.8) ---------------------------
   site.css:2728 dava `min-height: var(--screen)` + scroll-snap a TODA secao no
   mobile: a home virava slideshow de telas cheias e cada bloco curto pagava
   viewport inteiro de vazio. Medido em 390x844 antes de desligar: #treatments
   554px de conteudo esticados para 782, #combos 512 -> 782, #testimonials
   297 -> 782. Sao 983px de nada — e a queixa das "faixas bege enormes".
   §3.8 da direcao: sem scrollytelling, sem pin. O ritmo vem do §3.4. */
@media (max-width: 767px) {
  html:has(body.v7) { scroll-snap-type: none; }
  body.v7 main > section, body.v7 main > .hero, body.v7 main > div {
    min-height: 0; scroll-snap-align: none; display: block;
  }
  body.v7 main > .sl-hero { display: block; }
  body.v7 main > .section, body.v7 main > .nathalia-section, body.v7 main > .brand-closing,
  body.v7 main > .sl-section { padding-block: calc(var(--sl-rhythm) / 2); }
}

/* ---- N) ALVO DE TOQUE (§3.4): minimo 48x48 em TODO link tocavel ---------- */
@media (max-width: 767px) {
  body.v7 .footer-inner > a, body.v7 .footer-studio a, body.v7 .simple-footer a,
  body.v7 main a:not(.sl-row):not(.sl-btn) {
    display: inline-flex; align-items: center; min-height: 48px;
  }
}

/* R3 do QA: o bloco N acima so valia abaixo de 768px. Medido em 1440x900 antes
   do conserto: A.skip-link 176x40, A.nav-link 5x de altura 39, rodape
   +354 771 7531 125x26, @brumesthetics 139x29 e 116x25, FAQ 28x25,
   footer-studio-sign 113x22. Sao alvos de rodape e de nav — controle, nao prosa
   — entao ganham os 48px em TODA largura. Prosa (`main a`) segue so no mobile:
   inline-flex dentro de paragrafo quebra a linha de texto no desktop. */
@media (min-width: 768px) {
  body.v7 .footer-inner > a, body.v7 .footer-studio a, body.v7 .simple-footer a,
  body.v7 .nav-link,
  /* fechamento: o telefone e o @ do Instagram sao os dois ultimos controles da
     pagina e estavam em 26 e 29px de altura. Cada um mora na sua propria
     linha, entao inline-flex nao quebra prosa. */
  body.v7 .sl-closing-tel a, body.v7 .sl-closing-row a {
    display: inline-flex; align-items: center; min-height: 48px; min-width: 48px;
  }
}
/* Alvos estreitos: "FAQ" media 25px (mobile) e 28px (desktop) de largura.
   min-width em caixa transparente alinhada a esquerda amplia a area sem mover
   o rotulo. */
@media (max-width: 767px) {
  body.v7 .footer-inner > a, body.v7 .footer-studio a, body.v7 .simple-footer a,
  body.v7 main a:not(.sl-row):not(.sl-btn) { min-width: 48px; }
}
/* Link dentro de frase (nota do cartao-presente, 104x17): inline-flex quebraria
   a linha. Padding vertical em elemento inline amplia o alvo sem mover nada. */
body.v7 .sl-note a { padding-block: 16px; }
/* O alvo do link da politica e dos botoes do banner esta em site.css (secao
   v5 · COOKIES): o banner tambem aparece em cookie-policy.html, que nao carrega
   esta folha. */

/* §3.2, dose do acento: --iris no maximo 3x por viewport de rolagem. Na
   primeira visita a dobra ja gasta as tres (CTA da nav, CTA do hero, marcador).
   O botao do banner de consentimento nao e acento de marca: volta para --tinta.
   O peso relativo entre "Essenciais" e "Aceitar tudo" nao muda (§0.4). */
#brum-cookie-banner .cookie-btn.is-primary {
  background: var(--tinta); color: var(--linho); border-color: var(--tinta);
}
#brum-cookie-banner .cookie-btn.is-primary:hover { background: var(--umbra); border-color: var(--umbra); }

/* ============================================================================
   CAMADA "SALA" — FATIA 2: as seis paginas internas (direcao §5)
   hefesto-frontend, 10/09/2026.
   Esqueleto unico: page-head / page-body / banda / prova / fechamento / rodape.
   Nenhum componente novo de familia: tudo aqui e .sl-*, o mesmo da home.
============================================================================ */

/* ---- O) PAGE-HEAD (§5.2) -------------------------------------------------
   Campo --sala, sem foto, respiro do §3.4. Eyebrow, H1 de ate duas linhas,
   uma linha de lead, UM CTA. E o unico bloco que difere da home — e difere
   por ausencia (a home tem foto, estas nao), nao por linguagem. */
.sl-page-head {
  background: var(--sala);
  padding-top: calc(var(--sl-nav-h) + var(--sl-rhythm) / 2);
  padding-bottom: calc(var(--sl-rhythm) / 2);
  border-bottom: 1px solid var(--line);
}
.sl-page-head h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tinta);
  max-width: 18ch;                 /* §5.2: no maximo DUAS linhas */
}
.sl-page-head .sl-eyebrow { color: var(--tinta-suave); } /* R5 do QA: ver nota em .sl-sechead .sl-eyebrow */
.sl-page-lead {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 62ch;
}
.sl-page-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (min-width: 768px) {
  .sl-page-head { padding-top: calc(var(--sl-nav-h) + var(--sl-rhythm)); padding-bottom: var(--sl-rhythm); }
}

/* ---- P) A LINHA como BOTAO e como LINK (§3.7c) ---------------------------
   Na home a .sl-row e <a> para outra pagina; nas paginas de ficha ela ABRE o
   agendamento, entao e <button>. Mesmo desenho, mesmo alvo. */
button.sl-row { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
button.sl-row:hover, a.sl-row:hover { background: var(--sala-fundo); }
.sl-row-name small {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
  letter-spacing: .04em; color: var(--tinta-suave);
}

/* ---- Q) CHIPS DA prices.html (§5, veto §0.2 / componente 3.7e) -----------
   Ficam, grudados abaixo da nav, com fio inferior. Raio 2px (§3.5 manda mais
   que a "pilula" do 3.7e — mesmo desvio ja registrado na fatia 1). */
.sl-chipbar {
  position: sticky; top: var(--sl-nav-h); z-index: var(--z-sticky, 30);
  background: var(--sala); border-bottom: 1px solid var(--line);
}
.sl-chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-block: 10px;
}
.sl-chips::-webkit-scrollbar { display: none; }
.sl-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px; border: 1px solid rgba(var(--tinta-rgb), .18);
  border-radius: 2px; color: var(--tinta); font-size: 0.875rem; text-decoration: none;
  white-space: nowrap;
}
.sl-chip:hover { border-color: var(--tinta); }
.sl-chip-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--tinta-suave); }
/* a ancora nao pode parar embaixo da nav + chipbar */
[id^="cat-"] { scroll-margin-top: calc(var(--sl-nav-h) + 72px); }

/* ---- R) TIMELINE DA bridal.html (§5.3, sem card, sem sombra) ------------- */
.sl-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sl-step { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.sl-step strong { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--tinta); }
.sl-step span { font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); }
@media (min-width: 768px) {
  .sl-step { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; }
}

/* ---- S) ACORDEAO (§5, especifico da faq.html; a for-him usa o mesmo) -----
   <details>/<summary>, summary de 56px, fio de 1px entre itens, marcador
   +/- em --iris. Sem card, sem sombra. */
/* Fase 5 (parecer §/faq): titulo de grupo (5 momentos, hermes-fase5-copy.md §1).
   Mesma familia/peso do eyebrow, sem repetir o proprio eyebrow da secao. */
.sl-faq-group-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink);
  margin: 40px 0 12px;
}
.sl-faq-group-title:first-of-type { margin-top: 8px; }
.sl-faq { border-top: 1px solid var(--line); }
.sl-faq-item { border-bottom: 1px solid var(--line); }
.sl-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding-block: 12px; cursor: pointer; list-style: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.3;
  color: var(--tinta);
}
.sl-faq-item > summary::-webkit-details-marker { display: none; }
.sl-faq-item > summary::after {
  content: "+"; flex: 0 0 auto; width: 24px; text-align: center;
  font-family: var(--font-mono); font-size: 1.125rem; line-height: 1; color: var(--iris);
}
.sl-faq-item[open] > summary::after { content: "\2212"; }
.sl-faq-item > p {
  margin: 0 0 16px; padding-right: 40px;
  font-size: 0.9375rem; line-height: 1.6; color: var(--tinta-suave); max-width: 72ch;
}

/* ---- T) NOTA DE RODAPE DE SECAO ----------------------------------------- */
.sl-note { font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-suave); max-width: 62ch; }
.sl-note a { color: var(--tinta); }

/* ---- U) O DEFEITO DO DESKTOP: o cartao de consentimento cobria o titulo ---
   Medido na home da fatia 1, em 1440x900, primeira visita:
     #brum-cookie-banner  x=24  y=630 w=380 h=246  (fundo ate y=876)
     <h2> "Escolha seu tratamento."  x=160 y=843 w=458 h=50
   => 33px do topo do titulo ficavam ATRAS de um cartao opaco. E a queixa
   literal do "menu truncado de servicos": no mobile o banner e fixed;bottom:0
   e nao cobre nada, mas no desktop ele e um cartao ancorado a esquerda e cai
   em cima do conteudo.

   Duas medidas, porque uma so nao resolve:

   1. O cartao encolhe. 246px nao e "cartao flutuante" do §7, e uma parede
      vertical: texto e tres botoes embrulhando em duas colunas. Vira coluna
      unica, com os controles numa fileira so.
   2. O bloco que e DONO DA DOBRA (.sl-hero na home, .sl-page-head nas seis)
      passa a ocupar a altura da janela ENQUANTO o banner estiver aberto. E a
      unica regra que faz "bottom do banner < top do primeiro h2 do <main>"
      valer em QUALQUER altura de janela: encolher o cartao sozinho nao
      resolve (num viewport de 900 o rodape do cartao fica em 876 de todo
      jeito, e o h2 estava em 843).
      Isto NAO fere o §7 ("o banner nunca reserva altura do hero"): la o que
      se proibiu foi ENCOLHER o hero com calc(100svh - banner), que cortava o
      rosto da Nathalia. Aqui o hero CRESCE, nada e cortado, e o estado dura
      um clique — ao consentir, a pagina volta ao ritmo de 96/128 do §3.4.
      Registrado como decisao: o §7 so prescreveu o banner para <768px. */
@media (min-width: 768px) {
  #brum-cookie-banner {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 12px; padding: 16px;
  }
  #brum-cookie-banner .cookie-text { flex: 0 0 auto; font-size: 0.8125rem; line-height: 1.4; }
  #brum-cookie-banner .cookie-text strong { display: inline; margin: 0 .3em 0 0; font-size: 0.8125rem; }
  #brum-cookie-banner .cookie-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
  #brum-cookie-banner .cookie-btn { flex: 1 1 0; min-height: 48px; min-width: 0; padding: 0 8px; font-size: 0.8125rem; white-space: nowrap; }

  body.v7.cookie-banner-visible .sl-hero { height: 100svh; }
  /* flex-start, nao center: centralizar deixava o titulo boiando no meio de
     uma tela vazia. Com o topo preservado, o bloco fica onde sempre esteve e
     o vazio cai justamente no pe da tela — onde o cartao flutua. */
  body.v7.cookie-banner-visible .sl-page-head { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; }
}

/* O rodape do painel do hero (a legenda "Nathalia Brum &middot; Esteticista")
   caia exatamente atras do cartao de consentimento no desktop: medido em
   1440x900, unica colisao restante da home. Enquanto o banner existe, o painel
   ganha o respiro do cartao (126 + 24 de margem + folga). */
@media (min-width: 768px) {
  body.v7.cookie-banner-visible .sl-hero-panel { padding-bottom: 190px; }
}

/* A .sl-rows da home e um INDICE de 6 categorias: duas colunas em >=768px
   (v7.css:841). Nas paginas internas a mesma classe carrega a FICHA de precos,
   e ficha se le em coluna unica (§5.3: "coluna unica, prosa em 720px"). Sem
   isto a lista de Rosto virava 2x2 e a categoria de 7 itens ficava com uma
   celula vazia — medido em 1440: grid-template-columns 536px 536px. */
@media (min-width: 768px) {
  .sl-rows--list { grid-template-columns: 1fr; }
  .sl-rows--list .sl-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .sl-rows--list .sl-row-desc { grid-column: 1; }
}

/* A home tem QUATRO combos e o grid de >=1024px e repeat(4,1fr) (v7.css:940).
   A bridal e a for-him tem DOIS: as duas colunas vazias apareciam como um
   bloco cinza (o fundo --line do grid) a direita dos cartoes — visto no
   screenshot de 1440 da for-him. auto-fit COLAPSA a trilha vazia, entao dois
   cartoes ocupam duas colunas e quatro ocupam quatro, com a mesma regra. */
@media (min-width: 768px)  { .sl-combos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (min-width: 1024px) { .sl-combos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* A home esconde .sl-row-desc abaixo de 480px (v7.css:851): la a linha e um
   INDICE de categoria e o nome basta. Na ficha de precos a linha de beneficio
   E a oferta — sem ela o mobile vira tabela seca de numeros. Volta na lista. */
@media (max-width: 479px) { .sl-rows--list .sl-row-desc { display: block; } }

/* ============================================================================
   FASE 4 · FATIA 1 (hefesto-frontend, 21/09/2026) — skin.html + waxing.html
   Composicao "diagnostico antes da escolha" do parecer (design-review-20260917):
   sinais de decisao (skin) e familias de tratamento alternaveis (skin/waxing).
   Classes novas, nao usadas em nenhuma outra pagina publicada — zero risco
   para home/drainage/bridal/prices/for-him.
============================================================================ */

/* ---- SINAIS DE DECISAO (skin.html, so sinal-para-familia, sem foto propria) */
.sl-signals { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 768px) { .sl-signals { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.sl-signal { border-top: 1px solid var(--line); padding-top: 16px; }
.sl-signal-title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 1.0625rem; color: var(--tinta); }
.sl-signal-text { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--tinta-suave); }
.sl-signal-map { display: block; margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }

/* ---- FAMILIA ALTERNAVEL (skin.html + waxing.html) -------------------------
   Radio nativo (fieldset + input[type=radio] + label), nao ARIA tabs custom:
   funciona por teclado nativamente (Tab entra, setas trocam dentro do grupo),
   nunca depende de hover, e o painel some/aparece por CSS puro a partir do
   :checked do radio irmao — sem NENHUM JS, o alternador ja funciona. O radio
   fica visualmente escondido (clip, nao display:none) para continuar focavel
   e legivel por leitor de tela; o <label> e o alvo visual e de toque (48px). */
/* Fatia 2: fieldset e elemento com moldura/padding de UA por padrao (2px
   groove + padding lateral) - sem o reset o navegador desenha uma borda
   cinza em volta das abas e do painel, e o padding embutido some com o
   alinhamento das colunas de preco (medido no laudo da fatia 1: preco colado
   na borda direita em 390/1280). min-width:0 evita o fieldset ficar mais
   largo que o container por causa do min-content padrao do elemento. */
.sl-family { margin-top: var(--sl-rhythm, 32px); border: 0; padding: 0; margin-inline: 0; min-width: 0; }
/* Duas abas (skin/waxing): controle segmentado, mesma largura, mesma altura,
   lado a lado ate 360px. Sem isto "Limpeza e hidratacao" e "Peelings de
   renovacao" tem larguras diferentes e empilham em 2 linhas desiguais. O
   texto ainda pode quebrar dentro do label (white-space normal), mas as duas
   abas do grid sempre fecham na mesma altura (stretch e o default do grid). */
.sl-family-toggle.sl-family-toggle--segmented { display: grid; grid-template-columns: 1fr 1fr; flex-wrap: unset; }
.sl-family-toggle--segmented .sl-family-tab {
  justify-content: center; text-align: center; white-space: normal;
  height: 100%; padding-block: 10px;
}
.sl-family-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sl-family-toggle { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 24px; }
.sl-family-tab {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill, 999px);
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500;
  color: var(--tinta-suave); cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.sl-family-input:checked + .sl-family-tab { background: var(--tinta); border-color: var(--tinta); color: var(--sala); }
.sl-family-input:focus-visible + .sl-family-tab { outline: 2px solid var(--tinta); outline-offset: 2px; }
.sl-family-panel { display: none; }
.sl-family-panel--a { display: block; }
/* Ids sao unicos por pagina (skinFam... / waxingFam...): sem colisao entre paginas. */
.sl-family:has(#skinFamPeels:checked) .sl-family-panel--a,
.sl-family:has(#waxingFamBrows:checked) .sl-family-panel--a { display: none; }
.sl-family:has(#skinFamPeels:checked) .sl-family-panel--b,
.sl-family:has(#waxingFamBrows:checked) .sl-family-panel--b { display: block; }

/* ============================================================================
   FASE 4 · FATIA 2/2 (hefesto-frontend, 21/09/2026) — prices.html (filtro por
   familia) e for-him.html (hero 2B + comparacao curta dos pacotes). Reusa
   .sl-family, .sl-hero e .sl-combo da fatia 1 e do sistema existente - nenhuma
   classe paralela criada para o mesmo papel. CUIDADO: a sequencia de
   fechamento de comentario CSS nunca pode aparecer solta dentro do texto
   de um comentario - ela fecha o comentario ali mesmo e o parser derruba a
   proxima regra inteira. Foi assim que a fatia 2 perdeu o margin-top:0 do
   .sl-pricesfilter aqui embaixo e reabriu o bug 3 desta correcao (achado
   nesta sessao, nao introduzido por ela).
============================================================================ */

/* ---- FILTRO DE PRECOS (prices.html) --------------------------------------
   Mesmo mecanismo radio+CSS do alternador de familia: a opcao "Todos" vem
   marcada por padrao, entao sem JS (ou com JS, antes de qualquer clique) a
   tabela inteira ja esta visivel - nunca esconde secao com opacity:0 (regra
   do parecer, secao /prices.html). Tab entra no grupo, as setas trocam de
   opcao, e cada `body:has(#pricesFilterX:checked) #cat-Y` esconde so as
   secoes de familia que nao sao a escolhida (a legenda por :has() evita
   qualquer JS de filtro, foco e URL nunca mudam). */
.sl-pricesfilter { margin-top: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 8px; padding-block: 10px; }
.sl-pricesfilter-legend { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.sl-pricesfilter .sl-family-toggle { margin: 0; gap: 8px; }

body:has(#pricesFilterFace:checked) #cat-body,
body:has(#pricesFilterFace:checked) #cat-brows,
body:has(#pricesFilterFace:checked) #cat-lashes,
body:has(#pricesFilterFace:checked) #cat-pmu,
body:has(#pricesFilterFace:checked) #cat-waxing,
body:has(#pricesFilterFace:checked) #cat-peeling { display: none; }

body:has(#pricesFilterBody:checked) #cat-face,
body:has(#pricesFilterBody:checked) #cat-brows,
body:has(#pricesFilterBody:checked) #cat-lashes,
body:has(#pricesFilterBody:checked) #cat-pmu,
body:has(#pricesFilterBody:checked) #cat-waxing,
body:has(#pricesFilterBody:checked) #cat-peeling { display: none; }

body:has(#pricesFilterBrows:checked) #cat-face,
body:has(#pricesFilterBrows:checked) #cat-body,
body:has(#pricesFilterBrows:checked) #cat-lashes,
body:has(#pricesFilterBrows:checked) #cat-pmu,
body:has(#pricesFilterBrows:checked) #cat-waxing,
body:has(#pricesFilterBrows:checked) #cat-peeling { display: none; }

body:has(#pricesFilterLashes:checked) #cat-face,
body:has(#pricesFilterLashes:checked) #cat-body,
body:has(#pricesFilterLashes:checked) #cat-brows,
body:has(#pricesFilterLashes:checked) #cat-pmu,
body:has(#pricesFilterLashes:checked) #cat-waxing,
body:has(#pricesFilterLashes:checked) #cat-peeling { display: none; }

body:has(#pricesFilterPmu:checked) #cat-face,
body:has(#pricesFilterPmu:checked) #cat-body,
body:has(#pricesFilterPmu:checked) #cat-brows,
body:has(#pricesFilterPmu:checked) #cat-lashes,
body:has(#pricesFilterPmu:checked) #cat-waxing,
body:has(#pricesFilterPmu:checked) #cat-peeling { display: none; }

body:has(#pricesFilterWaxing:checked) #cat-face,
body:has(#pricesFilterWaxing:checked) #cat-body,
body:has(#pricesFilterWaxing:checked) #cat-brows,
body:has(#pricesFilterWaxing:checked) #cat-lashes,
body:has(#pricesFilterWaxing:checked) #cat-pmu,
body:has(#pricesFilterWaxing:checked) #cat-peeling { display: none; }

body:has(#pricesFilterPeeling:checked) #cat-face,
body:has(#pricesFilterPeeling:checked) #cat-body,
body:has(#pricesFilterPeeling:checked) #cat-brows,
body:has(#pricesFilterPeeling:checked) #cat-lashes,
body:has(#pricesFilterPeeling:checked) #cat-pmu,
body:has(#pricesFilterPeeling:checked) #cat-waxing { display: none; }

/* ---- LINHA "IDEAL PARA" (sl-row, prices.html) -----------------------------
   pricesIdealLabel entra sr-only: as 22 frases (hermes, ajuste 21/09) ja
   abrem sozinhas ("After long days...", "Ef þú vilt...") e repetir "Ideal
   para/Ideal for" visivel 22 vezes seguidas reintroduziria o mesmo ritmo
   repetido que a copy corrigiu no texto (padrao 13, ver hermes-fase4-copy.md)
   - so na camada visual. O leitor de tela ainda ouve o rotulo antes de cada
   frase, uma vez por item. */
.sl-row-ideal { grid-column: 1; display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; font-style: italic; color: var(--tinta-suave); }

/* ---- FOR-HIM: COMPARACAO CURTA (objetivo + preco, duracao omitida) -------
   Reusa .sl-combo (mesmo cartao de 4 colunas da home). Duracao do Men's
   Reset nao existe em nenhum catalogo (pendencia 2 do hermes) - a linha some
   dos DOIS pacotes, nunca so de um, pra nao ficar assimetrico. */
.sl-compare-row { display: flex; flex-direction: column; gap: 2px; }
.sl-compare-label { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.sl-compare-row .sl-combo-price { display: block; }

/* ============================================================================
   FASE 4 · FATIA 2 · CORRECAO 21/09 (hefesto-frontend) — 3 defeitos de render
   do filtro em prices.html vistos no PNG 390x844 da Zeus (redespacho 1).
   So prices.html + este arquivo; nao mexe em skin/waxing (mesma .sl-family).
============================================================================ */

/* 1) Sticky preso ate o rodape. O ancestral do .sl-chipbar era o <body>
   inteiro (nada delimitava o fim), entao o sticky ficava grudado sobre o
   fechamento escuro e o rodape. .sl-pricesfilter-scope embrulha SO o
   chipbar + as 5 secoes cat-* (a lista de precos): a"caixa de contencao" do
   position:sticky passa a ser este wrapper, e o sticky desgruda no fim dele,
   antes do gift-note/prova/fechamento. */
.sl-pricesfilter-scope { position: relative; }

/* Ao mesmo tempo, o filtro vira UMA linha com rolagem horizontal no mobile —
   mesmo padrao do .sl-chips antigo (overflow-x:auto, sem barra visivel) —
   em vez de quebrar os 6 botoes em 3 linhas empilhadas (~180px de barra
   fixa). O rotulo "MOSTRAR" fica numa linha propria acima; os botoes, numa
   unica faixa que rola. */
@media (max-width: 767px) {
  .sl-pricesfilter { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; gap: 8px; }
  .sl-pricesfilter .sl-family-toggle {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: 100%; margin: 0; gap: 8px;
  }
  .sl-pricesfilter .sl-family-toggle::-webkit-scrollbar { display: none; }
}

/* 2) Contador colado no rotulo ("Rosto4"). O rotulo e o contador sao dois
   <span> filhos de um .sl-family-tab inline-flex: um espaco de texto entre
   dois filhos de flex nao vira espaco visual (o item anonimo de texto em
   branco nao gera caixa). gap resolve na raiz — funciona para as duas abas
   do skin/waxing tambem (label unico, gap sem efeito ali, sem regressao). O
   contador ganha leitura de badge discreto em vez de numero solto colado. */
.sl-family-tab { gap: 4px; }
.sl-chip-count {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  line-height: 1.4; color: var(--tinta-suave);
  background: rgba(var(--tinta-rgb), .08); padding: 1px 7px; border-radius: 999px;
}
.sl-family-input:checked + .sl-family-tab .sl-chip-count { background: rgba(255,255,255,.22); color: inherit; }

/* 3) Vazio entre hero e filtro. Duas causas empilhadas, achadas nesta sessao:
   (a) o fechamento de comentario solto na linha ~1217 (ja corrigido acima)
   derrubava a regra sl-pricesfilter com margin-top zero por inteiro - sem
   ela o .sl-pricesfilter herdava o margin-top de 96px do .sl-family (o
   ritmo de SECAO, --sl-rhythm/2 dobrado), e isso sozinho ja produzia o
   tamanho visto no PNG.
   (b) mesmo com o margin-top zero restaurado, o gap zera de novo: a legend
   nao respeita o padding-top do fieldset (o navegador poe a legend
   encavalada na borda superior, por fora da caixa de padding) - dar
   padding-top ao fieldset nao move a legend um pixel. Por isso o respiro
   entra como margin-top no proprio fieldset (desloca a caixa inteira,
   legend inclusa), no valor de 1x --sl-gut (20px no mobile) - menor que o
   ritmo de uma secao de conteudo porque o chipbar e continuacao do
   cabecalho, nao uma secao nova. */
@media (max-width: 767px) {
  .sl-pricesfilter { margin-top: var(--sl-gut, 20px); padding-block: 0 10px; }
}