/**
 * Estilos para el Hub Principal del Portal de Empleo Floral
 *
 * @package portal-empleo-floral
 */

/* Aquí se añadirán todos los los estilos CSS para la página del hub principal. */

/* --- Tarea 7: Estilos de la Sección "Hero" --- */

.pef-hub-container .hero-section {
    /* Fondo oscuro y más padding para integrar las tarjetas */
    background-color: #1a1a1a; /* Negro/gris oscuro */
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    /* Hacemos que ocupe el 90% de la altura de la pantalla en escritorio */
    min-height: 90vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pef-hub-container .hero-content {
    max-width: 900px; /* Aumentamos el ancho máximo para el título */
    margin: 0 auto;
}

.pef-hub-container .hero-title {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: #ffffff;
}

.pef-hub-container .hero-subtitle {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0 0 30px 0;
    font-weight: 400;
}

.pef-hub-container .hero-button {
    /* Eliminado */
}

.pef-hub-container .hero-button:hover {
    /* Eliminado */
}

/* --- Tarea 8: Diseño de las Tarjetas de Navegación --- */

.pef-hub-container .nav-cards-section {
    /* Eliminamos estilos de esta sección ya que ahora está integrada en el hero */
}

.pef-hub-container .nav-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto 0 auto; /* Espacio superior para separarlo del título */
}

.pef-hub-container .nav-card {
    /* El fondo ahora es el color principal */
    border-radius: 12px;
    padding: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    transition: all 0.3s ease;
    color: #ffffff; /* Texto blanco por defecto */
}

.pef-hub-container .nav-card:hover {
    transform: translateY(-5px);
    filter: brightness(1.1); /* Aclarar ligeramente al pasar el ratón */
}

.pef-hub-container .card-icon-container {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Icono con fondo blanco */
}

.pef-hub-container .card-icon-container svg {
    width: 32px;
    height: 32px;
    /* El color del icono será el del color principal de la tarjeta */
}

/* Colores de fondo específicos para cada tarjeta */
.pef-hub-container .card-candidatos { background-color: #3b82f6; } /* Azul oscuro */
.pef-hub-container .card-empresas { background-color: #22c55e; } /* Verde oscuro */
.pef-hub-container .card-negocios { background-color: #F97316; } /* Naranja */

/* Colores de iconos específicos */
.pef-hub-container .card-candidatos .card-icon-container svg { color: #3b82f6; }
.pef-hub-container .card-empresas .card-icon-container svg { color: #22c55e; }
.pef-hub-container .card-negocios .card-icon-container svg { color: #F97316; }


.pef-hub-container .card-title {
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.pef-hub-container .card-description {
    font-size: 1em;
    color: #ffffff;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.pef-hub-container .card-button {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: #ffffff; /* Botón con fondo blanco */
}

/* Estilos de botones específicos para cada tarjeta */
.pef-hub-container .card-candidatos .card-button { color: #3b82f6; }
.pef-hub-container .card-empresas .card-button { color: #22c55e; }
.pef-hub-container .card-negocios .card-button { color: #F97316; }

.pef-hub-container .card-button:hover {
    transform: scale(1.05);
}

/* --- Tarea 9: Estilos del Contenido Explicativo --- */

.pef-hub-container .explainer-sections {
    /* La primera sección ahora debe tener el borde redondeado */
    border-radius: 20px 20px 0 0;
    margin-top: -20px; /* Solapamiento para un efecto suave */
    position: relative;
    z-index: 5;
    background-color: #f4f6f8;
    padding-top: 40px;
}

.pef-hub-container .explainer-section {
    padding: 60px 20px;
    border-bottom: 1px solid #e9ecef;
}

.pef-hub-container .explainer-section:nth-child(even) {
    background-color: #f9fafb; /* Alternar colores de fondo */
}

.pef-hub-container .explainer-section:last-child {
    border-bottom: none;
}

.pef-hub-container .section-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.pef-hub-container .section-title {
    font-size: 2.2em;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.pef-hub-container .section-subtitle {
    font-size: 1.1em;
    color: #6c757d;
    margin: 0 0 40px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pef-hub-container .explainer-grid,
.pef-hub-container .explainer-grid-triple {
    display: grid;
    gap: 30px;
    text-align: left;
}

.pef-hub-container .explainer-grid {
    grid-template-columns: repeat(2, 1fr);
}

.pef-hub-container .explainer-grid-triple {
    grid-template-columns: repeat(3, 1fr);
}

.pef-hub-container .feature-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.pef-hub-container .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pef-hub-container .feature-icon svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

.pef-hub-container .feature-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.pef-hub-container .feature-description {
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.pef-hub-container .feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 0.9em;
    color: #495057;
}

.pef-hub-container .feature-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.pef-hub-container .feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
}

.pef-hub-container .feature-link {
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
}

.pef-hub-container .feature-link:hover {
    text-decoration: underline;
}

/* Colores específicos para cada sección */
#hub-candidatos-section {
    background-color: #ffffff; /* El fondo de la primera sección explicativa */
}

#hub-candidatos-section .feature-icon { background-color: #3b82f6; }
#hub-candidatos-section .feature-list li::before { color: #3b82f6; }
#hub-candidatos-section .feature-link { color: #3b82f6; }

#hub-empresas-section .feature-icon { background-color: #22c55e; }
#hub-empresas-section .feature-list li::before { color: #22c55e; }
#hub-empresas-section .feature-link { color: #22c55e; }

/* Unificamos el color para toda la sección de Oportunidades de Negocio */
#hub-negocios-section .feature-icon { background-color: #F97316; }
#hub-negocios-section .feature-link { color: #F97316; }

/* --- Tarea 10: Diseño Responsivo --- */

/* Estilos para Tablets (hasta 1024px) */
@media (max-width: 1024px) {
    .pef-hub-container .hero-section {
        min-height: auto; /* Desactivamos la altura mínima en tablets y móviles */
    }

    .pef-hub-container .nav-cards-grid,
    .pef-hub-container .explainer-grid,
    .pef-hub-container .explainer-grid-triple {
        grid-template-columns: 1fr; /* Apila las tarjetas en una sola columna */
    }

    .pef-hub-container .hero-title {
        font-size: 2.2em;
    }

    .pef-hub-container .section-title {
        font-size: 1.8em;
    }
}

/* Estilos para Móviles (hasta 767px) */
@media (max-width: 767px) {
    .pef-hub-container .hero-section {
        padding: 60px 15px;
    }

    .pef-hub-container .nav-cards-section {
        padding: 40px 15px;
        margin-top: -30px;
    }

    .pef-hub-container .explainer-section {
        padding: 40px 15px;
    }

    .pef-hub-container .hero-title {
        font-size: 1.8em;
    }
    
    .pef-hub-container .hero-subtitle {
        font-size: 1em;
    }

    .pef-hub-container .hero-button {
        padding: 12px 28px;
        font-size: 0.9em;
    }

    .pef-hub-container .section-title {
        font-size: 1.5em;
    }
    
    .pef-hub-container .section-subtitle {
        font-size: 1em;
    }
} 

/* --- Tarea 12: Animaciones de Entrada --- */

.pef-hub-container .feature-card {
    /* Estado inicial de las tarjetas antes de la animación */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.pef-hub-container .feature-card.is-visible {
    /* Estado final de las tarjetas cuando son visibles */
    opacity: 1;
    transform: translateY(0);
} 

/* Powered by Logo */
.powered-by-container {
    padding-top: 4rem; 
    text-align: center;
}

.powered-by-logo {
    max-width: 250px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.powered-by-logo:hover {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .pef-hub-container .hero-section {
        min-height: auto; /* Desactivamos la altura mínima en tablets y móviles */
        padding-bottom: 4rem; /* Añadimos espacio inferior */
    }

    .pef-hub-container .nav-cards-grid {
        grid-template-columns: 1fr; /* Apila las tarjetas en una sola columna */
    }

    .pef-hub-container .hero-title {
        font-size: 2.5em; /* Ajustamos el tamaño del título principal */
        max-width: 90%;
    }

    .pef-hub-container .section-title {
        font-size: 2em;
    }

    .powered-by-container {
        padding-top: 3rem;
    }

    .pef-hub-container .explainer-grid,
    .pef-hub-container .explainer-grid-triple {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pef-hub-container .hero-section {
        padding-top: 6rem;
    }
    
    .pef-hub-container .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
        max-width: 100%;
    }

    .powered-by-container {
        padding-top: 2rem;
    }
    
    .pef-hub-container .section-title {
        font-size: 1.8rem;
    }
}