/* =========================================================
   Home Equity — estilos exclusivos desta página.
   Usa os tokens, o header, o rodapé, o FAQ, a garantia e o
   bloco de Instagram que já vivem em style.css.
   Breakpoints iguais aos do resto do site:
   mobile <=767px | tablet 768–1024px | desktop >1024px
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.he-hero{
  background-color:#050B2C;
  background-image:url("../img/homeequity/hero.webp");
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  min-height:970px;
  padding:var(--topbar-h) 0 60px;
  display:flex;flex-direction:column;
  /* O selo entra com translate de 100% da própria largura; sem o clip
     horizontal ele alarga o documento durante os 2s da animação. */
  overflow-x:clip;
}
.he-hero__inner{
  width:100%;max-width:var(--content);margin:auto;
  display:flex;flex-direction:row;align-items:center;gap:20px;
  padding:0 20px;
}
.he-hero__card{
  width:560px;flex:0 1 auto;min-width:0;
  padding:40px;
  border:1px solid #FFFFFF99;border-radius:16px;
  background:#FAFDFFD9;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.he-hero__title{
  color:var(--navy);font-family:"Inter","Inter Fallback",sans-serif;
  font-size:32px;font-weight:700;line-height:1.25;margin-bottom:22px;
}
.he-hero__title span{color:var(--blue-on-light)}
.he-hero__badge{
  width:320px;flex:0 1 auto;min-width:0;align-self:flex-end;
  margin:0 0 40px auto;
}

/* Três diferenciais em linha dentro do cartão */
.he-facts{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 18px;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #0B10201F;
}
.he-facts li{
  flex:1 1 150px;min-width:0;
  display:flex;align-items:flex-start;gap:10px;
  color:var(--navy);font-size:13px;line-height:1.4;
}
.he-facts b{font-weight:700}
.he-facts__glyph{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-surface);color:#fff;
}
.he-facts__glyph svg{width:15px;height:15px}

/* Campo "De quanto você precisa?" */
.he-sim{display:flex;flex-direction:column;align-items:stretch;gap:0}
.he-sim__label{
  color:var(--blue-on-light);font-family:"Inter","Inter Fallback",sans-serif;
  font-size:28px;font-weight:700;line-height:1.2;text-align:center;
}
.he-sim__input{
  width:100%;height:56px;margin-top:6px;
  background:transparent;border:0;border-bottom:2px solid var(--blue-on-light);
  color:var(--blue-on-light);font-family:inherit;font-size:24px;font-weight:600;
  text-align:center;
}
.he-sim__input::placeholder{color:var(--blue-on-light);opacity:.55}
.he-sim__input:focus{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.he-sim__nota{
  margin:10px 0 0;color:#5A5F72;font-size:12px;text-align:center;
}
.he-sim__cta{
  margin-top:18px;width:100%;
  font-weight:700;letter-spacing:.04em;padding:22px;
}

.he-social-proof{
  display:flex;align-items:center;gap:12px;margin-top:20px;
}
.he-social-proof img{width:133px;height:41px;flex:0 0 auto}
.he-social-proof p{margin:0;color:var(--navy);font-size:13px;line-height:1.4}

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.he-diff{background:#F1F1F1;padding:80px 0}
.he-diff__inner{
  width:100%;max-width:var(--content);margin:0 auto;padding:0 20px;
  display:flex;flex-direction:row;align-items:center;gap:40px;
}
.he-diff__title{
  width:330px;flex:0 1 auto;min-width:0;
  font-family:"Inter","Inter Fallback",sans-serif;font-size:30px;font-weight:700;
  color:var(--navy);line-height:1.3;
}
.he-diff__title .headline__dyn{font-weight:700}
.he-diff__grid{
  flex:1 1 0;min-width:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.he-diff__card{
  background:#fff;border:1px solid #0B10201A;border-radius:10px;padding:22px;
  transition:transform .3s, box-shadow .3s;
}
.he-diff__card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.he-diff__card h3{
  color:var(--blue-on-light);font-size:20px;font-weight:700;margin-bottom:8px;
}
.he-diff__card p{margin:0;color:#4B5165;font-size:13px;line-height:1.5}

/* =========================================================
   VÍDEO
   ========================================================= */
.he-video-band{background:#F1F1F1;padding:0 0 80px}
.he-video-band__inner{
  width:100%;max-width:900px;margin:0 auto;padding:0 20px;
}
.he-video-band .video{border-radius:14px;box-shadow:0 20px 50px -30px rgba(0,0,0,.7)}

/* =========================================================
   BLOCOS TEXTO + ARTE
   ========================================================= */
.he-split{background:#fff;padding:80px 0}
.he-split__inner{
  width:100%;max-width:var(--content);margin:0 auto;padding:0 20px;
  display:flex;flex-direction:row;align-items:center;gap:60px;
}
.he-split__inner--reverse{flex-direction:row-reverse}
.he-split__text{flex:1 1 0;min-width:0}
.he-split__title{
  color:var(--navy);font-family:"Inter","Inter Fallback",sans-serif;
  font-size:34px;font-weight:700;line-height:1.25;margin-bottom:20px;
}
.he-split__title span{color:var(--blue-on-light)}
.he-split__text p{color:#3B4055;font-size:16px;line-height:1.7}
.he-split__cta{margin-top:24px}
.he-split__art{flex:0 1 auto;min-width:0;width:520px;height:auto}

/* =========================================================
   POR QUE ESCOLHER
   ========================================================= */
.he-why{background:#F1F1F1;padding:80px 0}
.he-why__inner{
  width:100%;max-width:var(--content);margin:0 auto;padding:0 20px;
  display:flex;flex-direction:row;align-items:center;gap:60px;
}
.he-why__text{flex:1 1 0;min-width:0}
.he-why__title{
  color:var(--navy);font-family:"Inter","Inter Fallback",sans-serif;
  font-size:34px;font-weight:700;line-height:1.25;margin-bottom:20px;
}
.he-why__title span{color:var(--blue-on-light)}
.he-why__text p{color:#3B4055;font-size:16px;line-height:1.7}
.he-why__chart{flex:0 1 auto;min-width:0;display:block;width:560px}
.he-why__chart img{width:100%;height:auto}

/* =========================================================
   VANTAGENS
   O gráfico do bloco acima já traz esses seis pontos desenhados, então
   no desktop e no tablet a lista seria repetição — igual ao site original,
   ela existe só no mobile, onde o gráfico entra na versão reduzida.
   ========================================================= */
.he-perks{display:none}

/* =========================================================
   JORNADA
   ========================================================= */
.he-journey{background:#F1F1F1;position:relative;padding:80px 0 90px}
.he-journey__inner{
  width:100%;max-width:900px;margin:0 auto;padding:0 20px;
}
.he-journey__title{
  font-family:"Inter","Inter Fallback",sans-serif;font-size:38px;font-weight:700;
  color:var(--navy);text-align:center;margin-bottom:50px;
}
.he-journey__title .headline__dyn{font-weight:700}

/* list-style:none aqui e não no reset: o reset de style.css zera só <ul>, e
   os números "01…04" já estão no texto — sem isso a marcação nativa do <ol>
   aparece duplicada ("1. 01 Simule"). O padding-left é a calha da timeline. */
.he-steps{
  list-style:none;margin:0;
  position:relative;display:flex;flex-direction:column;gap:34px;
  padding-left:34px;
}
/* A linha da timeline é um pseudo-elemento, não uma borda do <ol>:
   assim ela pode parar na altura do último marcador em vez de descer
   até o fim do último parágrafo. */
.he-steps::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:2px;background:linear-gradient(#377DFF, #377DFF00);
}
.he-step{position:relative}
.he-step::before{
  content:"";position:absolute;left:-34px;top:7px;
  width:12px;height:12px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px #377DFF26;
}
.he-step h3{
  color:var(--navy);font-family:"Inter","Inter Fallback",sans-serif;
  font-size:21px;font-weight:700;line-height:1.3;margin-bottom:8px;
}
.he-step__num{color:var(--blue-on-light)}
.he-step p{margin:0;color:#4B5165;font-size:15px;line-height:1.65}
.he-journey__cta{margin-top:44px}
.he-journey .he-journey__cta{display:inline-flex}

/* =========================================================
   TABLET  (<=1024px)
   ========================================================= */
@media (max-width:1024px){
  .he-hero{
    min-height:820px;
    background-image:url("../img/homeequity/hero-tablet.webp");
  }
  .he-hero__inner{flex-direction:column;align-items:stretch;gap:0}
  .he-hero__card{width:100%;max-width:620px;margin:0 auto;padding:30px}
  .he-hero__title{font-size:26px}
  .he-hero__badge{width:280px;margin:24px auto 0;align-self:center}

  .he-diff{padding:60px 0}
  .he-diff__inner{flex-direction:column;align-items:stretch;gap:28px}
  .he-diff__title{width:100%;text-align:center;font-size:26px}
  .he-diff__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

  .he-split,.he-why{padding:60px 0}
  .he-split__inner,.he-why__inner{gap:32px}
  .he-split__title,.he-why__title{font-size:28px}
  .he-split__art{width:44%}
  .he-why__chart{width:46%}

  .he-journey{padding:60px 0 70px}
  .he-journey__title{font-size:30px;margin-bottom:36px}
}

/* =========================================================
   MOBILE  (<=767px)
   ========================================================= */
@media (max-width:767px){
  .he-hero{
    min-height:0;padding:var(--topbar-h) 0 40px;
    background-image:url("../img/homeequity/hero-mobile.webp");
    /* Encaixada na largura em vez de `cover`: a arte é mais alta que larga
       e o cover a ampliava até a foto virar só um recorte. */
    background-size:100% auto;
  }
  .he-hero__inner{padding:0 20px;margin-top:150px}
  .he-hero__card{max-width:none;padding:24px 18px}
  .he-hero__title{font-size:21px;margin-bottom:18px}
  .he-facts{flex-direction:column;gap:12px;padding-bottom:20px;margin-bottom:20px}
  .he-facts li{flex:0 0 auto;font-size:14px}
  .he-sim__label{font-size:22px}
  .he-sim__input{font-size:21px;height:50px}
  .he-sim__cta{padding:20px;font-size:15px}
  .he-social-proof{justify-content:center;margin-top:18px}
  .he-hero__badge{width:70%;max-width:250px;margin:18px 0 0 auto;align-self:flex-end}

  .he-diff{padding:44px 0}
  .he-diff__inner{gap:22px}
  .he-diff__title{font-size:22px}
  .he-diff__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .he-diff__card{padding:18px}
  .he-diff__card h3{font-size:18px}

  .he-video-band{padding:0 0 44px}

  .he-split,.he-why{padding:44px 0}
  .he-split__inner,.he-split__inner--reverse,.he-why__inner{
    flex-direction:column;align-items:stretch;gap:24px;
  }
  .he-split__title,.he-why__title{font-size:23px;text-align:center}
  .he-split__text p,.he-why__text p{font-size:15px}
  .he-split__cta{align-self:stretch;text-align:center;padding:20px}
  .he-split__art,.he-why__chart{width:100%;align-self:center}

  /* No mobile o gráfico vem na versão reduzida e os seis pontos ganham
     cartões próprios — é onde a lista deixa de ser repetição. */
  .he-perks{display:block;background:#F1F1F1;padding:0 0 44px}
  .he-perks__inner{width:100%;max-width:var(--content);margin:0 auto;padding:0 20px}
  .he-perks__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .he-perk{
    background:#fff;border:1px solid #0B10201A;border-radius:10px;padding:18px;
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;
  }
  .he-perk img{grid-column:1;grid-row:1 / span 2;width:auto;height:52px;max-width:60px}
  .he-perk h3{grid-column:2;grid-row:1;color:var(--blue-on-light);font-size:17px;font-weight:700}
  .he-perk p{grid-column:2;grid-row:2;margin:0;color:#4B5165;font-size:13px;line-height:1.5}

  .he-journey{padding:44px 0 50px}
  .he-journey__title{font-size:24px;margin-bottom:28px}
  .he-steps{gap:26px;padding-left:26px}
  .he-steps::before{left:4px}
  .he-step::before{left:-26px;width:10px;height:10px}
  .he-step h3{font-size:18px}
  .he-step p{font-size:14px}
  .he-journey__cta{display:flex;width:100%;padding:22px}
}