/* Suntor — site styles (Figma: Suntor / Home 2268:113, 1440px frame) */
:root {
  --primary-25: #fcf4f4;
  --primary-50: #f4d4d4;
  --primary-100: #ecbfbf;
  --primary-200: #d49991;
  --primary-400: #ed6768;
  --primary-500: #ce696a;
  --primary-500-a10: rgba(206, 105, 106, .1);
  --primary-700: #ad4c4d;
  --primary-800: #6c3031;
  --primary-900: #391616;
  --neutral-900: #474a51;
  --neutral-900-a20: rgba(71, 74, 81, .2);
  --neutral-50: #efece7;
  --bg: #f8f5f5;
  --white: #fff;
  --font-body: Montserrat, Arial, sans-serif;
  --font-head: Roboto, Arial, sans-serif;
  --content: 1312px;
  --gutter: max(64px, calc((100% - var(--content)) / 2));
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--primary-900); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: none; }
a { color: inherit; text-decoration: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-content main { display: block; }
/* app.css centres every `article > *` for post content; home cards use <article> too */
article.situation-card > *, article.testimonial-card > * { margin-left: 0; margin-right: 0; max-width: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 64px; border: 1px solid transparent;
  font: 600 16px/1.3 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn img { width: 24px; height: 24px; }
.btn--lg { height: 56px; padding: 0 32px; }
.btn--primary { background: var(--primary-500); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--primary-700); }
.btn--outline { border-color: var(--primary-500); color: var(--primary-500); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--primary-500-a10); }
.btn--glass { border-color: var(--white); background: rgba(255, 255, 255, .2); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover, .btn--glass:focus-visible { background: rgba(255, 255, 255, .32); }
.btn:focus-visible, .arrow-btn:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; }

.title { margin: 0; font: 500 32px/1.2 var(--font-head); color: var(--primary-500); }
.title__light { font-weight: 300; }

/* ---------- Header ---------- */
.topbar { height: 80px; background: var(--primary-500); border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; }
.topbar__inner { flex: 1; max-width: 1360px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.topbar__left { display: flex; align-items: center; gap: 64px; }
.brand { display: block; width: 212.321px; height: 58px; flex: none; }
.brand__logo, .site-footer__logo span { display: block; width: 100%; height: 100%; background: var(--white); -webkit-mask: var(--mask) no-repeat 0 0 / 100% 100%; mask: var(--mask) no-repeat 0 0 / 100% 100%; }
.brand__logo { --mask: url('../assets/images/home/logo-mask.png'); }
.topbar__audiences { display: flex; align-items: center; gap: 24px; }
.topbar__link, .topbar__pill { font: 600 16px/1.3 var(--font-body); color: var(--white); white-space: nowrap; }
.topbar__pill { height: 40px; padding: 0 20px; border: 1px solid var(--white); border-radius: 999px; display: inline-flex; align-items: center; transition: background-color .18s; }
.topbar__pill:hover { background: rgba(255, 255, 255, .12); }
.topbar__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.topbar__right { display: flex; align-items: center; gap: 32px; }
.search-pill { width: 253px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--primary-700); display: flex; align-items: center; gap: 8px; margin: 0; }
.search-pill img { width: 20px; height: 20px; flex: none; }
.search-pill input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0; color: var(--white); font: 500 14px/1.4 var(--font-body); outline: none; }
.search-pill input::placeholder { color: var(--white); opacity: 1; }
.search-pill:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.contact-pill { height: 40px; padding: 0 20px; border-radius: 999px; background: var(--primary-25); color: var(--primary-800); display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--font-body); white-space: nowrap; }
.contact-pill img { width: 20px; height: 20px; }
.mainnav { height: 48px; background: var(--white); border-bottom: 1px solid var(--neutral-900-a20); display: flex; align-items: center; justify-content: center; }
.mainnav__inner { flex: 1; max-width: 1360px; padding: 0 24px; display: flex; align-items: center; gap: 40px; }
.mainnav__link { height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); white-space: nowrap; }
/* Figma hover = pink + semibold. Faked with a hairline text stroke so the item
   doesn't change width and push its neighbours. */
.mainnav__link:hover, .mainnav__link[aria-current="page"], .nav-drop.is-open .nav-drop__toggle { color: var(--primary-500); -webkit-text-stroke: .45px currentColor; }
.mainnav__link img { width: 16px; height: 16px; }

/* ---------- Main menu dropdowns (Figma: modal - linhas / modal - conteudo) ---------- */
.nav-drop { position: relative; }
.nav-drop__panel { position: absolute; top: calc(100% + 8px); left: -24px; z-index: 60; min-width: 276px; padding: 8px; border-radius: 8px; background: var(--white); box-shadow: 0 18px 40px -16px rgba(57, 22, 22, .28), 0 0 0 1px rgba(71, 74, 81, .06); display: flex; flex-direction: column; visibility: hidden; opacity: 0; }
.nav-drop--conteudo .nav-drop__panel { min-width: 311px; }
/* invisible bridge so the pointer can travel from the toggle to the panel */
.nav-drop__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop.is-open .nav-drop__panel { visibility: visible; opacity: 1; }
.nav-drop__item { position: relative; display: flex; align-items: center; padding: 16px; border-radius: 8px; font: 500 16px/1.4 var(--font-body); color: var(--primary-900); white-space: nowrap; }
.nav-drop__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -7.5px; border-radius: 8px; background: var(--primary-500); opacity: 0; }
.nav-drop__item:hover, .nav-drop__item:focus-visible { background: var(--primary-25); outline: none; }
.nav-drop__item:hover::before, .nav-drop__item:focus-visible::before { opacity: 1; }
.nav-drop__toggle:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 4px; border-radius: 4px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 664px; overflow: hidden; background: var(--primary-900); color: var(--white); }
.hero__photo, .hero__layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__photo { object-fit: cover; }
.hero__organic { position: absolute; top: -199px; left: calc(100% - 361.86px); width: 1305.585px; height: 1275px; pointer-events: none; }
.hero__inner { position: relative; height: 100%; padding: 0 var(--gutter) 160px calc(var(--gutter) - 1px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero__content { display: flex; flex-direction: column; gap: 32px; }
.hero__text { width: 733px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.hero h1 { margin: 0; font: 400 56px/1.1 var(--font-head); }
.hero__text p { margin: 0; font: 400 24px/1.2 var(--font-body); }
.hero__actions { display: flex; align-items: center; gap: 24px; }
.hero__scroll { position: absolute; left: 50%; bottom: 24px; width: 32px; height: 32px; transform: translateX(-50%); }
.hero__scroll img { display: block; width: 32px; height: 32px; }

/* ---------- Intro ---------- */
/* Desktop: the photo composition scales with the viewport so it keeps the Figma
   proportions (1440px frame: section 552px tall, photo at x=720 y=33, 827.646px wide). */
.intro { position: relative; overflow: hidden; height: max(38.3333vw, 432px); background: var(--bg); padding: 0 65px; padding-left: calc(var(--gutter) + 1px); display: flex; align-items: center; }
.intro__copy { position: relative; z-index: 1; width: 423px; display: flex; flex-direction: column; gap: 16px; }
.intro .title { width: 428px; }
.intro__text { width: 421px; font: 400 16px/1.4 var(--font-body); }
.intro__text p { margin: 0; }
.intro__text p + p { margin-top: 20px; }
.intro__text strong { font-weight: 700; }
.intro__visual { position: absolute; left: 50vw; top: 2.2917vw; width: 57.4754vw; aspect-ratio: 827.646 / 874.844; pointer-events: none; }
.intro__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* line sits 105.354px right / 50.569px below the photo in Figma */
.intro__line { position: absolute; left: 12.7293%; top: 5.7803%; width: 100%; height: 100%; }

/* ---------- Situations ---------- */
.situations { background: var(--primary-50); padding: 104px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.situations__head { width: 716px; max-width: 100%; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.situations__head p { margin: 0; font: 400 16px/1.4 var(--font-body); }
.situations__grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.situation-card { background: var(--primary-100); border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.situation-card__svg { width: 56px; height: 56px; }
.situation-card__icon { display: block; flex: none; background: var(--primary-500); -webkit-mask: var(--icon) no-repeat var(--mp) / var(--ms); mask: var(--icon) no-repeat var(--mp) / var(--ms); }
.situation-card__body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.situation-card h3 { margin: 0; width: 100%; font: 600 16px/1.3 var(--font-body); }
.situation-card p { margin: 0; width: var(--text-w, 100%); max-width: 100%; font: 400 14px/1.4 var(--font-body); }

/* ---------- Shared section head + carousel ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.section-head__copy { width: 525px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.section-head__copy--wide { width: 587px; }
.section-head__copy p { margin: 0; font: 400 16px/1.4 var(--font-body); }
.carousel { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; flex: none; }
.carousel__controls { display: flex; align-items: center; justify-content: space-between; }
.carousel__dots { display: flex; align-items: center; gap: 8px; }
.carousel__dots span { width: 8px; height: 8px; border-radius: 32px; background: var(--primary-500-a10); transition: width .2s, height .2s, background-color .2s; }
.carousel__dots span.is-active { width: 24px; height: 10px; background: var(--primary-400); }
.carousel__arrows { display: flex; gap: 16px; }
/* Arrow: active = solid pink + white icon; aria-disabled = 10% pink + pink icon */
.arrow-btn { width: 48px; height: 48px; border: 0; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--primary-500); transition: background-color .18s; }
.arrow-btn:hover { background: var(--primary-700); }
.arrow-btn i { width: 24px; height: 24px; background: var(--white); -webkit-mask: var(--i) no-repeat center / 24px 24px; mask: var(--i) no-repeat center / 24px 24px; }
.arrow-btn--prev i { --i: url('../assets/images/home/arrow-prev.svg'); }
.arrow-btn--next i { --i: url('../assets/images/home/arrow-next.svg'); }
.arrow-btn[aria-disabled="true"] { cursor: default; background: var(--primary-500-a10); }
.arrow-btn[aria-disabled="true"] i { background: var(--primary-500); }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--bg); padding: 80px var(--gutter) 64px; display: flex; flex-direction: column; gap: 48px; }
.testimonials .title { width: 521px; }
.testimonials__track { gap: 24px; }
.testimonial-card { position: relative; width: 360px; padding: 8px; border-radius: 16px; background: var(--primary-200); overflow: hidden; display: flex; flex-direction: column; }
.testimonial-card__photo { display: block; width: 100%; height: 428px; border-radius: 12px; object-fit: cover; }
.testimonial-card__play { position: absolute; left: 50%; top: calc(50% - 26px); width: 56px; height: 56px; transform: translate(-50%, -50%); border: 0; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .18s; }
.testimonial-card__play:hover { background: rgba(255, 255, 255, .35); }
.testimonial-card__play img { width: 24px; height: 24px; }
.testimonial-card__caption { padding: 16px 8px 8px; display: flex; align-items: center; justify-content: space-between; color: var(--white); line-height: 1.4; white-space: nowrap; }
.testimonial-card__caption strong { font: 500 20px/1.4 var(--font-body); }
.testimonial-card__caption span { font: 400 14px/1.4 var(--font-body); color: rgba(255, 255, 255, .8); }

/* ---------- Partners ---------- */
.partners { background: var(--bg); border-top: 1px solid var(--neutral-900-a20); border-radius: 0 0 32px 32px; overflow: hidden; padding: 56px 0 48px; display: flex; flex-direction: column; gap: 48px; }
.partners__title { margin: 0; padding: 0 var(--gutter); font: 500 24px/1.2 var(--font-head); color: var(--primary-500); }
.partners__marquee { overflow: hidden; }
.partners__track { display: flex; gap: 24px; width: max-content; animation: partners-marquee 50s linear infinite; }
.partners__marquee:hover .partners__track { animation-play-state: paused; }
.partner { width: 202.499px; height: 101.978px; flex: none; display: flex; align-items: center; justify-content: center; }
.partner span { display: block; background: var(--primary-800); -webkit-mask: var(--logo) no-repeat 0 0 / 100% 100%; mask: var(--logo) no-repeat 0 0 / 100% 100%; }
@keyframes partners-marquee { to { transform: translateX(calc(-50% - 12px)); } }

/* ---------- Blog ---------- */
.blog-section { padding: 80px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.blog__body { display: flex; align-items: flex-start; gap: 32px; }
.blog-highlight { position: relative; flex: none; width: 528px; height: 468px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .15); border-radius: 16px; background: var(--white); color: var(--white); }
.blog-highlight__img { position: absolute; left: -1px; top: -.98px; width: 528px; height: 516px; object-fit: cover; transition: transform .4s ease; }
.blog-highlight:hover .blog-highlight__img { transform: scale(1.03); }
.blog-highlight__blur { position: absolute; left: -1px; top: 224px; width: 528px; height: 291px; background: linear-gradient(to top, rgba(237, 103, 104, .8) 53.837%, rgba(237, 103, 104, 0)); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); -webkit-mask: url('../assets/images/home/blog-gradient-mask.svg') no-repeat 0 -224.978px / 528px 468px; mask: url('../assets/images/home/blog-gradient-mask.svg') no-repeat 0 -224.978px / 528px 468px; }
.blog-highlight__text { position: absolute; left: -1px; bottom: -1.02px; width: 528px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.blog-highlight__title { font: 400 24px/1.2 var(--font-head); }
.read-more { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.4 var(--font-body); white-space: nowrap; }
.read-more img { width: 20px; height: 20px; }
.read-more--pink { color: var(--primary-400); }
.blog__carousel { flex: 1; }
.blog__track { gap: 32px; align-items: flex-start; }
.post-card { width: calc((100% - 32px) / 2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 0, 0, .15); border-radius: 16px; background: var(--white); box-shadow: 0 2px 4px rgba(0, 0, 0, .06); }
.post-card__img { display: block; width: 100%; height: 260px; object-fit: cover; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.post-card__title { height: 44px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 18px/1.2 var(--font-head); color: var(--neutral-900); }

/* ---------- Media ---------- */
.media { position: relative; padding: 64px var(--gutter) 0; }
.media__decor { position: absolute; left: 0; top: 0; width: min(701px, 100%); height: 497px; overflow: hidden; pointer-events: none; }
.media__decor-bg { position: absolute; inset: 0; background: var(--primary-50); border-radius: 0 32px 32px 0; }
.media__decor-shape { position: absolute; left: 0; top: 0; width: 638px; height: 495px; overflow: hidden; border-radius: 0 32px 32px 0; }
.media__decor-shape img { position: absolute; left: -202px; top: 0; width: 484.33px; height: 497.476px; }
.media__card { position: relative; background: var(--bg); border-radius: 32px; padding: 56px; display: flex; flex-direction: column; gap: 40px; }
.media__track { gap: 32px; }
.media-card { width: calc((100% - 96px) / 4); display: flex; flex-direction: column; gap: 24px; }
.media-card img { display: block; width: 100%; height: 184px; border-radius: 16px; object-fit: cover; }
.media-card__title { height: 48px; margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 20px/1.2 var(--font-head); color: var(--neutral-900); }
.media-card:hover .media-card__title { color: var(--primary-500); }

/* ---------- FAQ ---------- */
.faq { position: relative; overflow: hidden; padding: 80px var(--gutter); display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.faq__line { position: absolute; left: -338px; top: -1.98px; width: 866.5px; height: 540.5px; pointer-events: none; }
.faq__organic { position: absolute; left: -501.19px; top: -171.2px; width: 1226.342px; height: 1253.586px; pointer-events: none; -webkit-mask: url('../assets/images/home/faq-organic-mask.svg') no-repeat 271.189px 372.221px / 892px 584.918px; mask: url('../assets/images/home/faq-organic-mask.svg') no-repeat 271.189px 372.221px / 892px 584.918px; }
.faq__organic img { display: block; width: 100%; height: 100%; }
.faq__title { position: relative; width: 319px; flex: none; }
.faq__list { position: relative; width: 750px; display: flex; flex-direction: column; gap: 16px; }
.faq-item { border: 1px solid var(--neutral-900-a20); border-radius: 12px; overflow: hidden; transition: background-color .18s; }
.faq-item[open] { background: var(--bg); border-color: transparent; }
.faq-item summary { height: 62px; padding: 0 23px; display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.faq-item[open] summary { height: 64px; padding: 0 24px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { flex: 1; font: 600 18px/1.4 var(--font-body); color: var(--primary-800); }
.faq-item summary img { width: 24px; height: 24px; flex: none; }
.faq-item__minus, .faq-item[open] .faq-item__plus { display: none; }
.faq-item[open] .faq-item__minus { display: block; }
.faq-item p { margin: 0; padding: 0 24px 24px; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
.faq-item summary:focus-visible { outline: 2px solid var(--primary-700); outline-offset: -2px; border-radius: 12px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-radius: 32px 32px 0 0; overflow: hidden; background: var(--primary-500); color: var(--white); padding: 80px var(--gutter) 16px; display: flex; flex-direction: column; gap: 56px; }
.site-footer__top { display: flex; flex-direction: column; gap: 64px; }
.site-footer__brand-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer__logo { display: block; width: 326px; height: 89.145px; }
.site-footer__logo span { --mask: url('../assets/images/home/footer-logo-mask.png'); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { width: 56px; height: 56px; border-radius: 999px; background: var(--primary-25); display: flex; align-items: center; justify-content: center; transition: background-color .18s; }
.footer-social a:hover { background: var(--white); }
.site-footer__cols { display: flex; align-items: flex-start; gap: 67px; }
.site-footer__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.site-footer__col--contact { flex: 0 0 406px; }
.site-footer__title { margin: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .2); font: 700 14px/normal var(--font-body); text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.site-footer__links { display: flex; flex-direction: column; gap: 16px; font: 500 16px/1.4 var(--font-body); }
.site-footer__links a:hover, .footer-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; }
.footer-contact li { display: flex; align-items: center; gap: 16px; }
.footer-contact__icon { flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--primary-25); display: flex; align-items: center; justify-content: center; }
.footer-contact li > div { display: flex; flex-direction: column; gap: 4px; font: 500 16px/1.4 var(--font-body); }
.footer-contact strong { font: 600 16px/1.3 var(--font-body); }
.site-footer__bottom { display: flex; flex-direction: column; gap: 24px; }
.site-footer__divider { display: block; width: 100%; height: 1px; }
.site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--neutral-50); font: 400 16px/1.4 var(--font-body); }
.site-footer__legal p { margin: 0; }
.site-footer__group { display: flex; align-items: center; gap: 8px; }
.site-footer__group img { width: 209px; height: 84px; object-fit: cover; }

.whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 56px; height: 56px; transition: transform .18s; }
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float img { position: absolute; left: -16px; top: -10px; width: 88px; height: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .partners__track { animation: none; }
  .carousel__track { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 40px; }
  .topbar__left { gap: 32px; }
  .topbar__right { gap: 16px; }
  .search-pill { width: 200px; }
  .mainnav__inner { gap: 28px; }
  .faq__list { width: 62%; }
  .testimonial-card { width: 320px; }
  .testimonial-card__photo { height: 380px; }
  .site-footer__cols { gap: 40px; }
  .site-footer__col--contact { flex-basis: 340px; }
}

/* ---------- Mobile menu (hamburger + side drawer, used ≤1100px) ---------- */
.burger { display: none; width: 44px; height: 44px; margin-right: -8px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; }
.burger span { display: block; height: 2px; width: 24px; border-radius: 2px; background: var(--white); }
.burger span:nth-child(2) { width: 18px; }
.burger:focus-visible, .drawer__close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
html.menu-open { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(57, 22, 22, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; width: min(88vw, 400px); height: 100%; height: 100dvh; background: var(--white); border-radius: 24px 0 0 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(57, 22, 22, .55); transform: translateX(100%); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { flex: none; height: 72px; padding: 0 20px 0 24px; background: var(--primary-500); display: flex; align-items: center; justify-content: space-between; }
.drawer__head .brand { width: 160px; height: 43.7px; }
.drawer__close { position: relative; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .15); cursor: pointer; }
.drawer__close span { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: var(--white); transform: rotate(45deg); }
.drawer__close span + span { transform: rotate(-45deg); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 28px; }
/* never squeeze items when the screen is short — the body scrolls instead */
.drawer__body > * { flex-shrink: 0; }
.drawer__search { height: 52px; padding: 0 22px; border-radius: 999px; background: var(--primary-700); display: flex; align-items: center; gap: 12px; margin: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.drawer__search:focus-within { box-shadow: 0 0 0 3px rgba(206, 105, 106, .3); }
.drawer__search img { width: 20px; height: 20px; flex: none; }
.drawer__search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; color: var(--white); font: 500 15px/1.4 var(--font-body); }
.drawer__search input::placeholder { color: var(--white); opacity: .9; }
.drawer__nav { display: flex; flex-direction: column; margin-top: -8px; }
.drawer__nav > * { border-bottom: 1px solid var(--neutral-900-a20); }
.drawer__nav > :last-child { border-bottom: 0; }
.drawer__link { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 14px 4px; background: none; cursor: pointer; text-align: left; font: 500 17px/1.3 var(--font-body); color: var(--primary-900); }
.drawer__label { margin: 0 0 4px; font: 700 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(57, 22, 22, .55); }
/* small chevron on the right of each link (points down on accordion toggles) */
.drawer__link::after { content: ''; flex: none; width: 8px; height: 8px; border-top: 2px solid var(--primary-500); border-right: 2px solid var(--primary-500); transform: rotate(45deg); margin-right: 4px; }
.drawer__group-toggle { border: 0; }
.drawer__group-toggle::after { transform: translateY(-3px) rotate(135deg); }
.drawer__group-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-45deg); }
.drawer__group-toggle[aria-expanded="true"] { color: var(--primary-500); }
.drawer__link[aria-current="page"] { color: var(--primary-500); font-weight: 600; }
/* accordion sub-menu: same items as the desktop dropdown */
.drawer__sub { display: grid; grid-template-rows: 0fr; }
.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.drawer__sub a { position: relative; margin: 0 0 4px; padding: 12px 16px; border-radius: 8px; font: 500 16px/1.4 var(--font-body); color: var(--primary-900); }
.drawer__sub a:first-child { margin-top: 2px; }
.drawer__sub a:last-child { margin-bottom: 12px; }
.drawer__sub a::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 8px; background: var(--primary-500); opacity: 0; }
.drawer__audiences { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--neutral-900-a20); }
.drawer__pill { height: 50px; flex-shrink: 0; border: 1px solid var(--primary-500); border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 600 16px/1.3 var(--font-body); color: var(--primary-500); }
.drawer__foot { flex: none; padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -14px 28px -20px rgba(57, 22, 22, .35); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.drawer__cta { width: 100%; }
.drawer__phone { font: 600 16px/1.4 var(--font-body); color: var(--primary-800); }

@media (max-width: 1100px) {
  .topbar__audiences, .search-pill, .contact-pill, .mainnav { display: none; }
  .burger { display: flex; }
  .hero h1 { font-size: 44px; }
  .hero__text p { font-size: 20px; }
  .hero__organic { left: calc(100% - 240px); }
  /* Tablet/mobile: text on top, photo below bleeding off the right edge, bottom cropped like desktop */
  .intro { height: auto; padding: 80px var(--gutter) 0; flex-direction: column; align-items: flex-start; }
  .intro__copy, .intro .title, .intro__text { width: min(100%, 600px); }
  /* Same crop as the desktop frame: 720×519 visible out of the 827.646px-wide photo */
  .intro__visual { position: relative; left: auto; top: auto; align-self: flex-end; width: min(calc(100% + var(--gutter)), 760px); margin: 48px calc(-1 * var(--gutter)) 0 0; aspect-ratio: 720 / 519; overflow: hidden; }
  .intro__photo, .intro__line { width: 114.951%; height: auto; aspect-ratio: 827.646 / 874.844; }
  .intro__line { left: 14.632%; top: 9.744%; }
  .situations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .blog__body { flex-direction: column; }
  .blog-highlight { width: 100%; }
  .blog-highlight__img, .blog-highlight__blur, .blog-highlight__text { width: calc(100% + 2px); }
  .blog__carousel { width: 100%; }
  .media__card { padding: 40px; }
  .media-card { width: calc((100% - 32px) / 2); }
  .faq { flex-direction: column; }
  .faq__title { width: auto; }
  .faq__list { width: 100%; }
  .site-footer__cols { flex-wrap: wrap; }
  .site-footer__col--contact { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .topbar { height: 68px; }
  .topbar__inner { padding: 0 20px; }
  .brand { width: 160px; height: 43.7px; }
  .hero { height: 600px; }
  .hero__inner { padding-bottom: 88px; padding-left: var(--gutter); }
  .hero h1 { font-size: 36px; }
  .hero__text p { font-size: 17px; }
  .hero__content { gap: 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__organic { left: calc(100% - 140px); }
  .title { font-size: 26px; }
  .intro { padding-top: 56px; }
  .intro__visual { width: calc(100% + var(--gutter) - 24px); margin-top: 40px; }
  .situations { padding: 64px var(--gutter); gap: 32px; }
  .situations__grid { grid-template-columns: 1fr; gap: 16px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .testimonials .title { width: auto; }
  .testimonials { padding: 56px var(--gutter); gap: 32px; }
  .testimonial-card { width: 280px; }
  .testimonial-card__photo { height: 340px; }
  .partners { padding-top: 40px; padding-bottom: 32px; gap: 24px; }
  .partner { width: 150px; transform: scale(.8); margin: 0 -15px; }
  .blog-section { padding: 56px var(--gutter); gap: 32px; }
  .blog-highlight { height: 400px; }
  .blog-highlight__text { padding: 24px; }
  .blog-highlight__title { font-size: 20px; }
  .post-card { width: 85%; }
  .media { padding-top: 40px; }
  .media__decor { width: 70%; height: 300px; }
  .media__card { padding: 28px 20px; border-radius: 24px; }
  .media-card { width: 80%; }
  .faq { padding: 56px var(--gutter); }
  .faq__line, .faq__organic { display: none; }
  .faq-item summary, .faq-item[open] summary { height: auto; min-height: 62px; padding: 14px 16px; }
  .faq-item summary span { font-size: 16px; }
  .faq-item p { padding: 0 16px 20px; font-size: 15px; }
  .site-footer { padding-top: 56px; gap: 40px; }
  .site-footer__brand-row { flex-direction: column; align-items: flex-start; }
  .site-footer__logo { width: 240px; height: 65.6px; }
  .site-footer__cols { flex-direction: column; gap: 40px; }
  .site-footer__col, .site-footer__col--contact { flex: none; width: 100%; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; font-size: 14px; }
  .site-footer__group img { width: 160px; height: 64px; }
}

/* =====================================================================
   Shared page components (Sobre, Reabilitação, …)
   ===================================================================== */
.eyebrow { margin: 0; font: 600 12px/1 var(--font-body); text-transform: uppercase; color: var(--primary-800); }
.eyebrow--light { color: var(--primary-50); }
.title--white { color: var(--white); }

/* ---------- Organic background shapes ----------
   a = upright shape; b/c = the same shape rotated 50.64°. The gradient mask is applied to an
   unrotated box (the shape's bounding box), with pre-rotated mask files for b/c. */
.decor { position: absolute; pointer-events: none; opacity: .3; display: flex; align-items: center; justify-content: center; -webkit-mask: var(--m) no-repeat var(--mp) / var(--ms); mask: var(--m) no-repeat var(--mp) / var(--ms); }
.decor img { display: block; flex: none; width: 100%; height: 100%; }
.decor--a { width: 1057.771px; height: 1031.41px; --m: url('../assets/images/sobre/decor-a-mask.svg'); --ms: 1329.078px 1384px; }
.decor--b { width: 1045.944px; height: 1048.552px; --m: url('../assets/images/sobre/decor-b-mask-rot.svg'); --ms: 1362.707px 1357.274px; --mp: 225.732px -146.349px; }
.decor--b img { width: 753.502px; height: 734.723px; transform: rotate(50.64deg); }
.decor--c { width: 1375.894px; height: 1379.325px; --m: url('../assets/images/sobre/decor-c-mask-rot.svg'); --ms: 1792.582px 1785.436px; --mp: 296.946px -192.516px; }
.decor--c img { width: 991.199px; height: 966.497px; transform: rotate(50.64deg); }
/* ---------- CTA ---------- */
.cta-visit { padding: 64px var(--gutter); }
.cta-visit__box { position: relative; overflow: hidden; border-radius: 16px; background: var(--primary-50); padding: 48px 208px; display: flex; justify-content: center; }
.cta-visit__organic { position: absolute; width: 830px; height: 809px; transform: translate(-50%, -50%); pointer-events: none; }
.cta-visit__organic--left { left: calc(50% - 754px); top: calc(50% + 170.5px); }
.cta-visit__organic--right { left: calc(50% + 840px); top: calc(50% + 188.5px); }
.cta-visit__content { position: relative; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
/* the paragraph wraps at the title's width */
.cta-visit__copy { display: grid; justify-items: center; gap: 16px; text-align: center; }
.cta-visit__copy .title { white-space: nowrap; }
.cta-visit__copy p { width: 0; min-width: 100%; margin: 0; font: 500 16px/1.4 var(--font-body); color: var(--primary-900); }

@media (max-width: 1100px) {
  .cta-visit__box { padding: 48px 40px; }
  .cta-visit__copy .title { white-space: normal; }
  .cta-visit__copy p { width: auto; }
}
@media (max-width: 720px) {
  .cta-visit { padding: 40px var(--gutter) 56px; }
  .cta-visit__box { padding: 40px 24px; }
  .cta-visit__organic { opacity: .5; }
}

/* ---------- Inner-page hero + vertical tabs (Sobre, Linhas de Cuidado, …) ---------- */
/* ---------- Hero ---------- */
.hero--page { height: 663px; }
.hero--page .hero__text { width: 739px; }
.hero--page .hero__text p { font: 400 18px/1.2 var(--font-head); }
.tabs-sobre { position: relative; overflow: hidden; padding: 64px var(--gutter) 88px; }
.tabs-sobre__decor { position: absolute; top: 0; right: 0; width: 701px; height: 384px; overflow: hidden; border-radius: 32px 0 0 32px; background: var(--primary-50); pointer-events: none; }
.tabs-sobre__decor img { position: absolute; left: -202px; top: 0; width: 484.33px; height: 497.476px; }
.tabs-sobre__card { position: relative; padding: 32px; border-radius: 24px; background: var(--bg); display: flex; align-items: center; gap: 64px; }
.tabs-sobre__list { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tabs-sobre__indicator { position: absolute; left: 0; top: 0; z-index: 1; width: 4px; height: 77px; background: var(--primary-500); transform: translateY(var(--indicator-y, 0)); }
.tab-item { padding: 16px 0 16px 24px; border-left: 2px solid rgba(0, 0, 0, .1); }
.tab-item__title { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 600 18px/1.4 var(--font-body); color: var(--primary-800); opacity: .6; }
.tab-item.is-active .tab-item__title { opacity: 1; cursor: default; }
.tab-item__title:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 4px; border-radius: 4px; }
/* collapsible description: grid rows 0fr → 1fr animates to the content height */
.tab-item__panel { display: grid; grid-template-rows: 0fr; }
.tab-item.is-active .tab-item__panel { grid-template-rows: 1fr; }
.tab-item__panel > div { min-height: 0; overflow: hidden; }
.tab-item__panel p { margin: 0; padding-top: 16px; font: 400 16px/1.4 var(--font-body); color: var(--primary-900); }
.tabs-sobre__media { position: relative; flex: none; align-self: stretch; width: 520px; min-height: 300px; border-radius: 16px; overflow: hidden; transform: translateZ(0); }
.tabs-sobre__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.tabs-sobre__media img.is-active { opacity: 1; }
@media (max-width: 1100px) {
  .hero--page .hero__text { width: min(739px, 100%); }
  .tabs-sobre__card { flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .tabs-sobre__media { width: 100%; aspect-ratio: 520 / 347; min-height: 0; }
}
@media (max-width: 720px) {
  .hero--page { height: 600px; }
  .hero--page .hero__text p { font-size: 17px; }
  .tabs-sobre { padding: 32px var(--gutter) 56px; }
  .tabs-sobre__decor { width: 70%; height: 240px; }
  .tabs-sobre__card { padding: 20px; border-radius: 20px; }
  .tab-item { padding-left: 18px; }
  .tab-item__title { font-size: 16px; }
  .tab-item__panel p { font-size: 15px; }
}

/* CTA variant with a title + two buttons (Reabilitação, Linhas de Cuidado) */
.cta-visit__title { max-width: 100%; text-align: center; }
.cta-visit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
@media (max-width: 720px) {
  .cta-visit__actions { flex-direction: column; align-items: stretch; gap: 12px; }
}