@font-face {
    font-family: 'Poppins-Thin';
    src: url('../fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal;
  }

html {
    scroll-behavior: smooth; /* Añade desplazamiento suave */
}

.mi-clase {
  font-family: 'nombre-de-tu-fuente', sans-serif;
}

body {
    background-color: #F5F5DC; 
    font-family: Montserrat, sans-serif;
    /*font-family: 'Poppins-Thin', sans-serif;*/
    margin: 0;
    margin-top: 0;
    padding: 0 20px; /* Añade un padding lateral para evitar que los elementos queden pegados */
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho */
    line-height: 1.6;
    color: #a0522d;
}

section h2 {
    align-items: center;
    font-family: Montserrat, sans-serif;
    text-align: center;
}


header {
    display: flex;
    justify-content: space-between; /* Mantiene el logo y el título separados */
    align-items: center; /* Alinea verticalmente los elementos al centro */
    padding: 5px 20px; /* Reducir el padding superior e inferior */
    background-color: #F5F5DC;
    color: #a0522d; /* Color del texto */
    max-height: min-content;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho del header */
    max-width: 1200px; /* Limita el ancho máximo para evitar que se estire demasiado */
    padding: 10px 20px;
    background-color: #F5F5DC;
    color: #a0522d;
} 

header, .footer-content, .categorias, .productos, .contacto {
    max-width: 1200px; /* Limita el ancho máximo para pantallas grandes */
    margin: 0 auto; /* Centra los elementos en pantallas grandes */
    padding: 0 10px; /* Añade algo de espacio en los lados en pantallas pequeñas */
    
}

.title {
    font-size: 2em; /* Ajustar el tamaño de la fuente */
    font-weight: bold; /* Asegurar que se vea destacado */
    color: #a0522d; /* Opcional: ajustar el color */
}

.logo {
    width: 70px; /* Ajusta el valor según el tamaño deseado */
    max-height: 70px; /* Limita la altura del logo para evitar que aumente la altura del header */
    border: none; /* Sin borde para el logo */
}

/* Estilos para el Slider */
.slider {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 8px;
}

.slide {
    display: none;
    width: 100%;
}

.slide img {
    width: 100%;
    display: block;
}

/* Sección Hero */
.hero {
    position: relative;
    height: 600px; /* Ajusta la altura según tus preferencias */
    overflow: hidden; /* Asegura que el video no se desborde */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra todo el contenedor sin distorsionarse */
    z-index: -1; /* Hace que el video quede detrás del texto y los botones */
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.hero-text h1 {
    font-family: 'Poppins-Thin', sans-serif ;
    font-size: 2em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    color: #a0522d;
}

.hero-text p {
    font-size: 1em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.hero-text button {
    background-color: transparent;
    border: 2px solid #a0522d;
    color: #a0522d;
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
}

.hero-text button:hover {
    background-color: rgba(240, 194, 123, 0.1);
}

/* Menú de navegación para pantallas grandes (por defecto) */
.nav-menu {
    display: flex;
    gap: 20px;
}


.hamburger {
    display: none;
    font-size: 2em;
    background: none;
    border: none;
    color: #a0522d;
    cursor: pointer;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #a0522d;
    transition: color 0.3s;
}


/* Estilos para el ícono de usuario */
.user-icon-link {
    display: inline-block;
    margin-left: 20px; /* Ajusta el espacio a tu preferencia */
}

.user-icon {
    width: 30px;  /* Ajusta el tamaño a tu preferencia */
    height: 30px;
    object-fit: contain;
    cursor: pointer;
}

/* Asegurar que el header alinee correctamente los elementos */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* Categorías y Productos */
.categorias-grid, .productos-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  Define columnas que se ajustan a la resolución */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* Espacio entre los elementos */
    padding: 20px; /* Espacio alrededor de la cuadrícula */
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}



.categoria, .producto {
    cursor: pointer;
    transition: opacity 0.3s ease; 
    text-align: center;
    margin-bottom: 30px;
    color: #33333398;
    font-size: 1.1em;
    font-weight: bold;

}


.categoria:hover {
    opacity: 0.8; /* Opcional: hace que la imagen se vea ligeramente más opaca */
}


.descripcion-corta {
    font-weight: normal; /* Asegura que el texto no esté en negrita */
}

    .producto-detalle {
        display: flex;
        gap: 20px; /* Espacio entre la imagen y la información */
        flex-wrap: wrap; /* Para que se ajuste en dispositivos pequeños */
    }

    
    .producto-detalle {
        margin-top: 5px;
    }
    
    .producto-nombre {
        font-size: 1.1em;
        font-weight: bold;
        color: #33333398; /* Color de texto oscuro para el nombre */
        margin-bottom: 5px;
    }

    .detalle-producto-contenedor {
        display: grid; /* Cambia de flex a grid para controlar mejor el espacio */
        grid-template-columns: 1fr 1fr; /* Dos columnas iguales para la imagen y los atributos */
        align-items: center; /* Alinea los elementos verticalmente al centro */
        justify-content: center; /* Centra los elementos horizontalmente */
        gap: 20px; /* Reduce la distancia entre la imagen y los atributos */
        max-width: 800px; /* Ajusta el ancho máximo del contenedor para evitar que se estire demasiado */
        margin: 0 auto; /* Centra todo el contenedor en la página */
        padding: 20px; /* Añade un poco de padding para que no se vea muy pegado al borde */
    }
    
    .detalle-producto-imagen {
        flex: 3;
    }

    .detalle-img {
        /*flex: 1;  Reduce el espacio ocupado por la imagen a una parte igual a los demás elementos */
        max-width: 300px; /* Establece un ancho máximo para la imagen */
        /*margin-right: 10px;  Reduce el margen a la derecha para acercar la imagen al texto */
        /*display: flex;  Alinea el contenedor */
        /*flex-direction: column;  Alinea la imagen y el texto en columnas */
        /*align-items: center;  Centra la imagen y el texto horizontalmente en la página */
        /*margin: 0 auto;  Centra el contenedor en la página */
    }

    .descripcion-producto {
        max-width: 300px; /* Asegura que la descripción tenga un ancho similar al de la imagen */
        text-align: left; /* Alinea el texto a la izquierda */
    }

    @media (max-width: 768px) {
        .detalle-producto-contenedor {
            display: flex;
            flex-direction: column; /* Para móviles, coloca los elementos en columna */
            align-items: center; /* Centra los elementos en la página */
        }
    
        .detalle-img, .descripcion-producto {
            max-width: 300px; /* Asegura que ocupen todo el ancho disponible en pantallas pequeñas */
            margin: 10px 0; /* Añade un margen para separar la imagen de la descripción */
        }
    }


    .boton-comprar {
        padding: 15px 30px;
        font-size: 1em;
        color: #fff;
        background-color: #a2a85f; /* Un color acorde con la joyería */
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .boton-comprar:hover {
        background-color: #151312; /* Cambiar el color al pasar el ratón */
    }

    /*  Carrito de Compras */
    .ver-carrito-button {
        padding: 15px 30px;
        font-size: 1em;
        color: #fff;
        background-color: #a0522d;
        
        border-radius: 5px;
        display: inline-block;
        
        text-decoration: none;
        
        transition: background-color 0.3s;
        /*margin-top: 10px;*/
    }

.ver-carrito-button:hover {
    background-color: #8a4b2a;
}



.categoria img, .producto img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    max-width: 250px;
    aspect-ratio: 1 / 1; /* Asegura que las imágenes se vean cuadradas */
    height: 250px;
}

/* Media Queries para hacer la cuadrícula responsiva */
@media (max-width: 900px) {
    .categorias-grid, .productos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .categorias-grid, .productos-grid {
        grid-template-columns: 1fr;
    }
    .footer-section {
        flex: 1 1 100%;
    }
}

img {
    border: 1px solid #d9d8d8;
    border-radius: 5px;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100px;
        right: 10px;
        background-color: #f5f1e8;
        width: 250px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding: 15px;
    }

    .nav-menu.open {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .nav-menu a {
        padding: 10px 0;
        color: #a0522d;
        text-decoration: none;
        font-family: 'Poppins-Thin', sans-serif ;
        font-weight: bold;
        transition: color 0.3s ease;
    }

    .nav-menu a:hover {
        color: #d2691e;
    }

    .columns {
        flex-direction: column; /* En móviles, coloca los elementos en columna */
    }

}



.carrito-img {
    width: 150px;   /* Ajusta según el tamaño deseado */
    height: auto;   /* Mantener la relación de aspecto */
    max-width: 50%;  /* Limitar el tamaño máximo al 100% del contenedor */
    object-fit: cover; /* Asegura que la imagen se vea bien */
    margin: 0 20px; /* Añade espacio alrededor para que no esté pegada a otros elementos */
}

.carrito-tabla-contenedor {
    display: flex;
    justify-content: center; /* Centra la tabla horizontalmente */
    align-items: center;     /* Opcional: Centra verticalmente si tienes más contenido */
    width: 100%;
}

.carrito-tabla {
    width: 50%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: Arial, sans-serif;
}

.carrito-tabla th, .carrito-tabla td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.carrito-tabla th {
    /*background-color: #f4f4f4;*/
    font-weight: bold;
}
/*
.carrito-tabla tr:nth-child(even) {
    background-color: #f9f9f9;
}*/

.carrito-tabla tr:hover {
    background-color: #f1f1f1;
}

.carrito-tabla img {
    max-width: 100px; /* Ajusta el tamaño de la imagen */
    height: auto;
    object-fit: cover;
}




/* Formulario de Contacto */
.contacto form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.contacto input,
.contacto textarea {
    background-color: #F9F9F9; 
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.contacto textarea {
    grid-column: span 2;
    height: 100px;
}

.contacto .recaptcha {
    grid-column: span 2;
    text-align: center;
}

.contacto button {
    grid-column: span 1;
    width: 50%;
    padding: 10px 20px;
    background-color: #f0c27b;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.footer-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 5px;
    background-color: #e8e8d0;
    color: #C47930;
}


.footer-section {
    flex: 1 1 calc(25% - 20px);
    min-width: 200px;
    margin-bottom: 20px;
}

.footer-section h4 {
    margin-bottom: 10px;
    color: #C47930;
}

.footer-section a {
    text-decoration: none;
    color: #C47930;
}
.footer-section ul {
    list-style: none !important;
    padding: 0;
}

/* Footer */
footer {
    text-align: center;
    margin-top: auto
}


/* Estilos específicos para la página de administración */
.admin-page {
    background-color: #000000; /* Fondo negro */
    color: #FFFFFF; /* Texto blanco */
}

.admin-page h1 {
    max-width: 800px; /* Ajusta este valor según el ancho deseado */
    margin: 0 auto; /* Centra el título horizontalmente */
    text-align: center; /* Opcional: centra el texto dentro del título */
    padding: 20px 0; /* Opcional: agrega espacio arriba y abajo del título */
}

.admin-page label {
    color: #FFFFFF;
}

.admin-page input,
.admin-page textarea,
.admin-page select {
    background-color: #1a1a1a; /* Fondo gris oscuro para campos de entrada */
    color: #FFFFFF; /* Texto blanco */
    border: 1px solid #333333;
    border-radius: 5px;
    padding: 10px;
}

.admin-page input::placeholder,
.admin-page textarea::placeholder {
    color: #CCCCCC; /* Color para los placeholders */
}

.admin-page button {
    background-color: #333333; /* Fondo gris para botones */
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.admin-page button:hover {
    background-color: #555555; /* Fondo más claro al pasar el cursor */
}

.admin-page .button-container {
    text-align: center;
}

.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 800px;
    margin: auto;
}
.form-container label {
    text-align: right;
    padding-right: 10px;
    align-self: center;
}
.button-container {
    grid-column: span 2;
    text-align: center;
}
#actualizar-btn {
    display: none;
}


/* Estilos para seccion Login-facturacion y envio- resumen */
.accordion .section {
    margin: 10px 0;
}
.accordion .toggle {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    cursor: pointer;
    text-align: left;
}
.accordion .content {
    display: none;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.accordion .content.open {
    display: block;
}


    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centra el contenido */
        gap: 20px; /* Espaciado entre elementos */
    }



.accordion-container {
    max-width: 800px; /* Ajusta según tu diseño */
    margin: 0 auto; /* Centra el contenedor */
}

.accordion {
    max-width: 900px; /* Limitar el ancho */
    margin: 0 auto;
}

.accordion-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}
.accordion-button {
    font-weight: bold;
    color: #333;
}

/* Estilo ajustado para reducir separación y tamaño */
h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px; /* Ajusta según lo que necesites */
    color: #333;
}

    
/* Contenedor principal */
.columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    max-width: 900px;
    align-items: flex-start; /* Asegura que estén alineados en la parte superior */
    align-items: stretch;
}

/* Igualar alturas */
.column {
    height: auto;
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: auto; /* Ajusta según sea necesario */
}

/* Asegura que ambas columnas tengan la misma altura */
.columns > .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.column.register {
    min-height: 100%; /* Asegura que tome toda la altura del contenedor padre */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Títulos */
.column h2 {
    text-align: center;
    margin-bottom: 10px; /* Reducido */
    color: #333;
    font-size: 18px; /* Reducido */
}

/* Formulario */
form {
    display: flex;
    flex-direction: column;
    gap: 0px; /* Reducido */
}

/* Etiquetas */
form label {
    font-weight: bold;
    color: #555;
    font-size: 10px; /* Reducido */
}

/* Campos de entrada form select, */
form input,  form button {
    padding: 1px; /* Reducido */
    font-size: 13px; /* Reducido */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 3px; /* Reducido */
}


/* Botones */
form .btn {
    padding: 8px 12px; /* Reducido */
    font-size: 14px; /* Reducido */
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

form .btn:hover {
    background-color: #0056b3;
}

form .btn-secondary {
    background-color: #6c757d;
}

form .btn-secondary:hover {
    background-color: #5a6268;
}

/* Enlaces */
form a {
    text-decoration: none;
    color: #007bff;
    font-size: 12px; /* Reducido */
    text-align: center;
}

form a:hover {
    text-decoration: underline;
}

/* Espaciado para secciones adicionales */
.forgot-password, .register {
    margin-top: 0px; /* Reducido */
    padding: 10px; /* Reducido */
    border-top: 1px solid #ddd;
}


.menu {
    position: fixed; /* Fija el menú en la parte superior */
    top: 0;
    width: 100%; /* Ocupa todo el ancho */
    background-color: #333; /* Color de fondo */
    color: white; /* Color del texto */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra opcional */
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around; /* Espacia los enlaces */
}

.menu ul li {
    padding: 15px;
}

.menu ul li a {
    color: white;
    text-decoration: none;
}

body {
    margin-top: 10px; /* Evita que el contenido quede detrás del menú */
}

.input-ancho-completo {
    width: 100%; 
  }

/* Personalización de datalist 
.datalist-container {
    margin-top: 20px;
}

input[list="datalist-municipios"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
}*/

/* Personalización de Select2 */
.select2-container .select2-selection--single {
    height: 38px; /* Ajustar altura */
    padding: 6px 12px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de fuente */
    border: 1px solid #ccc; /* Borde */
    border-radius: 4px; /* Esquinas redondeadas */
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #555; /* Color del texto */
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px; /* Ajustar tamaño del icono */
}


/* Centra el contenido */
.checkout-wrapper {
    max-width: 800px;
    margin: 0 auto; /* Centra el acordeón */
    text-align: left; /* Mantiene alineación de los textos internos */
}

/* Asegura que el título se centre */
h1 {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #5A3E2B;
}

/* Ajuste para el acordeón */
.accordion {
    width: 100%;
}