/* Revisão da prévia: rosé claro e petróleo dessaturado, 15/09/2026. */
:root{--rose:#dfc5c1;--rose-dark:#8a6562;--petrol:#3e6267;--deep-petrol:var(--petrol);--soft-petrol:var(--petrol)}
header,header.fixed{background:var(--petrol)}
.hero,.hero>.fluid-layer{background:#dfc5c1}
.hero{margin-top:0;height:100svh}
.hero-shade{background:none}
.hero-still{left:30%;top:auto;bottom:35px;height:calc(100% - 35px);width:auto;object-fit:contain;transform:scaleX(-1);mask-image:none;-webkit-mask-image:none}
.hero-kicker{top:112px}
.hero h1{top:150px}
.hero-foot{background:#edddD5dc}
.hero-buttons .button.filled,.other-procedures .button{background:var(--petrol)}
.hero-buttons .button.filled:hover{background:var(--petrol)}
.treatment-label.rose,.care.section,.featured-area{background:#dfc5c1}
.treatment-label.petrol,.featured-area:nth-child(2),.technology.section{background:var(--petrol)}
.about.section,.about-fluid{background:var(--petrol)}
/* Um único campo fluido contínuo por trás de Tecnologia e Doutora. */
.petrol-sections{position:relative;isolation:isolate;background:var(--petrol)}
.petrol-sections>.petrol-fluid{background:var(--petrol);pointer-events:none}
.petrol-sections>.technology.section,.petrol-sections>.about.section{position:relative;z-index:1;background:transparent}
.about-motion-control{background:#3e6267cc}
.about-copy .about-statement{color:#f1dcd5}
.about .button.filled,.tech-intro .button{background:#dfc5c1;color:var(--petrol)}
.about .button.filled:hover{background:#eddbd6}
.tech-resources article>span{color:#dfc5c1}
.tech-art i{border-color:#dfc5c1}
.tech-intro>p:not(.section-index),.tech-resources p,footer,footer p{color:#edf1ee}
.about .about-copy>p:not(.section-kicker),.about .credentials li span{color:#f1f4f1}
.about .credentials li strong{color:#f2ded4}
#area-dialog{--modal-bg:var(--petrol);--modal-accent:#efdad3}
#area-dialog[data-tone="rose"]{--modal-bg:#dfc5c1}
/* O nome ocupa menos altura; o retrato aparece inteiro na coluna. */
.care-grid p{font-size:18px;line-height:1.55}
@media(max-width:1100px){.care-grid p{font-size:17px}}
@media(max-width:700px){.care-grid p{font-size:16px}}
@media(min-width:901px){
 .about.section{padding-top:60px;grid-template-rows:auto 1fr;align-items:start}
 .about-heading{grid-row:1;margin-bottom:14px}
 .about-heading #doctor-name{font-size:clamp(64px,5.4vw,90px);min-height:0;line-height:.86;top:0}
 .about-photo{grid-column:1;grid-row:2;min-height:0;align-self:end;width:min(100%,420px);max-width:520px;justify-self:start;overflow:hidden;margin:0}
 .about-photo img{position:static;width:100%;height:auto;max-width:100%;max-height:none;transform:none!important;object-fit:contain}
 .about-copy{grid-column:2;grid-row:1/3;align-self:center;padding:0;transform:translateY(-30px)}
 .about-copy .about-statement{font-size:clamp(34px,3.2vw,50px)}
 .about .about-copy>p:not(.section-kicker){font-size:17px;line-height:1.6;margin-bottom:18px}
}
@media(min-width:701px) and (max-width:900px){
 .hero-still{left:30%;height:calc(100% - 35px)}
 .about-heading{grid-row:1}
 .about-photo{grid-row:3;width:min(100%,440px);margin:20px auto 0}
 .about-copy{grid-row:2}
}
@media(max-width:700px){
 .other-procedures,.contact.section{grid-template-columns:minmax(0,1fr)}
 .other-procedures>div,.contact.section>div{min-width:0}
 .other-procedures .button{max-width:100%;white-space:normal;text-align:left}
 .hero{--mobile-hero-height:clamp(820px,calc(100svh - 60px),990px);height:var(--mobile-hero-height);min-height:0;max-height:none}
 .hero-still{left:calc(20px - (var(--mobile-hero-height) - 30px)*.2 + 10vw);height:calc(100% - 30px);bottom:30px;top:auto}
 .hero-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:22px;padding:0 24px calc(72px + 22vw)}
 .hero-kicker{top:103px}
 .hero h1{position:static;top:auto;flex:none;line-height:.84}
 #motion-control{bottom:calc(76px + 17.6vw)}
 .hero-note{position:static;top:auto;bottom:auto;width:190px;flex:none}
 .about-heading #doctor-name{font-size:64px}
 .about-heading #doctor-name .doctor-middle{font-size:58px;margin-left:18px}
 .about-heading #doctor-name .doctor-surname{font-size:60px}
 .about-copy{grid-row:2}
 .about-photo{grid-row:3;width:min(100%,400px);justify-self:center;margin:20px 0 0}
 .about-photo img{width:100%;height:auto;max-height:none}
}
@media(max-width:359px){
 .other-procedures h3,.contact h2{font-size:44px;overflow-wrap:break-word}
 .about-heading #doctor-name{font-size:56px}
 .about-heading #doctor-name .doctor-middle{font-size:50px}
 .about-heading #doctor-name .doctor-surname{font-size:52px}
 .hero-note{width:170px}
}
/* Cabeçalho flutuante e logo original da página 18 do Canva. */
body{background:var(--rose)}
html{scroll-padding-top:108px}
header#header,header#header.fixed{
 position:fixed;top:18px;left:50%;right:auto;transform:translateX(-50%);
 width:60%;height:76px;padding:10px 22px;gap:18px;border-radius:999px;
 background:#ffffff29;color:var(--petrol);border:1px solid #ffffff8c;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 box-shadow:0 4px 20px #3e62670a,inset 0 1px 0 #ffffff40;
 transition:background-color .55s ease,backdrop-filter .55s ease,-webkit-backdrop-filter .55s ease,box-shadow .55s ease;
}
header#header.fixed{background:#ffffff00;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);box-shadow:0 0 0 #3e626700,inset 0 1px 0 #ffffff00}
header#header .brand-logo{filter:brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(1098%) hue-rotate(138deg) brightness(94%) contrast(88%)}
header#header a,header#header a:hover,header#header a:focus-visible{color:var(--petrol)}
header#header .nav-book:hover{background:#ffffff33;color:var(--petrol)}
.brand{flex-direction:row;align-items:center;gap:12px;flex-shrink:0}
.brand-logo{display:block;width:74px;height:46px;object-fit:contain;filter:brightness(0) invert(1)}
.brand-wordmark{display:flex;flex-direction:column;gap:5px}
header .brand>.brand-wordmark,footer .brand>.brand-wordmark{font-size:16px;letter-spacing:0;font-weight:500}
.brand-wordmark small{font-size:6px;letter-spacing:2px}
header#header .desktop-nav{font-size:10px;gap:18px;white-space:nowrap}
header#header .header-actions{gap:10px;margin-left:auto;flex-shrink:0}
header#header .nav-book{font-size:9px;padding:11px 14px;white-space:nowrap;border-color:#3e626760}
header#header .menu-toggle{flex-shrink:0;color:var(--petrol);background:transparent;border-color:#3e626760}
header#header :focus-visible{outline-color:var(--petrol)}
#mobile-nav:not([hidden]){top:calc(100% + 12px);right:0;width:280px;border-radius:22px;background:#ffffffeb;color:var(--petrol);border:1px solid #ffffff80;backdrop-filter:blur(18px)}
#mobile-nav a{border-color:#3e626730}
@media(min-width:1251px){header#header .menu-toggle{display:none}}
@media(max-width:1250px){header#header .desktop-nav{display:none}}
@media(max-width:1100px){header#header,header#header.fixed{width:calc(100% - 40px)}}
@media(max-width:700px){
 header#header,header#header.fixed{top:12px;width:calc(100% - 24px);height:68px;padding:9px 18px;gap:10px}
 header#header .brand{gap:10px}
 header#header .brand-logo{width:62px;height:40px}
 header#header .brand>.brand-wordmark{font-size:16px}
 #mobile-nav:not([hidden]){width:100%}
 footer .brand{justify-content:center}
}
@media(max-width:359px){header#header .brand-logo{width:54px}header#header .brand>.brand-wordmark{font-size:14px}.brand-wordmark small{font-size:5px}}

/* O texto de apoio passa a seguir o título em fluxo, em vez de morar num
   `top:57%` fixo. Em tela larga e baixa (ultrawide 1907x930, por exemplo) o
   título chegava aos 154px de clamp e alcançava esse ponto, encavalando os
   dois. Agora a distância entre eles é sempre a mesma, em qualquer largura. */
@media(min-width:701px){
 .hero-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:150px 0 0}
 .hero h1{position:static;top:auto;margin-left:4%}
 .hero-note{position:static;top:auto;margin:44px 0 0 7%}
}
@media(min-width:701px) and (max-width:1100px){.hero-note{margin-left:5%}}
/* Em janela larga e baixa o título de 154px não cabia acima da tarja do rodapé:
   a altura da janela passa a limitar o tamanho, como a largura já limitava. */
@media(min-width:1101px){.hero h1{font-size:clamp(86px,min(8.1vw,17svh),154px)}}

/* O conjunto acompanha o retrato, preservando os deslocamentos entre linhas. */
#sobre .about-heading{width:min(100%,420px);justify-self:start}
#sobre .about-heading #doctor-name{position:relative;width:max-content;max-width:100%;margin-inline:auto;text-align:left;left:0}
@media(min-width:901px){#sobre .about-heading #doctor-name{left:6px}}
@media(min-width:701px) and (max-width:900px){#sobre .about-heading #doctor-name{left:-12px}}
@media(max-width:900px){#sobre .about-heading{width:min(100%,440px);justify-self:center}}
@media(max-width:700px){#sobre .about-heading{width:min(100%,400px)}}
header#header .brand-wordmark>span{text-transform:uppercase;letter-spacing:.5px}