/* =========================================================
   CARRUSEL DE TARJETAS - GALERÍAS
   ========================================================= */
#features-wrapper{
width:100%;
overflow:visible!important;
}
#features.gal-slider-outer{
position:relative!important;
width:100%!important;
max-width:1240px!important;
margin:0 auto!important;
padding:0 52px!important;
box-sizing:border-box!important;
overflow:visible!important;
}
#galGridContainer{
position:relative!important;
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:18px!important;
width:100%!important;
max-width:none!important;
height:auto!important;
margin:0!important;
padding:10px 5px 20px!important;
box-sizing:border-box!important;
overflow-x:hidden!important;
overflow-y:visible!important;
scroll-behavior:smooth!important;
}
#galGridContainer.gal-modo-slider{
overflow-x:auto!important;
overflow-y:visible!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
#galGridContainer.gal-modo-slider::-webkit-scrollbar{
display:none!important;
}
#galGridContainer .gal-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
flex:0 0 calc((100% - 54px)/4)!important;
width:calc((100% - 54px)/4)!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
align-self:stretch!important;
background:#fff!important;
border:1px solid #d9e2dd!important;
border-radius:12px!important;
overflow:hidden!important;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;
}
#galGridContainer .gal-card:hover{
transform:scale(1.04)!important;
z-index:10!important;
}
#galGridContainer .gal-card-header{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:40px!important;
min-height:40px!important;
padding:5px 8px!important;
box-sizing:border-box!important;
flex:0 0 40px!important;
background:linear-gradient(to bottom,#f8fbf9,#fff)!important;
border-bottom:1px solid #e5ebe8!important;
font-family:inherit!important;
font-size:19px!important;
font-weight:400!important;
line-height:1!important;
text-align:center!important;
color:#000!important;
text-shadow:none!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:clip!important;
}
/* =========================================================
   TEXTO DESLIZANTE - PC Y TABLET
   ========================================================= */
@media(min-width:701px){
#galGridContainer .gal-card-header .gal-header-text{
display:block!important;
width:max-content!important;
max-width:none!important;
white-space:nowrap!important;
flex:0 0 auto!important;
transform:translateX(0);
}
#galGridContainer .gal-card-header.gal-text-overflow{
justify-content:flex-start!important;
}
#galGridContainer .gal-card-header.gal-text-overflow .gal-header-text{
animation:galTextoDeslizante var(--gal-text-duration,6s) ease-in-out infinite!important;
}
@keyframes galTextoDeslizante{
0%,15%{transform:translateX(0);}
45%,55%{transform:translateX(var(--gal-text-move));}
85%,100%{transform:translateX(0);}
}
}
/* =========================================================
   IMÁGENES
   ========================================================= */
#galGridContainer .gal-image-wrapper{
position:relative!important;
display:block!important;
width:calc(100% - 10px)!important;
height:155px!important;
min-height:155px!important;
max-height:155px!important;
flex:0 0 155px!important;
margin:5px!important;
padding:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
background:#e9eeeb!important;
border-radius:7px!important;
}
#galGridContainer .gal-image-wrapper::after{
content:""!important;
position:absolute!important;
left:0!important;
right:0!important;
bottom:0!important;
height:45px!important;
pointer-events:none!important;
background:linear-gradient(to top,rgba(0,0,0,.16),transparent)!important;
opacity:.45!important;
}
#galGridContainer .gal-image-wrapper img{
position:absolute!important;
top:0!important;
left:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
display:block!important;
object-fit:cover!important;
opacity:0!important;
transform:scale(1)!important;
transition:opacity .8s ease,transform .3s ease!important;
}
#galGridContainer .gal-image-wrapper img.gal-visible{
opacity:1!important;
transform:scale(1)!important;
}
#galGridContainer .gal-card:hover .gal-image-wrapper img{
transform:scale(1.07)!important;
}
#galGridContainer .gal-card:hover .gal-image-wrapper img.gal-visible{
transform:scale(1.07)!important;
}
/* =========================================================
   FLECHAS DEL CARRUSEL
   ========================================================= */
#gridPrev,#gridNext{
position:absolute!important;
top:50%!important;
z-index:9999!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:40px!important;
height:40px!important;
margin:0!important;
padding:0!important;
border:1px solid rgba(255,255,255,.65)!important;
border-radius:50%!important;
background:#168447!important;
color:#fff!important;
font-family:Arial,sans-serif!important;
font-size:24px!important;
font-weight:400!important;
line-height:1!important;
cursor:pointer!important;
transform:translateY(-50%)!important;
box-shadow:0 4px 12px rgba(0,0,0,.23)!important;
transition:all .22s ease!important;
}
#gridPrev{left:7px!important;}
#gridNext{right:7px!important;}
#gridPrev:hover:not(:disabled),#gridNext:hover:not(:disabled){
background:#fff!important;
color:#168447!important;
border-color:#168447!important;
box-shadow:0 0 18px rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.35)!important;
transform:translateY(-50%) scale(1.12)!important;
}
#gridPrev:active:not(:disabled),#gridNext:active:not(:disabled){
transform:translateY(-50%) scale(.95)!important;
}
#gridPrev:disabled,#gridNext:disabled{
opacity:.30!important;
cursor:default!important;
}
/* =========================================================
   TARJETAS CON INFORMACIÓN
   ========================================================= */
#galGridContainer .gal-card.gal-card-info{
perspective:none!important;
}
#galGridContainer .gal-card.gal-card-info .gal-flip-inner{
position:relative!important;
display:block!important;
width:100%!important;
height:auto!important;
transform-style:preserve-3d!important;
transition:transform .65s ease!important;
}
#galGridContainer .gal-card.gal-card-info:hover .gal-flip-inner{
transition:transform .65s ease 0.5s!important;
}
#galGridContainer .gal-card.gal-card-info.gal-flipped .gal-flip-inner{
transition:transform .65s ease 0s!important;
}
#galGridContainer .gal-card.gal-card-info .gal-flip-front,
#galGridContainer .gal-card.gal-card-info .gal-flip-back{
backface-visibility:hidden!important;
-webkit-backface-visibility:hidden!important;
}
#galGridContainer .gal-card.gal-card-info .gal-flip-front{
position:relative!important;
display:flex!important;
flex-direction:column!important;
width:100%!important;
height:auto!important;
min-height:100%!important;
box-sizing:border-box!important;
}
#galGridContainer .gal-card.gal-card-info .gal-flip-back{
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
bottom:0!important;
width:100%!important;
height:100%!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
background:linear-gradient(to bottom,#f8fbf9,#fff)!important;
border-radius:11px!important;
transform:rotateY(180deg)!important;
overflow:hidden!important;
}
#galGridContainer .gal-card.gal-card-info:hover .gal-flip-inner,
#galGridContainer .gal-card.gal-card-info.gal-flipped .gal-flip-inner{
transform:rotateY(180deg)!important;
}
/* =========================================================
   TEXTO DE INFORMACIÓN
   ========================================================= */
.gal-info-text{
display:block!important;
text-align: justify;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0 4px!important;
box-sizing:border-box!important;
overflow:hidden!important;
font-family:inherit!important;
font-size:18px!important;
line-height:1.25!important;
text-align:justify!important;
color:#000!important;
text-shadow:none!important;
-webkit-font-smoothing:antialiased!important;
}
/* =========================================================
   BOTÓN - SOLO MÓVIL
   ========================================================= */
.gal-info-button{
display:none!important;
}
/* =========================================================
   TABLET
   ========================================================= */
@media(max-width:1000px) and (min-width:701px){
#features.gal-slider-outer{padding:0 46px!important;}
#galGridContainer{gap:14px!important;}
#galGridContainer .gal-card{
flex:0 0 calc((100% - 42px)/4)!important;
width:calc((100% - 42px)/4)!important;
}
#galGridContainer .gal-card-header{
font-size:15px!important;
height:38px!important;
min-height:38px!important;
flex-basis:38px!important;
padding:5px 6px!important;
}
#galGridContainer .gal-image-wrapper{
width:calc(100% - 10px)!important;
height:135px!important;
min-height:135px!important;
max-height:135px!important;
flex:0 0 135px!important;
margin:5px!important;
}
#gridPrev,#gridNext{
width:38px!important;
height:38px!important;
font-size:22px!important;
}
}
/* =========================================================
   MÓVIL
   ========================================================= */
@media(max-width:700px){
#features.gal-slider-outer{padding:0 38px!important;}
#galGridContainer{
gap:12px!important;
padding:8px 5px 18px!important;
width:100%!important;
overflow-x:hidden!important;
overflow-y:visible!important;
}
#galGridContainer.gal-modo-slider{
overflow-x:auto!important;
overflow-y:visible!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
#galGridContainer.gal-modo-slider::-webkit-scrollbar{display:none!important;}
#galGridContainer .gal-card{
flex:0 0 calc(100% - 10px)!important;
width:calc(100% - 10px)!important;
max-width:calc(100% - 10px)!important;
}
#galGridContainer .gal-card-header{
font-size:19px!important;
height:38px!important;
min-height:38px!important;
flex-basis:38px!important;
padding:4px 5px!important;
}
#galGridContainer .gal-image-wrapper{
width:calc(100% - 10px)!important;
height:135px!important;
min-height:135px!important;
max-height:135px!important;
flex:0 0 135px!important;
margin:5px!important;
}
#galGridContainer .gal-card.gal-card-info .gal-flip-back{
padding:15px!important;
}
.gal-info-text{
font-size:17px!important;
line-height:1.22!important;
}
.gal-info-button{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 32px!important;
height:32px!important;
min-height:32px!important;
margin:10px 0 0!important;
padding:0 15px!important;
box-sizing:border-box!important;
border:1px solid #168447!important;
border-radius:17px!important;
background:#168447!important;
color:#fff!important;
font-family:inherit!important;
font-size:15px!important;
font-weight:400!important;
line-height:1!important;
cursor:pointer!important;
transition:all .22s ease!important;
}
.gal-info-button:hover{
background:#fff!important;
color:#168447!important;
box-shadow:0 0 15px rgba(255,255,255,.85),0 4px 12px rgba(0,0,0,.22)!important;
}
}
/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */
@media(max-width:500px){
#features.gal-slider-outer{padding:0 36px!important;}
#galGridContainer{
gap:10px!important;
padding:8px 5px 18px!important;
overflow-x:hidden!important;
overflow-y:visible!important;
}
#galGridContainer.gal-modo-slider{
overflow-x:auto!important;
overflow-y:visible!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
#galGridContainer.gal-modo-slider::-webkit-scrollbar{display:none!important;}
#galGridContainer .gal-card{
flex:0 0 calc(100% - 10px)!important;
width:calc(100% - 10px)!important;
max-width:calc(100% - 10px)!important;
}
#galGridContainer .gal-card-header{
font-size:18px!important;
height:36px!important;
min-height:36px!important;
flex-basis:36px!important;
padding-left:4px!important;
padding-right:4px!important;
}
#galGridContainer .gal-image-wrapper{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
flex-basis:145px!important;
margin:5px!important;
}
#gridPrev,#gridNext{
width:34px!important;
height:34px!important;
font-size:20px!important;
}
.gal-info-text{
font-size:16px!important;
}
}
/* =========================================================
   MÓVIL MUY PEQUEÑO
   ========================================================= */
@media(max-width:400px){
#features.gal-slider-outer{padding:0 34px!important;}
#galGridContainer{
gap:9px!important;
padding:8px 4px 18px!important;
overflow-x:hidden!important;
overflow-y:visible!important;
}
#galGridContainer.gal-modo-slider{
overflow-x:auto!important;
overflow-y:visible!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
#galGridContainer.gal-modo-slider::-webkit-scrollbar{display:none!important;}
#galGridContainer .gal-card{
flex:0 0 calc(100% - 8px)!important;
width:calc(100% - 8px)!important;
max-width:calc(100% - 8px)!important;
}
#galGridContainer .gal-card-header{
font-size:17px!important;
height:34px!important;
min-height:34px!important;
flex-basis:34px!important;
}
#galGridContainer .gal-image-wrapper{
height:155px!important;
min-height:155px!important;
max-height:155px!important;
flex-basis:155px!important;
margin:4px!important;
width:calc(100% - 8px)!important;
}
#gridPrev,#gridNext{
width:32px!important;
height:32px!important;
font-size:19px!important;
}
.gal-info-text{
font-size:15px!important;
line-height:1.18!important;
}
}
/* =========================================================
   MODAL
   ========================================================= */
.gal-modal{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:99999!important;
display:none!important;
align-items:center!important;
justify-content:center!important;
background:rgba(0,0,0,.88)!important;
visibility:hidden!important;
opacity:0!important;
}
.gal-modal.gal-active{
display:flex!important;
visibility:visible!important;
opacity:1!important;
}
.gal-modal-content{
position:relative!important;
width:90%!important;
max-width:1000px!important;
height:85vh!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
pointer-events:none!important;
}
.gal-carousel-track{
position:relative!important;
display:block!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
pointer-events:none!important;
}
.gal-carousel-slide{
position:absolute!important;
top:0!important;
left:0!important;
width:100%!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
box-sizing:border-box!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transition:opacity .45s ease!important;
}
.gal-carousel-slide.slide-active{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
.gal-carousel-slide img{
display:block!important;
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:85vh!important;
object-fit:contain!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:8px!important;
pointer-events:auto!important;
user-select:none!important;
}
.gal-modal-close{
position:absolute!important;
top:20px!important;
right:30px!important;
z-index:100!important;
cursor:pointer!important;
}
.gal-close-text{
font-size:48px!important;
color:#fff!important;
transition:all .22s ease!important;
}
.gal-close-text:hover{
text-shadow:
0 0 6px #fff,
0 0 14px #fff,
0 0 28px rgba(255,255,255,.95),
0 0 42px rgba(255,255,255,.75)!important;
}
.gal-nav-btn{
position:absolute!important;
top:50%!important;
z-index:100!important;
transform:translateY(-50%)!important;
width:45px!important;
height:45px!important;
border:0!important;
border-radius:50%!important;
background:#168447!important;
color:#fff!important;
cursor:pointer!important;
}
.gal-nav-btn:hover{
background:#fff!important;
color:#168447!important;
border:1px solid #168447!important;
box-shadow:0 0 18px rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.35)!important;
transform:translateY(-50%) scale(1.12)!important;
}
.gal-nav-btn:active{
transform:translateY(-50%) scale(.95)!important;
}
.gal-prev-btn{left:25px!important;}
.gal-next-btn{right:25px!important;}
/* =========================================================
   AJUSTE FINAL - BOTÓN MÓVIL
   ========================================================= */
@media(max-width:700px){
.gal-info-button{
display:flex!important;
position:absolute!important;
right:1px!important;
bottom:10px!important;
width:72px!important;
height:20px!important;
min-width:72px!important;
max-width:72px!important;
min-height:20px!important;
max-height:20px!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
border:1px solid #168447!important;
border-radius:3px!important;
background:#168447!important;
color:#fff!important;
font-family:inherit!important;
font-size:11px!important;
font-weight:400!important;
line-height:20px!important;
white-space:nowrap!important;
overflow:hidden!important;
}
.gal-info-button:hover{
background:#fff!important;
color:#168447!important;
}
.gal-info-button:active{
transform:scale(.94)!important;
background:#0f6f39!important;
color:#fff!important;
}
}
/* =========================================================
   DESACTIVAR HOVER DEL REVERSO EN MÓVIL
   ========================================================= */
@media(max-width:700px){
#galGridContainer .gal-card.gal-card-info:hover .gal-flip-inner{
transform:none!important;
transition:transform .65s ease 0s!important;
}
#galGridContainer .gal-card.gal-card-info.gal-flipped .gal-flip-inner{
transform:rotateY(180deg)!important;
}
}