/* ========================================================================== Sidera Cosmos — hoja de estilos compartida Tema oscuro nativo (no conmutable). Mobile-first. Sitio autocontenido: no hay ni una sola petición a un dominio de terceros, tipografía incluida. ========================================================================== */ /* Única familia del sitio. Avenir Next / Avenir para quien la tenga instalada (el visitante Apple ve la tipografía real de la marca); Nunito Sans como sustituto humanista servido a todos los demás, y detrás los fallbacks de sistema. Nada de Inter ni de Space Grotesk: no son de casa. */ /* -------------------------------------------------------------------------- TIPOGRAFÍA AUTO-HOSPEDADA (22-ago-2026). Nunito Sans se sirve desde este mismo dominio, en /fonts/, y ya no desde fonts.googleapis.com. Tres motivos, por orden: la tipografía de marca llega igual con un bloqueador de rastreo delante o con Google inaccesible (antes el visitante no-Apple caía a la grotesca del sistema, justo lo que la hoja de marca quiere evitar); el navegador ahorra la conexión a un segundo dominio; y la página de privacidad deja de tener que declarar que Google recibe la IP de quien lee. Google sirve hoy Nunito Sans como fuente VARIABLE: un único woff2 por subconjunto cubre los tres pesos de la casa (400 wordmark y cuerpo, 600 titulares y rótulos, 700 h1 y strong), instanciados por el eje wght. De ahí que haya dos archivos y seis declaraciones, y no seis archivos: /fonts/nunito-sans-latin.woff2 30 KB — el que usa el español /fonts/nunito-sans-latin-ext.woff2 28 KB — solo si aparece un glifo suyo Los unicode-range son los de Google sin tocar, así que el navegador descarga el latin-ext únicamente si la página lo necesita. El precarga el latin, que se usa siempre. font-display: swap en las seis: el texto se lee desde el primer pintado y la fuente entra cuando llega. -------------------------------------------------------------------------- */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("/fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- IDENTIDAD CERRADA (1-ago-2026). Este bloque :root es el ÚNICO lugar del sitio donde vive un color de marca. No se edita sin orden expresa del creador, y ningún archivo de página puede escribir un hex por su cuenta. Los dos ámbares son distintos a propósito y JAMÁS se unifican: --amber #F5A623 ámbar de DATO: cifra clave, tagline, acento de UI. --amber-mark #F0B23E ámbar del EMBLEMA y del dibujo de diagramas. Contrastes medidos sobre los cuatro fondos de la casa (#05070D / #0B0E1D / #101427 / #16244A): --text 17.01 / 16.20 / 15.40 / 12.80 --text-muted 11.01 / 10.48 / 9.97 / 8.28 --text-dim 9.23 / 8.79 / 8.35 / 6.94 --amber 9.94 / 9.46 / 9.00 / 7.48 --amber-mark 10.69 / 10.18 / 9.68 / 8.04 --teal 6.50 / 6.19 / 5.88 / 4.89 --magenta 6.02 / 5.73 / 5.45 / 4.53 Teal y magenta son el suelo del sistema sobre #16244A: no se aclaran menos ni se eleva más el fondo que llevan debajo. -------------------------------------------------------------------------- */ :root { /* Lienzo: negro espacial de la casa. No hay versión sobre fondo claro. */ --bg: #05070D; --bg-soft: #0B0E1D; --bg-hero: #0E1730; /* Superficies y azul estructural. La escala de azules de la casa tiene tres peldaños y no se inventa un cuarto: --border-soft comparte valor con --border a propósito (se conserva el nombre porque distingue la función, separadores de página frente a bordes de componente). */ --surface: #101427; --surface-2: #16244A; --border: #16244A; --border-soft: #16244A; --border-strong: #2A3E68; --line: #4A628F; /* Texto */ --text: #E8ECF4; --text-muted: #B9C0CC; --text-dim: #A8B0BE; --wordmark: #F5F5F5; --grey-own: #B9C0CC; /* Ámbares de la casa: dos, y no se mezclan (ver cabecera del bloque) */ --amber: #F5A623; --amber-mark: #F0B23E; /* Par de datos de la casa y código de color de los esquemas */ --teal: #4F9EA6; --magenta: #E8579C; /* Derivados en rgba de los colores de arriba. Se declaran aquí para que ninguna página tenga que escribir componentes de color por su cuenta. */ --header-bg: rgba(5, 7, 13, 0.82); --amber-tint: rgba(245, 166, 35, 0.10); --amber-glow: rgba(245, 166, 35, 0.16); --scrim: rgba(5, 7, 13, 0.62); --scrim-0: rgba(5, 7, 13, 0); --seat: rgba(5, 7, 13, 0.28); --surface-0: rgba(16, 20, 39, 0); --star: rgba(232, 236, 244, 0.68); --star-soft: rgba(232, 236, 244, 0.42); --reticle: rgba(235, 238, 245, 0.37); --radius: 14px; --radius-sm: 9px; --maxw: 72rem; --maxw-prose: 46rem; --font-sidera: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* La cabecera es sticky y en teléfono ocupa tres líneas (la marca, y la navegación de cinco destinos partida en dos): sin este margen los enlaces del sumario dejan el h2 de destino tapado bajo la cabecera. Medido a 360 px, donde la cabecera mide 114 px. */ scroll-padding-top: 7.5rem; } body { margin: 0; /* Fondo explícito y opaco: el sitio es oscuro por definición, no por la preferencia del visitante, así que la paleta no cuelga de ningún @media (prefers-color-scheme) ni de [data-theme]. */ background-color: var(--bg); color: var(--text); font-family: var(--font-sidera); font-size: 1rem; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Una sola familia en todo el sitio: la jerarquía la hacen el peso y el tamaño, nunca una segunda tipografía. */ h1, h2, h3, h4 { font-family: var(--font-sidera); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2rem, 6.2vw, 3.4rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); font-weight: 600; margin-top: 0; } h3 { font-size: clamp(1.12rem, 3vw, 1.32rem); font-weight: 600; } /* Par de casa: línea 1 blanca, línea 2 ámbar, ambas en el peso bold de la familia. Máximo UNO por vista; repetirlo lo degrada a decoración. */ .l1 { color: var(--text); } .l2 { color: var(--amber); } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } /* Enlaces de cuerpo: color de texto con subrayado. El ámbar entra sólo al pasar por encima o al recibir el foco (presupuesto de ámbar por pantalla). El subrayado va en --line, que mide 3.26:1 sobre el fondo base: pasa el umbral de componente de interfaz sin competir con el texto. */ a { color: var(--text); text-decoration-color: var(--line); text-underline-offset: 3px; } a:hover, a:focus-visible { color: var(--amber); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } strong { color: var(--text); font-weight: 700; } /* --------------------------------------------------------- Layout ------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.15rem; } .prose { max-width: var(--maxw-prose); } section { padding-block: clamp(2.5rem, 7vw, 4.5rem); } section > .wrap > h2 { margin-bottom: 1rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--bg); padding: 0.6rem 1rem; font-weight: 700; text-decoration: none; z-index: 100; } /* El color se repite en el estado de foco: sin esto, la regla global de :hover/:focus pondría el texto en ámbar sobre el ámbar del fondo. */ .skip-link:focus, .skip-link:focus-visible { left: 0; color: var(--bg); } /* -------------------------------------------------------- Cabecera ------ */ .site-header { border-bottom: 1px solid var(--border-soft); background: var(--header-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; } .site-header .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; justify-content: space-between; padding-block: 0.85rem; } /* Lockup horizontal de la casa: estrella a la izquierda, wordmark a la derecha. Las proporciones van en em respecto al wordmark, para que el conjunto escale sin volver a medirlo: diámetro de estrella = 1.15 em del tamaño tipográfico y hueco = 2 radios, es decir un diámetro. */ .brand { display: inline-flex; align-items: center; gap: 1.15em; font-family: var(--font-sidera); font-size: clamp(0.86rem, 3.1vw, 1.05rem); color: var(--wordmark); text-decoration: none; } .brand:hover, .brand:focus-visible { color: var(--wordmark); } /* El emblema es un SVG propio en el marcado (un solo parcial reutilizado por todas las páginas), nunca el avatar rasterizado ni watermark.png. Aquí sólo se le fija el tamaño, siempre en em respecto al wordmark, para que ninguna página tenga que volver a medirlo. MRK-03: por debajo de 24 px se usa la variante SIN retícula. El emblema de la cabecera mide 1.15 em de un wordmark que va de 13.8 px (teléfono) a 16.8 px (escritorio), es decir entre 15.8 px y 19.3 px: siempre por debajo del suelo. A ese tamaño el trazo de 2 unidades del círculo se rasteriza en poco más de medio píxel y, con la opacidad 0.37, sale como un halo sucio alrededor de la estrella en vez de como una retícula. Por eso el SVG en línea de .brand NO lleva el exterior en ninguna de las cinco páginas: sólo la estrella y su núcleo, que a 16 px siguen leyéndose. La variante COMPLETA (estrella + retícula) se reserva a los usos grandes: el lockup del hero de la portada —47.8 px en escritorio, 31.3 px en teléfono— y la imagen social, donde el círculo se dibuja limpio. No se arregla subiendo la estrella a 24 px con el wordmark en 16.8: eso rompería la proporción 1.15× que fija la propia MRK-03. */ .emblema, .brand-emblem { display: block; flex: none; width: 1.15em; height: 1.15em; } /* Wordmark: SIDERA en mayúsculas, peso Book, tracking 0.28 em medido sobre Avenir. El margen negativo devuelve el hueco que el tracking añade después de la última letra, para que el bloque quede ópticamente centrado. El texto se escribe SIDERA en el HTML y el tracking lo pone el CSS: espacios literales entre letras romperían la búsqueda y los lectores de pantalla. */ .brand-name, .wordmark { font-family: var(--font-sidera); font-weight: 400; text-transform: uppercase; letter-spacing: 0.28em; margin-right: -0.28em; color: var(--wordmark); white-space: nowrap; } /* Sin degradados, sin sombras, sin caja y sin segundo color dentro del wordmark: la identidad está cerrada. */ .brand-name em { font-style: normal; color: inherit; } /* Lockup vertical: emblema, wordmark y tagline centrados entre sí, con el hueco emblema→wordmark a 0.13 veces el cuerpo del wordmark. El bloque ocupa sólo lo que mide, para que quede alineado con el texto de la página en vez de centrarse sobre toda la columna. Se reserva al hero de la portada y a la imagen social: no se inventan más variantes. */ .lockup { display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 100%; font-size: clamp(1.7rem, 6.4vw, 2.6rem); margin: 0 0 1.5rem; } .lockup .emblema, .lockup .brand-emblem { margin-bottom: 0.13em; } .wordmark-hero { font-size: 1em; line-height: 1.1; margin: 0; } /* La navegación tiene cinco destinos y en un teléfono de 360 px no cabe en una línea: sin flex-wrap el último enlace se salía del viewport y quedaba recortado por el overflow-x del body. El hueco entre filas es menor que el de las columnas para que las dos líneas se lean como un solo bloque. */ .site-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.92rem; } .site-nav a { color: var(--text-muted); text-decoration: none; } /* El estado activo cubre los dos valores que usa el sitio: "page" cuando el enlace es la página que se está leyendo, y "true" cuando la página pertenece a esa sección sin ser su índice (una lluvia dentro de Calendario, una calculadora dentro de Herramientas). */ .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current] { color: var(--amber); } /* ------------------------------------------------------------ Pie ------- */ .site-footer { border-top: 1px solid var(--border-soft); margin-top: 2rem; padding-block: 2.4rem 3rem; color: var(--text-dim); font-size: 0.88rem; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; justify-content: space-between; align-items: baseline; } .site-footer a { color: var(--text-muted); text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--amber); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; } /* -------------------------------------------------------- Botones ------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.78rem 1.35rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-sidera); font-weight: 600; font-size: 0.97rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } /* El ámbar va de FONDO con el texto en negro espacial: 9.94:1. Nunca al revés, y sin degradado, que produciría naranjas intermedios ajenos. */ .btn-primary { background: var(--amber); color: var(--bg); } .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); color: var(--bg); } .btn-ghost { border-color: var(--border-strong); color: var(--text); background: var(--surface); } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--line); color: var(--text); transform: translateY(-2px); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* -------------------------------------------------------- Tarjetas ------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.3rem; } .card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.6rem; } @media (min-width: 46rem) { .card-grid { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); } } /* Tarjeta que es enlace entera. Generaliza el patrón que las páginas de lluvias tenían en su propia hoja (.card-lluvia), para que la portada y cualquier página futura lo compartan sin volver a escribirlo. El título toma el ámbar al pasar por encima o al recibir el foco: es un solo elemento por tarjeta y solo mientras dura la interacción, así que no gasta el presupuesto de ámbar de la vista. */ .card-link { display: block; text-decoration: none; color: var(--text); transition: border-color 0.15s ease; } .card-link:hover, .card-link:focus-visible { border-color: var(--border-strong); color: var(--text); } .card-link h3 { margin-bottom: 0.35rem; } .card-link:hover h3, .card-link:focus-visible h3 { color: var(--amber); } .card-link .eyebrow { margin-bottom: 0.4rem; } .card-link p:last-child { margin-bottom: 0; } /* Rótulo de sección. Va en neutro: el ámbar señala una sola cosa por vista y estos rótulos se repiten en todas las secciones de la página. */ .eyebrow { font-family: var(--font-sidera); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: var(--text-dim); margin: 0 0 0.7rem; } /* Tagline de la casa: HISTORIAS DEL UNIVERSO, con el mismo tracking que el wordmark y a 0.35 veces su tamaño. Va después de .eyebrow a propósito: en el marcado del lockup las dos clases conviven y ésta tiene que ganar. */ .tagline { font-family: var(--font-sidera); font-weight: 400; text-transform: uppercase; letter-spacing: 0.28em; color: var(--amber); } .lockup .tagline { font-size: 0.35em; margin: 0.45em -0.28em 0 0; } .lede { font-size: clamp(1.05rem, 2.5vw, 1.22rem); color: var(--text-muted); max-width: 42rem; } .note { font-size: 0.88rem; color: var(--text-dim); line-height: 1.6; } /* Utilidades */ /* Cifras: numeración tabular y sin partirse nunca entre dos líneas. */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------- Movimiento reducido ------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .btn:hover { transform: none; } }