*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    list-style:none;
}
body{
    font-family:"Poppins",sans-serif;
    background:#192335;
    color:white;
    overflow-x:hidden;
}
h1,h2,h3,h4{
    font-weight:600;
}
header{
    position:sticky;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 50px;
    background:rgba(24,35,133,.85);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(255,255,255,.15);
    z-index:1000;
}
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}
.logo img{
    width:60px;
    height:60px;
    border-radius:50%;
    border:2px solid white;
    transition:.4s;
}
.logo img:hover{
    transform:rotate(10deg) scale(1.1);
}
.logo h1{
    font-size:24px;
    color:white;
}
.logo span{
    color:#b6d8ff;
    font-size:13px;
}
nav{
    display:flex;
    gap:15px;
}
nav a{
    display:flex;
    align-items:center;
    gap:8px;
    color:white;
    text-decoration:none;
    padding:12px 18px;
    border-radius:10px;
    transition:.3s;
}
nav a:hover{
    background:#3b82f6;
    transform:translateY(-3px);
}
nav i{
    font-size:16px;
}
.acciones{
    display:flex;
    align-items:center;
    gap:20px;

}
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

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

.logo h1{
    font-size:22px;
}
nav{
    display:flex;
    gap:30px;
}
nav a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

nav a:hover{
    color:#66d1ff;
}
.switch{
    margin-left:25px;
}

.checkbox{
    display:none;
}

.slider{
    width:60px;
    height:30px;
    background:#ccc;
    border-radius:30px;
    cursor:pointer;
    position:relative;
    transition:.3s;
}

.slider::before{
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    top:2px;
    left:2px;
    border-radius:50%;
    background:url("spain4.png");
    background-size:cover;
    transition:.3s;
}

.checkbox:checked + .slider{
    background:#2196F3;
}

.checkbox:checked + .slider::before{
    transform:translateX(30px);
    background:url("usa3.png");
    background-size:cover;
}
.titulo,
.titulo1{
    text-align:center;
    margin:50px 0;
    font-size:35px;
}
.contenido,
.contenido1,
.alfa{
    padding:70px 0;
}
.contenido,
.alfa{
    background:rgba(13,29,49,.9);
}
.fila{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    padding:0 20px;
}
.texto,
.texto1{
    flex:1;
    line-height:1.8;
    text-align:justify;
}
.imagen1,
.imagen2{
    flex:1;
    text-align:center;
}

.imagen1 img,
.imagen2 img{
    width:320px;
    max-width:100%;
}
.botones{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
}
.btn{
    background:white;
    color:#0d1d31;
    padding:12px 25px;
    border-radius:8px;
    text-decoration:none;
    transition:.3s;
}
.btn:hover{
    transform:translateY(-4px);
}
.btn-secundario{
    background:transparent;
    color:white;
    border:2px solid white;
}

.btn-secundario:hover{
    background:white;
    color:#0d1d31;
}
.alfabeto{
    color:white;
    text-decoration:none;
    font-size:22px;
    transition:.3s;
}

.alfabeto:hover{
    color:#66d1ff;
}
.footer{
    background:#030912;
    padding:70px 0;
}
.contenedor{
    width:90%;
    max-width:1200px;
    margin:auto;
}
.footer-row{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.footer-links{
    width:250px;
}
.footer-links h4{
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:2px solid #00c3ff;
}
.footer-links ul li{
    margin-bottom:12px;
}
.footer-links a{
    color:white;
    text-decoration:none;
    transition:.3s;
}
.footer-links a:hover{
    color:#66d1ff;
    padding-left:6px;
}
.social-link{
    display:flex;
    gap:10px;
    margin-top:20px;
}
.social-link a{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0d1d31;
    color:white;
    transition:.3s;
}
.social-link a:hover{
    background:#3e8cff;
}
.estrellas{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}
.estrella{
    position:absolute;
    background:white;
    border-radius:50%;
    box-shadow:0 0 10px white;
    animation:caer linear infinite;
}
@keyframes caer{
    0%{
        transform:translateY(-100px);
        opacity:1;
    }
    100%{
        transform:translateY(110vh);
        opacity:0;
    }
}
@media(max-width:900px){
    header{
        flex-direction:column;
        gap:20px;
    }
    nav{
        flex-wrap:wrap;
        justify-content:center;
    }
    .fila{
        flex-direction:column;
        text-align:center;
    }
    .texto,
    .texto1{
        width:100%;
    }
    .imagen1,
    .imagen2{
        width:100%;
    }
    .botones{
        flex-direction:column;
        align-items:center;
    }
    .footer-row{
        flex-direction:column;
        gap:40px;
    }
}
.timeline{
    width:100%;
    padding:80px 20px;
    background:#0d1d31;
}
.timeline-container{
    position:relative;
    max-width:1200px;
    margin:auto;
}
.timeline-container::after{
    content:"";
    position:absolute;
    width:6px;
    background:#3b82f6;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-3px;
}
.evento{
    position:relative;
    width:50%;
    padding:20px 40px;
}
.evento::after{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    background:white;
    border:5px solid #3b82f6;
    border-radius:50%;
    top:35px;
    z-index:2;
}
.izquierda{
    left:0;
}
.derecha{
    left:50%;
}
.izquierda::after{
    right:-16px;
}
.derecha::after{
    left:-16px;
}
.contenido-evento{
    background:white;
    color:#0d1d31;
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    transition:.3s;
}
.contenido-evento:hover{
    transform:translateY(-8px);
}
.contenido-evento h3{
    color:#2563eb;
    margin-bottom:10px;
    font-size:28px;
}
.contenido-evento h4{
    margin-bottom:12px;
}
.contenido-evento p{
    line-height:1.7;
}
@media(max-width:768px){
.timeline-container::after{
left:20px;
}
.evento{
width:100%;
padding-left:60px;
padding-right:20px;
left:0;
}
.derecha{
left:0;
}
.izquierda::after,
.derecha::after{
left:8px;
}
}