/* ====================================
   OPTIMIZACIONES MÓVILES ESPECÍFICAS
==================================== */

/* Hero y Profile - Móvil */
@media (max-width: 768px) {
    .hero-video {
        min-height: 100vh;
        padding-top: 80px;
    }

    .hero-content {
        padding: 0 1.5rem;
    }

    /* Profile Pic - Tablet */
    .profile-pic {
        width: 160px;
        height: 160px;
        margin-bottom: 1.5rem;
    }

    .profile-container {
        margin-bottom: 1rem;
    }

    /* Badges - Tablet */
    .hero-badges {
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .badge {
        min-width: 110px;
        padding: 1.2rem 1.5rem;
    }

    .badge strong {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {

    /* Hero Content - Móvil */
    .hero-video {
        padding-top: 70px;
        min-height: 100vh;
    }

    .hero-content {
        padding: 0 1rem;
    }

    /* Profile Pic - Móvil pequeño */
    .profile-pic {
        width: 140px !important;
        height: 140px !important;
        border: 3px solid var(--white-color);
        box-shadow: 0 8px 30px rgba(0, 168, 232, 0.4), 0 0 40px rgba(0, 168, 232, 0.2);
        margin-bottom: 1rem;
    }

    .profile-container {
        margin-bottom: 0.5rem;
    }

    .profile-container::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 1.5px;
    }

    /* Hero Title - Móvil */
    #typing-text {
        font-size: 1.8rem !important;
        margin-bottom: 0.8rem;
        margin-top: 0.5rem;
    }

    /* Hero Description - Móvil */
    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .hero-description br {
        display: block;
        content: "";
        margin-bottom: 0.3rem;
    }

    /* Badges - Móvil */
    .hero-badges {
        gap: 0.8rem;
        margin: 1.2rem 0 1.5rem;
        flex-wrap: wrap;
    }

    .badge {
        min-width: 90px;
        padding: 1rem 1.2rem;
        gap: 0.3rem;
    }

    .badge i {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }

    .badge strong {
        font-size: 1.3rem;
    }

    .badge span {
        font-size: 0.85rem;
    }

    .badge small {
        font-size: 0.7rem;
    }

    /* Hero Buttons - Móvil */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
        margin-top: 1.2rem;
    }

    .hero-buttons .btn {
        width: 100%;
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
        justify-content: center;
    }

    /* Social Icons - Móvil */
    .social-icons {
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* Landscape Móvil - Foto ajustada */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-video {
        min-height: auto;
        padding: 80px 0 40px;
    }

    .profile-pic {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 0.5rem;
    }

    #typing-text {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem;
    }

    .hero-description {
        font-size: 0.85rem !important;
    }

    .hero-badges {
        gap: 0.5rem;
        margin: 0.8rem 0;
    }

    .badge {
        min-width: 70px;
        padding: 0.7rem 1rem;
    }

    .badge i {
        font-size: 1rem;
    }

    .badge strong {
        font-size: 1.1rem;
    }

    .hero-buttons {
        margin-top: 0.8rem;
    }
}

/* Asegurar visibilidad de elementos en todos los tamaños */
@media (max-width: 375px) {
    .profile-pic {
        width: 120px !important;
        height: 120px !important;
    }

    #typing-text {
        font-size: 1.6rem !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
    }

    .badge {
        min-width: 85px;
        padding: 0.9rem 1rem;
    }
}