/* ========================================
   HERO TEXT RESPONSIVE FIX
   ======================================== */

/* Desktop: Usar todo el ancho de pantalla */
@media (min-width: 769px) {
    .typing-animation {
        font-size: 3.5rem !important;
        white-space: nowrap !important; /* Una sola línea en desktop */
        overflow: visible !important;
        text-align: center !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 1rem !important; /* Padding lateral para evitar que se salga */
    }
    
    .masthead .display-5 {
        font-size: 3.5rem !important;
        white-space: nowrap !important; /* Una sola línea en desktop */
        overflow: visible !important;
        text-align: center !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 1rem !important; /* Padding lateral para evitar que se salga */
    }
    
    /* Asegurar que el contenedor use todo el ancho */
    .masthead .jumbotron {
        max-width: none !important;
        width: 100% !important;
        padding: 3rem 2rem !important;
    }
    
    .masthead .container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 2rem !important;
    }
}

/* Tablet: Comportamiento intermedio */
@media (min-width: 481px) and (max-width: 768px) {
    .typing-animation {
        font-size: 2.5rem !important;
        white-space: normal !important; /* Permite saltos de línea */
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .masthead .display-5 {
        font-size: 2.5rem !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
}

/* Móvil: Mantener comportamiento actual con saltos de línea */
@media (max-width: 480px) {
    .typing-animation {
        font-size: 2rem !important;
        white-space: normal !important; /* Permite saltos de línea */
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
    
    .masthead .display-5 {
        font-size: 2rem !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
    
    .masthead .jumbotron {
        padding: 2rem 1rem !important;
        margin: 0 1rem !important;
    }
}

/* Ajustes adicionales para pantallas muy grandes */
@media (min-width: 1400px) {
    .typing-animation {
        font-size: 4rem !important;
        white-space: nowrap !important;
        padding: 0 2rem !important;
    }
    
    .masthead .display-5 {
        font-size: 4rem !important;
        white-space: nowrap !important;
        padding: 0 2rem !important;
    }
}

/* Fallback para pantallas muy anchas donde el texto podría salirse */
@media (min-width: 1920px) {
    .typing-animation {
        font-size: 3.5rem !important;
        padding: 0 3rem !important;
    }
    
    .masthead .display-5 {
        font-size: 3.5rem !important;
        padding: 0 3rem !important;
    }
}

/* Asegurar que el texto no se corte en ningún dispositivo */
.typing-animation,
.masthead .display-5 {
    word-break: keep-all !important;
    hyphens: none !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Asegurar que el contenedor padre también respete los límites */
.masthead .jumbotron {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

.masthead .container {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Mejorar la legibilidad en todos los dispositivos */
.typing-animation,
.masthead .display-5 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    color: white !important;
}