*{

  margin:0;
  padding:0;

  box-sizing:border-box;

  font-family:
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;

  font-weight:400;

}

h1,h2,h3{

  font-weight:600;

  letter-spacing:.5px;

}

p,
small,
span,
a{

  font-weight:300;

}

body{
  background:#09090b;
  color:white;
}

.banner{
  height:250px;
  background-image:url("../imagenes/fondo/banner.jpg");
  background-size:cover;
  background-position:center;
}

.overlay{
  width:100%;
  height:100%;
  background:rgba(0,0,0,.7);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.overlay h1{
  font-size:3rem;
font-weight:500;
}

.contenedor{
  display:flex;
  min-height:calc(100vh - 250px);
}

.sidebar{
  width:25%;
  background:#111827;
  padding:20px;
  overflow-y:auto;
}

.sidebar h2{
  margin-bottom:20px;
}

.autor-item{
  display:flex;
  align-items:center;
  gap:10px;

  background:#1f2937;
  padding:10px;
  border-radius:15px;

  margin-bottom:15px;

  cursor:pointer;

  transition:.3s;
font-weight:300;    
}

.autor-item:hover{
  background:#374151;
}

.autor-item img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}

.contenido{
  width:75%;
  display:flex;
  flex-direction:column;
}

.superior{
  display:flex;
  gap:20px;
  padding:20px;
  border-bottom:1px solid #333;
}

.inferior{
  display:flex;
  gap:20px;
  padding:20px;
}

.card{
  background:#18181b;
  border-radius:20px;
  padding:20px;
  flex:1;
}

.perfil{
  text-align:center;
}

.perfil img{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:15px;
}

.redes{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin-top:20px;

}

.redes a{

  background:linear-gradient(
    180deg,
    #27272a,
    #18181b
  );

  padding:14px 18px;

  border-radius:14px;

  color:white;

  text-decoration:none;

  transition:.3s;

  border:1px solid #3f3f46;

  font-size:15px;

}

.redes a:hover{

  background:#3f3f46;

  transform:translateX(5px);

}

.obra{
  background:#27272a;
  padding:12px;
  border-radius:10px;
  margin-top:10px;
}

.eventos{
  width:35%;
}

.calendario{
  width:65%;
}

.evento{
  background:#27272a;
  padding:15px;
  border-radius:10px;
  margin-top:15px;
}

.calendario-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  margin-top:20px;
}

.dia{
  background:#18181b;
  border:1px solid #333;
  border-radius:10px;

  height:70px;

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

.dia.evento-dia{
  background:#7f1d1d;
  border:1px solid red;
}

@media(max-width:1000px){

  .contenedor,
  .superior,
  .inferior{
    flex-direction:column;
  }

  .sidebar,
  .contenido,
  .eventos,
  .calendario{
    width:100%;
  }

}

.portada{

  width:140px;

  height:210px;

  object-fit:cover;

  border-radius:15px;

  margin-bottom:15px;

  display:block;

  margin-left:auto;

  margin-right:auto;

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

}

.boton-obra{

  display:inline-block;

  margin-top:10px;

  padding:10px 15px;

  background:#991b1b;

  color:white;

  text-decoration:none;

  border-radius:10px;

  transition:.3s;

}

.boton-obra:hover{

  background:#dc2626;

}

.link-evento{

  color:white;

  text-decoration:none;

  transition:.3s;

}

.link-evento:hover{

  color:#f87171;

}

#bioAutor{

  margin-top:15px;

  line-height:1.9;

  font-size:15px;

  text-align:justify;

  color:#d4d4d8;

  background:linear-gradient(
    180deg,
    #27272a,
    #18181b
  );

  padding:20px;

  border-radius:20px;

  min-height:350px;

  overflow-y:auto;

  box-shadow:0 0 15px rgba(0,0,0,.35);

}

.footer{

  background:#111827;

  border-top:1px solid #27272a;

  text-align:center;

  padding:30px 20px;

  margin-top:20px;

}

.footer p{

  color:#fafafa;

  font-size:15px;

  margin-bottom:10px;

}

.footer span{

  color:#a1a1aa;

  font-size:13px;

}

.eventos-globales{

  background:#111827;

  padding:30px;

  border-top:2px solid #27272a;

}

.eventos-globales h2{

  margin-bottom:25px;

  font-size:28px;

}

#listaEventosGlobales{

  display:flex;

  flex-direction:column;

  gap:15px;

}

.evento-global{

  background:#1f2937;

  padding:20px;

  border-radius:15px;

  transition:.3s;

}

.evento-global:hover{

  background:#374151;

}

.alerta-hoy{

  background:#991b1b;

  padding:15px;

  border-radius:15px;

  margin-bottom:25px;

  font-weight:bold;

  text-align:center;

  animation:pulse 2s infinite;

}

@keyframes pulse{

  0%{
    opacity:1;
  }

  50%{
    opacity:.6;
  }

  100%{
    opacity:1;
  }

}

.publicaciones{

  background:#18181b;

  margin:20px;

  padding:25px;

  border-radius:20px;

}

.publicaciones h2{

  margin-bottom:20px;

}

#listaPublicaciones{

  display:flex;

  flex-wrap:wrap;

  gap:15px;

}

.publicacion{

  background:#27272a;

  padding:20px;

  border-radius:15px;

  min-width:220px;

  flex:1;

}

.publicacion h3{

  margin-bottom:15px;

}

.publicacion a{

  display:inline-block;

  padding:10px 15px;

  background:#991b1b;

  border-radius:10px;

  text-decoration:none;

  color:white;

  transition:.3s;

}

.publicacion a:hover{

  background:#dc2626;

}

.youtube-card{

  display:flex;

  flex-direction:column;

  gap:15px;

}

.youtube-thumb{

  width:100%;

  height:180px;

  object-fit:cover;

  border-radius:15px;

}

.youtube-info{

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.preview-publicacion{

  width:100%;

  height:220px;

  object-fit:cover;

  border-radius:15px;

  margin-bottom:15px;

}

.publicacion{

  background:#27272a;

  padding:20px;

  border-radius:20px;

  margin-top:20px;

}