/* styles.css
   Paleta: rojo #D62828, vino oscuro #841515, negro #000000, acentos en blanco
   Tipografías: Inter / Poppins
   Comentarios y estructura clara. */

:root{
  --red: #D62828;
  --wine: #841515;
  --black: #000000;
  --white: #FFFFFF;
  --bg: #0b0b0b;
  --muted: rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --container: 1100px;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
  color:var(--white);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Poppins', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white)}
.logo-text{font-weight:700}
.nav a{color:var(--muted);text-decoration:none;margin-left:20px;font-weight:500}
.nav a:hover{color:var(--white)}

/* HERO */
.hero{position:relative;padding:80px 0 100px;overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,var(--wine),var(--black));opacity:0.14;mix-blend-mode:multiply}
.hero-inner{display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center}
.hero-content{max-width:640px}
.hero-title{font-family:'Poppins',sans-serif;font-size:40px;line-height:1.05;margin:0 0 12px;color:var(--white);font-weight:700}
.hero-sub{color:var(--muted);margin:0 0 20px;font-size:18px}
.hero-ctas{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;text-decoration:none;cursor:pointer;border:0;font-weight:600}
.btn-primary{background:var(--red);color:var(--white);box-shadow:0 8px 24px rgba(214,40,40,0.12)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.06)}
.hero-visual{display:flex;justify-content:center}
.hero-graphic{width:100%;max-width:460px;border-radius:14px;box-shadow:0 20px 50px rgba(11,11,11,0.6)}

/* Sections */
.section{padding:72px 0}
.section-title{font-size:24px;margin:0 0 8px;color:var(--white);font-weight:700}
.section-lead{color:var(--muted);margin:0 0 24px}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.service-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.service-card h3{margin:0 0 6px}
.service-card p{margin:0;color:var(--muted)}

/* Products */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,0.03)}
.product-media svg{width:120px;height:80px;border-radius:8px}
.product-body h3{margin:0 0 6px}
.link-more{color:var(--red);text-decoration:none;font-weight:600}

/* Why grid */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.why-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.why-card h4{margin:0 0 8px}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial-card{background:rgba(255,255,255,0.02);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.testimonial-card p{margin:0 0 8px;color:var(--muted)}
.testimonial-card cite{font-size:13px;color:var(--white);opacity:0.9}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form label{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.contact-form input,.contact-form textarea{margin-top:8px;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white)}
.form-actions{display:flex;gap:10px;margin-top:6px}
.form-status{margin-top:8px;color:var(--muted)}
.contact-info p{color:var(--muted);margin:8px 0}
.socials a{color:var(--white);display:inline-block;margin-right:8px;text-decoration:none}

/* Footer */
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:24px 0;margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-nav a{color:var(--muted);margin-right:14px;text-decoration:none}

/* Animations (initial state) */
.animate-on-scroll{opacity:0;transform:translateY(18px);transition:opacity 560ms cubic-bezier(.2,.9,.2,1),transform 560ms cubic-bezier(.2,.9,.2,1)}
.in-view{opacity:1;transform:none}

/* Responsive */
@media (max-width: 992px){
  .hero-inner{grid-template-columns:1fr;}
  .products-grid,.services-grid,.testimonials-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hero-title{font-size:28px}
  .nav{display:none}
  .container{padding:0 16px}
}