/* Perfil de un integrante (estilo perfil de red social). Mismo estilo oscuro del sitio: #0f0f0f / #161616 / #262626, acento #4ade80 / #2e7d32. */

html, body.pf-body { background: #0f0f0f; color: #e5e7eb; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ---------- Portada ---------- */
.pf-portada { height: clamp(150px, 24vw, 240px); background: radial-gradient(900px 260px at 80% 0%, rgba(74, 222, 128, 0.16), transparent 70%), linear-gradient(135deg, #0b1f12 0%, #14401a 50%, #1b5e20 100%); border-bottom: 1px solid #1f1f1f; }
.pf-portada__interior { max-width: 1000px; margin: 0 auto; padding: 14px 24px; box-sizing: border-box; }
.pf-volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 700; color: #bbf7d0; text-decoration: none; }
.pf-volver:hover { text-decoration: underline; color: #fff; }
.pf-volver:focus-visible, .pf-boton:focus-visible { outline: 3px solid #4ade80; outline-offset: 3px; border-radius: 8px; }
.pf-volver--abajo { margin-top: 34px; color: #4ade80; }

/* ---------- Cabecera: foto en círculo encimada sobre la portada ---------- */
.pf-contenedor { max-width: 1000px; margin: 0 auto; padding: 0 24px 80px; box-sizing: border-box; }
.pf-cabecera { display: flex; align-items: flex-end; gap: 26px; margin-top: -84px; }
.pf-foto { flex: none; width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 5px solid #0f0f0f; box-shadow: 0 0 0 2px #2e7d32; background: #161616; }
.pf-foto--vacia { display: flex; align-items: center; justify-content: center; font-size: 64px; color: #2e7d32; }
.pf-id { min-width: 0; padding-bottom: 6px; }
.pf-nombre { margin: 0 0 4px; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.pf-rol { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: #4ade80; }
.pf-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #2f3a2f; border-radius: 10px; background: #161616; color: #e5e7eb; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; }
.pf-boton:hover { border-color: #2e7d32; background: #1a251b; transform: translateY(-1px); }
.pf-boton--pdf { margin-top: 12px; background: #1b5e20; border-color: #1b5e20; color: #fff; }
.pf-boton--pdf:hover { background: #2e7d32; border-color: #2e7d32; }

/* ---------- Tarjetas con ícono ---------- */
.pf-tarjetas { display: grid; gap: 18px; margin-top: 34px; }
.pf-card { padding: 22px 24px; border: 1px solid #262626; border-radius: 16px; background: #161616; }
.pf-card__t { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: #fff; }
.pf-card__t i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(74, 222, 128, 0.1); color: #4ade80; font-size: 15px; }
.pf-texto { margin: 0; max-width: 70ch; font-size: 1.02rem; line-height: 1.8; color: #d9dde3; overflow-wrap: anywhere; text-align: left; hyphens: none; }
.pf-texto p, .pf-texto li { text-align: left; hyphens: none; }
.pf-texto p { margin: 0 0 1em; }
.pf-texto p:last-child { margin-bottom: 0; }
.pf-texto ul, .pf-texto ol { margin: 0 0 1em 1.4em; padding: 0; }
.pf-texto ul { list-style: disc; }
.pf-texto ol { list-style: decimal; }
.pf-texto a { color: #4ade80; text-decoration: underline; text-underline-offset: 3px; }
.pf-vacio { margin: 0; padding: 26px; text-align: center; color: #718096; border: 1px dashed #262626; border-radius: 12px; font-size: 14px; }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
    .pf-portada__interior { padding: 10px 16px; }
    .pf-contenedor { padding: 0 16px 64px; }
    .pf-cabecera { flex-direction: column; align-items: center; gap: 14px; margin-top: -72px; text-align: center; }
    .pf-foto { width: 144px; height: 144px; }
    .pf-botones { justify-content: center; }
    .pf-boton { flex: 1 1 140px; }
    .pf-card { padding: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
    .pf-cabecera, .pf-card { animation: pfEntra 0.5s ease both; }
    .pf-card:nth-child(2) { animation-delay: 0.08s; }
}
@keyframes pfEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-boton { transition: none; } .pf-boton:hover { transform: none; } }