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

body, html {
  overflow-x: clip;
  width: 100%;
  background-color: var(--bg-site);
}

a { text-decoration: none; }

.navbar__nav,
.navbar-mobile__nav { list-style: none; }

.kz__logo { width: 220px; height: auto; }
.kz__logo--light { display: block !important; }
.kz__logo--dark  { display: none !important; }
[data-theme="dark"] .kz__logo--light { display: none !important; }
[data-theme="dark"] .kz__logo--dark  { display: block !important; }

.footer-kz__logo--light { display: block; }
.footer-kz__logo--dark  { display: none; }
[data-theme="dark"] .footer-kz__logo--light { display: none; }
[data-theme="dark"] .footer-kz__logo--dark  { display: block; }

.social-icon--light { display: inline-block; }
.social-icon--dark  { display: none; }
[data-theme="dark"] .social-icon--light { display: none; }
[data-theme="dark"] .social-icon--dark  { display: inline-block; }


/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg-site: #ffffff;
  --navbar--normal: #0A121A;
  --navbar--hover: #1E40AF;
  --header-title: #1e40af;
  --btn-secondary-border: #d8d7ec;
  --purple: rgba(158, 163, 230, 1);
  --blue: #1E40AF;
  --blue-mid: #00AAFF;
  --purple-bg: #EBEDFF;
  --green: #00FDA9;
  --dark: #15253F;
    --dark2: #15253F;
  --grey: #6B7582;
  --border: #E5E7EB;
  --white: #FFFFFF;
  --orange: #EE6C56;
  --qo-amber: #F5B841;
  --pmi-pink: #F2789F;
  --li-cream: #FDF8EC;

  --purple-title: #8B7CF0;
  --purple-strong: #7C6BF2;
  --purple-soft: #C9C3F7;

  --yellow-btn: #F6D860;
  --step-bg: #F4F5FE;
  --card-line: #E3E4F3;

  /* faixas de risco / faixa etária */
  --risk-red: #F4736E;
  --risk-red-bg: #FEF2F1;
  --risk-amber: #F2C94C;
  --risk-amber-bg: #FEFAEF;
  --risk-green: #16B8A6;
  --risk-green-bg: #EFFBF8;
  --risk-blue: #4AA3E5;
  --risk-blue-bg: #F1F8FD;
  --risk-purple: #8C82FC;
  --risk-purple-bg: #F4F3FE;

  --cta-pink-bg: #FDF1F5;
  --photo-green: #D9F5E3;
}

[data-theme="dark"] {
  --bg-site: #15253F;
  --navbar--normal: #FFFFFF;
  --navbar--hover: #0080FF;
  --header-title: #64B2FF;
  --btn-secondary-border: var(--header-title);
  --purple: rgba(158, 163, 230, 1);
  --blue: #0080FF;
  --blue-mid: #00AAFF;
  --purple-bg: rgb(22, 40, 74);
  --green: #00FDA9;
  --dark: #ffffff;
    --dark2: #15253F;
  --grey: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.15);
  --white: #FFFFFF;
  --orange: #EE6C56;
  --qo-amber: #F5B841;
  --pmi-pink: #F2789F;
  --li-cream: #1E2A45;

  --purple-title: #A79BFF;
  --purple-strong: #7C6BF2;
  --purple-soft: rgba(201, 195, 247, 0.5);

  --yellow-btn: #F6D860;
  --step-bg: rgba(255, 255, 255, 0.05);
  --card-line: rgba(255, 255, 255, 0.15);

  --risk-red: #F4736E;
  --risk-red-bg: rgba(244, 115, 110, 0.10);
  --risk-amber: #F2C94C;
  --risk-amber-bg: rgba(242, 201, 76, 0.10);
  --risk-green: #16B8A6;
  --risk-green-bg: rgba(22, 184, 166, 0.10);
  --risk-blue: #4AA3E5;
  --risk-blue-bg: rgba(74, 163, 229, 0.10);
  --risk-purple: #8C82FC;
  --risk-purple-bg: rgba(140, 130, 252, 0.10);

  --cta-pink-bg: rgba(242, 120, 159, 0.08);
  --photo-green: #D9F5E3;
}


/* ============================================================
   FONTES
   ============================================================ */
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Extra-Light.otf') format('opentype'); font-weight:200; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Light.otf') format('opentype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Regular.otf') format('opentype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Italic.otf') format('opentype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Medium.otf') format('opentype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Semi-Bold.otf') format('opentype'); font-weight:600; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Bold.otf') format('opentype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Gelica'; src:url('../assets/fonts/fonnts.com-Gelica-Black.otf') format('opentype'); font-weight:900; font-style:normal; }

h1, h2 { font-family: "Gelica", serif; font-weight: 600; }
h3, h4, h5, h6 { font-family: "Gelica", serif; font-weight: 400; }
body { font-family: "Inter", sans-serif; }


/* ============================================================
   CONTAINERS
   ============================================================ */
.container {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container2 {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 767px) {
  .container, .container2 { padding-inline: 20px; }
}

.container3 {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 767px) {
  .container, .container3 { padding-inline: 20px; }
}


/* ============================================================
   DIVISOR ARCO-ÍRIS TRACEJADO
   ============================================================ */
.rainbow-dash {
  display: block;
  height: 3px;
  background-image: linear-gradient(
    to right,
    #7C6BF2, #4AA3E5, #00AAFF, #16B8A6, #00FDA9,
    #F2C94C, #F5A24B, #F4736E, #F2789F, #FBD5DF
  );
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 28px, transparent 28px 44px);
  mask-image: repeating-linear-gradient(to right, #000 0 28px, transparent 28px 44px);
}


/* ============================================================
   1 · HERO
   ============================================================ */
.fh { padding: 40px 0; background: var(--bg-site); overflow: hidden; }

.fh__box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 43%;
  align-items: center;
  background: var(--purple-bg);
  border-radius: 20px;
  min-height: 520px;
}

.fh__content { position: relative; z-index: 4; padding: 60px 30px 60px 64px; }

.fh__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  color: var(--dark);
  margin: 0 0 22px;
}
.fh__eyebrow strong { font-weight: 700; }

.fh__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

.fh__title {
  font-family: "Gelica", serif;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1.16;
  color: var(--purple-title);
  margin: 0 0 20px;
  max-width: 16ch;
}
.fh__title em { font-style: normal; font-weight: 700; color: var(--purple-strong); }

.fh__desc {
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--dark);
  margin: 0 0 26px;
  max-width: 46ch;
}
.fh__desc a { color: var(--purple-strong); font-weight: 500; }

.fh__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.fh__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  padding: 15px 26px;
  transition: filter .2s ease, transform .2s ease;
}
.fh__btn:active { transform: translateY(1px); }

.fh__btn--primary {
  position: relative;
  background: var(--purple-strong);
  color: var(--white);
  padding: 18px 30px 18px 76px;
}
.fh__btn--primary:hover { filter: brightness(.95); color: var(--white); }

.fh__btn-icon {
  position: absolute;
  left: 14px;
  top: 20%;
  transform: translateY(-50%);
  width: 48px;
  height: auto;
}

.fh__btn--ghost {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--purple-soft);
}
.fh__btn--ghost svg { width: 20px; height: 20px; flex: none; }
.fh__btn--ghost:hover { background: rgba(255,255,255,.4); color: var(--dark); }
[data-theme="dark"] .fh__btn--ghost:hover { background: rgba(255,255,255,.08); }

.fh__proof { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.fh__avatars { display: flex; flex: none; }
.fh__avatars img {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--purple-bg);
  object-fit: cover;
  margin-left: -10px;
}
.fh__avatars img:first-child { margin-left: 0; }

.fh__proof-text { font-family: "Inter", sans-serif; font-size: .8125rem; color: var(--dark); }

.fh__pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }

.fh-pill {
  font-family: "Inter", sans-serif;
  font-size: .6875rem;
  color: var(--dark);
  border: 1px solid var(--purple-soft);
  border-radius: 999px;
  padding: 8px 16px;
}

.fh__circles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 20px;
  pointer-events: none;
}

.fh__circle { position: absolute; border-radius: 50%; background: var(--purple); }
.fh__circle--top    { width: 300px; height: 300px; top: -20px;    right: 14%; }
.fh__circle--bottom { width: 240px; height: 240px; bottom: -40px; right: -4%; }
[data-theme="dark"] .fh__circle { opacity: .35; }

.fh__media { position: relative; align-self: stretch; min-height: 520px; }

.fh__photo {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 40em;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .fh { padding: 24px 0; }

  .fh__box { display: flex; flex-direction: column; border-radius: 16px; min-height: 0; }

  .fh__media,
  .fh__circles { display: none; }

  .fh__content { padding: 32px 24px 36px; }

  .fh__title { font-size: 1.875rem; max-width: none; }
  .fh__desc  { max-width: none; }

  .fh__actions { flex-direction: column; gap: 12px; }
  .fh__btn { width: 100%; }
  .fh__btn--primary { padding: 18px 20px; justify-content: center; }
  .fh__btn-icon { display: none; }

  .fh__pills { gap: 8px; }
}


/* ============================================================
   2 · O QUE É FEBRE DE VERDADE
   ============================================================ */
.febre { padding: 56px 0 40px; background: var(--bg-site); }

.febre__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.febre__title {
  font-family: "Gelica", serif;
  font-size: 1.75rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  color: var(--blue-mid);
  margin: 0 0 22px;
}

.febre__text {
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--dark);
  margin: 0 0 20px;
}
.febre__text:last-child { margin-bottom: 0; }

.febre__aside-title {
  font-family: "Gelica", serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--purple-title);
  margin: 0 0 18px;
}

.febre__list { list-style: none; margin: 0; padding: 0; }

.febre-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--step-bg);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--dark);
}
.febre-item:last-child { margin-bottom: 0; }
.febre-item em { font-style: italic; font-weight: 700; }

.febre-item__icon { width: 26px; height: auto; flex: none; }

@media (max-width: 767px) {
  .febre { padding: 40px 0 32px; }
  .febre__grid { grid-template-columns: 1fr; gap: 32px; }
  .febre__title { font-size: 1.75rem; }
  .febre-item { padding: 16px 18px; }
}


/* ============================================================
   3 · TEMPERATURA POR FAIXA ETÁRIA
   ============================================================ */
.faixa { padding: 40px 0 56px; background: var(--bg-site); }

.faixa__title {
  font-family: "Gelica", serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--purple-title);
  text-align: center;
  margin: 0 0 32px;
}
.faixa__title em { font-style: normal; font-weight: 700; }

.faixa__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.faixa-card {
  position: relative;
  background: var(--step-bg);
  border-radius: 8px;
  padding: 26px 22px;
  overflow: hidden;
}
.faixa-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.faixa-card--red::before    { background: var(--risk-red); }
.faixa-card--purple::before { background: var(--risk-purple); }
.faixa-card--green::before  { background: var(--risk-green); }
.faixa-card--amber::before  { background: var(--risk-amber); }

.faixa-card__icon { width: 26px; margin-bottom: 16px; }
.faixa-card__icon img { width: 100%; height: auto; display: block; }

.faixa-card__name {
  font-family: "Gelica", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dark);
  margin: 0 0 12px;
}

.faixa-card__text {
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
}
.faixa-card__text em { font-style: italic; font-weight: 700; }

@media (max-width: 767px) {
  .faixa { padding: 32px 0 40px; }

  .faixa__title { font-size: 1.625rem; padding-inline: 20px; margin-bottom: 24px; }

  .faixa .container { padding-inline: 0; max-width: none; overflow: visible; }

  .faixa__grid {
    display: flex;
    width: 100%;
    gap: 4vw;
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .faixa__grid::-webkit-scrollbar { display: none; }
  .faixa__grid::after { content: ''; flex: 0 0 4px; }

  .faixa-card { flex: 0 0 72vw; min-width: 0; scroll-snap-align: start; }

  .faixa__grid.is-dragging { scroll-snap-type: none; cursor: grabbing; }
}


/* ============================================================
   4 · O OBJETIVO NÃO É BAIXAR O NÚMERO
   ============================================================ */
.dose { padding: 40px 0; background: var(--bg-site); }

.dose__title {
  font-family: "Gelica", serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--purple-title);
  text-align: center;
  margin: 0 0 36px;
}
.dose__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--qo-amber);
}

.dose__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.dose__text {
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--dark);
  margin: 0 0 18px;
}

.dose__warn {
  background: var(--risk-red-bg);
  border-left: 3px solid var(--risk-red);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 24px;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--orange);
}

.dose__aside-title {
  font-family: "Inter", sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
}

.dose__list { list-style: none; margin: 0; padding: 0; }

.dose-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--dark);
}
.dose-item:last-child { margin-bottom: 0; }

.dose-item--purple { background: var(--risk-purple-bg); border-color: var(--purple-soft); }
.dose-item--green  { background: var(--risk-green-bg);  border-color: var(--risk-green); }

@media (max-width: 767px) {
  .dose { padding: 32px 0; }
  .dose__title { font-size: 1.625rem; margin-bottom: 26px; }
  .dose__grid { grid-template-columns: 1fr; gap: 28px; }
}


/* ============================================================
   5 · CTA DÚVIDA (caixa rosa)
   ============================================================ */
.duvida { padding: 24px 0 56px; background: var(--bg-site); }

.duvida__arrow {
  display: block;
  width: 20px;
  height: auto;
  margin: 0 auto 40px;
  color: var(--dark);
}

.duvida__box {
  background: var(--cta-pink-bg);
  border-radius: 16px;
  padding: 64px 48px;
  text-align: center;
}

.duvida__title {
  font-family: "Gelica", serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--purple-title);
  margin: 0 auto 18px;
  max-width: 29ch;
}
.duvida__title em { font-style: italic; font-weight: 700; color: var(--orange); }

.duvida__desc {
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--dark);
  max-width: 58ch;
  margin: 0 auto 32px;
}

.duvida__btn {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  background: var(--yellow-btn);
  color: var(--dark2);
  font-family: "Inter", sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 18px 30px;
  transition: filter .2s ease, transform .2s ease;
}
.duvida__btn svg { width: 18px; height: 18px; flex: none; }
.duvida__btn:hover  { filter: brightness(.96); color: var(--dark); }
.duvida__btn:active { transform: translateY(1px); }

@media (max-width: 767px) {
  .duvida { padding: 16px 0 40px; }
  .duvida__arrow { margin-bottom: 28px; }
  .duvida__box { padding: 36px 22px; border-radius: 14px; }
  .duvida__title { font-size: 1.625rem; max-width: none; }
  .duvida__desc { max-width: none; }
  .duvida__btn { width: 100%; justify-content: space-between; gap: 20px; }
}


/* ============================================================
   6 · SINAIS DE ALERTA
   ============================================================ */
.alerta { padding: 40px 0 56px; background: var(--bg-site); }

.alerta__grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 40px;
  align-items: start;
}

.alerta__title {
  font-family: "Gelica", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--purple-title);
  margin: 0;
}
.alerta__title em { font-style: italic; font-weight: 700; color: var(--qo-amber); }

.alerta-card {
  border-left: 4px solid;
  border-radius: 0 8px 8px 0;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.alerta-card:last-child { margin-bottom: 0; }

.alerta-card--red   { background: var(--risk-red-bg);   border-left-color: var(--risk-red); }
.alerta-card--amber { background: var(--risk-amber-bg); border-left-color: var(--risk-amber); }
.alerta-card--green { background: var(--risk-green-bg); border-left-color: var(--risk-green); }

.alerta-card__icon { width: 26px; margin-bottom: 14px; }
.alerta-card__icon img { width: 100%; height: auto; display: block; }

.alerta-card__name {
  font-family: "Gelica", serif;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 12px;
}

.alerta-card__list {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}
.alerta-card__list li {
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--dark);
  margin-bottom: 4px;
}
.alerta-card__list li:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .alerta { padding: 32px 0 40px; }
  .alerta__grid { grid-template-columns: 1fr; gap: 24px; }
  .alerta__title { font-size: 2.4rem; }
  .alerta-card { padding: 20px 20px; }
}


/* ============================================================
   7 · UMA RESPOSTA PARA O SEU FILHO
   ============================================================ */
.resposta { padding: 40px 0 56px; background: var(--bg-site); overflow: hidden; }

.resposta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.resposta__title {
  font-family: "Gelica", serif;
  font-size: 1.625rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  color: var(--purple-strong);
  margin: 0 0 20px;
  max-width: 24ch;
}

.resposta__text {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dark);
  margin: 0 0 18px;
}

.resposta__sub {
  font-family: "Inter", sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--dark);
  margin: 26px 0 16px;
}

.resposta__list { list-style: none; margin: 0; padding: 0; }

.resposta-item {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dark);
}
.resposta-item:last-child { margin-bottom: 0; }

.resposta-item__num {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
}

.resposta-item--amber  { border-color: var(--risk-amber); background: var(--risk-amber-bg); }
.resposta-item--amber .resposta-item__num  { background: var(--risk-amber); color: var(--dark); }

.resposta-item--purple { border-color: var(--purple-soft); background: var(--risk-purple-bg); }
.resposta-item--purple .resposta-item__num { background: var(--risk-purple); color: var(--white); }

.resposta-item--blue   { border-color: var(--risk-blue); background: var(--risk-blue-bg); }
.resposta-item--blue .resposta-item__num   { background: var(--risk-blue); color: var(--white); }

.resposta__media { position: relative; min-height: 480px; }

.resposta__bg {
  position: absolute;
  z-index: 0;
  left: 4%;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--photo-green);
  border-radius: 12px;
}

.resposta__photo {
  position: absolute;
  z-index: 1;
  left: 0%;
  bottom: 0;
  width: 32em;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .resposta { padding: 32px 0 40px; }
  .resposta__grid { grid-template-columns: 1fr; gap: 28px; }
  .resposta__media { min-height: 0; height: 320px; }
  .resposta__bg { left: 0; right: 0; }
  .resposta__photo { left: 50%; width: 100%; transform: translateX(-50%); }
  .resposta__title { font-size: 2.7rem; }
}

.depoimentos {
  --d-name: #D98E4A;
  /* laranja/âmbar do nome (decorativo, fixo) */
  --d-text: var(--navbar--normal);
  background: var(--bg-site);
  padding: 60px 24px 80px;
}

.depoimentos__container {
  max-width: 1140px;
  margin: 0 auto
}

/* timeline de pontos */
.depoimentos__timeline {
  position: relative;
  max-width: 560px;
  margin: 0 auto 56px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.depoimentos__timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--btn-secondary-border);
  z-index: 0
}

.depoimentos__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  z-index: 1
}

.depoimentos__dot--1 {
  background: #8C82FC
}

.depoimentos__dot--2 {
  background: #4AA3E5
}

.depoimentos__dot--3 {
  background: #16B8A6
}

.depoimentos__dot--4 {
  background: #F2C94C
}

.depoimentos__dot--5 {
  background: #F5A24B
}

.depoimentos__dot--6 {
  background: #F4736E
}

.depoimentos__dot--7 {
  background: #EF5B5B
}

.depoimentos__dot--8 {
  background: #FBD5DF
}

[data-theme="dark"] .depoimentos__dot--8 {
  background: #ffffff
}

/* cabeçalho */
.depoimentos__header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 44px
}

.depoimentos__title {
  font-family: "Gelica", "DM Serif Display", serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--purple);
  margin-bottom: 12px
}

.depoimentos__title strong {
  color: var(--text-fundo-processo__step);
  font-weight: 700
}

.depoimentos__subtitle {
  font-size: 14px;
  color: var(--d-text);
  opacity: .7
}

/* grid */
.depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px
}

.depoimentos__card {
  display: flex;
  flex-direction: column
}

.depoimentos__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

.depoimentos__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-fundo-card2);
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.depoimentos__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.depoimentos__meta {
  flex: 1;
  min-width: 0
}

.depoimentos__stars {
  color: var(--accent-amarelo);
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 7px
}

.depoimentos__namebox {
  background: var(--bg-fundo-card2);
  border-radius: 8px;
  padding: 8px 12px
}

.depoimentos__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-name);
  margin-bottom: 2px
}

.depoimentos__person {
  font-size: 12px;
  color: var(--text-fundo-processo__step)
}

.depoimentos__quote {
  font-size: 13px;
  line-height: 1.65;
  color: var(--d-text);
  opacity: .78
}

/* ---- responsivo ---- */
@media (max-width:900px) {
  .depoimentos {
    padding: 40px 20px 60px
  }

  .depoimentos__timeline {
    max-width: 88%;
    margin-bottom: 40px
  }

  .depoimentos__title {
    font-size: 25px
  }

  .depoimentos__grid {
    grid-template-columns: 1fr;
    gap: 44px
  }

  .depoimentos__head {
    flex-direction: column;
    align-items: center;
    gap: 12px
  }

  .depoimentos__avatar {
    width: 64px;
    height: 64px
  }

  .depoimentos__meta {
    width: 100%
  }

  .depoimentos__stars {
    text-align: center
  }

  .depoimentos__namebox {
    text-align: left
  }
}

@media (max-width:600px) {
  .depoimentos__dot {
    width: 10px;
    height: 10px
  }
}


/* ============================================================
   8 · NÃO SUBSTITUI O PEDIATRA
   ============================================================ */
.subst { padding: 40px 0 0; background: var(--bg-site); }

.subst__box {
  background: var(--li-cream);
  border-radius: 12px;
  padding: 56px 48px 64px;
}

.subst__title {
  font-family: "Gelica", serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  margin: 0 0 16px;
}
.subst__title em { font-style: normal; color: var(--qo-amber); }

.subst__desc {
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--dark);
  text-align: center;
  max-width: 72ch;
  margin: 0 auto 36px;
}

.subst__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.subst-card {
  position: relative;
  background: var(--step-bg);
  border-radius: 8px;
  padding: 24px 22px;
  overflow: hidden;
}
.subst-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.subst-card--red::before    { background: var(--risk-red); }
.subst-card--purple::before { background: var(--purple-strong); }
.subst-card--green::before  { background: var(--green); }

.subst-card__icon { width: 26px; margin-bottom: 14px; }
.subst-card__icon img { width: 100%; height: auto; display: block; }

.subst-card__name {
  font-family: "Gelica", serif;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 12px;
}

.subst-card__text {
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
}

@media (max-width: 767px) {
  .subst { padding: 32px 0 0; }
  .subst__box { padding: 36px 20px 40px; }
  .subst__title { font-size: 1.625rem; }
  .subst__desc { max-width: none; margin-bottom: 28px; }
  .subst__grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ============================================================
   9 · CTA FINAL
   ============================================================ */
.cta-fim { padding: 0 0 56px; background: var(--bg-site); overflow: hidden; }

.cta-fim__rainbow { margin: 56px 0 100px; }

.cta-fim__box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: center;
  background: var(--purple-bg);
  border-radius: 16px;
  min-height: 360px;
}

.cta-fim__content { position: relative; z-index: 4; padding: 56px 40px 56px 56px; }

.cta-fim__title {
  font-family: "Gelica", serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--purple-title);
  margin: 0 0 18px;
  max-width: 18ch;
}
.cta-fim__title em { font-style: normal; font-weight: 700; color: var(--purple-strong); }

.cta-fim__desc {
  font-family: "Inter", sans-serif;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--dark);
  margin: 0 0 26px;
  max-width: 46ch;
}
.cta-fim__desc a { color: var(--purple-strong); font-weight: 500; }

.cta-fim__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-strong);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  padding: 18px 30px 18px 76px;
  margin-bottom: 20px;
  transition: filter .2s ease, transform .2s ease;
}
.cta-fim__btn:hover  { filter: brightness(.95); color: var(--white); }
.cta-fim__btn:active { transform: translateY(1px); }

.cta-fim__btn-icon {
  position: absolute;
  left: 14px;
  top: 20%;
  transform: translateY(-50%);
  width: 48px;
  height: auto;
}

.cta-fim__note {
  font-family: "Inter", sans-serif;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
  max-width: 34ch;
}

.cta-fim__circles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
}

.cta-fim__circle { position: absolute; border-radius: 50%; background: var(--purple); }
.cta-fim__circle--top    { width: 190px; height: 190px; top: 4%;       right: 32%; }
.cta-fim__circle--bottom { width: 200px; height: 200px; bottom: -40px; right: -6%; }
[data-theme="dark"] .cta-fim__circle { opacity: .35; }

.cta-fim__media { position: relative; align-self: stretch; min-height: 360px; }

.cta-fim__photo {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 23em;
  height: auto;
  display: block;
  transform: translateX(-42%);
}

@media (max-width: 767px) {
  .cta-fim { padding: 0 0 40px; }

  .cta-fim__rainbow { margin: 40px 0 0; }

  .cta-fim__circles { display: none; }

  .cta-fim__box {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    min-height: 0;
    margin-top: 300px;
    position: relative;
    z-index: 2;
  }

  .cta-fim__media {
    order: 1;
    min-height: 0;
    height: 300px;
    margin-top: -300px;
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .cta-fim__photo {
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: 74%;
    transform: translateX(-50%);
  }

  .cta-fim__content { order: 2; padding: 36px 26px; }

  .cta-fim__title { font-size: 1.75rem; line-height: 1.28; max-width: none; margin-bottom: 20px; }
  .cta-fim__desc  { max-width: none; margin-bottom: 26px; }
  .cta-fim__note  { max-width: none; }

  .cta-fim__btn { width: 100%; padding: 18px 20px 18px 72px; justify-content: flex-start; }
  .cta-fim__btn-icon { left: 12px; width: 48px; }
}