/* ==========================================================================
   Millenium Auto Escola · v2-pcd.css
   Blocos exclusivos da habilitacao-pcd.html. Carregar SEMPRE depois de v2.css.

   O hero (banner navy) saiu daqui em 14/09/2026: virou padrão das três páginas
   e mora em v2.css.
   ========================================================================== */

/* ------------------------------------------- quem se enquadra */
.split { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.split-side { align-self: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.pink {
  margin-top: 1.75rem; padding: 1.25rem 1.35rem;
  display: grid; grid-template-columns: 42px 1fr; gap: 1rem;
  background: var(--red-wash); border-radius: var(--r-card);
}
.pink .ic { width: 26px; height: 26px; color: var(--red-txt); }
.pink-ic {
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  background: var(--page); box-shadow: var(--sh-sm);
}
.pink b { display: block; color: var(--red-txt); font-weight: 800; margin-bottom: .3rem; }
.pink p { margin: 0; font-size: .97rem; }

.rows { display: grid; gap: .75rem; }
.row-it {
  color: inherit; text-decoration: none;
  display: grid; grid-template-columns: 46px 1fr 20px; gap: 1rem; align-items: center;
  padding: 1.05rem 1.2rem;
  background: var(--row); border-radius: var(--r-card);
  transition: background-color .18s ease, transform .18s ease;
}
.row-it:hover { background: var(--red-wash); transform: translateX(2px); }
.row-ic {
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  background: var(--page); box-shadow: var(--sh-sm); color: var(--red-txt);
}
.row-ic .ic { width: 25px; height: 25px; }
.row-it b { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 800; }
.row-it p { margin: .15rem 0 0; font-size: .95rem; line-height: 1.5; }
.row-it .chev { width: 20px; height: 20px; color: var(--red-txt); opacity: .75; }
@media (max-width: 560px) {
  .row-it { grid-template-columns: 46px 1fr; }
  .row-it .chev { display: none; }
}

/* ---------------------------------------------- passo a passo */
/* Grade da referência: intro ocupa as duas primeiras colunas, a foto fica na
   terceira e desce pelas duas linhas, e os passos vão em duas colunas embaixo. */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;   /* coluna da foto alargada em 10/09/2026 */
  gap: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  align-items: start;
}
.steps-grid .head { grid-column: 1 / 3; max-width: 40rem; }
.steps-grid .steps-art { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.steps-art { position: relative; }
.steps-art .photo { border-radius: var(--r-photo); overflow: hidden; box-shadow: var(--sh-md); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.steps li { position: relative; padding-left: 3.25rem; }
.steps li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: -1px;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--red); color: #FFFFFF;
  font-size: .92rem; font-weight: 800;
}
.steps b { display: block; color: var(--ink); font-size: 1rem; font-weight: 800; }
.steps span { display: block; font-size: .95rem; line-height: 1.5; }

@media (max-width: 1000px) {
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid .head { grid-column: 1 / -1; }
  /* empilhado, a foto retrato fica alta demais em largura cheia: limita a 380px */
  .steps-grid .steps-art { grid-column: 1 / -1; grid-row: auto; order: 3; max-width: 380px; }
}
@media (max-width: 700px) { .steps-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- isenção */
.iso-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.iso-top .photo { border-radius: var(--r-photo); overflow: hidden; box-shadow: var(--sh-md); }
@media (max-width: 940px) { .iso-top { grid-template-columns: 1fr; } }

.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* cartões logo abaixo de um .head, sem foto entre os dois */
.cards-top { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.card {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem;
  padding: 1.35rem 1.45rem;
  background: var(--row); border-radius: var(--r-card);
}
.card-ic {
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  background: var(--page); box-shadow: var(--sh-sm); color: var(--red-txt);
}
.card-ic .ic { width: 25px; height: 25px; }
.card h3 { margin: 0 0 .3rem; }
.card p { margin: 0; font-size: .95rem; line-height: 1.55; }
.card .tag {
  display: inline-block; margin-bottom: .45rem; padding: .15rem .6rem;
  background: var(--page); color: var(--red-txt); border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fonte { margin-top: 1.25rem; font-size: .87rem; line-height: 1.55; }
@media (max-width: 820px) { .cards2 { grid-template-columns: 1fr; } }

/* ------------------------------------------- por que + form */
.trio { display: grid; grid-template-columns: 1.05fr 1fr 1.05fr; gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem); align-items: start; }
.trio-photo { border-radius: var(--r-photo); overflow: hidden; box-shadow: var(--sh-md); max-height: 560px; }
.checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: center; color: var(--ink); font-weight: 600; font-size: .98rem; }
.check-ic {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--red); color: #FFFFFF;
}
.check-ic .ic { width: 15px; height: 15px; }
@media (max-width: 1040px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio-photo { grid-column: 1 / -1; max-height: 320px; }
  .trio-photo .ph { aspect-ratio: 21 / 9; }
  .trio-photo img.shotimg { aspect-ratio: 21 / 9; }
}
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }

/* --------------------------------------------------- CTA final */
/* faixa final lisa: as listras vermelhas diagonais do layout de referência
   saíram a pedido do cliente em 08/09/2026 */
.endcta { position: relative; background: var(--navy); text-align: center; }
.endcta h2 { color: #FFFFFF; }
.endcta p { color: var(--navy-soft); max-width: 46ch; margin-inline: auto; margin-bottom: 1.6rem; }
.endcta .cta-row { justify-content: center; }