/* ================================
   CORE MEX – CUSTOM (LIMPIO)
   ================================ */

body{
  font-family: "Open Sans", Arial, sans-serif;
  background: #f6f7f9;
  color: #1f2933;
  line-height: 1.6;
}


/* ===== HEADER / HERO ===== */
.site-hero{
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 40px 20px 28px;
  text-align: center;
}

.hero-inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* LOGO escritorio */
.hero-logo{
  height: 180px !important;
  width: auto !important;

}


/* Tagline corporativa */
.hero-tagline{
  font-size: 18px;
  font-weight: 400;
  color: #1f2d3d;
  max-width: 900px;
  margin: 0 auto 10px;
  line-height: 1.5;
}

.hero-meta span{
  margin: 0 10px;
  display: inline-block;
}

.hero-meta a{
  color: #1f4fd8;
  text-decoration: none;
  font-weight: 600;
}

.hero-meta a:hover{
  text-decoration: underline;
}

/* ===== SECCIÓN PRODUCTOS ===== */
.products-section{
  background: #f6f7f9;
  padding: 50px 20px;
}

.products-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.section-title{
  text-align: center;
  font-size: 28px;
  color: #1a365d;
  margin: 0 0 10px;
}

.section-intro{
  text-align: center;
  color: #4a5568;
  font-size: 16px;
  margin: 0 0 30px;
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.product-card{
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.product-card h3{
  font-size: 18px;
  color: #1a365d;
  margin: 10px 0 8px;
}

.product-card p{
  font-size: 14px;
  color: #4a5568;
  margin: 0;
}

/* Placeholder imagen */
.product-image{
  height: 140px;
  background: #edf2f7;
  border: 1px dashed #cbd5e0;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 14px;
  font-weight: 700;
  color: #2c5282;
}

/* ===== FOOTER ===== */
footer{
  background: #1a365d;
  color: #ffffff;
  padding: 22px 10px;
}

footer .copyright{
  font-size: 13px;
  opacity: 0.85;
}

/* Responsive */


/* Imágenes de productos */
.producto-img{
  width: 100%;
  max-width: 220px;     /* tamaño ideal desktop */
  height: 160px;        /* todas mismas */
  object-fit: contain;  /* no se deforman */
  display: block;
  margin: 0 auto 20px;
  background: #fff;     /* quita cuadritos */
  padding: 12px;
  border-radius: 12px;
}

/* ==== BLOQUE PRODUCTOS (solo estas 2 imágenes) ==== */
.productos-wrap{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 25px auto 35px;
  max-width: 900px;
}

.productos-wrap .producto{
  text-align: center;
}

/* TAMAÑO FINAL DE IMÁGENES DE PRODUCTOS */
.productos-wrap .producto-img{
  width: 100%;
  max-width: 220px;   /* ← aquí controlas tamaño */
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;

  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.productos-wrap .producto-titulo{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

.site-hero .logocml26{
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto 18px;
}


/* ===== PRODUCTOS: layout + tamaño (DESKTOP) ===== */
.productos-wrap{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 25px auto 35px;
  max-width: 900px;
}

.productos-wrap .producto{
  text-align: center;
}

.productos-wrap .producto-img{
  width: 100%;
  max-width: 220px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;

  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* ===== RESPONSIVE: tablet/móvil ===== */
@media (max-width: 900px){
  .productos-wrap .producto-img{
    max-width: 200px;
    height: 150px;
  }
  
@media (max-width: 600px){
  .productos-wrap .producto-img{
    max-width: 240px;
    height: 180px;
  }

*{ box-sizing: border-box; }

html, body{
  width: 100%;
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
}

.hero-inner,
.products-inner{
  padding-left: 12px;
  padding-right: 12px;
}

.whatsapp-links a{
  position: relative;
  z-index: 5;
  display: inline-block;
}
@media (max-width: 600px){
  .whatsapp-links a{
    display: inline-block;
    margin: 8px 6px 0;
  }
.hero-meta{ position: relative; z-index: 2; }

.whatsapp-links a{
  position: relative;
  z-index: 5;
}

@media (max-width: 600px){
  .site-hero .logocml26{
    max-height: 220px;
    margin-bottom: 18px;
  }

/* LOGO – presencia de marca */
.site-hero .logocml26{
  max-height: 180px;     /* más alto */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 28px;  /* aire abajo */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.14));
 }


/* BLOQUE DE IDENTIDAD */
.brand-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

/* LOGO PROTAGONISTA */
.site-hero .logocml26{
  max-height: 180px;
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.15));
}

/* Línea sutil debajo del bloque */
.brand-block::after{
  content: "";
  width: 120px;
  height: 3px;
  background: #e2e8f0;
  margin-top: 18px;
  border-radius: 999px;
}
.hero-tagline{
  font-size: 18px;
  line-height: 1.4;
}

.hero-tagline br + span,
.hero-tagline br + strong{
  font-weight: 400;
}

/* ===== BLOQUE IDENTIDAD HORIZONTAL ===== */
.brand-horizontal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

/* Logo a la izquierda */
.brand-logo{
  flex-shrink: 0;
}

/* Texto a la derecha */
.brand-text{
  max-width: 700px;
}

/* Ajuste título en layout horizontal */
.brand-text .hero-tagline{
  text-align: left;
  margin-bottom: 8px;
}

/* Subtítulo */
.hero-subtitle{
  font-size: 15px;
  color: #475569;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Contacto alineado a la izquierda */
.brand-text .hero-meta{
  justify-content: flex-start;
}
/* FORZAR header en 2 columnas: logo izquierda, texto derecha */
.site-hero .brand-block.brand-horizontal{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 36px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* quitar la línea debajo si estorba en horizontal */
.site-hero .brand-block.brand-horizontal::after{
  content: none !important;
}

.site-hero .brand-block.brand-horizontal .brand-logo{
  flex: 0 0 auto !important;
}

.site-hero .brand-block.brand-horizontal .brand-text{
  max-width: 720px !important;
}

.site-hero .brand-block.brand-horizontal .hero-tagline{
  text-align: left !important;
  margin: 0 0 10px !important;
}

.site-hero .brand-block.brand-horizontal .hero-meta{
  justify-content: flex-start !important;
}

/* móvil: regresa a columna */
@media (max-width: 768px){
  .site-hero .brand-block.brand-horizontal{
    flex-direction: column !important;
    text-align: center !important;
  }
  .site-hero .brand-block.brand-horizontal .hero-tagline{
    text-align: center !important;
  }
  .site-hero .brand-block.brand-horizontal .hero-meta{
    justify-content: center !important;
  }
}

.brand-logo{
  margin-bottom: 16px;
}

.logocml26{
  max-width: 220px;
  height: auto;
  display: block;
}

/* ===== UPGRADE PRO: HERO LOOK (industrial premium) ===== */

/* Contenedor más consistente (evita que todo se estire raro) */
.site-hero .brand-block,
.home-products .container,
.home-apps .container,
.home-value .container,
.home-about .container,
.home-locations .container,
.home-cta .container,
.home-contact .container{
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* HERO: fondo sutil + más aire */
.site-hero{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 56px 20px 42px;
  text-align: left; /* clave B2B */
}

/* Logo pequeño pro */
.brand-logo{ margin-bottom: 14px; }
.logocml26{
  max-width: 220px;
  height: auto;
  display: block;
}

/* Jerarquía tipográfica */
.hero-tagline{
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

.hero-subtitle{
  font-size: 18px;
  line-height: 1.55;
  max-width: 860px;
  margin: 0 0 14px;
  color: #334155;
}

/* Línea de meta (ubicación/correo/whatsapp) más limpia */
.hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin: 0;
  color: #475569;
}
.hero-meta a{ font-weight: 700; text-decoration: none; }
.hero-meta a:hover{ text-decoration: underline; }

/* Botones tipo “empresa grande” */
.hero-cta{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-cta{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #cbd5e1;
}

.btn-cta.primary{
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.btn-cta.primary:hover{ opacity: .92; }

.btn-cta.secondary{
  background: #fff;
  color: #0f172a;
}
.btn-cta.secondary:hover{ background: #f1f5f9; }

/* ===== BONUS: arregla que “Productos” se vea en 2 columnas aunque Grid falle ===== */
.grid-2{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.grid-2 > *{
  flex: 1 1 420px;
}

/* Tarjetas más “premium” */
.card{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.card h3{ margin-top: 0; }

/* Responsive: título un poco más chico en móvil */
@media (max-width: 900px){
  .hero-tagline{ font-size: 34px; }
}

/* ===== HERO PRO (override fuerte) ===== */
.site-hero{
  text-align: left !important;
  padding: 56px 20px 42px !important;
  background: linear-gradient(180deg,#ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.hero-tagline{
  font-size: 44px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.3px !important;
}

.hero-subtitle{
  font-size: 18px !important;
  line-height: 1.55 !important;
  max-width: 860px !important;
  color: #334155 !important;
  margin: 0 0 14px !important;
}

.hero-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  align-items: center !important;
  color: #475569 !important;
  margin: 0 !important;
}

.hero-cta{
  margin-top: 18px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Botones */
.btn-cta{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border: 1px solid #cbd5e1 !important;
}

.btn-cta.primary{
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
}
.btn-cta.secondary{
  background: #fff !important;
  color: #0f172a !important;
}

/* ===== PRODUCTOS en 2 columnas aunque Grid falle ===== */
.grid-2{
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
.grid-2 > *{
  flex: 1 1 420px !important;
}

/* Tarjetas más pro */
.card{
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  background: #fff !important;
}
.card:hover{
  transform: translateY(-2px);
  transition: 200ms ease;
}

/* Responsive */
@media (max-width: 900px){
  .hero-tagline{ font-size: 34px !important; }
}
/* ===== HERO PRO ===== */

.site-hero{
  text-align: left !important;
  padding: 60px 20px 40px !important;
  background: linear-gradient(180deg,#fff 0%,#f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.hero-tagline{
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
}

.hero-subtitle{
  font-size: 18px !important;
  max-width: 860px !important;
  color: #334155 !important;
}

.brand-logo{
  margin-bottom: 16px !important;
}

.logocml26{
  max-width: 220px !important;
  height: auto !important;
}
.grid-2{
  display:flex !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

.grid-2 > *{
  flex:1 1 420px !important;
}

.card{
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  padding:18px !important;
  background:#fff !important;
}
/* ===== FLOW VISUAL INDUSTRIAL ===== */

/* Espaciado uniforme */
.home-products,
.home-apps,
.home-about,
.home-locations,
.home-contact{
  padding: 50px 0 !important;
}

/* Sección destacada (se siente premium) */
.home-value{
  padding: 55px 0 !important;
  background:#f8fafc !important;
  border-top:1px solid #e2e8f0 !important;
  border-bottom:1px solid #e2e8f0 !important;
}

/* CTA oscuro tipo empresa grande */
.home-cta{
  background:#0f172a !important;
  color:white !important;
  padding:55px 0 !important;
}

.home-cta p{
  color:#cbd5e1 !important;
}

/* títulos consistentes */
h2{
  font-weight:800 !important;
  margin-bottom:14px !important;
}
header.site-hero .brand-logo{
  transform: translateY(-10px) !important;
}
.home-products,
.home-apps,
.home-history,
.home-capabilities,
.home-value,
.home-locations,
.home-contact{
  border-top: 1px solid #eef2f7;
}
:root{
  --primary-color:#3A3F45;   /* cambia aquí si quieres otro gris */
}

/* Fondo principal */
.site-hero,
.top-nav{
  background:var(--primary-color) !important;
}

/* Botones primarios */
.btn-cta.primary{
  background:var(--primary-color) !important;
  border-color:var(--primary-color) !important;
}

/* Bordes que usaban azul */
#aplicaciones .chip,
#productos .sizes-grid span{
  border-color:var(--primary-color) !important;
}

/* Rayito */
#aplicaciones .chip::before{
  color:var(--primary-color) !important;
}