@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700;800;900&display=swap');

:root{
  --accent:#f97316;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:#1f2937;
  --bg:#0f172a;
  --card:#111827;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Overpass", sans-serif;
  color:var(--text);
  background:black;
}

/* HERO tipo Carmotors */
.hero-page{
  position:relative;
  height:190px;
  background-size:cover;
  background-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(15,23,42,.20),
    rgba(15,23,42,.85)
  );
}

.hero-content{
  position:relative;
  width:min(1250px, 92%);
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.hero-content h1{
  margin:0;
  color:#ffffff;
  font-size:56px;
  font-weight:900;
  letter-spacing:.2px;
}

.breadcrumb{
  color:#cbd5e1;
  font-weight:600;
  font-size:14px;
}

.breadcrumb a{
  color:#ffffff;
  text-decoration:none;
}

.breadcrumb span{
  opacity:.9;
}

/* Layout */
.section{
  padding:0;
}

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

.wrap{
  width:100%;
  margin:0;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}

/* Bloques */
.box-text{
  padding:64px 58px;
  background:var(--card);
}

.box-media{
  background:var(--card);
}

.box-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Tipografía */
.kicker{
  margin:0 0 16px;
  font-size:44px;
  font-weight:900;
  letter-spacing:1px;
  color:#ffffff;
}

.lead{
  color:var(--muted);
  line-height:1.7;
  font-size:18px;
  margin:0 0 24px;
}

.big{
  font-size:34px;
  line-height:1.25;
  font-weight:900;
  margin:0 0 18px;
  color:#ffffff;
}

.box-text p{
  color:var(--muted);
  line-height:1.7;
  font-size:18px;
  margin:0 0 18px;
}

.box-text h2{
  margin:0 0 10px;
  font-size:38px;
  font-weight:900;
  color:#ffffff;
}

.box-text h3{
  margin:18px 0 10px;
  font-size:28px;
  font-weight:900;
  color:#ffffff;
}

/* Banner sobre imagen */
.cover{
  position:relative;
}

.banner-title{
  position:absolute;
  left:40px;
  bottom:26px;
  font-size:48px;
  font-weight:900;
  letter-spacing:2px;
  color:var(--accent);
  text-shadow:0 8px 20px rgba(0,0,0,.6);
}

/* Responsive */
@media (max-width: 980px){
  .hero-content h1{
    font-size:42px;
  }

  .two-col{
    grid-template-columns:1fr;
  }

  .box-text{
    padding:40px 22px;
  }

  .kicker{
    font-size:36px;
  }

  .big{
    font-size:28px;
  }

  .banner-title{
    left:18px;
    font-size:36px;
  }

  .box-media img{
    height:auto;
  }
}