/* ==========================================================================
   /plataformas/ — landing por APLICAÇÃO. Constrói por cima de css/style.css.
   Eixo: aplicação → escolha da plataforma → como a carga sobe → prova → contato.
   Assinatura visual: dois CAMINHOS lado a lado (não grade de cards), azul da
   marca como acento (o vermelho é de /cacambas/), e plano aberto para dar
   sensação de comprimento. Mobile-first; breakpoints no fim.
   ========================================================================== */

.page-plataformas { --acento: var(--jc-blue); --acento-claro: var(--jc-blue-300); }
.page-plataformas .section { padding-block: clamp(40px, 5vw, 74px); }
.page-plataformas .section-head { margin-bottom: clamp(24px, 3.2vw, 38px); }
.page-plataformas .wa-float { display: none; }
.page-plataformas [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- 1. Hero: plano aberto, foco no comprimento ---------- */
.hero--plataformas { min-height: 100svh; min-height: 100vh; align-items: center; }
/* Desloca para a esquerda: o assoalho comprido é o que identifica a plataforma;
   centralizado, a cabine do caminhão dominava o enquadramento. */
.hero--plataformas .hero-bg img { object-position: 10% 56%; }
.hero--plataformas .hero-scrim {
  background:
    linear-gradient(0deg, rgba(6,7,9,0.94) 0%, rgba(6,7,9,0.58) 38%, rgba(6,7,9,0.18) 66%, rgba(6,7,9,0.46) 100%),
    linear-gradient(85deg, rgba(46,49,146,0.42), transparent 52%);
}
.hero--plataformas .hero-inner {
  padding-top: calc(var(--header-h) + clamp(14px, 2.2vh, 30px));
  padding-bottom: clamp(20px, 3.2vh, 42px);
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.crumbs a { color: rgba(255,255,255,0.82); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }
.hero--plataformas .eyebrow { margin-bottom: clamp(10px, 1.6vh, 18px); }
.hero--plataformas h1 { max-width: 19ch; font-size: clamp(1.95rem, min(5.2vw, 6.6vh), 3.7rem); line-height: 1.05; }
.hero--plataformas h1 em { background: linear-gradient(100deg, var(--jc-blue-300), #a9adff); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.hero--plataformas .hero-lede { margin-top: clamp(12px, 1.8vh, 20px); font-size: clamp(0.98rem, min(1.5vw, 2.1vh), 1.14rem); max-width: 52ch; }
.hero--plataformas .hero-actions { margin-top: clamp(18px, 2.6vh, 32px); }

/* ---------- 2. Caminhos por aplicação — assinatura da página ---------- */
.caminhos { display: grid; grid-template-columns: 1fr; gap: 18px; }
.caminho {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.caminho::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; }
.caminho--maquina::before { background: linear-gradient(90deg, var(--jc-blue), var(--jc-blue-500)); }
.caminho--veiculo::before { background: linear-gradient(90deg, #1f8f5f, #2fbe80); }
.caminho-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-900); }
.caminho-media img { width: 100%; height: 100%; object-fit: cover; }
.caminho--maquina .caminho-media img { object-position: 50% 42%; }
.caminho-corpo { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.caminho-tag {
  align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-full);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.caminho--maquina .caminho-tag { background: rgba(46,49,146,0.2); border: 1px solid rgba(46,49,146,0.42); color: var(--jc-blue-300); }
.caminho--veiculo .caminho-tag { background: rgba(47,190,128,0.16); border: 1px solid rgba(47,190,128,0.4); color: #6fe0a8; }
.caminho-corpo h3 { margin-top: 12px; font-size: clamp(1.3rem, 2.4vw, 1.65rem); color: var(--text-hi); }
.caminho-corpo > p { margin-top: 10px; color: var(--text-body); font-size: 0.98rem; }
.caminho-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.caminho-lista li { position: relative; padding-left: 20px; font-size: 0.93rem; color: var(--text-body); }
.caminho-lista li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 2px; background: var(--acento-claro); }
.caminho--veiculo .caminho-lista li::before { background: #6fe0a8; }
.caminho-corpo .btn {
  margin-top: 20px; align-self: stretch;
  /* A base usa white-space:nowrap. Estes CTAs são longos e estouravam a borda
     em 390px — liberar a quebra e centralizar. */
  white-space: normal; text-align: center; line-height: 1.25; height: auto; padding-block: 14px;
}

/* Prova de veículos: larga, abaixo dos dois caminhos */
.prova-veiculos { margin-top: 20px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink-900); box-shadow: var(--shadow-md); }
.prova-veiculos img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.prova-veiculos figcaption { padding: 14px 18px; font-size: 0.88rem; color: var(--text-body); border-top: 1px solid var(--line); }
.prova-veiculos figcaption strong { color: var(--text-hi); }

/* ---------- 3. Como a carga sobe (+ vídeo) ---------- */
.sobe-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.sobe-itens { display: flex; flex-direction: column; gap: 14px; }
.sobe-item { padding: 18px 20px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--line); border-left: 3px solid var(--acento); }
.sobe-item h3 { font-size: 1.05rem; color: var(--text-hi); }
.sobe-item p { margin-top: 8px; font-size: 0.94rem; color: var(--text-body); }
.sobe-item .sobe-nota { margin-top: 8px; font-size: 0.86rem; color: var(--text-muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.sobe-video { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink-900); box-shadow: var(--shadow-md); }
.sobe-video video { display: block; width: 100%; height: auto; aspect-ratio: 540 / 960; object-fit: cover; background: var(--ink-950); }
.sobe-video figcaption { padding: 13px 16px; font-size: 0.86rem; color: var(--text-muted); border-top: 1px solid var(--line); }

/* ---------- 4. Por dentro ---------- */
.dentro-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dentro { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--glass); }
.dentro img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dentro figcaption { padding: 14px 16px 18px; font-size: 0.9rem; color: var(--text-body); display: flex; flex-direction: column; gap: 4px; }
.dentro figcaption strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-hi); font-size: 0.88rem; }
.dentro-nota { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(46,49,146,0.14); border: 1px solid rgba(46,49,146,0.3); color: var(--text-body); font-size: 0.95rem; max-width: 760px; }

/* ---------- 5. Trabalhos ---------- */
.trabalhos-grid .gallery-item figcaption { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.86rem; }

/* ---------- 6/7. CTA ---------- */
.cta-strip { background: linear-gradient(120deg, var(--jc-blue), #1c1e5c 62%, var(--ink-900)); }
.steps { margin: 24px auto 0; max-width: 580px; text-align: left; display: flex; flex-direction: column; gap: 12px; counter-reset: passo; }
.steps li { position: relative; padding: 14px 16px 14px 56px; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); font-size: 0.95rem; }
.steps li::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--jc-blue-500); color: var(--white); font-family: var(--font-display); font-weight: 700;
}
.steps strong { color: var(--white); }
.cta-final-inner .eyebrow { margin-bottom: 16px; }
.cta-final-addr { margin-top: 20px; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-col a[aria-current="page"] { color: var(--jc-blue-300); font-weight: 600; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 760px) {
  .dentro-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) {
  .caminho-corpo .btn { align-self: flex-start; }
}
@media (min-width: 900px) {
  .caminhos { grid-template-columns: 1fr 1fr; gap: 20px; }
  .sobe-grid { grid-template-columns: 1.15fr 0.85fr; gap: 28px; }
  .prova-veiculos img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
  .caminho-media { aspect-ratio: 16 / 9; }
}
/* Telas baixas: aperta o vertical, mesma lição da HOME. */
@media (min-width: 900px) and (max-height: 780px) {
  .page-plataformas .section { padding-block: clamp(30px, 3.8vh, 48px); }
  .caminho-media { aspect-ratio: 2 / 1; }
  .caminho-corpo { padding: 18px 20px 20px; }
  .dentro img { aspect-ratio: 3 / 2; }
}
/* Respeita quem pediu menos movimento: o vídeo não roda sozinho. */
@media (prefers-reduced-motion: reduce) {
  .sobe-video video { animation: none; }
}