* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-1: #061664;
    --color-2:#E68980;
    --color-3:#4771cc;
}

html, body {height: 100%;margin: 0;padding: 0;}
body {font-family: "Almarai", sans-serif; color: #212121; background-color: #fff;}
section {width: 100%;}
.container {width: 94%; max-width: 1200px; margin: auto; position: relative;}
h2 {margin-top: 0px; margin-bottom: 20px; font-size: 22px; color: var(--color-1);}
h3 {margin-bottom: 5px;}
p {margin-bottom: 20px; line-height: 22px;}
.bold {font-weight: 600;}

header {background-color: #fff; padding: 15px 0px;}
header .container {display: flex; justify-content: space-between;  background-color: #fff;}

.intro {height: 80vh; max-height: 700px; width: 100%; position: relative; background-color: var(--color-1); overflow: hidden;}

.intro .bg {
    clip-path: inset(0 100% 0 0);  animation: reveal-to-right .4s ease-in-out forwards; 
    position: absolute;
    width: 100%;
    bottom: -40%; height: 100%;
}
.intro .bg img {width: 100%; height: auto;}

.intro .forma1 {clip-path: inset(0 100% 0 0);  animation: reveal-to-right .8s ease-in-out forwards; left: -100px; top: 20%; position: absolute;}
.intro .forma2 {clip-path: inset(0 100% 0 0);  animation: reveal-to-left .6s ease-in-out forwards; animation-delay: 0.1s; position: absolute; top: 20%; right: -120px;}

.intro .modules {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}

.intro .arrow {opacity: 0; /* Inicialmente invisible */
    animation: arrowSequence 6.5s ease-in-out infinite;  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);}
/* Definir la animación de rebote */
@keyframes arrowSequence {
    0% {
        opacity: 0; /* Mantiene la flecha invisible */
    }
    15% {
        opacity: 0 /* Después de 1.5 segundos, la flecha aparece */
    }
    19% {
        opacity: 1; /* Después de 1.5 segundos, la flecha aparece */
    }
    20%, 30%, 40% {
        transform: translateX(-50%) translateY(0); /* Posición original */
    }
    25%, 35%, 45% {
        transform: translateX(-50%) translateY(20px); /* Flecha hacia abajo */
    }
    50% {
        transform: translateX(-50%) translateY(0);
        opacity: 1; /* Mantiene la flecha visible hasta el final del ciclo */
    }
    90% {
        opacity: 0; /* Mantiene la flecha visible hasta el final del ciclo */
    }
    100% {
        opacity: 0; /* Flecha desaparece para esperar el nuevo ciclo */
    }
}

[data-aos="fade-down"] {
    transform: translateY(-50px);
    transition-duration: 0.2s; /* Duración de la animación */
}




/* Definición de la animación */
@keyframes fade-in { 
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes in-left { 
    0% {left: -400px; top: 0%; scale: 0;}
    100% {left: -80px; top: 18%; scale: 1;}
}
@keyframes in-right { 
    0% {right: -400px; top: 0%; scale: 0;}
    100% {right: -135px; top: 30%; scale: 1;}
}
@keyframes reveal-to-right {
    0% { clip-path: inset(0 100% 0 0);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes reveal-to-left {
    0% { clip-path: inset(0 0 0 100%);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes reveal-to-bottom {
    0% { clip-path: inset(0 0 100% 0);}
    100% {clip-path: inset(0 0 0 0);}
}

.ganadores {padding: 70px 0px; background-image: url(img/bg-ganadores.svg); background-size: 100%; background-repeat: no-repeat;}
.ganadores h2 {text-align: center; margin-bottom: 40px; text-transform: uppercase;}
.ganadores .text {text-align: center; max-width: 700px; margin: auto; margin-bottom: 40px;}
.artistas { max-width: 1000px; margin: auto; display: flex; justify-content: center; gap: 70px;}
.artistas figure {position: relative; padding: 20px; border-radius: 6px; background-image: url(img/bg-ganadores.svg); background-size: 500%;}
.artistas figure .rank {position: absolute; bottom: 7px; right: 30px; background-color: var(--color-2); font-size: 20px; font-weight: 600; color: #fff; display: flex; width: 36px; height: 36px; border-radius: 6px; justify-content: center; align-items: center;}
.artistas .retrato {width: 100%; display: block; border-radius: 6px;}
.artistas .artista {flex:1; display: flex;
    flex-direction: column; 
    justify-content: space-between;
    height: auto}
.artistas .artista h3 {text-transform: uppercase; color: var(--color-1); margin-top: 20px; margin-bottom:10px;}
.artistas .artista .btn{margin-top: auto; max-width: 210px; }

.btn {cursor: pointer; padding: 13px 23px; font-size: 13px; font-weight: 700; border-radius: 4px; text-decoration: none; border: 1px solid var(--color-1); background-color: var(--color-1); color: #fff; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px;}
.btn-outline {background: transparent; color: var(--color-1);}
.btn-white {background-color: #fff; border: 1px solid #fff; color: var(--color-1);}

/* Estilos generales para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 33, 113, 0.8);
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative; max-width: 900px;
  }
  
  .close {
    position: absolute;
    top: 15px;
    right: 20px;width: 16px; height: 16px;
    cursor: pointer; display: block;  z-index: 4;
  }  

div.modal[style="display: flex;"] {animation: fade-in .4s ease-in-out forwards;}
div.modal[style="display: flex;"] .modal-content { animation: fade-in .7s ease-in-out forwards; }

.modal-content .line1 {
    display: flex;
    gap: 20px;
    text-align: left;
}

.modal-content .line1 .obra {width: 60%;}
.modal-content .line1 .obra img {width: 100%;}
.modal-content .line1 .texto {width: 40%;}
.modal-content .line1 .texto h3 {font-size: 13px; line-height: 18px; margin-top: 20px; width: 95%; margin-bottom: 10px;}
.modal-content .line1 .texto p {font-size: 13px; line-height: 17px; margin-bottom: 10px;}

.modal-content .line2 {display: flex; gap: 20px; padding-top: 20px;}
.modal-content .profile-container {width: 50%; display: flex; align-items: top;}
.modal-content .profile-container img {width: auto; height: 120px; margin-right: 20px;}
.modal-content .profile-container .data {text-align: left; }
.modal-content .profile-container .data h5 {color: var(--color-1); font-size: 14px; margin-bottom: 5px;}
.modal-content .profile-container .data p {font-size: 13px;  line-height: 17px; width: 95%;}

  /* Contenedor de los botones en la segunda línea */
.buttons-container {width: 50%;}
.buttons-container .buttons {display: flex; gap:10px;}  
  
.buttons-container p {margin-top: 20px; font-size: 13px; line-height: 16px; text-align: left;}

.digitalex .head {background-color: var(--color-1); color: #fff;}
.digitalex .head h2 {text-align: center; padding: 40px; margin: 0px; text-transform: uppercase; color:#fff;}
.digitalex .room {position: relative;}
.digitalex .room img {width: 100%;}
.digitalex .room .disclaimer {opacity: .9; position: absolute; width: 100%; text-align: center; bottom: 15px; font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 11px; }
.digitalex .about {display: flex; gap: 30px; padding: 40px 0px;} 
.digitalex .about > .info {width: 45%; display: flex; gap: 15px;}
.digitalex .about > .info .text {width: 70%;}
.digitalex .about > .info .text h3 {text-transform: uppercase; color: var(--color-1); margin-bottom: 10px;}
.digitalex .about > .info .text p {font-size: 15px;}
.digitalex .about > .info .text a {text-transform: uppercase; font-size: 13px; font-weight: 600; color: var(--color-1);}
.digitalex .about .perfil {width: 30%; text-align: right;}
.digitalex .about .perfil img {width: 90%; border-radius: 4px;}
.digitalex .about .col-swiper {width: 55%;}
.digitalex .about .cont-swiper {position: relative; background: rgba(0, 0, 0, .07); border-radius: 4px; padding: 10px 35px;}
.digitalex .about .cont-swiper .swiper-wrapper {min-height: 180px;}
.digitalex .about .cont-swiper img {max-width: 100%; max-height: 150px;}
.digitalex .about .cont-swiper .swiper-slide {height: auto;}
.digitalex .about .cont-swiper .swiper-slide a { height: 100%; display: flex; align-items: center; gap:20px; font-size: 14px; color: #212121; text-decoration: none;}
.digitalex .about .cont-swiper .swiper-slide a .obra {width: 60%; display: flex; justify-content: center; align-items: center;}
.digitalex .about .cont-swiper .swiper-slide a .info {width: 40%;}
.digitalex .about .cont-swiper .swiper-slide a .info span {display: table; text-decoration: underline; margin-top: 15px; }
.digitalex .about .cont-swiper .swiper-button-prev {left: 0px; top: 54%; color: #212121;}
.digitalex .about .cont-swiper .swiper-button-next {right: 0px; top: 54%; color: #212121;}

.digitalex .botones {display: flex; justify-content: center; gap: 20px; margin-bottom: 50px;}

/* Giftcard */
.giftcard {margin: 60px 0px;}
.giftcard > .container {background-color: #E1EBF8; padding: 60px 40px; display: flex; justify-content: center; border-radius: 6px; background-image: url(img/bg-giftcard.svg); background-position: -30% 30px; background-repeat: no-repeat;}
.giftcard .gift {width: 40%; transform: rotate(3deg); }
.giftcard .gift img {width: 70%; border-radius: 10px;}
.giftcard .info {width: 55%;}
.giftcard .info h2 {text-transform: uppercase; color: var(--color-1); line-height: 26px; margin-bottom: 15px;}

.giftcard .botones {display: flex; gap: 20px; margin-top: 30px;}

/* About Diderot */
.about-diderot {background-color: #F5F5F5; padding: 60px 0px; }
.about-diderot > .container {display: flex; justify-content: center; gap: 50px;}
.about-diderot .info {width: 55%;}
.about-diderot .images {width: 45%;}
.about-diderot img {width: 100%;}
.about-diderot .botones {margin-top: 40px;}

.cont-swiper {position: relative;}
.swiper_tecnicas .swiper-slide a {color: #000;}
.swiper_tecnicas img {width: 100%;}
.swiper_tecnicas span {display: block; padding-top: 15px; font-weight: 400; text-align: center;}
.cont-swiper .swiper-button-prev, .swiper-button-next  {width:30px; height: 30px; }
.cont-swiper .swiper-button-prev {left: -30px; color: #212121; top: 53%;}
.cont-swiper .swiper-button-next {right: -30px; color: #212121; top: 53%;}
.cont-swiper .swiper-button-prev:after {font-size: 20px; }
.cont-swiper .swiper-button-next:after {font-size: 20px; }
.swiper_tecnicas {overflow: hidden; padding: 0px; padding-top: 20px;}

/* Newsletter */
.newsletter {text-align: center; padding: 60px 0px;}
.newsletter h2 {text-transform: uppercase; color: var(--color-1); line-height: 26px; margin-bottom: 5px;}

.newsletter .tit {margin-bottom: 25px;}
.newsletter form {margin: auto !important; border-radius: 0px !important;}
.newsletter .p-body {border: 0px !important; padding: 0px !important; text-align: center; display: flex; flex-wrap: wrap; justify-content: center;}
.newsletter .p-inline-fields {gap: 0px !important;}
.newsletter .p-field {width: 48%; padding: 0px 0px;}
.newsletter .p-field label {display: none;}
.newsletter .p-field input {border-radius: 0px !important; border: 1px solid #DDDDDD;}
.newsletter .p-field input::placeholder {font-size: 14px !important; font-weight: 300;}
.newsletter .p-submit {width: auto; border-radius: 0px !important; border: 1px solid #000 !important; background-color: #000 !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important;padding: 9px 2em !important;}
.newsletter .p-submit:hover {background-color: #fff; color: #000;}
.newsletter .p-footer {width: 100%; font-size: 12px !important;}

/* Footer */
.footer {border-top:1px solid #EBEBEB; padding-top: 50px; text-align: center;}
.logofooter { text-align: center; display: table; margin: auto; margin-bottom: 30px;}
.logofooter svg {height: 38px;}
.datosfooter {list-style-type: none; margin: 0px; margin-bottom: 40px; padding: 0px; padding-left: 0px; font-weight: 200;}
.datosfooter li {display: inline-table; margin-left: 10px; margin-right: 10px;}
.datosfooter a {padding-right: 5px; padding-left: 5px; margin-right: 5px;}
.datosfooter svg {height: 18px;}
.datosfooter .facebook svg {height: 15px;}

.menufooter {display: none; list-style-type: none; margin: 0px; padding-left: 0px; padding-top: 40px; padding-bottom: 50px; font-weight: 400;}
.menufooter li {display: inline-table; margin-left: 10px; margin-right: 10px;}
.menufooter a {color:#000;padding-right: 5px; padding-left: 5px; margin-right: 5px; text-transform: uppercase; font-size: 13px;}

.footer-legal {border-top: 1px solid #EBEBEB; color: #808080; font-size: 11px; font-weight: 200;}
.footer-legal .container {display: flex; justify-content: space-between;}
.footer-legal .copy {padding-top: 20px; text-align: left; }

/* Zurbrand */
.cont-logo-zurbrand {text-align: right;}
.link-zurbrand {padding-top: 20px; padding-bottom: 20px; display: inline-block; -moz-transition: all 0.3s ease-out;  /*FF3.7+*/ -o-transition: all 0.3s ease-out;  /*Opera 10.5*/ -webkit-transition: all 0.3s ease-out;  /*Saf3.2+, Chrome*/ transition: all 0.3s ease-out;}
.link-zurbrand:hover {opacity: 0.8;}
.logo-zurbrand {height: 12px; width: auto;}

@media screen and (max-width: 767px) {

h2 {font-size: 18px;}

header .container {align-items: center;}
header .logo-diderot {height: 28px;}
header .logo-amex {height: 12px;}

.intro .forma1 {top: -16%; left: -230px; transform: rotate(-29deg);}
.intro .forma2 {top: inherit; bottom: 12%; right: -290px;}

.intro .modules {width: 94%;}
.intro .amex {height: 16px;}
.intro .theartistseries {width: 100%;}
.intro .diderot {height: 34px;}

.artistas {flex-wrap: wrap; max-width: 78%;}
.artistas .artista {flex: 100%;}

.modal-content {max-width: 96%;}
.modal-content .line1 {flex-wrap: wrap; gap: 15px;}
.modal-content .line1 .obra {width: 100%;}
.modal-content .line1 .texto {width: 100%;}
.modal-content .line1 .texto h3 {margin-top: 0px;}

.modal-content .line2 {flex-wrap: wrap;}
.modal-content .profile-container {width: 100%;}
.modal-content .profile-container .data h5 {font-size: 12px;}
.modal-content .profile-container .data p {font-size: 12px; line-height: 16px; margin-bottom: 5px;}
.modal-content .profile-container img {height: 60px;}
.modal-content .buttons-container {width: 100%;}
.modal-content .buttons-container .btn {padding: 12px 15px; font-size: 12px;}
.modal-content .buttons-container p {display: none;}

.digitalex .head h2 {padding: 20px 5px; font-size: 17px;}
.digitalex .room .disclaimer {font-size: 10px;}
.digitalex .about {flex-wrap: wrap; max-width: 88%;}
.digitalex .about .info .text h3 {font-size: 16px}
.digitalex .about .info, .digitalex .about .col-swiper {width: 100%;}
.digitalex .about .cont-swiper .swiper-slide a {gap: 10px;}
.digitalex .about .cont-swiper .swiper-slide a .obra {width: 60%;}
.digitalex .about .cont-swiper .swiper-slide a .info {width: 40%;}

.giftcard > .container {flex-wrap: wrap; padding: 30px 15px; background-position: 0px 0px;}
.giftcard .gift {width: 100%; transform: rotate(3deg); text-align: center; margin-bottom: 20px;}
.giftcard .gift img {height: 100px; width: auto;}
.giftcard .info {width: 100%;}
.giftcard .info h2 {line-height: 23px; width: 95%; margin: auto; margin-bottom: 10px;}
.giftcard .info p {width: 95%; margin: auto; padding-right: 20px;}
.giftcard .botones {gap: 8px; justify-content: center;}
.giftcard .info .btn {padding:14px 10px;}

.about-diderot > .container {flex-wrap: wrap;}
.about-diderot .info, .about-diderot .images {width: 100%;}
.about-diderot .cont-swiper {width: 91%; margin: auto;}

}