/* ============================================================
   silat.css
   Grilla del mockup: 1440 de ancho, contenido 1200,
   12 columnas de 78 con medianil de 24, márgenes de 120.
   Línea base 24. Header 80 (desktop) / 64 (mobile).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

@font-face{
  font-family: 'Spore';
  src: url('../assets/fonts/Spore-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --fondo:  #CCCCCC;
  --tinta:  #000000;
  --verde:  #00FF00;
  --lima:   #E3F400;          /* el en/es y la barra de avisos */
  --trama:  #C4C4C4;          /* el entramado del fondo */
  /* El píxel de los dibujos: manda el logo, el alto de la barra y los
     huecos del nav. Va atado al tamaño del ojo, así toda la banda de la
     izquierda se achica junta y en proporción. A --cuadro: 120px da los
     8.727px del mockup. */
  --px: calc(var(--cuadro) / 13.75);
  --azul:   #0000FF;
  --papel:  #FFFFFF;

  --ancho-max: 1200px;
  --medianil:  24px;
  --linea:     24px;
  --margen:    max(24px, calc((100% - var(--ancho-max)) / 2));
  /* distancia del borde del contenido al borde de la ventana.
     La mide silat.js con el ancho real, sin contar la barra de scroll. */
  --sangria:   0px;

  /* columna donde arranca el contenido: 2 en el inicio,
     3 cuando hay un cuadrado abierto (para que no lo tape) */
  --inicio: 2;

  /* 10 píxeles de dibujo: el logo mide 8 y quedan 1 arriba y 1 abajo,
     el mismo aire que separa un ojo del otro en el nav */
  --alto-barra: calc(var(--px) * 10);

  /* Alto del ojo. Los seis ojos, la barra de arriba y los botones es/en
     tienen que entrar en el alto de la ventana: por eso --cuadro mira el
     alto además del ancho. En una ventana baja todo se achica en
     proporción en vez de superponerse o salirse de pantalla.
     --cuadro-max lo bajan los escalones de ancho de más abajo. */
  --cuadro-max: 120px;
  /* La banda ocupa 7.1636 × --cuadro de alto (la barra de arriba son
     10·px, los seis ojos y sus huecos 6·(cuadro+px), y px es cuadro/13.75)
     más los 44px de los botones es/en. Los 64 de resorte dejan aire abajo. */
  --cuadro: max(40px, min(var(--cuadro-max), calc((100svh - 64px) / 7.1636)));
  /* el dibujo del nav mide 240x131. En escritorio va rotado: cada mitad
     ocupa 'pieza-ancho' de ancho por 'pieza-alto' de alto. */
  --dibujo-ancho: var(--cuadro);
  --dibujo-alto:  calc(var(--cuadro) * 131 / 240);
  --pieza-ancho:  calc(var(--cuadro) * 131 / 240);
  --pieza-alto:   var(--cuadro);

  /* Ancho de la banda de la izquierda: el dibujo más el rótulo.
     Todo lo que tiene que esquivarla —el contenido y el pie— se mide
     contra esta variable, así en un monitor chico la banda se achica y
     nada se le monta encima. */
  --rotulo: 170px;
  --banda: calc(var(--px) * 3 + var(--pieza-ancho) * 2 + var(--rotulo) + 12px);

  /* La trama del fondo la sortea silat.js entre diez motivos. Acá queda
     el primero escrito a mano, para que no haya un parpadeo sin trama
     mientras carga el script. */
  --trama-tam: 50px;
  --trama-fondo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' shape-rendering='crispEdges'%3E%3Cg fill='%23C4C4C4'%3E%3Crect x='10' y='10' width='30' height='10'/%3E%3Crect x='10' y='20' width='10' height='20'/%3E%3Crect x='30' y='20' width='10' height='20'/%3E%3Crect x='20' y='30' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");

  /* la tira de motivos: al costado del nav, desde abajo de la barra */
  --indice-nav: 0;
  --tira-ancho: 120px;
  --tira-x:     auto;
  --tira-top:   0px;
  --motivo:     var(--azul);   /* la tira: azul, como en el mockup */
  --motivo-opacidad: 1;

  --display: 'Spore', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --texto:   'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ background: var(--fondo); }
body::before{
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* el tejido del fondo: un mosaico de 64px que se repite, en gris apenas
     más oscuro. Es una imagen SVG escrita acá mismo, no un archivo aparte. */
  background-image: var(--trama-fondo);
  background-size: var(--trama-tam) var(--trama-tam);
  opacity: .5;
}


body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: var(--linea);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
:focus-visible{ outline: 3px solid var(--verde); outline-offset: 2px; }

.solo-lectores{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   1. PORTADA — el tejido generativo y el botón ä
   ============================================================ */

#portada{
  position: fixed; inset: 0; z-index: 100;
  background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  transition: opacity .6s ease;
}
#portada.saliendo{ opacity: 0; pointer-events: none; }
#portada[hidden]{ display: none; }

#portada .trama{
  position: relative;
  /* 📏 TAMAÑO DEL TEJIDO — este valor nada más.
     El tercer término lo limita por el alto libre: la proporción (--prop,
     ancho/alto) la pone tejido.js, así el tejido entra entero en una
     ventana baja en vez de cortarse, y le deja lugar al botón ä. */
  --prop: 1;
  width: min(88vw, 720px, calc((100svh - 150px) * var(--prop)));
}
#portada svg{ display: block; width: 100%; height: 100%; overflow: visible; }

.boton-entrar{
  position: static;
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--azul);
  background: transparent; color: var(--verde);
  font-family: var(--display);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s;
}
/* al tocarla el aro se llena, pero la ä sigue verde */
.boton-entrar:hover,
.boton-entrar:focus-visible{ background: var(--azul); color: var(--verde); }

/* ============================================================
   2. CHROME — barra, navegación de color, idioma, pie
   ============================================================ */

#sitio{ position: relative; display: flex; flex-direction: column; min-height: 100vh; }
#sitio[hidden]{ display: none; }

/* La barra lleva la misma trama que el fondo y arranca en el mismo punto
   (las dos están ancladas al 0,0 de la ventana), así el tejido sigue de
   corrido por detrás del logo en vez de cortarse al llegar arriba. */
.barra::before{
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--fondo);
  background-image: var(--trama-fondo);
  background-size: var(--trama-tam) var(--trama-tam);
  opacity: .5;
}
.barra{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  isolation: isolate;
  height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--px) 24px;
  background: var(--fondo);
}

/* el logo arranca en la misma columna que los ojos del nav */
.marca-izq{ line-height: 1; margin-left: calc(var(--px) - 24px); }
/* el logo reemplaza al texto: el ALTO es la única medida que hay que tocar */
.marca img{ display: block; width: auto; }
.marca-izq img{ height: calc(var(--px) * 8); }   /* 8 píxeles de alto */
.pie .marca img{ height: 24px; }

/* --- los 6 dibujos --- */
/* Cada ítem son dos mitades de un rombo.
   En escritorio van una al lado de la otra (rotadas 90°);
   en mobile van una arriba de la otra, en su orientación original. */
.nav-colores{
  position: fixed; z-index: 45;
  top: var(--alto-barra); left: 0;
  padding-left: var(--px);
  display: flex; flex-direction: column;
  gap: var(--px);
}
.nav-item{
  position: relative;
  display: block;
  width: var(--pieza-ancho);
  height: var(--pieza-alto);
}
/* El ojo es UN dibujo completo; la caja lo recorta.
   Antes eran dos mitades pegadas y entre una y otra quedaba medio píxel
   de aire. Con un solo dibujo no hay junta posible. */
.nav-item .ojo{
  position: absolute; top: 0; left: 0;
  width: calc(var(--pieza-ancho) * 2);
  height: 100%;
  overflow: hidden;
}
.nav-item .ojo svg{
  position: absolute; top: 0; left: 0;
  width: var(--cuadro);
  height: calc(var(--cuadro) * 262 / 240);
  /* en escritorio el dibujo va acostado: se rota y se baja a su sitio */
  transform-origin: 0 0;
  transform: translateY(var(--cuadro)) rotate(-90deg);
  pointer-events: none;
}

/* --- el rótulo con el nombre de la sección ---
   Normalmente está oculto (sólo lo leen los lectores de pantalla). En el
   inicio se muestra al costado del dibujo, con los seis abiertos: es lo que
   deja claro que son botones y no decoración. */
/* la sección donde estoy queda en negativo: fondo gris y letra rosada */
.nav-item[aria-current] .rotulo{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
/* los rótulos se ven siempre y son parte del enlace */
.nav-colores .rotulo,
.nav-colores.todas-abiertas .rotulo{
  position: absolute; clip: auto;
  width: var(--rotulo); height: calc(var(--px) * 2.4);
  left: calc(var(--pieza-ancho) * 2 + var(--px) * 2);
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  padding: 0 4px;
  background: var(--verde); color: var(--tinta);
  font-family: var(--display); font-size: 13px; line-height: 1;
  overflow: hidden; text-overflow: ellipsis;
  pointer-events: auto;
  z-index: 2;
}
.nav-item[aria-current] .rotulo{
  background: #FF00FF;
  color: var(--tinta);
}
.nav-item:hover .rotulo,
.nav-item:focus-visible .rotulo{
  background: #FF00FF;
}

/* al pasar el mouse el dibujo pasa a su negativo: los filtros no tocan
   los píxeles transparentes, así que se tiñe sólo la zona pintada */
.nav-item:hover .ojo svg,
.nav-item:focus-visible .ojo svg{ filter: invert(1); }

/* --- idioma --- */
.idioma{
  position: fixed; z-index: 45;
  left: var(--px);
  /* va debajo de los seis ojos. Como --cuadro ya tiene en cuenta el alto
     de la ventana, la cuenta de arriba siempre entra; el min() queda de
     red de seguridad para casos raros. */
  top: min(calc(var(--alto-barra) + (var(--pieza-alto) + var(--px)) * 6),
           calc(100svh - 50px));
  display: flex; align-items: center; gap: 4px;
  padding: 6px 0 0 6px;
}
.idioma button{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--lima);
  background: transparent; color: var(--lima);
  font-family: var(--display); font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.idioma button[aria-pressed="true"]{ background: var(--lima); color: var(--tinta); }

/* --- pie --- */
.pie{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  /* arranca después de la banda, igual que el contenido: antes empezaba
     en el margen y los avisos se metían debajo del nav */
  min-height: 80px; padding: 0 24px 0 var(--banda);
  flex-wrap: wrap;
  margin-top: calc(var(--linea) * 4);
  color: var(--verde);
  font-family: var(--display);
}
.pie a,
.pie .marca{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--verde);
  padding: 4px 8px;
  /* fondo propio: si no, en pantallas angostas la tira azul pasa por
     detrás del mail, del ícono y del logo y no se leen.
     Los avisos quedan afuera: ellos tienen su propio amarillo. */
  background: var(--fondo);
  transition: background .18s, color .18s;
}
/* El aviso y las filas desplegadas no toman el gris del pie: el fondo es
   el amarillo de la barra. Al pasar el mouse el texto pasa a azul, que
   sobre ese amarillo se lee fuerte — antes se volvía lima y desaparecía. */
.pie .mensajes .texto,
.pie .mensajes .muestra{ background: transparent; }
.pie .mensajes .texto:hover,
.pie .mensajes .texto:focus-visible,
.pie .mensajes .muestra:hover,
.pie .mensajes .muestra:focus-visible{
  background: transparent;
  color: var(--azul);
}
/* al pasar el mouse se rellena de verde y la letra pasa a negro:
   el mismo idioma que las barras del menú. Verde sobre blanco no se lee. */
.pie a:hover,
.pie a:focus-visible{ background: var(--verde); color: var(--tinta); }
/* el logo ya es verde: sobre verde desaparecería, así que acá el fondo es azul */
.pie .marca:hover,
.pie .marca:focus-visible{ background: var(--azul); }
.pie .ig{ width: 16px; height: 16px; }

/* ============================================================
   2b. TIRA DE MOTIVOS
   Va detrás de todo el contenido pero delante del fondo gris.
   Arranca arriba y baja hasta el final del documento; que la última
   pieza quede cortada es parte del asunto.
   ============================================================ */

/* ============================================================
   2b. TIRA DE MOTIVOS — patrones Wichí dibujados sólo con CSS
   ============================================================ */

.tira-motivos{
  position: absolute; z-index: 0;
  top: var(--tira-top, 0px); bottom: 0;
  left: var(--tira-x, auto); right: 0;
  width: var(--tira-ancho);
  overflow: hidden;
  pointer-events: none;
  display: flex; flex-direction: column;
}
/* Cada mosaico es la trama dibujada celda por celda, en SVG.
   'crispEdges' apaga el suavizado: las celdas vecinas comparten el borde
   exacto y no queda el pelo claro que dejaban los divs en porcentaje. */
.tira-motivos .mosaico{
  display: block;
  flex: 0 0 auto;
  width: 100%; height: auto;
}
@media (prefers-reduced-motion: reduce){
  .tira-motivos .mosaico rect{ transition: none; opacity: 1; }
}
.tira-motivos .mosaico rect{
  fill: var(--motivo);
  opacity: 0;
  transition: opacity .18s linear;
}
/* el tejido avanza en orden de lectura, renglón por renglón */
.tira-motivos.dibujado .mosaico rect{ opacity: 1; }


/* ============================================================
   3. GRILLA DE PÁGINA
   ============================================================ */

main{ position: relative; z-index: 1; padding-top: var(--alto-barra); flex: 1 0 auto; }

/* el contenido arranca después de la banda del nav, no centrado:
   así el hueco de la izquierda no crece en pantallas anchas */
.pagina{
  padding-left: var(--banda);     /* justo después de la banda del nav */
  padding-right: var(--margen);
}

.contenido{
  max-width: var(--ancho-max);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
}

/* anchos de bloque tomados del mockup */
 /* Un solo ancho de texto en todo el sitio: el del inicio. Ya no hay
    media columna; lo único que sigue en dos columnas es el poema. */
.columna-texto,
.columna-larga{ grid-column: var(--inicio) / span 10; }
.contenido{ grid-auto-rows: min-content; }
.columna-ancha{ grid-column: var(--inicio) / -1; }

.titulo{
  grid-column: var(--inicio) / span 10;
  font-family: var(--display);
  font-weight: 400;
  font-size: 48px;
  line-height: calc(var(--linea) * 2);
  margin: calc(var(--linea) * 3) 0 0;
}
.subtitulo{
  font-family: var(--display);
  font-weight: 400;
  font-size: 33px;
  line-height: calc(var(--linea) * 1.5);
  margin: calc(var(--linea) * 3) 0 var(--linea);
}

.bloque{
  background: transparent;
  padding: 0;
  margin-bottom: calc(var(--linea) * 1.5);
}
.bloque p{ margin: 0 0 var(--linea); }
.bloque p:last-child{ margin-bottom: 0; }
.bloque blockquote{ margin: 0 0 var(--linea); }
.bloque blockquote:last-child{ margin-bottom: 0; }
.termino{ color: inherit; text-decoration: none; cursor: pointer; }
@media (hover: hover){ .termino:hover,
.termino:focus-visible{ text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; } }
@media (hover: none){ .termino{ text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; } }
.externo{ color: inherit; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.externo:hover,
.externo:focus-visible{ background: var(--verde); }
.poema{ font-style: italic; text-align: right; margin-left: auto; max-width: 34em; }
.poema.firma{ font-style: normal; }

/* El poema de Lecko Zamora: wichí y castellano, uno al lado del otro.
   Necesita más aire que un párrafo, así que se extiende de las 6
   columnas del texto a 10, hacia la derecha. */
.poema-doble{
  display: flex; gap: var(--medianil);
  margin: calc(var(--linea) * 2) 0 var(--linea);
}
.poema-doble .lado{ flex: 1 1 0; min-width: 0; }
/* el autor va dentro de la columna castellana, justo abajo de "es ahora.":
   así queda alineado con el poema y no suelto contra el borde */
.poema-doble .autor{
  display: block; margin-top: var(--linea);
  font-style: normal; text-align: left;
}

.firma{ text-align: right; }

/* --- imágenes dentro de un bloque de texto --- */
.bloque figure{ margin: 0 0 var(--linea); }
.bloque figure:last-child{ margin-bottom: 0; }
.bloque figure img{ width: 100%; height: auto; }
.bloque figcaption{ margin-top: 8px; font-size: 14px; }

/* --- pie de foto: epígrafe y crédito ---
   Sólo una parte de las fotos tiene pie. Si estuviera siempre a la vista,
   unas quedarían con texto debajo y otras no, y la grilla se vería despareja.
   Así que se apoya sobre la imagen y aparece al pasar el mouse. */
.galeria figure{ position: relative; }
.galeria figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 13px; line-height: 1.35;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.galeria figure:hover figcaption,
.galeria figure:focus-within figcaption{ opacity: 1; }
/* sin mouse no hay hover: ahí el pie se queda puesto */
@media (hover: none){
  .galeria figcaption{ opacity: 1; }
}
figcaption .epigrafe,
figcaption .credito{ display: block; }
figcaption .credito{ margin-top: 2px; opacity: .72; }
/* media: la imagen ocupa la mitad y queda centrada */
.bloque figure.media{ width: 50%; margin-left: auto; margin-right: auto; }

/* ============================================================
   4. BARRA DE AVISOS — vive en el pie, en todas las páginas
   ============================================================ */

.mensajes{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;        /* si no, el aviso sin cortes estira el pie a lo ancho */
  height: 24px;
  margin-right: auto;
  overflow: hidden;
}
.mensajes .fondo{
  position: absolute; inset: 0;
  background: var(--lima);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.8,.3,1);
}
.mensajes.entrando .fondo{ transform: scaleX(1); }
.mensajes .texto{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 8px;
  font-family: var(--display);
  font-size: 16px; line-height: 1;
  color: #FF3C00;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .3s .25s, transform .45s .2s cubic-bezier(.2,.8,.3,1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mensajes.entrando .texto{ opacity: 1; transform: translateX(0); }
/* el aviso es un enlace a la muestra: abre en otra pestaña */
.mensajes .texto{ text-decoration: none; padding-left: 28px; }

/* --- la flechita y la lista completa de muestras ---
   Los avisos pasan de a uno; la flecha abre todos juntos, hacia arriba,
   por si alguien se perdió alguno. */
.mensajes .desplegar{
  position: absolute; z-index: 2;
  left: 0; top: 0; bottom: 0; width: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent;
  color: #FF3C00; cursor: pointer;
  opacity: 0;
  transition: opacity .3s .25s;
}
.mensajes.entrando .desplegar{ opacity: 1; }
.mensajes .desplegar svg{
  width: 10px; height: 7px; display: block;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.mensajes .desplegar:hover svg{ transform: translateY(-1px); }
.mensajes.abierta .desplegar svg{ transform: rotate(180deg); }

/* el panel se sale de la barra, así que ésta deja de recortar.
   Y el pie entero sube por encima del nav fijo, que si no lo taparía. */
.mensajes.abierta{ overflow: visible; z-index: 60; }
.pie.con-muestras{ z-index: 60; }

.mensajes .lista-muestras{
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 100%;
  margin-bottom: 2px;
  background: var(--lima);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.mensajes.abierta .lista-muestras{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mensajes .muestra{
  display: block;
  padding: 7px 10px 7px 28px;
  font-family: var(--display);
  font-size: 16px; line-height: 1.25;
  color: #FF3C00; text-decoration: none;
}
.mensajes .muestra + .muestra{ border-top: 1px solid rgba(255,60,0,.3); }
a.muestra:hover,
a.muestra:focus-visible{ color: var(--azul); }
.mensajes .texto[aria-disabled]{ cursor: default; pointer-events: none; }
.mensajes .texto.clickeable{ cursor: pointer; }
.mensajes .texto.clickeable:hover,
.mensajes .texto.clickeable:focus-visible{
  text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   5. GALERÍAS
   Dos tamaños y un mismo mecanismo. Todas las fotos de una galería van
   al mismo alto y pegadas entre sí, sin medianil: el ancho de cada una
   sale de su propia proporción, así que una apaisada ocupa más que una
   vertical y esa diferencia es la que arma el ritmo de la tira.
   El desplazamiento es horizontal, con la rueda del mouse o arrastrando.
   ============================================================ */

.galeria{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* que el rebote del final no arrastre a la página entera */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.galeria::-webkit-scrollbar{ display: none; }
.galeria.arrastrando{ cursor: grabbing; }

.galeria figure{
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
  min-width: 0;
}
.galeria img{
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  background: #bdbdbd;
  -webkit-user-drag: none;
  user-select: none;
}

/* --- la grande: sólo el inicio ---
   La caja va de borde a borde de la ventana, así las fotos pasan por
   detrás de los ojos al correrlas. Pero el contenido arranca después de
   los rótulos: ese padding es parte de la zona que se desplaza, de modo
   que al volver al principio la primera foto se ve entera y nada la
   tapa. De alto, exactamente la columna de los seis ojos.
   El nav flota encima y cada ojo lleva su propio fondo, así que se
   siguen leyendo sobre la foto. */
.galeria.grande{
  margin: 0 calc(-1 * var(--margen-real, 24px))
          calc(var(--linea) * 2)
          calc(-1 * var(--banda-real, 24px));
  padding-left: var(--banda-real, 0px);
  height: calc(var(--pieza-alto) * 6 + var(--px) * 5);
}

/* --- la media: las secciones y las fichas ---
   Empieza donde empieza el texto y termina donde empieza la franja azul.
   El alto se lo mide el JS para que el borde de abajo caiga justo con el
   último ojo: así no se mete ni debajo del nav ni debajo de la franja. */
.galeria.media{
  margin-left: var(--col-uno, 0px);
  margin-right: calc(var(--tira-ancho) - var(--margen-real, 24px));
  margin-top: var(--linea);
  margin-bottom: calc(var(--linea) * 2);
  height: calc(var(--pieza-alto) * 5 + var(--px) * 4);
}

/* --- video incrustado ---
   Va donde iría la galería, al mismo ancho que el texto. Estas reglas se
   me habían perdido al limpiar el CSS de los carruseles viejos: sin
   ellas el iframe quedaba en su tamaño por defecto, metido en una sola
   columna de la grilla. */
.video{
  grid-column: var(--inicio) / span 10;
  min-width: 0;
  margin: calc(var(--linea) * 2) 0 calc(var(--linea) * 3);
  aspect-ratio: 16 / 9;
  background: #000;
}
.video iframe{ display: block; width: 100%; height: 100%; border: 0; }

/* lo que se ve en lugar del video cuando el sitio se abre desde el disco */
.video-suelto{
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--linea);
  padding: var(--linea); box-sizing: border-box; text-align: center;
}
.video-nota{ margin: 0; max-width: 32em; color: var(--fondo); font-size: 15px; }
.boton-video{
  display: inline-block; padding: 10px 18px;
  border: 2px solid var(--verde); color: var(--verde);
  font-family: var(--display); font-size: 16px; text-decoration: none;
  transition: background .18s, color .18s;
}
.boton-video:hover, .boton-video:focus-visible{ background: var(--verde); color: var(--tinta); }

/* ============================================================
   6. MENÚ DE OBRAS Y PRÁCTICAS — dos columnas
   ============================================================ */

/* Los títulos de la portada: una sola columna, todos clickeables.
   Dos de ellos abren su lista de obras acá mismo; los otros dos entran
   derecho a su página. */
/* el texto de entrada, despegado del título */
.bloque.intro{ margin-top: var(--linea); }

.menu-obras{
  grid-column: var(--inicio) / span 10;
  margin-top: calc(var(--linea) * 3);
}
.menu-obras .grupo{ margin-bottom: calc(var(--linea) * 1.5); }

/* el desplegador es un botón, pero tiene que leerse igual que un título */
.grupo-enlace.desplegador{
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 12px;
}
/* la flechita avisa que se abre, y gira al abrirse */
.grupo-enlace.desplegador::after{
  content: '';
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform-origin: 40% 50%;
  transition: transform .22s ease;
}
.grupo.abierto .grupo-enlace.desplegador::after{ transform: rotate(90deg); }

.grupo-items{
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: var(--linea);
}
/* 'hidden' solo no alcanza: el display del flex le gana al del atributo
   y la lista se veía siempre abierta */
.grupo-items[hidden]{ display: none; }

/* el poema cierra la portada de Obras */
.poema-final{
  grid-column: var(--inicio) / span 10;
  margin-top: calc(var(--linea) * 3);
}

.grupo-titulo{
  font-family: var(--display); font-weight: 400;
  font-size: 48px; line-height: calc(var(--linea) * 2);
  margin: 0 0 var(--linea);
}

/* Los títulos clickeables (Kutsaj, Claudia Alarcón, los de Nuestra
   Historia) se subrayan en verde al pasar el mouse. Va con
   text-decoration y no con una barra absoluta: así el subrayado
   acompaña al título cuando ocupa dos renglones. */
.grupo-enlace{
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  transition: text-decoration-color .25s ease;
}
.grupo-enlace:hover,
.grupo-enlace:focus-visible{ text-decoration-color: var(--verde); }

.enlace-obra{
  position: relative;
  display: block;
  height: 48px;
  font-family: var(--display);
  font-size: 21px;
  line-height: 48px;
  padding-left: 2px;
  isolation: isolate;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.enlace-obra::before{
  content: '';
  position: absolute; z-index: -1;
  left: 0; top: 50%; transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%; height: 24px;
  background: var(--verde);
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.enlace-obra:hover::before,
.enlace-obra:focus-visible::before,
.enlace-obra[aria-current]::before{ transform: translateY(-50%) scaleX(1); }

/* --- submenú de una sección (Nuestra Historia / Andrei Fernández) --- */
.submenu{
  grid-column: var(--inicio) / 8;
  margin-bottom: var(--linea);
}
.submenu .enlace-obra[aria-current]{ pointer-events: none; }

/* ============================================================
   7. FICHA DE OBRA
   ============================================================ */

.encabezado-obra{
  grid-column: var(--inicio) / -1;
  display: flex; align-items: baseline; gap: 44px;
  margin-top: calc(var(--linea) * 3);
  position: relative;
}

/* La obra que sigue: mismo verde que el nombre de ésta, contra el borde
   derecho del bloque de texto. Después de la última vuelve a la primera,
   así ninguna queda sin salida. */
.siguiente-obra{
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--display); font-size: 21px;
  line-height: calc(var(--linea) * 2);
  padding: 0 10px;
  background: var(--verde); color: var(--tinta);
  display: inline-flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.siguiente-obra .punta{ font-size: 18px; }
.siguiente-obra:hover,
.siguiente-obra:focus-visible{ background: #FF00FF; }
.encabezado-obra .raiz{
  font-family: var(--display); font-size: 48px;
  line-height: calc(var(--linea) * 2);
  white-space: nowrap;
}
.encabezado-obra .nombre{
  position: relative;
  font-family: var(--display); font-size: 21px;
  line-height: calc(var(--linea) * 2);
  isolation: isolate;
  padding-right: 24px;
}
.encabezado-obra .nombre::before{
  content: '';
  position: absolute; z-index: -1;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 24px;
  background: var(--verde);
}

/* el ícono de 3 cuadraditos: vuelve al menú */
.volver-cuadros{
  position: absolute; right: 0; bottom: calc(100% + 4px);
  width: 72px; height: 72px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.volver-cuadros span{
  position: absolute; width: 24px; height: 24px; background: var(--azul);
  transition: transform .2s;
}
.volver-cuadros span:nth-child(1){ left: 0;    top: 0; }
.volver-cuadros span:nth-child(2){ left: 24px; top: 24px; }
.volver-cuadros span:nth-child(3){ left: 48px; top: 48px; }
.volver-cuadros:hover span:nth-child(1){ transform: translate(-4px,-4px); }
.volver-cuadros:hover span:nth-child(3){ transform: translate( 4px, 4px); }

/* mosaico: columnas de una imagen alta, o de dos apiladas */

/* Las columnas no tienen un ancho fijo: la altura la manda la tira y el
   ancho lo pone cada foto según su propia proporción. Antes los huecos
   eran cajas fijas y 'object-fit: cover' recortaba — de una apaisada 3:2
   metida en un hueco de 0,72 se veía menos de la mitad. Así no se recorta
   ninguna: una apaisada ocupa más a lo ancho que una vertical, y esa
   diferencia es la que arma el ritmo de la tira. */

/* la proporción se la pone el JS desde la foto; con el alto fijado por el
   flex, el ancho sale solo y no hay recorte ni hueco */

/* 'medio' ocupa media tira, esté sola o apareada: así la diferencia con
   'alto' se nota siempre */


/* ============================================================
   8. GLOSARIO
   ============================================================ */

.glosario{ grid-column: var(--inicio) / -1; }
.glosario-fila{
  position: relative;
  display: flex; align-items: baseline; gap: 24px;
  font-family: var(--display); font-size: 33px;
  line-height: calc(var(--linea) * 2);
}
.glosario-palabra{
  position: relative; isolation: isolate;
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left;
  min-width: 204px;
}
.glosario-palabra::before{
  content: '';
  position: absolute; z-index: -1;
  left: 0; top: 50%; transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%; height: 24px;
  background: var(--verde);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.glosario-fila.abierta .glosario-palabra::before,
.glosario-fila.fijada .glosario-palabra::before{ transform: translateY(-50%) scaleX(1); }

.glosario-definicion{
  display: block;
  font-size: 21px; line-height: var(--linea);
  max-width: 700px;
  padding: 6px 0 var(--linea);
}
.glosario-fila:not(.abierta):not(.fijada) .glosario-definicion{
  position: absolute; left: 0; top: 0; visibility: hidden;
}
/* La traducción va en negro, sin relleno: el verde queda sólo en la
   palabra, que es lo clickeable. Los fragmentos aparecen escalonados. */
.glosario-definicion .frag{
  display: block;
  opacity: 0;
  transition: opacity .25s ease;
}
.glosario-definicion .frag + .frag{ margin-top: var(--linea); }
.glosario-fila.abierta .frag,
.glosario-fila.fijada .frag{ opacity: 1; }
.glosario-fila.abierta .frag:nth-child(2),
.glosario-fila.fijada  .frag:nth-child(2){ transition-delay: .08s; }
.glosario-fila.abierta .frag:nth-child(3),
.glosario-fila.fijada  .frag:nth-child(3){ transition-delay: .16s; }
.glosario-fila.abierta .frag:nth-child(4),
.glosario-fila.fijada  .frag:nth-child(4){ transition-delay: .24s; }

/* ============================================================
   8b. MONITORES MEDIANOS — entre el mobile y los 1440 del mockup
   La banda del nav se achica en escalones; como el contenido y el pie
   se miden contra --banda, se corren solos y nada se superpone.
   ============================================================ */

@media (max-width: 1400px){
  :root{ --cuadro-max: 104px; --rotulo: 152px; }
}
@media (max-width: 1200px){
  :root{ --cuadro-max: 92px; --rotulo: 132px; }
  /* con el rótulo más angosto algunos nombres pasan a dos renglones:
     la cajita crece en vez de cortarlos */
  .nav-colores .rotulo,
.nav-colores.todas-abiertas .rotulo{
    font-size: 12px; line-height: 1.15;
    height: auto; min-height: calc(var(--px) * 2.4);
    padding: 3px 4px;
  }
}
@media (max-width: 1040px){
  :root{ --cuadro-max: 80px; --rotulo: 112px; }
  .nav-colores .rotulo{ font-size: 11px; }
}
@media (max-width: 900px){
  :root{ --cuadro-max: 70px; --rotulo: 96px; }
  .nav-colores .rotulo{ font-size: 10px; }
}

/* ============================================================
   8b. PÁGINAS DE ERROR
   El sitio sigue entero alrededor —los ojos, el idioma, el pie—, así que
   desde un error se puede seguir navegando sin volver atrás.
   ============================================================ */

.pagina-error{
  grid-column: var(--inicio) / span 10;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin: calc(var(--linea) * 5) 0 calc(var(--linea) * 6);
}
.error-numero{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(96px, 18vw, 230px);
  line-height: .9;
  margin: 0;
}
.error-cifra{ display: inline-block; }
.error-rotulo{
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  margin: 0 0 calc(var(--linea) * 1.5);
  text-align: right;
}
.error-aviso{
  font-size: 18px; line-height: var(--linea);
  margin: 0 0 calc(var(--linea) * 1.5);
  max-width: 34em;
}
.error-volver{
  font-family: var(--display); font-size: 21px;
  line-height: calc(var(--linea) * 1.6);
  padding: 0 16px;
  background: var(--verde); color: var(--tinta);
  transition: background .18s;
}
.error-volver:hover,
.error-volver:focus-visible{ background: #FF00FF; }

/* ============================================================
   9. MOBILE — 390 de ancho, márgenes 24, tira de color horizontal
   ============================================================ */

@media (max-width: 760px){
  :root{
    /* acá el nav es una fila, no una columna: el alto de la ventana no
       lo condiciona y el píxel del dibujo vuelve a su medida fija */
    --px: 8.727px;
    --alto-barra: 64px;
    --cuadro: calc(100vw / 6);
    --margen: 24px;
    --inicio: 1;
    /* Alto de la banda del pie de foto. Es el mismo para TODAS, haya
       mucho texto o poco: así la fila se lee como una unidad y no como
       un borde dentado. La medida sale del pie más largo que hay en el
       sitio —la vista de sala de Tewok en el Carnegie, que necesita
       116px— redondeada hacia arriba, de modo que ninguno se corta. */
    --pie-alto: 120px;
    /* acá el dibujo va en su orientación original: ancho de celda,
       alto proporcional (240x131) */
    --dibujo-ancho: calc(100vw / 6);
    --dibujo-alto:  calc(100vw / 6 * 131 / 240);
    --pieza-ancho:  calc(100vw / 6);
    --pieza-alto:   calc(100vw / 6 * 131 / 240);

    /* acá no baja una columna: es un friso corto pegado al cabezal,
       así no se cruza nunca con el texto */
    --tira-ancho: 100vw;
    --tira-x:     0px;
    --tira-top:   calc(var(--alto-barra) + var(--pieza-alto) * 2);
    --motivo-opacidad: .24;
  }

  /* centrado: el logo deja el mismo aire arriba y abajo en vez de ir pegado */
  .barra{
    justify-content: flex-start; align-items: center;
    padding: 0 16px; background: var(--fondo);
  }
  /* en mobile queda la firma corta arriba a la izquierda; la larga va al pie */
  .barra .marca{ display: none; }
  .barra .marca-izq{ display: block; margin-left: 0; }
  .barra .marca-izq img{ height: 34px; }
  .pie .marca img{ height: 20px; }

  .nav-colores{
    top: var(--alto-barra); left: 0; right: 0;
    flex-direction: row;
    background: var(--fondo);
  }
  .nav-item{ flex: 1 1 0; width: auto; height: var(--pieza-alto); }
  /* acá el dibujo va derecho y la caja lo corta por la mitad;
     la sección abierta lo muestra entero */
  .nav-item .ojo{
    width: 100%; height: var(--pieza-alto);
    transition: height .3s cubic-bezier(.2,.8,.3,1);
  }
  .nav-item .ojo svg{
    width: 100%;
    height: calc(var(--pieza-alto) * 2);
    transform: none;
  }
  .nav-item[aria-current] .ojo{ height: calc(var(--pieza-alto) * 2); }

  /* seis nombres no entran en 390px: acá el gesto lo da el saludo en cascada */
  /* en mobile no van los nombres: no entran seis a lo ancho */
  .rotulo,
.nav-colores .rotulo,
.nav-colores.todas-abiertas .rotulo{
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); background: none;
  }
  /* el saludo: los ojos se abren y se cierran en cadena, de izquierda a derecha */
  @keyframes saludo{
    0%,
100%{ height: var(--pieza-alto); }
    20%,
45%{ height: calc(var(--pieza-alto) * 2); }
    65%{ height: var(--pieza-alto); }
  }
  .nav-colores.saludo .nav-item:not([aria-current]) .ojo{
    animation: saludo 2.2s ease-in-out;
  }
  .nav-colores.saludo .nav-item:nth-child(1) .ojo{ animation-delay: 0s; }
  .nav-colores.saludo .nav-item:nth-child(2) .ojo{ animation-delay: .13s; }
  .nav-colores.saludo .nav-item:nth-child(3) .ojo{ animation-delay: .26s; }
  .nav-colores.saludo .nav-item:nth-child(4) .ojo{ animation-delay: .39s; }
  .nav-colores.saludo .nav-item:nth-child(5) .ojo{ animation-delay: .52s; }
  .nav-colores.saludo .nav-item:nth-child(6) .ojo{ animation-delay: .65s; }
  /* mientras saluda, el contenido deja lugar para la pieza que baja */
  main.saludando{ padding-top: calc(var(--alto-barra) + var(--pieza-alto) * 2 + 12px); }
  /* el head se extiende y tapa lo que scrollea por debajo */
  .nav-colores.abierta::before{
    content: '';
    position: absolute; left: 0; right: 0; top: 100%;
    height: var(--pieza-alto);
    background: var(--fondo);
    z-index: -1;
  }

  .idioma{ position: fixed; left: auto; right: 16px; top: 17px; padding: 0; }

  main{ padding-top: calc(var(--alto-barra) + var(--pieza-alto) + 12px); }
  main.con-extension{ padding-top: calc(var(--alto-barra) + var(--pieza-alto) * 2 + 12px); }

  .pagina{ padding-left: var(--margen); padding-right: var(--margen); }
  .contenido{ grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  /* En mobile la grilla es de UNA columna. Cualquier bloque que siga
     pidiendo "span 10" le inventa diez columnas implícitas y aplasta la
     página entera: por eso todos tienen que pasar a 1 / -1. */
  .columna-texto,
.columna-ancha,
.columna-larga,
.titulo,
.subtitulo,
.menu-obras,
.poema-final,
.pagina-error,
.encabezado-obra,
.glosario,
.mensajes{ grid-column: 1 / -1; }

  .titulo{ font-size: 36px; }
  .subtitulo{ font-size: 26px; }

  /* La tira de motivos pasa por detrás de todo. En escritorio corre por el
     costado y no molesta, pero en mobile baja justo sobre la columna de texto.
     Acá cada pieza de texto lleva su propio fondo gris para taparla. */
  .titulo,
.subtitulo,
.grupo-titulo,
.encabezado-obra,
.enlace-obra,
.glosario-fila,
.entrada .antetitulo,
.entrada h3{
    background: var(--fondo);
  }
  /* un poco de aire a los costados, sin desalinear el texto */
  .titulo,
.subtitulo,
.grupo-titulo,
.glosario-fila{
    padding-left: 8px; padding-right: 8px;
    margin-left: -8px; margin-right: -8px;
  }

  /* la barra de mensajes va a lo ancho, pegada a la tira de color */
  /* en mobile el aviso puede ocupar dos renglones sin recortarse */
  .mensajes{
    height: auto; min-height: 33px;
    /* de borde a borde: el pie tiene 16 de padding, no --sangria.
       Con --sangria se iba 8px fuera de pantalla y la página scrolleaba. */
    margin: 0 -16px var(--linea);
  }
  .mensajes .texto{
    position: relative; inset: auto;
    font-size: 16px; line-height: 1.3;
    padding: 6px 8px 6px 28px;   /* el hueco de la flechita */
  }

  .menu-obras{ grid-template-columns: 1fr; }
  .grupo-titulo{ font-size: 32px; }
  /* en mobile no hay hover: lo clickeable se marca con el subrayado verde */
  .enlace-obra{
    font-size: 17px;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--verde); text-decoration-thickness: 2px;
  }
  .grupo-enlace{
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: var(--verde); text-decoration-thickness: 2px;
  }
  /* la portada de secciones va después del título y del video */
  .menu-obras{ order: 6; }

  .encabezado-obra{ flex-direction: column; gap: 0; align-items: stretch; }
  .encabezado-obra .raiz{ font-size: 36px; }
  /* la barra verde va de lado a lado, como en el mockup */
  .encabezado-obra .nombre{
    font-size: 17px; width: 100%;
    line-height: 24px; padding: 4px 8px 4px 0;
  }
  /* si el nombre entra en dos renglones, la barra los cubre a los dos */
  .encabezado-obra .nombre::before{
    top: 0; bottom: 0; height: auto; transform: none;
  }
  /* el ícono se apoya arriba de la barra, contra el borde derecho.
     Sin 'top: auto' quedaría encima del nombre. */
  .volver-cuadros{ right: 0; top: auto; bottom: calc(100% + 10px); width: 54px; height: 54px; }
  .volver-cuadros span{ width: 18px; height: 18px; }
  .volver-cuadros span:nth-child(2){ left: 18px; top: 18px; }
  .volver-cuadros span:nth-child(3){ left: 36px; top: 36px; }

  /* los puntitos se corren hacia las imágenes y se despegan del texto,
     así se lee que son el control de la galería y no del párrafo */
  
  /* las imágenes cierran contra los puntitos: el aire grande queda abajo,
     separándolos del texto */
  
  /* cada figura con su propio alto; el riel lo sigue desde el JS */
  
  /* en la ficha de obra los puntitos caían al final de todo, debajo del
     texto largo: acá quedan apoyados en el mosaico, como en las demás */
  .encabezado-obra{ order: 1; }
  .columna-larga{ order: 5; }

  .pie{
    flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px;
    padding: 16px; min-height: 0;
    font-size: 14px;
  }
  .pie .marca{ font-size: 20px; }
  /* el aviso, más alto y más grande: en 390px se cortaba */
  .mensajes{ order: -1; flex: 1 0 100%; height: 34px; }
  .mensajes .texto{ font-size: 19px; padding: 0 8px 0 28px; }

  /* En mobile: título → submenú → galería → texto. */
  .titulo{ order: 1; }
  .video{ order: 2; }
  .submenu{ order: 3; }
  .galeria{ order: 4; }
  .columna-texto{ order: 5; }
  /* En la portada de Obras: título, texto, menú y el poema al final.
     Sin un orden propio el poema caía con order 0, o sea antes que el
     título, y la página arrancaba por el final. */
  .poema-final{ order: 7; }
  /* el flex-basis del escalón de 900 se colaba acá y dejaba las fotos a
     un 60% del riel: en mobile va una foto por pantalla */
  
  /* en mobile la franja de Silät Wuké se comporta como cualquier galería:
     una foto por pantalla, no tres en miniatura */
  
  .submenu{ grid-column: 1 / -1; }
  .video{ grid-column: 1 / -1; }

  /* el mosaico se aplana: una imagen entera por pantalla */
  

  /* el friso: una sola fila de motivos, a lo ancho */
  .tira-motivos{
    left: 0; right: auto; width: 100vw;
    height: calc(100vw / 6);
    bottom: auto;
    flex-direction: row;          /* acá el friso corre a lo ancho */
  }
  .tira-motivos .mosaico{ width: auto; height: 100%; }

  .glosario-fila{ flex-direction: column; align-items: flex-start; gap: 0; font-size: 26px; }
  .glosario-definicion{ font-size: 17px; max-width: none; }
  .glosario-palabra{ min-width: 0; }

  /* Las galerías pierden los márgenes de escritorio: acá van de borde a
     borde y con un alto propio, porque ni los ojos ni la franja azul
     están al costado. */
  .galeria.grande{ padding-left: 0; }
  .galeria.grande,
  .galeria.media{
    margin-left: calc(-1 * var(--margen));
    margin-right: calc(-1 * var(--margen));
    margin-top: var(--linea);
    margin-bottom: calc(var(--linea) * 1.5);
    height: 58vw;
    min-height: 220px;
  }

  /* --- el pie de foto en mobile ---
     Acá no hay mouse, así que no tiene sentido que el pie se apoye sobre
     la foto esperando un hover: va debajo, como una banda. El alto es el
     mismo para todas, haya mucho texto o poco, así la fila se lee como
     una sola unidad y no como un borde dentado. El epígrafe se corta con
     puntos suspensivos cuando no entra, y el crédito siempre tiene su
     renglón reservado al pie. El negro va con opacidad para que se siga
     viendo un poco la trama del fondo. */
  .galeria.con-pies{
    height: calc(58vw + var(--pie-alto));
    min-height: calc(220px + var(--pie-alto));
  }
  .galeria.con-pies figure{ position: relative; height: 100%; }
  .galeria.con-pies figure img{
    height: calc(100% - var(--pie-alto));
    width: auto;
  }
  /* El pie va absoluto, no en el flujo: si fuera un bloque normal, su
     texto sin cortar mandaría el ancho de la figura y la foto quedaría
     flotando en una banda larguísima. Así la figura mide lo que mide la
     foto y el pie se acomoda a ese ancho. */
  .galeria.con-pies figcaption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: auto;
    height: var(--pie-alto);
    opacity: 1;
    display: flex; flex-direction: column;
    padding: 8px 10px;
    font-size: 12px; line-height: 16px;
    overflow: hidden;
  }
  /* El epígrafe se queda con lo que sobre y el crédito tiene su lugar
     reservado: así el nombre de quien sacó la foto nunca se pierde.
     Lo que no entra se corta con puntos suspensivos. */
  .galeria.con-pies figcaption .epigrafe{
    flex: 1 1 auto; min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .galeria.con-pies figcaption .credito{
    flex: 0 0 auto;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* El botón de la obra siguiente baja debajo del título verde y toma su
     mismo ancho: las dos barras quedan alineadas. El aire de arriba es lo
     que lo separa del título y lo hace leer como botón. */
  .siguiente-obra{
    width: 100%;
    margin-left: 0;
    margin-top: 14px;
    padding: 4px 8px;
    /* mismo cuerpo e interlínea que el título: las dos barras miden
       igual de alto. Sin esto se colaba la interlínea de escritorio
       —48px— y el botón quedaba casi el doble. */
    font-size: 17px;
    line-height: var(--linea);
  }

  /* el poema vuelve a una sola columna y las dos lenguas se apilan */
  .poema-doble{ flex-direction: column; gap: var(--linea); }
  .poema-doble{ width: auto; max-width: none; }
}

/* ============================================================
   10. MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *,
*::before,
*::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}