body {font-family: 'Montserrat', sans-serif;background-color: var(--color-fondo);color: var(--color-texto-principal)}
        
        .hero-bg {
            background: linear-gradient(rgba(5, 35, 64, 0.35), rgba(5, 35, 64, 0.35)), url('{{ asset('images/fondos/fondo_001.png') }}');
            background-size: cover;
            background-position: center center;
            min-height: 100vh;
        }

        /************************************************************/
        /************************** CIRCULO *************************/
        /************************************************************/

        .revealing-circle-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 10;
            pointer-events: none;
            /* Add a background for testing to see if the container is visible */
            /*                background-color: rgba(255, 0, 0, 0.2); */
        }
        .expanding-circle {
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%) scale(0);
            width: 50vw;
            height: 50vw;
            border-radius: 50%;
            background-color: #ff5a43;
            will-change: transform;
            /* Add a border for testing to see if the circle is visible */
            /* border: 5px solid blue; */
        } 

        /************************************************************/
        /************************* PRODUCTOS ************************/
        /************************************************************/

        .product-card {
            position: relative; /* Importante para el posicionamiento absoluto de la descripción */
            background-color: rgba(5, 35, 64, 0.9); /* Un fondo oscuro semitransparente para la tarjeta */
            border-radius: 15px; /* Esquinas redondeadas */
            overflow: hidden; /* Asegura que la descripción no se salga si está oculta */
            text-align: center;
            padding-bottom: 20px; /* Espacio para el nombre del producto */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil para la tarjeta */
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transición para el hover de la tarjeta */
        }

        .product-card:hover {
            transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al pasar el ratón */
        }

        /* Contenedor del video cuadrado (técnica de padding-bottom para mantener la proporción) */
        .square-video-container {
            width: 100%;
            padding-bottom: 100%; /* Crea una caja cuadrada (100% de la anchura = 100% de la altura) */
            position: relative; /* Para posicionar el video dentro */
            overflow: hidden; /* Para recortar el video si sobresale */
        }

        .product-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Asegura que el video cubra el contenedor sin distorsión */
            border-radius: 15px 15px 0 0; /* Solo redondea las esquinas superiores del video */
        }

        .product-info {
            padding: 15px;
            position: relative; /* Para que el product-description pueda ser absoluto dentro de el */
            z-index: 1; /* Asegura que product-info esté sobre la descripción si hay solapamiento */
        }

        .product-name {
            color: #fff; /* Color blanco para el nombre del producto */
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 1.8rem;
            font-weight: bold;
            min-height: 2.2em; /* Asegura que los nombres de 1 o 2 líneas tengan la misma altura */
        }

        .product-description {
            position: absolute;
            bottom: 0; /* Empieza desde la parte inferior de product-info */
            left: 0;
            width: 100%;
            height: 100%; /* Cubre todo el product-info */
            background-color: rgba(0, 128, 197, 0.95); /* Fondo azul semitransparente (color #0080c5 de tu página) */
            color: #fff; /* Texto de descripción blanco */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15px;
            opacity: 0; /* Inicialmente invisible */
            transform: translateY(100%); /* Desplazado hacia abajo, fuera de la vista */
            transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Animación de aparición */
            pointer-events: none; /* Permite clicks a través de él cuando está invisible */
            border-radius: 0 0 15px 15px; /* Redondea solo las esquinas inferiores */
        }

        /* Efecto al pasar el ratón sobre la tarjeta */
        .product-card:hover .product-description {
            opacity: 1; /* Se vuelve visible */
            transform: translateY(0); /* Se desliza hacia arriba */
            pointer-events: auto; /* Permite clicks en los enlaces cuando es visible */
        }

        .product-description p {
            font-size: 0.95rem;
            line-height: 1.4;
            margin-bottom: 10px;
        }

        /* Asegurar que el botón dentro de la descripción sea visible y legible */
        .product-description .btn {
            border-color: #fff;
            color: #fff;
        }
        .product-description .btn:hover {
            background-color: #fff;
            color: rgba(0, 128, 197, 0.95);
        }     


        /************************************************************/
        /*********************** TESTMONIALES ***********************/
        /************************************************************/

        .testimonial-circle-container {
            width: 500px; /* Ancho deseado del círculo */
            height: 500px; /* Altura deseada del círculo (igual al ancho para que sea un círculo perfecto) */
            position: relative; /* Para posicionar los testimoniales internos */
            overflow: hidden; /* Oculta el contenido que se sale de la forma circular */
            border-radius: 50%; /* ¡La magia para la forma circular! */
            background-color: rgba(255, 255, 255, 0.2); /* Fondo sutil para el círculo */
            border: 3px solid rgba(255, 255, 255, 1); /* Borde blanco semi-transparente */
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); /* Sombra azul para destacarlo */
            display: flex; /* Para centrar el .testimonial-circle si es necesario */
            justify-content: center;
            align-items: center;
        }

        .testimonial-circle {
            width: 100%; /* El contenedor interno ocupa todo el círculo */
            height: 100%;
            position: relative; /* Para posicionar los items */
        }

        .testimonial-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px; /* Relleno dentro del testimonial */
            text-align: center;
            color: white; /* Color del texto del testimonial */
            opacity: 0; /* Inicialmente ocultos */
            transform: scale(0.8); /* Empiezan ligeramente encogidos */
            transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transición suave */
        }

        .testimonial-item.active {
            opacity: 1; /* El testimonial activo es visible */
            transform: scale(1); /* Vuelve a su tamaño normal */
        }

        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 15px;
        }

        .testimonial-author {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Responsividad para el círculo en móviles */
        @media (max-width: 767.98px) {
            .testimonial-circle-container {
                width: 300px; /* Más pequeño en móviles */
                height: 300px;
                margin-bottom: 30px; /* Espacio debajo del círculo en móviles */
            }
            .testimonial-text {
                font-size: 1rem;
            }
        }