/* =============================================================================
   MG7 mirror enhancements — loaded LAST, on top of the verbatim Elementor CSS.
   Fixes and polish requested by the client. Scoped tightly (element IDs / the
   calculator widget) so nothing else in the mirror is affected.
   Brand: blue #2FA0FF, darker #1F86E0, navy #0B142B.
   ============================================================================= */

:root {
  --mg7-blue: #2fa0ff;
  --mg7-blue-d: #1f86e0;
  --mg7-navy: #0b142b;
  --mg7-ink: #1c2733;
  --mg7-muted: #6b7a90;
  --mg7-line: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   0. Robustness baseline — content must NEVER depend on JS to be visible.
   Elementor hides ~40 entrance-animated elements with `.elementor-invisible
   { visibility: hidden }` and only reveals them via frontend.min.js. On a static
   mirror that reveal JS can fail to run (script blockers, extensions, an early
   error), leaving the page blank over the navy background (the reported "tudo
   azul"). We counter the exact property Elementor sets — visibility — so the
   page renders with zero JS. No !important needed: Elementor's rule carries none
   and this stylesheet loads last, so equal specificity resolves in our favour.
   Where the JS does run, Elementor removes the class and plays the fade normally. */
.elementor-invisible {
  visibility: visible;
}

/* ---------------------------------------------------------------------------
   1. Highlights strip.
   (The "Aprovação facilitada" eyebrow on card 4, widget 490d16d, is kept as in
   the original — the user asked to restore it after an earlier "uniform cards"
   pass had hidden it.)
   --------------------------------------------------------------------------- */

/* Highlights icons — on MOBILE the taller SVGs (calendar "terms" and "$"
   dollar-sign render at 34px vs the 30px of "%"/house) sink below the inline
   baseline and crowd the label beneath them (the "$" and "Prazos 240 meses"
   icons touching their text). Desktop is already uniform (~20px gap). Pin all
   four icons to one height so none sinks, and nudge the "$" (its glyph sits ~6px
   lower than the rest) so every icon→text gap matches. */
@media (max-width: 767px) {
  .elementor-element-920fa9e img,
  .elementor-element-24f7ec1 img,
  .elementor-element-aad0cf4 img,
  .elementor-element-3868378 img {
    height: 30px !important;
    width: auto !important;
  }
  .elementor-element-3868378 img { margin-bottom: 6px !important; }
}

/* our custom mobile menu never shows on desktop (the toggle is hidden there) */
.mg7-mobmenu { display: none; }

/* ===========================================================================
   Mobile / tablet menu (≤1024px). The mirror's native Elementor mobile
   dropdown is broken — it toggles state but the panel stays collapsed
   (transform:scaleY(0) never animates back, plus a max-height:0), so tapping
   the hamburger showed nothing. We (1) refine the toggle button to a premium
   squircle aligned with the logo, (2) hide the broken native dropdown, and
   (3) render our own clean menu panel (wired in mg7-enhancements.js).
   =========================================================================== */
@media (max-width: 1024px) {
  /* refined hamburger button */
  .elementor-menu-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    margin-right: 10px !important;
    border-radius: 14px !important;
    background: var(--mg7-navy) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px -8px rgba(11, 20, 43, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  }
  .elementor-menu-toggle i,
  .elementor-menu-toggle svg { font-size: 22px !important; line-height: 1 !important; }
  .elementor-menu-toggle:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(11, 20, 43, 0.55) !important; }
  .elementor-menu-toggle:active { transform: scale(0.96); }

  /* the native dropdown is broken — hide it, we render our own */
  .elementor-nav-menu--dropdown { display: none !important; }

  /* our own menu panel — a clean card that drops below the header */
  .mg7-mobmenu {
    display: block;
    position: fixed;
    left: 14px;
    right: 14px;
    z-index: 99999;
    background: #fff;
    border: 1px solid var(--mg7-line);
    border-radius: 20px;   /* rounded on ALL corners — top matches bottom */
    box-shadow: 0 26px 54px -18px rgba(11, 20, 43, 0.30);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    font-family: "League Spartan", sans-serif;
  }
  body.mg7-mm-open .mg7-mobmenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .mg7-mobmenu ul { list-style: none; margin: 0; padding: 8px; }
  .mg7-mobmenu a {
    display: block;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    color: var(--mg7-navy);
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
  }
  .mg7-mobmenu li:not(:last-child) a { border-bottom: 1px solid #eef2f7; border-radius: 0; }
  .mg7-mobmenu a:hover,
  .mg7-mobmenu a:active { background: rgba(47, 160, 255, 0.08); color: var(--mg7-blue-d); }
  .mg7-mobmenu .mg7-mobmenu__cta {
    display: block;
    margin: 8px;
    padding: 15px 20px;
    border-radius: 12px;
    background: var(--mg7-blue);
    color: #fff !important;
    text-align: center;
    font-weight: 600;
    border-bottom: 0 !important;
  }
  .mg7-mobmenu .mg7-mobmenu__cta:hover { background: var(--mg7-blue-d); color: #fff !important; }
}

/* ---------------------------------------------------------------------------
   2. Header nav "Fale Conosco" (menu 402119e) — text vanished on hover
   (no :hover color rule existed). Mirror the existing :focus behaviour: blue.
   --------------------------------------------------------------------------- */
.elementor-element-402119e .elementor-nav-menu--main .elementor-item:hover,
.elementor-element-402119e .elementor-nav-menu--main .elementor-item:hover a {
  color: var(--mg7-blue) !important;
  fill: var(--mg7-blue) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   3. "Cadastre-se" button (.btn-parceria / f1afedb) — no own :hover rule, so it
   fell to the global hover and the white text disappeared. Keep white text on
   a slightly darker blue, matching the other CTAs.
   --------------------------------------------------------------------------- */
.btn-parceria .elementor-button:hover,
.btn-parceria .elementor-button:focus,
.elementor-element-f1afedb .elementor-button:hover,
.elementor-element-f1afedb .elementor-button:focus {
  background-color: var(--mg7-blue-d) !important;
  color: #fff !important;
  opacity: 1 !important;
}
.btn-parceria .elementor-button:hover .elementor-button-text,
.elementor-element-f1afedb .elementor-button:hover .elementor-button-text {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   4. Video lightbox (replaces the broken Elementor popup #914).
   --------------------------------------------------------------------------- */
.mg7-video-modal {
  position: fixed;
  inset: 0;
  /* above the WhatsApp Click-to-Chat float button (z-index ~99999999) so the
     green bubble can't punch through the dimmed backdrop while the video plays. */
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 14, 28, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mg7-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}
/* belt-and-suspenders: also hide the WhatsApp float while the video is open. */
body:has(.mg7-video-modal.is-open) #ht-ctc-chat,
body:has(.mg7-video-modal.is-open) .ht-ctc {
  visibility: hidden !important;
}
.mg7-video-modal__frame {
  position: relative;
  width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.mg7-video-modal.is-open .mg7-video-modal__frame {
  transform: scale(1);
}
.mg7-video-modal__ratio {
  width: 100%;
  height: 100%;
}
.mg7-video-modal__frame video,
.mg7-video-modal__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.mg7-video-modal__close {
  position: absolute;
  /* inside the top-right corner of the frame, over the video — never clipped
     off-screen the way an outside-the-frame (-14px) position was on wide modals.
     Nudged inward from the corner so it doesn't hug the edge. */
  top: 14px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 20, 43, 0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background 0.15s ease;
}
.mg7-video-modal__close:hover {
  transform: scale(1.08);
  background: rgba(11, 20, 43, 0.92);
}
@media (max-width: 520px) {
  .mg7-video-modal__close {
    top: 8px;
    right: 8px;
  }
}
/* make the play thumbnail + "Assista o vídeo ao lado" feel clickable */
a[href*="popup"][href*="open"] img[src*="video-thumbnail-play"],
.mg7-video-trigger {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
a[href*="popup"][href*="open"]:hover img[src*="video-thumbnail-play"] {
  transform: scale(1.02);
  filter: brightness(1.04);
}
.mg7-watch-link {
  cursor: pointer;
}
.mg7-watch-link:hover {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   5. Credit calculator (HTML widget 66f57e0) — general polish.
   --------------------------------------------------------------------------- */
#mg7-calc-scope {
} /* placeholder to document that JS adds id=mg7-calc-scope to element 66f57e0 */

.elementor-element-66f57e0 .form-step {
  display: grid;
  gap: 20px;
}
/* labels / section titles */
.elementor-element-66f57e0 label,
.elementor-element-66f57e0 .tit {
  font-family: "League Spartan", sans-serif;
  color: var(--mg7-ink);
  font-weight: 500;
}
.elementor-element-66f57e0 .tit {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 8px;
}

/* text / number / tel inputs */
.elementor-element-66f57e0 input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: "League Spartan", sans-serif;
  color: var(--mg7-ink);
  background: #fff;
  border: 1.5px solid var(--mg7-line);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
.elementor-element-66f57e0 input:not([type="range"]):focus {
  outline: none;
  border-color: var(--mg7-blue);
  box-shadow: 0 0 0 3px rgba(47, 160, 255, 0.18);
}
.elementor-element-66f57e0 input::placeholder {
  color: #9aa7b5;
}

/* range slider */
.elementor-element-66f57e0 input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--mg7-blue) 0%,
    var(--mg7-blue) var(--mg7-range, 50%),
    #dbe4ee var(--mg7-range, 50%),
    #dbe4ee 100%
  );
  outline: none;
  margin: 6px 0;
}
.elementor-element-66f57e0 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mg7-blue);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(47, 160, 255, 0.6);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.elementor-element-66f57e0 input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.elementor-element-66f57e0 input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mg7-blue);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(47, 160, 255, 0.6);
  cursor: pointer;
}
.elementor-element-66f57e0 .range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--mg7-muted);
  font-weight: 500;
}
.elementor-element-66f57e0 .range-value {
  color: var(--mg7-blue);
  font-weight: 700;
}
.elementor-element-66f57e0 .inline-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .elementor-element-66f57e0 .inline-group {
    grid-template-columns: 1fr;
  }
}

/* Simular submit button.
   Excludes the "← Voltar" text link (button[onclick^="voltar"]) — in the
   original it is a discreet inline link (background:none, blue text, inline
   style); the generic rule was inflating it to a full-width 56px block with a
   floating blue shadow. */
.elementor-element-66f57e0 button:not(.mg7-select__trigger):not([onclick^="voltar"]),
.elementor-element-66f57e0 input[type="submit"] {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "League Spartan", sans-serif;
  color: #fff;
  background: var(--mg7-blue);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 26px -10px rgba(47, 160, 255, 0.7);
}
.elementor-element-66f57e0 button:not(.mg7-select__trigger):not([onclick^="voltar"]):hover,
.elementor-element-66f57e0 input[type="submit"]:hover {
  background: var(--mg7-blue-d);
  transform: translateY(-1px);
}
/* "← Voltar" keeps its original text-link look; just give it the same
   League Spartan face as the rest of the card. */
.elementor-element-66f57e0 button[onclick^="voltar"] {
  font-family: "League Spartan", sans-serif;
  font-weight: 500;
  padding: 0;
  width: auto;
}

/* Phone field — intl-tel-input wraps the input in a .iti div, which swallows
   the simulator's input margin-top:5px (the input computes margin-top:0 inside
   the wrapper). Restore the same 5px label gap the other fields have. */
.elementor-element-66f57e0 .iti {
  margin-top: 5px;
}

/* ---------------------------------------------------------------------------
   6. Custom select (JS-enhanced). Replaces the ugly native OS dropdown with a
   styled, on-brand listbox. The real <select> stays in the DOM (hidden) so the
   form value/submission is unchanged.
   --------------------------------------------------------------------------- */
.mg7-select {
  position: relative;
  width: 100%;
  font-family: "League Spartan", sans-serif;
}
.mg7-select select.mg7-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The trigger is a type="button" <button>, so several global state rules leak
   onto it and repaint it on hover/focus: the hello-elementor theme paints
   [type=button]:hover/:focus pink (#c36) + a 5px UA focus ring, post-6 paints
   .elementor-kit-6 button:hover/:focus blue, and the simulator's own
   button:hover/:active paints #238ee6. Pin the field white in every state so the
   select never turns blue/pink; keyboard focus still shows the box-shadow ring
   from the :focus-visible rule below (which this block does not touch). */
.elementor-element-66f57e0 .mg7-select__trigger,
.elementor-element-66f57e0 .mg7-select__trigger:hover,
.elementor-element-66f57e0 .mg7-select__trigger:focus,
.elementor-element-66f57e0 .mg7-select__trigger:active,
.mg7-select__trigger,
.mg7-select__trigger:hover,
.mg7-select__trigger:focus,
.mg7-select__trigger:active {
  background: #fff;
  color: var(--mg7-ink);
  outline: none;
  text-decoration: none;
}
.mg7-select__trigger {
  /* The trigger is a <button>, so the simulator's generic `button{margin-top:20px}`
     (meant for the Simular button) leaked onto it, sinking every custom select
     15px below its label — visibly misaligning Cidade/Estado side by side.
     Match the native `select{margin-top:5px}` rule it replaces. */
  margin-top: 5px;
  /* the native <select> it replaces was height:55px, same as the text inputs;
     without this the padding-only trigger renders ~50px and Cidade (55px input)
     next to Estado (select) looks uneven. min-height (not height) so a long
     label can't clip. */
  min-height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--mg7-ink);
  background: #fff;
  border: 1.5px solid var(--mg7-line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mg7-select__trigger:hover {
  border-color: #c2d0de;
}
.mg7-select[data-open="true"] .mg7-select__trigger,
.mg7-select__trigger:focus-visible {
  outline: none;
  border-color: var(--mg7-blue);
  box-shadow: 0 0 0 3px rgba(47, 160, 255, 0.18);
}
.mg7-select__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg7-select__label[data-placeholder="true"] {
  color: #9aa7b5;
}
.mg7-select__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--mg7-muted);
  transition: transform 0.2s ease;
}
.mg7-select[data-open="true"] .mg7-select__chevron {
  transform: rotate(180deg);
  color: var(--mg7-blue);
}
.mg7-select__list {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--mg7-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(11, 20, 43, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.mg7-select[data-open="true"] .mg7-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mg7-select__option {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.98rem;
  color: var(--mg7-ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.mg7-select__option:hover,
.mg7-select__option.is-active {
  background: rgba(47, 160, 255, 0.1);
  color: var(--mg7-blue-d);
}
.mg7-select__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--mg7-blue-d);
}
.mg7-select__list::-webkit-scrollbar {
  width: 8px;
}
.mg7-select__list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* =============================================================================
   BATCH 2 — reported fixes & polish
   ============================================================================= */

/* A. Over-scroll white gaps (top past the hero, bottom past the footer) + the
   header flashing white. Paint the scroll container navy so bounce blends in,
   and stop the elastic overscroll. */
html {
  background-color: var(--mg7-navy);
  overscroll-behavior-y: none;
}
body {
  background-color: var(--mg7-navy);
}

/* B. FIX: calculator was rendering BOTH steps at once (my earlier rule forced
   display:grid on every .form-step, defeating the site's own step hiding).
   Only the active step is shown now — kills the "two calculators" and most of
   the big empty space above it. */
.elementor-element-66f57e0 .form-step {
  display: none;
}
/* Active step uses the site's own block flow — labels carry margin-top:15px and
   inputs margin-top:5px, which is the original's compact rhythm. (An earlier
   display:grid;gap:20px stacked a 20px grid gap ON TOP of those margins, which
   is what produced the "espaço gigante" above and between the fields.) */
.elementor-element-66f57e0 .form-step.active {
  display: block;
}

/* B2. Highlights band (9b3b974) — equal-height stat cards.
   The five cards (Taxas / Valores / Prazos / Use o crédito / Menor taxa) are
   natural-height, so the taller "…mesmo com restrição." card left the others
   short and made them sit unevenly over the navy strip. Stretch them to a
   common height so their tops AND bottoms line up on the band. */
.elementor-element-9b3b974 {
  align-items: stretch;
}
.elementor-element-9b3b974 > .e-con.e-child {
  align-self: stretch;
  height: auto;
}

/* C. Solutions carousel (0ce6f97) — equal-height cards. */
.elementor-element-0ce6f97 .swiper-slide {
  height: auto;
  display: flex;
}
.elementor-element-0ce6f97 .swiper-slide > *,
.elementor-element-0ce6f97 .swiper-slide .e-loop-item,
.elementor-element-0ce6f97 .swiper-slide .e-con {
  height: 100%;
  width: 100%;
}
/* consistent arrow → text spacing inside those cards */
.elementor-element-0ce6f97 .elementor-icon-list-icon {
  margin-right: 8px !important;
  flex-shrink: 0;
}
.elementor-element-0ce6f97 .elementor-icon-list-item {
  align-items: flex-start;
}

/* D. Real-estate stat band (container db9f0e3) — equal-height white cards so the
   long "Tipo de Crédito…" card no longer towers over the others. (21437e4 is the
   heading widget above it and has no card children — the cards are the
   .e-con.e-child of db9f0e3.) */
.elementor-element-db9f0e3 {
  align-items: stretch;
}
.elementor-element-db9f0e3 > .e-con.e-child {
  align-self: stretch;
  height: auto;
}

/* E. Contact-form WhatsApp: the intl-tel-input wrapper must fill the field width
   so the DDI selector + input line up like the calculator's. */
.elementor-form .iti {
  width: 100%;
  display: block;
}

/* E. "Sua próxima conquista" CTA band (7ebd49d2) — full refresh. */
.elementor-element-7ebd49d2 {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(130% 150% at 12% 0%, #5cb6ff 0%, transparent 52%),
    linear-gradient(135deg, var(--mg7-blue) 0%, var(--mg7-blue-d) 100%) !important;
  box-shadow: 0 34px 80px -34px rgba(31, 134, 224, 0.75);
}
.elementor-element-7ebd49d2::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -55%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 62%);
  pointer-events: none;
}
/* the stray square on hover = the button's pointer/frame animation. Kill it and
   give a clean white pill hover. */
.elementor-element-7ebd49d2 .elementor-button::before,
.elementor-element-7ebd49d2 .elementor-button::after {
  display: none !important;
}
.elementor-element-7ebd49d2 .elementor-button {
  background: #fff !important;
  color: var(--mg7-blue-d) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px -12px rgba(6, 30, 60, 0.4);
  transition: transform 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.elementor-element-7ebd49d2 .elementor-button:hover {
  color: var(--mg7-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(6, 30, 60, 0.5);
}
.elementor-element-7ebd49d2 .elementor-button .elementor-button-text {
  color: inherit !important;
}

/* F. Footer refresh. Hide the "Desenvolvido por" credit + partner logo, make
   the copyright discreet (styled by JS-injected .mg7-copyright text). */
.elementor-element-119e451,
img[src*="logo-digitalott"] {
  display: none !important;
}
.elementor-element-5089b5e {
  opacity: 0.6;
}
.elementor-element-5089b5e * {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* G. Process steps — reveal one at a time on scroll (initial hidden state). */
.mg7-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.mg7-reveal.mg7-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mg7-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* H. Phone field — breathing room around the "+55" dial code, and style the
   country-search box injected by JS. */
.iti__selected-flag {
  padding: 0 10px 0 12px !important;
}
.iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 8px !important;
  font-weight: 500;
}
.elementor-element-66f57e0 .iti,
.elementor-element-66f57e0 .iti input {
  width: 100%;
}
/* ===========================================================================
   Phone / WhatsApp field — intl-tel-input, rebuilt on-brand.
   Two defects were fixed here: (1) the selected-flag container collapsed to 0×0
   (relative, no height), so the flag + "+55" never rendered and the input's
   reserved 95px left-padding became an empty void that swallowed the typed
   number; (2) the injected search box inherited the calculator's global
   `input{height:55px;padding:14px}`. The field now reads like the site's other
   inputs: a full-height "+55" dial cluster on the left with a hairline divider,
   the number typed clearly to its right, and a compact search with a magnifier.
   =========================================================================== */

/* Wrapper fills the field width and anchors the dial cluster. */
.elementor-form .iti,
.elementor-element-66f57e0 .iti,
.iti { display: block; width: 100%; position: relative; }

/* Left dial cluster: pin the whole flag button to the input's left edge, full
   height, so the flag, "+55" and chevron actually show. Both the v18 wrapper
   AND the button itself are pinned so it works regardless of the exact markup
   (the earlier collapse was the button rendering relative with 0 height). */
.iti .iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
}
.iti .iti__selected-flag {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 0 12px !important;
  border-right: 1px solid var(--mg7-line);
  background: transparent !important;
  border-radius: 12px 0 0 12px;
}
.iti .iti__selected-flag:hover,
.iti .iti__selected-flag:focus { background: rgba(47, 160, 255, 0.06) !important; }
/* separateDialCode mode leaves the selected flag sprite empty, so hide the
   empty box and show a clean "+55 ▾" cluster (the list still shows real flags). */
.iti .iti__selected-flag .iti__flag {
  display: none !important;
}
.iti .iti__selected-dial-code {
  font-family: "League Spartan", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--mg7-ink);
  margin: 0 !important;
}
.iti .iti__arrow {
  flex: 0 0 auto;
  border-top-color: var(--mg7-muted);
  margin-left: 2px;
}

/* The number sits clear of the dial cluster and is fully visible. */
.iti input,
.iti input[type="tel"] {
  padding-left: 72px !important;
  color: var(--mg7-ink) !important;
  font-family: "League Spartan", sans-serif;
}

/* --- Country dropdown panel --- */
.iti__country-list {
  max-height: 260px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 40px -18px rgba(11, 20, 43, 0.35);
  padding-bottom: 4px;
}
.iti__country {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-family: "League Spartan", sans-serif;
}
.iti__country .iti__country-name { color: var(--mg7-ink); }
.iti__country .iti__dial-code { color: var(--mg7-muted); margin-left: auto; }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(47, 160, 255, 0.09); }

/* --- Search box: compact, left-aligned, magnifier, on-brand focus.
   The !important overrides the leaked global input sizing. --- */
.mg7-iti-search {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--mg7-line);
}
.mg7-iti-search input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px 0 38px !important;
  border: 1.5px solid var(--mg7-line) !important;
  border-radius: 10px !important;
  font-family: "League Spartan", sans-serif;
  font-size: 0.95rem !important;
  line-height: 40px !important;
  color: var(--mg7-ink) !important;
  outline: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjdhOTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PHBhdGggZD0ibTIxIDIxLTQuMy00LjMiLz48L3N2Zz4=") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
}
.mg7-iti-search input::placeholder { color: var(--mg7-muted); }
.mg7-iti-search input:focus {
  border-color: var(--mg7-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 160, 255, 0.15);
}

/* ===========================================================================
   Custom country dropdown panel — replaces intl-tel-input's native list, which
   duplicated the preferred countries, flipped upward over the trigger (inline
   `top`, uncss-able) and had no search/empty state. The native list is hidden
   on every field JS marks `.mg7-iti-managed`; our panel is appended to <body>
   and position:fixed, so it opens strictly below the field, never clipped by an
   overflow ancestor and never covering the trigger. Number engine untouched —
   selection still commits through intl-tel-input, so getNumber() stays E.164.
   =========================================================================== */
.iti.mg7-iti-managed .iti__country-list { display: none !important; }

.mg7-cc-panel {
  position: fixed;
  z-index: 100000001;              /* above the WhatsApp float + the video modal */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mg7-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(11, 20, 43, 0.28);
  overflow: hidden;
  font-family: "League Spartan", sans-serif;
}
.mg7-cc-panel[hidden] { display: none; }

.mg7-cc-search {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--mg7-line);
}
.mg7-cc-search input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px 0 40px !important;
  border: 1.5px solid var(--mg7-line) !important;
  border-radius: 10px !important;
  font-family: "League Spartan", sans-serif;
  font-size: 16px !important;      /* >=16px so iOS doesn't zoom on focus */
  line-height: 42px !important;
  color: var(--mg7-ink) !important;
  outline: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YjdhOTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PHBhdGggZD0ibTIxIDIxLTQuMy00LjMiLz48L3N2Zz4=") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
}
.mg7-cc-search input::placeholder { color: var(--mg7-muted); }
.mg7-cc-search input:focus {
  border-color: var(--mg7-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 160, 255, 0.15);
}

.mg7-cc-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mg7-cc-list::-webkit-scrollbar { width: 8px; }
.mg7-cc-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.mg7-cc-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--mg7-ink);
  cursor: pointer;
}
.mg7-cc-option[hidden] { display: none; }
.mg7-cc-option:hover,
.mg7-cc-option.is-highlight { background: rgba(47, 160, 255, 0.10); }
.mg7-cc-option.is-active { font-weight: 600; color: var(--mg7-blue-d); }
.mg7-cc-option .iti__flag { flex: 0 0 auto; }
.mg7-cc-name { font-size: 0.98rem; }
.mg7-cc-dial { color: var(--mg7-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

.mg7-cc-empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--mg7-muted);
  font-size: 0.95rem;
}
.mg7-cc-empty[hidden] { display: none; }

/* =============================================================================
   BATCH 3 — responsive overhaul (tablet + mobile down to 320px)
   ============================================================================= */

/* --- Hamburger toggle: clean navy pill, kill the stray gold focus box --- */
.elementor-menu-toggle {
  background: var(--mg7-navy) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: 0 6px 16px -8px rgba(11, 20, 43, 0.5) !important;
  transition: background 0.15s ease, transform 0.12s ease;
}
.elementor-menu-toggle:hover {
  background: #16233f !important;
  transform: translateY(-1px);
}
.elementor-menu-toggle:focus,
.elementor-menu-toggle:focus-visible {
  outline: 3px solid rgba(47, 160, 255, 0.5) !important;
  outline-offset: 2px !important;
}
.elementor-menu-toggle i,
.elementor-menu-toggle svg,
.elementor-menu-toggle .elementor-menu-toggle__icon {
  color: #fff !important;
  fill: #fff !important;
}

/* --- Mobile menu drawer: solid card, on-brand items --- */
.elementor-nav-menu--dropdown,
nav.elementor-nav-menu--dropdown {
  background: #fff !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 48px -18px rgba(11, 20, 43, 0.3) !important;
  border-top: 1px solid var(--mg7-line) !important;
  padding: 10px !important;
  overflow: hidden;
}
.elementor-nav-menu--dropdown .elementor-item {
  color: var(--mg7-navy) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  padding: 15px 16px !important;
  border-radius: 10px !important;
  border: 0 !important;
  transition: background 0.14s ease, color 0.14s ease;
}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item:focus {
  background: #eef6ff !important;
  color: var(--mg7-blue-d) !important;
}

/* --- Highlights band (9b3b974): stop icon/text overlap, tidy card heights --- */
@media (max-width: 1024px) {
  .elementor-element-9b3b974 .e-con.e-child,
  .elementor-element-9b3b974 [data-id] {
    height: auto !important;
    min-height: 0 !important;
  }
  .elementor-element-9b3b974 .e-con.e-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 22px !important;
    justify-content: flex-start !important;
  }
  .elementor-element-9b3b974 .elementor-widget,
  .elementor-element-9b3b974 .elementor-widget-container,
  .elementor-element-9b3b974 .elementor-icon,
  .elementor-element-9b3b974 .elementor-widget-heading {
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
  }
  .elementor-element-9b3b974 .elementor-widget-icon .elementor-icon {
    font-size: 40px;
  }
  .elementor-element-9b3b974 .elementor-widget-icon svg,
  .elementor-element-9b3b974 .elementor-widget-icon img {
    width: 40px !important;
    height: 40px !important;
  }
  .elementor-element-9b3b974 h2 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
}

/* --- Process timeline (55e00108): stack cleanly on small screens instead of
   cramping/wrapping the numbered steps sideways. --- */
@media (max-width: 900px) {
  .elementor-element-55e00108 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .elementor-element-55e00108 > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center;
  }
  /* the blue connector lines between steps don't make sense stacked */
  .elementor-element-55e00108 .elementor-divider,
  .elementor-element-55e00108 [class*="divider"] {
    display: none !important;
  }
  .elementor-element-55e00108 h2,
  .elementor-element-55e00108 h3 {
    white-space: normal !important;
    word-break: normal !important;
    font-size: 1.15rem !important;
  }
}

/* --- Consent checkbox: box and label on one centered line ---
   The Elementor markup is `<span.elementor-field-option> <input> <label> </span>`.
   The simulator's global `label{margin-top:15px}` leaks onto the label and drops
   the text ~15px below the box; make the option a flex row and zero that margin. */
label:has(> input[type="checkbox"]),
.elementor-field-subgroup .elementor-field-option,
.jet-form-builder__field-wrap .checkbox-line,
.jet-form-builder__fields-group label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.elementor-field-option label,
.elementor-field-subgroup label {
  margin-top: 0 !important;
  line-height: 1.35;
}
input[type="checkbox"] {
  margin-top: 0 !important;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* --- Icon-list arrows: guarantee a consistent gap between the → and the text.
   The source markup is inconsistent (some items have a leading space after the
   arrow span, some don't), so cramped items like "→Renegociação" had no breathing
   room. A fixed margin on the arrow image normalises every item; the JS also
   trims stray leading whitespace so the gap is pixel-identical. --- */
.elementor-icon-list-text img[src*="right-arrow"],
.elementor-icon-list-text img[alt*="arrow"] {
  margin-right: 10px;
  vertical-align: -3px;
}

/* --- General mobile hygiene down to 320px --- */
@media (max-width: 480px) {
  .elementor-element-66f57e0 .inline-group {
    grid-template-columns: 1fr !important;
  }
  .mg7-video-modal__frame {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .elementor-element-9b3b974 .e-con.e-child {
    padding: 16px !important;
  }
}