/*
Theme Name: Defecto
Author: Agu
Version: 1.0
*/

#categoria-movil {
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  appearance: none;
  padding-right: 2.5rem;
}

.sube {
  transition: transform 0.2s ease-in-out;
}

.sube:hover {
  transform: translateY(-15px);
}

/* Estilos para el botón de play */
.boton-play {
  transition: all 0.3s ease;
  transform: scale(0.9);
}

.group:hover .boton-play {
  transform: scale(1);
  opacity: 1 !important;
}

/* Triángulo de play */
.triangulo-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

/* Para pantallas pequeñas (menores que lg) */
@media (max-width: 1023px) {
  .ancho50 {
      width: 60%;
      min-width: 300px;
      margin-left: auto;
      margin-right: auto;
      float: none;
  }
}


/* Animación para el modal */
#videoModal {
    transition: opacity 0.3s ease;
}

/* Asegurar relación de aspecto 16:9 */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%;
}

.aspect-w-16 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Botón de cerrar */
#videoModal button {
    transition: transform 0.2s ease;
}

#videoModal button:hover {
    transform: scale(1.2);
}


.estrecho {
  width: 100%;
}

@media (max-width: 1023px) { /* Para pantallas más pequeñas */
  .estrecho{
      max-width: 70%;  /* Márgenes laterales en pantallas pequeñas */
      margin: 0 auto;  /* Centrar los videos */
  }
}

@media (max-width: 640px) { /* Para pantallas más pequeñas */
  .estrecho{
      max-width: 85%;  /* Márgenes laterales en pantallas pequeñas */
      margin: 0 auto;  /* Centrar los videos */
  }
}


.bg-opacity-75 { background-color: rgba(0, 0, 0, 0.8) !important; }