body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#d9d9da}

/* HEADER */
header{background:#011151;color:white;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:bold}
.logo img{width:60px;height:60px;border-radius:6px;object-fit:cover}

/* MENU */
nav ul{list-style:none;margin:0;padding:0;display:flex}
nav ul li{position:relative}
nav ul li a{display:block;padding:12px 18px;color:white;text-decoration:none}
nav ul li:hover{background:#ee0404}

/* SUBMENUS */
nav ul li ul{display:none;position:absolute;background:#0370c3;top:100%;left:0;flex-direction:column;min-width:170px}
nav ul li:hover ul{display:flex;z-index: 9999;}

/* MOBILE MENU */
.menu-toggle{display:none;font-size:24px;cursor:pointer}

/* LAYOUT */
.container{display:flex;gap:20px;padding:20px}
.main{flex:3}
.sidebar{flex:1;background:rgb(112, 155, 240);border-radius:10px;padding:20px}

/* CAROUSEL */
.carousel{width:100%;height:320px;overflow:hidden;border-radius:10px;position:relative}
.carousel img{width:100%;height:320px;object-fit:cover;display:none}
.carousel img.active{display:block}


/* BOTONES REDONDOS */
.circle-grid{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:nowrap;
gap:20px
}

.circle-btn{
text-align:center;
flex:1;
cursor:pointer;
transition:.3s
}

.circle-btn:hover{
transform:translateY(-8px)
}

.circle-btn img{
width:100px;
height:100px;
object-fit:cover;
border-radius:50%;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
border:6px solid rgb(244, 144, 5)
}

.circle-btn h3{
margin-top:12px;
color:#03068d
}


/* INFO BOXES */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:10px}
.info-box{background:rgb(134, 147, 71);padding:25px;border-radius:10px;text-align:center;box-shadow:0 2px 8px rgb(228, 233, 234)}
.info-box img{font-size:32px;color:#101010;margin-bottom:10px;}

/* SQUARE BUTTONS */
.square-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:20px}
.square-btn{background:#011b3d;color:white;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:.3s}
.square-btn img{display:block;font-size:26px;margin-bottom:8px}
.square-btn:hover{background:#f3a909;transform:translateY(-3px)}

/* FOOTER */
footer{background:#011746;color:white;margin-top:10px;padding:40px 20px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:25px}
.footer-bottom{text-align:center;margin-top:25px;color:#bbb;font-size:14px}

/* RESPONSIVE */
@media(max-width:768px){
nav ul{display:none;flex-direction:column;background:#111827;width:100%}
nav ul.show{display:flex}
.menu-toggle{display:block}
.container{flex-direction:column}
.round-buttons{flex-wrap:wrap;gap:15px}
}


/* Fondo oscuro */
#fondoPopup{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Ventana */
#popup{
    background:rgb(239, 213, 164);
    width:600px;
    padding:25px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    animation: aparecer 0.5s ease;
}

#popup h2{
    margin-top:0;
}

#popup button{
    background:#007BFF;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
    margin-top:15px;
}

#popup button:hover{
    background:#0056b3;
}

@keyframes aparecer{
    from{
        transform: scale(0.7);
        opacity:0;
    }
    to{
        transform: scale(1);
        opacity:1;
    }
}


/* CONTENEDOR */
.marquesina {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  color: white;
  padding: 12px 0;
  font-weight: bold;
  position: relative;
}

/* TEXTO ANIMADO */
.marquesina-texto {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: mover 25s linear infinite;
  font-size: 18px;
}

/* ANIMACIÓN */
@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* DESARROLLADOR */
.developer{
  background-color: #111827;

  border-top: 1px solid rgba(255,255,255,0.08);

  padding-top: 15px;

  padding-bottom: 15px;

  font-size: 13px;

  color: #64748b;
}

/* LINK */
.developer a{
  color: #8e8f8f;

  text-decoration: none;

  transition: 0.3s;
}

/* HOVER */
.developer a:hover{
  color: rgb(6, 245, 213);
}