/* ==========================================================================
   Preenchimento peniano: ajustes só desta página
   O sistema inteiro está em assets/css/site.css. Os contornos da v1 (.pp-feito-media,
   .pp-why-list) saíram: o site.css v2 já resolve.
   Copy 24/10: "Para quem" (.pp-indications) virou o .ap "Você se identifica"; Produtos foi
   para o claro (.s-ice); a Avaliação foi para o escuro (.s-dark); entrou "Cuidados" (.pp-care).
   ========================================================================== */

/* Contato: o número do WhatsApp no lead não quebra no hífen ("97602-" / "9245") */
.contact-split .lead a{white-space:nowrap}


/* Hero com retrato: título contido à esquerda e fatos no canto direito, como na index.
   O título da copy 24/10 é mais longo ("Aumento peniano com preenchimento em São Paulo"):
   um pouco menor, em 3 linhas ("Aumento peniano" / "com preenchimento" / "em São Paulo"),
   terminando onde terminava o "Preenchimento" do título anterior (sem entrar no jaleco). */
@media (min-width:1100px){
  .hero .hero-title{grid-column:1/6;max-width:13ch;font-size:clamp(36px,min(calc(3.1vw / var(--z,1)),calc(6.2svh / var(--z,1))),50px)}
  .hero .hero-title em{display:inline-block}
  .hero .hero-facts{flex-direction:column;align-items:flex-end;row-gap:8px}
  .hero .hero-facts li+li::before{display:none}
}
@media (min-width:768px){
  .hero-media img{top:var(--header-h);height:calc(100% - var(--header-h));object-position:52% top;transform-origin:52% 35%}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(270deg,rgba(0,26,43,.62) 0%,rgba(0,26,43,.32) 24%,transparent 42%);
  }
}
@media (max-width:767px){
  .hero-media img{top:var(--header-h);height:calc(100% - var(--header-h));object-position:center top}
}

/* Segunda dobra: abertura discreta e tema em destaque, sem quebras forçadas. */
#oque-title{
  max-width:none;font-size:clamp(28px,calc(3vw / var(--z,1)),40px);
  line-height:1.12;letter-spacing:-.03em;text-wrap:wrap;
}
#oque-title .pp-title-intro{
  display:block;margin-bottom:.28em;
  font-size:.64em;font-weight:500;line-height:1.25;letter-spacing:-.01em;
}
#oque-title em{display:block;line-height:1.08;white-space:normal}

/* Produtos (claro, .s-ice): texto em uma coluna contínua e imagem alta acompanhando o conteúdo. */
#produtos .pp-products-copy{
  display:grid;align-content:start;gap:var(--space-group,24px);min-width:0;
}
#produtos .pp-products-copy > :is(.sec-head,.callout,.section-actions){margin:0}
#produtos .sec-head{max-width:100%}
#produtos :is(.lead,.callout){max-width:100%}
#produtos :is(.showcase-media img,.showcase-figure img){filter:none}
@media (min-width:1100px){
  #produtos .pp-products-layout{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,calc(4vw / var(--z,1)),56px);
  }
}
@media (max-width:767px){
  #produtos .showcase-figure{aspect-ratio:4/5}
}

@media (min-width:768px){
  #produtos .showcase-media{
    position:relative;top:auto;align-self:stretch;
    margin-top:0;
    aspect-ratio:auto;max-height:none;min-height:0;
  }
}

/* Avaliação (escuro, .s-dark): consultório amplo à esquerda, dissolvendo para o texto à direita.
   Saiu a emenda com o "Como é feito" (que pintava a jornada de --bg quando a avaliação era
   clara): a jornada volta ao .s-alt com as manchas de luz. */
#avaliacao{
  --ps-w:52%;--ps-pos:78% 50%;--ps-pos-m:70% 50%;--ps-h:100%;
}
#avaliacao .photo-split-body{gap:16px}
#avaliacao .checkrail-label{margin-top:8px}

/* Cuidados após o procedimento (.ap.ap--plain): título à esquerda e os 4 cards em 2×2 à
   direita, centrados na altura a partir de 1100px (a coluna dos cards um pouco mais larga,
   para o texto não quebrar em 4 linhas). Abaixo disso a .split vira uma coluna e os cards
   seguem a faixa/lista do .ap; o respiro fica no cabeçalho (sem somar o row-gap). */
.pp-care .split{row-gap:0}
@media (min-width:1100px){
  .pp-care .split{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}
  .pp-care .split > .sec-head{margin-bottom:0}
}

/* Retrato anterior da hero reaproveitado na apresentação, com o rosto inteiro. */
#por-que .photo-split-frame img{top:0;height:100%;transform:none!important}

/* O ritmo compacto (.page-compact, no site.css) ficou apertado demais nesta página:
   um pouco mais de respiro entre e dentro das seções (cliente, 15/10). A hero não muda. */
.page-compact{
  --section-y:clamp(40px,calc(4.2vw / var(--z,1)),60px);
  --space-head:clamp(24px,calc(2.4vw / var(--z,1)),34px);
  --space-group:clamp(20px,calc(2vw / var(--z,1)),28px);
  --space-copy:18px;
}
@media (max-width:767px){
  .page-compact{--section-y:38px;--space-head:22px;--space-group:18px}
}