
/* ================== Odontopar | Visual Storytelling 2026 ================== */
/* Fotografia com respiro editorial. Sem ícones/figuras genéricas sobre as fotos. */
.home-service-card {isolation:isolate;display:flex;flex-direction:column;min-height:415px}
.home-service-card .card-photo{display:block;width:calc(100% + 58px);max-width:none;height:202px;margin:-29px -29px 22px;object-fit:cover;object-position:center 40%;flex-shrink:0;filter:saturate(.89);transition:transform .6s ease}
.home-service-card:hover .card-photo{transform:scale(1.025)}
.home-service-card:not(.feature) h3{margin:16px 0 13px;line-height:1.12}
.home-service-card .card-link{margin-top:auto;padding-top:24px}
.home-service-card.feature{justify-content:flex-end;min-height:415px;overflow:hidden;padding:36px 42px;background:#143753}
.home-service-card.feature .card-photo{position:absolute;z-index:-2;inset:0 0 0 auto;margin:0;width:63%;height:100%;object-position:center;opacity:.92}
.home-service-card.feature::before{content:"";position:absolute;z-index:-1;inset:0;width:auto;height:auto;border-radius:0;right:0;top:0;transform:none!important;background:linear-gradient(90deg,#143753 0%,#143753 31%,rgba(20,55,83,.84) 52%,rgba(20,55,83,.14) 100%)}
.home-service-card.feature::after{display:none}
.home-service-card.feature .card-index{color:#c0e7f7;font-weight:800}
.home-service-card.feature h3{font-size:clamp(2rem,3.2vw,3.1rem);line-height:1.02;max-width:13ch;margin:16px 0}
.home-service-card.feature p{max-width:37ch;line-height:1.7;color:rgba(255,255,255,.85)}
.home-service-card.feature .card-link{width:min(100%,400px);padding-top:25px}

/* Alternate photography / text without turning sections into galleries. */
.family-photo-panel{min-height:535px;position:relative;overflow:hidden;border-radius:34px;background:#dfedf3;box-shadow:var(--shadow);isolation:isolate}
.family-photo-panel .family-panel-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 43%;filter:saturate(.90)}
.family-photo-panel::after{content:"";pointer-events:none;position:absolute;z-index:0;inset:38% 0 0;background:linear-gradient(0deg,rgba(12,42,63,.84),transparent)}
.family-photo-caption{position:absolute;z-index:2;bottom:0;padding:36px 34px;color:#fff}
.family-photo-caption p{font-size:clamp(1.42rem,2.2vw,2.18rem);line-height:1.15;letter-spacing:-.045em;font-weight:560;margin:0}
.family-photo-caption small{font-size:.83rem;display:block;margin-top:13px;color:rgba(255,255,255,.78)}
.home-proof-heading{display:grid;grid-template-columns:.98fr 1.02fr;gap:64px;align-items:center;margin-bottom:38px}
.home-proof-heading .h2{margin-bottom:0}
.home-proof-photo{margin:0;height:290px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-soft)}
.home-proof-photo img{height:100%;width:100%;object-fit:cover;object-position:center 40%}
.visual-card.has-real-photo::before,.visual-card.has-real-photo::after{display:none!important}
.actual-professional-photo .doctor-silhouette{display:none}
.band-photo{background-image:linear-gradient(90deg,#143753 0%,rgba(20,55,83,.96) 53%,rgba(20,55,83,.68)),var(--band-image);background-repeat:no-repeat;background-size:cover;background-position:center 37%}
.band-photo::after{display:none}

/* Subpage heroes: photo is integrated into brand gradient rather than a random card. */
.page-hero-photographic{isolation:isolate;min-height:475px;display:flex;align-items:center;background:#143753}
.page-hero-photographic .page-hero-photo{position:absolute;inset:0 0 0 auto;width:69%;height:100%;object-fit:cover;object-position:center 43%;opacity:.76;z-index:-2}
.page-hero-photographic::before{z-index:-1;background:linear-gradient(90deg,#143753 4%,rgba(20,55,83,.95) 37%,rgba(20,55,83,.65) 69%,rgba(20,55,83,.22) 100%)}
.page-hero-photographic .container{z-index:3}
.page-hero-photographic h1{max-width:15ch}
/* Existing centered title markup remains centered, with strong enough text contrast. */
.page-hero-photographic .container[style*="align-items: center"] h1{max-width:700px!important}
.page-hero-photographic .container[style*="align-items: center"] p{max-width:700px!important}

.quote-with-photo{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;overflow:hidden;background:#153b59;padding:34px;color:#fff}
.quote-with-photo .quote-photo{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 36%}
.quote-with-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,35,57,.94) 0%,rgba(11,35,57,.43) 54%,rgba(11,35,57,.04) 100%)}
.quote-with-photo p{font-size:clamp(1.35rem,2vw,2.05rem);line-height:1.16;color:#fff}
.quote-with-photo small{color:rgba(255,255,255,.83);font-size:.88rem}
.about-tech-thumb{display:block;width:calc(100% + 52px);max-width:none;margin:-26px -26px 20px;height:174px;object-fit:cover;object-position:center 40%;border-radius:18px 18px 8px 8px}
.about-tech-thumb + .card-index + h3{margin-top:18px}
/* Team portraits should read as original photography. */
.team-profile .doctor.actual-professional-photo{background-repeat:no-repeat}
.team-quote .quote-photo{object-position:center}

/* Photo in each service card is a restrained, purposeful thumbnail. */
.service-detail.service-photo-row{display:grid;grid-template-columns:180px 56px minmax(0,1fr) auto;align-items:center;gap:24px;padding:15px 24px 15px 15px;min-height:178px;overflow:hidden}
.service-photo-row .service-thumb{width:180px;height:145px;object-fit:cover;object-position:center 36%;border-radius:15px;background:#e0edf5;filter:saturate(.91)}
.service-photo-row .num{align-self:center;color:#83a0b3}
.service-photo-row h3{font-size:1.38rem;line-height:1.15}
.service-photo-row .mini-cta{align-self:center}
.article-photo{width:100%;height:100%;object-fit:cover;object-position:center 36%}
.article-thumb::before{display:none}

/* Contact: real team photo, never replacing unconfirmed location/map. */
.contact-photo-band{max-width:1240px;width:calc(100% - 48px);margin:55px auto 0;min-height:315px;position:relative;border-radius:30px;overflow:hidden;background:#d9e9f2;box-shadow:var(--shadow-soft)}
.contact-photo-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.contact-photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,44,67,.87),rgba(13,44,67,.12) 84%)}
.contact-photo-note{position:relative;z-index:2;padding:58px 48px;max-width:560px}
.contact-photo-note .kicker{color:#7bd9f1}
.contact-photo-note strong{display:block;color:#fff;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.05;letter-spacing:-.05em;margin-top:20px;font-weight:550}

/* Landing pages: emotion / planning visual rhythm, original texts unchanged. */
.lp-emotion-photo{min-height:450px}
.lp-visual-transition{position:relative;min-height:340px;margin-top:0;margin-bottom:58px;overflow:hidden;border-radius:30px;box-shadow:var(--shadow-soft)}
.lp-visual-transition>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.lp-visual-transition::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,44,69,.93),rgba(10,44,69,.46) 47%,transparent)}
.lp-transition-label{position:relative;z-index:1;padding:100px 55px;color:#fff;max-width:590px}
.lp-transition-label strong{display:block;font-size:clamp(1.7rem,3vw,3.05rem);line-height:1.05;letter-spacing:-.05em;font-weight:550}
.lp-transition-label span{display:block;font-size:1rem;margin-top:14px;color:rgba(255,255,255,.86)}

@media(max-width:1080px){
 .home-proof-heading{grid-template-columns:1fr;gap:25px}.home-proof-photo{height:310px}
 .service-detail.service-photo-row{grid-template-columns:140px 40px minmax(0,1fr) auto;gap:17px}
 .service-photo-row .service-thumb{width:140px;height:145px}
}
@media(max-width:720px){
 .home-service-card.feature{min-height:460px;padding:28px}
 .home-service-card.feature .card-photo{width:100%;opacity:.7}
 .home-service-card.feature::before{background:linear-gradient(0deg,#143753 0%,rgba(20,55,83,.91) 47%,rgba(20,55,83,.18) 100%)}
 .home-service-card.feature h3{font-size:2.1rem}
 .home-service-card.feature p{font-size:.87rem}
 .family-photo-panel{min-height:485px}.family-photo-caption{padding:25px}
 .home-proof-photo{height:245px}
 .page-hero-photographic{min-height:440px;padding-top:155px;padding-bottom:80px}
 .page-hero-photographic .page-hero-photo{width:100%;opacity:.47;object-position:center}
 .page-hero-photographic::before{background:linear-gradient(90deg,rgba(20,55,83,.94),rgba(20,55,83,.60))}
 .page-hero-photographic .container[style*="align-items: center"] h1,.page-hero-photographic .container[style*="align-items: center"] p{max-width:100%!important}
 .quote-with-photo{min-height:390px;padding:26px}
 .service-detail.service-photo-row{grid-template-columns:99px 1fr auto;grid-template-areas:"photo text action";gap:12px;padding:12px;min-height:160px}
 .service-photo-row .service-thumb{grid-area:photo;width:99px;height:132px;border-radius:12px}
 .service-photo-row .num{display:none}
 .service-photo-row > div:not(.num){grid-area:text}
 .service-photo-row h3{font-size:1.08rem;margin:0 0 7px}
 .service-photo-row p{font-size:.79rem;line-height:1.45}
 .service-photo-row .card-link{margin-top:7px!important;font-size:.65rem}
 .service-photo-row .card-link i{display:none}
 .service-photo-row .mini-cta{grid-area:action;width:28px;height:28px;font-size:.78rem}
 .contact-photo-band{width:calc(100% - 30px);min-height:330px;margin-top:35px}
 .contact-photo-note{padding:54px 25px;max-width:370px}
 .lp-visual-transition{min-height:280px;width:calc(100% - 30px);margin-bottom:34px}
 .lp-transition-label{padding:83px 25px}
}

/* Final polish */
.service-photo-row .card-link i{display:none!important}
.service-photo-row .card-link{display:inline-block;margin-top:11px;letter-spacing:.09em}
.about-tech-layout{grid-template-columns:1fr!important;gap:42px;align-items:start}
.about-tech-layout > .reveal{max-width:870px}
.about-tech-layout > .card-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0!important}
.about-tech-layout > .card-grid .card{min-height:375px}
.about-tech-layout .about-tech-thumb{height:200px}
.about-tech-layout > .card-grid .card h3{font-size:1.52rem;line-height:1.14}
@media(max-width:720px){
 .about-tech-layout > .card-grid{grid-template-columns:1fr}
 .about-tech-layout > .card-grid .card{min-height:0}
 .about-tech-layout .about-tech-thumb{height:230px}
}
