/* ==========================
   RESET
========================== */
html, body{
    margin:0;
    padding:0;
}

/* ==========================
   BASE
========================== */
body{
    font-family: Arial, sans-serif;
    background:#ffff;
    color:#010607;
    text-align:center;
    overflow-x:hidden;
    padding:20px;
}

/* ==========================
   TÍTULOS
========================== */
h1{
    color:#005F6A;
    margin-bottom:5px;
}

.intro{
    color:#555;
    margin-bottom:20px;
}

/* ==========================
   GRID
========================== */
.flashcards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:80px;
    max-width:900px;
    margin:0 auto;
}

/* ==========================
   FLASHCARD (CLAVE)
========================== */
.flashcard{
    position:relative;
    width:100%;
    max-width:260px;

    /* 🔑 ESTO ES LO QUE FALTABA */
    aspect-ratio: 3 / 4;

    perspective:1000px;
    margin:0 auto;
}

/* ==========================
   INTERIOR
========================== */
.flashcard-inner{
    position:absolute;
    inset:0;
    transition:transform 0.6s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;
    cursor:pointer;
}

.flashcard.flipped .flashcard-inner{
    transform:rotateY(180deg);
}

/* ==========================
   CARAS
========================== */
.flashcard-front,
.flashcard-back{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:center;
}

.flashcard-back{
    transform:rotateY(180deg);
}

/* ==========================
   IMÁGENES
========================== */
.flashcard img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
}

/* ==========================
   AJUSTE NAVBAR FIXED
========================== */
.flashcards-page{
    padding-top:80px;
}

.flashcards-page h1{
    margin-top:0;
}

/* ==========================
   📱 MOBILE
========================== */
@media (max-width: 768px){

    body{
        padding:10px;
    }

    .flashcards-page{
        padding-top:60px;
    }

    .flashcards-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .flashcard{
        max-width:90%;
        aspect-ratio: 3 / 4;
    }

    h1{
        margin-top:5px;
    }
}

.flashcard-back{
    background:white;
}
/* ==========================
   🍪 EFECTO GALLETA 3D
========================== */

.flashcard{
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.25));
}

.flashcard-front{
    position:relative;
    background:#c8b56a;
    box-shadow:
        inset 0 4px 6px rgba(255,255,255,.35),   /* luz arriba */
        inset 0 -6px 10px rgba(0,0,0,.25),      /* sombra abajo */
        0 14px 0 #b5a04f,                       /* grosor */
        0 18px 25px rgba(0,0,0,.35);            /* sombra suelo */
}

/* borde tipo masa */
.flashcard-front::before{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.25);
    pointer-events:none;
}
.flashcard:hover .flashcard-front{
    transform: translateY(-4px);
    box-shadow:
        inset 0 4px 6px rgba(255,255,255,.4),
        inset 0 -8px 12px rgba(0,0,0,.3),
        0 18px 0 #b5a04f,
        0 28px 35px rgba(0,0,0,.4);
}

/*AQUI VA LA BARA -----------------------------------------------------------*/
.alphabet-sidebar {
  position: fixed;
  right: 10px;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.9);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 999;
}

.alphabet-sidebar a {
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: #0c3c3c;
  transition: 0.2s;
}

.alphabet-sidebar a:hover {
  color: #d4af37;
  transform: scale(1.2);
}

html {
  scroll-behavior: smooth;
}