/* Declaración de las fuentes personalizadas */
@font-face {
  /* Este es el nombre que usas en Tailwind */
  font-family: 'Objectivity';

  /* Ruta al archivo de la fuente desde el CSS */
  src: url('../fonts/Objectivity-Regular.otf') format('opentype');
}

@font-face {
  /* Este es el nombre que usas en Tailwind */
  font-family: 'Courier';

  /* Ruta al archivo de la fuente desde el CSS */
  src: url('../fonts/Courier.ttc') format('truetype');
}

@font-face {
  /* Este es el nombre que usas en Tailwind */
  font-family: 'Cour_Black';

  /* Ruta al archivo de la fuente desde el CSS */
  src: url('../fonts/Courier_black.ttc') format('truetype');
}

@font-face {
  /* Este es el nombre que usas en Tailwind */
  font-family: 'Obj_Black';

  /* Ruta al archivo de la fuente desde el CSS */
  src: url('../fonts/obj_reg.otf') format('truetype');
}

.bg-film {
  /* Reemplaza 'fondo-pelicula.jpg' con el nombre de tu imagen de fondo */
  background-image: url('../img/fondo_negro@4x.png');
}

/* --- NUEVA CLASE PARA EL FONDO DE LA SECCIÓN 'REGLAS' --- */
.bg-cinema-pattern {
  /* Encontré este patrón sutil que puedes usar */
  background-image: url('../img/fondos/fondo_8.png');
  background-size: contain;
}

/* --- NUEVA CLASE PARA EL FONDO DE LA SECCIÓN 'REGLAS' --- */
.bg-convocatoria-pattern {
  /* Encontré este patrón sutil que puedes usar */
  background-image: url('../img/fondos/tira.jpg');
   background-repeat: contain;
  background-size: 2500px;
}

.bg-reglas-pattern {
  /* Encontré este patrón sutil que puedes usar */
  background-image: url('../img/fondos/tira.jpg');
  background-size: cover;

}

/* --- EFECTO FLIP CARD (VERSIÓN CORREGIDA Y PROFESIONAL) --- */
.flip-card {
  perspective: 1500px; /* Aumenta la profundidad del efecto 3D */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Para compatibilidad con Safari */
  backface-visibility: hidden;
}

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