/* ==========================================================================
   ECODRIVE PREMIUM UI
   ========================================================================== */

:root{
  --bg-main:#030712;
  --bg-card:#0f172a;
  --bg-nav:#020617;

  --accent:#22c55e;
  --accent-hover:#16a34a;

  --text-main:#f9fafb;
  --text-muted:#9ca3af;

  --border:rgba(255,255,255,0.05);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;

  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  scroll-behavior:smooth;
}

body{
  background:var(--bg-main);
  color:var(--text-main);

  line-height:1.6;

  overflow-x:hidden;

  padding-bottom:60px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

header,
.cabecalho{
  background:rgba(2, 6, 23, 0.9);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--border);

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 6%;

  position:sticky;
  top:0;

  z-index:1000;
}

.logo a{
  text-decoration:none;

  color:white;

  font-size:1.5rem;
  font-weight:700;
}

.menu{
  display:flex;
  align-items:center;
}

.menu a{
  color:var(--text-muted);

  text-decoration:none;

  margin-left:25px;

  font-weight:500;

  transition:.3s;
}

.menu a:hover{
  color:var(--accent);
}

/* ==========================================================================
   MAIN
   ========================================================================== */

main{
  max-width:1400px;
  margin:auto;
  padding:50px 6%;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;

  min-height:90vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:160px 20px 140px;

  overflow:hidden;

  background:var(--bg-main);
}

.hero::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  background:#22c55e;

  filter:blur(180px);

  opacity:0.12;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  border-radius:50%;

  z-index:1;
}

.hero::after{
  content:"";

  position:absolute;

  width:900px;
  height:900px;

  background:
  radial-gradient(
    circle,
    rgba(34,197,94,0.35) 0%,
    rgba(34,197,94,0.15) 30%,
    rgba(34,197,94,0.05) 55%,
    transparent 75%
  );

  top:-250px;
  left:50%;

  transform:translateX(-50%);

  filter:blur(80px);

  z-index:1;
}

.hero *{
  position:relative;
  z-index:2;
}

.badge-hero{
  display:inline-block;

  margin-bottom:25px;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(34,197,94,0.12);

  border:1px solid rgba(34,197,94,0.2);

  color:#4ade80;

  font-size:0.95rem;
}

.hero h2{
  font-size:5rem;

  line-height:1;

  max-width:950px;

  margin:auto;
  margin-bottom:25px;

  font-weight:800;
}

.hero p{
  color:var(--text-muted);

  font-size:1.2rem;

  max-width:700px;

  margin:auto;
}

/* ==========================================================================
   TITLES
   ========================================================================== */

section{
  margin-bottom:80px;
}

section h2,
main h2{
  font-size:2.3rem;

  margin-bottom:35px;

  font-weight:800;

  color:var(--text-main);
}

section p,
main p{
  color:var(--text-muted);
}

/* ==========================================================================
   GRID / PRODUTOS
   ========================================================================== */

.grid,
.produtos{
  display:grid;

  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));

  gap:30px;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card,
.produto{
  background:rgba(15, 23, 42, 0.65);

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.06);

  border-radius:22px;

  padding:24px;

  transition:all .35s ease;

  display:flex;
  flex-direction:column;

  gap:16px;

  min-height:100%;
}

.card:hover,
.produto:hover{
  transform:translateY(-8px);

  border-color:rgba(34, 197, 94, 0.4);

  box-shadow:
    0 0 30px rgba(34, 197, 94, 0.08),
    0 20px 40px rgba(0,0,0,0.35);
}

/* ==========================================================================
   IMAGENS DOS CARROS
   ========================================================================== */

.produto-img{

  width:100%;

  height:180px;

  object-fit:contain;

  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f3f4f6 100%
  );

  border-radius:16px;

  padding:8px;

  display:block;
}

.produto h4{
  font-size:1.35rem;

  font-weight:700;

  color:var(--text-main);
}

.produto-preco{
  color:var(--accent);

  font-size:1.35rem;

  font-weight:800;
}

/* ==========================================================================
   SPECS GRID
   ========================================================================== */

.specs-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px 14px;

  font-size:0.9rem;

  color:var(--text-muted);
}

.spec-item{
  display:flex;
  align-items:center;
  gap:6px;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.botao,
.btn-detalhes,
.btn-cotacao,
button{
  background:var(--accent);

  color:#02120a;

  border:none;

  padding:14px 20px;

  border-radius:12px;

  font-weight:700;

  cursor:pointer;

  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:all .3s ease;
}

.produto .btn-detalhes{
  margin-top:auto;
}

.botao:hover,
.btn-detalhes:hover,
.btn-cotacao:hover,
button:hover{
  background:var(--accent-hover);

  transform:translateY(-3px);

  box-shadow:0 10px 25px rgba(34,197,94,0.25);
}

/* ==========================================================================
   QUEM SOMOS
   ========================================================================== */

.quem-somos{
  background:rgba(15, 23, 42, 0.65);

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,0.05);

  border-radius:28px;

  padding:50px;

  display:flex;
  align-items:center;

  gap:40px;
}

.texto{
  color:var(--text-muted);

  line-height:1.9;

  font-size:1.05rem;
}

/* ==========================================================================
   OFERTA
   ========================================================================== */

.oferta-container{
  display:grid;

  grid-template-columns:1.2fr 1fr;

  background:#090f1d;

  border:1px solid rgba(34,197,94,0.12);

  border-radius:22px;

  overflow:hidden;
}

.oferta-media{
  position:relative;

  background:white;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:30px;
}

.oferta-media img{
  width:100%;

  max-height:320px;

  object-fit:contain;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media(max-width:990px){

  .hero h2{
    font-size:3.2rem;
  }

  .oferta-container{
    grid-template-columns:1fr;
  }

  main{
    padding:40px 20px;
  }

}

@media(max-width:850px){

  #slots{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .hero{
    padding:120px 20px 90px;
  }

  .hero h2{
    font-size:2.3rem;
  }

  .hero p{
    font-size:1rem;
  }

  .grid,
  .produtos{
    grid-template-columns:1fr;
  }

  .menu a{
    margin-left:12px;
    font-size:0.9rem;
  }

  .produto-img{
    height:170px;
  }

}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,0.7);

  display:flex;

  justify-content:center;

  align-items:center;

  z-index:9999;
}

.hidden{
  display:none;
}

.modal-content{

  width:90%;
  max-width:500px;

  background:#0f172a;

  border-radius:20px;

  padding:30px;

  border:1px solid rgba(255,255,255,0.06);
}

#fechar{

  float:right;

  font-size:2rem;

  cursor:pointer;

  color:white;
}

#busca{

  width:100%;

  padding:14px;

  margin:20px 0;

  border:none;

  border-radius:12px;

  background:#1e293b;

  color:white;
}

.modal-item{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 0;

  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* ==========================================================================
   TABELA
   ========================================================================== */

.table-wrapper{

  margin-top:40px;

  border-radius:22px;

  overflow:hidden;

  background:rgba(15, 23, 42, 0.65);

  border:1px solid rgba(255,255,255,0.06);

  backdrop-filter:blur(10px);
}

.compare-table{

  width:100%;

  border-collapse:collapse;

  table-layout:fixed;
}

/* HEADER */

.compare-table thead{

  background:#020617;
}

.compare-table th{

  padding:24px;

  text-align:center;

  color:white;

  font-size:1.3rem;

  font-weight:700;

  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* CELULAS */

.compare-table td{

  padding:26px 18px;

  text-align:center;

  font-size:1.1rem;

  color:white;

  background:rgba(30,41,59,0.8);

  border-bottom:1px solid rgba(255,255,255,0.05);

  transition:.25s;
}

/* PRIMEIRA COLUNA */

.compare-table td:first-child{

  font-weight:700;

  background:rgba(15,23,42,0.95);
}

/* LINHAS ALTERNADAS */

.compare-table tbody tr:nth-child(even) td{

  background:rgba(36,48,71,0.85);
}

/* HOVER */

.compare-table tbody tr:hover td{

  background:rgba(51,65,85,0.95);
}

/* MELHOR VALOR */

.best{

  background:rgba(34,197,94,0.15) !important;

  color:#34d399 !important;

  font-weight:800;
}

/* RESPONSIVO */

@media(max-width:768px){

  .table-wrapper{
    overflow-x:auto;
  }

  .compare-table{
    min-width:700px;
  }

}