/*
Theme Name: PALECH
Description: Tema desarrollado con Bootstrap 5.3, HTML5, CSS3, JS y Font Awesome.
Version: 1.0
Author: AldairDM
*/


body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #fcfcfc;
    color: #333333;
}

/* Transiciones suaves para los enlaces e iconos del menú */
.navbar-nav .nav-link {
    transition: color 0.2s ease-in-out;
}
.navbar-nav .nav-link:hover {
    color: #198754 !important; /* Verde Bootstrap similar a PALECH */
}

.social-icons-header a {
    transition: transform 0.2s ease, color 0.2s ease;
}
.social-icons-header a:hover {
    color: #198754 !important;
    transform: scale(1.15);
}

/* Efectos para las tarjetas de Ejes de Acción */
.hover-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
}

/* ==========================================================================
   Sección "Nuestra Esencia" - Estilos Personalizados
   ========================================================================== */

.nuestra-esencia {
    background-color: #f8f9fa; /* Un gris muy claro de fondo, similar a la imagen */
}

/* Estilos de los bloques de texto coloreados */
.nuestra-esencia .text-block-colored {
    display: inline-block;
    max-width: 800px; /* Ajusta según tus necesidades */
}

/* Estilos de los botones de pestaña (.nav-link) */
.nuestra-esencia .nav-tabs .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.7; /* Ligeramente opacos por defecto */
    transition: opacity 0.3s ease, transform 0.2s ease;
    border: none !important; /* Quitamos bordes por defecto */
    background-color: transparent !important;
}

/* Efecto hover */
.nuestra-esencia .nav-tabs .nav-link:hover {
    opacity: 1;
    transform: translateY(-3px); /* Pequeño salto al hover */
}

/* Contenedor del ícono */
.nuestra-esencia .icon-container {
    height: 80px; /* Altura fija para alinear los títulos */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El ícono en sí */
.nuestra-esencia .essence-icon {
    max-height: 100%;
    width: auto;
}

/* El título debajo del ícono */
.nuestra-esencia .essence-title {
    font-size: 0.9rem;
    transition: color 0.3s ease, font-weight 0.3s ease;
}


/* ==========================================================================
   ESTADO ACTIVO DE LA PESTAÑA (.active)
   ========================================================================== */

/* 1. Botón activo opaco */
.nuestra-esencia .nav-tabs .nav-link.active {
    opacity: 1;
}

/* 2. Título del botón activo*/
.nuestra-esencia .nav-tabs .nav-link.active .essence-title {
    color: #212529 !important; /* Negro Bootstrap */
    font-weight: 700 !important; /* Más grueso (Bold) */
}