@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Poppins:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,400&display=swap');

:root {
  --dark-color: #000000;
  --light-color: #ffffff;
  --main-color: #FFC400;
  --secondary-color: #162734;
  --third-color: #1F3547;



  --booking_background: #fefefe;
  --booking_foreground: #292929;

  --hex-booking-logo-color1: invert(0%) sepia(10%) saturate(3206%) hue-rotate(202deg) brightness(94%) contrast(82%);
  --hex-booking-logo-color2: invert(100%) sepia(5%) saturate(1380%) hue-rotate(292deg) brightness(82%) contrast(89%);
  --hex-logo-blue: invert(17%) sepia(15%) saturate(1726%) hue-rotate(165deg) brightness(93%) contrast(91%);


  /*
      https://codepen.io/sosuke/pen/Pjoqqp
      Convierte un código de color RGB a formato hex
  */

  --hex-dark-color: invert(0%) sepia(10%) saturate(3206%) hue-rotate(202deg) brightness(94%) contrast(82%);
  --hex-light-color: invert(99%) sepia(0%) saturate(7490%) hue-rotate(222deg) brightness(102%) contrast(103%);
  --hex-main-color: invert(73%) sepia(80%) saturate(1386%) hue-rotate(358deg) brightness(100%) contrast(105%);
  --hex-secondary-color: invert(100%) sepia(5%) saturate(1380%) hue-rotate(292deg) brightness(82%) contrast(89%);
  --hex-disabled-color: invert(84%) sepia(0%) saturate(0%) hue-rotate(104deg) brightness(97%) contrast(96%);
  --hex-allergens-color: invert(66%) sepia(0%) saturate(25%) hue-rotate(224deg) brightness(96%) contrast(89%);

  --hex-black-dark-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(140deg) brightness(101%) contrast(102%);
  --hex-black-light-color: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(99%) contrast(102%);
  --hex-black-main-color: invert(92%) sepia(88%) saturate(660%) hue-rotate(330deg) brightness(92%) contrast(89%);
}

body {  font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; background-color: var(--light-color); color: var(--dark-color); width: 100vw; padding-top: 140px; padding-bottom: 80px; }

body.disabled{ height: 100vh; overflow-y: hidden; }

.container{ max-width: 1920px; }

.itemShowInfoContent .container { max-width: 1280px; }

h1,h2,h3,h4,h5{   font-family: "Italiana", sans-serif;font-weight: 400; font-style: normal; }

.btn { padding: 10px 20px; text-transform: uppercase; border-width: 0px; border-radius: 40px; }

.btn-dark{ background: var(--dark-color); color: var(--light-color); }

.btn-dark:hover{ background: var(--main-color); color: var(--dark-color); }

.btn-main{ background: var(--main-color); color: var(--dark-color); }

.btn-main:hover{ background: var(--dark-color); color: var(--light-color); }

.btn-light{ background: var(--light-color); color: var(--dark-color); }

.btn-light:hover{ background: var(--dark-color); color: var(--main-color); }


#header { position: fixed; top: 0px; left: 0px; width: 100vw; height: 140px; background-color: var(--dark-color); z-index: 50; }

#logoheader { position: absolute; top: 50%; left: 50%; width: calc(100% - 40px); max-width: 425px; transform: translate(-50%, -50%);  }

#logoheader img { width: 100%; filter: var(--hex-light-color); }


#cookies_message{
  position: fixed; bottom: 0px;  left: 0px; width: 100vw; padding: 10px; background: var(--dark-color); color: var(--light-color); z-index: 9999999999;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

@media only screen and (max-width: 960px) {
  #cookies_message{ padding: 5px; font-size: .8rem; }
}

#pdf-viewer{ position:fixed; z-index: 999; top: 0px; left: 0px; width: 100vw; height: 100vh; background: var(--dark-color); top: -100vh; transition: all .5s ease; overflow: scroll; }

#pdf-viewer.show{ top: 0px; }

#pdf-content{ position: absolute; z-index: 991; top: 80px; left: 0px; width: 100vw; height: calc(100vh - 80px); }

.pdf-view{ width: 100%; height: 100%; }

.infoHeaderPdf { z-index: 992; }


.mod-25 .list-item-container{ width: 100%; aspect-ratio: 1/1; background-color: var(--dark-color); margin-top: 10px; margin-bottom: 10px; border-radius: 20px; position: relative; overflow: hidden; cursor: pointer; }

.mod-25 .list-item-container .title { position: absolute; z-index: 10; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--light-color); font-size: 1.4rem; font-weight: bold; text-align: center;  width: calc(100% - 20px); }

.mod-25 .list-item-container .image { width: 100%; height: 100%; opacity: .6; }

.mod-25 .list-item-container .image img { width: 100%; height: 100%; object-fit: cover; }

.mod-25 .list-item-container .logo { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60%; aspect-ratio: 4/3.2; }

.mod-25 .list-item-container .logo img { width: 100%; height: 100%; object-fit: contain; }

.itemShowInfo{ position: fixed; top: 0px; right: -120vw; width: 100vw; height: 100vh; overflow: hidden; z-index: 100; transition: all .5s ease; opacity: 0; background-color: var(--light-color);  }

.itemShowInfoContent{ position: absolute; top: 80px; left: 0px; width: 100vw; height: calc(100vh - 80px); overflow: hidden; overflow-y: scroll; background-color: var(--light-color); z-index: 102; padding-bottom: 80px;}

.itemShowInfo.show{ right: 0px; opacity: 1;}

.itemShowInfoHeader { position: fixed; top: 0px; left: 0px; width: 100vw; height: 80px; z-index: 101; background-color: var(--dark-color); color: var(--light-color); }

.itemShowInfoHeader .close{ width: 50px; height: 50px; background-color: var(--light-color); border-radius: 50%; overflow: hidden; position: absolute; z-index: 102; top: 15px; left: 20px; cursor: pointer;}

.itemShowInfoHeader .close img { width: calc(100% - 20px); margin-top: 10px; margin-left: 10px; }

.itemShowInfoHeader .title{ position: absolute; z-index: 102; left: 90px; top: 50%; width: calc(100% - 100px); text-align: left; font-size: 2.2rem; font-weight: bold; color: var(--light-color); transform: translateY(-50%); }

.itemShowInfoContentHeadImage{ width: 100vw; aspect-ratio: 16/9; background-color: #dedede; }
.itemShowInfoContentHeadImage img { width: 100%; height: 100%; 
object-fit: cover; display: none; }


.itemShowInfoContentDescription{ padding: 40px; font-size: 1.2rem; text-align: justify; padding-bottom: 40px; }

.itemShowInfoContentShortInfo { padding: 40px 20px; text-align: center; background-color: var(--third-color); color: var(--light-color); margin-top: 40px; /*border-width: 0px; border-top-width: 20px; border-bottom-width: 1px; border-style: solid; border-color: var(--light-color); */ border-radius: 20px;
margin-bottom: 40px;
}

.shortinfo { font-size: 1rem; margin-top: 40px; }
.shortinfo.first { margin-top: 0px; }
.shortinfo img { width: 35px; filter: var(--hex-main-color); margin-bottom: 5px; }
.shortinfo .btn { background-color: var(--main-color); font-size: 1.2rem; color:  var(--third-color); }
.shortinfo .btn:hover { background-color: var(--light-color); }

@media (max-width: 960px){
  .mod-25 .list-item-container .title { font-size: 1.8rem; }
  .itemShowInfoHeader .title{ font-size: 1.4rem; }
  .itemShowInfoContentHeadImage{ aspect-ratio: 4/3; }
}