.acronym {
    font-variant: small-caps;
  }
 .grid2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.grid-item {
  display: block;
  overflow: hidden;
  border-radius: 12px;
    border-radius: 12px;
  aspect-ratio: 1 / 1;
}

.grid-item picture,
.grid-item img {
  width: 100%;
  height: 100%;
}

.grid-item img {
  object-fit: cover;
}
  .grid-card {
   display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* padding: 16px; */
    align-items: center;
    justify-content: center;
  }
  .grid-gallery picture {
    display: block;
    width: 100%;
  }

  .grid-gallery img {
    width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
  }


  /* Botón */
  .btn-cedula {
    margin-top: auto;
    display: inline-block;
    padding: 10px 16px;
    background: #73419e;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    margin: 12px auto 0;
    transition: background 0.3s;
  }

  .btn-cedula:hover {
    background: #5e347f;
  }

  .grid-card h3 {
    font-size: 1.2rem;
    margin: 12px;
  }

  .grid-card a {
    margin-top: auto;
    display: inline-block;

    background: #73419e;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    margin: 12px auto;
    transition: background 0.3s;
  }

  .grid-card a:hover {
    background: #cfb4e7;
  }
  .grid1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .grid-item {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
  }

  .grid-item picture,
  .grid-item img {
    width: 100%;
    height: 100%;
  }

  .grid-item img {
    object-fit: cover;
  }
  .options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
  }

  .feedback {
    font-weight: bold;
    margin-top: 0.5rem;
    min-height: 1.5em;
  }

  .feedback.correct {
    color: #008000;
  }

  .feedback.incorrect {
    color: #c00;
  }

  .link-recurso,
  .link-recurso:hover {
    font-weight: bold;
    color: #73419e;
  }
  .link-recurso {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .trivia-container {
    text-align: center;
    transition: 0.3s;
  }

  h6 {
    margin-bottom: 12px;
    font-size: 14px;
    font-family: "Lato-Bold";
  }

  .option {
    background-color: #f0f0f0;
    border: none;
    border-radius: 12px;
    padding: 10px;
    margin: 8px 0;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
    font-family: "Lato-Regular";
  }

  .option:hover {
    background-color: #cde7ff;
  }

  .hidden {
    display: none;
  }

  #next-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  #next-btn:hover {
    background-color: #0056b3;
  }
  .options label {
    font-size: 14px;
  }
  .bold {
    font-family: "MerriweatherSans-bold";
  }
  i {
    font-style: italic;
  }
  .containerImg img {
    width: 100%;
    height: auto;
    display: block;
  }




  :root {

  --card-back: #73419e;
  --card-front: #cfb4e7;
  --text-color: #000000;
  --primary-color: #cfb4e7;
  --success-color: #2ecc71;
  --border-radius: 12px;
}

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


/* ==========================================================================
   Layout Principal
   ========================================================================== */
.game-container {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 1rem
}

.game-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn:hover {
  background-color: var(--card-back);
}
.card-back img {
  width: 35%; /* Ajusta este porcentaje para que el logo se vea del tamaño que quieras */
  height: auto;
  object-fit: contain;
  pointer-events: none; /* Evita que el usuario pueda arrastrar el logo con el mouse */
}
/* ==========================================================================
   Tablero de Juego (Responsivo con Grid)
   ========================================================================== */
.game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
   perspective: 1000px;
  -webkit-perspective: 1000px;
}
.card {
   position: relative;
  aspect-ratio: 3 / 4;
  cursor: pointer;
/* height: 320px; */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
 will-change: transform;
  transition: transform 0.6s ease;
}
.card-front,
.card-back {
  will-change: transform;
   overflow: hidden;
}
/* Estado volteado o emparejado */
.card.flipped, .card.matched {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card.matched {
  cursor: default;
}

/* Caras de la carta */
.card-face {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: var(--border-radius);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  /* IMPORTANTE */
  transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
}

/* Reverso (Lo que se ve al inicio) */
.card-back {
 background: var(--card-back);
  z-index: 2;
}

/* Anverso (El contenido oculto) */
.card-front {
  background: var(--card-front);

  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}

/* Contenido específico de la carta */
.card-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  font-size: 16px;
  line-height: 16px;
  word-break: break-word;
  

}

.card-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Indicador visual de acierto */
.card.matched .card-front {
  border: 3px solid var(--success-color);
}

.card-back img {
  width: 35%;
  height: auto;
  object-fit: contain;
  pointer-events: none;

}
  @media (max-width: 768px) {
    .grid-gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  .grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
  
  }

  @media (max-width: 480px) {
    .grid-card img {
      height: 100px;
    }

  .game-board {
    grid-template-columns: repeat(2, 1fr);
  }

  }