/*
  Hoja de Estilos Principal para PROS
*/

:root {
    /* Paleta de Colores */
    --color-azul: #49a2d8;
    --color-naranja: #ef9436;
    --color-verde: #4eab48;
    --color-gris: #666666;

    /* Tipografía Base */
    --font-size-h1: 52px;
    --font-size-p: 28px;
    --font-regular: 400;
    --font-bold: 700;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* Botones Sociales Flotantes */
.social-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1030;
    display: flex;
    flex-direction: column;
}

.social-container a {
    margin-bottom: 5px;
}

.social-container img {
    border-radius: 8px 0 0 8px;
    transition: transform 0.3s ease;
}

.social-container img:hover {
    transform: scale(1.1);
}

/* Estilos para el Encabezado (Hero Section) */
#hero {
    height: 860px;
    color: #ffffff;
    position: relative; /* <<--- AÑADIDO: Esto soluciona el problema de apilamiento */
    
    /* Imagen de fondo para el Hero */
    background-image: url('../img/index/hero-index-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Usamos Flexbox para alinear el contenido verticalmente */
    display: flex;
    flex-direction: column; /* Apilamos los elementos verticalmente */
}

/* Contenedor del texto del Hero */
.hero-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Añadido para alinear los elementos a la izquierda y evitar que el botón se estire */
}

#hero h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-bold);
    max-width: 700px; /* Ancho máximo para el título */
}

#hero p {
    font-size: var(--font-size-p);
    font-weight: var(--font-regular);
}

/* Estilos para el botón personalizado */
.btn-custom-blue {
    background-color: var(--color-azul);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 42px; /* Revertido al padding original para los botones del cuerpo */
    font-weight: var(--font-bold);
    text-align: center;
}

.btn-custom-blue:hover {
    background-color: #3a8cbf; /* Un azul un poco más oscuro para el hover */
    color: #ffffff;
}

/* --- Barra de Navegación --- */
.main-nav {
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    min-height: 110px; /* <-- Altura restaurada */
    display: flex;
    align-items: center;
    padding-left: 2rem;

}

/* SOLUCIÓN: Aplica el padding grande SOLO al botón dentro de la navegación */
.main-nav .btn-custom-blue {
    padding: 30px 42px;
}

.main-nav .nav-link {
    color: #6c757d; /* Color gris de Bootstrap */
    font-weight: var(--font-bold);
    position: relative;
    padding: 0.5rem;
    margin: 0 0.5rem;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
}

.main-nav .nav-item {
    display: flex; 
    align-items: center;
}

.main-nav .nav-item:not(:last-child)::after {
    content: '|';
    color: #cccccc;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Línea naranja en hover */
.main-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background-color: var(--color-naranja);
    transition: width 0.3s ease-in-out;
}

.main-nav .nav-link:hover::before {
    width: 80%;
}


/* --- Dropdown Menu Customizations --- */
.main-nav .dropdown-toggle::after {
    display: none;
}
.dropdown-menu {
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-top: 0;
    /* FIX 2: Añadimos una posición relativa para el pseudo-elemento */
    position: relative; 
}

/* FIX 2: El pseudo-elemento que cubre el espacio en el hover */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-color: transparent;
}

.dropdown-item {
    font-weight: var(--font-regular);
    padding: 0.5rem 1.5rem;
}

.dropdown-item:hover {
    background-color: var(--color-azul);
    color: #ffffff;
}

/* Desktop Hover Functionality */
@media (min-width: 992px) {
    .main-nav .dropdown:hover .dropdown-menu {
        display: block;
    }
    .main-nav .dropdown .dropdown-menu {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
    }
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .main-nav {
        min-height: auto; /* Revertimos la altura en móvil */
        padding-left: 0; /* Revertimos el padding en móvil */
        padding-right: 0;
    }
    .main-nav .navbar-nav {
        align-items: center;
    }
    .main-nav .nav-item:not(:last-child)::after {
        content: none;
    }
    .main-nav .dropdown-menu {
        text-align: center;
        box-shadow: none;
        border: none;
        background-color: #f8f9fa;
    }
}


/* --- Quick Selectors Section --- */
#quick-selectors {
    position: relative; /* Necesario para el z-index */
    z-index: 10; /* Asegura que la sección esté sobre el header */
    margin-top: -60px; /* La mitad de la altura de la tarjeta (aprox) para superponer */
    padding: 0px;
    background-color: white;
    border: 2px solid #cccccc;
    border-radius: 10px;
    overflow: hidden; /* Muy importante para que el border-radius afecte a los hijos */
}
/* Divisores verticales */
.quick-selectors-container .col-lg-4:not(:last-child) {
    border-right: 2px solid #cccccc;
}

/* Estilo para los nuevos enlaces */
.quick-selector-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.quick-selector-card {
    background-color: #ffffff;
    /* Se eliminan bordes y radios individuales */
    border: none; 
    border-radius: 0;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
}

.quick-selector-card h2 {
    font-size: 28px;
    color: var(--color-gris);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    margin: 0 0 0 1rem; /* Margen a la izquierda del texto */
    transition: color 0.3s ease-in-out;
}

.quick-selector-card i {
    font-size: 2.5rem; /* Tamaño del icono */
    transition: color 0.3s ease-in-out;
}

/* Colores de Iconos */
.icon-green { color: var(--color-verde); }
.icon-orange { color: var(--color-naranja); }
.icon-blue { color: var(--color-azul); }

/* Efectos Hover */
/* Hover Verde */
.card-green-hover:hover {
    background-color: var(--color-verde);
    /* Se elimina el cambio de color del borde que ahora es del contenedor */
}
.card-green-hover:hover h2,
.card-green-hover:hover i {
    color: #ffffff;
}

/* Hover Naranja */
.card-orange-hover:hover {
    background-color: var(--color-naranja);
    /* Se elimina el cambio de color del borde que ahora es del contenedor */
}
.card-orange-hover:hover h2,
.card-orange-hover:hover i {
    color: #ffffff;
}

/* Hover Azul */
.card-blue-hover:hover {
    background-color: var(--color-azul);
    /* Se elimina el cambio de color del borde que ahora es del contenedor */
}
.card-blue-hover:hover h2,
.card-blue-hover:hover i {
    color: #ffffff;
}

/* --- Welcome Letter Section --- */
#welcome-letter{
    padding: 160px 0px;
}

#welcome-img{
    padding: 40px;
    box-sizing: border-box;
}

#welcome-letter .welcome-title {
    font-size: 3rem; /* 48px */
    font-weight: var(--font-bold);
    color: var(--color-azul);
    text-transform: uppercase;
}

#welcome-letter .welcome-subtitle {
    font-size: 1.25rem; /* 20px */
    font-weight: var(--font-bold);
    color: var(--color-gris);
    margin-bottom: 1.5rem;
}

#welcome-letter .welcome-text {
    font-size: 1rem; /* 16px */
    color: var(--color-gris);
    line-height: 1.8;
}

#welcome-letter .welcome-text strong,
#welcome-letter .welcome-text em {
    color: #343a40; /* Un gris un poco más oscuro para la firma */
}

/* --- Approaching Dates & Deadlines Section --- */
#deadlines {
    background: linear-gradient(to bottom, #f7f7f7 87%, #212529 87%);
    padding-top: 60px;
}

.section-title {
    font-size: 3rem;
    font-weight: var(--font-bold);
    color: var(--color-azul);
    text-transform: uppercase;
}

.deadline-box {
    background-color: #ffffff;
    border: 2px solid #cccccc;
    border-radius: 10px;
    /* Se elimina el padding de aquí para que los hijos empiecen desde el borde */
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 100px;
}

/* Divisor vertical para la sección de deadlines */
.deadline-item:first-child {
    border-right: 2px solid #cccccc;
}

.deadline-item {
    position: relative; /* Contexto para el posicionamiento del ícono */
    /* Añadimos el padding aquí para empujar el texto hacia abajo */
    padding-top: 60px; 
    padding-left: 1rem;
    padding-right: 1rem;
}

.deadline-icon-wrapper {
    width: 90px;
    height: 90px;
    background-color: #cccccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Magia para posicionar el ícono */
    position: absolute;
    top: -60px; /* Mitad de la altura para que sobresalga */
    left: 50%;
    transform: translateX(-50%);
}

.deadline-icon-wrapper i {
    color: #ffffff;
    font-size: 2.5rem;
}

.deadline-item h3 {
    font-size: 26px;
    color: var(--color-azul);
    font-weight: var(--font-bold);
    margin-top: 1.5rem; /* Espacio para el ícono */
}

.deadline-item p {
    font-size: 18px;
    color: var(--color-gris);
    margin-bottom: 0;
}

/* --- PROS Membership CTA --- */
.membership-cta {
    margin-top: 120px;
    margin-bottom: 80px;
}

.membership-title {
    font-size: 2.4rem;
    font-weight: var(--font-bold);
    color: var(--color-azul);
    margin: 0;
}

.membership-text {
    color: var(--color-gris);
}

.membership-icon-dynamic {
    font-size: 12rem;
    color: var(--color-verde);
    transform: rotate(-15deg);
    text-shadow: -15px 15px 30px rgba(0, 0, 0, 0.1);
    display: inline-block;
}


/* --- Social CTA Section --- */
.newsletter-box {
    border: 2px solid #cccccc;
    border-radius: 10px;
    overflow: hidden; /* Para que el degradado respete los bordes redondeados */
    padding: 0; /* Reseteamos el padding para controlar el espacio interior */
    background: linear-gradient(to bottom, #ffffff 56%, var(--color-azul) 56%);
}

.newsletter-box h3 {
    font-size: 2.4rem; /* Título más grande */
    color: var(--color-azul);
    font-weight: var(--font-bold);
    margin: 0;
}

.newsletter-box p {
    color: var(--color-gris);
    margin: 0;
}

.social-icons-cta a {
    color: #ffffff;
    font-size: 40px;
    margin: 0 1rem;
    transition: color 0.3s ease;
}

.social-icons-cta a:hover {
    color: #f0f0f0;
}

/* --- Footer Section --- */
.footer-divider {
    border-top: 1px solid #4f4f4f; /* Un gris un poco más claro que el fondo */
}

.footer-bottom {
    font-size: 0.9rem;
}

.footer-bottom-links a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 1.5rem;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--color-azul);
}

.back-to-top-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-azul);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.back-to-top-btn:hover {
    background-color: #3a8cbf; /* Azul más oscuro */
    color: #ffffff;
}

.back-to-top-btn i {
    font-size: 1.2rem;
    line-height: 1; /* Ayuda a centrar el icono verticalmente */
}