/* ==========================================================================
   Fabiana Giannini Odontologia — stylesheet
   Sections:  Tokens · Reset · Layout helpers · Header · Hero
   (more sections appended in later waves)
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */
:root {
  --cream:        #fef6eb;   /* page background */
  --beige:        #ebe2d7;   /* alternate (intro) section */
  --ink:          #333333;
  --black:        #000000;
  --white:        #ffffff;
  --teal:         #26b7ba;   /* eyebrow bullets / accents */
  --teal-blue:    #143d53;   /* big section headings */
  --gray-label:   #54595f;   /* eyebrow text */
  --dark:         #1d1d1d;

  --font-display: "Inter", system-ui, sans-serif;   /* large section titles */
  --font-heading: "Almarai", system-ui, sans-serif; /* hero, cards, accordions */
  --font-body:    "Almarai", system-ui, sans-serif;

  --content-width: 1370px;
  --gutter: 10px;
  --header-height: 87px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 73px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout helpers ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.section { position: relative; }

/* Small label that precedes a section heading (• SERVIÇOS) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-label);
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
}
.eyebrow--light { color: var(--white); }
.eyebrow--light::before { background: var(--white); }

/* Section title (Inter, large, dark teal-blue) */
.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.083;
  color: var(--teal-blue);
}

/* Elementor-style "opacity-tilt" shape divider (3 stretched, offset cream layers) */
.shape-divider {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.shape-divider--bottom {
  bottom: -1px;
  transform: rotate(180deg);   /* flips the shape for bottom placement */
}
.shape-divider svg {
  display: block;
  width: 282%;                 /* stretched far wider than the container */
  height: 114px;
  transform: translateX(-50%); /* and offset so only the tilted middle shows */
}
.shape-divider .shape-fill { fill: var(--cream); }

/* Image button (bt.svg / bt2.svg / bt3.svg) shared hover */
.btn-img { display: inline-block; }
.btn-img img { transition: transform 0.35s var(--ease); }
.btn-img:hover img { transform: translateY(-3px); }

/* Scroll-reveal (applied by JS; gated on .js so it degrades gracefully) */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .commit__bubbles .bub,
  .commit__bubbles .typing,
  .commit__bubbles .wa-header { opacity: 1; animation: none; }
  .commit__bubbles .dot { animation: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;   /* clear over the hero; JS fades it in with scroll */
}

.site-header__logo img { width: 191px; height: auto; }

.main-nav { margin-left: 28px; }
.main-nav ul { display: flex; }
.main-nav li { margin: 0 36px; }
.main-nav a {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
.main-nav a:hover { color: var(--teal); }

.header-whatsapp {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10%;
  color: var(--white);
  transition: color 0.25s var(--ease);
}
.header-whatsapp svg { width: 18px; height: 18px; fill: currentColor; }
.header-whatsapp:hover { color: var(--teal); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: url("../assets/images/hero-2.jpg") center / cover no-repeat;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 90px;
}

.hero__content { max-width: 525px; }

.hero__mark { width: 25px; height: auto; margin-bottom: 14px; }

.hero__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--white);
}

.hero__text {
  max-width: 422px;
  margin-top: 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white);
}

.hero__cta { margin-top: 28px; }
.hero__cta img { width: 260px; height: auto; }

/* ==========================================================================
   Intro — "Nosso objetivo..."
   ========================================================================== */
.intro {
  position: relative;
  background: var(--beige);
  overflow: hidden;
}
.intro__inner {
  display: flex;
  align-items: stretch;
  padding: 140px 0 160px;
}
.intro__media {
  flex: 0 0 27.3%;
  display: flex;
  padding: var(--gutter);
}
.intro__media--left { align-items: flex-end; }   /* woman sits low */
.intro__media--right { align-items: flex-start; } /* man sits high */
.intro__media img {
  width: 100%;
  border-radius: 30px;
  object-fit: cover;
}
.intro__media--left img { aspect-ratio: 329 / 336; }
.intro__media--right img { aspect-ratio: 1 / 1; }

.intro__body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 506px;   /* lets the staggered side images span a taller zone than the text */
  padding-inline: var(--gutter);
}
.intro__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.15;
  color: var(--teal-blue);
}
.intro__body p {
  max-width: 522px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}
.intro__cta { margin-top: 32px; }
.intro__cta img { width: 260px; height: auto; }

/* ==========================================================================
   Serviços — section heading block
   ========================================================================== */
.servicos-head {
  padding: 90px var(--gutter) 50px;
}
.servicos-head .eyebrow { margin-bottom: 20px; }
.servicos-head__title {
  max-width: 500px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.083;
  color: var(--teal-blue);
}

/* ---------- Service cards (image left / text right) ----------------------- */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 90px;
}
.service {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 40px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.service__media {
  flex: 0 0 48.75%;   /* 585 / 1200 */
}
.service__media img {
  width: 100%;
  aspect-ratio: 585 / 464;
  object-fit: cover;
  border-radius: 10px;
}
.service__body {
  flex: 1 1 0;
  min-width: 0;
}
.service__title {
  max-width: 414px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 35px;
  line-height: 1.45;
  letter-spacing: -0.6px;
  color: var(--teal-blue);
}
.service__intro {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: var(--ink);
}
.service__accordion { margin-top: 28px; }
.service__cta { display: inline-block; margin-top: 26px; }
.service__cta img { width: 260px; height: auto; }

/* ---------- Accordion (native <details>) ---------------------------------- */
.accordion details { margin-bottom: 6px; }
.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #e9e9e9;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.accordion__icon {
  flex: none;
  display: flex;
  color: var(--ink);
  transition: transform 0.3s var(--ease);
}
.accordion__icon svg { width: 13px; height: 13px; }
.accordion details[open] .accordion__icon { transform: rotate(180deg); }
.accordion__body { padding: 14px 10px 4px; }
.accordion__body p {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: var(--ink);
}

/* ==========================================================================
   Tecnologia — image left / text right
   ========================================================================== */
.tech__inner {
  display: flex;
  align-items: center;
  gap: 70px;
  padding: 10px 32px;
}
.tech__media { flex: 0 0 567px; }
.tech__media img {
  width: 100%;
  aspect-ratio: 567 / 613;
  object-fit: cover;
  border-radius: 20px;
}
.tech__body { flex: 1 1 0; min-width: 0; }
.tech__body .eyebrow { margin-bottom: 20px; }
.tech__title { margin-bottom: 4px; }
.tech__body p {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}
.tech__cta { display: inline-block; margin-top: 30px; }
.tech__cta img { width: 260px; height: auto; }

/* ==========================================================================
   Valores — "A arte de cuidar" + 3 cards
   ========================================================================== */
.values { padding-top: 90px; padding-bottom: 90px;}
.values__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline: 10px;
}
.values__title { flex: 0 0 auto; max-width: 400px; }
.values__rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.value-card {
  padding: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22); /* narrow: line under each card */
}
@media (min-width: 1367px) {
  .value-card { border-bottom: 0; }
  .value-card:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.22); /* wide: vertical dividers between cards */
  }
}
.value-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
}
.value-card__title {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 23px;
  line-height: 1.3;
  color: var(--teal-blue);
}
.value-card p {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

/* ==========================================================================
   Compromisso — "agende pelo WhatsApp": photo banner with floating chat
   ========================================================================== */
/* full-bleed banner, like .cta-final — edge to edge, tall, no outer padding */
.commit__card {
  position: relative;
  overflow: hidden;
  min-height: 800px;
}

/* Photo + legibility layers */
.commit__photo {
  position: absolute;
  inset: 0;
  background: url("../assets/images/commit_image.webp") center 22% / cover no-repeat;
  z-index: 0;
}
.commit__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* soft left shade — just enough to keep the white copy legible, no flat panel */
  background: linear-gradient(
    95deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.22) 32%,
    rgba(0, 0, 0, 0) 56%
  );
}
.commit__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Text column — constrained to the site container, aligned with other sections */
.commit__inner {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 800px;
  padding: 0 var(--gutter);
}
.commit__body {
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.commit__body .eyebrow { margin-bottom: 22px; color: var(--white); }   /* white label, teal dot */
.commit__title { color: var(--white); margin-bottom: 20px; }
.commit__lead {
  max-width: 460px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 32px;
}

/* WhatsApp CTA — mirrors the site button (cream icon box + uppercase label) */
.commit__cta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--teal);
  border-radius: 10px;
  padding: 7px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.commit__cta:hover { background: #1f9b9e; }
.commit__cta-box {
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 9px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.commit__cta-box svg { width: 19px; height: 19px; fill: #1d9e75; }
.commit__cta-label {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 22px;
}

/* Floating WhatsApp conversation — system font keeps the chat authentic */
.commit__bubbles {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--content-width);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bub {
  position: absolute;
  max-width: 26%;
  border-radius: 16px;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #111b21;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: commit-pop 0.4s var(--ease) forwards;
}
.bub-in { background: #fff; border-bottom-left-radius: 4px; }
.bub-out { background: #d9fdd3; border-bottom-right-radius: 4px; }

/* Incoming (white/clinic) sit left of the cluster, outgoing (green) sit right */
.b1 { top: 15%; left: 66%; animation-delay: 0.2s; }
.b2 { top: 24%; right: 6%; animation-delay: 0.55s; }
.b3 { top: 33%; left: 66%; animation-delay: 0.9s; }
.b4 { top: 42%; right: 6%; animation-delay: 1.25s; }
.b5 { top: 51%; left: 66%; animation-delay: 1.6s; }
.b6 { top: 60%; right: 6%; animation-delay: 1.95s; }

.typing {
  position: absolute;
  top: 69%;
  left: 66%;
  display: flex;
  gap: 4px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: commit-pop 0.4s var(--ease) 2.3s forwards;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8696a0;
  animation: commit-typing 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

/* Timestamp + read ticks inside the outgoing bubble */
.bub-out .meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  vertical-align: baseline;
}
.bub-out .ts { font-size: 10px; color: #8696a0; }
.bub-out .ticks { width: 15px; height: 9px; }

/* Floating clinic header */
.wa-header {
  position: absolute;
  top: 6%;
  left: 66%;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  animation: commit-pop 0.4s var(--ease) 0.05s forwards;
}
.wa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--white);
}
.wa-clinic-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.wa-online {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.wa-online::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

@keyframes commit-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes commit-typing {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ==========================================================================
   Depoimentos — heading left / testimonials right
   ========================================================================== */
.testi { background: var(--white); }
.testi__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 80px 10px;
}
.testi__head { flex: 1 1 0; min-width: 0; }
.testi__head .eyebrow { margin-bottom: 20px; }
.testi__subtitle {
  margin-top: 18px;
  font-size: 16px;
  color: var(--ink);
}

.testi__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 30px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 0 44px -15px rgba(0, 0, 0, 0.5);
}
.testimonial__body { flex: 1 1 0; min-width: 0; }
.testimonial__stars { width: 135px; height: auto; margin-bottom: 18px; }
.testimonial__quote {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}
.testimonial__author {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.testimonial__photo { flex: 0 0 180px; }
.testimonial__photo img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 20px;
}

/* ==========================================================================
   Clínica (#estamos) — teal panel, text left / image right
   ========================================================================== */
.clinic { padding: 90px 0; }
.clinic__panel {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 40px;
  background: var(--cream);
  border-radius: 10px;
}
.clinic__body { flex: 1 1 0; min-width: 0; padding: 10px; }
.clinic__body .eyebrow { margin-bottom: 20px; }
.clinic__title { margin-bottom: 18px; }   /* inherits .section-title teal-blue */
.clinic__addr {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-blue);
  margin-bottom: 16px;
}
.clinic__lead {
  max-width: 460px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 24px;
}
.clinic__accordion { margin-bottom: 28px; }
.clinic__cta { display: inline-block; }
.clinic__cta img { width: 260px; height: auto; }
.clinic__media { flex: 0 0 48.75%; }   /* scales with the card, like the original */
.clinic__media img {
  width: 100%;
  aspect-ratio: 585 / 668;
  object-fit: cover;
  border-radius: 10px;
}

/* Light accordion (on teal) */
.accordion--light summary { border-bottom-color: rgba(255, 255, 255, 0.2); }
.accordion--light .accordion__title { color: var(--white); font-size: 14px; font-weight: 600; }
.accordion--light .accordion__icon { color: var(--white); }
.accordion--light .accordion__body p { color: var(--white); }

/* ==========================================================================
   CTA final (#contato) — full-bleed background, flush-left content
   ========================================================================== */
.cta-final {
  min-height: 800px;
  display: flex;
  align-items: flex-end;
  background: url("../assets/images/cta-1.jpg") 50% 0% / cover no-repeat;
}
.cta-final__inner { width: 100%; padding: 0 0 60px; }
.cta-final__content { max-width: 922px; }
.cta-final__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 48px;
  line-height: 1.08;
  color: var(--white);
}
.cta-final__content p {
  max-width: 422px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white);
}
.cta-final__cta { display: inline-block; margin-top: 30px; }
.cta-final__cta img { width: 260px; height: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--teal-blue); color: var(--white); }
.site-footer__main {
  position: relative;
  padding: 60px 20px 30px;
}
.site-footer__badge {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 33px;
  height: auto;
}
.site-footer__cols {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.site-footer__h {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.site-footer__col p {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.6;
  color: var(--white);
}
.site-footer__col p + p { margin-top: 14px; }
.site-footer__col--right { flex: 0 0 auto; margin-right: 20px; }
.site-footer__legal {
  margin-top: 30px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
}
.site-footer__bar p {
  font-family: "Inter Tight", var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer__logo img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---------- Tablet and below (≤1024px) ---------- */
@media (max-width: 1024px) {
  .main-nav { margin-left: 20px; }
  .main-nav li { margin: 0 16px; }

  /* let the fixed-width tech image flex down */
  .tech__inner { gap: 32px; padding-inline: 28px; }
  .tech__media { flex: 0 0 47%; }

  /* horizontal gutters for edge-to-edge content */
  .servicos-head { padding-inline: 28px; }
  .services-list { padding-inline: 28px; }
  .commit__inner { padding-inline: 28px; }
  .commit__body { width: 52%; }
  .testi__inner { padding-inline: 28px; }

  /* testimonials: stack heading above the list so quotes get room */
  .testi__inner { flex-direction: column; gap: 40px; }
  .testi__head,
  .testi__list { flex: none; }
  .values__head,
  .values__grid { padding-inline: 28px; }
  .cta-final__content { padding-inline: 28px; }
  .clinic { padding-inline: 28px; }
  .hero__content { padding-inline: 28px; }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  /* Header: hide nav, keep logo + whatsapp; stays dark (no transparent state) */
  .main-nav { display: none; }
  .site-header { padding: 16px 20px; background: rgba(0, 0, 0, 0.2); }
  .site-header__logo img { width: 168px; }

  /* Hero: mobile background + smaller type */
  .hero {
    background-image: url("../assets/images/hero-mob-4-2.webp");
    min-height: 100svh;
  }
  .hero__inner { padding-bottom: 56px; }
  .hero__content { max-width: 100%; padding-inline: 20px; }
  .hero__title { font-size: 32px; line-height: 1.2; }
  .hero__text { max-width: 100%; }

  /* Generic: stack every two/three-column section */
  .intro__inner,
  .service,
  .tech__inner,
  .commit__inner,
  .clinic__panel,
  .testi__inner,
  .testimonial,
  .site-footer__cols {
    flex-direction: column;
  }

  /* stacked flex children must size to content (not collapse via flex:1 1 0) */
  .intro__body,
  .intro__media,
  .service__body,
  .service__media,
  .tech__body,
  .tech__media,
  .commit__body,
  .clinic__body,
  .clinic__media,
  .testi__head,
  .testi__list,
  .testimonial__body,
  .testimonial__photo {
    flex: none;
    min-height: 0;
  }

  /* Section title sizes (Inter) */
  .section-title { font-size: 32px; }
  .tech__title,
  .values__title,
  .commit__title,
  .clinic__title { font-size: 33px; }
  .testi .section-title { font-size: 33px; }

  /* Shorter shape divider on mobile (matches the original) */
  .shape-divider svg { height: 59px; }

  /* Intro — staggered image pair above the text (like the original) */
  .intro__inner {
    flex-flow: row wrap;
    align-items: flex-start;
    padding: 40px 20px 80px;
    gap: 0;
  }
  .intro__media { flex: 0 0 52%; padding: 0; }
  .intro__media--left { order: 1; }
  .intro__media--right { order: 2; margin-top: 130px; margin-left: -4%; }
  .intro__media img { aspect-ratio: 1 / 1; }
  .intro__body { order: 3; flex: 0 0 100%; min-height: 0; padding: 0; margin-top: 40px; }
  .intro__title { font-size: 25px; }
  .intro__body p { max-width: 100%; }

  /* Serviços + service cards */
  .servicos-head { padding: 60px 20px 24px; }
  .servicos-head__title { font-size: 28px; font-weight:100 }
  .services-list { padding: 0 20px 60px; gap: 24px; }
  .service { padding: 24px; gap: 24px; }
  .service__media { flex: none; }
  .service__title { max-width: 100%; font-size: 24px; }
  .service__intro { display: none; }     /* hidden on mobile, like the original */
  .accordion__title { font-size: 12px; }

  /* Tecnologia */
  .tech__inner { padding: 40px 20px; gap: 28px; }
  .tech__media { flex: none; }
  .tech__title { font-size: 28px; }

  /* Valores */
  .values { padding: 60px 0 60px; }
  .values__head { flex-direction: column; align-items: flex-start; gap: 24px; padding-inline: 20px; }
  .values__title { max-width: 100%; font-size: 34px; }
  .values__rule { display: none; }
  .values__grid { grid-template-columns: 1fr; gap: 10px; padding-inline: 20px; margin-top: 36px; }
  .value-card { border-bottom: 1px solid rgba(0, 0, 0, 0.22); padding: 24px 0; }
  .value-card img { width: 85%; }   /* smaller, left-aligned (like the original) */
  .value-card__title { font-size: 27px; }

  /* Compromisso — mobile: brand band + centered title on top, woman centered in the
     photo below, two bubbles at the seam, full-width WhatsApp button at the bottom */
  .commit__card {
    
    background: var(--teal-blue);
  }
  .commit__photo { top: 42%; background-position: center; }   /* photo fills lower part, woman centered */
  .commit__overlay {
    background: linear-gradient(to bottom, var(--teal-blue) 43%, rgba(20, 61, 83, 0) 60%);
  }
  .commit__vignette { background: linear-gradient(to bottom, transparent 62%, rgba(0, 0, 0, 0.28) 100%); }

  /* text + button share one full-height column: title pinned top, button pinned bottom */
  .commit__inner {
    position: absolute;
    inset: 0;
    z-index: 5;
    min-height: 0;
    display: flex;
    padding: 48px 22px 22px;
  }
  .commit__body {
    width: 100%;
    flex: 1;                 /* fill the inner column so margin-top:auto can work */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .commit__body .eyebrow { justify-content: flex-start; margin-bottom: 18px; }   /* teal dot + text, like other sections */
  .commit__title { font-size: 31px; line-height: 1.12; text-align: left; margin-bottom: 14px; }
  .commit__lead { font-size: 15px; max-width: 100%; margin-bottom: 0; }
  .commit__cta { margin-top: auto; }   /* pinned bottom, natural width (centered by the body) */

  /* only two bubbles, floating over the band/photo seam */
  .commit__bubbles { position: absolute; inset: 0; transform: none; max-width: 100%; z-index: 6; padding: 0; }
  .wa-header,
  .b3, .b4, .b5, .b6, .typing { display: none; }
  .bub { position: absolute; max-width: 72%; }
  .b1 { top: 33%; left: 22px; right: auto; }    /* incoming (clinic) — stays white via .bub-in */
  .b2 { top: 41%; right: 22px; left: auto; }     /* outgoing (cliente) — stays green via .bub-out */

  /* Depoimentos */
  .testi__inner { padding: 56px 20px; gap: 36px; align-items: stretch; }
  .testi__list { flex: none; gap: 16px; }
  .testimonial { gap: 24px; align-items: stretch; }
  .testimonial__photo { flex: none; width: 60%; align-self: flex-end; }  /* smaller, right-aligned */
  .testimonial__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  /* Clínica */
  .clinic { padding: 0; }
  .clinic__panel { padding: 40px 20px; border-radius: 0; align-items: stretch; }   /* full-bleed, inner gutter kept */
  .clinic__media { flex: none; }
  .clinic__media img { aspect-ratio: 585 / 668; }   /* keep the tall portrait crop */
  .clinic__title { font-size: 28px; }

  /* mobile: reorder the card (lead before address) and drop the accordion */
  .clinic__body { padding: 0; display: flex; flex-direction: column; }
  .clinic__body .eyebrow { order: 1; }
  .clinic__title        { order: 2; }
  .clinic__lead         { order: 3; }
  .clinic__addr         { order: 4; margin-bottom: 0; }
  .clinic__cta          { order: 5; margin-top: 24px; }
  .clinic__accordion    { display: none; }

  
  /* CTA final — mobile background (portrait crop with dark base for the text) */
  .cta-final {
    background-image: url("../assets/images/ctamobnoo.jpg");
    background-position: center top;
  }
  .cta-final__title { font-size: 32px; }
  .cta-final__content p { max-width: 100%; }

  /* Footer */
  .site-footer__main { padding: 40px 20px 28px; }
  .site-footer__badge { display: none; }
  .site-footer__cols { gap: 28px; }
  .site-footer__col--right { margin-right: 0; }
  .site-footer__bar { flex-direction: column; gap: 6px; padding: 14px 20px; }
}