* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-image {
    height: 50px;
    width: auto;
    border-radius: 50%;
}

.logo-text h2 {
    color: #2c3e50;
    margin-bottom: -5px;
}

.logo-text span {
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: 300;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #e74c3c;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-content {
    flex: 1;
    padding: 0 2rem;
    z-index: 2;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.8;
    animation: fadeInUp 1s ease 0.4s both;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s ease 0.6s both;
}

.btn-primary, .btn-secondary {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #e74c3c;
    color: white;
}

.btn-primary:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #667eea;
}

/* Hero Visual */
.hero-visual {
    flex: 1;
    position: relative;
    height: 100vh;
}

.floating-art {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.art-frame {
    width: 150px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    position: absolute;
    animation: float 6s ease-in-out infinite;
}

.art-frame:nth-child(1) {
    top: -100px;
    left: -75px;
    animation-delay: 0s;
}

.art-frame:nth-child(2) {
    top: 50px;
    left: 75px;
    animation-delay: 2s;
}

.art-frame:nth-child(3) {
    top: -50px;
    left: 200px;
    animation-delay: 4s;
}

/* Gallery Section */
.gallery {
    padding: 100px 0;
    background: #f8f9fa;
}

.gallery h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.gallery-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background: #e74c3c;
    color: white;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

/* === 📱 GALLERY RESPONSIVE OPTIMIZADO === */

/* Móvil vertical - 1 columna */
@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0 0.75rem;
    }

    .gallery-item,
    .artwork-card {
        width: 100%;
        max-width: none;
    }

    /* Imágenes optimizadas para móvil */
    .gallery-image,
    .artwork-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
    }
}

/* Móvil horizontal / Tablet vertical - 2 columnas */
@media (min-width: 641px) and (max-width: 968px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 0.75rem;
    }
}

/* Tablet horizontal - 3 columnas */
@media (min-width: 969px) and (max-width: 1280px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

/* Desktop grande - 4 columnas */
@media (min-width: 1281px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.artwork-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.artwork-card:hover {
    transform: translateY(-10px);
}

.artwork-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.artwork-info {
    padding: 1.5rem;
}

.artwork-info h3 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.artwork-info p {
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* About Section */
.about {
    padding: 100px 0;
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #2c3e50;
}

.about p {
    margin-bottom: 1.5rem;
    color: #7f8c8d;
    line-height: 1.8;
}

.stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
}

.stat h3 {
    font-size: 2.5rem;
    color: #e74c3c;
    margin-bottom: 0.5rem;
}

.stat p {
    color: #7f8c8d;
    margin: 0;
}

.about-image {
    display: flex;
    justify-content: center;
}

.profile-placeholder {
    width: 300px;
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Variantes (reemplazo de estilos inline) */
.profile-placeholder--main {
    background-image: url('https://images.unsplash.com/photo-1571566882372-1598d88abd90?w=300&h=400&fit=crop');
}

/* NFT Section */
.nft-section {
    padding: 100px 0;
    background: #2c3e50;
    color: white;
    text-align: center;
}

.nft-section h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 3rem;
}

.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.nft-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 2rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.nft-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border-radius: 10px;
    margin-bottom: 1rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Placeholder NFT image (antes inline style) */
.nft-image--placeholder {
    background-image: url('https://images.unsplash.com/photo-1548681528-6a5c45b66b42?w=250&h=200&fit=crop');
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: #f8f9fa;
    text-align: center;
}

.contact h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.contact p {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin-bottom: 3rem;
}

.contact-btn {
    padding: 15px 40px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

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

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

/* ==========================================
   HAMBURGER MENU & MOBILE NAVIGATION
   ========================================== */

/* Hamburger Button - Solo visible en móvil */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: transform 0.3s ease;
}

.hamburger-menu:hover {
    transform: scale(1.1);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: #2c3e50;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animación hamburger a X cuando está abierto */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Overlay oscuro cuando el menú está abierto */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Mostrar hamburger en móvil */
    .hamburger-menu {
        display: flex;
    }

    /* Menú móvil - Drawer desde la derecha */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 80px 0 20px 0;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
        transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-menu li:last-child {
        border-bottom: none;
        padding: 1rem;
    }

    .nav-menu a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        font-weight: 500;
        color: #2c3e50;
        transition: all 0.3s ease;
    }

    .nav-menu a:hover,
    .nav-menu a:active {
        background: #f8f9fa;
        color: #667eea;
        padding-left: 2rem;
    }

    /* Carrito en menú móvil */
    .nav-menu .cart-button {
        width: calc(100% - 3rem);
        margin: 1rem 1.5rem;
        justify-content: center;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
    }

    /* Prevenir scroll del body cuando el menú está abierto */
    body.menu-open {
        overflow: hidden;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .hero-content {
        padding: 0 1rem;
        text-align: center;
    }

    .gallery h2 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }

    .gallery-filter {
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-bottom: 2rem;
    }

    .filter-btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }

    .artwork-card {
        margin: 0 auto;
        max-width: 320px;
    }

    .artwork-image {
        height: 220px;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .stats {
        justify-content: center;
        gap: 1.5rem;
    }

    .stat h3 {
        font-size: 2rem;
    }

    .nft-section h2,
    .contact h2 {
        font-size: 2.2rem;
    }

    .games-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .game-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-width: 160px;
    }
}

/* 🎮 Sección de Juegos */
.games-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 🎯 EXPANDIR CONTAINER PARA JUEGOS - USA TODO EL ANCHO DISPONIBLE */
.games-section .container {
    max-width: 1600px; /* Mucho más ancho - aprovecha espacio izquierdo */
    padding: 0 40px; /* Más padding para respirar en los bordes */
}

.games-menu {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.game-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 15px 25px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 600;
    min-width: 180px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.game-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.game-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    color: #333;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.welcome-game {
    text-align: center;
}

.welcome-game h3 {
    font-size: 1.8rem;
    color: #667eea;
    margin-bottom: 1rem;
}

/* Juego de Colores */
.color-game {
    text-align: center;
    width: 100%;
}

.color-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 2rem auto;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.color-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.color-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Juego de Memoria */
.memory-game {
    text-align: center;
    width: 100%;
}

/* ================= UNIFIED MEMORY (ARTE) ================= */
/* Layout principal ahora se gestiona SOLO en unified-memory.css para evitar conflictos.
   Este bloque conserva únicamente estilos complementarios (overlay educativo, matched, badges, etc.) */

.adv-label-right-8 { margin-right: 8px; }
.adv-label-year { margin: 0 8px 0 16px; }
.is-hidden { display: none; }
.progress.w-75 { width: 75%; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }
.memory-stats-bar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.memory-help-modal { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Imagen de obra (interacciones y filtros) */
.unified-memory-game .artwork-image-card img.artwork-image {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:contrast(1.02) saturate(1.04);
    transition:filter .5s ease, transform .5s ease;
    backface-visibility:hidden;
}
.unified-memory-game .memory-card:hover img.artwork-image {
    filter:contrast(1.12) saturate(1.12) brightness(1.03);
    transform:scale(1.02);
}

/* Estado emparejado refinado */
.unified-memory-game .memory-card.matched .card-inner {
    box-shadow: 0 0 0 2px #d4af37, 0 0 12px 3px rgba(212,175,55,0.55), 0 8px 22px -6px rgba(0,0,0,0.45);
    position:relative;
}
.unified-memory-game .memory-card.matched .card-inner:after {
    content:"";
    position:absolute;
    inset:0;
    border:2px solid rgba(255,230,150,0.55);
    border-radius:14px;
    pointer-events:none;
    mix-blend-mode:overlay;
}
.unified-memory-game .memory-card.matched img.artwork-image {
    filter:contrast(1.18) saturate(1.18) brightness(1.05);
}

/* Badges analíticos (tamaño base se mantiene) */
.unified-memory-game .analytic-badge.visible {
    position:absolute;
    top:6px; right:6px;
    background:rgba(0,0,0,0.65);
    color:#fff;
    font-size:.65rem;
    padding:3px 6px;
    border-radius:6px;
    font-weight:600;
    letter-spacing:.5px;
}

/* Notificaciones dentro del juego (mantener tamaño adaptado) */
.unified-memory-game .memory-notification { font-size:1rem; }
/* Caras front específicas para obras */
.unified-memory-game .artwork-front {
    background: #16181d; /* ligeramente más claro para mejorar detalle en sombras */
    box-shadow: none;
    border: none;
    padding:0;
}
.unified-memory-game .artwork-front img.artwork-image {
    /* Máxima fidelidad, quitamos filtros base (ya los controlamos arriba) */
    filter: contrast(1.05) saturate(1.05) brightness(1.03);
}
.unified-memory-game .memory-card:hover .artwork-front img.artwork-image {
    filter: contrast(1.14) saturate(1.12) brightness(1.05);
}
/* Overlay educativo sobre imágenes de obras */
.unified-memory-game .artwork-image-card { position:relative; }
.unified-memory-game .artwork-image-card .artwork-edu-overlay {
    position:absolute;
    left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05));
    color:#fff;
    padding:.45rem .55rem .55rem;
    font-size:.66rem;
    line-height:1.15;
    font-weight:500;
    letter-spacing:.3px;
    display:flex;
    flex-direction:column;
    gap:2px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius:0 0 8px 8px;
    pointer-events:none;
    opacity:1;
    transition: opacity .4s ease;
}
.unified-memory-game .artwork-image-card .overlay-title {
    font-size:.74rem;
    font-weight:600;
    text-shadow:0 2px 4px rgba(0,0,0,0.55);
    line-height:1.1;
}
.unified-memory-game .artwork-image-card .overlay-segment {
    opacity:.85;
    font-weight:500;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Estado mientras aún se están precargando imágenes: reducimos brillo para indicar carga */
.unified-memory-game:not(.um-images-ready) .artwork-image-card img.artwork-image { filter: grayscale(.25) brightness(.85) contrast(1); }
.unified-memory-game:not(.um-images-ready) .artwork-image-card .artwork-edu-overlay { opacity:.35; }
.unified-memory-game.um-images-ready .artwork-image-card img.artwork-image { transition: filter .5s ease; }
/* Ocultar overlay educativo cuando el usuario lo desactiva */
.unified-memory-game.um-overlay-hidden .artwork-image-card .artwork-edu-overlay { display:none; }

/* 📱 Optimización móvil del overlay - 4 columnas */
@media (max-width: 640px) {
  .unified-memory-game .artwork-image-card .artwork-edu-overlay {
    padding: 0.3rem 0.4rem 0.4rem;
    font-size: 0.5rem; /* Reducido de 0.66rem */
    gap: 1px;
  }

  .unified-memory-game .artwork-image-card .overlay-title {
    font-size: 0.56rem; /* Reducido de 0.74rem */
    line-height: 1.05;
  }

  .unified-memory-game .artwork-image-card .overlay-segment {
    font-size: 0.48rem;
  }
}
/* ========================================================== */

.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 400px;
    margin: 2rem auto;
}

.memory-card {
    width: 80px;
    height: 80px;
    position: relative;
    cursor: pointer;
    perspective: 1000px;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 12px;
    transition: transform 0.6s;
    border: 3px solid #667eea;
}

.card-front {
    background: #f8f9fa;
}

.card-back {
    background: #667eea;
    color: white;
    transform: rotateY(180deg);
}

.memory-card.flipped .card-front {
    transform: rotateY(-180deg);
}

.memory-card.flipped .card-back {
    transform: rotateY(0deg);
}

/* Generador de Ideas Avanzado */
.idea-generator-advanced {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.generator-header {
    text-align: center;
    margin-bottom: 2rem;
}

.generator-header h3 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.generator-header p {
    color: #666;
    font-style: italic;
}

/* Showcase principal */
.idea-showcase {
    margin-bottom: 2rem;
}

.main-concept {
    text-align: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}

.main-concept h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    opacity: 0.9;
}

.concept-title {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.concept-subtitle {
    font-size: 1.3rem;
    opacity: 0.8;
    font-style: italic;
}

/* Detalles de la idea */
.idea-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.detail-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    opacity: 0.1;
    border-radius: 0 15px 0 50px;
}

/* Colores específicos para cada tipo de carta */
.subject-card {
    border-left-color: #4CAF50;
}

.subject-card::before {
    background: #4CAF50;
}

.style-card {
    border-left-color: #FF9800;
}

.style-card::before {
    background: #FF9800;
}

.scenario-card {
    border-left-color: #2196F3;
}

.scenario-card::before {
    background: #2196F3;
}

.palette-card {
    border-left-color: #E91E63;
}

.palette-card::before {
    background: #E91E63;
}

.composition-card {
    border-left-color: #9C27B0;
}

.composition-card::before {
    background: #9C27B0;
}

.card-icon {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
}

.card-content h5 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.card-content p {
    margin: 0.5rem 0;
    line-height: 1.4;
}

.card-content p:first-of-type {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

.detail-desc {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
}

.detail-feature {
    color: #888;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    display: inline-block;
}

/* Sección de inspiración */
.inspiration-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.advice-card, .inspiration-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    padding: 1.5rem;
    border-left: 4px solid #667eea;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.advice-card h5, .inspiration-card h5 {
    color: #667eea;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.advice-card p, .inspiration-card p {
    color: #555;
    line-height: 1.5;
    font-style: italic;
}

/* Acciones del generador */
.generator-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.generate-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    animation: pulse 2s infinite;
}

.save-btn {
    background: #4CAF50;
}

.library-btn {
    background: #FF9800;
    color: white;
}

@keyframes pulse {
    0% { box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); }
    50% { box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); }
    100% { box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); }
}

/* Frase creativa */
.creativity-quote {
    text-align: center;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    padding: 1.5rem;
    border-radius: 15px;
    margin-top: 2rem;
    font-style: italic;
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.3);
}

/* Biblioteca de ideas */
.ideas-library {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.library-header {
    text-align: center;
    margin-bottom: 2rem;
}

.library-header h3 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.saved-idea-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-top: 4px solid #667eea;
    cursor: pointer;
    transition: all 0.3s ease;
}

.saved-idea-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.idea-preview h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.idea-style {
    color: #667eea;
    font-weight: 600;
    margin-bottom: 1rem;
}

.idea-tags {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.tag {
    background: #f8f9fa;
    color: #666;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid #e9ecef;
}

.palette-tag {
    background: rgba(233, 30, 99, 0.1);
    color: #E91E63;
    border-color: rgba(233, 30, 99, 0.2);
}

.composition-tag {
    background: rgba(156, 39, 176, 0.1);
    color: #9C27B0;
    border-color: rgba(156, 39, 176, 0.2);
}

.idea-date {
    color: #888;
    font-size: 0.8rem;
    margin-top: 1rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 0.8rem;
}

.library-actions {
    text-align: center;
    margin-top: 2rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .idea-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .inspiration-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .generator-actions {
        flex-direction: column;
    }

    .generator-actions button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .concept-title {
        font-size: 1.8rem;
    }

    .ideas-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .detail-card {
        padding: 1rem;
    }
}

/* Generador original (mantener compatibilidad) */
.idea-generator {
    text-align: center;
    width: 100%;
}

.idea-card {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin: 2rem 0;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.idea-card h4 {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.idea-card p {
    margin: 0.8rem 0;
    font-size: 1.1rem;
}

/* Feedback y Logros */
.feedback {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.feedback.success {
    background: #4CAF50;
}

.feedback.info {
    background: #2196F3;
}

.achievement-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: bounceIn 0.5s ease;
}

.motivation-message {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1.5rem;
    border-radius: 15px;
    max-width: 300px;
    z-index: 10000;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    animation: slideInLeft 0.3s ease;
}

.score-display {
    font-size: 1.2rem;
    font-weight: 600;
    color: #667eea;
    margin-top: 2rem;
    padding: 1rem;
}

/* 🐾 Nuevos estilos para categorías de animales */

/* Selección de categoría */
.category-selection {
    text-align: center;
    width: 100%;
}

.category-selection h3 {
    color: #667eea;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.category-selection p {
    color: #666;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.category-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 2rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.category-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.category-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.category-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.category-count {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Información del juego */
.game-info {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.game-info h4 {
    color: #667eea;
    margin-bottom: 1rem;
}

.game-info ul {
    text-align: left;
    color: #666;
    padding-left: 1.5rem;
}

.game-info li {
    margin-bottom: 0.5rem;
}

/* Indicador de dificultad */
.difficulty-indicator {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

/* --- Pricing Refinement Additions (cart & checkout) --- */
.cart-coupon, .order-coupon { margin-bottom: 8px; }
.coupon-input-wrapper { display:flex; gap:4px; }
.coupon-input-wrapper input { flex:1; padding:4px 6px; font-size:14px; }
.coupon-input-wrapper button { padding:4px 10px; font-size:14px; cursor:not-allowed; opacity:0.6; }
.soon-tag { font-size:11px; margin-left:4px; color:#888; }
.cart-effective-discount, .order-effective-discount { font-size:12px; color:#2c7a7b; margin:4px 0 6px; }
.cart-shipping-hint, .order-shipping-hint { font-size:12px; background:#f6f6f6; padding:6px 8px; border-radius:4px; margin:6px 0 4px; line-height:1.3; }
.cart-shipping-hint.success, .order-shipping-hint.success { background:#e6ffed; color:#137333; font-weight:600; }
.apply-coupon-btn { background:#ccc; border:none; border-radius:4px; }

.difficulty-easy {
    background: #4CAF50;
    color: white;
}

.difficulty-medium {
    background: #FF9800;
    color: white;
}

.difficulty-hard {
    background: #F44336;
    color: white;
}

/* Header del juego mejorado */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.change-category-btn {
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.change-category-btn:hover {
    background: #ff5252;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

/* Cartas de memoria mejoradas con imágenes reales */
.card-back {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: rotateY(180deg);
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
}

/* Imágenes de animales */
.animal-image {
    width: 100%;
    height: 70%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

/* Fallback con emoji si falla la imagen */
.animal-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 70%;
}

.animal-emoji {
    font-size: 1.8rem;
}

.animal-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1;
}

/* Overlay del nombre sobre la imagen */
.animal-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    border-radius: 0 0 8px 8px;
}

/* Efecto de carta emparejada */
.memory-card.matched {
    animation: matchSuccess 0.5s ease;
}

@keyframes matchSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Estadísticas del juego */
.game-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(102, 126, 234, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 15px;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #667eea;
}

/* Animación de actualización de puntuación */
.score-update-animation {
    animation: scoreUpdate 0.5s ease;
}

@keyframes scoreUpdate {
    0% { transform: scale(1); color: #667eea; }
    50% { transform: scale(1.2); color: #4CAF50; }
    100% { transform: scale(1); color: #667eea; }
}

/* Pantalla de juego completado */
.memory-complete {
    text-align: center;
    width: 100%;
    padding: 2rem;
}

.celebration-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

.complete-message {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
}

/* Resultados del juego */
.game-results {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
}

.result-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.result-stat:last-child {
    border-bottom: none;
}

.result-stat.total {
    font-weight: 600;
    color: #667eea;
    font-size: 1.1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(102, 126, 234, 0.3);
    border-bottom: none;
}

.result-label {
    color: #666;
}

.result-value {
    font-weight: 600;
    color: #4CAF50;
}

.result-stat.total .result-value {
    color: #667eea;
    font-size: 1.2rem;
}

/* Botones de acción */
.next-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.btn-primary, .btn-secondary, .btn-tertiary {
    border: none;
    border-radius: 25px;
    padding: 1rem 2rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background: #667eea;
    color: white;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #4CAF50;
    color: white;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-secondary:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.btn-tertiary {
    background: #f8f9fa;
    color: #666;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-tertiary:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Mensaje de logro */
.achievement-message {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    padding: 1rem;
    border-radius: 15px;
    margin-top: 2rem;
    font-style: italic;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .game-header {
        flex-direction: column;
        text-align: center;
    }

    .game-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .next-actions {
        flex-direction: column;
    }

    .btn-primary, .btn-secondary, .btn-tertiary {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .memory-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 300px;
    }

    .memory-card {
        width: 70px;
        height: 70px;
    }

    .card-front, .card-back {
        font-size: 1.5rem;
    }

    .animal-name {
        font-size: 0.6rem;
    }

    .animal-name-overlay {
        font-size: 0.55rem;
        padding: 0.2rem;
    }

    .animal-image {
        height: 65%;
    }

    .animal-fallback {
        height: 65%;
    }

    .difficulty-indicator {
        font-size: 0.7rem;
        padding: 0.3rem 0.8rem;
    }
}

/* ===================== */
/* Carrito de Compras    */
/* ===================== */
.cart-summary {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.cart-summary > div { margin-bottom: 6px; }
.cart-summary > div:last-child { margin-bottom: 0; }

.cart-summary .cart-subtotal,
.cart-summary .cart-discount,
.cart-summary .cart-tax,
.cart-summary .cart-shipping,
.cart-summary .cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}
.cart-summary .cart-discount { color: #d35400; }
.cart-summary .cart-tax span:first-child,
.cart-summary .cart-shipping span:first-child { color: #555; }
.cart-summary .cart-total { font-weight: 600; font-size: 1rem; }
.cart-summary .cart-total.final { border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px; }

.cart-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.cart-actions .btn-primary, .cart-actions .btn-secondary { flex: 1; font-size: .9rem; padding: .75rem 1rem; }

/* Notificación del carrito */
#cart-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #222;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
    z-index: 9999;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
#cart-notification.show { opacity: 1; transform: translateY(0); }

/* Widget flotante carrito */
.floating-cart-widget {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-radius: 18px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    z-index: 1100;
    font-size: 0.9rem;
    transition: transform .25s ease, box-shadow .25s ease;
}
.floating-cart-widget:focus { outline: 2px solid #fff; outline-offset: 3px; }
.floating-cart-widget:hover { transform: translateY(-4px); box-shadow: 0 14px 35px rgba(0,0,0,.35); }
.floating-cart-widget:active { transform: translateY(-1px) scale(.97); }
.floating-cart-widget .fcw-icon { font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.floating-cart-widget .fcw-info { display: flex; flex-direction: column; line-height: 1.1; }
.floating-cart-widget .fcw-count { font-weight: 700; font-size: .95rem; }
.floating-cart-widget .fcw-total { font-size: .75rem; opacity: .85; }
.floating-cart-widget .fcw-pulse { position:absolute; inset:0; border-radius:18px; pointer-events:none; }
.floating-cart-widget.pulse .fcw-pulse { animation: fcwPulse 1s ease; }
@keyframes fcwPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6);} 70% { box-shadow:0 0 0 14px rgba(255,255,255,0);} 100% { box-shadow:0 0 0 0 rgba(255,255,255,0);} }
@media (max-width:640px){ .floating-cart-widget { bottom: 80px; right: 12px; padding: 9px 12px; } }

/* =================== */
/* Hub Historial       */
/* =================== */
.hub-history { margin-top: 1.5rem; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:12px; padding:1rem 1rem 0.75rem; }
.hub-history h4 { margin-bottom:0.75rem; font-size:1rem; font-weight:600; color:#444; }
.history-list { list-style:none; max-height:180px; overflow:auto; padding:0; margin:0 0 0.5rem; }
.history-list .hist-item { display:flex; gap:.5rem; font-size:.7rem; padding:.3rem .4rem; border-radius:6px; align-items:center; line-height:1.1; }
.history-list .hist-item:nth-child(odd){ background:#ffffff; }
.history-list .hist-item:nth-child(even){ background:#f0f1f4; }
.history-list .hist-time { font-family:monospace; color:#666; opacity:.8; }
.history-list .hist-label { flex:1; color:#333; }
.history-list .empty { font-size:.7rem; color:#777; padding:.4rem; }
.history-actions { text-align:right; }
.history-actions button { background:#667eea; color:#fff; border:none; padding:.35rem .65rem; font-size:.65rem; border-radius:6px; cursor:pointer; }
.history-actions button:hover { background:#5b65d4; }
.hist-nearMiss-detected { border-left:3px solid #ff9800; }
.hist-nearMiss-accepted { border-left:3px solid #673ab7; }
.hist-nearMiss-redeemed { border-left:3px solid #4caf50; }
.hist-nearMiss-expired { border-left:3px solid #9e9e9e; opacity:.7; }
.hist-surprise-triggered { border-left:3px solid #03a9f4; }
.hist-surprise-rewardGranted { border-left:3px solid #4caf50; }
.history-filters { display:flex; gap:.4rem; margin-bottom:.5rem; }
.hist-filter-btn { background:#e0e3f5; border:none; padding:.35rem .6rem; font-size:.65rem; border-radius:6px; cursor:pointer; color:#333; font-weight:600; }
.hist-filter-btn.active { background:#667eea; color:#fff; box-shadow:0 0 0 1px #5562c5 inset; }
.hist-filter-btn:hover { background:#d0d6ef; }
#hist-tooltip-host { position:absolute; background:rgba(30,32,45,.95); color:#f5f5f5; padding:.55rem .7rem; border-radius:8px; font-size:.6rem; line-height:1.15; pointer-events:none; white-space:pre-line; z-index:10000; box-shadow:0 4px 16px -2px rgba(0,0,0,.4); opacity:0; transform:translateY(4px); transition:opacity .18s, transform .18s; max-width:240px; }
#hist-tooltip-host.show { opacity:1; transform:translateY(0); }

/* === Animaciones Add-to-Cart === */
.add-to-cart-btn { position: relative; overflow: hidden; }
.add-to-cart-btn.adding { animation: cartBtnPulse 0.55s ease; }
@keyframes cartBtnPulse { 0% { transform: scale(1); box-shadow:0 0 0 0 rgba(231,76,60,0.4);} 40% { transform: scale(1.06); box-shadow:0 0 0 6px rgba(231,76,60,0.0);} 100% { transform: scale(1); box-shadow:0 0 0 0 rgba(231,76,60,0); } }

/* Contador animado (badge y widget) */
.cart-icon-count, .fcw-count { transition: transform .25s ease, color .25s ease; }
.count-bump { animation: countBump .45s ease; }
@keyframes countBump { 0% { transform: scale(1); } 35% { transform: scale(1.35); color:#ffd54f; } 65% { transform: scale(0.9); } 100% { transform: scale(1); color:inherit; } }

/* Highlight item recién agregado */
.cart-item.new-item-flash { animation: newItemFlash 1.2s ease; position: relative; }
/* Reutilizar misma animación para resumen en checkout */
.order-item.new-item-flash { animation: newItemFlash 1.2s ease; position: relative; }
/* Item cuyo quantity se incrementó (diferente tono) */
.cart-item.increment-item-flash { animation: incrementItemFlash 1s ease; position: relative; }
.order-item.increment-item-flash { animation: incrementItemFlash 1s ease; position: relative; }
@keyframes newItemFlash {
    0% { background: #fff8e1; box-shadow: 0 0 0 0 rgba(255,193,7,0.6); }
    40% { background: #ffecb3; box-shadow: 0 0 0 6px rgba(255,193,7,0.0); }
    75% { background: #fff; }
    100% { background: #fff; }
}
@keyframes incrementItemFlash {
    0% { background: #e1f5fe; box-shadow: 0 0 0 0 rgba(3,169,244,0.55); }
    40% { background: #b3e5fc; box-shadow: 0 0 0 6px rgba(3,169,244,0); }
    80% { background: #fff; }
    100% { background: #fff; }
}


/* Animaciones */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes bounceIn {
    0% { transform: translate(-50%, -50%) scale(0.3); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* 🏆 Galería Real y Tabs */
.gallery-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-tab {
    background: transparent;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    color: #666;
}

.gallery-tab.active {
    background: #667eea;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.gallery-content {
    display: none;
}

.gallery-content.active {
    display: block;
    animation: fadeInUp 0.5s ease;
}

/* ===== GALLERY HEADER MODERNO ===== */
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(231, 76, 60, 0.1);
    gap: 2rem;
}

.gallery-header-text {
    flex: 1;
}

.gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gallery-subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
    margin: 0;
    font-weight: 400;
}

/* Estadísticas modernas tipo dashboard */
.artwork-stats-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-width: 400px;
}

.stat-card-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.2rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.stat-card-modern:hover::before {
    opacity: 1;
}

.stat-icon-modern {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.stat-number-modern {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-label-modern {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ===== FILTROS MODERNOS (CHIPS STYLE) ===== */
.gallery-filters-modern {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-group-primary {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.filter-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #e74c3c;
}

.filter-chip.active {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border-color: #e74c3c;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.filter-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.filter-text {
    line-height: 1;
}

/* Filtros avanzados mejorados */
.filter-group-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

.filter-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
}

.filter-label-icon {
    font-size: 1rem;
}

.filter-select {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    background: white;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.filter-select:hover {
    border-color: #e74c3c;
}

.filter-select:focus {
    outline: none;
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* ===== RESPONSIVE GALLERY HEADER ===== */
@media (max-width: 968px) {
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .artwork-stats-modern {
        width: 100%;
        min-width: auto;
    }

    .gallery-title {
        font-size: 2.2rem;
    }

    .gallery-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .gallery-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .gallery-title {
        font-size: 1.8rem;
    }

    .gallery-subtitle {
        font-size: 0.95rem;
    }

    .artwork-stats-modern {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .stat-card-modern {
        padding: 1rem 0.8rem;
    }

    .stat-number-modern {
        font-size: 1.8rem;
    }

    .stat-label-modern {
        font-size: 0.7rem;
    }

    .gallery-filters-modern {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .filter-group-primary {
        margin-bottom: 1rem;
    }

    .filter-chip {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .filter-icon {
        font-size: 1rem;
    }

    .filter-group-secondary {
        flex-direction: column;
        gap: 1rem;
        padding-top: 0.8rem;
    }

    .filter-select-wrapper {
        width: 100%;
    }

    .filter-select {
        flex: 1;
        width: 100%;
    }
}

/* Estadísticas de obras (legacy - mantener para compatibilidad) */
.artwork-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Filtros avanzados de galería (legacy) */
#advanced-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
}

#advanced-filters label {
    font-weight: 600;
    color: #333;
}

#advanced-filters select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* Tarjetas de obras reales */
.real-artwork-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.real-artwork-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.real-artwork-image {
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* === Vista agrupada por técnica (portada) === */
.technique-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 16px 0 8px;
}

.technique-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.technique-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.12); }

.technique-cover {
    width: 100%;
    padding-top: 62%; /* 16:10 aproximado */
    background-size: cover;
    background-position: center;
    filter: saturate(0.9) contrast(1.02);
}

.technique-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
    padding: 14px 14px 12px;
}

.technique-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin: 0 0 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.technique-meta { display: flex; gap: 10px; color: #d0d0d0; font-size: 0.9rem; margin-bottom: 8px; }
.technique-meta .dim { color: #a8a8a8; }

.technique-view-btn {
    align-self: flex-start;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.85rem;
    transition: background .2s ease, border-color .2s ease;
}
.technique-card:hover .technique-view-btn { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }

.status-badge.available {
    background: #4CAF50;
    color: white;
}

.status-badge.sold {
    background: #FF5722;
    color: white;
}

.status-badge.exhibition {
    background: #FFB74D;
    color: #333;
}

.real-artwork-info {
    padding: 1.5rem;
}

.real-artwork-info h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.artwork-details {
    color: #667eea;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.artwork-story {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.artwork-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 0.5rem;
}

.sold-date {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
}

/* Mensaje "Próximamente" */
.coming-soon-message {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 3rem;
    border-radius: 20px;
    margin: 2rem 0;
}

.coming-soon-content h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.encouragement {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    font-size: 1.1rem;
}

.upload-guide {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 15px;
    text-align: left;
    max-width: 500px;
    margin: 2rem auto 0;
}

.upload-guide h4 {
    margin-bottom: 1rem;
    text-align: center;
}

.upload-guide ol {
    line-height: 1.8;
    padding-left: 1.5rem;
}

.upload-guide code {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

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

/* === 🎨 NUEVOS ESTILOS ARTÍSTICOS === */

/* Journey Timeline */
.artistic-journey {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f6f0, #f0ebe5);
    border-radius: 15px;
    border-left: 4px solid #8d6e63;
}

.artistic-journey h3 {
    color: #6d4c41;
    margin-bottom: 1.5rem;
    text-align: center;
}

.journey-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.journey-step {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.journey-step:hover {
    transform: translateX(5px);
    border-left-color: #8d6e63;
    box-shadow: 0 5px 15px rgba(141, 110, 99, 0.1);
}

.step-year {
    min-width: 60px;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #8d6e63, #6d4c41);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
}

.step-content h4 {
    color: #4e342e;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.step-content p {
    color: #5d4037;
    font-size: 0.9rem;
    margin: 0;
}

/* Profile Frame Mejorado */
.profile-placeholder--main {
    background: linear-gradient(135deg, #f8f6f0, #f0ebe5);
    color: #8d6e63;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.profile-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background:
        radial-gradient(circle at 30% 20%, rgba(196, 143, 102, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(162, 117, 91, 0.1) 0%, transparent 50%);
    border: 3px solid rgba(141, 110, 99, 0.2);
    border-radius: 17px;
    position: relative;
}

.profile-frame::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px dashed rgba(141, 110, 99, 0.3);
    border-radius: 12px;
}

.profile-content {
    text-align: center;
    z-index: 2;
}

.profile-content p {
    font-size: 1.2rem;
    color: #6d4c41;
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
}

.profile-content small {
    font-size: 1rem;
    color: #8d6e63;
    font-style: italic;
}

/* Responsive para timeline */
@media (max-width: 768px) {
    .journey-step {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .step-year {
        min-width: auto;
        width: 100%;
        max-width: 120px;
    }
}

/* ==========================================
   MODAL DE GALERÍA DETALLADA
   ========================================== */

.artwork-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    overflow-y: auto; /* scroll principal fallback */
    animation: fadeIn 0.3s ease;
    /* overscroll-behavior ayuda a evitar el rebote en algunos navegadores modernos; Safari iOS <16 lo ignora */
    overscroll-behavior: contain;
}

.artwork-modal.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* evita corte si el contenido es muy alto */
    padding: 20px 16px 32px;
    min-height: 100vh;
    padding-top: calc(20px + env(safe-area-inset-top)); /* notch iOS */
}

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

.modal-artwork-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    max-width: 1200px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s ease;
    max-height: 90vh; /* asegura que no sobrepase la ventana */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* contenedor interno hace scroll */
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Botón volver dentro del modal */
.modal-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #FFD700, #FFB347);
    border: none;
    color: #1a1a2e;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-back-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.5);
}

.modal-back-btn:active {
    transform: translateY(-1px) scale(0.97);
}

.modal-artwork-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 60px 40px 40px;
    overflow-y: auto;
    /* Propiedades de scrollbar (Firefox). Navegadores sin soporte simplemente las ignoran */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #444 rgba(255,255,255,0.1); /* Firefox */
    max-height: calc(90vh - 20px); /* deja espacio para sombras / botones */
    -webkit-overflow-scrolling: touch; /* scroll suave iOS */
}

/* Scrollbar WebKit para modal (suave y discreto) */
.modal-artwork-grid::-webkit-scrollbar { width: 10px; }
.modal-artwork-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 6px; }
.modal-artwork-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; }
.modal-artwork-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

/* Lado izquierdo - Imagen */
.modal-artwork-image-section {
    position: relative;
}

.modal-artwork-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-height: 60vh; /* evita que una imagen gigante desborde */
    object-fit: contain;
}

.artwork-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a2e;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.artwork-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 15px;
}

.nav-artwork-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-artwork-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
    transform: translateY(-2px);
}

.nav-artwork-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-artwork-btn:disabled:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Badge preview próximo nivel (juego mezclas) */
.preview-badge {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    animation: pulsePreview 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(101,143,255,0.4);
}

@keyframes pulsePreview {
  0% { box-shadow: 0 0 0 0 rgba(101,143,255,0.45); }
  70% { box-shadow: 0 0 0 12px rgba(101,143,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(101,143,255,0); }
}

.preview-badge::after {
    content: 'Beta';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ffca28;
    color: #1a1a2e;
    padding: 2px 6px;
    font-size: 0.55rem;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Panel educativo preview nivel siguiente */
.preview-edu-panel {
        display: flex;
        gap: 16px;
        background: linear-gradient(135deg, rgba(70,90,200,0.15), rgba(40,30,90,0.35));
        border: 1px solid rgba(120,150,255,0.35);
        padding: 18px 20px;
        border-radius: 18px;
        margin: 15px 0 25px;
        position: relative;
        overflow: hidden;
}
.preview-edu-panel::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -20%;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle at center, rgba(120,150,255,0.35), rgba(120,150,255,0) 70%);
        opacity: 0.6;
        pointer-events: none;
        animation: floatGlow 8s linear infinite;
}
@keyframes floatGlow {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(10px) rotate(160deg); }
    100% { transform: translateY(0) rotate(360deg); }
}
.preview-edu-icon {
        font-size: 2rem;
        line-height: 1;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.preview-edu-content h4.preview-edu-title {
        margin: 0 0 6px;
        font-size: 1.05rem;
        color: #d5dcff;
        letter-spacing: 0.5px;
}
.preview-edu-text {
        margin: 0 0 8px;
        font-size: 0.9rem;
        color: #c3c9e8;
        line-height: 1.5;
}
.preview-edu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 4px;
}
.preview-edu-list li {
        font-size: 0.78rem;
        color: #b5c3ff;
        background: rgba(255,255,255,0.05);
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.08);
}
/* Contador de previews vistas */
.preview-counter-line {
        margin: 10px 0 18px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: #b7c6ff;
        background: rgba(120,150,255,0.10);
        border: 1px solid rgba(120,150,255,0.25);
        padding: 6px 12px;
        display: inline-flex;
        gap: 6px;
        align-items: center;
        border-radius: 14px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
@media (max-width:640px){
    .preview-counter-line { font-size:0.7rem; padding:5px 10px; }
}
@media (max-width: 640px) {
    .preview-edu-panel {
        flex-direction: column;
    }
    .preview-edu-icon {
        font-size: 1.6rem;
    }
}

/* Lado derecho - Información */
.modal-artwork-info-section {
    color: white;
}

.artwork-title-main {
    font-size: 2.5rem;
    color: #FFD700;
    margin-bottom: 10px;
    font-weight: bold;
}

.artwork-subtitle {
    font-size: 1.2rem;
    color: #b8b8b8;
    margin-bottom: 30px;
    font-style: italic;
}

.artwork-story {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    border-left: 4px solid #FFD700;
    margin-bottom: 30px;
}

.artwork-story h3 {
    color: #FFD700;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.artwork-story p {
    line-height: 1.8;
    color: #e8e8e8;
    font-size: 1.05rem;
}

.artwork-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-label {
    color: #FFD700;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-value {
    color: #e8e8e8;
    font-size: 1.1rem;
}

.artwork-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.artwork-tag {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Responsive */
@media (max-width: 968px) {
    .modal-artwork-grid {
        grid-template-columns: 1fr;
        padding: 56px 24px 32px; /* espacio superior extra para botones */
    }

    .artwork-title-main {
        font-size: 2rem;
    }

    .artwork-details-grid {
        grid-template-columns: 1fr;
    }
}

/* Ajustes extra para móviles pequeños */
@media (max-width: 640px) {
    .modal-artwork-content { max-height: 92vh; }
    .modal-artwork-grid { 
        gap: 28px; 
        padding: 70px 18px 28px; 
        max-height: calc(92vh - 12px);
    }
    .artwork-title-main { font-size: 1.7rem; line-height: 1.15; }
    .artwork-subtitle { font-size: 1rem; margin-bottom: 18px; }
    .artwork-story { padding: 18px; margin-bottom: 24px; }
    .artwork-details-grid { gap: 16px; }
    .detail-item { padding: 16px; }
    .modal-close-btn, .modal-back-btn { width: 42px; height: 42px; font-size: 22px; }
    .modal-back-btn { padding: 8px 18px; font-size: 0.85rem; }
    .modal-artwork-image { max-height: 45vh; }
}

/* Accesibilidad: foco visible en botones modales */
.modal-close-btn:focus, .modal-back-btn:focus, .nav-artwork-btn:focus { 
    outline: 3px solid #FFD700; 
    outline-offset: 2px; 
}

/* Salvaguarda: si el modal tiene mucha altura y se centra verticalmente en pantallas altas */
@media (min-height: 900px) and (min-width: 1000px) {
  .modal-artwork-content { max-height: 86vh; }
  .modal-artwork-grid { max-height: calc(86vh - 20px); }
}

/* Cursor personalizado para las obras */
.gallery-item, .artwork-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-image,
.artwork-card:hover .artwork-image {
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3);
}