/*COLORES*/
:root {
  --dorado1: #806000;
  --dorado2: #cc9900;
  --dorado3: #ffc61a;
  --dorado4: #ffd966;
  --dorado5: #ffecb3;
  --morado1: #660066;
  --morado2: #b300b3;
  --morado3: #ff00ff;
  --morado4: #ff80ff;
  --morado5: #ffccff;
  }
/*BASE usease movil first*/
html {
  background-color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  color: var(--morado1);

}

body { 
 /* overflow: hidden; */
 height: 100dvh;
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
 box-sizing: border-box; /* incluye el padding y el border dentro del widt y el height*/

}

/*HEADER Y FOOTER*/
.page_header {
  background-color: rgba(179,0,179,0.7)/*var(--morado2)*/;
  backdrop-filter: blur(6px);
  border: 2px solid var(--morado1);
  border-radius: 5px;
  justify-content: center;
  margin: 0;
  height: 30px;
  width: 96%;
  position: fixed;
  display: flex;
  align-items: center;
  padding: 0;
  top: 0;
  left: 2%;
  right: 2%;
  z-index:9999;

}

.header_icon {
  height: 100%;
  width: auto; 

}

.page_footer {
  background-color: var(--morado2);
  color: var(--dorado5);
  border: 2px solid var(--morado1);
  border-radius: 5px;
  display: block;
  text-align: center;
  height: 30px;
  width: 97%;
  bottom: 0;
  margin: auto;

}

.menu-container {
  position: relative;
  margin-left: auto;
    
}

.menu-container:hover .menu {     			/* DESPLIEGA EL MENÚ EN MOVIL*/
 display: block;

}

#botonmenu {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  z-index: 10000;
  padding: 3px 5px;
  background-color: var(--morado4);
  color: var(--dorado5);
  border: none;
  border-radius: 5px;
  float: right; /*alinea el botón a la derecha*/

}

#botonmenu span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--morado5);
  transition: 0.3;
  border-radius: 2px;
}

.menu {
  display: none;
  position: absolute;
  right: 0;                                            /*alinea el menú desplegable a la derecha*/
  background: var(--morado2);
  border-radius: 5px;
  list-style: none;
  height: auto;
  z-index: 10;
  min-width: 100%;
  white-space: nowrap;                                 /*evita que el texto se rompa*/
}



.menu li a {
  color: var(--dorado5);
  display: block;
  text-decoration: none;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: ;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

#menu-toggle {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

#menu-toggle:checked ~ .menu {
 display: block;
}

/* vertical ocupa todo */
.slide.vertical img {
  object-fit: cover;
  object-position: center;
}

/*horizontal no recortar*/
.slide.horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide.horizontal img {
  object-fit: cover; /*contain;*/
  background: #000;
}
.slide img {
 max-height: 96%;
 max-width: 96%;
 left: 2%;
 width: auto;
 height: auto;
 object-position: center;
}

.caption {
position: absolute;
bottom: 0;
width: 100%;
color: white;
font-size: 20px;
text-align: center;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* flechas */
.arrows .arrow {
display: none;
}

.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-100%);
font-size: 30px;
color: white;
background: rgba(0,0,0,0.4);
cursor: pointer;
border-radius: 50%;
}

.prev { left: 10px; }
.next { right: 10px; }

/* ocultar radios */
.slider input,
.slides input {
position: absolute;
opacity: 0;
pointer-events: none;

}

/* slides */

.slider {
width: 100%;
max-width: 1200px; /*opcional para desktop*/
height: 100%;
margin: 0;
left: 2%;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 0;
background: #000;
top: 0;
}

.slides {
height: 100%;
width: 100%;
display: flex;
transition: transform 0.6s cubic-bezier(.77,0,.18,1);
transform: translateZ(0);
}

.slide {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-width: 100%;
position: relative;
flex: 0 0 100%;
max-width: 100%;
overflow: hidden;
}

.slide img {
 display: block;
}

.categoria {
 position: absolute;
 bottom: 2em;
 width: 100%;
 color: var(--dorado5);
 font-size: 14px;
 text-align: center;
 background: rgba(0,0,0,0.5);
}

.content_section {
  position: relative;
  top: 0;
  left: 0;
  min-height: calc(100dvh - 50px);
  overflow: hidden;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* flex: 1; ocupa todo el espacio disponible*/
  text-align: center;
}
ul li {
  display: inline;
  position: relative;
}

.imgEpistulae {
width: 100%;
max-width: 1200px; /*opcional para desktop*/
height: auto;
margin: 0;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 0;
background: #000;
top: ;
}