/* =========================================================
   Fontes auto-hospedadas (Inter + Montserrat, subconjuntos latin e latin-ext).
   Arquivos variáveis: um woff2 cobre todos os pesos usados.
   ========================================================= */

/* Fallback com métricas ajustadas para a Inter (upm 2048, asc 1984, desc -494).
   Sem isso, a troca da fonte de sistema pela Inter reembrulha o texto e
   desloca o layout. Com o ajuste, as duas ocupam a mesma caixa. */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'), local('Helvetica'), local('Roboto');
  ascent-override:90.00%;
  descent-override:22.43%;
  line-gap-override:0.00%;
  size-adjust:107.12%;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-400-700.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-400-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500 600;
  font-display:swap;
  src:url('../fonts/montserrat-latin-ext-500-600.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500 600;
  font-display:swap;
  src:url('../fonts/montserrat-latin-500-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Capital Inteligente — estilos
   Paleta e medidas extraídas 1:1 do site original.
   Breakpoints: mobile <=767px | tablet 768–1024px | desktop >1024px
   ========================================================= */

:root{
  /* Azul da marca. Continua sendo esta a cor de texto e de detalhe
     sobre fundo escuro, onde o contraste passa folgado. */
  --blue:            #377DFF;
  /* Azul de superfície: usado onde há texto branco por cima.
     O #377DFF dá só 3,79:1 com branco; este dá 4,81:1. */
  --blue-surface:    #2A6BE8;
  --blue-counter:    #377EFF;
  --blue-light:      #1095FF;
  --blue-dark:       #114DBD;
  --blue-hover:      #1D50AF;
  /* Laranja preservado. O contraste vem do texto navy, não de mudar a cor. */
  --orange:          #FF6F28;
  --orange-hover:    #F2621C;
  /* Texto dos botões laranja. Branco a pedido do cliente; ver a nota em
     .btn--orange sobre o contraste. */
  --orange-ink:      #FFFFFF;
  --orange-stroke:   #F77E23;
  --navy:            #040A2B;
  --navy-hero:       #02082B;
  --navy-deep:       #010620;
  --navy-soft:       #060D2F;
  --indigo:          #150090;
  --text-default:    #90908F;   /* --e-global-color-text */
  --text-secondary:  #EEEEEE;   /* --e-global-color-secondary */
  --content:         1150px;

  /* header */
  --nav-line:        rgba(255,255,255,.12);
  --nav-muted:       #93A0C0;
  /* Azul de destaque para texto pequeno sobre fundo claro: o #377DFF
     da marca só passa em contraste quando o texto é grande. */
  --blue-on-light:   #0F52C8;
  /* Altura da barra fixa. Os valores abaixo já batem com o layout real,
     então o JS só reescreve se o texto da tarja quebrar diferente. */
  --topbar-h:        138px;
}
@media (max-width:767px){ :root{ --topbar-h:116px } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:#333;
  font-family:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;line-height:1.2}
p{margin:0 0 .9rem}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.anchor{display:block;height:0;overflow:hidden;scroll-margin-top:calc(var(--topbar-h) + 20px)}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
.divider{width:82px;height:5px}
.divider--left{margin-right:auto}
.eyebrow{color:var(--blue-light);font-size:22px;font-weight:600;text-transform:uppercase}

.show-mobile{display:none}

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Inter","Inter Fallback",sans-serif;font-size:16px;font-weight:500;line-height:1;
  color:#fff;background:var(--orange);border-radius:4px;
  padding:20px 40px;text-align:center;
  transition:background-color .3s, transform .3s;
}
.btn:hover{background:var(--orange-hover)}
/* Branco sobre #FF6F28 dá 2,78:1 — abaixo dos 4,5:1 que a WCAG pede para
   texto normal e dos 3:1 para texto grande. O navy anterior dava 6,8:1.
   Para manter o branco e passar no critério, o laranja precisaria escurecer
   até algo como #C2410C (4,6:1). */
.btn--orange{background:var(--orange);color:var(--orange-ink)}
.btn--orange:hover{background:var(--orange-hover);color:var(--orange-ink)}
.btn--blue{background:var(--blue-surface)}
.btn--blue:hover{background:var(--blue-hover)}
.btn--sm{padding:20px 40px}
.btn--pill{border-radius:70px;padding:23px 60px 24px}
.btn--block{display:flex;width:100%;font-weight:700;padding:30px}
/* elementor-animation-grow */
.btn:hover{transform:scale(1.05)}
/* elementor-animation-float */
.footer__cta:hover{transform:translateY(-8px)}

/* ---------------------------------------------------------
   Headline animada (marcador SVG)
   --------------------------------------------------------- */
.headline{display:block;line-height:1.2}
.headline__plain{position:relative;z-index:1;vertical-align:bottom}
.headline__hl{display:inline-block;position:relative;overflow:visible;vertical-align:bottom}
.headline__dyn{position:relative;z-index:1;color:var(--dynamic,#377DFF)}
.headline__hl svg{
  position:absolute;top:50%;left:50%;
  width:calc(100% + 20px);height:calc(100% + 20px);
  transform:translate(-50%,-50%);overflow:visible;pointer-events:none;
}
.headline__hl svg path{
  stroke:var(--marker,#F77E23);stroke-width:9;fill:none;
  opacity:0;stroke-dasharray:0 1500;transition:.3s;
}
.headline.is-animated svg path{
  animation:hl-dash 1.2s forwards;animation-iteration-count:1;
}
.headline.is-hiding svg path{
  opacity:1;stroke-dasharray:1500 1500;animation:hl-hide .4s forwards;
}
@keyframes hl-dash{0%{stroke-dasharray:0 1500;opacity:1}100%{stroke-dasharray:1500 1500;opacity:1}}
@keyframes hl-hide{0%{opacity:1;stroke-dasharray:1500 1500}100%{opacity:0;filter:blur(10px)}}

/* Animações de entrada */
.anim{opacity:0}
.anim.is-in{opacity:1;animation-duration:2s;animation-fill-mode:both}
.anim--right.is-in{animation-name:fadeInRight}
.anim--up.is-in{animation-name:fadeInUp}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background-color:var(--navy-hero);
  background-image:url("../img/hero-bg.webp");
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  min-height:950px;
  padding-top:var(--topbar-h,137px);
  padding-bottom:80px;
  display:flex;flex-direction:column;
  /* O cartão "Crédito Aprovado" entra com translate de 100% da própria
     largura; durante os 2s da animação isso alarga o documento. `clip` corta
     só na horizontal e, ao contrário de `hidden`, não cria caixa de rolagem. */
  overflow-x:clip;
}

/* ---------------------------------------------------------
   Barra fixa: tarja + header
   --------------------------------------------------------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100}
/* Colapso por grid-template-rows: 1fr é exatamente a altura do conteúdo,
   qualquer que seja a quebra de linha, e 0fr fecha. Não depende de medição
   nenhuma — com max-height + valor medido em JS, um erro de medida cortava
   o texto da tarja. */
.announce{
  background:var(--blue-surface);
  /* A coluna precisa ser declarada: a implícita é `auto`, que dimensiona por
     max-content — o parágrafo não quebra e a barra estoura a viewport.
     100% é medida definida, não há como cair em max-content. */
  display:grid;grid-template-rows:1fr;grid-template-columns:100%;
  transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
/* O item do grid não pode carregar padding: com box-sizing:border-box a caixa
   nunca fica menor que o próprio padding, então a tarja fechava em 16px em vez
   de 0 e sobrava uma faixa transparente acima do header. O padding vai no <p>,
   dentro deste invólucro, que é quem recorta. */
.announce__row{overflow:hidden;min-width:0;min-height:0}
.announce p{
  margin:0;padding:10px 16px;
  text-align:center;text-wrap:balance;color:#fff;
  font-family:"Montserrat",sans-serif;font-size:12px;font-weight:600;
  line-height:1.4;letter-spacing:.01em;
}
.topbar.is-stuck .announce{grid-template-rows:0fr;opacity:0}

.site-header{
  width:100%;min-height:100px;display:flex;align-items:center;
  transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.topbar.is-stuck .site-header{
  background:rgba(4,10,43,.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 -1px 0 var(--nav-line), 0 20px 44px -30px rgba(0,0,0,.95);
}
.header-row{
  width:100%;max-width:1600px;margin:0 auto;padding:0 24px;
  display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0 40px;
}
.header-logo{width:11.074%;flex:0 0 auto}
.header-logo img{width:100%;height:auto}
.header-cta{padding:18px 34px}

/* ---------------------------------------------------------
   Navegação
   --------------------------------------------------------- */
.nav{position:relative;display:flex;align-items:center}
.nav-bar{position:relative;display:flex;align-items:center}
.nav-list{display:flex;align-items:center}
.nav-item{position:relative;padding:5px}
.nav-item--cta{display:none}
.nav-link{
  display:flex;align-items:center;gap:8px;
  padding:10px 5px;color:#fff;font-family:"Inter","Inter Fallback",sans-serif;font-size:18px;font-weight:500;
  line-height:1.4;background:none;border:0;cursor:pointer;transition:color .25s ease;
}
.nav-item:hover > .nav-link,
.nav-link:focus-visible{color:var(--blue)}

/* Indicador: mesmo traço de marcador usado nas headlines do site */
.nav-rail{
  position:absolute;left:0;bottom:-2px;width:0;height:12px;
  opacity:0;pointer-events:none;
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.nav-rail svg{width:100%;height:100%;display:block;overflow:visible}
.nav-rail path{fill:none;stroke:var(--orange-stroke);stroke-width:3;stroke-linecap:round}
.nav-bar.has-rail .nav-rail{opacity:1}

/* ---------------------------------------------------------
   Dropdown "Produtos" — caixa branca simples, igual à do site original
   --------------------------------------------------------- */
.nav-item--drop{position:relative}
.nav-item--drop.is-open > .nav-link{color:var(--blue)}
.dropdown{
  position:absolute;top:100%;left:5px;min-width:172px;
  background:#fff;padding:8px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:none;z-index:70;
}
.nav-item--drop.is-open .dropdown{display:block}
/* Ponte invisível sobre o vão entre o item e a caixa: sem ela o painel fecha
   quando o mouse atravessa os poucos pixels de folga. */
.dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dropdown a{
  display:block;padding:11px 24px;
  color:#333;font-family:"Inter","Inter Fallback",sans-serif;font-size:16px;font-weight:400;
  transition:background-color .2s ease, color .2s ease;
}
.dropdown a:hover,.dropdown a:focus-visible{background:#F2F2F2;color:var(--blue-on-light)}

/* 44x44 de área de toque; as barras ocupam 26px no centro. */
.nav-toggle{
  display:none;width:44px;height:44px;padding:9px 5px;flex:0 0 auto;
  flex-direction:column;justify-content:space-between;align-items:stretch;
}
.nav-toggle span{display:block;height:3px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(11.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg)}

/* Corpo do hero */
.hero-body{
  width:100%;max-width:var(--content);margin:90px auto 0;
  min-height:600px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px;
}
.hero-badge{margin:200px 0 0 250px;align-self:center;flex:0 1 auto;min-width:0;width:320px}
.hero-card{
  width:460px;flex:0 0 auto;min-height:600px;
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 40px;
  border:1px solid #FFFFFF99;border-radius:16px;
  background:#FAFDFFA6;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-card__title{
  font-family:"Inter","Inter Fallback",sans-serif;font-size:30px;font-weight:700;text-align:left;
  color:var(--navy);margin-bottom:10px;
}
.hero-card__title .headline__dyn{font-weight:700}
.hero-card__text{color:var(--navy);font-size:18px;font-weight:400;margin-bottom:40px}
.hero-card__cta{margin-bottom:12px}
.hero-card__note{color:var(--navy);font-size:14px;text-align:left}

/* =========================================================
   O QUE É SER INTELIGENTE
   ========================================================= */
.about{background:#F1F1F1;padding:80px 0;min-height:880px;display:flex;align-items:center}
.about__inner{
  width:100%;max-width:1117px;margin:0 auto;
  display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:0 60px;
}
/* flex:0 1 auto + min-width:0 no lugar de 0 0 auto: as duas colunas somam
   58% + 558px + 60px de gap, mais que os 1117px do container. Travadas em
   `0 0 auto` elas não encolhiam e a linha vazava para fora da viewport em
   qualquer tela entre 1025px e 1424px. */
.about__left{width:58%;flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:20px}
.about__right{width:558.141px;flex:0 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:20px}
.about__title{
  font-family:"Inter","Inter Fallback",sans-serif;font-size:40px;font-weight:700;text-align:left;
  color:var(--navy);margin-bottom:10px;
}
.about__title .headline__dyn{font-weight:700}
.about__title--mobile{display:none}
.about__text{color:var(--navy);font-size:21.8px;font-weight:400;text-align:left;padding-right:20px;margin-bottom:-18px}
/* No mobile essa linha cai para 18px em negrito, e aí o azul da marca
   deixa de passar em contraste sobre o cinza claro. */
.about__text strong,.about__text b{color:var(--blue-on-light)}
.about__text span[style]{color:inherit !important}
.about__text p{margin-bottom:.9rem}
.about__cta{align-self:flex-start}
.video{position:relative;width:100%;aspect-ratio:1.77777;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video--mobile{display:none}

/* Fachada: a capa é local e o player do YouTube só entra no clique. */
.video__facade{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;display:block;cursor:pointer;
}
.video__facade img{width:100%;height:100%;object-fit:cover}
.video__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;pointer-events:none;
}
.video__play svg{width:100%;height:100%;display:block}
.video__play-bg{fill:#212121;fill-opacity:.8;transition:fill .2s ease, fill-opacity .2s ease}
.video__play-tri{fill:#fff}
.video__facade:hover .video__play-bg,
.video__facade:focus-visible .video__play-bg{fill:#f00;fill-opacity:1}

/* =========================================================
   HISTÓRIAS REAIS (carrossel de casos)
   ========================================================= */
.cases{
  background:linear-gradient(180deg,#152F59 0%,#040A2B 100%);
  min-height:960px;padding:120px 0 90px;
  display:flex;flex-direction:column;align-items:center;
}
.cases__inner{width:100%;max-width:1210px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.cases__eyebrow{color:var(--blue-light);font-size:22px;font-weight:600;text-transform:uppercase;text-align:center}
.cases__inner .divider{margin:20px 0}
.cases__title{
  color:#fff;font-size:42px;font-weight:600;line-height:50px;text-align:center;padding:0 60px;margin-bottom:20px;
}
.carousel--cases{margin-top:40px;width:100%}
.case{display:flex;flex-direction:row;align-items:center;justify-content:space-around;gap:20px}
.case--between{justify-content:space-between}
.case--start{align-items:flex-start}
.case--end{align-items:flex-end}
.case__img{width:591px;flex:0 0 auto;border-radius:0}
.case__text{color:#fff;width:495px;max-width:495px;flex:0 0 auto;font-weight:400}
.case__text--16{font-size:16px}
.case__text--14{font-size:14px}

/* Carrossel genérico */
/* width/min-width explícitos: como item de flex com align-items diferente de
   stretch (o caso do bloco de depoimentos no mobile) a largura vira auto e o
   carrossel assume max-content — a soma de todos os slides. Isso estourava o
   documento para ~1900px e criava rolagem horizontal na página toda. */
.carousel{position:relative;width:100%;min-width:0;max-width:100%}
/* Largura automática, não 100%: a janela dos depoimentos recebe margem
   lateral no mobile e `100% + margem` estourava a seção em 14px. */
.carousel__viewport{overflow:hidden;width:auto}
.carousel__track{display:flex;transition:transform .5s ease;will-change:transform}
/* A largura do slide também está no CSS, e não só no JS: sem isso o primeiro
   paint mostra os slides na largura do conteúdo e o layout salta quando o
   script roda. Os valores acompanham os data-per-view do HTML. */
.carousel__slide{flex:0 0 auto;box-sizing:border-box;width:100%}
.carousel--testimonials .carousel__slide{width:33.3333%}
.carousel__arrow{
  position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:#fff;transition:color .3s;
}
.carousel__arrow:hover{color:var(--blue)}
.carousel--cases .carousel__arrow{top:auto;bottom:-56px}
.carousel--cases .carousel__arrow--prev{left:50%;transform:translateX(-50%)}
.carousel--cases .carousel__arrow--next{right:550px}
/* O ponto continua com 6px, mas a área de toque tem 24px — mínimo do
   critério de alvos de toque. */
/* min-height reserva a linha antes de o JS criar os pontos. */
.carousel__dots{display:flex;justify-content:center;flex-wrap:wrap;margin-top:16px;min-height:24px}
.carousel__dots button{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.carousel__dots button::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#c4c4c4;transition:background .3s, transform .3s;
}
.carousel__dots button:hover::before{background:#8f8f8f}
.carousel__dots button.is-active::before{background:#0d0d0d;transform:scale(1.15)}

/* =========================================================
   JORNADA DE CONTRATAÇÃO
   ========================================================= */
.journey{
  background-color:var(--navy-deep);
  background-image:url("../img/jornada-bg.webp");
  background-position:top center;background-repeat:no-repeat;
  min-height:600px;padding-top:30px;
  display:flex;flex-direction:column;align-items:center;
}
.journey__inner{
  width:100%;max-width:var(--content);margin:0 auto;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:20px;
}
.journey__arrow{width:23px}
.journey__title{
  align-self:center;font-family:"Inter","Inter Fallback",sans-serif;font-size:40px;font-weight:700;color:#fff;text-align:left;
}
.journey__title .headline__dyn{color:#fff;font-weight:700}
.journey-band{display:flex;flex-direction:column;justify-content:flex-end;min-height:400px}
.journey-band--2{background:var(--indigo)}
.journey-band--3{background:var(--blue-surface)}

.step{
  width:100%;max-width:var(--content);margin:0 auto;
  display:flex;flex-direction:row;justify-content:center;gap:0 60px;
}
.step--2{flex-direction:row-reverse}
.step__content{width:260px;flex:0 0 auto;display:flex;flex-direction:column;gap:20px}
.step--2 .step__content{align-items:flex-start}
.step__content--narrow{width:180px}
.step__title{
  align-self:center;font-family:"Inter","Inter Fallback",sans-serif;font-size:28px;font-weight:700;line-height:40px;
  color:#fff;text-align:left;margin-top:60px;
}
.step--2 .step__title{align-self:center}
.step__title .headline__dyn{color:#fff;font-weight:700}
.step__text{color:#fff;font-size:20px;font-weight:400;padding-right:20px}
.step--3 .step__text{padding-right:0}
/* Número, texto e ilustração somam mais que os 1150px do container em algumas
   etapas; deixar encolher evita o vazamento entre 1025px e 1150px. */
.step__num{align-self:flex-end;flex:0 1 auto;min-width:0}
.step--2 .step__num,.step--3 .step__num{margin-bottom:-10px;position:relative;z-index:1}
.step__art{align-self:flex-end;flex:0 1 auto;min-width:0;position:relative;z-index:1}
.step--1 .step__art{margin-bottom:-14px}

/* =========================================================
   VANTAGENS
   ========================================================= */
.advantages{
  background-image:url("../img/vantagens-bg.webp");
  background-position:top center;
  min-height:900px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.advantages__card{
  width:100%;max-width:1440px;margin:0 auto;
  display:flex;flex-direction:row;justify-content:space-between;
  background:var(--navy-deep);border-radius:20px;box-shadow:0 10px 30px 0 rgba(0,0,0,.29);
  padding:80px;gap:20px;
}
/* Mesmo caso do bloco "about": 657 + 540 + 20 de gap + 160 de padding exigem
   1377px. Abaixo disso as colunas precisam poder encolher. */
.advantages__chart{width:657px;flex:0 1 auto;min-width:0}
.advantages__content{width:540px;flex:0 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
.advantages__title{color:#fff;font-size:36px;font-weight:600;line-height:44px}
.checklist{margin-top:20px;display:flex;flex-direction:column}
.checklist li{
  display:flex;align-items:center;gap:12px;
  color:var(--text-secondary);font-size:18px;font-weight:400;
  padding-bottom:6px;
}
.checklist li + li{margin-top:6px}
.checklist li img{width:32px;height:32px;flex:0 0 auto}

/* =========================================================
   COMPARATIVO
   ========================================================= */
.compare{
  background-color:var(--navy);
  background-image:url("../img/comparativo-bg.webp");
  background-position:top center;background-repeat:no-repeat;
  min-height:800px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.compare picture{display:contents}
.compare__table{border-radius:20px;box-shadow:0 4px 30px 0 rgba(0,0,0,.31);max-width:100%}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
/* Padding lateral = espaço para as setas, que ficam em -30px fora da caixa.
   Sem ele as setas passavam da viewport em telas abaixo de ~1230px. */
.testimonials{background:#fff;padding:40px 40px 80px;display:flex;flex-direction:column}
.testimonials__inner{width:100%;max-width:var(--content);margin:0 auto;display:flex;flex-direction:column;gap:20px}
.testimonials__title{
  width:898px;max-width:100%;align-self:flex-start;
  font-family:"Inter","Inter Fallback",sans-serif;font-size:60px;font-weight:700;line-height:70px;
  color:#000;text-align:left;margin-bottom:40px;
}
.testimonials__title .headline__dyn{color:#000;font-weight:700}
.carousel--testimonials .carousel__slide{padding:0 5px}
.carousel--testimonials .carousel__arrow{top:50%;transform:translateY(-50%);color:#666}
.carousel--testimonials .carousel__arrow--prev{left:-30px}
.carousel--testimonials .carousel__arrow--next{right:-30px}
.tst{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px}
.tst__footer{display:flex;align-items:center;gap:12px;padding:0 20px}
.tst__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tst__meta{display:flex;flex-direction:column;line-height:1.4}
.tst__meta b{font-size:14px;font-weight:600;color:#54595F}
/* #7A7A7A dava 4,29:1 a 13px sobre branco. */
.tst__meta i{font-size:13px;font-style:normal;color:#727272}

/* Player de áudio */
/* min-height = altura do player montado (20px de controles + 24 de padding).
   O <div class="player"> chega vazio no HTML e o JS o preenche; sem a reserva
   o bloco cresce 20px no primeiro paint. */
.player{
  width:100%;min-height:44px;display:flex;align-items:center;gap:10px;
  background:#F5F5F5;border-radius:10px;padding:12px 14px;
}
.player button{display:flex;align-items:center;justify-content:center;color:#4F5B5F;transition:color .2s}
.player button:hover{color:var(--blue)}
.player__play{width:18px;height:18px;flex:0 0 auto}
.player__seek{flex:1 1 auto;min-width:40px;height:20px;display:flex;align-items:center;cursor:pointer}
.player__rail{position:relative;width:100%;height:5px;border-radius:3px;background:#c9cbcd}
.player__fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:var(--blue)}
.player__knob{
  position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
  background:#fff;border:1px solid #c9cbcd;transform:translate(-50%,-50%);box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.player__time{font-size:12px;font-style:italic;color:#4F5B5F;flex:0 0 auto;min-width:34px;text-align:center}
.player__mute{width:16px;height:16px;flex:0 0 auto}
.player__volume{width:52px;height:20px;display:flex;align-items:center;cursor:pointer;flex:0 0 auto}
.player__settings{flex:0 0 auto;position:relative;display:flex;align-items:center}
.player__gear{width:16px;height:16px}
.player__menu{
  position:absolute;bottom:26px;right:0;background:#fff;border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);padding:6px 0;display:none;z-index:10;min-width:96px;
}
.player__menu.is-open{display:block}
.player__menu button{display:block;width:100%;text-align:left;padding:6px 14px;font-size:13px;color:#333}
.player__menu button:hover{background:#f1f1f1}
.player__menu button.is-active{font-weight:700;color:var(--blue)}

/* =========================================================
   PLANOS
   ========================================================= */
.plans{
  background-color:var(--navy);
  background-image:url("../img/planos-bg.webp");
  background-position:top center;background-repeat:no-repeat;
  min-height:900px;padding:300px 0 200px;
  display:flex;flex-direction:column;
}
.plans__inner{
  width:100%;max-width:1210px;margin:0 auto;
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:flex-end;align-items:flex-start;align-content:center;gap:32px 40px;
}
.plans__title{width:476px;max-width:100%;flex:0 0 auto;color:#fff;font-size:42px;font-weight:700;line-height:50px;text-align:left}
.plan-card{
  width:280px;flex:0 0 auto;background:#F4F8FF;border-radius:12px;padding:32px;
  transition:background-color .3s;text-align:left;
}
.plan-card:hover{background:#DEE9FD}
.plan-card img{width:80px;height:auto;margin-bottom:14px}
.plan-card h3{color:#060C2D;font-size:24px;font-weight:600;line-height:1.3}

/* =========================================================
   DEPÓSITO
   ========================================================= */
.deposit{
  background-image:url("../img/deposito-bg.webp");
  background-position:bottom center;background-repeat:no-repeat;background-size:contain;
  min-height:501px;display:flex;
}
.deposit__inner{
  width:100%;max-width:1210px;margin:0 auto;
  display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;
}
.deposit__content{width:637px;flex:0 0 auto;display:flex;flex-direction:column;gap:40px}
.deposit__title{color:#000033;font-size:32px;font-weight:500;line-height:40px}
.deposit__cta{width:386px;max-width:100%;align-self:flex-start;padding:24px 60px}

/* =========================================================
   BRASIL
   ========================================================= */
.brazil{
  background-color:var(--navy-soft);
  background-image:url("../img/brasil-bg.webp");
  background-position:top center;
  min-height:780px;display:flex;
}
.brazil__inner{
  width:100%;max-width:1210px;margin:0 auto;
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
}
.brazil__content{width:600px;flex:0 1 auto;min-width:0;display:flex;flex-direction:column}
.brazil__title{color:#fff;font-size:70px;font-weight:700;line-height:80px;padding-right:40px}
.brazil__map--mobile{display:none}
/* 600 + 532 = 1132px fixos numa linha que precisa caber em telas de 1025px. */
.brazil__map--desktop{width:532px;flex:0 1 auto;min-width:0}
.stats{
  display:flex;flex-direction:row;justify-content:space-between;gap:8px;
  border-top:1px solid #FFFFFF12;margin-top:20px;padding-top:20px;
}
.stat{width:200px;flex:0 0 auto;display:flex;flex-direction:column;gap:8px;border-right:1px solid #FFFFFF12;padding-right:20px}
.stat--last{width:180px;border-right:0;justify-content:space-between}
.stat__pre{color:#fff;font-size:16px;font-weight:400;text-align:right}
.stat__num{
  align-self:flex-end;color:var(--blue-counter);
  font-family:"Inter","Inter Fallback",sans-serif;font-size:50px;font-weight:600;line-height:1;
}
.stat__pioneer{align-self:flex-end;color:var(--blue-counter);font-size:40px;font-weight:700;text-align:right;text-shadow:0 0 10px rgba(0,0,0,.3)}
.stat__label{color:#fff;font-size:16px;font-weight:400;line-height:24px;text-align:right}
.stat__label--pad{padding-left:20px}

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  position:relative;
  background-color:var(--navy-soft);
  background-image:url("../img/faq-bg.webp");
  background-position:top center;background-size:auto;
  min-height:530px;display:flex;
}
.faq__anchor{position:absolute;top:-250px}
.faq__inner{
  width:100%;max-width:1210px;margin:0 auto;
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:flex-start;align-items:flex-start;align-content:flex-start;gap:40px 20px;
}
.faq__title{width:100%;color:#fff;font-size:36px;font-weight:600;line-height:44px;text-align:center}
.accordion{width:590px;max-width:100%;flex:0 0 auto;display:flex;flex-direction:column;gap:12px}
.acc-item{border-radius:4px;overflow:hidden}
.acc-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#FFFFFF0A;border-radius:4px;padding:18px;
  color:#fff;font-family:"Inter","Inter Fallback",sans-serif;font-size:14px;font-weight:400;
}
.acc-item summary::-webkit-details-marker{display:none}
.acc-icon{
  width:15px;height:15px;flex:0 0 auto;position:relative;transition:transform .4s;
}
.acc-icon::before{
  content:"";position:absolute;left:1px;top:4px;width:11px;height:11px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
  transform-origin:70% 70%;
}
.acc-item[open] .acc-icon{transform:rotate(180deg)}
.acc-body{padding:18px;color:#FFFFFFB8;font-family:"Inter","Inter Fallback",sans-serif;font-weight:400;font-size:16px}

/* =========================================================
   GARANTIA
   ========================================================= */
.guarantee{
  background-color:var(--navy-soft);
  background-image:url("../img/garantia-bg.webp");
  background-position:top center;
  min-height:700px;display:flex;align-items:center;justify-content:center;
}
.guarantee__inner{
  width:100%;max-width:1085px;margin:0 auto;
  display:flex;flex-direction:row;align-items:center;gap:130px;padding-bottom:40px;
}
.guarantee__seal{width:352px;flex:0 0 auto}
.guarantee__content{flex:1 1 auto}
.guarantee__title{color:#fff;font-family:"Inter","Inter Fallback",sans-serif;font-size:70px;font-weight:600;margin-bottom:20px}
.guarantee__desc{color:#fff;font-family:"Inter","Inter Fallback",sans-serif;font-size:20px;font-weight:400}

/* =========================================================
   INSTAGRAM
   ========================================================= */
/* A mão sangra de propósito para fora pela margem negativa. `overflow-x:clip`
   contém só o sangramento lateral, que alargaria o documento; `overflow:hidden`
   cortaria também em cima e embaixo, decepando a mão. */
.social{background:#fff;min-height:700px;display:flex;align-items:center;justify-content:center;overflow-x:clip}
.social__inner{
  width:100%;max-width:1220px;margin:0 auto;min-height:770px;
  display:flex;flex-direction:row;align-items:center;
}
.social__content{width:540px;flex:0 0 auto;display:flex;flex-direction:column}
.social__logo{width:240px;margin-bottom:40px}
.social__title{width:649px;max-width:100%;align-self:center;color:var(--navy);font-size:42px;font-weight:700;line-height:54px;margin-bottom:10px}
.social__text{color:var(--navy-deep);font-size:18px;font-weight:400;margin-bottom:20px}
.social__cta{width:330px;max-width:100%;font-weight:700;padding:24px 60px}
.social__hand{width:700px;flex:0 0 auto;margin:-80px -140px 0 0}

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer{
  background-image:url("../img/footer-bg.webp");
  background-position:top center;background-size:cover;
  min-height:408px;padding-top:120px;
  display:flex;flex-direction:column;
}
.footer__inner{width:100%;max-width:var(--content);margin:0 auto;display:flex;flex-direction:column;gap:20px}
.footer__top{
  display:flex;flex-direction:row;justify-content:space-between;
  border-bottom:1px solid #42424217;padding-bottom:32px;
}
.footer__brand{width:400px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.footer__logo{width:182px;margin-bottom:40px}
/* #6B6B6B original reprovava contraste sobre o gradiente claro do rodapé. */
.footer__follow{color:#5A5A5A;font-size:16px;font-weight:400;margin-bottom:10px}
.footer__social{display:flex;gap:12px;padding-bottom:10px}
.footer__social-link{display:block;border-radius:50%}
.footer__social-link img{width:38px;height:38px}
.footer__social-link--off{cursor:default}
.footer__badges{display:flex;flex-direction:row;align-items:center;gap:20px}
/* <a> é inline por padrão e a caixa clicável saía menor que a imagem;
   flex + min-height garantem o alvo de toque. */
.footer__badge{
  flex:0 0 auto;display:flex;align-items:center;min-height:44px;
  transition:transform .3s;
}
.footer__badge img{width:100%;height:auto}
.footer__badge:hover{transform:scale(1.05)}
.footer__badge--ra{max-width:160px}
.footer__info{width:300px;flex:0 0 auto;display:flex;flex-direction:column;gap:20px}
.footer__line{color:var(--navy);font-size:15px;font-weight:400;line-height:21px}
.footer__cta{width:386px;max-width:100%;align-self:flex-start;padding:24px}
/* #90908F (padrão do Elementor) dava 2,6:1 sobre o gradiente claro. */
.footer__legal{color:#5D6480;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:500}
.footer__bcb{width:150px}
.footer__bottom{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  border-bottom:1px solid #42424217;margin-top:12px;padding-bottom:32px;
}
.footer__copy{color:var(--navy);font-size:16px;font-weight:400;line-height:28px}
.footer__totop{transition:transform .3s}
.footer__totop:hover{transform:translateY(-4px)}

/* =========================================================
   TABLET  (<=1024px)
   ========================================================= */
@media (max-width:1024px){
  :root{--content:1024px}

  /* O kit do site original força cover / top center / no-repeat em todos
     os breakpoints; aqui só troca a arte do fundo. */
  .hero{
    min-height:760px;padding:var(--topbar-h) 20px 0;
    background-image:url("../img/hero-bg-tablet.webp");
  }
  .header-row{justify-content:space-between;align-items:center;gap:0 24px}
  .header-logo{width:15%;max-width:none}
  .nav-link{font-size:16px}
  .header-cta{padding:16px 26px;font-size:15px}
  .hero-body{padding:0}
  .hero-badge{margin:0}
  .hero-card{width:400px;min-height:329px;padding:30px}
  .hero-card__title{font-size:22px}
  .hero-card__text{font-size:16px;margin-bottom:0}

  .about{flex-direction:column;justify-content:center;align-items:center;padding:0 20px}
  .about__inner{flex-direction:column;justify-content:center;align-items:center}
  .about__left{display:none}
  .about__right{width:700px;max-width:100%;align-items:center}
  .about__title{text-align:center;font-size:35px}
  .about__title--mobile{display:block}
  .about__text{font-size:18px;text-align:left}
  .video--mobile{display:block;width:100%}
  .about__cta{align-self:center;margin-bottom:20px}

  .cases{min-height:0;justify-content:center;padding:40px 20px 0}
  .cases__title{font-size:30px;line-height:1.2em}
  .case{flex-direction:column}
  .case--start,.case--end{align-items:center}
  .case__text{width:77%;max-width:77%}
  .carousel--cases .carousel__arrow--next{right:20%}

  .journey{min-height:380px;padding:0 40px;gap:0}
  .journey__title{font-size:30px;margin-bottom:-40px}
  .step{flex-direction:row;align-items:center;gap:20px;padding:0}
  .step--2{flex-direction:row-reverse}
  .step__num{width:102px}
  .step--2 .step__num,.step--3 .step__num{width:130px}
  .step__title{font-size:25px;line-height:1.3em;margin-top:0}
  .step--2 .step__title{font-size:30px;align-self:flex-start}
  .step--3 .step__title{font-size:30px}
  .step__text{font-size:16px}
  .step--1 .step__art{width:270px;margin-bottom:0}
  .step--2 .step__art{width:270px}
  .step--3 .step__art{width:229px}
  .journey-band--2{min-height:151px}
  .journey-band--3{min-height:195px}
  .step--2 .step__content{width:216.703px}

  .advantages{min-height:0;padding:0}
  .advantages__card{flex-direction:column;padding:40px 20px}
  .advantages__chart{width:100%;padding-bottom:20px}
  .advantages__content{width:100%;align-items:center}
  .advantages__title{text-align:center}
  .checklist{width:582.719px;max-width:100%}

  .compare{min-height:0;padding:20px}
  .compare__table{width:100%}

  .testimonials{padding:0 40px}
  .carousel--testimonials .carousel__slide{width:50%}   /* data-per-view-tablet */
  .testimonials__title{text-align:center;font-size:40px;line-height:1em;align-self:center}
  .carousel--testimonials .carousel__arrow--prev{left:-10px}
  .carousel--testimonials .carousel__arrow--next{right:-10px}

  .plans{min-height:0;padding:0 0 30px}
  .plans__inner{flex-direction:row;justify-content:center}
  .plans__title{text-align:center;width:29%;font-size:27px;line-height:1.3em;margin-top:300px;align-self:center}
  .plan-card{width:26.846%;margin-top:300px;text-align:center}
  .plan-card:nth-of-type(n+3){margin-top:0}
  .plan-card img{margin-left:auto;margin-right:auto;width:61px}
  .plan-card h3{font-size:16px}

  .deposit{
    min-height:384px;justify-content:center;
    background-position:-285px 41px;background-repeat:no-repeat;background-size:1300px auto;
  }
  .deposit__content{gap:21px;padding-left:250px}
  .deposit__title{text-align:left;font-size:25px;line-height:1.2em}
  .deposit__cta{width:396px;align-self:center;font-size:15px}

  .brazil{min-height:0;padding:40px 0 20px}
  .brazil__inner{flex-direction:column;justify-content:center}
  .brazil__content{align-items:center;width:100%;max-width:600px}
  .brazil__title{text-align:center;font-size:53px;line-height:1em}
  .brazil__map--desktop{display:none}
  .brazil__map--mobile{display:block;width:216px;margin-top:20px}

  .faq{min-height:501px;align-items:center}
  .faq__inner{justify-content:center;align-items:center;gap:0}
  .accordion{margin-top:30px}

  .guarantee{min-height:458px;padding:0 40px}
  .guarantee__inner{gap:0;flex-direction:column;text-align:center}
  .guarantee__seal{width:183px}
  .guarantee__title{font-size:40px;margin-bottom:0}
  .guarantee__desc{font-size:16px}

  .social{display:none}

  .footer{padding:40px 40px 0}
  .footer__top{flex-direction:column;gap:30px}
  .footer__brand,.footer__info{width:100%}
}

/* =========================================================
   MOBILE  (<=767px)
   ========================================================= */
@media (max-width:767px){
  :root{--content:340px}
  .hide-mobile{display:none !important}
  .show-mobile{display:block}

  /* `100% auto` no lugar de `cover`: a arte tem 760x950 e, com cover num hero
     alto, era ampliada até o rosto ocupar a tela inteira — era o rosto que
     subia até o selo, não o selo que descia. Encaixada na largura, aparece a
     figura inteira e o navy do fundo preenche o resto. */
  /* A borda de baixo da foto é um corte reto contra o navy. O gradiente é uma
     segunda camada com exatamente a altura da imagem — 125vw, que é a largura
     vezes 950/760 — então o esmaecido termina junto com ela. rgba(2,8,43,0) e
     não `transparent`: transparent interpola por preto e deixa uma faixa
     acinzentada no meio do gradiente. */
  .hero{
    min-height:0;padding:var(--topbar-h) 0 40px;
    background-image:
      linear-gradient(to bottom, rgba(2,8,43,0) 55%, var(--navy-hero) 97%),
      url("../img/hero-bg-mobile.webp");
    background-size:100% 125vw, 100% auto;
  }
  .announce p{font-size:11px;padding:8px 14px;line-height:1.35}

  .site-header{min-height:60px}
  .header-row{justify-content:space-between;align-items:center;gap:0 12px;padding:0 16px}
  /* clamp em vez de largura fixa: a logo acompanha a viewport sem
     empurrar o hambúrguer para fora em telas de 320px. */
  .header-logo{width:clamp(120px,42vw,168px);max-width:none}

  .nav{position:static;flex:0 0 auto}
  .nav-toggle{display:flex;position:relative;z-index:2;margin-right:-5px}
  .nav-bar{position:static}
  .nav-rail{display:none}

  /* Painel mobile: folha de vidro escuro em tela cheia */
  .nav-list{
    position:fixed;top:var(--nav-sheet-top,var(--topbar-h));left:0;right:0;
    max-height:calc(100vh - var(--nav-sheet-top,var(--topbar-h)));overflow-y:auto;
    background:rgba(6,13,47,.96);
    -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
    border-top:1px solid var(--nav-line);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
    flex-direction:column;align-items:stretch;gap:2px;padding:12px 20px 22px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    z-index:80;
  }
  .nav-list.is-open{opacity:1;visibility:visible;transform:none}
  .nav-item{padding:0;border-bottom:1px solid var(--nav-line)}
  .nav-item:last-child{border-bottom:0}
  .nav-link{width:100%;justify-content:space-between;padding:16px 2px;font-size:16px}

  /* Na folha mobile o dropdown não flutua: vira uma sublista recuada, no
     mesmo vidro escuro do painel. */
  .dropdown{
    position:static;min-width:0;background:none;box-shadow:none;
    padding:0 0 12px;
  }
  .dropdown::before{display:none}
  .dropdown a{
    padding:12px 2px 12px 16px;color:var(--nav-muted);font-size:15px;
    border-left:2px solid var(--nav-line);
  }
  .dropdown a:hover,.dropdown a:focus-visible{background:none;color:#fff}

  .nav-item--cta{display:block;padding-top:16px;border-bottom:0}
  .nav-item--cta .btn{font-size:15px;padding:18px}

  /* Selo e cartão descem juntos: a margem do topo é o espaço que a foto ocupa. */
  .hero-body{
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;margin-top:150px;min-height:0;padding:0 20px;
  }
  .hero-badge{width:70%;max-width:250px;margin:0 0 10px 50px;align-self:flex-start}
  .hero-card{width:100%;min-height:0;padding:32px 20px;margin:0}
  .hero-card__title{text-align:center;font-size:1.3em}
  .hero-card__text{text-align:center;font-size:16px;margin:10px 0 20px}
  .hero-card__cta{padding:30px 0}
  .hero-card__note{text-align:center;font-size:12px}

  .about{padding:60px 20px;min-height:0}
  .about__inner{max-width:100%}
  .about__right{width:100%;margin-bottom:20px}
  .about__title{text-align:center;font-size:26px;margin-bottom:0}
  .about__text{font-size:18px;padding-right:20px}
  .about__cta{align-self:stretch;padding:24px}

  .cases{display:none}

  .journey{min-height:0;padding:30px 20px 0;gap:28px}
  .journey__inner{max-width:100%;gap:24px;min-height:0}
  .journey__title{text-align:center;font-size:28px;margin-bottom:0}

  /* Três colunas somam ~470px e não cabem em 320px. No mobile o número fica
     ao lado do texto e a ilustração desce para a própria linha.

     Grid em vez de flex-wrap: com wrap a quebra dependia da soma das larguras,
     e como o texto entra com flex-basis:0 ele conta como zero — a linha virava
     "número + ilustração" e o texto era espremido em 20px. Quebrava ou não
     conforme a proporção do SVG do número. Com áreas de grid explícitas a
     ilustração está sempre na segunda linha, em qualquer largura. */
  .step{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    max-width:100%;padding:0;gap:0 14px;align-items:center;
  }

  /* Alturas iguais em vez de larguras iguais: os SVGs 1, 2 e 3 têm
     proporções bem diferentes (145x292, 229x296, 240x299). */
  /* Número sempre à esquerda: é uma sequência numerada, alinhar todos
     do mesmo lado faz a leitura de lista funcionar. */
  .step__num,
  .step--2 .step__num,
  .step--3 .step__num{
    grid-column:1;grid-row:1;
    height:84px;width:auto;max-width:84px;
    align-self:center;margin:0;
  }
  .step__content,
  .step__content--narrow,
  .step--2 .step__content{
    grid-column:2;grid-row:1;width:auto;min-width:0;
    align-items:flex-start;justify-content:center;gap:6px;
  }
  .step__title,
  .step--2 .step__title,
  .step--3 .step__title{
    align-self:flex-start;font-size:19px;line-height:1.25;margin-top:0;
  }
  .step__text{font-size:15px;padding-right:0;width:100%}
  .step__art,
  .step--1 .step__art,
  .step--2 .step__art,
  .step--3 .step__art{
    grid-column:1 / -1;grid-row:2;
    width:100%;max-width:230px;
    justify-self:center;margin:18px auto 0;
  }
  .journey-band--2,
  .journey-band--3{min-height:0;justify-content:flex-start;padding:28px 20px 0}

  .advantages{padding:0 20px}
  .advantages__card{flex-direction:column-reverse;padding:40px 20px}
  .advantages__content{margin-bottom:20px}
  .advantages__title{font-size:22px;line-height:1.3em;text-align:center}
  .eyebrow,.cases__eyebrow{font-size:14px}
  .checklist li{font-size:14px;padding-bottom:2px}
  .checklist li + li{margin-top:2px}
  .checklist li img{width:30px;height:30px}

  .compare{min-height:368px;padding:20px 20px 40px}

  .testimonials{min-height:593px;padding:40px 20px 20px;align-items:center}
  .testimonials__inner{max-width:100%;align-items:center}
  .testimonials__title{text-align:center;font-size:20px;line-height:1.3em;width:100%;margin-bottom:20px}
  /* As setas ficavam por cima do cartão. Recuar só a janela abre as
     calhas laterais para elas; os pontos seguem usando a largura toda. */
  .carousel--testimonials .carousel__slide{padding:0;width:100%}   /* data-per-view-mobile */
  .carousel--testimonials .carousel__viewport{margin:0 34px}
  .carousel--testimonials .carousel__arrow--prev{left:0}
  .carousel--testimonials .carousel__arrow--next{right:0}

  .plans{
    min-height:651px;padding:20px 20px 60px;
    background-image:url("../img/planos-bg-mobile.svg");
  }
  .plans__inner{max-width:340px;flex-direction:column;justify-content:center;align-items:center}
  .plans__title{width:320px;max-width:100%;text-align:center;font-size:22px;line-height:1.4em;margin-top:0}
  .plan-card{width:75%;margin-top:0}
  .plan-card img{width:62px}

  /* A arte tem 1000x749 e com `background-size:auto` era pintada em tamanho
     natural — quase o triplo de uma tela de 375px, o que jogava o desenho por
     cima do título. `contain` a encaixa na largura da seção. */
  .deposit{
    min-height:563px;padding:20px 20px 0;
    background-image:url("../img/deposito-bg-mobile.webp");
    background-position:bottom center;background-repeat:no-repeat;background-size:contain;
  }
  .deposit__inner{flex-direction:column;max-width:340px}
  /* Encaixada na largura, a arte fica com 74,9% dela de altura; o recuo
     inferior acompanha essa proporção em vez de um valor fixo de 300px. */
  .deposit__content{width:100%;gap:20px;padding:0 0 calc(75vw + 24px)}
  .deposit__title{text-align:center;font-size:20px;line-height:1.2em}
  .deposit__cta{padding:24px;width:100%}

  /* O original baixava um SVG de 3,2 MB aqui e o renderizava com
     background-size:1px auto — ou seja, invisível. Removido. */
  .brazil{min-height:0;padding:40px 20px 20px}
  .brazil__inner{max-width:340px}
  .brazil__content{align-items:center}
  .eyebrow{text-align:center}
  .brazil__title{text-align:center;font-size:33px;line-height:1.4em;padding-right:0}
  .stats{flex-direction:column}
  .stat{width:100%;border-right:0;border-bottom:1px solid #FFFFFF12;margin-bottom:20px;padding:0 0 20px}
  .stat--last{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .stat__pre,.stat__label{text-align:center}
  .stat__label--pad{padding-left:0}
  .stat__num{align-self:center;font-size:28px}
  .stat .stat__num[data-suffix]{font-size:39px}
  .stat__pioneer{align-self:center;text-align:center;font-size:28px}

  .faq{padding:60px 20px 80px;background-size:0 auto;background-position:top left}
  .faq__inner{max-width:340px;gap:20px}
  .faq__title{font-size:26px}
  .accordion{margin-top:0}
  .acc-body{font-size:14px}

  .guarantee{
    min-height:597px;padding:20px 20px 0;
    background-image:url("../img/planos-bg-mobile.svg");
    background-position:top center;background-repeat:no-repeat;
  }
  .guarantee__inner{max-width:312px;flex-direction:column;gap:40px;padding-bottom:0}
  .guarantee__seal{width:260px}
  .guarantee__title{font-size:28px}
  .guarantee__desc{font-size:14px}

  .footer{padding:60px 20px 20px}
  .footer__inner{max-width:100%;align-items:center}
  /* width:100% explícito: como itens de flex sob `align-items:center` estas
     faixas eram dimensionadas por max-content e ficavam mais estreitas que o
     texto legal, que é largo o bastante para ocupar a linha inteira. */
  .footer__top,
  .footer__bottom{align-items:center;width:100%}
  .footer__brand{width:100%;justify-content:center;align-items:center}
  .footer__logo{margin:0 auto 20px;width:200px}
  .footer__follow{text-align:center;margin:25px 0 10px}
  .footer__social{justify-content:center}
  .footer__social-link img{width:29px;height:29px}
  .footer__badges{justify-content:center;gap:16px}
  .footer__badge{width:35%}
  .footer__badge--ra{max-width:120px}
  .footer__info{width:100%;align-items:center}
  /* Sem recuo próprio: texto, botão, linha divisória e texto legal passam a
     dividir as mesmas bordas — as da caixa do rodapé. O padding de 20px aqui
     deixava só este bloco deslocado para dentro. */
  .footer__line{font-size:14px;line-height:1.5em;padding:0;width:100%}
  /* align-self:stretch anula o flex-start da regra base, que prendia o botão
     à esquerda e deixava 40px vagos só de um lado. */
  .footer__cta{width:100%;margin:0;align-self:stretch}
  .footer__bottom{flex-direction:column;justify-content:center;align-items:center;gap:20px}
  .footer__copy{text-align:center;font-size:14px;line-height:1.3em}
  .footer__legal{font-size:12px}
}