/* Fuentes */

/* --------------------

ROBOTO

font-family: 'Roboto', sans-serif;
Light 300 / Regular 400 / Bold 700

RUFINA

font-family: 'Rufina', serif;
Regular 400 / Bold 700

PT SERIF

font-family: 'PT Serif', serif;
Regular 400 / Bold 700 / Bold 700 Italic

PLAYFAIR DISPLAY

font-family: 'Playfair Display', serif;
Regular 400 / Regular 400 Italic / Bold 700 / Bold 700 Italic

-------------------- */

/* Colores */

/* --------------------

ORO: #c2a471
     rgba(194, 164, 113, 1);

GRIS OSCURO: #1B1B1B

NEGRO: #000

-------------------- */

:root {
  --oro: #c2a471;
  /* --gris-claro: #d3d1c3; */
  --gris-claro: #d1ccbd;
  --gris-oscuro: #1b1b1b;
  --rojo: #5c0001;
  --shadow: linear-gradient(rgba(0, 0, 0, 0.49) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Reset Styles
***********************/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
span,
h1,
p,
a,
dl,
dt,
dd,
ol,
ul,
li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Base */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "PT Serif", serif;
  background: #fff;
  background-attachment: fixed;
  color: #1b1b1b;
  width: 100%;
  float: left;
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1b1b1b;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  line-height: 1.2em;
}

h2 {
  font-size: 34px;
  display: block;
  margin-top: 0;
  line-height: 1.2em;
}

h2 span {
  font-size: 28px;
  padding-bottom: 20px;
  display: inline-block;
}

h3 {
  font-size: 28px;
  font-weight: 700;
  display: block;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.2em;
}

p {
  font-size: clamp(18px, 1.3em, 20px);
  color: #1b1b1b;
}

li {
  font-size: clamp(16px, 1.5em, 22px);
  color: #1b1b1b;
  margin: 5px 0;
}

a {
  color: #1b1b1b;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: #000;
}

.hiddenLink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Popup */

.modal-window {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal-window > .modal-content {
  width: 90%;
  max-width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4vw;
  background: white;
  border: 1px solid #c2a471;
  text-align: center;
}

.modal-window h2 {
  font-size: clamp(24px, 3vw, 38px);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: url(../../_assets/images/icons/close-gold.svg) #fff center center / 100% auto no-repeat;
  text-decoration: none;
  font-size: 0;
}

.modal-close:hover {
  background: url(../../_assets/images/icons/close-black.svg) #fff center center / 100% auto no-repeat;
}

.modalForm {
  margin: 20px 0;
  padding: 0 5px;
}

.scroll-off {
  overflow: hidden;
}

/* Leer más */

.b-description_readmore,
.b-description_readmore_2 {
  position: relative;
  line-height: 25px;
  box-sizing: border-box;
  margin: 0 !important;
}

.b-description_readmore_button {
  color: #1b1b1b;
  text-decoration: none;
  text-align: right;
  position: relative;
  margin-top: 5px;
}

.b-description_readmore_button span {
  background: #fff;
  text-align: center;
  padding: 0px 0 0 11px;
  cursor: pointer;
  font-size: 38px;
  position: relative;
  z-index: 0;
  color: #dead61;
  line-height: 0.8em;
}

.b-description_readmore_button span .fas {
  margin: 0;
  color: #efefef;
}

.b-description_readmore_button:hover,
.b-description_readmore_button span:hover .fas {
  color: #dead61;
}

.b-description_readmore_button:before {
  height: 1px;
  width: 99.7%;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #dead61;
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
}

.b-description_readmore_ellipsis:after {
  content: "...";
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 25px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  color: #666;
  font-size: 20px;
  text-align: right;
}

/* Copy text */

.copyInput {
  position: relative;
  flex: 0 1 150px;
}

.copyInput .tooltiptext {
  visibility: hidden;
  width: 150px;
  transform: translateX(-50%);
  background-color: #fff;
  border: 1px solid #c2a471;
  font-size: 14px;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 75px;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.copyInput .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #c2a471 transparent transparent transparent;
}

.copyInput:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.modalFormInput {
  flex: 0 1 calc(100% - 150px);
}

.modalFormInput input[type="text"] {
  border-radius: 0;
  border-color: #c2a471;
  color: #000;
}

.copyInput button {
  background: #c2a471;
  height: 60px;
  width: 100%;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  border: 1px solid #c2a471;
  border-radius: 0;
  cursor: pointer;
  font-family: "Playfair Display", serif;
}

.copyInput button:hover {
  background: #000;
  border: 1px solid #000;
}

/* Tooltip */

.tooltip {
  display: inline-block;
  position: relative;
  border-bottom: 1px dotted #666;
  text-align: left;
}

.tooltip .top {
  min-width: 150px;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 10px 20px;
  color: #000000;
  background-color: #ffffff;
  font-weight: normal;
  font-size: 13px;
  border-radius: 8px;
  position: absolute;
  z-index: 99999999;
  box-sizing: border-box;
  border: 1px solid #c2a471;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s;
}

.tooltip:hover .top {
  visibility: visible;
  opacity: 1;
}

.tooltip .top p {
  text-transform: none;
  font-size: 14px !important;
  line-height: 1.2em;
}

.tooltip .top i {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  width: 24px;
  height: 12px;
  overflow: hidden;
}

.tooltip .top i::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #ffffff;
  border: 1px solid #c2a471;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Aviso */

#mensajeTop {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: block;
  position: fixed;
  z-index: 9999;
  padding: 10px 0;
  margin-bottom: 0;
  width: 98%;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

#mensajeTop p {
  text-align: center;
  font-size: 14px;
  margin-bottom: 0;
  padding: 0 60px;
  color: #fff;
}

#mensajeTop a {
  color: #fff;
  border-bottom: 1px dotted #fff;
}

#mensajeTop a:hover {
  border-bottom: 1px solid #c2a471;
  color: #c2a471;
}

#mensajeTopCerrarToogle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
}

#mensajeTopCerrar {
  border-radius: 50px !important;
  font-size: 28px;
  color: #000 !important;
  text-align: center;
  display: block;
  border: 0 !important;
}

#mensajeTopCerrar a {
  border-radius: 50px !important;
  font-size: 28px;
  color: #c2a471 !important;
  border: 1px solid #c2a471;
  text-align: center;
  display: block;
  border: 0 !important;
}

.svg-icon {
  width: 1em;
  height: 1em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #c2a471;
}

.svg-icon circle {
  stroke: #c2a471;
  stroke-width: 1;
}

#mensajeTopCerrar:hover .svg-icon path,
#mensajeTopCerrar:hover .svg-icon polygon,
#mensajeTopCerrar:hover .svg-icon rect {
  fill: #fff;
}

#mensajeTopCerrar:hover .svg-icon circle {
  stroke: #fff;
}

/* Formulario */

input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  color: #c2a471;
  background: rgb(255, 255, 255);
  border: 1px solid #1b1b1b;
  font-family: "PT Serif", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1em;
  padding: 0 10px;
  height: 60px;
  width: 100%;
  border-radius: 0;
}

::placeholder {
  opacity: 1 !important;
  color: #c2a471;
}

.formItem {
  margin: 20px 0;
}

/* General */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #1b1b1b;
  z-index: 9999;
  padding: 0 30px;
}

#logo img {
  width: 350px;
}

#nav .flexItem {
  margin: 0 5px;
}

.btn {
  display: inline-block;
  color: #fff;
  background: #c2a471;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 22px;
  line-height: 1em;
  padding: 12px 20px;
  cursor: pointer;
  margin: 0;
  text-transform: uppercase;
  min-width: 50%;
  text-align: center;
  font-family: "Playfair Display", serif;
  border: 0;
  font-weight: 700;
  border: 1px solid var(--oro);
}

#nav .btn {
  color: #000;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
}

#nav .btn:hover {
  color: #fff;
}

#btnSubmit {
  border: 0 !important;
  width: 100% !important;
  height: 60px !important;
}

.btn:hover {
  color: #fff;
  background: #000;
}

.btnLine {
  display: inline-block;
  color: #c2a471;
  background: #fff;
  border: 1px solid #c2a471;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 22px;
  line-height: 1em;
  padding: 11px 20px;
  cursor: pointer;
  margin: 0;
  text-transform: uppercase;
  min-width: 50%;
  text-align: center;
}

.btnLine:hover {
  color: #fff;
  background: #c2a471;
  border-color: #c2a471;
}

.btnLineRounded {
  border-radius: 100px;
}

.btnLowercase {
  font-weight: 400 !important;
  text-transform: lowercase !important;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

.btnIconShare {
  background: url(../../_assets/images/icons/icon-share.svg) #c2a471 center center / 25px auto no-repeat;
}

.btnIconShare:hover {
  background: url(../../_assets/images/icons/icon-share.svg) #000 center center / 25px auto no-repeat;
}

header .btn {
  font-size: 16px;
  padding: 10px;
}

header .btnLine {
  display: inline-block;
  background: #1b1b1b;
  font-size: 16px;
}

header .btnLine:hover {
  color: #000;
  background: #c2a471;
  border-color: #c2a471;
}

#btnCanjea {
  border: 1px solid #c2a471;
  background: url(../../_assets/images/icons/ico-regalo.svg) #1b1b1b 7px center / 20px auto no-repeat !important;
  padding: 9px 10px 9px 40px !important;
  color: #c2a471 !important;
}

#btnCanjea:hover {
  border: 1px solid #c2a471;
  background: url(../../_assets/images/icons/ico-regalo-black.svg) #c2a471 7px center / 20px auto no-repeat !important;
  color: #1b1b1b !important;
}

.gridIcons img {
  width: 100%;
  height: auto;
}

.icon {
  width: 22px;
  margin-right: 10px;
  vertical-align: text-bottom;
}

.imageBg {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  position: relative;
}

.imageBgRight {
  background-position: right center !important;
}

.imageBgLeft {
  background-position: left center !important;
}

.imageBgBottom {
  background-position: center bottom !important;
}

.slick-slider {
  min-width: inherit !important;
}

.slick-list,
.slick-track,
.slick-slide > div,
.heightFull {
  height: 100%;
}

.bgSizeWidthFull {
  background-size: 100% auto !important;
}

section .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  padding: 5px;
  cursor: pointer;
  text-indent: -9999px;
  border-radius: 50px;
  color: transparent;
  border: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #fff;
}

section .slick-dots li button:hover {
  background: rgba(255, 255, 255, 0.5);
}

section .slick-dots li.slick-active button {
  background: rgba(255, 255, 255, 1);
}

/* Slick Frases */

.slick-frases {
  background: #2e2e2e;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
  padding: 0.5em;
  border-radius: 5px;
  position: fixed !important;
  width: 96% !important;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.slick-frases .slick-dots {
  bottom: -35px;
}

.slick-frases p {
  color: #fff;
  font-size: 16px;
}

/* Style The Dropdown Button */

.dropbtn {
  background-color: #c2a471;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

#idioma .dropbtn {
  background-color: #1b1b1b;
  color: #c2a471;
  font-size: 16px;
  padding: 5px 20px 5px 6px;
  font-family: "Roboto", sans-serif;
  background: url(../../_assets/images/icons/arrow-down.png) #1b1b1b calc(100% - 5px) 12px / 12px auto no-repeat !important;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: absolute;
  display: block;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
}

#idioma.dropdown {
  position: relative;
  display: block;
  bottom: inherit;
  left: inherit;
  transform: none;
  width: 50px;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #c2a471;
  z-index: 1;
  width: 100%;
  text-align: center;
}

#idioma .dropdown-content {
  background-color: #1b1b1b;
  font-family: "Roboto", sans-serif;
}

.flexBoxGrid .dropdown-content {
  bottom: 52px;
}

.dropdown-content p {
  font-size: 14px;
  color: #fff;
  margin: 10px 0;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
}

#idioma .dropdown-content a {
  color: #c2a471;
  padding: 6px;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #000;
  color: #fff;
}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #c2a471;
}

/* Botón fijo */

#btnFixedBotton {
  z-index: 9999;
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Video */

video {
  object-fit: cover;
  object-position: center bottom;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.iframe-wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
}

.video-wrapper > video {
  width: 100%;
  vertical-align: middle;
}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
  display: none;
}

.video-overlay-play-button {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px calc(50% - 50px);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.95;
  cursor: pointer;
  background-image: linear-gradient(transparent, #000);
  transition: opacity 150ms;
}

.video-overlay-play-button:hover {
  opacity: 1;
}

.video-overlay-play-button.is-hidden {
  display: none;
}

/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/

.iframe-wrapper iframe {
  width: 100%;
  height: 56.25vw;
  /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Overlay menú */

.toggle-button {
  height: 19px;
  width: 30px;
  cursor: pointer;
  z-index: 999;
  position: relative;
  visibility: hidden;
  display: none;
}

.toggle-button.toggle-active {
  position: fixed;
  right: 6vw;
}

.bar {
  background-color: #c2a471;
  display: block;
  width: 100%;
  height: 2px;
  border: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.bar + .bar {
  margin-top: 6px;
}

.middle {
  top: 11px;
}

.bottom {
  top: 22px;
}

.toggle-button:hover .bar {
  background: #fff;
}

.toggle-active .bar {
  background-color: #c2a471;
}

.toggle-active .top {
  -webkit-transform: translateY(5px) translateX(0) rotate(45deg);
}

.toggle-active .middle {
  opacity: 0;
}

.toggle-active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
}

.overlay {
  position: fixed;
  background: #1b1b1b;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition:
    opacity 0.35s,
    visibility 0.35s,
    height 0.35s;
  z-index: 99;
}

.overlay a {
  pointer-events: none;
}

.overlay.nav-active a {
  pointer-events: auto;
}

.path-frontpage .overlay {
  visibility: hidden;
  display: none;
}

.nav-active {
  opacity: 1;
  visibility: visible;
  height: 100%;
  /*    max-height: 340px;*/
}

.overlay ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
  position: relative;
  text-align: center;
  list-style: none;
  padding: 0;
}

.overlay ul li {
  flex: 0 1 20%;
  order: 0;
  align-self: auto;
  margin: 0;
}

.overlay ul li ul {
  padding: 0 !important;
}

.overlay ul li ul li {
  flex: 0 1 100%;
  margin: 10px 0 !important;
}

.overlay ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 400 !important;
  margin: 0 0 20px !important;
}

.overlay ul li ul li a {
  font-weight: 300 !important;
  color: #bebebe !important;
  margin: 0 !important;
}

/* Menú principal overlay */

#navResponsive {
  width: 100%;
  overflow: auto;
  margin: 0 auto !important;
  height: 100vh;
  padding: 10vh 6vw;
}

#block-navegacionprincipal .menu__item {
  text-align: center;
}

#block-navegacionprincipal .block-menu__inner,
#block-navegacionprincipal .block-menu__content {
  width: 100%;
  height: 100vh;
}

/* Mensaje de alerta */

.alert {
  width: 100%;
}

#message {
  padding: 4vw 5vw;
  background-color: #fff;
  color: #000;
}

#message > .flexItem > .flexBox > .flexItem {
  padding-left: 5px;
}

.closebtn {
  margin-left: 15px;
  color: #000;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* Mensaje de cabecera */

.promo {
  opacity: 1;
  transition: opacity 0.6s;
  position: fixed;
  z-index: 999;
  top: 100px;
  right: 0;
  width: 400px;
}

#messagePromo {
  padding-right: 50px;
  flex-basis: calc(100% - 40px);
}

#messagePromoContent {
  padding: 30px 20px 20px;
  background: rgba(194, 164, 113, 0.9);
  border: 1px solid #c2a471;
}

#messagePromoContent p {
  font-size: clamp(14pt, 1.5vw, 16pt);
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

#messagePromoContent a {
  font-size: 18px;
  text-transform: uppercase;
  display: block;
  padding: 6px;
  border: 2px solid #000;
  color: #000;
  text-align: center;
  font-family: "Roboto", sans-serif;
  cursor: pointer;
}

#messagePromoContent a:hover {
  color: #fff;
  background: #000;
}

#btnMessagePromo {
  position: relative;
  height: 40px;
  flex-basis: 40px;
}

#btnMessagePromo button {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../../_assets/images/icons/arrow-left-white.svg) #c2a471 center center / auto 26px no-repeat;
  color: #000;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: all 0.2s;
  cursor: pointer;
  text-indent: -9999px;
}

#btnMessagePromo button:hover {
  background: url(../../_assets/images/icons/arrow-left-black.svg) #fff center center / auto 26px no-repeat;
  color: #fff;
}

#btnMessagePromo.btnActivePromo {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 50px;
  height: 40px;
  flex-basis: 40px;
}

#btnMessagePromo.btnActivePromo button {
  background: url(../../_assets/images/icons/close-white.svg) transparent center center / 80% auto no-repeat;
}

#btnMessagePromo.btnActivePromo button:hover {
  background: url(../../_assets/images/icons/close-white.svg) #c2a471 center center / 80% auto no-repeat;
}

.closebtn {
  margin-left: 15px;
  color: #000;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* KEYFRAMES */

.flexBoxContenedor {
  width: 100%;
  height: 100%;
}

.flexBoxContenedorItem {
  flex-basis: 80%;
  max-width: 800px;
}

.flexBoxContenedorTitulo {
  margin-bottom: 20px;
  font-weight: 700;
}

.flexBoxContenedorSubtitulo {
  margin-bottom: 40px;
  font-size: 28px;
}

.flexBoxContenedorItem p {
  margin-bottom: 20px;
}

.flexBoxContenedorItem p:last-child {
  margin-bottom: 0;
}

/* HOME */

#keyframe-home {
  height: 100vh;
  position: relative;
  background: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#keyframe-home img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  inset: 0;
  object-fit: cover;
  object-position: center bottom;
}

#keyframe-home::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}

#keyframe-home .slick-slider {
  height: 100%;
  width: 100%;
}

#keyframe-home .slick-prev {
  left: 50px;
  z-index: 9;
}

#keyframe-home .slick-next {
  right: 50px;
  z-index: 9;
}

#keyframe-home .slick-dots {
  bottom: 2vw;
  z-index: 9;
}

#claim {
  position: relative;
  overflow: hidden;
  height: clamp(100px, 10vw, 200px);
  aspect-ratio: 300 / 193;
  display: block;
}

#claim img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

#claim #logo-aire {
  width: clamp(130px, 15vw, 250px);
  margin: 0 auto 2em;
}

#claim #claim-grafico {
  width: clamp(350px, 30vw, 850px);
  margin: 0 auto clamp(50px, 3vw, 100px);
}

#claim h1 {
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
}

#claim p {
  color: #fff;
  font-size: clamp(24px, 4vw, 32px);
  text-transform: uppercase;
}

#claim-second {
  position: absolute;
  width: 100%;
  padding-top: 60%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 9;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}

/* GRID FRASES */

#keyframe-grid-frases {
  background: #fff;
  /* padding: clamp(60px, 7vw, 300px) 3em; */
  padding: 0 3em;
  height: 20vh;
}

#keyframe-grid-frases .flexItem {
  flex-basis: calc(100% / 3);
  padding: 1em;
  text-align: center;
}

#keyframe-grid-frases p {
  color: #c2a471;
  font-size: clamp(20px, 2.2vw, 32px);
  font-family: "Rufina", serif;
  line-height: 1.2em;
}

#keyframe-grid-frases span {
  display: block;
}

/* VIDEO */

#keyframe-video {
  position: relative;
  height: 100vh;
  text-align: center;
  margin: 0 auto;
  width: 90%;
}

#form-priority-list {
  position: absolute;
  z-index: 999;
  background: #fff;
  padding: 2em 3em;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 100%;
  max-width: 780px;
}

#form-priority-list .formItem:last-child {
  margin-bottom: 0;
}

.form-priority-list-entradilla {
  margin-bottom: 2em;
  padding: 0 3em;
}

#form-priority-list span,
#form-priority-list a {
  color: #c2a471;
  font-weight: 700;
}

#form-priority-list a:hover {
  color: #000;
  text-decoration: underline;
}

#form-priority-list #btnSubmit {
  width: auto !important;
  height: 50px !important;
  font-weight: 700;
}

/* STORYTELLING */

#keyframe-storytelling {
  width: 90%;
  min-height: 90vh;
  background: #fff;
  margin: clamp(100px, 6vw, 200px) auto;
}

#keyframe-storytelling > .flexItem:last-child {
  position: relative;
}

#keyframe-storytelling .keyframeElement2ColumnasIcon {
  flex: 0 1 60px !important;
}

#keyframe-storytelling .keyframeElementActions {
  position: relative;
  margin-top: 40px;
  height: 60px;
}

#keyframe-storytelling .dropdown {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  transform: translateX(0);
  width: 250px;
}

#keyframe-storytelling .dropdown .btn {
  min-width: 100%;
}

#keyframe-storytelling .keyframeElement .dropdown-content {
  bottom: 52px;
}

#keyframe-storytelling .keyframeElement h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 30px;
}

#keyframe-storytelling .slickElement {
  position: absolute;
  top: 10vw;
  left: 0;
  padding: 0 6vw;
  width: 100%;
  z-index: 1;
}

#keyframe-storytelling .slickElement h2 {
  color: #fff;
  font-size: clamp(24px, 4vw, 52px);
  margin-bottom: 0;
  text-align: center;
  line-height: 1.1em;
}

#keyframe-storytelling p span {
  color: #c2a471;
}

/* LOCATION */

#keyframe-location {
  width: 90%;
  background: #fff;
  margin: clamp(70px, 6vw, 200px) auto;
}

#keyframe-location .flexItem {
  flex-basis: calc(50% - 4vw);
  margin: 2vw;
  min-height: 300px;
}

#keyframe-location-es .flexItem .imageBg {
  padding-top: 35%;
}

#keyframe-location-us .flexItem .imageBg {
  padding-top: 65%;
}

#keyframe-location-uk .flexItem .imageBg {
  padding-top: 40%;
}

#keyframe-location .flexItem .imageBg::before {
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
  content: "";
  transition: all 0.2s;
}

.keyframe-location-header h2 {
  font-family: "Rufina", serif;
  color: #c2a471;
  font-weight: 400;
  text-align: center;
}

.keyframe-location-texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: "Rufina", serif;
  color: #c2a471;
  font-weight: 400;
  text-align: center;
  transition: all 0.2s;
  opacity: 1;
  font-size: clamp(22px, 2.5vw, 34px);
  margin-bottom: 0;
}

.keyframe-location-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: all 0.2s;
  min-width: auto;
}

#keyframe-location .flexItem:hover .keyframe-location-texto {
  opacity: 0;
}

#keyframe-location .flexItem:hover .imageBg::before,
#keyframe-location .flexItem:hover .keyframe-location-btn {
  opacity: 1;
}

/* NEWSLETTER */

#keyframe-newsletter {
  width: 100%;
  margin-bottom: 50px;
}

#social {
  width: 100%;
}

.icon {
  flex: 0 1 30px;
  margin: 20px;
}

.icon a {
  display: block;
}

.icon img {
  width: 100%;
  height: auto;
  max-height: 30px;
}

.iconLarge {
  flex: 0 1 auto;
  margin: 20px;
}

/***********************/

/* RESPONSIVE */

/***********************/

@media all and (max-width: 1370px) {
  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 24px;
  }

  #keyframe-gift-grid > .flexItem p {
    padding: 0 1vw;
  }
}

@media all and (max-width: 1024px) {
  .toggle-button {
    visibility: visible;
    display: block;
  }

  #navDesktop {
    visibility: hidden;
    display: none;
  }

  #idioma.dropdown {
    margin: 0 10px !important;
  }

  .keyframe-gift-grid-actions-rc .flexItem {
    flex-basis: 100%;
    padding: 1em 0 !important;
  }
}

@media all and (max-width: 720px) {
  #keyframe-grid-frases .flexItem {
    flex-basis: 100%;
    padding: 0.5em 0;
  }

  #keyframe-grid-frases span {
    display: initial;
  }

  #keyframe-grid-frases {
    height: auto;
    padding: clamp(20px, 7vw, 300px) 3em;
  }

  #keyframe-storytelling {
    min-height: auto;
    margin: 1em auto 4em;
  }

  #keyframe-storytelling > .flexItem:first-child {
    flex-basis: 100%;
    min-height: clamp(600px, 25vw, 800px);
  }

  #keyframe-storytelling > .flexItem:last-child {
    flex-basis: 100%;
    padding: 4em 1em 0;
  }

  #keyframe-storytelling .keyframeElementActions {
    text-align: center;
  }

  #keyframe-storytelling .keyframeElementActions .btn {
    height: auto !important;
  }

  .experienciasGridItem {
    flex-basis: calc(100% / 2);
    margin: 30px 0;
    padding: 1vw 2vw 65px;
  }

  .flexBoxContenedorItem {
    flex-basis: 100%;
    padding: 0;
  }

  .iframe-wrapper {
    height: 40vh;
  }

  #btnFixedBotton {
    display: block;
  }

  #social .iconLarge {
    order: -1;
    width: 100%;
    text-align: center;
  }

  #keyframe-location .flexItem {
    flex-basis: 100%;
    margin: 2vw 0;
    min-height: auto;
    height: 18vh;
  }

  #keyframe-location-es .flexItem .imageBg,
  #keyframe-location-us .flexItem .imageBg {
    padding-top: 0;
  }

  #keyframe-location .flexItem .imageBg::before,
  #keyframe-location .flexItem:hover .keyframe-location-texto {
    opacity: 1;
  }

  .keyframe-location-btn {
    min-width: 100%;
    font-size: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .keyframe-location-btn:hover {
    background: transparent;
  }

  #keyframe-location .flexItem .imageBg::before,
  #keyframe-location .flexItem:hover .keyframe-location-texto {
    opacity: 0.6;
  }

  #keyframe-home .slick-dots {
    bottom: 40px;
  }
}

@media all and (max-width: 480px) {
  #navResponsive {
    align-content: flex-start !important;
  }

  #navResponsive .flexItem {
    flex: 0 1 100%;
    margin: 5px 0;
  }

  #navResponsive .flexItem .btn {
    width: 100%;
  }

  #logo img {
    width: 250px;
  }

  header {
    padding: 0 10px;
  }

  #idioma.dropdown {
    position: absolute;
    top: 23px;
    left: 10px;
  }

  .flexBoxGridText p {
    margin: 0;
    font-size: 4vw;
  }

  .flexBoxGridText li {
    margin: 5px 0;
    font-size: 4vw;
  }

  #social {
    padding-bottom: 30px;
  }

  .icon {
    flex: 0 1 30px;
    margin: 20px 10px;
  }

  .experienciasGridItem {
    flex-basis: 100%;
    padding: 2vw 0 65px;
    position: relative;
    margin: 30px 0;
  }

  .experienciasGridBtn {
    width: 100%;
  }

  #claim {
    width: 90%;
  }
}

/*Estilos para el nuevo modulo de Cookies de Cookiebot*/

#CybotCookiebotDialog {
  /*opacity: 0.95 !important;*/
  background: rgba(30, 30, 30, 0.9) !important;
}
#CybotCookiebotDialog * {
  font-size: 11px !important;
}

div#CybotCookiebotDialogHeader {
  display: none !important;
}
div#CookiebotWidget {
  display: none !important;
}
.CybotCookiebotDialogBodyButton:hover {
  opacity: 1 !important;
}
#CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for="CybotCookiebotDialogBodyLevelButtonNecessary"]) .CybotCookiebotDialogBodyLevelButtonDescription:hover {
  color: inherit !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a {
  color: white !important;
}
.CybotCookiebotDialogBodyLevelButtonSlider {
  top: 6px !important;
  height: 20px !important;
  width: 46px !important;
}
.CybotCookiebotDialogBodyLevelButtonSlider:hover {
  opacity: 1 !important;
  filter: brightness(50%);
}
.CybotCookiebotDialogBodyLevelButtonSlider:after {
  opacity: 1 !important;
  background-color: #c3a572 !important;
  filter: brightness(100%) !important;
}
.CybotCookiebotDialogBodyLevelButtonSlider:before {
  background-color: #c3a572 !important;
  height: 14px !important;
  width: 14px !important;
  bottom: 3px !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper:hover input[type="checkbox"]:not(:disabled) + .CybotCookiebotDialogBodyLevelButtonSlider {
  opacity: 1 !important;
}
div#CybotCookiebotDialogBodyButtonsWrapper {
  flex: auto !important;
  flex-direction: row !important;
  flex-wrap: wrap-reverse !important;
}
div#CybotCookiebotDialogBodyButtonsWrapper > * {
  font-weight: normal !important;
}
button#CybotCookiebotDialogBodyButtonDecline {
  flex-basis: 35% !important;
  width: 35% !important;
  background-color: transparent !important;
  border: none !important;
  text-decoration: underline !important;
}
button#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  flex-basis: 55% !important;
  width: 55% !important;
  background-color: transparent !important;
  border: none !important;
  text-decoration: underline !important;
}

#CybotCookiebotDialogTabContent input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #ffffff !important;
}
#CybotCookiebotDialogTabContent .CybotCookiebotDialogBodyLevelButtonSlider {
  background: black !important;
}
#CybotCookiebotDialog.CybotEdge.CybotMultilevel .CybotCookiebotDialogBodyBottomWrapper {
  border-top: 1px solid #333333 !important;
  padding-top: 1em !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  border: none !important;
}
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
  margin: 1.5em 2em 0.5em 0 !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
  color: #ffffff !important;
}
#CybotCookiebotDialogNav:hover {
  color: #ffffff !important;
}
#CybotCookiebotDialogNav {
  color: #ffffff !important;
}
#CybotCookiebotDialogNavDetails {
  color: #ffffff !important;
}
#CybotCookiebotDialogNavDetails:hover {
  color: #ffffff !important;
}
#CybotCookiebotDialogNavAbout {
  color: #ffffff !important;
}
#CybotCookiebotDialogNavAbout:hover {
  color: #ffffff !important;
}
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover {
  color: #ffffff !important;
}

@media screen and (min-width: 320px) {
  div#CybotCookiebotDialogBody > div.CybotCookiebotScrollContainer {
    width: 100% !important;
  }
  div#CybotCookiebotDialogFooter {
    position: relative !important;
    width: 100% !important;
  }
}
@media screen and (min-width: 601px) {
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:last-of-type),
  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type) {
    margin-bottom: 0;
    width: 100% !important;
  }

  #CybotCookiebotDialogPoweredByText {
    display: none !important;
  }
  #CybotCookiebotDialog.CybotEdge.CybotMultilevel #CybotCookiebotDialogFooter {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  #CybotCookiebotDialog.CybotEdge.CybotMultilevel .CybotCookiebotScrollContainer {
    width: calc(100% - 286px - 1.5em) !important;
  }
}

@media screen and (min-width: 1280px) {
  #CybotCookiebotDialog.CybotEdge {
    min-width: 75vw !important;
    max-width: 0 !important;
  }
  #CybotCookiebotDialog.CybotEdge.CybotMultilevel #CybotCookiebotDialogFooter {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  #CybotCookiebotDialog.CybotEdge.CybotMultilevel .CybotCookiebotScrollContainer {
    width: calc(100% - 286px - 1.5em) !important;
  }
}

/*FIN - Estilos para el nuevo modulo de Cookies de Cookiebot*/

/*Styling Selectbox*/
.keyframe-home-content-select {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1rem;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -9;
  opacity: 0;
}

.keyframe-home-content-select > div,
.keyframe-home-content-select > a {
  flex: 1;
}

#keyframe-location .flexItem:hover .keyframe-home-content-select {
  opacity: 1;
  z-index: 99999;
}

.dropdown-select {
  width: 100%;
  display: inline-block;
  /* background-image: url(../images/iconos/arrow-down-bold.svg); */
  transition: all 0.5s ease;
  position: relative;
  height: 100%;
  text-align: center;
  outline: none;
}

.dropdown-select .select {
  cursor: pointer;
  display: block;
  padding: 12px 20px;
  font-size: 22px;
  line-height: 1em;
  transition: all 0.2s;
  color: #fff;
  background: var(--oro);
  font-family: "Playfair Display", serif;
  border: 0;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--oro);
}

.dropdown-select .select:hover,
.dropdown-select.active .select:hover,
.dropdown-select.active .select {
  background: black;
}

.dropdown-select.active .select > i {
  transform: rotate(-90deg);
}

.dropdown-select .dropdown-menu {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--oro);
  border: 1px solid var(--oro);
  font-family: "Roboto", sans-serif !important;
  border-top: 0;
  width: 100%;
  left: 0;
  overflow: hidden;
  display: none;
  max-height: 500px;
  overflow-y: auto;
  z-index: 9;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

.dropdown-select .dropdown-menu div {
  padding: 10px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  color: var(--oro);
}

.dropdown-select .dropdown-menu div a {
  color: var(--oro);
  width: 100%;
  display: block;
}

.dropdown-select .dropdown-menu div:hover,
.dropdown-select .dropdown-menu div:active {
  background-color: var(--oro);
  color: var(--gris-oscuro);
}

.dropdown-select .dropdown-menu div:hover a,
.dropdown-select .dropdown-menu div a:hover {
  text-decoration: none;
  color: var(--gris-oscuro);
}

@media all and (max-width: 760px) {
  .dropdown-select .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.9);
  }
}