body {
  background-color :#f6f7fb;
  user-select :none ;
  color :#555 ;
  animation :load 0.5s linear ;
  padding :0 ;
  margin :0;
  font-family: sans-serif; 
}
@keyframes load {
  0% {
    opacity :0;
  }
}
.navar {
  display :flex ;
  align-items :center ;
  position :sticky ;
  top:0;
  background-color :transparent;
  backdrop-filter: blur(10px);
  z-index :999 ;
  padding :0 10px ;
}
.navar-left {
  display :flex ;
  align-items :center ;
  width :100%;
}
.navar-left img {
  height :40px ;
  width :40px ;
  border-radius :10px ;
  position :relative ;
  overflow :hidden ;
  margin :10px 5px;
  padding :0px;
} 
.navar-left p{
  margin :0 10px ;
}
.navar-right ion-icon {
  font-size :1.5em ;
  margin :10px ;
  padding :10px ;
}

.cardView {
  margin :0px;
  text-align :center ;
  display :flex ;
  align-items :center ;
  justify-content :center ;
  flex-direction :column ;
  height :100vh;
  background  :#fff;
  background-size:cover ;
  padding :0 20px ;
  margin-top :-65px;
}
.cardView h2 {
  font-size :2em;
}
.cardView img {
  animation :display 1s ease-in-out ;
  margin-top :20px ;
}
@keyframes display {
  0% {
    transform :translateY(50px);
    opacity :0;
  }
}

.cardView p {
  font-size :1em ;
}


.card {
  border-radius :20px ;
  margin :30px 20px;
  padding :10px ;
  background-color :#fff ;
  display :flex ;
  align-items :center ;
  justify-content :center ;
  text-align :center ;
  flex-direction :column ;
  transition :all 0.5s ease-in-out ;
}
.card:hover {
  transform: translateY(-10px);
  background-color :#fff;
  box-shadow :0px 3px 5px rgba(0,0,0,0.1);
}
.card ion-icon {
  font-size :2em ;
  border :1px solid #555 ;
  padding :10px ;
  margin :10px ;
  border-radius :100pc ;
}
.card ul li{
  text-align :left ;
  font-size :0.8em ;
  color :#777;
}

.footer {
  background-color :#fff;
  padding :10px 20px ;
}
a {
  text-decoration: none ;
  color :#5D66CB;
  font-size :1em ;
  margin :5px 0 ;
}
.pie {
  text-align :center ;
  font-weight :bold ;
  color:#555 ;
}





/* to in pc */

@media (max-width : 678px ) {
  .navar-right p {
    display :none ;
  }
}
@media (min-width : 678px) {
  .navar-right ion-icon {
    display :block;
    font-size :2.5em ;
  }
  .navar-right {
    display :flex ;
    align-items :center ;
  
  }
  .content {
  display :grid;
  grid-template-columns :repeat(auto-fit, minmax(350px, 1fr));
  gap :20px ;
  background-color :#fff;
}
.cardView{
  height :30vh;
  flex-direction :row ;
}
.navar {
  height :70px ;
}
}
@media (orientation:landscape){
 body{
   background-color :#fff;
   padding :0 ;
   margin :0;
 }
.cardView {
  height :100vh;
  flex-direction :row ;
}
}


.sidebar {
  background-color:#fff;
  position: fixed;
  top:0px;
  left: -290px;
  width: 290px;
  height: 100%;
  transition: left 0.3s ease;
  overflow-y: auto;
  z-index: 9999;
  color :#555;
}






.sidebar.open {
  left: 0;
}

.overlay {
  display:none ; /* Oculta el overlay por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(250,250,250,0.1); /* Fondo semitransparente */
  z-index: 1000; /* Debajo del menú */
}

.overlay.open {
  display: block; /* Muestra el overlay cuando el menú está abierto */
}
.menu-opciones {
  display :flex ;
  align-items :center ;
}
.menu-opciones ion-icon {
  font-size :1.4em;
  margin :5px 10px ;
}
.menu-opciones p {
  margin :15px 5px;
}
.menu-opciones:active {
  background-color :#111;
}

.goo {
  display :flex;
  align-items :center ;
  justify-content :center;
  margin :0px;
  padding :10px;
  background-color :#fff;
}
.goo-content{
  background-color :transparent;
  color:gray;
  display :flex;
  align-items :center;
  justify-content :center;
  flex-direction :column;
}
.goo-content img {
  border-radius :10px;
  background-color :transparent;
  object-fit:fill;
  width :50%;
  margin :10px;
  height :auto;
}