/* Área do Paciente — extensão de style.css, MESMOS tokens da pele RISORTO
   (--red/--green/--graphite/--ink/--paper/--mist/--red-ink), sem paleta própria.
   Reskin 22/07: tokens antigos (--wine/--cream/--gold/--gold-text/--wine-deep/--font-display)
   não existem mais em style.css — ficaram órfãos e quebravam esta página inteira (cores caindo
   pro preto/system-ui default do navegador). Corrigido de ponta a ponta nesta revisão. */

.crumb{ font-size: .82rem; opacity: .55; padding-block: 1rem; }
.crumb a{ text-decoration: underline; text-underline-offset: 2px; }
.nav-pill-active{ background: var(--red); color: var(--paper); padding: .5rem 1rem; border-radius: 4px; }

.ap-hero{ padding-block: clamp(3rem,4vw,4.5rem) clamp(3.5rem,5vw,5.5rem); }
/* h1 em UMA cor só (--ink), como todo título do site: nunca acento vermelho numa palavra do
   título (regra dura do DESIGN.md, reprovada 2x antes) — a ênfase do "orientação clara" vem
   só do texto, não de cor. */
.ap-hero h1{ font-size: clamp(2rem,1.5rem+2.2vw,3.2rem); color: var(--ink); max-width: 16ch; margin-block: .9rem 1.25rem; }
.ap-hero .ital{ font-style: normal; }
.ap-hero .lede{ max-width: 52ch; font-size: 1.08rem; opacity: .85; margin-bottom: 2rem; }

.local-links{ display: flex; flex-wrap: wrap; gap: .6rem; }
.local-links a{
  font-size: .85rem; font-weight: 600; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid rgba(43,44,46,.15); color: var(--ink); opacity: .75;
  transition: background .25s, opacity .25s, border-color .25s;
}
.local-links a:hover{ opacity: 1; background: rgba(225,38,45,.06); border-color: var(--red); }
.local-links a.featured{ background: var(--red); color: var(--paper); border-color: var(--red); opacity: 1; }
.local-links a.featured:hover{ background: var(--red-ink); }

.ap-intro{ max-width: 58ch; font-size: 1.02rem; opacity: .85; margin-bottom: clamp(2rem,3vw,2.75rem); }
.ap-intro-invert{ color: var(--paper); opacity: .82; }

/* Fotos reais (Trilho C, aprovadas pelo Founder 22/07) — respiro humano logo após o hero,
   antes da grade de FAQ. Mesmo padrão background-image/cover das divs de tratamentos. */
.ap-photos{ padding-block: 0 clamp(2rem,3vw,3rem); }
.ap-photos-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: rgba(43,44,46,.08); }
.ap-photo{ aspect-ratio: 3/2; margin: 0; background: var(--mist); background-size: cover; background-position: center; }
[data-img-slot="paciente-rotina"]{ background-image: url('../assets/tratamentos/paciente-rotina.webp'); }
[data-img-slot="paciente-confianca"]{ background-image: url('../assets/tratamentos/paciente-confianca.webp'); }
@media (max-width: 560px){ .ap-photos-grid{ grid-template-columns: 1fr; } }

.benefit-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5px; background: rgba(43,44,46,.08); }
.benefit-grid-3{ grid-template-columns: repeat(3, 1fr); }
.benefit-card{ background: var(--paper); padding: clamp(1.5rem,2vw,2rem); }
.benefit-card h3{ font-size: 1.05rem; color: var(--red-ink); margin-bottom: .6rem; }
.benefit-card p{ font-size: .92rem; opacity: .82; }

/* callout de dica: verde como 2ª voz pontual (apoio/positivo, ver DESIGN.md), sem side-tab
   grosso — só um tom de fundo suave, mais discreto que uma borda espessa. */
.ap-note{
  margin-top: clamp(1.5rem,2vw,2rem); padding: 1.25rem 1.5rem; border-radius: 4px;
  background: rgba(31,196,110,.08);
  font-size: .95rem;
}
.ap-note p{ opacity: .9; }

.faq-list{ display: flex; flex-direction: column; gap: 1px; background: rgba(43,44,46,.08); max-width: 72ch; }
.faq-item{ background: var(--paper); padding: 1.25rem 1.5rem; }
.faq-item summary{
  font-weight: 600; color: var(--red-ink); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: '+'; font-size: 1.3rem; color: var(--red-ink); flex-shrink: 0; transition: transform .25s; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: .9rem; font-size: .95rem; opacity: .85; max-width: 60ch; }

/* ===== Calendário de troca — utilitário, não é "palco vermelho" (o único palco vermelho
   do site inteiro é o Agendamento na home); fundo grafite escuro + verde como 2ª voz. ===== */
.section-dark{ background: var(--ink); color: var(--paper); }
.section-dark .kicker{ color: var(--green); }

.cal{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,3vw,3.5rem); align-items: start; }
.cal-form{ display: flex; flex-direction: column; gap: 1.1rem; }
.fld{ display: flex; flex-direction: column; gap: .4rem; }
.fld label{ font-size: .85rem; font-weight: 600; color: var(--green); }
.fld input{
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
  color: var(--paper); padding: .75rem .9rem; font-family: var(--font-ui); font-size: 1rem;
}
.fld input:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.cal-hint{ font-size: .82rem; opacity: .7; max-width: 46ch; }
.cal-out h3{ font-size: 1.1rem; margin-bottom: 1.1rem; }
.cal-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-list li{
  display: flex; justify-content: space-between; align-items: baseline;
  background: rgba(255,255,255,.06); padding: .9rem 1.1rem; font-size: .95rem;
}
.cal-list li.next{ background: var(--green); color: var(--ink); font-weight: 700; border-radius: 4px; }
.cal-list .lbl{ opacity: .85; }
.cal-list li.next .lbl{ opacity: 1; }
.cal-list .w{ opacity: .6; font-size: .85rem; text-transform: capitalize; }
.cal-empty{ opacity: .6; font-size: .9rem; }

.contato-card{
  max-width: 640px; display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.75rem,2.5vw,2.5rem); border: 1px solid rgba(43,44,46,.12); border-radius: 4px;
}
.contato-row{ display: flex; justify-content: space-between; border-bottom: 1px solid rgba(43,44,46,.08); padding-bottom: 1rem; }
.contato-row h4{ font-size: .9rem; color: var(--red-ink); font-weight: 600; }
.contato-row p{ font-size: .95rem; }
.contato-row a{ text-decoration: underline; text-underline-offset: 3px; }
.btn-full{ width: 100%; justify-content: center; }

@media (max-width: 860px){
  .benefit-grid, .benefit-grid-3{ grid-template-columns: 1fr 1fr; }
  .cal{ grid-template-columns: 1fr; }
  .contato-row{ flex-direction: column; gap: .3rem; }
}
@media (max-width: 560px){
  .benefit-grid, .benefit-grid-3{ grid-template-columns: 1fr; }
}