/* ==========================================================================
   Páginas de categoria (Imóveis, Automóveis...), complementa style.css.
   Ordem do padrão: hero centrado -> "a forma mais inteligente" -> planos em
   destaque -> como funciona -> simulador -> dúvidas -> rodapé.
   ========================================================================== */

/* Nessas páginas o bem já está definido: esconde o toggle Imóvel/Automóvel */
.pagina-bem .sim-seg[data-grupo="bem"] { display: none; }
.pagina-bem .sim-topo { justify-content: center; }

/* ==========================================================================
   HERO CENTRADO
   ========================================================================== */
.hero-centro { border-radius: 0 0 28px 28px; }

/* Foto de fundo do hero, definida por página com --hero-foto.
   ATENÇÃO: o caminho é relativo a este CSS (css/), não ao HTML → "../img/".
   Escurecida e levemente desfocada: vira ambientação, sem competir com o
   texto (contraste ~10:1 no pior caso). */
.hero-centro[style*="--hero-foto"] {
  background: #0b1917;
}

.hero-centro[style*="--hero-foto"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-foto) center / cover no-repeat;
  filter: brightness(0.58) saturate(0.75) blur(2px);
  transform: scale(1.06); /* evita bordas claras por causa do blur */
}

.hero-centro[style*="--hero-foto"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(11, 25, 23, 0.78) 0%,
    rgba(11, 25, 23, 0.64) 45%,
    rgba(11, 25, 23, 0.85) 100%
  );
}

/* conteúdo acima das camadas da foto */
.hero-centro[style*="--hero-foto"] .hero-centro-inner,
.hero-centro[style*="--hero-foto"] .hero-tex {
  z-index: 2;
}

.hero-centro-inner {
  position: relative;
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
  padding: 6.5rem 0 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-centro .hero-title { max-width: 14em; }

.hero-centro .hero-sub {
  max-width: 36rem;
  margin-inline: auto;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.hero-chips span {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 220, 174, 0.3);
  background: rgba(127, 220, 174, 0.08);
  color: var(--verde-claro);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ==========================================================================
   A FORMA MAIS INTELIGENTE
   ========================================================================== */
.int { padding: 5.5rem 0; }

.int-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}
.int-grid > * { min-width: 0; }

.int-lead {
  margin: 1.4rem 0 1rem;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tinta);
}

.int-texto .texto-secao { margin-top: 0.9rem; max-width: none; }

.int-nota {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--verde);
  border-radius: 0 12px 12px 0;
  background: rgba(14, 107, 86, 0.07);
}
.int-nota svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; color: var(--verde); }
.int-nota p { font-size: 0.92rem; color: var(--texto); }
.int-nota b { color: var(--verde); }

.int-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.8rem;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--branco);
  overflow: hidden;
}
.int-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.int-stat + .int-stat { border-left: 1px solid var(--linha); }
.int-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.int-stat-valor {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -0.01em;
}

/* ---------- Coluna da foto ---------- */
.int-media { position: relative; }

.int-foto {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  border-radius: var(--raio);
  background: linear-gradient(160deg, #1b3d34, #0e2a24);
}

/* foto real */
img.int-foto {
  display: block;
  /* height:auto é necessário para o aspect-ratio vencer o atributo
     height="900" do HTML (que serve só para reservar espaço no carregamento) */
  height: auto;
  object-fit: cover;
}

/* placeholder das páginas que ainda não receberam foto */
div.int-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background:
    radial-gradient(20rem 14rem at 80% 10%, rgba(127, 220, 174, 0.25), transparent 60%),
    linear-gradient(160deg, #1b3d34, #0e2a24);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  text-align: center;
}
div.int-foto svg { width: 55%; }

.int-badge-topo {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(11, 25, 23, 0.2);
}
.int-badge-topo i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27c281;
}

.int-badge-exp {
  position: absolute;
  left: -1rem;
  bottom: 5.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0.8rem 1.2rem;
  border-radius: 14px;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 14px 30px rgba(11, 25, 23, 0.35);
  border: 1px solid rgba(127, 220, 174, 0.25);
}
.int-badge-exp b { font-family: var(--f-display); font-size: 1.2rem; color: var(--verde-claro); }
.int-badge-exp small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); }

.int-legenda {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: rgba(11, 25, 23, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
}
.int-legenda b { font-size: 0.95rem; }
.int-legenda span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); }

/* ==========================================================================
   PLANOS EM DESTAQUE
   ========================================================================== */
.dest { padding: 5rem 0; }

.dest-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}

.dest-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: var(--branco);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(11, 25, 23, 0.12);
}
.dest-card.is-destaque {
  border-color: var(--verde);
  box-shadow: 0 16px 36px rgba(14, 107, 86, 0.16);
}

.dest-card-media {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(14rem 8rem at 85% 0%, rgba(127, 220, 174, 0.18), transparent 60%),
    linear-gradient(160deg, var(--g1, #1b3d34), var(--g2, #0e2a24));
}
.dest-card-media > svg { width: 55%; max-height: 70%; }

.dest-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(11, 25, 23, 0.72);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.dest-tag-verde { background: var(--verde); }

.dest-card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
}
.dest-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.dest-card-valor {
  margin-top: 0.2rem;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.dest-card-texto {
  margin: 0.6rem 0 1.2rem;
  flex: 1;
  font-size: 0.92rem;
  color: var(--texto-suave);
}

.dest-card-btn {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1.5px solid var(--linha);
  border-radius: 12px;
  background: none;
  font-family: var(--f-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dest-card-btn:hover { border-color: var(--verde); color: var(--verde); }
.dest-card-btn.is-cheio { background: var(--verde); border-color: var(--verde); color: #fff; }
.dest-card-btn.is-cheio:hover { background: var(--verde-escuro); color: #fff; }

.dest-obs {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ==========================================================================
   COMO FUNCIONA (passo a passo)
   ========================================================================== */
.passos { padding: 5rem 0; }

.passos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.6rem;
}

.passo {
  position: relative;
  padding: 2.2rem 2.4rem 2.4rem 0;
}
.passo:nth-child(even) { padding-left: 2.4rem; padding-right: 0; }
.passo:nth-child(even)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--linha);
}
.passo:nth-child(n + 3)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 2.4rem;
  height: 1px;
  background: var(--linha);
}
.passo:nth-child(even):nth-child(n + 3)::after { left: 2.4rem; right: 0; }

.passo-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.passo-num {
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(14, 107, 86, 0.18);
}
.passo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 12px;
  background: rgba(14, 107, 86, 0.1);
  color: var(--verde);
}
.passo-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.passo-kicker {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.passo h3 {
  margin-top: 0.35rem;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--tinta);
}
.passo p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--texto-suave); }

/* ==========================================================================
   FAIXA DE CTA (usada em "A JotaCon" e "Outros Consórcios")
   ========================================================================== */
.cta-banda {
  padding: 3.5rem 0;
  background:
    radial-gradient(40rem 20rem at 85% 0%, rgba(127, 220, 174, 0.16), transparent 60%),
    linear-gradient(155deg, #11332b, var(--tinta));
  color: #fff;
}

.cta-banda-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-banda h2 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

/* :not(.chip) para não apagar a cor do selo (.chip-claro) que vem antes do h2 */
.cta-banda p:not(.chip) {
  margin-top: 0.7rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.72);
}

.cta-banda .chip { margin-bottom: 0.9rem; }

/* ==========================================================================
   FAIXA DO SIMULADOR
   ========================================================================== */
.sim-faixa { padding: 4.5rem 0; }
.sim-faixa-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3rem;
  align-items: center;
}
.sim-faixa-grid > * { min-width: 0; }

/* desfaz o `position: sticky` do card na LP principal, mas com `relative`,
   nunca `static`: a foto de fundo (::before) precisa se ancorar no card.
   Com `static` ela escapa e cobre a tela inteira. */
.sim-faixa .sim { position: relative; }
/* a foto de fundo do simulador (--sim-foto) fica em style.css, que é comum
   a todas as páginas */

.sim-faixa-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin-top: 1.1rem;
}

/* ==========================================================================
   DÚVIDAS (FAQ)
   ========================================================================== */
.faq2 { padding: 5rem 0 5.5rem; }

.faq2-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3.5rem;
  align-items: start;
}
.faq2-grid > * { min-width: 0; }

.faq2-cta {
  margin-top: 1.8rem;
  padding: 1rem 2rem;
}
.faq2-cta svg { width: 19px; height: 19px; }

.faq2-horario {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.faq-lista { display: flex; flex-direction: column; gap: 0.8rem; }

.faq-item {
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--branco);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.faq-item:hover, .faq-item.is-open {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 25, 23, 0.08);
}

.faq-perg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: none;
  background: none;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.faq-item.is-open .faq-perg { color: var(--verde); }

.faq-mais {
  position: relative;
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
}
.faq-mais::before, .faq-mais::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--verde);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.faq-mais::before { width: 100%; height: 2px; }
.faq-mais::after { width: 2px; height: 100%; }
.faq-item.is-open .faq-mais::after { transform: rotate(90deg); }

.faq-resp {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-resp-inner {
  padding: 0 1.4rem 1.3rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--texto-suave);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .int-grid, .sim-faixa-grid, .faq2-grid { grid-template-columns: 1fr; }
  .sim-faixa .sim { max-width: 34rem; margin-inline: auto; }
  .int-media { max-width: 30rem; margin-inline: auto; }
  .int-badge-exp { left: -0.4rem; }
  .dest-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hero-centro-inner { padding: 4.5rem 0 4rem; }

  /* ---------- Blocos que estouravam no celular ---------- */

  /* 3 colunas não cabem em 375px: "+R$ 150 mi" ficava cortado */
  .int-stats { grid-template-columns: 1fr; }
  .int-stat + .int-stat {
    border-left: none;
    border-top: 1px solid var(--linha);
  }
  .int-stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 0.85rem 1.1rem;
  }

  /* o badge saía da caixa com `right` negativo e encostava na borda da tela */
  .int-badge-topo {
    right: 0.75rem;
    left: 0.75rem;
    justify-content: center;
    text-align: center;
  }
  .int-badge-exp { left: 0; }

  /* Mesma correção do hero da LP principal: em tela estreita o `cover` mostra
     só uma faixa da foto, desloca o enquadramento para onde está o assunto. */
  .hero-centro[style*="--hero-foto"]::before {
    background-position: 68% center;
  }

  .dest-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
    scrollbar-width: none;
  }
  .dest-grid::-webkit-scrollbar { display: none; }
  .dest-card { flex: 0 0 262px; scroll-snap-align: center; }

  .passos-grid { grid-template-columns: 1fr; }
  .passo, .passo:nth-child(even) { padding: 1.8rem 0; }
  .passo:nth-child(even)::before { display: none; }
  .passo:nth-child(n + 2)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--linha);
  }
}