/* Brújula · sistema tipográfico (auto-alojado, offline-ready) ──────────────────────────────────────────────────────────────────────── DOS CAPAS (23 sep 2026). El NÚCLEO escribe con la letra de la Brújula (30 sep 2026, manual de marca §4): GEIST para trabajar —una sola familia, variable, de 100 a 900— y SYNE 700 solo para el nombre, el logotipo. Geist es la que declaran los stacks de aquí abajo; Syne la nombra `--font-marca`. El TEMA del cliente (assets/tema.css, que toda página carga detrás de esta hoja) redefine los cuatro nombres con la suya: Amoramar escribe con Montserrat (interfaz) y EB Garamond (wordmark y cursivas de acento), y por eso el portal se ve igual que antes. Los @font-face de todas las familias viven aquí: el navegador solo descarga la que se usa, y así un tema no tiene que traer su propio @font-face. Lo carga theme.js en TODAS las páginas (punto único). Las páginas ya no usan "SF Pro Display": ese stack fue reemplazado por "Montserrat" en todo el sitio. Las ETIQUETAS impresas usan Georgia/Arial propios → no se ven afectadas. Las fuentes (.woff2) viven en assets/fonts/ y están en el precache del SW. */ /* ── Geist (la letra de la Brújula; un archivo variable, subconjunto latino, OFL) ── */ @font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist-var.woff2") format("woff2")} /* La mono de la marca (manual §4): fechas, números de documento y cifras del rediseño. Subconjunto latino de Google Fonts, variable 100–900. */ @font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/geist-mono-var.woff2") format("woff2")} /* ── Syne 700 (el logotipo de la Brújula: «BRÚJULA» con la hoja por tilde, OFL) ── */ @font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/syne-700.woff2") format("woff2")} /* ── Montserrat (interfaz de Amoramar) ── */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400.woff2") format("woff2")} @font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/montserrat-500.woff2") format("woff2")} @font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/montserrat-600.woff2") format("woff2")} @font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/montserrat-700.woff2") format("woff2")} @font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400-italic.woff2") format("woff2")} /* ── EB Garamond (wordmark + cursivas de acento de Amoramar) ── */ @font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ebgaramond-400.woff2") format("woff2")} @font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ebgaramond-500.woff2") format("woff2")} @font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ebgaramond-600.woff2") format("woff2")} @font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/ebgaramond-400-italic.woff2") format("woff2")} @font-face{font-family:"EB Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/ebgaramond-500-italic.woff2") format("woff2")} @font-face{font-family:"EB Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("/assets/fonts/ebgaramond-600-italic.woff2") format("woff2")} :root{ /* La Brújula trabaja con UNA familia: la «serif» del núcleo es la misma grotesca. Syne no entra aquí: es la del nombre, no la de los textos. */ --font-serif:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif; /* EL MISMO stack que `--font-sans` de tokens.css, carácter por carácter. Eran dos: este llevaba cuatro fallbacks y aquel siete —le faltaban "Segoe UI Variable Display", "Segoe UI" y Roboto—, así que en un Windows o un Android donde Montserrat no cargue, la mitad del portal caía a una fuente y la otra mitad a otra. Dos canónicos son cero canónicos. Se repite el literal en vez de poner `var(--font-sans)` porque `offline.html` carga fonts.css y NO tokens.css: ahí un var() sin definir dejaría el body sin familia. Lo que impide que vuelvan a separarse es `tests/tipografia-una-sola-familia.test.mjs`, no la buena voluntad. */ --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif; /* `--font-sans` es el MISMO stack y vive aquí, no en tokens.css: estaba declarado en las DOS hojas con valores distintos —cuatro fallbacks aquí y siete allí— y como `fonts.css` se carga DESPUÉS, ganaba este. O sea que la definición de tokens.css llevaba meses muerta y el portal usaba un stack sin "Segoe UI Variable Display", "Segoe UI" ni Roboto: en un Windows o un Android sin Montserrat caía a la fuente del sistema antes de lo que su propio canon decía. Se queda en fonts.css porque aquí están los `@font-face` —la familia se declara donde se carga— y porque `offline.html` carga esta hoja y NO tokens.css. Lo vigila `tests/tipografia-una-sola-familia.test.mjs`. */ --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif; --serif:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif; /* El logotipo: Syne 700 en mayúscula con aire (.16em). Solo para el nombre de la plataforma; ningún tema lo redefine porque no es del cliente. */ --font-marca:"Syne","Geist",sans-serif; } /* ── PATRÓN DE FONDO TEMÁTICO POR MODO (líneas que aparecen) ───────────────────── Capa fija .amr-bg (la inyecta theme.js con un SVG real adentro) detrás del contenido, DESENFOCADA (queda suave/onírica). Movimiento "aparecer líneas": una malla densa de ondas finas donde cada línea surge y se desvanece de forma escalonada (cascada de arriba a abajo) → siempre hay textura, nunca se vacía. Color por tema vía currentColor: Playa = dorado; Mar = crema. theme.js genera las ondas y hornea su animation-delay inline (fracción de --wd), así el número de líneas se cambia en un solo sitio. Solo opacity; respeta reduced-motion; no sale al imprimir. Duración por tema: --wd. */ /* Estas dos reglas SOLO en el índice (): dejan ver la capa .amr-bg. Los módulos no la llevan y conservan su propio fondo. */ html[data-amr-bg]{ background-color:var(--bg) !important; /* Sombra/degradado cálido que se despliega desde el borde superior (el de antes, que vivía en el body del inicio). Va en , DETRÁS de las ondas (.amr-bg) y del contenido, sin desenfoque. Playa va más marcado (.36, con más alcance); el mar conserva su intensidad (--tex-1, .16) en el override de abajo. */ background-image:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold) 36%, transparent), transparent 68%) !important; background-repeat:no-repeat !important; } html[data-amr-bg][data-theme="dark"]{ background-image:radial-gradient(ellipse at 50% 0%, var(--tex-1), transparent 65%) !important; } html[data-amr-bg] body{background:transparent !important;animation:none !important} .amr-bg{ position:fixed;inset:-14%;z-index:-1;pointer-events:none; overflow:hidden; /* cada línea mide 200%: se recorta aquí y no asoma */ color:var(--fondo-trazo); /* el del tema: en Amoramar, bronce de día y crema de noche */ --wd:16s; /* el ciclo; lo ajusta el admin (velocidad) */ /* LA DERIVA SALE DEL CICLO, no de un número aparte (14 sep 2026). El mando de velocidad del panel movía `--wd` —que gobernaba el fundido— mientras la deriva seguía clavada en 54 s, así que subir la velocidad aceleraba un parpadeo y no el movimiento. Ahora es una multiplicación: el mando mueve el campo, que es lo que se ve. El 3,3 reproduce los dos valores de antes (16 → 53 s en playa, 20 → 66 en el mar), así que el defecto no cambia de aspecto. */ --wdd:calc(var(--wd) * 3.3); --wb:2.4px; /* desenfoque; lo ajusta el admin */ } [data-theme="dark"] .amr-bg{ --wd:20s; /* en el mar todo va más despacio, como el ciclo */ } /* EL CAMPO: UN , UN Y N (14 sep 2026). Antes eran 22 , uno por línea, con su banda y sus dos animaciones — y tenía sentido mientras cada línea se moviera por su cuenta: una capa por línea es lo que evitaba repintar el lienzo entero en cada fotograma. Desde que el oleaje es un CAMPO COHERENTE (el porqué, en `buildBgSVG` de theme.js) el dibujo se desplaza ENTERO, así que es una sola capa, un solo `transform` y cero repintado: de 44 animaciones infinitas a UNA. El desenfoque va aquí, sobre la capa que se traslada: se rasteriza una vez y el compositor solo la mueve. Moverlo al contenedor obligaría a recalcularlo en cada fotograma. */ .amr-campo{ /* 200% de ancho porque el patrón va dibujado DOS veces: la deriva corre uno entero y vuelve al origen sin costura. */ position:absolute;left:0;top:0;width:200%;height:100%;display:block;overflow:visible; filter:blur(var(--wb)); /* Fija, y no respirando. El fundido de antes (.40↔.82 por línea) se retiró con la arquitectura: en un campo coherente un pulso de opacidad es GLOBAL y se lee como parpadeo de pantalla, no como agua. Quien mueve el conjunto es la deriva, que ahora va con la velocidad del panel. */ opacity:.75; animation:amrDeriva var(--wdd, 54s) linear infinite; } /* El trazo va en el —no en el de `defs`— porque es lo que hereda el contenido clonado. `non-scaling-stroke`: cada línea se escala en vertical para variar su amplitud, y sin esto las de amplitud menor saldrían con el trazo más fino. El `stroke-opacity` por línea lo pone theme.js. */ /* El `stroke` lo pone theme.js por línea: es el degradado que desvanece pedazos (ver «PEDAZOS DE LÍNEA QUE SE DESVANECEN»). Aquí queda el color de reserva por si el degradado no resolviera, para que el campo nunca salga sin trazo. */ .amr-campo use{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke} /* Un patrón entero. Como 0→480 y 480→960 son idénticos, al llegar al final la línea está exactamente donde empezó y el bucle no tiene salto. */ @keyframes amrDeriva{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.amr-bg *{animation:none !important}} @media print{.amr-bg{display:none !important}}