.detalle-producto {
    max-width: 1200px; /* Establece un ancho máximo de 1200px para el contenedor */
    margin: 20px auto; /* Centra el contenedor horizontalmente y le da un margen vertical de 20px */
    padding: 20px; /* Agrega un relleno interno de 20px */
    display: flex; /* Usa flexbox para organizar los elementos hijos */
    flex-direction: column; /* Los elementos hijos se apilan en una columna */
    gap: 20px; /* Espaciado de 20px entre los elementos hijos */
}

.producto-contenedor {
    display: flex; /* Usa flexbox para organizar los elementos */
    gap: 20px; /* Espaciado de 20px entre los elementos hijos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una fila */
}

.left-column {
    flex: 1; /* Ocupa una proporción flexible del espacio disponible */
    display: flex; /* Usa flexbox para organizar los elementos hijos */
    flex-direction: column; /* Los elementos hijos se apilan en una columna */
    align-items: center; /* Centra los elementos horizontalmente */
}

.main-image img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    max-width: 500px; /* La anchura máxima de la imagen es de 500px */
    border-radius: 8px; /* Bordes redondeados de 8px */
    border: 3px solid transparent; /* Borde inicial transparente */
    transition: border 0.3s ease; /* Transición suave al cambiar el borde */
}

.main-image img.active {
     border: 3px solid #ff6600; /* Borde más grueso y de color llamativo */
    box-shadow: 0px 0px 8px rgba(255, 102, 0, 0.7); /* Efecto de resplandor */
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    transition: all 0.3s ease-in-out; /* Transición suave */
}

.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Más separación entre botón izquierdo, carrusel y botón derecho */
    margin-top: 20px;
}

.carousel-wrapper {
    overflow: hidden;
    width: calc(80px * 3 + 10px * 2); /* 3 miniaturas + 2 espacios de 10px */
}

.carousel-images {
    display: flex;
    gap: 10px;
    transition: transform 0.3s ease-in-out;
}

.carousel-images img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.carousel-images img:hover {
    transform: scale(1.1);
}

/* Miniatura activa con borde azul */
.carousel-images .miniatura.active {
    border: 3px solid #ff6600;
    box-sizing: border-box;
}

/* Botones del carrusel */
.carousel-button {
    background-color: #007BFF;
    border: none;
    color: white;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out;
}

.carousel-button:hover {
    background-color: #00258A;
}


#prev-button {
    left: 0; /* Posiciona el botón a la izquierda del contenedor */
}

#next-button {
    right: 0; /* Posiciona el botón a la derecha del contenedor */
}

.informacion-producto {
    flex: 2; /* Ocupa el doble de espacio que otros elementos flexibles */
}

.informacion-producto h1 {
    font-size: 24px; /* Tamaño de fuente del título */
    color: #333; /* Color del texto en gris oscuro */
}

.informacion-producto p {
    font-size: 16px; /* Tamaño de fuente del párrafo */
    color: #666; /* Color del texto en gris claro */
}

.video-container {
    display: flex; /* Usa flexbox para organizar el contenido */
    justify-content: center; /* Centra el vídeo horizontalmente */
    margin: 20px 0; /* Margen vertical de 20px */
}

.video-container iframe {
    max-width: 100%; /* El vídeo ocupa el 100% del ancho del contenedor */
    border-radius: 8px; /* Bordes redondeados de 8px */
}

.productos-relacionados {
    text-align: center; /* Centra el texto horizontalmente */
}

.relacionados-contenedor {
    display: grid; /* Usa un sistema de cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas adaptables */
    gap: 20px; /* Espaciado entre elementos */
    justify-content: center; /* Centrado horizontal en grid */
    margin: 10px auto; /* Margen arriba/abajo 10px y centrado horizontal */
    max-width: 900px; /* Limita el ancho total */
}


.producto-relacionado {
    background: #f9f9f9; /* Fondo claro */
    padding: 10px; /* Relleno interno de 10px */
    border-radius: 8px; /* Bordes redondeados de 8px */
    text-align: center; /* Centra el texto */
    transition: transform 0.3s; /* Transición suave al transformar */
}

.producto-relacionado img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    max-width: 150px; /* Tamaño máximo de la imagen en 150px */
    border-radius: 5px; /* Bordes redondeados de 5px */
}

.producto-relacionado p {
    margin-top: 10px; /* Margen superior de 10px */
    font-size: 14px; /* Tamaño de fuente de 14px */
    color: #333; /* Color del texto en gris oscuro */
}

.producto-relacionado:hover {
    transform: scale(1.05); /* Aumenta el tamaño del contenedor al pasar el cursor */
}