/* ==========================================================================
   MAQ & TRUCK TRATOR PEÇAS — página inicial (landing)
   Vem depois de styles.css e usa os mesmos tokens (DESIGN.md): raio de 4px,
   zero sombra, amarelo só no botão de ação, no máximo um botão cheio por tela.
   ========================================================================== */

/* ---------- Cabeçalho enxuto: marca + uma ação ---------- */
.lp-header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lp-header .hdr-link { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.lp-header .hdr-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .hide-sm { display: none !important; } .topbar-sister { display: none; } }

/* ---------- Hero ---------- */
.lp-hero { min-height: clamp(580px, calc(100dvh - 106px), 860px); }
.lp-hero .hero-title { max-width: 15ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-code { margin-top: 26px; max-width: 520px; }
.lp-code label { font-weight: 500; font-size: var(--fs-small); color: var(--on-dark-2); margin-bottom: 8px; }
.lp-code .code-row { padding: 5px; }
.lp-code .code-row input { min-height: 46px; font-size: 1rem; }
.lp-code .code-row .btn { min-height: 46px; padding: 0 18px; font-size: var(--fs-small); }
.lp-code .code-row .btn-outline { border-color: var(--ink); }
@media (max-width: 560px) {
  .hero-ctas .btn { width: 100%; }
}

/* ---------- Seções ---------- */
.lp-sec { padding-block: var(--section); }
.lp-sec + .lp-sec { padding-top: 0; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--iron);
}
.lp-eyebrow::before { content: ''; width: 10px; height: 10px; background: var(--action); border: 1px solid var(--action-deep); flex: none; }
.lp-h2 { max-width: 20ch; }
.lp-sublead { margin-top: 18px; }
.lp-fine { font-size: var(--fs-micro); color: var(--dust); margin-top: 18px; max-width: 70ch; }
.lp-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--action-deep); }
.lp-link .ic { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lp-link:hover .ic { transform: translateX(4px); } }
.lp-more { margin-top: 26px; }

/* ---------- Qual é a sua máquina ---------- */
.lp-machines-sec { padding-top: 0; }
.lp-machines { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.lp-machines a {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 16px; height: 100%;
  background: var(--carbon-2); color: var(--on-dark); border: 2px solid transparent; border-radius: var(--r); text-decoration: none;
  font-weight: 600; font-size: var(--fs-small); text-align: center; line-height: 1.2;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.lp-machines a:active { transform: scale(0.97); }
.lp-machines svg { width: 84px; height: 52px; color: var(--on-dark-2); transition: color 150ms var(--ease-out), transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lp-machines a:hover { border-color: var(--action); }
  .lp-machines a:hover svg { color: var(--action); transform: translateX(3px); }
}
@media (max-width: 1100px) { .lp-machines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lp-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-machines svg { width: 72px; height: 44px; }
}

/* ---------- Como funciona ---------- */
.lp-how { padding-top: var(--section) !important; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.lp-steps li { padding: 24px; border-top: 4px solid var(--ink); background: var(--surface); border-radius: 0 0 var(--r) var(--r); }
.lp-steps .how-n { display: block; font-size: 3.4rem; line-height: 1; margin-bottom: 18px; }
.lp-steps h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.lp-steps p { color: var(--iron); font-size: var(--fs-small); max-width: 36ch; }
.lp-note { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 600; }
.lp-note .ic { color: var(--ok); }
@media (max-width: 820px) { .lp-steps { grid-template-columns: 1fr; } }

/* ---------- Destaques (carrossel em looping) ---------- */
.lp-offers .row-head { align-items: end; }
.lp-rail { padding-bottom: 0; }
.lp-rail > li { display: flex; min-width: 0; }
.lp-rail .card { width: 100%; }
.lp-card-media { text-decoration: none; cursor: pointer; }
.lp-rail .card-name a { text-decoration: none; }
.lp-rail .card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-card-actions { grid-template-columns: 1fr; margin-top: auto; padding-top: 12px; }
.lp-rail .card-body { padding-bottom: 4px; }

/* ---------- Nova ou seminova ---------- */
.lp-cond-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.lp-cond-grid article { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); }
.lp-cond-grid h3 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.lp-cond-grid p { color: var(--iron); max-width: 44ch; margin-bottom: 8px; }
.lp-cond-grid .lp-link { margin-top: auto; }

/* Efeito que reage ao cursor: um brilho amarelo claro segue o mouse dentro do card e a borda acende perto dele.
   js/landing.js grava a posição em --mx/--my. Sem sombra, só cor (DESIGN.md). */
.lp-cond-grid article { position: relative; isolation: isolate; overflow: hidden; transition: border-color 200ms var(--ease-out); }
.lp-cond-grid article > * { position: relative; }
.lp-cond-grid article::before,
.lp-cond-grid article::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease-out); }
.lp-cond-grid article::before { z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--action-soft), transparent 70%); }
.lp-cond-grid article::after { padding: 2px; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--action-deep), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) and (pointer: fine) {
  .lp-cond-grid article:hover::before,
  .lp-cond-grid article:hover::after { opacity: 1; }
  .lp-cond-grid article:hover .lp-link .ic { transform: translateX(4px); }
}
@media (max-width: 760px) { .lp-cond-grid { grid-template-columns: 1fr; } }

/* ---------- Marcas: carrossel contínuo em looping ---------- */
.lp-brands { background: var(--surface-2); padding-block: clamp(40px, 5vw, 64px) !important; overflow: hidden; }
.lp-brands .lp-eyebrow { margin-bottom: 22px; }
.lp-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee-track { display: flex; width: max-content; animation: lp-marquee 38s linear infinite; }
.lp-marquee-list { display: flex; flex: none; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; white-space: nowrap; }
.lp-marquee-list li { display: inline-flex; align-items: center; }
/* a barra depois de cada marca (inclusive da última) deixa a emenda do looping invisível */
.lp-marquee-list li::after { content: ''; width: 2px; height: 0.8em; margin-inline: clamp(20px, 3vw, 44px); background: var(--ink); transform: rotate(18deg); }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
/* Decisão do projeto: o carrossel de marcas fica ativo mesmo com "reduzir movimento" (a regra global de styles.css
   desliga as outras animações), mas bem mais lento e parando com o mouse em cima. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track { animation: lp-marquee 110s linear infinite !important; }
}
@media (hover: hover) and (pointer: fine) { .lp-marquee:hover .lp-marquee-track { animation-play-state: paused; } }
.lp-brands .lp-fine { margin-top: 22px; }

/* ---------- Dúvidas: seção inteira retrátil, título centralizado ---------- */
/* o bloco de cotação por volume (acima) traz a própria linha; aqui só aproximamos os dois */
.b2b { padding-bottom: clamp(28px, 3.5vw, 44px); }
.lp-faq { padding-block: 0 var(--section); }
.lp-faq-all { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); }
.lp-faq-sum { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(24px, 3.5vw, 40px) var(--gutter); text-align: center; border-radius: var(--r); }
.lp-faq-sum::-webkit-details-marker { display: none; }
.lp-faq-sum .h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: none; }
.lp-faq-ic { position: relative; width: 40px; height: 40px; flex: none; border: 2px solid var(--ink); border-radius: var(--r); transition: background-color 150ms var(--ease-out); }
.lp-faq-ic::before, .lp-faq-ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--ink); transition: transform 200ms var(--ease-out); }
.lp-faq-ic::after { transform: rotate(90deg); }
.lp-faq-all[open] .lp-faq-ic::after { transform: rotate(0deg); }
.lp-faq-all[open] .lp-faq-sum { border-bottom: 1px solid var(--hairline); border-radius: var(--r) var(--r) 0 0; }
@media (hover: hover) and (pointer: fine) { .lp-faq-sum:hover .lp-faq-ic { background: var(--action); } }
.lp-faq-all .faq-list { max-width: 820px; margin-inline: auto; padding: 0 var(--gutter) clamp(12px, 2vw, 24px); }
.lp-faq-all .faq-list details:first-child { border-top: 0; }
.lp-faq-all .faq-list details:last-child { border-bottom: 0; }
/* abre e fecha deslizando, onde o navegador permite */
@supports (interpolate-size: allow-keywords) {
  .lp-faq-all { interpolate-size: allow-keywords; }
  .lp-faq-all::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .lp-faq-all[open]::details-content { block-size: auto; }
}

/* ---------- Chamada final ---------- */
.lp-final { background: var(--carbon); color: var(--on-dark); }
.lp-final-inner { padding-block: clamp(56px, 8vw, 112px); display: grid; gap: 20px; justify-items: start; }
.lp-final .h2 { max-width: 16ch; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem); line-height: 0.95; }
.lp-final .lead { color: var(--on-dark-2); }
.lp-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 560px) { .lp-final-ctas .btn { width: 100%; } }
.lp-final + .site-footer { border-top: 0; }

/* ---------- Barra fixa no celular ---------- */
.lp-sticky { display: none; }
@media (max-width: 760px) {
  .lp-sticky {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--carbon); border-top: 1px solid var(--carbon-line);
  }
  .lp-sticky[hidden] { display: none !important; }
  .lp-sticky .btn { flex: 1; }
  .lp-sticky-wa {
    width: 54px; flex: none; display: grid; place-items: center; border-radius: var(--r);
    border: 2px solid var(--on-dark-2); color: var(--on-dark);
  }
  .has-consent-banner .lp-sticky { display: none !important; }
  body.lp { padding-bottom: 0; }
}

/* ---------- Entrada das seções ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease-out) var(--rv-d, 0ms), transform 560ms var(--ease-out) var(--rv-d, 0ms); }
  .rv.is-in { opacity: 1; transform: none; }
}