/* Structure inspired by the supplied Johnny Miyamoto page.
   Dr. Marcelo's original palette, Poppins, content and assets are retained. */
:root { --layout-radius: 10px; }
html { scroll-padding-top: 105px; }
body { overflow-x: clip; }
main { display: block; }
.container { padding-inline: 24px; }
.section { padding-block: 88px; }
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.eyebrow { letter-spacing: .08em; font-size: .75rem; }
h1, h2, h3 { overflow-wrap: break-word; }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.75rem); }
.hl { white-space: normal; }
.btn { min-height: 50px; padding: 15px 24px; border-radius: var(--layout-radius); line-height: 1.3; }
.btn--sm { min-height: 42px; padding: 10px 18px; font-size: .86rem; }
.btn--primary { color: var(--green-700); font-weight: 700; box-shadow: 0 10px 24px -14px rgba(120, 83, 14, .5); }
.btn--primary:hover { color: var(--green-700); }
.btn--outline { border-color: var(--green); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 120; padding: 10px 16px; color: #fff; background: var(--green-700); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* Dark compact header, matching the reference's visual hierarchy. */
.site-header { background: rgba(11, 74, 66, .98); border-bottom: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); }
.site-header.scrolled { border-bottom-color: rgba(255, 255, 255, .12); }
.header__inner { gap: 20px; min-height: 80px; padding-block: 14px; }
.logo__mark { background: var(--gold); color: var(--green-700); border-radius: 50%; box-shadow: none; }
.logo__text, .nav a { color: #fff; }
.logo__text small { color: #c7ded7; margin-top: 5px; }
.nav { gap: 22px; font-size: .85rem; }
.nav a:hover { color: var(--gold); }
.lang-toggle { background: transparent; border-color: rgba(255,255,255,.3); padding: 8px 10px; }
.lang-toggle [data-lang] { color: #b9d2cb; }
.lang-toggle [data-lang].active { color: #fff; }
.lang-toggle__sep { color: #83aaa1; }
.lang-toggle:hover { border-color: var(--gold); }
.nav-toggle span { background: #fff; }

/* Hero: copy + portrait, then four quick facts across the full width. */
.hero { padding: 136px 0 56px; background: var(--bg-soft); }
.hero__bg { z-index: 0; background: radial-gradient(ellipse at 88% 28%, rgba(217,164,65,.1), transparent 50%); pointer-events: none; }
.hero__inner { position: relative; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .85fr); gap: 36px 64px; }
.hero__copy { min-width: 0; }
.hero .eyebrow { color: var(--green); margin-bottom: 16px; }
.hero h1 { max-width: 640px; margin-bottom: 22px; font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.12; letter-spacing: -.025em; }
.hero__lead { max-width: 620px; font-size: 1.02rem; line-height: 1.65; margin-bottom: 22px; }
.hero__trust-card { display: inline-flex; align-items: center; gap: 12px; min-width: 300px; max-width: 100%; padding: 9px 23px 9px 9px; margin-bottom: 24px; background: #fff; border: 1px solid var(--line); border-radius: 100px; box-shadow: 0 8px 24px -16px rgba(11,74,66,.35); }
.hero__trust-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 35%; }
.hero__trust-copy { display: grid; gap: 2px; text-align: left; }
.hero__trust-copy strong { color: var(--green-700); font-size: .94rem; }
.hero__trust-copy > span { color: var(--body); font-size: .78rem; }
.hero__cta { gap: 10px; margin-bottom: 0; }
.hero__cta .btn { font-size: .88rem; padding-inline: 18px; }
.hero__portrait { position: relative; width: 100%; max-width: 390px; margin: 0; justify-self: end; align-self: center; padding: 12px; border: 1px solid #d3e2da; border-radius: 12px 100px 12px 12px; background: #e9f0eb; }
.hero__portrait picture { display: block; overflow: hidden; border-radius: 4px 90px 4px 4px; }
.hero__portrait img { width: 100%; height: 370px; object-fit: cover; object-position: center 40%; }
.hero__portrait figcaption { display: grid; padding: 22px 16px 12px; }
.hero__portrait figcaption strong { color: var(--green-700); font-size: 1.1rem; }
.hero__portrait figcaption > span:last-child { font-size: .82rem; color: var(--body); }
.portrait__line { display: block; width: 36px; height: 3px; background: var(--gold); margin-bottom: 12px; }
.hero__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0; padding: 12px; list-style: none; border: 1px solid #d3e2da; border-radius: var(--layout-radius); background: rgba(255,255,255,.65); box-shadow: 0 12px 30px -24px rgba(11,74,66,.5); }
.hero-fact { display: flex; gap: 12px; align-items: center; padding: 15px 12px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); }
.hero-fact__icon { width: 38px; height: 38px; padding: 9px; flex: 0 0 38px; color: #fff; background: var(--green); border-radius: 50%; }
.hero-fact__icon svg { display: block; width: 100%; height: 100%; }
.hero-fact__body { min-width: 0; font-size: .82rem; line-height: 1.45; color: var(--body); }
.hero-fact__body strong { color: var(--green-700); font-weight: 700; }

/* The original vertical video stays in its original aspect ratio. */
.video-feature { background: #fff; }
.video-feature__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 76px; align-items: center; }
.video-feature__panel { padding: 30px; background: var(--bg-soft-2); border: 1px solid var(--line); border-radius: var(--layout-radius); }
.video-feature__media { display: flex; justify-content: center; }
.video-feature .phone { width: min(264px, 100%); padding: 7px; border-radius: 22px; box-shadow: 0 18px 35px -22px rgba(11,74,66,.6); }
.video-feature .phone::before { display: none; }
.video-feature .phone__video { border-radius: 16px; object-fit: contain; }
.video-feature__copy h2 { max-width: 500px; color: var(--green-700); margin-bottom: 22px; }
.video-feature__copy p { font-size: .98rem; line-height: 1.8; }
.video-feature__note { padding-left: 18px; border-left: 3px solid var(--gold); color: var(--green); font-weight: 500; }
.video-feature__copy .btn { margin-top: 14px; font-size: .91rem; }

/* The reference's dark service grid, with the Dr. Marcelo benefit copy. */
.beneficios.services { color: #e0ece7; background: var(--green-700); }
.beneficios .section__head { display: grid; grid-template-columns: 1fr 1fr; text-align: left; max-width: none; gap: 8px 80px; align-items: end; margin-bottom: 40px; }
.beneficios .section__head .eyebrow { grid-column: 1; color: var(--gold); margin: 0; }
.beneficios .section__head h2 { grid-column: 1; color: #fff; margin: 0; }
.beneficios .section__sub { grid-column: 2; grid-row: 1 / 3; font-size: 1rem; margin: 0; color: #d4e5dd; }
.beneficios .cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.beneficios .card { padding: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--layout-radius); background: rgba(255,255,255,.035); box-shadow: none; }
.beneficios .card:last-child { grid-column: 1 / -1; }
.beneficios .card:hover { transform: none; border-color: var(--gold); box-shadow: none; }
.card__number { display: grid; place-items: center; width: 46px; height: 34px; margin-bottom: 26px; background: #fff; color: var(--green); border-radius: 30px; font-size: .78rem; font-weight: 700; }
.beneficios .card h3 { color: #fff; font-size: 1.27rem; }
.beneficios .card p { color: #d4e5dd; font-size: .94rem; }
.beneficios .card__link { align-self: flex-start; color: var(--gold); font-size: .89rem; }
.beneficios .card__link:hover { color: #fff; letter-spacing: normal; }

/* The existing testimonials and biography retain all original content. */
.depoimentos { background: var(--bg-soft); }
.section__head { max-width: 750px; margin-bottom: 40px; }
.section__sub { font-size: 1rem; }
.depo-grid { gap: 16px; align-items: start; }
.depo { border-radius: var(--layout-radius); box-shadow: none; padding: 18px; }
.depo:last-child { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
.depo:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sobre { background: #fff; }
.sobre__inner { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 70px; }
.sobre__img { margin: 0; }
.sobre__img img { border-radius: var(--layout-radius); box-shadow: none; border: 6px solid var(--bg-soft-2); outline-color: var(--line); }
.sobre__img::after { display: none; }
.sobre__copy h2 { max-width: 700px; color: var(--green-700); }
.sobre__copy p { font-size: .95rem; }
.sobre__copy .btn { margin-top: 8px; }

/* Contact details and the existing live map are in a single two-column block. */
.contact-section { color: #fff; background: var(--green-700); }
.contact-section__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.contact-section .eyebrow { color: var(--gold); }
.contact-section__title { color: #fff; font-size: 2.1rem; }
.contact-section .info-cards { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: none; margin: 24px 0 28px; }
.contact-section .info-card { background: transparent; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; }
.contact-section .info-card h3 { font-size: .95rem; color: #fff; }
.contact-section .info-card p { font-size: .95rem; color: #d9e8e2; }
.contact-section .info-card__link { margin-top: 9px; font-size: .86rem; }
.contact-section .btn { font-size: .94rem; }
.contact-section .map-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: var(--layout-radius); background: var(--bg-soft); }
.contact-section .map-wrap iframe { height: 390px; filter: none; }
.final-cta { padding-block: 78px; min-height: 280px; text-align: left; }
.final-cta .cta-band__overlay { background: linear-gradient(90deg,rgba(11,74,66,.96),rgba(11,74,66,.74)); }
.final-cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.final-cta__copy h2 { max-width: 620px; font-size: clamp(1.8rem,3vw,2.6rem); margin: 0; }
.final-cta .cta-band__pre { font-size: .95rem; margin-bottom: 14px; }
.final-cta .btn { white-space: nowrap; font-size: .95rem; }
.faq { background: var(--bg-soft); }
.faq__inner { max-width: 930px; }
.faq details { padding-inline: 24px; border-radius: var(--layout-radius); box-shadow: none; }
.faq summary { font-size: .98rem; padding-block: 18px; }
.faq details p { font-size: .94rem; }
.site-footer { padding-block: 48px; }
.site-footer__legal { color: #b9d2cb; }
.site-footer__addr { color: #e0ece7; }
.logo--footer .logo__text small { color: var(--gold); }
.whats-float { width: 56px; height: 56px; animation: none; }

@media (max-width: 1100px) {
  .nav { gap: 14px; font-size: .8rem; }
  .header__inner { gap: 14px; }
  .hero__inner { gap: 32px; grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); }
  .hero h1 { font-size: 2.35rem; }
  .hero__portrait img { height: 340px; }
  .hero-fact { padding: 13px 8px; gap: 8px; }
  .hero-fact__body { font-size: .75rem; }
  .video-feature__inner, .contact-section__inner { gap: 40px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 90px; }
  .header__inner { min-height: 74px; }
  .logo__text { font-size: .96rem; }
  .nav.open { background: var(--green-700); border-bottom-color: #487b70; }
  .nav.open a { color: #fff; font-size: .95rem; }
  .hero { padding-top: 112px; }
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(230px, .8fr); text-align: left; align-items: center; }
  .hero__copy { order: initial; }
  .hero h1 { font-size: 2rem; }
  .hero__lead { font-size: .92rem; margin-inline: 0; }
  .hero__cta { justify-content: flex-start; }
  .hero__trust-card { min-width: 0; }
  .hero__portrait img { height: 300px; }
  .hero__facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-fact__body { font-size: .86rem; }
  .video-feature__inner { gap: 36px; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); }
  .video-feature__panel { padding: 20px; }
  .video-feature__copy p { font-size: .92rem; }
  .beneficios .cards { max-width: none; }
  .depo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: none; }
  .sobre__inner { grid-template-columns: minmax(200px,.7fr) minmax(0,1.3fr); text-align: left; gap: 36px; }
  .sobre__img { max-width: none; }
  .contact-section__inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
  .final-cta__inner { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
}
@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .section { padding-block: 60px; }
  .header__inner { gap: 8px; padding-block: 12px; min-height: 74px; }
  .logo { gap: 8px; }
  .logo__mark { width: 36px; height: 36px; font-size: .9rem; }
  .logo__text { font-size: .84rem; }
  .logo__text small { font-size: .62rem; margin-top: 4px; }
  .lang-toggle { font-size: .72rem; padding: 7px 8px; }
  .nav-toggle { margin-left: 2px; padding: 8px 0 8px 6px; }
  .nav-toggle span { width: 22px; }
  .hero { padding: 112px 0 36px; }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .hero .eyebrow { font-size: .65rem; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(1.9rem,7.8vw,2.45rem); margin-inline: auto; max-width: 470px; }
  .hero__lead { font-size: .96rem; text-align: center; margin-inline: auto; }
  .hero__trust-card { margin-bottom: 24px; width: min(100%,340px); }
  .hero__cta { justify-content: center; flex-direction: column; align-items: stretch; max-width: 420px; margin-inline: auto; }
  .hero__cta .btn { font-size: .93rem; width: 100%; }
  .hero__portrait { display: none; }
  .hero__facts { gap: 8px; padding: 8px; }
  .hero-fact { padding: 12px 8px; gap: 8px; text-align: left; align-items: center; }
  .hero-fact__icon { width: 30px; height: 30px; flex-basis: 30px; padding: 7px; }
  .hero-fact__body { font-size: .72rem; line-height: 1.5; }
  .video-feature__inner { grid-template-columns: 1fr; gap: 32px; }
  .video-feature__panel { padding: 24px; }
  .video-feature .phone { width: 250px; }
  .video-feature__copy h2 { font-size: 1.9rem; }
  .video-feature__copy p { font-size: .95rem; }
  .video-feature__copy .btn { width: 100%; }
  .beneficios .section__head { grid-template-columns: 1fr; gap: 10px; }
  .beneficios .section__sub { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .beneficios .cards { grid-template-columns: 1fr; gap: 16px; }
  .beneficios .card { padding: 26px; }
  .beneficios .card:last-child { grid-column: auto; }
  .beneficios .card h3 { font-size: 1.2rem; }
  .depo-grid { grid-template-columns: 1fr; gap: 12px; }
  .depo { padding: 14px; }
  .depo:last-child { grid-column: auto; width: 100%; }
  .depo-hint { font-size: .8rem; }
  .sobre__inner { grid-template-columns: 1fr; gap: 32px; }
  .sobre__img { width: 100%; max-width: 300px; margin-inline: auto; }
  .sobre__copy .btn { width: 100%; }
  .contact-section__inner { grid-template-columns: 1fr; gap: 36px; }
  .contact-section__title { font-size: 1.9rem; }
  .contact-section .btn { width: 100%; }
  .contact-section .map-wrap iframe { height: 310px; }
  .final-cta { padding-block: 60px; min-height: auto; }
  .final-cta .btn { width: 100%; white-space: normal; }
  .final-cta__inner { justify-items: stretch; }
  .faq details { padding-inline: 18px; }
  .faq summary { font-size: .92rem; }
  .site-footer { padding: 44px 0 96px; }
  .site-footer__addr { font-size: .82rem; }
  .whats-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
}

/* Primeira dobra sem a foto grande; cartao e informacoes preservados. */
.hero--sem-foto .hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 34px; }
.hero--sem-foto .hero__copy { width: 100%; max-width: 820px; margin-inline: auto; }
.hero--sem-foto h1 { max-width: 820px; margin-inline: auto; }
.hero--sem-foto .hero__lead { max-width: 760px; margin-inline: auto; text-align: center; }
.hero--sem-foto .hero__cta { justify-content: center; }

/* Cinco modalidades do Dr. Marcelo, abaixo dos beneficios. */
.treatments { background: var(--bg-soft-2); }
.treatments .section__head { max-width: 740px; }
.treatments .section__head h2 { color: var(--green-700); text-wrap: balance; }
.treatments .section__sub { max-width: 660px; margin: 18px auto 0; }
.treatment-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.treatment-card { grid-column: span 2; padding: 32px; background: #fff; border: 1px solid #d7e5dd; border-radius: var(--layout-radius); }
.treatment-card:nth-last-child(-n+2) { grid-column: span 3; }
.treatment-card__number { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 24px; color: var(--green-700); background: var(--bg-soft-2); border: 1px solid #d7e5dd; border-radius: 50%; font-size: .82rem; font-weight: 700; }
.treatment-card h3 { color: var(--green-700); font-size: 1.2rem; margin-bottom: 14px; }
.treatment-card p { font-size: .94rem; line-height: 1.75; margin: 0; }
.treatment-card:nth-child(2n) .treatment-card__number { background: #fbf5e8; border-color: #f0e0bb; }
.treatments__cta { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 900px) {
  .treatment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .treatment-card, .treatment-card:nth-last-child(-n+2) { grid-column: auto; padding: 26px; }
  .treatment-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .treatment-grid { grid-template-columns: 1fr; gap: 14px; }
  .treatment-card, .treatment-card:nth-last-child(-n+2), .treatment-card:last-child { grid-column: auto; }
  .treatment-card__number { margin-bottom: 18px; }
  .treatments__cta .btn { width: 100%; }
}