.sec-logo {
    height: 55px;
    max-width: 100%;
}

.video-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantiene la forma de video */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Opcional: para bordes redondeados */
}

/* La imagen de fondo */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* El contenedor del texto */
.video-card-body {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro para el texto */
    opacity: 0; /* Invisible por defecto */
    transition: opacity 0.4s ease;
}

.video-card-body h3 {
    color: white;
    font-size: clamp(1rem, 2vw, 1.8rem); /* Usando el clamp que definimos antes */
}

/* --- EFECTOS HOVER --- */

.video-card:hover .video-card-body {
    opacity: 1; /* El texto aparece */
}

.video-card:hover .card-bg {
    transform: scale(1.1); /* La imagen se agranda un poquito */
    filter: blur(2px); /* Opcional: un ligero desenfoque para resaltar el texto */
}

.sec-title {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    h3{
      width: 70%;
    }
}

/* Capa oscura (Overlay) */
.sec-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* El 0.5 es la opacidad (50%) */
    z-index: 1;
    /* Se pone detrás del texto */
}

/* Asegurar que el contenido esté sobre la capa oscura */
.sec-title .container {
    position: relative;
    z-index: 2;
}
#sec-ida-y-vuelta {
  background-image: url('../img/our-products/sections/ida-vuelta.jpg');
}
#sec-mapa-futbol {
  background-image: url('../img/our-products/sections/mapa-futbol.jpg');
}
#sec-club-rabona {
  background-image: url('../img/our-products/sections/club-rabona.jpg');
}
#sec-xi{
  background-image: url('../img/our-products/sections/xi.jpg');
}
#sec-codigo-puskas {
  background-image: url('../img/our-products/sections/codigo-puskas.jpg');
}
#sec-otro-dia {
  background-image: url('../img/our-products/sections/otro-dia.jpg');
}
#sec-perfil-rabonero {
  background-image: url('../img/our-products/sections/perfil-rabonero.jpg');
}
#sec-ida-y-vuelta .sec-logo, #sec-xi .sec-logo, #sec-codigo-puskas .sec-logo, #sec-mapa-futbol .sec-logo {
  height: 150px;
  max-width: 100%;
}
#sec-codigo-puskas .sec-logo {
  height: 110px;
  max-width: 100%;
}

#programa{
 padding-bottom: 100px!important;
}

/* MOBILE */
@media (max-width: 768px) {

  .sec-logo {
    height: 35px;
    max-width: 100%;
  }
  #sec-ida-y-vuelta .sec-logo, #sec-xi .sec-logo, #sec-codigo-puskas .sec-logo, #sec-mapa-futbol .sec-logo {
    height: 120px;
    max-width: 100%;
  }
    .sec-title {
        min-height: 90px;
    }
}