/* ========================================================================== Bronce Final — estilos por vista Tour · Cronología · Causas · Mapa · Mitos · La red · Créditos ========================================================================== */ /* ========================================================================== TOUR (#tour) — Diseño.md §6.1 ========================================================================== */ /* -------------------------------------------------------------------------- «El cargamento»: atmósferas por acto vista-tour.js escribe data-acto-activo en con el acto de la escena en cámara; de ahí salen el tinte de la barra de progreso y el velo. El velo va al 7 % sobre --bg: decorativo, no mueve los contrastes del cuerpo (re-medidos 2026-08-10: tinta sobre bg velado ≥ 11:1 en ambos temas). -------------------------------------------------------------------------- */ :root { --acento-acto: var(--bronce); } :root[data-acto-activo="1"] { --acento-acto: var(--acto-1); } :root[data-acto-activo="2"] { --acento-acto: var(--acto-2); } :root[data-acto-activo="3"] { --acento-acto: var(--acto-3); } :root[data-acto-activo="4"] { --acento-acto: var(--acto-4); } :root[data-acto-activo="5"] { --acento-acto: var(--acto-5); } #vista-tour::before { content: ""; position: fixed; inset: var(--alto-cabecera) 0 0 0; z-index: -1; pointer-events: none; background-color: color-mix(in srgb, var(--acento-acto) 7%, transparent); transition: background-color var(--t-lento) var(--curva); } /* -------------------------------------------------------------------------- Portada (escena 0) -------------------------------------------------------------------------- */ .portada { position: relative; display: grid; align-items: center; /* Descuenta también la nav inferior: solo con la cabecera, el chevron de «Empezar el tour» quedaba centrado en una caja 56px más alta que la ventana útil y caía debajo de la barra fija en pantallas cortas. */ min-height: calc(100svh - var(--alto-cabecera) - var(--alto-nav-inferior) - env(safe-area-inset-bottom, 0px)); padding-block: var(--e6) var(--e8); overflow: hidden; isolation: isolate; } .portada__mapa { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; background: var(--bg-hundido); } .portada__mapa svg { width: 100%; height: 100%; } /* Cielo que respira: un rescoldo cálido asoma desde abajo del mapa nocturno y late muy despacio («El cargamento»; bucle anotado en Diseño.md §5). Vive en ::before para quedar bajo el velo de contraste (::after). */ .portada > .portada__mapa::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 120% 85% at 50% 108%, color-mix(in srgb, var(--bronce-vivo) 16%, transparent), transparent 62% ); animation: cielo-respira 9s ease-in-out infinite alternate; } @keyframes cielo-respira { from { opacity: 0.45; } to { opacity: 1; } } /* Wordmark letra a letra: vista-tour.js trocea el texto en spans solo si el sistema no pide reduced-motion; sin JavaScript el texto queda estático. */ .portada__marca span { display: inline-block; white-space: pre; animation: letra-alza 0.7s var(--curva) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes letra-alza { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } } /* El «1177 a. C.» del gancho se enciende como un ascua cuando la portada está en cámara (bronce sobre el velo: 4,8:1 claro / 7,2:1 oscuro). */ .ascua-1177 { transition: color var(--t-lento) var(--curva) 1.1s, text-shadow var(--t-lento) var(--curva) 1.1s; } .portada.escena--activa .ascua-1177 { color: var(--bronce); text-shadow: 0 0 16px color-mix(in srgb, var(--bronce-vivo) 60%, transparent); } .portada__contenido { position: relative; } .portada__marca { font-family: var(--serif); font-weight: 600; font-variant-caps: small-caps; letter-spacing: 0.08em; line-height: 1; color: var(--bronce); font-size: clamp(2.6rem, 1.4rem + 7vw, 5.5rem); } .portada__subtitulo { margin-top: var(--e2); font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); color: var(--tinta); } .portada .toggle-pista { margin-top: var(--e3); } .portada .escena__ojear { margin-top: var(--e6); } .demo-chips { margin-top: var(--e6); } /* En Profundizar, el details «Qué es esta web» ya enseña los cuatro chips: sin esta regla la portada mostraba ocho, en dos filas idénticas. */ [data-modo="profundizar"] .demo-chips { display: none; } .demo-chips__pie { margin-bottom: var(--e2); color: var(--tinta-suave); } .portada__chevron { display: grid; place-items: center; width: 44px; height: 44px; margin: var(--e6) 0 0 -10px; color: var(--bronce); border-radius: 999px; animation: chevron-baja 2s var(--curva) infinite; } .portada__chevron svg { width: 28px; height: 28px; } @keyframes chevron-baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* -------------------------------------------------------------------------- Portadillas de acto -------------------------------------------------------------------------- */ .acto { padding-block: var(--e8); background: var(--bg-hundido); border-block: 1px solid var(--linea); /* Filete superior en el color del acto (decorativo, «El cargamento») */ border-top: 3px solid color-mix(in srgb, var(--acento-local, var(--bronce)) 60%, var(--linea)); } .acto[data-acto="1"] { --acento-local: var(--acto-1); } .acto[data-acto="2"] { --acento-local: var(--acto-2); } .acto[data-acto="3"] { --acento-local: var(--acto-3); } .acto[data-acto="4"] { --acento-local: var(--acto-4); } .acto[data-acto="5"] { --acento-local: var(--acto-5); } .acto__numero { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); } .acto__titulo { margin-top: var(--e2); } /* -------------------------------------------------------------------------- Escenas -------------------------------------------------------------------------- */ .escena { position: relative; min-height: 100svh; } /* Móvil: el visual ocupa la mitad superior y el texto scrollea por debajo de él (pasa por detrás), con un degradado de solape en la juntura. */ .escena__visual { position: sticky; top: var(--alto-cabecera); z-index: 2; height: 45svh; display: grid; place-items: center; padding: var(--e4); background: var(--bg-hundido); border-bottom: 1px solid var(--linea); } .escena__visual::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: linear-gradient(to bottom, var(--bg-hundido), transparent); pointer-events: none; } .visual { width: 100%; height: 100%; max-width: 26rem; } .visual--ancha { max-width: 44rem; } /* Las escenas generadas conservan su encuadre cuadrado en los dos layouts. `contain` evita recortar detalles históricos en móvil (banda apaisada) y en escritorio (panel alto); el fondo hundido actúa como paspartú responsive. */ .visual--generada { max-width: 46rem; max-height: 46rem; } .visual--generada:is(video), .visual--generada img { width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--linea); border-radius: var(--radio); filter: drop-shadow(0 2px 10px rgb(43 33 24 / 0.16)); } /* Los vídeos sustituyen a ilustraciones decorativas: el marco no ofrece interacción ni deja que el navegador superponga controles sobre la escena. */ .visual--generada:is(video) { pointer-events: none; } /* Los visuales muy apaisados no necesitan media pantalla de alto en móvil: con la caja ajustada, el dibujo ocupa todo el ancho y su texto se lee. */ .escena--visual-ancho .escena__visual { height: auto; padding-block: var(--e5); } /* Texto dentro de lienzos apaisados: se compensa la reducción de escala */ .visual--ancha .vs-carril-etiqueta text { font-size: 30px; } .visual--ancha .vs-eje text { font-size: 26px; } .visual--ancha .vs-etiqueta { font-size: 30px; } .visual--ancha .vs-grupo-etiqueta text { font-size: 26px; } .escena__texto { position: relative; z-index: 1; padding-block: var(--e6) var(--e8); } .escena__tarjeta { width: 100%; max-width: var(--col-texto); margin-inline: auto; padding-inline: var(--e4); } .escena__tarjeta > * + * { margin-top: var(--e4); } /* Fotos documentales dentro de la tarjeta (y bajo las cartas de Mitos): tope de ~416px CSS, el tamaño al que están optimizadas. Sin él, las verticales —la carta de Amarna, 900×1285— se pintaban a 640×913 en mitad del texto. */ .escena__foto, .mito__foto { max-width: 26rem; } .escena__ojear > p + p { margin-top: var(--e4); } .escena__accion { margin-top: var(--e5); } .escena--sin-visual .escena__texto, .escena__texto--completo { padding-top: var(--e8); } /* El mapa nocturno del cierre ocupa todo su visual */ .escena--cierre .escena__visual { padding: 0; } .escena--cierre .portada__mapa { position: absolute; inset: 0; z-index: 0; } /* ≥1080: grid 55/45 con el visual sticky a la izquierda */ @media (min-width: 1080px) { .escena { display: grid; grid-template-columns: 55% 45%; align-items: start; } .escena--sin-visual { display: block; } .escena__visual, .escena--visual-ancho .escena__visual { height: calc(100svh - var(--alto-cabecera)); border-bottom: none; border-right: 1px solid var(--linea); align-self: start; } .escena__visual::after { display: none; } .escena__texto { padding-block: 22svh 22svh; } .escena__tarjeta { max-width: 30rem; padding-inline: var(--e6); } .visual { max-width: 34rem; } .visual--generada { max-width: 46rem; } .visual--ancha { max-width: 100%; } } /* -------------------------------------------------------------------------- Lista de certezas dentro de los bloques Profundizar -------------------------------------------------------------------------- */ .lista-certeza { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--e2); } .lista-certeza li { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); } /* -------------------------------------------------------------------------- Tabla del balance final (escena 4.2) -------------------------------------------------------------------------- */ .balance { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9375rem; } .balance th, .balance td { padding: var(--e3) 0; border-bottom: 1px solid var(--linea); vertical-align: middle; } .balance th { text-align: left; font-weight: 400; color: var(--tinta); padding-right: var(--e3); } .balance td { text-align: right; white-space: nowrap; } .balance tr:last-child th, .balance tr:last-child td { border-bottom: none; } /* -------------------------------------------------------------------------- Botonera del cierre (escena 5.3) -------------------------------------------------------------------------- */ .botonera { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); } .botonera__pie { font-family: var(--sans); font-size: 0.875rem; } @media (min-width: 480px) { .botonera { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- Marcas de acto en la barra de progreso -------------------------------------------------------------------------- */ .progreso__marca { position: absolute; top: 0; width: 1px; height: 3px; background: var(--tinta-suave); opacity: 0.5; } /* ========================================================================== Lenguaje gráfico de los visuales SVG del tour Todos los colores salen de los tokens: los visuales cambian con el tema. ========================================================================== */ /* Mar con parte de --egeo: el --mar puro, que casi siempre se pinta con opacidad baja sobre pergamino, daba un gris turbio que parecía un placeholder sin estilo. Mezclado, el agua vuelve a leerse como agua. */ .vs-mar { fill: color-mix(in srgb, var(--egeo) 55%, var(--mar)); } .vs-cielo { fill: var(--mar); opacity: 0.82; } .vs-bronce { fill: var(--bronce); } .vs-linea-suave { fill: none; stroke: var(--linea); stroke-width: 2; } .vs-trazo, .vs-trazo * { fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vs-trazo-clave { fill: none; stroke: var(--bronce); stroke-width: 2.5; stroke-linecap: round; } .vs-etiqueta { font-family: var(--sans); font-size: 13px; fill: var(--tinta-suave); } /* Tinta y no bronce: son etiquetas pequeñas sobre --bg-hundido, donde el bronce se queda en 4,40:1 y no llega al AA de texto pequeño. El énfasis lo da la negrita. (Sobre --bg el bronce sí cumple, 4,9:1, que es la pareja que mide Diseño.md §1; sobre --bg-hundido no estaba medida.) */ .vs-etiqueta--clave { fill: var(--tinta); font-weight: 600; } .vs-etiqueta--roja { fill: var(--certeza-rojo); font-weight: 600; } .vs-signo { font-family: var(--sans); font-size: 30px; font-weight: 600; fill: var(--bronce); } .vs-cita { font-family: var(--serif); font-size: 22px; font-weight: 600; fill: var(--bronce); } .vs-sello { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: 0.14em; fill: var(--bronce); } /* 1.1 — el barco */ .vs-casco { fill: color-mix(in srgb, var(--bronce) 16%, transparent); stroke: var(--bronce); stroke-width: 2.5; stroke-linejoin: round; } .vs-vela { fill: color-mix(in srgb, var(--tinta-suave) 22%, transparent); stroke: var(--tinta-suave); stroke-width: 2; } /* 1.2 y 2.2 — tablillas */ .vs-tablilla { fill: var(--bg-alzado); stroke: var(--linea); stroke-width: 2; } .vs-cuna path { fill: var(--tinta-suave); opacity: 0.75; } .vs-tarjeta-cita rect { fill: var(--bg-alzado); stroke: var(--bronce); stroke-width: 2; } .vs-renglon rect { fill: var(--tinta-suave); opacity: 0.3; } .vs-renglon-clave { fill: color-mix(in srgb, var(--bronce) 32%, transparent); } /* 1.3 — la aleación */ .vs-gota--cobre path { fill: var(--bronce-vivo); } .vs-gota--estano path { fill: var(--tinta-suave); } /* 1.4 y 3.2 — arquitectura */ .vs-muralla { fill: none; stroke: var(--tinta-suave); stroke-width: 3; } .vs-sala { fill: var(--bg-alzado); stroke: var(--linea); stroke-width: 2; } .vs-sala--anexa { fill: var(--bg-hundido); } .vs-hogar { fill: none; stroke: var(--bronce); stroke-width: 2.5; } .vs-hogar--fuego { fill: color-mix(in srgb, var(--bronce-vivo) 35%, transparent); } .vs-columna rect { fill: var(--tinta-suave); } /* 2.1 — la muralla que engorda */ .vs-muro-viejo path { fill: var(--tinta-suave); } .vs-bloques path { fill: color-mix(in srgb, var(--tinta-suave) 26%, transparent); stroke: var(--tinta-suave); stroke-width: 2; stroke-linejoin: round; } .vs-tunel { fill: none; stroke: var(--egeo); stroke-width: 2; stroke-dasharray: 6 6; } .vs-agua { fill: var(--egeo); } /* 2.3 — los anillos */ .vs-tronco { fill: var(--bg-hundido); stroke: var(--linea); stroke-width: 2; } .vs-anillo circle { fill: none; stroke: var(--tinta-suave); stroke-width: 2; opacity: 0.5; } .vs-anillo--estrecho circle { stroke: var(--certeza-rojo); stroke-width: 2.5; opacity: 1; } /* 2.4 y 3.4 — el mar */ .vs-barco { fill: var(--bronce); stroke: var(--bronce); stroke-width: 2; stroke-linejoin: round; } .vs-ola path { fill: none; stroke: color-mix(in srgb, var(--bronce) 45%, transparent); stroke-width: 2; } .vs-reflejo path { fill: var(--bronce); opacity: 0.16; } /* Fuego: siempre bronce vivo, nunca los colores del semáforo */ .vs-llama path { fill: var(--bronce-vivo); } /* 3.1 — mini-cronología */ .vs-carril-etiqueta text { font-family: var(--sans); font-size: 13px; fill: var(--tinta-suave); } .vs-pista rect { fill: var(--bg-hundido); } .vs-marca-1177 { fill: none; stroke: var(--certeza-rojo); stroke-width: 2; stroke-dasharray: 7 6; } .vs-eje text { font-family: var(--sans); font-size: 12px; fill: var(--tinta-suave); } /* 3.3, 3.4 y 5.1 — ciudades, ruinas y aldeas */ .vs-ciudad path { fill: var(--tinta-suave); } .vs-puerta { fill: none; stroke: var(--bronce); stroke-width: 3; } .vs-ventana--apagada rect { fill: var(--bg); opacity: 0.3; } .vs-ventana--encendida rect { fill: var(--bronce-vivo); } .vs-ruina path, .vs-aldea path { fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linejoin: round; } .vs-divisoria { fill: none; stroke: var(--linea); stroke-width: 2; stroke-dasharray: 4 7; } /* 3.5 y 5.2 — trípticos */ .vs-panel rect { fill: var(--bg-alzado); stroke: var(--linea); stroke-width: 2; } .vs-etiqueta-panel text { font-family: var(--sans); font-size: 13px; fill: var(--tinta-suave); } /* 4.1 — la rueda de reconocimiento */ .vs-foco path { fill: color-mix(in srgb, var(--bronce) 12%, transparent); } .vs-pared path { fill: none; stroke: var(--linea); stroke-width: 1.5; } .vs-silueta * { fill: var(--tinta-suave); } .vs-grupo-etiqueta text { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--bronce); } /* ========================================================================== CRONOLOGÍA (#cronologia) — Diseño.md §6.2 Móvil: el tiempo baja (arriba = más antiguo) y cada carril es una columna. ≥768: el tiempo va de izquierda a derecha y cada carril es una fila. ========================================================================== */ .crono__intro { max-width: var(--col-texto); margin-bottom: var(--e5); } /* Píldora de dato (región, intervalo): nunca usa los colores del semáforo */ .dato { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radio-chip); border: 1px solid var(--linea); background: var(--bg-hundido); color: var(--tinta-suave); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; } /* --- Filtros de carril (móvil) -------------------------------------------- */ .crono__filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); } .chip-filtro { display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px; padding: var(--e1) var(--e4); border-radius: var(--radio-chip); border: 1.5px solid var(--linea); background: transparent; color: var(--tinta-suave); font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); } /* La marca de encendido de los multi-filtro (cronología y mapa): en bronce macizo, cinco chips activos a la vez parecían cinco botones primarios; el check dice «esto está activo y se puede apagar». Los selectores exclusivos de La red no llevan marca: ahí el chip funciona como una radio. */ .chip-filtro__marca { display: none; width: 13px; height: 13px; flex: none; } .chip-filtro[aria-pressed="true"] .chip-filtro__marca { display: block; } /* Activo en bronce macizo, igual que la opción marcada del toggle de modo. El fondo tintado anterior (bronce al 14 %) dejaba el texto de 13px en 4,1:1 sobre --bg en tema claro; así son 4,9:1 en claro y 7,3:1 en oscuro, por encima del 4,5:1 que exige Diseño.md §8. */ .chip-filtro.es-activo { border-color: var(--bronce); background: var(--bronce); color: var(--bg); font-weight: 600; } /* --- Lienzo --------------------------------------------------------------- */ .crono { display: flex; gap: var(--e2); height: 1100px; } .crono__eje { flex: none; width: 54px; display: flex; flex-direction: column; } /* Fantasma con la misma caja que el nombre de carril: la regla arranca así exactamente donde arrancan las pistas y los porcentajes coinciden. */ .crono__fantasma { visibility: hidden; } .crono__regla { position: relative; flex: 1; } .crono__marca { position: absolute; top: var(--pos); right: var(--e2); transform: translateY(-50%); font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-suave); white-space: nowrap; } /* En vertical, cinco regiones no caben a la vez: el carril se dimensiona para que cada barra sea tocable (≥44px) y la tira scrollea en horizontal (Diseño.md §3). Los filtros de arriba permiten quedarse con una o dos. */ .crono__carriles { flex: 1; display: flex; gap: var(--e2); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .crono__carril { flex: none; width: max(96px, calc(var(--subs) * 48px)); display: flex; flex-direction: column; scroll-snap-align: start; } /* «El cargamento»: cada carril toma el color de su material (tokens.css). Como texto pequeño no llegan a 4,5:1 en claro, así que el color vive en formas: tinte de pista, barras y el punto junto al nombre (≥3:1 medido). */ .crono__carril[data-carril="egeo"] { --region: var(--region-egeo); } .crono__carril[data-carril="anatolia"] { --region: var(--region-anatolia); } .crono__carril[data-carril="chipre"] { --region: var(--region-chipre); } .crono__carril[data-carril="levante"] { --region: var(--region-levante); } .crono__carril[data-carril="egipto"] { --region: var(--region-egipto); } .crono__carril[hidden] { display: none; } .crono__nombre { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; color: var(--tinta-suave); text-align: center; padding-bottom: var(--e2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Punto de material antes del nombre: el color regional como identificador no textual (el nombre sigue en tinta; el punto pasa de 3:1 en ambos temas). El fantasma del eje hereda la caja pero no debe pintar punto. */ .crono__carril .crono__nombre::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--region, var(--bronce)); vertical-align: 1px; } .crono__pista { position: relative; flex: 1; /* Cada columna lleva el acento sutil de su región (Diseño.md §6.2 + «El cargamento»: antes era bronce al 6 % para todas) */ background: color-mix(in srgb, var(--region, var(--bronce)) 8%, var(--bg-hundido)); border-radius: var(--radio); } /* Marcador «1177»: cruza todos los carriles. Late muy despacio para subrayar que casi ninguna barra lo toca («El cargamento»); el bucle lo detiene el bloque global de prefers-reduced-motion de base.css §16. */ .crono__1177 { position: absolute; top: var(--pos); left: 0; right: 0; border-top: 2px dashed var(--certeza-rojo); pointer-events: none; z-index: 2; animation: crono-late 2.4s ease-in-out infinite; } @keyframes crono-late { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* --- Barras de suceso ----------------------------------------------------- */ .suceso { position: absolute; top: var(--ini); /* Un suceso de uno o dos años ocupa milímetros del eje: se le da un mínimo tocable de 44px (Diseño.md §8) sin tocar la posición de sus bordes. */ height: max(44px, calc(var(--fin) - var(--ini))); left: calc(var(--sub) * (100% / var(--subs))); width: calc(100% / var(--subs) - 3px); padding: 0; border-radius: 14px; text-align: left; color: var(--tinta); } /* En móvil las barras son el dato: el título vive en la ficha que abren */ .suceso__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* La barra va en un hijo: la máscara de niebla no debe comerse el foco */ .suceso__barra { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--region, var(--bronce)) 30%, transparent); /* Bordes difuminados: la tesis visual de la web (Diseño.md §6.2) */ mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent); transition: background var(--t-rapido) var(--curva); } .suceso:hover .suceso__barra, .suceso:focus-visible .suceso__barra { background: color-mix(in srgb, var(--region, var(--bronce)) 48%, transparent); } @media (min-width: 768px) { .crono { flex-direction: column; height: auto; gap: 0; } .crono__eje { order: 2; width: auto; height: 34px; /* 150px de nombre + 12px de hueco: en sincronía con .crono__nombre */ margin-left: 162px; } .crono__fantasma { display: none; } .crono__marca { top: auto; bottom: var(--e2); right: auto; left: var(--pos); transform: translateX(-50%); } .crono__carriles { order: 1; flex-direction: column; gap: var(--e2); overflow-x: visible; } .crono__carril { width: auto; } /* 72px de alto salvo que la región tenga sucesos simultáneos: entonces crece lo justo para que cada subcarril siga siendo tocable (≥44px, Diseño.md §8: a 38px por subcarril, las barras de Anatolia se quedaban en 31px). */ .crono__carril { flex-direction: row; align-items: stretch; gap: var(--e3); height: max(72px, calc(var(--subs) * 54px)); } .crono__nombre { flex: none; align-self: center; /* 150px: «Egipto y Mesopotamia» cabe entero; antes truncaba a 128px sin forma de leerlo. En horizontal además puede partir en dos líneas. */ width: 150px; text-align: right; padding-bottom: 0; font-size: 0.875rem; white-space: normal; overflow: visible; } .crono__pista { background: color-mix(in srgb, var(--region, var(--bronce)) 8%, var(--bg-hundido)); } .crono__1177 { top: 0; bottom: 0; left: var(--pos); right: auto; border-top: none; border-left: 2px dashed var(--certeza-rojo); } .suceso { top: calc(6px + var(--sub) * ((100% - 12px) / var(--subs))); height: calc((100% - 12px) / var(--subs) - 4px); left: var(--ini); width: max(44px, calc(var(--fin) - var(--ini))); } .suceso__barra { mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } /* El título vuelve a ser visible: en horizontal hay sitio. `display: block` y no flex: con la etiqueta como contenedor flex, `text-overflow` no aplicaba y los títulos se cortaban a cuchillo, sin puntos suspensivos. */ .suceso__etiqueta { position: absolute; inset: 0; display: block; align-content: center; width: auto; height: auto; clip-path: none; padding: 0 var(--e2); font-family: var(--sans); font-size: 0.75rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .crono__pie { margin-top: var(--e5); } /* ========================================================================== CAUSAS (#causas) — Diseño.md §6.3 ========================================================================== */ .migas { font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); margin-bottom: var(--e4); } .migas a { color: var(--egeo); } .causas__intro { max-width: var(--col-texto); margin-bottom: var(--e5); } /* --- Acordeón (móvil) ----------------------------------------------------- */ .causas-acordeon { display: flex; flex-direction: column; gap: var(--e3); } .grupo { background: var(--bg-alzado); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; border-left: 3px solid var(--acento-grupo, var(--linea)); } /* «El cargamento»: cada grupo de causas lleva el color de su material — Naturaleza malaquita, Gentes cobre, Sistema lapis. Solo acentos de forma (icono, filete, aro del radial); los veredictos siguen siendo del semáforo y nada del semáforo cambia. */ [data-grupo="naturaleza"] { --acento-grupo: var(--region-anatolia); } [data-grupo="gentes"] { --acento-grupo: var(--region-chipre); } [data-grupo="sistema"] { --acento-grupo: var(--region-egeo); } .grupo__cabecera { font-size: inherit; margin: 0; } .grupo__boton { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 64px; padding: var(--e3) var(--e4); text-align: left; } .grupo__icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--acento-grupo, var(--bronce)) 14%, transparent); color: var(--acento-grupo, var(--bronce)); } .grupo__icono svg { width: 22px; height: 22px; } .grupo__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; } .grupo__nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--bronce); line-height: 1.2; } .grupo__ojear { font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); line-height: 1.35; } .grupo__chevron { flex: none; display: grid; place-items: center; color: var(--tinta-suave); transition: transform var(--t-rapido) var(--curva); } .grupo__chevron svg { width: 22px; height: 22px; } .grupo.es-abierto .grupo__chevron { transform: rotate(180deg); } .grupo__factores { list-style: none; margin: 0; padding: 0 var(--e4) var(--e3); } .factor-enlace { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 52px; padding: var(--e2) 0; border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; } .factor-enlace:hover .factor-enlace__nombre { color: var(--bronce); } .factor-enlace__nombre { font-family: var(--sans); font-size: 0.9375rem; } /* --- Radial (≥768) -------------------------------------------------------- */ .causas-radial { display: none; } .radial__arista { fill: none; stroke: var(--linea); stroke-width: 2; } /* Las aristas de factor se dibujan al desplegar el grupo. La longitud real va de 140 (factor central) a ~205 (los del abanico ±40°), así que el SVG las normaliza con pathLength="140": si no, las seis aristas largas se quedaban cortas y no llegaban a tocar su nodo. */ .radial__arista--factor { stroke: var(--bronce); stroke-dasharray: 140; stroke-dashoffset: 140; opacity: 0; transition: stroke-dashoffset var(--t-lento) var(--curva), opacity var(--t-rapido) var(--curva); } .radial__arista--factor.es-visible { stroke-dashoffset: 0; opacity: 0.55; } .radial__circulo { fill: var(--bg-alzado); stroke: var(--linea); stroke-width: 2; } /* Fondo alzado y no hundido: la pregunta va en bronce y sobre --bg-hundido se quedaba en 4,40:1; sobre --bg-alzado sube a 4,9:1 y cumple AA. */ .radial__circulo--centro { fill: var(--bg-alzado); stroke: var(--bronce); } .radial__circulo--grupo { stroke: var(--acento-grupo, var(--bronce)); cursor: pointer; transition: fill var(--t-rapido) var(--curva); } /* Relleno opaco: las aristas de los factores salen del centro del grupo y no deben verse cruzando su círculo. Al 10 % y no al 16 %: con más tinte, el rótulo en bronce que va encima bajaba a 4,34:1 y no llegaba al AA. Con los acentos de grupo de «El cargamento», re-medido 2026-08-10: el rótulo queda en 4,68–4,76 (claro) y 5,77–6,0 (oscuro) sobre los tres tintes. */ .radial__grupo:hover .radial__circulo--grupo, .radial__grupo.es-abierto .radial__circulo--grupo { fill: color-mix(in srgb, var(--acento-grupo, var(--bronce)) 10%, var(--bg-alzado)); } .radial__icono { color: var(--acento-grupo, var(--bronce)); pointer-events: none; } .radial__etiqueta { font-family: var(--sans); font-size: 14px; fill: var(--tinta); pointer-events: none; } .radial__etiqueta--grupo { font-size: 13px; font-weight: 600; fill: var(--bronce); } .radial__etiqueta--centro { font-family: var(--serif); font-size: 18px; font-weight: 600; fill: var(--bronce); } .radial__factor { opacity: 0; pointer-events: none; transition: opacity var(--t-medio) var(--curva); } .radial__factor.es-visible { opacity: 1; pointer-events: auto; cursor: pointer; } .radial__factor:hover .radial__circulo--factor { stroke: var(--bronce); } /* Foco visible dibujado con el trazo: `outline` no se pinta sobre elementos SVG en Safari, y el radial es la única vía a las causas en ≥768px. Mismo patrón que .red__nodo:focus-visible. */ .radial__grupo:focus-visible .radial__circulo--grupo, .radial__factor:focus-visible .radial__circulo--factor { stroke: var(--egeo); stroke-width: 3.5; } /* La marca del veredicto es el icono del semáforo vía (los símbolos pintan con stroke=currentColor): un punto de color a secas dejaba el color como único canal, contra Diseño.md §8. */ .radial__punto { pointer-events: none; } .radial__punto--verde { color: var(--certeza-verde); } .radial__punto--ambar { color: var(--certeza-ambar); } .radial__punto--azul { color: var(--certeza-azul); } .radial__punto--rojo { color: var(--certeza-rojo); } @media (min-width: 768px) { .causas-radial { display: block; margin-bottom: var(--e7); } .causas-radial svg { width: 100%; max-width: 46rem; height: auto; margin-inline: auto; } .causas-acordeon { display: none; } } /* --- Niveles del factor (panel/sheet) ------------------------------------- */ .nivel-idea { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--tinta); } .nivel-titulo { font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: var(--e2); } .nivel { padding-top: var(--e3); border-top: 1px solid var(--linea); } /* Regla fija: toda rama termina mostrando su límite antes del veredicto */ .bloque-limite { border-top: none; border-left: 3px solid var(--certeza-ambar); padding: var(--e3) 0 var(--e3) var(--e4); background: color-mix(in srgb, var(--certeza-ambar) 8%, transparent); border-radius: 0 var(--radio) var(--radio) 0; } .bloque-limite .nivel-titulo { color: var(--certeza-ambar); } .veredicto { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font-family: var(--sans); font-size: 0.9375rem; } /* --- Balance final -------------------------------------------------------- */ .balance-final { max-width: var(--col-texto); margin-top: var(--e7); } .balance-final h2 { margin-bottom: var(--e4); } /* --- Profundizar en la rueda (2026-08-09) --------------------------------- La capa visual del modo Profundizar: la incertidumbre baja al trazo, los veredictos se ven con los grupos cerrados, el centro abre el método, la rueda reacciona al interrogatorio y recuerda a quién has interrogado. */ /* 1. El trazo de la incertidumbre: anillo punteado para el veredicto azul («pregunta abierta»). El patrón acompaña al color y al icono del nodo: nunca color solo (Diseño.md §8). Ojear mantiene la rueda limpia. */ [data-modo="profundizar"] .radial__circulo--azul { stroke-dasharray: 2.5 5.5; stroke-linecap: round; } /* La arista no puede llevar punteado: su dasharray ES el mecanismo del dibujado (pathLength 140). La incertidumbre se expresa con la opacidad. */ [data-modo="profundizar"] .radial__arista--azul.es-visible { opacity: 0.3; } /* 2. Mini-semáforo de veredictos bajo cada grupo cerrado (radial) y en la cabecera del acordeón: la vista recién cargada ya enseña el paisaje de certeza. Con el grupo abierto se oculta: los nodos reales ya lo dicen. */ .radial__semaforo { display: none; } [data-modo="profundizar"] .radial__grupo:not(.es-abierto) .radial__semaforo { display: initial; } .grupo__semaforo { display: none; } [data-modo="profundizar"] .grupo:not(.es-abierto) .grupo__semaforo { display: inline-flex; gap: 6px; margin-top: 2px; } .grupo__semaforo svg { width: 14px; height: 14px; } .icono-certeza--verde { color: var(--certeza-verde); } .icono-certeza--ambar { color: var(--certeza-ambar); } .icono-certeza--azul { color: var(--certeza-azul); } .icono-certeza--rojo { color: var(--certeza-rojo); } .icono-certeza--visto { color: var(--tinta-suave); } /* 3. El centro tocable: abre el método (#causas/metodo). La pista visual solo se pinta en Profundizar; el botón funciona en ambos modos. */ .radial__centro[data-metodo] { cursor: pointer; } .radial__centro[data-metodo] .radial__circulo--centro { transition: fill var(--t-rapido) var(--curva); } .radial__centro[data-metodo]:hover .radial__circulo--centro { fill: color-mix(in srgb, var(--bronce) 8%, var(--bg-alzado)); } .radial__centro[data-metodo]:focus-visible .radial__circulo--centro { stroke: var(--egeo); stroke-width: 3.5; } .radial__metodo-pista { display: none; font-family: var(--sans); font-size: 12.5px; fill: var(--egeo); pointer-events: none; } [data-modo="profundizar"] .radial__metodo-pista { display: initial; } /* Tarjeta de entrada al método en móvil (<768 no renderiza la rueda). */ .metodo-tarjeta { display: none; } [data-modo="profundizar"] .metodo-tarjeta { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--e5); padding: var(--e3) var(--e4); background: var(--bg-alzado); border: 1px solid var(--linea); border-left: 3px solid var(--bronce); border-radius: var(--radio); text-decoration: none; animation: revelar-bloque var(--t-medio) var(--curva); } @media (min-width: 768px) { [data-modo="profundizar"] .metodo-tarjeta { display: none; } } .metodo-tarjeta__titulo { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--bronce); } .metodo-tarjeta__texto { font-family: var(--serif); font-size: 0.9375rem; color: var(--tinta); } /* 4. La rueda reacciona al interrogatorio (≥1080 sigue visible junto al panel): el interrogado queda resaltado y el resto se atenúa. */ .radial__grupo, .radial__centro { transition: opacity var(--t-medio) var(--curva); } [data-modo="profundizar"] .causas-radial.es-interrogando .radial__grupo:not(.es-abierto), [data-modo="profundizar"] .causas-radial.es-interrogando .radial__factor.es-visible:not(.es-activo), [data-modo="profundizar"] .causas-radial.es-interrogando .radial__centro { opacity: 0.35; } .radial__factor.es-activo .radial__circulo--factor { stroke: var(--bronce); stroke-width: 3; } /* Caso especial «marco» (colapso en cascada): nadie se atenúa — la rueda entera se ilumina suavemente. Su definición es la coincidencia y transmisión de los demás mecanismos: la rueda lo dice sin una palabra. */ .radial__circulo { transition: fill var(--t-medio) var(--curva); } .radial__arista { transition: stroke var(--t-medio) var(--curva), opacity var(--t-medio) var(--curva); } [data-modo="profundizar"] .causas-radial.es-marco .radial__circulo { fill: color-mix(in srgb, var(--bronce) 10%, var(--bg-alzado)); } [data-modo="profundizar"] .causas-radial.es-marco .radial__arista { stroke: var(--bronce); opacity: 0.55; } /* 5. La marca del interrogado: ✓ discreto, como los visitados del expediente. */ .radial__visto { display: none; color: var(--tinta-suave); } .radial__factor.es-interrogado .radial__visto { display: initial; } .factor-enlace__visto { display: none; color: var(--tinta-suave); margin-left: 6px; vertical-align: middle; } .factor-enlace.es-interrogado .factor-enlace__visto { display: inline-flex; } .factor-enlace__visto svg { width: 14px; height: 14px; } /* 6. Leyenda de la rueda. El `p.` gana en especificidad al display:block de `[data-modo="profundizar"] .solo-profundizar` (base.css §11). */ [data-modo="profundizar"] p.radial__leyenda, html:not(.js) p.radial__leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e4); margin-top: calc(-1 * var(--e3)); font-family: var(--sans); font-size: 0.8125rem; color: var(--tinta-suave); } .radial__leyenda-item { display: inline-flex; align-items: center; gap: 6px; } .radial__leyenda svg { width: 14px; height: 14px; } /* 7. Niveles nuevos de la ficha: cadena, casos, pregunta abierta. La cadena son puntos unidos por un trazo que se desvanece: estados que se suceden, sin flechas de agente (la tesis visual de la web, también aquí). */ .cadena { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.9375rem; } .cadena li { position: relative; padding: 5px 0 5px 22px; } .cadena li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 8px; height: 8px; border-radius: 999px; background: var(--bronce); } .cadena li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: -8px; width: 2px; background: linear-gradient( color-mix(in srgb, var(--bronce) 70%, transparent), color-mix(in srgb, var(--bronce) 20%, transparent) ); } .factor-secuencia__nota { margin-top: var(--e2); font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); } .metodo-preguntas { margin: 0; padding-left: 1.25em; } .metodo-preguntas li { padding: 4px 0; } .metodo-preguntas strong { font-family: var(--serif); } .factor-casos__lista { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; } .factor-casos__lista li { padding: var(--e2) 0; border-top: 1px solid var(--linea); } .factor-casos__lista li:first-child { border-top: none; padding-top: 0; } .factor-casos__lista a { font-family: var(--sans); font-weight: 500; color: var(--egeo); } /* ========================================================================== CRÉDITOS Y MÉTODO (#creditos) — Diseño.md §6.7 ========================================================================== */ .creditos__bloque { margin-top: var(--e8); } .creditos__bloque:first-child { margin-top: var(--e5); } .creditos__bloque h2 { margin-bottom: var(--e4); } .creditos__bloque h3 { margin-top: var(--e6); margin-bottom: var(--e3); } .creditos__bloque h4 { margin-top: var(--e5); margin-bottom: var(--e3); color: var(--tinta-suave); font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; } .creditos__bloque p + p { margin-top: var(--e4); } .lista-certeza--metodo li { align-items: flex-start; gap: var(--e3); color: var(--tinta); line-height: 1.5; } .lista-certeza--metodo .chip { flex: none; margin-top: 2px; } /* --- Licencias ------------------------------------------------------------ */ .licencias { list-style: none; margin: var(--e4) 0 0; display: flex; flex-direction: column; gap: var(--e4); } .licencias li { padding-left: var(--e4); border-left: 2px solid var(--linea); } .licencia__titulo { font-family: var(--sans); font-size: 1rem; font-weight: 600; } .licencia__detalle { font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); } .licencias p + p { margin-top: var(--e1); } /* --- Bibliografía --------------------------------------------------------- */ .biblio__seccion { margin-top: var(--e6); } .biblio__entradas { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--e4); } .biblio__entrada { padding-left: var(--e4); border-left: 2px solid var(--linea); } .biblio__clave { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--bronce); } .biblio__cita { font-size: 0.9375rem; line-height: 1.5; } .biblio__nota { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-suave); } .biblio__entrada p + p { margin-top: var(--e1); } .biblio__aparte { font-size: 0.9375rem; color: var(--tinta-suave); margin-bottom: var(--e4); } .biblio__lista { margin: var(--e3) 0 0 var(--e4); font-size: 0.9375rem; line-height: 1.6; } .biblio__lista li + li { margin-top: var(--e2); } /* ========================================================================== LA RED (#red) — Diseño.md §6.6 ========================================================================== */ .red__intro, .red__cierre { max-width: var(--col-texto); } .red__controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-block: var(--e5) var(--e4); } .red__filtros { display: flex; flex-wrap: wrap; gap: var(--e2); } /* En móvil el grafo se dibuja a tamaño real y la tira scrollea: así los nodos siguen siendo tocables (Diseño.md §6.6 y §8). */ /* Sin `touch-action`: aquí el scroll útil es el horizontal, y el `pan-y pinch-zoom` que pide Diseño.md §6.6 —pensado para un grafo que cabía a lo ancho— le prohibía al compositor justo el eje que hace falta, dejando inalcanzables con el dedo los nodos de la derecha. El valor por defecto permite ambos ejes y conserva el doble toque. Anotado en PENDIENTES.md. */ .red__marco { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--linea); border-radius: var(--radio); } .red__lienzo { width: 1000px; /* Anula el max-width del reset: aquí el grafo debe salirse y scrollear, o los nodos dejarían de ser tocables. */ max-width: none; height: 620px; display: block; } @media (min-width: 1080px) { .red__lienzo { width: 100%; max-width: 100%; height: auto; } } /* Mismo mar que .vs-mar: el --mar puro al 35 % daba un gris de placeholder */ .red__fondo { fill: color-mix(in srgb, var(--egeo) 55%, var(--mar)); opacity: 0.28; } /* Veladura de azul cobalto («El cargamento»): una pasada de profundidad desde el norte del lienzo, puramente decorativa. */ .red__veladura-a { stop-color: color-mix(in srgb, var(--region-egeo) 45%, transparent); } .red__veladura-b { stop-color: transparent; } .red__velo { opacity: 0.14; pointer-events: none; } /* --- Aristas -------------------------------------------------------------- */ .red__arista { fill: none; stroke: color-mix(in srgb, var(--bronce) 45%, transparent); stroke-width: 2; stroke-dasharray: 6 8; animation: flujo-red 3.4s linear infinite; transition: opacity var(--t-medio) var(--curva), stroke var(--t-medio) var(--curva); } @keyframes flujo-red { to { stroke-dashoffset: -28; } } .red__arista.es-atenuada { opacity: 0.15; } /* «El cargamento»: cada flujo circula en el color de su material. El color nunca va solo: el chip lleva etiqueta y el pie bajo el lienzo la repite. */ .red[data-flujo="cobre"] { --color-flujo: var(--region-chipre); } .red[data-flujo="estano"] { --color-flujo: var(--mat-estanyo); } .red[data-flujo="grano"] { --color-flujo: var(--region-egipto); } .red[data-flujo="regalos"] { --color-flujo: var(--bronce-vivo); } .red[data-flujo="cartas"] { --color-flujo: var(--egeo); } .red[data-flujo="vasallaje"] { --color-flujo: var(--region-levante); } .red__arista.es-resaltada { stroke: var(--color-flujo, var(--bronce-vivo)); stroke-width: 3; /* El flujo resaltado circula más deprisa: se ve QUÉ se mueve y por dónde */ animation-duration: 1.6s; } /* --- Nodos ---------------------------------------------------------------- */ .red__nodo { cursor: pointer; } /* Círculo invisible que garantiza los 44px de área de toque */ .red__toque { fill: transparent; } .red__circulo { fill: var(--bg-alzado); stroke: var(--bronce); stroke-width: 2; transition: opacity var(--t-medio) var(--curva), stroke-dasharray var(--t-medio) var(--curva); } .red__nodo:hover .red__circulo, .red__nodo:focus-visible .red__circulo { stroke: var(--bronce-vivo); stroke-width: 3; } .red__etiqueta { font-family: var(--sans); font-size: 15px; fill: var(--tinta); pointer-events: none; } /* --- «Después de 1200»: cada nodo según su destino ------------------------ */ .red__nodo { transition: opacity var(--t-lento) var(--curva); } .red[data-despues="si"] .red__nodo[data-destino="cayo"] { opacity: 0.3; } .red[data-despues="si"] .red__nodo[data-destino="cayo"] .red__circulo { stroke-dasharray: 3 6; } .red[data-despues="si"] .red__nodo[data-destino="transformo"] .red__circulo { stroke-dasharray: 8 5; animation: parpadeo-nodo 1.6s var(--curva) 3; } @keyframes parpadeo-nodo { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .red[data-despues="si"] .red__arista { opacity: 0.25; } /* Onda de choque al caer un nodo: invisible de partida, se dibuja una vez dentro de la cascada. Color de incendio decorativo (no es certeza-rojo). */ .red__onda { fill: none; stroke: var(--acto-3); stroke-width: 2; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; } /* La cascada («El cargamento»): el apagado nace en Hatti y se propaga nodo a nodo, 160 ms por puesto. Solo sin reduced-motion: con él, el cambio entero es el fundido corto global de base.css §16, sin escalonar. */ @media (prefers-reduced-motion: no-preference) { .red[data-despues="si"] .red__nodo { transition-delay: calc(var(--od, 0) * 160ms); } .red[data-despues="si"] .red__nodo[data-destino="transformo"] .red__circulo { animation-delay: calc(var(--od, 0) * 160ms); } .red[data-despues="si"] .red__nodo[data-destino="cayo"] .red__onda { animation: onda-caida 1.3s var(--curva) forwards; animation-delay: calc(var(--od, 0) * 160ms + 120ms); } } @keyframes onda-caida { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } } @media (prefers-reduced-motion: reduce) { .red__arista { animation: none; } .red[data-despues="si"] .red__nodo[data-destino="transformo"] .red__circulo { animation: none; } } /* Texto completo del flujo activo: el `title` del chip no existe en táctil ni con teclado. Altura mínima reservada para que encender un flujo no salte. */ .red__flujo-pie { margin-top: var(--e2); min-height: 1.5em; color: var(--tinta-suave); } .red__cierre { margin-top: var(--e5); } .red__cierre > * + * { margin-top: var(--e3); } /* ========================================================================== MITO Y EVIDENCIA (#mitos) — Diseño.md §6.5 ========================================================================== */ .mitos__intro { max-width: var(--col-texto); margin-bottom: var(--e5); } .mitos { list-style: none; margin: 0; display: flex; gap: var(--e4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--e4); } .mito { flex: none; width: 85vw; max-width: 26rem; scroll-snap-align: center; display: flex; flex-direction: column; gap: var(--e3); } .mito__carta { position: relative; width: 100%; min-height: 22rem; perspective: 1000px; } .mito__cara--anverso { cursor: pointer; text-align: left; font: inherit; color: inherit; } .mito__volver { align-self: flex-start; margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; } .mito__cara { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); border-radius: var(--radio); border: 1px solid var(--linea); background: var(--bg-alzado); box-shadow: var(--sombra); backface-visibility: hidden; transition: transform var(--t-lento) var(--curva); } .mito__cara--anverso { transform: rotateY(0deg); justify-content: space-between; } .mito__cara--reverso { transform: rotateY(180deg); border-left: 3px solid var(--bronce); overflow-y: auto; /* Veladura púrpura de veredicto («El cargamento»): tinta sobre la mezcla sigue ≥ 10:1 en ambos temas (medido 2026-08-10) */ background: linear-gradient( 160deg, color-mix(in srgb, var(--region-levante) 10%, var(--bg-alzado)), var(--bg-alzado) 65% ); } .mito__carta.es-volteada .mito__cara--anverso { transform: rotateY(-180deg); } .mito__carta.es-volteada .mito__cara--reverso { transform: rotateY(0deg); } .mito__sello { align-self: flex-start; padding: 3px 10px; border: 1.5px solid var(--certeza-rojo); border-radius: 4px; color: var(--certeza-rojo); font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-2deg); } /* El sello se estampa como cuño sobre arcilla al entrar la tarjeta en pantalla («El cargamento»; .mito--visto lo pone vista-mitos.js). Con reduced-motion el sello simplemente está, sin gesto. */ @media (prefers-reduced-motion: no-preference) { .js .mito .mito__sello { opacity: 0; } .js .mito--visto .mito__sello { animation: estampa-sello 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.35s both; } } @keyframes estampa-sello { from { opacity: 0; transform: rotate(-2deg) scale(1.9); } to { opacity: 1; transform: rotate(-2deg) scale(1); } } .mito__texto { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); line-height: 1.3; color: var(--tinta); } .mito__pista { display: flex; align-items: center; gap: var(--e1); color: var(--tinta-suave); } .mito__pista svg { width: 18px; height: 18px; transform: rotate(-90deg); } .mito__veredicto { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; } .mito__veredicto-texto { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--bronce); } .mito__ojear { font-family: var(--serif); font-size: 1rem; line-height: 1.55; } /* Puntos de posición del carrusel (Diseño.md §6.5). Son un indicador, no un control: la navegación es el propio scroll y las ocho tarjetas están en el DOM en orden, así que se ocultan al lector de pantalla desde el HTML. */ .mitos__puntos { display: flex; justify-content: center; gap: var(--e2); margin-top: var(--e3); } .mitos__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); transition: background var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva); } .mitos__punto.es-activo { background: var(--bronce); transform: scale(1.4); } @media (min-width: 768px) { .mitos { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; scroll-snap-type: none; } .mito { width: auto; max-width: none; } /* En rejilla no hay carrusel que situar */ .mitos__puntos { display: none; } } @media (min-width: 1080px) { .mitos { grid-template-columns: repeat(3, 1fr); } } /* Sin animación: fundido cruzado en lugar de giro */ @media (prefers-reduced-motion: reduce) { .mito__carta { perspective: none; } .mito__cara { backface-visibility: visible; transition: opacity 150ms linear; } .mito__cara--anverso { transform: none; opacity: 1; } .mito__cara--reverso { transform: none; opacity: 0; } .mito__carta.es-volteada .mito__cara--anverso { transform: none; opacity: 0; } .mito__carta.es-volteada .mito__cara--reverso { transform: none; opacity: 1; } } /* ========================================================================== MAPA (#mapa) — Diseño.md §6.4 ========================================================================== */ .mapa__interruptor { display: inline-flex; padding: 3px; margin-bottom: var(--e3); border: 1px solid var(--linea); border-radius: 999px; background: var(--bg-alzado); max-width: 100%; flex-wrap: wrap; } .mapa__interruptor button { flex: 1; min-height: 44px; padding: var(--e2) var(--e4); border-radius: 999px; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; color: var(--tinta-suave); white-space: nowrap; transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); } .mapa__interruptor button[aria-checked="true"] { background: var(--bronce); color: var(--bg); font-weight: 600; } .mapa__pie { color: var(--tinta-suave); margin-bottom: var(--e4); min-height: 2.5em; } /* Los filtros por tipo de final son cosa de Profundizar (Documento §3.4). El `display` va en la regla con el modo, no aquí: `.mapa__filtros` (0,1,0 en vistas.css) le ganaría por orden de cascada a `.solo-profundizar` (0,1,0 en base.css) y los filtros se verían también en Ojear. */ .mapa__filtros { flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); } /* (Sin la cláusula de «sin JS»: esta vista no existe sin JavaScript.) */ [data-modo="profundizar"] .mapa__filtros { display: flex; } .mapa { position: relative; } .mapa__marco { position: relative; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--mar); aspect-ratio: 1000 / 634; /* pan-y y no none: a zoom 1 el arrastre no mueve el mapa (los límites lo fijan) y el dedo tiene que poder seguir scrolleando la página — con `none`, la banda del mapa atrapaba el desplazamiento vertical en móvil. Al ampliar, vista-mapa.js pasa a `none` para capturar el arrastre. Misma reflexión que la anotada en .red__marco. */ touch-action: pan-y; cursor: grab; } .mapa__marco:active { cursor: grabbing; } .mapa__zoomable { position: absolute; inset: 0; transform-origin: center; will-change: transform; } .mapa__base { width: 100%; height: 100%; object-fit: cover; /* Duotono cálido para integrar la base en la paleta (Diseño.md §4.5) */ filter: sepia(0.22) contrast(1.02) saturate(0.9); } [data-tema="oscuro"] .mapa__base { filter: sepia(0.3) contrast(0.95) brightness(0.62) saturate(0.75); } /* --- Marcadores ----------------------------------------------------------- */ .sitio { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 999px; /* Contrarresta el zoom: el marcador conserva su tamaño y su área de toque */ transform: scale(calc(1 / var(--z, 1))); transition: opacity var(--t-lento) var(--curva); } /* Disco de fondo: sin él, los iconos se pierden sobre el relieve del ráster */ .sitio::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 68%, transparent); box-shadow: 0 1px 3px rgb(0 0 0 / 0.35); } .sitio__contada svg, .sitio__auditada svg { width: 22px; height: 22px; } .sitio__contada, .sitio__auditada { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--t-lento) var(--curva); } .sitio__nombre { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--tinta); font-family: var(--sans); font-size: 11px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-rapido) var(--curva); } .sitio:hover .sitio__nombre, .sitio:focus-visible .sitio__nombre { opacity: 1; } /* Ampliado (≥1.6×) hay sitio para todos los nombres a la vez: en táctil no existe el hover que los revela uno a uno, y sin esto el mapa era una nube de 26 iconos anónimos. La clase la pone vista-mapa.js con el zoom. */ .mapa--con-nombres .sitio__nombre { opacity: 1; } .sitio.es-atenuado { opacity: 0.18; } /* Colores por estado auditado */ .sitio--destruccion .sitio__auditada { color: var(--bronce-vivo); } .sitio--discutida .sitio__auditada { color: var(--bronce-vivo); opacity: 0.55; } .sitio--abandono .sitio__auditada { color: var(--tinta); } .sitio--continuidad .sitio__auditada { color: var(--certeza-verde); } .sitio--reocupacion .sitio__auditada { color: var(--egeo); } .sitio__contada { color: var(--bronce-vivo); } /* --- Las dos capas -------------------------------------------------------- */ /* Capa contada: todo el que «se cuenta» arde, con pulso. El desfase negativo por sitio («El cargamento») rompe la sincronía militar: cada llama va por su fase, con retardo fijo por sitio (nunca aleatorio en cada carga). */ .mapa[data-capa="contada"] .sitio__auditada { opacity: 0; } .mapa[data-capa="contada"] .sitio[data-contada="si"] .sitio__contada { opacity: 1; animation: pulso-llama 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--orden, 0) * -211ms); } .mapa[data-capa="contada"] .sitio[data-contada="no"] .sitio__contada { opacity: 0; } .mapa[data-capa="contada"] .sitio[data-contada="no"] .sitio__auditada { opacity: 1; } /* Capa auditada: cada sitio con su icono; las llamas sin apoyo se apagan */ .mapa[data-capa="auditada"] .sitio__contada { opacity: 0; } .mapa[data-capa="auditada"] .sitio__auditada { opacity: 1; } .mapa[data-capa="auditada"] .sitio--discutida .sitio__auditada { opacity: 0.55; } /* --- Coreografía del interruptor («El cargamento») ------------------------ Mientras vista-mapa.js mantiene la clase, cada marcador retrasa su fundido 38 ms × su orden oeste→este: el apagado recorre el mapa como una ola. */ .mapa--coreografia .sitio__contada, .mapa--coreografia .sitio__auditada, .mapa--coreografia .sitio__brasa { transition-delay: calc(var(--orden, 0) * 38ms); } /* Las llamas que la auditoría apaga del todo (abandono, continuidad, reocupación) sueltan un hilo de humo al extinguirse; las que quedan (destrucción, discutida) no. Solo durante la coreografía. */ .mapa--coreografia[data-capa="auditada"] .sitio[data-contada="si"]:not([data-estado="destruccion"]):not([data-estado="discutida"])::after { content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 999px; background: var(--tinta-suave); filter: blur(2px); opacity: 0; pointer-events: none; animation: humo-sube 1.1s var(--curva) forwards; animation-delay: calc(var(--orden, 0) * 38ms + 300ms); } @keyframes humo-sube { 0% { opacity: 0.55; transform: translateY(0) scale(0.8); } 100% { opacity: 0; transform: translateY(-16px) scale(1.7); } } /* El nombre accesible también cambia de capa. Tiene que ser display:none: .visualmente-oculto usa clip-path, que oculta a la vista pero deja el texto en el árbol de accesibilidad. */ .mapa[data-capa="contada"] .sitio__txt-auditada { display: none; } .mapa[data-capa="auditada"] .sitio__txt-contada { display: none; } @keyframes pulso-llama { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.25); opacity: 1; } } /* --- Leyenda -------------------------------------------------------------- */ .leyenda { position: absolute; left: var(--e3); bottom: var(--e3); max-width: calc(100% - var(--e6)); background: color-mix(in srgb, var(--bg-alzado) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--linea); border-radius: var(--radio); font-family: var(--sans); font-size: 0.8125rem; } .leyenda > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--e3); color: var(--bronce); font-weight: 500; cursor: pointer; list-style: none; } .leyenda__lista { list-style: none; margin: 0; padding: 0 var(--e3) var(--e3); display: flex; flex-direction: column; gap: var(--e2); } .leyenda__lista li { display: flex; align-items: center; gap: var(--e2); color: var(--tinta); } .leyenda__icono { display: grid; place-items: center; width: 22px; height: 22px; flex: none; } .leyenda__icono svg { width: 20px; height: 20px; } .leyenda__icono.sitio--destruccion { color: var(--bronce-vivo); } .leyenda__icono.sitio--discutida { color: var(--bronce-vivo); opacity: 0.6; } .leyenda__icono.sitio--abandono { color: var(--tinta); } .leyenda__icono.sitio--continuidad { color: var(--certeza-verde); } .leyenda__icono.sitio--reocupacion { color: var(--egeo); } .mapa__credito { margin-top: var(--e4); } /* ========================================================================== EL MAPA EN EL TIEMPO (profundizar.md §8) Regla de oro: la incertidumbre es el lenguaje visual. El cursor es una banda difuminada, las ventanas pulsan, y ningún borde temporal es nítido. ========================================================================== */ .mapa__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e3); } /* El contador de la auditoría («El cargamento»): la cifra rueda 153→59 al cambiar de capa. Serif y tabular para que el rodillo no baile. */ .mapa__contador { margin: 0 0 0 var(--e2); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-suave); max-width: 11rem; } .mapa__contador b { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--bronce); font-variant-numeric: tabular-nums; } .mapa__cabecera .mapa__interruptor { margin-bottom: var(--e3); } .tiempo__reproducir { font-size: 0.875rem; } .tiempo__reproducir svg { width: 18px; height: 18px; flex: none; } /* --- Estados temporales de los marcadores (§8.4) -------------------------- */ /* La brasa: el sitio sigue en pie. Un punto encendido, sin icono de final. */ .sitio__brasa { grid-area: 1 / 1; width: 11px; height: 11px; border-radius: 999px; background: var(--bronce-vivo); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--bronce-vivo) 60%, transparent); opacity: 0; transition: opacity var(--t-medio) var(--curva); } /* Las transiciones de estado temporal van a --t-medio; la llama contada conserva su fundido lento, que es el momento-mensaje del interruptor. */ .sitio__auditada { transition: opacity var(--t-medio) var(--curva); } /* Capa auditada: antes de la ventana, brasa; dentro, el icono del final pulsa «en algún momento de esta ventana»; después, el icono de siempre. */ .mapa[data-capa="auditada"] .sitio[data-tiempo="activo"] .sitio__auditada { opacity: 0; animation: none; } .mapa[data-capa="auditada"] .sitio[data-tiempo="activo"] .sitio__brasa { opacity: 1; } .mapa[data-capa="auditada"] .sitio[data-tiempo="ventana"] .sitio__brasa { opacity: 0.55; } .mapa[data-capa="auditada"] .sitio[data-tiempo="ventana"] .sitio__auditada { animation: pulso-ventana 1.6s ease-in-out infinite alternate; } @keyframes pulso-ventana { from { opacity: 0.35; } to { opacity: 0.9; } } /* Capa contada: todo activo hasta 1177; en llamas desde 1177, todas a la vez. */ .mapa[data-capa="contada"][data-fuego="no"] .sitio[data-contada="si"] .sitio__contada { opacity: 0; animation: none; } .mapa[data-capa="contada"][data-fuego="no"] .sitio[data-contada="si"] .sitio__brasa { opacity: 1; } .mapa[data-capa="contada"] .sitio[data-contada="no"][data-tiempo="activo"] .sitio__auditada { opacity: 0; } .mapa[data-capa="contada"] .sitio[data-contada="no"][data-tiempo="activo"] .sitio__brasa { opacity: 1; } /* --- Rótulos de la reproducción (§8.6) ------------------------------------ */ .mapa__rotulos { position: absolute; left: 50%; /* Por encima de la fila de la leyenda (44px + margen): en pantallas estrechas el rótulo ocupaba casi todo el ancho y la tapaba. */ bottom: calc(var(--e3) + 52px); transform: translateX(-50%); z-index: 3; width: max-content; max-width: min(28rem, calc(100% - var(--e6))); pointer-events: none; } .mapa__rotulo { margin: 0; padding: var(--e3) var(--e4); background: color-mix(in srgb, var(--bg-alzado) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--linea); border-left: 3px solid var(--bronce); border-radius: var(--radio); box-shadow: var(--sombra); font-family: var(--serif); font-size: 0.9375rem; line-height: 1.5; color: var(--tinta); } /* --- El scrubber (§8.3) ---------------------------------------------------- */ .tiempo { margin-top: var(--e5); font-family: var(--sans); } /* Bandas de fase (solo Profundizar): bordes en degradado, jamás nítidos */ .tiempo__fases { margin-bottom: var(--e2); } .tiempo__fase { position: relative; isolation: isolate; display: block; margin-left: var(--ini); width: var(--ancho); min-height: 26px; margin-bottom: 2px; padding: 2px var(--e3); border-radius: 999px; color: var(--tinta); font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /* La banda con bordes difuminados vive en un ::before: la máscara sobre el elemento entero se comía también las primeras y últimas letras del rótulo («HR IIIC / pospalacial» era ilegible). El texto queda nítido; el borde difuso —la tesis visual— lo pone solo el fondo. */ .tiempo__fase::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--bronce) 16%, transparent); mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent); } /* Área de toque ampliada sin mover la banda (Diseño.md §8) */ .tiempo__fase::after { content: ""; position: absolute; inset: -9px 0; } .tiempo__pista-zona { position: relative; height: 52px; /* En los extremos, media banda del cursor asoma fuera de la pista (sus bordes son transparentes por la máscara, pero el desborde ensanchaba la página en móvil). Clip solo en horizontal: el rótulo del asa, que vive 12px por encima, sigue visible. */ overflow-x: clip; overflow-y: visible; } .tiempo__slider { -webkit-appearance: none; appearance: none; position: relative; z-index: 2; width: 100%; height: 44px; margin: 4px 0; background: transparent; cursor: pointer; } .tiempo__slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--bg-hundido); border: 1px solid var(--linea); } /* El playhead es una brasa («El cargamento»): núcleo vivo y halo cálido */ .tiempo__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 34px; margin-top: -15px; border-radius: 999px; background: radial-gradient(circle at 50% 38%, var(--bronce-vivo), var(--bronce) 72%); border: 2px solid var(--bg-alzado); box-shadow: var(--sombra), 0 0 10px color-mix(in srgb, var(--bronce-vivo) 55%, transparent); } .tiempo__slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--bg-hundido); border: 1px solid var(--linea); } .tiempo__slider::-moz-range-thumb { width: 22px; height: 34px; border-radius: 999px; background: radial-gradient(circle at 50% 38%, var(--bronce-vivo), var(--bronce) 72%); border: 2px solid var(--bg-alzado); box-shadow: var(--sombra), 0 0 10px color-mix(in srgb, var(--bronce-vivo) 55%, transparent); } /* La banda del cursor: ±8 años con bordes difuminados. El «ahora» del mapa nunca es una línea. */ .tiempo__banda { position: absolute; top: 50%; left: var(--pos, 100%); width: calc(16 * 100% / 130); height: 26px; transform: translate(-50%, -50%); border-radius: 999px; background: color-mix(in srgb, var(--bronce) 32%, transparent); mask-image: linear-gradient(90deg, transparent, black 32%, black 68%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 32%, black 68%, transparent); pointer-events: none; z-index: 1; } /* El rótulo del asa dice siempre «c. NNNN», nunca el año a secas (§12). El clamp lo retiene dentro de la pista: en los extremos (p. ej. el 1120 inicial) la mitad del rótulo se salía del viewport en móvil. */ .tiempo__asa-rotulo { position: absolute; top: -12px; left: clamp(30px, var(--pos, 100%), calc(100% - 30px)); transform: translateX(-50%); z-index: 2; padding: 1px 8px; border-radius: 999px; background: var(--bg-alzado); border: 1px solid var(--linea); font-size: 0.75rem; font-weight: 600; color: var(--bronce); white-space: nowrap; pointer-events: none; } .tiempo__1177 { position: absolute; top: 12px; bottom: 6px; left: var(--pos); border-left: 2px dashed var(--certeza-rojo); pointer-events: none; } .tiempo__1177-etiqueta { position: absolute; bottom: -8px; left: 4px; font-size: 0.6875rem; color: var(--certeza-rojo); white-space: nowrap; } /* Chinchetas de anclaje (solo Profundizar): sucesos con datación firme */ .tiempo__chinchetas { position: relative; height: 38px; } .tiempo__chincheta { position: absolute; top: 0; left: var(--pos); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; min-height: 38px; padding: 2px var(--e1) 0; color: var(--tinta-suave); font-size: 0.6875rem; line-height: 1.2; transition: color var(--t-rapido) var(--curva); } .tiempo__chincheta > span[aria-hidden] { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--egeo); flex: none; } .tiempo__chincheta:hover { color: var(--egeo); } .tiempo__extremos { display: flex; justify-content: space-between; margin-top: var(--e1); font-size: 0.75rem; color: var(--tinta-suave); } /* --- Mini-tira temporal de la ficha de sitio (§8.5) ------------------------ */ .tira-tiempo { font-family: var(--sans); } .tira-tiempo__fase { margin-bottom: var(--e1); font-size: 0.75rem; color: var(--tinta-suave); } .tira-tiempo__pista { position: relative; height: 18px; border-radius: 999px; background: var(--bg-hundido); } .tira-tiempo__banda { position: absolute; top: 2px; bottom: 2px; left: var(--ini); width: var(--ancho); min-width: 14px; border-radius: 999px; background: color-mix(in srgb, var(--bronce) 45%, transparent); mask-image: linear-gradient(90deg, transparent, black 28%, black 72%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 28%, black 72%, transparent); } /* La marca del cursor también va difuminada: nada de líneas de año exacto */ .tira-tiempo__cursor { position: absolute; top: -3px; bottom: -3px; left: var(--pos); width: 8px; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--tinta) 40%, transparent); mask-image: linear-gradient(90deg, transparent, black 35%, black 65%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 35%, black 65%, transparent); } .tira-tiempo__etiqueta { margin-top: var(--e1); font-size: 0.8125rem; color: var(--tinta-suave); } /* Cruces entre vistas dentro de las fichas (§8.7) */ .ficha__cruce { font-family: var(--sans); font-size: 0.875rem; } @media (prefers-reduced-motion: reduce) { .mapa[data-capa="contada"] .sitio[data-contada="si"] .sitio__contada { animation: none; opacity: 1; } /* El liminal no pulsa: opacidad fija y contorno discontinuo (§8.4) */ .mapa[data-capa="auditada"] .sitio--ventana-estatica .sitio__auditada { animation: none; opacity: 0.55; } .mapa[data-capa="auditada"] .sitio--ventana-estatica::before { outline: 2px dashed var(--bronce-vivo); outline-offset: 1px; } } /* ========================================================================== ANIMACIÓN DE LOS VISUALES DEL TOUR Todo se dispara con la clase .escena--activa, que vista-tour.js pone cuando la escena entra en la banda central de la pantalla. Cada animación es la descrita en su escena del guion. Con prefers-reduced-motion se apagan todas (bloque al final del archivo). ========================================================================== */ /* --- 1.1 La bodega se va llenando ---------------------------------------- */ .js #e1-1 .vs-bronce path, .js #e1-1 .vs-trazo:not(.vs-fijo) { opacity: 0; transition: opacity var(--t-lento) var(--curva); } #e1-1.escena--activa .vs-casco, #e1-1.escena--activa .vs-vela { opacity: 1; } #e1-1.escena--activa .vs-bronce path { opacity: 1; } #e1-1.escena--activa .vs-bronce path:nth-child(1) { transition-delay: 200ms; } #e1-1.escena--activa .vs-bronce path:nth-child(2) { transition-delay: 380ms; } #e1-1.escena--activa .vs-trazo:not(.vs-fijo) { opacity: 1; transition-delay: 560ms; } /* --- 1.2 La tablilla se despliega en líneas ------------------------------- */ .js #e1-2 .vs-cuna > g, .js #e1-2 .vs-tarjeta-cita { opacity: 0; transition: opacity var(--t-medio) var(--curva); } #e1-2.escena--activa .vs-cuna > g { opacity: 1; } #e1-2.escena--activa .vs-cuna > g:nth-child(1) { transition-delay: 120ms; } #e1-2.escena--activa .vs-cuna > g:nth-child(2) { transition-delay: 260ms; } #e1-2.escena--activa .vs-cuna > g:nth-child(3) { transition-delay: 400ms; } #e1-2.escena--activa .vs-cuna > g:nth-child(4) { transition-delay: 540ms; } #e1-2.escena--activa .vs-cuna > g:nth-child(5) { transition-delay: 680ms; } #e1-2.escena--activa .vs-tarjeta-cita { opacity: 1; transition-delay: 860ms; } /* --- 1.3 La red del metal y las dos gotas que se funden en una espada ----- */ /* La red simplificada de arriba: todas las rutas al fondo y, cuando la escena entra en cámara, se encienden las cuatro de cobre y estaño. La transición va antes que la fórmula, como pide el guion. */ .js #e1-3 .vs-red-min__arista path { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5; stroke-linecap: round; opacity: 0.2; } .js #e1-3 .vs-red-min__nodo circle { fill: var(--tinta-suave); opacity: 0.45; } .js #e1-3 .vs-red-min__arista--metal path { stroke: var(--bronce); stroke-width: 2.5; opacity: 0; transition: opacity var(--t-lento) var(--curva); } #e1-3.escena--activa .vs-red-min__arista--metal path { opacity: 1; } #e1-3.escena--activa .vs-red-min__arista--metal path:nth-child(2) { transition-delay: 120ms; } #e1-3.escena--activa .vs-red-min__arista--metal path:nth-child(3) { transition-delay: 240ms; } #e1-3.escena--activa .vs-red-min__arista--metal path:nth-child(4) { transition-delay: 360ms; } .js #e1-3 .vs-gota, .js #e1-3 .vs-bronce, .js #e1-3 .vs-signo { opacity: 0; transition: opacity var(--t-medio) var(--curva), transform var(--t-lento) var(--curva); } #e1-3 .vs-gota--cobre { transform: translateX(-24px); } #e1-3 .vs-gota--estano { transform: translateX(24px); } #e1-3.escena--activa .vs-gota { opacity: 1; transform: translateX(0); } #e1-3.escena--activa .vs-signo { opacity: 1; transition-delay: 500ms; } #e1-3.escena--activa .vs-bronce { opacity: 1; transition-delay: 700ms; } /* --- 1.4 El palacio se levanta por capas --------------------------------- */ .js #e1-4 .vs-sala, .js #e1-4 .vs-hogar, .js #e1-4 .vs-muralla { opacity: 0; transition: opacity var(--t-medio) var(--curva); } #e1-4.escena--activa .vs-muralla { opacity: 1; } #e1-4.escena--activa .vs-sala { opacity: 1; transition-delay: 220ms; } #e1-4.escena--activa .vs-sala--anexa { transition-delay: 400ms; } #e1-4.escena--activa .vs-hogar { opacity: 1; transition-delay: 620ms; } /* --- 2.1 La muralla se engrosa y se dibuja el túnel ----------------------- */ .js #e2-1 .vs-bloques path { opacity: 0; transform: translateY(14px); transition: opacity var(--t-medio) var(--curva), transform var(--t-lento) var(--curva); } #e2-1.escena--activa .vs-bloques path { opacity: 1; transform: none; } #e2-1.escena--activa .vs-bloques path:nth-child(2) { transition-delay: 200ms; } #e2-1.escena--activa .vs-bloques path:nth-child(3) { transition-delay: 400ms; } .js #e2-1 .vs-tunel { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.2s var(--curva); transition-delay: 600ms; } #e2-1.escena--activa .vs-tunel { stroke-dashoffset: 0; } .js #e2-1 .vs-agua { opacity: 0; transition: opacity var(--t-medio) var(--curva) 1.6s; } #e2-1.escena--activa .vs-agua { opacity: 1; } /* --- 2.2 La carta se escribe sola ---------------------------------------- */ .js #e2-2 .vs-renglon rect, .js #e2-2 .vs-renglon-clave, .js #e2-2 .vs-cita { opacity: 0; transition: opacity var(--t-rapido) var(--curva); } /* «El cargamento»: los renglones no aparecen, se ESCRIBEN — crecen de izquierda a derecha como trazos de estilete (scaleX con origen izquierdo). El bloque de reduced-motion de abajo repone transform: none. */ .js #e2-2 .vs-renglon rect, .js #e2-2 .vs-renglon-clave { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: opacity var(--t-rapido) var(--curva), transform var(--t-lento) var(--curva); } #e2-2.escena--activa .vs-renglon rect { opacity: 0.3; transform: scaleX(1); } #e2-2.escena--activa .vs-renglon rect:nth-child(1) { transition-delay: 120ms; } #e2-2.escena--activa .vs-renglon rect:nth-child(2) { transition-delay: 280ms; } #e2-2.escena--activa .vs-renglon rect:nth-child(3) { transition-delay: 440ms; } #e2-2.escena--activa .vs-renglon-clave { opacity: 1; transform: scaleX(1); transition-delay: 640ms; } #e2-2.escena--activa .vs-cita { opacity: 1; transition-delay: 820ms; } #e2-2.escena--activa .vs-cita:last-of-type { transition-delay: 980ms; } /* Al completarse, la frase clave arde un instante: el mismo fuego que coció y conservó estas cartas (brasa una sola vez, no en bucle). */ #e2-2.escena--activa .vs-cita { animation: brasa-clave 1.4s var(--curva) 1.35s 1; } @keyframes brasa-clave { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--bronce-vivo) 75%, transparent)); } } /* --- 2.3 Los anillos se dibujan año a año -------------------------------- */ .js #e2-3 .vs-anillo circle { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 900ms var(--curva); } #e2-3.escena--activa .vs-anillo circle { stroke-dashoffset: 0; } #e2-3.escena--activa .vs-anillo circle:nth-child(2) { transition-delay: 80ms; } #e2-3.escena--activa .vs-anillo circle:nth-child(3) { transition-delay: 160ms; } #e2-3.escena--activa .vs-anillo circle:nth-child(4) { transition-delay: 240ms; } #e2-3.escena--activa .vs-anillo circle:nth-child(5) { transition-delay: 320ms; } #e2-3.escena--activa .vs-anillo circle:nth-child(6) { transition-delay: 400ms; } #e2-3.escena--activa .vs-anillo circle:nth-child(7) { transition-delay: 480ms; } #e2-3.escena--activa .vs-anillo--estrecho circle { transition-delay: 620ms; } .js #e2-3 .vs-trazo-clave, .js #e2-3 .vs-etiqueta--clave { opacity: 0; transition: opacity var(--t-medio) var(--curva) 1.2s; } #e2-3.escena--activa .vs-trazo-clave, #e2-3.escena--activa .vs-etiqueta--clave { opacity: 1; } /* --- 2.4 Siete barcos aparecen en el horizonte --------------------------- */ .js #e2-4 .vs-barco > g { opacity: 0; transition: opacity var(--t-lento) var(--curva); } #e2-4.escena--activa .vs-barco > g { opacity: 1; } #e2-4.escena--activa .vs-barco > g:nth-child(1) { transition-delay: 100ms; } #e2-4.escena--activa .vs-barco > g:nth-child(2) { transition-delay: 300ms; } #e2-4.escena--activa .vs-barco > g:nth-child(3) { transition-delay: 500ms; } #e2-4.escena--activa .vs-barco > g:nth-child(4) { transition-delay: 700ms; } #e2-4.escena--activa .vs-barco > g:nth-child(5) { transition-delay: 900ms; } #e2-4.escena--activa .vs-barco > g:nth-child(6) { transition-delay: 1100ms; } #e2-4.escena--activa .vs-barco > g:nth-child(7) { transition-delay: 1300ms; } /* --- 3.1 Las barras crecen y cae la línea de 1177 ------------------------ */ .js #e3-1 [fill^="url"] rect { transform: scaleX(0); /* En SVG, transform-origin se mide en el espacio del lienzo salvo que se diga lo contrario: fill-box lo ancla a la propia barra. */ transform-box: fill-box; transform-origin: left center; transition: transform var(--t-lento) var(--curva); } #e3-1.escena--activa [fill^="url"] rect { transform: scaleX(1); } #e3-1.escena--activa [fill^="url"] rect:nth-child(2) { transition-delay: 140ms; } #e3-1.escena--activa [fill^="url"] rect:nth-child(3) { transition-delay: 280ms; } #e3-1.escena--activa [fill^="url"] rect:nth-child(4) { transition-delay: 420ms; } #e3-1.escena--activa [fill^="url"] rect:nth-child(5) { transition-delay: 560ms; } .js #e3-1 .vs-marca-1177 { stroke-dasharray: 484; stroke-dashoffset: 484; transition: stroke-dashoffset var(--t-lento) var(--curva) 760ms; } #e3-1.escena--activa .vs-marca-1177 { stroke-dashoffset: 0; } /* --- 3.2 El fuego de Pilos cuece las tablillas --------------------------- */ /* Las crudas se quedan en barro claro: son el «antes» contra el que se lee el cambio de las cocidas. Sin esta regla los rect salían del negro por defecto del SVG, justo al revés del contraste que busca el dibujo. */ .js #e3-2 .vs-tablilla-cruda rect { fill: var(--bg-hundido); stroke: var(--linea); } .js #e3-2 .vs-tablilla-cocida rect { fill: var(--bg-hundido); stroke: var(--linea); transition: fill 1.4s var(--curva), stroke 1.4s var(--curva); transition-delay: 700ms; } #e3-2.escena--activa .vs-tablilla-cocida rect { fill: color-mix(in srgb, var(--bronce) 55%, transparent); stroke: var(--bronce); } /* --- 3.3 Hattusa: las luces se apagan y llegan fuegos puntuales ---------- */ .js #e3-3 .vs-ventana--apagada rect { fill: var(--bronce-vivo); opacity: 1; transition: fill var(--t-medio) var(--curva), opacity var(--t-medio) var(--curva); } #e3-3.escena--activa .vs-ventana--apagada rect { fill: var(--bg); opacity: 0.3; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(2) { transition-delay: 160ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(3) { transition-delay: 320ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(4) { transition-delay: 480ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(5) { transition-delay: 640ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(6) { transition-delay: 800ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(7) { transition-delay: 960ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(8) { transition-delay: 1120ms; } #e3-3.escena--activa .vs-ventana--apagada rect:nth-child(9) { transition-delay: 1280ms; } .js #e3-3 .vs-llama path { opacity: 0; transition: opacity var(--t-lento) var(--curva) 1.5s; } #e3-3.escena--activa .vs-llama path { opacity: 0.75; } /* --- 3.5 y 5.2 Los paneles se encienden en secuencia --------------------- */ .js #e3-5 .vs-panel rect, .js #e5-2 .vs-panel rect, .js #e3-5 .vs-sello, .js #e3-5 .vs-trazo-clave { opacity: 0; transition: opacity var(--t-medio) var(--curva); } #e3-5.escena--activa .vs-panel rect, #e5-2.escena--activa .vs-panel rect { opacity: 1; } #e3-5.escena--activa .vs-panel rect:nth-child(2), #e5-2.escena--activa .vs-panel rect:nth-child(2) { transition-delay: 220ms; } #e3-5.escena--activa .vs-panel rect:nth-child(3), #e5-2.escena--activa .vs-panel rect:nth-child(3) { transition-delay: 440ms; } #e3-5.escena--activa .vs-sello { opacity: 1; transition-delay: 760ms; } #e3-5.escena--activa .vs-trazo-clave { opacity: 1; transition-delay: 900ms; } /* --- 4.1 Las siluetas entran en la rueda -------------------------------- */ .js #e4-1 .vs-silueta > g { opacity: 0; /* `translate` y no `transform`: la propiedad `transform` de CSS sustituye al atributo transform="translate(x y)" del SVG, y las nueve siluetas se apilaban todas en el origen. La propiedad independiente se compone con él en lugar de reemplazarlo. */ translate: 0 18px; transition: opacity var(--t-medio) var(--curva), translate var(--t-medio) var(--curva); } #e4-1.escena--activa .vs-silueta > g { opacity: 1; translate: none; } #e4-1.escena--activa .vs-silueta > g:nth-child(2) { transition-delay: 90ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(3) { transition-delay: 180ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(4) { transition-delay: 270ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(5) { transition-delay: 360ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(6) { transition-delay: 450ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(7) { transition-delay: 540ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(8) { transition-delay: 630ms; } #e4-1.escena--activa .vs-silueta > g:nth-child(9) { transition-delay: 720ms; } /* El chip de veredicto que el guion pide sobre cada silueta. El aro del color del foco lo despega de la figura, que es plana y del mismo tono. */ .js #e4-1 .vs-chip { stroke: var(--bg); stroke-width: 2.5; } #e4-1 .vs-chip--ambar { fill: var(--certeza-ambar); } #e4-1 .vs-chip--azul { fill: var(--certeza-azul); } /* --- 5.1 El palacio se apaga; el hogar de la aldea no -------------------- */ .js #e5-1 .vs-ventana--apagada rect { fill: var(--bronce-vivo); opacity: 1; transition: fill var(--t-lento) var(--curva) 400ms, opacity var(--t-lento) var(--curva) 400ms; } #e5-1.escena--activa .vs-ventana--apagada rect { fill: var(--bg); opacity: 0.3; } /* --- Fuego: parpadeo vivo mientras la escena está en cámara -------------- */ .escena--activa .vs-llama path { animation: titilar-llama 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; } /* Salvo el hogar de la aldea de 5.1, que se queda quieto: el guion lo dice entre paréntesis —«su fuego de hogar no parpadea»— y es lo que separa la ruina de arriba de la continuidad de abajo. El fuego del aedo de 5.2 sí titila: allí el guion no pide lo contrario. */ #e5-1.escena--activa .vs-llama--hogar path { animation: none; } @keyframes titilar-llama { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.08) scaleX(0.96); } } /* --- 4.2 La tabla del balance entra fila a fila -------------------------- */ .js #e4-2 .balance tbody tr { opacity: 0; transform: translateY(8px); transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva); } .js #e4-2.escena--activa .balance tbody tr { opacity: 1; transform: none; } .js #e4-2.escena--activa .balance tbody tr:nth-child(2) { transition-delay: 110ms; } .js #e4-2.escena--activa .balance tbody tr:nth-child(3) { transition-delay: 220ms; } .js #e4-2.escena--activa .balance tbody tr:nth-child(4) { transition-delay: 330ms; } .js #e4-2.escena--activa .balance tbody tr:nth-child(5) { transition-delay: 440ms; } .js #e4-2.escena--activa .balance tbody tr:nth-child(6) { transition-delay: 550ms; } .js #e4-2.escena--activa .balance tbody tr:nth-child(7) { transition-delay: 660ms; } /* --- Sin animación: todo llega a su estado final de inmediato ------------ */ @media (prefers-reduced-motion: reduce) { .vista-tour .visual *, .js #e4-2 .balance tbody tr { transition-delay: 0ms !important; animation: none !important; } .js #e1-1 .vs-bronce path, .js #e1-1 .vs-trazo:not(.vs-fijo), .js #e1-2 .vs-cuna > g, .js #e1-2 .vs-tarjeta-cita, .js #e1-3 .vs-red-min__arista--metal path, .js #e1-3 .vs-gota, .js #e1-3 .vs-bronce, .js #e1-3 .vs-signo, .js #e1-4 .vs-sala, .js #e1-4 .vs-hogar, .js #e1-4 .vs-muralla, .js #e2-1 .vs-bloques path, .js #e2-1 .vs-agua, .js #e2-2 .vs-renglon-clave, .js #e2-2 .vs-cita, .js #e2-3 .vs-trazo-clave, .js #e2-3 .vs-etiqueta--clave, .js #e2-4 .vs-barco > g, .js #e3-3 .vs-llama path, .js #e3-5 .vs-panel rect, .js #e3-5 .vs-sello, .js #e3-5 .vs-trazo-clave, .js #e5-2 .vs-panel rect, .js #e4-2 .balance tbody tr { opacity: 1; transform: none; } /* Aparte de la lista anterior: aquí `transform: none` borraría el atributo transform del SVG y apilaría las siluetas (ver la regla de 4.1 arriba). */ .js #e4-1 .vs-silueta > g { opacity: 1; translate: none; } .js #e2-2 .vs-renglon rect { opacity: 0.3; transform: none; } .js #e2-2 .vs-renglon-clave { transform: none; } .js #e2-1 .vs-tunel, .js #e2-3 .vs-anillo circle, .js #e3-1 .vs-marca-1177 { stroke-dashoffset: 0; } .js #e3-1 [fill^="url"] rect { transform: none; } .js #e3-2 .vs-tablilla-cocida rect { fill: color-mix(in srgb, var(--bronce) 55%, transparent); stroke: var(--bronce); } .js #e3-3 .vs-ventana--apagada rect, .js #e5-1 .vs-ventana--apagada rect { fill: var(--bg); opacity: 0.3; } } /* -------------------------------------------------------------------------- Mapa nocturno (escenas 0 y 5.3), dibujado por vista-tour.js -------------------------------------------------------------------------- */ /* El fondo sigue al tema: de noche cerrada en oscuro a pergamino en claro. Así el texto de la portada mantiene su contraste AA en los dos temas. */ .mapa-noche__fondo { fill: var(--bg-hundido); } /* Velo sobre el mapa de la portada: las luces se ven, el texto manda */ .portada > .portada__mapa::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--bg) 45%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) ); } .mapa-noche__ruta { fill: none; stroke: var(--bronce); stroke-width: 1.5; opacity: 0.18; } .mapa-noche__luz { fill: var(--bronce-vivo); opacity: 0; animation: encender-luz var(--t-lento) var(--curva) forwards; animation-delay: var(--retraso, 0ms); } .mapa-noche__halo { fill: var(--bronce-vivo); opacity: 0; animation: halo-luz var(--t-lento) var(--curva) forwards; animation-delay: var(--retraso, 0ms); } @keyframes encender-luz { to { opacity: 1; } } @keyframes halo-luz { to { opacity: 0.22; } } .mapa-noche__luz--apagada, .mapa-noche__halo--apagada { animation: none; opacity: 0.12; } .mapa-noche__luz--atenuada { animation: none; opacity: 0.45; } .mapa-noche__halo--atenuada { animation: none; opacity: 0.1; } .mapa-noche__luz--nueva { animation: parpadeo-nuevo 3.2s var(--curva) infinite; fill: var(--certeza-verde); } @keyframes parpadeo-nuevo { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .portada__chevron { animation: none; } .mapa-noche__luz, .mapa-noche__halo { animation: none; opacity: 1; } .mapa-noche__halo { opacity: 0.22; } .mapa-noche__luz--nueva { animation: none; opacity: 1; } } /* ========================================================================== EL EXPEDIENTE (#expediente) — profundizar.md §2–§5 Portada con cuatro salas, dossiers y la biblioteca. Sans para UI, serif para descripciones y cuerpo de lectura; columna de 42rem. ========================================================================== */ .expediente { padding-top: var(--e5); } .expediente__cabecera { margin-bottom: var(--e6); } .expediente__lema { margin-top: var(--e3); font-size: 1.0625rem; color: var(--tinta-suave); } /* Enlaces del tour y las fichas hacia el expediente (§6.2) */ .enlace-expediente { font-family: var(--sans); font-size: 0.875rem; } /* --- Portada: salas y dossiers (§2.3) -------------------------------------- */ .sala { margin-bottom: var(--e6); } .sala__descripcion { margin: var(--e1) 0 var(--e3); color: var(--tinta-suave); } .sala__dossiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); } .dossier-item { display: block; padding: var(--e3) var(--e4); background: var(--bg-alzado); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: var(--tinta); transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva); } a.dossier-item:hover { border-color: var(--bronce); box-shadow: var(--sombra); } .dossier-item__titulo { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--bronce); } .dossier-item__gancho { display: block; margin-top: 2px; font-family: var(--serif); font-size: 0.9375rem; line-height: 1.5; color: var(--tinta); } .dossier-item__meta { display: block; margin-top: var(--e1); font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-suave); } /* Marca de leído: discreta, sin porcentajes ni barras (§2.3). Es el icono del sprite: el carácter «✓» caía fuera de los subconjuntos de fuente. */ .dossier-item__visto { margin-left: var(--e2); width: 14px; height: 14px; vertical-align: middle; color: var(--certeza-verde); } .dossier-item__etiqueta { margin-left: var(--e2); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea); background: var(--bg-hundido); font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; color: var(--tinta-suave); vertical-align: middle; white-space: nowrap; } .dossier-item__etiqueta--borrador { border-color: var(--certeza-ambar); background: color-mix(in srgb, var(--certeza-ambar) 14%, transparent); color: var(--certeza-ambar); } /* «En preparación»: atenuado y no tocable. Sin opacity: al 0,62 el texto en --tinta-suave caía a ≈3,5:1, por debajo del AA que exige Diseño.md §8. */ .dossier-item--apagado { background: var(--bg); } .dossier-item--apagado .dossier-item__titulo { color: var(--tinta-suave); } /* Los dossiers aún no publicados van plegados con contador: la lista plana enterraba lo disponible bajo salas enteras de filas grises. */ .sala__pendientes { margin-top: var(--e3); } .sala__pendientes > summary { display: flex; align-items: center; gap: var(--e2); min-height: 44px; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; color: var(--tinta-suave); cursor: pointer; list-style: none; } .sala__pendientes > summary::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; transition: transform var(--t-rapido) var(--curva); clip-path: polygon( 43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43% ); } .sala__pendientes[open] > summary::before { transform: rotate(45deg); } .sala__pendientes .sala__dossiers { margin-top: var(--e2); } .expediente__pie { border-top: 1px solid var(--linea); padding-top: var(--e4); margin-top: var(--e6); } .expediente__pie p + p { margin-top: var(--e2); } /* --- Dossier (§3) ----------------------------------------------------------- */ .expediente--cargando { min-height: 70svh; } .dossier__miga { font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-suave); margin-bottom: var(--e4); } .dossier h1 { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); margin-bottom: var(--e3); } .dossier__gancho { font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.8vw, 1.375rem); line-height: 1.5; color: var(--tinta-suave); margin-bottom: var(--e3); } .dossier__meta { font-family: var(--sans); font-size: 0.8125rem; color: var(--tinta-suave); margin-bottom: var(--e5); } /* Banner de dossier en borrador (§3.4) */ .dossier__borrador { margin: 0 0 var(--e5); padding: var(--e3) var(--e4); border-radius: var(--radio); border: 1px solid color-mix(in srgb, var(--certeza-ambar) 40%, transparent); background: color-mix(in srgb, var(--certeza-ambar) 14%, transparent); color: var(--tinta); font-size: 0.875rem; } /* «En una pantalla»: quien solo lea esto se va servido (§3.1) */ .dossier__resumen { margin-bottom: var(--e6); padding: var(--e4) var(--e5); background: var(--bg-alzado); border: 1px solid var(--linea); border-left: 3px solid var(--bronce); border-radius: var(--radio); } .dossier__resumen h2 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronce); margin-bottom: var(--e2); } .dossier__resumen p { font-size: 1rem; } .dossier__resumen-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e3); font-family: var(--sans); font-size: 0.875rem; color: var(--tinta); } .dossier section { margin-bottom: var(--e6); } .dossier h2 { margin-bottom: var(--e3); } .dossier h3 { margin: var(--e4) 0 var(--e2); } .dossier p + p { margin-top: var(--e3); } .dossier ul, .dossier ol { padding-left: 1.2em; margin: var(--e3) 0; } .dossier li + li { margin-top: var(--e2); } /* Tablas: scroll interno, jamás scroll de página (Diseño.md §3) */ .tabla-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: var(--e3) 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--bg-alzado); } .tabla-scroll table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; } .tabla-scroll caption { text-align: left; padding: var(--e3) var(--e4) 0; font-family: var(--sans); font-size: 0.8125rem; color: var(--tinta-suave); } .tabla-scroll th, .tabla-scroll td { padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; line-height: 1.5; } .tabla-scroll thead th { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); border-bottom: 2px solid var(--linea); } .tabla-scroll tr:last-child td { border-bottom: none; } /* Bloque «Qué NO prueba» y notas de criterio: mismo lenguaje que causas */ .dossier blockquote { margin: var(--e4) 0; padding: var(--e3) var(--e4); border-left: 3px solid var(--certeza-ambar); background: color-mix(in srgb, var(--certeza-ambar) 8%, transparent); border-radius: 0 var(--radio) var(--radio) 0; font-size: 0.9375rem; } /* «Para seguir»: bibliografía breve + dossiers relacionados (§3.1.9) */ .dossier__seguir ul { list-style: none; padding: 0; } .dossier__seguir li { padding-left: 0; } .dossier__relacionados { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0; margin: var(--e3) 0; } .dossier__relacionados li { margin: 0; } /* Tarjetita de dossier relacionado: variante compacta de la tarjeta estándar */ .tarjetita { display: inline-block; padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--bg-alzado); font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; color: var(--bronce); text-decoration: none; transition: border-color var(--t-rapido) var(--curva); } a.tarjetita:hover { border-color: var(--bronce); } /* Sin opacity: al 0,62 el texto en --tinta-suave caía a ≈3,5:1, bajo AA. El apagado lo dan el color secundario y el fondo plano. */ .tarjetita--apagada { color: var(--tinta-suave); background: var(--bg); } .dossier__enlaces { font-family: var(--sans); font-size: 0.875rem; } .dossier .fuente { border-top: 1px solid var(--linea); padding-top: var(--e3); } /* --- El enlace de cita (§4.2) ----------------------------------------------- */ .cita { font-family: var(--sans); font-size: 0.8125rem; color: var(--egeo); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; border-radius: 2px; } .popover-cita { position: absolute; z-index: 60; max-width: min(24rem, calc(100vw - 32px)); padding: var(--e3) var(--e4); background: var(--bg-alzado); border: 1px solid var(--linea); border-left: 3px solid var(--egeo); border-radius: var(--radio); box-shadow: var(--sombra); font-family: var(--sans); font-size: 0.875rem; line-height: 1.55; color: var(--tinta); } .popover-cita__nota { margin-top: var(--e2); color: var(--tinta-suave); } .popover-cita__mas { margin-top: var(--e2); } /* --- La biblioteca (§5) ------------------------------------------------------ */ .biblioteca h2 { margin: var(--e6) 0 var(--e3); } .biblioteca__rutas { display: grid; gap: var(--e3); } @media (min-width: 768px) { .biblioteca__rutas { grid-template-columns: 1fr 1fr; } } .ruta { padding: var(--e4); background: var(--bg-alzado); border: 1px solid var(--linea); border-radius: var(--radio); } .ruta h3 { font-family: var(--sans); font-size: 1rem; margin-bottom: var(--e2); } .ruta__presentacion { font-family: var(--serif); font-size: 0.9375rem; color: var(--tinta-suave); margin-bottom: var(--e3); } .ruta__lista { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; } .ruta__lista li + li { margin-top: var(--e2); } .biblioteca__buscar { margin-bottom: var(--e4); } .biblioteca__campo { width: 100%; min-height: 44px; padding: var(--e2) var(--e4); border: 1.5px solid var(--linea); border-radius: 999px; background: var(--bg-alzado); color: var(--tinta); font-family: var(--sans); font-size: 1rem; } .biblioteca__campo:focus { border-color: var(--egeo); } .biblioteca__resultados { min-height: 1.5em; margin-top: var(--e2); color: var(--tinta-suave); } .biblio-seccion { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--bg-alzado); margin-bottom: var(--e2); overflow: hidden; } .biblio-seccion > summary { display: flex; align-items: center; gap: var(--e2); min-height: 48px; padding: var(--e2) var(--e4); font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--tinta); cursor: pointer; list-style: none; } .biblio-seccion > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--tinta-suave); border-bottom: 2px solid var(--tinta-suave); transform: rotate(45deg); transition: transform var(--t-rapido) var(--curva); } .biblio-seccion[open] > summary::after { transform: rotate(225deg); } .biblio-seccion--sub > summary { font-weight: 500; padding-left: var(--e5); } .biblio-seccion__cuenta { font-weight: 400; font-size: 0.8125rem; color: var(--tinta-suave); } .biblio-seccion__cuerpo { padding: 0 var(--e4) var(--e4); } .biblio-seccion .biblio__entradas { list-style: none; margin: 0; padding: 0; } .biblio-seccion .biblio__entrada { padding: var(--e3) 0; border-bottom: 1px solid var(--linea); } .biblio-seccion .biblio__entrada:last-child { border-bottom: none; } .biblio-seccion .biblio__clave { font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; color: var(--bronce); } .biblio-seccion .biblio__cita { margin-top: 2px; font-size: 0.9375rem; line-height: 1.55; } .biblio-seccion .biblio__nota { margin-top: var(--e1); font-size: 0.875rem; color: var(--tinta-suave); } .biblio-seccion .biblio__aparte { margin: var(--e3) 0; font-size: 0.875rem; color: var(--tinta-suave); } .biblio-seccion .biblio__lista { margin: var(--e3) 0 0; padding-left: 1.2em; font-size: 0.9375rem; } .biblio-seccion .biblio__lista li + li { margin-top: var(--e2); } /* Insignia «acceso abierto»: detección textual, chip verde pequeño (§5.5) */ .insignia-abierta { margin-left: var(--e2); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--certeza-verde); background: color-mix(in srgb, var(--certeza-verde) 14%, transparent); color: var(--certeza-verde); font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; vertical-align: middle; white-space: nowrap; } /* Tarjetas de ruta en créditos (compactas, sin entradas) */ .creditos__rutas { list-style: none; margin: var(--e4) 0; padding: 0; display: grid; gap: var(--e3); } .ruta--compacta p { font-size: 0.9375rem; color: var(--tinta-suave); } .ruta--compacta p.ui { margin-top: var(--e2); color: var(--tinta); }