/* Importar fuente Inter */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

    body {
        font-family: 'Inter', sans-serif;
        background-color: #f8f9fa;
    }

    /* Estilo de la card de detalles */
    .detalle-card {
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 17%, rgba(235,235,235,1) 89%);
        border-radius: 2rem;
        border: none;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15); /* Sombra */
        padding: 20px;
    }

    /* Estilo de la imagen principal */
    .main-img {
        max-width: 100%;
        border-radius: 10px;
        padding: 15px; /* Agregar padding para mejor separación */
    }

    /* Imagen del sellado */
    .sellado-img {
        max-width: 100%;
        opacity: 0.9;
        padding: 10px; /* Añadir un pequeño padding */
    }

    /* Texto debajo de la imagen del sellado */
    .sellado-text {
        text-align: center;
        font-weight: 100;
        margin-top: 5px;
        font-size: 1rem;
    }

    /* Círculos de colores */
    .color-circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid #ccc;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    /* Contenedor circular para la almohadilla */
    .almohadilla-logo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #c5c5c5; /* Fondo gris claro */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* Asegura que nada se salga del círculo */
    }

    /* Imagen dentro del fondo circular */
    .almohadilla-logo img {
        width: 70%;  /* Ajustar imagen dentro del círculo */
        height: auto;
        object-fit: contain; /* Evita recortes */
    }

    .btn-outline-custom {
        color: #ED1C24;
        border-color: #ED1C24;
        font-weight: 400;
    }

    .btn-outline-custom:hover {
        background-color: #ED1C24;
        color: white;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-image: none !important;
        width: auto;
        height: auto;
    }

    .carousel-indicators button {
        background-color: #bcbcbc !important; /* Rojo */
    }

    .carousel-indicators .active {
        background-color: #ED1C24 !important; /* Rojo más oscuro */
    }

/* Contenedor del carrusel con altura fija */
#carouselSello {
    max-width: 100%;
    height: 400px; /* Altura fija del carrusel */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Asegurar que los items del carrusel también tengan altura fija */
.carousel-inner {
    height: 100%; /* Para que herede la altura del contenedor */
}

.carousel-item {
    height: 100%; /* Asegura que el item ocupe toda la altura */
    align-items: center;
    justify-content: center;
}

/* Imágenes dentro del carrusel */
.carousel-item img {
    width: auto;  /* Mantiene la proporción original */
    max-width: 100%; /* No sobrepasa el ancho del contenedor */
    height: 100%; /* Ocupará toda la altura del carrusel */
    object-fit: contain; /* Ajusta la imagen sin recortar */
}