/*
Theme Name: Dra. Mariáli — Landing Page
Description: Landing page institucional da Dra. Mariáli Muniz Sassi.
Version: 1.0.0
Author: Agência Borsato
Text Domain: mariali-lp
*/

:root {
  --mariali-pink: #ff61e2;
  --mariali-ink: #2e2130;
  --mariali-plum: #5d385b;
  --mariali-mist: #fff4fd;
  --mariali-lilac: #f4e7f7;
  --mariali-white: #fff;
  --mariali-line: rgba(93, 56, 91, .14);
  --mariali-shadow: 0 22px 60px rgba(97, 44, 91, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.mariali-page { margin: 0; color: var(--mariali-ink); font-family: Poppins, Arial, sans-serif; background: var(--mariali-white); }
.mariali-page a { color: inherit; text-decoration: none; }
.mariali-shell { overflow: hidden; }
.mariali-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.mariali-eyebrow { margin: 0 0 12px; color: var(--mariali-plum); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mariali-title { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -.045em; }
.mariali-copy { color: #625163; font-size: 1rem; line-height: 1.75; }
.mariali-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 52px; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--mariali-pink); color: #351430; font: inherit; font-size: .92rem; font-weight: 800; box-shadow: 0 10px 28px rgba(255, 97, 226, .28); transition: transform .2s ease, box-shadow .2s ease; }
.mariali-button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 97, 226, .36); }
.mariali-button--light { background: #fff; color: var(--mariali-plum); box-shadow: none; }
.mariali-button--outline { background: transparent; border: 1px solid var(--mariali-line); color: var(--mariali-ink); box-shadow: none; }

.mariali-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 24px 0; }
.mariali-header__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.mariali-brand img { display: block; width: 155px; max-height: 58px; object-fit: contain; object-position: left center; }
.mariali-nav { display: flex; align-items: center; gap: 24px; color: #49334a; font-size: .82rem; font-weight: 700; }
.mariali-nav a:hover { color: var(--mariali-pink); }

.mariali-hero { position: relative; padding: 154px 0 78px; background: linear-gradient(125deg, #fff7fe 0%, #f6e7f8 55%, #e9d5ed 100%); }
.mariali-hero:before { content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%; right: -260px; top: -260px; background: radial-gradient(circle, rgba(255, 97, 226, .23), transparent 66%); }
.mariali-hero__grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 58px; }
.mariali-hero h1 { max-width: 650px; margin: 0; font-size: clamp(2.75rem, 5vw, 4.85rem); line-height: .99; letter-spacing: -.07em; }
.mariali-hero h1 span { display: block; color: var(--mariali-pink); }
.mariali-hero__copy { max-width: 570px; margin: 25px 0 30px; color: #614d60; font-size: 1.04rem; line-height: 1.7; }
.mariali-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mariali-hero__proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: #725c70; font-size: .8rem; font-weight: 600; }
.mariali-hero__proof i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #75b68d; box-shadow: 0 0 0 5px rgba(117, 182, 141, .16); }
.mariali-portrait { position: relative; min-height: 510px; }
.mariali-portrait__shape { position: absolute; inset: 34px 0 0 34px; border-radius: 240px 240px 42px 42px; background: #f7b9eb; transform: rotate(4deg); }
.mariali-portrait img { position: absolute; z-index: 1; width: 89%; height: 100%; right: 0; bottom: 0; object-fit: cover; object-position: center top; border-radius: 240px 240px 42px 42px; box-shadow: var(--mariali-shadow); }
.mariali-portrait__note { position: absolute; z-index: 2; bottom: 30px; left: -18px; width: 220px; padding: 17px; border-radius: 18px; background: #fff; box-shadow: 0 18px 38px rgba(60, 30, 56, .14); font-size: .79rem; line-height: 1.45; }
.mariali-portrait__note strong { display: block; margin-bottom: 3px; color: var(--mariali-plum); }

.mariali-intro { padding: 90px 0; }
.mariali-intro__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 74px; align-items: start; }
.mariali-quote { margin: 0; padding: 30px; border-left: 4px solid var(--mariali-pink); border-radius: 0 22px 22px 0; background: var(--mariali-mist); color: #4a2f49; font-size: 1.37rem; font-weight: 700; line-height: 1.45; }
.mariali-intro p { margin: 0 0 18px; }

.mariali-care { padding: 88px 0; background: #311d32; color: #fff; }
.mariali-care .mariali-eyebrow { color: #ffb8f3; }
.mariali-care__heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: end; margin-bottom: 38px; }
.mariali-care .mariali-copy { color: #ddcddd; margin: 0; }
.mariali-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mariali-card { min-height: 240px; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.06); }
.mariali-card__number { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 30px; border-radius: 50%; background: var(--mariali-pink); color: #311d32; font-size: .76rem; font-weight: 800; }
.mariali-card h3 { margin: 0 0 10px; font-size: 1.18rem; }
.mariali-card p { margin: 0; color: #ddcddd; font-size: .9rem; line-height: 1.68; }

.mariali-frenectomy { padding: 100px 0; background: linear-gradient(180deg, #fff 0%, #fff7fe 100%); }
.mariali-frenectomy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.mariali-frenectomy__photos { position: relative; min-height: 475px; }
.mariali-frenectomy__photos img { position: absolute; display: block; object-fit: cover; border-radius: 24px; box-shadow: var(--mariali-shadow); }
.mariali-frenectomy__photos img:first-child { width: 70%; height: 390px; left: 0; top: 0; }
.mariali-frenectomy__photos img:last-child { width: 47%; height: 220px; right: 0; bottom: 0; border: 8px solid #fff7fe; }
.mariali-frenectomy ul { display: grid; gap: 13px; margin: 26px 0 29px; padding: 0; list-style: none; }
.mariali-frenectomy li { display: flex; gap: 12px; color: #594959; font-size: .93rem; line-height: 1.52; }
.mariali-frenectomy li:before { content: '✓'; flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f6baeE; color: #452540; font-weight: 800; }

.mariali-about { padding: 96px 0; }
.mariali-about__grid { display: grid; grid-template-columns: .93fr 1.07fr; gap: 70px; align-items: center; }
.mariali-about__photo { height: 520px; overflow: hidden; border-radius: 34px; background: var(--mariali-lilac); }
.mariali-about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mariali-about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.mariali-fact { padding: 20px; border: 1px solid var(--mariali-line); border-radius: 18px; }
.mariali-fact strong { display: block; margin-bottom: 5px; color: var(--mariali-plum); font-size: .88rem; }
.mariali-fact span { color: #6c5c6b; font-size: .78rem; line-height: 1.42; }

.mariali-units { padding: 88px 0; background: var(--mariali-lilac); }
.mariali-units__top { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 34px; }
.mariali-units__top .mariali-copy { max-width: 470px; margin: 0; }
.mariali-units__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mariali-unit { min-height: 205px; padding: 30px; border-radius: 24px; background: #fff; box-shadow: 0 12px 34px rgba(87, 52, 85, .08); }
.mariali-unit__tag { color: var(--mariali-pink); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mariali-unit h3 { margin: 10px 0; font-size: 1.55rem; letter-spacing: -.04em; }
.mariali-unit p { margin: 0; color: #6a5a69; font-size: .88rem; line-height: 1.65; }

.mariali-cta { padding: 90px 0; color: #fff; background: linear-gradient(120deg, #572653, #7a3d74); }
.mariali-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.mariali-cta h2 { max-width: 680px; margin: 0; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.08; letter-spacing: -.05em; }
.mariali-cta p { margin: 15px 0 0; color: #e7cfe4; line-height: 1.65; }
.mariali-footer { padding: 28px 0; background: #241624; color: #c6b2c4; font-size: .76rem; }
.mariali-footer__row { display: flex; justify-content: space-between; gap: 16px; }

@media (max-width: 820px) {
  .mariali-header { padding: 17px 0; }
  .mariali-nav { display: none; }
  .mariali-brand img { width: 135px; }
  .mariali-hero { padding: 122px 0 54px; }
  .mariali-hero__grid, .mariali-intro__grid, .mariali-care__heading, .mariali-frenectomy__grid, .mariali-about__grid, .mariali-cta__inner { grid-template-columns: 1fr; gap: 35px; }
  .mariali-portrait { min-height: 430px; max-width: 470px; width: 91%; margin: 0 auto; }
  .mariali-cards { grid-template-columns: 1fr; }
  .mariali-card { min-height: auto; }
  .mariali-frenectomy__photos { min-height: 395px; }
  .mariali-about__photo { height: 420px; }
  .mariali-units__top { display: block; }
  .mariali-units__top .mariali-copy { margin-top: 17px; }
  .mariali-units__grid { grid-template-columns: 1fr; }
  .mariali-cta .mariali-button { width: 100%; }
}
@media (max-width: 520px) {
  .mariali-wrap { width: min(100% - 30px, 1160px); }
  .mariali-hero h1 { font-size: 2.65rem; }
  .mariali-button { width: 100%; }
  .mariali-hero__proof { align-items: flex-start; }
  .mariali-portrait { min-height: 360px; }
  .mariali-portrait__note { left: -5px; bottom: 15px; width: 200px; }
  .mariali-frenectomy__photos { min-height: 330px; }
  .mariali-frenectomy__photos img:first-child { height: 278px; }
  .mariali-frenectomy__photos img:last-child { height: 160px; }
  .mariali-about__facts { grid-template-columns: 1fr; }
  .mariali-footer__row { flex-direction: column; }
}