89 lines
1.8 KiB
CSS
89 lines
1.8 KiB
CSS
/* Aplica a imágenes y videos dentro del carousel */
|
|
.carousel-item img,
|
|
.carousel-item video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Altura del carousel para ajustarse al viewport */
|
|
.carousel-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 80vh;
|
|
}
|
|
|
|
/* Contenedor de los ítems del carrusel */
|
|
.carousel-inner {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Centrar captions */
|
|
.carousel-caption.centered {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Contenido dentro del caption */
|
|
.carousel-caption.centered .caption-content {
|
|
padding: 1rem 2rem;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
pointer-events: auto;
|
|
max-width: 90%;
|
|
background-color: rgba(0, 0, 0, 0.5); /* opcional */
|
|
color: #fff;
|
|
}
|
|
|
|
/* Título dentro del caption */
|
|
.carousel-caption.centered .caption-content h2 {
|
|
font-size: clamp(1.5rem, 5vw, 3rem);
|
|
margin: 0;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
/* Evita que videos más anchos se corten mal en landscape */
|
|
@media screen and (orientation: landscape) {
|
|
.carousel-item img,
|
|
.carousel-item video {
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
/* --------- Responsivo (ajustes si necesitas) ---------- */
|
|
|
|
/* Smartphones */
|
|
@media (max-width: 767px) {
|
|
.carousel-caption.centered .caption-content {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.carousel-caption.centered .caption-content h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Tablets */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.carousel-caption.centered .caption-content h2 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Laptops */
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
/* ajustes opcionales */
|
|
}
|
|
|
|
/* Pantallas grandes */
|
|
@media (min-width: 1440px) {
|
|
/* ajustes opcionales */
|
|
}
|