/* ATEM · Decks de campaña — el registro del recontado.
   Hereda la estructura de las series (base.css) y le cambia el metal: las series
   son de oro porque son el archivo; los decks son de plata porque son un relato
   hecho con el archivo. Todo lo demás se mantiene para que el sitio siga siendo uno. */

:root{
  --oro:#9fb3c6; --oro-tenue:#5f7183; --tenue:#93a3b2; --prosa:#bcc5cf;
  --papel:#e4e9ee; --linea:rgba(159,179,198,.20); --fondo:#05070a;
}

/* el aviso de registro: lo primero que se lee, en las dos páginas */
.declara{border:1px solid var(--linea);border-left:3px solid var(--oro-tenue);
         padding:14px 18px;margin:26px 0 6px;color:#aeb9c4;font-size:15.5px;max-width:78ch}
.declara b{color:var(--papel);font-weight:400}
.declara em{color:var(--oro);font-style:italic}

/* ── las pestañas: tres vistas de lo mismo ──────────────────────────────── */
.pestanas{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 6px;border-bottom:1px solid var(--linea)}
.pestanas button{background:none;border:none;border-bottom:2px solid transparent;
                 color:var(--tenue);font:inherit;font-size:15px;padding:11px 20px 10px;
                 cursor:pointer;transition:color .3s,border-color .3s;margin-bottom:-1px}
.pestanas button:hover{color:var(--papel)}
.pestanas button[aria-selected="true"]{color:var(--papel);border-bottom-color:var(--oro)}
.pestanas button small{display:block;font-size:11px;letter-spacing:.16em;
                       text-transform:uppercase;color:var(--oro-tenue);margin-top:2px}
.pestanas button[aria-selected="true"] small{color:var(--oro)}
.leyenda{color:#98a4b0;font-size:15px;max-width:78ch;margin:14px 0 0;min-height:3.2em}
.leyenda b{color:var(--papel);font-weight:400}
.leyenda em{color:var(--oro);font-style:italic}

/* ── el mosaico ─────────────────────────────────────────────────────────── */
/* La lámina es lo que hay que ver. La tarjeta no lleva cuentas ni enlaces: sólo el
   título que trae la portada, la crónica y el año en que se jugó. */
.mosaico{display:grid;gap:26px;margin:22px 0 10px;
         grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.mosaico[hidden],.vista[hidden]{display:none}
/* Mientras las tarjetas viajan de un orden al otro no deben capturar el mouse ni
   arrastrar la barra de scroll con su ancho momentáneo. */
.mosaico.viajando{pointer-events:none}
.pieza{display:block;border:1px solid var(--linea);background:#080b0f;
       transition:border-color .35s,transform .35s,background .35s}
.pieza:hover{border-color:var(--oro);background:#0b0f14;transform:translateY(-3px)}
/* height:auto es obligatorio: el atributo height="" de la etiqueta cuenta como estilo
   de presentación y, con la altura ya definida, el navegador IGNORA aspect-ratio. La
   caja quedaba en 1.15 y object-fit:cover le comía el título a la tapa por los costados.
   Las tapas comparten proporción (560x312), así que la natural ya las uniforma. */
.pieza img{display:block;width:100%;height:auto;border-bottom:1px solid var(--linea)}
.pieza .cuerpo{padding:15px 17px 17px}
.pieza h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;
          color:var(--papel);margin:0 0 6px;line-height:1.2}
.pieza .cronica{font-size:14.5px;color:var(--oro)}
.pieza .anio{margin-top:11px;padding-top:9px;border-top:1px solid var(--linea);
             font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.pieza .anio b{color:#c3ccd5;font-weight:400;letter-spacing:.12em}
.pieza .anio.pendiente{color:#5f7183}
.pieza .variante{font-style:italic}
/* el número de puesto en el orden vigente: lo que hace legible el reordenamiento */
.pieza .puesto{float:right;font-size:12px;letter-spacing:.1em;color:var(--oro-tenue)}
.pieza .tapa{display:block;color:inherit;text-decoration:none}
.pieza .datos{padding:9px 17px;border-top:1px solid var(--linea);color:#8d99a5;
              font-size:12.8px;line-height:1.5}
.pieza .chip{display:block;padding:8px 17px 10px;border-top:1px solid var(--linea);
             color:var(--oro);font-size:12.5px;letter-spacing:.06em;text-decoration:none}
.pieza .chip:hover{color:var(--papel)}
.compania{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:16px 0 0}
.compania .rotulo{color:var(--oro-tenue);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.quien{background:none;border:1px solid var(--linea);border-radius:999px;color:var(--tenue);
       font:inherit;font-size:13px;padding:4px 12px;cursor:pointer;
       transition:color .25s,border-color .25s,background .25s}
.quien i{font-style:normal;color:var(--oro-tenue);font-size:11px;margin-left:4px}
.quien:hover{color:var(--papel);border-color:var(--oro-tenue)}
.quien.cofrade{border-color:rgba(159,179,198,.38)}
.quien[aria-pressed="true"]{background:var(--oro-tenue);color:#05070a;border-color:var(--oro-tenue)}
.quien[aria-pressed="true"] i{color:#05070a}
.quien.limpiar{border-style:dashed}
.eco{color:#98a4b0;font-size:14.5px;margin:10px 0 0}
.eco b{color:var(--papel);font-weight:400}
/* la subselección: lo que no toca la compañía elegida se apaga, sin moverse */
.mosaico.eligiendo .pieza{opacity:.18;filter:saturate(.25);transform:scale(.985)}
.mosaico.eligiendo .pieza{transition:opacity .5s,filter .5s,transform .5s,border-color .5s}
.mosaico.eligiendo .pieza.alguno{opacity:.62;filter:saturate(.7);transform:none}
.mosaico.eligiendo .pieza.todos{opacity:1;filter:none;transform:none;border-color:var(--oro)}
.mosaico.eligiendo .pieza.todos .anio b{color:var(--papel)}
/* y en el salto, los hilos de la compañía elegida */
svg.salto.eligiendo .hilo{opacity:.08}
svg.salto.eligiendo .rot{opacity:.16}
svg.salto.eligiendo .hilo.delaCompania{opacity:1;stroke-width:2.6}
svg.salto.eligiendo .rot.delaCompania{opacity:1}

/* ── el salto: la Figura 1 de la ponencia ───────────────────────────────── */
.salto{width:100%;height:auto;font-family:'EB Garamond',Georgia,serif}
.salto .eje{font-size:13px;fill:var(--tenue);letter-spacing:.14em;text-transform:uppercase}
.salto .hilo{stroke:#3c4a57;stroke-width:1.2}
.salto .hilo.mueve{stroke:#5f7183;stroke-width:1.6}
.salto .hilo.salta{stroke:#b3703f;stroke-width:2.4}
.salto .rot{font-size:13px;fill:#93a3b2}
.salto .rot.salta{fill:#d8c3ac}
.salto a:hover .rot{fill:var(--papel)}
.salto .hilo,.salto .rot{transition:stroke .25s,fill .25s,opacity .25s}
.salto.enfocando .hilo,.salto.enfocando .rot{opacity:.18}
.salto .hilo.aca,.salto .rot.aca{opacity:1}
.salto .hilo.aca{stroke:var(--oro)}
.salto .rot.aca{fill:var(--papel)}
/* el trazo se dibuja solo al entrar en la vista */
@media (prefers-reduced-motion:no-preference){
  .vista.recien .salto .hilo{stroke-dasharray:340;stroke-dashoffset:340;
                             animation:tender .9s ease forwards}
  @keyframes tender{to{stroke-dashoffset:0}}
}
.pie-figura{margin:18px 0 0;color:#98a4b0;font-size:14.5px;max-width:80ch}
.pie-figura b{color:var(--papel);font-weight:400}
.pie-figura .tau{color:var(--oro)}

/* ── el lector ──────────────────────────────────────────────────────────── */
.visor{margin:22px 0 0;position:relative}
.marco{position:relative;border:1px solid var(--linea);background:#020406;overflow:hidden}
.marco img{display:block;width:100%;height:auto}
/* con JS: una lámina por vez. Sin JS: la pila entera, que también se lee.
   La primera trae su clase EN EL MARCADO — si dependiera de una transición, en una
   pestaña en segundo plano no hay rAF y el visor arranca en blanco. */
.js .lamina{display:none}
.js .lamina.activa{display:block;animation:entra .45s ease both}
@keyframes entra{from{opacity:.25}to{opacity:1}}
.lamina{cursor:pointer}

.mando{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 0 4px}
.mando button{background:none;border:1px solid var(--linea);color:var(--tenue);
              font:inherit;font-size:21px;line-height:1;padding:6px 18px;cursor:pointer}
.mando button:hover{border-color:var(--oro);color:var(--papel)}
.mando button[disabled]{opacity:.3;cursor:default}
.mando .cuenta{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);
               min-width:8ch;text-align:center}
.puntos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 0 0}
.puntos button{width:26px;height:4px;padding:0;border:none;background:var(--oro-tenue);
               opacity:.35;cursor:pointer;transition:opacity .3s}
.puntos button:hover{opacity:.7}
.puntos button.aca{opacity:1}
.js-off{display:none}
.no-js .visor .mando,.no-js .visor .puntos{display:none}

/* ── la salida: la puerta al visualizador ───────────────────────────────── */
.salida{margin-top:46px}
.puerta-visor{display:block;border:1px solid var(--linea);border-left:3px solid var(--oro);
              background:#080b0f;padding:20px 22px;transition:border-color .35s,background .35s}
.puerta-visor:hover{border-color:var(--oro);background:#0b0f14}
.puerta-visor .rotulo{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tenue)}
.puerta-visor h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:27px;
                 color:var(--papel);margin:4px 0 8px;line-height:1.15}
.puerta-visor p{color:var(--prosa);font-size:15.5px;margin:0;max-width:74ch}
.puerta-visor .entrar{display:inline-block;margin-top:12px;
                      font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--oro)}
.candado{margin:12px 0 0;color:#8d99a5;font-size:14.5px;max-width:74ch}
.candado b{color:#aeb9c4;font-weight:400}