/* === rhythm & type === */
:root{
  --space: 30px;
  --font-size-l: 40px !important;
  --font-size-m: 21px !important;
  --font-size-s: 16px !important;
  --font-size-xs: 8.7px !important;
}

/* page */
.mobile-test-2{
  width:100%; height:auto; overflow:visible;
  --sticky-h: 60px; /* ~40px badge + paddings */
  padding-bottom: calc(var(--sticky-h) + 30px + env(safe-area-inset-bottom));
}

/* sections (all) */
.mobile-test-2 .hero,
.mobile-test-2 .section,
.mobile-test-2 .section-2,
.mobile-test-2 .section-3,
.mobile-test-2 .section-4,
.mobile-test-2 .section-5,
.mobile-test-2 .section-6,
.mobile-test-2 .section-7{
  width:100% !important; min-width:0 !important; height:auto !important;
  padding: var(--space) var(--space);
}

/* vertical rhythm */
.mobile-test-2 .section > *{ margin:0 !important; }
.mobile-test-2 .section > * + *{ margin-top: var(--space) !important; }

/* images: scope to sections/hero so badges aren't stretched */
.mobile-test-2 .section img,
.mobile-test-2 .hero img{
  width:100%; height:auto !important; max-height:none !important;
  display:block; border-radius:8px;
}

/* hero logo centered, near top */
.mobile-test-2 .hero{
  justify-content:center !important; align-items:flex-start !important;
  padding: 30px !important;
}
.mobile-test-2 .cingulo_-app_vert{ display:block; margin:0 auto; }

/* sections 3/4/6: grow with content, remove text clamps */
.mobile-test-2 .section-3,
.mobile-test-2 .section-4,
.mobile-test-2 .section-6{ height:auto !important; }
.mobile-test-2 .section-3 > *,
.mobile-test-2 .section-4 > *,
.mobile-test-2 .section-6 > *{
  max-height:none !important; flex:0 0 auto !important; position:static !important;
}

/* section 5 gutters & full-width children */
.mobile-test-2 .section-5{
  align-items:stretch !important; padding-left:30px !important; padding-right:30px !important;
}
.mobile-test-2 .section-5 .milhes-de-pessoas-j-deram-esse-passo,
.mobile-test-2 .section-5 .milhares-de-histria{
  width:auto !important; align-self:auto !important;
}
.mobile-test-2 .section-5 .group-5,
.mobile-test-2 .section-5 .group-36,
.mobile-test-2 .section-5 .group-3,
.mobile-test-2 .section-5 .group-39{
  width:100% !important; min-width:0 !important; height:auto !important;
}

/* section 6: keep order H2 → IMG → P, and stack cleanly */
.mobile-test-2 .section-6{
  display:flex !important; flex-direction:column !important;
  align-items:stretch !important; gap:30px !important;
}

/* bottom badges strip (one source of truth) */
.mobile-test-2 .badges-download{
  position:fixed; left:0; right:0; bottom:0; top:auto !important;
  display:flex !important; justify-content:center !important; align-items:center !important;
  min-width:0 !important; width:100% !important;
  background:#fff; box-shadow:0 -4px 12px rgba(0,0,0,.06);
  padding:10px max(30px, env(safe-area-inset-left)) 10px max(30px, env(safe-area-inset-right)) !important;
  text-align:center;
}
.mobile-test-2 .badges-download .group-27{ /* .store-badges */
  display:inline-flex !important; gap:12px; width:max-content !important;
  height:auto !important; margin:0 auto !important; flex:0 0 auto !important;
}
/* exact badge sizes */
.mobile-test-2 .badges-download .badge img{ width:auto !important; height:40px !important; display:block; }
.mobile-test-2 .badges-download .badge.appstore img{ width:119.66px !important; height:auto !important; }

/* extra space after the last paragraph */
.mobile-test-2 .baixe-o-app-e-d-o-p{ margin-bottom:120px !important; }

/* (optional) tiny phone tweaks go here, if needed
@media (max-width:380px){
  /* …leave empty unless you truly need a <=380px-only change… */
}
*/


/* === HERO: exact sizing & positioning === */
.mobile-test-2 .hero{
  height: 200px !important;
  box-sizing: border-box !important;     /* height includes padding */
  padding: 51px 30px 0 30px !important;  /* 51px from the top, 30px side gutters */
  display: flex !important;
  justify-content: center !important;    /* center horizontally */
  align-items: flex-start !important;    /* stick to the top edge */
  background-size: auto 100% !important; /* show whole bg height inside 200px */
  background-position: center top !important;
  background-repeat: no-repeat !important;
  width: 100% !important; min-width: 0 !important;
}

/* Logo: exact 148 × 148, no stretching */
.mobile-test-2 .hero .cingulo_-app_vert{
  width: 148px !important;
  height: 148px !important;
  max-width: none !important;            /* defeat any width:100% */
  display: block;
  margin: 0 auto;
  flex: 0 0 auto;
}

/* Neutralize any generic "hero img { width:100% }" from earlier */
.mobile-test-2 .hero img{
  width: auto !important;
  height: auto !important;
}



/* Section 6: foto-diogo exact size */
.mobile-test-2 .section-6 .foto-diogo{
  width: 180px !important;
  height: 180px !important;
  max-width: none !important;     /* beat section img width:100% */
  display: block;
  margin: 0 auto;                 /* center */
  object-fit: cover;              /* crop nicely if needed */
  border-radius: 8px;             /* match your images’ radius */
  flex: 0 0 auto;
  position: static !important;
}





/* === Testimonials: fixed avatar size & clean layout === */
.mobile-test-2 .section-5 .group-5,
.mobile-test-2 .section-5 .group-36,
.mobile-test-2 .section-5 .group-3,
.mobile-test-2 .section-5 .group-39{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;            /* inner spacing between avatar and text */
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.mobile-test-2 .section-5 .group-5 > img,
.mobile-test-2 .section-5 .group-36 > img,
.mobile-test-2 .section-5 .group-3 > img,
.mobile-test-2 .section-5 .group-39 > img{
  width: 50px !important;
  height: 50px !important;
  max-width: none !important;      /* beats any width:100% export rule */
  flex: 0 0 50px !important;
  object-fit: cover;               /* keeps faces nicely cropped */
  display: block;
}

.mobile-test-2 .section-5 .group-5 p,
.mobile-test-2 .section-5 .group-36 p,
.mobile-test-2 .section-5 .group-3 p,
.mobile-test-2 .section-5 .group-39 p{
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;         /* prevents overflow when wrapping */
}


/* === Desktop "mobile strip" mode: cap to 500px and center === */

/* 1) Page strip: never wider than 500px, but fluid below that */
.mobile-test-2{
  width: min(100vw, 500px) !important;  /* beats the exported 390px / 100% */
  margin-inline: auto;                  /* just in case flex centering changes */
}

/* 2) Sticky badges bar: also capped to 500px and centered on viewport */
.mobile-test-2 .badges-download{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(100vw, 500px) !important;
  margin: 0 auto !important;
  /* keep your existing bottom, padding, shadow rules */
}

/* (Optional) if you want the hero/bg bands to align perfectly with the strip,
   they already use width:100% of .mobile-test-2, so no extra changes needed. */




/* Section 5: kill exported min-heights & fixed widths that create white space */
.mobile-test-2 .section-5{
  min-height: 0 !important;                /* was 1179px */
  align-items: stretch !important;         /* keep gutters consistent */
}

.mobile-test-2 .milhes-de-pessoas-j-deram-esse-passo,
.mobile-test-2 .milhares-de-histria{
  min-height: 0 !important;                /* was 201px / 147px */
  width: auto !important;                   /* was 332px */
  align-self: auto !important;
}

/* (Optional) let testimonial texts size naturally too */
.mobile-test-2 .section-5 .em-poucas-semanas,
.mobile-test-2 .section-5 .achei-que-s-terapi,
.mobile-test-2 .section-5 .o-teste-emocional-a,
.mobile-test-2 .section-5 .nos-piores-dias-re{
  min-height: 0 !important;
}


/* End the page on the blue strip (section-7) */
.mobile-test-2{
  padding-bottom: 0 !important; /* remove global white space */
}

/* Give the space to the blue section so the bg stays blue under the sticky bar */
.mobile-test-2 .section-7{
  padding-bottom: calc(var(--sticky-h, 60px) + 30px + env(safe-area-inset-bottom)) !important;
}

/* We previously added extra margin after the last paragraph; neutralize it */
.mobile-test-2 .baixe-o-app-e-d-o-p{
  margin-bottom: 0 !important;
}


/* Section-7 spacing: use ONLY the 30px rhythm, kill export gap */
.mobile-test-2 .section-7{ gap: 0 !important; }
.mobile-test-2 .section-7 > * + *{ margin-top: var(--space) !important; }

/* Let the two paragraphs grow naturally (no clamps) */
.mobile-test-2 .section-7 .voc-comea-o-cngulo-vai-com-voc,
.mobile-test-2 .section-7 .baixe-o-app-e-d-o-p{
  max-height: none !important;
}

/* Clean up an older rule that added extra space after the last paragraph */
.mobile-test-2 .baixe-o-app-e-d-o-p{ margin-bottom: 0 !important; }


/* Alternative: keep gap, kill margins */
.mobile-test-2 .section-6{ gap: var(--space) !important; }
.mobile-test-2 .section-6 > * + *{ margin-top: 0 !important; }




/* Page chrome color outside the 500px strip */
html, body, .container-center-horizontal {
  background-color: #2E4357 !important;
}

/* Keep the narrow strip itself white */
.mobile-test-2 {
  background-color: #FFFFFF !important;
}

/* The sticky badges bar is already width-capped; no change needed.
   This just ensures the sides around it match the page chrome color. */