/* ==========================================================================
   MPM Locações — design system das LPs (Jacaré + Grade / Balança Elétrica)
   Mobile-first. Sem build, sem CDN, sem framework.

   Paleta PROVISÓRIA: o briefing marca o manual de marca como PENDENTE.
   Base grafite + acento de alta visibilidade, escolhido para leitura sob sol
   em canteiro de obra. Ver docs/PENDENCIAS.md antes de aprovar com a cliente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes — auto-hospedadas em assets/fonts/ (PENDENTE: arquivos .woff2).
   Enquanto os arquivos não chegam, a stack de sistema abaixo assume.
   Para ativar: colocar os .woff2 em assets/fonts/ e descomentar este bloco.

   @font-face {
     font-family: "Archivo";
     src: url("../fonts/archivo-variable.woff2") format("woff2");
     font-weight: 400 900;
     font-display: swap;
   }
   -------------------------------------------------------------------------- */

:root {
  /* Neutros — aço / grafite */
  --preto: #0a0e10;
  --grafite: #11181c;
  --grafite-2: #182126;
  --grafite-3: #212d33;
  --linha: #2c3a42;
  --texto: #e9eff2;
  --texto-2: #97a6ae;
  --branco: #ffffff;

  /* Acento — sobrescrito por LP em [data-lp] */
  --acento: #a8e62e;
  --acento-escuro: #7fbb14;
  --acento-tinta: #0a0e10;

  /* WhatsApp — cor do canal, igual nas duas LPs. Nunca o acento do cliente. */
  --zap: #25D366;
  --zap-escuro: #1DA851;
  --zap-tinta: #0a0e10;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Archivo", "Archivo Black", var(--fonte);

  --max: 1180px;
  --gut: 20px;
  --raio: 3px;
  --chanfro: 16px;

  --t: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

[data-lp="jacare"] {
  --acento: #a8e62e;
  --acento-escuro: #86bd18;
  --acento-tinta: #0a0e10;
}

[data-lp="balanca"] {
  --acento: #ff9e1b;
  --acento-escuro: #d97d00;
  --acento-tinta: #0a0e10;
}

/* --------------------------------------------------------- reset / base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 9.5vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 6vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: clamp(1.15rem, 3.4vw, 1.45rem); letter-spacing: -0.015em; }

p { margin: 0 0 1em; text-wrap: pretty; }

::selection { background: var(--acento); color: var(--acento-tinta); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

/* --------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.secao {
  padding-block: clamp(56px, 12vw, 108px);
  position: relative;
}

.secao--grafite { background: var(--grafite); }
.secao--grafite2 { background: var(--grafite-2); }

.olho {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.olho::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--acento);
  flex: none;
}

.sub {
  color: var(--texto-2);
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  max-width: 62ch;
}

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: 12px;
  top: 12px;
  z-index: 999;
  background: var(--acento);
  color: var(--acento-tinta);
  padding: 10px 16px;
  font-weight: 700;
}

/* --------------------------------------------------------- serrilha (assinatura) */

.serrilha {
  height: 12px;
  background-color: var(--acento);
  width: 100%;
}

@supports (background: conic-gradient(red, red)) {
  .serrilha {
    background-color: transparent;
    background-image: conic-gradient(from 135deg at 50% 0, var(--acento) 0 90deg, transparent 90deg);
    background-size: 18px 12px;
    background-repeat: repeat-x;
  }
}

/* --------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 26px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.btn svg { flex: none; }

.btn--zap {
  background: var(--zap);
  color: var(--zap-tinta);
}

.btn--zap:hover,
.btn--zap:focus-visible {
  background: var(--zap-escuro);
  transform: translateY(-2px);
}

.btn--linha {
  background: transparent;
  color: var(--texto);
  border-color: var(--linha);
}

.btn--linha:hover,
.btn--linha:focus-visible {
  border-color: var(--acento);
  color: var(--acento);
}

.btn--bloco { width: 100%; }

@media (min-width: 620px) {
  .btn--bloco { width: auto; }
}

.btn-nota {
  font-size: 0.82rem;
  color: var(--texto-2);
  margin: 14px 0 0;
}

/* --------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 14, 16, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.topo__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--branco);
}

.marca small {
  display: block;
  font-family: var(--fonte);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--texto-2);
  text-transform: uppercase;
  margin-top: 2px;
}

.marca__sinal { color: var(--acento); }

.topo__nav { display: none; }

.topo__cta { display: none; }

@media (min-width: 900px) {
  .topo__nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
  }
  .topo__nav a {
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-2);
    transition: color var(--t);
  }
  .topo__nav a:hover { color: var(--acento); }
  .topo__cta {
    display: inline-flex;
    padding: 12px 20px;
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(40px, 9vw, 88px) clamp(48px, 10vw, 96px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(168, 230, 46, 0.10), transparent 60%),
    var(--preto);
}

[data-lp="balanca"] .hero {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 158, 27, 0.12), transparent 60%),
    var(--preto);
}

.hero__grid { display: grid; gap: 34px; }

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 52px;
  }
}

.hero h1 { margin-bottom: 0.28em; }

.hero__marca-linha {
  color: var(--acento);
  display: block;
}

.hero__lead {
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  color: var(--texto-2);
  max-width: 54ch;
  margin-bottom: 28px;
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 620px) {
  .hero__acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* --------------------------------------------------------- números de autoridade */

.numeros {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}

@media (min-width: 760px) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
}

.numeros li {
  background: var(--grafite);
  padding: 18px 16px;
}

.numeros b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--acento);
  line-height: 1;
}

.numeros span {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------- slots de mídia pendente */

.midia {
  margin: 0;
  position: relative;
  border: 2px dashed var(--acento);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.028) 0 12px,
      transparent 12px 24px
    ),
    var(--grafite-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  min-height: 220px;
}

.midia--16x9 { aspect-ratio: 16 / 9; }
.midia--43 { aspect-ratio: 4 / 3; }
.midia--vert { aspect-ratio: 3 / 4; min-height: 260px; }

.midia__selo {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--acento);
  color: var(--acento-tinta);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.midia__spec {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--texto-2);
}

.midia__spec b {
  color: var(--texto);
  display: block;
  margin-bottom: 3px;
}

/* --------------------------------------------------------- cards */

.cards {
  display: grid;
  gap: 16px;
  margin-top: 38px;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--grafite-2);
  border: 1px solid var(--linha);
  padding: 26px 22px;
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
  transition: border-color var(--t), transform var(--t);
}

.card:hover {
  border-color: var(--acento);
  transform: translateY(-3px);
}

.card h3 { color: var(--branco); }

.card p {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.95rem;
}

.card__num {
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--acento);
  display: block;
  margin-bottom: 12px;
}

/* --------------------------------------------------------- comparativo */

.comparativo {
  margin-top: 34px;
  border: 1px solid var(--linha);
  overflow-x: auto;
}

.comparativo table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.comparativo th,
.comparativo td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.94rem;
  vertical-align: top;
}

.comparativo thead th {
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  background: var(--grafite);
}

.comparativo thead th.destaque { color: var(--acento-tinta); background: var(--acento); }

.comparativo tbody th {
  font-weight: 600;
  color: var(--texto-2);
  width: 34%;
}

.comparativo td.destaque {
  color: var(--branco);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.028);
}

.comparativo tr:last-child th,
.comparativo tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- logos de clientes */

.logos {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logos li {
  border: 1px solid var(--linha);
  padding: 12px 18px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* --------------------------------------------------------- depoimentos */

.depoimentos {
  display: grid;
  gap: 18px;
  margin-top: 38px;
}

@media (min-width: 860px) { .depoimentos { grid-template-columns: repeat(3, 1fr); } }

.depoimento__id {
  margin: 14px 0 0;
  font-size: 0.92rem;
}

.depoimento__id b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  color: var(--branco);
}

.depoimento__id span { color: var(--texto-2); }

/* --------------------------------------------------------- atendimento / geo */

.geo {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

@media (min-width: 780px) { .geo { grid-template-columns: repeat(2, 1fr); } }

.geo__base {
  background: var(--grafite-2);
  border-left: 4px solid var(--acento);
  padding: 24px 22px;
}

.geo__base h3 { margin-bottom: 6px; }

.geo__base p { margin: 0; color: var(--texto-2); font-size: 0.95rem; }

.geo__base dl { margin: 14px 0 0; font-size: 0.9rem; }
.geo__base dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-top: 10px;
}
.geo__base dd { margin: 2px 0 0; color: var(--texto); }

.filtro {
  margin-top: 26px;
  border: 1px solid var(--linha);
  padding: 24px 22px;
  background: var(--grafite);
}

.filtro ul { margin: 10px 0 0; padding-left: 20px; color: var(--texto-2); }
.filtro li { margin-bottom: 6px; }
.filtro strong { color: var(--texto); }

/* --------------------------------------------------------- FAQ */

.faq { margin-top: 34px; border-top: 1px solid var(--linha); }

.faq details {
  border-bottom: 1px solid var(--linha);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.15rem);
  letter-spacing: -0.01em;
  color: var(--branco);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--acento);
  transform: translateY(-50%);
  transition: transform var(--t);
}

.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

.faq .resposta {
  padding: 0 0 22px;
  color: var(--texto-2);
  max-width: 72ch;
}

.faq .resposta p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- pendência inline */

.pend {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--acento);
  color: var(--acento);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  padding: 1px 7px;
  word-break: break-word;
}

/* --------------------------------------------------------- CTA final */

.cta-final {
  background: var(--acento);
  color: var(--acento-tinta);
  text-align: center;
  padding-block: clamp(54px, 11vw, 96px);
}

.cta-final h2 { color: var(--acento-tinta); }

.cta-final p {
  color: rgba(10, 14, 16, 0.78);
  max-width: 54ch;
  margin-inline: auto;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

.cta-final .olho { color: rgba(10, 14, 16, 0.7); }
.cta-final .olho::before { border-top-color: rgba(10, 14, 16, 0.7); }
.cta-final .olho { justify-content: center; }

.cta-final .btn--zap {
  background: var(--preto);
  color: var(--zap);
  margin-top: 10px;
}

.cta-final .btn--zap:hover { background: var(--grafite-2); }

.cta-final .btn-nota { color: rgba(10, 14, 16, 0.72); }

/* --------------------------------------------------------- rodapé */

.rodape {
  background: var(--preto);
  border-top: 1px solid var(--linha);
  padding-block: 48px 108px;
  font-size: 0.9rem;
  color: var(--texto-2);
}

@media (min-width: 900px) { .rodape { padding-bottom: 48px; } }

.rodape__grid { display: grid; gap: 30px; }

@media (min-width: 780px) {
  .rodape__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

.rodape h4 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: 12px;
}

.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 7px; }
.rodape a { color: var(--texto-2); text-decoration: none; }
.rodape a:hover { color: var(--acento); }

.rodape__legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* --------------------------------------------------------- barra fixa mobile */

.barra-zap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: rgba(10, 14, 16, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
}

.barra-zap .btn { width: 100%; padding-block: 15px; }

@media (min-width: 900px) { .barra-zap { display: none; } }

/* --------------------------------------------------------- scroll reveal */

.rev {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rev.ativo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}