.elementor-416 .elementor-element.elementor-element-553997d0{--display:flex;}.elementor-416 .elementor-element.elementor-element-2cc9c295:hover{background-color:#231616;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-2cc9c295 *//* ===================================================
   TARJETA DE PERFIL (NOTORIAMENTE MÁS ANCHA)
   =================================================== */

/* 1. AMPLIAR LA TARJETA BLANCA A LO ANCHO DE VERDAD */
.elementor-416 .elementor-element.elementor-element-2cc9c295 {
    background-color: #ffffff !important;
    padding: 40px 60px !important; /* Mucho más espacio libre a los lados */
    border-radius: 14px !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06) !important;
    border: 1px solid #EAEAE2 !important;
    max-width: 650px !important; /* Subido a 650px para que el cambio sea muy notable */
    margin: 40px auto !important;
    text-align: center !important;
    display: block !important;
}

/* 2. CENTRAR EL AVATAR REDONDO */
.elementor-416 .elementor-element.elementor-element-2cc9c295 img {
    border-radius: 50% !important;
    width: 100px !important; /* Un pelín más grande para ir acorde a la tarjeta */
    height: 100px !important;
    object-fit: cover !important;
    border: 3px solid #FAFBF7 !important;
    display: block !important;
    margin: 0 auto 15px auto !important;
    float: none !important;
}

/* Nombre de usuario ("admin") */
.elementor-416 .elementor-element.elementor-element-2cc9c295 div, 
.elementor-416 .elementor-element.elementor-element-2cc9c295 span {
    text-align: center !important;
}

/* 3. MANTENER LA LISTA LIMPIA SIN PUNTOS */
.elementor-416 .elementor-element.elementor-element-2cc9c295 ul,
.elementor-416 .elementor-element.elementor-element-2cc9c295 li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* 4. ENLACES COMO BOTONES ANCHOS */
.elementor-416 .elementor-element.elementor-element-2cc9c295 ul li a,
.elementor-416 .elementor-element.elementor-element-2cc9c295 a {
    display: block !important;
    padding: 15px 20px !important; /* Más estirados e imponentes */
    color: #524F23 !important; /* Tu verde oliva */
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-bottom: 1px solid #FAFBF7 !important;
    transition: all 0.2s ease !important;
    float: none !important;
}

/* Quitar la línea inferior al último elemento ("Salir") */
.elementor-416 .elementor-element.elementor-element-2cc9c295 ul li:last-child a,
.elementor-416 .elementor-element.elementor-element-2cc9c295 a:last-child {
    border-bottom: none !important;
}

/* 5. EL EFECTO HOVER QUE FLOTA */
.elementor-416 .elementor-element.elementor-element-2cc9c295 ul li a:hover,
.elementor-416 .elementor-element.elementor-element-2cc9c295 a:hover {
    background-color: #FAFBF7 !important;
    color: #3d3b1a !important;
    border-radius: 8px !important;
    transform: translateY(-3px) !important; /* Flota un milímetro más */
    box-shadow: 0 6px 15px rgba(82, 79, 35, 0.1) !important;
}/* End custom CSS */