/* ============================================================================
   BASE: Variables de color y utilidades
   ============================================================================ */
:root{
  /* Dorado (por si lo usas en otros módulos) */
  --gold-1: #C9A227;
  --gold-2: #E9C766;
  --gold-3: #8B6B18;

  /* Plateados para efectos metálicos */
  --silver-a:#F5F7FA; /* alto brillo */
  --silver-b:#E1E5EA; /* claro */
  --silver-c:#C7CCD1; /* medio */
  --silver-d:#A8AFB5; /* sombra */
}

/* Utilidad para ocultar (preferida para transiciones/control por JS) */
.hidden { display: none !important; }

/* ============================================================================
   SECCIÓN "Nuestro Equipo" — contenedor blanco y encabezados
   ============================================================================ */
/* Contenedor blanco del bloque */
.cards-section{
  background:#fff;
  padding:80px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Encabezado centrado */
.cards-header{ text-align:center; margin-bottom:36px; }

/* Título principal */
.cards-title{
  font:800 2rem/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#111; margin:0 0 8px;
}

/* Subtítulo */
.cards-subtitle{
  font:400 1rem/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#444; margin:0;
}

/* ============================================================================
   FILA DE CARDS (grid responsivo flexible)
   ============================================================================ */
.cards-container{
  display:flex;
  justify-content:space-around;
  align-items:center;
  width:100%;
  max-width:1280px;
  gap:2rem;
  flex-wrap:wrap;
}

/* Marco interior de cada card (aparece borde en hover) */
.profile-border{
  height:369px;
  width:290px;
  background:transparent;
  border-radius:10px;
  transition:border .6s ease;
  position:relative;
  z-index:3;
}
.profile-border:hover{ border:1px solid #e5e5e5; }

/* ============================================================================
   CARD — base visual, sombra y animación
   ============================================================================ */
.profile-card{
  height:379px;
  width:300px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  box-shadow:0 70px 63px -60px rgba(0,0,0,.6);
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.profile-card:hover{ transform:translateY(-6px); }

/* Imagen de fondo (BN por defecto) con pseudo-elemento */
.profile-card::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transform: scale(1.02);
  transform-origin:center;
  filter: grayscale(100%) brightness(.75);   /* BN por defecto */
  transition: transform .7s cubic-bezier(.19,1,.22,1), filter .5s ease;
}
/* En hover: color y leve paneo */
.profile-card:hover::before{
  transform: scale(1.14) translateX(-6%);
  transform-origin:left center;
  filter: grayscale(0) brightness(1);
}

/* Degradado negro que aparece en hover para leer el texto */
.profile-card::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.3), rgba(0,0,0,0));
  opacity:0;
  transition: opacity .35s ease;
}
.profile-card:hover::after{ opacity:1; }

/* Contenido (nombre/bio/acciones) que sube en hover */
.profile-content{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:18px 16px 16px;
  color:#fff; /* blanco sobre degradado negro */
  opacity:0; transform:translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.profile-card:hover .profile-content{ opacity:1; transform:translateY(0); }

/* Nombre en card */
.profile-name{
  margin:0 0 6px;
  font:800 1.5rem/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#fff;
}

/* Bio corta en card */
.profile-bio{
  margin:0 0 12px;
  font:400 .95rem/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#eaeaea;
}

/* Acciones en card (WhatsApp + Más info) */
.profile-actions{
  display:flex;
  gap:.75rem;
  align-items:center;
}

/* Link de acción genérico (ej. WhatsApp) en card */
.profile-actions a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.14);
  color:#fff; text-decoration:none;
  transition: transform .2s ease, background .2s ease;
}
.profile-actions a i{ font-size:16px; line-height:1; }
.profile-actions a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.25); }

/* Botón “Más info” */
.profile-actions .info-btn{
  padding:.4rem .75rem;
  border-radius:.6rem;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff; font-size:.85rem; line-height:1;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.profile-actions .info-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.profile-actions .info-btn:active{
  transform: translateY(1px);
}

/* Sólo ícono de WhatsApp (si lo usas en otro lugar) */
.wa-only{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:#0a0a0a; border:1px solid rgba(255,255,255,.22);
  color:#e8fdf5; transition:all .25s ease;
}
.wa-only i{ font-size:1.2rem; }
.wa-only:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 14px rgba(233,199,102,.28);
}

/* Asignación de imágenes de card por clase (portadas) */
.profile-card0::before{ background-image:url('/images/members/img1.jpg'); }
.profile-card1::before{ background-image:url('/images/members/img4.jpg'); }
.profile-card2::before{ background-image:url('/images/members/img5.jpg'); }

/* ============================================================================
   MODAL — Overlay centrado, modal negro y estructura
   ============================================================================ */
/* Overlay centrado con grid; se muestra/oculta con clase .hidden en el nodo */
.bio-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;             /* centro el modal con grid */
  place-items:center;
  padding:16px;             /* respiro en bordes (mobile) */
}
/* Backdrop oscuro (drama y foco visual) */
.bio-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.9);
}

/* Caja del modal: negro elegante, borde sutil, sombra profunda */
.bio-modal{
  position:relative; z-index:1;
  width:min(520px, 100%);   /* cómodo en mobile */
  max-height:85vh;          /* evita desbordar pantalla */
  overflow:auto;            /* scroll interno si hay mucho contenido */
  background:#000; color:#eee;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
}

/* (Opcional) Marco dorado alrededor si le agregas la clase .gold-frame */
.bio-modal.gold-frame::before{
  content:""; position:absolute; inset:0; border-radius:18px;
  padding:2px;
  background:linear-gradient(135deg,var(--gold-3),var(--gold-1) 35%,var(--gold-2) 60%,var(--gold-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* Topbar/fila propia para la X (evita que choque con la imagen) */
.bio-topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding: 8px 10px 0;      /* arriba y derecha */
}

/* “X” discreta, transparente: sólo icono plateado, hover con luz sutil */
.bio-close{
  background:transparent;
  border:none;
  color:#E1E5EA;            /* plateado suave */
  font-size: 28px;          /* tamaño del glifo × */
  line-height: 1;
  width: 40px; height: 40px;/* área táctil real */
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.bio-close:hover{
  opacity:.9;
  background:rgba(255,255,255,.06); /* halo leve */
}

/* Grid del contenido del modal:
   - Mobile: 1 columna (foto arriba, texto abajo)
   - Desktop: 2 columnas (foto izquierda / texto derecha) */
.bio-grid{
  display:grid;
  grid-template-columns:1fr;   /* mobile */
  gap:0;
}

/* Contenedor de foto: padding + viñeta para fundir con el negro */
.bio-photo-wrap{
  position: relative;
  background:#000;
  padding: 18px 18px 0;        /* margen interno superior/laterales */
  border-radius: 18px 18px 0 0;/* mismos radios que el modal arriba */
  overflow: hidden;            /* recorta la viñeta */
}

/* Imagen responsive, sin bordes duros */
.bio-photo{
  display:block;
  width:100%; height:auto;     /* en mobile */
  object-fit: cover;
  border-radius: 12px;         /* ligero para crear “marco” con el wrap */
}

/* Viñeta doble para fusiones limpias con el negro del modal */
.bio-photo-wrap::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    /* halo perimetral suave (oscurece orillas) */
    radial-gradient(120% 100% at 50% 35%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.45) 75%,
      rgba(0,0,0,.85) 100%
    ),
    /* degradado hacia abajo (funde con base del modal) */
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.85) 100%);
  mix-blend-mode: normal;
}

/* Bloque de texto del modal (biografía y CTA) */
.bio-content{ padding:18px 16px 20px; }
.bio-title{
  font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Open Sans", Arial, sans-serif;
  font-weight: 800;                  /* presencia sin ser pesado */
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);  /* más pequeño que antes */
  line-height: 1.25;
  letter-spacing: 0.2px;             /* micro tracking para legibilidad */
  margin: 0 0 .35rem;
  color:#fff;
}

/* Línea decorativa (look metálico) */
.bio-sep{
  display:block; width:120px; height:2px; margin:.5rem 0 1rem;
  background:linear-gradient(90deg, transparent, #E9C766, transparent);
  opacity:.9;
}

/* Descripción más grande y JUSTIFICADA (biografías) */
.bio-desc{
  font-family: "Noto Sans", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(.92rem, 1.7vw, 1.02rem);  /* más pequeño */
  line-height: 1.7;                          /* compacto pero cómodo */
  color:#e3e3e3;
  font-style: normal;                         /* sin itálica */
  text-align: justify; text-justify: inter-word;
  white-space: pre-line;                      /* respeta \n del data-info-desc */
  hyphens: auto;
}


/* CTA WhatsApp: texto plateado brillante (metálico) */
.bio-wa-link{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; font-weight:700;
  /* Texto metálico: gradiente + clip a texto */
  background:linear-gradient(92deg,
    var(--silver-d) 0%,
    var(--silver-b) 35%,
    var(--silver-a) 55%,
    var(--silver-c) 80%
  );
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* brillo leve alrededor */
  text-shadow:0 0 12px rgba(240,242,246,.15);
  border-bottom:1px solid rgba(229,233,238,.35);
  transition: text-shadow .2s ease, border-color .2s ease, filter .2s ease;
    font-family: "Be Vietnam Pro", "Noto Sans", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}
.bio-wa-link i{ font-size:1.05rem; color:currentColor; }
.bio-wa-link:hover{
  /* sube brillo y contraste al pasar */
  text-shadow:
    0 0 10px rgba(245,247,250,.25),
    0 0 22px rgba(200,210,220,.18);
  border-color: rgba(245,247,250,.75);
  filter: saturate(1.05) brightness(1.06);
}
.bio-content p, .bio-content li, .bio-content span{
  font-family: "Noto Sans", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* ============================================================================
   DESKTOP / BREAKPOINTS — refinamientos para pantallas grandes
   ============================================================================ */
@media (min-width: 900px){
  .bio-grid{
    grid-template-columns: 0.85fr 1.15fr;   /* foto / texto (foto un poco menor) */
    column-gap: 22px;
  }

  .bio-photo-wrap{
    padding: 14px;                           /* ligero */
    max-width: 360px;                        /* controla el ancho de la foto */
  }

  .bio-photo{
    width: 100%;
    height: auto;                            /* evita alargarse */
    max-height: 64vh;                        /* no rebasa el viewport */
    object-fit: cover;
    border-radius: 12px;
  }

  .bio-modal{
    width: min(860px, 92%);                  /* modal un poco más compacto */
    max-height: 88vh;                        /* permite más texto con scroll interno */
  }

  .bio-content{
    padding: 20px 20px 22px;                 /* respira sin desperdiciar */
  }
}

/* =========================
   MOBILE (por si quieres aún más ajuste fino)
   ========================= */
@media (max-width: 899.98px){
  .bio-title{ font-size: 1.2rem; }
  .bio-desc { font-size: .96rem; line-height: 1.65; }
}