/* =====================================================================
   DIRECTORIO MINERO - PAISMINERO.COM
   Hoja de estilos general (grid del directorio + landing de empresa)
   Identidad visual alineada con expo.paisminero.com:
   tipografia Bebas Neue (titulos) + Barlow Condensed (cuerpo/botones),
   acento naranja #D05C10 y negro calido #1A1714, botones con corte
   angular (clip-path), y eyebrows numerados en mayuscula con tracking.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&display=swap');
:root {
  --pm-naranja: #d05c10;
  --pm-naranja-oscuro: #a84a0d;
  --pm-negro: #1a1714;
  --pm-negro-suave: #110f09;
  --pm-gris-claro: #f2f3f5;
  --pm-gris-borde: #d9dcdf;
  --pm-texto: #1a1714;
  --radio: 4px;
  --sombra: 0 2px 8px rgba(0, 0, 0, 0.08);
  --fuente-titulo: "Bebas Neue", "Barlow Condensed", sans-serif;
  --fuente-cuerpo: "Barlow Condensed", "Segoe UI", Arial, sans-serif;
  --corte: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  /* Color de marca del cliente: cada landing lo sobreescribe en linea (body style=""),
     este es solo el respaldo por si falta. El color de texto se calcula en PHP
     (colorTexto()) segun la luminancia, para que el boton siempre sea legible. */
  --color-marca: var(--pm-naranja);
  --color-marca-texto: #ffffff;
}
* { box-sizing: border-box; }
/* ---------------------------------------------------------------------
   RESPONSIVE — NUEVO: ninguna imagen (incluidas imagenes de prueba /
   rectangulos de colores usados como placeholder) puede ser mas ancha
   que su contenedor, sin importar el tamaño con el que fue subida o
   los atributos width/height que traiga en el HTML.
   --------------------------------------------------------------------- */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
body {
  font-family: var(--fuente-cuerpo);
  margin: 0;
  color: var(--pm-texto);
  background: #ffffff;
  font-size: 16px;
  /* NUEVO: red de seguridad final — si algo se desborda por un pixel,
     esto evita que aparezca scroll horizontal en el celular. */
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--fuente-titulo); letter-spacing: 0.5px; font-weight: 700; }
.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
a { text-decoration: none; color: inherit; }
/* Etiqueta pequeña en mayusculas con tracking + rayita naranja, como el
   "— X EDICION · COLOMBIA 2026" de expo.paisminero.com */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pm-naranja);
  margin-bottom: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--pm-naranja);
}
.eyebrow .num {
  color: var(--pm-naranja);
  font-family: var(--fuente-titulo);
  font-size: 16px;
  margin-right: 2px;
}
/* Boton solido con corte angular, como "OBTENER TICKET" / "REGISTRARME COMO VISITANTE" */
.btn-angular {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pm-naranja);
  color: #fff !important;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  clip-path: var(--corte);
  transition: background 0.15s ease;
}
.btn-angular:hover { background: var(--pm-naranja-oscuro); }
/* Enlace fantasma subrayado, como "SER EXPOSITOR" */
.btn-fantasma {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pm-naranja);
  padding-bottom: 4px;
}
/* ---------- Encabezado del directorio ---------- */
.directorio-header {
  text-align: center;
  margin-bottom: 26px;
}
.directorio-header h1 {
  color: var(--pm-negro);
  font-size: 44px;
  margin: 0 0 6px;
}
.directorio-header h1 span { color: var(--pm-naranja); }
.directorio-header p {
  color: #666;
  margin: 0;
  font-size: 15px;
}
/* ---------- Barra de herramientas: buscador + orden + por pagina ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--pm-gris-claro);
  border: 1px solid var(--pm-gris-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.toolbar .buscador {
  flex: 1 1 260px;
  position: relative;
}
.toolbar input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pm-gris-borde);
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
}
.toolbar .controles {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar select {
  padding: 9px 10px;
  border-radius: var(--radio);
  border: 1px solid var(--pm-gris-borde);
  background: #fff;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
}
.toolbar label { font-size: 13px; color: #555; letter-spacing: 0.5px; text-transform: uppercase; }
/* Filtro alfabetico A-Z */
.alfabeto {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}
.alfabeto button {
  border: 1px solid var(--pm-gris-borde);
  background: #fff;
  border-radius: var(--radio);
  min-width: 30px;
  height: 30px;
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 13px;
  color: var(--pm-negro);
}
.alfabeto button.activo,
.alfabeto button:hover {
  background: var(--pm-naranja);
  color: #fff;
  border-color: var(--pm-naranja);
}
/* ---------- Grid de empresas: 4 columnas, responsive, colapsable ---------- */
.grid-empresas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .grid-empresas { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .grid-empresas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .grid-empresas { grid-template-columns: 1fr; }
}
.card-empresa {
  background: #ffffff; /* siempre blanco, sin importar el fondo del logo */
  border: 1px solid var(--pm-gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  aspect-ratio: 4 / 3;
  min-width: 0; /* NUEVO: evita que la tarjeta fuerce el ancho del grid en pantallas chicas */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-empresa:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  border-color: var(--pm-naranja);
}
.card-empresa .logo-caja {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* object-fit: cover = el logo llena todo el recuadro (se recorta lo que sobre),
   asi el directorio se ve parejo sin importar la proporcion del logo original */
.card-empresa .logo-caja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-empresa .nombre-empresa {
  margin-top: 8px;
  font-family: var(--fuente-cuerpo);
  font-size: 13.5px;
  text-align: center;
  color: #444;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sin-resultados {
  text-align: center;
  padding: 40px 20px;
  color: #777;
  display: none;
}
/* ---------- Paginacion ---------- */
.paginacion {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.paginacion a, .paginacion span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: var(--radio);
  border: 1px solid var(--pm-gris-borde);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 14px;
}
.paginacion a:hover { background: var(--pm-gris-claro); }
.paginacion .activa { background: var(--pm-naranja); color: #fff; border-color: var(--pm-naranja); }
/* Seccion colapsable (accesorio: agrupar por categoria si se necesita) */
.colapsable summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  color: var(--pm-negro);
}
/* =====================================================================
   LANDING PAGE DE EMPRESA — replica fiel de expo.paisminero.com
   Tokens extraidos directamente del sitio real: naranja #D05C10,
   negro #1A1714, texto muted #7A7268, borde #DDD8CF, footer #110F09,
   patron diagonal a -55deg, tarjetas "pillar" con letra de marca de agua.
   ===================================================================== */
:root {
  --pm-muted: #7a7268;
  --pm-borde-fino: #ddd8cf;
}
body.tema-blanco {
  background: #ffffff; color: var(--pm-negro);
  --sec-a-bg: #ffffff; --sec-b-bg: #f3f1ec; --sec-texto: var(--pm-negro); --sec-muted: var(--pm-muted);
}
body.tema-gris {
  background: #eeeeec; color: var(--pm-negro);
  --sec-a-bg: #eeeeec; --sec-b-bg: #ffffff; --sec-texto: var(--pm-negro); --sec-muted: var(--pm-muted);
}
body.tema-negro {
  background: var(--pm-negro-suave); color: #f2f2f0;
  --sec-a-bg: #110f09; --sec-b-bg: #241f18; --sec-texto: #f2f2f0; --sec-muted: #cfcac2;
}
/* ---------- Barra superior (2 filas, como el header de expo) ---------- */
.landing-topbar {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--pm-naranja);
}
.landing-topbar .fila-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--pm-borde-fino);
  flex-wrap: wrap;
  gap: 10px;
}
.landing-topbar .marca {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  color: var(--pm-negro);
  letter-spacing: 0.5px;
}
.landing-topbar .marca span { color: var(--pm-naranja); }
.landing-topbar .fila-bottom {
  display: flex;
  justify-content: center;
  padding: 10px 24px;
  flex-wrap: wrap;
}
.landing-topbar .fila-bottom a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pm-muted);
}
.landing-topbar .fila-bottom a:hover { color: var(--pm-naranja); }
/* Boton solido con corte angular (nav-cta / btn-primary de expo).
   Usa el color de marca del cliente (--color-marca); el color del texto
   (--color-marca-texto) se calcula en PHP segun el contraste, asi que el
   boton siempre es legible sin importar el color que elija el cliente. */
.btn-angular {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-marca);
  color: var(--color-marca-texto) !important;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  clip-path: var(--corte);
  transition: filter 0.15s ease;
}
.btn-angular:hover { filter: brightness(0.88); }
/* Boton contorno (btn-outline de expo). El borde lleva el color de marca (decorativo,
   un aro delgado no compromete legibilidad), pero el TEXTO siempre hereda el color
   de la seccion/tema (currentColor), que ya esta probado con buen contraste sobre
   cada fondo (blanco, gris, negro) — asi el color del cliente nunca vuelve el texto
   invisible sobre un fondo oscuro. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--color-marca);
  color: currentColor !important;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 22px;
  clip-path: var(--corte);
}
/* Enlace fantasma subrayado */
.btn-fantasma {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: currentColor;
  border-bottom: 2px solid var(--color-marca);
  padding-bottom: 4px;
}
/* ---------- Hero: patron diagonal + titulo apilado negro/naranja/negro ---------- */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding: 56px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-55deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 60px, rgba(208,92,16,0.05) 60px, rgba(208,92,16,0.05) 61px);
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 40px 20px; }
}
/* NUEVO: evita que los dos bloques del hero (texto e imagen) impidan que
   la fila colapse correctamente en pantallas chicas. */
.hero > * { min-width: 0; }
.hero-edition {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pm-naranja);
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}
.hero-title {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 0.92;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hero-title .linea {
  display: block;
  font-size: 32px;
  color: var(--pm-negro);
  text-transform: uppercase;
}
.tema-negro .hero-title .linea { color: #fff; }
.hero-title .accent {
  display: block;
  font-size: clamp(40px, 6vw, 76px);
  color: var(--pm-naranja);
  text-transform: uppercase;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.hero-divider {
  width: 60px;
  height: 3px;
  background: var(--pm-naranja);
  margin: 20px 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .hero-divider { margin: 20px auto; } }
.hero-tagline {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pm-muted);
  max-width: 480px;
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere; /* NUEVO: si el cliente escribe una URL/palabra muy larga, no desborda */
}
.tema-negro .hero-tagline { color: #cfcac2; }
.hero-meta {
  display: flex;
  gap: 28px;
  margin: 26px 0;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
@media (max-width: 860px) { .hero-meta { justify-content: center; flex-wrap: wrap; } }
.hero-meta-item .lbl {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pm-muted);
  margin: 0 0 4px;
}
.hero-meta-item .val {
  font-family: var(--fuente-titulo);
  font-size: 22px;
  color: var(--pm-negro);
  margin: 0;
}
.tema-negro .hero-meta-item .val { color: #fff; }
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .hero-ctas { justify-content: center; } }
.hero-image-slot {
  border: 1px solid var(--pm-borde-fino);
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  min-width: 0; /* NUEVO */
  position: relative;
  z-index: 1;
}
.hero-image-slot img {
  max-width: 100%;
  max-height: 260px;
  width: auto; /* NUEVO: no forzar 100% de ancho sobre una imagen mas chica que el slot */
  object-fit: contain;
}
.hero-image-slot .sin-logo {
  color: #bbb;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Selector de tema (blanco / gris / negro) */
.selector-tema {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .selector-tema { justify-content: center; } }
.selector-tema button {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  cursor: pointer;
}
.tema-negro .selector-tema button { border-color: rgba(255,255,255,0.35); }
.selector-tema button[data-tema="blanco"] { background: #ffffff; }
.selector-tema button[data-tema="gris"] { background: #eeeeec; }
.selector-tema button[data-tema="negro"] { background: var(--pm-negro-suave); }
.selector-tema button.activo { outline: 2px solid var(--color-marca); outline-offset: 2px; }
/* ---------- Secciones tipo "about": label + titulo con acento.
   Las secciones alternan de fondo (como en expo.paisminero.com) usando las
   variables --sec-a-bg/--sec-b-bg definidas por el tema (blanco/gris/negro)
   de mas arriba. El color de texto de cada seccion (--sec-texto/--sec-muted)
   viaja con ella, asi que el contraste queda garantizado sin importar cual
   de las dos tonalidades le toque. ---------- */
.landing-seccion {
  width: 100%;
  border-top: 1px solid var(--pm-borde-fino);
  background: var(--sec-a-bg);
  color: var(--sec-texto);
}
.landing-seccion.seccion-alt { background: var(--sec-b-bg); }
.tema-negro .landing-seccion { border-top-color: rgba(255,255,255,0.12); }
/* El color de fondo de la seccion va de borde a borde (como en expo.paisminero.com);
   el contenido se mantiene centrado y legible en una columna de 1000px. */
.seccion-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 44px 24px;
}
.sec-label {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pm-naranja);
  margin: 0 0 8px;
}
.landing-seccion h2 {
  font-size: 32px;
  color: currentColor;
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1;
}
.landing-seccion h2 .acc { color: var(--pm-naranja); }
.descripcion-empresa, .actividades-empresa {
  line-height: 1.65;
  font-size: 16px;
  color: var(--sec-muted);
  max-width: 760px;
  overflow-wrap: anywhere; /* NUEVO: texto largo/URLs pegadas por el cliente no desbordan */
}
.descripcion-empresa strong, .actividades-empresa strong { color: currentColor; }
/* ---------- Contactos: tarjetas "pillar" con letra de marca de agua ---------- */
.grid-contactos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--pm-borde-fino);
  border: 1px solid var(--pm-borde-fino);
}
.tema-negro .grid-contactos { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.12); }
@media (max-width: 780px) {
  .grid-contactos { grid-template-columns: 1fr; }
}
.tarjeta-contacto {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  background: inherit; /* toma el fondo de la seccion (A o B) para que la tarjeta calce con la alternancia */
  min-width: 0; /* NUEVO */
}
.tarjeta-contacto .letra-marca {
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: var(--fuente-titulo);
  font-size: 64px;
  color: rgba(208,92,16,0.13);
  line-height: 1;
  pointer-events: none;
}
.tarjeta-contacto .num {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  color: var(--pm-naranja);
  position: relative;
  z-index: 1;
}
.tarjeta-contacto .nombre {
  font-family: var(--fuente-titulo);
  font-size: 24px;
  color: currentColor;
  margin: 4px 0 2px;
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}
.tarjeta-contacto .cargo {
  font-size: 13px;
  color: var(--sec-muted);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}
.tarjeta-contacto .acciones {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tarjeta-contacto .accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-cuerpo);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 14px;
  clip-path: var(--corte);
  background: #25D366;
  color: #fff;
}
.tarjeta-contacto .accion.email { background: var(--color-marca); color: var(--color-marca-texto); }
/* ---------- Productos (maximo configurable por empresa): imagen fija 450x300 + descripcion ---------- */
.grid-productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pm-borde-fino);
  border: 1px solid var(--pm-borde-fino);
}
.tema-negro .grid-productos { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.12); }
.tarjeta-producto {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 24px;
  align-items: center;
  background: inherit; /* toma el fondo de la seccion (A o B) para que la tarjeta calce con la alternancia */
  padding: 24px;
}
@media (max-width: 780px) {
  .tarjeta-producto { grid-template-columns: 1fr; }
}
/* NUEVO: esta es la correccion principal del bug de desborde en movil.
   Un hijo de grid tiene por defecto min-width: auto, lo que puede impedir
   que se encoja por debajo del tamaño de su contenido/imagen aunque el
   contenedor ya haya pasado a una sola columna. min-width: 0 se lo permite. */
.imagen-producto,
.texto-producto {
  min-width: 0;
}
.imagen-producto {
  width: 450px;
  height: 300px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--pm-borde-fino);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* NUEVO: centra el recuadro cuando ya ocupa el ancho completo en movil */
}
.imagen-producto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imagen-producto.sin-imagen {
  color: #aaa;
  font-size: 13px;
}
.texto-producto .num {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  color: var(--pm-naranja);
}
.texto-producto h3 {
  margin: 4px 0 10px;
  font-size: 26px;
  text-transform: uppercase;
  color: currentColor;
  overflow-wrap: anywhere;
}
.texto-producto p {
  margin: 0;
  line-height: 1.6;
  font-size: 15px;
  color: var(--sec-muted);
  overflow-wrap: anywhere; /* NUEVO */
}
/* ---------- Banda de cierre (oscura, como la seccion CTA de expo) ---------- */
.landing-cta {
  background: var(--pm-negro-suave);
  border-top: 1px solid var(--pm-naranja);
  padding: 46px 24px;
  text-align: center;
}
.landing-cta p {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.landing-cta .botones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* ---------- Gancho de registro: invita a empresas a crear su pagina ---------- */
.cta-registro {
  background: var(--pm-negro-suave);
  border: 1px solid var(--pm-naranja);
  clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
  padding: 34px 32px;
  margin: 28px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-registro-texto { flex: 1; min-width: 240px; }
.cta-registro-texto .eyebrow { color: var(--pm-naranja); margin-bottom: 8px; }
.cta-registro-texto h2 {
  color: #ffffff;
  font-size: 26px;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.cta-registro-texto p {
  color: rgba(255,255,255,0.7);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  margin: 0;
  max-width: 520px;
  overflow-wrap: anywhere; /* NUEVO */
}
.cta-registro-boton {
  flex-shrink: 0;
  font-size: 15px;
  padding: 13px 26px;
}
.cta-registro.cta-compacta {
  padding: 22px 26px;
  margin: 40px 0 0;
}
.cta-registro.cta-compacta .cta-registro-texto h2 { font-size: 20px; }
@media (max-width: 640px) {
  .cta-registro { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-registro-boton { width: 100%; text-align: center; }
}
/* ---------- Footer, como el de expo (marca + links + copy) ---------- */
.landing-footer {
  background: var(--pm-negro-suave);
  color: rgba(255,255,255,0.6);
  padding: 30px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}
.landing-footer .marca {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.5px;
}
.landing-footer .marca span { color: var(--pm-naranja); }
.landing-footer a.volver { color: rgba(255,255,255,0.85); font-weight: 600; }
.landing-footer a.volver:hover { color: var(--pm-naranja); }

/* =====================================================================
   HEADER DEL ECOSISTEMA — AGREGADO
   Es el mismo header que se usa en paisminero.com/pauta/ (barra negra de
   enlaces + logo + submenu), para que Directorio Empresarial se vea como
   una seccion mas del mismo ecosistema de Paisminero.com. Va ARRIBA del
   encabezado propio de cada pagina del directorio (.directorio-header en
   index.php, .hero en la ficha de cada empresa), que se mantienen igual.
   ===================================================================== */
.eco-header-fijo {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.eco-topbar {
  background: #000000;
  color: #8a9bac;
  font-size: .78rem;
}
.eco-topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 24px;
  flex-wrap: wrap;
  gap: 6px;
}
.eco-topbar .links a {
  margin-right: 16px;
  text-decoration: none;
  color: #8a9bac;
}
.eco-topbar .links a:hover { color: #8ec946; }
.eco-topbar .date { color: #8a9bac; }
.eco-header { background: #000000; }
.eco-header .site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1140px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.eco-header .logo { height: 38px; display: block; }
.eco-header .tag {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8ec946;
  border-left: 2px solid #8ec946;
  padding-left: 12px;
}
.eco-subnav {
  background: #141d2e;
  border-top: 1px solid rgba(255,255,255,.06);
}
.eco-subnav .wrap {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.eco-subnav a {
  display: inline-block;
  padding: 11px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #cccccc;
  text-decoration: none;
}
.eco-subnav a:hover { color: #fff; }
.eco-subnav a.active { background: #8ec946; color: #fff; }
@media (max-width: 600px) {
  .eco-topbar .links a { margin-right: 10px; }
}