/* FUENTE MODERNA */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* RESET */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BODY */
body {
  font-family:'Poppins', sans-serif;
  background:#f4f6f8;
  color:#333;
}

/* CONTAINER PRINCIPAL */
#container {
  max-width:1100px;
  margin:40px auto;
  background:white;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
  border-radius:8px;
  overflow:hidden;
  padding:0;
}

/* HEADER */
#header_wrapper img {
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  border-bottom:3px solid #2563eb; /* línea azul de estilo club */
}

/* LAYOUT */
#wrapper {
  display:flex;
  flex-wrap:wrap;
  min-height:500px;
}

/* SIDEBAR */
#sidebar {
  flex:0 0 240px;
  background:#111827;
  padding:20px;
}

/* NAVIGATION */
#navigation ul {
  list-style:none;
  margin:0;
  padding:0;
}

#navigation li {
  border-bottom:1px solid rgba(255,255,255,0.1);
}

#navigation a {
  display:block;
  padding:12px 20px;
  color:white;
  text-decoration:none;
  font-weight:500;
  transition:all 0.3s ease;
}

#navigation a:hover {
  background:#2563eb;
  padding-left:30px;
}

/* SUBMENUS */
ul.mainNav2 a { padding-left:30px; font-size:14px; }
ul.mainNav3 a { padding-left:50px; font-size:13px; }

/* SIDEBAR CONTENT */
#sidebar_content, var {
  color:blue;
  font-size:14px;
  line-height:1.5;
}

/* CONTENT */
#content {
  flex:1;
  background:white;
  padding:40px;
}

#content .gutter {
  padding:0;
}

/* TARJETAS */
.card {
  background:white;
  padding:25px;
  border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  margin-bottom:20px;
}

/* VÍDEO RESPONSIVO */
iframe, video {
  max-width:100%;
  height:auto;
  border-radius:8px;
  margin-bottom:20px;
}

/* ICONOS REDES */
#footer img {
  width:60px;
  height:60px;
  margin:10px;
  transition: transform 0.3s ease;
}
#footer img:hover {
  transform:scale(1.1);
}

/* FOOTER */
#footer {
  background:#111827;
  color:white;
  text-align:center;
  padding:30px 20px;
}

/* RESPONSIVE */
@media(max-width:900px){
  #wrapper {
    flex-direction:column;
  }
  #sidebar {
    width:100%;
  }
  #navigation a {
    text-align:center;
  }
  #content {
    padding:25px;
  }
}