/* =========================
   VIDEO CARDS + MODAL - CSS COMPLETO
   ========================= */

/* Variables */
:root{
  --color-fondo-card: #F5F5F7;
  --color-sombra-card: #00389940;      /* azul */
  --color-sombra-card-verde: #51920040;/* verde */
  --color-arrow-bg: #003899;
  --max-container: 62.25rem;                 /* 996px */
  --card-w: 19.5603rem;                      /* 312.9647521972656px */
  --card-h-1: 16.1884rem;                    /* 259.0140075683594px */
  --card-h-2: 16.3914rem;                    /* 262.2627258300781px */
}

/* Contenedor principal */
.videosRelacionados{
  width: 100%;
  padding: 1.875rem 1.25rem;                /* 30px 20px */
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  box-sizing: border-box;
  overflow: visible !important;
}

/* Título */
.main-titlecfdi{
  margin: 0 auto;
  width: 49.5rem;                           /* 792px */
  height: 4.3125rem;                       /* 69px */
  font-weight: 700;
  font-size: 3.5rem;                       /* 56px */
  line-height: 100%;
  color: #003899;
  font-family: 'Quicksand', sans-serif;
  text-align: center;
}

/* Grid de tarjetas */
.videos-grid {
  width: 100%;
  max-width: var(--max-container);
  margin: 1.875rem auto;                   /* 30px */
  display: flex;
  justify-content: center;
  gap: 1.875rem;                           /* 30px */
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 0.625rem;                     /* 10px */
  box-sizing: border-box;
  overflow: visible !important;
}

/* Base tarjeta */
.video-card,
.video-card1 {
  box-sizing: border-box;
  background: var(--color-fondo-card);
  border-radius: 0.69375rem;               /* 11.1px */
  padding: 0.6369rem 1.47375rem 2.10375rem 1.47375rem; /* 10.19px 23.58px 33.66px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.9,.3,1);
  overflow: visible;
  position: relative;
  text-align: center;
  z-index: 1;
}

/* Tarjeta 1 y 3 - sombra azul */
.video-card {
  width: var(--card-w);
  height: var(--card-h-1);
  opacity: 1;
  box-shadow: 0 0 0.795625rem 0 var(--color-sombra-card) !important; /* 12.73px */
  z-index: 2;
}

/* Tarjeta 2 - sombra verde */
.video-card1 {
  width: var(--card-w);
  height: var(--card-h-2);
  opacity: 1;
  box-shadow: 0 0 0.795625rem 0 var(--color-sombra-card-verde) !important;
  z-index: 2;
}

/* Hover */
.video-card:hover,
.video-card1:hover,
.video-card:focus,
.video-card1:focus {
  transform: translateY(-0.375rem);        /* 6px */
  outline: none;
}

/* Contenido interno */
.card-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0.5rem;                             /* 8px */
}

/* Número */
.video-number {
  font-weight: 700;
  font-size: 2.375rem;                     /* 38px */
  color: #A4A4A4;
  margin: 0;
  padding: 0;
}

/* Título */
.video-title {
  font-weight: 700;
  font-size: 1.625rem;                     /* 26px */
  line-height: 100%;
  color: #000000;
  margin: 0.375rem 0 0 0;                  /* 6px */
  padding: 0 0.375rem;                     /* 6px */
  word-break: break-word;
}

/* Botón play */
.play-arrow-btn {
  width: 2.8125rem;                       /* 45px */
  height: 2.8125rem;
  border-radius: 50%;
  background: var(--color-arrow-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.875rem;                   /* 14px */
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08);
}

.play-arrow-btn::after{
  content: "";
  width: 0;
  height: 0;
  border-top: 0.5625rem solid transparent;    /* 9px */
  border-bottom: 0.5625rem solid transparent;
  border-left: 0.875rem solid #ffffff;        /* 14px */
  transform: translateX(0.125rem);             /* 2px */
}

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

.video-modal-overlay{
  padding: 1.25rem;                       /* 20px */
  box-sizing: border-box;
  overflow-y: auto;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.video-modal-overlay.show { display:flex; }

/* Caja del modal */
.modal-content-container{
  position: relative;
  width: var(--max-container);
  max-width: calc(100% - 2.5rem);         /* 40px */
  height: 25.5625rem;                     /* 409px */
  border-radius: 0.69375rem;              /* 11.1px */
  background: #ffffff;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.07); /* 16px 32px */
  overflow: visible;
  padding: 0;
}

/* Botón cerrar */
.modal-close-btn {
  position: absolute;
  top: 0.75rem;                           /* 12px */
  right: 0.75rem;
  background: none;
  border: none;
  color: #444;
  font-size: 1.5rem;                      /* 24px */
  cursor: pointer;
  z-index: 10;
}

/* Grid interno */
.modal-grid{
  position: absolute;
  top: 4.75rem;                           /* 76px */
  left: 3.27875rem;                       /* 52.46px */
  width: calc(var(--max-container) - 6.5625rem); /* 105px */
  max-width: calc(100% - 6.5rem);         /* 104px */
  height: 16.0625rem;                     /* 257px */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2.8125rem;                  /* 45px */
  align-items: center;
}

/* Texto del modal */
.modal-text-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.modal-video-title{
  font-weight: 700;
  font-size: 1.625rem;                    /* 26px */
  color: #000;
}

.modal-video-description{
  font-weight: 400;
  font-size: 1.125rem;                    /* 18px */
  line-height: 1.5rem;                    /* 24px */
  color: #444;
  margin: 0;
  white-space: pre-line;
  text-align: left;
}

/* Video */
.video-player-box{
  width: 26rem;                           /* 416px */
  height: 14.875rem;                      /* 238px */
  background: #f0f0f0;
  border-radius: 0.25rem;                 /* 4px */
  overflow: hidden;
  box-shadow:
    0 2rem 4rem rgba(0,0,0,0.07),
    0 1rem 2rem rgba(0,0,0,0.07),
    0 0.5rem 1rem rgba(0,0,0,0.07),
    0 0.25rem 0.5rem rgba(0,0,0,0.07),
    0 0.125rem 0.25rem rgba(0,0,0,0.07),
    0 0.0625rem 0.125rem rgba(0,0,0,0.07);
}

.video-player-box video{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* CLAVE */
  background: #000;        /* igual que YouTube */
  display: block;
}

/* =========================
   RESPONSIVE
   ========================= */
   

@media (max-width: 64rem){                /* 1024px */
  .videos-grid{ gap: 1.25rem; }           /* 20px */
  .video-card, .video-card1{
    width: calc(50% - 1.25rem);           /* 20px */
    height: auto;
    min-height: 15rem;                    /* 240px */
  }
  .modal-content-container{
    width: calc(100% - 2.5rem);           /* 40px */
    height: auto;
    padding: 1.25rem;                     /* 20px */
  }
  .modal-grid{
    position: static;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    row-gap: 1.25rem;                     /* 20px */
  }
}

@media (max-width: 37.5rem){              /* 600px */
  .videos-grid{ gap: 1rem; }              /* 16px */
  .video-card, .video-card1{
    width: 100%;
    min-height: 13.75rem;                 /* 220px */
  }
  .video-player-box{ height: 13.75rem; }  /* 220px */
}


@media (max-width: 480px){
  .modal-video-title{
    font-weight: 700;
    font-size: 22px;                    /* 26px */
    color: #000;
    text-align: center;
    margin: 0 auto;
  }
  
  .modal-video-description{
    font-weight: 400;
    font-size: 14px;                    /* 18px */
    line-height: 1.5rem;                    /* 24px */
    color: #444;
    margin: 0 auto;
    white-space: pre-line;
    text-align: left;
  }
  
  /* Video */
  .video-player-box{
    margin: 0 auto;
    width: 22rem;                           /* 416px */
    height: 14.875rem;                      /* 238px */
    background: #f0f0f0;
    border-radius: 0.25rem;                 /* 4px */
    overflow: hidden;
    box-shadow:
      0 2rem 4rem rgba(0,0,0,0.07),
      0 1rem 2rem rgba(0,0,0,0.07),
      0 0.5rem 1rem rgba(0,0,0,0.07),
      0 0.25rem 0.5rem rgba(0,0,0,0.07),
      0 0.125rem 0.25rem rgba(0,0,0,0.07),
      0 0.0625rem 0.125rem rgba(0,0,0,0.07);
  }
}


@media (max-width: 375px){
  .modal-video-title{
    font-weight: 700;
    font-size: 22px;                    /* 26px */
    color: #000;
    text-align: center;
    margin: 0 auto;
  }
  
  .modal-video-description{
    font-weight: 400;
    font-size: 14px;                    /* 18px */
    line-height: 1.5rem;                    /* 24px */
    color: #444;
    margin: 0 auto;
    white-space: pre-line;
    text-align: left;
  }
  
  /* Video */
  .video-player-box{
    margin: 0 auto;
    width: 22rem;                           /* 416px */
    height: 14.875rem;                      /* 238px */
    background: #f0f0f0;
    border-radius: 0.25rem;                 /* 4px */
    overflow: hidden;
    box-shadow:
      0 2rem 4rem rgba(0,0,0,0.07),
      0 1rem 2rem rgba(0,0,0,0.07),
      0 0.5rem 1rem rgba(0,0,0,0.07),
      0 0.25rem 0.5rem rgba(0,0,0,0.07),
      0 0.125rem 0.25rem rgba(0,0,0,0.07),
      0 0.0625rem 0.125rem rgba(0,0,0,0.07);
  }
}