/* ==========================================================================
   Millenium Auto Escola · v2-lp.css
   Blocos de aulas-para-habilitados.html e cnh-carro-automatico.html.
   Carregar SEMPRE depois de v2.css.

   Vem dos dois layouts de referência aprovados em 08/09/2026: cards com foto e
   seta, colunas de diferenciais com divisória, faixa de CTA em cartão navy com
   foto, e rodapé claro. O hero das duas páginas é o banner navy de v2.css.
   ========================================================================== */

/* O hero claro (.hero-lp / .shot) saiu em 14/09/2026: as duas páginas passaram
   a usar o banner navy da PCD, que agora mora em v2.css. */

/* --------------------------------------------- cards com foto e seta */
/* o cartão rosa é bem mais alto que dois cards. Numa grade única ele esticava as
   duas linhas de cards e sobrava um vazio enorme dentro de cada um. Por isso os
   cards ficam numa grade própria, ao lado, cada um com a altura que precisa. */
.cat-wrap { display: grid; grid-template-columns: 1fr .4fr; gap: 1rem; align-items: start; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.cat {
  /* a seta entra no FLUXO, embaixo do texto: posicionada por cima ela cobria o
     rótulo sempre que título e legenda quebravam em duas linhas cada */
  display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto;
  gap: .35rem .8rem; align-content: start;
  padding: .8rem .8rem .85rem .8rem; min-height: 104px;
  background: var(--row); border-radius: var(--r-card);
  color: inherit; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.cat:hover { background: var(--red-wash); transform: translateY(-2px); }
.cat .cat-ph { grid-row: 1 / 3; border-radius: 12px; overflow: hidden; align-self: start; }
.cat .cat-txt { grid-column: 2; align-self: start; }
.cat .cat-ph .ph { aspect-ratio: 1 / 1; min-height: 68px; padding: .35rem; border-radius: 12px; }
.cat .cat-ph .ph span { font-size: .5rem; letter-spacing: .06em; line-height: 1.35; }
.cat .cat-ph img.shotimg { aspect-ratio: 1 / 1; min-height: 68px; border-radius: 12px; }
.cat b { display: block; color: var(--ink); font-size: .95rem; font-weight: 800; line-height: 1.25; }
.cat i { display: block; font-style: normal; font-size: .84rem; line-height: 1.4; margin-top: .15rem; }
.cat .cat-go {
  grid-column: 2; justify-self: end; align-self: end;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--red); color: #FFFFFF;
}
.cat .cat-go .ic { width: 14px; height: 14px; }

.cat-more {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.4rem;
  background: var(--red-wash); border-radius: var(--r-card);
}
.cat-more .card-ic { margin-bottom: .8rem; }
.cat-more h3 { margin-bottom: .8rem; }
.cat-more ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.cat-more li { display: grid; grid-template-columns: 8px 1fr; gap: .7rem; align-items: baseline; font-size: .93rem; }
.cat-more li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--red); }
.cat-more .btn { margin-top: auto; }
@media (max-width: 1080px) {
  .cat-wrap { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------- cenários em 2 colunas */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.case {
  display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start;
  padding: 1.2rem 1.3rem; background: var(--row); border-radius: var(--r-card);
}
.case .case-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);
}
.case .case-ic .ic { width: 24px; height: 24px; }
.case b { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 800; }
.case p { margin: .15rem 0 0; font-size: .95rem; line-height: 1.5; }
@media (max-width: 700px) { .cases { grid-template-columns: 1fr; } }

/* --------------------------------------- diferenciais em 4 colunas */
.why { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.why-it { display: grid; grid-template-columns: 30px 1fr; gap: .85rem; padding-inline: clamp(.75rem, 1.6vw, 1.75rem); }
.why-it:first-child { padding-left: 0; }
.why-it + .why-it { border-left: 1px solid var(--line); }
.why-it .ic { width: 28px; height: 28px; color: var(--red-txt); margin-top: .15rem; }
.why-it b { display: block; color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.3; }
.why-it span { display: block; font-size: .92rem; line-height: 1.5; margin-top: .2rem; }
@media (max-width: 900px) {
  .why { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
  .why-it:nth-child(odd) { padding-left: 0; }
  .why-it:nth-child(3) { border-left: 0; }
}
@media (max-width: 540px) {
  .why { grid-template-columns: 1fr; }
  .why-it { padding-left: 0; }
  .why-it + .why-it { border-left: 0; }
}

/* diferenciais ao lado do formulário: mesma posição do form na LP de PCD.
   Ao lado do cartão as 4 colunas não cabem, então viram lista com divisória
   horizontal. Estas regras vêm depois das de .why de propósito: empatam em
   especificidade com as das media queries acima e vencem pela ordem. */
.why-form { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
.why-form > * { min-width: 0; }
.why-form .why { grid-template-columns: 1fr; gap: 0; margin-top: .75rem; }
.why-form .why-it { padding: 1.05rem 0; }
.why-form .why-it + .why-it { border-left: 0; border-top: 1px solid var(--line); }
/* o cartão tem quase o dobro da altura da lista: a coluna do texto acompanha a
   rolagem em vez de deixar um vão embaixo dela */
@media (min-width: 941px) { .why-form > div:first-child { position: sticky; top: calc(var(--hd) + 1.5rem); } }
@media (max-width: 940px) { .why-form { grid-template-columns: 1fr; } }

/* ------------------------------------------ passo a passo em linhas */
.how { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: start; }
.how > * { min-width: 0; }
.steprows { display: grid; gap: .7rem; }
.steprow {
  display: grid; grid-template-columns: 34px 1fr; gap: 1rem; align-items: start;
  padding: .95rem 1.2rem;
  background: var(--row); border-radius: 14px;
}
.steprow .n {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--red); color: #FFFFFF; font-size: .92rem; font-weight: 800;
}
.steprow b { display: block; color: var(--ink); font-size: 1rem; font-weight: 800; }
.steprow span { display: block; font-size: .93rem; line-height: 1.5; margin-top: .1rem; }
@media (max-width: 940px) { .how { grid-template-columns: 1fr; } }

/* cartão navy com seta, na coluna do texto */
.note-card {
  position: relative; margin-top: 1.75rem;
  /* respira mais: na coluna da esquerda ele é a única peça abaixo do texto */
  display: grid; grid-template-columns: 54px 1fr; gap: 1.1rem; align-items: center;
  padding: 1.6rem 1.7rem;
  background: var(--navy); border-radius: var(--r-card);
}
.note-card .note-ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #FFFFFF;
}
.note-card .note-ic .ic { width: 28px; height: 28px; }
.note-card p { margin: 0; color: #FFFFFF; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.note-card .curve { position: absolute; right: 1.1rem; bottom: -.9rem; width: 62px; color: var(--red); }
@media (max-width: 620px) { .note-card .curve { display: none; } }

/* ------------------------------ bloco foto + lista de marcadores
   Nasceu na seção de documentos do carro automático. A seção saiu em
   14/09/2026, mas a grade serve a qualquer par "texto com lista de itens" ao
   lado de uma foto, e é usada assim em #sem-restricao e #investimento. */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; }
.docs > * { min-width: 0; }
.docs-card {
  margin-top: 1.5rem; padding: 1.35rem 1.5rem;
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-sm);
}
.docs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.docs-card li { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start; color: var(--ink); font-weight: 600; font-size: .97rem; }
.docs-card .tick {
  width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--red); color: #FFFFFF; margin-top: .1rem;
}
.docs-card .tick .ic { width: 14px; height: 14px; }
.docs-card li em { display: block; font-style: normal; font-weight: 400; color: var(--body); font-size: .9rem; }
.docs-art { position: relative; }
.docs-art .photo { border-radius: var(--r-photo); overflow: hidden; box-shadow: var(--sh-md); }
.docs-art .script {
  position: absolute; top: -1.4rem; right: 0; z-index: 2; text-align: right;
  font-family: var(--font-hand); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.25rem, .95rem + 1vw, 1.8rem); color: var(--ink); max-width: 12ch;
}
.docs-art .script .swoosh { display: block; margin-left: auto; width: 96px; color: var(--red); }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; }
  .docs-art .script { position: static; text-align: left; max-width: none; margin-bottom: .6rem; }
  .docs-art .script .swoosh { margin-left: 0; }
}

/* --------------------------------------- faixa de CTA em cartão navy */
.ctaband { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.ctaband-in {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  background: var(--navy); border-radius: 26px;
}
.ctaband-txt { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.ctaband h2 { color: #FFFFFF; }
.ctaband p { color: var(--navy-soft); max-width: 44ch; margin-bottom: 1.5rem; }
.ctaband-art { position: relative; align-self: stretch; min-height: 240px; }
.ctaband-art .photo { position: absolute; inset: 0; overflow: hidden; }
.ctaband-art .photo .ph { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.ctaband-art .photo img.shotimg { height: 100%; aspect-ratio: auto; border-radius: 0; }
.ctaband-art .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(9, 20, 38, .48) 0%, rgba(9, 20, 38, .22) 32%, rgba(9, 20, 38, 0) 62%),
    linear-gradient(90deg, var(--navy) 0%, rgba(18, 49, 95, .88) 18%, rgba(9, 20, 38, .56) 100%);
}
.ctaband-art .script {
  position: absolute; right: 7%; top: 50%; transform: translateY(-50%); z-index: 2;
  max-width: 11ch; text-align: right;
  font-family: var(--font-hand); font-weight: 700; line-height: 1.12;
  font-size: clamp(1.3rem, .95rem + 1.1vw, 1.9rem); color: #FFFFFF;
}
.ctaband-art .script .swoosh { display: block; margin-left: auto; width: 104px; color: var(--red); }
@media (max-width: 900px) {
  .ctaband-in { grid-template-columns: 1fr; }
  .ctaband-art { min-height: 190px; order: 2; }
}

/* ------------------------------------------------------------- FAQ */
/* mesma mecânica do v2.css, mas em duas colunas com a arte à direita */
.faq-two { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
.faq-two > * { min-width: 0; }
.faq-side { padding-top: 1rem; text-align: center; }
.faq-side .hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); line-height: 1.15;
  color: var(--ink); margin: 0 0 1.25rem;
}
.faq-side .hand i { font-style: normal; color: var(--red-txt); }
@media (max-width: 940px) { .faq-two { grid-template-columns: 1fr; } .faq-side { padding-top: 2rem; } }