html {
    font-size: 14px;
}



@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .modal-img-grande {
        width: 80%; /* Ajusta este valor según lo grande que la quieras */
        max-width: 90%; /* Para que no exceda el ancho de la pantalla en móviles */
        height: auto;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background: linear-gradient(to bottom, #f5f5f5, #d9d9d9);
    background-image: url('/imagenes_fondo/fondo.jpg'); /* Opcional: textura de mármol */
    background-size: auto; /* O un tamaño específico, ej: 200px 200px */
    background-repeat: repeat; /* Repite la imagen en ambos ejes (x e y) */
    background-attachment: fixed;
    color: #333; /* Color de texto para que contraste bien */
}/* Estilos para el logo */

.logoempresa {
    width: 40%; /* El logo ocupará el 40% del ancho de la pantalla */
    max-width: 800px; /* Limita el tamaño máximo para que no sea demasiado grande */
    height: auto; /* Mantiene la proporción */
    display: block; /* Permite centrar con margin */
    margin: 0 auto 20px auto; /* Centra horizontalmente */
}

/* Estilos para la sección de productos */
.productos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas de igual tamaño */
    gap: 20px; /* Espacio entre los productos */
    padding: 20px; /* Espaciado interno para que no esté pegado a los bordes */
}

/* Estilos para cada producto */
.producto {
    border: 1px solid #ccc; /* Borde para cada producto */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centra el contenido */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

    /* Estilos para las imágenes de los productos */
    .producto img {
        max-width: 100%; /* La imagen no superará el ancho del contenedor */
        height: auto; /* Mantiene la proporción */
    }

/* Responsive Design: Ajustes para pantallas más pequeñas */
@media (max-width: 1024px) {
    .productos {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablets */
    }
}

@media (max-width: 768px) {
    .productos {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
}

/* Ajuste para pantallas medianas y pequeñas (tablets, móviles grandes) */
@media (max-width: 768px) {
    .carousel img {
        height: 40vh;
    }
}

/* Ajuste específico para móviles pequeños (productos en 1 columna) */
@media (max-width: 480px) {
    .productos {
        grid-template-columns: 1fr;
    }
}

.carousel {
    max-width: 99%; /* Ajusta el ancho del carrusel */
    margin: 0 auto; /* Centra el carrusel */
}

    .carousel img {
        height: 60vh; /* Altura relativa a la ventana */
        width: 100%; /* Ocupa todo el ancho */
        object-fit: cover; /* Recorta manteniendo proporción */
        border-radius: 10px; /* Bordes redondeados */
    }

.language-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#language-select {
    width: auto;
    display: inline-block;
}