/* ==========================================================================
   laminas/01-apertura.css : lo propio de las laminas 01 y 02

   Solo esta aqui lo que components.css no cubre: la escala y el color de las
   dos lineas de diff de la portada, su escritura, y el tamaño y el ritmo de
   la lamina 02.

   Sobre el color de la portada. El par de GitHub para diffs, salmon sobre
   granate translucido, esta calculado para un monitor. Proyectado con
   videobeam, que lava los negros y baja el contraste, la banda se desvanece
   y el texto pierde el filo. Aqui el rojo va saturado y opaco y el texto
   casi blanco, que es el par que aguanta una sala con luz.

   Todos los selectores cuelgan de .portada o de .quien, y llevan una clase
   de mas a proposito, para que valgan aunque esta hoja se cargue antes que
   components.css.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   01 Portada
   ══════════════════════════════════════════════════════════════════════════ */

/* La portada no usa el ancho de columna de las demas portadas: aqui la linea
   cruza la lamina de lado a lado. Los logos salen del flujo para que el par
   de lineas quede centrado en la altura y no empujado por ellos.

   Todo eso vive en laminas/01-portada.css. Aqui habia un token suelto,
   arroba arroba PORTADA, que el navegador tomaba como el arranque de una
   regla y se tragaba con el la primera regla de la lamina 02. */

/* ══════════════════════════════════════════════════════════════════════════
   02 Quien expone
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El retrato ──────────────────────────────────────────────────────────
   La foto va como fondo de .foto. Si el archivo no esta, el navegador
   descarta esa capa y queda la silueta: un sitio reservado, no un error.

   Es una foto de carnet sobre fondo gris claro, y sobre una lamina clara el
   borde se disolvia: la cabeza parecia flotar sin contorno. El aro claro con
   su filo oscuro le da un canto definido, y el viñeteado interior oscurece el
   gris justo en el borde, que es donde se fundia. */
/* La columna del retrato se estrecha a la medida de la foto. Lo que sobraba
   ahi se lo lleva el texto, que es lo que necesitaba el ancho: a la reparticion
   de antes dos de las tres lineas partian en dos y dejaban una palabra huerfana
   colgando en el renglon de abajo. */
.quien .grid.g-1-2 {
  grid-template-columns: 200px 1fr;
  gap: 44px;
}

.quien .retrato {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: none;
  border-radius: 50%;
  background: linear-gradient(168deg, var(--surface) 0%, var(--surface-3) 100%);
  box-shadow:
    0 0 0 7px var(--surface),
    0 0 0 9px rgba(31, 35, 40, 0.34),
    0 22px 44px -22px rgba(31, 35, 40, 0.48);
}

/* En tema oscuro el filo tiene que ser claro, o el aro se come el canto que
   vino a dar. El presentador puede cambiar de tema en el salon si el
   proyector lava los negros, asi que los dos casos tienen que aguantar. */
:root[data-theme="dark"] .quien .retrato {
  box-shadow:
    0 0 0 7px var(--surface),
    0 0 0 9px rgba(230, 237, 243, 0.34),
    0 22px 44px -22px rgba(0, 0, 0, 0.7);
}

.quien .retrato::before,
.quien .retrato::after {
  content: "";
  position: absolute;
  left: 50%;
  background: rgba(31, 35, 40, 0.12);
}

.quien .retrato::before { top: 24%; width: 80px; height: 80px; margin-left: -40px; border-radius: 50%; }
.quien .retrato::after  { top: 53%; width: 172px; height: 162px; margin-left: -86px; border-radius: 86px 86px 0 0; }

:root[data-theme="dark"] .quien .retrato::before,
:root[data-theme="dark"] .quien .retrato::after { background: rgba(230, 237, 243, 0.10); }

.quien .retrato .foto {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 1;
  background: url("../../img/foto.png") center 4% / 124% no-repeat;
  filter: contrast(1.06) saturate(1.06);
  box-shadow: inset 0 0 44px 16px rgba(18, 27, 38, 0.30);
}

/* ── El nombre y las tres lineas ─────────────────────────────────────────
   Todo a un cuerpo mayor que antes. La lamina se leia como una tarjeta chica
   pegada arriba, con el tercio inferior vacio; a esta escala el bloque ocupa
   la lamina y el aire que queda es parejo arriba y abajo. */
.quien h1.title {
  font-size: 74px;
  line-height: 1.02;
  margin-bottom: 0;
}

.quien .ficha .cargo {
  font-size: 27px;
  line-height: 1.3;
  color: var(--text-dim);
  margin-top: 10px;
}

.quien .rule { max-width: 380px; margin: 24px 0 30px; }

.quien .lineas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quien .linea {
  position: relative;
  padding-left: 30px;
  font-size: 27px;
  line-height: 1.35;
  color: var(--text-dim);
  opacity: 0;
}

/* Renglones separados por un filete y no por aire suelto: el bloque gana
   altura y estructura sin agregar una palabra que nadie aprobo. */
.quien .linea + .linea {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

/* Cada linea abre con la marca de su casa, como en un perfil de LinkedIn,
   y no con un punto. Las tres marcas van al mismo alto y en una columna fija
   de 44 pixeles, para que el texto arranque siempre en el mismo sitio aunque
   el isotipo de Workforce sea mas ancho que el escudo de la UCV. El
   pictograma de la tercera va en el gris de cuerpo y a trazo, porque no es
   una marca sino la suma de las otras dos. */
.quien .linea {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 0;
  font-size: 25px;
}

.quien .linea .marca {
  flex: none;
  width: 44px;
  height: 40px;
  object-fit: contain;
}

.quien .linea svg.marca.maletin {
  background: none;
  border-radius: 0;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El escudo de la UCV es oscuro. En tema oscuro se aclara para que no se
   pierda contra el fondo, sin tocar el isotipo de Workforce, que ya es azul
   medio y se lee en los dos. */
:root[data-theme="dark"] .quien .linea img.marca[src*="logo_ucv"] { filter: invert(1) brightness(1.6); }

/* Entrada escalonada al ritmo del habla. Con los retardos de data-d las tres
   caerian en menos de un quinto de segundo, que es ritmo decorativo y no
   señalizacion: la sala leeria las tres de golpe y dejaria de escuchar. */
.slide.is-active .quien .linea    { animation: rise 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.slide.is-active .quien .linea.n1 { animation-delay: 0.70s; }
.slide.is-active .quien .linea.n2 { animation-delay: 2.00s; }
.slide.is-active .quien .linea.n3 { animation-delay: 3.30s; }

/* ── La trayectoria ──────────────────────────────────────────────────────
   Abajo del retrato y de las tres lineas, a todo el ancho. Es la evidencia
   de la tercera linea, los nueve años, y va en jerarquia baja: eje de dos
   pixeles, puntos de nueve, años en mono a 12,5 y nombres a 14. El gris es
   el de cuerpo, --text-dim, que sobre el fondo claro da 7,5:1; el tenue no
   se usa porque el videobeam lo lava. */
.quien .trayectoria {
  position: relative;
  flex: none;
  list-style: none;
  margin: 26px 0 6px;
  padding: 22px 0 0;
  height: 76px;
  border-top: 1px solid var(--line);
  opacity: 0;
}

/* El eje completo, y encima el tramo que sigue abierto, desde 2023 */
.quien .trayectoria::before,
.quien .trayectoria::after {
  content: "";
  position: absolute;
  top: 26px;
  height: 2px;
  border-radius: 1px;
}

.quien .trayectoria::before { left: 0; right: 0; background: var(--line); }

.quien .trayectoria::after {
  left: 66.7%;
  right: 0;
  top: 25px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-dim);
  transform: scaleX(0);
  transform-origin: left center;
}

.quien .tr-hito {
  position: absolute;
  top: 22px;
  left: var(--x);
  padding-top: 18px;
  white-space: nowrap;
  opacity: 0;
}

/* El ultimo hito cae en el borde derecho: se ancla por la derecha y se alinea
   al final para que no se salga de la lamina. */
.quien .tr-hito.fin { left: auto; right: 0; text-align: right; }

/* El punto sobre el eje */
.quien .tr-hito::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 3px var(--bg);
}

/* Un solo resalte en la lamina, y es "Auxiliar docente UCV". El tramo que
   sigue abierto desde 2023 se distingue por el trazo grueso del eje, no por
   el azul, que ya tiene dueño. */
.quien .tr-hito.fin::before { left: auto; right: 0; }

.quien .tr-a {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.quien .tr-n {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
}

.quien .tr-hito.fin .tr-n,
.quien .tr-hito:nth-child(6) .tr-n { color: var(--text); }

/* Entra despues de la tercera linea, que es la que dice los nueve años.
   El eje aparece, el tramo en acento se traza de izquierda a derecha y los
   hitos se encienden uno por uno en orden cronologico. */
@keyframes trTrazo { to { transform: scaleX(1); } }

.slide.is-active .quien .trayectoria { animation: fade 0.5s ease-out 4.2s forwards; }
.slide.is-active .quien .trayectoria::after { animation: trTrazo 0.6s cubic-bezier(0.22, 1, 0.36, 1) 5.0s forwards; }

.slide.is-active .quien .tr-hito { animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.slide.is-active .quien .tr-hito:nth-child(1) { animation-delay: 4.30s; }
.slide.is-active .quien .tr-hito:nth-child(2) { animation-delay: 4.42s; }
.slide.is-active .quien .tr-hito:nth-child(3) { animation-delay: 4.54s; }
.slide.is-active .quien .tr-hito:nth-child(4) { animation-delay: 4.66s; }
.slide.is-active .quien .tr-hito:nth-child(5) { animation-delay: 4.78s; }
.slide.is-active .quien .tr-hito:nth-child(6) { animation-delay: 4.90s; }
.slide.is-active .quien .tr-hito:nth-child(7) { animation-delay: 5.30s; }

/* ══════════════════════════════════════════════════════════════════════════
   Movimiento reducido e impresion

   En los dos casos las dos lineas quedan escritas y el perfil completo, que
   es el estado final y el unico que cuenta algo. Lo que se apaga es el camino
   hasta ahi.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .cover.portada .ink,
  .slide.is-active .cover.portada .cursor,
  .slide.is-active .portada .dl.ad,
  .slide.is-active .quien .linea {
    animation: none !important;
  }

  .cover.portada .ink    { clip-path: none !important; }
  .cover.portada .cursor { display: none !important; }
  .portada .dl.ad        { opacity: 1 !important; }
  .slide.is-active .quien .linea { opacity: 1 !important; }

  .slide.is-active .quien .trayectoria,
  .slide.is-active .quien .tr-hito { animation: none !important; opacity: 1 !important; }
  .slide.is-active .quien .trayectoria::after { animation: none !important; transform: none !important; }
}

@media print {
  .cover.portada .ink {
    animation: none !important;
    clip-path: none !important;
  }

  .cover.portada .cursor { display: none !important; }

  .portada .dl.ad {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .quien .linea,
  .quien .trayectoria,
  .quien .tr-hito {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .quien .trayectoria::after { animation: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Por que las dos lineas no van al mismo cuerpo

   Un diff de verdad tiene las dos lineas iguales, es cierto. Pero esta es la
   portada de una ponencia de diez minutos, y lo primero que la sala tiene que
   ver es de que se habla. Igualadas a un cuerpo mediano la lamina se convierte
   en dos franjas de color con texto chico dentro, y vuelve el problema que
   habia al principio: la vista no aterriza en el titulo. La roja manda porque
   es la palabra que la ponencia va a destruir; la verde es la respuesta, y una
   respuesta puede venir en cuerpo menor sin dejar de leerse a doce metros.

   Lo que si hace falta del diff esta todo aqui: el mismo material, la canaleta
   compartida, los dos signos en la misma columna y ningun aire entre bandas.
   ═══════════════════════════════════════════════════════════════════════════ */