/* Portraits sit directly over the page palette. */
.campaign .hero-composition {
  padding-bottom: 0;
  align-items: stretch;
}
.campaign .campaign-copy { align-self: center; padding-block: clamp(42px, 6vw, 95px); }
.campaign .campaign-photo { align-self: end; width: 100%; margin: 0; isolation: isolate; }
.campaign .photo-frame {
  height: clamp(450px, 47vw, 665px);
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.campaign .photo-frame::before, .campaign .photo-frame::after { content: none; }
.portrait-light {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(94%, 575px);
  aspect-ratio: 1;
  inset: auto auto 5% 50%;
  transform: translateX(-50%);
  border: 1px solid #8d635841;
  border-radius: 50%;
  background: radial-gradient(ellipse at 55% 50%, #f9e5c891, #d6aa8a32 52%, transparent 73%);
}
.portrait-light::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  border: 1px solid #a7806952;
}
.campaign .photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  filter: drop-shadow(14px 15px 24px #3b211f30);
  animation: portrait-in .45s ease-out both;
}
@keyframes portrait-in {
  from { opacity: .86; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.campaign .campaign-photo figcaption { bottom: 20px; left: 8px; }
.campaign .campaign-photo figcaption strong { font-size: 18px; }
.page-lipedema .portrait-light, .page-libido-masculina .portrait-light {
  background: radial-gradient(ellipse at center, #dbad8570, #af7d4626 55%, transparent 73%);
  border-color: #d9a87b51;
}
.page-menopausa .portrait-light { width: 89%; inset-block-end: 13%; border-radius: 55% 55% 24% 24%; }
.page-menopausa .photo-frame { height: clamp(455px, 43vw, 610px); }
.page-menopausa .meno-index { padding-top: 18px; background: #f2e4d6; border-top: 1px solid #d9ba9f; }
.page-libido-feminina .portrait-light { inset-block-end: 8%; border-radius: 43% 56% 53% 45%; }
.page-libido-feminina .campaign-photo figcaption { left: auto; right: 10px; }
.page-cansaco-e-forca .campaign-hero { background: linear-gradient(120deg,#cdb5a0,#eee1d3 47%,#f7eee3); }
.page-cansaco-e-forca .portrait-light { border-radius: 50% 50% 27% 27%; }
.page-gordura-abdominal-e-prediabetes .portrait-light { width: 91%; border-radius: 50%; background: radial-gradient(ellipse,#a7886e78, #ccb39a34 58%,transparent 76%); }
body:not(.campaign) .portrait { isolation: isolate; }
body:not(.campaign) .portrait img {
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  filter: drop-shadow(16px 18px 23px #20141043);
}
body:not(.campaign) .portrait-light { border-color: #d9b29358; background: radial-gradient(ellipse,#d5a57d72,#78533a21 60%,transparent 77%); }
.booking-doctor img { object-fit: contain; background: #d8bcaa; }

/* Themed guide, investigation and next steps. */
.campaign {
  --journey-tint: #f0e4d7;
  --journey-ink: #563930;
  --journey-line: #b7947f;
  --journey-dark: #3c2923;
}
.page-menopausa { --journey-tint:#f1e4d0; --journey-ink:#60452c; --journey-line:#b49778; --journey-dark:#4e382d; }
.page-libido-feminina { --journey-tint:#f1e0da; --journey-ink:#663e37; --journey-line:#b99289; --journey-dark:#4b302e; }
.page-libido-masculina { --journey-tint:#e9e3dc; --journey-ink:#493b33; --journey-line:#a99385; --journey-dark:#332925; }
.page-cansaco-e-forca { --journey-tint:#ede2d4; --journey-ink:#5d4033; --journey-line:#b39580; --journey-dark:#48332b; }
.page-gordura-abdominal-e-prediabetes { --journey-tint:#e9e3d4; --journey-ink:#514534; --journey-line:#a99a83; --journey-dark:#42382d; }
.topic-guide { background: var(--paper); }
.guide-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px,7vw,108px); align-items: start; }
.topic-guide .editorial-heading h2 { max-width: 13ch; }
.guide-choices { display: grid; gap: 10px; min-width: 0; }
.guide-choices details {
  border: 1px solid #ddcec0;
  border-radius: 17px;
  background: #fffdf9;
  box-shadow: 0 5px 14px #5b41250b;
  transition: box-shadow .2s, background .2s;
}
.guide-choices details[open] { background: var(--journey-tint); box-shadow: 0 12px 26px #5b412518; }
.guide-choices summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 55px;
  padding: 10px 19px;
  list-style: none;
  cursor: pointer;
  color: var(--journey-ink);
  font: 400 clamp(22px,2.25vw,31px)/1.14 var(--serif);
}
.guide-choices summary::-webkit-details-marker { display: none; }
.guide-choices details p { padding: 0 19px 19px; max-width: 59ch; color: var(--muted); }
.page-menopausa .guide-layout { grid-template-columns: 1fr; gap: 24px; }
.page-menopausa .topic-guide .editorial-heading h2 { max-width: none; }
.page-menopausa .guide-choices { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
.page-libido-feminina .topic-guide { background: #f9eee9; }
.page-libido-masculina .guide-choices { border-left: 1px solid var(--journey-line); padding-left: 16px; }
.page-gordura-abdominal-e-prediabetes .topic-guide { background: #f2ebdf; }
.page-gordura-abdominal-e-prediabetes .guide-layout { grid-template-columns: 1fr; gap: 22px; max-width: 1010px; }
.page-gordura-abdominal-e-prediabetes .topic-guide .editorial-heading h2 { max-width: none; }

.topic-depth { background: var(--journey-tint); }
.depth-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,7vw,102px); align-items: start; }
.depth-intro { max-width: 57ch; margin-top: 18px; color: #55463d; }
.depth-points { border-top: 1px solid var(--journey-line); }
.depth-points li { padding: 20px 0; border-bottom: 1px solid var(--journey-line); }
.depth-points h3 { margin-bottom: 7px; font-size: clamp(23px,2.6vw,33px); color: var(--journey-ink); }
.depth-points p { color: #55463d; }
.page-lipedema .depth-points { padding: 3px 22px; border: 0; border-radius: 18px 61px 18px 18px; background: #fbf5ed; box-shadow: var(--shadow); }
.page-lipedema .depth-points li:last-child { border-bottom: 0; }
.page-menopausa .topic-depth { background: #fcf7ef; }
.page-menopausa .depth-layout { grid-template-columns: 1fr; gap: 24px; }
.page-menopausa .depth-points { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border: 0; }
.page-menopausa .depth-points li { padding: 22px; border: 1px solid #deccb9; border-radius: 16px; background: var(--journey-tint); }
.page-libido-feminina .topic-depth { background: var(--paper); }
.page-libido-feminina .depth-layout { grid-template-columns: .83fr 1.17fr; }
.page-libido-feminina .depth-points { border: 0; }
.page-libido-feminina .depth-points li { padding: 16px 0 16px 19px; margin-bottom: 9px; border: 0; border-left: 2px solid var(--journey-line); background: #f8eee8; }
.page-cansaco-e-forca .topic-depth { background: #fdf8f0; }
.page-gordura-abdominal-e-prediabetes .depth-points { display: grid; gap: 9px; border: 0; }
.page-gordura-abdominal-e-prediabetes .depth-points li { padding: 16px 19px; border: 1px solid #d0c3b1; border-radius: 15px; background: #f9f5ed; }

.topic-invite { background: var(--journey-dark); color: var(--cream); }
.invite-layout { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: clamp(30px,4vw,59px); }
.invite-layout h2 { font-size: clamp(29px,3.45vw,51px); }
.invite-layout p { margin-top: 8px; color: #f1e1d4; }
.invite-layout .button { flex-shrink: 0; }

.topic-next { background: #fffaf3; }
.next-layout { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(24px,6vw,91px); align-items: center; }
.next-list { display: grid; gap: 9px; }
.next-list li {
  position: relative;
  padding: 16px 16px 16px 48px;
  border: 1px solid #dfcdbc;
  border-radius: 14px;
  background: #fffdf8;
  color: #54463e;
}
.next-list li::before {
  content: "";
  position: absolute;
  inset: 16px auto auto 16px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--journey-tint);
}
.next-list li::after {
  content: "";
  position: absolute;
  inset: 22px auto auto 21px;
  width: 8px;
  height: 4px;
  border: solid var(--journey-ink);
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
}
.page-libido-masculina .topic-next { background: var(--paper); }
.page-cansaco-e-forca .next-list li { border: 0; border-radius: 0; border-bottom: 1px solid #ddc9b7; background: transparent; }

.about-ully { padding-block: 0; overflow: hidden; color: var(--cream); background: radial-gradient(ellipse at 24% 64%, #6e4a3a, var(--journey-dark) 71%); }
.about-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(25px,6vw,92px); align-items: end; min-height: 424px; }
.about-portrait { height: clamp(360px,37vw,500px); position: relative; display: grid; place-items: end center; }
.about-portrait img { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(16px 12px 23px #2415135e); }
.about-copy { align-self: center; padding-block: 34px; }
.about-copy > p { margin-top: 15px; max-width: 61ch; color: #f0ded0; }
.about-facts { display: flex; flex-wrap: wrap; gap: 11px 23px; margin: 19px 0 4px; }
.about-facts div { padding: 9px 13px; border: 1px solid #d8af8b5c; border-radius: 10px; background: #fff5e30d; }
.about-facts dt { font-size: 12px; color: #f1d4b6; }
.about-facts dd { margin: 3px 0 0; font-size: 14px; }
.about-copy .text-link { color: #f6dcc6; }
.page-libido-feminina .about-layout, .page-cansaco-e-forca .about-layout { grid-template-columns: 1.28fr .72fr; }
.page-libido-feminina .about-portrait, .page-cansaco-e-forca .about-portrait { grid-column: 2; grid-row: 1; }

.meno-second-photo { background: radial-gradient(ellipse,#bc927067,#5c3c313d); }
.meno-second-photo img { object-fit: contain; object-position: center bottom; }
.disclosures details, .guide-choices details { scroll-margin-top: 14px; }

@media (max-width: 760px) {
  .campaign .campaign-copy { padding: 17px 0 10px; }
  .campaign .hero-composition { padding-bottom: 0; }
  .campaign .campaign-photo { width: min(100%, 460px); margin: 0 auto; }
  .campaign .photo-frame { height: clamp(335px, 99vw, 510px); }
  .campaign .campaign-photo figcaption { left: 4px; right: auto; bottom: 12px; }
  .campaign .campaign-photo figcaption strong { font-size: 16px; }
  .campaign .portrait-light { width: min(92%, 390px); }
  .page-menopausa .meno-index { padding-top: 13px; }
  .guide-layout, .page-menopausa .guide-choices, .depth-layout, .page-menopausa .depth-points, .page-libido-feminina .depth-layout, .next-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .topic-guide .editorial-heading h2 { max-width: none; }
  .invite-layout { align-items: start; flex-direction: column; gap: 14px; }
  .about-layout, .page-libido-feminina .about-layout, .page-cansaco-e-forca .about-layout { grid-template-columns: 1fr; gap: 0; }
  .about-copy { grid-row: 1; padding-block: 40px 12px; }
  .about-portrait, .page-libido-feminina .about-portrait, .page-cansaco-e-forca .about-portrait { grid-column: 1; grid-row: 2; height: 320px; }
  body:not(.campaign) .portrait img { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign .photo-frame img { animation: none; }
  .guide-choices details { transition: none; }
}

/* Typographic scale shared across the directory and consultations. */
:root {
  --type-hero: clamp(2.4rem, 5.1vw, 4.4rem);
  --type-section: clamp(2rem, 3.7vw, 3.45rem);
  --type-callout: clamp(1.75rem, 3vw, 2.7rem);
  --type-card: clamp(1.32rem, 2.05vw, 1.85rem);
  --type-body: clamp(1rem, .96rem + .2vw, 1.1rem);
  --type-note: .875rem;
  --ease-out: cubic-bezier(.22,.61,.36,1);
}
main { font-size: var(--type-body); }
.campaign-copy, .hero-copy { container-type: inline-size; }
.campaign-copy h1, body:not(.campaign) .hero h1 {
  font-size: var(--type-hero);
  font-size: clamp(2.4rem, 11.5cqi, 4.4rem);
  line-height: 1.035;
  letter-spacing: -.053em;
  text-wrap: balance;
}
.campaign-intro, .hero-intro {
  max-width: 52ch;
  font-size: var(--type-body);
  line-height: 1.66;
}
.campaign-place, .availability { font-size: var(--type-note); }
main h2, .campaign h2 {
  font-size: var(--type-section);
  line-height: 1.09;
  letter-spacing: -.041em;
  text-wrap: balance;
}
.campaign :is(.booking, .topic-invite, .fem-privacy, .masc-focus) h2 {
  font-size: var(--type-callout);
  text-wrap: pretty;
}
.campaign main h3,
.campaign :is(.masc-investigation, .exams-ledger, .metabolic-factors) dt,
.campaign .guide-choices summary {
  font-size: var(--type-card);
  line-height: 1.21;
  letter-spacing: -.025em;
}
.campaign .fem-prompts h3 {
  font-size: var(--type-note);
  letter-spacing: 0;
  line-height: 1.4;
}
.campaign :is(.lipo-lead, .fatigue-prep, .metabolic-visit-grid article) h3 {
  font-size: var(--type-callout);
}
.campaign .masc-definitions dt { font-size: var(--type-callout); }
.campaign .disclosures details > p { font-size: var(--type-body); }
main .button { font-size: .9375rem; }
main .hero-jump { font-size: var(--type-note); }
.campaign .campaign-photo figcaption { line-height: 1.45; }
.campaign .campaign-photo figcaption strong { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.campaign .campaign-photo figcaption span { font-size: .75rem; }

.page-libido-feminina .photo-frame img {
  width: 94%;
  left: 3%;
  right: 3%;
  height: calc(100% - 15px);
  top: auto;
  object-position: center bottom;
}
.page-libido-feminina .campaign-photo figcaption { right: 8px; }

/* Lighting and depth respond to hover or focus. */
.campaign-photo .portrait-light {
  transform: translate(calc(-50% + var(--light-x, 0px)), var(--light-y, 0px));
  transition: transform .24s var(--ease-out), filter .3s ease;
}
main .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
main .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 22% 0, #fff2d97d, transparent 66%);
  opacity: 0;
  transition: opacity .25s ease;
}
main .button:is(:hover,:focus-visible)::before { opacity: .55; }
main .button > span, .theme-arrow, .hero-jump > span {
  transition: transform .25s var(--ease-out), background-color .25s ease;
}
main .button:is(:hover,:focus-visible) > span,
.theme-cards a:is(:hover,:focus-visible) .theme-arrow { transform: translate(2px,-2px); }
.hero-jump:is(:hover,:focus-visible) > span { transform: translateY(4px); }
.glass-menu[open] .glass-dropdown { animation: menu-in .24s var(--ease-out); }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.guide-choices details:focus-within, .disclosures details:focus-within {
  outline: 1px solid var(--journey-line);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .campaign-photo:hover .portrait-light { filter: brightness(1.18); }
  :is(.theme-cards a, .guide-choices details, .lipo-rows li, .lipo-route li, .fem-prompts li, .fem-care li, .masc-definitions > div, .fatigue-track li, .exams-ledger > div, .next-list li) {
    transition: box-shadow .28s ease, border-color .28s ease, background-color .28s ease, translate .28s var(--ease-out);
  }
  :is(.theme-cards a, .guide-choices details, .lipo-rows li, .lipo-route li, .fem-prompts li, .fem-care li, .masc-definitions > div, .fatigue-track li, .exams-ledger > div, .next-list li):hover {
    translate: 0 -3px;
    border-color: var(--journey-line, #b28f73);
    box-shadow: 0 12px 25px #62422d26;
  }
}
@media (max-width: 760px) {
  .campaign-copy h1, body:not(.campaign) .hero h1 {
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    font-size: clamp(2.1rem, 10.8cqi, 3.4rem);
  }
  .campaign-place, .availability { font-size: .8125rem; }
  .campaign .campaign-photo figcaption span { font-size: .6875rem; }
  .page-libido-feminina .campaign-photo figcaption { left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-photo .portrait-light, main .button::before, main .button > span,
  .theme-arrow, .hero-jump > span, .glass-menu .glass-dropdown,
  :is(.theme-cards a, .guide-choices details, .lipo-rows li, .lipo-route li, .fem-prompts li, .fem-care li, .masc-definitions > div, .fatigue-track li, .exams-ledger > div, .next-list li) {
    animation: none;
    transition: none;
    translate: none;
    transform: none;
  }
  .campaign-photo .portrait-light { transform: translateX(-50%); }
  main .button:is(:hover,:focus-visible) > span,
  .theme-cards a:is(:hover,:focus-visible) .theme-arrow,
  .hero-jump:is(:hover,:focus-visible) > span { transform: none; }
}