/* Basic reset & variables */
:root{
  --menu-bg: #1d232a;
  --accent: #e40009;
  --container: 1200px;
  --text:#111;
  --shadow: 0 10px 40px rgba(16,24,40,0.08); /* Sombra moderna */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:#f7f7f7}

/* Container */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* HEADER & NAVIGATION */
.site-header { background: var(--menu-bg); position:sticky; top:0; z-index:60; }
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand .logo{height:54px}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}
.nav{display:flex;gap:20px;align-items:center} 
.nav a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;transition: background .3s ease;}
.nav a:hover{background:rgba(255,255,255,0.1);} 

/* WhatsApp Button in Nav */
.btn-wh{background:var(--accent);color:#fff;padding:8px 16px;border-radius:8px;transition: background .3s ease}
.btn-wh:hover{background:#c00007;}

/* HERO - maintain 841x458 ratio (height/width ≈ 0.5445 => padding-top:54.45%) */
.hero{position:relative;width:100%;padding-top:54.45%;overflow:hidden;background:#000}
.hero-slider{position:absolute;inset:0}
.hero-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hero-slider img:first-child{opacity:1}
.hero-overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.hero-overlay h1{
  color:#fff;
  font-size:clamp(2rem, 5vw, 3rem); /* Usando clamp para fuente fluida */
  text-align:center;
  margin-bottom:12px;
  text-shadow:0 6px 18px rgba(0,0,0,.5);
  line-height: 1.1;
}
.hero-overlay p{color:#fff;margin-bottom:20px;text-shadow:0 4px 12px rgba(0,0,0,.45);font-size:1.1rem;}
.btn.primary{background:var(--accent);color:#fff;padding:12px 24px;border-radius:10px;text-decoration:none;font-weight:700;transition:background .3s ease}
.btn.primary:hover{background:#c00007;}

/* SECTION / CARDS */
.section{padding:60px 0} 
.section .text-center{margin-bottom:10px;}
.section .lead{margin-bottom:40px;font-size:1.15rem;color:#555}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} 
.card{
  background:#fff;
  padding:24px;
  border-radius:16px; 
  box-shadow:var(--shadow); 
  min-height:200px;
  border-top: 4px solid var(--accent); /* Acento de color */
  transition: transform 0.3s ease;
}
.card:hover{
  transform: translateY(-5px); 
  box-shadow:0 15px 50px rgba(16,24,40,0.15);
}
.card h3{margin-bottom:12px}

/* SMALL SLIDER (Galerías de Producto) */
.small-slider{position:relative;width:100%;padding-top:113.9%;overflow:hidden;border-radius:10px;margin-top:16px}
.small-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.small-slider img:first-child{opacity:1}

/* Maps grid */
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px}
.map-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.map-embed{margin-top:10px;}
.map-embed iframe{width:100%;height:280px;border:0;border-radius:8px}

/* CONTACT SECTION STYLES */
.contact-section{
    padding-top: 20px; 
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; 
    margin-top: 40px;
}
.contact-card {
    padding: 30px; 
    text-align: center;
}
.contact-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--accent); 
}
.contact-card p {
    margin-bottom: 25px;
    font-size: 0.95rem;
}
.full-width {
    display: block;
    width: 100%;
}
.btn-secondary{
    background: #444; 
}
.btn-secondary:hover{
    background: #222; 
}
.contact-note{
    margin-top: 25px;
    font-size: 0.9rem;
    color: #666;
}
.text-center{text-align:center;}


/* Footer */
.site-footer{background:#1d232a;color:#fff;padding:25px 0;margin-top:60px}
.footer-inner{display:flex;gap:20px;justify-content:space-between;align-items:center;max-width:var(--container);margin:0 auto;padding:0 16px;font-size:0.9rem}
.footer-inner a{color:#fff;text-decoration:underline;transition:opacity .3s ease;}
.footer-inner a:hover{opacity:0.8;}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.05);
}
.whatsapp-float svg {
    width: 30px; 
    height: 30px;
    fill: white;
}

/* Responsive */
@media (max-width:1024px) {
    .site-footer{margin-top:40px;}
    .section{padding:40px 0;}
}

@media (max-width:900px){
  /* Tabletas grandes a móviles */
  .cards{grid-template-columns:repeat(2,1fr); gap:20px; } /* 2 columnas en tabletas */
  .map-grid{grid-template-columns:1fr; gap:20px}
  .contact-grid {grid-template-columns: 1fr; gap: 20px;}

  /* Navegación Móvil (Menu Hamburguesa) */
  .nav{ 
      display:none; /* Oculto por defecto */
      flex-direction: column; 
      position: absolute;
      top: 74px; 
      right: 0;
      background: var(--menu-bg);
      width: 100%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      padding: 10px 0;
  }
  .nav.is-active{
      display: flex; /* Mostrar cuando se le añade la clase con JS */
  }
  .nav a{
      padding: 14px 16px; 
      width: 100%;
      border-radius: 0;
      text-align: center;
  }
  .nav a.btn-wh {
      display: none; /* Ocultar el botón del nav si usamos el flotante */
  }
  .hamburger{display:block}
  .footer-inner{flex-direction:column;gap:10px;text-align:center}
}

@media (max-width:600px){
    /* Móviles (stack 1 columna) */
    .cards{grid-template-columns:1fr; }
    .hero{padding-top:70%;} 
    .hero-overlay h1{font-size:2rem; margin-bottom:8px;}
}
}