/* ==========================================================================
   PILOTO — redesign-produto-waxing.css · v1 (hefesto, sessão 51, 23/09/2026)
   Fonte: .scratch/produto-20260922/afrodite-waxing-v1.md — conceito
   "a passada". Só :root (site.css) e as classes .sl-* base (v7.css) são
   comuns com as irmãs. Prefixo próprio .wx-* — nenhuma classe rp-* (drainage)
   nem sk-* (skin) entra aqui (§1.1 do laudo).

   Eixo horizontal só. Faixa = a forma (mídia e bandas, raio 12/10, nunca
   círculo). Costura reta com troca de campo (C1, C5). Campo esfria:
   --sala-fundo (hero) → --sala (áreas/sobrancelha/faq/sala) → --linho (fecho).
   O CSS pinta o ESTADO FINAL; o GSAP (redesign-produto-waxing.js) anima a
   entrada dentro de gsap.matchMedia(), ramo reduced = 0 ScrollTrigger.
========================================================================== */

:root { --wx-rhythm-lg: 144px; --wx-rhythm-sm: 72px; --wx-rhythm-lg2: 72px; --wx-rhythm-sm2: 40px; }
/* Distância do bordo do conteúdo (.sl-wrap) até a borda do viewport, para as
   faixas que sangram (hero à direita, sala à esquerda). Casa com o gutter/
   auto-margin efetivo de .sl-wrap em cada breakpoint (medido: 20/32/160). */
:root { --wx-bleed: 20px; }
@media (min-width: 768px)  { :root { --wx-bleed: 32px; } }
@media (min-width: 1200px) { :root { --wx-bleed: 160px; } }

/* Conserto §2.K (igual drainage v6): esconde a barra fixa quando o fecho
   entra no viewport, vence show-mobile-cta por vir depois no cascade. */
body.wx-contact-in-view .mobile-sticky-cta { transform: translateY(110%) !important; }

.wx-hero, .wx-areas, .wx-brows, .wx-faq, .wx-room-section { background: var(--sala-fundo); }
.wx-areas, .wx-brows, .wx-faq { background: var(--sala); }
.wx-room-section { background: var(--sala); }
.wx-closing { background: var(--linho); }

/* ---- HERO (S0) --------------------------------------------------------- */
/* Conserto argos-waxing-v1 §bloqueante (23/09): 72px sozinho deixava só 8px
   de respiro sob a nav fixa (.nav, 64px = --sl-nav-h) - titulo colado.
   Soma o header ao respiro, igual ao padrao das irmas (sk-track soma
   var(--sl-nav-h) antes do proprio ritmo). Total 120px desktop / 96px 390. */
.wx-hero { padding-block: calc(var(--sl-nav-h) + 56px) var(--wx-rhythm-lg); position: relative; overflow: hidden; }
.wx-hero .sl-wrap { display: flex; flex-direction: column; gap: 24px; }
.wx-hero-copy h1 {
  margin: 0; color: var(--tinta); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch;
}
.wx-lead { margin: 0; color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.5; max-width: 44ch; }
.wx-hero-cta { margin-top: 4px; }

/* Faixa horizontal (a passada) — cantos só do lado que não sangra. No 1440
   sangra até a borda direita do viewport (escapa do .sl-wrap por margem
   negativa simétrica); no 390 não sangra (fica dentro do gutter, §3 S0.1). */
.wx-strip {
  position: relative; margin: 24px 0 0; width: 100%; aspect-ratio: 2 / 1;
  overflow: hidden; border-radius: 10px 0 0 10px;
  clip-path: inset(0 0 0 0 round 10px 0 0 10px);
}
.wx-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .wx-strip { aspect-ratio: 3.2 / 1; width: calc(100% + var(--wx-bleed)); margin-right: calc(-1 * var(--wx-bleed)); }
}

/* ---- Peel (C1/C5 costura em puxão) ------------------------------------- */
.wx-peel {
  position: absolute; top: 0; left: 0; width: 100%; height: 24px; background: var(--sala-fundo);
  border-radius: 0 999px 999px 0; z-index: 1; pointer-events: none;
}
.wx-peel--close { background: var(--sala); }

/* ---- Ritmo dos gaps entre seções (C1..C5) ------------------------------ */
.wx-areas { padding-top: var(--wx-rhythm-lg); }
.wx-brows { padding-top: var(--wx-rhythm-sm2); }
.wx-faq { padding-top: var(--wx-rhythm-lg2); }
.wx-room-section { padding-top: var(--wx-rhythm-sm2); padding-bottom: 0; }
.wx-closing { padding-top: var(--wx-rhythm-lg); }
.wx-areas, .wx-brows, .wx-faq { padding-bottom: var(--wx-rhythm-sm2); }

/* ---- S1/S2 · Áreas e sobrancelha (linhas) ------------------------------ */
.wx-sechead { margin: 0 0 32px; }
.wx-sechead h2 {
  margin: 0; color: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; max-width: 20ch;
}
.wx-rows { display: flex; flex-direction: column; gap: 24px; }
.wx-row {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 16px 0; margin: 0;
  cursor: pointer; min-height: 72px; border-bottom: 1px solid transparent;
}
.wx-row:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }
.wx-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wx-row-name-wrap { display: flex; align-items: baseline; gap: 6px; }
.wx-row-name { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; color: var(--tinta); text-decoration: none; text-decoration-color: var(--iris); text-underline-offset: 6px; }
.wx-row:hover .wx-row-name, .wx-row:focus-visible .wx-row-name { text-decoration-line: underline; }
.wx-row-price { font-family: var(--font-sans); font-weight: 600; font-size: 1.25rem; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.wx-arrow { color: var(--iris); opacity: 0; transform: translateX(-8px); transition: transform .2s ease, opacity .2s ease; }
.wx-row:hover .wx-arrow, .wx-row:focus-visible .wx-arrow { opacity: 1; transform: translateX(0); }
.wx-row-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wx-row-duration { font-family: var(--font-sans); font-size: .9375rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-bar-track { flex: 1 1 auto; max-width: 320px; height: 6px; border-radius: 999px; overflow: hidden; background: transparent; }
.wx-bar { display: block; height: 100%; border-radius: 999px; background: var(--dourado); transform-origin: left; transform: scaleX(1); }
.wx-row-desc { display: block; margin-top: 8px; color: var(--tinta-suave); font-size: 1rem; line-height: 1.4; max-width: 46ch; }

@media (min-width: 900px) {
  .wx-row { display: grid; grid-template-columns: 1.4fr auto 320px auto; align-items: center; column-gap: 24px; min-height: 80px; }
  .wx-row-top { display: contents; }
  .wx-row-name-wrap { grid-column: 1; }
  .wx-row-duration { grid-column: 2; }
  .wx-bar-track { grid-column: 3; max-width: 320px; }
  .wx-row-price { grid-column: 4; justify-self: end; }
  .wx-row-desc { grid-column: 1 / 2; }
  .wx-row-meta { display: contents; }
}

/* ---- "1 cm" (S1.4) ------------------------------------------------------ */
.wx-cm { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(var(--tinta-rgb), .12); }
.wx-cm-num { font-family: var(--font-display); font-weight: 600; font-size: 3.5rem; color: var(--gold-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.wx-cm-note { margin: 0; color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.5; max-width: 44ch; }
@media (min-width: 900px) {
  .wx-cm { flex-direction: row; align-items: baseline; gap: 32px; }
  .wx-cm-num { font-size: 3.5rem; }
}

/* ---- S2 sobrancelha ------------------------------------------------------ */
.wx-brows-intro { margin: 0 0 24px; }
.wx-brows-intro h3 { margin: 0 0 8px; color: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.wx-brows-intro p { margin: 0; color: var(--tinta-suave); font-size: 1.0625rem; }

/* ---- S3 · FAQ em bandas -------------------------------------------------- */
.wx-bands { display: flex; flex-direction: column; gap: 16px; }
.wx-band { background: var(--sala-fundo); border-radius: 10px; overflow: hidden; }
.wx-band summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; min-height: 44px; font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; color: var(--tinta);
}
.wx-band summary::-webkit-details-marker { display: none; }
.wx-band-pull { flex: 0 0 auto; width: 32px; height: 12px; border-radius: 999px; background: var(--tinta-suave); transition: transform .25s ease; }
.wx-band[open] .wx-band-pull { transform: translateX(-8px); }
.wx-band-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.wx-band[open] .wx-band-body { grid-template-rows: 1fr; }
.wx-band-body-inner { overflow: hidden; }
.wx-band-body p { margin: 0; padding: 0 20px 20px; color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.5; max-width: 60ch; }

/* ---- S4 · A sala (a prova) ------------------------------------------------ */
.wx-room-wrap { display: flex; flex-direction: column; gap: 24px; }
.wx-room {
  position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 0 10px 10px 0;
  width: calc(100% + var(--wx-bleed)); margin-left: calc(-1 * var(--wx-bleed));
}
.wx-room img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-room-copy h2 { margin: 0 0 8px; color: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; max-width: 14ch; }
.wx-room-copy p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }
@media (min-width: 900px) {
  .wx-room-wrap { flex-direction: row; align-items: center; gap: 40px; }
  .wx-room { aspect-ratio: 2.4 / 1; flex: 1 1 auto; }
  .wx-room-copy { flex: 0 0 320px; }
  .wx-room-copy h2 { font-size: 2rem; }
}

/* ---- S5 · Fecho ----------------------------------------------------------- */
.wx-closing-wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.wx-closing-wrap h2 { margin: 0; color: var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; max-width: 20ch; }
.wx-closing-wrap p { margin: 0; color: var(--tinta-suave); font-size: 1.0625rem; line-height: 1.5; max-width: 46ch; }
.wx-closing-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.wx-closing-row a { color: var(--iris); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; }

/* ---- 390 ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --wx-rhythm-lg: 72px; --wx-rhythm-sm: 40px; --wx-rhythm-lg2: 40px; --wx-rhythm-sm2: 24px; }
  .wx-hero { padding-block: calc(var(--sl-nav-h) + 40px) var(--wx-rhythm-lg); }
  .wx-hero-copy h1 { font-size: 2.5rem; }
  .wx-lead { font-size: 1.0625rem; }
  .wx-strip { border-radius: 10px 0 0 10px; }
  .wx-hero-cta .sl-btn { width: 100%; }
  .wx-peel { height: 24px; }
  .wx-sechead h2 { font-size: 1.5rem; }
  .wx-row-name { font-size: 1.125rem; }
  .wx-row-price { font-size: 1.0625rem; }
  .wx-cm-num { font-size: 3rem; }
  .wx-room { border-radius: 0 10px 10px 0; }
  .wx-closing-wrap .sl-btn { width: 100%; }
}

/* ---- reduced motion: estado final desde o t0 (regra da casa) ------------- */
@media (prefers-reduced-motion: reduce) {
  .wx-peel { display: none; }
  .wx-strip, .wx-room { clip-path: none; }
  .wx-bar { transform: scaleX(1); }
  .wx-hero-copy h1, .wx-lead, .wx-hero-cta, .wx-sechead h2, .wx-row, .wx-cm, .wx-brows-intro, .wx-band, .wx-room-copy, .wx-closing-wrap { opacity: 1; transform: none; }
}