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

html {
    scroll-behavior: smooth; /*suavisar el scroll*/
}

/*variables*/
:root {
    --var-bloque-bg-1: url(../images/principal/bloque1.jpg);
    --var-bg-light: rgb(255, 255, 255);
    --var-bg-prueba: rgb(25, 217, 95);
    --var-bg-navbar: rgba(0, 0, 0, 0.7);
    --var-text-color: white;
    --var-bg-foto-1: url(../images/principal/bloque2.1.jpg);
    --var-bg-foto-2: url(../images/principal/bloque2.2.jpg);
    --var-bg-color-bloque-2-gris: rgb(232, 236, 239);
    --var-bg-letras-bloque-2: #7b8386;
    --var-bg-bloque-3-imagen-bg: url(../images/carrusel/instalaciones/c_0.jpg);
    --var-bg-bloque-6-imagen: url(../images/Casa_Cannavera_Entos.jpg);
}
/*fuentes*/

.cursiva {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: 100px;
}


/*variables del body*/
body{
   background: var(--var-bg-light); 
}

/*bloque 1*/

/*contenedor parametros de la seccion*/
.bloque-1{
    background: var(--var-bloque-bg-1);
    height: 100dvh; /*tamaño vertical*/
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center center; /*centrar imagen*/
    margin: 0; /*quitar espaciados de hijos*/
    padding: 0; /*quitar espaciados de hijos*/
    display: flex;/*items en el mismo espacio*/
    align-items: center;/*centrar objetos hijos en el eje Y*/
}

/*color de la barra de navegacion*/
.bg-navbar{
    background: var(--var-bg-navbar);/*color de la barra de navegacion*/
}

/*fuente de letra de titulo*/
.titulo{
    font-family: 'Times New Roman', Times, serif;/*fuente de texti*/
    font-size: 1.8rem;/*tamaño de texto*/
}
/*central*/
.titulo-central{
    font-family: 'Times New Roman', Times, serif;/*fuente de texto*/
    font-size: 3.5rem;/*tamaño de texto*/
}

/*fuente opciones de la barra de navegacion*/
.opciones-fuente{
    font-family: Arial, Helvetica, sans-serif;/*fuente de texto*/
    font-size: 0.9rem;/*tamaño de texto*/
}

/*tamaño letras centrales*/
.letra-central{
    font-size: 1rem;/*fuente de texto*/
}

.sombra-texto{
    text-shadow: black 1px 1px 3px; /*sombras de texto*/
}

/*hacer mayusculas todas las letras*/
.mayusculas{
    text-transform: uppercase;/*transformacion a mayusculas*/
}

/*color de texto*/
.color-texto{
    color: var(--var-text-color);/*color de textos*/
}

/*agregar sinbra a los iconos*/
.sombra-iconos{
    filter: drop-shadow(1px 1px 9px rgba(31, 31, 31, 0.854));/*agrega una sombra a los iconos*/
}

/*bloque 2*/

/*contenedor parametros de la seccion*/
.bloque-2{
    background: var(--var-bg-light);
    height: 100dvh; /*tamaño vertical*/
    margin: 0; /*quitar espaciados de hijos*/
    padding: 0; /*quitar espaciados de hijos*/
}

.bloque-1-5{
    background: var(--var-bg-light);
    height: 100dvh; /*tamaño vertical*/
    margin: 0; /*quitar espaciados de hijos*/
    padding: 0; /*quitar espaciados de hijos*/
}
/*saltos del segundo bloque*/

/*opcupacion del 100%*/
.alto-total{
    height: 100%; /*ocupa todo el alto de la pagina*/
}

/*salto de 10%*/
.salto-6{
    height: 6%; /*ocupa el 8% del alto de la clase padre*/
}

/*salto del 40%*/

.salto-44{
    height: 44%; /*ocupa el 40% del alto de la clase padre*/
}

/*quitar el pading*/
.sin-pading{
    padding: 0;
}

/*100% del widht*/
.full-width{
    width: 100%;
}

/*letra del bloque 2*/
.letra-bloque-2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0cm;
}

/*primera imagen del blocke 2*/
.foto1{
    background: var(--var-bg-foto-1);
    position: relative; /* Necesario para que el ::before sea relativo a .foto1 */
    width: 95%;
    height: 100%;
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center center; /*centrar imagen*/
    border: rgba(150, 150, 150, 0.527) solid 1px;
}

.foto1::after{
    content: ' '; /* Crea el pseudo-elemento */
    position: absolute; /* Posiciona relativo al contenedor padre */
    top: 35px; /* Ajusta hacia abajo */
    left: 50px; /* Ajusta hacia la derecha */
    width: 100%; /* Igual al ancho del contenedor */
    height: 100%; /* Igual a la altura del contenedor */
    z-index: -1; /* debe estar en -1 para posicionarse detras de la foto */
    border: 1px var(--var-bg-color-bloque-2-gris) solid;
}

/*tamaño de fuente de subtitulo*/
.subtitulo{
    font-size: 2rem;
}

.color-sub-subtitulo{
    color: var(--var-bg-letras-bloque-2);
}

/*segunda imagen del blocke 2*/
.foto2{
    background: var(--var-bg-foto-2);
    position: relative; /* Necesario para que el ::before sea relativo a .foto1 */
    width: 95%;
    height: 100%;
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center center; /*centrar imagen*/
    border: rgba(150, 150, 150, 0.527) solid 1px;
}

.foto2::after{
    content: ' '; /* Crea el pseudo-elemento */
    position: absolute; /* Posiciona relativo al contenedor padre */
    bottom: 35px; /* Ajusta hacia abajo */
    right: 65px; /* Ajusta hacia la derecha */
    width: 100%; /* Igual al ancho del contenedor */
    height: 100%; /* Igual a la altura del contenedor */
    z-index: -1; /* debe estar en -1 para posicionarse detras de la foto */
    background: var(--var-bg-color-bloque-2-gris);
}

.foto2::before{
    content: ' '; /* Crea el pseudo-elemento */
    position: absolute; /* Posiciona relativo al contenedor padre */
    top: 50px; /* Ajusta hacia abajo */
    left: 50px; /* Ajusta hacia la derecha */
    width: 100%; /* Igual al ancho del contenedor */
    height: 100%; /* Igual a la altura del contenedor */
    z-index: -1; /* debe estar en -1 para posicionarse detras de la foto */
    border: 1px var(--var-bg-color-bloque-2-gris) solid;

}

.z{
    position: relative;
    z-index: 1; 
}

/*linea*/
.linea{
    height: 1px;
    background: black;
}
/*bloque 3*/
.bloque-3{
    background: var(--var-bg-bloque-3-imagen-bg);
    height: 110dvh; /*tamaño vertical*/
    
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center center; /*centrar imagen*/
    margin: 0; /*quitar espaciados de hijos*/
    padding: 0; /*quitar espaciados de hijos*/
    transition: background-image 0.5s ease-in-out; /* Transición suave */
}


/* 
.bloque-3 {
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.bloque-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* o 'contain', según prefieras /
    transition: all 0.5s ease-in-out;
} */


/*boton izquierdo*/
#btn-anterior{
    background: none;
    border: none;
    filter: drop-shadow(1px 1px 9px rgb(8, 8, 8));/*agrega una sombra al texto*/
}

/*boton derecho*/
#btn-siguiente{
    background: none;
    border: none;
    filter: drop-shadow(1px 1px 9px rgb(8, 8, 8));/*agrega una sombra al texto*/
}

/*letras del bloque 3*/
.letra-bloque-3{
    color: black;
    font-size: 1.2rem;
    font-family: sans-serif;
    letter-spacing: 0cm;
    filter: drop-shadow(1px 1px 9px rgba(255, 255, 255, 0.854));/*agrega una sombra al texto*/
}

/*bloque 4*/
.bloque-4{
    height: 65dvh; /*tamaño vertical*/
}

/*bloque 4*/
.bloque-7{
    height: 220dvh; /*tamaño vertical*/
}

.salto-bloque-4{
    height: 130px;
}

/*bloque 4 letras*/

.negritas-bloque-4{
    font-family: sans-serif;
    font-weight: 500;
    color: var(--var-bg-letras-bloque-2);
}
.negritas-bloque-4:hover{
    color: black;
}

/*bloque 6*/
.eventos{
    background: var(--var-bg-bloque-6-imagen);
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center 69%; /*centrar imagen*/
    height: 73%;
}

/*letras bloque 6*/
.titulo-bloque-6{
    font-size: 2rem;
    text-align: center;
}

.subtitulo-bloque-6{
    font-size: 1rem;
    text-align: center;
}

.boton-bloque-6{
    background: none;
    border: 0;
}

.letraboton{
    font-family: sans-serif;
}

/*fondo de cada evento*/
.evento1{
    background: var(--var-bg-foto-2);
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center 65%; /*centrar imagen*/
    height: 550px;
}

.evento2{
    background: var(--var-bg-bloque-6-imagen);
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center 65%; /*centrar imagen*/
    height: 550px;
}

.evento3{
    background: var(--var-bg-foto-2);
    background-repeat: no-repeat;/*ajustar una sola imagen*/
    background-size: cover;/*tamaño de la imagen*/
    background-position: center 65%; /*centrar imagen*/
    height: 550px;
}
/*texto del evento*/
.texto-amarillo{
    font-family: sans-serif;
    color: rgb(255, 200, 0);
    text-transform: uppercase;
}

.texto-titulo{
    color: white;
    font-size: 2rem;
    text-shadow: black 1px 1px 2px;
}

.texto-subitulo-titulo{
    color: white;
    text-shadow: black 1px 1px 2px;
}

/*letra del titulo de evento*/

.letra-evento-titulo{
    font-size: 2rem;
}

.letra-evento-subtitulo{
    color: var(--var-bg-letras-bloque-2);
}

.bloque-7-laterales{
    width: 90%;
    height: 20%;
    border: none;
}

.bloque-7-central-top{
    width: 100%;
    height: 25%;
    border: none;
}

.bloque-7-central-bottom{
    width: 100%;
    height: 25%;
    border: none;
    margin: auto;
    /* margin-top: 5px; */
}

/*bloque 8*/
.mapa{
    height: 650px;
}

/*footer*/
.pie-pagina{
    background: var(--var-bg-navbar);
}

.Titulo-pie{
    color: rgb(255, 200, 0);
    text-transform: uppercase;
}

.color-letras-pie{
    color: rgb(216, 215, 215);
    text-shadow: black 1px 1px 2px;
}

.letras-chicas-pie{
    color: rgb(216, 215, 215);
    text-shadow: black 1px 1px 2px;
    font-size: 13px;
}

.sin-espaciado{
    margin: 0;
}

.scrollable-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
  }
  .scrollable-container::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento */
  }
  .scrollable-item {
    flex: 0 0 auto;
    margin-right: 10px;
  }

.noestiloa{
    text-decoration: none;  /* Quita el subrayado */
  color: inherit;         /* Quita el color predeterminado del enlace y usa el color heredado */
  background: none;       /* Elimina cualquier fondo */
  }


/*Media querys para visualizacion de diferentes dispositivos*/  
@media screen and (max-height: 700px) and (min-height: 100px) {
    .bloque-1 {
        height: 500px;
    }
    .bloque-2{
        height: 900px;        
    }
    .bloque-4{
        height: 850px;
    }
    .bloque-7{
        height: 600px;
    }
}


/* Móviles */
@media (max-width: 490px) {
    .bloque-2{
        height: 900px;     
    }
    .bloque-4{
        height: 550px; 
    }
  /* Ajusta estilos para teléfonos pequeños */
  .titulo-central{
    font-size: 2.5rem;
  }
  .foto1{
    width: 80%;
    height: 200px;
    }
  .foto1::after{
    content:0;
        top: 10px; /* Ajusta hacia abajo */
        left: 10px; /* Ajusta hacia la derecha */
    }
  /*segunda imagen del blocke 2*/
  .foto2{
    width: 80%;
    height: 200px;
    }
  .foto2::after{
      bottom: 20px; /* Ajusta hacia abajo */
      right: 30px; /* Ajusta hacia la derecha */
    }
  
  .foto2::before{        
      top: 25px; /* Ajusta hacia abajo */
      left: 25px; /* Ajusta hacia la derecha */
    }
    .subtitulo{
        font-size: 1.26rem;
    }
    .color-sub-subtitulo{
        font-size: 0.85rem;
    }

    .mt-arriba{
        margin-top: 20px;
    }

    .letra-evento-titulo{
        font-size: 1.26rem;
    }
    .letra-evento-subtitulo{
        font-size: 0.85rem;
    }
    /*bloque 3*/
    .bloque-3{
        height: 45dvh; /*tamaño vertical*/
    }
    .espaciadogrande{
        width: 20px;
        height: 300px;
    }
    /*bloque 4*/
    .bloque-7{
        height: 60dvh; /*tamaño vertical*/
    }
    .bloque-7-laterales{
        width: 100%;
        height: 100%;
        border: none;
    }
    .bloque-7-central-bottom{
        width: 100%;
        height: 100%;
        border: none;
        margin: auto;
        margin-top: 5px;
    }
    .bloque-7-central-top{
        width: 100%;
        height: 100%;
    }
    /*letras bloque 6*/
    .titulo-bloque-6{
        font-size: 1rem;
    }

    .subtitulo-bloque-6{
        font-size: 0.68rem;
    }
    .boton-bloque-6{
        font-size: 0.8rem;
    }
    /*texto del evento*/
    .texto-amarillo{
       font-size: 0.8rem;
    }
    .texto-titulo{
        font-size: 1.5rem;
    }
    .letraboton{
        font-size: 0.6rem;
    }
}

/* Tablets */
@media (min-width: 491px) and (max-width: 700px) {
  .mt-5-only{
    margin-top: 60px;
  }
  .sombra-iconos{
    width: 30px;
    height: 30px;
  }
  .sombra-iconos-grandes{
    width: 35px;
    height: 35px;
  }

  .foto1{
    width: 80%;
    height: 200px;
    }
  .foto1::after{
    content:0;
        top: 10px; /* Ajusta hacia abajo */
        left: 10px; /* Ajusta hacia la derecha */
    }
  /*segunda imagen del blocke 2*/
  .foto2{
    width: 80%;
    height: 200px;
    }
  .foto2::after{
      bottom: 20px; /* Ajusta hacia abajo */
      right: 30px; /* Ajusta hacia la derecha */
    }
  
  .foto2::before{        
      top: 25px; /* Ajusta hacia abajo */
      left: 25px; /* Ajusta hacia la derecha */
    }

    /*bloque 3*/
    .bloque-3{
        height: 70dvh; /*tamaño vertical*/
    }
    /*bloque 4*/
    .bloque-7{
        height: 190dvh; /*tamaño vertical*/
    }
    /*letras bloque 6*/
    .titulo-bloque-6{
        font-size: 1.2rem;
    }

    .subtitulo-bloque-6{
        font-size: 0.68rem;
    }
    .boton-bloque-6{
        font-size: 1.09rem;
    }
    /*texto del evento*/
    .texto-amarillo{
       font-size: 0.8rem;
    }
    .texto-titulo{
        font-size: 1.5rem;
    }
    .letraboton{
        font-size: 0.7rem;
    }
    .bloque-7-laterales{
        width: 90%;
        height: 50%;
        border: none;
    }
    .bloque-7-central-bottom{
        width: 90%;
        height: 50%;
        border: none;
        margin: auto;
        margin-top: 5px;
    }
    .bloque-7-central-top{
        width: 90%;
        height: 50%;
    }
    
}

/* Laptops pequeñas */
@media (min-width: 701px) and (max-width: 900px) {
  /*letra del bloque 2*/
    .letra-bloque-2{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.79rem;
        letter-spacing: 0cm;
        font-weight: 200;
    }
    /*tamaño de fuente de subtitulo*/
    .subtitulo{
        font-size: 1.19rem;
    }
    .color-sub-subtitulo{
        font-size: 0.79rem;
    }
    /*primera imagen del blocke 2*/
    .foto1{
        width: 85%;
        height: 60%;
    }
    /*segunda imagen del blocke 2*/
    .foto2{
        width: 85%;
        height: 60%;
    }
    .foto2::after{
        bottom: 30px; /* Ajusta hacia abajo */
        right: 40px; /* Ajusta hacia la derecha */
    }
    
    .foto2::before{        
        top: 25px; /* Ajusta hacia abajo */
        left: 25px; /* Ajusta hacia la derecha */
    }
    /*bloque 4*/
    .bloque-7{
        height: 150dvh; /*tamaño vertical*/
    }
    .bloque-7-laterales{
        width: 100%;
        height: 100%;
        border: none;
    }
    .bloque-7-central-bottom{
        width: 100%;
        height: 50%;
        border: none;
        margin: auto;
        margin-top: 5px;
    }
    /*letras bloque 6*/
    .titulo-bloque-6{
        font-size: 1.5rem;
    }

    .subtitulo-bloque-6{
        font-size: 0.68rem;
    }
    .boton-bloque-6{
        font-size: 1.2rem;
    }
    /*texto del evento*/
    .texto-amarillo{
       font-size: 0.8rem;
    }
    .texto-titulo{
        font-size: 1.5rem;
    }
    .letras-chicas-pie{
        font-size: 11px;
    }

}

@media (min-width: 901px) and (max-width: 1000px) {
    .bloque-7{
        height: 235dvh; /*tamaño vertical*/
    }

}

@media (min-width: 1001px) and (max-width: 1199px) {
    /*letra del bloque 2*/
    .letra-bloque-2{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0cm;
        font-weight: 200;
    }

    /*primera imagen del blocke 2*/
    .foto1{
        width: 95%;
        height: 95%;
    }
    .foto1::after{
        top: 25px; /* Ajusta hacia abajo */
        left: 40px; /* Ajusta hacia la derecha */
    }
    /*segunda imagen del blocke 2*/
    .foto2{
        width: 95%;
        height: 95%;
    }
    .foto2::after{
        bottom: 35px; /* Ajusta hacia abajo */
        right: 45px; /* Ajusta hacia la derecha */
    }
    
    .foto2::before{        
        top: 30px; /* Ajusta hacia abajo */
        left: 30px; /* Ajusta hacia la derecha */
    }
    /*tamaño de fuente de subtitulo*/
    .subtitulo{
        font-size: 1.3rem;
    }
    .color-sub-subtitulo{
        font-size: 0.8rem;
    }

    /*letras bloque 6*/
    .titulo-bloque-6{
        font-size: 1.5rem;
    }

    .subtitulo-bloque-6{
        font-size: 0.8rem;
    }
    .boton-bloque-6{
        font-size: 1.5rem;
    }
    /*texto del evento*/
    .texto-amarillo{
       font-size: 0.8rem;
    }
    .texto-titulo{
        font-size: 1.5rem;
    }
    
    /*bloque 4*/
    .bloque-7{
        height: 160dvh; /*tamaño vertical*/
    }
}


@media (min-width: 1201px) and (max-width: 1450px) {
    .bloque-7{
        height: 170dvh; /*tamaño vertical*/
    }

}

@media (min-width: 1451px) and (max-width: 1600px) {
    .bloque-7{
        height: 190dvh; /*tamaño vertical*/
    }

}

/* Estilo principal para pantallas grandes */
@media (min-width: 1601px) {
  /* Aquí tu diseño funciona bien */
    
    /*bloque 4*/
    .bloque-7{
        height: 220dvh; /*tamaño vertical*/
    }
}

.salto-extra{
    width: 20px;
    height: 200px;
}


.custom-size {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    width: 80vw;
    object-fit: cover;
    object-position: center; /* Centrar la imagen dentro del contenedor */
    overflow: hidden; /* Ocultar cualquier parte de la imagen que exceda el contenedor */
  }
  
  /* width: 100vw; 
  height: 80dvh;      */
  /* max-width: 100%;
  max-height: 100dvh;  */
  /* object-fit: cover;  */
  /*object-position: center;  Centrar la imagen en el contenedor */
  /*overflow: hidden;  Ocultar cualquier parte de la imagen que exceda las dimensiones */
  

/* Estilos para centrar y escalar la imagen */
.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh; /* Altura mínima para centrar verticalmente */
}

.modal-body {
    padding: 0; /* Elimina el padding para evitar márgenes adicionales */
}

.modal-content {
    background-color: transparent; /* Para evitar bordes alrededor de la imagen */
    border: none; /* Elimina cualquier borde del modal */
}

.modal-image {
    max-width: 100%;
    max-height: 90vh; /* Altura máxima del 100% del viewport */
    display: block; /* Asegura que la imagen sea un bloque para evitar espacios */
}

/* Establecer tamaño dinámico para las imágenes de los recuadros */
.img-thumbnail.bloque-7-laterales,
.img-thumbnail.bloque-7-central-top {
    width: 25vw; /* Ancho dinámico basado en el ancho del viewport */
    height: 25vw; /* Altura dinámica igual al ancho para mantener proporciones cuadradas */
    object-fit: cover; /* Mantener proporciones de la imagen y recortar si es necesario */

}

/* Establecer tamaño dinámico para las imágenes en el modal */
.modal-image {
    max-width: 100%;
    max-height: 80vh; /* Altura máxima del 80% del viewport */
    width: auto;
    height: auto;
}

/* Alinear las imágenes al centro de sus contenedores en el bloque-7 */
#bloque-5.bloque-7 .row {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    flex-wrap: wrap; /* Para que las imágenes se ajusten en varias filas si es necesario */
}

#bloque-5.bloque-7 .col-4 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar horizontalmente */
}