.elementor-14550 .elementor-element.elementor-element-d236127{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;}.elementor-14550 .elementor-element.elementor-element-43d5e76{background-color:#300131;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-14550 .elementor-element.elementor-element-d236127{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-43d5e76 *//* Estilos generales */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #300131; /* Fondo oscuro */
            color: #ffffff; /* Texto claro */
            text-align: center; /* Centrado horizontal general */
        }
        .container {
            max-width: 400px;
            margin: 0 auto; /* Centrado horizontal del contenedor */
            padding: 20px;
        }

        /* Logo redondeado */
        .logo img {
            width: 120px; /* Tamaño proporcionado */
            height: 120px;
            border-radius: 50%; /* Redondeado */
            margin: 0 auto 20px; /* Centrado horizontal y margen inferior */
            border: 3px solid #ffffff; /* Borde blanco */
            display: block; /* Asegura que el logo esté centrado */
        }

        /* Frase motivadora */
        .motivational-text {
            font-size: 18px;
            margin-bottom: 40px; /* Mayor separación con los botones */
            display: flex;
            align-items: center;
            justify-content: center; /* Centrado horizontal */
        }
        .motivational-text span {
            margin-right: 10px;
        }

        /* Iconos de redes sociales */
        .social-icons {
            margin-bottom: 30px;
        }
        .social-icons a {
            display: inline-block;
            margin: 0 10px;
            text-decoration: none;
        }
        .social-icons img {
            width: 32px;
            height: 32px;
            transition: transform 0.3s ease; /* Efecto de zoom */
        }
        .social-icons img:hover {
            transform: scale(1.2); /* Efecto de agrandamiento al pasar el ratón */
        }
/* Asegura que los botones estén centrados horizontalmente */

.link-button::before {
    content: "";
    display: inline-block;
    width: 30px; /* mismo ancho del ícono */
}

/* Botones */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los botones horizontalmente */
    margin-top: 20px; /* Margen superior para separar del contenido anterior */
}

/* Estilo general de los botones */
.link-button {
    position: relative;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal del texto */
    width: 150%; /* Ancho completo del contenedor */
    padding: 15px 60px 15px 20px; /* Espacio interno, incluyendo espacio para los tres puntos */
    margin: 10px 0; /* Margen entre botones */
    background-color: #ffffff; /* Fondo blanco */
    color: #69585c; /* Texto morado */
    text-decoration: none; /* Sin subrayado */
    border-radius: 50px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    transition: all 0.3s ease; /* Transición suave para efectos hover */
    border: 2px solid transparent; /* Borde invisible inicialmente */
    text-align: center; /* Asegura que el texto esté centrado */
}

/* Hover para los botones */
.link-button:hover {
    background-color: #300131; /* Color oscuro como el fondo de la página */
    color: #ffffff; /* Texto blanco */
    border: 2px solid #ffffff; /* Contorno blanco */
}

/* Ícono de compartir */
.share-icon {
    position: absolute;
    top: 50%;
    right: 10px; /* Posición ajustada para evitar solapamientos */
    transform: translateY(-50%);
    cursor: pointer;
    background: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    padding: 0; /* Sin relleno */
    transition: all 0.3s ease;
}

/* SVG del ícono de los tres puntos */
.share-icon svg {
    width: 16px; /* Tamaño intermedio */
    height: 16px;
    fill: #69585c; /* Color del ícono */
    transition: fill 0.3s ease; /* Transición suave para el cambio de color */
}

/* Cambio de color del ícono al pasar el ratón */
.share-icon:hover svg {
    fill: #ffffff; /* Cambia el color de los puntos a blanco */
}

/* Área circular alrededor de los tres puntos */
.share-icon:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px; /* Diámetro del círculo */
    height: 24px; /* Diámetro del círculo */
    background-color: rgba(255, 255, 255, 0.2); /* Color más claro que el fondo */
    border-radius: 50%; /* Forma circular */
    opacity: 0.8; /* Hacerlo menos intrusivo */
}

        /* Menú emergente de compartir */
        .share-menu {
            position: absolute;
            right: 0;
            background-color: #300131; /* Fondo oscuro */
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: none;
            z-index: 10;
            min-width: 200px;
        }
        .share-menu.active {
            display: block;
        }
        .share-menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .share-menu li {
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: #ffffff; /* Texto blanco */
        }
        .share-menu li:hover {
            background-color: #69585c; /* Color morado en hover */
        }

        /* Posicionamiento dinámico del menú */
        .share-menu.top {
            bottom: 100%; /* Menú arriba del botón */
            top: auto;
        }
        
        /* Estilo para la sección de información de contacto */
/* Estilo para la sección de información de contacto */
.contact-info {
    margin-top: 100px; /* Espacio superior para separar del contenido anterior */
    text-align: center; /* Centrado horizontal */
    font-size: 14px; /* Tamaño de fuente adecuado */
    color: #ffffff; /* Texto blanco */
    line-height: 0.4; /* Espacio más compacto entre líneas */
}

.contact-info a {
    color: #ffffff; /* Enlaces en blanco */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.contact-info a:hover {
    color: #cccccc; /* Cambio de color al pasar el ratón */
}/* End custom CSS */