/* Wrapper general del carrusel */
        .carousel-wrapper {
            position: relative;
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(3, 47, 77, 0.18);
            background-color: #1A1A1A;
            user-select: none;
        }

        /* Ventana visible */
        .carousel-viewport {
            overflow: hidden;
            width: 100%;
            aspect-ratio: 16 / 9;
        }

        /* Pista de slides */
        .carousel-track {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
            will-change: transform;
        }

        /* Cada slide */
        .carousel-slide {
            min-width: 100%;
            height: 100%;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
            transition: transform 0.4s ease;
        }

        .carousel-slide:hover img {
            transform: scale(1.02);
        }

        /* Caption opcional por slide */
        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.2rem 1.5rem 1rem;
            background: linear-gradient(to top, rgba(3, 47, 77, 0.85) 0%, transparent 100%);
            color: #fff;
            font-size: clamp(0.85rem, 2vw, 1rem);
            font-weight: 500;
            letter-spacing: 0.02em;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .carousel-slide:hover .slide-caption {
            opacity: 1;
            transform: translateY(0);
        }

        /* Botones prev / next */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background: rgba(3, 47, 77, 0.65);
            border: 2px solid rgba(246, 166, 27, 0.6);
            color: #F6A61B;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.25s, border-color 0.25s, transform 0.2s;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .carousel-btn:hover {
            background: #DE3B00;
            border-color: #DE3B00;
            color: #fff;
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-btn.prev { left: 14px; }
        .carousel-btn.next { right: 14px; }

        .carousel-btn svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
        }

        /* Barra inferior: dots + contador */
        .carousel-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: #032F4D;
        }

        .carousel-dots {
            display: flex;
            gap: 7px;
            align-items: center;
        }

        .carousel-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: 2px solid rgba(246, 166, 27, 0.5);
            background: transparent;
            cursor: pointer;
            padding: 0;
            transition: background 0.25s, border-color 0.25s, transform 0.2s;
        }

        .carousel-dot.active {
            background: #F6A61B;
            border-color: #F6A61B;
            transform: scale(1.25);
        }

        .carousel-dot:hover:not(.active) {
            background: rgba(246, 166, 27, 0.35);
            border-color: #F6A61B;
        }

        .carousel-counter {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            min-width: 42px;
            text-align: right;
        }

        /* Responsive */
        @media (max-width: 600px) {
            .carousel-btn {
                width: 36px;
                height: 36px;
            }
            .carousel-btn svg {
                width: 16px;
                height: 16px;
            }
            .carousel-btn.prev { left: 8px; }
            .carousel-btn.next { right: 8px; }
        }