/* screen - blue-coat-mobile */

.blue-coat-mobile {
    padding: 3px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /*min-width: 768px;*/
  overflow: hidden;
  width: 100%;
}




.blue-coat-mobile .banner-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 10%;
  margin-left: -1px;
  margin-top: 12px;
  position: relative;
  width: 100%;
}

/* ===== Vídeos ===== */
  .banner-1  video {
    top: 0; left: 0;
    width: 100%;
    height: 100%;           /* llenan 500px de alto */
    object-fit: cover;
  }

.blue-coat-mobile .back-pick-1 {
  align-self: stretch;
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .title-1 {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-weight: 400;
  left: 36px;
  letter-spacing: 8px;
  line-height: normal;
  position: absolute;
  top: 50%;
}


.blue-coat-mobile .una-historia-de-eleg-1 {
  color: #0f0f0f;
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: -0.45px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 55%;
}

.blue-coat-mobile .carousel {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 13%;
  margin-top: 15px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .slide {
    margin-bottom: 25px;
  align-self: stretch;
  background-color: var(--white);
  height: 566px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .slide1 {
  align-items: flex-end;
  display: flex;
  height: 528px;
  left: 0;
  min-width: 100%;
  position: absolute;
  top: 43px;
}

.blue-coat-mobile .frame-41 {
  display: flex;
  height: 528px;
  margin-bottom: 0;
   width: 100%;
}

.blue-coat-mobile .rectangle-3 {
  height: 499.71px;
  width: 100%;
}

.blue-coat-mobile .buttons {
  display: flex;
  gap: 4px;
  height: 20px;
  left: 371px;
  position: absolute;
  top: 12px;
  width: 44px;
}

.blue-coat-mobile .arrow-right-now-icon-svgco {
  align-items: flex-end;
  aspect-ratio: 1;
  display: flex;
  height: 20px;
  margin-left: 0;
  margin-top: 0;
  padding: 1.1px 1.1px;
  transform: rotate(-180.00deg);
  width: 20px;
}

.blue-coat-mobile .group {
  align-items: flex-end;
  display: flex;
  min-width: 18px;
}

.blue-coat-mobile .vector-container {
  height: 18px;
  margin-bottom: 0;
  position: relative;
  width: 18px;
}

.blue-coat-mobile .vector {
  height: 6px;
  left: 7px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.blue-coat-mobile .vector-1 {
  height: 18px;
  left: 0;
  position: absolute;
  top: 0;
  width: 18px;
}

.blue-coat-mobile .arrow-right-now-icon-svgco-1 {
  align-items: flex-end;
  aspect-ratio: 1;
  display: flex;
  height: 20px;
  margin-top: 0;
  padding: 1.1px 1.1px;
  width: 20px;
}

.blue-coat-mobile .group-1 {
  align-items: flex-start;
  display: flex;
  min-width: 18px;
}

.blue-coat-mobile .durante-la-segunda-g {
  height: 138px;
   margin-top: 40px;
  letter-spacing: -0.42px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 100%;
}

.blue-coat-mobile .fun-fact-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height:  12%;;
  margin-top: 1px;
  padding: 27px;
  position: relative;
   width: 100%;
}

.blue-coat-mobile .back {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.blue-coat-mobile .frame-41-1 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .frame-3 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 29px 14px;
  justify-content: center;
  padding: 10px 0px 41px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .fun-fact-2 {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  width: 374px;
}

.blue-coat-mobile .incluso-winston-chur {
  height: 76px;
  letter-spacing: -0.42px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 240px;
}

.blue-coat-mobile .text-2 {
  transform: rotate(-180.00deg);
}

.blue-coat-mobile .ellipse-1 {
  aspect-ratio: 1;
  height: 90px;
  position: relative;
  width: 90px;
}

.blue-coat-mobile .homenaje-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 810px;
  margin-top: 32px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .hoy-high-life-rinde-1 {
  letter-spacing: 0;
  line-height: 18px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  width: fit-content;
}

.blue-coat-mobile .span0-1 {
  line-height: 60px;
}

.blue-coat-mobile .span1-1 {
  line-height: 30px;
}

.blue-coat-mobile .span2-1 {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-weight: 600;
  line-height: 30px;
}

.blue-coat-mobile .vector-2-1 {
  height: 2px;
  position: relative;
  width: 43px;
}

.blue-coat-mobile .pick1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 689px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .rectangle-8-1 {
  align-self: stretch;
  height: 573px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .una-versin-contempo-1 {
  height: 84px;
  letter-spacing: -0.42px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 325px;
}

.blue-coat-mobile .pick1-1 {
  align-items: center;
  background-image: url(../img/pick1-1.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  gap: 10px;
  height: 560px;
  justify-content: center;
  padding: 317px 52px 1px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .diseado-para-la-ciu {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 325px;
}

.blue-coat-mobile .span0-2 {
  font-weight: 600;
  letter-spacing: -0.10px;
}

.blue-coat-mobile .span1-2 {
  font-size: var(--font-size-m);
  letter-spacing: -0.06px;
}

.blue-coat-mobile .frame-42 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 660px;
  margin-top: 32px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .slide1-1 {
  background-image: url(../img/rectangle-10-1.png);
  background-size: 100% 100%;
  height: 528px;
  left: 0;
  position: absolute;
  top: 43px;
  width: 100%;
}

.blue-coat-mobile .vector-container-2 {
  margin-top: 0;
}

.blue-coat-mobile .una-pieza-de-the-fin {
  height: 65px;
  letter-spacing: -0.42px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 372px;
}

.blue-coat-mobile .video-1 {
  height: 550px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .mangas-1 {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.blue-coat-mobile .overlap-group1-1 {
  height: 560px;
  
  display: flex; 
  justify-content: center;
}

.blue-coat-mobile .overlap-group-1 {
  align-items: flex-start;
  background-image: url(../img/rectangle-13.png);
  background-size: 100% 100%;
  display: flex;
  height: 528px;
  left: 0;
  min-width: 100%;
  position: absolute;
  top: 0;
}

.blue-coat-mobile .rectangle-16-1 {
  background-color: #ffffffc7;
  height: 528px;
  width: 100%;
}

.blue-coat-mobile .frame-7-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 437px;

  position: absolute;
  top: 55px;
  width: 372px;
}

.blue-coat-mobile .rectangle-15-1 {
  height: 366px;
  object-fit: cover;
  position: relative;
  width: 85%;
}

.blue-coat-mobile .con-mangas-y-gorro-d-1 {
  height: 102px;
  letter-spacing: -0.42px;
  line-height: normal;
  margin-bottom: -46.00px;
  position: relative;
  text-align: center;
  width: 288px;
}

.blue-coat-mobile .frame-43 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 177px;
  margin-top: 25px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .forma-parte-de-the-f-1 {
  align-self: stretch;
  height: 163px;
  letter-spacing: 0;
  line-height: 18px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.blue-coat-mobile .span0-3 {
  line-height: 35px;
}

.blue-coat-mobile .span1-3 {
  line-height: 25px;
}

.blue-coat-mobile .vector-3 {
  height: 1px;
  margin-bottom: -0.50px;
  object-fit: cover;
  position: relative;
  width: 366.5px;
}


.blue-coat-mobile .mangas {
  height: 528px;
  position: relative;
  width: 100%;
}

.blue-coat-mobile .text {
  color: var(--black);
  font-family: var(--font-family-eb_garamond);
  font-size: var(--font-size-xxxxxl);
  font-weight: 700;
  letter-spacing: -2.40px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.blue-coat-mobile .vector-container-3 {
  height: 18px;
  position: relative;
  width: 18px;
}
/* screen - index */

.index {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.index .overlap-group2 {
  height: 100%;
  position: relative;
  width: 100%;
}



.index .rectangle-18 {
  align-self: stretch;
  background-color: var(--white);
  height: 29px;
  position: relative;
  width: 100%;
}

.index .captura-de-pantalla {
  align-self: stretch;
  aspect-ratio: 16.83;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index .banner {
   position: relative;
    width: 100vw;
    height: 650px;          /* altura fija para ambos videos */
    overflow: hidden;
}
 .banner video {
 
    top: 0; left: 0;
    width: 100%;
    height: 100%;           /* llenan 500px de alto */
    object-fit: cover;
}


  /* ===== Vídeos ===== */
  .banner-video video {
    top: 0; left: 0;
    width: 100%;
    height: 100%;           /* llenan 500px de alto */
    object-fit: cover;
  }

.index .back-pick {
   display: block;
    width: 98%;
    height: 100%;
    text-decoration: none;
}

.index .title {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxxl);
  font-weight: 400;
  left: 33%;
  letter-spacing: 25.00px;
  line-height: normal;
  position: absolute;
  top: 75%;
}

.index .una-historia-de-eleg {
  bottom: -13px;
  color: #0f0f0f;
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-weight: 400;
  left: calc(50.00% - 449px);
  letter-spacing: -0.81px;
  line-height: normal;
  position: absolute;
  width: 898px;
}

.index .text {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-left: 1.0px;
  margin-top: 45px;
  position: relative;
  width: 98%;
}

.index .frame-2 {
  position: relative;
  width: 478px;
}

.index .rectangle-4 {
  height: 799px;
  position: relative;
  width: 873px;
}

.index .fun-fact {
  height: 425px;
  position: relative;
  width: 100%;
}

.index .homenaje {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 27px;
  margin-top: 45px;
  padding: 0px 439px;
  position: relative;
  width: 100%;
}

.index .hoy-high-life-rinde {
  letter-spacing: 0;
  line-height: 27px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .span0 {
  line-height: 60px;
}

.index .span1 {
  line-height: 40px;
}

.index .span2 {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxl);
  font-weight: 600;
  line-height: 40px;
}

.index .vector-2 {
  height: 3px;
  position: relative;
  width: 87.5px;
}

.index .frame-44 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  margin-left: -439.00px;
  margin-right: -439.00px;
  position: relative;
  width: 1380px;
}

.index .frame-6 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 17px;
  position: relative;
  width: 768px;
}

.index .rectangle-8 {
  align-self: stretch;
  height: 573px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index .una-versin-contempo {
  height: 152px;
  letter-spacing: -0.60px;
  line-height: normal;
  position: relative;
  width: 643px;
}

.index .diseado {
  display: flex;
  height: 586px;
  position: relative;
  width: 601px;
}

.index .frame-40 {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 532px;
  position: relative;
  width: 601px;
}

.index .rectangle-9 {
  align-self: stretch;
  height: 350px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index .frame-39 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 57px;
  position: relative;
  width: 549px;
}

.index .diseado-para-la-ciudad {
  align-self: stretch;
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-weight: 600;
  letter-spacing: -0.81px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.index .ideal-para-viajar-y {
  align-self: stretch;
  letter-spacing: -0.60px;
  line-height: normal;
  position: relative;
}

.index .finest {

  position: relative;
  width: 100%;
}

.index .video-img {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 43px;
  position: relative;
  width:98%;
}

.index .mangas {
  height: 751.59px;
  position: relative;
  width: 720.16px;
}

.index .overlap-group1 {
  height: 752px;
  position: relative;
  width: 720px;
}

.index .overlap-group {
  height: 752px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1444px;
}

.index .rectangle-13 {
  height: 752px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1440px;
}

.index .rectangle-16 {
  background-color: #ffffffc7;
  height: 752px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1444px;
}

.index .frame-7 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 53px;
  justify-content: center;
  left: 60px;
  position: absolute;
  top: 193px;
  width: 585px;
}

.index .rectangle-15 {
  height: 366px;
  object-fit: cover;
  position: relative;
  width: 366px;
}

.index .con-mangas-y-gorro-d {
  height: 102px;
  letter-spacing: -0.60px;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 417px;
}

.index .video {
  height: 751.59px;
  position: relative;
  width: 719.84px;
}

.index .forma-parte-de-the-f {
  letter-spacing: 0;
  line-height: 35px;
  margin-left: 1.0px;
  margin-top: 54px;
  min-height: 142px;
  text-align: center;
  width: 100%;
}


/* ===== Estilos base: ambos visibles por defecto ===== */
.screen.index,
.screen.blue-coat-mobile {
  display: block;
}

/* ===== Móviles (hasta 767px) ===== */
@media (max-width: 767px) {
  .screen.index {
    display: none !important;
  }
}

/* ===== Tablets (768px a 1024px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .screen.index {
    display: none !important;
  }
}

/* ===== Escritorios (desde 1025px en adelante) ===== */
@media (min-width: 1024px) {
  .screen.blue-coat-mobile {
    display: none !important;
  }
}