/* ===========================================
   LEGADO.ART - Estilos Globales
   =========================================== */

:root {
    /* ========== COLORES BASE ========== */
    --verde-oscuro: #091A14;
    --verde-profundo: #0F2A22;
    --verde-terciario: #1a3d2e;
    --gris-claro: #E5E5E5;
    --marfil: #F4ECE2;
    --cobre: #B08C3E;
    --cobre-electrico: #ffb766;
    --cobre-oscuro: #8A6A29;
    --rojo-error: #e74c3c;
    --rojo-claro: #ff6b6b;
    --verde-exito: #27ae60;
    --verde-claro: #5ddb8d;
    --azul-info: #3498db;
    --azul-claro: #5dade2;
    --naranja-warning: #f39c12;

    /* ========== COLORES SEMANTICOS ========== */
    /* Fondos */
    --color-bg-primary: var(--verde-oscuro);
    --color-bg-secondary: var(--verde-profundo);
    --color-bg-tertiary: var(--verde-terciario);
    --color-bg-card: var(--verde-profundo);
    --color-bg-modal: var(--verde-profundo);
    --color-bg-input: rgba(244, 236, 226, 0.08);

    /* Texto */
    --color-text-primary: var(--marfil);
    --color-text-secondary: rgba(244, 236, 226, 0.7);
    --color-text-muted: rgba(244, 236, 226, 0.5);
    --color-text-accent: var(--cobre-electrico);

    /* Acentos */
    --color-accent: var(--cobre);
    --color-accent-light: var(--cobre-electrico);
    --color-accent-dark: var(--cobre-oscuro);

    /* Estados */
    --color-success: var(--verde-exito);
    --color-error: var(--rojo-error);
    --color-warning: var(--naranja-warning);
    --color-info: var(--azul-info);

    /* ========== ESPACIADO (multiplos de 8) ========== */
    --space-xs: 4px;   /* Excepcional, muy pequeno */
    --space-sm: 8px;   /* 8 x 1 */
    --space-md: 16px;  /* 8 x 2 */
    --space-lg: 24px;  /* 8 x 3 */
    --space-xl: 32px;  /* 8 x 4 */
    --space-2xl: 40px; /* 8 x 5 */
    --space-3xl: 48px; /* 8 x 6 */
    --space-4xl: 64px; /* 8 x 8 */
    --space-5xl: 80px; /* 8 x 10 */
    --space-6xl: 96px; /* 8 x 12 */

    /* ========== TIPOGRAFIA ========== */
    /* Familias */
    --font-family-serif: "Georgia", "Palatino Linotype", "Garamond", serif;
    --font-family-display: "Palatino Linotype", "Garamond", serif;

    /* Tamanos */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 2rem;     /* 32px */
    --font-size-4xl: 2.5rem;   /* 40px */

    /* Pesos */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Alturas de linea */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* ========== BORDES ========== */
    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Anchos y colores de borde */
    --border-width: 1px;
    --border-color: rgba(176, 140, 62, 0.25);
    --border-color-hover: rgba(176, 140, 62, 0.5);
    --border-color-focus: var(--cobre-electrico);

    /* ========== SOMBRAS ========== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.4);

    /* Glows */
    --glow-sm: 0 0 10px rgba(176, 140, 62, 0.15);
    --glow-md: 0 0 20px rgba(176, 140, 62, 0.2);
    --glow-lg: 0 0 30px rgba(176, 140, 62, 0.25);
    --glow-xl: 0 0 40px rgba(176, 140, 62, 0.3);

    /* ========== TRANSICIONES ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ========== Z-INDEX ========== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
}

* {
    box-sizing: border-box;
}

/* =============================================
   Focus States Visibles (Accesibilidad)
   ============================================= */

/* Focus visible solo cuando se navega con teclado */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--cobre);
    outline-offset: 2px;
}

/* Botones */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
button:focus-visible {
    outline: 2px solid var(--cobre-electrico);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(176, 140, 62, 0.2);
}

/* Inputs y textareas */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--cobre-electrico);
    box-shadow: 0 0 0 3px rgba(176, 140, 62, 0.15);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--cobre);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Cards clickeables */
.content-card:focus-visible,
.card:focus-visible {
    outline: 2px solid var(--cobre);
    outline-offset: 4px;
}

/* Elementos del menu */
.dropdown-item:focus-visible,
.nav a:focus-visible,
.user-menu-trigger:focus-visible {
    outline: 2px solid var(--cobre);
    outline-offset: 2px;
    background: rgba(176, 140, 62, 0.1);
}

/* Toggle de password */
.password-toggle:focus-visible {
    outline: 2px solid var(--cobre);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selectores de vista */
.view-toggle__btn:focus-visible {
    outline: 2px solid var(--cobre-electrico);
    outline-offset: 2px;
}

/* Botones de carrusel */
.carousel-btn:focus-visible {
    outline: 2px solid var(--cobre-electrico);
    outline-offset: 3px;
}

/* =============================================
   Sistema de Iconos Unificado
   ============================================= */

/* Base icon - tamano estandar 24px */
.icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Tamanos de iconos */
.icon-xs {
    width: 14px;
    height: 14px;
}

.icon-sm {
    width: 18px;
    height: 18px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 48px;
    height: 48px;
}

.icon-2xl {
    width: 64px;
    height: 64px;
}

/* Variantes de stroke */
.icon-thin {
    stroke-width: 1;
}

.icon-regular {
    stroke-width: 1.5;
}

.icon-bold {
    stroke-width: 2;
}

.icon-heavy {
    stroke-width: 2.5;
}

/* Iconos con relleno */
.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* Colores de iconos */
.icon-muted {
    opacity: 0.6;
}

.icon-accent {
    stroke: var(--cobre);
}

.icon-accent-light {
    stroke: var(--cobre-electrico);
}

.icon-success {
    stroke: var(--verde-exito);
}

.icon-error {
    stroke: var(--rojo-error);
}

/* Iconos inline con texto */
.icon-inline {
    vertical-align: middle;
    margin-right: var(--space-xs);
}

/* Transiciones para iconos interactivos */
.icon-interactive {
    transition: transform 0.2s ease, stroke 0.2s ease, opacity 0.2s ease;
}

.icon-interactive:hover {
    transform: scale(1.1);
}

/* =============================================
   Microinteracciones
   ============================================= */

/* Heartbeat - para likes y favoritos */
@keyframes heartbeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Pulse de confirmacion - cuando se anade algo */
@keyframes pulse-confirm {
    0% { box-shadow: 0 0 0 0 rgba(176, 140, 62, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(176, 140, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(176, 140, 62, 0); }
}

/* Checkmark draw - para botones de guardado */
@keyframes checkmark-draw {
    0% {
        stroke-dashoffset: 50;
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Fade in con escala - para contenido cargado */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ripple effect base */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Clases de microinteracciones */
.animate-heartbeat {
    animation: heartbeat 0.4s ease;
}

.animate-pulse {
    animation: pulse-confirm 0.6s ease;
}

.animate-fade-in {
    animation: fade-in-up 0.3s ease forwards;
}

/* Card recien anadida */
.content-card.just-added {
    animation: pulse-confirm 0.6s ease, fade-in-up 0.4s ease;
}

/* Boton con loading spinner inline */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Boton con checkmark de exito */
.btn-success {
    position: relative;
}

.btn-success::after {
    content: '✓';
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    animation: fade-in-up 0.3s ease;
}

/* Hover mejorado para badges */
.content-card:hover .content-card__badge {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Transicion suave tipo bounce para cards */
.content-card {
    transition:
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-family-serif);
    scroll-behavior: smooth;
    min-height: 100vh;

    /* Fondos con textura y profundidad */
    background-image:
        /* Capa 1: Gradiente radial sutil - da profundidad */
        radial-gradient(
            ellipse at 50% 30%,
            rgba(15, 42, 34, 0.5) 0%,
            transparent 60%
        ),
        /* Capa 2: Vignette - enfoque cinematografico */
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0, 0, 0, 0.25) 100%
        ),
        /* Capa 3: Noise texture - textura tactil tipo papel/lienzo */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-blend-mode: normal, normal, soft-light;
    background-attachment: fixed;
}

/* Capa de textura sutil - detras del contenido */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05; /* 5% - visible en pantallas de portatil */
    pointer-events: none;
    z-index: -1;
}

/* Tipografia mejorada para headings */
h1, h2, h3 {
    letter-spacing: var(--letter-spacing-tight);
}

/* Skip-to-content link para accesibilidad */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cobre);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    z-index: 9999;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: var(--space-sm);
}

/* -------------------
   MENÚ SUPERIOR
------------------- */
header {
    width: 100%;
    background: linear-gradient(
        180deg,
        rgba(9, 26, 20, 0.98) 0%,
        rgba(9, 26, 20, 0.95) 100%
    );
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(176, 140, 62, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--space-md) 0;
    z-index: var(--z-fixed);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(176, 140, 62, 0.2);
}

/* Linea decorativa dorada inferior */
header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(176, 140, 62, 0.6) 20%,
        var(--cobre) 50%,
        rgba(176, 140, 62, 0.6) 80%,
        transparent 100%
    );
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Google Translate - ocultar widget nativo completamente */
#google_translate_element { position: absolute; opacity: 0; pointer-events: none; height: 0; overflow: hidden; }
.goog-te-banner-frame, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.goog-logo-link, .goog-te-gadget > span { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.skiptranslate iframe { display: none !important; }

/* Selector de idioma custom */
.lang-selector {
    position: fixed;
    right: 15px;
    top: 0;
    height: 85px;
    display: flex;
    align-items: center;
    z-index: calc(var(--z-fixed, 1000) + 1);
}

.lang-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.35);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--marfil);
    font-family: var(--fuente-principal);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.lang-selector-btn:hover {
    border-color: var(--cobre);
    background: rgba(176, 140, 62, 0.1);
}

.lang-selector-btn .lang-icon {
    display: inline-flex;
    width: 20px;
    height: 14px;
}

.lang-selector-btn .lang-icon svg {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.lang-selector-btn .lang-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s;
    opacity: 0.7;
}

.lang-selector.open .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--fondo-oscuro, #0d1f19);
    border: 1px solid rgba(176, 140, 62, 0.35);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

.lang-selector.open .lang-dropdown {
    display: block;
    animation: langFadeIn 0.15s ease;
}

@keyframes langFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    color: var(--marfil);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--fuente-principal);
}

.lang-option:hover {
    background: rgba(176, 140, 62, 0.15);
}

.lang-option.active {
    color: var(--cobre);
}

.lang-option .lang-flag {
    display: inline-flex;
    width: 22px;
    height: 15px;
}

.lang-option .lang-flag svg {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .lang-selector { margin-right: var(--space-sm); }
    .lang-selector-btn { padding: 4px 8px; font-size: 0.8rem; }
    .lang-selector-btn .lang-label { display: none; }
}

.logo-area {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    gap: var(--space-sm);
    text-decoration: none;
}

.logo-area img {
    height: 52px;
}

/* Logo con doble escritura y degradados (colores del logo) */
.logo-text {
    font-family: 'Righteous', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    position: relative;
    /* Capa frontal: degradado dorado claro (como brillo del logo) */
    background: linear-gradient(180deg, #E8D4B0 0%, #D4BC8A 50%, #C9A86C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Capa trasera: sombra cobre oscuro */
.logo-text::before {
    content: attr(data-text);
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: -1;
    background: linear-gradient(180deg, #8B734A 0%, #6B5A3A 50%, #4A3F2A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

nav {
    display: flex;
    gap: var(--space-xl);
}

nav a {
    color: var(--marfil);
    text-decoration: none;
    font-size: 1.15rem;
    position: relative;
    transition: color var(--transition-normal);
}

/* Underline animado */
nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cobre), var(--cobre-electrico));
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 1px;
}

nav a:hover {
    color: var(--cobre-electrico);
}

nav a:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: var(--space-md);
    }
    nav {
        gap: var(--space-md);
    }
}

/* -------------------
   FOOTER
------------------- */
footer {
    position: relative;
    padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
    text-align: center;
    background: linear-gradient(
        180deg,
        rgba(5, 15, 10, 0.95) 0%,
        rgba(9, 26, 20, 1) 100%
    );
    color: var(--marfil);
    border-top: 1px solid rgba(176, 140, 62, 0.4);
    box-shadow:
        inset 0 20px 40px rgba(0, 0, 0, 0.2),
        0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* Linea decorativa dorada superior */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(176, 140, 62, 0.5) 20%,
        var(--cobre) 50%,
        rgba(176, 140, 62, 0.5) 80%,
        transparent 100%
    );
}

/* Ornamento central superior */
footer::after {
    content: '◆';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--cobre);
    text-shadow: 0 0 10px rgba(176, 140, 62, 0.5);
}

/* Footer: Contenedor principal de dos columnas */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
    gap: var(--space-3xl);
}

/* Footer: Columna izquierda (marca) */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.footer-logo {
    margin-bottom: 0;
}

.footer-logo img {
    width: 100px;
    opacity: 0.95;
    filter: drop-shadow(0 0 8px rgba(176, 140, 62, 0.3));
}

.footer-tagline {
    color: var(--marfil);
    font-size: 1.05rem;
    font-family: var(--font-family-display);
    opacity: 0.85;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Footer: Columna derecha (contacto) */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-lg);
}

/* Footer: Sección de redes sociales */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.footer-social-title {
    color: var(--cobre);
    font-size: 0.85rem;
    font-family: var(--font-family-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.footer-social-icons {
    display: flex;
    gap: var(--space-md);
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: 50%;
    color: var(--marfil);
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(176, 140, 62, 0.08);
}

.footer-social-link:hover {
    border-color: var(--cobre-electrico);
    color: var(--cobre-electrico);
    background: rgba(176, 140, 62, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(176, 140, 62, 0.25);
}

.footer-social-link svg {
    width: 20px;
    height: 20px;
}

/* Footer: Sección de contacto email */
.footer-contact-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.footer-contact-title {
    color: var(--cobre);
    font-size: 0.85rem;
    font-family: var(--font-family-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.footer-email {
    color: var(--marfil);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.footer-email:hover {
    color: var(--cobre-electrico);
}

.footer-email svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* Footer: Separador y copyright */
.footer-bottom {
    border-top: 1px solid rgba(176, 140, 62, 0.25);
    padding-top: var(--space-lg);
    text-align: center;
    width: 100%;
}

.footer-copyright {
    margin: 0 auto;
    opacity: 0.6;
    font-size: 0.85rem;
    color: var(--marfil);
    text-align: center;
}

/* Footer: Responsive */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2xl);
    }

    .footer-brand {
        align-items: center;
    }

    .footer-right {
        align-items: center;
    }

    .footer-social {
        align-items: center;
    }

    .footer-contact-section {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .footer-social-icons {
        gap: var(--space-sm);
    }

    .footer-social-link {
        width: 40px;
        height: 40px;
    }

    .footer-social-link svg {
        width: 18px;
        height: 18px;
    }
}

/* Mantener compatibilidad con estilos antiguos por si acaso */
footer h3 {
    margin: 0;
    font-size: 1.9rem;
    color: var(--cobre);
    font-family: 'Palatino Linotype','Garamond',serif;
}

footer p {
    margin-top: var(--space-md);
    font-size: 1.15rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------
   DISCOVER SECTION (Portal)
------------------- */
.discover-section {
    margin-top: var(--space-2xl);
    padding: 0 var(--space-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.discover-section__title {
    text-align: center;
    color: #E5D9C5;
    font-family: var(--font-family-display);
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: var(--space-xl);
}

.discover-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.discover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    background-color: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.15);
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.discover-card:hover {
    border-color: var(--cobre);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.discover-card__icon {
    width: 42px;
    height: 42px;
    stroke: var(--cobre);
    stroke-width: 1.5;
    fill: none;
    color: var(--cobre);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 0 transparent);
}

.discover-card:hover .discover-card__icon {
    color: #E5D9C5;
    stroke: #E5D9C5;
    filter: drop-shadow(0 0 8px rgba(176, 140, 62, 0.35));
}

.discover-card__title {
    color: #E5D9C5;
    font-size: 1.1rem;
    font-weight: 400;
    margin: var(--space-md) 0 var(--space-sm) 0;
    font-family: var(--font-family-display);
}

.discover-card__description {
    color: var(--marfil);
    opacity: 0.7;
    font-size: 0.9rem;
    margin: 0 0 var(--space-md) 0;
}

.discover-card__badge {
    font-size: 0.7rem;
    color: var(--cobre-electrico);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge "Pronto" con animacion sutil */
.coming-soon-badge {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--cobre-electrico);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: rgba(176, 140, 62, 0.15);
    border-radius: 2px;
    margin-left: var(--space-sm);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* -------------------
   ARTICLES SECTION (Portal)
------------------- */
.articles-section {
    margin-top: var(--space-2xl);
    padding: 0 var(--space-lg);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.articles-section__title {
    text-align: center;
    color: #E5D9C5;
    font-family: var(--font-family-display);
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.articles-section__subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--space-xl);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

/* Tarjeta de articulo */
.article-card {
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.15);
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(176, 140, 62, 0.3);
}

.article-card__image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.article-card__content {
    padding: var(--space-lg);
}

.article-card__title {
    color: var(--marfil);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
    font-family: var(--font-family-display);
}

.article-card__excerpt {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 var(--space-md) 0;
}

.article-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.article-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.article-card__verified {
    color: var(--cobre-electrico);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-card__verified svg {
    width: 14px;
    height: 14px;
}

/* Estado vacio de articulos */
.articles-empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: rgba(15, 42, 34, 0.5);
    border: 1px dashed rgba(176, 140, 62, 0.15);
    border-radius: 2px;
}

.articles-empty__icon {
    width: 48px;
    height: 48px;
    color: var(--cobre);
    opacity: 0.6;
    margin-bottom: var(--space-md);
}

.articles-empty__title {
    color: #E5D9C5;
    font-family: var(--font-family-display);
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 var(--space-sm) 0;
}

.articles-empty__text {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* -------------------
   AUTH PAGES - FORMULARIOS
------------------- */
.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.auth-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px var(--space-lg) var(--space-4xl);
}

.auth-card {
    background: var(--verde-profundo);
    border: 1px solid rgba(176,140,62,0.3);
    border-radius: var(--space-md);
    padding: var(--space-3xl) var(--space-2xl);
    max-width: 450px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: fade-in-up 0.5s ease forwards;
}

.auth-card h1 {
    font-size: 2rem;
    color: var(--cobre-electrico);
    margin: 0 0 var(--space-sm) 0;
    font-family: "Palatino Linotype", "Garamond", serif;
    text-align: center;
}

.auth-card .subtitle {
    color: var(--marfil);
    opacity: 0.8;
    text-align: center;
    margin-bottom: var(--space-xl);
    font-size: 1.05rem;
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    color: var(--marfil);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.form-group input {
    width: 100%;
    padding: var(--space-md);
    font-size: 1rem;
    font-family: "Georgia", serif;
    background: rgba(244, 236, 226, 0.08);
    border: 1px solid rgba(176,140,62,0.4);
    border-radius: var(--space-sm);
    color: var(--marfil);
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--cobre-electrico);
    background: rgba(244, 236, 226, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 183, 102, 0.15);
}

.form-group input::placeholder {
    color: rgba(244, 236, 226, 0.4);
}

/* =============================================
   Validacion en Tiempo Real
   ============================================= */

/* Wrapper para input con icono de validacion */
.input-with-validation {
    position: relative;
}

.input-with-validation input {
    padding-right: var(--space-3xl); /* Espacio para icono */
}

/* Icono de validacion */
.validation-icon {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.validation-icon svg {
    width: 100%;
    height: 100%;
}

/* Mensaje de validacion */
.validation-message {
    font-size: 0.8rem;
    margin-top: var(--space-xs);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease, margin 0.2s ease;
}

/* Estado valido */
.form-group.valid .validation-icon {
    opacity: 1;
}

.form-group.valid .validation-icon svg {
    stroke: var(--verde-exito);
}

.form-group.valid input {
    border-color: var(--verde-exito);
}

.form-group.valid input:focus {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
}

/* Estado invalido */
.form-group.invalid .validation-icon {
    opacity: 1;
}

.form-group.invalid .validation-icon svg {
    stroke: var(--rojo-error);
}

.form-group.invalid input {
    border-color: var(--rojo-error);
}

.form-group.invalid input:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.form-group.invalid .validation-message {
    opacity: 1;
    max-height: 30px;
    margin-top: var(--space-sm);
    color: var(--rojo-error);
}

/* Animacion shake para errores */
@keyframes input-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.form-group.shake input {
    animation: input-shake 0.4s ease;
}

/* Ajuste para password-input-wrapper con validacion */
.password-input-wrapper.input-with-validation input {
    padding-right: calc(var(--space-3xl) + var(--space-xl)); /* Espacio para ojo + icono validacion */
}

.password-input-wrapper .validation-icon {
    right: calc(var(--space-md) + var(--space-xl) + var(--space-sm)); /* Posicion antes del toggle */
}

.btn-primary {
    width: 100%;
    padding: var(--space-md);
    font-size: 1.1rem;
    font-family: var(--font-family-serif);
    background: linear-gradient(135deg, var(--cobre) 0%, var(--cobre-oscuro) 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-semibold);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--cobre-electrico) 0%, var(--cobre) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(176, 140, 62, 0.3);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Secondary button variant */
.btn-secondary {
    padding: var(--space-md);
    font-size: 1rem;
    font-family: var(--font-family-serif);
    background: transparent;
    border: 2px solid var(--cobre);
    border-radius: var(--radius-sm);
    color: var(--cobre);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-medium);
}

.btn-secondary:hover {
    background: rgba(176, 140, 62, 0.1);
    border-color: var(--cobre-electrico);
    color: var(--cobre-electrico);
}

.btn-secondary:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Botones estilo BEM */
.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--verde-oscuro);
    background: var(--cobre);
    border: 1px solid var(--cobre);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn--primary:hover {
    background: var(--cobre-electrico);
    border-color: var(--cobre-electrico);
}

.btn--primary:active {
    transform: scale(0.98);
}

.btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--cobre-electrico);
    background: transparent;
    border: 1px solid var(--cobre);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn--outline:hover {
    background: var(--cobre);
    color: var(--verde-oscuro);
    border-color: var(--cobre);
}

.btn--outline:active {
    transform: scale(0.98);
}

.auth-links {
    margin-top: var(--space-lg);
    text-align: center;
}

.auth-links a {
    color: var(--cobre-electrico);
    text-decoration: none;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.3s ease;
}

/* Underline animado para auth links */
.auth-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--cobre-electrico);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-links a:hover {
    color: var(--marfil);
}

.auth-links a:hover::after {
    width: 100%;
    left: 0;
}

.auth-links p {
    color: var(--marfil);
    opacity: 0.7;
    margin: var(--space-sm) 0;
    font-size: 0.95rem;
}

/* Mensajes de error y éxito */
.alert {
    padding: var(--space-md);
    border-radius: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
    display: none;
}

.alert.show {
    display: block;
}

.alert-error {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid var(--rojo-error);
    color: var(--rojo-claro);
}

.alert-success {
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid var(--verde-exito);
    color: var(--verde-claro);
}

.alert-info {
    background: rgba(176, 140, 62, 0.15);
    border: 1px solid var(--cobre);
    color: var(--cobre-electrico);
}

/* Password input with toggle visibility */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: var(--space-3xl);
}

.password-toggle {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.password-toggle:hover {
    opacity: 0.8;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.password-toggle svg path {
    fill: var(--cobre);
    transition: fill 0.3s ease;
}

.password-toggle:hover svg path {
    fill: var(--cobre-electrico);
}

/* Password strength indicator */
.password-strength {
    margin-top: var(--space-sm);
    font-size: 0.85rem;
}

.password-strength .strength-bar {
    height: var(--space-xs);
    background: rgba(244, 236, 226, 0.2);
    border-radius: 2px;
    margin-top: var(--space-sm);
    overflow: hidden;
}

.password-strength .strength-fill {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.password-strength.weak .strength-fill {
    width: 33%;
    background: var(--rojo-error);
}

.password-strength.medium .strength-fill {
    width: 66%;
    background: var(--cobre-electrico);
}

.password-strength.strong .strength-fill {
    width: 100%;
    background: var(--verde-exito);
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s ease-in-out infinite;
    margin-right: var(--space-sm);
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Info box para registro deshabilitado */
.info-box {
    background: rgba(176, 140, 62, 0.1);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-sm);
    padding: var(--space-lg);
    text-align: center;
}

.info-box h2 {
    color: var(--cobre-electrico);
    font-size: 1.5rem;
    margin: 0 0 var(--space-md) 0;
    font-family: "Palatino Linotype", "Garamond", serif;
}

.info-box p {
    color: var(--marfil);
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .auth-card h1 {
        font-size: 1.7rem;
    }
}

/* -------------------
   PORTAL - Header con Usuario
------------------- */
.header-container {
    position: relative;
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--space-sm);
    transition: background 0.2s ease;
}

.user-menu-trigger:hover {
    background: rgba(176, 140, 62, 0.15);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cobre) 0%, var(--cobre-oscuro) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    font-family: "Georgia", serif;
}

.user-name {
    color: var(--marfil);
    font-size: 0.95rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-arrow {
    color: var(--cobre-electrico);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.dropdown-arrow {
    color: var(--cobre);
    transition: transform 0.2s ease;
}

.user-menu-trigger[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.user-menu-trigger[aria-expanded="true"] .user-arrow {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-md);
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: var(--z-dropdown);
}

.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: var(--space-md);
    border-bottom: 1px solid rgba(176, 140, 62, 0.2);
}

.dropdown-email {
    color: var(--marfil);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.dropdown-role {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--space-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-role.admin {
    background: rgba(231, 76, 60, 0.2);
    color: var(--rojo-claro);
}

.dropdown-role.redactor {
    background: rgba(52, 152, 219, 0.2);
    color: var(--azul-claro);
}

.dropdown-role.lector {
    background: rgba(39, 174, 96, 0.2);
    color: var(--verde-claro);
}

.dropdown-menu {
    padding: var(--space-sm) 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    color: var(--marfil);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(176, 140, 62, 0.15);
    padding-left: calc(var(--space-md) + 4px);
    color: var(--cobre-electrico);
}

.dropdown-item:hover svg {
    fill: var(--cobre-electrico);
    transform: scale(1.1);
}

.dropdown-item svg {
    width: 18px;
    height: 18px;
    fill: var(--cobre);
    transition: all 0.25s ease;
}

.dropdown-divider {
    height: 1px;
    background: rgba(176, 140, 62, 0.2);
    margin: var(--space-sm) 0;
}

.dropdown-item.logout {
    color: var(--rojo-claro);
}

.dropdown-item.logout svg {
    fill: var(--rojo-claro);
}

/* -------------------
   PORTAL - Contenido Principal
------------------- */
.portal-content {
    flex: 1;
    padding: 100px var(--space-lg) var(--space-4xl);
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.portal-welcome {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.portal-welcome h1 {
    font-size: 2.2rem;
    color: #E5D9C5;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-sm) 0;
    font-family: "Palatino Linotype", "Garamond", serif;
}

.portal-welcome p {
    color: var(--marfil);
    opacity: 0.7;
    font-size: 1.1rem;
    margin: 0;
}

/* -------------------
   PORTAL - Menu Cuadrado (Trapecios SVG)
------------------- */

.square-menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 520px;
    margin: var(--space-5xl) 0;
    position: relative;
}

.square-menu {
    position: relative;
    width: 440px;
    height: 440px;
}

/* Diamante exterior dorado (lineas) */
.square-menu::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 380px;
    height: 380px;
    border: 2px solid var(--cobre-electrico);
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    box-shadow:
        0 0 15px rgba(255, 183, 102, 0.5),
        0 0 30px rgba(255, 183, 102, 0.25),
        inset 0 0 20px rgba(255, 183, 102, 0.1);
}

/* Diamante interior cobre (efecto doble) */
.square-menu::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 420px;
    height: 420px;
    border: 2px solid var(--cobre);
    opacity: 1;
    pointer-events: none;
    z-index: -2;
    box-shadow:
        0 0 20px rgba(176, 140, 62, 0.4),
        0 0 40px rgba(176, 140, 62, 0.2);
}

/* Resplandor detras de los diamantes */
.square-menu-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    background: radial-gradient(
        circle,
        rgba(176, 140, 62, 0.12) 0%,
        rgba(176, 140, 62, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -3;
}

/* Esquinas del diamante con ornamentos */
.square-menu-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 460px;
    height: 460px;
    pointer-events: none;
    z-index: -1;
    background:
        /* Esquina superior */
        radial-gradient(circle at 50% 0%, var(--cobre-electrico) 4px, transparent 4px),
        /* Esquina derecha */
        radial-gradient(circle at 100% 50%, var(--cobre-electrico) 4px, transparent 4px),
        /* Esquina inferior */
        radial-gradient(circle at 50% 100%, var(--cobre-electrico) 4px, transparent 4px),
        /* Esquina izquierda */
        radial-gradient(circle at 0% 50%, var(--cobre-electrico) 4px, transparent 4px);
    opacity: 1;
}

/* SVG del menú */
.trapecio-svg-menu {
    width: 100%;
    height: 100%;
    overflow: visible; /* Importante para que el glow no se corte */
}

/* Estilo base de cada trapecio SVG */
.trapecio-svg {
    fill: var(--verde-profundo);
    stroke: rgba(176, 140, 62, 0.5);
    stroke-width: 2;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Transform-origin: todos escalan desde el centro del menú */
.trapecio-svg {
    transform-origin: 220px 220px;
}

/* HOVER - Glow dorado y escala */
.trapecio-svg:hover {
    fill: var(--verde-profundo);
    stroke: var(--cobre-electrico);
    stroke-width: 3;
    filter: url(#glow-dorado);
    transform: scale(1.06);
}

/* Centro cuadrado SVG */
.centro-svg {
    fill: var(--verde-profundo);
    stroke: var(--cobre);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 25px rgba(176, 140, 62, 0.5));
}

/* Logo en el centro (HTML sobre SVG) */
.square-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(176, 140, 62, 0.1) 0%,
        transparent 70%
    );
    border-radius: 50%;
}

/* Marco decorativo del logo */
.square-center-logo::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: 50%;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

.square-center-logo img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(176, 140, 62, 0.4));
    transition: transform var(--transition-normal), filter var(--transition-normal);
}

.square-menu:hover .square-center-logo img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(176, 140, 62, 0.6));
}

/* Contenido de cada trapecio (iconos y texto) */
.trapecio-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    transition: all 0.3s ease;
}

.trapecio-content svg {
    width: 38px;
    height: 38px;
    stroke: var(--marfil);
    margin-bottom: var(--space-sm);
    transition: all 0.3s ease;
}

.trapecio-content h3 {
    color: var(--marfil);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    font-family: "Palatino Linotype", "Garamond", serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.trapecio-content .face-badge {
    font-size: 0.7rem;
    color: var(--cobre-electrico);
    opacity: 0.8;
    margin-top: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Posiciones del contenido de cada trapecio */
.trapecio-content.top {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.trapecio-content.bottom {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.trapecio-content.left {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
}

.trapecio-content.right {
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive Menu Cuadrado SVG */
@media (max-width: 768px) {
    .square-menu-container {
        min-height: 420px;
    }

    .square-menu-container::before {
        width: 400px;
        height: 400px;
    }

    .square-menu-container::after {
        width: 355px;
        height: 355px;
    }

    .square-menu {
        width: 340px;
        height: 340px;
    }

    .square-menu::before {
        width: 295px;
        height: 295px;
    }

    .square-menu::after {
        width: 325px;
        height: 325px;
    }

    .square-center-logo {
        width: 100px;
        height: 100px;
    }

    .square-center-logo img {
        width: 55px;
        height: 55px;
    }

    .trapecio-content svg {
        width: 28px;
        height: 28px;
    }

    .trapecio-content h3 {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .square-menu-container {
        min-height: 340px;
    }

    .square-menu-container::before {
        width: 310px;
        height: 310px;
    }

    .square-menu-container::after {
        width: 275px;
        height: 275px;
    }

    .square-menu {
        width: 260px;
        height: 260px;
    }

    .square-menu::before {
        width: 225px;
        height: 225px;
    }

    .square-menu::after {
        width: 250px;
        height: 250px;
    }

    .square-center-logo {
        width: 80px;
        height: 80px;
    }

    .square-center-logo img {
        width: 45px;
        height: 45px;
    }

    .trapecio-content svg {
        width: 22px;
        height: 22px;
        margin-bottom: var(--space-xs);
    }

    .trapecio-content h3 {
        font-size: 0.75rem;
    }

    .trapecio-content .face-badge {
        font-size: 0.55rem;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 320px) {
    .square-menu-container {
        min-height: 280px;
    }

    .square-menu-container::before {
        width: 260px;
        height: 260px;
    }

    .square-menu-container::after {
        width: 230px;
        height: 230px;
    }

    .square-menu {
        width: 220px;
        height: 220px;
    }

    .square-menu::before {
        width: 190px;
        height: 190px;
    }

    .square-menu::after {
        width: 210px;
        height: 210px;
    }

    .square-center-logo {
        width: 65px;
        height: 65px;
    }

    .square-center-logo img {
        width: 38px;
        height: 38px;
    }

    .trapecio-content svg {
        width: 18px;
        height: 18px;
        margin-bottom: 2px;
    }

    .trapecio-content h3 {
        font-size: 0.65rem;
    }

    .trapecio-content .face-badge {
        display: none;
    }
}

/* -------------------
   PORTAL - Rombo 3D (RESPALDO - COMENTADO)
------------------- */
/*
NOTA: Este código del rombo está comentado como respaldo.
Para volver al diseño anterior, descomentar esta sección
y comentar la sección "Menu Cuadrado" de arriba.

.diamond-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 580px;
    perspective: 1000px;
    margin: 20px 0 40px;
    position: relative;
}

/* Decoraciones elficas */
.diamond-decorations {
    position: absolute;
    width: 560px;
    height: 560px;
    pointer-events: none;
}

/* Anillo exterior con arcos */
.diamond-decorations::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    border: 1px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--verde-profundo), var(--verde-profundo)) padding-box,
        linear-gradient(135deg,
            transparent 0%,
            transparent 20%,
            rgba(176, 140, 62, 0.4) 25%,
            rgba(212, 175, 55, 0.6) 30%,
            transparent 35%,
            transparent 45%,
            rgba(176, 140, 62, 0.4) 50%,
            rgba(212, 175, 55, 0.6) 55%,
            transparent 60%,
            transparent 70%,
            rgba(176, 140, 62, 0.4) 75%,
            rgba(212, 175, 55, 0.6) 80%,
            transparent 85%,
            transparent 100%
        ) border-box;
    opacity: 0.8;
}

/* Segundo anillo mas interno */
.diamond-decorations::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 480px;
    height: 480px;
    border: 1px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--verde-profundo), var(--verde-profundo)) padding-box,
        linear-gradient(135deg,
            rgba(212, 175, 55, 0.5) 0%,
            transparent 15%,
            transparent 35%,
            rgba(176, 140, 62, 0.3) 50%,
            transparent 65%,
            transparent 85%,
            rgba(212, 175, 55, 0.5) 100%
        ) border-box;
    opacity: 0.6;
}

/* Flourishes en las esquinas */
.corner-flourish {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.7;
}

.corner-flourish svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: url(#goldGradient);
    stroke-width: 1.5;
}

.corner-flourish.top-left {
    top: 20px;
    left: 20px;
}

.corner-flourish.top-right {
    top: 20px;
    right: 20px;
    transform: scaleX(-1);
}

.corner-flourish.bottom-left {
    bottom: 20px;
    left: 20px;
    transform: scaleY(-1);
}

.corner-flourish.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: scale(-1, -1);
}

/* Lineas decorativas diagonales */
.diamond-line {
    position: absolute;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(176, 140, 62, 0.3) 20%,
        rgba(212, 175, 55, 0.5) 50%,
        rgba(176, 140, 62, 0.3) 80%,
        transparent 100%
    );
    height: 1px;
}

.diamond-line.tl {
    width: 80px;
    top: 70px;
    left: 50px;
    transform: rotate(-45deg);
}

.diamond-line.tr {
    width: 80px;
    top: 70px;
    right: 50px;
    transform: rotate(45deg);
}

.diamond-line.bl {
    width: 80px;
    bottom: 70px;
    left: 50px;
    transform: rotate(45deg);
}

.diamond-line.br {
    width: 80px;
    bottom: 70px;
    right: 50px;
    transform: rotate(-45deg);
}

.diamond {
    position: relative;
    width: 440px;
    height: 440px;
    transform-style: preserve-3d;
    transform: rotateX(5deg);
    z-index: 2;
}

/* Centro del rombo - Logo */
.diamond-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--verde-profundo);
    border: 2px solid var(--cobre);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 30px rgba(176, 140, 62, 0.4);
}

.diamond-center img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Cada cara del rombo */
.diamond-face {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Contenido dentro de cada cara */
.face-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.face-content svg {
    width: 38px;
    height: 38px;
    stroke: var(--marfil);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.face-content h3 {
    color: var(--marfil);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    font-family: "Palatino Linotype", "Garamond", serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.face-content .face-badge {
    font-size: 0.7rem;
    color: var(--cobre-electrico);
    opacity: 0.8;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CARA SUPERIOR - CREAR */
.diamond-face.top {
    border-left: 170px solid transparent;
    border-right: 170px solid transparent;
    border-bottom: 170px solid rgba(176, 140, 62, 0.25);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center bottom;
}

.diamond-face.top::before {
    content: '';
    position: absolute;
    border-left: 166px solid transparent;
    border-right: 166px solid transparent;
    border-bottom: 166px solid var(--verde-profundo);
    top: 4px;
    left: -166px;
}

.diamond-face.top .face-content {
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
}

.diamond-face.top:hover {
    border-bottom-color: var(--cobre);
    filter: drop-shadow(0 0 30px rgba(176, 140, 62, 0.6));
    transform: translateX(-50%) scale(1.08);
}

/* CARA DERECHA - EXPLORAR */
.diamond-face.right {
    border-top: 170px solid transparent;
    border-bottom: 170px solid transparent;
    border-left: 170px solid rgba(176, 140, 62, 0.25);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transform-origin: left center;
}

.diamond-face.right::before {
    content: '';
    position: absolute;
    border-top: 166px solid transparent;
    border-bottom: 166px solid transparent;
    border-left: 166px solid var(--verde-profundo);
    top: -166px;
    left: -170px;
}

.diamond-face.right .face-content {
    top: 50%;
    right: 55px;
    transform: translateY(-50%);
    width: 120px;
}

.diamond-face.right:hover {
    border-left-color: var(--cobre);
    filter: drop-shadow(0 0 30px rgba(176, 140, 62, 0.6));
    transform: translateY(-50%) scale(1.08);
}

/* CARA INFERIOR - MONETIZACION */
.diamond-face.bottom {
    border-left: 170px solid transparent;
    border-right: 170px solid transparent;
    border-top: 170px solid rgba(176, 140, 62, 0.25);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center top;
}

.diamond-face.bottom::before {
    content: '';
    position: absolute;
    border-left: 166px solid transparent;
    border-right: 166px solid transparent;
    border-top: 166px solid var(--verde-profundo);
    bottom: 4px;
    left: -166px;
}

.diamond-face.bottom .face-content {
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
}

.diamond-face.bottom:hover {
    border-top-color: var(--cobre);
    filter: drop-shadow(0 0 30px rgba(176, 140, 62, 0.6));
    transform: translateX(-50%) scale(1.08);
}

/* CARA IZQUIERDA - COLECCIONES */
.diamond-face.left {
    border-top: 170px solid transparent;
    border-bottom: 170px solid transparent;
    border-right: 170px solid rgba(176, 140, 62, 0.25);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transform-origin: right center;
}

.diamond-face.left::before {
    content: '';
    position: absolute;
    border-top: 166px solid transparent;
    border-bottom: 166px solid transparent;
    border-right: 166px solid var(--verde-profundo);
    top: -166px;
    right: -170px;
}

.diamond-face.left .face-content {
    top: 50%;
    left: 55px;
    transform: translateY(-50%);
    width: 120px;
}

.diamond-face.left:hover {
    border-right-color: var(--cobre);
    filter: drop-shadow(0 0 30px rgba(176, 140, 62, 0.6));
    transform: translateY(-50%) scale(1.08);
}

/* Hover - iluminar iconos */
.diamond-face:hover .face-content svg {
    stroke: var(--cobre-electrico);
    transform: scale(1.1);
}

.diamond-face:hover .face-content h3 {
    color: var(--cobre-electrico);
}

/* Ocultar monetizacion para lector */
.diamond-face.bottom.hidden {
    display: none;
}

/* FIN DEL RESPALDO DEL ROMBO */

/* Leyenda bajo el menu */
.diamond-legend {
    text-align: center;
    margin-top: var(--space-lg);
    color: var(--marfil);
    opacity: 0.5;
    font-size: 0.85rem;
}

/* ============================================
   SECCION DESCUBRE EN LEGADO.ART
   ============================================ */

.discover-section {
    margin-top: var(--space-5xl);
    padding: 0 var(--space-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.discover-title {
    text-align: center;
    color: #E5D9C5;
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: var(--space-xl);
    opacity: 0.8;
}

.discover-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Tarjetas Descubre - Hover igual que rombo */
.discover-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.discover-card:hover {
    border-color: #B08C3E !important;
    filter: drop-shadow(0 0 30px rgba(176, 140, 62, 0.6)) !important;
    transform: scale(1.05) !important;
}

.discover-card:hover svg {
    stroke: #E5D9C5 !important;
}

.discover-card:hover h3 {
    color: #E5D9C5 !important;
}

/* Responsive Descubre */
@media (max-width: 600px) {
    .discover-section {
        margin-top: var(--space-4xl);
    }

    .discover-card {
        padding: var(--space-lg) var(--space-md);
    }

    .discover-card svg {
        width: 32px;
        height: 32px;
    }

    .discover-card h3 {
        font-size: 1rem;
    }

    .discover-card p {
        font-size: 0.85rem;
    }
}

/* Responsive Rombo */
@media (max-width: 768px) {
    .diamond-container {
        min-height: 450px;
    }

    .diamond {
        width: 340px;
        height: 340px;
    }

    .diamond-face.top,
    .diamond-face.bottom {
        border-left-width: 130px;
        border-right-width: 130px;
    }

    .diamond-face.top {
        border-bottom-width: 130px;
    }

    .diamond-face.top::before {
        border-left-width: 126px;
        border-right-width: 126px;
        border-bottom-width: 126px;
        left: -126px;
    }

    .diamond-face.bottom {
        border-top-width: 130px;
    }

    .diamond-face.bottom::before {
        border-left-width: 126px;
        border-right-width: 126px;
        border-top-width: 126px;
        left: -126px;
    }

    .diamond-face.left,
    .diamond-face.right {
        border-top-width: 130px;
        border-bottom-width: 130px;
    }

    .diamond-face.right {
        border-left-width: 130px;
    }

    .diamond-face.right::before {
        border-top-width: 126px;
        border-bottom-width: 126px;
        border-left-width: 126px;
        top: -126px;
        left: -130px;
    }

    .diamond-face.left {
        border-right-width: 130px;
    }

    .diamond-face.left::before {
        border-top-width: 126px;
        border-bottom-width: 126px;
        border-right-width: 126px;
        top: -126px;
        right: -130px;
    }

    .diamond-center {
        width: 80px;
        height: 80px;
    }

    .diamond-center img {
        width: 50px;
        height: 50px;
    }

    .face-content svg {
        width: 28px;
        height: 28px;
    }

    .face-content h3 {
        font-size: 0.9rem;
    }

    .diamond-face.top .face-content {
        top: 40px;
        width: 120px;
    }

    .diamond-face.bottom .face-content {
        bottom: 40px;
        width: 120px;
    }

    .diamond-face.right .face-content {
        right: 40px;
        width: 100px;
    }

    .diamond-face.left .face-content {
        left: 40px;
        width: 100px;
    }

    .portal-content {
        padding: 100px var(--space-md) var(--space-2xl);
    }

    .portal-welcome h1 {
        font-size: 1.8rem;
    }

    .user-name {
        display: none;
    }
}

@media (max-width: 480px) {
    .diamond-container {
        min-height: 360px;
    }

    .diamond {
        width: 260px;
        height: 260px;
    }

    .diamond-face.top,
    .diamond-face.bottom {
        border-left-width: 100px;
        border-right-width: 100px;
    }

    .diamond-face.top {
        border-bottom-width: 100px;
    }

    .diamond-face.top::before {
        border-left-width: 96px;
        border-right-width: 96px;
        border-bottom-width: 96px;
        left: -96px;
    }

    .diamond-face.bottom {
        border-top-width: 100px;
    }

    .diamond-face.bottom::before {
        border-left-width: 96px;
        border-right-width: 96px;
        border-top-width: 96px;
        left: -96px;
    }

    .diamond-face.left,
    .diamond-face.right {
        border-top-width: 100px;
        border-bottom-width: 100px;
    }

    .diamond-face.right {
        border-left-width: 100px;
    }

    .diamond-face.right::before {
        border-top-width: 96px;
        border-bottom-width: 96px;
        border-left-width: 96px;
        top: -96px;
        left: -100px;
    }

    .diamond-face.left {
        border-right-width: 100px;
    }

    .diamond-face.left::before {
        border-top-width: 96px;
        border-bottom-width: 96px;
        border-right-width: 96px;
        top: -96px;
        right: -100px;
    }

    .diamond-center {
        width: 60px;
        height: 60px;
    }

    .diamond-center img {
        width: 36px;
        height: 36px;
    }

    .face-content svg {
        width: 22px;
        height: 22px;
        margin-bottom: 6px;
    }

    .face-content h3 {
        font-size: 0.75rem;
    }

    .face-content .face-badge {
        font-size: 0.55rem;
    }

    .diamond-face.top .face-content {
        top: 28px;
        width: 90px;
    }

    .diamond-face.bottom .face-content {
        bottom: 28px;
        width: 90px;
    }

    .diamond-face.right .face-content {
        right: 28px;
        width: 80px;
    }

    .diamond-face.left .face-content {
        left: 28px;
        width: 80px;
    }

    .portal-welcome h1 {
        font-size: 1.5rem;
    }
}

/* ===========================================
   COLECCIONES PAGE
   =========================================== */

.colecciones-content {
    flex: 1;
    padding: 100px var(--space-lg) var(--space-4xl);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Page Header */
.colecciones-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: 0 var(--space-lg);
}

.colecciones-header h1 {
    font-size: 2.2rem;
    color: var(--cobre-electrico);
    margin: 0 0 var(--space-md) 0;
    font-family: "Palatino Linotype", "Garamond", serif;
    font-weight: 500;
}

.colecciones-header > p {
    color: var(--marfil);
    opacity: 0.7;
    font-size: 1.1rem;
    margin: 0;
}

/* Botón elegante para volver al portal */
.back-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-sm);
    color: var(--cobre);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: "Palatino Linotype", "Garamond", serif;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-sm);
    background: rgba(176, 140, 62, 0.05);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.back-link:hover {
    color: var(--cobre-electrico);
    border-color: var(--cobre);
    background: rgba(176, 140, 62, 0.12);
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(176, 140, 62, 0.15);
}

.back-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.back-link:hover svg {
    transform: translateX(-3px);
}

/* Controls Bar */
.colecciones-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.25);
    border-radius: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: var(--space-xs);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-xs);
    border-radius: var(--space-sm);
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-2xl);
    height: var(--space-2xl);
    background: transparent;
    border: none;
    border-radius: var(--space-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--marfil);
    opacity: 0.5;
}

.view-toggle__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.view-toggle__btn:hover {
    opacity: 1;
    background: rgba(176, 140, 62, 0.15);
    transform: scale(1.1);
}

.view-toggle__btn:hover svg {
    stroke: var(--cobre-electrico);
}

.view-toggle__btn.active {
    background: rgba(176, 140, 62, 0.25);
    color: var(--cobre-electrico);
    opacity: 1;
}

/* Filters */
.filters-bar {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.filter-select {
    padding: var(--space-sm) var(--space-md);
    padding-right: var(--space-xl);
    background: rgba(244, 236, 226, 0.08);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-sm);
    color: var(--marfil);
    font-family: "Georgia", serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23B08C3E' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
}

.filter-select:hover {
    border-color: var(--cobre);
    background-color: rgba(244, 236, 226, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-select:focus {
    outline: none;
    border-color: var(--cobre-electrico);
    box-shadow: 0 0 0 3px rgba(255, 183, 102, 0.15);
}

.filter-select option {
    background: var(--verde-profundo);
    color: var(--marfil);
}

/* Section */
.colecciones-section {
    margin-bottom: var(--space-2xl);
}

/* Header extendido con titulo y controles */
.section-header-extended {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(176, 140, 62, 0.2);
}

.section-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.section-header-top h2 {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--cobre-electrico);
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
}

.section-header-top h2 svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--cobre);
}

.section-header-extended .section-count {
    color: var(--marfil);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Controles de seccion (filtros + vista) */
.section-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Barra de búsqueda */
.search-box {
    position: relative;
    flex: 1;
    max-width: 280px;
    min-width: 180px;
}

.search-box__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    stroke: var(--cobre);
    opacity: 0.6;
    pointer-events: none;
    transition: var(--transition-normal);
}

.search-box__input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-left: 42px;
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--radius-full);
    color: var(--marfil);
    font-family: "Georgia", serif;
    font-size: 0.85rem;
    transition: var(--transition-normal);
}

.search-box__input::placeholder {
    color: var(--marfil);
    opacity: 0.4;
}

.search-box__input:hover {
    border-color: var(--cobre);
    background-color: rgba(176, 140, 62, 0.05);
}

.search-box__input:focus {
    outline: none;
    border-color: var(--cobre-electrico);
    background-color: rgba(176, 140, 62, 0.08);
    box-shadow: 0 0 0 2px rgba(255, 183, 102, 0.15);
}

.search-box:focus-within .search-box__icon {
    opacity: 1;
    stroke: var(--cobre-electrico);
}

/* Filtros inline - sin caja, integrados */
.filters-inline {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter-select-inline {
    padding: var(--space-sm) var(--space-lg);
    padding-right: var(--space-xl);
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--radius-full);
    color: var(--marfil);
    font-family: "Georgia", serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-normal);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23B08C3E' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select-inline:hover {
    border-color: var(--cobre);
    background-color: rgba(176, 140, 62, 0.1);
}

.filter-select-inline:focus {
    outline: none;
    border-color: var(--cobre-electrico);
    box-shadow: 0 0 0 2px rgba(255, 183, 102, 0.15);
}

.filter-select-inline option {
    background: var(--verde-profundo);
    color: var(--marfil);
}

/* Header simple para secciones sin controles (ej: Favoritos) */
.colecciones-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(176, 140, 62, 0.2);
}

.colecciones-section .section-header h2 {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--cobre-electrico);
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
}

.colecciones-section .section-header h2 svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--cobre);
}

.colecciones-section .section-count {
    color: var(--marfil);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-3xl) auto;
    max-width: 500px;
}

.section-divider .divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 140, 62, 0.5), transparent);
}

.section-divider .divider-diamond {
    width: 10px;
    height: 10px;
    background: var(--cobre);
    transform: rotate(45deg);
    margin: 0 var(--space-lg);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Loading State */
.colecciones-section .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl) var(--space-lg);
    color: var(--marfil);
    opacity: 0.7;
    gap: var(--space-md);
}

/* Empty State */
.colecciones-section .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-xl);
    background: rgba(15, 42, 34, 0.5);
    border: 2px dashed rgba(176, 140, 62, 0.3);
    border-radius: var(--space-md);
    text-align: center;
    animation: fade-in-up 0.6s ease forwards;
}

/* Ilustracion artistica para estados vacios */
.empty-state__illustration {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-lg);
    opacity: 0.85;
}

.empty-state__illustration svg {
    width: 100%;
    height: 100%;
}

/* Animacion sutil para ilustracion */
.empty-state__illustration {
    animation: float-gentle 4s ease-in-out infinite;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.colecciones-section .empty-state__icon {
    width: var(--space-3xl);
    height: var(--space-3xl);
    color: var(--cobre);
    opacity: 0.4;
    margin-bottom: var(--space-md);
}

.colecciones-section .empty-state__title {
    color: var(--marfil);
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 var(--space-sm) 0;
}

.colecciones-section .empty-state__text {
    color: var(--marfil);
    opacity: 0.6;
    font-size: 0.95rem;
    margin: 0 0 var(--space-lg) 0;
    max-width: 350px;
    line-height: 1.5;
}

.colecciones-section .empty-state__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--cobre) 0%, var(--cobre-oscuro) 100%);
    border: none;
    border-radius: var(--space-sm);
    color: white;
    font-family: "Georgia", serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.colecciones-section .empty-state__cta:hover {
    background: linear-gradient(135deg, var(--cobre-electrico) 0%, var(--cobre) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(176, 140, 62, 0.3);
}

.colecciones-section .empty-state__cta--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(176, 140, 62, 0.2) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===========================================
   CAROUSEL
   =========================================== */

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Fade en los extremos del carousel */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 1;
    pointer-events: none;
}

.carousel-container::before {
    left: 44px;
    background: linear-gradient(90deg, var(--verde-oscuro) 0%, transparent 100%);
}

.carousel-container::after {
    right: 44px;
    background: linear-gradient(-90deg, var(--verde-oscuro) 0%, transparent 100%);
}

.carousel-track {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-md) var(--space-sm);
    flex: 1;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* Scroll snap en las cards */
.carousel-track .content-card {
    scroll-snap-align: start;
}

.carousel-btn {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(15, 42, 34, 0.95) 0%,
        rgba(9, 26, 20, 0.98) 100%
    );
    backdrop-filter: blur(8px);
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: 50%;
    color: var(--cobre);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.carousel-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.carousel-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(176, 140, 62, 0.2) 0%,
        rgba(176, 140, 62, 0.1) 100%
    );
    border-color: var(--cobre);
    color: var(--cobre-electrico);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(176, 140, 62, 0.3);
    transform: scale(1.1);
}

.carousel-btn:hover svg {
    transform: scale(1.1);
}

.carousel-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   GALLERY
   =========================================== */

.gallery-container {
    width: 100%;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg);
}

/* ===========================================
   CONTENT CARD
   =========================================== */

.content-card {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    background: linear-gradient(
        145deg,
        var(--color-bg-card) 0%,
        rgba(15, 42, 34, 0.95) 100%
    );
    border: 1px solid rgba(176, 140, 62, 0.35);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-bounce);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Borde interior sutil dorado */
.content-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(
        145deg,
        rgba(176, 140, 62, 0.3) 0%,
        transparent 50%,
        rgba(176, 140, 62, 0.15) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.content-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(176, 140, 62, 0.15),
        inset 0 1px 0 rgba(176, 140, 62, 0.2);
}

.content-card:hover::before {
    opacity: 1;
}

.content-card__image {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

/* Overlay gradiente en la imagen */
.content-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 60%,
        rgba(9, 26, 20, 0.8) 100%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.content-card:hover .content-card__image::after {
    opacity: 1;
}

.content-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-card:hover .content-card__image img {
    transform: scale(1.12);
}

.content-card__badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.content-card__badge--articulo {
    background: linear-gradient(135deg, var(--cobre) 0%, var(--cobre-oscuro) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card__badge--ficha {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card__badge--obra {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card__badge--museo {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card__badge--libro {
    background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-card__badge--bibliografia {
    background: linear-gradient(135deg, #D35400 0%, #E67E22 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Boton de descarga para libros */
.content-card__download-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(46, 125, 50, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.content-card__download-btn svg {
    width: 16px;
    height: 16px;
}

.content-card:hover .content-card__download-btn {
    opacity: 1;
    transform: scale(1);
}

.content-card__download-btn:hover {
    background: rgba(76, 175, 80, 1);
    transform: scale(1.1);
}

.content-card:hover .content-card__badge {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.content-card__body {
    padding: var(--space-md);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.content-card__title {
    color: var(--marfil);
    font-family: var(--font-family-display);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-normal), text-shadow var(--transition-normal);
}

.content-card:hover .content-card__title {
    color: var(--cobre-electrico);
    text-shadow: 0 0 20px rgba(255, 183, 102, 0.3);
}

/* Gallery view cards expand */
.gallery-grid .content-card {
    width: 100%;
}

/* ===========================================
   COLECCIONES RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    .colecciones-content {
        padding: 100px var(--space-md) var(--space-2xl);
    }

    .colecciones-header h1 {
        font-size: 1.8rem;
    }

    .colecciones-controls {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-md);
    }

    .view-toggle {
        justify-content: center;
    }

    .filters-bar {
        justify-content: center;
    }

    .filter-select {
        flex: 1;
        min-width: 120px;
    }

    /* Nuevo header extendido responsive */
    .section-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .section-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .search-box {
        max-width: 100%;
        width: 100%;
        order: -1;
    }

    .filters-inline {
        justify-content: flex-start;
        width: 100%;
    }

    .filter-select-inline {
        flex: 1;
        min-width: 0;
        font-size: 0.8rem;
        padding: var(--space-sm) var(--space-md);
        padding-right: var(--space-lg);
    }

    .view-toggle {
        align-self: flex-end;
    }

    .colecciones-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .carousel-btn {
        display: none;
    }

    .carousel-track {
        padding: var(--space-sm);
        margin: 0 calc(-1 * var(--space-md));
        padding-left: var(--space-md);
    }

    .content-card {
        width: 200px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--space-md);
    }
}

@media (max-width: 480px) {
    .colecciones-header h1 {
        font-size: 1.5rem;
    }

    .content-card {
        width: 160px;
    }

    .content-card__image {
        height: 100px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    .content-card__body {
        padding: var(--space-sm) var(--space-md);
    }

    .content-card__title {
        font-size: 0.85rem;
    }

    .colecciones-section .empty-state {
        padding: var(--space-xl) var(--space-lg);
    }

    .colecciones-section .empty-state__icon {
        width: var(--space-2xl);
        height: var(--space-2xl);
    }

    .colecciones-section .empty-state__title {
        font-size: 1.1rem;
    }

    .colecciones-section .empty-state__text {
        font-size: 0.9rem;
    }
}

/* ===========================================
   BOTON DE BORRAR EN CARDS
   =========================================== */

.content-card__delete-btn {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7);
    transition: all 0.25s ease;
    z-index: 10;
    pointer-events: auto;
}

.content-card__delete-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
    fill: none;
    flex-shrink: 0;
}

.content-card:hover .content-card__delete-btn {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.content-card__delete-btn:hover {
    background: #c0392b;
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5);
}

.content-card__delete-btn:active {
    transform: scale(1) !important;
}

/* Para pantallas tactiles - mostrar siempre el boton */
@media (hover: none) {
    .content-card__delete-btn {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* ===========================================
   MODAL DE CONFIRMACION DE BORRADO
   =========================================== */

.delete-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-lg);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.delete-modal {
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-md);
    padding: var(--space-xl);
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: slideIn 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.delete-modal__icon {
    width: var(--space-4xl);
    height: var(--space-4xl);
    margin: 0 auto var(--space-lg);
    background: rgba(231, 76, 60, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-modal__icon svg {
    color: var(--rojo-error);
}

.delete-modal__title {
    color: var(--marfil);
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1.5rem;
    margin: 0 0 var(--space-md);
}

.delete-modal__message {
    color: var(--gris-claro);
    font-size: 1rem;
    margin: 0 0 var(--space-md);
    line-height: 1.5;
}

.delete-modal__message strong {
    color: var(--cobre-electrico);
}

.delete-modal__warning {
    color: var(--rojo-error);
    font-size: 0.9rem;
    margin: 0 0 var(--space-xl);
    padding: var(--space-md);
    background: rgba(231, 76, 60, 0.1);
    border-radius: var(--space-sm);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.delete-modal__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.delete-modal__btn {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--space-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.delete-modal__btn--cancel {
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.4);
    color: var(--marfil);
}

.delete-modal__btn--cancel:hover {
    border-color: var(--cobre);
    background: rgba(176, 140, 62, 0.1);
}

.delete-modal__btn--confirm {
    background: var(--rojo-error);
    border: none;
    color: white;
}

.delete-modal__btn--confirm:hover {
    background: #c0392b;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
}

.delete-modal__btn--confirm:disabled {
    background: #888;
    cursor: not-allowed;
}

.delete-modal__btn--confirm.loading {
    pointer-events: none;
}

.delete-modal__btn--confirm.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive del modal */
@media (max-width: 480px) {
    .delete-modal {
        padding: var(--space-lg);
    }

    .delete-modal__title {
        font-size: 1.3rem;
    }

    .delete-modal__actions {
        flex-direction: column;
    }

    .delete-modal__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   SISTEMA DE NOTIFICACIONES TOAST
   =========================================== */

.toast-container {
    position: fixed;
    top: 90px;
    right: var(--space-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    min-width: 320px;
    max-width: 420px;
    background: var(--color-bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl), var(--glow-sm);
    pointer-events: auto;
    animation: toastSlideIn var(--transition-bounce);
    transform-origin: top right;
}

.toast.toast--exiting {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
}

/* Icono del toast */
.toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast__icon svg {
    width: 24px;
    height: 24px;
}

/* Contenido del toast */
.toast__content {
    flex: 1;
    min-width: 0;
}

.toast__title {
    color: var(--marfil);
    font-family: "Palatino Linotype", "Garamond", serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.3;
}

.toast__message {
    color: var(--marfil);
    opacity: 0.8;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.toast__message a {
    color: var(--cobre-electrico);
    text-decoration: underline;
    cursor: pointer;
}

.toast__message a:hover {
    color: var(--cobre);
}

/* Boton cerrar */
.toast__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--space-sm);
    color: var(--marfil);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm)) calc(-1 * var(--space-xs)) 0;
}

.toast__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.toast__close svg {
    width: 16px;
    height: 16px;
}

/* Variantes de toast */
.toast--success {
    border-color: rgba(39, 174, 96, 0.4);
}

.toast--success .toast__icon svg {
    color: var(--verde-exito);
}

.toast--success .toast__title {
    color: var(--verde-claro);
}

.toast--error {
    border-color: rgba(231, 76, 60, 0.4);
}

.toast--error .toast__icon svg {
    color: var(--rojo-error);
}

.toast--error .toast__title {
    color: var(--rojo-claro);
}

.toast--warning {
    border-color: rgba(255, 183, 102, 0.4);
}

.toast--warning .toast__icon svg {
    color: var(--cobre-electrico);
}

.toast--warning .toast__title {
    color: var(--cobre-electrico);
}

.toast--info {
    border-color: rgba(176, 140, 62, 0.4);
}

.toast--info .toast__icon svg {
    color: var(--cobre);
}

/* Barra de progreso */
.toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    animation: toastProgress linear forwards;
}

.toast--success .toast__progress {
    background: var(--verde-exito);
}

.toast--error .toast__progress {
    background: var(--rojo-error);
}

.toast--warning .toast__progress {
    background: var(--cobre-electrico);
}

.toast--info .toast__progress {
    background: var(--cobre);
}

@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Responsive toast */
@media (max-width: 480px) {
    .toast-container {
        top: auto;
        bottom: var(--space-lg);
        right: var(--space-sm);
        left: var(--space-sm);
    }

    .toast {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
}

/* ===========================================
   METRICAS DE ARTICULOS (Vistas y Likes)
   =========================================== */

/* Contenedor de metricas en pagina de detalle */
.article-metrics {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin: var(--space-lg) 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: rgba(176, 140, 62, 0.08);
    border: 1px solid rgba(176, 140, 62, 0.2);
    border-radius: var(--space-sm);
}

/* Cada item de metrica (vistas o likes) */
.metric-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--marfil);
    font-size: 0.95rem;
}

.metric-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--cobre);
    fill: none;
    flex-shrink: 0;
}

.metric-item .metric-count {
    font-weight: 600;
    color: var(--cobre-electrico);
}

/* Tooltip informativo (circulo con i) */
.info-tooltip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    margin-left: var(--space-sm);
    background: rgba(176, 140, 62, 0.25);
    border: 1px solid rgba(176, 140, 62, 0.5);
    border-radius: 50%;
    cursor: help;
    transition: all 0.2s ease;
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: var(--cobre);
    text-decoration: none;
}

.info-tooltip:hover {
    background: rgba(176, 140, 62, 0.4);
    border-color: var(--cobre);
    color: var(--cobre-claro);
}

/* Boton de Like */
.like-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--space-sm);
    color: var(--marfil);
    font-family: "Georgia", serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.like-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--cobre);
    fill: none;
    transition: all 0.3s ease;
}

.like-btn:hover {
    border-color: var(--cobre);
    background: rgba(176, 140, 62, 0.1);
}

.like-btn:hover svg {
    stroke: var(--cobre-electrico);
    transform: scale(1.1);
}

/* Estado: Ya dio like */
.like-btn.liked {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.like-btn.liked svg {
    stroke: #e74c3c;
    fill: #e74c3c;
}

.like-btn.liked:hover {
    background: rgba(231, 76, 60, 0.2);
}

/* Animacion al dar like */
@keyframes likeAnimation {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.like-btn.animating svg {
    animation: likeAnimation 0.4s ease;
}

/* Boton deshabilitado (en preview) */
.like-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.like-btn:disabled:hover {
    background: transparent;
    border-color: rgba(176, 140, 62, 0.3);
}

.like-btn:disabled:hover svg {
    transform: none;
}

/* ===========================================
   METRICAS EN TARJETAS (Colecciones)
   =========================================== */

.content-card__metrics {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(176, 140, 62, 0.15);
}

.content-card__metrics .card-metric {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--marfil);
    opacity: 0.7;
    font-size: 0.8rem;
}

.content-card__metrics .card-metric svg {
    width: 14px;
    height: 14px;
    stroke: var(--cobre);
    fill: none;
    flex-shrink: 0;
}

/* Hover en tarjeta resalta metricas */
.content-card:hover .content-card__metrics .card-metric {
    opacity: 1;
}

.content-card:hover .content-card__metrics .card-metric svg {
    stroke: var(--cobre-electrico);
}

/* Responsive metricas */
@media (max-width: 480px) {
    .article-metrics {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .like-btn {
        width: 100%;
        justify-content: center;
    }

    .content-card__metrics {
        gap: var(--space-sm);
    }

    .content-card__metrics .card-metric {
        font-size: 0.75rem;
    }
}

/* ===========================================
   SKELETON LOADERS
   =========================================== */

/* Base skeleton - efecto shimmer */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(176, 140, 62, 0.08) 0%,
        rgba(176, 140, 62, 0.15) 50%,
        rgba(176, 140, 62, 0.08) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--space-xs);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton Card - replica la estructura de content-card */
.skeleton-card {
    width: 240px;
    flex-shrink: 0;
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.15);
    border-radius: var(--space-md);
    overflow: hidden;
}

.skeleton-card__image {
    height: 135px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(176, 140, 62, 0.05) 0%,
        rgba(176, 140, 62, 0.12) 50%,
        rgba(176, 140, 62, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-card__body {
    padding: var(--space-md);
}

.skeleton-card__badge {
    width: 60px;
    height: 18px;
    margin-bottom: var(--space-sm);
}

.skeleton-card__title {
    height: 20px;
    width: 85%;
    margin-bottom: var(--space-sm);
}

.skeleton-card__text {
    height: 14px;
    width: 60%;
}

.skeleton-card__metrics {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(176, 140, 62, 0.1);
}

.skeleton-card__metric {
    height: 14px;
    width: 40px;
}

/* Contenedor de skeletons - carousel */
.skeleton-carousel {
    display: flex;
    gap: var(--space-lg);
    overflow: hidden;
    padding: var(--space-sm) 0;
}

/* Contenedor de skeletons - gallery grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg);
}

/* Skeleton en grid se adapta al ancho */
.skeleton-grid .skeleton-card {
    width: 100%;
}

/* Fade out cuando se oculta */
.skeleton-container {
    transition: opacity 0.3s ease;
}

.skeleton-container.hiding {
    opacity: 0;
}

/* Skeleton loading container */
.skeleton-loading {
    padding: var(--space-md) 0;
}

.skeleton-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Responsive skeletons */
@media (max-width: 768px) {
    .skeleton-card {
        width: 200px;
    }

    .skeleton-card__image {
        height: 120px;
    }

    .skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .skeleton-card {
        width: 160px;
    }

    .skeleton-card__image {
        height: 100px;
    }

    .skeleton-card__body {
        padding: var(--space-sm) var(--space-md);
    }

    .skeleton-card__title {
        height: 16px;
    }

    .skeleton-card__text {
        height: 12px;
    }

    .skeleton-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
}

/* ===========================================
   HOVER STATES RICOS - Mejoras adicionales
   =========================================== */

/* Logo con hover sutil */
.logo-area {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-area:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.logo-area:hover img {
    filter: drop-shadow(0 0 8px rgba(176, 140, 62, 0.4));
}

/* Empty state CTA con hover premium */
.colecciones-section .empty-state__cta {
    position: relative;
    overflow: hidden;
}

.colecciones-section .empty-state__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.colecciones-section .empty-state__cta:hover::before {
    left: 100%;
}

/* Footer links con hover */
.footer-contact a {
    position: relative;
    transition: color 0.3s ease;
}

.footer-contact a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--cobre-electrico);
    transition: width 0.3s ease;
}

.footer-contact a:hover::after {
    width: 100%;
}

/* Toast close button con glow */
.toast__close:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.15);
}

/* Delete button con pulsacion */
.content-card__delete-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
}

/* User menu trigger con glow */
.user-menu-trigger:hover .user-menu-avatar {
    box-shadow: 0 0 15px rgba(176, 140, 62, 0.4);
}

/* Info tooltip icon con bounce */
.info-tooltip:hover {
    transform: scale(1.2);
}

/* ===========================================
   RESPONSIVE EXTREMOS (320px - 480px)
   =========================================== */

/* Breakpoint 480px - Moviles medianos */
@media (max-width: 480px) {
    /* Header compacto */
    .header-container {
        padding: 0 var(--space-sm);
    }

    .logo-area {
        font-size: 1.3rem;
        gap: var(--space-xs);
    }

    .logo-area img {
        height: 36px;
    }

    /* Filtros en columna */
    .section-header-extended {
        flex-direction: column;
        gap: var(--space-md);
    }

    .section-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-select,
    .filter-select-inline {
        font-size: var(--font-size-sm);
        padding: var(--space-sm) var(--space-md);
    }

    /* Barra de busqueda compacta */
    .search-bar {
        min-width: 100%;
    }

    .search-bar input {
        font-size: var(--font-size-sm);
    }

    /* Formularios en columna */
    .form-group-inline {
        flex-direction: column;
    }

    .form-group-inline > .form-group {
        width: 100%;
    }

    /* Botones full width */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Titulos mas pequenos */
    .colecciones-header h1,
    .crear-header h1,
    .portal-welcome h1 {
        font-size: var(--font-size-2xl);
    }

    /* Cards mas compactas */
    .content-card__body {
        padding: var(--space-sm);
    }

    .content-card__title {
        font-size: var(--font-size-sm);
    }

    /* View toggle compacto */
    .view-toggle__btn {
        padding: var(--space-xs);
    }

    .view-toggle__btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Breakpoint 320px - Moviles muy pequenos */
@media (max-width: 320px) {
    /* Texto minimo 12px */
    body {
        font-size: 12px;
    }

    /* Padding lateral minimo */
    .auth-container,
    .portal-content,
    .colecciones-content,
    .crear-container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .header-container {
        padding: 0 var(--space-xs);
    }

    /* Logo ultra compacto */
    .logo-area {
        font-size: 1.1rem;
    }

    .logo-area img {
        height: 28px;
    }

    /* User menu compacto */
    .user-name {
        display: none;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }

    /* Titulos ajustados */
    .colecciones-header h1,
    .crear-header h1 {
        font-size: var(--font-size-xl);
    }

    .portal-welcome h1 {
        font-size: var(--font-size-2xl);
    }

    /* Filtros apilados verticalmente */
    .section-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select,
    .filter-select-inline {
        width: 100%;
    }

    /* Cards en una columna */
    .content-grid {
        grid-template-columns: 1fr;
    }

    /* Modal mas compacto */
    .modal-content {
        padding: var(--space-md);
        margin: var(--space-sm);
    }

    /* Back link compacto */
    .back-link {
        font-size: var(--font-size-sm);
    }

    .back-link svg {
        width: 16px;
        height: 16px;
    }
}

/* ===========================================
   TRANSICIONES ENTRE PÁGINAS
   =========================================== */

/* Fade in al entrar a la página */
body {
    animation: page-enter 0.3s ease;
}

@keyframes page-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade out al salir de la página */
body.page-exit {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ===========================================
   CURSOR CON RESPLANDOR DORADO
   =========================================== */

/* Resplandor sutil que acompaña al cursor nativo */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: rgba(255, 183, 102, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    filter: blur(8px);
    transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}

/* Estado hover sobre elementos interactivos */
.cursor-glow.cursor-hover {
    width: 22px;
    height: 22px;
    background: rgba(255, 183, 102, 0.5);
}

/* Estado click */
.cursor-glow.cursor-click {
    width: 12px;
    height: 12px;
}

/* Ocultar cuando sale de la ventana */
.cursor-glow.cursor-hidden {
    opacity: 0;
}

/* ===========================================
   PARTÍCULAS DE POLVO DORADO
   =========================================== */

.dust-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.dust-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--cobre-electrico);
    border-radius: 50%;
    opacity: 0;
    filter: blur(0.5px);
}

/* 8 direcciones diferentes para movimiento natural */
@keyframes dust-float-1 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(40px, -100px); }
}

@keyframes dust-float-2 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(-50px, -80px); }
}

@keyframes dust-float-3 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(60px, 30px); }
}

@keyframes dust-float-4 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(-40px, 50px); }
}

@keyframes dust-float-5 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(80px, -40px); }
}

@keyframes dust-float-6 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(-70px, 20px); }
}

@keyframes dust-float-7 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(20px, 70px); }
}

@keyframes dust-float-8 {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10%, 90% { opacity: 0.25; }
    50% { opacity: 0.15; }
    95% { opacity: 0; transform: translate(-30px, -60px); }
}

/* =============================================================================
   DARK MODE GLOBAL
   ============================================================================= */

/* Variables de Dark Mode */
:root {
    --dark-bg-primary: #141414;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #282828;
    --dark-bg-input: #2a2a2a;
    --dark-text-primary: #e8e8e8;
    --dark-text-secondary: #a0a0a0;
    --dark-text-muted: #666666;
    --dark-border: #3a3a3a;
    --dark-border-hover: #4a4a4a;
    --dark-accent: #B08C3E;
    --dark-accent-light: #D4BC8A;
}

/* Boton de toggle Dark Mode en header */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
    color: var(--color-text-secondary);
    margin-right: var(--space-sm);
}

.dark-mode-toggle:hover {
    border-color: var(--cobre);
    color: var(--cobre-electrico);
    background: rgba(176, 140, 62, 0.1);
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover svg {
    transform: rotate(15deg);
}

/* Icono sol (visible en modo claro) */
.dark-mode-toggle .icon-sun {
    display: block;
}

.dark-mode-toggle .icon-moon {
    display: none;
}

/* Icono luna (visible en modo oscuro) */
body.dark-mode .dark-mode-toggle .icon-sun {
    display: none;
}

body.dark-mode .dark-mode-toggle .icon-moon {
    display: block;
}

/* ===== ESTILOS DARK MODE GLOBALES ===== */

body.dark-mode {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Header */
body.dark-mode header {
    background: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .logo-text {
    color: var(--dark-accent-light) !important;
}

/* Dropdown usuario */
body.dark-mode .user-dropdown {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-header {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .dropdown-item:hover {
    background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .dropdown-divider {
    background: var(--dark-border) !important;
}

/* Cards */
body.dark-mode .content-card,
body.dark-mode .card {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .content-card:hover,
body.dark-mode .card:hover {
    border-color: var(--dark-accent) !important;
}

/* Inputs y formularios */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--dark-bg-input) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--dark-accent) !important;
    background: var(--dark-bg-tertiary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

body.dark-mode label {
    color: var(--dark-text-primary) !important;
}

/* Botones secundarios */
body.dark-mode .btn-secondary {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-secondary:hover {
    border-color: var(--dark-accent) !important;
    color: var(--dark-accent-light) !important;
}

/* Textos */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode p,
body.dark-mode span:not(.logo-text) {
    color: var(--dark-text-secondary);
}

body.dark-mode .text-muted,
body.dark-mode .color-text-muted {
    color: var(--dark-text-muted) !important;
}

/* Footer */
body.dark-mode footer {
    background: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

/* Modales */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .modal-content,
body.dark-mode .modal {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Toasts */
body.dark-mode .toast {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Scrollbar en dark mode */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent);
}

/* Dark mode toggle button en dark mode */
body.dark-mode .dark-mode-toggle {
    border-color: var(--dark-border);
    color: var(--dark-text-secondary);
}

body.dark-mode .dark-mode-toggle:hover {
    border-color: var(--dark-accent);
    color: var(--dark-accent-light);
    background: rgba(176, 140, 62, 0.15);
}

/* ===== DARK MODE: Portal Menu (Trapecios) ===== */
body.dark-mode .trapecio-svg {
    fill: var(--dark-bg-tertiary) !important;
    stroke: var(--dark-border) !important;
}

body.dark-mode .trapecio-svg:hover {
    fill: var(--dark-bg-secondary) !important;
    stroke: var(--dark-accent) !important;
}

body.dark-mode .trapecio-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .trapecio-content h3 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .trapecio-content svg {
    stroke: var(--dark-accent-light) !important;
}

body.dark-mode .centro-svg {
    fill: var(--dark-bg-primary) !important;
    stroke: var(--dark-border) !important;
}

body.dark-mode .square-center-logo {
    background: var(--dark-bg-primary) !important;
}

body.dark-mode .portal-welcome h1,
body.dark-mode .portal-welcome p {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .portal-welcome h1 span {
    color: var(--dark-accent-light) !important;
}

body.dark-mode .diamond-legend {
    color: var(--dark-text-secondary) !important;
}

/* ===== DARK MODE: Discover Cards (Agenda, Empleo) ===== */
body.dark-mode .discover-section__title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .discover-card {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .discover-card:hover {
    border-color: var(--dark-accent) !important;
    background: var(--dark-bg-tertiary) !important;
}

body.dark-mode .discover-card__icon {
    stroke: var(--dark-accent-light) !important;
    fill: none !important;
}

body.dark-mode .discover-card__title {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .discover-card__description {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .discover-card__badge {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-accent-light) !important;
    border-color: var(--dark-accent) !important;
}

/* ===== DARK MODE: Articles Section ===== */
body.dark-mode .articles-section__title,
body.dark-mode .articles-section__subtitle {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .articles-empty {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .articles-empty__title,
body.dark-mode .articles-empty__text {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .articles-empty__icon {
    stroke: var(--dark-accent) !important;
}

/* ===== DARK MODE: Section Dividers ===== */
body.dark-mode .section-divider .divider-line {
    background: var(--dark-border) !important;
}

body.dark-mode .section-divider .divider-diamond {
    background: var(--dark-accent) !important;
}

/* ===== DARK MODE: Back Link ===== */
body.dark-mode .back-link {
    color: var(--dark-accent-light) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .back-link:hover {
    background: rgba(176, 140, 62, 0.15) !important;
    border-color: var(--dark-accent) !important;
}

/* =============================================================================
   NAVIGATION BAR (Back Link + Breadcrumbs)
   ============================================================================= */

.navigation-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
    .navigation-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* =============================================================================
   BREADCRUMBS
   ============================================================================= */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--cobre-electrico);
}

.breadcrumbs .separator {
    color: var(--color-text-muted);
    margin: 0 var(--space-xs);
    user-select: none;
}

.breadcrumbs .current {
    color: var(--cobre-electrico);
    font-weight: var(--font-weight-medium);
}

/* Breadcrumbs icon home */
.breadcrumbs .home-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

/* Dark mode breadcrumbs */
body.dark-mode .breadcrumbs {
    color: var(--dark-text-muted);
}

body.dark-mode .breadcrumbs a {
    color: var(--dark-text-secondary);
}

body.dark-mode .breadcrumbs a:hover {
    color: var(--dark-accent-light);
}

body.dark-mode .breadcrumbs .current {
    color: var(--dark-accent-light);
}

/* =============================================================================
   INSTITUCIONES - MAPA MUNDIAL INTERACTIVO
   ============================================================================= */

.instituciones-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px var(--space-lg) var(--space-3xl);
}

/* Header de pagina */
.instituciones-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.instituciones-header h1 {
    font-size: var(--font-size-4xl);
    color: var(--cobre-electrico);
    margin-bottom: var(--space-sm);
    font-family: var(--font-family-display);
}

.instituciones-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    max-width: 700px;
    margin: 0 auto;
}

/* Filtros dropdown compartidos (instituciones, colecciones) */
.colecciones-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 20px;
    justify-content: center;
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(253, 251, 247, 0.04);
    border: 1px solid rgba(176, 140, 62, 0.25);
    border-radius: 2px;
    color: var(--marfil, #FDFBF7);
    font-family: var(--font-family-serif, 'Palatino Linotype', serif);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-dropdown__toggle:hover,
.filter-dropdown.open .filter-dropdown__toggle {
    background: rgba(176, 140, 62, 0.1);
    border-color: var(--cobre, #B08C3E);
    color: var(--cobre-electrico, #D4A843);
}

.filter-dropdown__toggle--has-filter {
    border-color: var(--cobre, #B08C3E);
    color: var(--cobre-electrico, #D4A843);
}

.filter-dropdown__chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.filter-dropdown.open .filter-dropdown__chevron {
    transform: rotate(180deg);
}

.filter-dropdown__panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: rgba(15, 42, 34, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: 4px;
    padding: 6px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.filter-dropdown.open .filter-dropdown__panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 24px;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--marfil, #FDFBF7);
    font-family: var(--font-family-serif, 'Palatino Linotype', serif);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.filter-chip::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(176, 140, 62, 0.4);
    background: transparent;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    background: rgba(176, 140, 62, 0.1);
    color: var(--cobre-electrico, #D4A843);
}

.filter-chip:hover::before {
    border-color: var(--cobre, #B08C3E);
    background: rgba(176, 140, 62, 0.3);
}

.filter-chip--active {
    color: var(--cobre-electrico, #D4A843);
}

.filter-chip--active::before {
    background: var(--cobre, #B08C3E);
    border-color: var(--cobre, #B08C3E);
}

.filter-chip__count {
    font-family: var(--font-family-sans, 'Inter', sans-serif);
    font-size: 0.65rem;
    color: rgba(176, 140, 62, 0.5);
    margin-left: auto;
}

.filter-chip--active .filter-chip__count {
    color: var(--cobre, #B08C3E);
}

/* Contenedor del mapa - Marco cobre oscuro */
.map-container {
    position: relative;
    width: calc(100% - 40px);
    max-width: 1700px;
    margin: 0 auto;
    overflow: hidden;

    /* Marco cobre oscuro */
    background: #3d2e24;
    padding: 14px;
    border: 1px solid rgba(139, 90, 43, 0.6);
    border-radius: 3px;

    /* Sombra exterior */
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Linea interior dorada (passepartout) */
.map-container::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}

/* Lienzo interior con fondo sólido */
#map-svg-container {
    overflow: hidden;
    background: #0c1a14;
    border-radius: 1px;
    min-height: 650px;

    /* Sombra interior - lienzo hundido en el marco */
    box-shadow:
        inset 3px 3px 8px rgba(0, 0, 0, 0.7),
        inset -1px -1px 4px rgba(0, 0, 0, 0.3);
}

/* Boton reset zoom - semi-transparente */
.reset-zoom-btn {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(12, 26, 20, 0.85);
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: 6px;
    color: var(--cobre-electrico);
    font-family: var(--font-family-serif);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.reset-zoom-btn.visible {
    opacity: 1;
    visibility: visible;
}

.reset-zoom-btn:hover {
    background: rgba(176, 140, 62, 0.2);
    border-color: var(--cobre-electrico);
}

.reset-zoom-btn svg {
    width: 16px;
    height: 16px;
}

.world-map {
    width: 100%;
    height: 100%;
    min-height: 650px;
    display: block;
    overflow: hidden;
}

/* Estilos del SVG - continentes */
.world-map .continent {
    fill: none;
    stroke: url(#goldGradient);
    stroke-width: 1;
    transition: var(--transition-normal);
}

.world-map .continent:hover {
    stroke-width: 1.5;
    filter: url(#goldGlow);
}

/* ===== ESTILOS D3 - PAISES DESDE TOPOJSON ===== */

/* Paises del mapa D3 */
.world-map .country {
    fill: transparent; /* transparent en vez de none para detectar hover */
    stroke: url(#goldGradient);
    stroke-width: 0.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
    pointer-events: all;
}

.world-map .country:hover {
    fill: rgba(176, 140, 62, 0.03);
}

/* Paises con instituciones - contorno cobre para destacar */
.world-map .country.has-institutions {
    stroke: #8B5A2B; /* cobre oscuro */
    stroke-width: 1.2;
    cursor: pointer;
    fill: transparent;
}

.world-map .country.has-institutions:hover,
.world-map .country.has-institutions.hovered {
    fill: rgba(176, 140, 62, 0.12);
    stroke-width: 2;
    stroke: var(--cobre-electrico);
    filter: url(#goldGlow);
}

/* Pais activo (en zoom) */
.world-map .country.active {
    fill: rgba(176, 140, 62, 0.15);
    stroke: var(--cobre-electrico);
    stroke-width: 1.5;
}

/* Bordes entre paises */
.world-map .country-borders {
    fill: none;
    stroke: rgba(176, 140, 62, 0.15);
    stroke-width: 0.3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* ===== VISTA DE PAIS - DIVISIONES INTERNAS ===== */

/* Regiones/estados/provincias del pais */
.world-map .region {
    fill: transparent;
    stroke: url(#goldGradient);
    stroke-width: 0.8;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.3s ease;
}

.world-map .region:hover {
    fill: rgba(176, 140, 62, 0.08);
}

/* Bordes entre regiones */
.world-map .region-borders {
    fill: none;
    stroke: rgba(176, 140, 62, 0.25);
    stroke-width: 0.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Etiquetas de marcadores en vista de pais */
.world-map .marker-label {
    font-family: var(--font-family-serif);
    font-size: 11px;
    fill: var(--cobre-electrico);
    pointer-events: none;
    text-shadow:
        -1px -1px 0 var(--verde-profundo),
        1px -1px 0 var(--verde-profundo),
        -1px 1px 0 var(--verde-profundo),
        1px 1px 0 var(--verde-profundo),
        0 0 8px rgba(0, 0, 0, 0.8);
}

/* Museos individuales (instituciones expandidas como Smithsonian, Paris Musees, ToMuCo) */
.world-map .individual-museum circle.main {
    r: 5;
}

.world-map .individual-museum circle.pulse {
    r: 5;
}

/* Tooltip de museo (aparece en hover) */
.museum-tooltip {
    position: fixed;
    z-index: 1000;
    background: rgba(9, 26, 20, 0.95);
    border: 1px solid rgba(176, 140, 62, 0.5);
    border-radius: 6px;
    padding: 10px 14px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: 280px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.museum-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.museum-tooltip__name {
    color: var(--cobre-electrico);
    font-family: var(--font-family-serif);
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.museum-tooltip__location {
    color: var(--color-text-muted);
    font-size: 11px;
    margin: 0;
}

.museum-tooltip__institution {
    color: rgba(176, 140, 62, 0.7);
    font-size: 10px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(176, 140, 62, 0.2);
}

/* Ocultar etiquetas de texto - ahora usamos tooltips */
.world-map .marker-label {
    display: none;
}

/* Grupo del mapa con transiciones */
.world-map .map-group {
    transition: opacity 0.4s ease;
}

/* Contenedor del SVG generado por D3 */
#map-svg-container {
    width: 100%;
    min-height: 300px;
    position: relative;
}

/* Error de carga del mapa */
.map-error {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Puntos de instituciones */
.institution-marker {
    cursor: pointer;
    transition: var(--transition-bounce);
}

.institution-marker circle.main {
    fill: var(--cobre);
    stroke: var(--cobre-electrico);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(176, 140, 62, 0.6));
    transition: var(--transition-normal);
}

.institution-marker:hover circle.main {
    fill: var(--cobre-electrico);
    filter: drop-shadow(0 0 12px rgba(255, 183, 102, 0.8));
}

/* Pulso animado para instituciones integradas */
.institution-marker.integrated .pulse {
    fill: var(--cobre);
    opacity: 0;
    animation: pulse-ring 2.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        opacity: 0.5;
        r: 6;
    }
    100% {
        opacity: 0;
        r: 20;
    }
}

/* Marcador de "proximamente" */
.institution-marker.upcoming circle.main {
    fill: transparent;
    stroke: rgba(176, 140, 62, 0.5);
    stroke-dasharray: 3 3;
    filter: none;
}

.institution-marker.upcoming:hover circle.main {
    fill: rgba(176, 140, 62, 0.2);
    stroke: var(--cobre);
}

/* Marcador de cluster (multiples museos) */
.institution-marker.cluster-marker circle.main {
    fill: var(--cobre);
    stroke: var(--cobre-electrico);
    stroke-width: 2;
}

.institution-marker.cluster-marker circle.pulse {
    animation: cluster-pulse 2s infinite;
}

@keyframes cluster-pulse {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(1.3);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

.institution-marker.cluster-marker .cluster-count {
    fill: var(--verde-profundo);
    font-family: var(--font-family-display);
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

.institution-marker.cluster-marker:hover circle.main {
    fill: var(--cobre-electrico);
}

/* Modal de institucion */
.institution-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.institution-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.institution-modal {
    background: var(--verde-profundo);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(176, 140, 62, 0.1);
}

.institution-modal-overlay.open .institution-modal {
    transform: scale(1) translateY(0);
}

.institution-modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: var(--marfil);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: var(--transition-fast);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.institution-modal__close:hover {
    background: rgba(176, 140, 62, 0.3);
}

.institution-modal__header {
    padding: var(--space-xl);
    border-bottom: 1px solid rgba(176, 140, 62, 0.2);
}

.institution-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-sm);
}

.institution-modal__badge.integrated {
    background: rgba(39, 174, 96, 0.2);
    color: var(--verde-exito);
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.institution-modal__badge.upcoming {
    background: rgba(176, 140, 62, 0.15);
    color: var(--cobre-electrico);
    border: 1px solid rgba(176, 140, 62, 0.3);
}

.institution-modal__title {
    font-size: var(--font-size-xl);
    color: var(--marfil);
    margin-bottom: var(--space-xs);
    font-family: var(--font-family-display);
}

.institution-modal__location {
    color: var(--cobre-electrico);
    font-size: var(--font-size-md);
}

.institution-modal__body {
    padding: var(--space-xl);
}

.institution-modal__description {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.institution-modal__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.institution-modal__stat {
    text-align: center;
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.institution-modal__stat-value {
    font-size: var(--font-size-2xl);
    color: var(--cobre-electrico);
    font-family: var(--font-family-display);
}

.institution-modal__stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.institution-modal__footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid rgba(176, 140, 62, 0.2);
    display: flex;
    gap: var(--space-md);
}

.institution-modal__btn {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: center;
    text-decoration: none;
}

.institution-modal__btn--primary {
    background: linear-gradient(135deg, var(--cobre) 0%, var(--cobre-oscuro) 100%);
    border: none;
    color: white;
}

.institution-modal__btn--primary:hover {
    background: linear-gradient(135deg, var(--cobre-electrico) 0%, var(--cobre) 100%);
    transform: translateY(-2px);
}

.institution-modal__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.institution-modal__btn--secondary {
    background: transparent;
    border: 1px solid rgba(176, 140, 62, 0.3);
    color: var(--color-text-secondary);
}

.institution-modal__btn--secondary:hover {
    border-color: var(--cobre);
    color: var(--cobre-electrico);
}

/* Leyenda del mapa */
.map-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding: var(--space-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.legend-item__marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-item__marker--integrated {
    background: var(--cobre);
    box-shadow: 0 0 8px rgba(176, 140, 62, 0.6);
}

.legend-item__marker--upcoming {
    background: transparent;
    border: 2px dashed rgba(176, 140, 62, 0.5);
}

/* Estadisticas */
.instituciones-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-3xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    text-align: center;
    padding: var(--space-xl);
    background: rgba(176, 140, 62, 0.05);
    border: 1px solid rgba(176, 140, 62, 0.15);
    border-radius: var(--radius-lg);
    transition: var(--transition-normal);
}

.stat-card:hover {
    border-color: rgba(176, 140, 62, 0.3);
    background: rgba(176, 140, 62, 0.08);
}

.stat-card .stat-value {
    display: block;
    font-size: var(--font-size-3xl);
    color: var(--cobre-electrico);
    font-family: var(--font-family-display);
    margin-bottom: var(--space-xs);
}

.stat-card .stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Seccion Fuentes Integradas */
.fuentes-section {
    margin-top: var(--space-xl);
    padding: 0 var(--space-md);
}

.fuentes-section__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    color: var(--cobre-electrico);
    text-align: center;
    margin-bottom: var(--space-xl);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .sources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sources-grid {
        grid-template-columns: 1fr;
    }
}

.source-category {
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--cobre);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.source-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
                0 4px 8px rgba(0, 0, 0, 0.3);
}

.source-category--upcoming {
    opacity: 0.5;
}

.source-category__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-md);
    color: var(--cobre-electrico);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.source-category__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-category__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.source-category__item::before {
    content: "";
    width: 6px;
    height: 6px;
    min-width: 6px;
    background: var(--cobre);
    border-radius: 50%;
    opacity: 0.6;
    margin-top: 6px;
}

.source-category__count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: rgba(176, 140, 62, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Barra de busqueda de fuentes */
.fuentes-search {
    position: relative;
    max-width: 400px;
    margin: 0 auto var(--space-md);
}

.fuentes-search__icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.fuentes-search__input {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    padding-left: calc(var(--space-md) + 24px);
    padding-right: calc(var(--space-md) + 30px);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(176, 140, 62, 0.3);
    border-radius: var(--radius-full);
    color: var(--marfil);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.fuentes-search__input::placeholder {
    color: var(--color-text-muted);
}

.fuentes-search__input:focus {
    outline: none;
    border-color: var(--cobre-electrico);
    box-shadow: 0 0 0 2px rgba(176, 140, 62, 0.15);
}

.fuentes-search__clear {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-full);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.fuentes-search__clear.visible {
    opacity: 1;
    visibility: visible;
}

.fuentes-search__clear:hover {
    color: var(--cobre-electrico);
    background: rgba(176, 140, 62, 0.15);
}

.fuentes-search__results {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    min-height: 1.5em;
}

/* Grid de continentes */
.continents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}

/* Tarjeta de continente */
.continent-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(176, 140, 62, 0.2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.continent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.continent-card--upcoming {
    opacity: 0.6;
}

.continent-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: rgba(176, 140, 62, 0.1);
    border-bottom: 1px solid rgba(176, 140, 62, 0.2);
}

.continent-card__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    color: var(--cobre-electrico);
    margin: 0;
}

.continent-card__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: rgba(176, 140, 62, 0.15);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.continent-card__content {
    padding: var(--space-lg);
}

/* Grupo de institucion dentro de continente */
.institution-group {
    margin-bottom: var(--space-lg);
}

.institution-group:last-child {
    margin-bottom: 0;
}

.institution-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(176, 140, 62, 0.15);
}

.institution-group__name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--marfil);
}

.institution-group__obras {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

.institution-group__note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-sm);
}

/* Lista de museos */
.museum-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.museum-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    color: var(--marfil);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    transition: color 0.2s ease;
}

.museum-list__item::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--cobre);
    border-radius: 50%;
    flex-shrink: 0;
}

.museum-list__item.highlight {
    color: var(--cobre-electrico);
    font-weight: var(--font-weight-medium);
}

.museum-list__item.highlight::before {
    background: var(--cobre-electrico);
    box-shadow: 0 0 6px var(--cobre-electrico);
}

.museum-list__item.dimmed {
    opacity: 0.3;
}

.museum-list__item[data-source] {
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.museum-list__item[data-source]:hover {
    color: var(--cobre-electrico);
    transform: translateX(4px);
}

.museum-list__item[data-source]:hover::before {
    background: var(--cobre-electrico);
}

.museum-list__count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.museum-list--upcoming .museum-list__item {
    opacity: 0.7;
}

/* Responsive para continentes */
@media (max-width: 768px) {
    .continents-grid {
        grid-template-columns: 1fr;
    }

    .fuentes-search {
        max-width: 100%;
    }
}

/* ===========================================
   FASE 2: NAVEGACION POR PAISES CON ZOOM
   =========================================== */

/* Controles de navegacion */
.map-nav-controls {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Boton de volver */
.back-to-world-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: var(--radius-full);
    color: var(--marfil);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-sm);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.back-to-world-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.back-to-world-btn:hover {
    background: rgba(176, 140, 62, 0.3);
    border-color: var(--cobre-electrico);
}

.back-to-world-btn svg {
    flex-shrink: 0;
}

/* Label del pais */
.country-label {
    padding: var(--space-sm) var(--space-lg);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(176, 140, 62, 0.4);
    border-radius: var(--radius-full);
    color: var(--cobre-electrico);
    font-family: var(--font-family-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    transition: all 0.3s ease 0.1s;
}

.country-label.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Hint del mapa */
.map-hint {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-xs) var(--space-md);
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    z-index: 5;
    transition: opacity 0.3s ease;
}

.map-container:hover .map-hint {
    opacity: 0.5;
}

/* Areas de zoom */
.zoom-area {
    cursor: pointer;
    transition: fill 0.3s ease;
}

.zoom-area:hover {
    fill: rgba(176, 140, 62, 0.1);
}

.zoom-area:focus {
    outline: none;
    fill: rgba(176, 140, 62, 0.15);
}

.zoom-area.hidden {
    pointer-events: none;
    opacity: 0;
}

/* Estados de marcadores durante zoom */
.institution-marker.hidden-zoom {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.institution-marker.zoomed-in {
    transition: opacity 0.3s ease;
}

.institution-marker.zoomed-in circle.main {
    transition: r 0.3s ease 0.3s;
}

.institution-marker.zoomed-city circle.main {
    transition: r 0.3s ease 0.3s;
}

/* ===========================================
   FASE 3: ETIQUETAS DE CIUDADES
   =========================================== */

/* Grupo de etiquetas */
.city-labels-group {
    pointer-events: none;
}

/* Etiqueta individual */
.city-label {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.city-label:hover rect {
    fill: rgba(176, 140, 62, 0.3);
    stroke: var(--cobre-electrico);
}

.city-label:hover text {
    fill: white;
}

/* Breadcrumb en el label del pais */
.country-label {
    white-space: nowrap;
}

/* Transicion suave del SVG */
.world-map {
    transition: none; /* El viewBox se anima con JS */
}

/* Ajustes de posicion para el contenedor del mapa */
.map-container {
    position: relative;
}

/* Responsive instituciones */
@media (max-width: 768px) {
    .instituciones-header h1 {
        font-size: var(--font-size-3xl);
    }

    .colecciones-filters {
        gap: 6px;
    }

    .map-container {
        border-radius: var(--radius-lg);
    }

    .map-nav-controls {
        top: var(--space-md);
        left: var(--space-md);
        flex-direction: column;
        align-items: flex-start;
    }

    .back-to-world-btn span {
        display: none;
    }

    .country-label {
        font-size: var(--font-size-sm);
    }

    .map-hint {
        font-size: 10px;
        padding: var(--space-xs) var(--space-sm);
    }

    .institution-modal {
        margin: var(--space-md);
        max-height: 90vh;
        overflow-y: auto;
    }

    .institution-modal__stats {
        grid-template-columns: 1fr;
    }

    .institution-modal__footer {
        flex-direction: column;
    }

    .map-legend {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .instituciones-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* =============================================================================
   BARRA DE CONTEXTO (Navegacion + Breadcrumbs)
   ============================================================================= */

/* Barra de migas de pan con efecto cristal */
.context-bar {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 40px;
    font-family: var(--font-family-serif, "Palatino Linotype", "Garamond", serif);
    background: rgba(9, 26, 20, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: none;
    border-bottom: none;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0px 0px rgba(255, 255, 255, 0);
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    z-index: var(--z-sticky);
    overflow: hidden;
}

.context-bar + * {
    margin-top: 120px !important;
}

.context-bar::before {
    content: none;
}

.context-bar::after {
    content: none;
}

.context-bar__breadcrumb-item {
    color: rgba(253, 251, 247, 0.35);
    text-decoration: none;
    font-size: 0.7rem;
    transition: color 0.2s ease;
}

.context-bar__breadcrumb-item:hover {
    color: rgba(253, 251, 247, 0.6);
    text-decoration: none;
}

.context-bar__separator {
    color: rgba(253, 251, 247, 0.2);
    font-size: 0.65rem;
}

.context-bar__current {
    color: rgba(253, 251, 247, 0.8);
    font-size: 0.92rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
    .context-bar {
        padding: 8px 16px;
        gap: 6px;
    }
}

/* =============================================================================
   ACCESIBILIDAD: prefers-reduced-motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Mantener algunas transiciones esenciales pero muy cortas */
    .user-dropdown,
    .modal,
    .toast {
        transition-duration: 0.1s !important;
    }
}