/* Section Title Styles - Matching H3 Benefit Title Styles */
.section-title {
    font-size: 3rem; /* Aumentado de 2rem a 3rem para mayor importancia */
    font-weight: 900;
    color: var(--e-global-color-text);
    margin-bottom: 10px; /* Reducido para acercar el subtítulo */
    position: relative;
    display: inline-block;
    /* Eliminando la animación de espaciado de letras para mantener consistencia */
    opacity: 1;
    letter-spacing: normal;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

}

/* Estilos para el subtítulo que acompaña al título principal */
.section-subtitle {
    font-size: 2.5rem; /* Tamaño similar al título principal para coherencia visual */
    font-weight: 800; /* Peso similar pero ligeramente menor que el título */
    color: var(--gracie-red); /* Color distintivo pero coordinado */
    margin-top: 0; /* Elimina espacio superior para acercarlo al título */
    margin-bottom: 60px; /* Espacio adecuado después del conjunto título-subtítulo */
    opacity: 1; /* Asegura visibilidad completa */
    animation: fadeInUp 1s forwards; /* Animación coherente */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

}

.section-subtitle-2 {
    font-size: 2.5rem; /* Tamaño similar al título principal para coherencia visual */
    font-weight: 800; /* Peso similar pero ligeramente menor que el título */
    color: #ffffff;; /* Color distintivo pero coordinado */
    margin-top: 0; /* Elimina espacio superior para acercarlo al título */
    margin-bottom: 60px; /* Espacio adecuado después del conjunto título-subtítulo */
    opacity: 1; /* Asegura visibilidad completa */
    animation: fadeInUp 1s forwards; /* Animación coherente */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Estilos específicos para los títulos de sección en fondos azules */
[class*="blue-bg"] .section-title,
.contact-form-section .section-title,
[style*="background: linear-gradient(135deg, #317DC3"] .section-title,
[style*="background-color: var(--e-global-color-secondary)"] .section-title,
[style*="background-color: #317DC3"] .section-title {
    color: #212121; /* Texto blanco para mejor contraste */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Sombra mejorada para mayor profundidad */
}

/* Estilos para subtítulos en fondos azules */
[class*="blue-bg"] .section-subtitle,
.contact-form-section .section-subtitle,
[style*="background: linear-gradient(135deg, #317DC3"] .section-subtitle,
[style*="background-color: var(--e-global-color-secondary)"] .section-subtitle,
[style*="background-color: #317DC3"] .section-subtitle {
    color: #ffffff; /* Texto blanco para mejor contraste */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Sombra coherente con el título */
}

/* Añadiendo el efecto de línea decorativa después del título en fondos azules */
[class*="blue-bg"] .section-title::after,
.contact-form-section .section-title::after,
[style*="background: linear-gradient(135deg, #317DC3"] .section-title::after,
[style*="background-color: var(--e-global-color-secondary)"] .section-title::after,
[style*="background-color: #317DC3"] .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--gracie-red), var(--gracie-blue));
    border-radius: 3px;
    animation: pulse 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.2rem; /* Aumentado de 1.6rem a 2.2rem para mantener la proporción */
    }
    
    .section-subtitle {
        font-size: 1.8rem; /* Ajustado para mantener la proporción en móviles */
    }
}

/* Animation for the decorative line under section titles on blue backgrounds */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Specific style for legacy section subtitle */
.legacy-section-subtitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 60px;
    opacity: 1;
    animation: fadeInUp 1s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}