/* ==========================================================================
   Home · ajustes só desta página (carregado depois do site.css)
   O sistema inteiro fica em assets/css/site.css; aqui entra só o que é da home.
   (O contorno da v1 para o .split-media-body saiu: a home v2 não usa mais esse componente
   e o site.css já estica os botões até 479px.)
   ========================================================================== */

/* "Como funciona a consulta": cabeçalho em duas colunas, com a foto real do consultório
   (.photo-reveal, clinica-11) ao lado do título, acima da .journey. Abaixo de 900px a foto
   desce para baixo do texto. */
.home-cf-head{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:end;gap:clamp(32px,calc(5vw / var(--z,1)),72px);
  margin-bottom:var(--space-head,28px);
}
.home-cf-head > .sec-head{margin-bottom:0}
@media (max-width:899px){
  .home-cf-head{grid-template-columns:minmax(0,1fr);gap:var(--space-group,24px)}
}

/* Consultório (contato + faixa de fotos): a faixa encosta na faixa com o nome, como na
   referência (d13 → d14), em vez de deixar o respiro inteiro da seção embaixo dela. */
.home-clinic{padding-bottom:var(--section-y)}
/* A coluna do título fica um pouco mais larga que o padrão (1.1fr/.9fr): com ela, "Atendimento
   reservado," cabe numa linha e o H2 fecha em 3 linhas em vez de 4 no desktop. */
@media (min-width:1100px){
  .home-clinic .contact-split{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
}

/* Parágrafos de apoio sem palavra sozinha na última linha (ex.: "simples." no lead de Instagram e
   YouTube a 1440px). Sugerido para o site.css nas notas. */
:is(.sec-head .lead,.callout){text-wrap:pretty}

/* Hero da home com a foto real (médico centralizado): o nome fica contido na faixa da
   esquerda, em duas linhas ("Dr. Matheus" / "Amaral"), para não cruzar o corpo dele.
   No tablet e no celular vale o comportamento padrão do site.css. */
@media (min-width:1100px){
  .hero .hero-title{
    grid-column:1/5;max-width:6.4ch;
    font-size:clamp(46px,min(calc(4.8vw / var(--z,1)),calc(9svh / var(--z,1))),80px);
  }
  .hero .hero-title em{display:inline-block}
}

/* Hero da home: os fatos do rodapé da hero ficam empilhados no canto direito,
   para não passarem por cima do médico (foto centralizada). */
@media (min-width:1100px){
  .hero .hero-facts{flex-direction:column;align-items:flex-end;row-gap:8px}
  .hero .hero-facts li+li::before{display:none}
}

/* Hero da home: véu azul extra no lado direito, onde o texto de apoio cai sobre a estante
   iluminada da foto (contraste do lead e da chamada). Fica abaixo do scrim e do conteúdo. */
@media (min-width:768px){
  .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%);
  }
}

/* "Sobre": a foto fica ancorada no topo (não corta a cabeça) e o texto fica mais contido.
   Nesta foto o parallax fica desligado (ele exige sobrecorte e cortava o topo). */
#sobre .photo-split-frame img{top:0;height:100%;transform:none!important}
#sobre .sec-head h2{font-size:clamp(30px,calc(3vw / var(--z,1)),42px)}
#sobre .lead{font-size:clamp(15.5px,calc(1.1vw / var(--z,1)),16.5px);line-height:1.65}
#sobre .photo-split-body p:not(.lead){font-size:15px;line-height:1.7}
#sobre .photo-split-trail li,#sobre .photo-split-trail{font-size:14.5px}
#sobre .photo-split-trail h3{font-size:clamp(17px,calc(1.25vw / var(--z,1)),18px)}

/* "Sobre": título em dois níveis — abertura leve ("Muito prazer, sou o") e o nome em destaque */
#sobre .h-intro .h-kicker{
  display:block;margin-bottom:.28em;
  font-size:.42em;font-weight:400;letter-spacing:-.01em;line-height:1.2;color:var(--on-dark-2,#B7CAD4);
}
#sobre .h-intro{line-height:1.02}

/* Tratamentos da home: cores originais das fotos, com sombra neutra para o texto. */
#tratamentos .img-card-img{filter:none}
#tratamentos .img-card-veil{
  background:linear-gradient(180deg,
    rgba(4,9,14,0) 0%,
    rgba(4,9,14,.04) 30%,
    rgba(4,9,14,.56) 65%,
    rgba(4,9,14,.88) 100%);
}
#tratamentos .img-card-veil::after{
  background:linear-gradient(180deg,
    rgba(4,9,14,0) 0%,
    rgba(4,9,14,.16) 32%,
    rgba(4,9,14,.52) 62%,
    rgba(4,9,14,.68) 100%);
}
@media (min-width:1100px) and (hover:hover){
  #tratamentos .img-cards:has(.img-card:is(:hover,:focus-within)) .img-card:not(:hover,:focus-within){opacity:1}
}

/* ==========================================================================
   Instagram e YouTube sem capas (cliente, 15/10): título à esquerda e duas
   linhas-cartão azul-escuras à direita, com ícone, @, botão e marca d'água do ícone.
   ========================================================================== */
.channels-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,calc(5vw / var(--z,1)),80px);align-items:center}
.channels-head{margin:0;text-align:left;justify-items:start}
.channels-head .lead{max-width:46ch}
.ch-rows{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ch-row{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;
  min-height:0;padding:20px 24px;border-radius:22px;text-decoration:none;
  color:#fff;border:1px solid rgba(120,170,210,.18);
  background:
    radial-gradient(60% 120% at 100% 0%,rgba(0,74,116,.55),transparent 70%),
    linear-gradient(150deg,#003252 0%,#002B44 50%,#001A2B 100%);
  box-shadow:0 22px 44px -22px rgba(0,26,43,.6);
  transition:translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease;
}
.ch-row::before{ /* fio de luz que corre no topo no hover */
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,203,230,.85),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.ch-row-mark{position:absolute;right:-28px;bottom:-46px;z-index:-1;width:190px;height:190px;color:#fff;opacity:.06;
  transform:rotate(-10deg);transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.ch-row-mark .ico{width:100%;height:100%;stroke-width:1.1}
.ch-row-ico{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(120,170,210,.28);color:#fff}
.ch-row-ico .ico{width:28px;height:28px;stroke-width:1.6}
.ch-row-txt{display:grid;gap:4px;min-width:0}
.ch-row-name{font-size:clamp(22px,calc(1.9vw / var(--z,1)),28px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.ch-row-handle{font-size:15px;color:var(--on-dark-2,#B7CAD4);overflow-wrap:anywhere}
.ch-row-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:.8rem 1.2rem;border-radius:999px;border:1px solid rgba(169,203,230,.55);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.ch-row-cta .ico{width:15px;height:15px;stroke-width:2;transition:translate .35s ease}
@media (hover:hover){
  .ch-row:hover{translate:0 -4px;border-color:rgba(169,203,230,.4);box-shadow:0 30px 56px -24px rgba(0,26,43,.75)}
  .ch-row:hover::before{transform:scaleX(1)}
  .ch-row:hover .ch-row-mark{opacity:.12;transform:rotate(-4deg) scale(1.06)}
  .ch-row:hover .ch-row-cta{background:#fff;color:var(--brand);border-color:#fff}
  .ch-row:hover .ch-row-cta .ico{translate:3px -3px}
}
.ch-row:focus-visible{outline:3px solid var(--accent-light,#7FD1C3);outline-offset:4px}
@media (max-width:899px){
  .channels-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:539px){
  .ch-row{grid-template-columns:auto minmax(0,1fr);row-gap:16px;padding:22px}
  .ch-row-cta{grid-column:1 / -1;justify-content:center}
  .ch-row-ico{width:54px;height:54px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){.ch-row,.ch-row::before,.ch-row-mark,.ch-row-cta{transition:none}}

/* "Por que escolher": foto real 4:5 ancorada no topo (sem o sobrecorte do parallax, que cortava a cabeça) */
#por-que .photo-split-frame img{top:0;height:100%;transform:none!important}

/* ==========================================================================
   Convite em card de citação (cliente, 15/10): substitui a frase gigante centralizada
   com anéis. Esquerda: aspas, frase e assinatura. Direita: fatos com check + botão.
   ========================================================================== */
.invite--card{background:var(--bg-2);text-align:left}   /* --bg-2 (copy 24/10): não repete o --bg do Instagram logo acima */
.invite--card::before,.invite--card::after{display:none}
.inv-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  border-radius:28px;color:#fff;
  background:
    var(--grain-tile) 0 0/160px 160px,
    radial-gradient(70% 90% at 0% 0%,rgba(0,74,116,.55),transparent 70%),
    linear-gradient(150deg,#003252 0%,#002B44 55%,#001A2B 100%);
  background-blend-mode:overlay,normal,normal;
  border:1px solid rgba(120,170,210,.16);
  box-shadow:0 30px 60px -30px rgba(0,26,43,.65);
}
.inv-quote{position:relative;padding:clamp(24px,calc(2.8vw / var(--z,1)),40px);display:grid;align-content:center;gap:var(--space-group,24px)}
.inv-mark{
  position:absolute;left:clamp(18px,calc(2.6vw / var(--z,1)),40px);top:clamp(-14px,calc(-1vw / var(--z,1)),-6px);z-index:-1;
  font-size:clamp(140px,calc(14vw / var(--z,1)),220px);line-height:1;font-weight:700;color:rgba(169,203,230,.10);pointer-events:none;
}
.inv-title{margin:0;max-width:20ch;color:#fff;font-size:clamp(28px,calc(2.9vw / var(--z,1)),40px);line-height:1.12;letter-spacing:-.035em;text-align:left}
.inv-title em{color:var(--accent-light,#7FD1C3)}
.inv-sign{margin:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--on-dark-2,#B7CAD4)}
.inv-sign::before{content:"";width:34px;height:1px;background:rgba(169,203,230,.55)}
.inv-sign b{color:#fff;font-weight:600}
.inv-side{
  display:grid;align-content:center;gap:var(--space-group,24px);
  padding:clamp(24px,calc(2.6vw / var(--z,1)),36px);
  background:rgba(255,255,255,.04);border-left:1px solid rgba(120,170,210,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.inv-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.inv-facts li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#fff}
.inv-facts li::before{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(127,209,195,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD1C3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
  border:1px solid rgba(127,209,195,.35);
}
.inv-btn{justify-content:center;width:100%}
@media (max-width:899px){
  .inv-card{grid-template-columns:minmax(0,1fr)}
  .inv-side{border-left:0;border-top:1px solid rgba(120,170,210,.16)}
  .inv-title{max-width:none}
}
.inv-btn{
  --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);
}

/* Tratamentos: quadros mais compactos, mantendo o texto e as fotos legíveis. */
@media (min-width:1100px){
  #tratamentos .img-cards{--imgc-h:340px;--imgc-h-open:380px}
}

/* Cards sem página própria (copy 24/10: ejaculação precoce e vasectomia não têm "Saiba mais"):
   mesma altura e mesmo hover dos outros; o foco do teclado abre o texto; no toque o texto
   fica sempre visível, já que tocar no card não leva a lugar nenhum. */
@media (min-width:1100px){#tratamentos .img-card--info{min-height:var(--imgc-h)}}
#tratamentos .img-card--info:focus-visible{outline:3px solid var(--accent-light,#7FD1C3);outline-offset:-5px}
@media (hover:none){
  #tratamentos .img-card--info .img-card-body > p{max-height:16em;opacity:1;translate:none;margin-top:12px}
}

/* ==========================================================================
   Cores dos blocos na ordem nova (copy 24/10)
   Claro e escuro alternam da seção nova ao Consultório, sem duas vizinhas iguais:
   névoa (Aumento) · petróleo com foto (Tratamentos) · --bg (Sobre, que era escuro) ·
   petróleo (Avaliações) · gelo .s-ice (Pilares) · oceano (Quando procurar, que era claro) ·
   --bg-2 (Como funciona) · petróleo (Por que escolher) · --bg (Instagram) · --bg-2 (Convite) ·
   oceano (Consultório) · FAQ e rodapé sem emenda.
   Os claros usam quatro tons; nos escuros a luz troca de lado (oceano à direita, petróleo à
   esquerda), então ela passa de um lado para o outro conforme a rolagem.
   A variante escura da lista de "Quando procurar" fica no numbered-list.css; o .s-ice e a seção .ap
   (Aumento peniano) ficam no site.css, porque as landing pages também usam.
   ========================================================================== */
/* Sobre no claro: o rótulo "Muito prazer, sou o" era claro fixo (sumia no fundo claro) */
#sobre .h-intro .h-kicker{color:var(--ink-2)}

/* "Quando procurar" (cliente, 24/10: a formatação do texto estava estranha): o título quebrava
   em 4 linhas curtas e o parágrafo, grande, ficava mais largo que ele. Agora o título é menor e
   equilibrado (sem a quebra forçada, fecha em 3 linhas) e o parágrafo tem o tamanho do texto
   corrido, com a mesma largura do título. */
.nl-split-aside .sec-head > h2{font-size:clamp(28px,calc(2.5vw / var(--z,1)),36px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance;max-width:none}
.nl-split-aside .lead{font-size:16px;line-height:1.7;max-width:40ch;margin-top:4px}

/* Hero da home um pouco mais alta (cliente, 24/10). A altura que vale é a do .page-compact
   (site.css): 90svh com teto de 840px passa para 98svh com teto de 920px; no tablet, de 88svh
   (teto 760) para 94svh (teto 820). No celular continua pelo conteúdo; acima de 1920px vale a
   regra da proporção 16:9 do site.css. */
.page-compact .hero:has(+ .ribbons){min-height:clamp(600px,calc(98svh / var(--z,1)),920px)}
@media (max-width:1099px){
  .page-compact .hero:has(+ .ribbons){min-height:clamp(580px,calc(94svh / var(--z,1)),820px)}
}
@media (max-width:767px){
  .page-compact .hero:has(+ .ribbons){min-height:0}
}
@media (min-width:1921px){
  .page-compact .hero:has(+ .ribbons){min-height:min(100svh,56.25vw)}
}

/* ==========================================================================
   Pilares da home mais vistosos (cliente, 24/10: "embaixo ficou só lista"), em todos os tamanhos.
   Cada card centralizado ganha um medalhão: disco azul da marca com o ícone em verde-água,
   halo que respira, anel de luz que gira em volta e um gesto próprio em loop no ícone:
   o olho pisca e olha em volta, o balão "digita" e no documento uma linha de leitura percorre
   a folha e o check confirma. O número vira marca d'água vazada no canto.
   A entrada (card sobe, medalhão cresce, traço se desenha) continua no site.js (animPillars).
   Os gestos ficam só em <g> (o desenho de entrada anima os <path>).
   ========================================================================== */
.home-pilares .pillar-cards{gap:clamp(16px,calc(1.8vw / var(--z,1)),24px)}
.home-pilares .pillar-card{
  padding:clamp(30px,calc(3vw / var(--z,1)),42px) clamp(24px,calc(2.4vw / var(--z,1)),34px) clamp(30px,calc(3vw / var(--z,1)),40px);
  background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--pale-blue) 18%,#fff) 100%);
  border-color:rgba(var(--shadow-rgb),.08);
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05),0 24px 48px -26px rgba(var(--shadow-rgb),.38);
}
.home-pilares .pillar-card h3{font-size:clamp(20px,calc(1.65vw / var(--z,1)),23px)}
.home-pilares .pillar-card p{max-width:34ch}
/* número: marca d'água vazada */
.home-pilares .pillar-num{
  top:14px;right:18px;font-size:clamp(46px,calc(4.4vw / var(--z,1)),64px);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(var(--line-rgb),.55);opacity:.75;
}
/* medalhão */
.home-pilares .pillar-orb{
  --pillar-orb:clamp(84px,calc(7vw / var(--z,1)),100px);
  margin:6px auto 24px;color:var(--accent-light);border:0;
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--brand) 70%,#2f7fa8) 0%,var(--brand) 42%,var(--dark) 100%);
  outline:1px solid rgba(var(--line-rgb),.45);outline-offset:6px;   /* o site.js anima de 0 a 6px na entrada */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -10px 20px rgba(0,20,32,.35),0 20px 36px -16px rgba(0,43,68,.6);
}
.home-pilares .pillar-orb::before{ /* halo que respira */
  inset:-22px;filter:blur(10px);opacity:.9;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.34) 0%,rgba(var(--line-rgb),.18) 45%,transparent 70%);
  animation:px-halo 3.8s ease-in-out infinite;
}
.home-pilares .pillar-orb::after{ /* anel de luz que gira em volta do disco */
  content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(127,209,195,.95) 60deg,rgba(169,203,230,.6) 110deg,transparent 160deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:px-spin 7s linear infinite;
}
.home-pilares .pillar-cards > li:nth-child(2) .pillar-orb::after{animation-delay:-2.3s}
.home-pilares .pillar-cards > li:nth-child(3) .pillar-orb::after{animation-delay:-4.6s}
.home-pilares .pillar-cards > li:nth-child(2) .pillar-orb::before{animation-delay:-1.2s}
.home-pilares .pillar-cards > li:nth-child(3) .pillar-orb::before{animation-delay:-2.4s}
@keyframes px-spin{to{transform:rotate(360deg)}}
@keyframes px-halo{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}
@media (hover:hover){
  .home-pilares .pillar-card:hover .pillar-orb{outline-offset:10px;outline-color:rgba(var(--accent-rgb),.55)}
  .home-pilares .pillar-card:hover .pillar-orb .ico{transform:scale(1.08)}
}
.home-pilares .pillar-orb .ico{transition:transform .5s cubic-bezier(.34,1.4,.64,1)}

/* ícones (desenho de 48×48 em duas camadas): traço verde-água + preenchimento suave (.px-soft),
   partes cheias (.px-fill), brilho do olho e check escuro no selo. Gestos em loop, só em <g>. */
.home-pilares .pillar-orb .ico.px-ico{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-pilares .pillar-orb .ico.px-ico{width:clamp(42px,calc(3.5vw / var(--z,1)),52px);height:clamp(42px,calc(3.5vw / var(--z,1)),52px)}
.px-soft{fill:currentColor;fill-opacity:.15}
.px-fill{fill:currentColor;stroke:none}
.px-glint{fill:#fff;fill-opacity:.9;stroke:none}
.px-front{fill:color-mix(in srgb,var(--brand) 88%,var(--dark))}
.px-back{opacity:.6}
.px-text{stroke-opacity:.75}
.px-on{stroke:var(--dark);stroke-width:2.6}
.home-pilares .pillar-orb svg g{transform-box:view-box}
.px-lid{transform-origin:24px 24px;animation:px-blink 5.2s ease-in-out infinite}
.px-pupil{animation:px-look 5.2s ease-in-out infinite}
.px-back{transform-origin:30px 18px;animation:px-float 4.2s ease-in-out infinite}
.px-dot{animation:px-type 1.5s ease-in-out infinite}
.px-dot:nth-of-type(2){animation-delay:.18s}
.px-dot:nth-of-type(3){animation-delay:.36s}
.px-scan{animation:px-scan 3.6s ease-in-out infinite}
.px-badge{transform-origin:34px 35px;animation:px-confirm 3.6s ease-in-out infinite}
@keyframes px-blink{0%,40%,46%,100%{transform:scaleY(1)}43%{transform:scaleY(.06)}}
@keyframes px-look{0%,12%,100%{transform:translateX(0)}20%,34%{transform:translateX(-3px)}48%,62%{transform:translateX(3px)}74%{transform:translateX(0)}}
@keyframes px-float{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-1.5px)}}
@keyframes px-type{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-2.6px);opacity:1}}
@keyframes px-scan{0%{transform:translateY(0);opacity:0}12%{opacity:1}55%{transform:translateY(18px);opacity:1}68%,100%{transform:translateY(18px);opacity:0}}
@keyframes px-confirm{0%,55%,100%{transform:scale(1)}63%{transform:scale(1.16)}72%{transform:scale(.96)}80%{transform:scale(1)}}

/* celular: cards centralizados, medalhão em cima (no lugar do ícone pequeno ao lado do título) */
@media (max-width:767px){
  .home-pilares .pillar-card{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:30px 22px 28px}
  .home-pilares .pillar-card > h3{grid-column:auto;padding-right:0}
  .home-pilares .pillar-orb{--pillar-orb:84px;margin:4px auto 20px;outline-offset:7px}
  .home-pilares .pillar-num{font-size:46px;top:12px;right:14px}
}