/* ============================================================
   T5 · FICHA DE PERSONA  y  su índice
   Requiere estilo-base.css cargado antes.
   ============================================================ */

/* ---------- índice de personas ---------- */
.idx-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
.idx-hero-in{max-width:var(--wide); margin:0 auto; padding:52px 24px 40px;}
.crumb{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 18px;}
.crumb a{color:var(--muted); text-decoration:none;} .crumb a:hover{color:var(--accent);}
h1{font-size:clamp(34px,5.4vw,50px); line-height:1.05; letter-spacing:-.028em; margin:0 0 14px;}
.idx-hero p.lead{font-size:20px; line-height:1.55; color:var(--muted); max-width:62ch; margin:0;}

.grupo{max-width:var(--wide); margin:0 auto; padding:44px 24px 0;}
.grupo h2{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px; padding-top:26px; border-top:1px solid var(--line);}
.grupo p.desc{font-size:17px; line-height:1.6; color:var(--muted); max-width:66ch; margin:0 0 24px;}
.grupo:first-of-type h2{padding-top:0; border-top:none;}

.fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:12px;}
.fichas.compacta{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.fp{display:flex; flex-direction:column; text-decoration:none; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:16px; transition:border-color .15s, transform .15s;}
.fp:hover{border-color:var(--accent); transform:translateY(-2px);}
.fp .retrato{aspect-ratio:1/1; border-radius:50%; width:76px; background:var(--code); border:2px dashed var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 0 12px;
  font-family:var(--sans); font-size:20px; font-weight:700; color:var(--muted); overflow:hidden;}
.fp .retrato img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.fp .retrato.tiene{border-style:solid; border-color:var(--line);}
.fp b{display:block; font-family:var(--sans); font-size:16px; line-height:1.3;}
.fp .yrs{font-family:var(--sans); font-size:12.5px; color:var(--muted); margin:3px 0 8px;}
.fp p{margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--muted);}
.fp.sinficha{cursor:default;} .fp.sinficha:hover{border-color:var(--line); transform:none;}
.fp .pendiente{display:inline-block; align-self:flex-start; margin-top:auto; padding-top:0; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft);
  padding:3px 8px; border-radius:20px; line-height:1.5;}
.fp p + .pendiente{margin-top:12px;}

/* tarjeta colectiva: una cuadrilla, no una persona */
.fp.colectiva{grid-column:1/-1; border-left:3px solid var(--accent); background:var(--accent-soft); border-color:transparent;}
.fp.colectiva .nombres{font-family:var(--serif); font-size:19px; line-height:1.6; margin:10px 0 0;}
.fp.colectiva .nombres span{white-space:nowrap;}

/* ---------- ficha individual ---------- */
.per-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--brand-soft),transparent);}
.per-hero-in{max-width:var(--wide); margin:0 auto; padding:48px 24px 40px;
  display:grid; grid-template-columns:1fr; gap:28px; align-items:end;}
@media(min-width:820px){ .per-hero-in{grid-template-columns:200px minmax(0,1fr); gap:36px;} }
.per-retrato{width:170px; aspect-ratio:1/1; border-radius:50%; background:var(--code); border:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px;
  padding:16px; font-family:var(--sans); font-size:11.5px; color:var(--muted); overflow:hidden;}
.per-retrato.tiene{border-style:solid; padding:0;}
.per-retrato img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.per-retrato b{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.per-hero h1{margin:0 0 8px;}
.per-vida{font-family:var(--sans); font-size:16px; color:var(--muted); margin:0 0 14px;}
.per-rol{font-size:21px; line-height:1.5; font-style:italic; color:var(--fg); margin:0; max-width:52ch;}

.per-layout{max-width:var(--wide); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr);}
@media(min-width:980px){ .per-layout{grid-template-columns:minmax(0,1fr) 280px; gap:56px; padding-top:44px;} }

article.per{max-width:var(--read); padding:40px 0 60px;}
@media(min-width:980px){ article.per{padding-top:0} }
article.per h2{font-size:15px; font-family:var(--sans); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:48px 0 12px; padding-top:24px; border-top:1px solid var(--line);}
article.per h2:first-child{margin-top:0; padding-top:0; border-top:none;}
article.per p{margin:16px 0;}
article.per ul,article.per ol{padding-left:24px;} article.per li{margin:8px 0;}
.per-entrada{font-size:20px; line-height:1.6; border-left:4px solid var(--accent); padding-left:20px; margin:0 0 36px;}

/* barra lateral de datos */
.per-datos{font-family:var(--sans); align-self:start; padding:0 0 60px;}
@media(min-width:980px){ .per-datos{position:sticky; top:78px;} }
.per-datos .caja{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:16px;}
.per-datos h3{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.per-datos dl{margin:0; font-size:14px;}
.per-datos dt{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:12px;}
.per-datos dt:first-child{margin-top:0;}
.per-datos dd{margin:2px 0 0; line-height:1.45;}
.per-datos .enlaces{list-style:none; padding:0; margin:0; font-size:14.5px;}
.per-datos .enlaces li{margin:8px 0; padding-left:16px; position:relative; line-height:1.4;}
.per-datos .enlaces li::before{content:"›"; position:absolute; left:0; color:var(--accent);}
.per-datos .enlaces a{text-decoration:none;} .per-datos .enlaces a:hover{text-decoration:underline;}

/* galería */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin:24px 0;}
.galeria figure{margin:0;}
.galeria .box{aspect-ratio:4/3; border:2px dashed var(--line); border-radius:var(--radius); background:var(--code);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  font-family:var(--sans); font-size:12.5px; color:var(--muted);}
.galeria figcaption{font-size:12.5px; margin-top:7px;}

@media print{
  .per-datos{position:static}
  .per-layout{display:block; padding:0} article.per{max-width:none; padding:0}
}