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

:root {
    --color-1: #212121;
    --color-2:#EFEFEF;
    --color-3:#FFFFFF;
}

html, body {height: 100%;margin: 0;padding: 0;}
body {font-family: "Inter", 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;}
ul {list-style-type: none; line-height: 1.4em;}

.mobile {display: none;}

.grid-2 {display: grid; align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}

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

header .logo-feria {height: 66px;}
header .logo-diderot {height: 50px;}

.intro {height: 80vh; max-height: 700px; width: 100%; position: relative; background-color: var(--color-1); overflow: hidden;}
.intro::before {content: ''; width: 80%; height: 100%; position: absolute; z-index: 1; top: 0px; right: 0px;
background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);}
.intro .bg {position: absolute; width: 100%;top: 0%; height: 100%; z-index: 0;}
.intro .bg img {width: 100%; height: 100%; object-fit: cover;}

.intro .modules {position: absolute; top: 50%; left: 50%;  z-index: 1; transform: translateY(-50%); text-align: left; color: #fff; max-width: 500px; }
.intro p {line-height: 26px; font-size: 19px; margin-top: 10px;}
.intro .icons {padding: 10px; display: inline-flex; gap: 10px; align-items: center; position: absolute; z-index: 2; left: 20px; bottom: 20px; background: rgba(0, 0, 0, 0.4); border-radius: 4px;}
.intro .arrow {opacity: 0; animation: arrowSequence 6.5s ease-in-out infinite;  position: absolute; z-index: 2; bottom: 40px; left: 50%; transform: translateX(-50%);}

.about {padding: 50px 0px; background-color: var(--color-2);}
.about ul {font-weight: bold;}
.about .col {min-width: 0; overflow: hidden;}

.cont-swiper {position: relative; width: 100%;}
.swiper-slide img {width: 100%;}

.swiper_feria {width: 100%; aspect-ratio: 4/3;}
.swiper_feria .swiper-slide {width: 100%; height: 100%;}
.swiper_feria .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

.swiper-pagination-feria {bottom: 20px;}
.swiper-pagination-bullet {border: 1px solid #fff;}
.swiper-pagination-bullet-active {background-color: #fff;}

.exhibicion {position: relative; overflow: hidden; background-color: #212121; color: #fff;}
.exhibicion .col {z-index: 1;}
.exhibicion .info {padding: 90px 0px;}
.exhibicion h2 {color: #fff;}
.exhibicion h3 {margin-top: 25px; margin-bottom: 10px; font-size: 16px;}
.exhibicion ul {display: grid; align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr));}
.exhibicion .bg {width: 50%; height: 100%; position: absolute; z-index: 0; right: 0px; top: 0px;}
.exhibicion .bg .swiper {height: 100%;}
.exhibicion .bg .swiper-slide {width: 100%; height: 100%;}
.exhibicion .bg .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

.exhibicion .bg .btn-recorrer {border: 1px solid rgba(255, 255, 255, .4); text-decoration: none; text-align: center; z-index: 2; display: inline-flex; flex-direction: column; color: #fff; background: rgba(0, 0, 0, 0.7); border-radius: 4px; padding: 20px 25px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.exhibicion .bg .btn-recorrer .icons {display: flex; gap: 15px; justify-content: center;}
.exhibicion .bg .btn-recorrer .text {margin-top: 15px; font-size: 13px; text-transform: uppercase; padding: 8px 40px; border-radius: 4px; border: 1px solid #fff;}

.exhibicion .info .btn-recorrer {border: 1px solid rgba(255, 255, 255, .4); text-decoration: none; text-align: center; z-index: 2; display: table; color: #fff; background: rgba(0, 0, 0, 0.7); margin-top: 20px; border-radius: 4px; padding: 10px 25px; font-size: 13px; text-transform: uppercase; }

.powered {padding: 50px 0px; }

.powered h3 {font-weight: 400; line-height: 26px;}
.powered h3 strong {display: block;}
.powered .logos {display: flex; gap: 40px;}
.powered .logos img:first-child {height: 50px;}

.gallery {padding: 50px 0px; background-color: var(--color-2); text-align: center;}
.gallery p {margin: auto; padding: 30px 0px; max-width: 800px;}

.swiper_gallery .swiper-slide {height: 300px;}
.swiper_gallery .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

.swiper-button-prev, .swiper-button-next {background-color: rgba(255, 255, 255, .8); width: 40px; height: 40px;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 14px; color: #000;}

.btn-vermas {background-color: #000; border: 1px solid #000; color: #fff; text-decoration: none; text-align: center;  display: table; margin: auto; margin-top: 0px; border-radius: 4px; padding: 10px 25px; font-size: 13px; text-transform: uppercase; }

@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);}
}

/* 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 {opacity: .8; 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 svg {height: 12px; width: auto;}
.link-zurbrand:hover {opacity: 1;}

/* Modal Exhibición */
.modal-exhibicion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
}
.modal-exhibicion.active {
    display: block;
}
.modal-exhibicion iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.modal-exhibicion-close {
    position: absolute;
    top: 10px;
    right: 65px;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-exhibicion-close:hover {
    background: rgba(255,255,255,0.2);
}

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

    /* Evitar scroll horizontal */
    html, body {overflow-x: hidden;}

    .container {padding-left: 10px; padding-right: 10px;}

    .display {display: none;}
    .mobile {display: inherit;}

    /* Tipografía */
    h2 {font-size: 18px;}
    p {font-size: 14px; line-height: 20px;}

    /* Grilla a 1 columna */
    .grid-2 {grid-template-columns: 1fr; gap: 0;}

    /* Header: logos más chicos */
    header {padding: 10px 0;}
    header .logo-feria {height: 40px;}
    header .logo-diderot {height: 30px;}

    /* Intro */
    .intro {height: 60vh; max-height: 500px;}
    .intro .modules {left: 5%;bottom: 15%; top: inherit;  transform: none; max-width: 100%; padding-right: 5%;}
    .intro .modules h1 {font-size: 26px; line-height: 32px; text-wrap: balance;}
    .intro p {font-size: 15px; line-height: 22px;}
    .intro .icons img {height: 24px;}

    .intro::before {height: 80%; width: 100%; bottom: 0px; top: inherit;
    background: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);}

    /* About */
    .about {padding: 30px 0;}
    .swiper_feria {margin-top: 30px;}

    /* Exhibición */
    .exhibicion .info {padding: 40px 0;}
    .exhibicion h3 {font-size: 14px;}
    .exhibicion ul {grid-template-columns: 1fr; font-size: 14px;}
    .exhibicion .bg {position: relative; width: 100%; height: 330px; right: auto; top: auto;}
    .exhibicion .bg .btn-recorrer {padding: 15px 20px;}
    .exhibicion .bg .btn-recorrer .text {padding: 8px 25px; font-size: 12px;}
    .exhibicion .info .btn-recorrer {display: none;}

    /* Powered */
    .powered {padding: 30px 0;}
    .powered h3 {font-size: 15px; line-height: 22px; text-align: center;}
    .powered .logos {gap: 20px; justify-content: center; margin-top: 20px;}
    .powered .logos img:first-child {height: 35px;}
    .powered .logos img {max-height: 28px;}

    /* Gallery */
    .gallery {padding: 30px 0;}
    .swiper_gallery .swiper-slide {height: 180px;}

    .swiper-button-prev, .swiper-button-next {width: 30px; height: 30px;}

    /* Newsletter */
    .newsletter {padding: 40px 0;}
    .newsletter .p-field {width: 100%;}

    /* Footer */
    .logofooter svg {height: 28px;}
    .datosfooter {font-size: 13px;}
    .datosfooter li {display: block; margin: 5px 0;}
    .footer-legal .container {flex-direction: column; text-align: center; gap: 5px;}
    .footer-legal .copy {text-align: center;}
    .cont-logo-zurbrand {text-align: center;}

}