body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    color: #000;
    background: url(../media/v2/ondas.jpg);
}

/* main{
 background: url(../media/v2/ondas.jpg);
} */

.engle,h1,h2,h3,h4,h5,h6,text {
    font-family: "Pompiere", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
  }



h1 {
    font-size: 90px;
    line-height: 90px;
    margin-bottom: 0;
}

.h5, h5 {
    font-size: 18px;
    line-height: 24px;
}

h4 {
    font-size: 42px;
    line-height: 50px;
    font-weight: bold;
}

p.conmemoracion {
    font-size: 19px;
    line-height: 25px;
}


.logo-iinoea{
    max-width: 130px;
}

/* BACKGROUND COLOR */
.bg-mapas{
    background-color: #181a1d;
}

.bg-naranja-claro{
    background-color: #f19f2a;
}

.bg-amarillo{
    background-color: #fcdd60;
}


.bg-naranja{
    background-color: #f27b2b;
}

.bg-rojo{
    background-color: #e63941;
}

.bg-rojo-oscuro{
    background-color: #c72f35;
}

.bg-bordeaux{
    background-color: #a41c21;
}


:root{
  --c1: #fbbc05;
  --c2: #fcdd60;
  --c3: #f7b062;
}

.gradient-cycle {
  background: linear-gradient(120deg, var(--c1), var(--c2), var(--c3));
  background-size: 180% 180%;
  animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.deco-left {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 80px;
    z-index: 5;
    height: auto;
    top: auto; 
}

.deco-right {
    position: absolute;
    top: -20px;
    right: -5px;
    width: 52px;
    z-index: 5;
}

.levitar {   
  animation: levitar 3s ease-in-out infinite;
}

@keyframes levitar {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); } 
  100% { transform: translateY(0); }
}

.rotate-wait {
  animation: rotatePause 2.5s linear infinite;
}

@keyframes rotatePause {
  0%   { transform: rotate(0deg); }
  80%  { transform: rotate(360deg); } /* Giro en 2.4s */
  100% { transform: rotate(360deg); } /* Se queda quieto 0.6s */
}


/* TEXT COLOR */
.text-naranja-claro{
    color: #f19f2a;
}

.text-amarillo{
    color: #f2c70d;
}




.text-naranja{
    color: #f27b2b !important;
}


.text-rojo{
    color: #e63941;
}

.text-rojo-oscuro{
    color: #c72f35;
}

.text-bordeaux{
    color: #a41c21;
}

.text-black{
    color: #000;
}




/* NAVBAR */
#mainNav { opacity: 0; transition: opacity 0.8s ease; }
#mainNav.opacity-100 { opacity: 1 !important; }
.navbar .nav-item a {
  position: relative;
  color: #000000;
  text-decoration: none;
}

.navbar .nav-item a::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 0;
  height: 2px;
  background-color: #000000;
  transition: width 0.3s ease-in-out;
}

.navbar .nav-item a:hover::after {
  width: 100%;
}

.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus {
    box-shadow: inherit;
}

.custom-link {
  position: relative; 
  display: inline-block; 
  text-decoration: none; 
}

.custom-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;           
  width: 100%;
  height: 2px;            
  background-color: #000; 
  transform: scaleX(0);   
  transform-origin: left; 
  transition: transform 0.4s ease;
}

.custom-link:hover::after {
  transform: scaleX(1);   
}

.custom-link i {
  opacity: 0;                
  transition: opacity 0.6s ease;
  font-size: 25px;
}

.custom-link-small i {
    font-size: 14px;
}

.custom-link:hover i {
  opacity: 1;              
  animation: colorCycle 1.25s infinite;
}

@keyframes colorCycle {
  0%   { color: #000; }
  33%  { color: #111; }
  66%  { color: #333; }
  100% { color: #000; }
}

.overlay-container {
  position: relative;
  display: block;
  overflow: hidden;
}

.overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.4s ease;
  border-radius: .375rem;
}

.overlay-container:hover .overlay {
  bottom: 0;
}




/* BUTTONS */
.btn-imgs:hover {
    opacity: 0.8;
}
.button-conoce{
    max-width: 140px;
}
.button-boletines{
    max-width: 180px;
}
.button-congresos{
    max-width: 180px;
}

.btn-custom {
    background: #c72f35;
    color: #fff;
    line-height: 25px;
}

.btn-custom:hover {
    background: #f19f2a;
    color: #fff;
    line-height: 25px;
}


hr{
    border-color: #000000;
    opacity: 1;
}


.mapboxgl-popup-content {
	background: #fff;
	border-radius: 5px;
}

.mapboxgl-popup-close-button {
	color: #c72f35;
	font-size: 18px;
}

.mapboxgl-popup-close-button:focus-visible {
	outline: 0;
}

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
	display: none;
}

.swiper-slide a {
  cursor: pointer !important;
  display: block;
  color: inherit;
  text-decoration: none; 
}

.swiper-button-next, .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 44%);
    color: #000000;
}

.swiper_directores .swiper-button-next, .swiper_directores .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 37%);
    color: #000000;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 25px;
    font-weight: bold;
}



.video-container {
    position: relative;
    width: 100%;
    height: 85vh;
    overflow: hidden;
  }

  .video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  .overlay-text {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 10;
  }

  .overlay-text h2 {
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: inline-block;
    margin: -0.3rem 0;
    font-size: 30px;
}

  .bottom-text-container {
    display: flex;
    justify-content: center;
  }


  .bottom-text {
    margin-top: -90px;
}


.countdown-number {
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    min-height: 40px;
}

.countdown-label {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
}



.arrow-up, .arrow-down {
    display: block;
    margin: auto;
    width: 13px;
    rotate: 9deg;
}

img.arrow-up {
    margin-bottom: -20px;
    margin-top: 10px;
}

img.arrow-down {
    margin-top: -20px;
    margin-bottom: 10px;
}

 .year-down{
    margin-top: 214px;
} 


.text-up, .text-down {
    width: 175%;
    margin-left: -36%;
    font-size: 13px;
}

.text-up {
    height: 178px;
    display: flex;
    align-items: end;
}








.video-deco {
    height: 500px;
    object-fit: cover; 
    object-position: top; 
}

.video-tiza{
    height: 700px;
    object-fit: cover; 
}

.overlay {
    background-color: rgba(255, 255, 255, 0.8); 
    z-index: 1;
  }
  
.contenido-overlay {
    z-index: 2;
  }

  .mapbox-container{
    height: 600px
}






.table-dark {
    --bs-table-bg: none;
    --bs-table-border-color: #efd35f;
}


.table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: #f6d44d !important;
}







@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 35px;
    }

}


@media (min-width: 1400px) {
    body {
    font-size: 13px;
    line-height: 20px;
}

.bottom-text {
    margin-top: -110px;
}

    i.bi.bi-arrow-up {
        margin-bottom: 5px;
    }
    i.bi.bi-arrow-down {
        margin-top: 5px;
    }

    .text-up, .text-down {
    font-size: 13px;
}
}


@media (max-width:992px){
    body {
        font-size: 14px;
        line-height: 20px;
        background: url(../media/v2/ondas-mob.jpg);
    }
    .logo-iinoea {
        max-width: 100px;
    }
    h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    h4 {
    font-size: 27px;
    line-height: 37px;
    }
    .h5, h5 {
        font-size: 16px;
        line-height: 22px;
    }
    .btn-custom {
        line-height: 20px;
        font-size: 16px;
    }
    .overlay-text h2 {
        font-size: 17px;
        line-height: 23px;
    }
    .countdown-number {
        font-size: 1rem;
        min-width: 50px;
        min-height: 40px;
    }
    .countdown-label {
        font-size: 10px;
    }
    .bottom-text {
        margin-top: -98px;
        padding: 20px 25px;
        border-radius: 100px 100px 0 0;
    }

    p.conmemoracion {
        font-size: 14px;
        line-height: 21px;
    }

    .timeline-gallery {
        display: flex;
        width: max-content;
        min-height: 760px;
    }
    
    .timeline-item {
        flex: 0 0 auto;
        width: 140px; 
    }

    .video-tiza{
        height: 300px;
        object-fit: cover; 
    }
    .video-deco {
        height: 440px;
       
    }
    .mapbox-container{
        height: 400px
    }
    
    table {
        font-size: 11px;
        line-height: 16px;
    }
.text-up, .text-down {
        width: 170%;
        margin-left: -33%;
        font-size: 12px;
        line-height: 16px;
    }

.overlay {
  font-size: .8rem;
}
    
}