@media (min-width: 1313px) {
    .card {
        width: 55vw !important;
    }
    .botonesAppyPrototipo {
        width: 90%;
    }
    .imagenMapamundi img {
        height: 45vh;
    }
}

@media (max-width: 1313px) {
    .letrasMapamundi button {
        font-size: 16px;
    }
}

@media (max-width: 1137px) {
    .letrasMapamundi button {
        font-size: 20px;
    }
    .card {
        width: 80vw;
        height: 55vh;
    }
}

@media (max-width: 1001px) {
    .imagenMapamundi img {
        height: 40vh;
    }
}

@media (max-width: 868px) {
    .imagenMapamundi img {
        height: 30vh;
    }
    .imagenMovieList img {
        height: 40vh;
    }
    .botonesAppyPrototipo {
        width: 100%;
    }
}

@media (max-width: 800px) {
    header {
        justify-content: center;
    }
    .cabecera {
        font-size: 22px;
        margin: 0px 40px;
    }
}

@media (max-width: 780px) {
    .imagenMapamundi img,
    .imagenPlansLanding img,
    .imagenMovieList {
        display: none;
    }

    .imagenMapamundi{
        width: 0%;
    }
    .letrasMapamundi,
    .letrasPlansLanding,
    .letrasMovieList {
        width: 100%;
    }
    
    .letrasMovieList {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .botonesAppyPrototipo button {
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .nombreTitulo {
        font-size: 30px;
    }
    .inicio > h2,
    .desarrolloMovil > h2 {
        font-size: 20px;
    }
    .sobreMi h2 {
        padding: 0px 50px;
    }
    .sobreMi p {
        padding: 0;
    }
    .botonMovil {
        display: block;
        width: 200px;
        height: 45px;
        font-family: 'Inter';
        border-radius: 50px;
        background-color: #0F172A;
        font-size: 18px;
        border: white 1px solid;
        color: white;
        transition: 0.3s;
        margin-top: 40px;
    }
    .botonMovil a {
        text-decoration: none;
        color: white;
    }
    .botonMovil:hover {
        background-color: #fff;
        color: #0F172A;
    }
    .button,
    .habilidadesTecnicas,
    .tituloMalSituado {
        display: none;
    }
    .card {
        width: 80vw;
        height: 60vh;
    }
    footer .footerContent {
        flex-direction: column;
        gap: 20px;
    }
    footer .footerContent .socials img {
        height: 35px;
    }
}

@media (max-width: 550px) {
    .sobreMi h2 {
        width: 110%;
        padding: 0;
    }
    .sobreMi p {
        width: 100%;
    }
    .scroll-to-top {
        right: -100px;
    }
    .contacto{
        height: auto;
    }
}

@media (max-width: 500px), (min-width: 0px) and (max-height: 425px) {
    header {
        display: none;
    }
    .inicio {
        margin-top: 30px;
    }
    .cabecera {
        font-size: 22px;
    }
    .nombreTitulo {
        width: 60vw;
        margin-top: -100px;
    }
    .bola {
        bottom: 150px !important;
    }
    body, html {
        background-size: 15%;
    }
}

@media (max-width: 480px) {
    .card {
        width: 70vw;
        height: 60vh;
    }
}

@media (max-width: 425px) {
    
    .imagenMapamundi img {
        height: 40vh !important;
    }
    .letrasMapamundi {
        margin-top: 0px;
        height: 100%;
        margin-right: 0px;
    }
    .card p {
        padding-bottom: 0px;
    }
    .letrasMovieList p {
        display: none;
    }
    .letrasMovieList span {
        display: block;
        width: 80%;
        padding: 15px 0 10px;
    }
    .letrasMovieList {
        margin-top: 0px;
    }

    .logoPlans{
        height: 20px;
    }
}

@media (max-height: 800px) {
    .bola {
        height: 0;
        width: 0;
    }
    .card {
        height: auto !important;
    }
    .sobreMi {
        height: auto;
    }
    .contacto {
        height: auto;
    }
}