/* ==========================================================================
   PILOTO — redesign-produto-drainage.html · v5 (hefesto, 22/09/2026)
   Fonte: .scratch/produto-20260922/afrodite-composicao-v5.md. Arquivo proprio
   da pagina de drenagem — NAO e um template pra outras paginas (Vitor,
   22/09: "cada pagina tera um tema diferente, composicao diferente e cara
   propria"). Só :root (site.css) e as classes .sl-* de v7.css sao BASE
   COMUM (header/nav/footer/botao/tipografia de secao); tudo com prefixo
   "rp-" abaixo e ESPECIFICO desta pagina — layout, ritmo de scroll e o
   vídeo do hero não se copiam pra skin/waxing/etc sem reabrir o design.
   Anima so transform/opacity (regra da casa, v7-motion.js:9-10).
========================================================================== */

/* M7 barra de progresso: SAIU (v6, laudo §2 M7 — o proprio rolar e o fluxo,
   uma linha fixa no topo e mais uma borda reta). Nao reintroduzir. */

/* ==========================================================================
   H · HERO EM VIDEO (especifico da drenagem: o video/scrim SAO o tema —
   "fluxo" entra pela imagem, nao pela copy). Caixa/scrim/botao de pausa sao
   um padrao que outras paginas de hero-video podem reusar (ex. skin.html),
   mas a proporcao do scrim, o object-position e o conteudo do video aqui
   sao calibrados pra ESTE clipe (Pexels 9716822, ver LICENCAS.md).
========================================================================== */
.rp-hero {
  position: relative; overflow: hidden;
  height: calc(100svh - var(--sl-nav-h));
  margin-top: var(--sl-nav-h);
  background: var(--sala); /* v6: era --tinta; a janela do vídeo abre sobre a página clara (§2 H) */
}
/* rp-hero-media: wrapper da abertura do canal. CSS pinta o estado FINAL
   (sem clip); o GSAP anima de uma janela fechada ate aqui, uma vez, no load
   (v1Runway em redesign-produto.js). Reduced motion: nunca clipado. */
.rp-hero-media { position: absolute; inset: 0; clip-path: inset(0% round 0px); }
.rp-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%; /* mobile: abdomen centrado, cabecalho da terapeuta fora */
  display: block;
}
@media (min-width: 768px) { .rp-hero-video { object-position: 66% 46%; } } /* mãos no terço direito, livre do texto */
.rp-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(42,29,23,.78) 0%, rgba(42,29,23,.78) 44%, rgba(42,29,23,0) 72%);
}
@media (min-width: 768px) {
  .rp-hero-scrim { background: linear-gradient(90deg, rgba(42,29,23,.72) 0%, rgba(42,29,23,.72) 46%, rgba(42,29,23,0) 78%); }
}
.rp-hero-copy {
  position: absolute; left: 20px; right: 20px; bottom: 72px; z-index: 2;
  max-width: 560px; color: var(--linho);
}
@media (min-width: 768px) { .rp-hero-copy { left: 160px; right: auto; bottom: 136px; } }
.rp-hero-copy .sl-eyebrow.sl-eyebrow--hero { color: var(--linho); opacity: 1; }
.rp-hero-copy h1 {
  margin: 0 0 16px; color: var(--linho);
  font-size: clamp(2.4rem, 1.9rem + 2vw, 5rem);
  line-height: 1.02; max-width: 12ch;
}
.rp-hero-lead { margin: 0 0 24px; color: var(--linho); font-size: 1.125rem; line-height: 1.5; max-width: 44ch; }
.rp-hero-copy .sl-hero-cta { margin-bottom: 18px; }
@media (max-width: 767px) { .rp-hero-copy .sl-btn { width: 100%; min-height: 48px; } }
.rp-hero-proof { margin: 0; color: var(--linho); opacity: .88; font-size: .875rem; max-width: 42ch; }
@media (max-width: 767px) { .rp-hero-proof { display: none; } } /* orcamento de leitura no 390: eyebrow+h1+lead+cta cabem acima da dobra */

.rp-hero-pause {
  position: absolute; z-index: 3; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(42,29,23,.72); color: var(--linho); border: none; cursor: pointer;
  right: 20px; top: 20px;
}
@media (min-width: 768px) { .rp-hero-pause { right: 40px; top: 40px; } }
.rp-hero-pause[aria-pressed="true"] .rp-icon-pause,
.rp-hero-pause:not([aria-pressed="true"]) .rp-icon-play { display: none; }
.rp-hero-pause[aria-pressed="true"] .rp-icon-play,
.rp-hero-pause:not([aria-pressed="true"]) .rp-icon-pause { display: block; }

/* V1 costura: #variantes sobe por cima do vídeo parado (ver JS pin). */
#variantes { position: relative; z-index: 2; background: var(--sala); }

/* C1 (§3): frente de onda clara — silhueta SOLIDA da propria secao (.rp-lip
   e a cor de #variantes, nunca um traço/textura — veto da Nathalia). O CSS
   pinta a forma em repouso; o JS achata (scaleY) na timeline V1. */
.rp-lip {
  position: absolute; left: 0; right: 0; top: -96px; height: 192px;
  border-radius: 50%; background: var(--sala); transform-origin: 50% 50%;
  pointer-events: none; z-index: -1;
}
@media (max-width: 767px) { .rp-lip { top: -40px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .rp-lip { transform: scaleY(.67); } }

/* C2 (§3): dissolucao tonal sala -> sala-fundo, ultimos 320/200px de #variantes.
   z-index:-1 dentro do stacking context de #variantes: pinta atras do
   conteudo estatico (cards), nunca por cima do texto. */
.rp-fade-v {
  position: absolute; left: 0; right: 0; bottom: 0; height: 320px;
  background: linear-gradient(180deg, var(--sala) 0%, var(--sala-fundo) 100%);
  pointer-events: none; z-index: -1;
}
@media (max-width: 767px) { .rp-fade-v { height: 200px; } }

/* ==========================================================================
   V · VARIANTES (base comum: cartao/mídia sticky reaproveitavel; a ordem
   MAF -> pos-cirurgica -> facial-em-linha e do conteudo desta pagina).
========================================================================== */
#variantes { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { #variantes { padding-top: 128px; padding-bottom: 120px; } }
.rp-variants-grid { display: grid; gap: 24px; margin-top: 0; }
@media (min-width: 768px) {
  .rp-variants-grid {
    grid-template-columns: minmax(0, 480px) 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 64px; row-gap: 0; align-items: start;
  }
  .rp-variants-grid > .sl-sechead { grid-column: 2; grid-row: 1; margin: 0 0 24px; }
  .rp-variants-media { grid-column: 1; grid-row: 1 / 3; z-index: 1; }
  .rp-variant-cards { grid-column: 2; grid-row: 2; }
}
.rp-variants-media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 2px; }
@media (min-width: 768px) { .rp-variants-media { position: sticky; top: 88px; } }
@media (max-width: 767px) { .rp-variants-media { display: none; } } /* o hero ja carregou a imagem: sem pilha foto->foto */
/* V.2 (§2): sai o crossfade por opacity. A imagem nova "escorre" por cima
   (clip-path animado pelo JS, evento IntersectionObserver, sem scrub).
   z-index controla quem fica em cima enquanto a troca acontece. */
.rp-variants-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rp-variants-media img.is-active { z-index: 1; }

/* V.3-V.5: sem compartimento — sai o filete e a caixa. Degraus de recuo em
   vez de bordas (a corrente que desvia). */
.rp-variant-card { padding-block: 56px; }
.rp-variant-card:first-child { padding-top: 0; }
.rp-variant-name { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--tinta); margin: 0 0 8px; }
.rp-variant-meta { font-variant-numeric: tabular-nums; color: var(--tinta); font-size: 0.95rem; margin: 0 0 10px; }
.rp-variant-desc { color: var(--tinta-suave); max-width: 48ch; margin: 0 0 18px; line-height: 1.5; }
.rp-variant-condition { font-size: 0.9rem; color: var(--tinta-suave); margin: 12px 0 0; }

/* [copy: hermes] "Ver horários →": unica acao de cada tratamento, link-botao
   em --iris SEM fundo (5.19:1 sobre sala) — o terracota cheio fica so no
   CTA do hero, do fecho e na barra fixa do 390 (regra 5 do §1). */
.rp-variant-cta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer;
  color: var(--iris); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rp-variant-cta-arrow { display: inline-block; transition: transform .25s ease; }
.rp-variant-cta:hover .rp-variant-cta-arrow,
.rp-variant-card--line:hover .rp-variant-cta-arrow { transform: translateX(4px); }

/* V.4: recuo de meandro (a corrente que desvia) */
.rp-variant-card--recuo1 { padding-left: 24px; }
@media (min-width: 768px) { .rp-variant-card--recuo1 { padding-left: 0; margin-left: 48px; } }

/* V.5: recuo maior (terceira queda) + a linha INTEIRA vira o link */
.rp-variant-card--recuo2 { padding-left: 48px; }
@media (min-width: 768px) { .rp-variant-card--recuo2 { padding-left: 0; margin-left: 96px; } }
.rp-variant-card--line {
  padding-block: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  min-height: 44px; text-decoration: none; color: inherit;
}
.rp-variant-card--line .rp-variant-name { margin: 0; flex: 1 1 auto; }
.rp-variant-card--line .rp-variant-meta { margin: 0; }
.rp-variant-card--line .rp-variant-cta-arrow { color: var(--iris); font-weight: 600; }

/* ==========================================================================
   N · NUMEROS + PLANOS (base comum de layout; conteudo dos 3 numeros e da
   nota de plano e da drenagem).
========================================================================== */
/* N.0 (§2): costura C2/C3 por dissolucao tonal — o gradiente comeca onde V
   termina (sala-fundo) e acaba onde S comeca (sala). Sai o .rp-stats-bg e o
   margin-top negativo (a sobreposicao antiga virou pura mudanca de tom). */
.rp-stats {
  position: relative; z-index: 0;
  background: linear-gradient(180deg, var(--sala-fundo) 0%, var(--sala-fundo) 70%, var(--sala) 100%);
  padding-top: 144px; padding-bottom: 168px;
}
@media (max-width: 767px) { .rp-stats { padding-top: 64px; padding-bottom: 72px; } }
.rp-stats-wrap { position: relative; z-index: 1; }
.rp-plans-note { margin: 0 0 32px; color: var(--tinta-suave); font-size: 0.95rem; }
.rp-plans-note strong { color: var(--tinta); font-weight: 600; }
@media (min-width: 900px) {
  .rp-stats-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .rp-plans-note { grid-column: 1 / 5; margin: 0; align-self: start; font-size: 1.05rem; }
  .rp-stats-grid { grid-column: 5 / 13; }
}
.rp-stats-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; text-align: left; }
/* N.2 (§2): cascata — cada numero e um degrau que desce, sem filete. */
@media (min-width: 900px) {
  .rp-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .rp-stats-grid li:nth-child(1) { margin-top: 0; }
  .rp-stats-grid li:nth-child(2) { margin-top: 56px; }
  .rp-stats-grid li:nth-child(3) { margin-top: 112px; }
}
@media (max-width: 899px) {
  /* margin-left (nao padding): padding nao move a borda do li, e a chave
     N.cascata mede o `left` do proprio elemento (achado medindo, v6). */
  .rp-stats-grid li { display: flex; justify-content: space-between; align-items: baseline; }
  .rp-stats-grid li:nth-child(1) { margin-left: 0; }
  .rp-stats-grid li:nth-child(2) { margin-left: 20px; }
  .rp-stats-grid li:nth-child(3) { margin-left: 40px; }
}
.rp-stat-value { display: block; overflow: clip; }
/* Direct-child (>), nao descendente: um seletor "span" generico tambem
   pegava o .rp-unit ANINHADO e o tornava display:block, quebrando "10.500"
   e "Kr" em 2 linhas (D5 de volta — medido no report-v5.json antes deste
   fix: offsetHeight 126 ~= 2x fontSize). */
.rp-stat-value > span { display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.25rem); line-height: 1; color: var(--tinta); white-space: nowrap; }
.rp-unit { display: inline; font-size: .42em; margin-left: .2em; white-space: nowrap; }
.rp-stat-label { display: block; margin-top: 10px; font-size: 0.95rem; color: var(--tinta-suave); }
@media (max-width: 899px) { .rp-stat-label { margin-top: 0; text-align: right; } }

/* ==========================================================================
   S · A SALA (especifico da drenagem: 3 fotos, sem 4a, sem setas no
   desktop; a onda de entrada V5 e o motion-assinatura desta pagina — ver JS).
========================================================================== */
/* z-index:2 (nao so position:relative) cria o stacking context proprio,
   igual #variantes/#contact — sem isso o .rp-fade-s (z-index:-1) escapa pra
   um contexto acima e pinta atras de TUDO, invisivel: e a borda reta da
   costura C4 que a Zeus reprovou (achado medindo, v6.1). */
.rp-room { position: relative; z-index: 2; background: var(--sala); padding-top: 0; padding-bottom: 168px; }
@media (max-width: 767px) { .rp-room { padding-bottom: 72px; } }

/* C4 (§3): dissolucao sala -> sala-fundo, ultimos 240/160px */
.rp-fade-s {
  position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(180deg, var(--sala) 0%, var(--sala-fundo) 100%);
  pointer-events: none; z-index: -1;
}
@media (max-width: 767px) { .rp-fade-s { height: 160px; } }

/* S.1 (§2, correcao Zeus): 2 fotos, sobrepostas em diagonal — sem carrossel,
   sem setas. A = mais alta na composicao (a maca real, prova), B sobe por
   cima e mais a direita (o "depois" do autocuidado). */
.rp-room-photos { position: relative; margin-top: 24px; }
.rp-room-photo { margin: 0; overflow: hidden; border-radius: 2px; }
.rp-room-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-room-photo--a { width: 78%; aspect-ratio: 4 / 5; }
.rp-room-photo--b { width: 64%; aspect-ratio: 4 / 5; margin-top: -72px; margin-left: auto; position: relative; z-index: 2; }
@media (min-width: 900px) {
  .rp-room-photos { min-height: 940px; }
  .rp-room-photo--a { position: absolute; left: 0; top: 0; width: 56%; margin: 0; }
  .rp-room-photo--b { position: absolute; left: 40%; top: 240px; width: 46%; margin: 0; z-index: 2; }
}

/* ==========================================================================
   F · PERGUNTAS (base comum de acordeao; o grid+sticky sao layout desta
   pagina, sem margin-top negativo que colidia com as perguntas — D11).
========================================================================== */
#faq { padding-top: 0; padding-bottom: 120px; background: var(--sala-fundo); }
@media (min-width: 768px) { #faq { padding-top: 0; padding-bottom: 288px; } }
@media (min-width: 900px) {
  #faq > .sl-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  #faq > .sl-wrap > .sl-sechead { grid-column: 1 / 5; position: sticky; top: 120px; align-self: start; margin: 0; }
  .rp-faq-list { grid-column: 5 / 13; margin-top: 0; }
}
/* F.2 (§2): unico filete que fica na pagina — e funcao (onde clicar), nao
   divisao de secao. 10% de opacidade (era 14%), sem border-bottom no ultimo. */
.rp-faq-list { list-style: none; margin: 24px 0 0; padding: 0; }
.rp-faq-item { border-top: 1px solid rgba(var(--tinta-rgb), .10); }
.rp-faq-q { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; font: inherit; font-weight: 600; color: var(--tinta); padding: 16px 4px; cursor: pointer; }
.rp-faq-q .rp-faq-icon { flex: 0 0 auto; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.rp-faq-q[aria-expanded="true"] .rp-faq-icon { transform: rotate(45deg); }
.rp-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); }
.rp-faq-a > div { overflow: hidden; }
.rp-faq-a > div p {
  margin: 0 4px 20px; color: var(--tinta-suave); max-width: 60ch; line-height: 1.5;
  transform: translateY(8px); opacity: 0;
  transition: transform .35s ease .08s, opacity .35s ease .08s;
}
.rp-faq-item.is-open .rp-faq-a { grid-template-rows: 1fr; }
.rp-faq-item.is-open .rp-faq-a > div p { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   C · FECHO — a linha de agendamento vinda de #sessao (unica que nao repetia).
   C5 (§3): a lábia escura sobe por cima do FAQ; e o maior respiro da pagina
   (o ritmo "solta" de vez aqui).
========================================================================== */
#contact { position: relative; z-index: 2; margin-top: -96px; padding-top: 192px; }
@media (max-width: 767px) { #contact { margin-top: -40px; padding-top: 80px; } }
.rp-lip--dark {
  top: -96px; height: 192px; background: var(--umbra);
}
@media (max-width: 767px) { .rp-lip--dark { top: -40px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .rp-lip--dark { transform: scaleY(.5); } }
/* achado medindo (v6.1): site.css:3510 `#contact > * { position:relative;
   z-index:1 }` (base comum, so >=1024px) pega a labia — filho direto de
   #contact — e derruba o position:absolute dela; lip.sobreposicao de C5
   media 0 no 1440 em vez de ~192. Especificidade de `#contact > *` (ID)
   vence `.rp-lip--dark` sozinha (classe): o seletor precisa repetir o
   #contact pra empatar/vencer. Nao editar site.css (base comum). */
@media (min-width: 1024px) { #contact > .rp-lip--dark { position: absolute; z-index: -1; } }
/* achado medindo (v6.1), 2o efeito do mesmo `#contact` de site.css:3506:
   `overflow:hidden` (>=1024px) — herdado de quando #contact tinha o wordmark
   fantasma "Beauty" (ja neutralizado por `#contact::before{content:none}`,
   veto da Nathalia). Sem overflow:visible aqui, o overflow:hidden CORTA os
   96px do arco que sobem por cima do FAQ (a lip.sobreposicao/lip.arco batem
   certo por getBoundingClientRect, que ignora clip — mas visualmente o corte
   vira exatamente a borda reta que C5 nao pode ter). Escopo so a >=1024px
   (onde o overflow:hidden da base existe) pra nao mexer no mobile. */
@media (min-width: 1024px) { #contact { overflow: visible; } }
.rp-closing-booking { margin: -8px 0 20px; color: var(--sala); opacity: .88; font-size: .95rem; }
.rp-closing-booking strong { color: var(--sala); font-weight: 600; }

/* ---- reduced motion: nenhuma transicao de layout extra alem do necessario -------- */
@media (prefers-reduced-motion: reduce) {
  .rp-faq-a, .rp-faq-a > div p, .rp-faq-q .rp-faq-icon, .rp-variants-media img { transition: none; }
}

/* ---- §6 (fora da minha raia, mas e da minha fatia): a barra fixa do mobile
   some quando o fecho (S9/#contact) entra no viewport — o CSS vence o
   show-mobile-cta do v7-motion.js por vir depois no cascade. --------------- */
body.rp-contact-in-view .mobile-sticky-cta { transform: translateY(110%) !important; }