@font-face {
    font-family: 'Airplanes in the Night Sky';
    src: url('/functions/fonts/AirplanesInTheNightSky.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Aplicar la fuente a TODOS los títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Airplanes in the Night Sky', sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 🔹 ESTILOS PARA EL LOGO EN EL MENÚ */
.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 🔹 Centra el logo */
    top: 10px; /* 🔹 Ajusta la posición */
    z-index: 1001; /* 🔹 Asegurar que esté por encima */
}

.logo img {
    width: 90px; /* 🔹 Ajusta el tamaño según necesidad */
    height: auto;
}

/* 🔹 Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .logo {
        left: 20px; /* 🔹 Mueve el logo a la izquierda */
        transform: none;
    }
}



/* Subir Obra */
.subir-obra {
    text-align: center;
    padding: 50px 20px;
    background-color: #F0F0F0;
}

.subir-obra h1 {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 20px;
}

.subir-obra form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subir-obra form label {
    display: block;
    margin: 15px 0 5px;
    font-size: 1em;
    color: #4A4A4A;
}

.subir-obra form input,
.subir-obra form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 5px;
}

.subir-obra form button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-weight: bold;
    background-color: #C9A47D;
    color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subir-obra form button:hover {
    background-color: #E5D5C0;
}

/* Panel del Artista */
.panel-artista {
    text-align: center;
    padding: 50px 20px;
    background-color: #F0F0F0;
}

.panel-artista h1 {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 20px;
}

.panel-artista p {
    font-size: 1.2em;
    color: #4A4A4A;
}

.panel-botones {
    margin-top: 30px;
}

.panel-botones a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.panel-botones .btn-principal {
    background-color: #C9A47D;
    color: #000000;
}

.panel-botones .btn-principal:hover {
    background-color: #E5D5C0;
}

.panel-botones .btn-secundario {
    background-color: #193950;
    color: #FFFFFF;
}

.panel-botones .btn-secundario:hover {
    background-color: #5a626b;
}

/* Estilos del encabezado */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    background-color: #000000;
    color: #FFFFFF;
    position: relative;
}
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons img {
    width: 20px;
    height: 20px;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo img {
    width: 80px;
    height: auto;
}
/* Contenedor del formulario */
.formulario-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.formulario-container h2 {
    font-size: 2em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.formulario-container label {
    display: block;
    text-align: left;
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 8px;
}

.formulario-container input[type="text"],
.formulario-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}

.formulario-container .btn-submit {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.formulario-container .btn-submit:hover {
    background-color: #E5D5C0;
}

/* Mensaje de error */
.error-message {
    color: red;
    font-size: 1em;
    margin-bottom: 20px;
    text-align: center;
}
/* Sección About */
.about {
    padding: 50px 10%;
    text-align: center;
    background-color: #f8f8f8;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Permite que la imagen y el texto se acomoden en móviles */
}

.about-image-container {
    flex: 1;
    max-width: 500px; /* Máximo tamaño de la imagen */
    overflow: hidden; /* Evita desbordes */
    border-radius: 10px; /* Bordes redondeados para mejor estética */
}

.about-image {
    width: 100%;
    height: auto;
    object-fit: cover; /* Mantiene la proporción sin distorsión */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.about-text {
    flex: 1;
    max-width: 600px;
    font-size: 18px;
    color: #333;
    text-align: justify;
}

/* Diseño Responsive */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Cambia la disposición a vertical */
        text-align: center;
    }

    .about-text {
        text-align: center;
        padding: 10px;
    }
}
/* Sección About */
.about {
    text-align: center;
    padding: 60px 20px;
    background-color: #F0F0F0;
}

/* Diseño de la grilla */
.about-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Estilos individuales de cada obra */
.about-item {
    width: 250px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.about-item:hover {
    transform: scale(1.05);
}

.about-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.about-item h3 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #000000;
    font-family: 'Airplanes in the Night Sky', sans-serif;
}

.about-item p {
    color: #4A4A4A;
    font-size: 1em;
    margin-bottom: 15px;
}

/* Botón de acción */
.btn-about {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-about:hover {
    background-color: #E5D5C0;
}

/* Responsivo */
@media (max-width: 768px) {
    .about-grid {
        flex-direction: column;
        align-items: center;
    }

    .about-item {
        width: 90%;
    }
}
/* Sección Tienda */
.tienda {
    text-align: center;
    padding: 80px 20px;
    background-color: #F8F8F8;
    
}

/* Títulos de la tienda */
.tienda-title {
    display: block;  /* Asegura que se muestre */
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Airplanes in the Night Sky', sans-serif;
    opacity: 1 !important;  /* Asegura que no esté oculto */
    visibility: visible !important; /* Asegura que no esté invisible */
    z-index: 10;  /* Elevar si está detrás de otro elemento */
    position: relative;
}


.tienda-description {
    font-size: 1.2em;
    color: #4A4A4A;
    max-width: 800px;
    margin: 0 auto 40px;
}

/* Contenedor de categorías */
.tienda-categorias {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Cada categoría */
.categoria {
    text-align: center;
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    opacity: 1 !important; /* Asegura que no tenga opacidad */
    display: block; /* Asegura que las categorías sean visibles */
}

.categoria:hover {
    transform: scale(1.02);
}

/* Títulos de cada categoría */
.categoria h3 {
    font-size: 2em;
    color: #C9A47D;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

/* Galería de imágenes */
.galeria {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Imágenes de la tienda */
.galeria img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 1 !important; /* Asegura que las imágenes no sean opacas */
    display: block; /* Asegura que sean visibles */
}

/* Efecto al pasar el mouse */
.galeria img:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .galeria img {
        width: 100%;
        height: auto;
    }
}


/* Estilos para Productos */
.productos-categorias h2 {
    font-size: 2em;
    color: #000000;
    text-align: center;
    margin-top: 40px;
    font-family: 'Montserrat', sans-serif;
}

.productos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.producto-item {
    width: 250px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.producto-item:hover {
    transform: scale(1.05);
}

.producto-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.producto-item h3 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

.producto-item p {
    color: #4A4A4A;
    font-size: 1em;
    margin-bottom: 15px;
}

.producto-item .precio {
    color: #C9A47D;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}
/* Sección de Contacto */
.contacto {
    text-align: center;
    padding: 60px 20px;
    background-color: #F0F0F0;
}

.contacto-titulo h1 {
    font-size: 2.5em;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.contacto-titulo p {
    font-size: 1.2em;
    color: #4A4A4A;
    margin-bottom: 40px;
}

/* Contenedor de Formulario y Contacto */
.contacto-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.formulario-contacto, .info-contacto {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.formulario-contacto h2, .info-contacto h2 {
    font-size: 1.8em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.formulario-contacto label, .info-contacto p {
    display: block;
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 8px;
    text-align: left;
}

.formulario-contacto input[type="text"],
.formulario-contacto input[type="email"],
.formulario-contacto textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}

.formulario-contacto textarea {
    resize: vertical;
}

.btn-enviar {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.btn-enviar:hover {
    background-color: #E5D5C0;
}

/* Mapa de Ubicación */
.mapa {
    margin-top: 50px;
    max-width: 100%;
    height: 400px;
}

/* Cabecera con Imagen Fija */
/* Cabecera con Imagen Fija */
.cabecera-tienda {
    position: relative;
    width: 100%;
    height: 60vh; /* Cambia este valor para ajustar la altura de la cabecera */
    overflow: hidden;
}

.imagen-fija img {
    width: 100%;
    height: 100%; /* Asegura que la imagen ocupe toda la altura de la cabecera */
    object-fit: cover; /* Mantiene la imagen centrada y ajustada */
}


.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 40px;
    border-radius: 10px;
    color: #FFFFFF;
    text-align: center;
}

.hero-content h1 {
    font-size: 3em;
    font-family: 'Airplanes in the Night Sky', serif;
    color: #C9A47D;
}

.hero-content p {
    font-size: 1.2em;
}

/* Estilos para las Categorías de Productos */
.productos-categorias h2 {
    font-size: 2em;
    color: #000000;
    text-align: center;
    margin-top: 40px;
    font-family: 'Montserrat', sans-serif;
}

.productos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.producto-item {
    width: 250px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.producto-item:hover {
    transform: scale(1.05);
}

.producto-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.producto-item h3 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

.producto-item p {
    color: #4A4A4A;
    font-size: 1em;
    margin-bottom: 15px;
}

.producto-item .precio {
    color: #C9A47D;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}




/* Footer */
.footer {
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 15px;
    padding: 10px;
}

.footer-social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

.footer-social-icons img {
    width: 24px;
    height: 24px;
}

.footer-menu {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer-menu a {
    color: #C9A47D;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #E5D5C0;
}

.footer-copyright {
    font-size: 0.8em;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    width: 100%;
}

/* Galería de Obras */


.galeria {
    text-align: center;
    padding: 60px 20px;
    background-color: #F0F0F0; /* Mismo fondo que usamos anteriormente */
}

.galeria h1 {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif; /* Mismo estilo de fuente */
}

.galeria-grid {
    display: flex;
    justify-content: center; /* Centra la galería horizontalmente */
    gap: 20px; /* Espaciado entre las imágenes */
    flex-wrap: wrap; /* Permite que las imágenes se ajusten en filas si la pantalla es pequeña */
}

.galeria-grid a {
    display: block;
    position: relative;
    width: 200px; /* Tamaño de las miniaturas */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-grid img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.galeria-grid img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el cursor */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Estilo para las descripciones (opcional) */
.galeria-grid a::after {
    content: attr(data-title);
    display: block;
    font-size: 0.9em;
    color: #4A4A4A;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
}
/* Introducción a la Galería */
.int
/* Menú principal */
nav {
    display: flex;
    gap: 20px;
    align-items: center;
}
/* Estilos para los botones personalizados en el menú principal */
.btn-menu-registro,
.btn-menu-login {
    background-color: #C9A47D; /* Fondo dorado */
    color: #000000; /* Texto en negro */
    padding: 6px 12px; /* Ajuste del padding para reducir el tamaño del botón */
    border-radius: 5px;
    font-size: 0.9em; /* Ajuste del tamaño de la fuente para hacer el texto más pequeño */
    font-weight: bold;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
}

/* Cambiar color de fondo al pasar el cursor */
.btn-menu-registro:hover,
.btn-menu-login:hover {
    background-color: #E5D5C0; /* Fondo dorado claro */
}


/* Fuente personalizada para el menú */
nav a {
    color: #C9A47D;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif; /* Fuente del menú */
}

nav a:hover {
    color: #E5D5C0;
}

/* 🔹 MENÚ PRINCIPAL - AJUSTES GLOBALES */
#main-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* 🔹 Ahora el menú se alinea a la derecha */
    align-items: center;
    list-style: none;
    background-color: #000;
    padding: 15px 20px;
    width: 100%;
}

/* 🔹 Enlaces del menú */
#main-menu a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    transition: color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

/* 🔹 Efecto hover */
#main-menu a:hover {
    color: #C9A47D;
}

/* 🔹 AJUSTES PARA PANTALLAS GRANDES */
@media (min-width: 768px) {
    #main-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-end; /* 🔹 Mantenerlo alineado a la derecha */
    }

    #main-menu a {
        display: inline-block;
        padding: 10px 20px;
    }
}

/* 🔹 MENÚ RESPONSIVO EN PANTALLAS PEQUEÑAS */
.menu-icon {
    display: block; /* Asegurar que se vea el ícono hamburguesa */
    font-size: 28px;
    cursor: pointer;
    color: white;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1001;
}

#main-menu {
    display: none; /* Ocultarlo por defecto en móviles */
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 10px;
    background: black;
    padding: 15px;
    border-radius: 5px;
    width: 200px;
    z-index: 1000;
}

#main-menu.active {
    display: flex; /* Se muestra cuando tiene la clase "active" */
}

/* Estilos de los enlaces dentro del menú */
#main-menu a {
    padding: 12px;
    text-align: center;
    display: block;
    border-bottom: 1px solid #333;
}

#main-menu a:last-child {
    border-bottom: none;
}

/* 🔹 Asegurar que el menú esté por encima de otros elementos */
#main-menu {
    z-index: 1000;
    position: relative;
}


/* Sección de video de la artista */
.video-artista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px; /* Aumenta el espacio entre el video y el texto */
    padding: 60px 20px;
    background-color: #F0F0F0; /* Fondo gris claro */
    justify-content: center; /* Centrar el contenido */
}
.video-artista {
    margin: 80px 0; /* Espacio de 80px arriba y abajo solo para esta sección */
    padding: 60px 20px;
    background-color: #F0F0F0;
    /* Otros estilos de la sección */
}

.video-container {
    flex: 1 1 300px;
    max-width: 300px; /* Ancho máximo ajustado */
    max-height: 500px; /* Alto máximo ajustado para mantener proporción */
}

.video-container video {
    width: 100%; /* Mantener el ancho al 100% del contenedor */
    height: auto; /* Ajustar altura para mantener proporción */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-info {
    flex: 1 1 300px; /* Ajusta el ancho del texto en pantallas grandes */
    max-width: 500px;
    text-align: center; /* Centra el título y el texto */
}

.video-info h2 {
    font-size: 2em;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
}

.video-info p {
    font-size: 1.1em;
    color: #4A4A4A;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
}

/* Responsivo: Adaptar a una sola columna en pantallas pequeñas */
@media (max-width: 768px) {
    .video-artista {
        flex-direction: column;
        text-align: center;
    }

    .video-container,
    .video-info {
        max-width: 100%;
    }
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
    .menu-icon {
        display: block; /* Mostrar el icono de menú en pantallas pequeñas */
    }

    nav {
        display: none; /* Ocultar el menú en pantallas pequeñas */
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background-color: #000000;
        padding: 10px;
        border-radius: 5px;
        gap: 10px;
    }

    /* Mostrar el menú principal cuando esté en modo "active" */
    nav.active {
        display: flex;
    }
}
/* Fuente personalizada para el título principal */
.hero h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
    color: #C9A47D;
    font-family: 'Airplanes in the Night Sky', cursive, serif; /* Fuente para el título "Mila" */
}
/* Estilos para la Sección Hero con Video */
.hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ajusta la sección para ocupar toda la altura de la ventana */
    overflow: hidden;
}
/* Sección de Productos Destacados */
.productos-destacados {
    text-align: center;
    padding: 60px 20px;
    background-color: #F8F8F8;
}

.carrusel {
    display: flex;
    overflow: hidden;
    width: 100%;
    gap: 20px;
    justify-content: center;
    position: relative;
}

.producto-item {
    width: 300px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.producto-item img {
    width: 100%;
    border-radius: 10px;
    height: auto;
}

.producto-item h3 {
    font-size: 1.2em;
    color: #000;
    margin-top: 10px;
}

.producto-item p {
    font-size: 1em;
    color: #C9A47D;
    font-weight: bold;
}


.productos-title {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Airplanes in the Night Sky', sans-serif;
}

.productos-description {
    font-size: 1.2em;
    color: #4A4A4A;
    max-width: 800px;
    margin: 0 auto 40px;
}

/* Estilos del Carrusel */
.swiper-container {
    width: 90%;
    padding: 20px 0;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.producto-item {
    width: 300px;
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.producto-item:hover {
    transform: scale(1.05);
}

.producto-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.producto-item h3 {
    font-size: 1.5em;
    margin: 15px 0;
    color: #000000;
}

.producto-item p {
    color: #4A4A4A;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Botones del carrusel */
.swiper-button-next,
.swiper-button-prev {
    color: #C9A47D !important;
}

.swiper-pagination-bullet-active {
    background: #C9A47D !important;
}

/* Sección de obras de arte destacadas */
.obras-destacadas {
    text-align: center;
    padding: 60px 20px;
    background-color: #FFFFFF;
}

.obras-destacadas h2 {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.section-description {
    font-size: 1.1em;
    color: #4A4A4A;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Cuadrícula de obras de arte */
.obras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Elemento individual de obra de arte */
.obra-item {
    background-color: #F0F0F0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.obra-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.obra-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.obra-item h3 {
    font-size: 1.5em;
    color: #000000;
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
}

.obra-item p {
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 20px;
}

/* Botón de acción */
.btn-comprar {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-comprar:hover {
    background-color: #E5D5C0;
}

/* Cuadrícula de productos */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Elemento individual de producto o arte */
.producto-item {
    background-color: #F0F0F0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.producto-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.producto-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.producto-item h3 {
    font-size: 1.5em;
    color: #000000;
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
}

.producto-item p {
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 20px;
}

/* Botón de acción */
.btn-comprar {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-comprar:hover {
    background-color: #E5D5C0;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Asegura que el video cubra toda el área */
    transform: translate(-50%, -50%);
    z-index: -1; /* Coloca el video detrás del contenido */
}

.hero-content {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para resaltar el texto */
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    color: #FFFFFF;
    max-width: 90%; /* Limita el ancho del texto en dispositivos pequeños */
}

.hero h1 {
    font-size: 8em;
    font-weight: bold;
    margin: 0;
    color: #C9A47D;
    font-family: 'Playfair Display', serif;
}

.hero p {
    font-size: 1.2em;
    margin-top: 10px;
    color: #FFFFFF;
}


/* Estilos para la Sección About */
.about {
    text-align: center;
    padding: 60px 20px;
    background-color: #F0F0F0;
}

.about h2 {
    font-size: 2em;
    color: #000000;
    margin-bottom: 20px;
}

.about p {
    font-size: 1.1em;
    color: #4A4A4A;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para Productos Destacados */
.productos-destacados {
    text-align: center;
    padding: 60px 20px;
}

.productos-destacados h2 {
    font-size: 2em;
    color: #000000;
    margin-bottom: 20px;
}

.productos-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.producto-item {
    width: 200px;
    text-align: center;
}

.producto-item img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.producto-item img:hover {
    transform: scale(1.05);
}

.producto-item p {
    font-size: 1em;
    color: #4A4A4A;
    margin-top: 10px;
}
.hero h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
    color: #C9A47D;
    font-family: 'Airplanes in the Night Sky', serif; /* Aplica la fuente al título "Mila" */
}

/* Estilos del footer */
.footer {
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 10px;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribuye los elementos a la izquierda y derecha */
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

/* Estilos de los iconos de redes sociales */
.footer-social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-start; /* Alinea los iconos a la izquierda */
}

.footer-social-icons img {
    width: 24px;
    height: 24px;
}
/* Sección de obras de arte destacadas */
.obras-destacadas {
    text-align: center;
    padding: 60px 20px;
    background-color: #FFFFFF;
}

.obras-destacadas h2 {
    font-size: 2.5em;
    color: #000000;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.section-description {
    font-size: 1.1em;
    color: #4A4A4A;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Cuadrícula de obras de arte */
.obras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Tarjeta individual de obra de arte */
.obra-item {
    background-color: #F0F0F0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.obra-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.obra-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.obra-item h3 {
    font-size: 1.5em;
    color: #000000;
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
}

.obra-item p {
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 20px;
}

/* Botón de acción */
.btn-comprar {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-comprar:hover {
    background-color: #E5D5C0;
}

/* Sección del formulario de inicio de sesión */
.login-artista {
    max-width: 400px;
    margin: 50px auto;
    padding: 40px;
    background-color: #F0F0F0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.login-artista h2 {
    font-size: 2em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Estilo de los labels y campos de entrada */
.login-artista label {
    display: block;
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 8px;
    text-align: left;
    font-weight: bold;
}

.login-artista input[type="email"],
.login-artista input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.login-artista input[type="email"]:focus,
.login-artista input[type="password"]:focus {
    outline: none;
    border-color: #C9A47D;
    box-shadow: 0 0 5px rgba(201, 164, 125, 0.5);
}

/* Botón de inicio de sesión */
.btn-iniciar-sesion {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.btn-iniciar-sesion:hover {
    background-color: #E5D5C0;
}

/* Responsivo */
@media (max-width: 600px) {
    .login-artista {
        padding: 20px;
    }
}

/* Sección del formulario de registro de artista */
.registro-artista {
    max-width: 500px;
    margin: 50px auto;
    padding: 40px;
    background-color: #F0F0F0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.registro-artista h2 {
    font-size: 2em;
    color: #000000;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

/* Estilo de los labels y campos de entrada */
.registro-artista label {
    display: block;
    font-size: 1em;
    color: #4A4A4A;
    margin-bottom: 8px;
    text-align: left;
    font-weight: bold;
}

.registro-artista input[type="text"],
.registro-artista input[type="email"],
.registro-artista input[type="password"],
.registro-artista textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.registro-artista input[type="text"]:focus,
.registro-artista input[type="email"]:focus,
.registro-artista input[type="password"]:focus,
.registro-artista textarea:focus {
    outline: none;
    border-color: #C9A47D;
    box-shadow: 0 0 5px rgba(201, 164, 125, 0.5);
}

/* Botón de registro */
.btn-registrarse {
    background-color: #C9A47D;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.btn-registrarse:hover {
    background-color: #E5D5C0;
}

/* Ajuste de los textos y espacio */
textarea {
    resize: vertical; /* Permite cambiar el tamaño del textarea verticalmente */
    min-height: 100px;
}

/* Responsivo */
@media (max-width: 600px) {
    .registro-artista {
        padding: 20px;
    }
}

/* Menú de enlaces en el footer */
/* Menú de enlaces en el footer */
.footer-menu {
    display: flex;
    gap: 20px;
    justify-content: flex-end; /* Alinea el menú a la derecha */
}

.footer-menu a {
    color: #C9A47D;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #E5D5C0;
}

/* Derechos de autor */
/* Derechos de autor */
.footer-copyright {
    font-size: 0.8em;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    width: 100%; /* Alinea al centro en toda la fila */
}
.cabecera-tienda {
    position: relative;
    width: 100%;
    height: 70vh; /* Aumentamos la altura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #F8F8F8;
}

.slider {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Ajusta según tu diseño */
    height: 500px; /* Altura fija para el slider (ajusta según tus necesidades) */
    margin: 0 auto;
    overflow: hidden; /* Oculta el desbordamiento de las imágenes */
}

.slides {
    display: flex;
    width: 100%;
    height: 100%; /* Misma altura que el contenedor del slider */
    transition: transform 1s ease-in-out;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Cubre el contenedor sin deformar la imagen */
    flex-shrink: 0;
}

/* Botones de navegación */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}
/* 🔹 Estilos Generales de la Tienda */
.seccion-tienda {
    background-color: #F0F0F0; /* Fondo gris claro */
    padding: 60px 20px;
    text-align: center;
}

.titulo-tienda {
    font-size: 2.5em;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 30px;
}

/* 🔹 Estilos de las Categorías */
.categoria-tienda {
    margin-bottom: 50px;
}

.categoria-tienda h3 {
    font-size: 2em;
    color: #C9A47D;
    margin-bottom: 15px;
}

/* 🔹 Galería de Productos */
.galeria-tienda {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}

.producto-item {
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.producto-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

/* 🔹 Estilos del Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
    position: relative;
}

.modal-content img {
    width: 100%;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #000;
}

/* 🔹 Responsive */
@media (max-width: 768px) {
    .galeria-tienda {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .galeria-tienda {
        grid-template-columns: repeat(1, 1fr);
    }
}