/* Sección «Todos los tiempos de tu mundo»: calendarios y líneas de tiempo */
.calendarios .rejilla-cal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .calendarios .rejilla-cal { grid-template-columns: 1fr; } }

.demo-cal { padding: 0; overflow: hidden; }
.demo-cal .cab-cal { padding: 20px 22px 14px; border-bottom: 1px solid var(--borde-suave); }
.demo-cal .cab-cal h3 { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.demo-cal .cab-cal h3 i { color: var(--bronce-osc); }
.instantes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 620px) { .instantes { grid-template-columns: 1fr 1fr; } }
.instante { text-align: left; border: 1px solid var(--borde); background: var(--marfil); border-radius: var(--radio-s); padding: 10px 12px; cursor: pointer; color: var(--tinta); font: 500 .85rem var(--f-ui); display: grid; gap: 2px; }
.instante .genero { font-family: var(--f-inscripcion); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronce-osc); }
.instante b { font-family: var(--f-titular); font-size: 1.05rem; font-weight: 600; }
.instante:hover { border-color: var(--bronce); }
.instante.activo { border-color: var(--bronce); background: var(--fondo-realce); box-shadow: 0 0 0 1px var(--bronce); }
.demo-cal .nota-cal { font-size: .85rem; color: var(--tinta-3); margin-top: 10px; font-style: italic; }

.tabla-cal { display: grid; }
.tabla-cal.entra .valor-cal { animation: girar-fecha .6s ease both; }
/* Sin opacidad: si el navegador pausa animaciones (pestaña oculta, ahorro de energía) el valor sigue legible */
@keyframes girar-fecha { from { transform: translateY(6px); filter: blur(2px); } }
.fila-cal { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; padding: 11px 22px; border-bottom: 1px solid var(--borde-suave); align-items: baseline; }
.fila-cal:last-child { border-bottom: 0; }
.nombre-cal { font-size: .82rem; color: var(--tinta-2); font-weight: 600; }
.nombre-cal small { display: block; font-weight: 400; font-size: .72rem; color: var(--tinta-3); margin-top: 2px; }
.valor-cal { font-family: var(--f-titular); font-size: 1.12rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.fila-cal.propio { background: color-mix(in srgb, var(--oro) 8%, transparent); }
.fila-cal.propio .nombre-cal::before { content: "✦ "; color: var(--bronce); }

.incluidos { display: flex; flex-wrap: wrap; gap: 6px; }
.escalera { display: grid; gap: 8px; margin: 12px 0; }
.peldano { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radio-s); background: var(--papiro-2); border: 1px solid var(--borde-suave); }
.peldano b { font-family: var(--f-titular); font-size: 1.15rem; }
.peldano span { font-size: .85rem; color: var(--tinta-2); }
.peldano:nth-child(2) { margin-left: 16px; } .peldano:nth-child(3) { margin-left: 32px; }
.ancla { display: inline-flex; gap: 8px; align-items: center; font-size: .82rem; padding: 6px 12px; border-radius: 99px; border: 1px dashed var(--bronce); color: var(--bronce-osc); }

.saga { display: grid; gap: 10px; margin-top: 12px; }
.linea-saga { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; font-size: .8rem; }
.linea-saga .etq-saga b { display: block; font-size: .82rem; color: var(--tinta); }
.linea-saga .etq-saga small { color: var(--tinta-3); font-size: .7rem; }
.linea-saga .pista-saga { position: relative; height: 18px; background: var(--papiro-2); border-radius: 4px; }
.linea-saga .tramo-saga { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.linea-saga .t-a { background: var(--oro-claro); } .linea-saga .t-b { background: color-mix(in srgb, var(--egeo) 50%, var(--marfil)); }
.linea-saga .t-c { background: color-mix(in srgb, var(--terracota) 45%, var(--marfil)); }
.saga .anclaje-saga { position: relative; height: 0; }
.saga .anclaje-saga i { position: absolute; top: -78px; height: 84px; width: 0; border-left: 1.5px dashed var(--bronce); left: calc(120px + 10px + (100% - 130px) * .56); }
.precisiones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }