/* ================================
   MIEMBROS.CSS
   Se carga junto a principal.css
   (reutiliza .lb-section, .lb-section--light/--dark, .lb-btn de ahí)
================================ */

:root {
  --lb-black:   #000000;
  --lb-white:   #ffffff;
  --lb-dark:    #565656;
  --lb-medium:  #848484;
  --lb-light:   #B3B3B3;
  --lb-lighter: #E0E0E0;
  --lb-magenta: #BB1755;
}
header,
.cabecera,
.lb-cabecera,
nav {
  position: relative;
  z-index: 9999;
}
.lb-perfil-portada {
  position: relative;
  z-index: 1;
}
/* ================================
   PERFIL DE MIEMBRO — PORTADA
   fondo negro, imagen centrada chica
================================ */

.lb-perfil-portada {
  position: relative;
  background: var(--lb-black);
  width: 100%;
  overflow: hidden;
}

.lb-perfil-portada img {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: auto;
  display: block;
}

/* ================================
   PERFIL DE MIEMBRO — BIOGRAFÍA
   fondo blanco, logo izq / bio der
================================ */

.lb-perfil-bio {
  background: var(--lb-white);
  color: var(--lb-black);
  padding: var(--space-block) 8%;
}

.lb-perfil-bio-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}

.lb-perfil-logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--lb-medium);
}

.lb-perfil-nombre {
  font-size: 28px;
  font-weight: 900;
  margin-top: 16px;
  text-align: center;
}

.lb-perfil-bio-texto p {
  font-size: 18px;
  text-align: left;
  max-width: none;
  margin: 0;
}

.lb-perfil-especialidades {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-element);
}

.lb-perfil-especialidad {
  border: 1px solid var(--lb-black);
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
}

.lb-perfil-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-element);
}

.lb-perfil-etiqueta {
  font-size: 13px;
  color: var(--lb-medium);
  font-weight: 600;
}

/* ================================
   PERFIL DE MIEMBRO — CONTACTO
   fondo negro: redes / web / tel / mapa
================================ */

.lb-perfil-contacto {
  background: var(--lb-black);
  color: var(--lb-white);
  padding: var(--space-block) 8%;
}

.lb-perfil-contacto-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
}

.lb-perfil-contacto h3 {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.lb-perfil-redes-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.lb-perfil-pill {
  display: inline-block;
  text-align: center;
  padding: 16px 24px;
  background: var(--lb-dark);
  color: var(--lb-white);
  font-weight: 700;
  transition: var(--lb-transition);
}

.lb-perfil-pill:hover {
  background: var(--lb-magenta);
  color: var(--lb-medium);
}

/* fila de 2 columnas: botón whatsapp / botón mail, debajo de la biografía */
.lb-perfil-acciones {
  margin-top: var(--space-element);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lb-perfil-acciones .lb-perfil-pill {
  width: 100%;
}

.lb-perfil-web-tel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.lb-perfil-web-tel > div {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lb-perfil-web-tel h4 {
  font-size: 20px;
  font-weight: 700;
}

.lb-perfil-divider {
  height: 2px;
  background: var(--lb-medium);
  width: 60%;
  margin: 0 auto;
}

.lb-perfil-ubicacion-texto {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  align-items: center;
}

.lb-perfil-ubicacion-texto p {
  font-size: 18px;
}

.lb-perfil-mapa {
  color: var(--lb-magenta);
  font-weight: 700;
  text-transform: uppercase;
}

.lb-perfil-mapa:hover {
  color: var(--lb-lighter);
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 768px) {

  .lb-perfil-bio-inner {
    grid-template-columns: 1fr;
  }

  .lb-perfil-acciones {
    grid-template-columns: 1fr;
  }
}