/* =========================================================
   BUROFÁCIL — Crédito Garantia Imóvel PJ page styles
   Inherits product-page chassis from styles.css + home-equity.css
   ========================================================= */

/* ============================================================
   HERO + SIMULADOR — 50/50 split, copy left, simulator right
   ============================================================ */
.pj-hero{
  background:var(--paper);
  padding:80px 0 96px;
}
.pj-hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.pj-hero__copy{padding-right:24px}
.pj-hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(36px, 4vw, 56px);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:0 0 22px;
  text-wrap:balance;
  color:var(--ink);
}
.pj-hero__sub{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 32px;
  max-width:520px;
}
.pj-hero__badges{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}
.pj-hero__badges li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  color:var(--ink-2);
}
.pj-hero__badges svg{color:var(--ink)}

.pj-sim{
  border-radius:22px;
  padding:36px;
}
.pj-sim__hr{
  height:1px;
  background:var(--line);
  margin:8px 0 22px;
}
.pj-sim .simulator__amount{
  font-size:46px;
  margin:6px 0 22px;
}
.pj-sim .simulator__cta{
  padding:18px 22px;
  font-size:15.5px;
}

/* ============================================================
   IMÓVEIS ACEITOS — photo cards
   ============================================================ */
.pj-types{padding:96px 0}
.pj-types__head{text-align:center;margin-bottom:48px}
.pj-types__head .h2{margin:0}

.pj-types__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.type-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.type-card__photo{
  aspect-ratio: 4 / 3;
  background-size:cover;
  background-position:center;
}
.type-card__body{
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.pj-table__logo{
  height:18px;
  width:auto;
  display:inline-block;
  vertical-align:-2px;
  margin-left:4px;
}
.type-card__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0;
  color:var(--ink);
}
.type-card__sub{
  margin:0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink-2);
}

/* ============================================================
   POR QUE — comparison table
   ============================================================ */
.pj-why{padding:96px 0}
.pj-why__head{margin-bottom:44px;max-width:760px}
.pj-why__head .h2{margin:0;line-height:1.05}
.pj-why__title{font-size:clamp(32px, 3.4vw, 48px)}

.pj-table{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.pj-table__row{
  display:grid;
  grid-template-columns:1.05fr 1.4fr 1.4fr;
  align-items:center;
  border-top:1px solid var(--line);
}
.pj-table__row:first-child{border-top:0}
.pj-table__cell{
  padding:24px 28px;
  font-size:16px;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:14px;
}
.pj-table__cell svg{flex:none}
.pj-table__cell--label{
  font-family:var(--sans);
  font-weight:600;
  color:var(--ink);
  font-size:17px;
}
.pj-table__row--head .pj-table__cell{
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  padding:24px 28px;
  color:var(--ink);
  background:transparent;
}
.pj-table__row--head .pj-table__cell--label{font-size:17px}
.pj-table__row--head .pj-table__cell--reco{color:var(--orange-2)}

/* ============================================================
   COMO FUNCIONA — 5 step cards
   ============================================================ */
.pj-steps{padding:96px 0}
.pj-steps__head{text-align:center;margin-bottom:48px}
.pj-steps__head .h2{margin:0}

.pj-steps__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.pj-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  position:relative;
}
.pj-step__num{
  font-family:"DM Sans", monospace;
  font-weight:700;
  font-size:24px;
  color:var(--orange-2);
  margin:0;
  letter-spacing:0.04em;
}
.pj-step__icon{
  width:64px;height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:8px 0 6px;
  color:var(--ink);
}
.pj-step__icon svg{width:64px;height:64px}
.pj-step__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.pj-step__desc{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-2);
}
.pj-step__time{
  margin-top:auto;
  padding-top:18px;
  font-family:"DM Sans", monospace;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--orange-2);
}

/* ============================================================
   FAQ — no sticky, illustration centered (page-pj override)
   ============================================================ */
.page-pj .he-faq__art{position:static}
.page-pj .he-faq__art svg{margin:0 auto;max-width:480px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .pj-types__grid{grid-template-columns:repeat(2,1fr)}
  .pj-steps__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 980px){
  .pj-hero{padding:56px 0 72px}
  .pj-hero__grid{grid-template-columns:1fr;gap:48px}
  .pj-hero__copy{padding-right:0}
  .pj-table__row{grid-template-columns:1fr 1fr 1fr}
  .pj-table__cell{padding:18px 16px;font-size:14.5px;gap:8px}
  .pj-steps__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .pj-hero__badges{gap:14px}
  .pj-types__grid{grid-template-columns:1fr}
  .pj-table__row{grid-template-columns:1fr}
  .pj-table__row .pj-table__cell--label{padding-top:18px;padding-bottom:6px;background:var(--paper-2)}
  .pj-table__cell{padding:8px 18px}
  .pj-steps__grid{grid-template-columns:1fr}
  .pj-sim{padding:24px}
  .pj-sim .simulator__amount{font-size:36px}
}
