#baraja-app-wrapper {
    background-color: transparent;
    padding: 40px 0;
}

#baraja-app {
    --gold: #d4af37;
    --card-front: #ffffff;
    --card-back: #1e272e;
    --accent-red: #ff3e3e;
    font-family: inherit;
    color: white;
}

/* resto del CSS igual que antes */
#baraja-app .baraja-header { padding:25px 20px; text-align:center; background:transparent; border-bottom:2px solid var(--gold); }
#baraja-app h1 { margin:0 0 20px 0; font-size:2rem; }
#baraja-app .filter-buttons { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#baraja-app button { padding:8px 18px; border:1px solid var(--gold); background:transparent; color:var(--gold); cursor:pointer; border-radius:20px; font-weight:bold; transition:0.3s ease; }
#baraja-app button:hover, #baraja-app button.active { background:var(--gold); color:black; }
#baraja-app .grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:30px; width:90%; max-width:1400px; margin:40px auto 0 auto; padding-bottom:50px; }
#baraja-app .card { perspective:1000px; height:610px; cursor:pointer; }
#baraja-app .card-inner { position:relative; width:100%; height:100%; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; }
#baraja-app .card.is-flipped .card-inner { transform: rotateY(180deg); }
#baraja-app .front, #baraja-app .back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:15px; border:2px solid var(--gold); padding:20px; box-sizing:border-box; display:flex; flex-direction:column; box-shadow:0 10px 25px rgba(0,0,0,0.5); }
#baraja-app .front { background: var(--card-front); color:#222; }
#baraja-app .back { background: var(--card-back); color:#f1f1f1; transform: rotateY(180deg); }
#baraja-app .card-img { width:100%; height:280px; object-fit:contain; margin-bottom:15px; }
#baraja-app .back .card-img { transform:rotate(180deg); }
#baraja-app h3 { margin:10px 0; font-size:1.25rem; border-bottom:1px solid #ddd; padding-bottom:5px; text-align:center; }
#baraja-app .back h3 { color:var(--gold); border-color:var(--gold); }
#baraja-app .meaning { font-size:0.9rem; line-height:1.5; overflow-y:auto; flex-grow:1; }
#baraja-app .label { font-size:0.7rem; font-weight:bold; text-transform:uppercase; color:var(--gold); margin-bottom:5px; text-align:center; display:block; }
#baraja-app .click-hint { font-size:0.8rem; color:var(--accent-red); text-align:center; margin-top:10px; font-weight:bold; text-transform:uppercase; }
#baraja-app .nota-metodologica { width:85%; max-width:1000px; margin:20px auto; padding:15px; background:#f2f2f2; border-left:4px solid #d40000; font-style:italic; text-align:center; font-size:0.95rem; color:#b00000; line-height:1.5; }