:root{
  --bg:#0b0b0b;
  --bg2:#161616;
  --card:#1d1d1d;
  --yellow:#ffc400;
  --yellow2:#ffdd55;
  --white:#ffffff;
  --gray:#bdbdbd;
  --red:#d62828;
  --shadow:0 20px 45px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Montserrat,sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none}
.container{width:min(1180px,92%);margin:auto}

/* HEADER */
header{
  position:fixed;top:0;left:0;width:100%;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,196,0,.15);
  z-index:999;
}
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:80px;
}
.logo img{height:70px}
nav ul{display:flex;gap:28px;list-style:none}
nav ul a{
  color:#fff;font-weight:600;
  transition:.25s;
}
nav ul a:hover{color:var(--yellow)}
.btn-nav,.btn-primary{
  background:var(--yellow);
  color:#000;
  padding:14px 26px;
  border-radius:8px;
  font-weight:800;
  transition:.25s;
}
.btn-nav:hover,.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 0 24px rgba(255,196,0,.45);
}
.btn-secondary{
  border:2px solid var(--yellow);
  color:var(--yellow);
  padding:12px 26px;
  border-radius:8px;
}
.btn-secondary:hover{
  background:var(--yellow);
  color:#000;
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.8)),
    url("../img/hero-bg.jpg") center/cover;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  padding-top:110px;
}
.tag{
  display:inline-block;
  background:#222;
  border:1px solid var(--yellow);
  color:var(--yellow);
  padding:8px 16px;
  border-radius:50px;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1;
  margin-bottom:20px;
}
.hero p{
  color:#ddd;
  font-size:1.2rem;
  max-width:650px;
}
.hero-buttons{
  display:flex;
  gap:18px;
  margin:35px 0;
  flex-wrap:wrap;
}
.hero-features{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  color:var(--yellow);
  font-weight:700;
}
.hero-image img{
  filter:drop-shadow(0 0 40px rgba(255,196,0,.2));
}
@keyframes float{
  50%{transform:translateY(-10px)}
}

/* STATS */
.stats{
  background:#111;
  padding:70px 0;
}
.stats .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.stat{
  background:var(--card);
  text-align:center;
  padding:30px;
  border-radius:14px;
  border-top:4px solid var(--yellow);
  box-shadow:var(--shadow);
}
.stat h2{
  color:var(--yellow);
  font-size:2.4rem;
}
.stat p{color:#ddd}

/* SECTIONS */
section{padding:90px 0}
section h2{
  text-align:center;
  font-size:2.4rem;
  margin-bottom:50px;
}

/* BENEFITS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;
}
.cards article{
  background:var(--card);
  padding:35px;
  border-radius:16px;
  transition:.3s;
  box-shadow:var(--shadow);
}
.cards article:hover{
  transform:translateY(-10px);
  border:1px solid var(--yellow);
}
.cards i{
  color:var(--yellow);
  font-size:2.4rem;
  margin-bottom:18px;
}
.cards h3{margin-bottom:12px}

/* PRODUCTS */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}
.product{
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.3s;
}
.product:hover{
  transform:translateY(-10px);
}
.product img{
  height:260px;
  width:100%;
  object-fit:cover;
}
.product h3,.product p{
  padding:0 25px;
}
.product h3{margin:20px 0 10px}
.product a{
  display:block;
  margin:25px;
  text-align:center;
  background:var(--yellow);
  color:#000;
  padding:14px;
  border-radius:8px;
  font-weight:700;
}

/* CTA */
.cta{
  background:linear-gradient(90deg,#151515,#000);
  text-align:center;
}
.cta h2{
  color:var(--yellow);
  font-size:3rem;
}
.cta p{
  max-width:700px;
  margin:20px auto 35px;
}

/* FOOTER */
footer{
  background:#050505;
  padding:60px 0;
  text-align:center;
}
.footer-logo{
  max-width:180px;
  margin:0 auto 20px;
}
.social{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:25px 0;
}
.social a{
  width:48px;height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#222;
  color:#fff;
  transition:.25s;
}
.social a:hover{
  background:var(--yellow);
  color:#000;
}

/* FLOAT */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:65px;
  height:65px;
  border-radius:50%;
  background:#25D366;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:2rem;
  box-shadow:var(--shadow);
  z-index:999;
}

/* RESPONSIVE */
@media (max-width:960px){
  nav ul{display:none}
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-features,
  .hero-buttons{
    justify-content:center;
  }
  .stats .container{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:600px){
  .stats .container{
    grid-template-columns:1fr;
  }
  .hero h1{
    font-size:2.4rem;
  }
  section{
    padding:70px 0;
  }
}
/*=================================================
            PROCESO DE FABRICACIÓN
=================================================*/

.process{

    background:#0b0b0b;
    padding:120px 0;

}

.process .section-title{

    max-width:900px;
    margin:0 auto 70px;
    text-align:center;

}

.process .section-title h2{

    font-size:48px;
    color:#fff;
    margin-bottom:20px;

}

.process .section-title p{

    color:#bdbdbd;
    line-height:1.8;
    font-size:18px;

}

.process-grid{

    display:grid;
    grid-template-columns:45% 55%;
    gap:70px;
    align-items:start;

}

/*********************
IZQUIERDA
**********************/

.process-info{

    background:#171717;

    padding:45px;

    border-radius:20px;

    border-top:5px solid var(--yellow);

    box-shadow:0 20px 40px rgba(0,0,0,.4);

}

.process-info h3{

    color:var(--yellow);

    font-size:34px;

    margin-bottom:20px;

}

.process-info p{

    color:#d5d5d5;

    margin-bottom:25px;

    line-height:1.8;

}

.process-info ul{

    list-style:none;

    margin-bottom:35px;

}

.process-info li{

    padding:14px 0;

    color:white;

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

    font-size:17px;

}

/**********************
TIMELINE
***********************/

.timeline{

    position:relative;

    padding-left:55px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--yellow);

}

/********************/

.step{

    position:relative;

    display:flex;

    gap:25px;

    margin-bottom:40px;

}

.step span{

    position:absolute;

    left:-55px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--yellow);

    color:#000;

    font-weight:bold;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    box-shadow:0 0 25px rgba(255,196,0,.35);

}

.step div{

    background:#171717;

    padding:28px;

    border-radius:16px;

    width:100%;

    transition:.35s;

    border-left:4px solid var(--yellow);

}

.step div:hover{

    transform:translateX(10px);

    background:#202020;

}

.step h4{

    color:white;

    font-size:24px;

    margin-bottom:10px;

}

.step p{

    color:#cfcfcf;

    line-height:1.7;

}

/**********************
RESPONSIVE
**********************/

@media(max-width:992px){

.process-grid{

grid-template-columns:1fr;

}

.timeline{

margin-top:50px;

}

.process .section-title h2{

font-size:38px;

}

.process-info{

padding:30px;

}

}

@media(max-width:600px){

.process{

padding:80px 0;

}

.step span{

width:40px;

height:40px;

left:-50px;

font-size:14px;

}

.step div{

padding:20px;

}

.process .section-title h2{

font-size:30px;

}

.process-info h3{

font-size:28px;

}

}