.videos_cajas {
  position: relative;

  width: 100%;
  min-height: 610px;

  margin: 0 !important;
  padding: 0 !important;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  overflow: hidden;

  box-sizing: border-box;
}


.videos_cajas .video-grid-container {
  position: relative;

  width: 100%;
  max-width: 1250px;

  min-height: 610px;

  margin: 0 auto;
  padding: 111px 35px 35px 40%;

  box-sizing: border-box;
}


/* =========================================================
   GRID 2 x 2
   ========================================================= */

.videos_cajas .video-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;
}


/* =========================================================
   CAJA DE VIDEO
   ========================================================= */

.videos_cajas .video-card {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  cursor: pointer;

  background: #0a2b5c;

  border: 7px solid #ffd400;

  box-sizing: border-box;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   MINIATURA
   ========================================================= */

.videos_cajas .video-thumbnail {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;

  transition: transform 0.3s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.videos_cajas .video-card:hover {
  transform: scale(1.015);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.videos_cajas .video-card:hover .video-thumbnail {
  transform: scale(1.04);
}


/* =========================================================
   BOTÓN PLAY
   ========================================================= */

.videos_cajas .video-play {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 54px;
  height: 54px;

  transform: translate(-50%, -50%);

  display: flex;

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

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.55);

  pointer-events: none;
}


/* Triángulo */

.videos_cajas .video-play-icon {
  width: 0;
  height: 0;

  margin-left: 5px;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #ffffff;
}


/* =========================================================
   MODAL
   ========================================================= */

.video-modal {
  position: fixed;

  inset: 0;

  width: 100%;
  height: 100%;

  display: none;

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

  z-index: 99999;
}


/* Modal abierto */

.video-modal.is-open {
  display: flex;
}


/* =========================================================
   FONDO DEL MODAL
   ========================================================= */

.video-modal-overlay {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.85);

  cursor: pointer;
}


/* =========================================================
   CONTENEDOR DEL MODAL
   ========================================================= */

.video-modal-content {
  position: relative;

  width: 90%;
  max-width: 1000px;

  background: #000;

  z-index: 2;

  box-sizing: border-box;
}


/* =========================================================
   VIDEO DEL MODAL
   ========================================================= */

.video-modal-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  background: #000;
}


.video-modal-frame iframe {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.video-modal-close {
  position: absolute;

  top: -48px;
  right: 0;

  width: 40px;
  height: 40px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #ffffff;

  color: #0a2b5c;

  font-family: Arial, sans-serif;

  font-size: 30px;
  line-height: 38px;

  text-align: center;

  cursor: pointer;

  z-index: 5;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


.video-modal-close:hover {
  background: #ffd400;

  transform: rotate(90deg);
}


/* =========================================================
   BLOQUEAR SCROLL CUANDO EL MODAL ESTÁ ABIERTO
   ========================================================= */

body.video-modal-open {
  overflow: hidden;
}


/* =========================================================
   1199 PX
   ========================================================= */

@media (max-width: 1199px) {

  .videos_cajas {
    min-height: 560px;
  }

  .videos_cajas .video-grid-container {
    min-height: 560px;

    padding-left: 38%;
    padding-right: 30px;
    padding-top: 32px;
  }

  .videos_cajas .video-grid {
    gap: 14px;
  }

  .videos_cajas .video-card {
    border-width: 6px;
  }
}


/* =========================================================
   991 PX
   ========================================================= */

@media (max-width: 991px) {

  .videos_cajas {
    min-height: 500px;
  }

  .videos_cajas .video-grid-container {
    min-height: 500px;

    padding-left: 36%;
    padding-right: 22px;
    padding-top: 28px;
  }

  .videos_cajas .video-grid {
    gap: 12px;
  }

  .videos_cajas .video-card {
    border-width: 5px;
  }

  .videos_cajas .video-play {
    width: 45px;
    height: 45px;
  }

  .videos_cajas .video-play-icon {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 12px;
  }
}


/* =========================================================
   MÓVIL - 767 PX
   ========================================================= */

@media (max-width: 767px) {

  .videos_cajas {
    min-height: auto;

    background-position: center center;
  }


  .videos_cajas .video-grid-container {
    width: 100%;
    min-height: auto;

    max-width: 100%;

    padding: 25px 20px 35px;
  }


  /*
   * En móvil pasamos a una columna
   */

  .videos_cajas .video-grid {
    grid-template-columns: 1fr;

    gap: 15px;
  }


  .videos_cajas .video-card {
    border-width: 5px;
  }


  /* Modal */

  .video-modal-content {
    width: 94%;
  }

  .video-modal-close {
    top: -45px;

    width: 38px;
    height: 38px;

    font-size: 27px;
    line-height: 36px;
  }
}


/* =========================================================
   CELULAR - 480 PX
   ========================================================= */

@media (max-width: 480px) {

  .videos_cajas .video-grid-container {
    padding: 20px 15px 30px;
  }

  .videos_cajas .video-grid {
    gap: 12px;
  }

  .videos_cajas .video-card {
    border-width: 4px;
  }

  .videos_cajas .video-play {
    width: 42px;
    height: 42px;
  }

  .videos_cajas .video-play-icon {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px;
  }

  .video-modal-content {
    width: 96%;
  }
}