/* =========================
   OVERRIDE LIMPIO – CORE MEX
   ========================= */

/* HERO base (fondo claro) */
.site-hero .brand-block.brand-horizontal{
  max-width:1100p
  margin:0 auto;

  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,380px);
  gap:32px;
  align-items:center;
}

/* Texto */
.site-hero .brand-text{
  min-width:0;
}

/* Logo */
.site-hero .brand-logo{
  width:100%;
  max-width:380px;
  justify-content:flex-end;
}


.site-hero .brand-logo{
  width:100%;
  max-width:320px;
  display:flex;
  justify-content:flex-end;
  margin:0;
  padding:0;
}


/* Tipografía headline */
.hero-tagline{
  font-size:40px;
  line-height:1.15;
  font-weight:800;
  margin:0 0 14px;
}

/* MÓVIL */
@media (max-width:900px){
  .site-hero{
    padding:28px 18px 24px;
    text-align:left;
  }

  .site-hero .brand-block.brand-horizontal{
    display:grid;
    grid-template-columns:1fr 440px;
    gap:32px;
    align-items:center;
  }

  .site-hero .brand-logo{
    width:240px;
    max-width:240px;
    justify-content:flex-start;
    order:-1;
  }

  .hero-tagline{
    font-size:34px;
  }



  .site-hero .brand-block.brand-horizontal{
  display:grid;
  grid-template-columns:1fr 440px;
  gap:32px;
  align-items:center;
  }

  .site-hero .brand-logo{
    width:240px;
    max-width:240px;
    justify-content:flex-start;
    order:-1;
  }

  .hero-tagline{
    font-size:34px;
  }
}
/* --- Upgrade visual HERO (premium) --- */

/* 1) Más aire y mejor proporción */
.site-hero{
  padding:56px 20px 44px; /* antes 44/34 */
}

/* 2) Título más “corporativo” + mejor legibilidad */
.hero-tagline{
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* 3) Subtítulo y meta más limpios (si existen en tu HTML) */
.site-hero .hero-subtitle{
  font-size:16px;
  line-height:1.55;
  color:#334155;
  margin:0 0 14px;
  max-width:62ch;
}

.site-hero .hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:#475569;
  font-size:14px;
}
.site-hero .brand-logo img{
  image-rendering:-webkit-optimize-contrast;

}
/* FIX HERO — forzar layout aunque el tema lo pise */
.site-hero .brand-block.brand-horizontal{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(260px,360px) !important;
  gap:24px !important;
  align-items:center !important;
}

/* Que el logo NO reviente el ancho */
.site-hero .brand-logo{
  width:100% !important;
  max-width:360px !important;
  display:flex !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
}

.site-hero .brand-logo img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  display:block !important;
}

/* Cinturón de seguridad contra scroll horizontal */
.site-hero{ overflow:hidden !important; }
body{ overflow-x:hidden !important; }
/* ARREGLAR ALTURA GIGANTE DEL HERO */
.site-hero{
  padding:20px 20px !important;
  min-height:auto !important;
  height:auto !important;
}

/* Evitar que el contenedor interno estire la altura */
.site-hero .brand-block{
  min-height:0 !important;
  height:auto !important;
}

/* Logo controlado */
.site-hero .brand-logo img{
  max-height:220px !important;
  width:auto !important;
}
/* Logo: límites duros y sin estirar */
.site-hero .brand-logo{
  max-width: 420px !important;   /* ajusta 320–480 */
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.site-hero .brand-logo img{
  width: auto !important;        /* clave: NO 100% */
  height: auto !important;
  max-width: 100% !important;
  max-height: 140px !important;  /* ajusta 110–180 */
  object-fit: contain !important;
  display: block !important;
}
/* ===== HEADER LIMPIO ===== */

.site-hero{
  padding:18px 20px !important;
  min-height:auto !important;
  height:auto !important;
}

/* quitar espacio vertical raro */
.site-hero .brand-block{
  margin:0 auto !important;
  align-items:center !important;
}

/* logo tamaño final correcto */
.site-hero .brand-logo img{
  max-height:120px !important;
  width:auto !important;
}

/* menú debajo alineado */
.site-nav,
.main-nav{
  margin-top:8px !important;
}
/* ===== FORZAR TAMAÑO DE CUALQUIER LOGO DENTRO DEL HERO ===== */
.site-hero img{
  max-height:120px !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
}
/* ===== FORZAR TAMAÑO DEL LOGO CORE MEX ===== */
img[src*="newlogocml26.png"]{
  max-height:120px !important;   /* ajusta 100–140 */
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  display:block !important;
}
/* =========================
   Separadores (líneas)
   ========================= */

/* Línea bajo el HERO (si se perdió) */
.site-hero{
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Separadores entre secciones principales */
section{
  border-top: 1px solid #e2e8f0;
  padding-top: 28px;
  margin-top: 28px;
}

/* Evita que la primera sección tenga línea arriba */
main section:first-of-type{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Separadores tipo “cards” (productos/bloques) si aplica */
.product-card,
.card,
.product,
.product-item{
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}
/* =========================
   Suministro (fondo azul clarito)
   ========================= */
#suministro,
.suministro,
.section-suministro,
.supply{
  background: #eff6ff !important; /* azul clarito */
  border: 1px solid #dbeafe !important;
  border-radius: 18px;
  padding: 28px 20px !important;
}
/* MENU horizontal bajo el logo */
.site-nav ul,
.main-nav ul,
nav ul{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  list-style:none !important;
  padding:0 !important;
  margin:10px 0 0 !important;
}

.site-nav li,
.main-nav li,
nav li{
  display:inline-block !important;
  margin:0 !important;
}

.site-nav a,
.main-nav a,
nav a{
  display:inline-block !important;
  padding:10px 12px !important;
  text-decoration:none;
}
/* Links del menú */
nav a,
.site-nav a,
.main-nav a{
  color:white !important;
  font-weight:600;
}

/* Hover menú */
nav a:hover{
  opacity:0.8;
}
/* ===== HEADER AZUL REY LEGIBLE ===== */

.site-hero{
  background:#0033a0 !important;
  color:#ffffff !important;
}

/* Todo el texto dentro del hero en blanco */
.site-hero h1,
.site-hero h2,
.site-hero h3,
.site-hero p,
.site-hero span,
.site-hero a{
  color:#ffffff !important;
}

/* Título principal más grande */
.site-hero h1{
  font-size:42px !important;
  font-weight:700 !important;
}

/* Subtítulo */
.site-hero p{
  font-size:18px !important;
  opacity:0.95;
}

/* Menú más grande y visible */
nav a,
.site-nav a,
.main-nav a{
  font-size:16px !important;
  font-weight:600 !important;
  color:#ffffff !important;
}
/* ===== MENÚ EN NEGRO ===== */

nav a,
.site-nav a,
.main-nav a{
  color:#000000 !important;
  font-weight:600 !important;
}

/* Hover elegante */
nav a:hover,
.site-nav a:hover,
.main-nav a:hover{
  color:#0033a0 !important;
}
/* ===== CARDS SOLO EN #productos ===== */
#productos .product,
#productos .product-item,
#productos .card,
#productos .producto,
#productos .producto-item,
#productos .item{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:22px;
  margin:0 0 18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* títulos dentro de productos */
#productos h2,
#productos h3{
  color:#000 !important;
  font-weight:800 !important;
  margin:0 0 10px;
}
/* ===== Cards SOLO en Productos ===== */
#productos .grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

@media (max-width:900px){
  #productos .grid-2{
    grid-template-columns:1fr;
  }
}

/* La card bonita SOLO dentro de #productos */
#productos .card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* Evitar “doble caja” si hay .card dentro de .card */
#productos .card .card{
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

/* Títulos de productos más vistosos */
#productos h3{
  color:#000 !important;
  font-weight:800 !important;
  margin:0 0 10px;
}

/* Medidas como “badges” técnicos */
#productos .sizes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 8px;
}
#productos .sizes-grid span{
  display:inline-block;
  padding:6px 10px;
  border:1px solid #dbeafe;
  bo
/* ===== CONTENEDOR CENTRAL ===== */

.container{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 20px !important;
}

/* Evita que el contenido se quede pegado a la izquierda */
section{
  width:100%;
}

/* Espaciado entre secciones */
section{
  margin-bottom:60px;
}
/* SOLO productos con estilo de card */
#productos .card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* Quitar cualquier estilo de card fuera de productos */
section:not(#productos) .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* ===== Centrar layout global ===== */

/* Cualquier wrapper típico que deje la página pegada */
body, .container, .container-fluid, .row, section{
  box-sizing:border-box;
}

/* Fuerza el contenedor a centrarse */
.container{
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
  max-width:1100px !important;
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Si hay algún wrapper con ancho fijo y margen raro */
.wrapper, .page, .content, .main, .site-content{
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
}

/* Por si algún elemento está empujando el layout */
.row{
  margin-left:0 !important;
  margin-right:0 !important;
}
/* ===== NAVBAR DEFINITIVA ===== */

.top-nav .nav-wrap{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
}

.top-nav .nav-menu{
  display:flex;
  align-items:center;
  gap:22px;

  list-style:none;        /* quita bullets */
  margin:0;
  padding:0;
}

.top-nav .nav-menu li{
  list-style:none;
}

.top-nav .nav-menu a{
  text-decoration:none;
  font-weight:600;
  color:#333;
}

.top-nav .nav-menu a:hover{
  color:#3A3F45;
}

}

/* logo */
.top-nav .nav-logo img{
  max-height:70px;     /* ajusta si quieres */
  width:auto;
  display:block;
}

/* menú horizontal */
.top-nav .nav-menu{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}  /* <- ESTA LLAVE ES LA QUE TE FALTABA */

/* Contenedor consistente */
.container{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  float:none !important;
}

  
  /* Contenedor consistente */
.container{
  max-width:1100px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  float:none !important;
}

/* Grid de productos */
#productos .grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
@media (max-width:900px){
  #productos .grid-2{ grid-template-columns:1fr; }
}
/* ===== APLICACIONES ===== */

/* Título más fuerte */
#aplicaciones h2{
  font-weight:800 !important;
  font-size:38px;
  color:#000 !important;
  margin-bottom:14px;
}

/* Contenedor de chips */
#aplicaciones .chips{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:20px;
}

/* Cajitas */
#aplicaciones .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:10px 16px;

  font-weight:600;
  color:#111;

  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  transition:all 0.2s ease;
}

/* Rayito ⚡ */
#aplicaciones .chip::before{
  content:"⚡";
  font-size:14px;
  color:#0033a0;
}

/* Hover elegante */
#aplicaciones .chip:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,0.12);
}
/* ===== APLICACIONES: título + chips con cajita y rayo ===== */

section#aplicaciones .container h2{
  font-weight:900 !important;
  color:#000 !important;
  font-size:38px !important;
  margin:0 0 14px !important;
}

section#aplicaciones .chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  margin-top:18px !important;
}

section#aplicaciones .chips .chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  background:#fff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:14px !important;
  padding:10px 16px !important;

  color:#111 !important;
  font-weight:700 !important;

  box-shadow:0 4px 14px rgba(0,0,0,0.08) !important;
}

section#aplicaciones .chips .chip::before{
  content:"⚡" !important;
  color:#0033a0 !important;
  font-size:14px !important;
}
/* ===== FORZAR ESTILO APLICACIONES ===== */

.home-apps h2{
  font-weight:900 !important;
  font-size:38px !important;
  color:#000 !important;
}

.home-apps .chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
}

.home-apps .chips .chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  background:#ffffff !important;
  border:2px solid #0033a0 !important;
  border-radius:14px !important;
  padding:10px 18px !important;

  font-weight:700 !important;
  color:#111 !important;

  box-shadow:0 6px 18px rgba(0,0,0,0.10) !important;
}

.home-apps .chips .chip::before{
  content:"⚡" !important;
  color:#0033a0 !important;
  font-size:14px !important;
}
: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;
}
/* ===== NAV en blanco (fuera del hero) ===== */
.top-nav{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
}

.nav-menu a{
  color:#111 !important;
  font-weight:700;
}

.nav-menu a:hover{
  background: rgba(0,0,0,.06);
}

/* ===== HERO gris SOLO en esa sección ===== */
.site-hero{
  background:#3A3F45 !important;
  color:#fff !important;
  padding: 56px 0 44px !important;
}

.site-hero a{ color:#fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Botones del hero (que no se vean raros) ===== */
.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 16px;
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight:800;
  text-decoration:none !important;
}

.btn-cta.primary{
  background:#ffffff !important;
  color:#111 !important;
  border:1px solid rgba(255,255,255,.25);
}

.btn-cta.secondary{
  background: transparent !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.35);
}

.btn-cta:hover{
  transform: translateY(-1px);
}

/* Responsive: centra mejor en móvil */
@media (max-width: 900px){
  .hero-cta{ justify-content:center; }
}
/* Quitar separadores/“puntitos” */
.sep{ display:none !important; }
/* ===== Quitar widget de 3 puntitos (launcher flotante) ===== */
div[style*="position: fixed"],
div[style*="position:fixed"]{
  /* no ocultamos todo; solo los mini botones típicos */
}

div[style*="position: fixed"][style*="z-index"],
div[style*="position:fixed"][style*="z-index"]{
  /* suele ser el widget */
}
/* ===== Quitar widget de 3 puntitos (launcher flotante) ===== */
div[style*="position: fixed"],
div[style*="position:fixed"]{
  /* no ocultamos todo; solo los mini botones típicos */
}

div[style*="position: fixed"][style*="z-index"],
div[style*="position:fixed"][style*="z-index"]{
  /* suele ser el widget */
}
/* Ajuste de salto para anchors con menú sticky */
:root{ --nav-offset: 130px; }   /* ajusta si tu header es más alto/bajo */

section[id],
[id].section,
#productos, #aplicaciones, #porque, #trayectoria, #contacto{
  scroll-margin-top: var(--nav-offset);
}

/* alternativa por si el navegador no respeta scroll-margin (raro) */
.anchor{
  position: relative;
  top: calc(var(--nav-offset) * -1);
}
/* ===== CTA FINAL (Cajitas elegantes) ===== */

.contact-cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:20px;
  align-items:center;
}

.cta-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
  border:1px solid #d1d5db;
}

/* Botón principal */
.cta-box.primary{
  background:#3A3F45;
  color:#fff;
  border:none;
}

.cta-box.primary:hover{
  transform:translateY(-2px);
}

/* WhatsApp */
.cta-box.whatsapp{
  background:#ffffff;
  color:#25D366;
  border:2px solid #25D366;
}

.cta-box.whatsapp:hover{
  background:#25D366;
  color:#fff;
}

/* Teléfono (solo cajita elegante) */
.cta-box.phone{
  background:#f3f4f6;
  color:#1f2937;
  border:1px solid #cbd5e1;
}
/* ===== HOME: UBICACIONES MEJORADO ===== */

.home-locations{
  padding: 60px 0;
  background: #f8fafc;
}

.home-locations .grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-locations .card{
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 26px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.home-locations .card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.10);
}

.home-locations .card h3{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap:10px;
  color:#111827;
}

.home-locations .card p{
  margin: 0;
  font-size: 16px;
  color:#374151;
  font-weight: 600;
}

/* Iconos por orden */
.home-locations .card:nth-child(1) h3::before{
  content:"🏢";
}
.home-locations .card:nth-child(2) h3::before{
  content:"📦";
}
.home-locations .card:nth-child(3) h3::before{
  content:"🚚";
}

/* Responsive */
@media (max-width: 992px){
  .home-locations .grid-3{
    grid-template-columns: 1fr;
}
/* ===== CTA PREMIUM ===== */

.cta-section{
  background: linear-gradient(135deg,#1f2937 0%, #374151 100%);
  padding: 60px 0;
  color:#fff;
}

.cta-section h2{
  font-weight:900;
  font-size:34px;
  margin-bottom:12px;
}

.cta-section p{
  font-size:18px;
  opacity:.85;
  margin-bottom:28px;
}

.contact-cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
/* ===== Historia: menos plana ===== */
#historia, .home-trayectoria, .trayectoria{
  padding: 72px 0;
  background: #ffffff;
}

#historia .container, .home-trayectoria .container{
  max-width: 1100px;
}

#historia h2, .home-historia h2{
  font-weight: 900;
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color:#0f172a;
}

/* “tarjeta editorial” para el texto */
#historia p, .home-historia p{
  color:#334155;
  line-height: 1.75;
  font-size: 17px;
  margin: 0 0 14px;
}

#historia .container, .home-historia .container{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 28px 28px;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}

/* primera línea como “lead” */
#trayectoria p:first-of-type,
.home-trayectoria p:first-of-type{
  font-size: 18px;
  color:#1f2937;
}

/* ===== ENFOQUE B2B: convertir bullets a cajitas ===== */
.enfoque-b2b, #enfoque-b2b, .home-b2b{
  padding: 56px 0 72px;
  background: #f8fafc;
}

/* si tu h2 dice “Enfoque B2B” */
.enfoque-b2b h2, #enfoque-b2b h2, .home-b2b h2{
  font-weight: 900;
  font-size: 34px;
  margin: 0 0 16px;
  color:#0f172a;
}

/* estilo lista */
.enfoque-b2b ul, #enfoque-b2b ul, .home-b2b ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* cada bullet como card */
.enfoque-b2b li, #enfoque-b2b li, .home-b2b li{
  background:#ffffff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  color:#0f172a;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  gap:10px;
}

/* ícono check pro */
.enfoque-b2b li::before, #enfoque-b2b li::before, .home-b2b li::before{
  content:"✓";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(58,63,69,.10);
  color:#3A3F45;
  font-weight: 900;
}

/* responsive */
@media (max-width: 980px){
  .enfoque-b2b ul, #enfoque-b2b ul, .home-b2b ul{
    grid-template-columns: 1fr;
  }
<section id="historia" class="section historia-pro">
  <div class="container">

    <h2>Nuestra Historia</h2>

    <div class="historia-grid">

      <div class="historia-text">
        <p>
          Core Mex Laminaciones cuenta con más de 30 años de experiencia en el suministro especializado
          de Laminaciones EI y Carretes para Transformadores, respaldando la continuidad operativa
          de fabricantes de equipos eléctricos en México.
        </p>

        <p>
          Nuestro enfoque combina conocimiento técnico, capacidad de abastecimiento y respuesta
          comercial ágil para garantizar estabilidad y disponibilidad en cada proyecto.
        </p>
      </div>

      <div class="historia-bullets">
        <div class="impact">
          Continuidad operativa sin interrupciones
        </div>
        <div class="impact">
          Disponibilidad constante de material
        </div>
        <div class="impact">
          Respuesta comercial rápida y confiable
        </div>
      </div>

    </div>

  </div>
</section>
<p>
  Nuestro enfoque combina conocimiento técnico, capacidad de abastecimiento y una ejecución enfocada en el 
  <strong>Servicio, la Calidad y las Entregas Rápidas</strong>, pilares que garantizan continuidad, disponibilidad y confianza en cada proyecto.
</p>

<p class="impact-intro">
  Este compromiso se refleja en:
</p>

<div class="trayectoria-bullets">
  ...
</div>

/* ===== PRODUCTOS: galerías ===== */
.home-products .product-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 12px;
}

.product-gallery img{
  width:100%;
  height: 140px;      /* antes 180 */
  object-fit: contain; /* en vez de cover */
  background:#f8fafc;
  padding:12px;
  border-radius:14px;
}

@media (max-width: 768px){
  .home-products .product-gallery{
    grid-template-columns: 1fr;
  }
  .home-products .product-gallery img{
    height: 220px;
  }
  /* ===== PRODUCTOS PRO CON MEDIDAS ===== */

.products-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.product-card{
  background:#ffffff;
  padding:35px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.product-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:25px;
}

.product-images img{
  width:100%;
  height:260px;
  object-fit:contain;
  background:#ffffff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.sizes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.sizes-grid span{
  background:#f1f3f5;
  padding:6px 12px;
  border-radius:8px;
  font-size:13px;
}
 /* ===== PRODUCTOS: manejar horizontal vs vertical ===== */
#productos .product-images{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 14px 0 18px !important;
  align-items: center !important;
}

/* marco base */
#productos .product-images img{
  width:100% !important;
  display:block !important;
  object-fit: contain !important;
  background:#fff !important;
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
  padding:10px !important;
}

/* horizontales: un poquito más altas */
#productos .product-images img.img-wide{
  height: 80px !important;
  max-height: 150px !important;
}

/* verticales: más bajitas para que no se vean gigantes */
#productos .product-images img.img-tall{
  height: 80px !important;
  max-height: 120px !important;
}

/* móvil */
@media (max-width: 768px){
  #productos .product-images{
    grid-template-columns: 1fr !important;
  }
  #productos .product-images img.img-wide{ height: 190px !important; max-height:190px !important; }
  #productos .product-images img.img-tall{ height: 170px !important; max-height:170px !important; }
} 
/* ===== FIX: imágenes gigantes en Productos ===== */
#productos img{
  width: 100% !important;
  max-width: 100% !important;
  height: 180px !important;      /* ajusta: 160px si aún las ves grandes */
  max-height: 180px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 12px auto !important;
  background: #fff !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

/* para que nada se desborde visualmente */
#productos .card,
#productos .product-card{
  overflow: hidden !important;
}
  /* ===== FORCE FIX: imágenes de Productos gigantes ===== */
#productos .product-images{
  display:block !important;   /* quita grid si existía */
  margin: 0 0 16px !important;
}

#productos .product-images img{
  width: 100% !important;
  max-width: 100% !important;

  height: 140px !important;        /* <-- cámbialo a 120px si quieres más chico */
  max-height: 140px !important;

  object-fit: contain !important;
  display: block !important;

  background: #fff !important;
  padding: 10px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

/* ===== PRODUCTOS: FORZAR TAMAÑO (gana a bootstrap/custom) ===== */
section#productos.home-products .products-grid .product-card .product-images{
  display:block !important;
  margin: 0 0 16px !important;
}

section#productos.home-products .products-grid .product-card .product-images > img{
  width: 100% !important;
  max-width: 100% !important;

  height: 140px !important;       /* prueba 120px si quieres más chico */
  max-height: 140px !important;

  min-height: 0 !important;
  aspect-ratio: auto !important;

  object-fit: contain !important;
  display: block !important;

  background: #fff !important;
  padding: 10px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}
/* ===== RESET GRID QUE ESTÁ INFLANDO PRODUCTOS ===== */

#productos .products-grid{
  display: flex !important;          /* quitamos grid */
  gap: 40px !important;
}

#productos .product-card{
  flex: 1 !important;
  max-width: 50% !important;
}

/* Imagen tamaño controlado */
#productos .product-images{
  display:block !important;
}

#productos .product-images img{
  width:100% !important;
  height:140px !important;      /* ajusta a 120px si quieres */
  object-fit:contain !important;
  display:block !important;
}
/* ===== POR QUE CORE MEX - VERSION TARJETAS HORIZONTALES ===== */

#porque .features-grid{
  display:flex !important;
  gap:30px !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
}

#porque .feature-card{
  flex:1 !important;
  min-width:240px !important;
  background:#ffffff !important;
  padding:28px !important;
  border-radius:18px !important;
  box-shadow:0 12px 28px rgba(0,0,0,0.08) !important;
  transition:all .25s ease !important;
}

#porque .feature-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 18px 40px rgba(0,0,0,0.12) !important;
}

#porque .feature-card h3{
  font-size:22px !important;
  font-weight:700 !important;
  margin-bottom:10px !important;
}

#porque .feature-card p{
  font-size:15px !important;
  color:#555 !important;
}
/* ===== TITULO POR QUE CORE MEX ===== */
#porque h2{
  font-weight: 800 !important;
  font-size: 34px !important;
  margin-bottom: 40px !important;
  letter-spacing: -0.5px;
}
/* =========================
   MOBILE FIXES (<= 820px)
========================= */
@media (max-width: 820px){

  /* 1) HERO: evita que se rompa palabra por palabra */
  .site-hero .hero-tagline,
  .site-hero .hero-mission,
  .site-hero .hero-meta{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Ajuste de tamaño para que se lea bonito */
  .site-hero .hero-tagline{
    font-size: 34px !important;
    line-height: 1.05 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  .site-hero .hero-mission{
    font-size: 16px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin-bottom: 14px !important;
  }

  /* Meta en dos líneas “bonitas” */
  .site-hero .hero-meta{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  /* Botones: uno debajo del otro */
  .site-hero .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .site-hero .btn-cta{
    width: 100% !important;
    text-align: center !important;
  }

  /* 2) PRODUCTOS: en móvil que sea 1 columna */
  #productos .products-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Evita tarjetas ultra angostas */
  #productos .product-card{
    max-width: 100% !important;
  }

  /* Chips de medidas: 2 por fila aprox */
  #productos .sizes-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Extra: en pantallas MUY chicas */
@media (max-width: 380px){
  .site-hero .hero-tagline{ font-size: 30px !important; }
  #productos .sizes-grid{ grid-template-columns: 1fr !important; }
}
/* =========================
   MOBILE: HERO + NAV FIX
========================= */
@media (max-width: 820px){

  /* --- NAV: logo arriba, menú abajo ordenado --- */
  .top-nav .container{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .top-nav .nav-logo img{
    max-height: 70px !important;
    width: auto !important;
    display:block !important;
  }

  .top-nav .nav-menu{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .top-nav .nav-menu a{
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* --- HERO: cambia a columna (logo arriba / texto abajo) --- */
  .site-hero .brand-block.brand-horizontal{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* si existe el contenedor del logo dentro del hero */
  .site-hero .brand-logo{
    width: 100% !important;
    display:flex !important;
    justify-content: flex-start !important;
  }
  .site-hero .brand-logo img{
    max-height: 90px !important;
    width:auto !important;
  }

  /* texto del hero: que NO se rompa palabra por palabra */
  .site-hero .hero-tagline,
  .site-hero .hero-mission{
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .site-hero .hero-tagline{
    font-size: 34px !important;
    line-height: 1.08 !important;
    margin: 0 0 10px !important;
  }

  .site-hero .hero-mission{
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
  }

  /* meta y CTAs */
  .site-hero .hero-meta{
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
  }

  .site-hero .hero-cta{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .site-hero .btn-cta{
    width: 100% !important;
    text-align: center !important;
  }
}
/* =====================
   NAV MOBILE PRO
===================== */
@media (max-width: 820px){

  .top-nav{
    padding: 15px 20px !important;
  }

  .top-nav .nav-menu{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 20px !important;
    margin-top: 12px !important;
  }

  .top-nav .nav-menu a{
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

/* Quita espacios grandes arriba */
.site-hero{
  padding-top: 28px !important;   /* ajusta 20-40 */
  padding-bottom: 40px !important;
  margin-top: 0 !important;
}

/* Elimina margen default del H1 (suele empujar raro) */
.site-hero h1,
.hero-tagline,
.hero-title{
  margin-top: 0 !important;
}

/* Si hay algún bloque superior vacío */
.top-spacer,
.hero-spacer,
.header-spacer{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.site-hero{
  text-align: left !important;
}

.site-hero .hero-tagline,
.site-hero h1{
  text-align: left !important;
  max-width: 1000px;   /* evita que se estire demasiado */
  margin-left: 80px;   /* ajusta 60–120 según lo veas */
}

.site-hero .hero-subtitle{
  margin-left: 80px;
}
/* HERO: alinear contenido y quitar centrados heredados */
.site-hero,
.site-hero .brand-block,
.site-hero .brand-text{
  text-align: left !important;
}

/* Título y subtítulo: misma columna, mismos márgenes */
.site-hero .hero-tagline,
.site-hero h1{
  margin: 0 0 14px 0 !important;
  max-width: 980px;
}

/* Si tu contenido está dentro de un contenedor, forzamos padding general */
.site-hero{
  padding: 72px 90px !important; /* ajusta: 60-110 */
}
/* Secciones: estilo base (DESKTOP primero) */
.section,
.section-content{
  padding: 60px 90px;
}

.section h2,
.section-title{
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

.section p,
.section-content p{
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 14px 0;
  max-width: 900px;
}

/* Mobile: solo ajustes */
@media (max-width: 900px){
  .section,
  .section-content{
    padding: 36px 18px;
  }
  .section h2,
  .section-title{
    font-size: 26px;
  }
  .section p,
  .section-content p{
    font-size: 16px;
  }
/* Contenedor consistente */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Secciones: desktop primero */
.section{
  padding: 64px 0;
}

.section h2{
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 18px 0;
}

/* Cards de "por qué" */
.features-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card{
  background: #f4f5f7;
  border-radius: 14px;
  padding: 18px;
}

.feature-card h3{
  margin: 0 0 8px 0;
  font-size: 18px;
}

.feature-card p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Historia */
.historia-text p{
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 14px 0;
  max-width: 900px;
}

.historia-commitment{
  margin-top: 18px;
  font-size: 18px;
}

/* Mobile ajustes */
@media (max-width: 900px){
  .section{ padding: 44px 0; }
  .section h2{ font-size: 26px; }

  .features-grid{
    grid-template-columns: 1fr;
  }

  .feature-card p,
  .historia-text p{
    font-size: 16px; /* evita que "la 2ª parte" se vea más chica */
  }
}
/* HERO: fuerza alineación izquierda del bloque de texto */
.site-hero .brand-block,
.site-hero .brand-text{
  text-align: left !important;
}

/* Título: quita márgenes default y define ancho limpio */
.site-hero .hero-tagline{
  margin: 0 0 12px 0 !important;
  max-width: 980px;
}

/* Misión debajo del título */
.site-hero .hero-mission{
  margin: 0 !important;
  max-width: 980px;
}

/* Si tu hero estaba centrado por el container, dale padding a la izquierda */
.site-hero{
  padding: 70px 0 !important;
}

.site-hero .container{
  padding-left: 90px !important;  /* ajusta 60–120 */
  padding-right: 18px !important;
}
/* En desktop no forzamos salto */
.site-hero .hero-tagline{ white-space: normal; }

/* En móvil, si quieres que se parta más bonito */
@media (max-width: 900px){
  .site-hero .hero-tagline{
    max-width: 24ch;  /* fuerza 2 líneas aprox */
  }
}
/* ===== HERO: Desktop = izquierda ===== */
.site-hero .brand-block,
.site-hero .brand-text{
  text-align: left !important;
}

/* ===== HERO: Mobile = centrado ===== */
@media (max-width: 900px){
  .site-hero .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-hero .brand-block,
  .site-hero .brand-text{
    text-align: center !important;
  }

  .site-hero .hero-tagline,
  .site-hero .hero-mission,
  .site-hero .hero-meta{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== HERO: Desktop = izquierda ===== */
.site-hero .brand-block,
.site-hero .brand-text{
  text-align: left !important;
}

/* ===== HERO: Mobile = centrado ===== */
@media (max-width: 900px){
  .site-hero .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-hero .brand-block,
  .site-hero .brand-text{
    text-align: center !important;
  }

  .site-hero .hero-tagline,
  .site-hero .hero-mission,
  .site-hero .hero-meta{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== FOOTER FIX (visible en celular) ===== */
footer{
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important; /* o pon tu color */
  padding: 18px 0 !important;
}

footer .col-lg-12{
  color: #111827 !important; /* si tu fondo es claro */
  opacity: 1 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  padding: 0 16px !important;
}

footer .container,
footer .row{
  height: auto !important;
  overflow: visible !important;
}

@media (max-width: 900px){
  footer{ padding-bottom: 28px !important; }
}
/* Títulos de sección en desktop */
#historia h2,
#porque h2{
  font-weight: 800 !important;
}
#historia h2,
#porque h2{
  font-weight: 800 !important;
  letter-spacing: -0.3px;
}
section#historia h2,
section#porque h2{
  font-weight: 900 !important;
}