/* ============================================================
   Directorio de intérpretes y fichas de actor.
   Hereda los tokens de sitio.css (claro/oscuro según el sistema).
   El nombre va SIEMPRE debajo de la banda: con retratos tan dispares
   no hay forma de garantizar que un título encima no tape una cara.
   ============================================================ */
body.pag-actor, body.pag-dir{padding-top:0}
nav.top{color:var(--ink); position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex; align-items:center; gap:22px; height:60px}
nav.top .mark{color:var(--ink); font-weight:900; font-size:21px; letter-spacing:-.01em; text-decoration:none;
  font-variation-settings:"wdth" 62; margin-right:auto}
nav.top .links{display:flex; gap:20px; overflow-x:auto; scrollbar-width:none}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{text-decoration:none; font-size:15px; color:var(--muted); white-space:nowrap}
nav.top .links a:hover,nav.top .links a[aria-current]{color:var(--ink)}

/* ---------- banda del retrato ----------
   El retrato se ve ENTERO (object-fit:contain) sobre una copia de sí mismo
   desenfocada que rellena la franja. Así valen igual un retrato vertical, uno
   cuadrado y uno apaisado, sin recortar a nadie la cabeza. */
.banda{position:relative; width:100%; aspect-ratio:2.4; max-height:58svh; min-height:300px;
  overflow:hidden; background:var(--stage); isolation:isolate}
.banda .fondo{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover;
  filter:blur(34px) saturate(.75) brightness(.55); transform:scale(1.06); z-index:0}
.banda .retrato{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:50% 50%}
.banda::after{content:""; position:absolute; inset:auto 0 0 0; height:28%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg) 92%,transparent), transparent)}
@media (max-width:760px){ .banda{aspect-ratio:1.15; max-height:none; min-height:0} }

/* ---------- ficha ---------- */
.pag-actor main{padding-bottom:70px}
.mig{font-size:14px; color:var(--muted); padding:22px 0 0; margin:0}
.mig a{color:var(--gold); text-underline-offset:3px}
.pag-actor h1{margin:14px 0 6px; font-weight:900; font-size:clamp(40px,7vw,96px); line-height:.86;
  letter-spacing:-.02em; text-transform:uppercase; font-variation-settings:"wdth" 62}
.pag-actor .desc{margin:0 0 26px; font-family:var(--read); font-size:clamp(18px,1.7vw,22px);
  line-height:1.5; color:var(--muted); max-width:58ch}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 24px;
  margin:0 0 42px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.datos dt{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.datos dd{margin:0; font-weight:700; font-size:17px}
.bloq{margin:0 0 46px}
.bloq h2{margin:0 0 6px; font-weight:900; font-size:clamp(26px,3.2vw,42px); line-height:.95;
  letter-spacing:-.015em; text-transform:uppercase; font-variation-settings:"wdth" 65}
.bloq .sub{margin:0 0 20px; color:var(--muted); font-size:15.5px; max-width:62ch}

.films{list-style:none; margin:0; padding:0; columns:2 330px; column-gap:40px}
.films li{break-inside:avoid; display:grid; grid-template-columns:58px minmax(0,1fr); gap:0 14px;
  padding:9px 0; border-top:1px solid var(--line)}
.films .fy{font-weight:800; font-variation-settings:"wdth" 65; color:var(--gold); font-size:15px}
.films .ft{font-weight:600; font-size:16.5px; line-height:1.25}
.films .fd{grid-column:2; font-size:13.5px; color:var(--muted)}

.palm-l{list-style:none; margin:0; padding:0}
.palm-l li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:0 16px; padding:11px 0;
  border-top:1px solid var(--line); align-items:baseline}
.palm-l .pa{font-weight:800; font-variation-settings:"wdth" 65; color:var(--gold); font-size:15px}
.palm-l .pn{font-size:16.5px; line-height:1.35}
.palm-l .po{color:var(--muted)}

.pag-actor .redes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.pag-actor .red{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:17px 19px; text-decoration:none; transition:border-color .2s,transform .2s}
.pag-actor .red:hover{border-color:var(--gold); transform:translateY(-2px)}
.pag-actor .red b{display:block; font-size:16px; font-weight:800}
.pag-actor .red .rt span{font-size:13.5px; color:var(--muted)}
.pag-actor .red .fl{margin-left:auto; color:var(--muted)}
.creditos-foto p{margin:0; font-size:14.5px; color:var(--muted); max-width:82ch; line-height:1.6}
.creditos-foto a{color:var(--gold)}
.vecinos{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  border-top:1px solid var(--line); padding:26px 0 0}
.vecinos a{text-decoration:none; max-width:46%}
.vecinos span{display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.vecinos b{font-size:18px; font-variation-settings:"wdth" 80}
.vecinos a:hover b{color:var(--gold)}

/* ---------- directorio ---------- */
.pag-dir main{padding:clamp(34px,5vw,64px) 0 80px}
.pag-dir .head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 48px;
  align-items:end; margin-bottom:30px}
.pag-dir .head h2{margin:0; font-weight:900; font-size:clamp(42px,7vw,96px); line-height:.86;
  letter-spacing:-.02em; text-transform:uppercase; font-variation-settings:"wdth" 62}
.pag-dir .head p{margin:0; color:var(--muted); max-width:52ch}
@media (max-width:800px){ .pag-dir .head{grid-template-columns:1fr} }
.pag-dir .toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:26px}
.pag-dir .status{color:var(--muted); font-size:15px}
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:26px 18px}
.tar{text-decoration:none; display:block}
.tar .cara{display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--bg2); margin-bottom:10px}
.tar .cara img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.tar b{display:block; font-size:16px; font-weight:800; line-height:1.2; font-variation-settings:"wdth" 80}
.tar .m{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
@media (hover:hover){ .tar:hover .cara img{transform:scale(1.07)} .tar:hover b{color:var(--gold)} }
.tar[hidden]{display:none}


/* ---------- la ficha de intérprete usa el molde de la portada ----------
   Solo se añade lo que la portada no tenía: la lista de filmografía y los
   vecinos. Todo lo demás (hero, .block, .head, .marcador, table.palm,
   .redes, .credits) es exactamente el mismo CSS de sitio.css. */
.indice li b{font-weight:700; color:var(--ink)}
.indice li span{color:var(--muted); font-size:13.5px}
.vecinos{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  border-bottom:1px solid var(--line); padding:0 0 26px; margin-bottom:30px}
.vecinos a{text-decoration:none; max-width:46%}
.vecinos span{display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.vecinos b{font-size:18px; font-variation-settings:"wdth" 80}
.vecinos a:hover b{color:var(--gold)}

/* Si no hay foto apaisada libre, la ficha usa el retrato vertical: ahí la cara
   ocupa casi todo el alto y el título cae por debajo. Se oscurece más la parte
   baja para que el texto se lea sobre el cuerpo, no sobre el rostro. */
.hero.hero-retrato::after{
  background:linear-gradient(to top, var(--stage) 0%, rgba(18,15,22,.95) 38%, rgba(18,15,22,.45) 64%, rgba(18,15,22,.35) 100%)}

/* ---------- el hero de una ficha ----------
   La foto se coloca con object-position, NO con transform: con object-fit:cover
   la imagen se pinta dentro de su caja y moverla con translate arrastra la caja
   entera y deja un hueco (las fichas acabaron enseñando el cuello). El pequeño
   acercamiento de entrada sí puede ir en transform: al agrandar nunca descubre
   borde. El valor exacto lo calcula el generador con la cara detectada. */
.hero.hero-ficha .photo img{animation:entra-ficha 20s ease-out both}
@keyframes entra-ficha{
  from{transform:translate(var(--panx),var(--pany)) scale(calc(var(--zoom) * 1.04))}
  to{transform:translate(var(--panx),var(--pany)) scale(var(--zoom))}
}
/* Cuando la geometría no deja despejar la cara (primeros planos muy cerrados),
   el velo de abajo se oscurece para que el texto se lea sobre el cuerpo. */
.hero.hero-velo::after{
  background:linear-gradient(to top, var(--stage) 0%, rgba(18,15,22,.96) 40%, rgba(18,15,22,.5) 66%, rgba(18,15,22,.38) 100%)}