.hero {
    background-size: cover;
    background-position: center center;
    text-align: center;
    padding: 20px;
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 65vh;
    border-radius: 20px;
    box-shadow: 0 0 30px var(--colorprimaryheader);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero h2 {
    font-family: 'Comic Sans MS', Arial, sans-serif !important;
    color: #fff;
    font-size: 1.4em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    z-index: 3;
}

.hero h2.MensajeBienvenida {
    font-size: 2em;
    line-height: 1.6em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 90%;
    max-width: 600px;
    /* Glassmorphims */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 5px;
    /* ---------------- */
}

.hero p {
    font-family: Arial, sans-serif !important;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    font-size: 1.5em;
    margin-bottom: 1.5em;
    font-weight: bold;
    background-color: var(--colorprimaryheader);
    border-radius: 10px;
    padding: 5px;
}

.hero .hero-content img {
    z-index: 999;
    max-width: 200px;
    background-color: transparent;
    position: relative;
}

.hero .hero-content .btninscribete {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    margin-bottom: 10px;
    /* Glassmorphims */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* ---------------- */
}

.hero .hero-content .btninscribete h2:nth-child(2) {
    margin-bottom: 10px;
}

.cta-button {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    line-height: 0.5em;
    display: inline-block;
    background-color: #ffcc00;
    color: #444;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.8em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background-color: #ffb700;
    transform: scale(1.05);
    text-decoration: none;
}

#fachada .fachadacontenedor {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

.fachadacontenedor .fachadacontenido {
    display: flex;
    flex-direction: column;
    width: 400px;
    align-items: center;
    margin: 10px auto;
    transition: all 0.3s ease;
}

.fachadacontenedor .fachadacontenido h2 {
    font-family: 'Comic Sans MS', casual, Arial, sans-serif;
    color: #3388c4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.1em;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 0.7em;
}

.fachadacontenedor .fachadacontenido h2::before {
    content: "\1F3F0";
    position: relative;
    font-size: 1.5em;
    opacity: 1;
    margin-right: 10px;
}

.fachadacontenedor .fachadacontenido h2 i {
    font-size: 1.5em;
}

.fachadacontenedor .fachadacontenido p {
    font-size: 1.2em;
    color: var(--colortexto);
    padding: 18px 16px;
    line-height: 1.5;
    position: relative;
    width: 90%;
    margin: 0 auto;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

.fachadacontenedor .fachadaimagen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

.fachadacontenedor .fachadaimagen.noche {
    display: none;
}

body.dark .dia {
    display: none;
}

body.dark .fachadacontenedor .fachadaimagen.noche {
    display: flex;
}

.fachadacontenedor .fachadaimagen img {
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
    box-shadow: 0 4px 10px var(--colorprimaryheader);
}

#metodologia {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 32px 5px 28px 5px;
    margin: 20px auto;
    width: 90%;
    position: relative;
    overflow: hidden;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

#metodologia h2 {
    font-family: 'Comic Sans MS', casual, Arial, sans-serif;
    color: #ff6347;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.1em;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 0.7em;
}

#metodologia h2::before {
    content: "\1F308";
    position: relative;
    font-size: 1.5em;
    opacity: 1;
    margin-right: 10px;
}

#metodologia p {
    font-size: 1.2em;
    color: var(--colortexto);
    padding: 18px 16px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    position: relative;
    width: 40%;
    margin: 0 auto;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

#metodologia::after {
    content: "\1F31F";
    position: absolute;
    bottom: 18px;
    right: 24px;
    font-size: 2.2em;
    opacity: 1;
}

#centrosinteres {
    padding: 32px 5px 28px 5px;
    margin: 10px auto;
    width: 90%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

#centrosinteres h2 {
    font-family: 'Comic Sans MS', casual, Arial, sans-serif;
    color: #0095b0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.1em;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 0.7em;
}

body.dark #centrosinteres h2 {
    color: #00d9ff;
}

#centrosinteres h2::before {
    content: "\1F4D6";
    position: relative;
    font-size: 1.5em;
    opacity: 1;
    margin-right: 10px;
}

.centrosinterescontenedor {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.centrosinterescontenedor .centrointerescontenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;
    width: 300px;
    padding: 20px;
    transition: all 0.3s ease;
    /* Glassmorphims */
    background: rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

.centrosinterescontenedor .centrointerescontenido .titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 0.7em;
}

.centrosinterescontenedor .centrointerescontenido .titulo i {
    margin-right: 10px;
    font-size: 1.5em;
}

.centrosinterescontenedor .centrointerescontenido .titulo h3 {
    font-family: 'Comic Sans MS', casual, Arial, sans-serif;
    font-size: 2em;
}

.centrosinterescontenedor .centrointerescontenido:nth-child(1) .titulo {
    color: #4d47ff;
}

.centrosinterescontenedor .centrointerescontenido:nth-child(2) .titulo {
    color: #ff0000;
}

.centrosinterescontenedor .centrointerescontenido:nth-child(3) .titulo {
    color: #00ff00;
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4) .titulo {
    color: var(--colortexto);
}

.centrosinterescontenedor .centrointerescontenido .contenido {
    position: relative;
    width: 90%;
    margin: 0 auto;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

.centrosinterescontenedor .centrointerescontenido .contenido p {
    font-size: 1.3em;
    padding: 18px 16px;
    color: var(--colortexto);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.centrosinterescontenedor .centrointerescontenido:nth-child(1):hover {
    background: rgba(0, 0, 255, 0.1);
    transform: scale(1.03) rotate(-2deg);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(1).hover {
    background: rgba(0, 0, 255, 0.1);
    transform: scale(1.03) rotate(-2deg);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(2):hover {
    background: rgba(255, 0, 0, 0.1);
    transform: scale(1.03);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(2).hover {
    background: rgba(255, 0, 0, 0.1);
    transform: scale(1.03);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(3):hover {
    background: rgba(0, 255, 0, 0.1);
    transform: scale(1.03) rotate(2deg);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(3).hover {
    background: rgba(0, 255, 0, 0.1);
    transform: scale(1.03) rotate(2deg);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4):hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.03);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4).hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.03);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4):hover .titulo {
    color: var(--colortextoinvertido);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4).hover .titulo {
    color: var(--colortextoinvertido);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4):hover .contenido p {
    color: var(--colortextoinvertido);
}

.centrosinterescontenedor .centrointerescontenido:nth-child(4).hover .contenido p {
    color: var(--colortextoinvertido);
}

body.dark .centrosinterescontenedor .centrointerescontenido:nth-child(4):hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.03);
}

body.dark .centrosinterescontenedor .centrointerescontenido:nth-child(4).hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.03);
}

.centrosinterescontenedor .elcosmos {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 200px;
}

.estrella {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--colortexto);
    border-radius: 50%;
    z-index: -1;
    transition: opacity 0.6s;
}

.elcosmos:hover .estrella {
    background: var(--colortextoinvertido);
}

.estrella.desaparecer {
    opacity: 0;
}

@keyframes parpadeo {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

#niveles {
    padding: 32px 5px 28px 5px;
    margin: 10px auto;
    width: 90%;
    position: relative;
    overflow: hidden;
    /* Glassmorphims */
    background: var(--fondoglassmorphims);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* ---------------- */
}

#niveles h2 {
    font-family: 'Comic Sans MS', casual, Arial, sans-serif;
    color: #ff0000;
    font-size: 2.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 0.7em;
}

#niveles h2::before {
    content: "\1F37C";
    position: relative;
    font-size: 1.5em;
    opacity: 1;
    margin-right: 10px;
}

#niveles h2 i {
    font-size: 1.5em;
}

@media screen and (max-width: 1200px) {
    .hero {
        height: 30vh;
    }

    .hero .hero-content h2 {
        font-size: 1em;
        margin: 0 auto;
    }

    .hero h2.MensajeBienvenida {
        font-size: 1.5em;
        width: 90%;
    }

    .hero .hero-content .btninscribete {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

    .hero p {
        font-size: 1.2em;
    }

    .cta-button {
        font-size: 1.5em;
    }

    #metodologia p {
        width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .hero {
        width: 90%;
        height: 40vh;
    }

    .hero .hero-content h2 {
        font-size: 0.8em;
        width: 300px;
        margin: 0 auto;
        padding: 0;
    }

    .hero h2.MensajeBienvenida {
        font-size: 1.2em;
        padding: 10px;
    }
}

@media screen and (max-width: 310px) {
    .hero .hero-content h2 {
        width: 90%;
    }

    .hero h2.MensajeBienvenida {
        width: 90%;
    }

    .hero .hero-content .btninscribete {
        width: 90%;
    }
}