/* ————————————————————————————————————————————————
   mayara prudêncio · ginecologia — landing ninfoplastia
   v3 · capa de revista · paleta aprovada · Start Co.
———————————————————————————————————————————————— */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Fraunces-normal-100-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Fraunces-italic-100-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/FiraSans-normal-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/FiraSans-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/FiraSans-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/FiraSans-italic-300.woff2') format('woff2');
}

:root {
  --cream: #FBF6F2;
  --white: #FFFFFF;
  --plum: #2B0F26;
  --plum-soft: #553F51;
  --orange: #ED7A3F;
  --orange-dark: #D9662C;
  --ink: #443F3F;
  --ink-60: rgba(68, 63, 63, .78);
  --line: rgba(43, 15, 38, .13);
  --cream-70: rgba(251, 246, 242, .8);
  --cream-55: rgba(251, 246, 242, .6);
  --display: 'Fraunces', 'Times New Roman', serif;
  --text: 'Fira Sans', system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--cream); scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--text);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--orange); color: var(--white); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: inherit; }

.wrap {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ————— botões ————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 500 .95rem/1.2 var(--text);
  letter-spacing: .01em;
  padding: 17px 30px;
  border-radius: 999px;
  text-align: center;
  transition: transform .45s var(--ease-out), background-color .35s, color .35s, box-shadow .45s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--orange {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 12px 32px -14px rgba(237, 122, 63, .75);
}
.btn--orange:hover {
  background: var(--orange-dark);
  box-shadow: 0 16px 40px -14px rgba(237, 122, 63, .85);
}
.btn--light {
  background: var(--cream);
  color: var(--plum);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .35);
}
.btn--light:hover { box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .45); }
.btn--big { font-size: 1.02rem; padding: 20px 38px; }
.btn--sm { font-size: .8rem; padding: 13px 22px; letter-spacing: .06em; }

/* ————— header ————— */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  transition: background-color .5s, box-shadow .5s, padding .5s;
}
.site-head.is-solid {
  background: rgba(251, 246, 242, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(43, 15, 38, .35);
  padding-block: 12px;
}
.brand img { height: clamp(44px, 4.6vw, 56px); width: auto; }
.head-cta { padding: 12px 22px; font-size: .85rem; }

/* ————————————————————————————————————————
   HERO · capa de revista
———————————————————————————————————————— */
.hero { overflow: clip; }
.hero__stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}

/* geometria de fundo */
.hero__circle {
  position: absolute;
  z-index: 0;
  right: 4vw;
  top: 10svh;
  width: min(64svh, 46vw);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  will-change: transform;
}
.hero__blush {
  position: absolute;
  z-index: 0;
  right: -6vw;
  bottom: -14svh;
  width: 60vw;
  height: 70svh;
  background: radial-gradient(55% 55% at 60% 55%, rgba(237, 122, 63, .17), transparent 70%);
}

/* a doutora, recortada */
.hero__subject {
  position: absolute;
  z-index: 2;
  right: clamp(2vw, 6vw, 10vw);
  bottom: 0;
  height: min(86svh, 820px);
  aspect-ratio: 915 / 1099;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(43, 15, 38, .18));
}
.hero__subject img { width: 100%; height: 100%; object-fit: contain; }

/* título em camadas (inner fica static: o sujeito ancora no stage) */
.hero__inner {
  width: 100%;
  padding-top: clamp(96px, 14svh, 150px);
  padding-bottom: clamp(28px, 5svh, 56px);
}
.hero__title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(2.4rem, 6vw, 5.7rem); /* linha 3 da versão DIU é mais longa */
  line-height: 1.04;
  letter-spacing: -.018em;
  color: var(--plum);
  margin-bottom: clamp(22px, 4svh, 44px);
}
.hero__title em, .servicos__title em, .porque__title em, .dra__title em,
.cta__title em, .dra__pergunta em {
  font-style: italic;
  font-weight: 360;
  color: var(--orange);
}
.hline { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; position: relative; }
.hline--back { z-index: 1; }
.hline--front { z-index: 3; }
.hline__in { display: inline-block; will-change: transform; }

.hero__panel {
  position: relative;
  z-index: 4;
  max-width: 34em;
}
.hero__sub {
  font-size: clamp(.98rem, 1.2vw, 1.12rem);
  color: var(--ink-60);
  margin-bottom: clamp(22px, 3svh, 32px);
}

/* ————————————————————————————————————————
   SERVIÇOS · índice editorial
———————————————————————————————————————— */
.servicos { padding-block: clamp(90px, 13vh, 170px) clamp(80px, 11vh, 140px); }
.servicos__title {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--plum);
  margin-bottom: clamp(44px, 7vh, 84px);
}
.indice { list-style: none; counter-reset: none; }
.indice__row {
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 90px) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(16px, 2.6vw, 44px);
  padding-block: clamp(26px, 3.6vh, 44px);
  position: relative;
  transition: background-color .4s;
}
.indice__row::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.indice__row:last-child::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.indice__num {
  font: italic 300 clamp(1.1rem, 1.5vw, 1.5rem)/1 var(--display);
  color: var(--orange);
}
.indice__nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--plum);
  transition: transform .5s var(--ease-out), color .35s;
}
.indice__row:hover .indice__nome,
.js .indice__row.is-in:hover .indice__nome { transform: translateX(10px); color: var(--orange-dark); }
.indice__desc {
  font-size: .97rem;
  color: var(--ink-60);
  max-width: 34em;
}
.servicos__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(44px, 6vh, 64px);
}

/* ————————————————————————————————————————
   POR QUE · momento escuro
———————————————————————————————————————— */
.porque {
  background: var(--plum);
  color: var(--cream);
  padding-block: clamp(90px, 13vh, 170px);
}
.porque__title {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cream);
  max-width: 20em;
  margin-bottom: 18px;
}
.porque__sub {
  color: var(--cream-55);
  font-size: clamp(.98rem, 1.2vw, 1.12rem);
  margin-bottom: clamp(48px, 7vh, 80px);
}
.porque__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
}
.porque__lado h3, .porque__card h3 {
  font-family: var(--display);
  font-weight: 420;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  line-height: 1.25;
  margin-bottom: 24px;
  max-width: 20em;
}
.porque__lado h3 { color: var(--cream-70); }
.lista { list-style: none; }
.lista li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 12px;
  font-size: .98rem;
  line-height: 1.55;
}
.lista--x li { border-top: 1px solid rgba(251, 246, 242, .12); color: var(--cream-55); }
.lista--x li:last-child { border-bottom: 1px solid rgba(251, 246, 242, .12); }
.lista--v li { border-top: 1px solid rgba(255, 255, 255, .22); color: var(--white); }
.lista--v li:first-child, .lista--x li:first-child { border-top: 0; }
.ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateY(4px);
}
.lista--x .ic { border: 1px solid rgba(251, 246, 242, .3); color: rgba(251, 246, 242, .5); }
.lista--v .ic { background: rgba(255, 255, 255, .24); color: var(--white); }

.porque__card {
  background: linear-gradient(150deg, var(--orange), var(--orange-dark));
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(30px, 3.4vw, 52px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55);
  will-change: transform;
}
.porque__card h3 { color: var(--white); }

/* ————————————————————————————————————————
   CONHEÇA A DRA.
———————————————————————————————————————— */
.dra { padding-block: clamp(90px, 13vh, 170px); }
.dra__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.dra__title {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--plum);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.dra__body p { color: var(--ink-60); max-width: 38em; }
.dra__body p + p { margin-top: 14px; }
.dra__pergunta {
  font-family: var(--display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.3;
  color: var(--plum) !important;
  margin-top: clamp(24px, 3.4vh, 36px);
  margin-bottom: clamp(18px, 2.6vh, 28px);
}
.dra__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 40px 80px -44px rgba(43, 15, 38, .5);
}
.dra__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.dra__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  border: 1px solid rgba(43, 15, 38, .1);
}
/* moldura deslocada atrás da foto */
.dra__frame {
  position: relative;
}
.dra__frame::after {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: -1;
}

/* ————————————————————————————————————————
   CTA · painel ameixa flutuante
———————————————————————————————————————— */
.cta { padding-block: clamp(20px, 4vh, 60px) clamp(90px, 13vh, 160px); }
.cta__panel {
  background: var(--plum);
  border-radius: calc(var(--radius) + 12px);
  padding: clamp(40px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  box-shadow: 0 50px 110px -50px rgba(43, 15, 38, .65);
  will-change: transform;
}
.cta__title {
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--cream);
  max-width: 22em;
}

/* ————————————————————————————————————————
   FOOTER claro
———————————————————————————————————————— */
.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vh, 90px) 34px;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(44px, 6vh, 68px);
}
.foot__logo { height: 56px; width: auto; }
.foot__card h3 {
  font: 500 .76rem/1 var(--text);
  letter-spacing: .3em;
  color: var(--orange-dark);
  margin-bottom: 16px;
}
.foot__card p { font-size: .97rem; color: var(--ink-60); margin-bottom: 16px; }
.foot__card strong { font-weight: 500; color: var(--plum); }
.foot__card a:not(.btn):hover { color: var(--plum); text-decoration: underline; }
.foot__mapa {
  font-size: .88rem;
  font-weight: 400;
  color: var(--plum);
  border-bottom: 1px solid rgba(237, 122, 63, .7);
  padding-bottom: 2px;
  transition: border-color .3s;
}
.foot__mapa:hover { border-color: var(--plum); }
.foot__legal {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  font-size: .8rem;
  color: rgba(68, 63, 63, .6);
}
.foot__legal a { color: var(--ink); font-weight: 400; }
.foot__legal a:hover { text-decoration: underline; }

/* ————— whatsapp flutuante ————— */
.wa-float {
  position: fixed;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 11;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--orange);
  box-shadow: 0 14px 36px -10px rgba(237, 122, 63, .8);
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background-color .35s;
}
.wa-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: var(--orange-dark); transform: translateY(-3px) scale(1.04); }
.wa-float::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(237, 122, 63, .55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.9); opacity: 1; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}

/* ————— estados iniciais dos reveals (JS liga; sem JS, tudo visível) ————— */
.js [data-reveal] { opacity: 0; transform: translateY(34px); }
.js .hline__in { transform: translateY(112%); }
.js .hero__subject { opacity: 0; }
.js [data-card] { opacity: 0; transform: translateY(50px) rotate(-1.6deg); }
.js [data-panel] { opacity: 0; transform: translateY(50px); }

/* linhas do índice desenham + linha sobe, via classe (transições CSS) */
.indice__row::before, .indice__row:last-child::after {
  transition: transform 1.1s var(--ease-out) .1s;
}
.indice__row > * {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .indice__row::before, .js .indice__row:last-child::after { transform: scaleX(0); }
.js .indice__row > * { opacity: 0; transform: translateY(26px); }
.js .indice__row.is-in::before, .js .indice__row.is-in:last-child::after { transform: scaleX(1); }
.js .indice__row.is-in > * { opacity: 1; transform: none; }
.js .indice__row > :nth-child(2) { transition-delay: .08s; }
.js .indice__row > :nth-child(3) { transition-delay: .16s; }

/* ————— responsivo ————— */
@media (max-width: 1023px) {
  .porque__grid { grid-template-columns: 1fr; gap: 44px; }
  .cta__panel { grid-template-columns: 1fr; justify-items: start; }
  .foot__grid { grid-template-columns: 1fr; gap: 36px; }
  .indice__row {
    grid-template-columns: clamp(40px, 8vw, 60px) minmax(0, 1fr);
  }
  .indice__desc { grid-column: 2; margin-top: 6px; }
}
@media (max-width: 820px) {
  .hero__stage {
    min-height: 0;
    display: block;
  }
  .hero__inner { padding-top: clamp(96px, 14svh, 130px); padding-bottom: 0; }
  .hero__title { font-size: clamp(2.05rem, 8.8vw, 3.2rem); line-height: 1.16; }
  /* no mobile o título flui como parágrafo: sem quebra por camada (evita órfãos);
     a máscara de linha vira no-op em inline, então o título aparece direto */
  .hline, .hline__in { display: inline; }
  .hline { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .js .hline__in { transform: none; }
  .hero__subject {
    position: relative;
    inset: auto;
    height: auto;
    width: min(58vw, 300px);
    margin: -1.4em auto 0;
    z-index: 2;
  }
  .hero__circle {
    right: 50%;
    transform: translateX(50%);
    top: auto;
    bottom: 6vw;
    width: 74vw;
  }
  .hero__blush { right: -20vw; bottom: -10vw; width: 100vw; height: 60vw; }
  .hero__panel {
    padding-bottom: 44px;
    margin-top: 22px;
    max-width: none;
  }
  .hero__sub { font-size: .95rem; margin-bottom: 18px; }
  .hline--back, .hline--front { z-index: auto; }
  .dra__grid { grid-template-columns: 1fr; gap: 40px; }
  .dra__media { max-width: 480px; }
  .dra__frame::after { display: none; }
  .head-cta { display: none; }
}

/* ————— acessibilidade ————— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}