.elementor-18611 .elementor-element.elementor-element-4f57b03:not(.elementor-motion-effects-element-type-background), .elementor-18611 .elementor-element.elementor-element-4f57b03 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://serpentia.com.co/wp-content/uploads/2025/10/Masajes.png");background-position:center center;background-size:cover;}.elementor-18611 .elementor-element.elementor-element-4f57b03 > .elementor-container{min-height:400px;}.elementor-18611 .elementor-element.elementor-element-4f57b03{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-18611 .elementor-element.elementor-element-4f57b03 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-18611 .elementor-element.elementor-element-d0fe002.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-18611 .elementor-element.elementor-element-d0fe002.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-18611 .elementor-element.elementor-element-d0fe002 > .elementor-element-populated{margin:200px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-18611 .elementor-element.elementor-element-1717d7ec{text-align:center;}.elementor-18611 .elementor-element.elementor-element-1717d7ec .elementor-heading-title{text-shadow:0px 0px 15px rgba(0, 0, 0, 0.8);color:#FFFFFF;}.elementor-18611 .elementor-element.elementor-element-3ec72dcc .elementor-icon-wrapper{text-align:center;}.elementor-18611 .elementor-element.elementor-element-3ec72dcc.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-18611 .elementor-element.elementor-element-3ec72dcc.elementor-view-framed .elementor-icon, .elementor-18611 .elementor-element.elementor-element-3ec72dcc.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-18611 .elementor-element.elementor-element-3ec72dcc.elementor-view-framed .elementor-icon, .elementor-18611 .elementor-element.elementor-element-3ec72dcc.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-18611 .elementor-element.elementor-element-6bb72e8{--divider-border-style:solid;--divider-color:#490E17;--divider-border-width:1px;}.elementor-18611 .elementor-element.elementor-element-6bb72e8 .elementor-divider-separator{width:100%;}.elementor-18611 .elementor-element.elementor-element-6bb72e8 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-18611 .elementor-element.elementor-element-8b66f50{text-align:justify;}.elementor-18611 .elementor-element.elementor-element-dbe1f43{--divider-border-style:solid;--divider-color:var( --e-global-color-astglobalcolor0 );--divider-border-width:1px;}.elementor-18611 .elementor-element.elementor-element-dbe1f43 .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-18611 .elementor-element.elementor-element-dbe1f43 .elementor-divider{text-align:center;padding-block-start:18px;padding-block-end:18px;}.elementor-18611 .elementor-element.elementor-element-eb8f791{width:var( --container-widget-width, 110.272% );max-width:110.272%;--container-widget-width:110.272%;--container-widget-flex-grow:0;}.elementor-18611 .elementor-element.elementor-element-d0e7f08{text-align:justify;}.elementor-18611 .elementor-element.elementor-element-80d7965{text-align:justify;}@media(min-width:1025px){.elementor-18611 .elementor-element.elementor-element-4f57b03:not(.elementor-motion-effects-element-type-background), .elementor-18611 .elementor-element.elementor-element-4f57b03 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-1e6b535 *//* Contenedor principal: Cambiado a un cuadrado (400x400) y hecho circular */
.imagen-hover-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    /* Mantenemos el ancho para responsividad */
    max-width: 400px; 
    
    /* CAMBIO CLAVE 1: HACER EL CONTENEDOR CUADRADO */
    height: 400px; /* <--- Altura ajustada a 400px para formar un cuadrado */
    
    /* CAMBIO CLAVE 2: CREAR LA FORMA CIRCULAR */
    border-radius: 50%; /* <--- Convierte el cuadrado en un círculo */
}

/* Estilos de la imagen */
.imagen-hover-container img {
    display: block;
    width: 100%;
    /* La imagen toma la altura del contenedor (400px) */
    height: 100%; 
    
    /* Asegura que la imagen se recorte para llenar el espacio sin deformarse */
    object-fit: cover;
    
    /* La imagen también debe ser circular para coincidir con el contenedor */
    border-radius: 50%; 
    
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- ESTILOS DEL OVERLAY --- */
/* El elemento que contendrá el texto de superposición */
.texto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* ¡IMPORTANTE! El overlay también debe ser circular */
    border-radius: 50%; 
    
    /* Estilos del texto y fondo */
    background-color: rgba(0, 0, 0, 0.75); 
    color: white; 
    padding: 20px;
    
    /* Para centrar el texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Control de la visibilidad y transición */
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* El resto de tu código (hover y h2) no necesita cambios */
.texto-overlay h2 {
    color: #FFD700;
    margin-top: 0; 
    margin-bottom: 10px; 
}

.imagen-hover-container:hover .texto-overlay {
    opacity: 1; 
}

.imagen-hover-container:hover img {
    transform: scale(1.05); 
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-eb8f791 *//* Contenedor principal para centrar el carrusel */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f3f4f6;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* 1. Contenedor del Carrusel (Define el área visible y el tamaño del círculo) */
.carousel-container {
    /* TAMAÑO CLAVE: Cuadrado de 350x350px para crear el círculo */
    width: 350px; 
    height: 350px; 
    overflow: hidden; /* Oculta las imágenes que no están en la vista */
    border-radius: 50%; /* CONVIERTE EL CONTENEDOR EN UN CÍRCULO */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* 2. Envoltorio interno que contiene todas las fotos */
.carousel-wrapper {
    display: flex;
    width: 500%; /* 5 imágenes * 100% */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Animación de desplazamiento suave */
}

/* 3. Estilos de cada "Slide" (Cada foto) */
.carousel-slide {
    width: 20%; 
    height: 100%;
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    overflow: hidden; /* Asegura que la imagen no desborde el slide */
}

/* 4. Estilos de las imágenes dentro de los slides */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el círculo */
    /* No necesitamos border-radius aquí porque el contenedor ya es circular */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7f7bc8e *//* Contenedor principal: Cambiado a un cuadrado (400x400) y hecho circular */
.imagen-hover-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    /* Mantenemos el ancho para responsividad */
    max-width: 400px; 
    
    /* CAMBIO CLAVE 1: HACER EL CONTENEDOR CUADRADO */
    height: 400px; /* <--- Altura ajustada a 400px para formar un cuadrado */
    
    /* CAMBIO CLAVE 2: CREAR LA FORMA CIRCULAR */
    border-radius: 50%; /* <--- Convierte el cuadrado en un círculo */
}

/* Estilos de la imagen */
.imagen-hover-container img {
    display: block;
    width: 100%;
    /* La imagen toma la altura del contenedor (400px) */
    height: 100%; 
    
    /* Asegura que la imagen se recorte para llenar el espacio sin deformarse */
    object-fit: cover;
    
    /* La imagen también debe ser circular para coincidir con el contenedor */
    border-radius: 50%; 
    
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- ESTILOS DEL OVERLAY --- */
/* El elemento que contendrá el texto de superposición */
.texto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* ¡IMPORTANTE! El overlay también debe ser circular */
    border-radius: 50%; 
    
    /* Estilos del texto y fondo */
    background-color: rgba(0, 0, 0, 0.75); 
    color: white; 
    padding: 20px;
    
    /* Para centrar el texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Control de la visibilidad y transición */
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* El resto de tu código (hover y h2) no necesita cambios */
.texto-overlay h2 {
    color: #FFD700;
    margin-top: 0; 
    margin-bottom: 10px; 
}

.imagen-hover-container:hover .texto-overlay {
    opacity: 1; 
}

.imagen-hover-container:hover img {
    transform: scale(1.05); 
}/* End custom CSS */