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

.fleet {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 62vh;
  padding: 40px 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 {
  /* caixa própria à esquerda, mesma proporção da foto -> caminhão inteiro, sem zoom */
  inset: auto auto auto 0;
  top: 50%;
  transform: translateY(-50%);
  width: 56%;
  aspect-ratio: 1024 / 498;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 42%, transparent 92%);
  mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 42%, transparent 92%);
}

/* mantém a centralização vertical ao aplicar o zoom de hover */
.fleet--right:hover .fleet__bg-focus {
  transform: translateY(-50%) scale(1.03);
}

/* tinta só reforça o preto sólido à direita (área do texto) */
.fleet--right .fleet__bg-tint {
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 34%,
    rgba(6, 6, 6, .5) 54%,
    #060606 70%
  );
}

/* ---------- SEÇÃO 2 (caminhão à direita / texto à esquerda) ---------- */
.fleet--two .fleet__bg-focus {
  background-image: url("../../assets/banners/caminhao2.jpg");
  /* caixa com a MESMA proporção da foto -> caminhão inteiro, sem zoom, à direita */
  inset: auto 0 auto auto;
  top: 50%;
  transform: translateY(-50%);
  width: 56%;
  aspect-ratio: 1024 / 583;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  /* máscara esfuma as bordas da imagem nos 4 lados */
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 42%, transparent 92%);
  mask-image: radial-gradient(ellipse 60% 66% at 50% 50%, #000 42%, transparent 92%);
}

/* mantém a centralização vertical ao aplicar o zoom de hover */
.fleet--two:hover .fleet__bg-focus {
  transform: translateY(-50%) scale(1.03);
}

/* seção 2: tema escuro (texto claro padrão). Versão clara salva em home-fleet.secao2-clara.css.bak */

/* sem brilho vermelho no topo — evita o "degrau" avermelhado ao entrar da seção 1 */
.fleet--two::after {
  display: none;
}

/* texto mais à esquerda, longe da imagem */
.fleet--two .fleet__content {
  max-width: 440px;
}

/* tinta só reforça o preto sólido à esquerda (área do texto);
   o esfumaçado dos 4 lados da foto fica por conta da máscara radial */
.fleet--two .fleet__bg-tint {
  background: linear-gradient(
    90deg,
    #060606 0%,
    #060606 30%,
    rgba(6, 6, 6, .5) 46%,
    transparent 66%,
    transparent 100%
  );
}

/* ---------- TRANSIÇÃO ENTRE SEÇÕES (escura -> clara) ---------- */
/* transição não é mais necessária: as duas seções são escuras e se encontram no mesmo preto */
.fleet-bridge {
  display: none;
}

/* ---------- 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, .85);
  line-height: 1.8;
  font-size: clamp(18px, 1.5vw, 21px);
  margin: 0 0 34px;
  max-width: 540px;
  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 {
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    transform: none;
    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,
  .fleet--two .fleet__bg-tint {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, .5) 48%,
      #060606 64%
    );
  }


  /* 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;
  }
}