.banner-wrapper {
width: 100%;
max-width: 970px;
margin: 0 auto;
}
.banner-container {
position: relative;
width: 100%;
aspect-ratio: 970 / 250;
overflow: hidden;
cursor: pointer;
border-radius: 12px;
background: #111;
}
/* Video adaptable */
.banner-container video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, filter 0.4s ease;
pointer-events: none;
}
/* Efecto hover en dispositivos compatibles */
@media (hover: hover) and (pointer: fine) {
.banner-wrapper a:hover video {
transform: scale(1.05);
filter: brightness(70%);
}
}
/* Botón de llamada a la acción */
.banner-button {
position: absolute;
bottom: 5%;
right: 5%;
z-index: 2;
background: #ff0000;
color: #ffffff;
padding: 10px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 6px;
text-transform: uppercase;
text-align: center;
pointer-events: none;
}
/* Enlace */
.banner-wrapper a {
display: block;
text-decoration: none;
color: inherit;
border-radius: 12px;
overflow: hidden;
}
/* Móviles */
@media (max-width: 768px) {
.banner-button {
font-size: 12px;
padding: 8px 12px;
}
}
/* Pantallas pequeñas */
@media (max-width: 480px) {
.banner-button {
font-size: 11px;
padding: 6px 10px;
bottom: 8%;
right: 5%;
}
}
/* Accesibilidad: usuarios que reducen animaciones */
@media (prefers-reduced-motion: reduce) {
.banner-container video {
transition: none;
}
}