.cabecera-responsive { margin: 0; }
.cabecera-grid {
display: none;
gap: 10px;
width: 100%;
}
.cabecera-grid > a,
.cabecera-grid > div {
display: block;
width: 100%;
overflow: hidden;
border-radius: 10px;
position: relative;
}
.cabecera-grid a img,
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
pointer-events: none;
border-radius: 10px;
aspect-ratio: 3 / 2;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.swiper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
border-radius: 10px;
}
.swiper-pagination {
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
z-index: 10;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: rgba(0,0,0,0.3);
margin: 0 4px;
border-radius: 50%;
opacity: 1;
transition: background-color 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #000;
}
.visit-btn-container {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 11;
width: auto;
pointer-events: none;
}
.swiper-slide .visit-btn {
position: absolute;
left: 10px;
bottom: 10px;
background: white;
color: black;
padding: 6px 18px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 11;
cursor: pointer;
user-select: none;
pointer-events: auto;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
}
@media (min-width: 481px) and (max-width: 1024px) {
.swiper-slide .visit-btn {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@media (min-width: 1025px) {
.cabecera-escritorio {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
}
.cabecera-escritorio .img1 { grid-column: 1; grid-row: 1; }
.cabecera-escritorio .img2 { grid-column: 1; grid-row: 2; }
.cabecera-escritorio .img3 { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.cabecera-escritorio .img4 { grid-column: 4 / span 2; grid-row: 1 / span 2; }
.cabecera-escritorio .img5 { grid-column: 6; grid-row: 1; }
.cabecera-escritorio .img6 { grid-column: 6; grid-row: 2; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.cabecera-tablet-horizontal {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
}
.cabecera-tablet-horizontal .img1 { grid-column: 1; grid-row: 1; }
.cabecera-tablet-horizontal .img2 { grid-column: 1; grid-row: 2; }
.cabecera-tablet-horizontal .img3 { grid-column: 2 / span 3; grid-row: 1 / span 2; }
.cabecera-tablet-horizontal .img4 { grid-column: 5; grid-row: 1; }
.cabecera-tablet-horizontal .img5 { grid-column: 5; grid-row: 2; }
.cabecera-tablet-horizontal .img6 { grid-column: 6; grid-row: 1; }
.cabecera-tablet-horizontal .img7 { grid-column: 6; grid-row: 2; }
}
@media (min-width: 481px) and (max-width: 767px) {
.cabecera-tablet-vertical {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, auto);
gap: 10px;
padding-top: 20px; 
}
.cabecera-tablet-vertical .img1 {
grid-column: 1;
grid-row: 1;
aspect-ratio: 1 / 1;
}
.cabecera-tablet-vertical .img2 {
grid-column: 1;
grid-row: 2;
aspect-ratio: 1 / 1;
}
.cabecera-tablet-vertical .img3 {
grid-column: 2 / span 2;
grid-row: 1 / span 2;
aspect-ratio: 1 / 1;
}
.cabecera-tablet-vertical .img4 {
grid-column: 4;
grid-row: 1;
aspect-ratio: 1 / 1;
}
.cabecera-tablet-vertical .img5 {
grid-column: 4;
grid-row: 2;
aspect-ratio: 1 / 1;
}
.cabecera-tablet-vertical .img1 img,
.cabecera-tablet-vertical .img2 img,
.cabecera-tablet-vertical .img4 img,
.cabecera-tablet-vertical .img5 img,
.cabecera-tablet-vertical .img3 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
}
.cabecera-tablet-vertical .img3 .swiper {
height: 100%;
}
}
@media (max-width: 480px) {
.cabecera-celular {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cabecera-celular .banner1 {
grid-column: 1 / span 2;
aspect-ratio: 10 / 3;
border-radius: 10px;
overflow: hidden;
}
.cabecera-celular .banner2,
.cabecera-celular .banner3 {
aspect-ratio: 2.4 / 1;
height: auto;
border-radius: 10px;
overflow: hidden;
}
.cabecera-celular img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
}
}