/* ================================================================
   ESTILOS PREMIUM FONDITOS COLECCIONES - REFINADO BING STYLE
   ================================================================ */

/* --- CONFIGURACIÓN MODO OSCURO (ESTILO BING / WALLPAPERHUB) --- */
@media (prefers-color-scheme: dark) {
    :root {
        --ms-bg: #111111; 
        --ms-text-main: #f5f5f7;
        --ms-text-sub: #a1a1a6;
        --ms-accent: #1b73e8;
        --ms-shadow: 0 12px 40px rgba(0,0,0,0.65);
        --ms-radius: 12px;
    }

    body.collections-page {
        background-color: var(--ms-bg);
        color: var(--ms-text-main);
    }

    .ms-hero-blur {
        filter: brightness(0.7) contrast(1.1); 
        -webkit-mask-image: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 80%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 80%, transparent 100%) !important;
    }

    .ms-hero-blur::after {
        background: var(--ms-bg) !important;
        filter: blur(40px) !important;
        height: 50% !important;
        opacity: 0.9;
    }

    .btn-ms.secondary {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .ms-strip-card img { box-shadow: 0 8px 25px rgba(0,0,0,0.5); }
    
    .ms-folder-img { 
        background: #1c1c1e; 
        box-shadow: 0 12px 40px rgba(0,0,0,0.6); 
    }
    .ms-folder-title { color: #ffffff !important; }
    .ms-folder-desc { color: #a1a1a6 !important; }
}

/* --- CONFIGURACIÓN MODO CLARO --- */
:root {
    --ms-bg: #ffffff;
    --ms-text-main: #1a1a1a;
    --ms-text-sub: #555555;
    --ms-accent: #0078d4;
    --ms-radius: 12px;
    --ms-shadow: 0 8px 30px rgba(0,0,0,0.12);
    --ms-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.collections-page {
    background-color: var(--ms-bg);
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ms-text-main);
}

/* --- HERO SECTION --- */
.ms-hero {
    position: relative;
    height: 85vh;
    min-height: 650px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-bottom: 80px;
}

.ms-hero-blur {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center 20%;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, rgba(0, 0, 0, 0.4) 85%, transparent 100%);
}

.ms-hero-blur::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 40%;
    background: inherit;
    filter: blur(20px);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
}

.ms-hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.ms-hero-text {
    max-width: 600px;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out;
}

.ms-title {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: -1.5px;
    color: #ffffff !important; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.4); 
}

.ms-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 30px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* --- BOTONES --- */
.ms-hero-actions { display: flex; gap: 12px; }
.btn-ms {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: var(--ms-transition);
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-ms.primary { background: #d11043; color: white; }
.btn-ms.secondary {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4);
}
.btn-ms:hover, .btn-ms:active { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    filter: brightness(1.1); 
}

/* --- STRIPS --- */
.ms-strips-container { margin-top: 20px; overflow-x: auto; padding: 10px 0 30px 0; scrollbar-width: none; }
.ms-strips-container::-webkit-scrollbar { display: none; }
.ms-strips-track { display: flex; gap: 16px; width: max-content; }
.ms-strip-card { width: 280px; flex-shrink: 0; transition: var(--ms-transition); cursor: pointer; }
.ms-strip-card img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--ms-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: var(--ms-transition); }
.ms-strip-card:hover img, .ms-strip-card:active img { transform: scale(1.04); box-shadow: 0 10px 25px rgba(0,0,0,0.25); }

/* --- GRILLA Y CARPETAS --- */
.ms-main-content { padding: 40px 40px 100px 40px; max-width: 1400px; margin: 0 auto; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 50px 30px; }
.ms-folder { text-decoration: none; color: inherit; transition: var(--ms-transition); display: block; }
.ms-folder-stack { position: relative; height: 200px; margin-bottom: 20px; }
.ms-folder-img { position: absolute; border-radius: var(--ms-radius); overflow: hidden; box-shadow: var(--ms-shadow); transition: var(--ms-transition); background: #eee; }
.ms-folder-img img { width: 100%; height: 100%; object-fit: cover; }

/* Cascada e Interacción de Carpetas */
.img-0 { z-index: 3; width: 100%; height: 180px; bottom: 0; left: 0; }
.img-1 { z-index: 2; width: 90%; height: 180px; bottom: 10px; left: 5%; opacity: 0.6; }
.img-2 { z-index: 1; width: 80%; height: 180px; bottom: 20px; left: 10%; opacity: 0.3; }

/* EFECTO HOVER CARPETAS (Abanico Premium) */
.ms-folder:hover .img-0, .ms-folder:active .img-0 { transform: translateY(-12px); }
.ms-folder:hover .img-1, .ms-folder:active .img-1 { transform: translateY(-20px) scale(0.95); opacity: 0.8; }
.ms-folder:hover .img-2, .ms-folder:active .img-2 { transform: translateY(-28px) scale(0.9); opacity: 0.5; }

/* TEXTOS DE CARPETAS ADAPTATIVOS */
.ms-folder-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px 0; color: var(--ms-text-main); letter-spacing: -0.3px; transition: color 0.3s ease; }
.ms-folder-desc { font-size: 0.92rem; color: var(--ms-text-sub); line-height: 1.5; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-folder:hover .ms-folder-title { color: var(--ms-accent); }

/* ANIMACIONES */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   OPTIMIZACIÓN RESPONSIVE MOVIL
   ================================================================ */

@media (max-width: 768px) {
    .ms-hero { height: auto; padding-top: 100px; padding-bottom: 40px; }
    .ms-hero-container { padding: 0 20px; }
    .ms-title { font-size: 2.1rem; letter-spacing: -1px; }
    
    .ms-strips-container {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .ms-strip-card { width: 240px; } 

    .ms-main-content { padding: 30px 20px; }
    .ms-grid { gap: 40px 20px; }
    
    .ms-folder-stack { height: 240px; } 
    .img-0 { height: 220px; }
    .img-1 { height: 220px; bottom: 10px; }
    .img-2 { height: 220px; bottom: 20px; }
    
    .ms-folder-title { font-size: 1.3rem; }
    
    /* En móvil, el abanico es más sutil para no tapar contenido superior al tocar */
    .ms-folder:active .img-0 { transform: translateY(-8px); }
    .ms-folder:active .img-1 { transform: translateY(-12px) scale(0.95); }
    .ms-folder:active .img-2 { transform: translateY(-16px) scale(0.9); }
}

/* ================================================================
   FIX PARA FONDITOS COLECCION, IMAGENES RESPOSIVES, IPAD, AND PROS 
   ================================================================ */

@media (min-width: 500px) and (max-width: 1280px) {
    
    /* 1. Centramos el contenedor para que no se salga por la derecha */
    .ms-main-content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important; /* Evita el scroll horizontal */
        padding: 0 !important;
    }

    /* 2. Forzamos 2 columnas CENTRADAS */
    .ms-main-grid.grid-orientation-pc,
    .ms-main-grid.grid-orientation-phone,
    .ms-main-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important;
        width: 92% !important; /* Le damos aire a los lados */
        margin: 0 auto !important; /* MAGIA: Esto centra la grilla */
        padding: 20px 0 !important;
    }

    /* 3. Aseguramos que las tarjetas no hereden anchos raros */
    .ms-wall-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .ms-wall-card img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 15px !important;
    }
}

/* 4. REGLA DE SEGURIDAD PARA ESCRITORIO (Para que no se vea "al revés") */
@media (min-width: 1281px) {
    /* Aquí devolvemos el control a tu diseño original de PC */
    .ms-main-grid {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
}



/* ================================================================
(OPTIMIZADO PARA ESCRITORIO Y TABLET) home collections 
   ================================================================ */

@media (min-width: 481px) {
    body .ms-grid {
        display: grid !important;
        /* Subimos el mínimo a 300px para que en escritorio prefiera 4 columnas grandes en lugar de 5 pequeñas */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; 
        gap: 50px 25px !important;
        width: 96% !important;
        max-width: 1600px !important; /* Permitimos que el grid abra un poco más */
        margin: 40px auto 0 !important;
        padding: 30px 0 !important;
        overflow: visible !important; 
    }

    body .ms-folder {
        width: 100% !important;
        /* Subimos el max-width para que en pantallas grandes luzcan más */
        max-width: 420px !important; 
        margin: 0 auto !important;
        overflow: visible !important; 
    }

    body .ms-folder-stack {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        margin-top: 10px !important; 
    }

    /* Espacio para la descripción */
    body .ms-folder-info {
        text-align: center !important;
        min-height: 70px !important;
        padding: 10px 5px !important;
    }
}



/* ================================================================
   CSS PARA ADAPTAR MENU POPULAR - CORREGIDO
   ================================================================ */
.ms-hero-wrapper {
    position: relative;
    width: 100%;
}

/* --- MENÚ DE SECCIONES (FLOTANTE) --- */
.ms-section-nav {
    position: absolute;
    /* Ajustamos 'top' para que baje y salga de debajo del header principal */
    top: 80px; 
    left: 0;
    width: 100%;
    z-index: 20; 
    padding: 15px 0;
    /* Degradado un poco más oscuro arriba para compensar la transparencia del header */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.ms-section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: flex-start;
}

/* Estilos para los enlaces */
.ms-section-nav a {
    color: white !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 25px;
    opacity: 0.8;
    transition: all 0.3s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.ms-section-nav a:hover {
    opacity: 1;
    transform: translateY(-1px);
}



/* ================================================================
   REFINAMIENTO PREMIUM: MENÚ DE SECCIONES POPULAR (GLASS STYLE)
   ================================================================ */

/* Contenedor del menú para asegurar que los elementos respiren */
.ms-section-container {
    display: flex;
    gap: 12px; /* Espaciado entre botones */
    align-items: center;
}

/* Estilo base de los botones (Glassmorphism) */
.ms-section-nav a {
    background: rgba(255, 255, 255, 0.1) !important; /* Fondo casi invisible */
    backdrop-filter: blur(12px) saturate(160%); /* El efecto de cristal */
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borde de cristal */
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 50px !important; /* Estilo píldora moderno */
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Íconos dentro de los botones */
.ms-section-nav a i {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ESTADO HOVER: Brillo sutil */
.ms-section-nav a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ESTADO ACTIVO (Seleccionado): El que ahora se ve azul */
/* Cambiamos el azul por un blanco sólido traslúcido para que destaque */
.ms-section-nav a.active, 
.ms-section-nav a[class*="current"] {
    background: rgba(255, 255, 255, 0.9) !important; /* Casi blanco sólido */
    color: #111111 !important; /* Texto oscuro para contraste máximo */
    border-color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Quitar el punto azul o adornos que traiga el menú original */
.ms-section-nav a::before, 
.ms-section-nav a::after {
    display: none !important;
}

/* --- AJUSTE PARA MODO OSCURO --- */
@media (prefers-color-scheme: dark) {
    .ms-section-nav a {
        background: rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .ms-section-nav a.active {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* --- AJUSTE MÓVIL (Scroll horizontal suave) --- */
@media (max-width: 1024px) {
    .ms-main-grid {
        padding: 20px 20px !important;
        gap: 15px !important;
    }

    /* Evita que las imágenes horizontales se vean gigantescas */
    .grid-orientation-pc {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

/* --- 2. MÓVILES (Smartphones) --- */
@media (max-width: 768px) {
    /* Mantengo tu ajuste de navegación previo */
    .ms-section-nav {
        background: transparent !important;
    }
    
    .ms-section-container {
        padding-bottom: 5px;
    }

    /* Grilla principal en móvil */
    .ms-main-grid {
        padding: 10px !important;
        column-gap: 12px !important; 
        row-gap: 25px !important; 
    }

    /* Horizontales: 1 columna para que luzcan bien */
    .grid-orientation-pc {
        grid-template-columns: 1fr !important; 
    }
    
    /* Verticales: 2 columnas (Estilo Apple/Pinterest) */
    .grid-orientation-phone {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Fix para que las carpetas de colecciones no ocupen media pantalla */
    .ms-folder-stack {
        height: 180px !important;
    }
}

/* ================================================================
   BASE ORIGINAL (ESCRITORIO) - NO SE TOCA
   ================================================================ */
.ms-section-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ms-section-nav a {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.ms-section-nav a i {
    font-size: 1.1rem;
    opacity: 0.9;
}

.ms-section-nav a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ms-section-nav a.active, 
.ms-section-nav a[class*="current"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #111111 !important;
    border-color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ms-section-nav a::before, 
.ms-section-nav a::after {
    display: none !important;
}

@media (prefers-color-scheme: dark) {
    .ms-section-nav a {
        background: rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    .ms-section-nav a.active {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* ================================================================
   FIX para el menu L: CENTRADO Y SEPARACIÓN EN MOVIL
   ================================================================ */
@media (max-width: 768px) {
    .ms-section-nav {
        background: transparent !important;
        position: absolute;
        /* BAJAMOS EL MENÚ: Ajusta este valor si necesitas que baje más */
        top: 75px !important; 
        left: 0;
        width: 100% !important;
        display: block !important;
    }
    
    .ms-section-container {
        padding: 0 !important;
        /* CENTRADO ABSOLUTO */
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
        width: 100% !important;
        /* GAP COMPACTO */
        gap: 8px !important; 
        overflow: visible !important;
    }

    /* Reset de posibles contenedores intermedios del include */
    .ms-section-nav li, 
    .ms-section-nav ul,
    .ms-section-nav div:not(.ms-section-container) {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        gap: 8px !important;
    }

    .ms-section-nav a {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important; 
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0 !important;
    }

    .ms-section-nav a .menu-text {
        display: none !important; 
    }

    .ms-section-nav a i {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}



/* --- AJUSTE PARA EL HERO --- */
.ms-hero {
    /* Aumentamos el padding para que el texto (título/subtítulo) 
       no choque con este nuevo menú que acabamos de bajar */
    padding-top: 140px; 
}

/* --- ADAPTACIÓN MODO OSCURO --- */
@media (prefers-color-scheme: dark) {
    .ms-section-nav {
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    }
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .ms-section-nav {
        /* En móviles los headers suelen ser más pequeños (ej: 60px) */
        top: 65px; 
        padding: 10px 0;
    }

    .ms-section-container {
        padding: 0 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ms-section-container::-webkit-scrollbar { display: none; }
    
    .ms-section-nav a {
        font-size: 0.85rem;
        margin-right: 15px;
    }

    .ms-hero {
        padding-top: 110px;
    }
}

/* ================================================================
   REDISEÑO UNIFICADO: CARPETAS Y IMAGENES Home y sub
   ================================================================ */

/* 1. Ajuste del contenedor: bajamos el scroll para que no tape lo de arriba */
.ms-strips-container {
    margin-top: 50px !important; /* Espacio extra para que no se suba */
    padding: 60px 0 40px 0 !important; /* Más aire para el abanico */
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.ms-strips-track {
    display: flex !important;
    gap: 30px !important; 
    padding: 0 40px !important;
    align-items: flex-start !important;
}

/* 2. La Tarjeta: Forzamos el chasis */
.ms-strip-card {
    width: 260px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Espacio entre carpeta y texto */
    text-decoration: none !important;
    background: transparent !important;
}

/* 3. El visual: AQUÍ ESTÁ EL FIX DEL SAMSUNG VERTICAL */
.stack-wrapper, .ms-card-visual {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* Obligatorio 16:9 */
    border-radius: 12px !important;
    overflow: visible !important; /* Para que las fotos de atrás se vean */
}

/* 4. Estilo de las imágenes: Forzamos el recorte y colores dinámicos */
.stack-img, .ms-card-visual img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important; /* Mantiene a raya las fotos verticales */
    border-radius: 12px !important;
    
    /* Borde dinámico usando tus variables de Fonditos */
    border: 1px solid var(--bg-card-border) !important;
    
    /* Sombra equilibrada para ambos modos */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* En modo hover, resaltamos un poco más el borde usando tu variable secundaria */
.ms-strip-card:hover .stack-img, 
.ms-strip-card:hover .ms-card-visual img {
    border-color: var(--text-secondary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 5. Rotaciones del Stack: Quitamos el relative que causaba el bug */
.s-img-0 { z-index: 3; transform: scale(1); }
.s-img-1 { z-index: 2; transform: scale(0.96) translateY(-12px) rotate(-2deg); opacity: 0.9; }
.s-img-2 { z-index: 1; transform: scale(0.92) translateY(-24px) rotate(3deg); opacity: 0.7; }

/* 6. El Texto: MODO CLARO Y OSCURO AUTOMÁTICO */
/* 6. El Texto: Sincronizado con el sistema de variables de Fonditos */
.ms-card-info {
    text-align: center !important;
    padding: 0 5px !important;
    transition: all 0.3s ease !important;
}

.ms-info-title {
    display: block !important;
    /* Usamos tus variables exactas */
    color: var(--text-main) !important; 
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.ms-info-subtitle {
    display: block !important;
    /* Usamos tu variable secundaria para el look tenue */
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    opacity: 0.8;
}

/* --- AJUSTES MODO CLARO FORZADOS (Si no usas variables) --- */
body.light-mode .ms-info-title, 
.light .ms-info-title { color: #1a1a1a !important; }

body.light-mode .ms-info-subtitle, 
.light .ms-info-subtitle { color: #666666 !important; }

/* 7. Hover Premium */
.ms-strip-card:hover .s-img-0 { transform: translateY(-5px) scale(1.02); }
.ms-strip-card:hover .s-img-1 { transform: translateY(-18px) rotate(-4deg) scale(0.98); }
.ms-strip-card:hover .s-img-2 { transform: translateY(-30px) rotate(6deg) scale(0.95); }

@media (max-width: 768px) {
    .ms-strip-card { width: 200px !important; }
}


/* ================================================================
   AJUSTE MÓVIL (COMPACTO PERO HORIZONTAL)
   ================================================================ */
@media (max-width: 768px) {
    .ms-strip-card {
        width: 160px !important; /* Reducimos el ancho pero mantenemos el aspect-ratio 16:9 */
    }
    
    .strip-folder-title {
        font-size: 0.65rem !important;
        padding: 8px !important;
    }
}


/* ================================================================
   REFINAMIENTO DE GRID: ADAPTATIVO (OPTIMIZADO)
   ================================================================ */

/* Contenedor Base del Grid */
.ms-main-grid {
    display: grid !important;
    gap: 20px !important; 
    padding: 20px 40px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* --- TARJETA DE WALLPAPER --- */
.ms-wall-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important; /* Un poco más redondeado para el look Apple */
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.ms-wall-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.ms-wall-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    z-index: 10;
}

.ms-wall-card:hover img {
    transform: scale(1.08) !important;
}

/* --- ORIENTACIÓN PC (Horizontal) --- */
.grid-orientation-pc {
    /* Bajamos el mínimo a 300px para que quepan 2 o 3 en iPads/Tablets */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

.grid-orientation-pc .ms-wall-card {
    aspect-ratio: 16 / 9 !important;
}

/* --- ORIENTACIÓN TELÉFONO (Vertical) --- */
.grid-orientation-phone {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

.grid-orientation-phone .ms-wall-card {
    aspect-ratio: 9 / 16 !important;
}



/* ================================================================
   CORRECCION DE DEFORMACION AL PONER TITULO EN IMAGENES DEL FONDITOS_COLECCIONS
   ================================================================ */

/* 1. Forzamos a que la tarjeta ocupe el ancho de la columna del grid */
.ms-main-grid .ms-strip-card {
    width: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
}

/* 2. El marco de la imagen (Recuperamos el tamaño) */
.ms-wall-card {
    position: relative !important;
    width: 100% !important;
    /* Esto es vital: si es PC usa 16/9, si es móvil el grid ya lo maneja */
    aspect-ratio: inherit !important; 
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* 3. Ajuste de imagen para que no se achique */
.ms-wall-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4. Texto estilo Microsoft (Sincronizado) */
.ms-card-info {
    text-align: center !important;
    padding-top: 5px !important;
}

.ms-info-title {
    color: var(--text-main) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: block !important;
}

/* 5. Hover optimizado */
.ms-strip-card:hover .ms-wall-card {
    transform: translateY(-5px) !important;
    border-color: var(--text-secondary) !important;
}

.ms-strip-card:hover img {
    transform: scale(1.05) !important;
}


/* ================================================================
   RESPONSIVE MÓVIL: UNA CARPETA POR LÍNEA + IMÁGENES PERFECTAS
   ================================================================ */
@media (max-width: 768px) {
    /* Contenedor principal con margen elegante constante */
    body.collections-page .ms-main-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: auto !important;
    }

    /* --- GRILLA DE CARPETAS (PÁGINA PRINCIPAL) --- */
    .ms-grid { 
        display: grid !important;
        /* FORZAMOS UNA SOLA COLUMNA PARA QUE SE LEA TÍTULO Y DESCRIPCIÓN */
        grid-template-columns: 1fr !important; 
        gap: 45px 0 !important; /* Espacio vertical generoso entre carpetas */
    }

    .ms-folder-stack {
        height: 220px !important; /* Altura original para que luzca el stack */
        width: 100% !important;
        max-width: none !important;
    }

    .img-0, .img-1, .img-2 {
        height: 200px !important; /* Imágenes de carpeta grandes */
    }

    .ms-folder-title {
        font-size: 1.3rem !important;
        margin-top: 10px !important;
    }

    .ms-folder-desc {
        display: block !important; /* Aseguramos que se vea la descripción */
        -webkit-line-clamp: none !important; 
        font-size: 0.95rem !important;
    }

    /* --- GRILLA DE IMÁGENES (DENTRO DE COLECCIÓN) --- */
    .ms-main-grid {
        display: grid !important;
        padding: 0 !important;
        margin-top: 30px !important;
        column-gap: 12px !important; 
        row-gap: 35px !important; /* Espacio para el título que vas a poner */
    }

    /* PC en móvil: Una columna (16:9) */
    .grid-orientation-pc {
        grid-template-columns: 1fr !important; 
    }
    
    /* Teléfono en móvil: Dos columnas (9:16) */
    .grid-orientation-phone {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ms-wall-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
}


/* ==========================================
   NUEVA EXPERIENCIA MODAL VIEW PREMIUM
   =========================================== */

/* Contenedor Base: Fondo con desenfoque inmersivo */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    z-index: 3000000;
    opacity: 0;
    transition: opacity 0.5s ease;
    
    /* CONTROL DE SCROLL */
    overflow-y: auto;
    overscroll-behavior: contain; /* Bloquea el rebote al fondo */
    
    /* Ocultar scrollbar estética */
    scrollbar-width: none; 
}

.modal::-webkit-scrollbar {
    display: none;
}

.modal::-webkit-scrollbar { display: none; } /* Ocultar en Chrome/Safari */

.modal.active { opacity: 1; }

/* El Wrapper que permite el flujo vertical */
.modal-content-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

/* Contenedor central de contenido */
.modal-container-focus {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.active .modal-container-focus {
    transform: translateY(0) scale(1);
}

/* --- SECCIÓN 1: EL STAGE (IMAGEN) --- */
.modal-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Limitamos el alto para que la vertical no rompa todo */
    max-height: 82vh; 
}

/* La sombra y el borde van SOLAMENTE en el contenedor o en el placeholder */
.main-view-img, .placeholder-blur {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 28px;
    object-fit: contain;
    /* Quitamos sombra y borde de aquí para que no se dupliquen */
}

.placeholder-blur {
    position: absolute;
    filter: blur(20px);
    z-index: 1;
    transform: scale(1.02); 
    /* La sombra la dejamos aquí para que esté desde el segundo 0 */
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.main-view-img {
    position: relative;
    z-index: 2;
    background: transparent;
    transition: opacity 0.6s ease-in-out; /* Fundamental para el efecto */
}

/* Botón principal estilo píldora Apple */
.download-btn-pill {
    background: #ffffff;
    color: #000;
    padding: 16px 40px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255,255,255,0.1);
}

.download-btn-pill:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 40px rgba(255,255,255,0.2);
}

/* --- SECCIÓN 2: PANEL DE DETALLES --- */
.modal-details-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.wall-title-display {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.wall-category-taglinelineline {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
}

/* Grid de resoluciones en columnas */
.resolutions-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.resolution-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px;
    border-radius: 16px;
    color: white;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resolution-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- SECCIÓN 3: RELACIONADOS --- */
.related-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.related-mini-grid img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.related-mini-grid img:hover { opacity: 1; }

/* Responsive móvil */
@media (max-width: 768px) {
    .resolutions-grid-layout { grid-template-columns: 1fr 1fr; }
    .related-mini-grid { grid-template-columns: 1fr 1fr; }
    .modal-details-panel { padding: 25px; }
}



/* --- BLOQUE DE DESCARGAS --- */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-text {
    flex: 1;
    text-align: left;
}

/* Título (Leaves, Aquarium, etc.) */
.wall-title-display {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #fff;
    letter-spacing: -0.5px;
}

/* Subtítulo (Elige tu resolución...) */
.wall-category-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Botón Share Reubicado */
#shareBtn.share-btn-circle {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Evita que se encoja si el título es largo */
}

#shareBtn.share-btn-circle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

#shareBtn.share-btn-circle i {
    font-size: 20px;
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .wall-title-display {
        font-size: 20px;
    }
    
    .wall-category-tagline {
        font-size: 13px;
    }

    #shareBtn.share-btn-circle {
        width: 40px;
        height: 40px;
    }
}


/* ==========================================
   MODAL VIEW alineacion critica
   =========================================== */


/* 1. EL BODY: Bloqueo de precisión (MANTENIDO) */
body.modal-open {
    overflow: hidden;
    touch-action: none; 
    -webkit-overflow-scrolling: none;
    padding-right: var(--scrollbar-width, 0px);
}

/* 2. EL MODAL: Anclaje de 4 puntos (El truco definitivo para Safari) */
#imgModal {
    display: none;
    position: fixed !important;
    
    /* En lugar de top:0 y left:0 solamente, anclamos los 4 lados */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    /* Forzamos el alto dinámico */
    width: 100% !important;
   height: 100% !important;     /* Respaldo para navegadores antiguos */
   height: 100dvh !important;    /* El estándar dinámico que ya usas */
    
    z-index: 10000;
    
    /* Estética Glassmorphism */
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    color: #ffffff !important;

    /* Áreas seguras de iPhone */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    
    /* Candado Anti-Baile */
    overflow-x: hidden !important; 
    overflow-y: auto !important;
    touch-action: pan-y; 
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 3. EL WRAPPER: Centrado total */
.modal-content-wrapper {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/* 4. LAS TARJETAS: Cristal, Centradas y con Vida */
.resolution-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    padding: 12px 15px;
    border-radius: 14px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Centrado y ancho ideal para iPhone 15 Pro Max */
    width: 90%; 
    max-width: 280px;
    margin: 6px auto; 
    box-sizing: border-box;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Efecto Mouse (Escritorio) */
@media (hover: hover) {
    .resolution-item:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
}

/* Efecto Dedo (Feedback Táctil) */
.resolution-item:active {
    transform: scale(0.95); /* Efecto de hundimiento claro */
    background: rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.1s;
}

/* Estilo de Texto dentro de tarjetas */
.resolution-item strong {
    color: #ffffff !important;
    font-size: 1.05em;
    margin-bottom: 2px;
    pointer-events: none;
}

.resolution-item small {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8em;
    pointer-events: none;
}

/* Forzar títulos y textos a blanco con sombra para legibilidad */
#imgModal h2, 
#imgModal .modal-wall-title, 
#imgModal p,
#imgModal span {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    text-align: center;
}



/* ============================================================
   ADAPTACIÓN AUTOMÁTICA AL MODO CLARO (VERSIÓN FINAL REY)
   ============================================================ */

@media (prefers-color-scheme: light) {
    #imgModal {
        /* Fondo neblina blanca tipo Apple */
        background-color: rgba(255, 255, 255, 0.45) !important;
        /* Saturación extra para que los colores del wallpaper brillen */
        backdrop-filter: blur(25px) saturate(200%) contrast(95%);
        -webkit-backdrop-filter: blur(25px) saturate(200%) contrast(95%);
        color: #1d1d1f !important;
    }

    /* Forzamos que los textos pasen a negro Apple */
    #imgModal h2, 
    #imgModal .modal-wall-title, 
    #imgModal p, 
    #imgModal span,
    #imgModal strong,
    #imgModal h3,
    #imgModal .related-title {
        color: #1d1d1f !important;
        text-shadow: none !important; /* Quitamos la sombra de modo oscuro */
    }

    /* Las tarjetas de resolución en modo claro */
    #imgModal .resolution-item {
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    #imgModal .resolution-item small {
        color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Feedback táctil en modo claro */
    #imgModal .resolution-item:active {
        background: rgba(0, 0, 0, 0.1) !important;
    }

    /* 1. LA X: La dejamos intacta (Rosa original) */
    #imgModal .close-btn {
        filter: none !important;
        opacity: 1 !important;
    }

    /* 2. EL COMPARTIR: Este sí lo invertimos para que se vea negro */
    #imgModal #shareBtn img {
        filter: brightness(0) saturate(100%) invert(10%) !important;
    }
}


/* ============================================================
   DETALLES DE JOYERÍA: PERFECCIÓN MODO CLARO (VERSIÓN LIMPIA)
   ============================================================ */

@media (prefers-color-scheme: light) {
    /* 1. Limpiamos las sombras de texto en TODO el modal (Related y Footer) */
    #imgModal h3, 
    #imgModal .related-title,
    #imgModal #modalCollectionTitle,
    #imgModal #modalCollectionDesc {
        text-shadow: none !important;
        color: #1d1d1f !important;
    }

    /* 2. PROTECCIÓN DE LA X: 
       Eliminamos cualquier estilo previo y nos aseguramos de que no se invierta */
    .modal .close-btn {
        filter: none !important;
        /* No añadimos estilos aquí para que use el rosa original */
    }

    /* 3. Las miniaturas de abajo: un toque de clase sutil */
    #modalRelatedGrid img {
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        background: #fff;
    }
}


/* ==========================================
   MODAL VIEW alineacion critica. FIN 
   =========================================== */



/* Contenedor relativo para que la X sepa dónde posicionarse */
.image-wrapper {
    position: relative; /* Indispensable */
    width: fit-content; /* Se ajusta al ancho de la imagen */
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* La X de cierre perfecta */
.close-btn {
    position: absolute;
    top: -15px;    /* Un poco hacia arriba para que "flote" en el borde */
    right: -15px;  /* Un poco hacia afuera para no tapar la imagen */
    width: 32px;
    height: 32px;
    background: #d00f43; /* Tu color de acento para coherencia */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 100; /* Siempre por encima */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    border: 2px solid rgba(255,255,255,0.1);
}

.close-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background: #f01452; /* Un toque más brillante */
}

/* Ajuste móvil para que no se salga de la pantalla */
@media (max-width: 768px) {
    .close-btn {
        top: 10px;
        right: 10px; /* En móvil mejor dentro para evitar toques accidentales */
    }
}



/* ================================================================
   CORRECCIÓN DE ESTILO PREMIUM (fonditos.me)
   ================================================================ */

.modal-primary-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio justo */
    position: relative; /* Para posicionar el Share */
    width: 100%;
    max-width: 500px; /* Ancho máximo para que no se estire mucho */
    margin: 20px auto 0; /* Centrado */
}

/* --- BOTÓN RESULUCIÓN: Plano, Cuadradito y Minimalista --- */
.download-btn-pill {
    background: #d00f43 !important; /* Tu color de acento */
    color: white !important;
    padding: 10px 24px !important; /* Más pequeño y plano */
    border-radius: 8px !important; /* Bordes cuadraditos suaves */
    font-weight: 700;
    font-size: 13px !important; /* Fuente más pequeña y nítida */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Todo mayúsculas */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease-in-out;
    border: none;
    box-shadow: 0 4px 15px rgba(208, 15, 67, 0.2); /* Sombra suave de color */
}

.download-btn-pill:hover {
    background: #e61c56 !important; /* Un tono más claro al pasar el mouse */
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(208, 15, 67, 0.3);
}

.download-btn-pill i {
    font-size: 16px;
    margin: 0;
    animation: bounceSm 2s infinite; /* Flecha más pequeña */
}

@keyframes bounceSm {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(3px);}
    60% {transform: translateY(1px);}
}

/* --- BOTÓN SHARE: El Rediseño Total --- */
.share-btn-circle {
    position: absolute; /* Flota a la derecha del botón principal */
    right: 0;
    background: transparent !important; /* Fondo transparente */
    border: none !important; /* Sin bordes */
    color: rgba(255, 255, 255, 0.6) !important; /* Color sutil */
    width: 36px !important; /* Más pequeño */
    height: 36px !important;
    font-size: 20px !important; /* Icono nítido */
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.share-btn-circle:hover {
    color: white !important; /* Se ilumina al hover */
    background: transparent !important;
}

/* Color por defecto (Modo Oscuro) */
.share-btn-circle {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Cambio automático a Modo Claro */
@media (prefers-color-scheme: light) {
    .share-btn-circle {
        color: rgba(0, 0, 0, 0.5) !important;
    }
}