:root{
  --primary:#2A5CAA;
  --secondary:#E31937;
  --light:#f6f7fb;
  --white:#ffffff;
  --dark:#111827;
  --gray:#6b7280;
  --success-500:#10b981;
  --success-600:#059669;
  --warn-300:#fde68a;
  --warn-400:#fbbf24;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-md:0 6px 18px rgba(0,0,0,.08);
  --shadow-xl:0 18px 40px rgba(0,0,0,.16);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--dark);
  background:#fff;
  line-height:1.45;
}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef0f3;z-index:1000}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;text-decoration:none;color:var(--dark);display:flex;align-items:center;gap:10px}
.logo-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;font-weight:900}
.site-nav a{margin-left:18px;text-decoration:none;color:#374151;font-weight:600}
.site-nav a:hover{color:var(--primary)}

/* Hero 
.hero{background:linear-gradient(140deg, #2a5caa 0%, #203f78 100%);color:#fff;padding:72px 0}
.hero h1{margin:0 0 10px;font-size:2.2rem}
.hero p{margin:0 0 18px;color:#e6ebff}
.btn{display:inline-block;border-radius:10px;padding:10px 16px;text-decoration:none;font-weight:800}
.btn-primary{background:var(--secondary);color:#fff;border:2px solid var(--secondary)}
.btn-primary:hover{background:transparent;color:#fff;filter:brightness(1.1)}*/

.hero {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url('/images/fondo-zipper.jpg') center/cover no-repeat;
  color: #fff;
  padding: 100px 0;
  text-align: center;
}









/* Section titles */
.section-title h2{margin:0 0 6px;font-size:1.6rem}
.section-title p{margin:0 0 20px;color:var(--gray)}

/* ===== PRODUCTOS ===== */



.products {
  background:
    linear-gradient(rgba(255,255,255,0.96), rgba(255,255,255,0.96)),
    url('/images/fondo-zipper.jpg') center/contain no-repeat;
  background-attachment: fixed; /* efecto sutil de parallax */
  padding: 72px 0;
}





.products{padding:72px 0;background:var(--light)}

/* GRID (único y fijo a 3 columnas en desktop) */
.product-grid{
  display:grid;
  gap:26px;
  grid-template-columns:repeat( minmax(280px, 1fr));
  align-items:stretch;
}

/* Forzar 3 columnas en desktop */
@media (min-width: 992px){
  .product-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: stretch;
    align-items: stretch;
  }
}
@media (min-width: 1280px){
  .product-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
.product-grid > .product-card{
  width: 100%;
  max-width: none;
}

/* CARD */
.product-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .3s ease, box-shadow .3s ease;
  width:100%;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.06);
  will-change:transform;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-xl);
}

/* Imagen dentro de la card (UNA sola fuente: <img>) */
.product-img{
  height:240px;
  background:#f6f7fb;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6px;
}
.product-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transition:transform .25s ease;
}
.product-card:hover .product-img img{ transform:scale(1.03); }

/* Badge */
.product-badge.popular,
.product-badge{
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  color:#fff;
  padding:4px 16px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(16,185,129,.4);
  z-index:2;
}

/* Contenido */
.product-content{ padding:18px; text-align:center; }
.product-title{ font-size:1.05rem; font-weight:800; color:var(--dark); margin:4px 0 6px; }
.product-description{ color:var(--gray); font-size:.92rem; margin-bottom:12px; }
.product-meta{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 14px; }
.product-price{ font-size:1.25rem; font-weight:900; color:var(--primary); }
.product-stock{ font-size:.88rem; color:#6b7280; }
.product-btn{
  background:var(--secondary);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  transition:transform .2s ease, filter .2s ease;
  width:100%;
}
.product-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.plan-results{
  background:#f0fdf4;
  border-left:3px solid var(--success-500);
  padding:8px 12px;
  margin-top:12px;
  border-radius:8px;
  font-size:.9rem;
  text-align:left;
}

/* CONTACTO */
/* CONTACTO (antiguo formulario) */
/*
.contact-form { ... }
.contact-form label { ... }
.contact-form input, ... { ... }
...
*/


.contact{padding:64px 0;background:#fff}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
.contact-form label{font-weight:700;color:#374151}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:1rem;background:#fff
}
.contact-form textarea{grid-column:1/-1}
.contact-form button{grid-column:1/-1;justify-self:start}


/* CONTACTO (nuevo formulario n8n) */

/* ===== Embedding n8n form ===== */
.embed-form {
  max-width: 860px;
  margin: 0 auto;
}

.form-iframe {
  width: 100%;
  min-height: 900px;  /* Ajusta si quieres m¨¢s o menos alto */
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}







/* Footer */
.site-footer{padding:28px 0;border-top:1px solid #eef0f3;background:#fff}
.site-footer p{margin:0;color:#6b7280}

/* Navegación anclas */
section, .catalog, .categories, .distributors, .contact { scroll-margin-top: 90px; }

/* Responsive */
@media (max-width: 900px){
  .hero { padding-top: 80px; }
}
@media (max-width: 768px){
  .contact-form{grid-template-columns:1fr}
  .product-img{ height:200px; }
}