*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


body{
 display: block;
 width: 100%;
 cursor: all-scroll;
}

header h1{
    text-align: center;
    color: peru;
    font-family: 'Courier New', Courier, monospace;
}

header img{
    display: block;
    width: 100%;
}

header h3{
text-align: center;
font-family:courier, serif;
}

.slider-container {
    width: 90%;
    max-width: 700%;
    overflow: hidden;
    position: relative;
    margin: 25px auto;
    height: 480px;
    border: none;
    background-color: none;
}

.slider {
    display: flex;
    width: 100%;
    height: 100%;
    transistion: transform 0.4s ease-in-out;
    cursor: grab;
}

.slider img {
    width: 100%;
    flex-shrink: 0;
    pointer-events: none;
    height: 100%;
    object-fit: contain;
    
}

.slider a {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: block
}

.flecha {
  position: absolute;   /* Saca los botones de abajo y los sube encima de la foto */
  top: 50%;             /* Los centra verticalmente a la mitad de la imagen */
  transform: translateY(-50%);
  background: transparent; /* Borra el fondo gris de botón viejo */
  color: #333;       /* Cambia el color de la flecha a un gris oscuro elegante */
  border: none;         /* Elimina el borde cuadrado de la caja */
  font-size: 32px;      /* Hace la flecha más grande y fácil de tocar */
  cursor: pointer;
  z-index: 10;          /* Obliga a la flecha a flotar por encima de la imagen */
  padding: 6px 14px;
  border-radius: 50%;;
}

.izquierda {
     left: 15px;}
.derecha {
     right: 15px;}

/* 2. UBICACIÓN IZQUIERDA */
.izquierda {
  left: 10px;           /* Separa la flecha del borde izquierdo de la foto */
}

/* 3. UBICACIÓN DERECHA */
.derecha {
  right: 10px;          /* Separa la flecha del borde derecho de la foto */
}
.flecha:over {
background-color: rgba(0, 0, 0, 0.5)
color: white;
  border: none;
  font-size: 24px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
  z-index: 10;
}

.flecha:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.izquierda { left: 10px; }
.derecha { right: 10px; }


footer{
    text-align: center;
    background-color: peru;
    text-decoration-color: white;
    color: white;
    height: auto
    min-height: 50px;
    padding: 20px 0;
    line-height: 25px;
    margin: 20px auto;
    
}

nav{
    text-align: center;
}

.contenedor-galeria{
    display: grid;
    grid-template-colums: repeat(4, 1fr);
    justify-content: ;
    gap: 20px;
    padding: 40px 20px;
}

.carrito{
    background-color: peru;
    padding: 20px;
}
.carrito figcaption{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;

}
.carrito img{
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.titulo-galeria{
    text-align: left;
    margin-left: 15px;
    margin-bottom: 20px;
    width: auto;
    }
    

.contenedor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 15px;                             /* Espacio limpio entre las fotos */
  padding: 10px;                    /* Más espacio libre respecto a los bordes */
  max-width: 220%;
  margin: 0 auto;                        /* Centra el bloque de fotos en la pantalla */
}
/* Controla que las fotos sean del mismo tamaño y no se deformen */
.contenedor-grid a img {
  width: 100%;
  height: 220px;                         /* Tamaño controlado (no grande) */
  object-fit: cover;                     /* Ajuste limpio sin estirar la imagen */
  border-radius: 6px;                    /* Bordes suavemente redondeados */
  display: block;
}

/* Vista para celulares (pasa a 2 columnas para que no queden minúsculas) */
@media (max-width: 768px) {
  .contenedor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}    
@media (max-width: 480px) {
  .contenedor-grid {
    grid-template-columns: 1fr;
  }
}