/* --- Portada: la voz del autor y, debajo, el muro de los universos --- */
.voz{ position:relative; overflow:hidden; background:#0A1728; color:var(--color-superficie); }
/* El encuadre se ancla a la derecha: en móvil el recorte es horizontal y el
   centro se come al sujeto. Así el lado derecho del vídeo siempre se ve. */
.voz video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--encuadre-video, right center);
}
.voz__velo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,23,40,.94) 0%, rgba(10,23,40,.62) 40%, rgba(10,23,40,.30) 78%, rgba(10,23,40,.55) 100%);
}
.voz__in{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:76vh; padding-block:var(--space-6) var(--space-5);
}
@media (min-width:64em){ .voz__in{ min-height:86vh; padding-block:var(--space-8) var(--space-6); } }
.nombre{
  font-family:var(--fuente-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.9rem, 14vw, 13rem); line-height:0.79; letter-spacing:-0.045em;
  margin-right:-0.1em; color:var(--color-superficie);
}
/* Las dos lineas del nombre van en dos tintas: la firma del autor y el papel. El
   contraste de color hace la mitad del trabajo y el de peso la otra; con una sola
   tinta el lockup se aplana. El unico adorno es la regla trazada a mano. */
.nombre b{ font-weight:800; color:var(--tinta-autor); }
.nombre::after{
  content:''; display:block; margin-top:var(--space-4);
  width:clamp(9rem, 24vw, 20rem); height:0.28rem;
  background-color:currentColor; opacity:0.55;
  -webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:7.5rem 0.28rem; mask-size:7.5rem 0.28rem;
}
.voz .lema{
  font-family:var(--fuente-display); font-style:italic; font-size:1.5rem; line-height:1.3;
  color:rgba(246,243,234,.95); margin-top:var(--space-4);
}
.voz .quien{
  font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.65; max-width:52ch;
  color:rgba(246,243,234,.82); margin-top:var(--space-3);
}
.voz .btn{ background:var(--color-superficie); border-color:var(--color-superficie); color:var(--color-texto); }
.voz .btn:hover{ background:transparent; color:var(--color-superficie); }
.voz .btn--fantasma{ background:transparent; color:var(--color-superficie); border-color:rgba(246,243,234,.6); }
.voz .btn--fantasma:hover{ background:var(--color-superficie); color:var(--color-texto); }
.tira-universos{
  position:relative; z-index:2; margin-top:var(--space-6);
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); padding-top:var(--space-3);
}
/* La línea que separa la tira del resto de la portada va trazada a mano, como todas
   las del sitio: un border-top se veía demasiado tieso sobre el vídeo. */
.tira-universos::before{
  content:''; position:absolute; left:0; right:0; top:0; height:0.22rem;
  background-color:rgba(246,243,234,.32);
  -webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:7.5rem 0.22rem; mask-size:7.5rem 0.22rem;
}
/* Cada enlace lleva el glifo de su sello y va un poco torcido: es la última fila
   que quedaba recta en la portada. El glifo toma el color del enlace —no el acento
   del sello—, porque sobre el vídeo el acento puro no se lee. */
.tira-universos a{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--fuente-mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:0.07em; color:rgba(246,243,234,.72); border-bottom:var(--linea) solid transparent;
  transform:rotate(calc(var(--giro, 0deg) * var(--osadia)));
}
.tira-universos a:nth-child(odd){ --giro:-1.1deg; }
.tira-universos a:nth-child(even){ --giro:0.9deg; }
.tira-universos .glifo{ width:1.5rem; height:1.5rem; background-color:currentColor; }
.tira-universos a:hover{ color:#fff; border-bottom-color:currentColor; }

/* --- Muro: las reglas del muro mason viven en assets/css/capa0.css --- */

/* --- Autor y oficio --- */
.autoria{ display:grid; gap:var(--space-6); }
@media (min-width:64em){ .autoria{ grid-template-columns:20rem 1fr; gap:var(--space-7); align-items:start; } }
.autoria .retrato{ background:var(--color-superficie); border:var(--linea) solid var(--color-linea); box-shadow:var(--sombra); padding:var(--space-2); transform:rotate(-1.1deg); }
/* .cierre-util se movió a assets/css/capa0.css: la usa pieza_cierre() en todas las páginas. */