/* ============================================================
   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 */
.columna-texto{ grid-column: var(--inicio) / 8; }   /* la mitad izquierda */
.contenido{ grid-auto-rows: min-content; }
.columna-ancha{ grid-column: var(--inicio) / -1; }
.columna-larga{ grid-column: var(--inicio) / span 10; } /* 10 columnas */

.titulo{
  grid-column: var(--inicio) / 11;
  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;
}

.columna-texto .poema-doble{
  width: calc((100% + var(--medianil)) / 6 * 10 - var(--medianil));
  max-width: calc(100vw - var(--banda) - var(--margen) * 2);
}
.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. */
.mosaico figure,
.carrusel figure{ position: relative; }
.mosaico figcaption,
.carrusel 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;
}
.mosaico figure:hover figcaption,
.mosaico figure:focus-within figcaption,
.carrusel figure:hover figcaption,
.carrusel figure:focus-within figcaption{ opacity: 1; }
/* sin mouse no hay hover: ahí el pie se queda puesto */
@media (hover: none){
  .mosaico figcaption,
  .carrusel 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. CARRUSEL + PUNTITOS
   ============================================================ */

.indicador{
  display: none;
  /* arranca en la 9 y se apoya a la derecha: con muchas fotos (Claudia
     tiene 17) los puntitos entran igual en un solo renglón */
  grid-column: 9 / -1;
  align-self: start;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px;
  margin-top: calc(var(--linea) * 4);
}
/* cuando entra toda la galería de una, el control no dice nada */
.indicador.no-hacen-falta{ display: none; }
/* …y sin el control la galería sube a la altura del texto */
.carrusel.sin-puntos,
.marco-mosaico.sin-puntos{ margin-top: 0; }
.indicador button{
  /* flex-basis fijo: con muchas fotos el flex los achataba y quedaban
     óvalos en vez de círculos */
  flex: 0 0 14px;
  width: 14px; height: 14px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--verde);
  background: transparent;
  cursor: pointer;
  transition: background .2s;
}
.indicador button:hover{ background: rgba(0,255,0,.45); }
.indicador button.activo{ background: var(--verde); }

.carrusel{
  /* en escritorio es una columna de imágenes al costado del texto */
  grid-column: 8 / -1;
  align-self: start;
  min-width: 0;
  flex-direction: column;
  margin: calc(var(--linea) * 2) 0 calc(var(--linea) * 3);
  display: flex; gap: 0;
  overflow: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel::-webkit-scrollbar{ display: none; }

/* Silät Wuké: la galería va arriba del texto, a todo el ancho */
.carrusel.arriba{
  grid-column: var(--inicio) / -1;
  flex-direction: row;
  gap: var(--medianil);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: calc(var(--linea) * 2) 0 calc(var(--linea) * 2);
}
.carrusel.arriba figure{
  flex: 0 0 calc((100% - var(--medianil) * 2) / 3);
  margin: 0; scroll-snap-align: start;
}
/* sin recortar: cada foto en su proporción, como en el resto del sitio */
.carrusel.arriba img{ width: 100%; height: auto; display: block; }

/* se puede arrastrar con el mouse, además de usar los puntitos */
.carrusel, .mosaico{ cursor: grab; }
.carrusel.arrastrando, .mosaico.arrastrando{ cursor: grabbing; scroll-snap-type: none; }
.carrusel img, .mosaico img{ -webkit-user-drag: none; user-select: none; }
.carrusel figure{
  margin: 0 0 var(--medianil); flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
}
.carrusel img{ width: 100%; height: auto; background: #bdbdbd; }

/* --- video incrustado: ocupa el lugar del carrusel --- */
.video{
  grid-column: var(--inicio) / 11;
  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
   ============================================================ */

.menu-obras{
  grid-column: var(--inicio) / -1;
  display: grid;
  grid-template-columns: 384px 510px;
  column-gap: var(--medianil);
  margin-top: calc(var(--linea) * 2);
}
.menu-obras .columna{ min-width: 0; }
.menu-obras .grupo{ margin-bottom: var(--linea); }

.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) / 11;
  display: flex; align-items: baseline; gap: 44px;
  margin-top: calc(var(--linea) * 3);
  position: relative;
}
.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 */
.marco-mosaico{
  grid-column: var(--inicio) / -1;
  position: relative;
  min-width: 0;
  margin: calc(var(--linea) * 2) 0 calc(var(--linea) * 3);
  margin-right: calc(-1 * var(--sangria));
}
.mosaico{
  display: flex; gap: var(--medianil);
  height: min(737px, calc(100vh - 260px));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.mosaico::-webkit-scrollbar{ display: none; }
/* 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. */
.mosaico .col{
  flex: 0 0 auto; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  scroll-snap-align: start;
}
/* 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 */
.mosaico figure{ margin: 0; min-height: 0; }
/* 'medio' ocupa media tira, esté sola o apareada: así la diferencia con
   'alto' se nota siempre */
.mosaico .col.doble figure{ flex: 0 0 calc((100% - 18px) / 2); }
.mosaico .col.simple figure{ flex: 1 1 0; }
.mosaico img{
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; display: block;
}

/* ============================================================
   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; }
  /* con menos lugar el texto se queda con las dos columnas de más */
  .columna-texto{ grid-column: var(--inicio) / 9; }
  .carrusel{ grid-column: 9 / -1; }
}
@media (max-width: 900px){
  :root{ --cuadro-max: 70px; --rotulo: 96px; }
  .nav-colores .rotulo{ font-size: 10px; }
  /* acá ya no entran dos columnas: la galería pasa abajo del texto */
  .columna-texto{ grid-column: var(--inicio) / -1; }
  .carrusel{ grid-column: var(--inicio) / -1; flex-direction: row;
             overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--medianil); }
  .carrusel figure{ flex: 0 0 60%; scroll-snap-align: start; }
  .carrusel img{ width: 100%; height: auto; }
  .indicador{ grid-column: var(--inicio) / -1; justify-content: flex-start;
              margin-top: var(--linea); }
  .menu-obras{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   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;
    /* 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; }
  .columna-texto, .columna-ancha, .columna-larga, .titulo, .subtitulo,
  .menu-obras, .encabezado-obra, .carrusel, .marco-mosaico,
  .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,
  .indicador, .glosario-fila,
  .entrada .antetitulo, .entrada h3{
    background: var(--fondo);
  }
  /* un poco de aire a los costados, sin desalinear el texto */
  .titulo, .subtitulo, .grupo-titulo,
  .indicador, .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 */
  .indicador{
    grid-column: 1 / -1;
    margin: 16px 0 calc(var(--linea) * 1.5);
  }
  /* las imágenes cierran contra los puntitos: el aire grande queda abajo,
     separándolos del texto */
  .carrusel, .marco-mosaico{ margin-bottom: 0; }
  /* cada figura con su propio alto; el riel lo sigue desde el JS */
  .carrusel, .mosaico{ align-items: flex-start; transition: height .25s ease; }
  /* 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; }
  .marco-mosaico{ order: 2; }
  .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; }
  .submenu{ order: 2; }
  .carrusel{ order: 3; }
  .indicador{ order: 4; }
  .columna-texto{ order: 5; }
  .video{ order: 3; }

  .carrusel{
    grid-row: auto;
    flex-direction: row; gap: var(--medianil);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-right: calc(-1 * var(--sangria));
  }
  /* 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 */
  .carrusel figure{ flex: 0 0 calc(100vw - 48px); width: calc(100vw - 48px); margin-bottom: 0; }
  /* en mobile la franja de Silät Wuké se comporta como cualquier galería:
     una foto por pantalla, no tres en miniatura */
  .carrusel.arriba{ grid-column: 1 / -1; margin: var(--linea) 0 0; }
  .carrusel.arriba figure{ flex: 0 0 calc(100vw - 48px); }
  .indicador{ display: flex; }
  .submenu{ grid-column: 1 / -1; }
  .video{ grid-column: 1 / -1; }

  /* el mosaico se aplana: una imagen entera por pantalla */
  .mosaico{ height: auto; scroll-snap-type: x mandatory; }
  .mosaico .col{ display: contents; }
  .mosaico .col.doble figure,
  .mosaico .col.doble figure:first-child,
  .mosaico .col.doble figure:last-child,
  .mosaico .col.simple figure,
  .mosaico .col figure{
    flex: 0 0 calc(100vw - 48px);
    height: auto;
    scroll-snap-align: start;
    margin: 0 var(--medianil) 0 0;
  }
  .mosaico img{ width: 100%; height: auto; object-fit: contain; }

  /* 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; }

  /* el poema vuelve a una sola columna y las dos lenguas se apilan */
  .poema-doble{ flex-direction: column; gap: var(--linea); }
  .columna-texto .poema-doble,
  .columna-texto .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;
  }
}