*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}

body{

background-color: #E3E3E3;


}


                                          /* SCROLL */


/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: rgba(178, 255, 255, 0.5);
  border-radius: 10px;


}
@media (min-width: 400px) {
::-webkit-scrollbar {
  width: 5px;
  height: 7px;
  }
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(254, 254, 254, 0.4); 
  border: solid black 0px;
  border-radius: 10px;



}

 
/* Handle */
::-webkit-scrollbar-thumb {
  width: 15px;
  height: 15px;
  /*
  background: #2196F3;
  */
  background-color: rgba(0, 0, 0, 0.8);
  border: solid skyblue px; 
  border-radius: 4px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #B16BB1; 

}

.base{
background-image: url("img/pared03-1.png");
background-color: #E3E3E3;
background-position:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  border: solid px red;
  overflow-y: hidden;

}

@media (min-width: 600px) {
.base {
  width: 70%;
  background-color: ;
  }
}

.espacio{
  width: 100%;
  height: 100px;
  border: solid px white; 
margin: px;
}

/*
@media (min-width: 400px) {
.espacio {
  width: ;
  height: 25%;
  }
}
@media (min-width: 600px) {
.espacio {
  width: ;
  height: 20%;
  }
}

*/

.encabezado{
background-image: url("img/pared03-1.png");
background-color: #E3E3E3;
background-position:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-color:  ;
  width: 100%;
  height: 100px;
  border: solid px blue; 

  z-index: 99;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around; 
  
}
@media (min-width: 600px) {
.encabezado {
  width: 70%;
  height: 100px;
  }
}

.logo{
width: 40%;
height: 100%;
border: solid px black; 
display: flex;
align-items: center;
justify-content: center; 
}
.logo img{
  width: auto;
  height: 85;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
}

@media (min-width: 700px) {
.logo img {
  width: ;
  height: 95%;
  }
}


.iconos{
  background-color: #ffffff;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
  width: 25%;
  height: 40%;
  border: solid px gray;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-around;
margin-right: 5px;

}

@media (min-width: 700px) {
.iconos {
  width: 20%;
  height: 40%;
  }
}

@media (min-width: 1000px) {
.iconos {
  width: 15%;
  height: 50%;
  }
}


.iconos img{
  width: 25px;
  height: auto;
}




                                            /* MENU RAPIDO */

/* --- Ajuste para que no se mueva --- */
.input-oculto {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- Tu cuadro de botón menú (Medidas originales) --- */
.menurapido {
  background-color: #ffffff;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
  width: 25%;
  height: 40%;
  border-radius: 3px;
  padding-top: 9px;
  display: flex;
  margin-left: 5px;
  justify-content: space-around;
  z-index: 98;
  position: relative; /* Necesario para los links */
}

@media (min-width: 700px) {
  .menurapido { width: 20%; height: 40%; }
}

@media (min-width: 1000px) {
  .menurapido { width: 15%; height: 50%; }
}

/* --- Imagen del menú --- */
.menurapido img {
  width: 25px;
  height: auto;
}

@media (min-width: 1000px) {
  .menurapido img { padding-top: 4px; }
}

/* --- Botón (Label) --- */
.boton {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
}

/* --- La Magia: Mostrar al hacer clic --- */
#check_menu:checked ~ .links {
  display: block;
}

/* --- Tus Links (Estilo original conservado) --- */
.links {
  display: none; /* Se activa con el checkbox */
  position: absolute;
  top: 100%; /* Aparece justo debajo del cuadro */
  left: 0;
  width: 140px;
  background-color: transparent;
  margin-top: 5px;
}

.links a {
  width: auto;
  height: 35px;
  text-decoration: none;
  background-color: white;
  font-family: "Sriracha", serif;
  font-size: 15.5px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 5px;
  margin: 5px;
  border-radius: 2px;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
  transition: transform 0.2s;
}

.links a:hover {
  transform: scale(1.2);
  background-color: #f1f1f1; /* Corregido f1f1f1 -> #f1f1f1 */
}

.desplegable {
  width: 25px;
}



/*
.desplegable:hover .links{
  display: block;


}
.desplegable{
  position: ;
  width: 25px;
  border: solid red px;

}
*/
.contenidomd{
  width: 100%;
  height: 85%;
  border: solid red px;
  overflow-y: auto;

}


      /* saludo */


.saludo-container{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 40PX;
  padding: 10PX;
  max-width: 1200PX;
  margin: 0 auto;
  border: solid yellow px;
    display: flex;
  align-items: center;
  justify-content: space-around;

}

.saludocard{
  width: 100%;
  aspect-ratio: 3/2;
  background-color: ;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 1); 
  
  border: solid darkred px;

}

@media (min-width: 1000px) {
.saludocard {
  width: 50%;
  }
}


.saludocard21{
  width: 75%;
  aspect-ratio: 3/1;
  background-color: ;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 1); 
 
  border: solid darkred px;
}

@media (min-width: 1000px) {
.saludocard21 {
  width: 40%;
  }
}


.saludocard21 img{
  width: 100%;
  height: ;
  object-fit: cover;
  display: block;
  border: solid yellow px;

}

/*
.saludocard img:hover{
  transform: scale(0.8);
}
*/

.saludocard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: solid yellow px;

}


      /* galeria */


.gallery-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 40PX;
  padding: 10PX;
  max-width: 1400PX;
  margin: 0 auto;
  border: solid yellow px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
  

}


.card{
  flex: 0 1 350px;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background-color: ;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 1); 
  
  border: solid darkred px;
}

@media (min-width: 1000px) {
.card {
  flex: 0 1 250px;
  }
}



@media (min-width: 1200px) {
.card img:hover{
  transform: scale(0.8);
  }
}



.card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: solid yellow px;

}










/* contenedor de cada imagen */

/* contenedor video */


.gal-w {
 /*background-color: rgba(168, 81, 168, 0.0);*/
 width: 230px;
 height: 170px;
 display: flex;
 border: solid black px;
 border-radius: 10px;
 scroll-snap-type: x mandatory;
 overflow-x: scroll;
 overflow-y: hidden;
 margin: 15px;
}
.gal-w::-webkit-scrollbar {
  display: ;
}

@media (min-width: 350px) {
.gal-w {
 width: 350px;
 height: 270px;
  }
}

@media (min-width: 650px) {
.gal-w::-webkit-scrollbar {
  display: initial;
  width: 5px;
  height: 5px;
  background-color: rgba(256, 256, 256, 0.5);
  border-radius: 10px;
  }
}


.galfsep{
  padding-bottom: 15px;
}

.item-w {
 background-color: rgba(0, 0, 0, 0.0);
 width: 230px;
 height: 170px;
 border:solid px blue;
 
  display: flex;
  align-items: center;
  justify-content: center;
     scroll-snap-align: center;

}

@media (min-width: 350px) {
.item-w {
 width: 350px;
 height: 250px;
  }
}

.item-w img{
 margin-top: 0px;
 box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
 width: auto; /*85%*/
 height: 85%; /*auto*/
 border-radius: 3px;
 scroll-snap-align: center;

}

.item-h {
 background-color: rgba(0, 0, 0, 0.0);
 width: 230px;
 height: 170px;
 border:solid px blue;
 
  display: flex;
  align-items: center;
  justify-content: center;
     scroll-snap-align: center;

}

@media (min-width: 350px) {
.item-h {
 width: 350px;
 height: 250px;
  }
}

.item-h img{
 margin-top: 0px;
 box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
 width: 85%; /*85%*/
 height: ; /*auto*/
 border-radius: 3px;
 scroll-snap-align: center;

}

.contenedorsli-w{
 background-color: rgba(0, 225, 0, 0.0);
 width: auto;
 height:auto;
 position: relative;
 display: inline-block;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;

}
                                          /* TEXTO ENCIMA*/
.texto-encima-w{
 background-color: rgba(256, 256, 256, 1);
 width: auto;
 border: solid black px;
 height: 17px;
 font-size: 25px;
 padding: px;
 border-radius: 50px;
 position: absolute;
 bottom: 0px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 opacity: .8;
 /*quitar z-index
 z-index: 20;
 */
}

.texto-encima-w{
  display: none;
}

.texto-encima-w img{
  width: auto;
  height: 80%;
  margin: 3px;
}

.videodiv-w{
 width: 90%;
 height: auto;
 box-shadow: -5px 5px 5px rgba(0, 0, 0, 1);
 border: px solid yellow;
 border-radius: 2px;
 padding: px;
 overflow: hidden;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 scroll-snap-align: center;
 border-radius: px;
 
 
}

@media (min-width: 750px)
.videodiv-w{
 width: 100px;
 height: 150px;
padding: 5px;

  }
}

.videodiv-w video {
 width: 350px;
 height: 250px;
 border-radius: 4px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 align-items: center;
 justify-content: center;
 /*quitar z-index
 z-index: 10;
 */
scroll-snap-align: center;


}



/* GALERIA 4-5 */

        /* CONTENEDOR MAESTRO (GRID) */
        .galeria-maestra {
            display: grid;
            gap: 20px;
            width: 90%;
            max-width: 1200px;
            border: solid red px;
            margin-top: 20px;

        }

        /* RESPONSIVIDAD DEL GRID */
        /* Celular: 1 columna */
        @media (max-width: 767px) {
            .galeria-maestra { grid-template-columns: 1fr; }

        }
        /* Tablet: 2 columnas (2 arriba, 2 abajo) */
        @media (min-width: 768px) and (max-width: 1023px) {
            .galeria-maestra { grid-template-columns: repeat(2, 1fr); }
        }
        /* PC: 3 columnas (4 en una fila) */
        @media (min-width: 1024px) {
            .galeria-maestra { grid-template-columns: repeat(3, 1fr); }
        }

        /* DISEÑO DE LAS 4 TARJETAS */
        .tarjeta {
            background-image: url("img/pared03-1.png");
background-color: #E3E3E3;
background-position:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
            margin-left: 5px;
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 5; /* Proporción 2:3 */
            /*
            box-shadow: 0 4px 15px rgba(0, 0, 0, 1); 
            */
            border-radius: 7px;
            overflow: hidden; /* ESTO ES LO MÁS IMPORTANTE: oculta las fotos extras */
            border: solid yellow px;

border: solid px black;


    /* PROFUNDIDAD HACIA LA IZQUIERDA */
    /* Cambiamos 5px por -8px (ajusta el número según qué tan grueso lo quieras) */
     
box-shadow: 0 4px 15px rgba(0, 0, 0, 1);

     /* box-shadow: 
        -5px 4px 0px 0px black,  El signo "-" lo mueve a la izquierda */
        /*-12px 12px 15px rgba(0,0,0,0.1); Sombra suave de apoyo también a la izquierda */

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

/* Efecto opcional de presión para el lado izquierdo */
.tarjeta:hover {
    transform: translate(-4px, 4px); /* Se mueve hacia la esquina inferior izquierda */
    box-shadow: -4px 4px 0px 0px #222;
}


/* EFECTO ZOOM */
/*
.tarjeta:hover {
    transform: scale(1.5); 
    box-shadow: -4px 4px 0px 0px #222;
    z-index: 999;
}

*/




        .tarjeta img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 7px;


        }

/*
          .tarjetavertical {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 5; 
            border-radius: 5px;
            overflow: hidden; 
            
            border: solid yellow px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tarjetavertical img {
            width: 100%;
            height: ;
            object-fit: cover;
            display: block;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 1);
              border-radius: 20px;
        }

*/




        /* LÓGICA DEL SLIDER INTERNO (Para tarjetas 2 y 4) */
        .contenedor-slider {
            display: flex; /* Pone las imágenes en fila india */
            width: 100%;
            height: 100%;
            overflow-x: auto; /* Permite deslizar horizontalmente */
            scroll-snap-type: x mandatory; /* Efecto imán */
            -webkit-overflow-scrolling: touch;
        }

 /* Estilo para la barra de scroll en PC */
.contenedor-slider::-webkit-scrollbar {
    height: 10px; /* Altura de la barra horizontal */
    display: block; /* La mostramos */
}

.contenedor-slider::-webkit-scrollbar-thumb {
    background: rgba(178, 255, 255,0.8); /* Color del "agarre" */
    border-radius: 10px;
    border: solid black 2px;
}

.contenedor-slider::-webkit-scrollbar-track {
    background: rgba(0,32,64,0.9); /* Color del fondo de la barra */
}
        .contenedor-slider img {
            flex: 0 0 100%; /* Cada imagen ocupa el 100% del ancho de la tarjeta */
            width: 100%;
            height: 100%;
            scroll-snap-align: start;
            
        }

        /* ETIQUETA INFORMATIVA */
        .indicador {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            pointer-events: none;
            z-index: 10;
        }



        /* tipo MASONRY */

        .galeria-armoniosa {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 20px;
  align-items: start; /* Evita que las filas se estiren de forma extraña */
}

.item {
  width: 100%;
  background: #eee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}

/* Proporción 4:5 Vertical */
.item.vertical {
  aspect-ratio: 4 / 5;
}

/* Proporción 4:5 Horizontal (Invertida) */
.item.horizontal {
  aspect-ratio: 5 / 4;
}

.item img {
  width: 100%;
  height: 100%;
  /* Esto elimina los espacios blancos y rellena el área */
  object-fit: cover; 
  display: block;
}

/* TRUCO PARA ARMONÍA: En pantallas grandes, 
   hacemos que las horizontales ocupen más espacio si es necesario */
@media (min-width: 1024px) {
  .item.horizontal {
    grid-column: span 1; /* Puedes cambiar a span 2 si quieres que resalten */
  }
}