/* --- FIX PARA EL MENÚ EN EL VISOR --- */
.page-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* --- CAMBIO AQUÍ --- */
    padding-top: 100px; /* Aumentado de 40px a 100px para que el menú no choque con el header */
    gap: 20px;         /* Reducido un poco para que el menú y la imagen no estén tan lejos */
}

/* Contenido editorial (info, descarga, relacionados) */
.page-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-layout {
    width: 100%;
}

.page-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}


/* --- CONTENEDOR ESPECÍFICO DEL MENÚ --- */
.viewer-menu-fix {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Ajusta este margin-top para bajarlo si se ve muy arriba */
    margin-top: 20px; 
    margin-bottom: 0px;
    position: relative;
    z-index: 100;
}

/* Si dentro de este div tienes el .section-menu, asegúrate que no tenga márgenes negativos */
.viewer-menu-fix .section-menu {
    margin: 0 !important; 
    width: 100%;
}


/* Aseguramos que el section-menu siempre esté por encima de la imagen */
.section-menu {
    position: relative;
    z-index: 100; 
    width: 100%;
    margin-bottom: -10px; /* Acerca el menú a la imagen para que se vea integrado */
}

/* Evitamos que el bloque de imagen tape al menú si tiene sombras */
.viewer-image-block {
    position: relative;
    z-index: 10;
}

/* --- AJUSTE PARA MÓVIL (SUBIR EL MENÚ) --- */
@media (max-width: 768px) {
    .page-wrapper {
        /* Reducido a 68px para que el contenido suba hacia el header */
        padding-top: 68px !important; 
        gap: 8px; /* Menos espacio entre menú e imagen */
    }

    .section-menu {
        /* Un pequeño ajuste para succionar el menú hacia arriba */
        margin-top: -8px; 
    }
}

/* --------------------------------------------------
   2. BLOQUE DE IMAGEN (LIBRE, EXPANDIDO)
-------------------------------------------------- */

.viewer-image-block {
    width: 100%;
    max-width: 1600px; /* ⭐ Igual que el header-content */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Imagen base */
.viewer-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    transition: 0.25s ease;
}

/* --------------------------------------------------
   LÓGICA DE TABS (MOSTRAR/OCULTAR)
-------------------------------------------------- */

/* Estado por defecto */
.horizontal-img { display: block; }
.vertical-img { display: none; }

/* MODO PHONE */
body.tab-phone .horizontal-img { display: none; }
body.tab-phone .vertical-img { display: block; }

/* MODO PC */
body.tab-pc .horizontal-img { display: block; }
body.tab-pc .vertical-img { display: none; }

/* --------------------------------------------------
   TAMAÑOS EDITORIALES
-------------------------------------------------- */

/* PC — Imagen horizontal grande, cinematográfica */
body.tab-pc .horizontal-img {
    max-width: 1600px;
}

/* PHONE — Imagen vertical optimizada */
body.tab-phone .vertical-img {
    max-width: 600px;
    max-height: 85vh;
    width: auto;
    margin: 0 auto;
    display: block;
}


/* --------------------------------------------------
   5. BLOQUE DE RELACIONADOS
-------------------------------------------------- */

.view-related {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-grid {
    display: grid;
    gap: 16px;
}

/* MODO TELÉFONO — Grid vertical */
body.tab-phone .related-grid {
    grid-template-columns: 1fr;
}

/* MODO PC — Grid horizontal */
body.tab-pc .related-grid {
    grid-template-columns: repeat(4, 1fr);
}

.related-item img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-2);
    transition: 0.2s ease;
}

.related-item img:hover {
    opacity: 0.9;
}

/* --------------------------------------------------
   6. TABS (HEADER)
-------------------------------------------------- */

.tab-btn.active {
    background: var(--accent);
    color: white;
}




/* --------------------------------------------------
   RELACIONADOS — GRID RESPONSIVE REAL
-------------------------------------------------- */

.related-wrapper {
    width: 100%;
    max-width: 1700px; /* ⭐ PC amplio */
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* ======== GRID BASE ======== */
.related-wrapper .related-grid {
    display: grid;
    gap: 18px;
}

/* --------------------------------------------------
   🖥️ MODO PC — GRID FLUIDO (5–8 columnas)
-------------------------------------------------- */
body.tab-pc .related-wrapper .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Miniaturas horizontales */
body.tab-pc .related-wrapper .related-item img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}



/* --------------------------------------------------
   📱 SAFARI MÓVIL — RESTAURAR ANCHO ORIGINAL (TAB-PC)
-------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    body.tab-pc .related-wrapper {
        max-width: 100% !important;  /* ⭐ Safari móvil vuelve al ancho normal */
        padding: 0 16px !important;  /* ⭐ mismo padding que el diseño original */
    }

    body.tab-pc .related-wrapper .related-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    }
}





/* --------------------------------------------------
   📱 MODO PHONE — GRID FLUIDO (2 columnas)
-------------------------------------------------- */
body.tab-phone .related-wrapper {
    max-width: 600px; /* ⭐ evita que se inflen */
    padding: 0 16px;
}

/* 2 columnas siempre */
body.tab-phone .related-wrapper .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Miniaturas verticales responsive */
body.tab-phone .related-wrapper .related-item img {
    aspect-ratio: 11 / 16;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}



/* --------------------------------------------------
   📱 RELACIONADOS — TAB PHONE (MISMO, SOLO MÁS PEQUEÑO)
-------------------------------------------------- */

/* Encoger el ancho total del bloque */
body.tab-phone .related-wrapper {
    max-width: 92%;   /* ⭐ antes 100% → ahora 92% */
    padding: 0 16px;
    margin: 0 auto;
}

/* Grid fluido REAL */
body.tab-phone .related-wrapper .related-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Miniaturas verticales responsive */
body.tab-phone .related-wrapper .related-item img {
    aspect-ratio: 11 / 16;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}


/* --------------------------------------------------
   📱 SAFARI MÓVIL — RESTAURAR ANCHO ORIGINAL
-------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    body.tab-phone .related-wrapper {
        max-width: 100% !important;  /* ⭐ Safari móvil vuelve al ancho normal */
        padding: 0 16px !important;
    }

    body.tab-phone .related-wrapper .related-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }
}





/* --------------------------------------------------
    ✨ EFECTO EN FONDITOS RELACIONADOS 
-------------------------------------------------- */

.related-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    transform: translateZ(0);
    transition: transform 0.3s ease;
}

/* --- IMAGEN: ZOOM Y LUZ --- */
.related-item img {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Al tocar o pasar el mouse: Zoom fuerte y brillo */
.related-item:hover img, 
.related-item:active img {
    transform: scale(1.12); /* Zoom más notable */
    filter: brightness(1.3) contrast(1.1); /* Se ilumina mucho más */
}

/* --- EL DESTELLO EXPLOSIVO (SHINE) --- */
.related-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100%;
    /* Luz mucho más blanca y sólida */
    background: linear-gradient(
        to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 30%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.1) 70%, 
        transparent 100%
    );
    transform: skewX(-30deg);
    z-index: 2;
    pointer-events: none;
}

/* Disparo de la animación (PC y Móvil) */
.related-item:hover::after,
.related-item:active::after {
    animation: flashImpact 0.6s outset;
}

/* --- ANIMACIÓN ÚNICA SIMPLIFICADA --- */
@keyframes flashImpact {
    0%   { left: -200%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

/* Overlay de resplandor extra al centro */
.related-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.related-item:hover::before,
.related-item:active::before {
    opacity: 1;
}



/* --------------------------------------------------
   🖥️ IMAGEN PRINCIPAL HORIZONTAL — CONTROL REAL
-------------------------------------------------- */

.viewer-image-block {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 32px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* ⭐ ESTA ES LA CLAVE: usar SOLO .horizontal-img */
.horizontal-img {
    width: 100%;
    max-width: 1100px;   /* ⭐ aquí se encoge de verdad */
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 14px;

    /* sombra sandbox premium */
    box-shadow:
        0 8px 20px rgba(0,0,0,0.18),
        0 4px 12px rgba(0,0,0,0.12),
        0 0 0 1px rgba(255,255,255,0.05) inset;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover PC */
body.tab-pc .horizontal-img:hover {
    transform: scale(1.015);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.22),
        0 6px 16px rgba(0,0,0,0.14),
        0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* Touch Phone */
body.tab-phone .horizontal-img:active {
    transform: scale(0.985);
}

/* Breakpoints */
@media (min-width: 1600px) {
    .horizontal-img {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .horizontal-img {
        max-width: 900px;
    }
}


/* --------------------------------------------------
   🖥️ FORZAR TAMAÑO DE IMAGEN HORIZONTAL
-------------------------------------------------- */

.viewer-image-block img.horizontal-img {
    width: 100% !important;
    max-width: 1100px !important;   /* ⭐ aquí la encoges de verdad */
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 14px !important;
}



/* --------------------------------------------------
   MOSTRAR SOLO LA IMAGEN CORRECTA SEGÚN EL TAB
-------------------------------------------------- */

/* ⭐ En tab PC → mostrar horizontal, ocultar vertical */
body.tab-pc .horizontal-img {
    display: block !important;
}
body.tab-pc .vertical-img {
    display: none !important;
}

/* ⭐ En tab Phone → mostrar vertical, ocultar horizontal */
body.tab-phone .horizontal-img {
    display: none !important;
}
body.tab-phone .vertical-img {
    display: block !important;
}


/* ================================
   RESPONSIVE: PC → HORIZONTAL
   Auto‑ajuste según espacio
================================ */
@media (min-width: 900px) {
    body.tab-pc .download-resolutions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    body.tab-pc .res-btn {
        width: auto;          /* ← Exacto al texto */
        flex: 0 0 auto;       /* ← No se estira */
    }
}



/* --------------------------------------------------
   TAB PC — VISTA EN TELÉFONO (compacto real)
-------------------------------------------------- */

/* ================================
   RESPONSIVE PARA PC EN MÓVIL
================================ */
@media (max-width: 768px) {

    /* Cambiar SOLO la dirección del flex */
    body.tab-pc .download-resolutions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 8px !important;
    }

    /* Achicar tarjetitas */
    body.tab-pc .res-btn {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 8px;
        white-space: nowrap;
    }

    body.tab-pc .res-btn::after {
        font-size: 14px;
        opacity: 0.5;
    }
}

/* ================================
   TAB PHONE → OCULTAR TARJETAS
================================ */
body.tab-phone .download-resolutions {
    display: none;
}

/* ================================
   TAB PC → OCULTAR BOTÓN ÚNICO
================================ */
body.tab-pc .download-btn {
    display: none;
}

/* ================================
   TAB PHONE → MOSTRAR BOTÓN ÚNICO
================================ */
body.tab-phone .download-btn {
    display: flex;
}

/* ================================
   BOTÓN ÚNICO (TAB PHONE)
================================ */
.download-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 12px 18px;
    width: auto;
    max-width: 100%;
    white-space: nowrap;

    /* Ahora usa variables del sistema automático */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-main);

    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    gap: 10px;
    transition: all 0.25s ease;
}

/* HOVER — Azul premium Fonditos */
.download-btn:hover {
    background: #1b73e8;
    border-color: #1b73e8;
    color: #fff;
    transform: translateY(-2px);
}

/* ICONO */
.download-btn i {
    font-size: 20px;
    opacity: 0.9;
}

/* ================================
   TAB PHONE → MOSTRAR BOTÓN
================================ */
body.tab-phone .download-btn {
    display: inline-flex;
    margin-top: 0;
}

/* ================================
   TAB PHONE → OCULTAR TARJETAS
================================ */
body.tab-phone .download-resolutions {
    display: none;
    margin: 0;
    padding: 0;
}

/* ================================
   IMAGEN VERTICAL EN MÓVIL
================================ */
@media (max-width: 768px) {
  .viewer-img.vertical-img {
    max-height: 60vh !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
}


/* ================================
  MODAL PARA EL VIEW
================================ */
/* Modal base */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}

/* Imagen dentro del modal */
.image-modal .modal-content {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 10px;
}

/* Botón cerrar */
.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

/* PC: modal más elegante */
@media (min-width: 900px) {
    .image-modal .modal-content {
        max-width: 70%;
        max-height: 80%;
    }
}


/* ================================
  OVERLAY IMAGEN DEL VIEW
================================ */


.fonditos-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.fonditos-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.fonditos-overlay.active {
    display: flex;
}

@media (max-width: 650px) {
    .fonditos-overlay img {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: cover;
    }
}


/* Animación suave */
.fonditos-overlay {
    opacity: 0;
    transition: opacity .25s ease;
}

.fonditos-overlay.active {
    opacity: 1;
}

.fonditos-overlay img {
    transform: scale(.95);
    transition: transform .25s ease;
}

.fonditos-overlay.active img {
    transform: scale(1);
}


/* ==================================================
    ✨ GLOW AMBIENTAL ADAPTATIVO (CLARO / OSCURO)
================================================== */

.viewer-image-block {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* REVISIÓN DE PADDING: 
       - Arriba: 20px para pegarlo al menú 
       - Abajo: 10px para pegarlo al bloque info */
    padding: 20px 20px 10px 20px !important; 
    
    overflow: visible !important; 
    background: transparent !important; 
    z-index: 1;
}

/* --- EL AURA --- */
.bg-blur-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1); /* Bajamos un poco más para compactar */
    width: 80%; 
    height: 80%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
    filter: blur(100px) saturate(1.8);
    opacity: 0.6;
    transition: all 0.4s ease;
}

/* --- AJUSTES POR MODO --- */
body.theme-light .bg-blur-effect {
    filter: blur(80px) brightness(1.1) saturate(2) !important;
    opacity: 0.4 !important;
}

body.theme-dark .bg-blur-effect {
    filter: blur(100px) brightness(0.6) saturate(1.5) !important;
    opacity: 0.7 !important;
}

/* --- LA IMAGEN --- */
.viewer-img {
    position: relative;
    z-index: 10 !important;
    max-width: 1100px;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}


/* --------------------------------------------------
   🏷️ TITULO RELACIONADOS DENTRO DE LA IMAGEN — FIX FINAL
-------------------------------------------------- */

.related-item {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Imagen */
.related-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Pastilla corregida */
.related-item .related-title-inside {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: auto;                          /* 🔥 YA NO SE ESTIRA */
    max-width: calc(100% - 20px);         /* 🔒 NUNCA SE SALE */

    padding: 4px 8px;
    background: rgba(0,0,0,0.45);
    color: #fff;

    border-radius: 999px;                 /* 🔵 PASTILLA REAL */
    font-size: 0.80rem;
    font-weight: 500;
    line-height: 1;

    display: inline-flex;                 /* 🔥 SE AJUSTA AL TEXTO */
    align-items: center;
    box-sizing: border-box;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}

/* ================================
   TARJETITAS PREMIUM
================================ */
.res-btn {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 16px;

    /* Modo oscuro */
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary);

    /* Modo claro */
    --light-bg: rgba(0,0,0,0.05);
    --light-border: rgba(0,0,0,0.12);

    background: var(--card-bg, var(--light-bg));
    border-color: var(--card-border, var(--light-border));

    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;

    width: fit-content;      /* ← Ajuste exacto al texto */
    max-width: 100%;         /* ← Nunca se desborda */
    white-space: nowrap;     /* ← No se parte en dos líneas */

    transition: all 0.25s ease;
}

/* HOVER */
.res-btn:hover {
    background: var(--card-hover, rgba(255,255,255,0.15));
    transform: translateY(-2px);
    border-color: var(--accent);
}

/* ICONO */
.res-btn::after {
    content: "⇩";
    font-size: 18px;
    opacity: 0.6;
    margin-left: 10px;
}




/* --------------------------------------------------
   4. BLOQUE DE DESCARGA PHONE 
-------------------------------------------------- */
/* CONTENEDOR */
.view-download {
    display: flex;
    justify-content: center;
    margin: 40px auto;
    padding: 0 20px;
}

/* BOTÓN PREMIUM EVOLUCIONADO */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    /* Un poco más de aire para que se sienta importante */
    padding: 18px 36px;
    border-radius: 18px; /* Bordes más modernos y suaves */

    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;

    /* Fondo adaptativo con cristal más nítido */
    background: var(--bg-card);
    border: 1.5px solid var(--bg-card-border);
    color: var(--text-main);

    /* Sombra multicapa para profundidad real */
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    /* Animación fluida tipo muelle */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* ICONO ANIMADO */
.download-btn i {
    font-size: 24px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* HOVER — EFECTO AZUL PROFUNDO + BRILLO */
.download-btn:hover {
    background: #1b73e8;
    border-color: #1b73e8;
    color: #ffffff !important;

    transform: translateY(-5px) scale(1.02);

    /* Sombra de neón suave */
    box-shadow: 
        0 20px 30px -10px rgba(27, 115, 232, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Animación del icono en hover (pequeño rebote hacia abajo) */
.download-btn:hover i {
    transform: translateY(3px);
}

/* EFECTO DE LUZ (GLARE) AL PASAR EL MOUSE */
.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: all 0.6s;
}

.download-btn:hover::before {
    left: 100%;
}

/* ACTIVE — EFECTO DE PRESIÓN */
.download-btn:active {
    transform: translateY(-2px) scale(0.96);
    box-shadow: 0 10px 15px -5px rgba(27, 115, 232, 0.3);
}

/* ADAPTACIÓN MÓVIL */
@media (max-width: 480px) {
    .download-btn {
        width: 100%;
        max-width: 320px;
        padding: 16px 24px;
        font-size: 1.1rem;
    }
}



/* -------------------------------
   TAGS — Pastillas premium
-------------------------------- */
.view-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.view-tag {
    padding: 7px 12px;

    /* Modo oscuro */
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);

    /* Modo claro */
    --light-bg: rgba(0,0,0,0.08);
    --light-border: rgba(0,0,0,0.18);

    background: var(--card-bg, var(--light-bg));
    border-color: var(--card-border, var(--light-border));

    border-radius: 10px;

    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);

    opacity: 0.95;
    transition: all 0.25s ease;
}



/* Título pequeño para la sección de tags */
.view-tags-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    color: var(--text-secondary); /* Gris premium según tema */
    opacity: 0.8;

    margin-top: 6px;
    margin-bottom: -2px; /* Lo acerca a los tags */
}




/* HOVER PREMIUM */
.view-tag:hover {
    opacity: 1;
    background: var(--card-hover, rgba(255,255,255,0.15));
    border-color: #1b73e8; /* Azul premium Fonditos */
    transform: translateY(-2px);
}


/* ==================================================
    👑 TITULO DEL WALLPAPER PRINCIPAL
================================================== */

/* 1. ESTILO BASE (Escritorio - Mantener tamaño actual que te gustó) */
body.theme-light #wallpaper-info-block #main-wallpaper-title.view-title,
body.theme-light .view-title#main-wallpaper-title,
body.theme-dark #wallpaper-info-block #main-wallpaper-title.view-title,
body.theme-dark .view-title#main-wallpaper-title {
    font-family: 'Inter', 'Montserrat', system-ui, sans-serif !important;
    font-size: 1.9rem !important; 
    font-weight: 600 !important; /* Semi-bold elegante */
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-transform: capitalize !important;
    margin-top: -5px !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
}

/* Colores */
body.theme-light #main-wallpaper-title { color: #037bff !important; }
body.theme-dark #main-wallpaper-title { color: #ffffff !important; }

/* ==================================================
    📱 AJUSTE QUIRÚRGICO SOLO PARA MÓVIL (iPHONE)
================================================== */
@media screen and (max-width: 768px) {
    #wallpaper-info-block #main-wallpaper-title.view-title,
    .view-title#main-wallpaper-title {
        /* Tamaño más pequeño y minimalista */
        font-size: 1.25rem !important; 
        
        /* Peso más delgado para mayor elegancia en pantallas pequeñas */
        font-weight: 500 !important; 
        
        /* Ajuste de espaciado */
        letter-spacing: -0.2px !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }
}


/* -------------------------------
   CATEGORÍA / AUTOR
-------------------------------- */
.view-category,
.view-author {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.75;
    font-size: 0.95rem;
}

/* ❌ ELIMINAR FECHA EN TODAS LAS TABS */
.view-date {
    display: none !important;
}