/* Contenedor Principal */
    .sc_nint-hero-section {
        position: relative;
        width: 100%;
        height: 85vh; /* Altura en PC */
        background: #111;
        overflow: hidden;
        font-family: 'Helvetica Neue', sans-serif;
    }

    /* Wrapper de Slides */
    .slider-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Slide Individual */
    .hero-slide {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0; 
        visibility: hidden;
        transition: opacity 0.5s ease;
        z-index: 1;
    }

    /* Estado Activo */
    .hero-slide.active {
        opacity: 1; 
        visibility: visible; 
        z-index: 2;
    }

    /* 1. FONDO (Aparece primero) */
    .slide-bg {
        width: 100%; height: 100%;
        background-size: cover; 
        background-position: center;
        transform: scale(1.1);
        transition: transform 6s ease-out; /* Zoom lento */
    }
    .hero-slide.active .slide-bg { transform: scale(1); }

    /* 2. CAPA DEL LOGO (Contenedor) */
    .logo-layer {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        display: flex; 
        align-items: center; /* PC: Centrado vertical */
        justify-content: center; /* PC: Centrado horizontal */
        padding-bottom: 80px;
    }

    /* 3. EL LOGO (Imagen) */
    .the-logo {
        width: 40%; 
        max-width: 300px; 
        height: auto;
        /* Estilos extra por si usas una foto cuadrada como logo temporalmente: */
        max-height: 300px; 
        object-fit: contain; 
        
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }

    /* ANIMACIÓN DEL LOGO (Retraso de 0.4s para efecto pop) */
    .hero-slide.active .the-logo {
        animation: sc_nintPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        animation-delay: 0.4s; 
    }

    @keyframes sc_nintPop {
        0% { opacity: 0; transform: scale(0.5) translateY(50px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Datos SEO ocultos */
    .seo-data { display: none; }


    /* --- BARRA INFERIOR (DOCK) --- */
    .sc_nint-dock {
        position: absolute; bottom: 0; left: 0; width: 100%;
        height: 90px; 
        background: rgba(255, 255, 255, 0.95); /* Blanco casi sólido */
        backdrop-filter: blur(10px);
        border-top: 1px solid #ddd;
        z-index: 10; 
        display: flex; justify-content: center;
    }

    .dock-container {
        width: 100%; max-width: 1200px; padding: 0 20px;
        display: flex; justify-content: space-between; align-items: center;
    }

    /* Texto Dinámico */
    .dock-info h2 {
        font-size: 1.2rem; font-weight: 700; color: #333; margin: 0;
        transition: opacity 0.3s;
    }

    /* Navegación Central */
    .dock-nav { display: flex; align-items: center; gap: 15px; }

    .control-btn {
        width: 35px; height: 35px; border-radius: 50%; border: 2px solid #eee;
        background: white; color: #E60012; cursor: pointer;
        display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
        transition: 0.2s;
    }
    .control-btn:hover { background: #E60012; color: white; border-color: #E60012; }

    .nav-thumb {
        width: 55px; height: 55px; border-radius: 12px;
        position: relative; cursor: pointer; overflow: hidden;
        opacity: 0.6; transition: 0.3s; background: #000;
    }
    .nav-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .nav-thumb:hover { opacity: 1; transform: translateY(-3px); }
    .nav-thumb.active { opacity: 1; }

    /* Borde Amarillo sc_nint */
    .thumb-border {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        border: 3px solid transparent; border-radius: 12px; box-sizing: border-box; transition: 0.3s;
    }
    .nav-thumb.active .thumb-border { border-color: #F8B61D; }

    /* Categoría Derecha */
    .dock-meta { display: flex; align-items: center; gap: 10px; }
    .meta-badge {
        border: 2px solid #333; padding: 2px 6px; font-weight: 800;
        font-size: 0.9rem; border-radius: 4px; color: #333;
    }
    .meta-cat { font-size: 0.75rem; color: #888; text-transform: uppercase; font-weight: 700; }


    /* --- RESPONSIVE MÓVIL --- */
    @media (max-width: 768px) {
        .sc_nint-hero-section { height: 80vh; }
        
        /* Fondo alineado arriba */
        .slide-bg { background-position: center top; }

        /* LOGO ABAJO */
        .logo-layer {
            align-items: flex-end; /* Logo al fondo */
            padding-bottom: 110px; /* Espacio para barra */
            top: -50%;
        }
        .the-logo { width: 70%; }

        /* Dock Móvil */
        .sc_nint-dock { height: auto; padding: 15px 0; }
        .dock-container { flex-direction: column; gap: 15px; text-align: center; }
        .dock-info h2 { font-size: 1rem; }
        .dock-meta { display: none; } /* Ocultar en móvil */
    }






    
    /* 1. CONTENEDOR PRINCIPAL (Fondo Gradiente) */
    .boceto-hero-wrapper {
        position: relative;
        width: 100%;
        min-height: 85vh; /* Altura considerable */
        background: linear-gradient(120deg, #6e05e8 50%, #4edef6 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 40px 5%;
        box-sizing: border-box;
        font-family: 'thin';
    }

    /* 2. GRID INTERNO (Organiza Texto e Imagen) */
    .boceto-grid-layout {
        display: grid;
        grid-template-columns: 1.2fr 1fr; /* Texto un poco más ancho que la imagen */
        align-items: center;
        width: 100%;
        max-width: 1300px;
        gap: 40px;
        z-index: 5;
    }

    /* --- COLUMNA DE TEXTO --- */
    .boceto-txt-area {
        color: #ffffff;
    }

    /* Título Grande */
    .boceto-main-title {
        font-size: 3.5rem;
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

    /* Estilo para la palabra "ACCIÓN" (Fondo blanco) */
    .boceto-action-tag {
        background-color: #ffffff;
        color: #6200EA; /* El morado de la marca */
        padding: 0px 15px;
        display: inline-block;
        margin-top: 5px;
        border-radius: 20px;
    }
    
    .boceto-action-tag span {
        display: inline-block;
    }

    /* Subtítulo */
    .boceto-sub-title {
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 15px;
        text-transform: uppercase;
        opacity: 0.9;
    }

    /* Párrafo */
    .boceto-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 35px;
        max-width: 550px;
        font-weight: 400;
    }

    /* --- ICONOS (Fila de abajo) --- */
    .boceto-icons-row {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .boceto-ico-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.2); /* Efecto vidrio */
        backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: white;
        transition: transform 0.3s ease, background 0.3s;
        cursor: default;
    }

    .boceto-ico-box:hover {
        background: #ffffff;
        color: #6200EA;
        transform: translateY(-5px);
    }

    /* --- COLUMNA DE IMAGEN (El hombre) --- */
    .boceto-img-area {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 100%;
    }

    .boceto-char-img {
        width: 100%;
        max-width: 550px;
        height: auto;
        /* Sombra suave para despegarlo del fondo */
        filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25));
        animation: floatImg 4s ease-in-out infinite;
    }

    /* Pequeña animación de flotación para la imagen */
    @keyframes floatImg {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }


    /* =========================================
       RESPONSIVE (Móvil y Tablets)
       ========================================= */
    @media (max-width: 900px) {
        .boceto-hero-wrapper {
            /* Menos altura en móvil, alineación arriba */
            min-height: auto;
            padding-top: 100px; 
            align-items: flex-start;
        }

        .boceto-grid-layout {
            grid-template-columns: 1fr; /* Una sola columna */
            text-align: center;
            gap: 50px;
        }

        .boceto-txt-area {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centrar todo el texto */
        }

        .boceto-main-title {
            font-size: 2.5rem; /* Título más pequeño */
        }

        .boceto-description {
            font-size: 0.95rem;
            margin-bottom: 30px;
        }

        /* Imagen en móvil */
        .boceto-img-area {
            order: 2; /* Aseguramos que vaya después del texto si queremos, o antes */
            margin-bottom: -10px; /* Pegar al fondo */
        }

        .boceto-char-img {
            max-width: 380px; /* Tamaño controlado en celular */
        }
    }




    



    /* 1. FONDO GENERAL (Mantenemos la elegancia oscura) */
    .eco-section-wrapper {
        background: white;
        /* background: linear-gradient(180deg, #0F172A 0%, #1E1B4B 100%); */
        padding: 100px 5%;
        font-family: 'Montserrat', sans-serif;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .eco-header { text-align: center; margin-bottom: 60px; position: relative; z-index: 2; }
    
    .eco-title { font-size: 2.5rem; color: var(--sc-color1); font-weight: 800; text-transform: uppercase; margin-bottom: 15px; }
    /* El título usa un gradiente con tus colores principales */
    .eco-title span { 
        background: linear-gradient(90deg, #00E5FF, #6200EA);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .eco-subtitle { color: #94a3b8; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

    /* GRID */
    .eco-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative; z-index: 2;
    }

    /* 2. TARJETA BASE (Neutra al inicio) */
    .eco-card {
        background: #ffffff;
        border: 1px solid #2d3342; /* Borde sutil */
        border-radius: 24px;
        padding: 40px 30px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex; flex-direction: column; justify-content: space-between;
        min-height: 380px;
        text-decoration: none;
    }

    /* --- TEXTOS --- */
    .eco-question {
        font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
        font-weight: 700; color: #64748b; /* Gris apagado inicial */
        margin-bottom: 15px; transition: 0.3s;
    }

    .eco-brand-name {
        font-size: 2.2rem; font-weight: 900; color: var(--sc-color2); margin-bottom: 15px; line-height: 1;
    }

    .eco-desc {
        color: #94a3b8; font-size: 1rem; line-height: 1.6; margin-bottom: 30px; font-weight: 400;
        transition: 0.3s;
    }

    /* --- BOTÓN (Outline inicial) --- */
    .eco-btn {
        margin-top: auto;
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent;
        color: var(--sc-color2);
        padding: 12px 25px; border-radius: 50px;
        font-weight: 700; font-size: 0.9rem; text-transform: uppercase;
        transition: 0.3s;
        border: 1px solid #475569;
    }

    /* --- ICONO FONDO --- */
    .eco-bg-icon {
        position: absolute; bottom: -20px; right: -20px;
        font-size: 8rem; color: rgba(255,255,255,0.03);
        transition: 0.4s; transform: rotate(-10deg);
    }

    /* ============================================================ */
    /* LOGICA DE COLORES POR PROYECTO (AQUÍ ESTÁ LA MAGIA) */
    /* ============================================================ */

    /* === PROYECTO 1: ONE PULSE GO (CYAN / TURQUESA) === */
    .eco-card.onepulse:hover {
        border-color: #ff307c;
        box-shadow: 0 20px 60px #ff307c39;
        transform: translateY(-10px);
    }
    .eco-card.onepulse:hover .eco-question { color: #ff307c; }
    .eco-card.onepulse:hover .eco-btn {
        background: #ff307c; color: black; border-color: #ff307c; box-shadow: 0 0 15px rgba(255,61,0,0.4);
    }
    .eco-card.onepulse:hover .eco-bg-icon { color:#ff307c1b; transform: scale(1.1) rotate(0deg); }


    /* === PROYECTO 2: SKETCH SPORTS X (ROJO / NARANJA - ENERGÍA) === */
    .eco-card.sportsx:hover {
        border-color: #00E5FF;
        box-shadow: 0 20px 60px #00e5ff33;
        transform: translateY(-10px);
    }
    .eco-card.sportsx:hover .eco-question { color: #00E5FF; }
    .eco-card.sportsx:hover .eco-btn {
        background: #00E5FF; color: white; border-color: #00E5FF; box-shadow: 0 0 15px  rgba(0,229,255,0.4);
    }
    .eco-card.sportsx:hover .eco-bg-icon { color: #00e5ff25; transform: scale(1.1) rotate(0deg); }


    /* === PROYECTO 3: SKETCH LAB (MORADO NEÓN - INNOVACIÓN) === */
    .eco-card.lab:hover {
        border-color: #D500F9;
        box-shadow: 0 20px 60px rgba(213, 0, 249, 0.15);
        transform: translateY(-10px);
    }
    .eco-card.lab:hover .eco-question { color: #D500F9; }
    .eco-card.lab:hover .eco-btn {
        background: #D500F9; color: white; border-color: #D500F9; box-shadow: 0 0 15px rgba(213,0,249,0.4);
    }
    .eco-card.lab:hover .eco-bg-icon { color: rgba(213, 0, 249, 0.1); transform: scale(1.1) rotate(0deg); }


    /* RESPONSIVE */
    @media (max-width: 900px) {
        .eco-grid { grid-template-columns: 1fr; max-width: 450px; }
        .eco-btn { width: 100%; }
        /* En móvil, damos un pequeño borde de color siempre para identificar */
        .eco-card.onepulse { border-top: 3px solid #00E5FF; }
        .eco-card.sportsx { border-top: 3px solid #FF3D00; }
        .eco-card.lab { border-top: 3px solid #D500F9; }
    }









    .partners-section {
        background-color: #ffffff; /* Fondo blanco para limpiar la vista */
        padding: 80px 5%;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        border-bottom: 1px solid #eee; /* Línea sutil abajo */
    }

    .partners-header {
        margin-bottom: 50px;
    }

    .partners-title {
        font-size: 1.8rem;
        font-weight: 800;
        color: #1e293b; /* Gris muy oscuro */
        text-transform: uppercase;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .partners-line {
        width: 60px;
        height: 4px;
        background: #6200EA; /* Tu morado de marca */
        margin: 0 auto;
        border-radius: 2px;
    }

    /* GRID DE LOGOS */
    .partners-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px 60px; /* Espacio entre logos */
        max-width: 1200px;
        margin: 0 auto;
        align-items: center; /* Centrados verticalmente */
    }

    /* CONTENEDOR DE CADA LOGO */
    .partner-logo-box {
        width: 140px; /* Tamaño estándar */
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        filter: grayscale(100%) opacity(0.6); /* EFECTO BLANCO Y NEGRO INICIAL */
        cursor: pointer;
    }

    .partner-logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Asegura que el logo no se deforme */
    }

    /* HOVER: SE PONE A COLOR */
    .partner-logo-box:hover {
        filter: grayscale(0%) opacity(1); /* Vuelve el color */
        transform: scale(1.1); /* Crece un poquito */
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .partners-grid {
            gap: 30px;
        }
        .partner-logo-box {
            width: 100px; /* Logos más pequeños en celular */
        }
        .partners-title {
            font-size: 1.5rem;
        }
    }












    .ready-section {
        /* Gradiente Morado Vibrante para cerrar con energía */
        background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 100%);
        padding: 100px 5%;
        text-align: center;
        color: white;
        font-family: 'Montserrat', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* PATRÓN DE FONDO (Opcional, para textura) */
    .ready-bg-pattern {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.5;
        pointer-events: none;
    }

    .ready-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
    }

    .ready-title {
        font-size: 3rem;
        font-weight: 900;
        margin-bottom: 20px;
        text-transform: uppercase;
        line-height: 1.1;
    }

    .ready-subtitle {
        font-size: 1.2rem;
        font-weight: 400;
        margin-bottom: 40px;
        opacity: 0.9;
    }

    /* BOTÓN FINAL (Blanco y Grande) */
    .ready-btn {
        display: inline-block;
        background: #ffffff;
        color: #4A00E0;
        font-size: 1.1rem;
        font-weight: 800;
        padding: 18px 50px;
        border-radius: 50px;
        text-decoration: none;
        text-transform: uppercase;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .ready-btn:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        background: #00E5FF; /* Cyan al hover */
        color: #000;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .ready-title { font-size: 2rem; }
        .ready-btn { width: 100%; box-sizing: border-box; }
    }











    /* CONTENEDOR PRINCIPAL NEWS */
.sc-news-scroll {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    
    /* TRUCO MATEMÁTICO:
       Calcula el espacio para que la primera tarjeta se alinee con un contenedor de 1200px.
       Si la pantalla es pequeña, usa 5% de margen. Si es grande, usa el cálculo de centrado. */
    padding-left: max(5%, calc((100% - 1200px) / 2));
    padding-right: 5%; /* Espacio al final */
    padding-top: 20px;
    padding-bottom: 40px;

    /* IMPORTANTE: Esto le dice al "imán" (scroll-snap) que respete ese margen */
    scroll-padding-left: max(5%, calc((100% - 1200px) / 2));
    
    scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    scroll-behavior: smooth;
}

/* Ajuste también para el header para que el título se alinee igual */
.sc-news-header {
    /* Mismo padding para que el título 'Agenda' y la primera tarjeta coincidan */
    padding-left: max(5%, calc((100% - 1200px) / 2));
    padding-right: max(5%, calc((100% - 1200px) / 2));
    margin-bottom: 40px;
    padding-top: 30px;
    margin-bottom: 30px;
    display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap;
}
    .sc-news-title { font-size: 2rem; font-weight: 800; color: #1e293b; text-transform: uppercase; margin: 0; }
    .sc-news-link { color: #6200EA; text-decoration: none; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
    .sc-news-link:hover { color: #00E5FF; gap: 12px; }

    /* CONTENEDOR WRAPPER (Para controlar flechas y scroll) */
    .sc-carousel-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    /* EL ÁREA DE SCROLL */
    .sc-news-scroll {
        display: flex;
        width: 100%;
        margin: auto;
        gap: 25px;
        overflow-x: auto;
        padding: 20px 5%;
        padding-bottom: 40px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox: Ocultar barra */
        scroll-behavior: smooth; /* Suavidad nativa */
    }
    /* Ocultar barra scroll en Chrome/Safari */
    .sc-news-scroll::-webkit-scrollbar { display: none; }


    /* --- BOTONES DE NAVEGACIÓN (FLECHAS) --- */
    .sc-nav-btn {
        position: absolute;
        top: 45%; /* Centrado verticalmente respecto a las tarjetas */
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: white;
        border: 1px solid #eee;
        border-radius: 50%;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        z-index: 10;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #6200EA;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        outline: none;
    }

    .sc-nav-btn:hover {
        background: #6200EA;
        color: white;
        box-shadow: 0 10px 20px rgba(98, 0, 234, 0.3);
        transform: translateY(-50%) scale(1.1);
    }

    .sc-prev-btn { left: 2%; }
    .sc-next-btn { right: 2%; }

    /* Ocultar flecha izquierda si estamos al inicio (se maneja con JS, pero por defecto visible) */
    .sc-nav-btn.hidden { opacity: 0; pointer-events: none; }


    /* --- TARJETAS (Mismo estilo anterior) --- */
    .sc-news-card {
        min-width: 280px; max-width: 300px; background: white; border-radius: 16px; overflow: hidden;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: all 0.3s ease; scroll-snap-align: start;
        text-decoration: none; color: inherit; position: relative; border: 1px solid transparent; flex-shrink: 0;
    }
    .sc-news-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(98, 0, 234, 0.15); border-color: #00E5FF; }

    .sc-card-img-box { width: 100%; height: 180px; overflow: hidden; position: relative; }
    .sc-card-img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
    .sc-news-card:hover .sc-card-img-box img { transform: scale(1.1); }

    .sc-card-tag { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.7); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; backdrop-filter: blur(4px); }
    .tag-sports { background: #FF3D00; } .tag-tech { background: #6200EA; } .tag-mkt { background: #00E5FF; color: black; }

    .sc-card-body { padding: 20px; }
    .sc-card-meta { font-size: 0.8rem; color: #94a3b8; font-weight: 600; margin-bottom: 8px; display: block; }
    .sc-card-title { font-size: 1.1rem; font-weight: 800; line-height: 1.4; color: #1e293b; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sc-card-action { font-size: 0.85rem; font-weight: 700; color: #6200EA; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
    .sc-news-card:hover .sc-card-action { color: #00E5FF; }

    /* RESPONSIVE: FLECHAS SUTILES EN MÓVIL */
    @media (max-width: 768px) {
        .sc-nav-btn {
            width: 35px; height: 35px; font-size: 1rem;
            background: rgba(255,255,255,0.8); /* Semitransparente */
            backdrop-filter: blur(4px);
        }
        .sc-prev-btn { left: 5px; }
        .sc-next-btn { right: 5px; }
    }