que tiene la imagen de
fondo -- animar transform:scale() en ese div escalaba tambien el texto y
los botones. background-size solo afecta el fondo, nunca a los hijos. */
#carrouselBannerHome,
#carrouselBannerHomeMobile {
position: relative;
}
#carrouselBannerHome .item.bannerHome,
#carrouselBannerHomeMobile .item.bannerHome {
background-size: 100%;
will-change: background-size;
}
#carrouselBannerHome .owl-item.active .item.bannerHome,
#carrouselBannerHomeMobile .owl-item.active .item.bannerHome {
animation: kenburns-zoom-hero 6.5s ease-out forwards;
}
@keyframes kenburns-zoom-hero {
from {
background-size: 100%;
}
to {
background-size: 114%;
}
}
/* ---------- Banner hero de la ficha de proyecto: mismo zoom, sin carrusel ---------- */
/* A diferencia del home, esto no es un carrusel real -- corre una sola vez
al cargar la pagina (forwards), no depende de .owl-item.active. La
version mobile es background-image (mismo enfoque que el home); la
version desktop es un
![]()
real, asi que ahi se anima transform en vez
de background-size -- el
![]()
no tiene hijos de texto, es seguro. */
#carrouselBannerProyecto {
position: relative;
}
/* Bug real encontrado al quitar el carrusel (2026-09-05): Owl Carousel
envolvia el
![]()
/background-image en su propio .owl-item con posicion
y z-index que -de hecho- dejaban el texto arriba. Sin ese wrapper, el
texto (position:absolute, z-index:auto) quedaba tapado por la imagen
-- verificado forzando z-index en el navegador real, no una hipotesis.
Se fija explicitamente el orden correcto. */
#carrouselBannerProyecto .contenedorInformacionBanner.proyecto {
z-index: 2;
}
#carrouselBannerProyecto .bannerProyectoHeroImgMobile {
animation: kenburns-zoom-hero 6.5s ease-out forwards;
}
/* Bug real reportado por el usuario: la imagen no llegaba al ancho
completo en viewports anchos. Owl Carousel forzaba el ancho del
![]()
vía JS (inline width en .owl-item); sin ese wrapper, el
![]()
solo tenía `height:720px` inline y sin `width:100%`, el navegador
calculaba el ancho a partir del aspect-ratio real de la foto
(1920x1080), quedando más angosto que el contenedor en pantallas
anchas. object-fit:cover llena el ancho completo y recorta el sobrante
verticalmente, igual que hace `background-size:cover` en la mobile. */
#carrouselBannerProyecto .bannerProyectoHeroImg {
width: 100%;
object-fit: cover;
transform: scale(1);
will-change: transform;
animation: kenburns-zoom-img 6.5s ease-out forwards;
}
@keyframes kenburns-zoom-img {
from {
transform: scale(1);
}
to {
transform: scale(1.08);
}
}
/* ---------- Indicador de puntos del banner hero ---------- */
#carrouselBannerHome .owl-dots,
#carrouselBannerHomeMobile .owl-dots {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
z-index: 5;
display: flex;
justify-content: center;
gap: 10px;
line-height: 0;
}
#carrouselBannerHome .owl-dots .owl-dot span,
#carrouselBannerHomeMobile .owl-dots .owl-dot span {
width: 8px;
height: 8px;
margin: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#carrouselBannerHome .owl-dots .owl-dot:hover span,
#carrouselBannerHomeMobile .owl-dots .owl-dot:hover span {
background: rgba(255, 255, 255, 0.75);
}
#carrouselBannerHome .owl-dots .owl-dot.active span,
#carrouselBannerHomeMobile .owl-dots .owl-dot.active span {
background: #FFB719;
transform: scale(1.25);
}
/* ---------- Reduced motion: todo colapsa a estado final, sin animacion ---------- */
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
.bannerProyecto,
.btnAmarillo,
.btnTransparente {
transition: none;
}
.btnTransparente.cotizar_depto {
animation: none;
}
.bannerProyecto:hover {
transform: none;
}
.bannerProyecto img {
transition: none;
}
.bannerProyecto:hover img {
transform: none;
}
.skeleton-shimmer::after {
animation: none;
}
#imgCotizador {
transition: none;
}
#carrouselBannerHome .owl-item.active .item.bannerHome,
#carrouselBannerHomeMobile .owl-item.active .item.bannerHome {
animation: none;
background-size: cover;
}
#carrouselBannerProyecto .bannerProyectoHeroImgMobile {
animation: none;
background-size: cover;
}
#carrouselBannerProyecto .bannerProyectoHeroImg {
animation: none;
transform: none;
}
}