/* ==========================================================
   i9Startups HEADER FINAL
   Single source of truth
   ========================================================== */

:root {
  --i9-header-h: 82px;

  --i9-header-top: #1f2b35;

  /*
   * Visual equivalent of approximately 85% #1f2b35
   * over the institutional light surface.
   *
   * Solid by design: prevents the page underneath from
   * creating different tones across the same header.
   */
  --i9-header-scroll: #404b54;

  --i9-line: rgba(255,255,255,.18);
  --i9-text: rgba(255,255,255,.92);

  --i9-active: rgba(109,185,226,.10);
  --i9-active-line: rgba(109,185,226,.72);
  --i9-active-accent: rgb(126,202,239);
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width:901px) {

  .v12-header,
  .v12-header.i9-header-scrolled {

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    height:var(--i9-header-h) !important;
    min-height:var(--i9-header-h) !important;
    max-height:var(--i9-header-h) !important;

    margin:0 !important;
    padding:0 28px !important;

    box-sizing:border-box !important;

    display:block !important;

    border:0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.07) !important;

    opacity:1 !important;

    overflow:visible !important;

    z-index:5000 !important;

    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;

    transition:
      background-color .22s ease,
      box-shadow .22s ease !important;
  }


  /* 100% at top */

  .v12-header {
    background:
      var(--i9-header-top) !important;

    box-shadow:
      0 4px 18px rgba(0,0,0,.08) !important;
  }


  /* visual equivalent of 85% after scroll */

  .v12-header.i9-header-scrolled {

    background:
      var(--i9-header-scroll) !important;

    box-shadow:
      0 5px 20px rgba(0,0,0,.10) !important;
  }


  /*
   * Kill any legacy decorative layer.
   */

  .v12-header::before,
  .v12-header::after,
  .v12-header.i9-header-scrolled::before,
  .v12-header.i9-header-scrolled::after {

    content:none !important;

    display:none !important;

    background:none !important;

    box-shadow:none !important;
  }


  /* ------------------------------
     BRAND
     ------------------------------ */

  .v12-header .v12-brand {

    position:absolute !important;

    left:28px !important;
    top:50% !important;

    transform:
      translateY(-50%) !important;

    margin:0 !important;
    padding:0 !important;

    background:
      transparent !important;

    opacity:1 !important;

    z-index:3 !important;
  }


  /* ------------------------------
     JOURNEY
     ------------------------------ */

  .v12-header .i9-header-journey-slot {

    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:
      translate(-50%,-50%) !important;

    width:max-content !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    margin:0 !important;
    padding:0 !important;

    background:
      transparent !important;

    background-image:
      none !important;

    border:0 !important;
    box-shadow:none !important;

    opacity:1 !important;

    z-index:2 !important;
  }


  .v12-header .i9-header-journey-slot > nav,
  .v12-header .i9-header-journey-slot .p52-journey,
  .v12-header .i9-header-journey-slot .p93c-journey,
  .v12-header .i9-header-journey-slot .v12-journey {

    position:static !important;

    display:grid !important;

    grid-template-columns:
      repeat(4,190px) !important;

    gap:10px !important;

    width:auto !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    margin:0 !important;
    padding:0 !important;

    background:
      transparent !important;

    background-image:
      none !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;
  }


  /*
   * Every navigation card has immutable geometry.
   */

  .v12-header
  .i9-header-journey-slot a,

  .v12-header
  .i9-header-journey-slot a:hover,

  .v12-header
  .i9-header-journey-slot a:focus,

  .v12-header
  .i9-header-journey-slot a.current,

  .v12-header
  .i9-header-journey-slot a.i9-step-complete,

  .v12-header
  .i9-header-journey-slot a.i9-scroll-active {

    position:relative !important;

    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:
      0 17px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    border:
      1px solid var(--i9-line) !important;

    border-radius:
      999px !important;

    background:
      transparent !important;

    color:
      var(--i9-text) !important;

    box-shadow:
      none !important;

    transform:
      none !important;

    scale:
      1 !important;

    white-space:
      nowrap !important;

    font-size:
      .94rem !important;

    line-height:
      1 !important;

    transition:
      background-color .18s ease,
      border-color .18s ease,
      color .18s ease !important;
  }


  /*
   * Current viewport section.
   * Color only. Never changes dimensions.
   */

  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active {

    background:
      var(--i9-active) !important;

    border-color:
      var(--i9-active-line) !important;

    color:#fff !important;
  }


  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active::after {

    content:"" !important;

    position:absolute !important;

    left:42% !important;
    right:42% !important;

    bottom:5px !important;

    height:3px !important;

    border-radius:
      999px !important;

    background:
      var(--i9-active-accent) !important;
  }


  /* ------------------------------
     LANGUAGES
     ------------------------------ */

  .v12-header .p93d-language,
  .v12-header .p93d-language-wrap {

    position:absolute !important;

    right:28px !important;
    top:50% !important;

    transform:
      translateY(-50%) !important;

    margin:0 !important;

    background:
      transparent !important;

    z-index:3 !important;
  }


  body {
    padding-top:
      var(--i9-header-h) !important;
  }

}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (min-width:901px) and (max-width:1280px) {

  .v12-header .i9-header-journey-slot > nav,
  .v12-header .i9-header-journey-slot .p52-journey,
  .v12-header .i9-header-journey-slot .p93c-journey,
  .v12-header .i9-header-journey-slot .v12-journey {

    grid-template-columns:
      repeat(4,150px) !important;
  }


  .v12-header
  .i9-header-journey-slot a,

  .v12-header
  .i9-header-journey-slot a:hover,

  .v12-header
  .i9-header-journey-slot a.i9-scroll-active {

    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    padding:
      0 10px !important;

    font-size:
      .84rem !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:900px) {

  :root {
    --i9-mobile-header-h: 160px;
  }


  .v12-header,
  .v12-header.i9-header-scrolled {

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    min-height:
      var(--i9-mobile-header-h) !important;

    margin:0 !important;

    padding:
      12px 16px 10px !important;

    box-sizing:
      border-box !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "brand language"
      "journey journey" !important;

    align-items:center !important;

    gap:
      12px 10px !important;

    border:0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.07) !important;

    opacity:1 !important;

    overflow:hidden !important;

    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;

    z-index:5000 !important;
  }


  .v12-header {

    background:
      var(--i9-header-top) !important;
  }


  .v12-header.i9-header-scrolled {

    background:
      var(--i9-header-scroll) !important;
  }


  .v12-header::before,
  .v12-header::after {

    content:none !important;

    display:none !important;
  }


  .v12-header .v12-brand {

    position:static !important;

    grid-area:
      brand !important;

    transform:
      none !important;

    margin:0 !important;
  }


  .v12-header .p93d-language,
  .v12-header .p93d-language-wrap {

    position:static !important;

    grid-area:
      language !important;

    transform:
      none !important;

    justify-self:
      end !important;

    margin:0 !important;
  }


  .v12-header .i9-header-journey-slot {

    position:static !important;

    grid-area:
      journey !important;

    transform:
      none !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    background:
      transparent !important;

    border:0 !important;
    box-shadow:none !important;
  }


  .v12-header .i9-header-journey-slot > nav,
  .v12-header .i9-header-journey-slot .p52-journey,
  .v12-header .i9-header-journey-slot .p93c-journey,
  .v12-header .i9-header-journey-slot .v12-journey {

    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    background:
      transparent !important;

    border:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
  }


  .v12-header
  .i9-header-journey-slot a,

  .v12-header
  .i9-header-journey-slot a:hover,

  .v12-header
  .i9-header-journey-slot a.i9-scroll-active {

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;

    padding:
      0 4px !important;

    gap:
      3px !important;

    box-sizing:
      border-box !important;

    border:
      1px solid var(--i9-line) !important;

    border-radius:
      999px !important;

    background:
      transparent !important;

    transform:
      none !important;

    font-size:
      .68rem !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;
  }


  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active {

    background:
      var(--i9-active) !important;

    border-color:
      var(--i9-active-line) !important;
  }


  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active::after {

    bottom:
      4px !important;

    height:
      2px !important;
  }


  html,
  body {

    max-width:
      100% !important;

    overflow-x:
      hidden !important;
  }


  body {

    padding-top:
      var(--i9-mobile-header-h) !important;
  }

}


/* ==========================================================
   VERY NARROW MOBILE
   ========================================================== */

@media (max-width:390px) {

  .v12-header {

    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }


  .v12-header
  .i9-header-journey-slot a {

    font-size:
      .63rem !important;

    gap:
      2px !important;

    padding:
      0 2px !important;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

  .v12-header,
  .v12-header * {

    transition:
      none !important;
  }

}

/* ==========================================================
   END i9Startups HEADER FINAL
   ========================================================== */


/* ==========================================================
   i9Startups MOBILE HEADER FINAL FIX
   Mobile only
   ========================================================== */

@media (max-width:900px) {

  .v12-header,
  .v12-header.i9-header-scrolled {
    min-height:148px !important;
    padding:10px 14px 10px !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "brand language"
      "journey journey" !important;

    row-gap:12px !important;
  }

  .v12-header .i9-header-journey-slot {
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }

  .v12-header .i9-header-journey-slot > nav,
  .v12-header .i9-header-journey-slot .p52-journey,
  .v12-header .i9-header-journey-slot .p93c-journey,
  .v12-header .i9-header-journey-slot .v12-journey {

    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:5px !important;

    overflow:visible !important;
  }

  .v12-header
  .i9-header-journey-slot a,

  .v12-header
  .i9-header-journey-slot a:hover,

  .v12-header
  .i9-header-journey-slot a.i9-scroll-active {

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    padding:0 4px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;

    box-sizing:border-box !important;

    border:
      1px solid rgba(255,255,255,.16) !important;

    border-radius:
      18px !important;

    background:
      rgba(255,255,255,.015) !important;

    color:
      rgba(255,255,255,.90) !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      clip !important;

    font-size:
      .66rem !important;

    line-height:
      1 !important;

    font-weight:
      700 !important;

    transform:
      none !important;
  }

  .v12-header
  .i9-header-journey-slot
  a > span:first-child {

    flex:
      0 0 auto !important;

    margin:
      0 1px 0 0 !important;

    font-size:
      .62rem !important;
  }

  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active {

    background:
      rgba(109,185,226,.10) !important;

    border-color:
      rgba(109,185,226,.66) !important;
  }

  .v12-header
  .i9-header-journey-slot
  a.i9-scroll-active::after {

    left:36% !important;
    right:36% !important;

    bottom:4px !important;

    height:2px !important;
  }

  body {
    padding-top:
      148px !important;
  }
}


/* Narrow iPhone widths */
@media (max-width:390px) {

  .v12-header,
  .v12-header.i9-header-scrolled {

    min-height:
      144px !important;

    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }

  .v12-header
  .i9-header-journey-slot > nav,
  .v12-header
  .i9-header-journey-slot .p52-journey,
  .v12-header
  .i9-header-journey-slot .p93c-journey,
  .v12-header
  .i9-header-journey-slot .v12-journey {

    gap:
      4px !important;
  }

  .v12-header
  .i9-header-journey-slot a {

    height:
      44px !important;

    min-height:
      44px !important;

    max-height:
      44px !important;

    padding:
      0 2px !important;

    font-size:
      .61rem !important;

    gap:
      2px !important;
  }

  body {
    padding-top:
      144px !important;
  }
}

/* ==========================================================
   END i9Startups MOBILE HEADER FINAL FIX
   ========================================================== */


/* ==========================================================
   i9Startups HERO CTA - Resolver meu problema
   ========================================================== */

.i9-hero-problem-cta {
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-width:220px !important;
  min-height:54px !important;

  padding:0 26px !important;

  border-radius:999px !important;

  background:#fff !important;
  color:#17212b !important;

  border:1px solid rgba(255,255,255,.92) !important;

  box-shadow:
    0 2px 0 rgba(122,190,230,.48) !important;

  text-decoration:none !important;

  font-weight:750 !important;
  font-size:1rem !important;
  line-height:1 !important;

  opacity:1 !important;

  visibility:visible !important;

  overflow:visible !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease !important;
}

.i9-hero-problem-cta:hover,
.i9-hero-problem-cta:focus-visible {

  background:#f7fafc !important;
  color:#17212b !important;

  transform:
    translateY(-1px) !important;

  box-shadow:
    0 4px 0 rgba(122,190,230,.50) !important;
}

/*
 * Target must land below fixed header.
 */
#problem {
  scroll-margin-top:105px !important;
}


/* Mobile */
@media (max-width:900px) {

  .i9-hero-problem-cta {

    width:100% !important;
    max-width:295px !important;

    min-width:0 !important;
    min-height:56px !important;

    padding:
      0 22px !important;

    font-size:
      .96rem !important;
  }

  #problem {
    scroll-margin-top:
      165px !important;
  }

}


/* Reduced motion */
@media (prefers-reduced-motion:reduce) {

  .i9-hero-problem-cta {

    transition:
      none !important;

    transform:
      none !important;
  }

}

/* ==========================================================
   END i9Startups HERO CTA
   ========================================================== */


/* ==========================================================
   I9 MOBILE HEADER BOUNDARY FIX
   Header must never cover Hero content
   ========================================================== */

@media (max-width:900px) {

  /*
   * The visible fixed header has a strict physical boundary.
   */
  .v12-header,
  .v12-header.i9-header-scrolled {

    height:148px !important;
    min-height:148px !important;
    max-height:148px !important;

    box-sizing:border-box !important;

    /*
     * Header itself must not intercept the page below.
     */
    pointer-events:none !important;
  }

  /*
   * Restore interaction only to actual header controls.
   */
  .v12-header .v12-brand,
  .v12-header .i9-header-journey-slot,
  .v12-header .i9-header-journey-slot *,
  .v12-header .p93d-language,
  .v12-header .p93d-language-wrap,
  .v12-header button,
  .v12-header a {

    pointer-events:auto !important;
  }

  /*
   * Mobile hamburger trigger remains interactive.
   */
  .v12-header [class*="menu-toggle"],
  .v12-header [class*="mobile-toggle"],
  .v12-header [aria-controls] {

    pointer-events:auto !important;
  }

  /*
   * Expanded mobile menu is allowed to exist outside
   * the physical header without making the entire header
   * cover the Hero.
   */
  .v12-header .p52-mobile-panel {

    pointer-events:auto !important;
  }

  body {
    padding-top:148px !important;
  }

}

@media (max-width:390px) {

  .v12-header,
  .v12-header.i9-header-scrolled {

    height:144px !important;
    min-height:144px !important;
    max-height:144px !important;
  }

  body {
    padding-top:144px !important;
  }

}

/* ==========================================================
   END I9 MOBILE HEADER BOUNDARY FIX
   ========================================================== */


/* ==========================================================
   I9 CTA FINAL - Safari mobile isolation
   ========================================================== */

.i9-hero-problem-cta {
  position:relative !important;
  isolation:isolate !important;

  pointer-events:auto !important;

  -webkit-user-select:none;
  user-select:none;

  cursor:pointer !important;

  color:#10244a !important;
  -webkit-text-fill-color:#10244a !important;
}

.i9-hero-problem-cta .i9-hero-problem-label {
  position:relative !important;
  z-index:5 !important;

  display:block !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  opacity:1 !important;
  visibility:visible !important;

  color:#10244a !important;
  -webkit-text-fill-color:#10244a !important;

  font:inherit !important;
  font-weight:750 !important;
  line-height:1.2 !important;

  text-indent:0 !important;
  text-shadow:none !important;

  mix-blend-mode:normal !important;

  filter:none !important;
  -webkit-filter:none !important;

  transform:none !important;

  pointer-events:none !important;
}

/*
 * Neutralize legacy CTA decoration only for this CTA.
 */
.i9-hero-problem-cta::before,
.i9-hero-problem-cta::after {
  pointer-events:none !important;
}

/* Safari/iPhone */
@media (max-width:900px) {

  .i9-hero-problem-cta {
    pointer-events:auto !important;

    position:relative !important;
    z-index:20 !important;

    overflow:visible !important;

    color:#10244a !important;
    -webkit-text-fill-color:#10244a !important;
  }

  .i9-hero-problem-cta .i9-hero-problem-label {
    display:block !important;

    opacity:1 !important;

    color:#10244a !important;
    -webkit-text-fill-color:#10244a !important;

    font-size:.96rem !important;
    font-weight:750 !important;

    visibility:visible !important;
  }
}

/* ==========================================================
   END I9 CTA FINAL
   ========================================================== */