/* ==========================================================================
   servico.css - direcao de arte, fatia 2/3 (hefesto, 11/10/2026)
   Fonte: docs/design-fatia2-servicos.md (regras R1-R10, §2-§7 por pagina).
   As seis paginas de servico (drainage, skin, waxing, lashes-brows, bridal,
   for-him) carregam este arquivo DEPOIS do CSS proprio de cada uma. Fatia 3/3:
   o escopo `.sv` saiu do <body>; as regras genericas foram para v7.css e aqui
   ficam so as regras por id/componente das seis. Valores de espaco vem SO dos
   tokens --sec-*
   (v7.css), nunca de numero solto (R10).
   Reverter uma decisao = apagar a regra marcada [REVERSIVEL].
========================================================================== */

/* R10 (aliases) e R8 (CTA) viraram globais em v7.css na fatia 3/3 (G5, G6). */

/* ---- R4 · fecho: padding-block --sec-m (a skin acrescenta o --sec-l no pe) - */
/* o #contact da drainage tem regra por id em produto-drainage.css (192/80 + margem negativa): a regra por id aqui a vence */
body.v7 #contact { padding-block: var(--sec-m); margin-top: 0; }
body.v7 #contact.sk-closing { padding-bottom: var(--sec-l); }

/* ==========================================================================
   DRAINAGE (§2)
========================================================================== */
/* R6: a copy do hero na borda de conteudo do .sl-wrap (160 em 1440, 400 em 1920) */
@media (min-width: 768px) {
  body.v7 .rp-hero-copy { left: max(var(--sl-gut), calc((100% - 1200px) / 2 + var(--sl-gut))); }
}
body.v7 #variantes { padding-top: var(--sec-l); padding-bottom: var(--sec-m); }
body.v7 #numeros.rp-stats { padding-top: 0; padding-bottom: var(--sec-m); }
body.v7 #galeria.rp-room { padding-top: 0; padding-bottom: var(--sec-m); }
/* o fade dissolve dentro do respiro, sem passar por cima das fotos */
body.v7 .rp-fade-s { height: var(--sec-m); }
/* A = sala de massagem (4:5), B = estante (16:9, so a prateleira de cima) */
body.v7 .rp-room-photo--a { width: 78%; aspect-ratio: 4 / 5; }
body.v7 .rp-room-photo--a img { object-position: 50% 55%; }
body.v7 .rp-room-photo--b { width: 72%; aspect-ratio: 16 / 9; margin-top: calc(-1 * var(--sec-s)); margin-left: auto; }
body.v7 .rp-room-photo--b img { object-position: 50% 0%; }
@media (min-width: 900px) {
  /* a altura do conjunto = a altura de A (56% de largura, 4:5 => 10:7) */
  body.v7 .rp-room-photos { min-height: 0; aspect-ratio: 10 / 7; }
  body.v7 .rp-room-photo--a { position: absolute; left: 0; top: 0; width: 56%; margin: 0; }
  body.v7 .rp-room-photo--b { position: absolute; left: 44%; top: auto; bottom: var(--sec-s); width: 46%; margin: 0; }
}
body.v7 #faq.sl-section { padding-top: 0; padding-bottom: var(--sec-l); }

/* ==========================================================================
   SKIN (§3)
========================================================================== */
body.v7 .sk-track { padding-top: calc(var(--sl-nav-h) + var(--sec-xs)); }
body.v7 .sk-track-content { padding: 0 var(--sl-gut); max-width: none; margin-inline: 0; }
@media (min-width: 900px) {
  /* grade na geometria do .sl-wrap: H1 em 160/400 (era 80/320) */
  body.v7 .sk-track-grid {
    grid-template-columns: minmax(0, 480px) 1fr; column-gap: 40px;
    max-width: 1200px; padding-inline: var(--sl-gut);
  }
  body.v7 .sk-track-content { padding: 0; }
}
body.v7 .sk-signals { margin-top: var(--sec-m); }
body.v7 #cat-treatments.sk-section { padding-top: var(--sec-l); padding-bottom: 0; }
body.v7 #sala.sk-section { padding-top: var(--sec-m); padding-bottom: 0; }

/* ==========================================================================
   WAXING (§4) + faixa da LASHES (§5): a mesma faixa, contida na grade
   [REVERSIVEL] Se o Vitor pedir a sangria da waxing de volta, e so apagar o
   bloco "faixa contida" e devolver o `width: calc(100% + var(--wx-bleed))`
   e o `margin-right: calc(-1 * var(--wx-bleed))` do produto-waxing.css.
========================================================================== */
body.v7 .wx-hero { padding-block: calc(var(--sl-nav-h) + var(--sec-xs)) var(--sec-m); }
body.v7 .wx-hero .sl-wrap { gap: var(--sec-xs); }
/* h1, lead e CTA da waxing estavam colados (margin 0 nos tres); respiro minimo, igual ao das irmas */
body.v7 .wx-hero-copy h1 { margin-bottom: 16px; }
body.v7 .wx-hero-cta { margin-top: var(--sec-xs); }
/* faixa contida na grade (16:5 no desktop, 2:1 no 390), raio 2px */
body.v7 .wx-strip,
body.v7 .sv-strip {
  position: relative; margin: 0; width: 100%; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 2px; clip-path: inset(0 round 2px);
}
body.v7 .wx-strip img,
body.v7 .sv-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.v7 .sv-strip { margin-top: var(--sec-xs); }
@media (min-width: 900px) {
  body.v7 .wx-strip,
  body.v7 .sv-strip { aspect-ratio: 16 / 5; width: 100%; margin-right: 0; }
}
body.v7 .wx-areas { padding-top: var(--sec-m); padding-bottom: 0; }
body.v7 .wx-brows { padding-top: var(--sec-s); padding-bottom: 0; }
body.v7 .wx-faq { padding-top: var(--sec-m); padding-bottom: var(--sec-l); }
/* a frase da sala fechada abre o fecho (a secao #sala saiu) */
body.v7 .wx-closing-wrap .wx-closing-kicker {
  margin: 0; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--gold-ink);
}

/* ==========================================================================
   LASHES-BROWS (§5): o page-head vira hero com faixa
========================================================================== */
/* .sl-page-head: regra global em v7.css (G4) */
body.v7 #lashes { padding-top: var(--sec-l); padding-bottom: var(--sec-m); }
body.v7 #brows,
body.v7 #permanent-makeup { padding-block: var(--sec-m); }
body.v7 #lashes-faq { padding-top: var(--sec-m); padding-bottom: var(--sec-l); }

/* ==========================================================================
   BRIDAL (§6): hero dentro da grade, foto 6:5 das maos com renda
========================================================================== */
body.v7 .sl-hero { padding-top: calc(var(--sl-nav-h) + var(--sec-xs)); padding-bottom: 0; }
body.v7 .sl-hero-media { height: auto; aspect-ratio: 6 / 5; }
body.v7 .sl-hero-media img { object-position: 50% 50%; }
body.v7 .sl-hero-panel { padding: var(--sec-xs) var(--sl-gut) 0; }
@media (min-width: 768px) {
  body.v7 .sl-hero { display: block; height: auto; min-height: 0; }
  body.v7 .sv-hero-wrap {
    width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sl-gut);
    display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; align-items: center;
  }
  body.v7 .sl-hero-media { grid-column: 2; grid-row: 1; height: auto; }
  body.v7 .sl-hero-panel { grid-column: 1; grid-row: 1; padding: 0; }
  body.v7 .sl-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); max-width: 12ch; }
  /* com o banner de cookies aberto o hero NAO cresce para 100svh nem ganha 190px de pe */
  body.v7.cookie-banner-visible .sl-hero { height: auto; }
  body.v7.cookie-banner-visible .sl-hero-panel { padding-bottom: 0; }
}
body.v7 #timeline { padding-top: var(--sec-l); padding-bottom: var(--sec-m); }
body.v7 #programs { padding-top: 0; padding-bottom: var(--sec-m); }

/* ==========================================================================
   FOR-HIM (§7): tudo na geometria do .sl-wrap (H1/H2 em 160/400)
========================================================================== */
body.v7 .fh-hero { padding-top: calc(var(--sl-nav-h) + var(--sec-xs)); }
body.v7 .fh-hero-head,
body.v7 .fh-packages,
body.v7 .fh-relief,
body.v7 .fh-treatments,
body.v7 .fh-faq {
  width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sl-gut);
}
body.v7 .fh-packages { padding-block: var(--sec-m); }
body.v7 .fh-relief { padding-top: var(--sec-m); padding-bottom: 0; }
body.v7 .fh-treatments { padding-top: var(--sec-m); padding-bottom: 0; }
body.v7 .fh-faq { padding-top: var(--sec-m); padding-bottom: var(--sec-l); }