/* ==========================================================================
   Configuración de Cabecera: Logo a la izquierda y Menú a la derecha
   ========================================================================== */
@media (min-width: 992px) {
  /* 1. Activa la rejilla para forzar a que compartan la misma fila */
  .header.container-header.full-width {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; /* Centra verticalmente el logo y el menú */
  }

  /* 2. Empuja la barra de navegación hacia el extremo derecho */
  .container-header .container-nav {
    grid-column: auto;
    margin-left: auto !important;
  }

  header.header {
    padding-left: 5% !important;  /* Empuja el logo hacia la derecha */
    padding-right: 5% !important; /* Empuja el menú hacia la izquierda */
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   Ajuste de seguridad para el comportamiento horizontal del menú
   ========================================================================== */
.container-nav ul.menu, 
.container-nav ul.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px; /* Controla la separación entre los botones del menú (ajústalo a tu gusto) */
  list-style: none;
  padding: 0;
  margin: 0;
}


/* AJUSTAR IMAGEN DE MODULO TECNOLOGÍAS */
/* Apuntar únicamente a la imagen que esté dentro de nuestro módulo personalizado */
.modulo-tecno-ajustado img {
    width: 15% !important;     /* Equivale a w-25 */
    float: left !important;     /* Equivale a float-start */
    margin-right: 1rem !important; /* Equivale a me-3 */
    height: auto;
}

/* Limpiar el flotado al final del módulo para que no se desmaquete el resto de la web */
.modulo-tecno-ajustado::after {
    content: "";
    display: table;
    clear: both;
}

/* COLOR DE ELEMENTOS H1 */
h1, h3, .h1, .h3 {
  color: #2796bd !important; 
}

h2 a, .h2 a {
  text-decoration: none !important;
  color: #2796bd !important;
}

/* PAGINA DE INICIO */
/* 1. Ocultar los textos de introducción de los artículos destacados de la portada */
.blog-featured .blog-item .item-content ul,
.blog-featured .blog-item .item-content > div:not(.page-header) {
    display: none !important;
}

/* 2. Forzar que el título se mantenga siempre visible e intacto */
.blog-featured .blog-item .page-header,
.blog-featured .blog-item .item-title,
.blog-featured .blog-item .item-title a {
    display: block !important;
}

/* imagen del articulo principal en la portada */
.portada-compacta .item-image img {
  width: 85%;
  height: 100%;      /* ajusta este valor a la altura que quieras */
  object-fit: cover;  /* recorta manteniendo proporción, sin deformar */
  display: block;
  margin:auto;
}

/* Definir CABECERA en módulos específicos */
/* Solo se aplica si el contenedor padre tiene la clase 'mi-encabezado-especial' */
.mi-cabecera .card-header {
  background-color: #2796bd !important;  
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 24px 24px;
}
.mi-cabecera .mod-list li a {
  color: #2796bd !important;
}
h3.card-header {
  color: #ffffff !important;
}