/* =========================================================
   UM - Tarjeta de Directorio estilo 
   Autor: Mauro Lopez Rodriguez
   Paleta: #0A1828 (azul), #178582 (verde)
   ========================================================= */


/* Elimina todos los radios de la imagen y el enlace */
.um-directory .um-members-wrapper .um-members.um-members-grid 
.um-member .um-member-photo a,
.um-directory .um-members-wrapper .um-members.um-members-grid 
.um-member .um-member-photo img,
.um-directory .um-members-wrapper .um-members.um-members-grid 
.um-member .um-member-photo.radius-1 a,
.um-directory .um-members-wrapper .um-members.um-members-grid 
.um-member .um-member-photo.radius-1 img,
.um-member .um-member-photo img.gravatar {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  clip-path: none !important;
  shape-outside: none !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0px solid #fff !important;
}

/* Si UM intenta volver a aplicar 999px, sobreescribimos */
.um-directory .um-members-wrapper .um-members img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  clip-path: none !important;
}

/* Limpieza visual adicional */
.um-member .um-member-photo {
  border: none !important;
  box-shadow: none !important;
}	

/* Elimina padding del contenedor general */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo {
  padding: 0 !important;
  text-align: initial !important;
}

/* Corrige el contenedor de la foto */
.um-member .um-member-photo {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 0 !important; /* sin redondeo */
  height: auto !important; /* sin altura forzada */
}

/* Anula cualquier borde redondeado heredado de Ultimate Member */
.um-member .um-member-photo.radius-1,
.um-member .um-member-photo a,
.um-member .um-member-photo img,
.um-member .um-member-photo .gravatar,
.um-member .um-member-photo img.gravatar {
  border-radius: 0 !important;
  clip-path: none !important;
  shape-outside: none !important;
}

/* Imagen rectangular a ancho completo */
.um-member .um-member-photo img,
.um-member .um-member-photo a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tarjeta sin interferencias visuales */
.um-member .um-member-card {
  --um-card-pad: 24px;
  padding: var(--um-card-pad);
  border-radius: 0; /* elimina cualquier redondeo */
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* ====== Fila de “botones” sociales debajo de la foto ====== */

/* Los “tagline” sociales en línea como chips */
.um-member .um-member-card 
  .um-member-tagline-linkedin,
.um-member .um-member-card 
  .um-member-tagline-instagram,
.um-member .um-member-card 
  .um-member-tagline-youtube,
.um-member .um-member-card 
  .um-member-tagline-telegram,
.um-member .um-member-card 
  .um-member-tagline-tiktok{
  display: inline-flex;              
  margin: 10px 8px 0;               
}

/* El enlace se convierte en un botón circular */
.um-member .um-member-card 
  .um-member-tagline-linkedin a,
.um-member .um-member-card 
  .um-member-tagline-instagram a,
.um-member .um-member-card 
  .um-member-tagline-youtube a,
.um-member .um-member-card 
  .um-member-tagline-telegram a,
.um-member .um-member-card 
  .um-member-tagline-tiktok a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0a1828;              
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  overflow: hidden;
  /* ocultar el texto del enlace (Mostramos solo el icono) */
  font-size: 0;                     
}

/* 3) Efectos */
.um-member .um-member-card 
  .um-member-tagline-linkedin a:hover,
.um-member .um-member-card 
  .um-member-tagline-instagram a:hover,
.um-member .um-member-card 
  .um-member-tagline-youtube a:hover,
.um-member .um-member-card 
  .um-member-tagline-telegram a:hover,
.um-member .um-member-card 
  .um-member-tagline-tiktok a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  background: #0a1828;             
}

/* 4) Insertamos el logotipo con Font Awesome Brands */
.um-member .um-member-card 
  .um-member-tagline-linkedin a::before,
.um-member .um-member-card 
  .um-member-tagline-instagram a::before,
.um-member .um-member-card 
  .um-member-tagline-youtube a::before,
.um-member .um-member-card 
  .um-member-tagline-telegram a::before,
.um-member .um-member-card 
  .um-member-tagline-tiktok a::before{
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  content: "";
}

/* Códigos de cada marca (FA6 Brands) */
.um-member .um-member-card .um-member-tagline-linkedin a::before { content: "\f0e1"; }  /* LinkedIn  */
.um-member .um-member-card .um-member-tagline-instagram a::before { content: "\f16d"; } /* Instagram */
.um-member .um-member-card .um-member-tagline-youtube a::before { content: "\f167"; }   /* YouTube   */
.um-member .um-member-card .um-member-tagline-telegram a::before { content: "\f2c6"; }  /* Telegram  */
.um-member .um-member-card .um-member-tagline-tiktok a::before { content: "\e07b"; }    /* TikTok    */

/* 5) Asegura que se centren bajo el nombre/CTA */
.um-member .um-member-name,
.um-member .um-member-card .um-member-tagline{
  text-align: center;
}

.um-directory .um-members-wrapper .um-members.um-members-grid 
.um-member .um-member-card .um-member-tagline {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Contenedor y posición bajo la cabecera */
.um-profile .um-profile-header { position: relative; }

.lte-profile-social{
  position: absolute;
  left: 24px;
  bottom: -22px;      /* sobresale un poco bajo la foto */
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 5;
}

/* Botones circulares rojos con icono blanco */
.lte-profile-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #E74C3C;            /* rojo de tu demo */
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
  text-decoration: none;
  font-size: 16px;
}

.lte-profile-social a:hover{
  background: #0a1828;            
  transform: translateY(-1px);
}

/* Responsive: si la cabecera es estrecha, los meto dentro */
@media (max-width: 600px){
  .lte-profile-social{
    left: 16px;
    bottom: -18px;
  }
}

/************************************************************
  UM – Tarjeta refinada (borde global + hover + alineado)
  Paleta: #0A1828 (azul) · #178582 (verde)
*************************************************************/

:root {
  --um-blue:   #0A1828;
  --um-green:  #178582;
  --um-text:   #344054;
  --um-border: #d9dee8;
  --um-radius: 18px;
  --um-pad:    26px;
}

/* ========= Contenedor GLOBAL de la tarjeta ========= */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member{
  border: 2px solid var(--um-border) !important;
  border-radius: var(--um-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:hover{
  border-color: var(--um-green) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

/* ========= Imagen superior (hereda el radio) ========= */
.um-member .um-member-photo,
.um-member .um-member-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  border-radius: var(--um-radius) var(--um-radius) 0 0 !important;
}

/* ========= Bloque interno de información ========= */
.um-member .um-member-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start !important; /* todo a la izquierda */
  gap:14px;                           /* separación vertical */
  padding: var(--um-pad) !important;
  text-align:left !important;
  background: transparent !important;
}

/* ========= Nombre ========= */
.um-member .um-member-name{
  display:block !important;
  width:100% !important;
  margin:0 0 6px 0 !important;
  font: 700 18px/1.4 inherit !important;
  color: var(--um-blue) !important;
  text-align:left !important;
}

/* ========= Botón editar ========= */
.um-member .um-members-edit-btn{
  align-self:flex-start !important;
  margin:0 0 4px 0 !important;
}

/* ========= Descripción ========= */
.um-member .um-member-tagline-description{
  display:block !important;
  width:100% !important;
  margin:0 0 8px 0 !important;
  color: var(--um-text) !important;
  line-height:1.7 !important;
  text-align:left !important;
}

/* ========= Sector (company_sector) con icono ========= */
.um-member .um-member-card .um-member-tagline-company_sector{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  justify-content:flex-start !important;
  margin:4px 0 10px 0 !important;
  font-weight:600 !important;
  color: var(--um-blue) !important;
  text-align:left !important;
}
.um-member .um-member-card .um-member-tagline-company_sector::before{
  content:"\f0b1"; /* briefcase */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:14px;
  line-height:1;
  color: var(--um-green);
}

/* ========= Blindaje contra centrados del tema/UM ========= */
.um-directory .um-members-wrapper .um-members.um-members-grid
.um-member .um-member-card .um-member-tagline{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding:0 !important;
}

/* ========= Iconos sociales (fila) ========= */
.um-member .um-member-card .um-member-tagline-linkedin,
.um-member .um-member-card .um-member-tagline-instagram,
.um-member .um-member-card .um-member-tagline-youtube,
.um-member .um-member-card .um-member-tagline-telegram,
.um-member .um-member-card .um-member-tagline-tiktok{
  display:inline-flex !important;
  align-items:center !important;
  margin-right:10px !important;
}
.um-member .um-member-card .um-member-tagline-linkedin a,
.um-member .um-member-card .um-member-tagline-instagram a,
.um-member .um-member-card .um-member-tagline-youtube a,
.um-member .um-member-card .um-member-tagline-telegram a,
.um-member .um-member-card .um-member-tagline-tiktok a{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  background: var(--um-blue) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition: background-color .2s ease, transform .15s ease;
}
.um-member .um-member-card .um-member-tagline-linkedin a:hover,
.um-member .um-member-card .um-member-tagline-instagram a:hover,
.um-member .um-member-card .um-member-tagline-youtube a:hover,
.um-member .um-member-card .um-member-tagline-telegram a:hover,
.um-member .um-member-card .um-member-tagline-tiktok a:hover{
  background: var(--um-green) !important;
  transform: translateY(-2px);
}

/* ===== Forzar que el card NO sea flex (para que los iconos puedan ir en fila) ===== */
.um-member .um-member-card{
  display: block !important;           
  padding: var(--um-pad) !important;
  text-align: left !important;
}

/* Espaciados entre bloques del contenido (en vez de gap de flex) */
.um-member .um-member-name{ margin: 0 0 0px 0 !important; }
.um-member .um-members-edit-btn{ margin: 0 0 0px 0 !important; }
.um-member .um-member-tagline-description{ margin: 0 0 0px 0 !important; }
.um-member .um-member-tagline-company_sector{ margin: 6px 0 20px 0 !important; }

/* ===== Iconos sociales en FILA ===== */
/* Cada línea social se convierte en un “chip” en línea */
.um-member .um-member-card .um-member-tagline-linkedin,
.um-member .um-member-card .um-member-tagline-instagram,
.um-member .um-member-card .um-member-tagline-youtube,
.um-member .um-member-card .um-member-tagline-telegram,
.um-member .um-member-card .um-member-tagline-tiktok{
  display: inline-flex !important;     
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 10px 0 0 !important;       
}

/* Botón/icono circular: tamaño y centrado */
.um-member .um-member-card .um-member-tagline-linkedin a,
.um-member .um-member-card .um-member-tagline-instagram a,
.um-member .um-member-card .um-member-tagline-youtube a,
.um-member .um-member-card .um-member-tagline-telegram a,
.um-member .um-member-card .um-member-tagline-tiktok a{
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--um-blue) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .2s ease, transform .15s ease;
}
.um-member .um-member-card .um-member-tagline-linkedin a:hover,
.um-member .um-member-card .um-member-tagline-instagram a:hover,
.um-member .um-member-card .um-member-tagline-youtube a:hover,
.um-member .um-member-card .um-member-tagline-telegram a:hover,
.um-member .um-member-card .um-member-tagline-tiktok a:hover{
  background: var(--um-green) !important;
  transform: translateY(-2px);
}

/* ========= Contenedor GLOBAL de la tarjeta con sombra suave ========= */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
  border: 2px solid var(--um-border) !important;
  border-radius: var(--um-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(10, 24, 40, 0.06), 0 2px 4px rgba(10, 24, 40, 0.04) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:hover {
  border-color: var(--um-green) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(10, 24, 40, 0.12), 0 4px 12px rgba(10, 24, 40, 0.08) !important;
}

/* === Ajustes de espaciado en tarjetas de miembros === */
.um-member-card {
  padding: 18px 20px 24px 20px !important; /* espacio interno general */
}

/* Espaciado vertical entre los textos */
.um-member-name,
.um-member-tagline-company_sector,
.um-member-tagline-description {
  margin-bottom: 10px !important; /* separa entre líneas */
  line-height: 1.4;
}

/* Ajuste fino para el nombre (destacado) */
.um-member-name {
  margin-top: 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0A1828 !important; /* azul corporativo */
}

/* Sector (ej. Artes y cultura) */
.um-member-tagline-company_sector {
  color: #178582 !important; /* verde corporativo */
  font-weight: 500;
}

/* Descripción (ej. Hola soy Mauro) */
.um-member-tagline-description {
  color: #0A1828 !important;
  font-size: 15px !important;
  margin-bottom: 0 !important; /* sin margen extra al final */
}

/* === ESPACIADO en tarjetas del directorio (sin tocar redes) === */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card{
  padding: 20px 22px 24px 22px !important; /* padding interno del bloque */
}

/* Margen entre: nombre, sector y descripción */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name,
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline-company_sector,
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline-description{
  margin: 8px 0 10px 0 !important;   /* separa verticalmente */
  line-height: 1.45 !important;
}

/* Nombre destacado */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name{
  margin-top: 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0A1828 !important;
}

/* Sector (píldora / etiqueta) */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline-company_sector{
  color: #178582 !important;
  font-weight: 600 !important;
}

/* Descripción */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline-description{
  color: #0A1828 !important;
  font-size: 15px !important;
  margin-bottom: 0 !important;       /* sin extra al final */
}

/* === Margen inferior extra en la descripción del miembro === */
.um-directory .um-member .um-member-card .um-member-tagline-description {
  margin-bottom: 18px !important; /* separa la descripción del bloque de redes */
  line-height: 1.6 !important;
}

/* Espacio bajo la descripción dentro de la tarjeta del directorio */
.um-directory .um-members-wrapper .um-members.um-members-grid
.um-member .um-member-card
.um-member-tagline.um-member-tagline-description{
  margin-bottom: 16px !important;   /* separación con los iconos sociales */
  padding-bottom: 2px !important;   /* evita colapso de márgenes */
  line-height: 1.6 !important;
}

/* (Opcional) un poco de aire arriba del sector también */
.um-directory .um-members-wrapper .um-members.um-members-grid
.um-member .um-member-card
.um-member-tagline.um-member-tagline-company_sector{
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

/* === Tarjetas del directorio: mismas dimensiones === */

/* 6) Bio: limitar a 4 líneas con puntos suspensivos */
.um-directory .um-member .um-member-tagline-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;    /* <-- número de líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: calc(1em * 1.5 * 4);    /* reserva espacio para 4 líneas */
}

/* === ADAPTACIÓN CUANDO FALTAN CAMPOS === */

/* Bio: 4 líneas + reserva exacta para que todas alineen el bloque inferior */
.um-directory .um-member .um-member-tagline-description{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  min-height: calc(1em * 1.5 * 4);
}

/* Que el contenido se distribuya verticalmente */
.um-directory .um-member .um-member-card{
  display:flex;
  flex-direction:column;
}

/* Empuja el bloque de redes/botón hacia abajo (sin hueco extra) */
.um-directory .um-member .um-member-social,
.um-directory .um-member .um-member-connect{
  margin-top:auto;
  padding-bottom: 14px; /* toque visual */
}

/* (opcional) si una sección viene vacía */
.um-directory .um-member .um-member-social:empty,
.um-directory .um-member .um-member-tagline:empty,
.um-directory .um-member .um-member-tagline-description:empty{
  display:none !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline-description {
    font-size: 17px !important;
	color: #0a1828 !important;
	
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name a {
    font-size: 20px !important;
    color: #0a1828 !important;
}

.um-member .um-member-card .um-member-tagline-linkedin a:hover,
.um-member .um-member-card .um-member-tagline-instagram a:hover,
.um-member .um-member-card .um-member-tagline-youtube a:hover,
.um-member .um-member-card .um-member-tagline-telegram a:hover,
.um-member .um-member-card .um-member-tagline-tiktok a:hover{
  background: var(--um-blue) !important;   /* azul corporativo en hover */
  transform: translateY(-2px);
}

/* === TIPOGRAFÍAS EN TARJETAS DE DIRECTORIO === */

/* Nombre del miembro: Montserrat */
.um-member .um-member-name,
.um-directory .um-members-wrapper .um-members.um-members-grid
  .um-member .um-member-card .um-member-name a{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0A1828 !important; /* azul corporativo */
}

/* Textos generales (sector, descripción, tagline): Open Sans */
.um-member .um-member-tagline,
.um-member .um-member-tagline-description,
.um-member .um-member-tagline-company_sector,
.um-directory .um-members-wrapper .um-members.um-members-grid
  .um-member .um-member-card .um-member-tagline-description{
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #0A1828 !important;
}

/* Sector destacado (verde) */
.um-directory .um-members-wrapper .um-members.um-members-grid
  .um-member .um-member-card .um-member-tagline-company_sector{
  color: #178582 !important;
  font-weight: 600 !important;
}

/* === Hover sin borde verde (transparente) === */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:hover {
  border-color: transparent !important;  /* elimina el borde verde */
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(10, 24, 40, 0.12),
              0 4px 12px rgba(10, 24, 40, 0.08) !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:hover {
  border-color: transparent !important;
  background-color: rgba(255, 255, 255, 0.9) !important; /* opcional */
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(10, 24, 40, 0.12),
              0 4px 12px rgba(10, 24, 40, 0.08) !important;
}