/* ======================================================================
   ALTO CUSTO — Home (Paciente) · camada editorial "v2"
   Ousado no ofício, calmo no tom. Estende site.css; só nesta página.
   ====================================================================== */

/* ---------------------------------------------------------------------
   1. RITMO DE SEÇÃO — cabeçalhos com índice editorial
   Numera as seções (01–06) ao lado do eyebrow, dando cadência de revista.
   --------------------------------------------------------------------- */
body.p-paciente{counter-reset:sec}
body.p-paciente section.fade-in .sec-head .eyebrow{counter-increment:sec;position:relative}
body.p-paciente .sec-head .eyebrow::after{
  content:counter(sec,decimal-leading-zero);
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--cinza-claro);
}
body.p-paciente .sec-head:not(.center) .eyebrow{display:flex;align-items:center;width:100%;max-width:none}

/* títulos de seção com um respiro maior e um pouco mais de presença */
body.p-paciente .sec-head h2{font-size:clamp(2rem,4.1vw,3.1rem);line-height:1.05}

/* ---------------------------------------------------------------------
   2. DÚVIDAS — lista editorial numerada (substitui o grid de cards)
   --------------------------------------------------------------------- */
.p-paciente .qna{list-style:none;margin-top:10px;border-top:1px solid #E6D8C2}
.p-paciente .qna li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(20px,4vw,56px);
  padding:clamp(24px,3.4vw,38px) 0;
  border-bottom:1px solid #E6D8C2;
  align-items:baseline;
}
.p-paciente .qna .qn{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--accent);
}
.p-paciente .qna .qbody h3{
  font-size:clamp(1.35rem,2.5vw,2rem);
  line-height:1.12;
  color:var(--tinta);
  font-weight:400;
  margin-bottom:10px;
  letter-spacing:-.02em;
}
.p-paciente .qna .qbody p{color:var(--grafite);font-size:1.07rem;max-width:62ch}
@media(max-width:620px){
  .p-paciente .qna li{grid-template-columns:1fr;gap:6px}
  .p-paciente .qna .qn{font-size:12px}
}

/* ---------------------------------------------------------------------
   3. STAT STRIP — escala dramática, divisores finos, labels em mono
   --------------------------------------------------------------------- */
.p-paciente .stat-strip{
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:8px 0 0;
  border-top:1px solid #E2D4BC;
}
.p-paciente .stat{
  padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,34px) clamp(26px,3vw,34px) 0;
  border-right:1px solid #E2D4BC;
}
.p-paciente .stat:last-child{border-right:none}
.p-paciente .stat .big{
  font-family:var(--serif);
  font-size:clamp(3.1rem,6.6vw,5.4rem);
  line-height:.92;
  font-weight:400;
  letter-spacing:-.035em;
  color:var(--accent-ink);
}
.p-paciente .stat .lbl{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  line-height:1.55;
  text-transform:none;
  color:var(--cinza);
  margin-top:16px;
  max-width:24ch;
}
@media(max-width:760px){
  .p-paciente .stat-strip{grid-template-columns:1fr}
  .p-paciente .stat{
    border-right:none;
    border-bottom:1px solid #E2D4BC;
    padding:24px 0;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:20px;
    align-items:center;
  }
  .p-paciente .stat:last-child{border-bottom:none}
  .p-paciente .stat .lbl{margin-top:0;max-width:30ch}
}

/* ---------------------------------------------------------------------
   4. COMO AJUDA — numerais grandes editoriais no lugar do badge-círculo
   --------------------------------------------------------------------- */
.p-paciente .steps{gap:clamp(18px,2.2vw,26px)}
.p-paciente .step{
  background:#FBF5EA;
  border:1px solid #EADFCB;
  border-radius:20px;
  padding:clamp(28px,3vw,38px) clamp(26px,2.6vw,34px) clamp(30px,3vw,36px);
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .24s ease, border-color .24s ease;
}
.p-paciente .step:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px -26px rgba(60,40,20,.5);
  border-color:#E0CDAE;
}
.p-paciente .step .n{
  font-family:var(--serif);
  font-size:clamp(2.8rem,4.2vw,3.6rem);
  line-height:1;
  font-weight:400;
  color:var(--accent);
  background:none;
  width:auto;height:auto;
  border-radius:0;
  display:block;
  margin-bottom:14px;
  letter-spacing:-.02em;
}
.p-paciente .step .n::after{content:"";display:block;width:34px;height:2px;background:var(--accent);border-radius:2px;margin-top:16px;opacity:.5}
.p-paciente .step h3{font-size:1.34rem;letter-spacing:-.018em}

/* ---------------------------------------------------------------------
   5. DEPOIMENTOS — citação maior, aspa gráfica, hover com elevação
   --------------------------------------------------------------------- */
.p-paciente .quote{
  border-radius:20px;
  padding:clamp(30px,3vw,40px) clamp(30px,3vw,38px) clamp(28px,3vw,34px);
  position:relative;
  transition:transform .2s ease, box-shadow .24s ease, border-color .24s ease;
}
.p-paciente .quote::before{
  content:"\201C";
  position:absolute;
  top:6px;left:24px;
  font-family:var(--serif);
  font-size:5.4rem;
  line-height:1;
  color:var(--accent);
  opacity:.16;
  pointer-events:none;
}
.p-paciente .quote:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 54px -28px rgba(60,40,20,.5);
  border-color:#E0CDAE;
}
.p-paciente .quote .q{position:relative;font-size:1.22rem;line-height:1.52}

/* ---------------------------------------------------------------------
   6. OUTROS PÚBLICOS — tiles editoriais; seta desliza no hover
   --------------------------------------------------------------------- */
.p-paciente .aud{
  border-radius:18px;
  padding:28px 26px;
  transition:transform .2s ease, box-shadow .24s ease, border-color .24s ease;
}
.p-paciente .aud .ic{border-radius:13px}
.p-paciente .aud:hover{transform:translateY(-5px);border-color:#E0CDAE}
.p-paciente .aud .go svg{transition:transform .2s ease}
.p-paciente .aud:hover .go svg{transform:translateX(4px)}

/* ---------------------------------------------------------------------
   7. CHECKLIST — marca-d'água da cápsula no item, leitura mais arejada
   --------------------------------------------------------------------- */
.p-paciente .checklist li{align-items:baseline}
.p-paciente .checklist .tx{font-size:1.06rem;line-height:1.55}

/* ---------------------------------------------------------------------
   8. REVEAL ESCALONADO — filhos entram em sequência (sutil, calmo)
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .p-paciente .qna li,
  .p-paciente .steps > *,
  .p-paciente .quotes > *,
  .p-paciente .stat-strip > *,
  .p-paciente .checklist > *,
  .p-paciente .aud-grid > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .p-paciente .fade-in.in .qna li,
  .p-paciente .fade-in.in .steps > *,
  .p-paciente .fade-in.in .quotes > *,
  .p-paciente .fade-in.in .stat-strip > *,
  .p-paciente .fade-in.in .checklist > *,
  .p-paciente .fade-in.in .aud-grid > *{
    opacity:1;
    transform:none;
  }
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(1){transition-delay:.04s}
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(2){transition-delay:.12s}
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(3){transition-delay:.20s}
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(4){transition-delay:.28s}
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(5){transition-delay:.36s}
  .p-paciente .fade-in.in :is(.qna li,.steps>*,.quotes>*,.stat-strip>*,.checklist>*,.aud-grid>*):nth-child(6){transition-delay:.44s}
}

/* ---------------------------------------------------------------------
   9. ACABAMENTO — hero sticker e foto um pouco mais confiantes
   --------------------------------------------------------------------- */
.p-paciente .hero-sticker{box-shadow:0 22px 48px -18px rgba(26,42,31,.5)}
.p-paciente .hero-photo{border-radius:8px 8px 160px 8px}