/* Acerca. Página de lectura: una sola columna y medida corta, porque esto se
 * lee, no se escanea como un tablero. */

.mod-acerca .acerca{max-width:74ch}
.mod-acerca p{font-size:clamp(14px,1.02vw,17px);margin-top:12px}
.mod-acerca .entrada{font-size:clamp(16px,1.3vw,21px);padding:clamp(18px,2.2vw,32px) 0;
  border-bottom:1px solid var(--ink);margin-top:0}
.mod-acerca h2{padding-bottom:14px}
.mod-acerca h3{font-size:clamp(13px,.95vw,16px);font-weight:600;letter-spacing:-.01em}

/* La cadena del dato. En pantalla angosta se apila y las flechas giran. */
.mod-acerca .cadena{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--ink);padding-top:16px;margin-bottom:6px}
.mod-acerca .eslabon{flex:1 1 130px;border:1px solid var(--rule);padding:13px 14px}
.mod-acerca .eslabon b{display:block;font-size:15px;font-weight:600}
.mod-acerca .eslabon span{display:block;margin-top:5px;font-size:clamp(10px,.72vw,12px);
  text-transform:uppercase;letter-spacing:.09em;color:var(--meta)}
.mod-acerca .flecha{align-self:center;color:var(--meta);flex:0 0 auto}

.mod-acerca table.que-hay{width:100%;border-collapse:collapse;margin-top:6px}
.mod-acerca table.que-hay td{padding:11px 16px 11px 0;border-bottom:1px solid var(--rule);
  vertical-align:baseline;font-size:clamp(13px,.98vw,16px)}
.mod-acerca table.que-hay td:first-child{white-space:nowrap;width:1%}
.mod-acerca table.que-hay tr:last-child td{border-bottom:0}
.mod-acerca code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}

.mod-acerca .regla{border-top:1px solid var(--rule);padding-top:14px;margin-top:20px}
.mod-acerca .regla p{margin-top:7px;color:var(--meta)}
.mod-acerca .pie{margin-top:20px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:clamp(11px,.82vw,13px);color:var(--meta)}

@media (max-width:640px){
  .mod-acerca .flecha{transform:rotate(90deg)}
}