/* =====================================================================
   TRANSPORTAR CONSTA — tema pesado / industrial (navy + vermelho)
   ===================================================================== */
:root {
  --font-head: "Sora", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --brand: #e63329;            /* vermelho */
  --brand-2: #16213e;          /* navy */
  --accent: #e63329;
  --navy: #16213e;
  --navy-2: #0e1730;
  --ink: #1c2333;
  --ink-strong: #0e1730;
  --muted: #5d6577;
  --bg: #ffffff;
  --bg-soft: #f3f5f9;
  --bg-deep: #0e1730;
  --line: #e1e5ee;
  --card: #ffffff;
  --steel: #f0f3f8;
  --logo-h: 50px;
}

.eyebrow { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.btn { --b: var(--brand); }

/* ----- Hero industrial ----- */
.hero-tp {
  position: relative; color: #eef1f7; padding-block: clamp(80px, 12vw, 140px) clamp(60px, 8vw, 100px);
  background: #030912; overflow: hidden;
}
.hero-tp h1 { color: #fff; }
.hero-tp h1 .hl { color: var(--brand); }
.hero-tp .lead { color: #c3cad9; }
.hero-tp .eyebrow { background: rgba(230,51,41,.18); color: #ff8d86; }

/* cena animada como fundo */
.hero-tp__scene { position: absolute; inset: 0; z-index: 0; }
.hero-tp__scene svg { width: 100%; height: 100%; display: block; }
.hero-tp__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(108deg, rgba(3,9,18,.88) 0%, rgba(3,9,18,.70) 55%, rgba(3,9,18,.28) 100%); }
.hero-tp__copy { max-width: 720px; }

/* listras industriais */
.stripes { position: absolute; inset: 0; z-index: 2; opacity: .12; pointer-events: none;
  background: repeating-linear-gradient(45deg, #fff 0 14px, transparent 14px 34px); }
.hero-tp .container { position: relative; z-index: 3; }
.hero-tp .hero__cta { margin-top: 30px; }

/* animação carreto */
.tp-truck-anim { animation: tpDrive 10s linear infinite; }
@keyframes tpDrive { from { transform: translateX(-650px); } to { transform: translateX(1350px); } }
.tp-wheel-spokes { transform-box: fill-box; transform-origin: center; animation: tpWheelSpin 2.5s linear infinite; }
@keyframes tpWheelSpin { to { transform: rotate(360deg); } }
.tp-puff-1 { animation: tpPuff 2.5s ease-out infinite; }
.tp-puff-2 { animation: tpPuff 2.5s ease-out .85s infinite; }
.tp-puff-3 { animation: tpPuff 2.5s ease-out 1.7s infinite; }
@keyframes tpPuff { 0% { transform: translateY(0) scale(1); opacity:.3; } 100% { transform: translateY(-28px) scale(2.4); opacity:0; } }

/* selo de medida */
.spec-row { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 36px; }
.spec { border-left: 3px solid var(--brand); padding-left: 14px; }
.spec b { display: block; font-family: var(--font-head); font-size: 1.7rem; color: #fff; line-height: 1; }
.spec span { color: #aab2c6; font-size: .9rem; }

/* ----- faixa de marca ----- */
.tape { background: var(--brand); color: #fff; padding: 14px 0; overflow: hidden; }
.tape__track { display: flex; gap: 50px; white-space: nowrap; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; animation: marquee 22s linear infinite; }
.tape__track span { display: inline-flex; align-items: center; gap: 14px; }
.tape__track span::before { content: "■"; font-size: .7em; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----- serviços (cards escuros) ----- */
.service-tp {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,3vw,32px); position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-tp::before { content: ""; position: absolute; right: 0; top: 0; width: 70px; height: 70px; background: var(--brand); clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: .9; transition: width .3s ease, height .3s ease; }
.service-tp:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.service-tp:hover::before { width: 86px; height: 86px; }
.service-tp .icon-badge { background: var(--navy); color: #fff; }
.service-tp h3 { font-size: 1.25rem; margin-bottom: 8px; }
.service-tp p { color: var(--muted); }

/* ----- bloco "trabalho pesado" ----- */
.heavy { background: var(--navy); color: #e7ecf5; }
.heavy h2, .heavy h3, .heavy h4 { color: #fff; }
.heavy .check-list li { color: #d4dae6; }
.heavy .ck { background: var(--brand); color: #fff; }

/* check list reutilizado */
.check-list { display: grid; gap: 16px; margin-top: 10px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-list .ck { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-top: 2px; }
.check-list strong { display: block; font-family: var(--font-head); }
.check-list .txt { font-size: .95rem; opacity: .8; }

/* ----- diferenciais numerados ----- */
.feat { display: flex; gap: 18px; align-items: flex-start; }
.feat__n { flex: none; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.feat h4 { margin-bottom: 4px; }
.feat p { color: var(--muted); }

/* ----- CTA ----- */
.cta-tp { background: linear-gradient(120deg, var(--navy-2), var(--navy)); }
.cta-tp::before { content: ""; position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(45deg, #fff 0 14px, transparent 14px 34px); }
.cta-tp::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--brand); }

.section--soft { background: var(--bg-soft); }

/* ----- Stats grid (responsivo via classe) ----- */
.heavy-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ----- Mobile ----- */
@media (max-width: 760px) {
  .hero-tp { padding-block: 70px 50px; }
  /* Cobre uniforme no mobile — texto ocupa largura total */
  .hero-tp__veil { background: rgba(3,9,18,.84); }
  .spec-row { gap: 20px; }
  .spec b { font-size: 1.4rem; }
}

@media (max-width: 520px) {
  .hero-tp h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .hero-tp { padding-block: 56px 40px; }
  .spec-row { flex-direction: column; gap: 14px; }
  .heavy-stats { grid-template-columns: 1fr; }
  .tape__track { gap: 28px; font-size: .88rem; }
}