/* site.css */
:root{
    --bg-dark: #1e2226;
    --accent: #18d1f0;
}

body {
    background-color: var(--bg-dark);
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 { color: #fff; }

.card-button{
    border-radius: 8px;
    font-size: 1.25rem;
}

/* Carta 3D */
.carta-container{
    width: 260px;
    height: 360px;
    perspective: 1200px;
}

.carta{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}

.carta.girar{
    transform: rotateY(180deg) translateY(-6px);
}

.cara{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.cara-frente{
    background: linear-gradient(135deg,#d32f2f,#9b1a1a);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.2rem;
}

.cara-detras{
    transform: rotateY(180deg);
    background: #fff;
    padding: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* imagen dentro de la carta */
.cara-detras img{
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsivo */
@media (max-width: 768px){
    .carta-container{ width: 200px; height: 280px; }
    .card-button{ font-size: 1rem; padding: 12px; }
}