* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #f5f7fa;
    color: #333
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: white;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08)
}

header a {
    text-decoration: none;
    color: #333
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.25rem;
    font-weight: bold
}

.logo img {
    height: 70px;
    border-radius: 50%
}

nav a {
    margin-left: 18px;
    padding: 10px 16px;
    border-radius: 14px;
    transition: .3s
}

nav a:hover {
    background: #3f51b5;
    color: white
}

.centro {
    max-width: 1100px;
    margin: 40px auto;
    background: white;
    padding: 50px;
    border-radius: 28px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08)
}

.centro img {
    width: 180px;
    border-radius: 50%;
    margin-bottom: 20px
}

.boton {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: #e74c3c;
    color: white;
    text-decoration: none;
    border-radius: 16px
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 30px auto
}

.card {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08)
}

footer {
    margin-top: 40px;
    background: white;
    padding: 20px;
    text-align: center;
    border-radius: 20px 20px 0 0
}

.mate {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 110%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mate:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.idiomas {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 110%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.idiomas:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cien {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 110%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cien:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.deportes {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 110%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deportes:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.grados {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 90%;
    margin-top: 20%;
    margin-left: 107%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grados:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.festividades {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 90%;
    margin-top: 20%;
    margin-left: 107%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.festividades:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.nemotec {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 70%;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 100px;
    margin-left: 108%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nemotec:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.psico {
    background: white;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 70%;
    text-align: center;
    margin-top: 70px;
    margin-left: 108%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.psico:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.mates {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px;

}

.idio {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 16px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.ciencias {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.depo {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.grad {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.fest {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.nemo {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.psicolo {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #140b42;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 16px
}

.matem {
    height: 170px;
    margin-left: 5px;
}

.idioma {
    height: 170px;
    margin-left: 5px;
}

.cienciass {
    height: 220px;
    margin-top: -30px;
    margin-right: 5px;
}

.deport {
    height: 150px;
    margin-left: 5px;
}

.gradoo {
    height: 200px;
    margin-left: 5px;
    margin-bottom: 20%;
    margin-top: -12%;
}

.festiv {
    height: 200px;
    margin-left: 5px;
    margin-bottom: 20%;
    margin-top: -12%;
}

.año2020 {
    margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.carruselx2020 {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 40px;
}
.contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.texto {
    width: 400px;
    text-align: left;
}

.texto h1 {
    font-size: 40px;
    margin-bottom: 5px;
}

.texto h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.texto p {
    font-size: 18px;
    line-height: 1.6;
}
.x20201 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x20201:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x20202 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x20202:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año2022 {
    margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.carruselx2022 {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.año221 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año221:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año222 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año222:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año223 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año223:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año224 {
    height: 350px;
    margin-left: 1%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año224:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año225 {
    height: 350px;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año225:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año226 {
    height: 350px;
    margin-left: 1%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año226:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año227 {
    height: 350px;
    margin-left: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año227:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año228 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año228:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año229 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año229:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año2210 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.año2210:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año2023 {
    margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.carruselx2023 {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.x231 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x231:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x232 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x232:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x233 {
    height: 350px;
    margin-right: 2%;
    margin-left: 4%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x233:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x234 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x234:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x235 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x235:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x236 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x236:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x237 {
    height: 350px;
    margin-right: 2%;
    margin-left: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x237:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x238 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    margin-right: 4%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x238:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x239 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x239:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2310 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2310:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2311 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2311:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2312 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2312:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2313 {
    height: 350px;
    margin-left: 4%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2313:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2314 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    margin-right: 4%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2314:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2315 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2315:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2316 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2316:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2317 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2317:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2318 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2318:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2319 {
    height: 350px;
    margin-left: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2319:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x2320 {
    height: 350px;
    margin-left: 2%;
    margin-right: 3%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2320:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(209, 164, 164, 0.2);
}

.x2321 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x2321:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.año2024 {
     margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.carruselx2024 {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.x241 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x241:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x242 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x242:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.x243 {
    height: 350px;
    margin-left: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.x243:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.iañ2025 {
     margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}

.carruseli {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}

.i1 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i1:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i2 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i2:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i3 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i3:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i4 {
    height: 350px;
    margin-right: 2%;
    margin-left: 4%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i4:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i5 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i5:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i6 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i6:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i7 {
    height: 350px;
    margin-right: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i7:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i8 {
    height: 350px;
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i8:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.i9 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i9:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.fesaño2025 {
  margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}
.carruselh {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.f2 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f2:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f3 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f3:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.f6 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f6:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.navi25{
      margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}
.carruseln {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.f4 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f4:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f5 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f5:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.visiu25{
      margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}
.carruselvi {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.f7 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f7:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f8 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f8:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f9 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f9:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f10 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f10:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.fam25{
      margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}
.carruselfa {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.f11 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f11:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.festiviaño2026{
       margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center; 
}
.carruselx26 {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.f12 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f12:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f13 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f13:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f14 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f14:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f15 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f15:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.f16 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.f16:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/*DEPORTES*/

.daño2025 {
    margin: 50px auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.daño2025 h1 {
    font-size: 30px;
    color: #444;
    margin-bottom: 25px;
}

.carruseld {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}

.imagen {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    display: none;
}

.imagen:first-child {
    display: block;
}

.imagen:target {
    display: block;
}

.imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anterior,
.siguiente {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 45px;
    height: 45px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.5);
    color: white;

    font-size: 25px;
    text-decoration: none;

    border-radius: 50%;

    z-index: 10;
}

.anterior {
    left: 25px;
}

.siguiente {
    right: 25px;
}

.anterior:hover,
.siguiente:hover {
    background: rgba(0, 0, 0, 0.8);
}

.de1 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.de1:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.de2 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.de2:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.de3 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.de3:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/*MATEMATICAS*/

.maño2025 {
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    width: 90%;
    text-align: center;
}

.maño2025 h2 {
    font-size: 30px;
    margin-bottom: 25px;
    color: #444;
}

.carruselm {
    width: 600px;
    height: 500px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}

.titulo-matematicas {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 40px;
    color: #333;
}

.galeria {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.galeria img {
    height: 350px;
    width: auto;

    border-radius: 20px;

    object-fit: cover;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

.galeria img:hover {
    transform: scale(1.05);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

.m1 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m1:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.m2 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m2:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.m3 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m3:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.m4 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m4:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gaño2025 {
    margin-top: 7%;
    background: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    width: 100%;
    height: 110%;
    text-align: center;
}
.carruselg {
    width: 700px;
    height: 600px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-left: 20px;
}
.g1 {
    height: 350px;
    margin-left: 3%;
    margin-top: 3%;
    border-radius: 8%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.g1:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}