/* =========================================================================
   BIGODE LED — LP V2
   Tradução literal do Figma  ·  V05niM7K8DSFsfOrs3mPdv
   Desktop  = frame 170:2 (1440)   ·   Mobile = frame 171:2 (480)
   Seção 01 — Header (170:545 / 171:530) + Hero (170:355 / 171:468)
   ========================================================================= */

:root{
  /* --- superfícies --- */
  --c-bg:            #04070D;
  --c-led-screen:    #03060C;
  --c-tab-bg:        #08111F;
  --c-tab-line:      #17385C;
  --c-line:          rgba(90,140,220,.20);

  /* --- texto --- */
  --c-white:         #FFFFFF;
  --c-muted:         #93A2B8;
  --c-dim:           #5E6E85;
  --c-stat-label:    #7688A2;

  /* --- jornadas --- */
  --c-anunciante:       #1272F5;
  --c-anunciante-light: #4FA3FF;
  --c-investidor:       #7657FF;
  --c-investidor-light: #8E77FF;
  --c-imovel:           #16CFE0;
  --c-imovel-light:     #35D9E7;

  --c-online:        #3ADB7E;
  --c-mesh:          rgba(80,140,230,.16);

  /* --- tipografia --- */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:    'Archivo', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  /* --- grid --- */
  --container:  1180px;
  --gutter:     24px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 66px; }

body{
  margin: 0;
  /* piso de retração: abaixo de 320 aparece rolagem horizontal em vez de a
     interface colapsar e os textos se sobreporem */
  min-width: 320px;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--f-body);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--c-anunciante-light); outline-offset: 3px; }

.u-sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =========================================================================
   HEADER — Figma 170:545
   altura 65,832 = 38,832 (link) + 13 + 13 + 1 (borda)
   ========================================================================= */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(4,7,13,.84);
  /* a cor translúcida do Figma deixava o texto passar legível por baixo na
     rolagem; o blur resolve sem alterar a cor em repouso */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.header__inner{
  max-width: var(--container);
  margin-inline: auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* marca — container 150 × 32,234, logo 150 × 22,34 deslocado 5px */
.header__brand{
  position: relative;
  flex: none;
  width: 150px;
  height: 32.234px;
}
.header__logo{
  position: absolute;
  top: 5px;
  left: 0;
  width: 150px;
  height: 22.34px;
  object-fit: contain;
}

.header__nav{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__link{
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13.44px;
  line-height: 20.832px;
  letter-spacing: 1.7472px;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 9px 13px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.header__link:hover{ color: var(--c-white); }

.header__link--cta{
  background: var(--c-anunciante);
  padding-right: calc(13px - 1.7472px); /* desconta o letter-spacing final */
}
.header__link--cta:hover{ background: #2a83ff; color: var(--c-white); }

/* botão de menu — só mobile (Figma 171:541) */
.header__burger{
  display: none;
  margin-left: auto;
  flex: none;
  width: 41px;
  height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.header__burger-bar{
  width: 17px;
  height: 2px;
  border-radius: 1px;
  background: rgba(232,240,255,.78);
}
.header__burger-bar:nth-child(2){ background: #E8F0FF; }

/* =========================================================================
   HERO — Figma 170:355 (desktop) · 171:468 (mobile)
   ========================================================================= */
.hero{
  position: relative;
  min-height: 651.578px;
  padding-top: 142px;
  overflow: hidden;
}

/* malha de pontos — 170:356 (rgba(80,140,230,.16), passo 14px) */
.hero__mesh{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--c-mesh) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
}

/* foto — 333:2  ·  metade direita, opacidade 78% */
.hero__photo{
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  opacity: .78;
  pointer-events: none;
}
.hero__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #000 12.813%, rgba(0,0,0,0) 100%);
}
.hero__photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}
.hero__photo-img--mobile{ display: none; }

/* vinheta de leitura — 333:3 */
.hero__vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
              rgba(1,3,6,.99) 0%,
              rgba(1,3,6,.72) 53%,
              rgba(1,3,6,.14) 100%);
}

/* grid — 170:357 : 552,828 + 48 + 531,172 = 1132 */
.hero__inner{
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 552.828fr) minmax(0, 531.172fr);
  gap: 48px;
  align-items: center;
}

/* ---------- coluna esquerda — 170:358 (h 433,578) ---------- */
/* flex-column reproduz o Auto Layout do Figma e impede colapso de margens
   (o colapso comia os 19,994px entre o selo e o H1) */
.hero__content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* selo de cidade — 170:359 */
.hero__tag{
  position: relative;
  display: block;
  width: 513px;
  max-width: 100%;
  height: 32.828px;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  padding: 6px 0 0 30px;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 2.432px;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  margin-bottom: 19.994px; /* 52,822 − 32,828 */
}
.hero__tag-dot{
  position: absolute;
  top: 13px;
  left: 15px;
  width: 7px;
  height: 7px;
  border-radius: 3.5px;
  background: var(--c-online);
  box-shadow: 0 0 9px 0 var(--c-online);
}

/* H1 — 170:364 : Bricolage Bold 80/76, caixa alta */
.hero__title{
  margin: 53.6px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  /* o Figma renderiza com optical sizing automático — travar opsz deixa o texto ~9% mais largo */
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: clamp(40px, calc(100vw * 0.0677966), 80px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--c-white);
}
.hero__title-hl{ color: var(--c-anunciante-light); }

/* parágrafo — 170:367 : Archivo 16,32/25,296 */
.hero__lead{
  margin: 53.6px 0 0;
  max-width: 576.555px;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}

/* botões — 170:369 : caixa 71 com pt 24 → altura útil 47 */
.hero__actions{
  min-height: 71px;
  padding-top: 24px;
  display: flex;
  gap: 11px;
}
.hero__btn{
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 14.4px;
  line-height: normal;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--c-white);
  transition: background-color .25s ease, border-color .25s ease;
}
/* o Figma não conta o letter-spacing depois do último caractere;
   o CSS conta — descontamos 2,016px à direita para a largura fechar */
.hero__btn--primary{
  padding-left: 10px;
  padding-right: calc(10px - 2.016px);
  background: var(--c-anunciante);
  filter: drop-shadow(0 6px 12px rgba(18,114,245,.26));
}
.hero__btn--primary:hover{ background: #2a83ff; }
.hero__btn--ghost{
  padding-left: 11px;
  padding-right: calc(11px - 2.016px);
  background: transparent;
  border: 1px solid var(--c-line);
}
.hero__btn--ghost:hover{ border-color: var(--c-anunciante); }

/* ---------- coluna direita — painel LED (170:383 / 183:2) ---------- */
.hero__led{
  /* tokens da jornada ativa */
  --j-solid: var(--c-anunciante);
  --j-light: var(--c-anunciante-light);
  --j-rgb:   18,114,245;
  --j-desc:  var(--c-muted);

  position: relative;
  min-height: 322px;
  padding: 5px;
  border-radius: 14px;
  background-image: linear-gradient(160.71deg,
                    var(--j-solid) 7.735%,
                    #0A3F96 45.774%,
                    var(--j-light) 92.265%);
  box-shadow: 0 8px 20px 0 rgba(var(--j-rgb), .12);
  filter: drop-shadow(0 0 30px rgba(var(--j-rgb), .32))
          drop-shadow(0 0 65px rgba(var(--j-rgb), .14));
  display: flex;
  flex-direction: column;
  transition: background-image .35s ease, box-shadow .35s ease;
}
.hero__led:has(.hero__led-slide--investidor.is-on){
  --j-solid: var(--c-investidor);
  --j-light: var(--c-investidor-light);
  --j-rgb:   118,87,255;
  --j-desc:  var(--c-investidor-light);
}
.hero__led:has(.hero__led-slide--imovel.is-on){
  --j-solid: var(--c-imovel);
  --j-light: var(--c-imovel-light);
  --j-rgb:   22,207,224;
  --j-desc:  var(--c-imovel-light);
}

/* tela — 183:3 */
.hero__led-screen{
  position: relative;
  flex: none;
  min-height: 262px;
  border-radius: 10px;
  background-color: var(--c-led-screen);
  /* textura de pixels do LED — 183:20 : rgba(255,255,255,.055), passo 4px */
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 4px 4px;
  padding: 20px 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* status "no ar" — 183:22 */
.hero__led-live{
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10.56px;
  line-height: 16.368px;
  letter-spacing: 2.112px;
  text-transform: uppercase;
  color: var(--c-dim);
  white-space: nowrap;
}
.hero__led-live b{ color: var(--c-online); font-weight: 400; }

.hero__led-slide{ display: none; }
.hero__led-slide.is-on{ display: block; animation: hero-fade .5s ease; }
@keyframes hero-fade{ from{ opacity: 0; transform: translateY(8px);} to{ opacity: 1; transform: none;} }

.hero__led-kicker{
  font-family: var(--f-mono);
  font-size: 11.84px;
  line-height: 18.352px;
  letter-spacing: 2.8416px;
  text-transform: uppercase;
  color: var(--j-light);
}
.hero__led-title{
  margin: 10px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 32px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--c-white);
}
.hero__led-desc{
  margin: 12px 0 16px;
  font-size: 14.88px;
  line-height: 23.064px;
  color: var(--j-desc);
}
.hero__led-cta{
  min-height: 45px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  background: var(--j-solid);
  filter: drop-shadow(0 6px 12px rgba(var(--j-rgb), .26));
  font-family: var(--f-mono);
  font-size: 14.4px;
  line-height: normal;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
  white-space: nowrap;
}

/* abas — 183:24 : caixa 50, botões 40 a partir de y=6 */
.hero__led-tabs{
  flex: none;
  min-height: 50px;
  padding: 6px 0 4px;
  display: flex;
  gap: 8px;
}
.hero__led-tab{
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 11px 7px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  color: var(--tab-light);
  font-family: var(--f-mono);
  font-size: 12.32px;
  line-height: normal;
  letter-spacing: 1.4784px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.hero__led-tab--anunciante{ --tab-light: var(--c-anunciante-light); --tab-solid: var(--c-anunciante); --tab-rgb: 18,114,245; }
.hero__led-tab--investidor{ --tab-light: var(--c-investidor-light); --tab-solid: var(--c-investidor); --tab-rgb: 118,87,255; }
.hero__led-tab--imovel{     --tab-light: var(--c-imovel-light);     --tab-solid: var(--c-imovel);     --tab-rgb: 22,207,224; }
.hero__led-tab.is-on{
  background: var(--tab-solid);
  border-color: var(--tab-solid);
  color: var(--c-white);
  filter: drop-shadow(0 0 9px rgba(var(--tab-rgb), .45));
}

/* =========================================================================
   BARRA DE AUTORIDADE (números) — Figma 170:5 (desktop) · 171:5 (mobile)
   altura desktop 137 = 1 borda + 1 padding + 132,547 + 1 padding + 1 borda
   ========================================================================= */
.stats{
  min-height: 137px;
  background: rgba(8,13,22,.7);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: 1px;
  overflow: hidden;
}

/* 170:6 : 5 × 218,4 + 4 × 10 = 1132 */
.stats__inner{
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding: 32px var(--gutter);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(68.547px, auto);
  gap: 10px;
}

.stats__item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 402:2..402:6 — elipse #1272F5 a 45% com desfoque de 23px,
   centrada na coluna e 11px acima do topo da célula */
.stats__glow{
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  height: 81px;
  border-radius: 50%;
  background: var(--c-anunciante);
  opacity: .45;
  filter: blur(23px);
  pointer-events: none;
}
/* cada número tem a sua largura de brilho */
.stats__item:nth-child(1) .stats__glow{ width: 116px; }
.stats__item:nth-child(2) .stats__glow{ width: 138px; }
.stats__item:nth-child(3) .stats__glow{ width: 118px; }
.stats__item:nth-child(4) .stats__glow{ width: 112px; }
.stats__item:nth-child(5) .stats__glow{ width: 130px; }

.stats__value{
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 43.2px;
  line-height: 43.2px;
  text-align: center;
  color: var(--c-white);
}

.stats__label{
  position: relative;
  padding-top: 7px;
  font-family: var(--f-mono);
  font-size: 11.84px;
  line-height: 18.352px;
  letter-spacing: 1.6576px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-stat-label);
  white-space: nowrap;
}

/* =========================================================================
   A ORIGEM — Figma 170:48 + 170:419 (desktop) · 171:47 (mobile)
   ========================================================================= */
/* as seções do Figma têm altura fixa; fixá-la aqui impede que meio pixel
   por bloco vire deslocamento acumulado nas seções seguintes */
.origem{
  position: relative;
  min-height: 1090px;
  border: 1px solid rgba(18,114,245,.12);
  padding: 82.82px 0 0;  /* 83,82 do Figma − 1 da borda */
  overflow: hidden;
}

/* 170:48 — foto de contexto a 13%, ampliada e deslocada para a esquerda */
.origem__bg{
  position: absolute;
  inset: 0;
  opacity: .13;
  overflow: hidden;
  pointer-events: none;
}
.origem__bg img{
  position: absolute;
  top: 0;
  left: -17.25%;
  width: 134.5%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.origem__inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- bloco de abertura — 170:420 : 542 + 48 + 542 --- */
.origem__intro{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

/* olho editorial — 170:422 */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 2.6752px;
  text-transform: uppercase;
  color: var(--c-anunciante-light);
}
.eyebrow::before{
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--c-anunciante);
}

.origem__lead{
  margin: 0;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}
.origem__lead + .origem__lead{ margin-top: 28px; } /* py-14 do bloco 170:434 */
/* no Figma o trecho em destaque não é negrito — é o mesmo peso em branco */
.origem__strong{ color: var(--c-white); font-weight: 400; }

/* --- linha do tempo — 170:438 : 5 colunas iguais, sem gap --- */
.timeline{
  position: relative;
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(98.98px, auto);
}
/* fio ligando o centro da 1ª ao centro da 5ª coluna — 170:439 */
.timeline::before{
  content: "";
  position: absolute;
  top: 13px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--c-line);
}
.timeline__item{
  position: relative;
  padding-inline: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline__dot{
  margin-top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 5.5px;
  background: var(--c-anunciante);
}
.timeline__label{
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 14.4px;
  line-height: 22.32px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
  white-space: nowrap;
}
.timeline__desc{
  margin: 4px 0 0;
  font-size: 12.8px;
  line-height: 19.84px;
  text-align: center;
  color: var(--c-stat-label);
}

/* --- faixa de destaque — 170:500 --- */
.destaque{
  margin-top: 32px;
  padding: 27px 31px;
  border: 1px solid rgba(79,163,255,.42);
  border-radius: 12px;
  background-image: linear-gradient(151.583deg,
                    rgba(18,114,245,.16) 6.1733%,
                    rgba(18,114,245,.03) 93.827%);
}
.destaque__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 22.4px;
  line-height: 21.28px;
  text-transform: uppercase;
  color: var(--c-white);
}
.destaque__text{
  margin: 6px 0 0;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}

/* --- casos — 170:508 : 2 cartões de 556 com gap 20 --- */
.casos{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.caso{
  padding: 25px;
  border: 1px solid var(--c-tab-line);
  border-radius: 12px;
  background: var(--c-tab-bg);
}
.caso__local{
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-stat-label);
}

.caso__fotos{ margin-top: 14px; }

/* o Figma aprovado traz uma única foto por cartão — ver nota de handoff */
.caso__foto--antes{ display: none; }

.caso__foto--depois{
  position: relative;
  width: 248px;
  height: 340px;
  margin-inline: auto;
  border: 1px dashed rgba(18,114,245,.85);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 18px 0 rgba(5,46,107,.45);
}
.caso__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
/* véu de leitura — 296:4 */
.caso__veu{
  position: absolute;
  inset: -1px;
  opacity: .10;
  background: linear-gradient(to bottom, rgba(1,3,7,.2), rgba(1,3,7,.72));
}
/* etiqueta com fundo próprio — 413:3 + 170:517 */
.caso__chip{
  position: absolute;
  top: 12px;
  left: 5px;
  width: 185px;
  height: 27px;
  border-radius: 6px;
  background: rgba(4,13,13,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 1.7024px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-anunciante-light);
  white-space: nowrap;
}

.caso__legenda{
  margin: 0;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.4px;
  line-height: 22.32px;
  text-align: center;
  color: var(--c-muted);
}

/* notas internas de revisão — ficam no documento, ocultas como no Figma */
.nota{ display: none; }

/* =========================================================================
   O EQUIPAMENTO — Figma 170:49 (desktop) · 171:167 (mobile)
   ========================================================================= */
/* 170:49 : altura fixa 774 com o conteúdo centrado verticalmente */
.equip{
  position: relative;
  min-height: 774px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 86.4px;
  background: linear-gradient(to bottom, #04070D 0%, #080D16 50%, #04070D 100%);
  overflow: hidden;
}

/* malha âmbar — 359:2 : #33290A, ancorada no topo */
.equip__mesh{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 609.05px;
  pointer-events: none;
}
.equip__mesh-img{
  width: 100%;
  height: 100%;
  display: block;
}
.equip__mesh-img--mobile{ display: none; }

.equip__inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.equip__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
/* a coluna de especificações começa 103,92 abaixo — 170:69 */
.equip__specs{ padding-top: 103.92px; }

/* títulos e textos compartilhados com "A origem" */
.origem__title,
.equip__title,
.caminho__title{
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 44.8px;
  line-height: 42.56px;
  text-transform: uppercase;
  color: var(--c-white);
}
.origem__title{ margin-bottom: 14px; }

.equip__lead{
  margin: 14px 0 0;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}

/* --- carrossel contínuo — 237:2 + 477:2 --- */
.equip__midia{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.carrossel{
  --carrossel-passo: 504px;  /* 3 fotos × (150 de largura + 18 de gap) */
  --carrossel-dur: 18s;
  position: relative;
  height: 320px;
  border: 1px solid rgba(15,107,255,.45);
  border-radius: 12px;
  background: #030812;
  overflow: hidden;
}
.carrossel__strip{
  position: absolute;
  top: 14px;
  left: -47px;
  display: flex;
  gap: 18px;
  will-change: transform;
  animation: carrossel-anda var(--carrossel-dur) linear infinite;
}
@keyframes carrossel-anda{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(var(--carrossel-passo) * -1)); }
}
.carrossel:hover .carrossel__strip{ animation-play-state: paused; }
/* ?qa=1 congela o carrossel no quadro inicial, para conferência contra o Figma */
.is-qa .carrossel__strip{ animation: none; }

.carrossel__item{
  flex: none;
  width: 150px;
  height: 290px;
  padding: 6px;
  border: 1px solid rgba(153,184,255,.3);
  border-radius: 14px;
  background: rgba(11,20,36,.5);
  overflow: hidden;
}
.carrossel__foto{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 9px;
}

/* esfumados das bordas — 479:2 e 479:3 */
.carrossel__fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  pointer-events: none;
}
.carrossel__fade--esq{ left: 0;  background: linear-gradient(to right, #090F1C, rgba(9,15,28,0)); }
.carrossel__fade--dir{ right: 0; background: linear-gradient(to right, rgba(9,15,28,0), #090F1C); }

.equip__legenda{
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 1.7024px;
  text-transform: uppercase;
  text-align: center;
  color: #3399FF;
}

/* --- lista de especificações — 170:70..170:125 --- */
.espec{
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--c-line);
}
.espec:last-child{
  min-height: 73px;
  padding: 14px 0;
  border-bottom: none;
}
.espec__ic{
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(18,114,245,.14);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 24.8px;
  color: var(--c-anunciante-light);
  /* sem isto o Chrome troca ⏱ ☁ ⚙ pela fonte de emoji e eles saem coloridos */
  font-variant-emoji: text;
  font-family: var(--f-body), 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
}
.espec__titulo{
  margin: 0;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 14.88px;
  line-height: 23.064px;
  letter-spacing: 1.3392px;
  text-transform: uppercase;
  color: var(--c-white);
}
.espec__desc{
  margin: 0;
  font-size: 13.44px;
  line-height: 20.832px;
  color: var(--c-stat-label);
}

/* =========================================================================
   ESCOLHA SEU CAMINHO — Figma 170:203 (desktop) · 171:255 (mobile)
   ========================================================================= */
.caminho{
  position: relative;
  min-height: 611.925px;
  padding-block: 86.4px;
  overflow: hidden;
}

/* malha azul — 359:26 : #062647 */
.caminho__mesh{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 611.925px;
  pointer-events: none;
}
.caminho__mesh-img{
  width: 100%;
  height: 100%;
  display: block;
}
.caminho__mesh-img--mobile{ display: none; }

.caminho__inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- cabeçalho centrado — 170:139 : caixa de 620 --- */
.caminho__cabecalho{
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.eyebrow--centro{ justify-content: center; }

.caminho__title{
  margin: 14px 0 0;
  text-align: center;
}
.caminho__lead{
  margin: 14px auto 0;
  max-width: 576.555px;
  font-size: 16.32px;
  line-height: 25.296px;
  text-align: center;
  color: var(--c-muted);
}

/* --- três cartões — 170:152 : 3 × 364 com gap 20 --- */
.perfis{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(246.3px, auto);
  gap: 20px;
}

.perfil{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 31px 27px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.perfil--anunciante{ --j: var(--c-anunciante-light); }
.perfil--investidor{ --j: var(--c-investidor-light); }
.perfil--imovel    { --j: var(--c-imovel-light); }

.perfil__kicker{
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--j);
}
.perfil__title{
  margin: 8px 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 22.4px;
  line-height: 21.28px;
  text-transform: uppercase;
  color: var(--c-white);
}
/* o parágrafo estica e é ele que absorve a diferença de altura entre cartões */
.perfil__desc{
  flex: 1;
  margin: 0;
  padding-bottom: 14px;
  font-size: 14.88px;
  line-height: 23.064px;
  color: var(--c-muted);
}

.perfil__cta{
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: var(--f-mono);
  font-size: 14.4px;
  line-height: 22.32px;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease;
}
.perfil__cta--fantasma{
  padding: 15px 25px;
  border: 1px solid var(--c-line);
}
/* O Figma trazia este CTA sólido violeta no desktop e fantasma no mobile.
   Decisão do usuário (05/08/2026): fantasma nos dois, com o brilho suave —
   os três cartões passam a ter o mesmo peso visual. */
.perfil__cta--solido{
  padding: 15px 25px;
  border: 1px solid var(--c-line);
  box-shadow: 0 6px 24px 0 rgba(18,114,245,.26);
}
.perfil:hover .perfil__cta{ border-color: var(--j); }

/* =========================================================================
   ÁREA DE PERFIL — jornadas
   Anunciante: Figma 202:2 (desktop) · 203:2 (mobile)
   ========================================================================= */
.jornadas{ display: none; }
.jornadas.is-on{ display: block; }

/* barra "Você está vendo" — 202:205 */
.jornadas__barra{
  position: sticky;
  top: 65.83px;              /* logo abaixo do header fixo */
  z-index: 40;
  padding: 12px 0 13px;
  background: rgba(4,7,13,.92);
  border-bottom: 1px solid var(--c-line);
}
.jornadas__barra-inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}
.jornadas__vendo{
  flex: 1 1 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
}
.jornadas__abas{ display: flex; gap: 10px; }
.jornadas__aba{
  /* o Figma resolve a caixa em 39 (10+19+10); o "normal" do Chrome daria 42 */
  padding: 10px 17px;
  padding-right: calc(17px - 1.5744px);
  border-radius: 6px;
  cursor: pointer;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: 13.12px;
  line-height: 17px;
  letter-spacing: 1.5744px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.jornadas__aba.is-on{ color: var(--c-white); }
.jornadas__aba[data-perfil="anunciante"].is-on{ background:var(--c-anunciante); border-color:var(--c-anunciante); filter:drop-shadow(0 0 9px rgba(18,114,245,.45)); }
.jornadas__aba[data-perfil="investidor"].is-on{ background:var(--c-investidor); border-color:var(--c-investidor); filter:drop-shadow(0 0 9px rgba(118,87,255,.45)); }
.jornadas__aba[data-perfil="imovel"].is-on{ background:var(--c-imovel); border-color:var(--c-imovel); filter:drop-shadow(0 0 9px rgba(22,207,224,.45)); }

.jornada .eyebrow{ color: var(--j-light); }
.jornada .eyebrow::before{ background: var(--j); }

/* --- corpo da jornada — 202:221 --- */
.jornada{ display: none; }
.jornada.is-on{ display: block; }

.jornada{
  /* acento da jornada; cada variação sobrescreve */
  --j: var(--c-anunciante);
  --j-light: var(--c-anunciante-light);
  --j-rgb: 18,114,245;
  /* cor dos cartões — o Figma usa uma paleta diferente em cada jornada */
  --card-bg: var(--c-tab-bg);
  --card-line: var(--c-tab-line);
  position: relative;
  padding-block: 86.4px;
  background: var(--c-bg);
  overflow: hidden;
}
.jornada__mesh{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 1721.94px;
  pointer-events: none;
}
.jornada__mesh-img{ width: 100%; height: 100%; display: block; }
.jornada__mesh-img--mobile{ display: none; }

.jornada__inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* etiqueta do perfil — 202:223 */
/* etiqueta do perfil — 202:223.
   O export diz w-[212px], mas o nó real mede 226×29,359: ele abraça o texto
   com 14 de respiro dos DOIS lados. Usar 212 cola o texto na borda direita.
   fit-content reproduz esse "hug" e já serve para os rótulos mais longos
   das outras jornadas. */
.jornada__badge{
  display: block;
  width: fit-content;
  min-height: 29.359px;
  margin-bottom: 16px;
  /* 14 à esquerda e 12 à direita: o CSS ainda conta o letter-spacing depois da
     última letra, e o desconto deixa o respiro visual simétrico em 15/15 */
  padding: 6px 12px 0 14px;
  border-radius: 5px;
  background: var(--j);
  font-family: var(--f-mono);
  font-size: 11.2px;
  line-height: 17.36px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: var(--c-white);
  /* o texto ocupa 197 dos 198 úteis: sem nowrap ele quebra e vaza para fora da caixa */
  white-space: nowrap;
}

/* abertura — 202:226 : 542 + 48 + 542 */
.jornada__abertura{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
.jornada__title{
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 44.8px;
  line-height: 42.56px;
  text-transform: uppercase;
  color: var(--c-white);
}
.jornada__lead{
  margin: 0 0 14px;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}
.jornada__strong{ color: var(--c-white); font-weight: 400; }

/* três benefícios — 202:237 */
.beneficios{
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(167.62px, auto);
  gap: 20px;
}
.beneficio{
  padding: 25px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 12px;
  overflow: hidden;
}
.beneficio__num{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: 22.4px;
  line-height: 34.72px;
  color: var(--j-light);
}
.beneficio__title{
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 22.4px;
  line-height: 21.28px;
  text-transform: uppercase;
  color: var(--c-white);
}
.beneficio__desc{
  margin: 8px 0 0;
  font-size: 14.72px;
  line-height: 22.816px;
  color: var(--c-muted);
}

/* faixa de destaque da jornada — 202:274 */
.destaque--jornada{
  background-image: linear-gradient(148.566deg,
                    rgba(18,114,245,.16) 6.1733%,
                    rgba(18,114,245,.03) 93.827%);
}
.destaque--jornada .destaque__text{ margin-bottom: 14px; }

/* como funciona + painel de referência — 202:282 */
.jornada__como{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}
.jornada__passos .jornada__title{ margin: 14px 0 0; }

.passos{
  margin-top: 28px;
  display: grid;
  grid-template-rows: repeat(4, minmax(111.2px, auto));
  gap: 8px;
}
.passo{
  padding: 17px 14px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 10px;
  overflow: hidden;
}
.passo__num{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: 20px;
  line-height: 31px;
  color: var(--j-light);
}
.passo__title{
  margin: 6px 0 0;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13.44px;
  line-height: 16.128px;
  letter-spacing: 1.0752px;
  text-transform: uppercase;
  color: var(--c-white);
}
.passo__desc{
  margin: 5px 0 0;
  font-size: 12.32px;
  line-height: 19.096px;
  color: var(--c-stat-label);
}

/* o cartão de referência começa 115,52 abaixo do topo da coluna — 202:343 */
.jornada__ref{ padding-top: 115.52px; }
.ref{
  padding: 25px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 12px;
  overflow: hidden;
}
.ref__local{
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
}
.ref__title{
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 22.4px;
  line-height: 21.28px;
  text-transform: uppercase;
  color: var(--c-white);
}
.ref__linhas{ margin-top: 12px; }
.ref__linha{
  min-height: 42.281px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(90,140,220,.1);
}
.ref__rotulo{
  font-size: 14.24px;
  line-height: 22.072px;
  color: var(--c-muted);
  white-space: nowrap;
}
.ref__valor{
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-white);
  white-space: nowrap;
}
.ref__valor--destaque{ color: var(--j-light); }
.ref__nota{
  margin: 14px 0 0;
  font-size: 13.28px;
  line-height: 20.584px;
  color: var(--c-stat-label);
}

/* faixa de fotos de campanha — 202:391 */
.campanha{
  position: relative;
  margin-top: 16px;
  min-height: 130px;
  background: #010307;
  border: 1px dashed rgba(18,114,245,.65);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.campanha__foto{
  position: absolute;
  top: -1px;
  height: calc(100% + 2px);
  width: 50%;
  object-fit: cover;
}
.campanha__foto:nth-of-type(1){ left: 0; }
.campanha__foto:nth-of-type(2){ left: 50%; }
.campanha__veu{
  position: absolute;
  inset: -1px;
  background: rgba(1,3,7,.52);
}
.campanha__label{
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 1.7024px;
  text-transform: uppercase;
  text-align: center;
  color: var(--j-light);
  white-space: nowrap;
}

/* convite final — 202:395 */
.convite{
  margin-top: 36px;
  padding: 49px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background-image: radial-gradient(ellipse 1265px 331px at 50% 0%,
                    rgba(18,114,245,.18) 0%, rgba(18,114,245,0) 70%),
                    linear-gradient(#0C1420, #0C1420);
}
.convite__title{
  margin: 0 auto;
  max-width: 442.75px;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 44.8px;
  line-height: 42.56px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
}
.convite__text{
  margin: 12px auto 0;
  max-width: 576.547px;
  font-size: 16.32px;
  line-height: 25.296px;
  text-align: center;
  color: var(--c-muted);
}
.convite__acao{
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.convite__btn{
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 7px;
  background: var(--j);
  filter: drop-shadow(0 6px 12px rgba(var(--j-rgb),.26));
  font-family: var(--f-mono);
  font-size: 14.4px;
  line-height: 22.32px;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-white);
  white-space: nowrap;
  transition: background-color .25s ease;
}
.convite__btn:hover{ background: #2a83ff; }

/* =========================================================================
   JORNADA 02 — PARCEIRO INVESTIDOR — Figma 201:2 (desktop) · 204:2 (mobile)
   Só o que difere da jornada 01; o resto vem dos blocos acima via --j.
   ========================================================================= */
.jornada--investidor{
  --j: var(--c-investidor);
  --j-light: var(--c-investidor-light);
  --j-rgb: 118,87,255;
  --card-bg: #0E100D;                  /* oliva escuro do Figma nesta jornada */
  --card-line: #4F411C;
}
/* fundo desta jornada: dois clusters de LED, não uma malha — 360:5 / 360:234 */
.jornada__mesh--clusters{ width: 1440px; height: 100%; }
.jornada__cluster{
  position: absolute;
  left: 880px;
  width: 520px;
  height: 220px;
}
.jornada__cluster--topo{ top: 40px; }
.jornada__cluster--base{ bottom: 40px; }

/* duas listas com ✓ — 201:241 */
.entregas{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(306.92px, auto);
  gap: 20px;
  /* com a lista da direita reduzida a 2 itens, o cartão menor centra na linha */
  align-items: center;
}
.entregas > .lista{ align-self: center; }
.lista{
  padding: 25px;
  /* a cor do cartão vem da jornada: cada variação do Figma usa a sua */
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
}
.lista__kicker{
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
}
.lista__itens{
  margin: 0;
  padding: 14px 0 9px;
  list-style: none;
}
.lista__item{
  position: relative;
  padding-left: 26px;
  font-size: 14.88px;
  line-height: 23.064px;
  color: var(--c-muted);
}
.lista__item + .lista__item{ padding-top: 9px; }
.lista__item::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--j-light);
}
.lista__item + .lista__item::before{ top: 9px; }
.lista__forte{ color: var(--c-white); font-weight: 400; }

/* blocos internos da jornada */
.jornada__bloco{ margin-top: 52px; }
.jornada__perfil{
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.jornada__title--bloco{ margin: 14px 0 0; }
.jornada__lead--bloco{ margin: 14px 0 0; }
.jornada__lead--estreito{ max-width: 577px; }

/* sete etapas — 201:354 */
.etapas{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: minmax(168.44px, auto);
  gap: 10px;
}
.etapa{
  padding: 17px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  overflow: hidden;
}
.etapa__num{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: 20px;
  line-height: 31px;
  color: var(--j-light);
}
.etapa__title{
  margin: 6px 0 0;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13.44px;
  line-height: 16.128px;
  letter-spacing: 1.0752px;
  text-transform: uppercase;
  color: var(--c-white);
}
.etapa__desc{
  margin: 5px 0 0;
  font-size: 12.32px;
  line-height: 19.096px;
  color: var(--c-stat-label);
}
.etapa__desc--realce{ color: var(--c-dim); }
.etapa__realce{ color: var(--c-anunciante-light); }

/* a faixa deste bloco mantém o azul do Figma, não o violeta da jornada */
.destaque--azul{
  background-image: linear-gradient(151.583deg,
                    rgba(18,114,245,.16) 6.1733%,
                    rgba(18,114,245,.03) 93.827%);
}

/* três cartões financeiros — 201:462 */
.financeiro{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(358.89px, auto);
  gap: 16px;
}
.fin{
  background: #0C1420;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
}
.fin__titulo{
  margin: 0;
  padding: 12px 18px 13px;
  background: rgba(118,87,255,.16);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 12.8px;
  line-height: 19.84px;
  letter-spacing: 1.792px;
  text-transform: uppercase;
  color: var(--j-light);
}
.fin__corpo{ padding: 18px; }
.fin__linha{
  min-height: 42.281px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(90,140,220,.1);
}
.fin__linha--total{
  min-height: 46.281px;
  margin-top: 6px;
  border-top: 1px solid var(--c-line);
  border-bottom: none;
}
.fin__rotulo{
  font-size: 14.24px;
  line-height: 22.072px;
  color: var(--c-muted);
  white-space: nowrap;
}
.fin__valor{
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-white);
  white-space: nowrap;
}
.fin__valor--destaque{ color: var(--j-light); }
.fin__rodape{
  margin: 12px 0 0;
  font-size: 13.44px;
  line-height: 20.832px;
  color: var(--c-stat-label);
}

/* divisão 70/30 — 201:516 */
.divisao{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0 13px;
  border-bottom: 1px solid rgba(90,140,220,.1);
}
.divisao__anel{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divisao__anel--70{ background: conic-gradient(var(--j) 0 70%, rgba(255,255,255,.09) 70%); }
.divisao__anel--30{ background: conic-gradient(var(--j-light) 0 30%, rgba(255,255,255,.09) 30%); }
.divisao__disco{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0C1420;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: 15.2px;
  line-height: 23.56px;
  font-style: normal;
  color: var(--c-white);
}
.divisao__texto{ display: flex; flex-direction: column; }
.divisao__rotulo{
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
}
.divisao__valor{
  font-family: var(--f-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: 23.2px;
  line-height: 25.52px;
  color: var(--j-light);
}

/* acordeão de riscos — 201:660 fechado · 607:2 aberto */
.riscos{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.risco{
  background: #0E100D;
  border: 1px solid #4F411C;
  border-radius: 10px;
}
.risco__cab{
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
.risco__cab::-webkit-details-marker{ display: none; }
.risco__num{
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(142,119,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12.16px;
  letter-spacing: 1.568px;
  color: var(--j-light);
}
.risco__title{
  font-family: var(--f-mono);
  font-size: 15.68px;
  letter-spacing: 1.568px;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}
.risco__mais{
  margin-left: auto;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 1.568px;
  color: var(--j-light);
}
.risco__mais::before{ content: '+'; }
.risco[open] .risco__mais::before{ content: '−'; }

/* conteúdo aberto — 607:2 / 607:11 */
.risco__corpo{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 22px 57px;
}
.risco__lead{
  margin: 0;
  font-size: 14.88px;
  line-height: 24px;
  color: var(--c-muted);
}
.risco__lista{
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}
.risco__item{
  display: flex;
  gap: 12px;
  font-size: 14.88px;
  line-height: 24px;
  color: var(--c-muted);
}
.risco__item::before{
  content: '✓';
  flex: none;
  color: var(--j-light);
}

.convite__title--estreito{ max-width: 300px; }

/* =========================================================================
   JORNADA 03 — Proprietário de imóvel — 200:2 (desktop) / 205:2 (mobile)
   A mais curta das três: abertura em duas colunas, 4 etapas e a faixa final.
   ========================================================================= */
.jornada--imovel{
  --j: var(--c-imovel);
  --j-light: var(--c-imovel-light);
  --j-rgb: 22,207,224;
  --card-bg: #07120E;                  /* verde escuro do Figma nesta jornada */
  --card-line: #1A4733;
}

/* a malha desta jornada tem a altura do próprio frame — a padrão é a do
   anunciante (1721,94) e esticaria o SVG, jogando os clusters para baixo */
/* e começa 64 acima: no Figma a malha nasce no topo do frame, que inclui a
   barra "Você está vendo" — aqui a barra é um elemento à parte, fora do painel */
.jornada--imovel .jornada__mesh{ top: -64px; height: 846.768px; }

/* a etiqueta desta jornada é vazada, não sólida como nas outras duas */
.jornada__badge--fantasma{
  height: 31.359px;
  padding-top: 7px;
  background: rgba(22,207,224,.16);
  border: 1px solid var(--c-line);
  color: var(--j-light);
}

.jornada__abertura--imovel{ align-items: start; }
/* o cartão tem altura fixa no Figma — é ele que define a linha da abertura */
.jornada__abertura--imovel .lista{ min-height: 256.328px; }
/* aqui quem dá o respiro até o botão é o .jornada__acao, não o parágrafo */
.jornada__oferta .jornada__lead{ margin-bottom: 0; }
.jornada__acao{ padding-top: 24px; }

/* cartão de vantagens: mesma caixa da lista, sem o rótulo do topo */
.lista--simples .lista__itens{ padding-top: 0; }

/* a faixa desta jornada corre na horizontal (~91°), não na diagonal de 151,58°
   que o bloco do anunciante usa — 200:326 */
.jornada--imovel .destaque{
  background-image: linear-gradient(90.96deg,
                    rgba(18,114,245,.16) 0%,
                    rgba(18,114,245,.03) 100%);
}

/* quatro etapas em vez de sete — 200:277 */
.etapas--quatro{
  margin-top: 36px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
}
.etapas--quatro .etapa{ padding: 16px 13px; }

/* =========================================================================
   SEÇÃO 06 — A rede + contato — 170:204 (desktop) / 171:319 (mobile)
   ========================================================================= */
.rede{
  position: relative;
  min-height: 801px;
  /* o conteúdo ancora no topo (y 86,4) e sobra folga embaixo — não centralizar */
  padding-block: 86.4px;
  background: linear-gradient(to bottom, #04070D 0%, #080D16 50%, #04070D 100%);
  overflow: hidden;
}
/* malha de LED verde — 359:50 : ancorada no topo, 1440 × 752,784 */
.rede__mesh{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 752.784px;
  pointer-events: none;
}
.rede__mesh-img{
  width: 100%;
  height: 100%;
  display: block;
}
.rede__mesh-img--mobile{ display: none; }

.rede__inner{
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-items: center;
}

.rede__title{
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 44.8px;
  line-height: 42.56px;
  text-transform: uppercase;
  color: var(--c-white);
}
.rede__lead{
  margin: 14px 0 0;
  font-size: 16.32px;
  line-height: 25.296px;
  color: var(--c-muted);
}

/* cidades da rede — 170:218 : pílulas que quebram em linha */
.cidades{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cidade{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 12.8px;
  line-height: 19.84px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}
.cidade__dot{
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-dim);
}
.cidade--operacao{
  border-color: rgba(58,219,126,.45);
  color: var(--c-white);
}
.cidade--operacao .cidade__dot{
  background: var(--c-online);
  box-shadow: 0 0 8px var(--c-online);
}
.cidade--implantacao .cidade__dot{
  background: var(--c-anunciante-light);
  box-shadow: 0 0 8px var(--c-anunciante-light);
}

/* cartão do formulário — 170:250 */
.form{
  padding: 24px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 12px;
}
.form__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22.4px;
  line-height: 21.28px;
  text-transform: uppercase;
  color: var(--c-white);
}
.form__lead{
  margin: 8px 0 0;
  font-size: 14.72px;
  line-height: 22.816px;
  color: var(--c-muted);
}
.form__grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.campo--largo{ grid-column: 1 / -1; }
.campo__label{
  display: block;
  padding-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 12.16px;
  line-height: 18.848px;
  letter-spacing: 1.5808px;
  text-transform: uppercase;
  color: var(--c-muted);
}
.campo__ctrl{
  width: 100%;
  height: 44px;
  padding: 12px 13px;
  background: var(--c-tab-bg);
  border: 1px solid var(--c-tab-line);
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 14.88px;
  line-height: 18px;
  color: var(--c-white);
}
.campo__ctrl::placeholder{ color: #9E9E9E; }
.campo__ctrl:focus-visible{ border-color: var(--c-anunciante); outline: none; }
/* o select é 46 no Figma, 2px mais alto que os inputs — 170:262 */
.campo__ctrl--select{
  height: 46px;
  padding-right: 24px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.campo__ctrl--select:invalid{ color: #9E9E9E; }
.campo__ctrl--area{
  /* block: como inline-block o textarea ganha 3px de descida do baseline */
  display: block;
  height: 80px;
  padding-block: 12px;
  resize: vertical;
}
.form__btn{
  width: 100%;
  min-height: 49px;
  border: 0;
  border-radius: 7px;
  background: var(--c-anunciante);
  box-shadow: 0 0 24px rgba(18,114,245,.26);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 14.4px;
  letter-spacing: 2.016px;
  text-transform: uppercase;
  color: var(--c-white);
}
.form__nota{
  /* 8, não 12: no Figma o botão (49) transborda 4px o container dele (45),
     comendo os primeiros 4px do respiro de 12 desta nota */
  margin: 8px 0 14px;
  font-size: 12.64px;
  line-height: 19.592px;
  color: var(--c-stat-label);
}

/* =========================================================================
   FAIXA INTERMEDIÁRIA (769–1439) — o layout é a tradução do frame de 1440.
   Comprimido, ele cortava texto em caixas com `nowrap`. Aqui elas quebram.
   ========================================================================= */
@media (max-width: 1439.98px){
  /* texto que não cabe passa a quebrar em vez de vazar da caixa */
  .hero__tag{ white-space: normal; }
  .perfil__cta{ white-space: normal; }
  .hero__actions{ flex-wrap: wrap; }
  .cidades{ flex-wrap: wrap; }
  .header__nav{ flex-wrap: wrap; }
  .ref__linha, .fin__linha{ flex-wrap: wrap; }

  /* os grids reduzem a CONTAGEM de colunas em vez de espremer cada uma.
     Os pisos são escolhidos para manter a contagem original em 1440:
     etapas 7×140+60=1040 ≤ 1132 · quatro 4×200+30=830 · números 5×150+80=830 */
  .stats__inner{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .timeline{     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .perfis{       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .beneficios{   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .financeiro{   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .etapas{       grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .etapas--quatro{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* =========================================================================
   SEÇÃO 07 — Rodapé — 170:322 (desktop) / 171:436 (mobile)
   ========================================================================= */
.rodape{
  padding-block: 38px 54px;
  background: #080D16;
  border-top: 1px solid var(--c-line);
}
.rodape__inner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* a caixa da marca tem 32,2 com o logo (22,34) começando em y5 */
.rodape__logo{
  display: block;
  width: 150px;
  height: 22.336px;
  margin: 5px 0 4.864px;
}
.rodape__desc{
  margin: 8px 0 0;
  /* o texto não cabe numa linha só (ver nota do rodapé). A medida abaixo
     faz a divisão cair no separador "·", com "de LED" e "— PR" presos
     pelos espaços não-quebráveis do HTML. */
  max-width: 400px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
}
.rodape__nav{
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.rodape__link{
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--c-stat-label);
  white-space: nowrap;
  transition: color .2s ease;
}
.rodape__link:hover{ color: var(--c-white); }

/* =========================================================================
   BRILHO DO PAINEL LED — entre 769 e 1280 o container encosta nas bordas e a
   folga à direita cai para 24px, enquanto o brilho tem 65px de alcance: os
   41px restantes eram decepados pelo `overflow` da seção, deixando o contorno
   luminoso interrompido numa linha reta. Mais folga + alcance proporcional.
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1279.98px){
  :root{ --gutter: 40px; }
  .hero__led{
    filter: drop-shadow(0 0 16px rgba(var(--j-rgb), .32))
            drop-shadow(0 0 34px rgba(var(--j-rgb), .14));
  }
}

/* =========================================================================
   HEADER — o menu deitado ocupa 871px e só cabe a partir de ~1100.
   Entre 769 e 1100 ele estourava a viewport: aqui vira menu de botão.
   ========================================================================= */
@media (max-width: 1100px){
  .header__burger{ display: flex; }

  .header__nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    background: rgba(4,7,13,.98);
    border-bottom: 1px solid var(--c-line);
  }
  .header__nav.is-open{ display: flex; }
}

/* =========================================================================
   MOBILE — Figma 171:2 (480)
   ========================================================================= */
@media (max-width: 768px){

  html{ scroll-padding-top: 65px; }

  /* ---- header 171:530 : logo 133 × 24,036 + botão de menu ---- */
  .header__inner{ padding: 13px var(--gutter); }
  .header__brand{ width: 133px; height: 24.036px; }
  .header__logo{ top: 0; width: 133px; height: 24.036px; }

  /* ---- hero 171:468 : altura 941,109 · conteúdo a partir de 103 ---- */
  .hero{
    height: 941.109px;
    padding-top: 103px;
  }

  .hero__mesh{ display: none; }

  /* foto "Telao 1 1" — 209:54 : 480 × 494 no topo */
  .hero__photo{
    top: 0;
    left: 0;
    width: 100%;
    height: 494px;
    opacity: 1;
  }
  .hero__photo::after{
    background: linear-gradient(21.294deg,
                rgba(4,7,13,.92) 23.308%,
                rgba(0,0,0,0) 73.708%);
  }
  .hero__photo-img{ display: none; }
  .hero__photo-img--mobile{ display: block; }

  .hero__vignette{ display: none; }

  /* grid 171:470 : coluna única, linhas 367,11 / 322, gap 34
     as alturas de linha são obrigatórias — é a linha de 367,11 que centraliza
     a coluna de 329 e coloca o card LED exatamente em y=504 */
  .hero__inner{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(367.11px, auto) minmax(322px, auto);
    gap: 34px;
    align-items: start;
  }

  .hero__content{
    height: 329px;
    align-self: center;
  }

  /* selo 171:472 : 396,906 × 45, texto em 2 linhas */
  .hero__tag{
    width: 396.906px;
    height: 45px;
    /* recuo à direita força a quebra depois do "·", como no Figma */
    padding: 2.95px 27px 0 30px;
    white-space: normal;
    margin-bottom: 7.815px; /* 52,815 − 45 */
  }

  .hero__title{
    margin-top: 27.872px;
    font-size: 41.6px;
    line-height: 39.52px;
    letter-spacing: -3px;
  }

  .hero__lead{
    margin-top: 27.872px;
    max-width: none;
  }

  /* botão 171:483 : escala maior, único no mobile
     caixa 89 → botão começa em 14,39 (1px de centragem + 13,39 do nó) */
  .hero__actions{
    height: 89px;
    padding-top: 14.39px;
    gap: 0;
  }
  .hero__btn--primary{
    /* 65,05 = 18,623×2 + entrelinha da Space Mono como o Figma resolve */
    height: 65.05px;
    padding: 0 31.926px;
    border-radius: 9.312px;
    font-size: 19.155px;
    letter-spacing: 2.6818px;
    filter: drop-shadow(0 7.981px 15.963px rgba(18,114,245,.26));
  }
  /* o Figma mobile traz apenas "Quero investir" — ver nota de handoff */
  .hero__btn--ghost{ display: none; }

  /* painel LED — 209:30 */
  .hero__led{
    background-image: linear-gradient(156.71deg,
                      var(--j-solid) 7.735%,
                      #0A3F96 45.774%,
                      var(--j-light) 92.265%);
    filter: none;
  }
  .hero__led-title{ font-size: 22.4px; line-height: 22.4px; }

  /* ---- barra de números 171:6 : 2 colunas de 211, 3 linhas de 55,75 ---- */
  .stats__inner{
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(55.75px, auto));
    column-gap: 10px;
    row-gap: 24px;
  }
  /* "12 · meses de operação" ocupa a linha inteira — 171:39 */
  .stats__item:nth-child(5){ grid-column: 1 / span 2; }

  .stats__value{ font-size: 30.4px; line-height: 30.4px; }

  /* no mobile o desfoque do Figma é σ=16, não 23 */
  .stats__glow{ top: -17.5px; height: 66px; filter: blur(16px); }
  .stats__item:nth-child(1) .stats__glow{ width: 83px; }
  .stats__item:nth-child(2) .stats__glow{ width: 99px; }
  .stats__item:nth-child(3) .stats__glow{ width: 84px; }
  .stats__item:nth-child(4) .stats__glow{ width: 80px; }
  .stats__item:nth-child(5) .stats__glow{ width: 93px; }

  /* no mobile as seções crescem com o conteúdo — nada de altura fixa */
  .stats{ height: auto; }

  /* ---- A origem — 171:47 ---- */
  .origem{ height: auto; padding: 49px 1px; }
  .origem__bg{ opacity: .12; }
  .origem__bg img{ left: 0; width: 100%; }
  .origem__inner{ max-width: none; }

  /* 171:49 : coluna única, linhas 101,52 / 204,97 */
  .origem__intro{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(101.516px, auto) minmax(204.969px, auto);
  }
  .origem__title,
  .equip__title,
  .caminho__title{ font-size: 28.8px; line-height: 27.36px; }

  /* 171:67 : linha do tempo empilhada, sem fio de ligação */
  .timeline{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(79.16px, auto));
    row-gap: 22px;
  }
  .timeline::before{ display: none; }

  .destaque{
    background-image: linear-gradient(117.605deg,
                      rgba(18,114,245,.16) 6.1733%,
                      rgba(18,114,245,.03) 93.827%);
  }
  .destaque__title{ font-size: 17.6px; line-height: 16.72px; }

  /* 171:131 : cartões empilhados, foto ocupando a largura toda */
  .casos{
    grid-template-columns: minmax(0, 1fr);
    gap: 27.77px;
  }
  .caso__local{ text-align: left; }
  .caso__foto--depois{
    width: 100%;
    height: 440px;
  }
  .caso__veu{ opacity: .08; }
  /* o mobile do Figma não traz a etiqueta sobre a foto */
  .caso__chip{ display: none; }
  .caso__legenda{
    display: block;
    height: auto;
    margin-top: 14px;
    text-align: left;
  }

  /* ---- O equipamento — 171:167 ---- */
  .equip{ height: auto; display: block; padding-block: 48px; }
  .equip__mesh{
    left: 0;
    transform: none;
    width: 480px;
    height: 924.984px;
  }
  .equip__mesh-img{ display: none; }
  .equip__mesh-img--mobile{ display: block; }

  /* 171:169 : coluna única, linhas 528 / 436,25 */
  .equip__grid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(528px, auto) auto;
  }
  .equip__specs{ padding-top: 0; }

  /* a 28,8px o Chrome compõe ~1,7% mais estreito que o Figma e o "E" subia de
     linha; 428 em vez de 432 devolve a quebra depois de "DIA", como no layout */
  .equip__title{ max-width: 428px; }

  .carrossel{ border-color: rgba(15,107,255,.5); }

  /* ---- Escolha seu caminho — 171:255 ---- */
  .caminho{ height: auto; padding-block: 48px; }
  .caminho__mesh{
    left: 0;
    transform: none;
    width: 480px;
    height: 1020.985px;
  }
  .caminho__mesh-img{ display: none; }
  .caminho__mesh-img--mobile{ display: block; }

  /* a caixa de 432 deixaria "entrar" na 1ª linha; 300 devolve a quebra
     depois de "de", como no layout — o bloco é centrado, então não aparece */
  .caminho__title{ max-width: 300px; margin-inline: auto; }

  /* 171:269 : cartões empilhados */
  .perfis{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(241.72px, auto) minmax(239.72px, auto) minmax(241.72px, auto);
  }
  .perfil__title{ font-size: 17.6px; line-height: 16.72px; }

  /* no mobile o CTA do perfil 02 não é sólido: é fantasma com brilho — 171:296 */
  /* ---- Jornadas — 203:2 ---- */
  /* a barra vira duas faixas: rótulo em cima, abas ocupando a linha — 203:321 */
  .jornadas__barra{ top: 65px; }
  .jornadas__barra-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .jornadas__vendo{ flex: none; height: 19px; }
  .jornadas__abas{
    height: 44px;
    background: #03070D;
    gap: 8px;
  }
  .jornadas__aba{
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding-inline: 17px;
    background: #08111C;
    border-color: rgba(48,87,138,.55);
  }

  .jornada{ padding-block: 48px; }
  .jornada__mesh{
    left: 0;
    transform: none;
    width: 480px;
    height: 2642.562px;
  }
  .jornada__mesh-img{ display: none; }
  .jornada__mesh-img--mobile{ display: block; }

  .jornada__abertura{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(41.34px, auto) minmax(115.12px, auto);
  }
  .jornada__title{ font-size: 28.8px; line-height: 27.36px; }

  .beneficios{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(163.05px, auto));
  }
  .beneficio__title{ font-size: 17.6px; line-height: 16.72px; }

  .destaque--jornada{
    background-image: linear-gradient(113.403deg,
                      rgba(18,114,245,.16) 6.1733%,
                      rgba(18,114,245,.03) 93.827%);
  }

  .jornada__como{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(556.98px, auto) minmax(497.28px, auto);
  }
  /* no mobile o cartão de referência entra no fluxo normal */
  .jornada__ref{ padding-top: 0; }

  .convite{ padding: 31px; }
  .convite__title{ font-size: 28.8px; line-height: 27.36px; max-width: 284.625px; }
  .convite__text{ max-width: 370px; }

  /* ---- Jornada 02 · Investidor — 204:2 ---- */
  .jornada__mesh--clusters{ width: 480px; }
  .jornada__cluster{ left: 0; width: 480px; height: 192px; }

  /* listas empilham — 204:355 */
  .entregas{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(306.92px, auto) auto;
  }

  /* as sete etapas viram 2 colunas × 4 linhas — 204:468.
     O Figma trava a linha em 130,28 e corta a descrição da etapa 03; aqui a
     linha cresce com o conteúdo para não esconder copy. */
  .etapas{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: minmax(130.28px, auto);
  }

  /* a faixa deste bloco muda de ângulo no mobile — 204:553 */
  .destaque--azul{
    background-image: linear-gradient(117.71deg,
                      rgba(18,114,245,.16) 6.1733%,
                      rgba(18,114,245,.03) 93.827%);
  }

  /* cartões financeiros empilham — 204:576 */
  .financeiro{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(346.69px, auto) minmax(294px, auto) minmax(359.41px, auto);
  }

  /* "Quem procuramos" e os riscos também — 204:774 */
  .jornada__perfil{ grid-template-columns: minmax(0, 1fr); }
  .riscos{
    grid-template-columns: minmax(0, 1fr);
  }
  .risco__corpo{ padding: 0 20px 20px 57px; }
  .risco__lista{ gap: 8px; }

  .convite__title--estreito{ max-width: 256.16px; }

  /* ---- Jornada 03 · Imóvel — 205:2 ---- */
  .jornada--imovel .jornada__mesh{ top: -95px; height: 1350.343px; }
  /* aqui a etiqueta volta a ser sólida: o vazado é só no desktop — 205:337 */
  .jornada__badge--fantasma{
    background: var(--j);
    color: var(--c-white);
  }
  /* precisa vir depois da regra genérica de .jornada__abertura, que fixa as
     linhas para o layout título+parágrafo das outras duas jornadas */
  .jornada__abertura--imovel{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 19.5px;
  }
  /* aqui o cartão também é mais alto que o conteúdo — 205:354 */
  .jornada__abertura--imovel .lista{ min-height: 325.5px; }
  /* 2×2 com as duas linhas na mesma altura, como no Figma */
  .etapas--quatro{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(149.36px, auto);
  }

  /* ---- rodapé — 171:436 ---- */
  .rodape__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 19.2px;
  }
  /* os 5 links somam 416,6 e o container tem 432: cabem, mas qualquer `gap`
     somado passa e joga o último para a linha de baixo. Sem gap e com
     `space-between`, a folga de 15,4 vira ~3,9 entre cada um */
  .rodape__nav{
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
  }

  /* ---- A rede + contato — 171:319 ---- */
  .rede{
    height: auto;
    display: block;
    padding-block: 48px;
  }
  .rede__mesh{
    left: 0;
    transform: none;
    width: 480px;
    height: 1315.797px;
  }
  .rede__mesh-img{ display: none; }
  .rede__mesh-img--mobile{ display: block; }

  .rede__inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* o Figma quebra o título à mão: "DE SANTO ANTÔNIO / DA PLATINA PARA /
     O INTERIOR INTEIRO." Nenhum max-width reproduz isso — a 1ª linha é a mais
     larga das três — então cada trecho vira bloco só aqui. */
  .rede__title{ font-size: 28.8px; line-height: 27.36px; }
  .rede__title-l{ display: block; }
  /* o Figma quebra em 3 linhas ("…dos grandes / centros."); o Chrome compõe
     mais estreito e caberia em 2 — recuo para forçar a mesma quebra */
  .rede__lead{ max-width: 408px; }

  .form__title{ font-size: 17.6px; line-height: 16.72px; }
  .form__grid{ grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   TELAS MAIS ESTREITAS QUE O DESIGN (< 480)
   O layout mobile é a tradução literal do frame 171:2, calibrado em 480.
   Abaixo disso nada existia: as malhas de 480 estouravam a viewport e todo
   texto com `nowrap` era cortado. Este bloco NÃO toca em 480 nem no desktop.
   ========================================================================= */
@media (max-width: 479.98px){

  /* malhas decorativas têm largura fixa de 480 — recortar em vez de esticar,
     que deformaria o passo dos pixels de LED */
  /* ⚠️ não incluir .jornadas aqui: overflow cria contexto de rolagem e
     quebra o position:sticky da barra "Você está vendo" */
  .hero, .stats, .origem, .equip, .caminho, .jornada{ overflow: hidden; }

  /* abas do painel LED e da jornada: o texto em mono não cabe em 3 colunas */
  .hero__led-tab{
    padding-inline: clamp(4px, 1.8vw, 7px);
    font-size: clamp(10px, 2.9vw, 12.32px);
    letter-spacing: clamp(.4px, .34vw, 1.4784px);
  }
  .jornadas__aba{
    padding-inline: clamp(6px, 2.4vw, 17px);
    padding-right: clamp(6px, 2.4vw, 17px);
    font-size: clamp(10.5px, 3vw, 13.12px);
    letter-spacing: clamp(.5px, .3vw, 1.5744px);
    text-align: center;
  }

  /* linhas rótulo/valor: deixar o rótulo quebrar em vez de estourar */
  .ref__linha, .fin__linha{
    height: auto;
    min-height: 42.281px;
    padding-block: 8px;
  }
  .ref__rotulo, .fin__rotulo{ white-space: normal; }

  /* acordeão de riscos: título longo passa a quebrar */
  .risco__cab{ align-items: flex-start; }
  .risco__title{ white-space: normal; }
  .risco__num, .risco__mais{ margin-top: 1px; }

  /* pílulas de cidade: a mais longa tem 363px e não cabe abaixo de ~410 */
  .cidade{ white-space: normal; }

  /* o rótulo dos números não cabe na coluna em 320 */
  .stats__label{ white-space: normal; }

  /* abaixo de 480 os links do rodapé não cabem numa linha */
  .rodape__nav{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 14px;
  }

  /* a etiqueta do perfil 03 tem 337px e estoura em 360 */
  .jornada__badge{
    height: auto;
    padding-bottom: 6px;
    white-space: normal;
  }

  /* etiqueta sobre a foto de campanha */
  .campanha__label{
    white-space: normal;
    padding-inline: 12px;
  }

  /* convite final */
  .convite{ padding: 32px 24px; }
  .convite__btn{
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
  }
}

/* =========================================================================
   MOTION — segue REFERENCIA-MOTION-E-FLUIDEZ.md: duração curta, easing
   natural, sem instabilidade de layout (só opacity/transform/filter/shadow),
   comportamento próprio no mobile e respeito a prefers-reduced-motion.
   `?qa=1` congela tudo no estado final — é o que garante os diffs de pixel.
   ========================================================================= */

/* ---- 1. entradas progressivas ao rolar ---- */
.revela{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s cubic-bezier(.22,1,.36,1),
              transform .62s cubic-bezier(.22,1,.36,1);
}
.revela.is-vista{ opacity: 1; transform: none; }
.is-qa .revela{ opacity: 1; transform: none; transition: none; }

/* ---- 2. anéis 70/30: o preenchimento desenha ----
   `--pct` NÃO tem valor padrão de propósito: sem ele o fallback do
   `var()` já entrega o anel cheio. Assim, se o JS não rodar ou a
   animação parar no meio, o pior caso é o anel correto e estático. */
.divisao__anel--70{
  --alvo: 70;
  background: conic-gradient(var(--j) 0 var(--pct, 70%),
                             rgba(255,255,255,.09) var(--pct, 70%));
}
.divisao__anel--30{
  --alvo: 30;
  background: conic-gradient(var(--j-light) 0 var(--pct, 30%),
                             rgba(255,255,255,.09) var(--pct, 30%));
}

/* ---- 3. botões emitem luz e crescem um pouco no cursor ---- */
.hero__btn, .hero__led-cta, .convite__btn, .form__btn,
.perfil__cta, .header__link--cta, .jornadas__aba, .hero__led-tab{
  transition: transform .24s cubic-bezier(.22,1,.36,1),
              filter .24s ease,
              box-shadow .24s ease,
              background-color .22s ease,
              border-color .22s ease,
              color .22s ease;
  will-change: transform;
}
.hero__btn:hover, .hero__led-cta:hover, .convite__btn:hover,
.form__btn:hover, .perfil__cta:hover, .header__link--cta:hover{
  transform: scale(1.028);
}
.hero__btn:active, .hero__led-cta:active, .convite__btn:active,
.form__btn:active, .perfil__cta:active{ transform: scale(.994); }

/* a luz de cada botão usa o acento que ele já carrega */
.hero__btn--primary:hover, .hero__led-cta:hover, .convite__btn:hover{
  filter: drop-shadow(0 6px 14px rgba(var(--j-rgb), .46))
          drop-shadow(0 0 22px rgba(var(--j-rgb), .28));
}
.form__btn:hover{ box-shadow: 0 0 34px rgba(18,114,245,.46); }
.header__link--cta:hover{ box-shadow: 0 0 18px rgba(18,114,245,.42); }
.hero__btn--ghost:hover{ box-shadow: 0 0 16px rgba(18,114,245,.22); }
.jornadas__aba:hover, .hero__led-tab:hover{ transform: translateY(-1px); }

/* ---- 4. a moldura tracejada das fotos ressoa ----
   Só a tracejada: a borda do cartão fica quieta. Os dois cartões pulsam
   com meio ciclo de defasagem, para o brilho parecer atravessar a dupla.
   ⚠️ `.origem` recorta, mas a folga é de 154px contra 22 de alcance. */
.caso__foto--depois{ animation: foto-ressoa 4.4s ease-in-out infinite; }
.caso:nth-child(2) .caso__foto--depois{ animation-delay: -2.2s; }

@keyframes foto-ressoa{
  0%, 100%{
    border-color: rgba(18,114,245,.85);
    box-shadow: 0 8px 18px 0 rgba(5,46,107,.45);
  }
  50%{
    border-color: rgba(120,190,255,1);
    box-shadow: 0 8px 18px 0 rgba(5,46,107,.45),
                0 0 22px 0 rgba(18,114,245,.66),
                0 0 7px 0 rgba(140,200,255,.42) inset;
  }
}
.is-qa .caso__foto--depois{ animation: none; }

/* ---- 4. molduras de baixa opacidade respirando ---- */
.destaque, .chamada, .cidade, .jornada__badge--fantasma{
  animation: moldura-respira 5.2s ease-in-out infinite;
}
.chamada{ animation-delay: -1.7s; }
.cidade{ animation-delay: -2.6s; }
.jornada__badge--fantasma{ animation-delay: -3.4s; }
@keyframes moldura-respira{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(79,163,255,0); }
  50%     { box-shadow: 0 0 16px 0 rgba(79,163,255,.20); }
}
/* a pílula da cidade em operação respira no verde da própria identidade */
.cidade--operacao{ animation-name: moldura-respira-verde; }
@keyframes moldura-respira-verde{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(58,219,126,0); }
  50%     { box-shadow: 0 0 14px 0 rgba(58,219,126,.22); }
}
.is-qa .destaque, .is-qa .chamada, .is-qa .cidade,
.is-qa .jornada__badge--fantasma{ animation: none; }

/* no mobile o movimento é mais curto e discreto — não é o desktop reduzido */
@media (max-width: 768px){
  .revela{ transform: translateY(9px); transition-duration: .48s; }
  .destaque, .chamada, .cidade, .jornada__badge--fantasma{ animation: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}