/* ===================================
    Seccion Beneficios
====================================== */

/* posiciones tarjetas y background */
.block.a{ top: 0; left: 0;   background: rgba(26, 184, 182, .90); }
.block.b{ top: 0; left: 0; background: rgba(26, 126, 189, .90); }
.block.c{ top: 0; left: 0; background: rgba(26, 136, 74, .90); }
.block.d{ top: 0; left: 0; background: rgba(26, 207, 140, .90); }
.block.e{ top: 0; right: 0;  background: rgba(44, 69, 131, .90); }

/* Background tarjetas hover */
.block.a:hover{background: rgba(26, 184, 182, .70); }
.block.b:hover{background: rgba(26, 126, 189, .70); }
.block.c:hover{background: rgba(26, 136, 74, .70); }
.block.d:hover{background: rgba(26, 207, 140, .70); }
.block.e:hover{background: rgba(44, 69, 131, .70); }


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.block.a{ top: 10%; left: 0;}
.block.b{ top: 50%; left: 20%;}
.block.c{ top: 15%; left: 50%;}
.block.d{ top: -5%; left: 70%;}
.block.e{ top: 45%; right: 0;}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


/* ===================================
    Imagen con zoom
====================================== */


.zoom-section{
  height: 30vh; /* antes 200vh, menos tiempo “pegada” */
  position: relative;
}

.zoom-sticky{
  position: sticky;
  top: 0;
  height: 25vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.zoom-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  will-change: transform, opacity;
  transform-origin: center;
  transition: none;
}

.zoom-media img,
.zoom-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ===================================
    Recorrido Virtual
====================================== */

/*Tabs para el cambio de recorrido*/

.kuula-tabs{
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.kuula-tab{
  padding: 10px 18px;
  border-radius: 10px;
  background: #fff;
  color: #333;
  border: 2px solid #DA1124;
  cursor: pointer;
  font-weight: 600;
}

.kuula-tab.active{
  background: #DA1124;
  color: #fff;

}

/*Iframe*/

.kuula-section{
  padding: 50px 0 100px 0;
  background: #fff;
}

.kuula-embed{
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.kuula-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ===================================
    Responsive
====================================== */


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

  .zoom-section{height: 35vh;}
.zoom-sticky{height: 25vh;}


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.zoom-section{height: 45vh;}
.zoom-sticky{height: 35vh;}

}
/* md  */ @media (min-width: 768px) {

.zoom-section{height: 60vh;}
.zoom-sticky{height: 40vh;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.zoom-section{height: 80vh;}
.zoom-sticky{height: 60vh;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

  .zoom-section{height: 100vh;}
.zoom-sticky{height: 80vh;}

}
/* xxl */ @media (min-width: 1400px) {}