.banner-wrapper {
width: 100%;
max-width: 970px; /* tamaño desktop */
margin: auto;
}
.banner-container {
position: relative;
width: 100%;
aspect-ratio: 970 / 250; /* mantiene proporción */
overflow: hidden;
cursor: pointer;
border-radius: 12px;
}
/* Video adaptable */
.banner-container video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, filter 0.4s ease;
}
/* Hover solo en desktop */
@media (hover: hover) {
.banner-container:hover video {
transform: scale(1.05);
filter: brightness(70%);
}
}
/* Botón */
.banner-button {
position: absolute;
bottom: 5%;
right: 5%;
background: #ff0000;
color: #fff;
padding: 10px 16px;
font-size: 14px;
font-weight: bold;
border-radius: 6px;
text-transform: uppercase;
}
/* Ajustes para móviles */
@media (max-width: 768px) {
.banner-button {
font-size: 12px;
padding: 8px 12px;
}
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
.banner-button {
font-size: 11px;
padding: 6px 10px;
bottom: 8%;
right: 5%;
}
}