:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#95a3b8;
  --accent:#6ee7b7;
  --glass: rgba(255,255,255,0.03);
  --max-width:1000px;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
body{
  margin:0; 
  background:linear-gradient(180deg,var(--bg) 0%, #081021 100%); 
  color:#e6eef6; 
  line-height:1.6}
.container{
  max-width:var(--max-width); 
  margin:0 auto; 
  padding:0.8rem;
  /* background:linear-gradient(180deg, rgb(255, 0, 0), transparent); */
}

.site-header{backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); position:sticky; top:0; z-index:40}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{font-weight:700; font-size:1.1rem; color:var(--accent); text-decoration:none}
.main-nav ul{
  display:flex; 
  gap:0.75rem; 
  list-style:none; 
  margin:0; 
  padding:0}
.main-nav a{color:var(--muted); text-decoration:none; padding:0.5rem 0.6rem; border-radius:8px}
.main-nav a:hover{color:#fff}
.menu-toggle{display:none; background:none; border:0; color:var(--muted); font-size:1.25rem}

.hero{padding:2.5rem 0}
.hero-grid{display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:center}
.hero h1{
  font-size:2.5rem; 
  margin:0 0 0.6rem;
  top: 0;
  padding-left: 120px;
}
.lead{color:var(--muted); max-width:48ch}
.btn{
  text-justify: center;
  display:inline-block; 
  padding: 0.6rem 0.9rem;
  background:var(--accent); 
  color:#012; 
  border-radius:10px; 
  text-decoration:none; 
  font-weight:600;
  
}
.hero-media{
  display:flex; 
  align-items:center; 
  justify-content:center;  
  max-width:48ch
}
.hero-media img{
  width:320px; 
  height:320px; 
  object-fit:cover; 
  border-radius:14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6); 
  border: 1px solid rgba(255,255,255,0.03);
  max-width:48ch
}
.img-placeholder{
  width:320px; 
  height:320px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  background:var(--glass); 
  color:var(--muted); 
  border-radius:14px; 
  font-size:0.95rem
}

.Imagen-productos{
  width:100%; 
  height:auto; 
  border-radius:14px; 
  box-shadow: 0 8px 30px rgba(0,0,0,0.6); 
  border: 1px solid rgba(255,255,255,0.03);
}

.section{
  padding:2.5rem 0;
  
}
.section.alt{
  background:linear-gradient(180deg, rgba(255, 0, 0, 0), transparent);
  align-items: center;
}
h2{margin-top:0}

.contact form{display:grid; gap:0.6rem; max-width:540px}
.Imagen-presentacion{width:200px; height:auto; position: relative;}
input, textarea{padding:0.6rem; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit}
.form-result{color:var(--accent); margin-top:0.6rem}

.site-footer{padding:1.2rem 0; text-align:center; color:var(--muted)}

/* Responsive */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-media img, .img-placeholder{width:260px; height:260px}
  .hero h1{
    padding-left:0
  }
  .main-nav{display:none}
  .main-nav ul{
    border: solid 1px rgba(255,255,255,0.1);
    border-radius:12px;
    width:150px;
    top: 60px;
    right: 20px;
    background:linear-gradient(180deg,var(--bg) 0%, #081021 100%);
    backdrop-filter: blur(6px);
    flex-direction: column;
    position: absolute;
    display:flex;
    margin:0;
  }

  .main-nav ul a{
    display: flex;
    width: 100%;
    font-optical-sizing: auto;
    background: 40px;
    position: relative;
    color: #fff;
  }
  .main-nav ul a:hover{
    padding: 10px;
    background: rgba(0, 82, 133, 0.886);
  }

  .menu-toggle{
    display:block;
  }

}