@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@font-face {
  font-family: 'Futura';
  font-weight: 400;
  src: url('/fonts/Futura-Book-Normal.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura';
  font-weight: 700;
  src: url('/fonts/Futura-Book-Bold.ttf') format('truetype');
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Varela Round", sans-serif;
}

.bg-gray-500 {
  --tw-bg-opacity: 0;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}


header{height:50px;}
section{min-height: calc(100vh - 90px)}
/* .FileDeatil{
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.4);
    transition: all 0.5s;
} */
/* .FileDeatil:hover{
    transform: translate(-10px, -10px);
    box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.4);
} */
.rating{transition: all .5s;}
.mobileFilters{
    left:-100vw;
    transition: all 1s;
}

.modal[data-type='modalLogin'] .modal-bottom {
  background-color: #fe7014;
}

.modal[data-type='modalRegister'] .modal-bottom {
  background-color: #0f67e3;
}


.order-dropdown button.toggle {
  background-color: #fff140;
  color:#4132e2;
}
.order-dropdown button.toggle  > span::after {
  content: 'Más reciente';
}
/* .order-dropdown[data-selection='oldest'] button.toggle  {
  background-color: #ffea50;
} */
.order-dropdown[data-selection='oldest'] button.toggle  > span::after {
  content: 'Más antiguo';
}
/* .order-dropdown[data-selection='score'] button.toggle  {
  background-color: #e996f8;
} */
.order-dropdown[data-selection='score'] button.toggle  > span::after {
  content: 'Calificación';
}
/* .order-dropdown[data-selection='price'] button.toggle  {
  background-color: #1bce67;
} */
.order-dropdown[data-selection='price'] button.toggle  > span::after {
  content: 'Precio';
}
.order-dropdown[data-selection='latest'] .options button[data-value='latest'],
.order-dropdown[data-selection='oldest'] .options button[data-value='oldest'],
.order-dropdown[data-selection='score'] .options button[data-value='score'],
.order-dropdown[data-selection='price'] .options button[data-value='price'] {
  display: none;
}
.order-dropdown .options {
  overflow: hidden;
  height: auto;
  max-height: 0;
  transition: max-height .25s ease-in-out;
}
.order-dropdown.open .options {
  max-height: 120px;
}
.order-dropdown.open .toggle .arrow {
  transform: rotate(180deg);
}
.modal > div{
    width:600px;
}