@import url('https://fonts.cdnfonts.com/css/monaco');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --main-radius: 8px;
    --main-padding: 5px;
    --color-primary: #c4950b;
    --color-secondary: #411F1F;
    --color-background: #0000009a;
    --color-text:#ffffff;
    
  }
  
  body {
    font-family: 'Poppins', 'Monaco';
    background-color: #000000;
    font-size: 0.8em;
    text-align: center;

  }
/*  
  .grid {
    position: block; 
    .block-flow {
  margin-block-start: min(4rem, 8vh);
}
}*/
/*
.scale-up-hor-center {
	-webkit-animation: scale-up-hor-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: scale-up-hor-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
*/
/*
.button-like {
  appearance: button; 
  --glow-color: rgb(255, 234, 176); 
  --glow-spread-color:rgba(255, 244, 123, 0.781);
  --enhanced-glow-color:rgb(255, 253, 206);
  --btn-color: rgb(60, 34, 3);
  border: 0.25em solid var(--glow-color); 
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 15px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0.25em 0.25em 0.25em 0.25em var(--glow-color), 
        0 0 0.1em 0.1em var(--glow-spread-color),
        inset 0.1em 0.1em var(--glow-color);
  text-shadow: 0 0 0.5em var(--glow-color); 
  position: relative;
  transition: all 0.3s;
  
  }

.scale-up-hor-center {
  display: block;
  position: sticky;
  top: 0;
}
*/
/* grid Layout */

  .containerTitle {
    display: grid;
    position: block;
    margin-left: 5vw;
    margin-right: 5vw;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 3fr 1.2fr 0.2fr;
    grid-template-areas:
      "nav nav nav"
      "main main main"
      "content1 content2 content3"
      "ubicacion ubicacion ubicacion"
      ;
    grid-gap: 1rem;
    font-weight: 450;
    text-transform: none;
    font-size: 0.8em;
    text-align: center;  
  }
  main {
    background: none;
    color: #ffffff;
    grid-area: main;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
  }
  .titulo {
    font-size: 8em;
    font-weight: 700;
    text-transform: none;
    content: center;
    justify-self: center;
    align-self: center;
    font-family: 'Monaco';
  }
  .letra {  
    width: 100%;
    height: auto;
    max-width: 0.85em; 
    margin-bottom: -8px;
  }
  #rotating-image {
    width: 100%;
    height: 100%;
    position: relative;
    animation: spin 10s linear infinite; /* animación que gira eternamente */
  }
  @keyframes spin {
    0% { transform: rotate(0deg); } /* comienzo de la rotación */
    100% { transform: rotate(360deg); } /* fin de la rotación */
  }

  

  nav {
    background-color: none;  
    color: #ffffff;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: 20px;
  }  
  .bibi-instagram {
    position: block;
    height: 3rem;
    width: 3rem;
    color:#c4950b;
    padding-top: 0.5rem;   
  }


  
  #content1 {
    background:#411F1F;
    color:#ffffff;
    grid-area: content1;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    font-size: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);
    content: center;
    align-self: center;   
  } 
  #content2 {
    background:#c4950b;
    color:#ffffff;
    grid-area: content2;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    font-size: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);
    content: center;
    align-self: center;
  }  
  #content3 {
    background:#927008;
    color:#ffffff;
    grid-area: content3;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
    font-size: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);
    content: center;
    align-self: center;
  }
  





/* Galeria de videos */
  .containerGaleria {
    display: grid;
    margin-top: 0.3em;
    /*background-color: #c4950b;*/
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    grid-auto-rows: 6rem;
    grid-auto-flow: dense;
    grid-gap: 0.5rem;
    margin-inline: 15%;
  }
  
  video {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  #divgaleria {
    overflow: hidden;
    border-radius: var(--radius);
  }
  
  #divgaleria:nth-child(5n) {
    grid-row: span 3;
    grid-column: span 1;
  }
  
  #divgaleria:nth-child(5n + 1) {
    grid-row: span 2;
  }
  
  #divgaleria:nth-child(5n + 2) {
    grid-column: span 3;
  }
  
  #divgaleria:nth-child(5n + 3) {
    grid-row: span 4;
    grid-column: span 2;
  }
  
  #divgaleria:nth-child(5n + 4) {
    grid-row: span 2;
    grid-column: span 2;
  }
  
  

  .iframes991 {
   display: none;           
  }
 


.containersubtitle {
  display: grid;
  place-items: center;
  margin-inline: 9vw;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-areas: 
  "Logo TX TX"
  "Logo TX TX"
  "Logo TX TX";
  font-weight: none;
  margin-top: 50px;
  background-color: #927008;
  border-radius: var(--main-radius);
  
}
#LogoBlanco {
  grid-area: Logo;
}
.imgLogoBlanco {
  aspect-ratio: 1/1;
  width: 300px; /* Ancho deseado */
   /* Alto deseado */
}
#textoLogo {
  
  grid-area: TX;
  color: #ffffff;
  text-transform: none;
  font-size: x-large;  
}






/* Mezcla en vivo texto, Portafolio */
h3 {
  font-weight: normal;
  font-size: clamp(2rem, 1.091rem + 2.424vw, 4rem);
  color: #ffffff;
}



#iframeqs {
  aspect-ratio: 16/9;
  width: 50% !important;
}



/* Logo ubicación*/
.bibi-geo-alt-fill {
  position: block;
  height: 5rem;
  width: clamp(3rem, 2.091rem + 2.424vw, 5rem);
  color:#c4950b;   
}
.textoUbicacion {
  position: block;
  justify-content: center;
  align-items: center;
  grid-area: ubicacion;
  font-size: clamp(2rem, 1.091rem + 2.424vw, 4rem);
  justify-self: center;
  align-self: center;
  color: #ffffff;
}


               

          @media only screen and (min-width: 1920px){
            /* iframes */
             #contenedor {
              pointer-events: auto;
            }
            #iframe {
              pointer-events: auto ; 
            }
            #iframe.inactivo {
              pointer-events: none; 
            }

            /* galería con iframes*/

            .slider-container {
              display: flex;
              font-family: "Poppins", 'Monaco';
              color: #ffffff;
              font-weight: 700;
              text-transform: none;
              font-size: 0.8em;
              text-align: center;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .slider-images{
              display: flex;
              align-items: center;
            
            }
            .slider-images iframe{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
            .slider-img{
              width: 5.7vw;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              transition: 0.2s ease;
            }
            .slider-images .slider-img:first-child, .slider-images .slider-img:last-child{
              height: 400px;
            }
            .slider-images .slider-img:nth-child(2), .slider-images .slider-img:nth-child(6){
              height: 400px;
            }
            .slider-images .slider-img:nth-child(3), .slider-images .slider-img:nth-child(4), .slider-images .slider-img:nth-child(5){
              height: 585px;
            }


            h1{
              border-radius: var(--main-radius);
              white-space: nowrap;
              font-size: clamp(1rem, -0.05rem + 112vw, 2.75rem);
              font-weight: 700;
              text-align: left;
              color: #ffffff;
              position: absolute;
              top: 50%;
              left: -70%;
              transform: rotate(270deg);
              transition: 0.7s ease;
              content: center;
              justify-self: center;
              align-self: center;
              padding: 10%;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);                
            }
            h2 {
              border-radius: var(--main-radius);
              content: center;
              justify-self: center;
              align-self: center;
              padding: 2%;
              border-radius: 10%;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            }

            .details{
              position: absolute;
              bottom: 43px;
              left: 43px;
            }
            .details h2{
              flex-wrap: wrap;
              border-radius: var(--main-radius);
              font-size: clamp(1rem, 0.583rem + 133.333vw, 2rem);
              font-weight: 700;
              line-height: 44px;
              text-align: center;
              color: #ffffff;
              transition: 0.7s ease;
              display: none;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
              
            }
            .details p{
              border-radius: var(--main-radius);
              padding: 2%;
              font-size: 20px;
              font-weight: 700;
              line-height: 33px;
              text-align: center;
              color: #ffffff;
              transition: 0.7s ease;
              display: none;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
              
            }   
            /*Hover effect*/  
            .slider-img.active{
              width: 34.6vw !important;
              height: 650px !important;
            }
            .slider-img.active h1{
              display: none;
            }
            .slider-img.active .details p, .slider-img.active .details h2{
              display: block;
            }

            .color1 {
              background-color:#411F1F;
            }

            .color2 {
              background-color:#c4950b; 
            }

            .color3 {
              background-color: #927008; 
            }

            #kenovertical {
              left: -113%;
              top: 50%;
            }
            #alivertical {
              left: -145%;
              top: 57%;
            }
            #cadenciavertical {
              left: -181%;
              top: 59%;
            }
            #FelioArchipielago {
              left: -101%;
              top: 48%;
            }
            #FelioEmperatriz {
              left:  -100%;
              top: 48%;
            }
            #FelioConosur {
              left: -100%;
              top: 47%;
            }
            .iframes991 {
              display: none;
            }
            #contenedor991 {
              display: none;
            }
          }              

          
          @media only screen and (min-width: 1400px){
            .iframes991 {
              display: none;
            }
            #contenedor991 {
              display: none;
            }
            .containerTitle {
              margin-inline: 8vw;
            }  /*pa
            ra que el hero se vea bien en pantallas wide */
          }

          /* important */
          @media only screen and (min-width: 992px){

            /* iframes */
             #contenedor {
              pointer-events: auto;
            }
            #iframe {
              pointer-events: auto ; 
            }
            #iframe.inactivo {
              pointer-events: none; 
            }

            /* galería con iframes*/

            .slider-container {
              display: flex;
              font-family: "Poppins", 'Monaco';
              color: #ffffff;
              font-weight: 700;
              text-transform: none;
              font-size: 0.8em;
              text-align: center;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .slider-images{
              display: flex;
              align-items: center;
            
            }
            .slider-images iframe{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
            .slider-img{
              width: 5.7vw;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              transition: 0.2s ease;
            }
            .slider-images .slider-img:first-child, .slider-images .slider-img:last-child{
              height: 400px;
            }
            .slider-images .slider-img:nth-child(2), .slider-images .slider-img:nth-child(6){
              height: 400px;
            }
            .slider-images .slider-img:nth-child(3), .slider-images .slider-img:nth-child(4), .slider-images .slider-img:nth-child(5){
              height: 585px;
            }


            h1{
              border-radius: var(--main-radius);
              white-space: nowrap;
              font-size: clamp(1rem, -0.05rem + 112vw, 2.75rem);
              font-weight: 700;
              text-align: left;
              color: #ffffff;
              position: absolute;
              top: 50%;
              left: -70%;
              transform: rotate(270deg);
              transition: 0.7s ease;
              content: center;
              justify-self: center;
              align-self: center;
              padding: 10%;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);                
            }
            h2 {
              border-radius: var(--main-radius);
              content: center;
              justify-self: center;
              align-self: center;
              padding: 2%;
              border-radius: 10%;
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            }

            .details{
              position: absolute;
              bottom: 43px;
              left: 43px;
            }
            .details h2{
              flex-wrap: wrap;
              border-radius: var(--main-radius);
              font-size: clamp(1rem, 0.583rem + 133.333vw, 2rem);
              font-weight: 700;
              line-height: 44px;
              text-align: center;
              color: #ffffff;
              transition: 0.7s ease;
              display: none;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
              
            }
            .details p{
              border-radius: var(--main-radius);
              padding: 2%;
              font-size: 20px;
              font-weight: 700;
              line-height: 33px;
              text-align: center;
              color: #ffffff;
              transition: 0.7s ease;
              display: none;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
              
            }   
            /*Hover effect*/  
            .slider-img.active{
              width: 34.6vw !important;
              height: 650px !important;
            }
            .slider-img.active h1{
              display: none;
            }
            .slider-img.active .details p, .slider-img.active .details h2{
              display: block;
            }

            .color1 {
              background-color:#411F1F;
            }

            .color2 {
              background-color:#c4950b; 
            }

            .color3 {
              background-color: #927008; 
            }

            #kenovertical {
              left: -126%;
              top: 50%;
            }
            #alivertical {
              left: -163%;
              top: 57%;
            }
            #cadenciavertical {
              left: -203%;
              top: 59%;
            }
            #FelioArchipielago {
              left: -112%;
              top: 48%;
            }
            #FelioEmperatriz {
              left:  -112%;
              top: 48%;
            }
            #FelioConosur {
              left: -114%;
              top: 47%;
            }
            .iframes991 {
              display: none;
            }
            #contenedor991 {
              display: none;
            }
          }              



          /* important*/
          @media only screen and (max-width: 991px){
            :root{
              margin-inline:  3%;
            }

            /*layout inicial*/
            .containerTitle {
              position: block;                    
              grid-template-columns: 1fr;
              grid-template-rows: 0.6fr 3fr 1fr 1fr 1fr 1fr ;
              grid-gap: 0.5rem;
              grid-template-areas:
                "nav"
                "main"
                "content1"
                "content2"
                "content3"
                "ubicacion"
                ;
              margin-inline: 2%;
            } 
            #titulo {
              font-size: 9.5em;
            }
            #content1 {
                background:#411F1F;
                color: #ffffff;
                grid-area: content1;
                border-radius: var(--main-radius);
                padding-top: var(--main-padding);
                font-size: 3.6em;
                content: center;
                justify-content: center;
                align-items: center;
              }
              
              #content2 {
                background: #c4960b8f;
                color: #ffffff;
                grid-area: content2;
                border-radius: var(--main-radius);
                padding-top: var(--main-padding);
                font-size: 3.6em;
                content: center;
                justify-content: center;
                align-items: center;
              }
              
              #content3 {
                background:#c4960b42;
                color: #ffffff;
                grid-area: content3;
                border-radius: var(--main-radius);
                padding-top: var(--main-padding);
                font-size: 3.6em;
                content: center;
                justify-content: center;
                align-items: center;
              }


              /* galeria en movil */
              .containerGaleria {
                margin-inline: 0%;
              }

              /*v7
              .achicarvideo1 {

              }*/
              /* v9*/
              .achicarvideo2 {
                display: none;
              }


              /* mediaquery para subtitulo con logo*/
          
            .containersubtitle {
              display:block;
              margin-top: 20%;
              padding-inline: 10%;
              padding-bottom: 10%;
              padding-top: 5%;
            }
            .imgLogoBlanco {
              width: 50%;  
            }



            /* mediaquery para galeria de iframes*/

            .slider-container {
              display: none;
              
            }
            .iframes991 {
              display: block;
              color: #ffffff;
              
              font-family: 'Poppins', 'Monaco';
              padding-top: 2%;
              padding-bottom: 2%;
              padding-inline: 2%;
            }

            .i991 {
              border-radius: var(--main-radius);
            }
              


            
            
            .color1 {
              background-color:#411F1F;
            }

            #color1 {
              background-color:#411F1F;
            }

            .color2 {
              background-color:#c4950b; 
            }

            #color2 {
              background-color:#c4950b; 
            }

            .color3 {
              background-color: #927008; 
            }

            #color3 {
              background-color: #927008; 
            }



            #iframeqs {
              aspect-ratio: 16/9;
              width: 80% !important;
            }

          }

          @media only screen and (max-width: 767px){
          }
          @media only screen and (max-width: 479px){          
          }          
                      
          @media only screen and (max-width: 600px) {
          }  

              

              
          

          /* Código para liberar el estilo de 600px para abajo */
          @media only screen and (min-width: 600px){   
          }