/* ===== FROTA | CAMINHÃO (FULL-BLEED) ===== */

.fleet {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86vh;
  padding: 90px 0;
  overflow: hidden;
  background: #060606;
}

/* ---------- FUNDO ---------- */
.fleet__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* caminhão completo, encostado em um lado; o resto fica em cor sólida (#060606) */
.fleet__bg-focus {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/banners/caminhao.jpg");
  background-repeat: no-repeat;
  background-size: 68% auto;
  background-position: center;
  transform-origin: center;
  filter: contrast(1.05) saturate(1.1) drop-shadow(0 26px 55px rgba(0, 0, 0, .55));
  /* esfuma as bordas da foto, fundindo na cor sólida */
  -webkit-mask-image: radial-gradient(ellipse 44% 64% at 50% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 64% at 50% 50%, #000 56%, transparent 100%);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease;
}

/* degradê: funde a borda da foto na cor sólida do lado do texto (esquerda, padrão) + fade topo/base */
.fleet__bg-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #060606 0%,
      #060606 26%,
      rgba(6, 6, 6, .55) 44%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #060606 0%,
      #060606 16%,
      transparent 36%,
      transparent 64%,
      #060606 84%,
      #060606 100%
    );
}

/* brilho vermelho ambiente */
.fleet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 6%, rgba(204, 0, 0, .14), transparent 48%);
  pointer-events: none;
}

/* leve aproximação do caminhão ao passar o mouse */
.fleet:hover .fleet__bg-focus {
  transform: scale(1.03);
  filter: contrast(1.07) saturate(1.16) drop-shadow(0 30px 62px rgba(0, 0, 0, .6));
}

/* ---------- SEÇÃO 1 (caminhão à esquerda / texto à direita) ---------- */
.fleet--right .fleet__content {
  margin-left: auto;
  text-align: right;
}

.fleet--two .fleet__content {
  margin-right: auto;
  text-align: left;
}

/* listas e itens acompanham o alinhamento da seção */
.fleet--right .fleet__list li {
  justify-content: flex-end;
}

.fleet--right .fleet__bg-focus {
  background-position: left center;
  transform-origin: left center;
  -webkit-mask-image: radial-gradient(ellipse 44% 64% at 34% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 64% at 34% 50%, #000 56%, transparent 100%);
}

/* degradê sólido à direita (onde fica o texto) */
.fleet--right .fleet__bg-tint {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 38%,
      rgba(6, 6, 6, .55) 56%,
      #060606 74%
    ),
    linear-gradient(
      180deg,
      #060606 0%,
      #060606 8%,
      transparent 30%,
      transparent 70%,
      #060606 92%,
      #060606 100%
    );
}

/* ---------- SEÇÃO 2 (caminhão à direita / texto à esquerda) ---------- */
.fleet--two .fleet__bg-focus {
  background-image: url("../../assets/banners/caminhao2.jpg");
  background-size: 60% auto;
  background-position: right center;
  transform-origin: right center;
  -webkit-mask-image: radial-gradient(ellipse 42% 64% at 70% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 42% 64% at 70% 50%, #000 56%, transparent 100%);
}

/* tema claro: fundo cinza, degradê para cinza, texto preto */
.fleet--two {
  background: #d8d8d8;
}

.fleet--two::after {
  display: none;
}

.fleet--two .fleet__bg-tint {
  background:
    linear-gradient(
      90deg,
      #d8d8d8 0%,
      #d8d8d8 34%,
      rgba(216, 216, 216, .55) 50%,
      transparent 66%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #d8d8d8 0%,
      transparent 24%,
      transparent 76%,
      #d8d8d8 100%
    );
}

.fleet--two .fleet__title {
  color: #111;
  text-shadow: none;
}

.fleet--two .fleet__lead {
  color: #333;
  text-shadow: none;
}

.fleet--two .fleet__list li {
  color: #222;
  border-color: rgba(0, 0, 0, .12);
  text-shadow: none;
}

.fleet--two .fleet__list li:hover {
  color: #000;
}

/* ---------- TRANSIÇÃO ENTRE SEÇÕES (escura -> clara) ---------- */
.fleet-bridge {
  height: 130px;
  background: linear-gradient(180deg, #060606 0%, #2a2a2a 40%, #8f8f8f 75%, #d8d8d8 100%);
}

/* ---------- CONTEÚDO ---------- */
.fleet__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fleet__content {
  max-width: 540px;
}

.fleet__badge {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.fleet__eyebrow {
  display: block;
  color: var(--brand);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.fleet__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .85);
}

.fleet__lead {
  color: rgba(255, 255, 255, .82);
  line-height: 1.75;
  font-size: 16px;
  margin: 0 0 34px;
  max-width: 520px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .85);
}

/* lista de vantagens — sem ícones, fonte premium */
.fleet__list {
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
}

.fleet__list li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  transition: color .3s ease, padding-left .3s ease;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .85);
}

.fleet__list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.fleet__list li:hover {
  color: #fff;
  padding-left: 10px;
}

.fleet__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  color: var(--brand);
  flex-shrink: 0;
  min-width: 30px;
}

.fleet__cta {
  font-size: 16px;
  padding: 16px 32px;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 980px) {
  .fleet {
    min-height: auto;
    padding: 56px 0;
  }

  /* caminhão completo no topo (largura cheia), texto abaixo, resto sólido */
  .fleet__bg-focus,
  .fleet--right .fleet__bg-focus,
  .fleet--two .fleet__bg-focus {
    background-size: 100% auto;
    background-position: center top;
    transform-origin: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 80%, transparent 100%);
  }

  .fleet__bg-tint,
  .fleet--right .fleet__bg-tint {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, .5) 48%,
      #060606 64%
    );
  }

  .fleet--two .fleet__bg-tint {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 34%,
      rgba(216, 216, 216, .5) 52%,
      #d8d8d8 70%
    );
  }

  /* seção 1 (foto 2:1) e seção 2 (foto 4:3) precisam de alturas diferentes p/ o texto */
  .fleet--right .fleet__content {
    margin-top: 54vw;
    text-align: left;
  }

  .fleet--two .fleet__content {
    margin-top: 78vw;
  }

  .fleet-bridge {
    height: 100px;
  }

  .fleet--right .fleet__list li {
    justify-content: flex-start;
  }
}