/* --- ESTILO DE CAJA INTERACTIVA --- */
        .hover-card-effect {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            border: 1px solid transparent;
            position: relative; /* Asegura contexto */
        }

        .hover-card-effect:hover {
            transform: scale(1.05);
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) !important;
            background-color: #fff !important;
            opacity: 1 !important;
            z-index: 10;
            border-color: rgba(0,0,0,0.1);
        }

        .btn_add_cart {
            pointer-events: none;
        }

        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            background-color: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            font-family: 'Poppins', sans-serif;
            user-select: none;
        }

        .video-container iframe {
            position: absolute;
            left: 0;
            width: 100% !important;
            height: 180% !important;
            top: -40% !important;
            border: none;
            pointer-events: none;
        }

        .click-layer {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 5; cursor: pointer;
        }

        .cover-image {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('https://img.youtube.com/vi/PEVxuTy-PnE/maxresdefault.jpg');
            background-size: cover; background-position: center;
            z-index: 4;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .big-play-container {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: center;
            z-index: 10; pointer-events: none;
        }

        .big-play-btn {
            width: 90px; height: 90px;
            background: rgba(250, 204, 21, 0.9);
            border: 4px solid #fff; border-radius: 50%;
            box-shadow: 0 0 40px rgba(250, 204, 21, 0.4);
            position: relative; pointer-events: auto; cursor: pointer;
            transition: transform 0.2s;
        }
        .big-play-btn::after {
            content: ''; position: absolute; top: 50%; left: 55%;
            transform: translate(-50%, -50%);
            border-left: 24px solid #000;
            border-top: 16px solid transparent; border-bottom: 16px solid transparent;
        }
        .big-play-btn:hover { transform: scale(1.1); }

        .custom-controls-bar {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 60px;
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            display: flex; align-items: center; padding: 0 20px;
            z-index: 20; opacity: 0; transition: opacity 0.3s;
        }
        .video-container:hover .custom-controls-bar,
        .video-container.paused .custom-controls-bar { opacity: 1; }

        .progress-bar-container {
            flex-grow: 1;
            height: 6px;
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
            margin: 0 15px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background-color: rgba(250, 204, 21, 0.9);
            width: 0%;
            border-radius: 3px;
            transition: width 0.2s linear;
        }

        .time-display { color: #fff; font-size: 13px; font-weight: 600; min-width: 90px; text-align: center; }

        .control-btn {
            width: 30px; height: 30px; background: none; border: none; cursor: pointer;
            margin-right: 15px; background-size: contain; background-repeat: no-repeat;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); opacity: 0.9;
        }
        .control-btn:hover { transform: scale(1.2); opacity: 1; }

        .volume-slider { width: 0; opacity: 0; transition: width 0.3s; height: 4px; border-radius: 2px; -webkit-appearance: none; background: rgba(255,255,255,0.3); }
        .volume-container:hover .volume-slider { width: 80px; opacity: 1; margin-left: 10px; }
        .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; }

        .play-small { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
        .pause-small { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E"); }
        .volume { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E"); }
        .volume-muted { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E"); }
        .fullscreen { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E"); }

        .hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }


        /* Estado Normal del Botón */
        .botonvideo {
            background-color: #ffc107; /* Amarillo base */
            border-color: #ffc107;     /* Borde amarillo */
            color: #000000;            /* Texto negro */
            transition: all 0.3s ease; /* Suaviza el cambio de color */
        }

        /* Estado Hover (Cuando pasas el mouse) */
        .botonvideo:hover {
            background-color: #ff5733; /* <--- CAMBIA ESTE COLOR (Ej: Naranja rojizo) */
            border-color: #ff5733;     /* El borde del mismo color */
            color: #ffffff;            /* Texto blanco para que resalte */
            transform: scale(1.05);    /* Efecto opcional: Crece un poquito */
        }

        /* Estado Focus (Cuando haces clic) */
        .botonvideo:focus {
            box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); /* Resplandor amarillo */
        }