/* ============================================================
   Edstation Landing Page — pixel-faithful rebuild from Figma
   Frame: 1440 × 14426
   ============================================================ */

:root {
  /* Colors */
  --teal-dark: #0a404b;     /* dark teal — headlines, topbar */
  --body-grey: #5c7a83;     /* body text */
  --blue: #00aaff;          /* primary blue — buttons */
  --blue-shadow: #008ad1;   /* button drop shadow */
  --cyan: #55e8ff;          /* hero gradient bottom */
  --badge-bg: #e6fdff;      /* pre-badge background */
  --stat-divider: #9fe6f2;  /* stat divider line */
  --green: #2bb673;         /* "Restam 14 vagas" green */
  --white: #ffffff;

  /* Fonts */
  --font-head: 'Zain', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Layout */
  --page-w: 1440px;
  --content-w: 1120px;   /* max width of the centered content band (1440 − 2×160) */
  --edge: 24px;          /* minimum side gutter on small screens */
}

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

/* Garante que o atributo [hidden] esconda de fato, mesmo em elementos com
   display:flex definido por classe (senão a classe sobrepõe o UA stylesheet). */
[hidden] { display: none !important; }

/* Images never overflow their container (the 100vw full-bleed image opts out
   via a more specific rule). */
img { max-width: 100%; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 60px; }

body {
  font-family: var(--font-body);
  color: var(--body-grey);
  background: var(--white);
  overflow-x: hidden;
}

/* Full-bleed responsive layout: section backgrounds span the whole viewport
   width, while their content is centered inside a max-width band (--content-w)
   via the gutter rule below. At 1440px the gutters resolve to exactly 160px,
   matching the original Figma frame; on wider screens the band stays centered
   (no inflated text), on narrower screens the gutters shrink to --edge. */
.page {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* The shared horizontal-gutter rule lives in the "Responsive layout" block at
   the end of the file — it must come after the per-section `padding` shorthands
   so its left/right longhands win the cascade. */

/* ===================== TopBar (8:33978) ===================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 60px;
  background: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
}
.topbar__info   { display: flex; align-items: center; gap: 12px; }
.topbar__turma  { color: #ffffff; font-weight: 600; }
.topbar__inicio { color: #ffffff; font-weight: 600; }
.topbar__date   { color: #a9d5de; font-weight: 400; }
.topbar__vagas  { color: #8be9c0; font-weight: 700; }
.topbar__dot    { color: #4d6a72; font-weight: 400; }
.topbar__btn {
  height: 34px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 3px 0 0 var(--blue-shadow);
  flex: none;
}
.topbar__btn:hover  { box-shadow: 0 2px 0 0 var(--blue-shadow); }
.topbar__btn:active { box-shadow: 0 1px 0 0 var(--blue-shadow); }
.topbar__btn-short  { display: none; }

/* The topbar is fixed, so push the page content down by its height. */
.page { padding-top: 60px; }

/* ===================== Primary Button ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #f5f5f5;
  font-family: var(--font-head);
  font-weight: 400;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 5.76px 0 0 var(--blue-shadow);
  white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translateY(1px); box-shadow: 0 4px 0 0 var(--blue-shadow); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 0 var(--blue-shadow); }
.btn--nav  { height: 45px; padding: 0 25px; font-size: 20px; line-height: 25px; }
.btn--hero { height: 50px; padding: 0 25px; font-size: 22px; line-height: 27px; }

/* ===================== Hero (8:46777) ===================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg,
    #ffffff 0%, #fcffff 14%, #f1fdff 28%, #e0fbff 42%,
    #c7f7ff 56%, #a7f3ff 70%, #81eeff 85%, #55e8ff 100%);
}

.nav {
  width: 100%;
  height: 89px;
  padding: 22px 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo { display: block; height: 34px; width: auto; }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 160px 8px;
}

.pre-badge {
  display: inline-flex;
  align-items: center;
  background: var(--badge-bg);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 9px 18px;
  border-radius: 20px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}

.hero__title {
  margin-top: 22px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: var(--teal-dark);
  text-align: center;
}

.hero__sub {
  margin-top: 22px;
  max-width: 780px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-grey);
  text-align: center;
}

.btn--hero { margin-top: 22px; }

.hero__note {
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--body-grey);
  text-align: center;
}

/* Stats */
.stats {
  width: 100%;
  height: 103px;
  padding: 18px 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 38px;
}
.stat__num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: var(--blue);
}
.stat__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--teal-dark);
}
.stat__div { width: 1px; height: 46px; background: var(--stat-divider); }

/* Recognitions */
.recognitions { width: 100%; padding: 20px 0 0; }
.recognitions__label {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fb8c2;
  margin-bottom: 12px;
}
.recognitions__card {
  width: 100%;
  max-width: 908px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9ffff;
  /* Asymmetric "leaf" corners from Figma: TL 0, TR 67, BR 0, BL 67 */
  border-radius: 0 67px 0 67px;
  /* Figma inner shadow: offset (1.3, -4), no blur, #d9ffff (highlight at the
     bottom-left inner edge). No border/stroke in the design. */
  box-shadow: inset 1px -4px 0 0 #d9ffff;
}
/* object-fit keeps the combined logo strip undistorted when max-width clamps it
   below its natural width on small screens. */
.recognitions__card img { height: auto; width: auto; max-height: 22px; max-width: 84px; object-fit: contain; display: block; }

/* Logo marquee — individual logos in two identical groups, always auto-scrolling
   (desktop + mobile). The card clips the overflow; -50% loops seamlessly because
   each group carries a trailing gap equal to the internal gap. */
.recognitions__card, .fac__logos { overflow: hidden; position: relative; }
/* Soft fade on the left/right edges so logos dissolve into the card instead of
   getting hard-clipped. Gradient matches the card background (#f9ffff). */
.recognitions__card::before, .recognitions__card::after,
.fac__logos::before, .fac__logos::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 9vw, 110px);   /* wider fade on desktop, lighter on phones */
  z-index: 2;
  pointer-events: none;
}
.recognitions__card::before, .fac__logos::before {
  left: 0;
  background: linear-gradient(to right, #f9ffff, rgba(249, 255, 255, 0));
}
.recognitions__card::after, .fac__logos::after {
  right: 0;
  background: linear-gradient(to left, #f9ffff, rgba(249, 255, 255, 0));
}
.logos-marquee {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logos-marquee 55s linear infinite;
  /* Promove a faixa a uma camada de compositing própria: elimina o "solavanco"
     de repaint que aparecia a cada volta do loop. */
  will-change: transform;
  backface-visibility: hidden;
}
.logos-marquee__group {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;   /* trailing gap → seam matches internal rhythm */
  flex: none;
}
/* 4 grupos idênticos: deslocar -50% (= 2 grupos) reinicia no ponto idêntico,
   tornando o loop contínuo. translate3d força a animação na GPU. */
@keyframes logos-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Illustration */
/* Desktop: full-width band showing the whole illustration */
.hero__illustration { width: 100%; line-height: 0; overflow: hidden; }
.hero__illustration img,
.hero__illustration svg { width: 100%; height: auto; display: block; }
/* Nudge the sun left, toward the emptier part of the sky. Uses the independent
   `translate` property so it composes with the GSAP rotation on its children.
   Value is in SVG user units (viewBox is 2000 wide). */
.hero__illustration #sun_and_rays { translate: -260px 0; }

/* Mobile: size the SVG by height so it overflows horizontally and shows a
   centered crop (matches the original Edstation marketing layout). */
@media (max-width: 600px) {
  .hero__illustration {
    height: 72vw;            /* band height; tuned for a centered crop */
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .hero__illustration svg {
    height: 100%;
    width: auto;
    min-width: 100%;
    max-width: none;
    flex: 0 0 auto;   /* don't let the flex item shrink — keep natural width so it overflows and crops */
  }
}

/* ===================== Shared section header ===================== */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}
.tag {
  display: inline-flex;
  align-items: center;
  background: #f9ffff;
  color: var(--blue);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 16px;
  border-radius: 30px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.sec-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: var(--teal-dark);
  text-align: center;
}
.sec-sub {
  max-width: 820px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
  text-align: center;
}

/* ===================== Sec2 — Problema (8:46119) ===================== */
.sec2 {
  background: #f1fafc;
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.sec2__cards {
  display: flex;
  gap: 28px;
  padding: 15px;
}
.pcard {
  width: 355px;
  background: #f9ffff;
  border-radius: 0 100px 0 50px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.pcard__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #dff9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 1;
}
.pcard__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--teal-dark);
}
.pcard__title--alt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.24;
}
.pcard__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.52;
  color: var(--body-grey);
}

/* ===================== Sec3 — Transformação (8:46141) ===================== */
.sec3 {
  background: var(--white);
  padding: 96px 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.ba {
  display: flex;
  gap: 28px;
  padding-bottom: 10px;
  width: 100%;
  max-width: 1120px;
}
.ba__col {
  flex: 1;
  border-radius: 0 50px 0 50px;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.ba__col--before { background: #fbf1ee; box-shadow: 0 7px 0 0 rgba(226, 102, 79, 0.25); }
.ba__col--after  { background: #ecfaf3; box-shadow: 0 7px 0 0 rgba(31, 141, 63, 0.25); }
.ba__head {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: #e2664f;
}
.ba__head--after { color: #16a86b; }
.ba__row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--teal-dark);
}
.ba__mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.ba__mark--x { background: #e2664f; }
.ba__mark--v { background: #16a86b; }

/* ===================== Sec4 — Ponte (8:46184) ===================== */
.sec4 {
  background: var(--white);
  padding: 50px 160px 96px;
  display: flex;
  justify-content: center;
}
.bridge {
  width: 100%;
  max-width: 1120px;
  background: #f9ffff;
  border-radius: 0 24px 0 24px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.bridge__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 40px;
}
.bridge__num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: var(--blue);
}
.bridge__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--teal-dark);
  white-space: nowrap;
}
.bridge__div { width: 1px; height: 40px; background: #2c5660; flex: none; }

/* ===================== Sec5 — Jornada (8:46197) ===================== */
.sec5 {
  background: #f1fafc;
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 345px);
  column-gap: 27.5px;
  row-gap: 35px;
  padding: 15px;
}
.step {
  background: var(--white);
  border-radius: 0 100px 20px 20px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.step__hd { display: flex; align-items: center; gap: 14px; }
.step__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__etapa {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--teal-dark);
}
.step__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--teal-dark);
}
.step__ill {
  align-self: center;
  width: 260px;
  height: 175px;
  background: #f9ffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__ill img { max-width: 100%; max-height: 100%; display: block; }
.step__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}

/* ===================== Sec6 — Provas (8:46248) ===================== */
.sec6 {
  background: var(--white);
  padding: 96px 160px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.sec6__title { width: 100%; max-width: 1120px; }
.metrics {
  display: flex;
  gap: 24px;
  padding: 10px 0;
}
.metric {
  width: 262px;
  height: 180px;
  background: #f1fafc;
  border-radius: 0 50px 0 50px;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.metric__num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.4;
  color: var(--blue);
}
.metric__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  color: var(--teal-dark);
}
.quotes { display: flex; gap: 24px; }
.quote {
  width: 357px;
  background: var(--white);
  border: 1px solid #e7f4f8;
  border-radius: 0 50px 0 50px;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.quote__mark {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  color: #bfe6f0;
  height: 40px;
}
.quote__text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--teal-dark);
  margin: 0;
}
.quote__who { display: flex; flex-direction: column; gap: 2px; }
.quote__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--teal-dark);
}
.quote__org {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--body-grey);
}
.voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 10px 0;
  max-width: 1120px;
}
.voice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #dff9ff;
  border-radius: 40px;
  padding: 18px 24px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.voice__emoji { font-size: 18px; line-height: 1; }
.voice__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--teal-dark);
  white-space: nowrap;
}

/* ===================== Sec7 — Facilitadora (8:46293) ===================== */
.sec7 {
  /* Starts at the surf-wave cyan and lightens downward into white (where the
     garden wave / green section begins). */
  background: linear-gradient(180deg,
    #a2f2ff 0%, #c7f7ff 18%, #e0fbff 38%, #f1fdff 58%,
    #ffffff 80%, #ffffff 100%);
  padding: 96px 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
}
/* Founder row */
.fac {
  width: 100%;
  max-width: 1120px;
  display: flex;
  gap: 48px;
  padding: 10px 0;
  align-items: flex-start;
}
.fac__photo {
  flex: none;
  width: 420px;
  height: 480px;
  border-radius: 0 50px 0 50px;
  overflow: hidden;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.fac__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fac__name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: -0.4px;
  color: var(--teal-dark);
  white-space: nowrap;
}
.fac__bio {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}
.fac__logos {
  width: 100%;
  height: 54px;
  background: #f9ffff;
  border-radius: 0 25px 0 25px;
  display: flex;
  align-items: center;
  padding: 0 23px;
  /* Same color + inner shadow as the corrected Recognitions logo box */
  box-shadow: inset 1px -4px 0 0 #d9ffff;
}
.fac__logos img { height: auto; width: auto; max-height: 24px; max-width: 100px; object-fit: contain; display: block; }
.fac__quote { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 6px 20px; }
.fac__quoteText {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: var(--teal-dark);
}
.fac__quoteWho {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--body-grey);
}
/* Professionals */
.pros {
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-bottom: 25px;
}
.pros__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pros__title { text-align: left; }
.pros__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}
.pros__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.pro { display: flex; gap: 50px; align-items: flex-start; }
.pro__avatar { flex: none; position: relative; width: 113px; height: 113px; }
.pro__photo { width: 113px; height: 113px; border-radius: 50%; object-fit: cover; display: block; }
.pro__badge { position: absolute; left: 73px; top: 70px; width: 67px; height: 67px; }
.pro__text { display: flex; flex-direction: column; gap: 2px; }
.pro__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: #333333;
}
.pro__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}
.pro__role { color: var(--blue); }

/* ===================== Divider waves ===================== */
.divider { width: 100%; line-height: 0; font-size: 0; }
.divider img { width: 100%; height: auto; display: block; }
/* Surf wave (divider1.png): clean white backdrop; the opaque cyan crests connect
   to the cyan top of "Quem facilita" below. */
.divider--surf { background: #ffffff; }

/* ===================== Sec7B — Banca (8:46360) ===================== */
.sec7b {
  position: relative;
  /* -1px overlaps the garden wave's 1px anti-aliased (semi-transparent) bottom
     edge so it doesn't blend with the white backdrop into a thin light line. */
  margin-top: -1px;
  background: #5ff2ab;
  padding: 96px 160px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 49px;
}
.tag--green { background: #96f1c5; color: #2ab271; box-shadow: 0 7px 0 0 rgba(31, 141, 63, 0.25); }
.sec7b__sub { max-width: 900px; }
/* Carousel — shared by Banca (.inv) and Objeções (.obj) ----------------- */
.carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Horizontal, snap-scrolling track */
.carousel__track {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* breathing room so card hover-shadow isn't clipped by the overflow box */
  padding: 6px 2px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
}
.carousel__track::-webkit-scrollbar { display: none; }   /* WebKit */
.carousel__track > * {
  flex: 0 0 auto;                   /* don't shrink — keep card width so it overflows */
  scroll-snap-align: start;
}

/* Per-carousel card widths */
.inv { flex-basis: 262px; }
.obj { flex-basis: min(88%, 520px); }

.inv {
  background: #96f1c5;
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Controls: arrows + dots, centered below the track */
.carousel__ctrls {
  display: flex;
  align-items: center;
  gap: 18px;
}
.carousel__btn {
  flex: none;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 0 0 4px;                 /* optically center the chevron */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5.76px 0 0 var(--blue-shadow);
  transition: transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.carousel__btn:hover  { transform: translateY(1px); box-shadow: 0 4px 0 0 var(--blue-shadow); }
.carousel__btn:active { transform: translateY(5px); box-shadow: 0 1px 0 0 var(--blue-shadow); }
.carousel__btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
  box-shadow: 0 5.76px 0 0 var(--blue-shadow);
}

.carousel__dots { display: flex; align-items: center; gap: 9px; }
.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(10, 64, 75, .22);   /* teal-dark, translucent */
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.carousel__dot.is-active {
  width: 26px;
  background: var(--teal-dark);
}
.inv__hd { display: flex; align-items: center; gap: 12px; }
.inv__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Photos of varying dimensions are cropped to fill the circle */
  object-fit: cover;
  object-position: center top;
}
.inv__nmb { display: flex; flex-direction: column; }
.inv__name {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--teal-dark);
}
.inv__co {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: #16a86b;
}
.inv__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.46;
  color: var(--teal-dark);
}
.banca-foot {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--body-grey);
  text-align: center;
  margin-top: 6px;
}
.banca-plant { position: absolute; bottom: 0; }
.banca-plant--left { left: 110px; width: 130px; }
.banca-plant--right { right: 130px; width: 89px; }

/* Garden wave (divider2.png): clean white backdrop; the opaque green wave fills the
   bottom and meets the green Banca section seamlessly. */
.divider--garden { background: #ffffff; }

/* ===================== Sec8 — Incluído (8:46542) ===================== */
.sec8 {
  background: var(--white);
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.incgrid {
  display: grid;
  grid-template-columns: repeat(3, 357px);
  gap: 24px;
}
.inc {
  background: #f1fafc;
  border-radius: 0 50px 0 25px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.inc__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  line-height: 1;
}
.inc__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: var(--teal-dark);
}
.inc__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}

/* ===================== Sec9 — Oferta (8:46581) ===================== */
.sec9 {
  position: relative;
  background: linear-gradient(180deg,
    #ffffff 0%, #fcffff 18%, #f1fdff 38%, #e0fbff 60%, #c7f7ff 80%, rgba(167,243,255,0.5) 100%);
  padding: 96px 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.offer {
  width: 100%;
  max-width: 1120px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding-bottom: 15px;
}
.offer__left { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.offer__head { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.offer__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: var(--teal-dark);
}
.offer__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}
.offer__list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.chk {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--teal-dark);
}
.chk__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #16a86b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invest {
  width: 100%;
  margin-top: 2px;
  background: var(--teal-dark);
  border-radius: 25px 0 25px 0;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.invest__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .5px;
  color: #7fe3b8;
}
.invest__price {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.invest__mult {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5.76px 0 0 var(--blue-shadow);
}
.invest__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #cfe9ef;
}
/* Form */
.offer__form {
  flex: none;
  width: 520px;
  max-width: 100%;
  background: #fff;
  border-radius: 0 24px 0 24px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
/* Calendly embed que substitui o formulário após o envio */
.offer__calendly {
  flex: none;
  width: 520px;
  max-width: 100%;
  background: #fff;
  border-radius: 0 24px 0 24px;
  padding: 24px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.offer__calendly-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.2;
  color: var(--teal-dark);
  text-align: center;
  margin-bottom: 8px;
}
.calendly-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 8px 8px;
  text-align: center;
}
.calendly-fallback p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-grey);
}
.calendly-fallback .btn {
  width: 100%;
  height: 50px;
  font-size: 22px;
}
.ofield {
  width: 100%;
  height: 49px;
  background: #f4f8fa;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--teal-dark);
}
.ofield::placeholder { color: #9ab0b6; }
.ofield:focus { outline: 2px solid #bfe6f0; }
.ofield--select { color: #9ab0b6; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%239ab0b6' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
.ofield--select:valid { color: var(--teal-dark); }
.ogroup { display: flex; flex-direction: column; gap: 7px; }
.olabel {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--teal-dark);
}
.btn--form { width: 100%; height: 50px; padding: 0 25px; font-size: 24px; line-height: 30px; border: none; cursor: pointer; }
.offer__secure {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--body-grey);
}
.offer__status {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 10px;
}
.offer__status--ok  { color: #0a7d4f; background: #e5f7ee; }
.offer__status--err { color: #b42318; background: #fdeceb; }
.oconsent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--body-grey);
  cursor: pointer;
}
.oconsent input { margin-top: 2px; flex: none; accent-color: var(--blue); }
.oconsent a { color: var(--blue); }
/* Full-bleed: sec9 centers its children, so a 100vw-wide child overflows the
   gutters symmetrically and reaches both viewport edges. */
.offer__landscape {
  align-self: center;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin-top: 4px;
}

/* ===================== Sec10 — Garantia (8:46650) ===================== */
.sec10 {
  /* Pull up to swallow the offer landscape's anti-aliased bottom edge. The
     image's opaque bottom rows are exactly #50e89f (same as this section), so
     overlapping a few px is invisible (green-on-green) and removes the hairline. */
  margin-top: -4px;
  background: #50e89f;
  padding: 50px 160px 96px;
  display: flex;
  justify-content: center;
}
.guarantee {
  width: 100%;
  max-width: 1120px;
  background: #96f1c5;
  border-radius: 0 50px 0 50px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: 0 7px 0 0 rgba(31, 141, 63, 0.25);
}
.guarantee__icon {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #50e89f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  line-height: 1;
}
.guarantee__text { display: flex; flex-direction: column; gap: 8px; }
.guarantee__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  color: var(--teal-dark);
}
.guarantee__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.52;
  color: var(--teal-dark);
}

/* ===================== Sec11 — Futuro (8:46657) ===================== */
.sec11 {
  background: #f1fafc;
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.sec11__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.18;
  color: var(--teal-dark);
  text-align: center;
}
.sec11__sub {
  max-width: 840px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--body-grey);
  text-align: center;
}
.fcards { display: flex; gap: 28px; padding-bottom: 10px; }
.fcard {
  width: 355px;
  background: #fff;
  border-radius: 0 50px 0 50px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 7px 0 0 rgba(0, 170, 255, 0.25);
}
.fcard__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #dff9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}
.fcard__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.24;
  color: var(--teal-dark);
}
.fcard__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.52;
  color: var(--body-grey);
}

/* ===================== Sec12 — Objeções (8:46679) ===================== */
.sec12 {
  background: var(--white);
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.obj {
  background: #f1fafc;
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.obj__qr { display: flex; align-items: center; gap: 14px; }
.obj__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obj__q {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--teal-dark);
}
.obj__a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}

/* ===================== Sec13 — FAQ (8:46715) ===================== */
.sec13 {
  background: #f1fafc;
  padding: 96px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.faqlist { width: 100%; max-width: 940px; display: flex; flex-direction: column; gap: 14px; }
.faq {
  background: #fff;
  border-radius: 14px;
  padding: 24px 30px;
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--teal-dark);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--blue);
}
.faq__a {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-grey);
}

/* ===================== SecFinal — CTA (8:46754) ===================== */
.cta {
  position: relative;
  height: 441px;
  overflow: hidden;
  background: linear-gradient(90deg, #00aaff 0%, #0086d1 100%);
}
.cta__globe { position: absolute; top: -69px; right: -142px; width: 580px; height: 580px; }
.cta__content { position: absolute; left: max(var(--edge), (100% - var(--content-w)) / 2); top: 93px; max-width: 599px; display: flex; flex-direction: column; align-items: flex-start; }
.cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 30px;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 6px 0 0 rgba(0,138,209,0.35);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}
.cta__dot { width: 10px; height: 10px; border-radius: 50%; background: #bffffe; }
.cta__title {
  margin-top: 29px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  line-height: 45px;
  color: #fff;
}
.cta__sub {
  margin-top: 13px;
  max-width: 599px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #eaf8ff;
}
.cta__btn {
  margin-top: 24px;
  height: 50px;
  padding: 0 25px;
  background: #f9ffff;
  color: var(--blue);
  font-size: 24px;
  line-height: 30px;
  box-shadow: 0 6px 0 0 rgba(0,138,209,0.6);
}
.cta__btn:hover { background: #fff; }

/* ===================== BarraFixa (8:46762) ===================== */
.barra {
  height: 100px;
  background: var(--teal-dark);
  padding: 18px 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px 0 rgba(0,0,0,0.18);
}
.barra__left { display: flex; align-items: center; gap: 12px; }
.barra__dot { width: 10px; height: 10px; border-radius: 50%; background: #16a86b; }
.barra__text {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: #fff;
}
.barra__btn { height: 45px; padding: 0 25px; font-size: 20px; line-height: 25px; }

/* ===================== Footer (8:46768) ===================== */
.footer {
  height: 204px;
  background: #072f38;
  padding: 48px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.footer__logo { height: 34px; width: auto; display: block; opacity: .9; }
.footer__tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #8fb3bc;
  text-align: center;
}
.footer__copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: #5e828b;
}
.footer__links { font-family: var(--font-body); font-size: 13px; }
.footer__links a { color: #8fb3bc; text-decoration: underline; }
.footer__links a:hover { color: var(--blue); }

/* ============================================================
   Hover effects & scroll-reveal animations
   - Scroll reveal uses the `translate` longhand (not `transform`)
     so card hover transforms compose with it instead of clobbering.
   - `.reveal` classes are added by JS (index.html); if JS is off,
     nothing is hidden — everything stays visible (fail-safe).
   ============================================================ */

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; translate: 0 30px; }
.reveal.is-visible { opacity: 1; translate: 0 0; }
.reveal {
  transition: opacity .6s ease, translate .6s cubic-bezier(.22, .61, .36, 1);
}

/* Interactive cards: one transition covers both the reveal (opacity/translate)
   and the hover state (transform/box-shadow/background) so both stay smooth. */
.pcard, .step, .metric, .fcard, .inc, .quote, .inv, .voice,
.bridge, .guarantee, .recognitions__card, .fac__logos, .obj, .faq {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .2s ease,
    border-color .2s ease,
    opacity .6s ease,
    translate .6s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Hover lifts ---------- */
/* Blue offset-shadow cards */
.pcard:hover, .step:hover, .metric:hover, .fcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 13px 0 0 rgba(0, 170, 255, 0.30);
}
.bridge:hover {
  transform: translateY(-4px);
  box-shadow: 0 13px 0 0 rgba(0, 170, 255, 0.30);
}
.voice:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 0 0 rgba(0, 170, 255, 0.30);
}
/* Green offset-shadow card */
.guarantee:hover {
  transform: translateY(-6px);
  box-shadow: 0 13px 0 0 rgba(31, 141, 63, 0.30);
}
/* Flat cards get a soft drop shadow on hover */
.inc:hover, .quote:hover, .inv:hover, .obj:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -14px rgba(10, 64, 75, 0.28);
}
.quote:hover { border-color: #cdeaf2; }
/* Recognitions card keeps its inner highlight, adds a soft lift */
.recognitions__card:hover {
  transform: translateY(-6px);
  box-shadow: inset 1px -4px 0 0 #d9ffff, 0 13px 0 0 rgba(0, 170, 255, 0.30);
}
.fac__logos:hover {
  transform: translateY(-6px);
  box-shadow: inset 1px -4px 0 0 #d9ffff, 0 13px 0 0 rgba(0, 170, 255, 0.30);
}

/* ---------- Image zoom on hover ---------- */
.fac__photo img,
.pro__photo,
.step__ill img {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.fac__photo:hover img { transform: scale(1.05); }
.pro:hover .pro__photo { transform: scale(1.06); }
.step:hover .step__ill img { transform: scale(1.07); }

/* ---------- FAQ: rotate the "+" into a "×" when open ---------- */
.faq__icon { transition: transform .25s ease; }
.faq[open] .faq__icon { transform: rotate(45deg); }
.faq:hover { box-shadow: 0 12px 26px -16px rgba(10, 64, 75, 0.3); }

/* ---------- Status dot pulse ---------- */
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 168, 107, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(22, 168, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 168, 107, 0); }
}
.barra__dot { animation: dot-pulse 2s ease-out infinite; }
@keyframes dot-pulse-light {
  0%   { box-shadow: 0 0 0 0 rgba(191, 255, 254, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(191, 255, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(191, 255, 254, 0); }
}
.cta__dot { animation: dot-pulse-light 2s ease-out infinite; }

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; translate: none !important; }
  .barra__dot, .cta__dot { animation: none !important; }
  /* Stop the logo marquee; let the strip be scrolled manually instead. */
  .logos-marquee { animation: none !important; }
  .recognitions__card, .fac__logos { overflow-x: auto; }
}

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

/* Shared horizontal gutter — centers content inside a --content-w band.
   max(--edge, (100% − content)/2) resolves to exactly 160px at 1440px
   (matching the Figma frame) and shrinks toward --edge on small screens.
   Declared here, after the per-section `padding` shorthands, so its
   left/right longhands win the cascade. */
.topbar, .nav, .hero__content, .stats, .recognitions,
.sec2, .sec3, .sec4, .sec5, .sec6, .sec7, .sec7b,
.sec8, .sec9, .sec10, .sec11, .sec12, .sec13,
.barra, .footer {
  padding-left: max(var(--edge), (100% - var(--content-w)) / 2);
  padding-right: max(var(--edge), (100% - var(--content-w)) / 2);
}

/* ---------- Tablet / small desktop (≤1180px) ---------- */
@media (max-width: 1180px) {
  /* Grids reflow to 2 columns before fixed tracks overflow the gutters */
  .steps,
  .incgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Fixed-width card rows wrap and center */
  .sec2__cards, .fcards, .metrics, .quotes {
    flex-wrap: wrap;
    justify-content: center;
  }
  .metric { height: auto; }

  .pros__grid { gap: 32px; }
  .pro { gap: 28px; }

  /* Founder block stacks */
  .fac { flex-direction: column; align-items: center; text-align: center; }
  .fac__photo {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 420 / 480;
  }
  .fac__text { width: 100%; max-width: 652px; align-items: center; }
  .fac__name { white-space: normal; }
  .fac__quote { padding-left: 0; }

  /* Offer columns stack */
  .offer { flex-direction: column; align-items: center; }
  .offer__left, .offer__form, .offer__calendly { width: 100%; max-width: 560px; }

  /* Sec7 has a large founder→pros gap built for desktop */
  .sec7 { gap: 90px; }
}

/* ---------- The bridge row of stats needs to stack before it overflows ---------- */
@media (max-width: 900px) {
  .bridge { flex-direction: column; gap: 22px; padding: 32px 28px; }
  .bridge__div { width: 60px; height: 1px; }
}

/* ---------- CTA globe range (641–1060px) ----------
   The globe still shows here, but the absolute desktop text block (599px wide)
   collides with it. Stack the text on the left with a width that reserves room
   for a smaller, vertically-centered globe so the copy wraps clear of it. */
@media (min-width: 641px) and (max-width: 1060px) {
  .cta { height: auto; }
  .cta__content {
    position: static;
    max-width: min(560px, calc(100vw - 360px));
    padding: 56px var(--edge);
  }
  .cta__title { font-size: 30px; line-height: 38px; }
  .cta__globe {
    width: 430px;
    height: 430px;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
  }
}

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
  /* Everything to a single column */
  .steps, .incgrid, .pros__grid { grid-template-columns: 1fr; }

  /* Banca carousel: one card per view with a peek of the next */
  .inv { flex-basis: min(82%, 300px); }

  /* (Logo marquee is now always-on and sized in the base rules — no mobile
     overrides needed here.) */

  /* Trim vertical rhythm on the section bands */
  .sec2, .sec3, .sec4, .sec5, .sec6, .sec7, .sec7b,
  .sec8, .sec9, .sec10, .sec11, .sec12, .sec13 {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .sec7 { gap: 64px; }
  /* The offer landscape must sit flush against the green guarantee section —
     no light-blue band below it on mobile. */
  .sec9 { padding-bottom: 0; }

  /* Header: logo over the recognition tag */
  .nav {
    flex-direction: column;
    height: auto;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    /* tighter side gutter on phones to give the wide tag more room */
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Recognition tag: lighter drop shadow on phones (font tiers live below) */
  .pre-badge { box-shadow: 0 5px 0 0 rgba(0, 170, 255, 0.25); }

  /* TopBar stays a single fixed row; shrink text + swap to the short CTA label */
  .topbar { gap: 10px; font-size: 12px; padding-left: 16px; padding-right: 16px; }
  .topbar__info { gap: 8px; }
  /* Hide "21ª turma" on phones to keep the row from overflowing */
  .topbar__turma, .topbar__turma + .topbar__dot { display: none; }
  .topbar__btn { height: 30px; padding: 0 14px; font-size: 13px; }
  .topbar__btn-full  { display: none; }
  .topbar__btn-short { display: inline; }

  /* Stats wrap, drop dividers */
  /* Keep the 4 hero stats on a single row, even on phones */
  .stats { flex-wrap: nowrap; height: auto; gap: 6px; padding-left: 14px; padding-right: 14px; }
  .stat { flex: 1 1 0; min-width: 0; padding: 0 2px; gap: 3px; }
  .stat__div { display: none; }

  /* Stacking blocks */
  .ba { flex-direction: column; }
  .pro { flex-direction: column; gap: 16px; }
  .guarantee { flex-direction: column; text-align: center; align-items: center; }

  /* Single-card-per-row sizing for wrapping flex rows */
  .pcard, .fcard, .quote, .metric, .voice {
    width: 100%;
    max-width: 420px;
  }
  .step__ill { width: 100%; max-width: 260px; align-self: center; }

  /* CTA: the absolute desktop layout doesn't fit — go to a normal stacked block */
  .cta { height: auto; }
  .cta__content {
    position: static;
    max-width: 100%;
    padding: 56px var(--edge);
  }
  /* Globe hidden on phones for cleaner text reading */
  .cta__globe { display: none; }

  /* Fixed sub-bar wraps */
  .barra {
    height: auto;
    flex-direction: column;
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center;
  }

  /* Type scale down */
  .hero__title, .sec-title, .fac__name, .offer__title,
  .cta__title, .invest__price, .pro__name {
    font-size: 28px;
    line-height: 1.2;
  }
  .sec11__title { font-size: 30px; line-height: 1.2; }
  .metric__num { font-size: 36px; }
  .obj__q, .fac__quoteText { font-size: 20px; line-height: 1.3; }
  .bridge__num { font-size: 32px; line-height: 1.2; }
  /* Hero stats in one row → smaller number + label that wraps inside each column */
  .stat__num { font-size: 26px; line-height: 1.1; }
  .stat__label { font-size: 11px; line-height: 1.2; text-align: center; }

  /* CTA buttons: the long label ("Quero agendar uma conversa") overflows the
     fixed-width buttons on narrow phones — shrink the type and side padding so
     it fits (esp. the full-width form button). */
  .btn--hero, .cta__btn, .barra__btn, .btn--form {
    font-size: 18px;
    line-height: 1.2;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Allow nowrap labels to wrap */
  .bridge__label, .voice__text, .barra__text { white-space: normal; }
  /* When the label wraps to 2 lines on narrow phones, center the text instead
     of letting it left-align inside the flex item */
  .bridge__label { text-align: center; }

  /* Decorative plants would crowd the stacked content */
  .banca-plant { display: none; }
}

/* ---------- Recognition tag: shrink to fit narrow phones ---------- */
/* Stays 16px down to ~481px; steps down on smaller phones so the long
   "Programa reconhecido por Harvard, MIT e FGV" never overflows the viewport. */
@media (max-width: 480px) {
  .pre-badge { font-size: 13px; padding: 7px 12px; }
}
@media (max-width: 410px) {
  .pre-badge { font-size: 11px; padding: 6px 11px; }
}