body {
    font-family: 'Roboto Slab', serif; /* Cambia 'Roboto Slab' por 'Playfair Display' si prefieres esa */
    background-color: #a0652d; /* Color de fondo */
    background-image: url('fondo.jpg'); /* Ruta a la imagen de textura */
    background-size: cover; /* Asegúrate de que la imagen cubra todo el fondo */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */
    background-attachment: fixed; /* Hace que el fondo no se mueva con el contenido */
    background-position: center; /* Asegura que la imagen esté centrada */
    color: #fff; /* Color del texto blanco para contraste */
}

header {
    background: orange; /* Color anaranjado */
    padding: 10px;
    display: flex; /* Usar flexbox para alinear el contenido */
    flex-direction: column; /* Cambiar a columna para centrar */
    align-items: center; /* Centrar horizontalmente */
    color: #fff; /* Color del texto en el encabezado */
}

.header-content {
    display: flex; /* Usar flexbox para alinear logo y título */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
}

.search-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
#hacerPedidoBtn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    align-self: flex-end; /* Alinea el botón a la derecha */
}

.logo {
    width: 80px; /* Cambia este valor según el tamaño que desees */
    height: auto; /* Mantiene la proporción de la imagen */
    margin: -40px 20px 20px 0; /* Espacio entre el logo y el título */
}

h1 {
    margin: -60px 0 20px; /* Ajusta el margen superior según sea necesario */
    font-size: 74px; /* Ajusta el tamaño de la fuente si es necesario */
    color: #ffffff; /* Cambia el color del texto a blanco */
    text-shadow: 
        0 0 5px #ffcc00, /* Resplandor amarillo */
        0 0 10px #ffcc00, 
        0 0 15px #ffcc00,
        0 0 20px #ffcc00,
        0 0 25px #000000, /* Agrega más capas de brillo para dar efecto 3D */
        2px 2px 0 #030303, /* Efecto 3D */
        4px 4px 0 #010101; /* Efecto 3D adicional */
    animation: brillar 2.5s infinite alternate; /* Animación de brillo */
}

@keyframes brillar {
    from {
        text-shadow: 
            0 0 5px #ffcc00,
            0 0 10px #ffcc00, 
            0 0 15px #ffcc00,
            0 0 20px #ffcc00,
            0 0 25px #ffcc00,
            2px 2px 0 #ffcc00,
            4px 4px 0 #080808; /* Efecto 3D en el inicio */
    }
    to {
        text-shadow: 
            0 0 15px #ffcc00,
            0 0 20px #ffcc00, 
            0 0 25px #ffcc00,
            0 0 30px #ffcc00,
            0 0 35px #ffcc00,
            2px 2px 0 #ffcc00,
            4px 4px 0 #070707; /* Efecto 3D al final */
    }
}

/* Estilos generales para la dirección */
.contacto {
    text-align: left; /* Alinear texto a la izquierda */
    color: #fff; /* Color blanco */
    margin-right: auto; /* Empujar el contenido hacia la derecha */
    display: flex;
    font-weight: bold;
    flex-direction: column; /* Mostrar los datos en columna */
}

.contacto p {
    margin: 0; /* Eliminar márgenes del párrafo */
    font-size: 14px; /* Ajustar el tamaño de fuente según sea necesario */
    color: #fff; /* Cambiar el color del texto a blanco */
}

/* Estilo para el botón de "Hacer Pedido" */
#hacerPedidoBtn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Estilo para el contenedor del formulario */
.formulario-pedido-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Estilo del formulario */
.formulario-pedido {
    background-color: rgb(12, 12, 12);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
}

.formulario-pedido h2 {
    text-align: center;
}

.formulario-pedido label {
    display: block;
    margin-top: 10px;
}

.formulario-pedido input,
.formulario-pedido textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.formulario-pedido button {
    width: 48%;
    padding: 10px;
    margin-top: 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.formulario-pedido button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

.formulario-pedido button[type="button"] {
    background-color: #f44336;
    color: white;
}


.resultado-busqueda {
    position: absolute;
    right: 20px; /* Espacio desde el borde derecho */
    top: 10px; /* Espacio desde el borde superior */
    background: #fff;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #030303; /* Color del texto dentro del resultado de búsqueda */
}

.centered-content {
    text-align: center;
    margin-top: -20px;
    color: #ffffff; /* Cambiar el color del texto a blanco */
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio entre filas */
    margin-top: 30px; /* Espacio superior para la galería */
}

.gallery-row {
    display: flex;
    justify-content: center; /* Centrar los productos */
    gap: 30px; /* Espacio entre productos */
    animation: move-left 30s linear infinite; /* Animación hacia la izquierda */
}

.gallery-row.reverse {
    animation: move-right 30s linear infinite; /* Animación hacia la derecha para la fila inversa */
}

.producto {
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, z-index 0.3s ease; /* Transición para el efecto hover */
    background-color: orange; /* Color de fondo naranja para los productos */
    color: #ffffff; /* Cambiar el color del texto a blanco dentro del producto */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el producto */
    padding: 2px; /* Espaciado interno */
    min-width: 100px; /* Ancho mínimo */
    max-width: 200px; /* Limitar el ancho máximo */
    width: auto; /* Ajustar ancho según contenido */
    box-sizing: border-box; /* Incluir padding y border en el cálculo del ancho */
}
.producto h3, .producto p {
    margin: 0; /* Eliminar márgenes del encabezado y párrafo */
}
.producto:hover {
    transform: scale(1.4); /* Efecto de aumento al pasar el cursor */
}

.producto.selected {
    z-index: 10; /* Eleva el contenedor seleccionado al frente */
    transform: scale(1.2); /* Ajusta el tamaño del contenedor seleccionado */
}

.producto-imagen {
    width: 80%; /* Imágenes escalables */
    height: auto; /* Mantener proporciones */
    max-height: 100px; /* Limitar altura */
}

footer {
    background: orange; /* Color anaranjado */
    padding: 10px;
    text-align: center;
    position: relative;
    color: #fff; /* Color de texto en el footer */
    margin-top: 100px; /* Espacio entre el contenido y el footer */
}

/* Animaciones para el movimiento de las filas */
@keyframes move-left {
    0% { transform: translateX(100%); } /* Comenzar desde el lado derecho */
    100% { transform: translateX(-100%); }
}

@keyframes move-right {
    0% { transform: translateX(-100%); } /* Comenzar desde el lado izquierdo */
    100% { transform: translateX(100%); }
}

h2 {
    margin-top: 40px; /* Ajusta según necesites */
    color: #ffffff; /* Cambia el color del título de la galería */
    text-align: center; /* Centrar el título de la galería */
}

/* Imágenes de las galerías */
#galeriaPlayera img,
#galeriaTermo img,
#galeriaPluma img,
#galeriaBolsa img,
#galeriaCarpeta img,
#galeriaTaza img,
#galeriaLona img,
#galeriaEtiquetas img,
#galeriaFolleto img,
#galeriaInvitacion img,
#galeriaEstampa img,
#galeriaBoletos img,
#galeriaTarjetas img,
#galeriaNotas img,
#galeriaGorra img,
#galeriaPin img,
#galeriaCalendario img,
#galeriaYavero img,
#galeriaFotos img {
    width: 250px; /* Ajusta el ancho según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    margin: 5px; /* Espaciado entre imágenes */
}

/* Estilo para la imagen ampliada */
.imagen-ampliada {
    display: block;
    width: 100%;  /* Establece un ancho fijo */
    height: auto; /* Mantiene la proporción */
    margin: 0 auto;
    border: 5px solid #000; /* Puedes cambiar el color del borde */
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white; /* Fondo blanco para la imagen ampliada */
    padding: 10px; /* Espaciado alrededor de la imagen */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Sombra alrededor de la imagen */
}

/* Estilo para el fondo oscuro */
.fondo {
    display: none; /* Inicialmente oculto */
    position: fixed; /* Fijo para cubrir toda la pantalla */
    top: 0;
    left: 0;
    width: 100%; /* Abarcar toda la pantalla */
    height: 100%; /* Abarcar toda la pantalla */
    background: rgba(0, 0, 0, 0.8); /* Fondo negro con opacidad */
    z-index: 999; /* Asegúrate de que esté encima de otros elementos */
}

/* Media Queries para hacer el diseño responsivo */
@media (max-width: 768px) {

    body {
        background-size: 100% 100%; /* Asegúrate que se estire tanto en ancho como en alto */
        background-position: top center; /* Asegura que la imagen esté centrada en la parte superior */
    }
    .logo {
        width: 80px; /* Reducir el tamaño del logo en pantallas pequeñas */
    }
    h1 {
        font-size: 36px; /* Tamaño de fuente para pantallas más pequeñas */
    }

    .search-form {
        flex-direction: column; /* Apilar los elementos del formulario */
        align-items: center; /* Centrar en el medio */
    }
    .gallery {
        position: relative; /* Permitir posicionamiento relativo */
        width: 100%; /* Ancho completo */
        overflow: hidden; /* Ocultar el desbordamiento */
        gap: 5px; /* Cambia a un valor menor, como 15px */
    }
    

    .producto {
        width: 45%; /* Ajustar a 30% para mostrar tres productos por fila */
        max-width: 250px; /* Limitar el ancho máximo */
    }

    .gallery-row {
        flex-direction: row; /* Mantener en fila para tres columnas */
        justify-content: space-between; /* Espaciado entre productos */
        flex-wrap: wrap; /* Permitir que los productos se ajusten a la fila */
        gap: 15px; /* Espaciado entre productos */
        animation: none; /* Desactiva la animación en pantallas pequeñas */
    }
    
    .gallery-row.reverse {
        animation: none; /* Desactiva la animación en pantallas pequeñas */
    }
    
    .producto:hover {
        transform: none; /* Desactiva el efecto hover en pantallas pequeñas */
    }

    .resultado-busqueda {
        font-size: 12px; /* Tamaño de fuente más pequeño */
        padding: 3px; /* Reducir el espaciado */
    }
}

@media (max-width: 480px) {
    
    .logo {
        margin: 0; /* Eliminar márgenes en pantallas muy pequeñas */
    }

    h1 {
        margin: 0; /* Eliminar margen superior e inferior */
    }
    h1 {
        font-size: 35px; /* Tamaño de fuente aún más pequeño */
    }

    .header-content {
        flex-direction: column; /* Alinear el contenido en columnas */
    }

    .contacto {
        font-size: 0.1px; /* Reducir el tamaño de la letra */
        position: absolute;
        top: 10px;
        left: 10px; /* Moverla a la esquina superior izquierda */
        width: 150px; /* Limitar el ancho para que ocupe varios renglones */
        line-height: 1.0; /* Ajustar el interlineado para que el texto sea más compacto */
    }
    .gallery-row {
        animation: none; /* Desactiva la animación en pantallas pequeñas */
    }
    
    .gallery-row.reverse {
        animation: none; /* Desactiva la animación en pantallas pequeñas */
    }
    .producto:hover {
        transform: none; /* Desactiva el efecto hover en pantallas pequeñas */
    }
}