:root{--mobile-portrait-surface:#b77a62;--mobile-portrait-shadow:0 10px 28px #6b443a33;--mobile-portrait-caption:linear-gradient(transparent,rgba(42,26,22,.55) 35%,rgba(42,26,22,.88));--mobile-portrait-caption-compact:linear-gradient(transparent,rgba(42,26,22,.82) 55%);--mobile-portrait-name:#fff;--mobile-portrait-specialty:#f6dccf;--mobile-portrait-registration:#f3e7df}
/* Topo do celular com a foto da médica em destaque. Só CSS: remover este arquivo volta ao layout anterior. */
@media(max-width:600px){
 .header{min-height:0;padding:14px 0 10px}
 .hero{padding-top:6px}
 .hero-copy{display:flex;flex-direction:column}
 .hero .eyebrow{display:none}
 /* O cartão da médica vira a foto grande, antes do título */
 .doctor-card{order:-1;position:relative;display:block;max-width:none;height:clamp(250px,40svh,360px);margin:0 0 22px;padding:0;gap:0;border:0;border-radius:170px 170px 24px 24px;overflow:hidden;background:var(--mobile-portrait-surface);box-shadow:var(--mobile-portrait-shadow)}
 .doctor-card img{width:100%;height:100%;border-radius:0;object-fit:cover;object-position:50% 18%}
 .doctor-card>div{position:absolute;inset:auto 0 0;padding:56px 22px 16px;background:var(--mobile-portrait-caption)}
 .doctor-card strong{font-size:27px;color:var(--mobile-portrait-name);margin-bottom:2px}
 .doctor-card span{font-size:15px;color:var(--mobile-portrait-specialty)}
 .doctor-card small{font-size:13px;color:var(--mobile-portrait-registration);margin-top:2px}
 .hero h1{font-size:40px;margin-bottom:12px}
 .hero h1 br:first-child{display:block}
 .hero .intro{margin-bottom:12px}
 .hero-meta{margin-top:0}
 .hero-mobile-booking{margin-top:18px}
}
/* Telas baixas: foto menor para o botão de agendar continuar visível sem rolar */
@media(max-width:600px) and (max-height:700px){.doctor-card{height:clamp(210px,34svh,250px)}.doctor-card img{object-position:50% 22%}.doctor-card>div{padding:30px 20px 12px;background:var(--mobile-portrait-caption-compact)}.doctor-card strong{font-size:24px}.hero h1{font-size:34px;margin-bottom:10px}.hero .intro{font-size:16px}.hero-mobile-booking{margin-top:14px}}
@media(max-width:380px){.wordmark{white-space:nowrap}.header .button,.header .small{white-space:nowrap;padding:10px 12px;gap:8px;font-size:13px}}
@media(max-width:350px){.header{grid-template-columns:minmax(0,1fr) auto}.wordmark{white-space:normal;font-size:16px}.hero h1{font-size:35px}.doctor-card{height:clamp(220px,36svh,300px)}}