/* ========== FUENTES ========== */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
       url('fonts/montserrat/Montserrat-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Medium.woff2') format('woff2'),
       url('fonts/montserrat/Montserrat-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Bold.woff2') format('woff2'),
       url('fonts/montserrat/Montserrat-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ========== BASE ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.6;
}

/* ========== HEADER + MENÚ ========== */
header{
  position: sticky; top: 0; z-index: 1000;
  transition: transform .28s ease, box-shadow .2s ease;
}
header.header--hidden{ transform: translateY(-100%); }
header.header--scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }

.contenedor-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 12px 0; background-color: #ffc808;
}
.logo-img { height: 60px; max-width: 100%; }

#menu {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}
#menu a {
  text-decoration: none; color: #111; font-weight: 700; font-size: 16px;
  text-transform: capitalize;
}

/* Hamburgesa (móvil) */
.menu-toggle { display: none; font-size: 2rem; cursor: pointer; z-index: 1200; }

/* Estado desplegado (móvil) */
#menu.active{
  position: absolute; top: calc(100% + 8px); right: 12px;
  display: flex; flex-direction: column; min-width: 220px;
  background: #fff; color:#111; border: 1px solid #eee; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14); z-index: 1100;
}
#menu.active a{
  display:block; padding:12px 14px; border-bottom:1px solid #f4f4f4; color:#111 !important;
}
#menu.active a:last-child{ border-bottom:0; }

@media (max-width: 768px){
  .contenedor-header{ position: relative; }
  .menu-toggle{ display:block; }
  #menu{ display:none; }
  #menu.active{ display:flex; }
}
@media (min-width: 769px){
  #menu{ display:flex !important; position: static !important; background: transparent !important; }
}

/* ========== HERO (portada) opcional ========== */
.hero {
  background: linear-gradient(to right, #00000066, #00000033), url('img/banner/banner1.webp') center/cover no-repeat;
  color: #fff; text-align: center; padding: 80px 20px;
}
.hero h2{ font-size: 2.5rem; margin: 0 0 10px; }
.hero p{ font-size: 1.1rem; margin: 0 0 18px; }

/* ========== BOTONES ========== */
.btn { display:inline-block; padding:12px 20px; border-radius: 6px; text-decoration:none; font-weight:600; }
.btn-wsp { background:#25D366; color:#fff; }
.btn-cotizar{ background:#ffcc00; color:#000; box-shadow: 0 4px 10px rgba(0,0,0,.1); }
.btn-cotizar:hover{ filter: brightness(0.96); }

/* ========== COLLAGE CATEGORÍAS (INDEX) ========== */
.categorias-principales{ padding: 40px 20px; text-align:center; background:#fff; }
.categorias-principales h2{ font-size: 24px; margin-bottom: 30px; color:#000; }

.grid-categorias{
  display: grid; gap: 20px; padding: 0;
  grid-template-areas:
    "cat1 cat2 cat3"
    "cat4 cat5 cat3";
  grid-template-columns: 1fr 1fr 1fr;
}
.categoria{
  position: relative; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:#fff; font-weight:700;
}
.categoria img{
  width:100%; height:100%; object-fit: cover; display:block; transition: transform .3s ease;
}
.categoria span{
  position:absolute; z-index:2; font-size:16px;
  text-shadow: 0 0 4px rgba(0,0,0,.7);
}
.categoria:hover img{ transform: scale(1.05); }

.cat1{ grid-area: cat1; width:100%; height:200px; }
.cat2{ grid-area: cat2; width:100%; height:200px; }
.cat3{ grid-area: cat3; width:100%; height:420px; }
.cat4{ grid-area: cat4; width:100%; height:200px; }
.cat5{ grid-area: cat5; width:100%; height:200px; }

@media (max-width: 768px){
  .categorias-principales{ padding: 10px 0; }
  .grid-categorias{ display:flex; flex-direction: column; gap: 8px; }
  .categoria{ height: auto !important; border-radius: 8px; }
  .categoria img{ width:100%; height:auto; }
}

/* ========== LISTADO DE BENEFICIOS (opcional) ========== */
.beneficios{ background:#fff; padding: 40px 20px; text-align:center; }
.beneficios h2{ font-size: 24px; color:#000; margin-bottom: 24px; }
.beneficios-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 22px; max-width:1200px; margin: 0 auto;
}
.beneficio{
  background:#fff; border:1px solid #eee; border-radius:10px; padding: 24px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* ========== PRODUCTOS DESTACADOS / GRID GENÉRICO ========== */
.productos{ padding: 40px 20px; background:#fff; text-align:center; }
.productos h2{ font-size: 24px; margin-bottom: 30px; color:#000; }

.productos-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px; max-width: 1200px; margin: 0 auto;
}
.producto{
  border:1px solid #eee; border-radius:10px; padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.05); transition: transform .3s ease;
}
.producto:hover{ transform: translateY(-4px); }

/* === Imagen de producto (NO recorte, fondo blanco) === */
.imagen-producto{
  width:100%; height:160px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:12px; margin-bottom: 12px;
}
.imagen-producto img{
  display:block; width:auto; height:auto;
  max-width: 90%; max-height: 100%;
  object-fit: contain; object-position: center;
}

/* ========== POPUPS (cotizar / contacto) ========== */
.popup{
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  padding: 24px; background: rgba(17,24,39,.55); z-index: 2000;
}
.popup.is-open{ display:flex; }
.popup-content{
  width: min(560px, 92vw); margin:0 auto; box-sizing: border-box;
  background: #fffbe6; border: 2px solid #facc15; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 28px 32px 32px; position:relative; animation: pop-in .18s ease-out;
}
@keyframes pop-in{ from{ transform:scale(.96); opacity:0 } to{ transform:scale(1); opacity:1 } }
.popup-close{
  position:absolute; top:10px; right:12px; width:36px; height:36px;
  border:0; border-radius:50%; background:#f3f4f6; cursor:pointer; font-size:20px;
}
.popup-content h2, .popup-content h3{
  margin:0 0 12px; font-size:22px; line-height:1.25; color:#111827; font-weight:800;
  border-bottom:2px solid #facc15; padding-bottom:6px;
}
.popup-resumen{
  color:#111827; background:#fef9c3; border:1px solid #facc15;
  padding:10px 14px; border-radius:10px; margin-bottom: 8px;
}
#popup-producto-txt{ font-weight:700; color:#b45309; }

.popup-form, #form-cotizar{ display:grid; gap: 12px; }
.form-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px){ .form-grid-2{ grid-template-columns: 1fr; } }

.popup-content label{ font-weight:600; color:#374151; font-size:14px; }
.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="tel"],
.popup-content input[type="number"],
.popup-content textarea{
  width:100%; padding: 10px 12px; border:1px solid #d1d5db; border-radius: 10px;
  outline:none; font-size:14px; transition: box-shadow .15s, border-color .15s;
  background:#fff;
}
.popup-content textarea{ resize: vertical; min-height: 110px; }
.popup-content input:focus, .popup-content textarea:focus{
  border-color:#2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.popup-content button[type="submit"], #btn-enviar{
  padding: 10px 14px; border-radius:10px; border:0; cursor:pointer;
  background:#111827; color:#fff; font-weight:700; transition:.15s;
}
.popup-content button[type="submit"]:hover, #btn-enviar:hover{ filter:brightness(1.06); }
.popup-content button[disabled]{ opacity:.6; cursor:not-allowed; }
.msg{ margin-top: 6px; font-weight:600; font-size:14px; }
.msg.ok{ color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; padding:8px 10px; border-radius:10px; }
.msg.err{ color:#7f1d1d; background:#fef2f2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px; }

/* ========== FOOTER ========== */
.site-footer{
  background:#111; color:#eee; border-top:4px solid #ffc808; margin-top: 40px;
  font-size: 14px;
}
.footer-top{
  max-width:1200px; margin:0 auto; padding: 40px 20px;
  display:grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 30px;
}
.footer-col h4{ font-weight:700; font-size:16px; margin:0 0 12px; color:#fff; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:8px 0; }
.footer-logo{ height:48px; margin-bottom: 12px; }
.btn-wsp-footer{
  display:inline-block; margin-top: 10px; padding:10px 14px; background:#25D366; color:#111;
  font-weight:700; border-radius:999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.footer-bottom{
  border-top:1px solid #222; text-align:center; padding: 14px 10px; color:#bbb; font-size: 13px;
}
@media (max-width: 900px){ .footer-top{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; gap: 22px; } .footer-bottom{ font-size: 12px; } }

/* ===== PARCHE: centrar collage y mostrar productos ===== */

/* 1) Collage de categorías (INDEX) centrado y con ancho limitado */
.categorias-principales .grid-categorias{
  max-width: 1200px;       /* limita el ancho del collage */
  margin: 0 auto;          /* centra el collage */
}
.categoria.cat1, .categoria.cat2, .categoria.cat4, .categoria.cat5 { height: 200px; }
.categoria.cat3 { height: 420px; }
.categoria img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* En móvil, que no se estire y mantenga el comportamiento en columna */
@media (max-width: 768px){
  .categorias-principales .grid-categorias{ max-width: 680px; }
  .categoria{ height: auto !important; }
  .categoria img{ width: 100%; height: auto; object-fit: contain; }
}

/* 2) Productos: asegurar visibilidad de imágenes y tamaño razonable */
.productos-grid{
  max-width: 1200px;       /* centra y limita el grid de productos */
  margin: 0 auto;
}
.imagen-producto{
  width: 100%;
  height: 180px;           /* sube/baja si quieres más/menos grande */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}
.imagen-producto img{
  display: block;
  max-width: 95% !important;
  max-height: 95% !important;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 1 !important;   /* por si alguna regla la estaba ocultando */
}
/* === Forzar visibilidad y tamaño razonable de imágenes de productos === */
.productos-grid { max-width: 1200px; margin: 0 auto; }

.imagen-producto{
  width: 100%;
  height: 180px;              /* ajusta si quieres 160/200 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}

.imagen-producto img{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-width: 95% !important;
  max-height: 95% !important;
  object-fit: contain !important;
  object-position: center !important;
  z-index: 1;
}
/* ===== Footer: enlaces personalizados ===== */
.site-footer a {
  color: #ffffff;             /* color base de los links */
  text-decoration: none;      /* quita el subrayado */
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #ffcc00;             /* color al pasar el mouse (ejemplo amarillo corporativo) */
}

/* ===== FABs: botones flotantes ===== */
.fab-wrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: row;   /* 👈 ahora en horizontal */
  gap: 10px;
  z-index: 1200;
}

.fab-btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  border: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
overflow: hidden;
}

.fab-btn img,
.fab-btn svg{
  width: 26px;
  height: 26px;
  display: block;              /* evita espacios de inline-img */
  object-fit: contain;         /* por si el viewBox o PNG trae margen */
}

.fab-wsp{ background: #25D366; }
.fab-call{ background: #ffcc00; }

.fab-btn:hover{ transform: translateY(-2px); filter: brightness(0.96); }

/* CTA alargada */
.fab-cta{
  border: none;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 12px;
  background: #ffcc00;
  color: #111;
  font-weight: 600;   /* 👈 menos grueso que 800 */
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}
.fab-cta:hover{ transform: translateY(-2px); filter: brightness(0.96); }

/* Responsive: en móviles vuelve a columna */
@media (max-width: 640px){
  .fab-wrap{ 
    right: 12px; 
    bottom: 12px; 
    flex-direction: column;   /* 👈 en pantallas pequeñas se apilan */
    gap: 8px; 
  }
  .fab-btn{ width: 48px; height: 48px; }
  .fab-btn svg{ width: 24px; height: 24px; }
  .fab-cta{ padding: 10px 14px; font-size: 14px; font-weight: 500; }
}

/* Cursor mano en todos los clickeables del home */
.productos .producto a,
.productos .producto button,
.productos .producto .btn,
.card-actions a,
.card-actions button,
.card-actions .btn {
  cursor: pointer !important;
}

/* Por si el botón es un <div> con onclick */
.btn, .btn-primario, .btn-secundario, .cta-cotizar {
  cursor: pointer !important;
  display: inline-block; /* asegura área clickeable */
}

/* --- FIX móvil definitivo: grillas de categorías/destacados --- */
@media (max-width: 576px){
  /* Quita el alto fijo del contenedor que recorta */
  .productos-grid .producto .imagen-producto{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    aspect-ratio: auto !important;      /* por si usas ratio */
    padding: 0 !important;               /* por si el alto venía de padding hack */
  }
  .productos-grid .producto .imagen-producto::before{
    content: none !important;            /* por si había pseudo para forzar ratio */
  }

  /* Asegura que la imagen se vea completa */
  .productos-grid .producto .imagen-producto > img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* === Fix color botones === */
.btn-contacto,
.btn-cotizar,
button.cotizar,
button.contacto {
  background-color: #ffcc00 !important;  /* Amarillo */
  color: #111 !important;                /* Texto negro para contraste */
}

.categoria-info {
  max-width: 900px;
  margin: 30px auto;
  padding: 15px 20px;
  line-height: 1.6;
}
.categoria-info h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-align: center;
}
.categoria-info p {
  margin-bottom: 12px;
  text-align: justify;
}
.categoria-info a {
  text-decoration: underline;
}

.home-info {
  max-width: 900px;
  margin: 40px auto;
  text-align: center;
  line-height: 1.6;
  padding: 10px 20px;
}
.home-info p {
  font-size: 1rem;
  margin-bottom: 20px;
}
.logo-home img {
  max-width: 200px;
  height: auto;
}