/* Glosario (glosario.js). Cada palabra es una hoja de papel, la misma del
   catalogo (.cat-card[data-papel]); aqui solo se ajusta su contenido. */

#screen-glosario .catalog-head h2:focus{outline:none}

/* las hojas no son botones: no se levantan ni se pueden pulsar enteras */
.gl-hoja.cat-card{cursor:default; padding-bottom:20px}
.gl-hoja.cat-card:hover{transform:rotate(var(--giro,0deg))}

.gl-lista{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px 20px; margin-top:6px}
@media (max-width:560px){ .gl-lista{grid-template-columns:1fr; gap:16px} }

/* la letra que abre cada tramo: tallada en la roca, ocupa toda la fila */
.gl-letra{grid-column:1 / -1; margin:14px 0 -4px; font:800 1.5rem var(--f-talla); color:var(--ink-soft);
  text-shadow:0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.09);
  padding-bottom:4px; border-bottom:2px solid #0c0a08; box-shadow:0 1px 0 rgba(236,225,200,.13)}
.gl-letra:first-child{margin-top:0}

.chip small{color:var(--ink-mute); font-size:.8em}

.gl-hoja h3{font-size:1.4rem; padding-right:4px}
.gl-hoja .gl-cat{font-family:var(--f-mano); font-size:.82rem; color:var(--rojo); margin:2px 0 8px}
.gl-hoja .gl-def{margin:0 0 10px; font-size:1.02rem; line-height:1.5; color:var(--tinta)}

.gl-ej{margin:auto 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding-top:8px;
  border-top:1.4px dashed var(--tinta-tenue)}
.gl-ej > span{font-family:var(--f-nota); font-size:.82rem; color:var(--tinta-suave)}
.gl-especie{cursor:pointer; background:none; border:0; padding:0 1px 1px; font-family:var(--f-mano); font-size:.98rem;
  color:var(--rojo); border-bottom:1.6px solid rgba(143,53,32,.45)}
.gl-especie:hover{border-bottom-color:var(--rojo)}
.gl-especie:focus-visible{outline:2px solid var(--rojo); outline-offset:2px}

/* Palabras con enlace dentro de la ficha: una pincelada de pintura roja dada con el dedo por
   debajo y por encima de la palabra, con el borde roto y las estrias de la yema. La pintura es
   translucida y va detras de la tinta, asi que la palabra se sigue leyendo. Es un fondo y no un
   subrayado porque la letra de la ficha va en spans inline-block, y el fondo si los cubre.
   box-decoration-break:clone repite la pincelada en cada linea si la palabra se parte.
   Sin margen negativo: en Gochi Hand un espacio mide ~.22em, y la pincelada lo tapaba entero
   («Terópodoscarnívoros»). */
.gl-enlace{--v:var(--p0); color:inherit; text-decoration:none; cursor:pointer;
  padding:.1em .22em; margin:0;
  background:var(--v) center / 100% 100% no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.gl-enlace[data-v="1"]{--v:var(--p1)} .gl-enlace[data-v="2"]{--v:var(--p2)}
.gl-enlace:hover{filter:saturate(1.5) brightness(.88)}
.gl-enlace:focus-visible{outline:2px solid var(--rojo); outline-offset:2px}
:root{--p0:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><defs><filter id='f' x='-6%' y='-40%' width='112%' height='180%'><feTurbulence type='fractalNoise' baseFrequency='.05 .42' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='11'/></filter></defs><g filter='url(%23f)'><path d='M4 26 C34 20 62 31 102 25 S168 29 196 21' fill='none' stroke='%23b0301a' stroke-width='14' stroke-linecap='round' stroke-linejoin='round' opacity='.46'/><path d='M4 26 C34 20 62 31 102 25 S168 29 196 21' transform='translate(0 -5)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='70 14 30 9' opacity='.35'/><path d='M4 26 C34 20 62 31 102 25 S168 29 196 21' transform='translate(0 -1)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='46 10 80 7' opacity='.2'/><path d='M4 26 C34 20 62 31 102 25 S168 29 196 21' transform='translate(0 4)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='90 12 22 16' opacity='.3'/><path d='M4 26 C34 20 62 31 102 25 S168 29 196 21' transform='translate(0 8)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='30 8 60 12' opacity='.2'/></g></svg>"); --p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><defs><filter id='f' x='-6%' y='-40%' width='112%' height='180%'><feTurbulence type='fractalNoise' baseFrequency='.05 .42' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='11'/></filter></defs><g filter='url(%23f)'><path d='M3 22 C40 29 70 17 108 24 S172 19 197 27' fill='none' stroke='%23b0301a' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' opacity='.46'/><path d='M3 22 C40 29 70 17 108 24 S172 19 197 27' transform='translate(0 -5)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='60 9 40 11' opacity='.2'/><path d='M3 22 C40 29 70 17 108 24 S172 19 197 27' transform='translate(0 -1)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='34 12 90 8' opacity='.35'/><path d='M3 22 C40 29 70 17 108 24 S172 19 197 27' transform='translate(0 4)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='80 10 28 14' opacity='.2'/><path d='M3 22 C40 29 70 17 108 24 S172 19 197 27' transform='translate(0 8)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='50 9 54 10' opacity='.3'/></g></svg>"); --p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><defs><filter id='f' x='-6%' y='-40%' width='112%' height='180%'><feTurbulence type='fractalNoise' baseFrequency='.05 .42' numOctaves='2' seed='12' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='11'/></filter></defs><g filter='url(%23f)'><path d='M5 28 C30 23 58 24 96 27 S160 20 195 24' fill='none' stroke='%23b0301a' stroke-width='13' stroke-linecap='round' stroke-linejoin='round' opacity='.46'/><path d='M5 28 C30 23 58 24 96 27 S160 20 195 24' transform='translate(0 -6)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='76 11 26 8' opacity='.3'/><path d='M5 28 C30 23 58 24 96 27 S160 20 195 24' transform='translate(0 -2)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='40 9 70 10' opacity='.2'/><path d='M5 28 C30 23 58 24 96 27 S160 20 195 24' transform='translate(0 3)' fill='none' stroke='%23f0b4a4' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='100 14 20 12' opacity='.35'/><path d='M5 28 C30 23 58 24 96 27 S160 20 195 24' transform='translate(0 7)' fill='none' stroke='%237a1708' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='26 7 66 9' opacity='.2'/></g></svg>")}

/* llegar desde una ficha: aviso para volver, y la palabra destacada un momento */
/* el aviso queda pegado arriba de la ventana mientras se baja por el glosario:
   antes habia que subir hasta el principio de la pagina para volver */
.gl-vuelta{position:sticky; top:10px; z-index:6; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px;
  margin:0 0 12px; padding:8px 14px 7px; color:var(--ink-soft);
  background:rgba(28,25,21,.94); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.45)}
.gl-vuelta .ghost-btn{color:var(--accent); border-bottom:1.6px solid currentColor; padding:0 1px 1px; font-size:1.08rem}
.gl-hoja.gl-resalta{animation:glResalta 2.6s ease-out}
@keyframes glResalta{
  0%,55%{filter:brightness(1.2) saturate(1.35); transform:rotate(0deg) scale(1.03)}
  100%{filter:none; transform:rotate(var(--giro,0deg)) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .gl-hoja.gl-resalta{animation:none; filter:brightness(1.15) saturate(1.3)}
}