/* 1) Fondo general negro */
body, html {
  background-color: #000;
  margin: 0;
  padding: 0;
}

/* 2) Importa TerminaTest Bold */
@font-face {
  font-family: 'TerminaTest Bold';
  src: url('<?php echo get_stylesheet_directory_uri(); ?>/fonts/TerminaTest-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* -------------------------------------------------- 
   1) Título horizontal, fijo en la parte superior
   -------------------------------------------------- */
.page-title {
  position: fixed;                /* Fijo en la parte superior */
  top: 0;                         /* En la parte superior de la página */
  left: 0;                        /* Alineado al borde izquierdo */
  width: 100%;                    /* Ocupa todo el ancho */
  text-align: center;             /* Centrado */
  font-family: 'TerminaTest Bold', sans-serif !important;
  font-weight: 1000 !important;
  font-size: 6vw;                 /* Tamaño de fuente que se adapta al ancho */
  line-height: 1 !important;
  text-transform: uppercase; 
  color: #fff;
  background-color: black !important;
  padding: 0.9rem 0;              /* Espacio arriba y abajo */
  margin: 0;
  z-index: 9999;
  white-space: nowrap;
  border-bottom: 1px solid white; /* Línea fina blanca */
}

/* --------------------------------------------------
   4) Grilla de vídeos
   -------------------------------------------------- */
.video-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Tres columnas por defecto */
  gap: 5rem;
  background-color: black;
  padding: 2rem;
  margin-top: -20px;               /* Ajuste para quedar bajo el título */
  box-sizing: border-box;
  border-top: 90px solid black;   /* Oculta la parte inferior del título */
  overflow: hidden;
}

@media (max-width: 1023px) {
  .video-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .video-grid-container {
    grid-template-columns: 1fr;
    padding-left: 2rem; /* Menos espacio lateral en móvil */
  }
}

/* --------------------------------------------------
   5) Miniaturas 16:9 horizontales
   -------------------------------------------------- */
.video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Relación 16:9 */
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background-color: #000;
}

.thumb-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.video-thumb:hover .thumb-video {
  opacity: 1;
}

/* --------------------------------------------------
   6) Título sobre miniatura:
      alineado a la izquierda y más pequeño
   -------------------------------------------------- */
.thumb-title {
  position: absolute;
  top: 50%;
  left: 1rem;                    /* Alineado al margen izquierdo */
  transform: translateY(-50%);   /* Centrado verticalmente */
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-family: 'TerminaTest Demi', sans-serif;
  font-weight: 900;
  font-size: 1rem;               /* Ligero tamaño reducido */
  color: #fff;
  text-transform: uppercase;
  pointer-events: none;
  white-space: normal;           /* Permite varias líneas */
  text-align: left;              /* Alineación izquierda */
  background: rgba(0, 0, 0, 0); /* Sutil fondo semitransparente */
  border-radius: 4px;            /* Bordes suaves */
}