/* ==========================================================================
   05-cierre.css : laminas 11, 12, 13 y 14

   La 12 NO trae estilos propios. Usa el componente .enf de la lamina 04 tal
   cual, con las mismas clases, los mismos colores y los mismos tiempos, y
   solo le pasa otros valores por las variables que la propia pieza expone
   (--to y --h). Ese eco es el recurso narrativo de la ponencia y se
   rompe en cuanto alguien escriba aqui una regla que lo retoque.
   ========================================================================== */

/* ── La pila de capas, lamina 11 ─────────────────────────────────────────
   Se dibuja de arriba hacia abajo, con la capa nueva arriba. Cada franja es
   mas ancha que la de encima, porque lo de abajo sostiene a lo de arriba y
   esa es exactamente la idea que la lamina defiende.

   Los nombres son de una o dos palabras, asi que el contenido de cada franja
   lleva ancho fijo y va centrado. Con eso las tres columnas (icono, ano y
   nombre) quedan alineadas entre franjas aunque las franjas midan distinto,
   y la piramide crece pareja hacia los dos lados. */
.pila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.cp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 20px;
  box-shadow: var(--card-shadow);
}

/* Cada capa mas abajo, un poco mas ancha */
.cp:nth-child(1) { width: 50%; }
.cp:nth-child(2) { width: 60%; }
.cp:nth-child(3) { width: 70%; }
.cp:nth-child(4) { width: 80%; }
.cp:nth-child(5) { width: 90%; }
.cp:nth-child(6) { width: 100%; }

/* Un icono por epoca. No son adornos: dan de un vistazo con que se programaba
   en cada capa, que es lo que la lamina esta contando, y sacan a la pila de ser
   seis rectangulos blancos iguales. */
.cp-i { flex: none; width: 24px; height: 24px; display: block; color: var(--text-faint); }

.cp-i svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Los anos se probaron en gris claro y no se leian proyectados */
.cp-a {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  flex: none;
  width: 56px;
}

/* Ancho fijo, para que la columna de nombres arranque en el mismo sitio en
   las seis franjas */
.cp-n { flex: none; width: 150px; font-size: 19px; color: var(--text); }

/* La capa de ahora se distingue, pero no se corona: el argumento de la lamina
   es que no es mejor que las de abajo, solo es la ultima */
.cp.ahora {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--glow);
}

.cp.ahora .cp-a { color: var(--accent); }
.cp.ahora .cp-i { color: var(--accent); }
.cp.ahora .cp-n { color: var(--text); font-weight: 650; }

/* Las capas se van aclarando hacia abajo, que es hacia atras en el tiempo.
   Da profundidad sin colorear nada. */
.cp:nth-child(4) .cp-i, .cp:nth-child(5) .cp-i, .cp:nth-child(6) .cp-i { opacity: 0.75; }
.cp:nth-child(5) .cp-n, .cp:nth-child(6) .cp-n { color: var(--text-dim); }

/* Entran de abajo hacia arriba, en el orden en que ocurrieron */
.slide.is-active .cp { opacity: 0; animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.slide.is-active .cp:nth-child(6) { animation-delay: 0.30s; }
.slide.is-active .cp:nth-child(5) { animation-delay: 0.42s; }
.slide.is-active .cp:nth-child(4) { animation-delay: 0.54s; }
.slide.is-active .cp:nth-child(3) { animation-delay: 0.66s; }
.slide.is-active .cp:nth-child(2) { animation-delay: 0.78s; }
.slide.is-active .cp:nth-child(1) { animation-delay: 0.94s; }

/* ── La franja de certificaciones ────────────────────────────────────────
   Nombres sueltos, sin precios ni explicacion. Lo que dice la franja es que
   hay una fiebre, no cual conviene.

   Va alineada con la pila y centrada, para que se lea como el pie de la
   piramide y no como otra lamina pegada abajo. */
.credenciales {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 26px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* El rotulo escrito de esta franja se cayo: gastaba cuatro palabras del
   presupuesto de la lamina para decir lo que el sello ya dice. Un sello
   delante de seis codigos se lee como credenciales sin una sola palabra, y
   de que van se cuenta hablando. */
.cr-sello {
  flex: none;
  width: 22px;
  height: 22px;
  display: block;
  margin-right: 6px;
  color: var(--text-dim);
}

.cr-sello svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Estas etiquetas se probaron en gris claro sobre gris y no se leian. Un
   videobeam lava justo ese rango. Van sobre blanco, con borde y con el texto
   al color de cuerpo, no al de apoyo.

   El relleno bajo de 7 a 6 y el hueco interno de 8 a 7 al entrar los
   logotipos. Con las medidas anteriores las seis fichas se pasaban de los
   680 pixeles de la pila y la franja se partia en dos filas, que la
   desprendia del pie de la piramide. */
.cr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: var(--card-shadow);
}

/* ── Los logotipos de cada marca ─────────────────────────────────────────
   Son los oficiales, descargados y guardados en assets/logos, asi que el dia
   de la ponencia no se le pide nada a internet.

   Van pequenos y a la izquierda del nombre. No estan de adorno: la sala
   reconoce la marca antes de leer el codigo del examen, y eso es justamente
   lo que la lamina esta diciendo, que cada capa trae su propia fiebre de
   credenciales con nombre y apellido. */
.cr-logo {
  flex: none;
  display: block;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* Amazon e IBM no tienen simbolo suelto: su marca es la palabra. Se les da
   alto de letra y ancho libre, para que no queden aplastadas dentro de un
   cuadrado que no les corresponde. */
.cr-logo.ancho { width: auto; height: 11px; max-width: 34px; }

/* Con la tecla T el deck se va a oscuro y dos de estas marcas son casi
   negras, asi que desaparecerian sobre la ficha. Cada logotipo se apoya
   entonces en una placa blanca, que ademas es como las publican sus propios
   manuales de marca. */
:root[data-theme="dark"] .cr-logo {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 1px;
  box-sizing: content-box;
}

/* ── Lamina 12 ───────────────────────────────────────────────────────────
   Aqui no va nada. Las dos barras son el componente .enf de la lamina 04 y
   sus estilos viven en laminas/02-golpe.css, que es de otra mano. Lo unico
   que la 12 cambia son los valores que la pieza recibe en el marcado.
   ────────────────────────────────────────────────────────────────────── */

/* ── La lamina de cierre, oscura ─────────────────────────────────────────── */
.final { display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 900px; }

.fin-frase {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 52px;
}

/* La cita se compone igual que la de Karpathy en la lamina 03, para que las
   dos se lean como un par separado por nueve minutos */
.fin-cita { border-left: 3px solid var(--accent); padding-left: 22px; }

.fin-cita p {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 1000px;
  text-wrap: balance;
}

/* La atribucion de la cita lleva quien es. La sala no tiene por que saber quien
   fue Ken Thompson, y sin eso la cita pierde la mitad de su peso. */
/* Quien es va a cuerpo de lectura y en el blanco roto del texto, no en el
   gris tenue: el proyector lava el gris y sin saber quien fue Thompson la
   cita pierde la mitad de su peso. */
.fin-cita span {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}

.fin-cita span i {
  display: block;
  font-style: normal;
  font-size: 19px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── El consejo ──────────────────────────────────────────────────────────
   Tres lineas y la franja del calendario. Las dos primeras a cuerpo de
   frase, la tercera mas grande y en el verde del diff de la portada, que es
   el color de lo que se agrega. La lamina cierra con el mismo color con que
   se abrio la ponencia. */
.consejo { display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 1040px; }

.cj-l {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  opacity: 0;
}

.cj-l b { font-weight: 800; color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.cj2 { margin-top: 14px; }
.cj3 { margin-top: 44px; font-size: 54px; font-weight: 700; color: #7EE787; }

.cj-cal { display: block; width: 100%; height: auto; margin-top: 40px; opacity: 0; }
.cj-c { fill: #30363D; }
.cj-c.v { fill: #30363D; }

@keyframes cjEntra { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes cjAparece { to { opacity: 1; } }
@keyframes cjVerde { to { fill: var(--t); } }

.slide.is-active .cj1 { animation: cjEntra 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
.slide.is-active .cj-cal { animation: cjAparece 0.8s ease-out 0.9s forwards; }
.slide.is-active .cj2 { animation: cjEntra 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2.6s forwards; }
.slide.is-active .cj-c.v { animation: cjVerde 0.25s ease-out forwards; animation-delay: calc(2.9s + var(--i) * 0.09s); }
.slide.is-active .cj3 { animation: cjEntra 0.7s cubic-bezier(0.22, 1, 0.36, 1) 5.4s forwards; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .cj-l, .slide.is-active .cj-cal { animation: none !important; opacity: 1 !important; }
  .slide.is-active .cj-c.v { animation: none !important; fill: var(--t) !important; }
}

@media print {
  .cj-l, .cj-cal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cj-c.v { animation: none !important; fill: var(--t) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Lamina 14, contacto y referencias.

   Es la unica lamina sin tope de palabras, porque queda proyectada durante
   toda la ronda de preguntas y la sala la fotografia. Estaba resuelta como
   dos bloques planos uno al lado del otro, y una lamina que va a estar diez
   minutos en pantalla necesita una composicion que aguante mirarla.

   Ahora la reticula tiene un lado corto y uno largo: a la izquierda el
   camino rapido, que es el codigo y los tres enlaces, y a la derecha las
   catorce fuentes ordenadas para leerse.
   ══════════════════════════════════════════════════════════════════════════ */
.cierre-contacto {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}

.col-qr { display: flex; flex-direction: column; gap: 18px; }

/* ── El codigo ───────────────────────────────────────────────────────────
   Un codigo proyectado se lee desde unas diez veces su ancho, asi que crecio
   de 208 a 272 pixeles: con eso alcanza comodo a la mitad delantera del
   auditorio. La direccion escrita debajo es para la otra mitad.

   El ancho de la ficha del codigo manda en toda la columna y las tres del
   enlace miden lo mismo. Con medidas distintas el borde derecho quedaba
   dentado y la columna se leia como tres piezas sueltas. */
.qr-bloque { display: flex; flex-direction: column; align-items: stretch; gap: 11px; }

.qr-marco {
  position: relative;
  padding: 14px;
  background: #FFFFFF;
  border-radius: var(--r);
  box-shadow: var(--card-shadow), var(--glow);
}

.qr-marco img { width: 272px; height: 272px; display: block; }

/* Dos esquinas de encuadre, como las de una camara cuando busca un codigo.
   Dicen que eso se escanea sin gastar una palabra en explicarlo, que es la
   unica razon por la que estan. */
.qr-marco::before,
.qr-marco::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--accent);
}

.qr-marco::before { top: 7px; left: 7px; border-width: 3px 0 0 3px; border-radius: 7px 0 0 0; }
.qr-marco::after { bottom: 7px; right: 7px; border-width: 0 3px 3px 0; border-radius: 0 0 7px 0; }

.qr-url {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Los tres enlaces ────────────────────────────────────────────────────
   Antes eran dos direcciones sueltas en gris claro, que es el gris que el
   videobeam lava. Ahora cada una es una ficha con la marca de su red
   dibujada en linea: desde el fondo del salon se reconoce el icono mucho
   antes de poder leer la direccion.

   Las clases llevan nombre propio y no reutilizan .contacto .en, que es una
   pieza compartida de components.css con otras medidas. Compartir el nombre
   dejaba a esta columna a merced de una hoja que no es de esta lamina. */
.enlaces { display: flex; flex-direction: column; gap: 9px; }

.enl {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--card-shadow);
}

.enl-i { flex: none; width: 20px; height: 20px; display: block; color: var(--text); }
.enl-i svg { width: 20px; height: 20px; fill: currentColor; }

/* El globo del portafolio va de trazo, no de mancha */
.enl-i svg.ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enl-u {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text-dim);
  letter-spacing: -0.015em;
}

/* ── Las fuentes ─────────────────────────────────────────────────────────
   Estan ahi para que alguien las lea y las fotografie, asi que no van en
   letra pequena de pie de pagina. Numero en color, texto al gris de cuerpo,
   y una linea arriba que las separa del resto de la lamina. */
.col-refs { align-self: start; }

.refs-h {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dim);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.ref-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }

.ref-col { display: flex; flex-direction: column; gap: 12px; }

.ref-r { display: flex; gap: 11px; align-items: baseline; }

.ref-n {
  flex: none;
  width: 22px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ref-t {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   11 y 12 rehechas el 25 de septiembre por la noche. Las reglas .pila, .cp,
   .credenciales y .cr de arriba quedan sin uso y no se borran.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 11 Las bases ─────────────────────────────────────────────────────── */
.bases .bs-grid { display: grid; grid-template-columns: 56fr 44fr; gap: 34px; align-items: stretch; }

.pila2 { display: flex; flex-direction: column; gap: 8px; }

.c2 {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 14px -12px rgba(31, 35, 40, 0.5);
}

/* Ancho que crece hacia abajo, como una piramide: la de abajo sostiene */
.c2.c6 { margin: 0 60px; }
.c2.c5 { margin: 0 48px; }
.c2.c4 { margin: 0 36px; }
.c2.c3 { margin: 0 24px; }
.c2.c2b { margin: 0 12px; }
.c2.c1 { margin: 0; }

.c2.ahora { border: 2px solid var(--accent); }
.c2.ahora .c2-a, .c2.ahora .c2-n { color: var(--accent); }

.c2-a { font-family: var(--font-mono); font-size: 18px; font-weight: 650; color: var(--text); }
.c2-n { font-size: 22px; font-weight: 600; color: var(--text); }
.c2-l { display: flex; align-items: center; gap: 12px; }
.c2-l .cp-logo { height: 28px; width: 28px; object-fit: contain; display: block; }
.c2-l .cp-logo.ancho { width: auto; height: 22px; }

:root[data-theme="dark"] .c2-l svg.cp-logo.cop { fill: #E6EDF3; }
:root[data-theme="dark"] .c2-l svg.cp-logo.chip { stroke: #C9D1D9; }
:root[data-theme="dark"] .c2-l img.cp-logo[src*="aws"],
:root[data-theme="dark"] .ct-logo[src*="aws"] { filter: brightness(0) invert(1); opacity: 0.92; }

/* Se construye de abajo hacia arriba, una capa encima de la otra */
@keyframes c2Pone { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .c2 { animation: c2Pone 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .c2.c1  { animation-delay: 0.30s; }
.slide.is-active .c2.c2b { animation-delay: 0.60s; }
.slide.is-active .c2.c3  { animation-delay: 0.90s; }
.slide.is-active .c2.c4  { animation-delay: 1.20s; }
.slide.is-active .c2.c5  { animation-delay: 1.50s; }
.slide.is-active .c2.c6  { animation-delay: 1.80s; }

/* El dato de BairesDev */
.bs-nota {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.bs-tit { padding: 12px 14px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; }
.bs-tit img { display: block; width: 100%; height: auto; }

.bs-dato { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.bs-dato b { grid-row: 1 / span 2; font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.bs-dato.j b { color: var(--accent); }
.bs-dato.s b { color: var(--danger); }
.bs-barra { display: block; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.bs-barra i { display: block; height: 100%; width: var(--w); border-radius: 7px; transform-origin: left center; }
.bs-dato.j .bs-barra i { background: var(--accent); }
.bs-dato.s .bs-barra i { background: var(--danger); }
.bs-eti { font-size: 19px; color: var(--text); margin-top: 6px; }

.bs-nota figcaption { font-size: 18px; font-weight: 500; color: var(--text); padding-left: 12px; border-left: 3px solid var(--accent); }

@keyframes bsCrece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bsEntra { from { opacity: 0; } to { opacity: 1; } }
.slide.is-active .bs-nota { animation: bsEntra 0.5s ease-out 0.4s both; }
.slide.is-active .bs-dato.j .bs-barra i { animation: bsCrece 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.4s both; }
.slide.is-active .bs-dato.s .bs-barra i { animation: bsCrece 0.9s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both; }

.bs-frase {
  margin-top: 22px;
  padding-left: 18px;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}
.slide.is-active .bs-frase { animation: bsEntra 0.6s ease-out 4.2s both; }

/* ── 12 Las certificaciones ───────────────────────────────────────────── */
.certs { justify-content: center; }
.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ct {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 176px;
  justify-content: center;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.ct.lit { border: 2px solid var(--accent); }
/* El nombre de quien da la certificacion, en texto: los logos de esas marcas
   piden permiso escrito. El de GitHub si va, junto al nombre. */
.ct-marca { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 0 12px; font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ct-marca img { height: 26px; width: 26px; display: block; }
:root[data-theme="dark"] .ct-marca img { filter: invert(1); }
.ct-logo { height: 40px; width: 40px; object-fit: contain; object-position: left center; margin-bottom: 12px; }
.ct-logo.ancho { width: auto; height: 30px; margin: 5px 0 17px; }
.ct b { font-family: var(--font-display); font-size: 28px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); }
.ct span { font-size: 21px; color: var(--text); }
.ct i { font-style: normal; font-size: 18px; color: var(--text-dim); margin-top: 4px; }

:root[data-theme="dark"] .ct-logo[src*="github-mark"],
:root[data-theme="dark"] .ct-logo[src*="anthropic"] { filter: invert(1); }

@keyframes ctSube { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.slide.is-active .ct { animation: ctSube 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide.is-active .ct:nth-child(1) { animation-delay: 0.3s; }
.slide.is-active .ct:nth-child(2) { animation-delay: 0.5s; }
.slide.is-active .ct:nth-child(3) { animation-delay: 0.7s; }
.slide.is-active .ct:nth-child(4) { animation-delay: 0.9s; }
.slide.is-active .ct:nth-child(5) { animation-delay: 1.1s; }
.slide.is-active .ct:nth-child(6) { animation-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .c2, .slide.is-active .bs-nota, .slide.is-active .bs-frase, .slide.is-active .ct { animation: none !important; opacity: 1 !important; transform: none !important; }
  .slide.is-active .bs-barra i { animation: none !important; transform: none !important; }
}

@media print {
  .c2, .bs-nota, .bs-frase, .ct { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bs-barra i { animation: none !important; transform: none !important; }
}

/* ── Contacto, 25 de septiembre por la noche ───────────────────────────
   Cuatro enlaces y no tres: entra Instagram. Cada uno con el color de su
   marca, que es lo que se reconoce desde el fondo, y la direccion al color
   de texto, no al gris. Dieciseis fuentes a cuerpo de lectura. */
.cierre-contacto .enl { padding: 10px 14px; }
.cierre-contacto .enl-i, .cierre-contacto .enl-i svg { width: 24px; height: 24px; }
.cierre-contacto .enl-u { font-size: 17px; color: var(--text); }
.cierre-contacto .enl.gh .enl-i { color: #1F2328; }
.cierre-contacto .enl.li .enl-i { color: #0A66C2; }
.cierre-contacto .enl.ig .enl-i { color: #E4405F; }
.cierre-contacto .enl.web .enl-i { color: var(--accent); }
:root[data-theme="dark"] .cierre-contacto .enl.gh .enl-i { color: #E6EDF3; }

.cierre-contacto .refs-h { color: var(--text); }
.cierre-contacto .ref-col { gap: 9px; }
.cierre-contacto .ref-t { font-size: 18px; line-height: 1.32; color: var(--text); }
.cierre-contacto .ref-n { font-size: 16px; width: 26px; }
.cierre-contacto .col-qr { gap: 12px; }
.cierre-contacto .qr-marco { padding: 12px; display: flex; justify-content: center; }
.cierre-contacto .qr-marco img { width: 232px; height: 232px; }
.cierre-contacto .enlaces { gap: 7px; }
.cierre-contacto .enl { padding: 8px 14px; }

/* 15: los dias sueltos de los años anteriores, fijos desde que entra la
   franja. Pedido el 25 de septiembre por la noche. */
.cj-c.p { fill: var(--t); }

/* Contacto: el agradecimiento grande arriba a la derecha, a la altura del
   titulo. Es lo ultimo que se dice y la lamina queda proyectada con el. */
.gracias {
  position: absolute;
  top: -10px;
  right: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}