/* ==========================================================================
   laminas/03-metodo.css : lo propio de las laminas 06, 07 y 08

   Aqui solo esta lo que components.css no cubre: la frase centrada de la
   lamina de corte, las dos columnas del encargo con su encendido por
   elemento, y las cuatro fichas de la 08 con su entrada escalonada.

   Todos los selectores cuelgan de .giro, de .encargo o de .consejos, y
   llevan una clase de mas a proposito, para que valgan aunque esta hoja se
   cargue antes que components.css.

   Los tiempos de encendido son cortos a proposito: cada elemento del encargo
   se enciende a un segundo y medio del anterior, y cada ficha de la 08 a un
   segundo. Estuvieron calculados sobre los tramos del guion y eran tan largos
   que la lamina se veia a medias mucho tiempo. Ahora una lamina vista a los
   5 o 7 segundos ya esta completa, vaya el expositor al ritmo que vaya.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   06 El giro
   Corte a oscuro y una sola frase: la unica pregunta del deck. Va a cuerpo
   de portada, a lo Takahashi, porque es lo unico que hay que mirar y tiene
   que leerse de un golpe desde la ultima fila. El diff no se repite aqui: la
   portada ya lo cerro con su linea verde.
   ══════════════════════════════════════════════════════════════════════════ */
.cine-hero.giro {
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: none;
  width: 100%;
  padding-bottom: 0;
}

.cine-hero.giro h2 {
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 1040px;
  margin: 0;
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════════════════
   07 El encargo es el trabajo
   ══════════════════════════════════════════════════════════════════════════ */

/* Las dos columnas se estiran al mismo alto. El bloque de la izquierda queda
   casi vacio debajo de su unica linea, y ese vacio es parte de lo que se
   esta mostrando. */
.encargo .grid { align-items: stretch; }

.encargo .col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.encargo .col .code {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Los renglones se arman con filas, no con espacios: la tipografia del deck
   no es de ancho fijo y la columna del valor no quedaria alineada. */
.encargo .code pre {
  white-space: normal;
  padding: 14px 0;
  flex: 1;
}

.encargo .code .ln {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 7px 18px;
  font-size: 16px;
  line-height: 1.45;
}

.encargo .code .et {
  flex: none;
  width: 124px;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.encargo .code .ev { min-width: 0; }

.encargo .code .ln.sola { gap: 12px; }
.encargo .code .ln.sola .pr { flex: none; }

/* ── El resultado de cada columna ─────────────────────────────────────────
   Sin la palabra resultado: una flecha hacia abajo dice lo mismo y no gasta
   presupuesto de texto. */
.encargo .salida {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 2px;
}

.encargo .salida .fl {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.encargo .salida .fl svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.encargo .salida.mala .rs {
  font-size: 18px;
  font-weight: 600;
  color: var(--danger);
  line-height: 1.35;
  padding-top: 1px;
}

.encargo .salida .chips { gap: 9px; }
.encargo .salida .chip { font-size: 14px; padding: 7px 14px; }

/* ── El encendido, elemento por elemento ─────────────────────────────────
   Cada elemento del encargo se resalta cuando se esta hablando de el, y en
   ese mismo momento se resalta la parte del resultado que produce. La causa y
   su efecto ocurren a la vez y estan a la vista al mismo tiempo, que es lo
   unico que justifica animar esta lamina.

   El resalte pega un golpe corto y se queda en un tono suave, de modo que al
   final el encargo completo sigue leyendose entero.

   Los chips del resultado ya no nacen atenuados. Vivian al 26 por ciento de
   opacidad hasta que les tocaba, y proyectados se veian como gris lavado, que
   es justo lo que el videobeam borra. Ahora nacen a contraste completo y lo
   que cambia al encenderse es el borde y el fondo, no la opacidad. La
   cadencia es la misma para la linea y para su chip, pero acortada a 1,5
   segundos entre elementos: a los 7 segundos estan los cuatro resaltados y a
   los 3 se ve la secuencia a la mitad. Cambiado el 25 de septiembre de 2026. */
@keyframes encargoLinea {
  0%   { background: transparent; box-shadow: none; }
  16%  { background: rgba(88, 166, 255, 0.22); box-shadow: inset 3px 0 0 var(--accent-br); }
  100% { background: rgba(88, 166, 255, 0.10); box-shadow: inset 3px 0 0 var(--accent-br); }
}

@keyframes encargoChip {
  from { background: var(--surface); border-color: var(--line); color: var(--text-dim); }
  to   { background: var(--on-bg);  border-color: var(--on-line); color: var(--accent); }
}

.encargo .salida .chip { --on-bg: #E4F2F9; --on-line: #A9D3E7; }

:root[data-theme="dark"] .encargo .salida .chip {
  --on-bg: rgba(88, 166, 255, 0.10);
  --on-line: rgba(88, 166, 255, 0.42);
}

.slide.is-active .encargo .code .ln.e1,
.slide.is-active .encargo .code .ln.e2,
.slide.is-active .encargo .code .ln.e3,
.slide.is-active .encargo .code .ln.e4 {
  animation: encargoLinea 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.is-active .encargo .salida .chip {
  animation: encargoChip 0.5s ease-out both;
}

.slide.is-active .encargo .code .ln.e1,
.slide.is-active .encargo .salida .chip.r1 { animation-delay: 2.0s; }
.slide.is-active .encargo .code .ln.e2,
.slide.is-active .encargo .salida .chip.r2 { animation-delay: 3.5s; }
.slide.is-active .encargo .code .ln.e3,
.slide.is-active .encargo .salida .chip.r3 { animation-delay: 5.0s; }
.slide.is-active .encargo .code .ln.e4,
.slide.is-active .encargo .salida .chip.r4 { animation-delay: 6.5s; }

/* El nombre del archivo de instrucciones es una ruta, no un rotulo: en
   versalitas se lee mal y ademas deja de parecer un archivo. */
.encargo .code .code-bar .nm {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   08 Cuatro reglas, y la primera manda
   ══════════════════════════════════════════════════════════════════════════ */

/* Cuatro fichas, no ocho, y cada una con su predicado. Dos palabras sueltas
   no significan nada para quien mire la lamina sin oir al expositor, que es
   lo que le pasa a media sala mientras toma nota. Las otras cuatro reglas del
   guion van habladas y no llevan ficha.

   La rejilla se estira hasta el borde inferior en vez de quedarse como una
   banda a media altura: antes la lamina dejaba medio proyector vacio debajo
   de las fichas. Dos filas iguales, y las cuatro fichas del mismo alto. */
.consejos .grid {
  flex: 1;
  min-height: 0;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
}

.consejos .ficha {
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  min-height: 0;
}

/* El icono y el numero arriba, y el texto apoyado contra el borde de abajo,
   de modo que los cuatro predicados quedan a la misma altura y se leen como
   una lista aunque esten en dos filas. */
.consejos .ficha .cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
}

.consejos .ficha .ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 0;
}

.consejos .ficha .ico svg { width: 29px; height: 29px; stroke-width: 1.8; }

.consejos .ficha .n {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* El predicado es lo que la sala tiene que poder leer desde la ultima fila,
   asi que manda el tamaño y no la cantidad de texto. */
.consejos .ficha h3 {
  font-size: 33px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 22px 0 8px;
  text-wrap: balance;
}

/* El apoyo va en el gris de cuerpo y nunca en el mas claro de la paleta: el
   videobeam del auditorio lava ese rango y desde la tercera fila desaparece. */
.consejos .ficha p {
  font-size: 20px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* ── Cada ficha entra cuando le toca ──────────────────────────────────────
   Entran una detras de otra con un segundo de distancia, y a los cinco
   segundos la lamina esta completa. Antes la tercera y la cuarta entraban a
   los 9 y a los 13 segundos, calculadas sobre el guion: quien miraba la
   lamina veia la mitad de abajo vacia durante trece segundos, y si el
   expositor iba mas rapido que el guion, esas dos fichas nunca llegaban a
   verse.

   El escalonado sigue marcando el orden de las reglas, que es lo que la
   animacion tiene que aclarar. Lo que marca cual manda no es el orden de
   entrada sino el resalte: solo la primera lleva la clase lit y su barra de
   acento. Cambiado el 25 de septiembre de 2026. */
.slide.is-active .consejos .ficha {
  animation: rise 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.is-active .consejos .f1 { animation-delay: 1.0s; }
.slide.is-active .consejos .f2 { animation-delay: 2.0s; }
.slide.is-active .consejos .f3 { animation-delay: 3.0s; }
.slide.is-active .consejos .f4 { animation-delay: 4.0s; }

/* ══════════════════════════════════════════════════════════════════════════
   Movimiento reducido e impresion
   En las dos situaciones manda lo mismo: todo visible y en su estado final,
   sin nada a medio encender.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .cine-hero.giro .dl.ad,
  .slide.is-active .encargo .code .ln,
  .slide.is-active .encargo .salida .chip,
  .slide.is-active .consejos .ficha {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cine-hero.giro .dl.ad { clip-path: none !important; }

  .slide.is-active .encargo .salida .chip {
    background: var(--on-bg);
    border-color: var(--on-line);
    color: var(--accent);
  }
}

@media print {
  .cine-hero.giro .dl.ad,
  .encargo .code .ln,
  .encargo .salida .chip,
  .consejos .ficha {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .encargo .salida .chip {
    background: var(--on-bg) !important;
    border-color: var(--on-line) !important;
    color: var(--accent) !important;
  }

  .encargo .code .ln { background: transparent !important; box-shadow: none !important; }
  .consejos .ficha { border-color: var(--line) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   08 Asi trabajo con agentes, rehecha el 25 de septiembre por la noche.
   Las reglas de .consejos de arriba quedan sin uso y no se borran.
   ══════════════════════════════════════════════════════════════════════════ */
.oficio .of-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 28px;
}

/* Columna izquierda: la foto arriba, mas chica, y Mi flujo debajo */
.of-izq { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.of-izq .of-mic { flex: none; height: 250px; }

.of-flujo { flex: 1; }
.of-flujo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.of-flujo li { display: flex; align-items: center; gap: 14px; font-size: 21px; line-height: 1.2; color: var(--text); }
.of-flujo li svg { width: 24px; height: 24px; flex: none; fill: var(--accent); }

@keyframes ofFlujo { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .of-flujo li { animation: ofFlujo 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .of-flujo li:nth-child(1) { animation-delay: 5.0s; }
.slide.is-active .of-flujo li:nth-child(2) { animation-delay: 5.4s; }
.slide.is-active .of-flujo li:nth-child(3) { animation-delay: 5.8s; }

/* ── El microfono ─────────────────────────────────────────────────────── */
.of-mic {
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0B0F14;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.55);
}

.of-mic img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 14% 50%;
  transform: scale(1.02);
}

/* Un acercamiento lento mientras se habla: la foto no se queda muerta. */
@keyframes ofAcerca { to { transform: scale(1.10); } }
.slide.is-active .of-mic img { animation: ofAcerca 14s ease-out 0.2s both; }

/* Velo abajo para que la leyenda se lea sobre la foto */
.of-mic::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 12, 0.88));
}

.of-mic figcaption {
  position: absolute;
  left: 22px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

/* El boton de grabar y la onda de la voz, arriba a la izquierda de la foto */
.of-rec {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: rgba(5, 8, 12, 0.62);
}

.of-punto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E5383B;
  box-shadow: 0 0 0 0 rgba(229, 56, 59, 0.6);
}

@keyframes ofLatido {
  0%   { box-shadow: 0 0 0 0 rgba(229, 56, 59, 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(229, 56, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 56, 59, 0); }
}
.slide.is-active .of-punto { animation: ofLatido 1.6s ease-out 0.6s infinite; }

.of-onda { display: flex; align-items: center; gap: 4px; height: 30px; }
.of-onda i { display: block; width: 4px; height: 30%; border-radius: 2px; background: #FFFFFF; opacity: 0.9; }

@keyframes ofVoz { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.slide.is-active .of-onda i { animation: ofVoz 1.1s ease-in-out infinite; }
.slide.is-active .of-onda i:nth-child(2n)  { animation-duration: 0.8s; }
.slide.is-active .of-onda i:nth-child(3n)  { animation-duration: 1.3s; }
.slide.is-active .of-onda i:nth-child(4n)  { animation-delay: 0.2s; }
.slide.is-active .of-onda i:nth-child(5n)  { animation-delay: 0.4s; }

/* ── Los dos paneles de la derecha ───────────────────────────────────── */
.of-der { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.of-der .of-panel:last-child { flex: 1; display: flex; flex-direction: column; }
.of-der .of-panel:last-child .of-chips { flex: 1; align-content: center; gap: 14px 12px; }

.of-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px 20px;
  box-shadow: var(--card-shadow);
}

.of-panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 650;
  color: var(--text);
}

.of-panel h3 svg { width: 20px; height: 20px; fill: var(--text-dim); flex: none; }

/* Los interruptores, con la forma y el verde de los de GitHub */
.of-reglas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.of-reglas li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text);
}

.of-tg {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #D0D7DE;
  transition: background 0.2s;
}

.of-tg::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.3);
}

@keyframes ofTgFondo { to { background: #1F883D; } }
@keyframes ofTgBola  { to { transform: translateX(20px); } }

.slide.is-active .of-reglas li .of-tg        { animation: ofTgFondo 0.25s ease-out both; }
.slide.is-active .of-reglas li .of-tg::after { animation: ofTgBola 0.25s ease-out both; }
.slide.is-active .of-reglas .r1 .of-tg, .slide.is-active .of-reglas .r1 .of-tg::after { animation-delay: 1.2s; }
.slide.is-active .of-reglas .r2 .of-tg, .slide.is-active .of-reglas .r2 .of-tg::after { animation-delay: 2.0s; }
.slide.is-active .of-reglas .r3 .of-tg, .slide.is-active .of-reglas .r3 .of-tg::after { animation-delay: 2.8s; }

:root[data-theme="dark"] .of-tg { background: #30363D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .of-tg { background: #30363D; } }

/* Los conceptos del GH-300, como etiquetas de GitHub */
.of-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.of-chips span {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--on-bg, rgba(9, 105, 218, 0.08));
  font-size: 21px;
  font-weight: 600;
  color: var(--accent);
}

@keyframes ofChip { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
.slide.is-active .of-chips span { animation: ofChip 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .of-chips span:nth-child(1) { animation-delay: 3.6s; }
.slide.is-active .of-chips span:nth-child(2) { animation-delay: 3.75s; }
.slide.is-active .of-chips span:nth-child(3) { animation-delay: 3.9s; }
.slide.is-active .of-chips span:nth-child(4) { animation-delay: 4.05s; }
.slide.is-active .of-chips span:nth-child(5) { animation-delay: 4.2s; }
.slide.is-active .of-chips span:nth-child(6) { animation-delay: 4.35s; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .of-mic img, .slide.is-active .of-punto, .slide.is-active .of-onda i,
  .slide.is-active .of-chips span, .slide.is-active .of-flujo li { animation: none !important; opacity: 1 !important; transform: none !important; }
  .slide.is-active .of-reglas li .of-tg { animation: none !important; background: #1F883D !important; }
  .slide.is-active .of-reglas li .of-tg::after { animation: none !important; transform: translateX(20px) !important; }
}

@media print {
  .of-mic img, .of-punto, .of-onda i, .of-chips span, .of-flujo li { animation: none !important; opacity: 1 !important; transform: none !important; }
  .of-reglas li .of-tg { animation: none !important; background: #1F883D !important; }
  .of-reglas li .of-tg::after { animation: none !important; transform: translateX(20px) !important; }
}

/* 08: el panel de examenes con dos filas, GH-300 y AI-103, cada una con su
   logo. Los chips del AI-103 van en el azul de Microsoft. */
.of-examen .of-fila { display: flex; align-items: center; gap: 16px; }
.of-examen .of-fila + .of-fila { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.of-examen .of-ex { flex: none; width: 118px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 20px; font-weight: 750; color: var(--text); }
.of-examen .of-ex svg, .of-examen .of-ex img { width: 22px; height: 22px; fill: var(--text); flex: none; }
.of-der .of-panel.of-examen .of-chips { flex: 1; align-content: flex-start; gap: 10px; }
.of-examen .of-chips span { font-size: 19px; padding: 7px 14px; }
.of-examen .of-chips.ms span { border-color: #0078D4; color: #0067B8; background: rgba(0, 120, 212, 0.07); }
:root[data-theme="dark"] .of-examen .of-chips.ms span { color: #4CC2FF; border-color: #4CC2FF; }
.of-der .of-panel.of-examen { justify-content: center; }
.of-examen .of-chips span { font-size: 17px; padding: 5px 12px; }
.of-der .of-panel.of-examen .of-chips { gap: 8px; }
.of-examen .of-fila + .of-fila { margin-top: 12px; padding-top: 12px; }
.of-der { gap: 18px; }
.of-reglas { gap: 10px; }
.of-panel h3 { margin-bottom: 10px; padding-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   07 con mas vida, 25 de septiembre por la noche.
   Arriba "Ingenieria de prompts" se tacha. El chat se escribe solo y debajo
   se prenden doce archivos en rojo, que es literalmente lo que devuelve la
   peticion pobre. Todo mas grande: la lamina tenia un hueco arriba y otro
   abajo.
   ══════════════════════════════════════════════════════════════════════════ */
.encargo { justify-content: center; gap: 26px; }

.enc-tacha { margin: 0; }
.enc-tacha .tx {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-dim);
}
.enc-tacha .raya {
  position: absolute;
  left: -6px; right: -6px;
  top: 54%;
  height: 6px;
  border-radius: 3px;
  background: var(--danger);
  transform: scaleX(0);
  transform-origin: left center;
}
@keyframes encTacha { to { transform: scaleX(1); } }
@keyframes encEntra { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .enc-tacha .tx { animation: encEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.slide.is-active .enc-tacha .raya { animation: encTacha 0.5s cubic-bezier(0.65, 0, 0.35, 1) 1.0s both; }

.encargo .code .ln { font-size: 21px; padding: 9px 20px; }
.encargo .code .et { font-size: 19px; width: 150px; }
.encargo .salida.mala .rs { font-size: 23px; }
.encargo .salida .chip { font-size: 18px; padding: 8px 15px; }
.encargo .salida .fl svg { stroke: var(--text-dim); }

/* El chat se escribe letra por letra */
.encargo .ev.escribe {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}
@keyframes encEscribe { to { clip-path: inset(0 0 0 0); } }
.slide.is-active .encargo .ev.escribe { animation: encEscribe 0.9s steps(16, end) 1.7s both; }

/* Los doce archivos */
.enc-archivos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 6px 20px 18px;
}
.enc-archivos i {
  display: block;
  height: 34px;
  border-radius: 4px 12px 4px 4px;
  border: 2px solid var(--danger);
  background: rgba(207, 34, 41, 0.14);
  opacity: 0;
}
@keyframes encArchivo { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.slide.is-active .enc-archivos i { animation: encArchivo 0.22s ease-out both; }
.slide.is-active .enc-archivos i:nth-child(1) { animation-delay: 2.80s; }
.slide.is-active .enc-archivos i:nth-child(2) { animation-delay: 2.92s; }
.slide.is-active .enc-archivos i:nth-child(3) { animation-delay: 3.04s; }
.slide.is-active .enc-archivos i:nth-child(4) { animation-delay: 3.16s; }
.slide.is-active .enc-archivos i:nth-child(5) { animation-delay: 3.28s; }
.slide.is-active .enc-archivos i:nth-child(6) { animation-delay: 3.40s; }
.slide.is-active .enc-archivos i:nth-child(7) { animation-delay: 3.52s; }
.slide.is-active .enc-archivos i:nth-child(8) { animation-delay: 3.64s; }
.slide.is-active .enc-archivos i:nth-child(9) { animation-delay: 3.76s; }
.slide.is-active .enc-archivos i:nth-child(10) { animation-delay: 3.88s; }
.slide.is-active .enc-archivos i:nth-child(11) { animation-delay: 4.00s; }
.slide.is-active .enc-archivos i:nth-child(12) { animation-delay: 4.12s; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .enc-tacha .tx, .slide.is-active .enc-archivos i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .slide.is-active .enc-tacha .raya { animation: none !important; transform: none !important; }
  .slide.is-active .encargo .ev.escribe { animation: none !important; clip-path: none !important; }
}
@media print {
  .enc-tacha .tx, .enc-archivos i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .enc-tacha .raya { animation: none !important; transform: none !important; }
  .encargo .ev.escribe { animation: none !important; clip-path: none !important; }
}
.encargo .salida .chip { font-size: 16.5px; padding: 7px 12px; } .encargo .salida .chips { gap: 8px; flex-wrap: nowrap; }
.slide.is-active .encargo .salida.mala.anim { animation-delay: 4.3s !important; }

/* 08: tercera fila, Claude, con los chips en el tono de Anthropic. Y el
   flujo con cuatro puntos. */
.of-examen .of-chips.cl span { border-color: #C96442; color: #B4532A; background: rgba(201, 100, 66, 0.08); }
:root[data-theme="dark"] .of-examen .of-chips.cl span { color: #E8906D; border-color: #E8906D; }
:root[data-theme="dark"] .of-examen .of-ex img[src*="anthropic"] { filter: invert(1); }
.of-examen .of-fila + .of-fila { margin-top: 10px; padding-top: 10px; }
.of-flujo ul { gap: 12px; }
.slide.is-active .of-flujo li:nth-child(4) { animation-delay: 6.2s; }
/* 07 sin huecos: el contenido crece hasta llenar la lamina en vez de
   quedar centrado con aire arriba y abajo. */
.encargo { justify-content: flex-start; gap: 30px; padding-top: 6px; }
.enc-tacha .tx { font-size: 60px; }
.encargo .code .ln { font-size: 23px; padding: 13px 22px; }
.encargo .code .et { font-size: 21px; width: 165px; }
.enc-archivos { gap: 12px; padding: 10px 22px 22px; }
.enc-archivos i { height: 50px; }
.encargo .salida.mala .rs { font-size: 26px; }
.encargo .salida .chip { font-size: 18px; padding: 9px 14px; }
.encargo .salida .chip { font-size: 16.5px; padding: 9px 12px; }
/* 07: la pregunta tachada va chica, como un comentario al margen, y los dos
   paneles crecen hasta el pie de la lamina. Dentro de cada panel las lineas
   se reparten el alto, para que no quede franja vacia abajo. */
.enc-tacha .tx { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.enc-tacha .raya { height: 4px; top: 52%; }
.encargo { gap: 22px; padding-top: 0; }
.encargo .grid { flex: 1; min-height: 0; }
.encargo .col .code pre { display: flex; flex-direction: column; justify-content: space-evenly; }
.encargo .col .code pre { justify-content: flex-start; }
.encargo .col .code pre .ln:not(.sola) { flex: 1; align-items: center; }
.encargo .col .code pre .ln.sola { padding-top: 22px; }
.enc-tacha .tx { font-size: 28px; }
.enc-tacha .tx { font-size: 24px; }
.enc-archivos { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 22px 22px; }
.enc-archivos i { height: 76px; }
.enc-archivos i { height: 56px; } .enc-archivos { gap: 12px; padding: 4px 22px 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   08 redistribuida, 25 de septiembre por la noche: el microfono pierde
   jerarquia (era lo mas grande de la lamina), y los cuatro paneles reparten
   su alto sin huecos. Los pasos de Workflows se unen con una linea que se
   dibuja mientras entran, porque son un flujo.
   ══════════════════════════════════════════════════════════════════════════ */
.oficio .of-grid { grid-template-columns: 42fr 58fr; }
.of-izq .of-mic { height: 168px; }
.of-mic figcaption { font-size: 23px; bottom: 12px; left: 18px; }
.of-rec { top: 12px; left: 12px; padding: 7px 12px 7px 9px; gap: 10px; }
.of-punto { width: 22px; height: 22px; }
.of-onda { height: 22px; }

.of-flujo { display: flex; flex-direction: column; }
.of-flujo ul { position: relative; flex: 1; justify-content: space-evenly; gap: 0; }
.of-flujo li { font-size: 23px; position: relative; z-index: 1; }
.of-flujo li svg { width: 26px; height: 26px; background: var(--surface); padding: 3px 0; box-sizing: content-box; }
.of-flujo ul::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12%;
  bottom: 12%;
  width: 2px;
  background: var(--accent);
  opacity: 0.45;
  transform: scaleY(0);
  transform-origin: top center;
}
@keyframes ofLinea { to { transform: scaleY(1); } }
.slide.is-active .of-flujo ul::before { animation: ofLinea 1.8s ease-in-out 5.0s forwards; }

.of-der .of-panel { flex: 1; display: flex; flex-direction: column; }
.of-reglas { flex: 1; justify-content: space-evenly; gap: 0; }
.of-reglas li { font-size: 23px; }
.of-der .of-panel.of-examen { justify-content: flex-start; }
.of-examen .of-fila { flex: 1; }
.of-examen .of-fila + .of-fila { margin-top: 0; padding-top: 0; }

@media (prefers-reduced-motion: reduce) { .slide.is-active .of-flujo ul::before { animation: none; transform: none; } }
@media print { .of-flujo ul::before { transform: none; } }