/* MonclovaIndustrial.com — hoja de estilos compartida
   Paleta y tipografía aprobadas en la planeación del overhaul 2026.
   No modificar los valores de :root sin actualizar toda la conversación de marca. */

:root {
  --negro: #1A1A1A;
  --naranja: #FF5500;
  --naranja-oscuro: #C24000;
  --rojo: #C62828;
  --amarillo: #FFC400;
  --amarillo-texto: #1A1A1A;
  --gris-texto: #5C5C5C;
  --gris-claro: #F2F1ED;
  --blanco: #FFFFFF;
  --borde: #E5E4DE;

  --fuente-titulos: 'Oswald', sans-serif;
  --fuente-cuerpo: 'IBM Plex Sans', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--gris-texto);
  background: var(--blanco);
  line-height: 1.6;
}

a { color: var(--naranja-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  color: var(--negro);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3px;
}

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Encabezado
   La franja amarilla ya NO forma parte de la imagen de fondo: es un elemento
   CSS (::after) siempre pegado al borde inferior, así nunca se cruza con el
   texto sin importar el tamaño de pantalla. El fondo es una textura oscura
   tileable (ver instrucciones de imagen) que garantiza contraste con el
   texto blanco en cualquier recorte. */
.encabezado {
  position: relative;
  overflow: hidden;
  background: var(--negro) url('textura_placa_diamante.jpg') repeat;
  background-size: 420px;
  padding: 28px 0 46px;
}

.encabezado::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -26px;
  height: 46px;
  background: var(--amarillo);
  border-radius: 50%;
}

.encabezado .contenedor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.encabezado-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.encabezado-fila img.logo { height: 117px; width: auto; flex-shrink: 0; }
.encabezado-fila img.persona { height: 140px; width: auto; flex-shrink: 0; }

.encabezado h1 {
  color: var(--blanco);
  font-size: 22px;
  line-height: 1.3;
  flex: 1 1 260px;
}

@media (max-width: 640px) {
  .encabezado .contenedor { justify-content: center; text-align: center; }
  .encabezado-fila img.logo { height: 81px; }
  .encabezado-fila img.persona { height: 88px; }
  .encabezado h1 { font-size: 19px; flex-basis: 100%; }
}

/* Buscador / filtro */
.buscador {
  background: var(--gris-claro);
  padding: 22px 0;
  border-bottom: 1px solid var(--borde);
}

.buscador label {
  display: block;
  font-size: 14px;
  color: var(--gris-texto);
  margin-bottom: 8px;
}

.buscador input[type="search"] {
  width: 100%;
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--negro);
}

.buscador input[type="search"]:focus {
  outline: 2px solid var(--naranja);
  outline-offset: 1px;
}

#sin-resultados {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: var(--gris-texto);
}

/* Espacio de banner vendido directamente */
.banner-slot {
  max-width: 728px;
  margin: 24px auto 0;
  padding: 0 20px;
}

.banner-slot .marco {
  border: 1px dashed #B4B2A9;
  border-radius: 8px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888780;
  font-size: 13px;
  text-align: center;
  padding: 10px;
}

.banner-slot .marco a {
  color: var(--naranja-oscuro);
  text-decoration: underline;
}

.marco-texto {
  text-align: center;
  line-height: 1.7;
}

/* Secciones de categorías */
.categorias {
  padding: 36px 0;
}

.categorias h2 {
  font-size: 22px;
  margin-bottom: 4px;
}

.categorias-intro {
  font-size: 14px;
  color: var(--gris-texto);
  margin: 0 0 18px;
}

details.grupo-categoria {
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}

details.grupo-categoria summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  background: var(--gris-claro);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  color: var(--negro);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details.grupo-categoria summary::-webkit-details-marker { display: none; }

details.grupo-categoria summary::after {
  content: '+';
  font-size: 20px;
  color: var(--naranja-oscuro);
}

details.grupo-categoria[open] summary::after { content: '−'; }

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
  background: var(--borde);
}

.cat-link {
  background: var(--blanco);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--gris-texto);
}

@media (max-width: 640px) {
  .cat-link { font-size: 17px; padding: 14px 16px; }
  details.grupo-categoria summary { font-size: 18px; }
}

.cat-link:hover {
  background: var(--gris-claro);
  color: var(--naranja-oscuro);
  text-decoration: none;
}

.cat-link.oculto { display: none; }

/* Llamado a la acción — mini página */
.cta-minipagina {
  background: var(--negro);
  padding: 40px 0;
  text-align: center;
}

.cta-minipagina h2 { color: var(--blanco); font-size: 24px; margin-bottom: 10px; }
.cta-minipagina p { color: #D3D1C7; max-width: 560px; margin: 0 auto 20px; font-size: 15px; }

.boton-amarillo {
  display: inline-block;
  background: var(--amarillo);
  color: var(--amarillo-texto);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

.boton-amarillo:hover { background: #E6B000; text-decoration: none; }

/* Asociaciones y cámaras */
.asociaciones {
  padding: 30px 0;
  border-top: 1px solid var(--borde);
}

.asociaciones h2 { font-size: 18px; margin-bottom: 16px; text-align: center; }

.logos-asociaciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

.logos-asociaciones img { height: 46px; width: auto; }

/* Encabezado simple — páginas interiores (contacto, quiénes somos, anuncie su empresa) */
.encabezado-simple {
  background: var(--blanco);
  border-bottom: 4px solid var(--amarillo);
  padding: 18px 0;
}

.encabezado-simple .contenedor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.encabezado-simple img.logo { height: 64px; width: auto; }

.encabezado-simple .tagline {
  font-family: var(--fuente-titulos);
  color: var(--negro);
  font-size: 15px;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .encabezado-simple .contenedor { flex-direction: column; text-align: center; }
  .encabezado-simple img.logo { height: 80px; }
  .encabezado-simple .tagline { font-size: 15px; }
}

/* Contenido de páginas interiores */
.pagina-contenido {
  padding: 40px 20px 50px;
  max-width: 680px;
  margin: 0 auto;
}

.pagina-contenido h1 { font-size: 26px; margin-bottom: 20px; }
.pagina-contenido h2 { font-size: 18px; margin: 28px 0 10px; }
.pagina-contenido p { margin: 0 0 16px; font-size: 15px; }

.lista-beneficios { margin: 0 0 20px; padding-left: 20px; }
.lista-beneficios li { margin-bottom: 10px; font-size: 15px; }

.caja-precio {
  background: var(--gris-claro);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
}

.caja-precio h3 {
  font-family: var(--fuente-titulos);
  font-size: 17px;
  color: var(--negro);
  margin: 0 0 12px;
}

.caja-precio .linea-precio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
}

.caja-precio .linea-precio + .linea-precio { border-top: 1px solid var(--borde); }

.caja-precio .etiqueta { font-size: 14px; color: var(--gris-texto); }
.caja-precio .monto { font-family: var(--fuente-titulos); font-size: 20px; color: var(--negro); }

.correo-ofuscado {
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  color: var(--naranja-oscuro);
}

.direccion p { margin: 0 0 2px; font-size: 15px; }

/* Páginas de categoría */
.categoria-intro {
  padding: 32px 0 8px;
}

.categoria-intro h1 { font-size: 24px; margin-bottom: 12px; }
.categoria-intro p { font-size: 15px; color: var(--gris-texto); max-width: 640px; }

.categoria-listado {
  background: var(--gris-claro);
  padding: 20px 0 36px;
}

.negocio-card {
  background: var(--blanco);
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.negocio-card h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 19px;
  color: var(--negro);
  margin: 0 0 4px;
}

.negocio-card p.giro { font-size: 14px; margin: 0 0 10px; }

.negocio-card .telefono {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 20px;
  color: var(--naranja-oscuro);
  margin: 0 0 2px;
}

.negocio-card .direccion-negocio {
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  color: var(--naranja-oscuro);
  margin: 0;
}

.categoria-cta {
  background: var(--negro);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
}

.categoria-cta .mensaje-principal {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 20px;
  color: var(--blanco);
  margin: 0 0 14px;
}

.categoria-cta .mensaje-secundario {
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  color: #D3D1C7;
  margin: 26px 0 14px;
}

.categoria-cta .boton-naranja-solido {
  display: inline-block;
  max-width: 320px;
  background: var(--naranja);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  padding: 12px 22px;
  border-radius: 6px;
}

.categoria-cta .boton-naranja-solido:hover {
  background: var(--naranja-oscuro);
  text-decoration: none;
}

/* Pie de página */
.pie {
  background: var(--gris-claro);
  padding: 28px 0;
  border-top: 1px solid var(--borde);
}

.pie-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 14px;
}

.pie-marca {
  text-align: center;
  font-size: 13px;
  color: var(--gris-texto);
}

.pie-mimonclova {
  text-align: center;
  margin-top: 18px;
}

.pie-mimonclova img { height: 32px; width: auto; }

.pie-mimonclova p {
  font-size: 13px;
  margin-bottom: 8px;
}