/* ============================================================
   TRON MOTORS — carbon.css
   Fibra de carbono aplicada CIRURGICAMENTE:
   → Apenas em elementos que já são escuros por design
   → Fundo do site permanece branco (surface-page / white)
   → Não altera seções de conteúdo em light-mode
   ============================================================ */

:root {
  --cf-dark:      #0c0c0e;
  --cf-mid:       #171718;
  --cf-edge:      #252527;
  --cf-shine-1:   rgba(255,255,255,0.07);
  --cf-shine-2:   rgba(255,255,255,0.03);
  --cf-sheen:     rgba(255,255,255,0.13);
  --cf-glow:      rgba(124,58,237,0.55);
  --cf-glow-edge: rgba(124,58,237,0.20);
  --cf-text:      #e8ecf2;
  --cf-text-dim:  rgba(232,236,242,0.60);

  /* Weave diagonal 45° */
  --cf-weave:
    repeating-linear-gradient(
       45deg,
       transparent       0px, transparent       3px,
       var(--cf-shine-1) 3px, var(--cf-shine-1) 4px,
       transparent       4px, transparent       8px
    ),
    repeating-linear-gradient(
      -45deg,
       transparent       0px, transparent       3px,
       var(--cf-shine-2) 3px, var(--cf-shine-2) 4px,
       transparent       4px, transparent       8px
    );

  /* Camada hexagonal */
  --cf-hex:    radial-gradient(circle at 50% 50%, var(--cf-shine-1) 0%, transparent 46%);
  --cf-hex-sz: 14px 12px;
}

/* ══════════════════════════════════════════════════════════════
   1. BTN-PRIMARY
   Único elemento escuro que aparece em seções claras.
   Carbon reforça o contraste e adiciona o sheen no hover.
   ══════════════════════════════════════════════════════════════ */
.btn-primary {
  background-color: var(--cf-dark);
  background-image:
    linear-gradient(
      105deg,
      transparent     0%,
      transparent     38%,
      var(--cf-sheen) 45%,
      transparent     52%,
      transparent     100%
    ),
    var(--cf-weave);
  background-size: 300% 100%, 8px 8px;
  background-position: -200% 0, 0 0;
  border: 1px solid var(--cf-edge);
  box-shadow:
    0  1px 0 rgba(255,255,255,0.09) inset,
    0 -1px 0 rgba(0,0,0,0.45)       inset,
    0  4px 14px rgba(0,0,0,0.28),
    0  0   0 1px var(--cf-glow-edge);
  color: var(--cf-text);
  transition:
    background-position 0.55s ease,
    box-shadow var(--tr-base),
    transform  var(--tr-base);
}
.btn-primary:hover {
  background-position: 250% 0, 0 0;
  box-shadow:
    0  1px 0 rgba(255,255,255,0.11) inset,
    0 -1px 0 rgba(0,0,0,0.55)       inset,
    0  6px 22px rgba(0,0,0,0.36),
    0  0   0 1px var(--cf-glow),
    0  0  18px rgba(124,58,237,0.20);
  color: #fff;
  transform: translateY(-1px);
}
.btn-primary:focus-visible {
  outline: 2px solid rgba(124,58,237,0.8);
  outline-offset: 3px;
}

/* btn-xl: adiciona malha hexagonal mais visível */
.btn-primary.btn-xl {
  background-image:
    linear-gradient(
      105deg,
      transparent     0%,
      transparent     40%,
      var(--cf-sheen) 47%,
      transparent     54%,
      transparent     100%
    ),
    var(--cf-hex),
    var(--cf-weave);
  background-size: 300% 100%, var(--cf-hex-sz), 8px 8px;
  background-position: -200% 0, 0 0, 0 0;
}
.btn-primary.btn-xl:hover {
  background-position: 250% 0, 0 0, 0 0;
}

/* ══════════════════════════════════════════════════════════════
   2. CTA BLOCK
   Já é gray-900 por design. Carbon aprofunda a textura
   com malha hexagonal + reflexo diagonal + luz violeta.
   ══════════════════════════════════════════════════════════════ */
.cta-block {
  background-color: var(--cf-dark);
  background-image:
    radial-gradient(
      ellipse 80% 55% at 50% 115%,
      rgba(124,58,237,0.26) 0%,
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.055) 0%,
      transparent              8%,
      transparent              92%,
      rgba(0,0,0,0.22)        100%
    ),
    var(--cf-hex),
    var(--cf-weave);
  background-size:
    100% 100%,
    100% 100%,
    var(--cf-hex-sz),
    8px 8px;
  border: 1px solid var(--cf-edge);
  box-shadow:
    0  1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.55)       inset,
    0 28px 70px rgba(0,0,0,0.38),
    0  0   0 1px var(--cf-glow-edge);
  position: relative;
  overflow: hidden;
}

/* Aresta de luz no topo */
.cta-block::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.13) 30%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.13) 70%,
    transparent
  );
  pointer-events: none;
}

/* Reflexo diagonal de fibra */
.cta-block::after {
  content: '';
  position: absolute; top: -60%; right: -14%;
  width: 34%; height: 220%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.022) 45%,
    rgba(255,255,255,0.046) 50%,
    rgba(255,255,255,0.022) 55%,
    transparent
  );
  transform: rotate(-14deg);
  pointer-events: none;
}

.cta-block__title { color: var(--cf-text); }
.cta-block__desc  { color: var(--cf-text-dim); }

/* Botão ghost dentro do CTA (sobre fundo escuro) */
.cta-block .btn-secondary {
  background:   rgba(255,255,255,0.06);
  color:        var(--cf-text);
  border-color: rgba(255,255,255,0.14);
}
.cta-block .btn-secondary:hover {
  background:   rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}

/* Badge "Atendimento Premium" no topo do CTA */
.cta-block .badge-accent {
  background-color: rgba(255,255,255,0.05);
  background-image:
    linear-gradient(
      105deg,
      transparent                40%,
      rgba(255,255,255,0.09)     50%,
      transparent                60%
    ),
    var(--cf-weave);
  background-size: 220% 100%, 8px 8px;
  border-color: var(--cf-glow-edge);
  color: rgba(196,181,253,0.90);
  animation: cf-badge-pulse 3.5s ease-in-out infinite;
}
@keyframes cf-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(124,58,237,0.00); }
  50%     { box-shadow: 0 0 0 5px rgba(124,58,237,0.10); }
}

/* ══════════════════════════════════════════════════════════════
   3. VEHICLE CARD RIBBON
   Fita pequena e escura — sheen animado em loop.
   ══════════════════════════════════════════════════════════════ */
.vehicle-card__ribbon {
  background-color: var(--cf-dark);
  background-image:
    linear-gradient(
      105deg,
      transparent             0%,
      transparent             40%,
      rgba(255,255,255,0.13)  50%,
      transparent             60%,
      transparent             100%
    ),
    var(--cf-weave);
  background-size: 250% 100%, 8px 8px;
  background-position: 0 0, 0 0;
  border-right:  1px solid var(--cf-edge);
  border-bottom: 1px solid var(--cf-edge);
  box-shadow:
    1px 0 0 rgba(255,255,255,0.06) inset,
    0  1px 0 rgba(255,255,255,0.04) inset,
    2px 2px 10px rgba(0,0,0,0.38);
  color: var(--cf-text);
  letter-spacing: 0.10em;
  animation: cf-ribbon-sheen 5s ease-in-out infinite;
}
@keyframes cf-ribbon-sheen {
  0%   { background-position: -100% 0, 0 0; }
  45%  { background-position:  300% 0, 0 0; }
  100% { background-position:  300% 0, 0 0; }
}

/* ══════════════════════════════════════════════════════════════
   4. BRAND IMAGE BADGE ("14+ anos de mercado")
   Já é escuro por design. Carbon finaliza o acabamento.
   ══════════════════════════════════════════════════════════════ */
.brand-img-badge {
  background-color: var(--cf-dark);
  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.07) 0%,
      transparent            55%
    ),
    var(--cf-weave);
  background-size: 100% 100%, 8px 8px;
  border: 1px solid var(--cf-edge);
  box-shadow:
    0  1px 0 rgba(255,255,255,0.07) inset,
    0 10px 28px rgba(0,0,0,0.48);
}
.brand-img-badge__value { color: var(--cf-text); }
.brand-img-badge__label { color: var(--cf-text-dim); }

/* ══════════════════════════════════════════════════════════════
   5. ANNOUNCEMENT BAR
   Faixa escura no topo do header. Carbon com acento violeta
   desvanecendo à direita — como pintura de carro esportivo.
   ══════════════════════════════════════════════════════════════ */
.announcement-bar {
  background-color: var(--cf-dark);
  background-image:
    linear-gradient(
      90deg,
      rgba(124,58,237,0.48) 0%,
      rgba(124,58,237,0.08) 45%,
      transparent            70%
    ),
    var(--cf-weave);
  background-size: 100% 100%, 8px 8px;
  border-bottom: 1px solid var(--cf-glow-edge);
  color: var(--cf-text);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.announcement-bar__close       { color: rgba(232,236,242,0.55); }
.announcement-bar__close:hover { color: var(--cf-text); }

/* ══════════════════════════════════════════════════════════════
   6. FOOTER COMPLETO — carbon com fade de cinza
   site-footer: entra escuro e abre com fade cinza-grafite.
   footer__main: superfície de carbon com claridade crescente
   de cima para baixo — como painel de carro abrindo para luz.
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  /* Fade vertical: cinza grafite no topo → carbon profundo → quase preto na base */
  background-color: var(--cf-dark);
  background-image:
    /* Fade cinza: entrada suave vinda da seção de conteúdo */
    linear-gradient(
      180deg,
      #3a3c42        0%,
      #28292d        6%,
      #1a1b1e        14%,
      var(--cf-dark) 28%,
      var(--cf-dark) 100%
    ),
    /* Malha hexagonal — mais visível no rodapé */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.055) 0%, transparent 46%),
    /* Weave diagonal */
    var(--cf-weave);
  background-size:
    100% 100%,
    18px 16px,
    8px 8px;
}

/* Textos do footer sobre fundo carbon */
.site-footer .footer__col-title  { color: rgba(232,236,242,0.45); }
.site-footer .footer__link        { color: rgba(232,236,242,0.55); }
.site-footer .footer__link:hover  { color: var(--cf-text); }
.site-footer .footer__desc        { color: rgba(232,236,242,0.50); }

/* Linha separadora entre grid e bottom mais visível */
.footer__main {
  border-bottom-color: rgba(255,255,255,0.07);
}

/* Aresta de luz no topo do footer — transição da página para o carbon */
.site-footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent
  );
}

/* ── Footer bottom bar ── */
.footer__bottom {
  background-color: #060607;
  background-image:
    linear-gradient(180deg, var(--cf-edge) 0%, transparent 3px),
    var(--cf-weave);
  background-size: 100% 100%, 8px 8px;
  border-top: 1px solid var(--cf-edge);
}

/* ══════════════════════════════════════════════════════════════
   7. SECTION TITLE EYEBROW — traço carbon → violeta
   Não muda fundo de seção. Apenas o traçinho antes do label.
   ══════════════════════════════════════════════════════════════ */
.section-title__eyebrow::before {
  background: linear-gradient(90deg, var(--cf-mid) 0%, #2e2e32 35%, var(--accent) 100%);
  height: 3px;
  width: 28px;
  border-radius: 1px;
  box-shadow: 0 0 7px rgba(124,58,237,0.45);
}

/* ══════════════════════════════════════════════════════════════
   8. HERO MEDIA BADGE — borda inferior de carbon
   Mantém fundo branco do card, adiciona só a borda inferior
   como se fosse um parachoque de carbono.
   ══════════════════════════════════════════════════════════════ */
.hero__media-badge {
  border-bottom: 3px solid var(--cf-edge);
  border-image:
    linear-gradient(90deg, var(--cf-mid), #3a3a3e, var(--accent)) 1;
  box-shadow: var(--shadow-md), 0 -1px 0 rgba(0,0,0,0.05) inset;
}

/* ══════════════════════════════════════════════════════════════
   9. HEADER SCROLLED — borda inferior carbon sutil
   Aparece só quando a página está com scroll.
   ══════════════════════════════════════════════════════════════ */
.site-header.scrolled .header__bar {
  border-bottom: 1px solid transparent;
  border-image:
    linear-gradient(
      90deg,
      transparent,
      var(--cf-edge)             20%,
      rgba(124,58,237,0.22)      50%,
      var(--cf-edge)             80%,
      transparent
    ) 1;
}

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary           { transition: box-shadow var(--tr-fast), transform var(--tr-fast); }
  .btn-primary:hover     { background-position: -200% 0, 0 0; }
  .btn-primary.btn-xl:hover { background-position: -200% 0, 0 0, 0 0; }
  .vehicle-card__ribbon  { animation: none; }
  .cta-block .badge-accent { animation: none; }
}