/* saude-1-clinica — só o que não está no base.css. */

/* Hero mais claro que o padrão do design system: overlay muito escuro passa
   ideia de ambiente fechado — o oposto do que uma clínica quer comunicar. */
.hero{ min-height:clamp(420px, 60vh, 560px); }
.hero__overlay{
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--color-dark) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-dark) 35%, transparent) 62%,
    transparent 100%);
}

/* Linha do responsável técnico: discreta, mas legível. Exigência do conselho. */
.footer__rt{
  margin:1.5rem 0 0; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; color:rgba(255,255,255,.72);
}

/* Convênios sobre fundo alternado ganham contraste do card branco. */
.section--alt .convenios li{ background:#fff; }

/* Contato: coluna com o cartão de endereço/horário empilhado sobre o
   formulário, ao lado do mapa. .units já é o grid de duas colunas usado
   pelo contato — aqui só o empilhamento interno da coluna esquerda. */
.contact-col{ display:grid; gap:1.5rem; align-content:start; }
.units{ grid-template-columns:1fr 1fr; align-items:stretch; }
.units iframe{ min-height:340px; }
/* Sem isto, o item de grid (a coluna inteira, ou o <iframe> do mapa dentro
   dela — replaced element com width em porcentagem) calcula um min-content
   maior que a faixa disponível e estoura — o bug clássico de "grid blowout"
   quando um item de grid não recebe min-width:0. Cobre os dois níveis de
   grid usados no contato (.units e .contact-col). */
.units > *, .contact-col > *{ min-width:0; }
@media (max-width:900px){ .units{ grid-template-columns:1fr; } }

/* Cartão de endereço/horário sobre o fundo escuro do contato — mesmo
   tratamento usado nos outros templates da agência para esse par de classes. */
.section--dark .unit-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.section--dark .unit-card__row{ color:rgba(255,255,255,.75); }
.section--dark .unit-card__row strong{ color:#fff; }

/* ===== Dr. José Garcia — adaptação para profissional único ===== */

/* Fundo alternado em areia (secundária) em vez do cinza padrão. */
:root{ --color-bg-alt: color-mix(in srgb, var(--color-secondary) 55%, #fff); }
.card__icon{ background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }

/* Hero: retrato vertical à direita, fundo escuro contínuo (a foto tem fundo escuro). */
.hero{ min-height:clamp(520px, 78vh, 700px); }
.hero__bg{ left:auto; right:0; width:min(52%, 640px); object-position:center 18%; }
.hero__overlay{ background:
  linear-gradient(90deg, var(--color-dark) 0%, var(--color-dark) 45%, color-mix(in srgb, var(--color-dark) 30%, transparent) 70%, transparent 100%),
  linear-gradient(0deg, var(--color-dark) 0%, transparent 35%); }
.hero__content{ max-width:620px; }
.hero__eyebrow{ display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:1rem; }
.hero__badge{ border-left:2px solid var(--color-accent); padding-left:.6rem; }
@media (max-width:900px){
  .hero__bg{ width:100%; opacity:.45; object-position:center 15%; }
  .hero__overlay{ background:linear-gradient(0deg, var(--color-dark) 10%, color-mix(in srgb, var(--color-dark) 55%, transparent) 100%); }
}

/* Texto + foto lado a lado. */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
.split--reverse{ grid-template-columns:.85fr 1.15fr; }
.split > *{ min-width:0; }
.split h2{ font-size:clamp(1.8rem, 3vw, 2.5rem); }
.split__img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
@media (max-width:900px){ .split, .split--reverse{ grid-template-columns:1fr; } .split__img{ max-width:420px; justify-self:center; } }
.lead{ font-size:1.1rem; color:var(--color-text-muted); }
.note{ margin-top:1.5rem; font-size:.95rem; color:var(--color-text-muted); border-left:3px solid var(--color-accent); padding-left:1rem; }
.about-reg{ font-weight:600; color:var(--color-primary); }
.values{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.values li{ font-size:.82rem; font-weight:700; letter-spacing:.04em; padding:.4rem .9rem; border-radius:999px;
  background:var(--color-primary); color:#fff; }

/* Método Evo-4: fases numeradas em bronze. */
.evo .timeline__item::before{ background:var(--color-accent); }
.evo .timeline__item{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius);
  padding:3.75rem 1.4rem 1.5rem; }
.evo .timeline__item::before{ left:1.4rem; top:1.25rem; }
.evo .timeline__item::after{ display:none; }
.evo-extra{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; margin-top:clamp(2.5rem, 5vw, 4rem); }
.evo-extra > *{ min-width:0; }
.evo-photos{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.evo-photos img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
.evo-photos figcaption{ grid-column:1 / -1; font-size:.88rem; color:var(--color-text-muted); }
.check-list{ display:grid; gap:.7rem; margin:1rem 0 1.75rem; }
.check-list li{ position:relative; padding-left:1.8rem; }
.check-list li::before{ content:""; position:absolute; left:0; top:.35rem; width:1rem; height:.55rem;
  border-left:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent); transform:rotate(-45deg); }
@media (max-width:900px){ .evo-extra{ grid-template-columns:1fr; } }

/* Como agendar: 3 passos ocupam a linha toda. */
@media (min-width:900px){ .timeline--3{ grid-template-columns:repeat(3,1fr); } }

.stats span{ font-size:.92rem; }

/* Rodapé: o template usa h3 e o base.css só estiliza h4 — sem isto os títulos
   ficam quase-pretos sobre o fundo escuro. Grade de 3 colunas (template tem 3 blocos). */
.footer h3{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer .grid{ grid-template-columns:1.6fr 1fr 1fr; }
@media (max-width:900px){ .footer .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer .grid{ grid-template-columns:1fr; } }
.footer__logo{ height:44px; width:auto; margin-bottom:1rem; }

/* Contato sobre fundo escuro: formulário é cartão branco, então o rótulo
   não pode herdar o branco da seção; selo e texto de apoio precisam de contraste. */
.lead-form label{ color:var(--color-text); }
.section--dark .eyebrow{ color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 16%, transparent); }
.section--dark .section-head p{ color:rgba(255,255,255,.75); }

/* História de paciente (autorização confirmada pelo cliente em 14/10/2026).
   Fotos inteiras, sem recorte agressivo: a norma do CFM veda edição. */
.patient-text{ color:rgba(255,255,255,.82); font-size:1.08rem; }
.patient-legal{ margin-top:1.5rem; font-size:.78rem; color:rgba(255,255,255,.55); }
.patient-photos img{ height:auto; aspect-ratio:3/4; object-position:center top; }
.section--dark .before-after figcaption{ color:rgba(255,255,255,.7); }
@media (max-width:640px){ .patient-photos img{ height:auto; } }
#paciente .split{ grid-template-columns:1fr 1.1fr; }
@media (max-width:900px){ #paciente .split{ grid-template-columns:1fr; } }

/* Destaque ao passar o mouse: Método Evo-4 e Como agendar. */
.evo .timeline__item,
#agendar .timeline__item{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.timeline__item::before{ transition:transform .3s ease, background .3s ease; }
.timeline__item h3{ transition:color .3s ease; }
#agendar .timeline__item{ border-radius:var(--radius); padding:1.25rem 1.25rem 1.25rem 4.5rem; margin:-1.25rem; }
#agendar .timeline__item::before{ left:1.25rem; top:1.25rem; }
@media (hover:hover){
  .evo .timeline__item:hover{ transform:scale(1.04); box-shadow:var(--shadow-lg); border-color:var(--color-accent); }
  #agendar .timeline__item:hover{ transform:scale(1.04); background:#fff; box-shadow:var(--shadow-lg); }
  .evo .timeline__item:hover::before,
  #agendar .timeline__item:hover::before{ transform:scale(1.15); background:var(--color-primary); }
  .evo .timeline__item:hover h3,
  #agendar .timeline__item:hover h3{ color:var(--color-primary); }
}
@media (prefers-reduced-motion:reduce){
  .evo .timeline__item:hover, #agendar .timeline__item:hover{ transform:none; }
}

/* Contato com duas unidades, cada uma com o próprio mapa. */
.locations{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.location{ display:grid; grid-template-rows:auto 1fr; gap:1rem; min-width:0; }
.location iframe{ width:100%; min-height:300px; border:0; border-radius:16px; }
.location__route{ display:inline-block; margin-top:.75rem; font-weight:700; font-size:.9rem; color:var(--color-accent); }
.location__route:hover{ color:#fff; }
.contact-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; align-items:start; }
.contact-bottom > *{ min-width:0; }
.contact-wa .btn{ margin-top:1rem; }
@media (max-width:900px){ .locations, .contact-bottom{ grid-template-columns:1fr; } }
/* Sem formulário: só o cartão de WhatsApp, centralizado abaixo dos mapas. */
.contact-bottom{ grid-template-columns:minmax(0, 640px); justify-content:center; text-align:center; }
@media (max-width:900px){ .contact-bottom{ grid-template-columns:1fr; } }

/* Perguntas frequentes (vindas do site anterior do Dr. José). */
#faq .faq{ max-width:820px; margin:0 auto; }
.faq__item{ transition:border-color .2s ease, box-shadow .2s ease; }
.faq__item[open]{ border-color:var(--color-accent); box-shadow:var(--shadow); }
.faq__item summary::after{ color:var(--color-accent); }