/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 28 2025 | 15:47:46 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.hidden{ display: none !important; }

.dark-yellow{ color: #a58a39; }
.dark-green{ color: #183f20; }
.dark-brown{ color: #633633 !important; }
.textcolor-darkgray{ color: #363339 !important; }

.font-bodoni{ font-family: "Bodoni Moda", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

/* Amenidades */
ul#amenidades-gallery,
ul#amenidades-list{ list-style: none; padding: 0; margin: 0; }
ul#amenidades-list li{ list-style: none; display: block;  }
ul#amenidades-list li a { display: block; padding: 15px 50px 15px 20px; padding-left: 45px; text-decoration: none; position: relative; transition: border-left-width 0.3s ease-in-out; }
/*
#amenidades-list li:nth-child(1) a { border-left: 30px solid #4C372B; } 
#amenidades-list li:nth-child(1) a:hover, #amenidades-list li:nth-child(1) a:focus, #amenidades-list li:nth-child(1) a:active
{ border-left: 60px solid #4C372B; } */
#amenidades-list li:nth-child(1) a {
    border-left: 30px solid #633633; 
}

#amenidades-list li:nth-child(2) a {
    border-left: 30px solid #B7986C; 
}

#amenidades-list li:nth-child(3) a {
    border-left: 30px solid #633633; 
}

#amenidades-list li:nth-child(4) a {
    border-left: 30px solid #E5843D; 
}

/* Estilo al hacer hover para el primer elemento */
#amenidades-list li a:hover,
#amenidades-list li a:active,
#amenidades-list li a:focus,
#amenidades-list li a.active{
    border-left-width: 60px; 
}

/* Estilos generales para los enlaces */
#amenidades-list li a {
    display: flex; /* Usamos flexbox para alinear el contenido y el SVG */
    align-items: center; /* Centra verticalmente el contenido y el SVG */
    justify-content-content: space-between; /* Distribuye el espacio entre el contenido y el SVG */
    padding: 15px 40px 15px 20px;
    text-decoration: none;
    position: relative; /* Necesario para posicionar el pseudo-elemento si se quisiera absoluto */
    overflow: hidden; /* Importante para que el SVG no se salga si es demasiado grande o si el borde crece */
    transition: border-left-width 0.3s ease-in-out;
    color: inherit; /* Asegura que el color del texto sea el de su padre o global */
}

/* Pseudo-elemento ::after para insertar el SVG */
#amenidades-list li a::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 404.57 197.8'%3E%3Cpath d='M318.5,101.36H0v-16h318.5L246.96,13.41c-6.16-7.33,1.65-16.94,10.09-12.1l85.97,85.03c4.1,5.47,4.11,8.56,0,14.05l-85.97,85.02c-8.22,4.26-15.21-4.15-10.58-11.58l72.03-72.47Z'/%3E%3C/svg%3E");
    display: block; /* Asegura que ocupe su propio espacio */
    width: 20px; /* Ancho del SVG. Ajusta a tu gusto */
    height: 20px; /* Alto del SVG. Ajusta a tu gusto */
    flex-shrink: 0; /* Evita que el SVG se encoja si no hay espacio */
    opacity: 0.7; /* Hazlo un poco transparente si quieres */
    transition: opacity 0.3s ease-in-out; /* Transición para la opacidad si cambia en hover */
	position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -10px;
    scale: 1.8;
}

#amenidades-list li a:hover::after {
    opacity: 1; /* El SVG se vuelve completamente visible al hover */
    /* Puedes cambiar el color del SVG al hover si lo codificas para permitirlo,
       pero para este SVG específico sin 'fill' definido, puede ser complejo
       directamente aquí. Usar un SVG más adaptable sería mejor para esto. */
}

#amenidades-list li a > div {
    /* Puedes añadir estilos aquí si necesitas que los div se comporten de cierta manera
       dentro del flexbox, por ejemplo, que crezcan para ocupar el espacio */
    flex-grow: 1; /* Permite que el título y la descripción ocupen el espacio restante */
}

/* Modelos */
ul#modelos-list{ list-style: none; }
ul#modelos-list li{ list-style: none; display: inline-block; }
ul#modelos-list li a{ display: block; padding: 20px 30px; }  

#elementor-popup-modal-121 .dialog-widget-content {
	background-color: var( --e-global-color-primary );
}