/* ========================================================================== base.css — Reset, paleta y lienzo escalado ========================================================================== Las medidas del diseño NO se escriben aquí: llegan como custom properties desde js/plantilla.js, que las lee de window.PLANTILLA (data/hitos.js). Lo que sí vive en este archivo son los valores de respaldo, para que la página siga siendo legible si el JS aún no ha corrido. ========================================================================== */ :root { /* Respaldos. Los de verdad los escribe plantilla.js sobre . */ --color-azul: #18486C; --color-texto: #2A2A2A; --color-papel: #E8E2D8; /* color liso por si la textura no carga */ /* Tipografías con fallback: si los .woff2 no cargan, el texto sigue legible */ --serif: "Baskervville", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* ----------------------------------------------------------- Reset ------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* el lienzo nunca genera scroll */ } /* La textura de papel cubre TODA la ventana, no solo el lienzo: cuando la pantalla no es 16:9, las bandas que quedan arriba y abajo (o a los lados) siguen siendo papel en vez de un gris suelto. Va en para que se propague al lienzo del navegador, y con `cover` porque es un grano uniforme: se puede escalar sin que se note el empalme con el fondo del #stage. */ html { background-color: var(--color-papel); background-image: var(--fondo, none); background-size: cover; background-position: center; background-repeat: no-repeat; } body { font-family: var(--sans); color: var(--color-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; } ul { list-style: none; } img { display: block; max-width: none; /* las capas usan el ancho exacto del dato */ user-select: none; -webkit-user-drag: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* ------------------------------------------------- Lienzo 1920x1080 ------ */ #stage { position: absolute; top: 0; left: 0; width: var(--lienzo-ancho, 1920px); height: var(--lienzo-alto, 1080px); transform-origin: top left; /* js/scale.js aplica translate + scale */ overflow: hidden; /* Sin fondo propio: el papel lo pinta de una sola pieza, así no hay costura entre el lienzo y las bandas de fuera. */ background: none; } /* ------------------------------------------- Antiparpadeo de arranque ---- */ /* js/app.js quita la clase "cargando" del cuando están listas las fuentes y la primera capa, o a los 1.5 s como máximo. */ #stage > * { opacity: 1; transition: opacity .35s ease; } .cargando #stage > * { opacity: 0; } /* Si el usuario pidió reducir el movimiento, ni siquiera este fundido. */ @media (prefers-reduced-motion: reduce) { #stage > * { transition: none; } }