/**
 * Recursos — el archivo editorial.
 *
 * El problema de esta página no es de estilo, es de cantidad: hay tres piezas
 * publicadas y seis temas declarados. Una grilla de tres tarjetas iguales
 * anunciaría un blog que no existe y dejaría tres huecos que parecen un error.
 *
 * La respuesta es una composición con proporciones desiguales: una lectura
 * principal a lo ancho —lámina grande a la izquierda, texto a la derecha— y dos
 * secundarias más chicas, en columna, desniveladas entre sí. El tamaño es lo
 * que dice cuál importa más; no hace falta una etiqueta de "destacado".
 *
 * Las tres piezas están **completas** en la página. No son adelantos con un
 * "leer más" que llevaría a un artículo inexistente: por eso ninguna es un
 * enlace, y por eso el texto se lee entero acá.
 *
 * Las láminas no son ilustraciones: cada una dibuja el argumento de su texto
 * —el ritmo y la excepción, el límite y lo que queda arriba, el guion y el
 * objetivo— y lleva debajo una leyenda de una línea que dice qué se está
 * viendo. Las tres se dibujan distinto para que nunca se lean como tres
 * instancias de la misma plantilla. El vocabulario es el de `escenas.css`; acá
 * viven solo las composiciones y los colores de cada figura.
 */

/* --- 1 · Portada -----------------------------------------------------------
   El título de la página, dibujado: a la izquierda lo que se lee, a la derecha
   lo que esa lectura habilita. El corte entre los dos mundos es una sola línea
   vertical y un tinte apenas más violeta del lado operativo —el mismo recurso
   que usa el caso del chat en Soluciones—, porque un rótulo grande diciendo
   "antes" y "después" sobraría al lado de un h1 que ya lo dice. */

.hoja-portada-cuerpo { padding-top: clamp(20px, 3.5vh, 48px); }

.rec-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  min-height: 540px;
  margin-top: clamp(36px, 5vh, 68px);
}

/* Dos filas: el rótulo arriba y la composición centrada en lo que sobra. Sin
   `position: absolute` para el rótulo, que se descoloca en cuanto la escena
   cambia de alto. */
.rec-hero > div {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  padding: clamp(30px, 4vh, 46px) clamp(26px, 3vw, 44px);
}

/* El aire extra de la izquierda es funcional: la pila se abre hacia ese lado y
   sin ese margen el `overflow: hidden` del lienzo le cortaría el canto. El
   selector repite `.rec-hero` porque el `padding` de arriba es más específico
   que una clase suelta y se lo comería. */
.rec-hero > .rec-hero-lectura { padding-left: clamp(52px, 5vw, 88px); }
.rec-hero-operacion { border-left: 1px solid var(--line-soft); background: rgba(124, 58, 237, .028); }

.rec-rotulo {
  justify-self: start;
  margin: 0;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rec-hero-operacion .rec-rotulo { color: var(--violet-deep); }

/* La pila. Tres hojas, la de adelante abierta: es el archivo, no un documento.
   El desplazamiento va en `translate`/`rotate`/`scale` —las propiedades
   individuales— y no en `transform`, porque `esc-entra` usa `transform` y con
   `animation-fill-mode: both` se lo quedaría al terminar. Así conviven. */
.rec-pila {
  position: relative;
  align-self: center;
  width: min(100%, 430px);
  aspect-ratio: 4 / 3;
}

.rec-pliego {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(76, 29, 149, .09);
  transition: translate var(--paso-largo) var(--curva-blanda), rotate var(--paso-largo) var(--curva-blanda);
}

.rec-pliego--fondo { translate: -40px 0; rotate: -3deg; scale: .92; opacity: .5; }
.rec-pliego--medio { translate: -20px 0; rotate: -1.5deg; scale: .96; opacity: .78; }

.rec-pliego--frente {
  display: grid;
  align-content: center;
  gap: 13px;
  padding: clamp(20px, 2.2vw, 32px);
}

/* El renglón marcado es la idea que se está entendiendo. Uno solo: dos ya no
   marcan nada. */
.rec-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rec-titulo i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--violet); }
.rec-titulo b { width: 46%; height: 10px; border-radius: 999px; background: rgba(124, 58, 237, .22); }

.rec-renglon { display: block; width: 100%; height: 7px; border-radius: 999px; background: var(--line-soft); }
.rec-renglon--medio { width: 84%; }
.rec-renglon--corto { width: 58%; }
.rec-renglon--marcado { width: 74%; background: rgba(124, 58, 237, .3); }

/* La cadena de la derecha. Cada hilo es un SVG del alto exacto de su hueco: no
   hay porcentajes que calzar contra un `viewBox` estirado y por eso la línea no
   puede terminar a treinta píxeles de la pieza. */
.rec-cadena { display: grid; align-self: center; justify-items: center; }
.rec-hilo { display: block; width: 26px; height: clamp(42px, 5.6vh, 64px); }
.rec-agente .cara { --cara: 68px; }

/* --- 2 · Los temas ---------------------------------------------------------
   Seis temas declarados, tres con algo adentro. Los vacíos van apagados y con
   el borde punteado: punteado se lee como espacio reservado, mientras que un
   chip apagado con borde sólido se lee como un enlace que no responde. El
   estado también va en texto para quien no ve el contraste. */

.rec-temas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(48px, 7vh, 88px);
  padding-top: clamp(24px, 3.2vh, 36px);
  border-top: 1px solid var(--line-soft);
}

.rec-temas-rotulo {
  margin: 0 14px 0 0;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rec-tema { position: relative; }
.rec-tema i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--violet); }
.rec-tema--vacio { border-style: dashed; border-color: var(--line); background: transparent; color: var(--rotulo); }

/* El único tema que en vez de lecturas tiene página propia: el control, los
   límites y la aprobación humana se cuentan enteros en Seguridad. Por eso es
   un enlace y no un chip apagado: acá sí hay adónde ir. */
.rec-tema--enlace { text-decoration: none; transition: border-color var(--paso) var(--curva), background var(--paso) var(--curva), color var(--paso) var(--curva); }
.rec-tema--enlace span[aria-hidden] { color: var(--violet); }
.rec-tema--enlace:hover,
.rec-tema--enlace:focus-visible { border-color: rgba(124, 58, 237, .38); background: rgba(124, 58, 237, .07); color: var(--violet-deep); }

.rec-temas-nota { flex-basis: 100%; margin-top: 8px; color: var(--rotulo); font-size: 12.5px; }

/* El texto que solo existe para quien escucha la página. */
.rec-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 3 · Las lecturas ------------------------------------------------------
   Ni tarjetas ni bordes alrededor del texto: la única superficie es la lámina.
   Lo que separa una pieza de otra es el aire y una regla de un píxel, que es
   como se separan las piezas de una revista. */

.rec-lecturas { display: grid; gap: clamp(56px, 8vh, 104px); }

.rec-lectura--principal {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(32px, 4vw, 68px);
}

/* Las dos secundarias comparten forma —lámina arriba, texto abajo— pero no
   altura: el desnivel es lo que evita que se lean como un par de tarjetas
   gemelas. Sin ancho el desnivel no significa nada y se retira. */
.rec-secundarias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.rec-secundarias > :nth-child(2) { margin-top: clamp(28px, 5vh, 72px); }

.rec-lectura--menor { padding-top: clamp(22px, 3vh, 34px); border-top: 1px solid var(--line-soft); }

/* La figura envuelve la lámina y su leyenda: el vidrio tiene `overflow: hidden`
   y no puede contener texto que vive debajo de su canto. La leyenda dice en una
   línea qué se está viendo —antes eso vivía solo en comentarios del código,
   donde ningún visitante lo lee. */
.rec-figura { display: grid; gap: 14px; }
.rec-figura figcaption { max-width: 64ch; line-height: 1.5; }

.rec-lamina { transition: transform var(--paso-largo) var(--curva-blanda), box-shadow var(--paso-largo) var(--curva-blanda); }
.rec-lamina svg { display: block; width: 100%; height: 100%; }
.rec-lamina--principal { aspect-ratio: 640 / 330; }
.rec-lamina--menor { aspect-ratio: 560 / 300; border-radius: 26px; }

.rec-categoria {
  margin: 0 0 14px;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* La fecha comparte renglón con la categoría y se distingue solo por el peso:
   un dato de archivo, no una segunda etiqueta. */
.rec-fecha { font-weight: 560; }

.rec-lectura h3 { margin: 0; letter-spacing: -.038em; line-height: 1.1; }
.rec-lectura-texto p:last-child { margin: 18px 0 0; color: var(--muted); line-height: 1.72; }

.rec-lectura--principal h3 { font-size: clamp(28px, 2.9vw, 42px); font-weight: 650; }
.rec-lectura--principal .rec-lectura-texto p:last-child { max-width: 42ch; font-size: clamp(16.5px, 1.2vw, 18.5px); }

.rec-lectura--menor .rec-lectura-texto { margin-top: clamp(22px, 3vh, 32px); }
.rec-lectura--menor h3 { font-size: clamp(21px, 1.9vw, 27px); font-weight: 640; }
.rec-lectura--menor .rec-lectura-texto p:last-child { max-width: 48ch; font-size: 15.5px; }

/* --- Lámina 1 · el ritmo y la excepción -------------------------------------
   Tareas idénticas repitiéndose sobre una base, un tramo encuadrado que es el
   proceso elegido, la marca cian de que el resultado se puede verificar y una
   sola tarea despegada del compás: la excepción que necesita a una persona. */

.rec-base { fill: none; stroke: var(--line-soft); stroke-width: 1.5; }
.rec-l1-barra { fill: rgba(124, 58, 237, .12); }
.rec-l1-barra--elegida { fill: rgba(124, 58, 237, .26); }
.rec-l1-marco { fill: rgba(124, 58, 237, .05); stroke: rgba(124, 58, 237, .26); stroke-width: 1.5; }
.rec-l1-sello { fill: rgba(8, 145, 178, .1); stroke: rgba(8, 145, 178, .34); stroke-width: 1.5; }
.rec-l1-marca { fill: none; stroke: var(--cian); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rec-l1-excepcion { fill: none; stroke: rgba(124, 58, 237, .4); stroke-width: 1.5; stroke-dasharray: 5 5; }
.rec-l1-anillo { fill: none; stroke: rgba(124, 58, 237, .34); stroke-width: 1.5; }

.rec-l1-verifica,
.rec-l1-aparte { transition: transform var(--paso-largo) var(--curva-blanda); }

/* --- Lámina 2 · el límite ---------------------------------------------------
   Abajo, la trama de lo que el sistema resuelve solo, dibujada con un patrón:
   treinta y seis rectángulos escritos a mano serían el mismo dibujo con
   treinta y cinco líneas más. Arriba de la línea, cuatro decisiones sueltas y
   con aire alrededor —las cuatro que el texto deja del lado de una persona. */

.rec-mota { fill: rgba(124, 58, 237, .12); }
.rec-l2-halo { fill: rgba(124, 58, 237, .06); }
.rec-l2-marca { fill: rgba(124, 58, 237, .14); stroke: rgba(124, 58, 237, .34); stroke-width: 1.5; }
.rec-l2-nucleo { fill: var(--violet); }

.rec-l2-alto { transition: transform var(--paso-largo) var(--curva-blanda); }

/* --- Lámina 3 · el guion y el objetivo --------------------------------------
   A la izquierda, la automatización: pasos idénticos ensartados en una línea
   recta, el guion que no sabe salirse de sí. A la derecha, la misión: una
   bandera como objetivo, tres integrantes que suben hacia ella por caminos
   distintos —eso es el criterio—, un sello de aprobación donde la decisión
   importa y el registro corriendo al costado en cian, que es el color del dato
   en todo el sistema. */

.rec-l3-paso { fill: rgba(124, 58, 237, .12); }
.rec-l3-asta { fill: none; stroke: rgba(124, 58, 237, .4); stroke-width: 1.5; stroke-linecap: round; }
.rec-l3-bandera { fill: rgba(124, 58, 237, .26); stroke: rgba(124, 58, 237, .4); stroke-width: 1; stroke-linejoin: round; }
.rec-l3-agente { fill: rgba(124, 58, 237, .14); stroke: rgba(124, 58, 237, .34); stroke-width: 1.5; }
.rec-l3-nucleo { fill: var(--violet); }
/* El sello va casi opaco para que el camino no lo atraviese: es una parada,
   no un adorno sobre la línea. */
.rec-l3-sello { fill: rgba(255, 255, 255, .9); stroke: rgba(124, 58, 237, .34); stroke-width: 1.5; }
.rec-l3-tilde { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rec-l3-mision { transition: transform var(--paso-largo) var(--curva-blanda); }

/* --- 4 · La salvedad -------------------------------------------------------
   Lo que todavía no existe se dice en voz baja y en su propio renglón, no
   escondido en un pie. Arranca más cerca de lo que corrige que del cierre:
   los 150 px de aire de una sección la habrían dejado flotando sola.

   Los renglones punteados de la derecha no son un cargando: es el lugar ya
   reservado, y por eso se apagan hacia abajo en vez de repetirse iguales. */

.rec-seccion-nota { padding-top: clamp(20px, 3vh, 44px); }

.rec-nota {
  display: grid;
  grid-template-columns: minmax(0, .3fr) minmax(0, 1fr) minmax(0, .34fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1120px;
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--line-soft);
}

.rec-nota-rotulo {
  margin: 0;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rec-nota h2 {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 640;
  letter-spacing: -.032em;
  line-height: 1.22;
}

.rec-nota-cuerpo p { margin: 18px 0 0; max-width: 54ch; color: var(--muted); font-size: 16.5px; line-height: 1.72; }

.rec-espera { display: grid; align-self: center; gap: clamp(14px, 2vh, 22px); }
.rec-espera i { display: block; height: 0; border-top: 1px dashed var(--line); }
.rec-espera i:nth-child(2) { width: 66%; opacity: .6; }
.rec-espera i:nth-child(3) { width: 38%; opacity: .34; }

/* --- 5 · Cierre -------------------------------------------------------------
   `paginas.css` estila el párrafo del cierre como hijo directo de la sección,
   pero el esqueleto lo mete dentro de `.hoja` —que es donde `site.js` busca lo
   que tiene que revelar—, así que ahí nunca lo alcanza. Se lo damos acá con los
   mismos valores en vez de sacar el párrafo de la columna. */

.hoja-cierre .hoja > p { max-width: 560px; margin: 24px auto 0; color: var(--muted); font-size: 17px; line-height: 1.65; }

/* --- Hover ------------------------------------------------------------------
   Elevación mínima y la composición que responde: la pila se abre un poco más,
   la lámina despega cuatro píxeles y dentro de cada una se mueve exactamente lo
   que el texto señala —la excepción, lo que queda arriba del límite, la misión
   entera menos su registro—. Todo es agregado: sin cursor la escena ya está
   completa.

   La sombra de la lámina levantada usa el mismo tinte que la de `.esc` en
   `escenas.css`, solo más abierta: cambiarle el color al despegar delataría que
   son dos sombras distintas y no la misma pieza a otra altura. */

@media (hover: hover) {
  .rec-hero:hover .rec-pliego--fondo { translate: -56px 0; rotate: -4.4deg; }
  .rec-hero:hover .rec-pliego--medio { translate: -28px 0; rotate: -2.2deg; }

  .rec-lectura:hover .rec-lamina {
    transform: translateY(-4px);
    box-shadow: 0 46px 126px rgba(47, 32, 88, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
  }

  .rec-lectura:hover .rec-l1-aparte { transform: translateY(-7px); }
  .rec-lectura:hover .rec-l1-verifica { transform: translate(3px, -3px); }
  .rec-lectura:hover .rec-l2-alto { transform: translateY(-6px); }
  .rec-lectura:hover .rec-l3-mision { transform: translateY(-5px); }
}

/* --- Escalas ----------------------------------------------------------------
   Cada bloque **se recompone**. La portada pasa de dos mundos lado a lado a uno
   sobre el otro y el corte deja de ser vertical para ser horizontal. La lectura
   principal deja de ser lámina y texto en paralelo y pasa a ser lámina y texto
   uno debajo del otro, que sigue siendo la pieza más grande de la página. Las
   secundarias pierden el desnivel, que sin ancho es solo espacio perdido. */

@media (max-width: 1000px) {
  .rec-hero { min-height: 480px; }

  .rec-lectura--principal { grid-template-columns: 1fr; gap: clamp(24px, 3.4vh, 36px); }
  .rec-lectura--principal .rec-lectura-texto p:last-child { max-width: 56ch; }

  .rec-nota { grid-template-columns: 1fr; gap: clamp(16px, 2.4vh, 26px); }
  .rec-espera { align-self: start; margin-top: 10px; }
  .rec-nota h2 { max-width: 30ch; }
}

@media (max-width: 760px) {
  .rec-hero { grid-template-columns: 1fr; min-height: 0; margin-top: clamp(32px, 4vh, 48px); }
  .rec-hero > div { padding: clamp(28px, 4vh, 40px) clamp(22px, 4vw, 34px); }
  /* El corte entre los dos mundos gira con la composición: era un costado y
     ahora es un techo. */
  .rec-hero > .rec-hero-lectura { padding-left: clamp(42px, 9vw, 60px); }
  .rec-hero-operacion { border-left: 0; border-top: 1px solid var(--line-soft); }

  .rec-pila { width: min(100%, 330px); }
  /* La pila se abre menos: con menos aire al costado, el mismo gesto se comería
     el margen que la separa del canto del lienzo. */
  .rec-pliego--fondo { translate: -24px 0; }
  .rec-pliego--medio { translate: -12px 0; }

  .rec-temas-rotulo { flex-basis: 100%; margin: 0 0 4px; }

  .rec-lecturas { gap: clamp(40px, 6vh, 64px); }
  .rec-secundarias { grid-template-columns: 1fr; gap: clamp(34px, 5vh, 48px); }
  .rec-secundarias > :nth-child(n) { margin-top: 0; }
}

@media (max-width: 560px) {
  .rec-pila { width: 100%; }
  .rec-pliego--fondo { translate: -16px 0; }
  .rec-pliego--medio { translate: -8px 0; }
}

/* Sin cursor no hay hover, pero el gesto tampoco hace falta: la pila abierta y
   las láminas quietas ya cuentan la historia entera. */
@media (prefers-reduced-motion: reduce) {
  .rec-pliego,
  .rec-lamina,
  .rec-l1-verifica,
  .rec-l1-aparte,
  .rec-l2-alto,
  .rec-l3-mision { transition: none; }
}