/* ==========================================================================
   Millenium Auto Escola · v2.css
   FUNDAÇÃO do sistema visual v2, compartilhada pelas três landing pages.

   Vem do layout de referência aprovado: azul-marinho institucional + vermelho
   da marca sobre fundo claro. Aqui ficam só as peças que as três páginas usam
   (tokens, tipografia, botões, cabeçalho, menu, barra fixa, botão flutuante
   de WhatsApp, banner navy do hero, placeholder de foto, faixa de apoio,
   formulário, FAQ e revelação no scroll).

   Os blocos de cada página ficam em:
     v2-pcd.css  · habilitacao-pcd.html
     v2-lp.css   · aulas-para-habilitados.html e cnh-carro-automatico.html

   Ganchos de JS de main.js (não renomear):
     [data-link] [data-msg] [data-year] [data-reveal] #drawer .burger .drawer .close
     .faq-q + .faq-a · form[data-lead] .inp .field .err .hint .form-msg .btn.loading
     .wa .wa-btn .wa-panel .wa-close

   Sistema de forma: botão pill · card 18px · input 12px · foto 24px.

   TEMA CLARO, SEM VARIANTE ESCURA. Não reintroduzir @media (prefers-color-scheme: dark):
   o layout aprovado é claro, e com o bloco escuro quem usa o sistema no modo escuro
   via a página inteira invertida.
   ========================================================================== */

:root {
  color-scheme: light;   /* trava: a página é clara, sem variante escura */

  /* Azul institucional */
  --navy:      #12315F;
  --navy-soft: #C9D6E8;   /* texto sobre navy, 8,7:1 */

  /* Vermelho da marca (do logo, sinal PARE) */
  --red:      #DC2A20;    /* preenchimento: botão, número, ícone em círculo. Branco em cima: 4,8:1 */
  --red-dark: #B92018;    /* hover */
  --red-txt:  #CE241A;    /* texto e ícone vermelhos sobre fundo claro, 5,4:1 no branco */
  --red-navy: #FF8A7E;    /* vermelho legível sobre navy, 5,6:1 */
  --red-wash: #FDEDEC;    /* card rosa */

  /* Superfícies e texto */
  --page: #FFFFFF;
  --soft: #F4F7FB;        /* seção alternada */
  --row:  #EEF3F9;        /* linha de lista, card sobre fundo claro */
  --card: #FFFFFF;
  --ink:  #12315F;        /* títulos, 12,9:1 no branco */
  --body: #556579;        /* corpo, 6,0:1 no branco */
  --line: #DCE4EF;

  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe UI', cursive;

  --wrap: 1200px;
  --r-card: 18px;
  --r-inp: 12px;
  --r-photo: 24px;
  --hd: 78px;

  --sh-sm: 0 1px 2px rgba(18, 49, 95, .05), 0 6px 18px rgba(18, 49, 95, .06);
  --sh-md: 0 2px 6px rgba(18, 49, 95, .06), 0 22px 50px rgba(18, 49, 95, .10);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.ic { width: 22px; height: 22px; flex: none; }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); font-weight: 700; letter-spacing: -.012em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

section { padding-block: clamp(3rem, 1.8rem + 4.6vw, 5.25rem); }
/* trilha de grade nunca é inflada pelo min-content de uma foto com aspect-ratio */
.hero-in > *, .split > *, .steps-grid > *, .iso-top > *, .trio > *, .faq-in > * { min-width: 0; }
section[id] { scroll-margin-top: calc(var(--hd) + 14px); }
.band-soft { background: var(--soft); }

.eyebrow {
  display: block; margin: 0 0 .7rem;
  color: var(--red-txt);
  font-size: .75rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.head { max-width: 34rem; }
.head h2 { margin-bottom: .5rem; }

/* ------------------------------------------------------- botões */
.btn {
  --bg: var(--red); --fg: #FFFFFF; --bd: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .7rem 1.6rem;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bd); border-radius: 999px;
  font-size: .98rem; font-weight: 700; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover { --bg: var(--red-dark); --bd: var(--red-dark); box-shadow: 0 10px 24px rgba(220, 42, 32, .3); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--red-txt); outline-offset: 3px; }
.btn.sm { min-height: 44px; padding: .45rem 1.15rem; font-size: .92rem; }
.btn.full { width: 100%; }
.btn .ic { width: 20px; height: 20px; }

.btn.line { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn.line:hover { --bg: transparent; --bd: var(--ink); box-shadow: none; }
.btn.on-navy { --bg: transparent; --fg: #FFFFFF; --bd: rgba(255, 255, 255, .5); }
.btn.on-navy:hover { --bg: rgba(255, 255, 255, .12); --bd: #FFFFFF; box-shadow: none; }
.btn.on-navy:focus-visible { outline-color: #FFFFFF; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------------------------- header */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: 1rem; height: var(--hd); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
.brand img { height: 42px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav .lnk {
  font-size: .93rem; font-weight: 600; color: var(--ink);
  text-decoration: none; opacity: .82;
}
.nav .lnk:hover { opacity: 1; color: var(--red-txt); }
.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: 2px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
}
@media (max-width: 1040px) {
  .nav .lnk, .nav .nav-cta { display: none; }
  .burger { display: inline-flex; }
}

.drawer {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--page); padding: 0 1.5rem 1.5rem; flex-direction: column;
}
.drawer.open { display: flex; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--hd); }
.drawer .lnk {
  font-size: 1.28rem; font-weight: 700; color: var(--ink); text-decoration: none;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: 1.4rem; }
.drawer .close {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
}

/* barra fixa de contato no mobile */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--page); border-top: 1px solid var(--line);
}
.mbar .btn { flex: 1; min-height: 50px; }
.mbar .btn.line { flex: 0 0 auto; padding-inline: 1.1rem; }
@media (max-width: 760px) {
  .mbar { display: flex; }
  body { padding-bottom: 78px; }
}

/* -------------------------------------- botão flutuante de WhatsApp
   Pedido do cliente em 14/09/2026: o mesmo atalho nas cinco páginas, com um
   formulário curto dentro. O envio reaproveita form[data-lead] do main.js, ou
   seja, valida, monta a mensagem e abre o WhatsApp. Continua sem backend:
   nenhum dado é gravado em servidor.

   No mobile ele sobe acima da .mbar, senão ficaria em cima da barra fixa.
   Vermelho da marca de propósito: é a cor de todo CTA de WhatsApp do site, e
   um verde aqui seria a única peça fora do sistema. */
.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50;
  display: grid; justify-items: end; gap: .7rem;
}
@media (max-width: 760px) {
  .wa { bottom: calc(78px + .7rem + env(safe-area-inset-bottom)); right: .9rem; }
}

.wa-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 56px; padding: .5rem 1.3rem .5rem 1rem;
  background: var(--red); color: #FFFFFF;
  border: 0; border-radius: 999px; box-shadow: var(--sh-md);
  font-family: var(--font); font-size: .96rem; font-weight: 700; cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}
.wa-btn:hover { background: var(--red-dark); }
.wa-btn:active { transform: translateY(1px); }
.wa-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.wa-btn .ic { width: 26px; height: 26px; }
.wa-btn .i-fecha { display: none; }
.wa-btn[aria-expanded="true"] .i-abre { display: none; }
.wa-btn[aria-expanded="true"] .i-fecha { display: block; }
@media (max-width: 560px) {
  .wa-btn { width: 56px; padding: .5rem; justify-content: center; }
  .wa-btn .wa-txt { display: none; }
}

.wa-panel {
  width: min(22rem, calc(100vw - 2.2rem));
  max-height: min(76vh, 34rem); overflow-y: auto;
  background: var(--row);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-md);
}
.wa-panel[hidden] { display: none; }
.wa-head {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.05rem 1.15rem;
  background: var(--navy); border-radius: var(--r-card) var(--r-card) 0 0;
}
.wa-head b { display: block; color: #FFFFFF; font-size: 1.02rem; line-height: 1.25; }
.wa-head span { display: block; margin-top: .2rem; color: var(--navy-soft); font-size: .84rem; line-height: 1.45; }
.wa-close {
  margin-left: auto; flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #FFFFFF;
  border: 0; border-radius: 999px; cursor: pointer;
}
.wa-close:hover { background: rgba(255, 255, 255, .26); }
.wa-close:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.wa-close .ic { width: 18px; height: 18px; }
.wa-form { padding: 1.15rem 1.15rem 1.25rem; }
.wa-form .field { margin-bottom: .8rem; }
.wa-form textarea.inp { min-height: 72px; }
.wa-form .form-legal { margin-top: .8rem; }

/* ----------------------------------------------- banner navy (hero)
   Nasceu na habilitacao-pcd.html e virou o padrao das tres paginas em
   14/09/2026, a pedido do cliente: mesmo banner navy com foto mascarada e
   selo, para o site nao ter dois tipos de abertura. */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.hero-in {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.02fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center;
}
.hero h1 { color: #FFFFFF; }
.hero .eyebrow { color: var(--red-navy); }
.hero p { color: var(--navy-soft); max-width: 44ch; margin-bottom: 1.75rem; }
/* strong herda var(--ink), que é o próprio navy: sobre o banner ele sumia */
.hero strong { color: #FFFFFF; }

.hero-art { position: relative; }   /* ancora o .hero-badge */
.hero-photo {
  position: relative;
  border-radius: var(--r-photo) 96px var(--r-photo) var(--r-photo);
  overflow: hidden;
}
.hero-badge {
  position: absolute; top: -16px; right: -18px; z-index: 3;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .95rem;
  background: var(--page); color: var(--ink);
  border-radius: 14px; box-shadow: var(--sh-md);
  font-size: .78rem; font-weight: 800; line-height: 1.2; max-width: 12.5rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.hero-badge .ic { width: 30px; height: 30px; color: var(--navy); }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { order: 2; }
}


/* selo do banner sem icone, so texto (usado quando nao ha simbolo que
   traduza a mensagem melhor que a propria frase) */
.hero-badge.txt { max-width: 14rem; }

/* placeholder de foto: fica no ar até a foto real chegar (ver IMAGE-PROMPTS.md).
   Mantém a mesma máscara da foto final, então a troca é só de tag. */
.ph {
  display: grid; place-items: center; text-align: center; padding: 1.75rem;
  width: 100%; aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(115deg, rgba(220, 42, 32, .10) 0 14px, transparent 14px 36px),
    linear-gradient(160deg, var(--row), var(--card));
  background-color: var(--row);   /* cor real de fundo: o gradiente sozinho deixa a caixa
                                     transparente e o rótulo cairia sobre o navy do hero */
  border: 1px dashed rgba(18, 49, 95, .25);
  border-radius: inherit;
}
.ph span {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--body); max-width: 24ch; line-height: 1.55;
}
.ph.wide { aspect-ratio: 16 / 9; }
.ph.tall { aspect-ratio: 3 / 4; }

/* Foto real no lugar do bloco placeholder (10/09/2026).
   Espelha as proporcoes que o .ph tinha, para o layout nao mudar na troca. */
img.shotimg {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: inherit;
  aspect-ratio: 4 / 3;
}
img.shotimg.wide { aspect-ratio: 16 / 9; }
img.shotimg.tall { aspect-ratio: 3 / 4; }
img.shotimg.portrait { aspect-ratio: 4 / 5; }

/* ------------------------------------------------------- faixa */
section.strip { padding-block: 0; background: var(--page); border-bottom: 1px solid var(--line); }
.strip-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}
.strip-it { display: flex; gap: .85rem; padding-inline: clamp(.75rem, 1.6vw, 1.75rem); }
.strip-it + .strip-it { border-left: 1px solid var(--line); }
.strip-it .ic { width: 30px; height: 30px; color: var(--red-txt); margin-top: .15rem; }
.strip-it b { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.strip-it span { font-size: .9rem; line-height: 1.45; display: block; margin-top: .15rem; }
@media (max-width: 900px) {
  .strip-in { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0; }
  .strip-it:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) {
  .strip-in { grid-template-columns: 1fr; }
  .strip-it + .strip-it { border-left: 0; }
}

/* --------------------------------------------------- formulário */
.form-card {
  background: var(--row); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
}
.form-card h3 { font-size: 1.28rem; margin-bottom: .3rem; }
.form-sub { font-size: .95rem; margin-bottom: 1.4rem; }
.field { display: grid; gap: .4rem; margin-bottom: .95rem; }
.field label { color: var(--ink); font-size: .9rem; font-weight: 700; }
.field .hint { font-size: .83rem; }
.inp {
  width: 100%; min-height: 50px; padding: .7rem .95rem;
  background: var(--page); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-inp);
  font-family: var(--font); font-size: 1rem;
}
.inp::placeholder { color: var(--body); opacity: 1; }
.inp:focus-visible { outline: 3px solid var(--red-txt); outline-offset: 1px; border-color: var(--red-txt); }
.field.bad .inp { border-color: var(--red-txt); background: var(--red-wash); }
textarea.inp { min-height: 92px; resize: vertical; }
.field .err { display: none; font-size: .85rem; font-weight: 700; color: var(--red-txt); margin: 0; }
.field.bad .err { display: block; }
.form-msg { display: none; margin-top: .9rem; font-size: .94rem; font-weight: 700; color: var(--ink); }
.form-msg.on { display: block; }
.form-legal { margin-top: .9rem; font-size: .8rem; line-height: 1.5; }
.form-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
  margin: 1.05rem 0 .8rem; font-size: .86rem;
}
.form-or::before, .form-or::after { content: ""; height: 1px; background: var(--line); }
.btn.loading { pointer-events: none; opacity: .75; }

/* ---------------------------------------------------------- FAQ */
.faq-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
.faq { display: grid; gap: .7rem; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink); font-family: var(--font); font-size: 1rem; font-weight: 700;
}
.faq-q:hover { color: var(--red-txt); }
.faq-q .chev { width: 20px; height: 20px; flex: none; color: var(--red-txt); transition: transform .22s ease; }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a > div { padding: 0 1.25rem 1.2rem; font-size: .96rem; line-height: 1.6; }

.faq-art { position: relative; padding-top: 1rem; text-align: center; }
.faq-art .hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.15;
  color: var(--ink); margin: 0 0 1.25rem;
}
.faq-art .hand i { font-style: normal; color: var(--red-txt); }
@media (max-width: 940px) { .faq-in { grid-template-columns: 1fr; } .faq-art { padding-top: 2rem; } }

/* ------------------------------------------------- hub e página 404 */
.center { text-align: center; }
.center .head { margin-inline: auto; }
.center .cta-row { justify-content: center; }

.hubcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.hubcard {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.6rem 1.5rem;
  background: var(--row); border-radius: var(--r-card);
  color: inherit; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.hubcard:hover { background: var(--red-wash); transform: translateY(-2px); }
.hubcard .hub-ic {
  width: 48px; height: 48px; border-radius: 999px; margin-bottom: .35rem;
  display: grid; place-items: center;
  background: var(--page); box-shadow: var(--sh-sm); color: var(--red-txt);
}
.hubcard .hub-ic .ic { width: 26px; height: 26px; }
.hubcard h3 { margin: 0; }
.hubcard p { margin: 0; font-size: .96rem; line-height: 1.55; }
.hubcard .go {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--red-txt); font-weight: 800; font-size: .94rem;
}
.hubcard .go .ic { width: 18px; height: 18px; }
@media (max-width: 880px) { .hubcards { grid-template-columns: 1fr; } }

.err-num {
  font-family: var(--font-hand); font-weight: 700; line-height: 1;
  font-size: clamp(4.5rem, 3rem + 8vw, 8rem); color: var(--red-txt); margin: 0 0 .25rem;
}

/* ------------------------------------------------------- rodapé
   Um só rodapé para as três páginas, claro. O navy da referência da PCD
   saiu em 08/09/2026 para o site não ter dois rodapés diferentes. */
.ft-light { background: var(--page); border-top: 1px solid var(--line); color: var(--body); padding-block: 2.5rem 1.5rem; }
.ft-light .ft-in { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr auto; gap: 2rem; align-items: start; }
.ft-light .ft-brand img { height: 46px; width: auto; background: none; padding: 0; }
.ft-light h4 { color: var(--ink); font-size: .93rem; font-weight: 800; margin-bottom: .8rem; }
.ft-light .ft-col { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; }
.ft-light .ft-col > .ic { color: var(--red-txt); margin-top: .2rem; }
.ft-light ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ft-light a, .ft-light li { color: var(--body); font-size: .94rem; text-decoration: none; }
.ft-light a:hover { color: var(--red-txt); text-decoration: underline; }
.ft-light .pend {
  display: inline-block; padding: .2rem .6rem;
  border: 1px dashed var(--line); border-radius: 8px; font-size: .82rem;
}
.ft-light .ft-social { display: flex; gap: .55rem; margin-top: 0; }
.ft-light .ft-social a {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: var(--row); color: var(--ink);
}
.ft-light .ft-social a:hover { background: var(--red); color: #FFFFFF; }
.ft-light .ft-bottom {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .84rem; color: var(--body);
}
.ft-light .ft-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.ft-light .ft-credit { display: inline-flex; align-items: center; gap: .55rem; }
.ft-light .ft-credit a { display: inline-flex; opacity: .85; transition: opacity .2s ease, transform .2s ease; }
.ft-light .ft-credit a:hover { opacity: 1; transform: translateY(-1px); }
.ft-light .ft-credit img { height: 22px; width: auto; }
@media (max-width: 1080px) { .ft-light .ft-in { grid-template-columns: 1fr 1fr 1fr; } .ft-light .ft-social { margin-top: .5rem; } }
@media (max-width: 700px) { .ft-light .ft-in { grid-template-columns: 1fr; gap: 1.5rem; } }

/* -------------------------------------------- revelação no scroll */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* regra universal em vez de listar seletor por seletor: a lista quebrava assim que
     uma folha de página carregada DEPOIS redeclarasse a transição do mesmo elemento */
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}