/* ==========================================================================
   Reposição hormonal · ajustes só desta página (carregado depois do site.css)
   Prefixo .rh- = classes que existem só aqui. Nada de hex: só os tokens do site.css.
   (v2: .rh-band, .rh-head-media e .rh-why .card saíram; o site.css já cobre .media-band)
   ========================================================================== */

/* 4 · Sintomas: agora é .nl-split + .nlist (assets/css/numbered-list.css). O manifesto
   com chips centralizados saiu (feedback do cliente, rodada 2, item 1). */

/* 9 · Por que escolher (.s-photo-bg + .split): retrato e lista centralizados na altura,
   como d11; o retrato não passa de 500px (no tablet e no celular fica em cima da lista) */
.rh-why{align-items:center}
.rh-why-photo{width:100%;max-width:500px}
/* No tablet o .split empilharia (retrato de 440px sozinho na tela): mantém as duas colunas,
   com o retrato mais estreito; abaixo de 768px empilha (retrato em cima, como m04) */
@media (min-width:768px) and (max-width:1099px){
  .rh-why{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (max-width:767px){
  .rh-why-photo{max-width:440px}
}

/* 10 · Contato: o número do WhatsApp no lead não quebra no hífen; a foto da recepção
   fica sob o título, na coluna da esquerda (o card de vidro fica à direita) */
.rh-contact .lead a{white-space:nowrap}
.rh-contact .rh-contact-media{margin-top:clamp(8px,calc(1.6vw / var(--z,1)),20px)}

/* 3 · O que é: abaixo de 1100px a foto do .photo-split vai para o topo da seção e o "MA"
   (.monogram--top) ficaria por cima dela, invisível; desce para a área do texto, em baixo à direita */
@media (max-width:1099px){
  .rh-oque .monogram{top:auto;bottom:clamp(32px,calc(8vw / var(--z,1)),96px)}
}

/* ==========================================================================
   Espaçamentos enxutos, como na página de disfunção erétil (cliente, 15/10) — tudo,
   menos a hero. Respiro das seções ~66px numa tela de 1440 (era 86) e espaços internos menores.
   ========================================================================== */
:root{--section-y:clamp(40px,calc(4.6vw / var(--z,1)),68px)}
.sec-head,.split-head{margin-bottom:clamp(22px,calc(2.4vw / var(--z,1)),32px)}
:is(.split-head,.photo-split-body,.split-content,.stack) > .sec-head{margin-bottom:0}
.section-actions,.journey + .section-actions{margin-top:clamp(20px,calc(2.2vw / var(--z,1)),28px)}
:is(.journey,.showcase,.glass-list,.nlist) + :is(.callout,p){margin-top:clamp(16px,calc(1.8vw / var(--z,1)),24px)}
.nl-split{row-gap:clamp(24px,calc(2.6vw / var(--z,1)),36px);column-gap:clamp(28px,calc(3.4vw / var(--z,1)),48px)}

/* Fotos laterais ("O que é" e "Indicação"): altura mínima menor */
.photo-split{min-height:clamp(480px,calc(70svh / var(--z,1)),700px)}
.photo-split-body{gap:16px}

/* Diagnóstico (vitrine): menos espaço entre foto e lista e itens mais justos */
.showcase{column-gap:clamp(28px,calc(3.4vw / var(--z,1)),48px)}
.showcase-trigger{padding-block:clamp(12px,calc(1.2vw / var(--z,1)),16px)}
.showcase-panel-body{padding-bottom:18px}

/* Acompanhamento (jornada): cards sem o vão embaixo */
.journey-card{padding-bottom:clamp(22px,calc(1.9vw / var(--z,1)),28px)}

/* Por que escolher e contato: colunas mais próximas */
.rh-why,.contact-split{column-gap:clamp(32px,calc(4vw / var(--z,1)),56px)}
.rh-why .split-content,.rh-contact .stack{gap:20px}
.faq-glass-foot{margin-top:clamp(20px,calc(2.4vw / var(--z,1)),32px)}

/* "Como funciona o acompanhamento" (cliente, 15/10): fundo liso, igual ao da seção de cima
   (sem o cinza e as manchas azuis), e cards de etapa em azul-escuro */
#acompanhamento{background:var(--bg);--section-bg:var(--bg)}
#acompanhamento .journey-blobs{display:none}
#acompanhamento .journey-card{
  background:linear-gradient(150deg,#003252 0%,#002B44 55%,#001A2B 100%);
  border-color:rgba(120,170,210,.18);
  box-shadow:0 1px 2px rgba(0,43,68,.08),0 22px 44px -20px rgba(0,26,43,.55);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#acompanhamento .journey-kicker{color:var(--accent-light,#7FD1C3)}
#acompanhamento .journey-card h3{color:#fff}
#acompanhamento .journey-card p{color:rgba(255,255,255,.78)}
#acompanhamento .journey-num{color:rgba(169,203,230,.10)}
@media (hover:hover){
  #acompanhamento .journey-card:hover{
    background:linear-gradient(150deg,#003A5E 0%,#00304C 55%,#001E31 100%);
    box-shadow:0 2px 4px rgba(0,43,68,.1),0 30px 56px -22px rgba(0,26,43,.62);
  }
}

/* ==========================================================================
   "Sintomas que merecem atenção" (cliente, 15/10): formato próprio desta página.
   Fundo branco; os 7 sintomas agrupados em 3 colunas (vida sexual, corpo e energia,
   humor e concentração) dentro de um painel azul-escuro, com fios finos entre colunas
   e itens; aviso + botão numa barra no pé do painel.
   ========================================================================== */
#sintomas{background:var(--bg);--section-bg:var(--bg)}
.rh-sym{
  --sym-line:rgba(120,170,210,.16);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:28px;color:#fff;
  background:
    radial-gradient(60% 90% at 100% 0%,rgba(0,74,116,.55),transparent 70%),
    radial-gradient(40% 60% at 0% 100%,rgba(0,58,92,.35),transparent 70%),
    linear-gradient(150deg,#003252 0%,#002B44 55%,#001A2B 100%);
  border:1px solid rgba(120,170,210,.18);
  box-shadow:0 1px 2px rgba(0,43,68,.08),0 36px 72px -40px rgba(0,26,43,.6);
}
.rh-sym::after{ /* anel decorativo no canto */
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;z-index:-1;border-radius:50%;
  border:1px solid rgba(120,170,210,.14);box-shadow:0 0 0 46px rgba(120,170,210,.035);
}
.rh-sym-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rh-sym-group{padding:clamp(26px,calc(2.6vw / var(--z,1)),36px) clamp(22px,calc(2.4vw / var(--z,1)),34px) clamp(18px,calc(1.8vw / var(--z,1)),24px);min-width:0}
.rh-sym-group + .rh-sym-group{border-left:1px solid var(--sym-line)}
.rh-sym-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.rh-sym-badge{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(120,170,210,.28);color:var(--accent-light,#7FD1C3);
}
.rh-sym-badge svg,.rh-sym-info svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rh-sym-head h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rh-sym-list{list-style:none;margin:0;padding:0}
.rh-sym-list li{
  display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:14px;
  padding:14px 0;border-top:1px solid var(--sym-line);
  font-size:clamp(16px,calc(1.2vw / var(--z,1)),17.5px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#fff;
}
.rh-sym-list li:first-child{border-top:0}
.rh-sym-ico{display:grid;place-items:center;color:var(--accent-light,#7FD1C3)}
.rh-sym-ico svg{width:22px;height:22px}
.rh-sym-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;
  padding:clamp(18px,calc(1.8vw / var(--z,1)),24px) clamp(22px,calc(2.4vw / var(--z,1)),34px);
  border-top:1px solid var(--sym-line);background:rgba(0,10,20,.22);
}
.rh-sym-note{margin:0;display:flex;align-items:flex-start;gap:12px;max-width:68ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.rh-sym-note em{font-style:normal;color:var(--accent-light,#7FD1C3)}
.rh-sym-info{flex:none;display:grid;place-items:center;color:var(--accent-light,#7FD1C3);margin-top:1px}
.rh-sym-btn{flex:none;
  --btn-bg:#fff; --btn-fg:var(--brand); --btn-bg-h:var(--pale-blue,#D6E6F2); --btn-fg-h:var(--dark,#002B44);
  --btn-shadow:0 12px 26px rgba(0,10,20,.35); --btn-shadow-h:0 16px 32px rgba(0,10,20,.42)}
@media (max-width:899px){
  .rh-sym-groups{grid-template-columns:minmax(0,1fr)}
  .rh-sym-group + .rh-sym-group{border-left:0;border-top:1px solid var(--sym-line)}
  .rh-sym-foot{flex-direction:column;align-items:stretch}
  .rh-sym-btn{justify-content:center}
}
@media (max-width:767px){
  .rh-sym{border-radius:22px}
  .rh-sym-group{padding:22px 20px 14px}
  .rh-sym-foot{padding:20px}
}


/* Fotografias finais do diagnóstico em cores naturais nas duas versões. */
#diagnostico .showcase-media img,
#diagnostico .showcase-figure img{filter:none}

/* Preserva o monitor no recorte horizontal do aparelho no celular. */
#diagnostico img[src$="investigacao-ultrassom-foto.jpg"]{object-position:50% 0%}

/* 6 · Diagnóstico no claro (.s-ice; copy 24/10: era .s-dark). Os .pj-card do site.css são de
   vidro escuro com texto branco fixo; aqui viram cards brancos com o texto nos tokens do claro. */
#diagnostico .pj-card{
  background:var(--card);border-color:var(--line);
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.06),0 18px 40px -26px rgba(var(--shadow-rgb),.4);
}
#diagnostico .pj-card h3{color:var(--heading)}
#diagnostico .pj-card p{color:var(--ink-2)}
#diagnostico .pj-card-link{color:var(--link)}
#diagnostico .pj-card-link:focus-visible{outline-color:var(--focus)}
@media (hover:hover){
  #diagnostico .pj-card:hover{border-color:var(--line-blue);box-shadow:0 2px 4px rgba(var(--shadow-rgb),.08),0 30px 60px -28px rgba(var(--shadow-rgb),.5)}
  #diagnostico .pj-card:hover h3{color:var(--link)}
}


/* ==========================================================================
   Hero com o Dr. sentado à direita (foto do cliente/Gemini, 15/10): a metade esquerda
   da foto é parede azul-marinho lisa; título, texto de apoio e botão ficam empilhados
   nela, longe dele. Fatos do rodapé da hero ocultos no desktop (o CRM fica no canto).
   ========================================================================== */
.hero-media img{object-position:72% 0%}   /* recorta embaixo, nunca o topo da cabeça */
.hero .hero-media{background:#040D16}
@media (min-width:1100px){
  .hero .hero-grid{grid-template-rows:auto 1fr auto auto auto}
  .hero .hero-title{grid-column:1 / 6;grid-row:3;max-width:none;font-size:clamp(36px,calc(3.4vw / var(--z,1)),54px);line-height:1.05}
  .hero .hero-side{grid-column:1 / 6;grid-row:4;justify-self:start;width:auto;max-width:420px;margin-top:22px}
  .hero .hero-lead{max-width:38ch}
  .hero .hero-foot{grid-row:5}
  .hero .hero-facts,.hero .hero-rule{display:none}
}
@media (max-width:767px){.hero-media img{object-position:50% 0%}}

/* 7 · Quando a reposição é indicada (cliente, 24/10: "amplie pra não ficar no canto pequena"):
   a foto ocupa 58% da largura (--ps-w no HTML) e é ampliada em volta dos livros, que ficavam
   pequenos no alto da mesa branca. "scale" é separado do "transform" que o GSAP usa na paralaxe. */
#indicacao .photo-split-frame img{scale:1.45!important;transform-origin:72% 40%}   /* !important: o GSAP grava "scale: none" inline */
@media (max-width:1099px){#indicacao .photo-split-frame img{scale:1.3!important;transform-origin:70% 42%}}