/* Los tokens del design system de 540, copiados tal cual de packages/tokens/src. No se editan a mano: si cambian en el paquete, se vuelven a copiar. Orden: primitivos, semanticos, tipografia, columna. */ /* ══════ primitives.css ══════ */ /* ───────────────────────────────────────────────────────────── Capa 1 · PRIMITIVOS Un primitivo es un valor en bruto con nombre. Dice QUÉ es, no para qué sirve. Nunca se usa dentro de un componente — para eso está la capa semántica. Regla comprobable: cualquier `--540-` en packages/ui es un error. ───────────────────────────────────────────────────────────── */ :root { /* ── Color · Accent ──────────────────────────────────────── */ --540-accent-yellow: #fef401; --540-accent-yellow-subtle: #fef4011a; /* Oro: la marca en un tono legible sobre fondo claro, donde el amarillo no llega al contraste mínimo. */ --540-accent-gold: #876e00; /* ── Color · Neutral ─────────────────────────────────────── */ --540-neutral-white: #ffffff; --540-neutral-50: #f5f5f3; --540-neutral-100: #e8e8e6; --540-neutral-200: #dcdcd9; --540-neutral-300: #aaaaaa; --540-neutral-450: #70706e; --540-neutral-600: #555553; --540-neutral-800: #3a3a38; --540-neutral-900: #2a2a28; --540-neutral-950: #1a1a18; /* La tinta al 70 %. Es la única de la escala con alfa porque es la única que va encima de algo: lo que hay debajo tiene que seguir estando. */ --540-neutral-950-veil: #1a1a18b3; /* Los dos velos de la barra que flota fija sobre la página. Al 70 %, como el del diálogo: por debajo pasa de todo —una frase de 96 px en tinta plena, una foto clara— y a esa opacidad el texto de la barra no baja de 8:1 en ninguno de los dos temas. */ --540-neutral-50-veil: #f5f5f3b3; --540-neutral-black-veil: #000000b3; /* ── Color · Neutral frío ──────────────────────────────────── Tres peldaños aparte de la escala de arriba, para el tema oscuro. La escala neutra de 540 es cálida porque el papel de la marca lo es —el 950 tira a marrón—, y sobre negro puro ese matiz se lee como suciedad. Son tres y no una escala entera porque el tema oscuro solo necesita fondo, superficie y raya. */ --540-neutral-black: #000000; --540-neutral-925: #0e0e0e; --540-neutral-875: #1c1c1c; /* ── Color · Status ──────────────────────────────────────── */ --540-status-red: #c83f43; --540-status-red-subtle: #c83f431a; --540-status-green: #257f54; --540-status-green-subtle: #257f541a; /* Los dos de aviso, subidos para el tema oscuro. Sobre negro, el rojo y el verde de arriba se quedan en 4,25:1 y 4,24:1 — por debajo del mínimo que el sistema se exige para cualquier texto. Estos dan 6,15:1 y 6,43:1. */ --540-status-red-soft: #d9686c; --540-status-green-soft: #3aa06e; /* ── Gradientes ────────────────────────────────────────────── Un gradiente no es un color y no cabía en la escala de arriba: es una función con paradas. Van aquí de todas formas porque son lo mismo que un primitivo —un valor en bruto con nombre— y porque así el componente pide `var(--gradient-…)` en vez de escribir la función, que es lo que el contrato 1 prohíbe. Los halos se apagan en transparente al 70 %: se apoyan en el fondo, no lo sustituyen. Y son de una sola línea a propósito: partidos, el verificador de tokens no los reconoce como una declaración. **Sin color, y esa es la decisión.** El verde y el cian de la primera versión no eran de nadie y a tamaño de banda teñían el negro de verde; el dorado duró una ronda, porque una página de tres colores con un halo de un cuarto no son tres colores; y el morado que vino después caía en lo mismo —era un cuarto color, solo que más discreto—. Un halo no tiene que aportar color: tiene que aportar luz. Así que es la tinta de la página a muy poca opacidad, y lo único que hace es levantar el fondo un punto donde hace falta. Dos versiones porque el fondo manda, y son la una el negativo de la otra: sobre negro la luz es blanca y sobre el papel es negra. Lo que las elige es el tema, no el componente. Y las dos muy bajas —el 8 % y el 5 %— porque lo que se busca es que no se vea de dónde sale. En cuanto un halo se distingue como forma deja de ser luz de fondo y pasa a ser una mancha, que es lo que le pasaba al morado. */ --540-gradient-gris: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 70%); --540-gradient-gris-papel: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 45%, transparent 70%); /* El velo de una imagen a sangre: transparente arriba y casi negro abajo, que es lo que deja leerse un texto puesto encima de una foto. No sigue al tema —una foto es oscura por debajo en las dos— y por eso su negro es literal y no el fondo invertido de la página. */ --540-gradient-velo-imagen: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.78) 100%); /* ── Filtros ───────────────────────────────────────────────── Un filtro tampoco es un color, y está aquí por lo mismo que los gradientes: es un valor en bruto con nombre, y sin él la única forma de que un logotipo ajeno cambie con la luz de la página es que el componente mire de qué tema es — que es justo lo que la capa semántica evita. Llevan la opacidad dentro en vez de dejarla suelta al lado: lo que se decide es cómo se ve una marca ajena en esta luz, y eso es una sola decisión. Separadas, cambiar de tema dejaba la mitad puesta. */ --540-filter-logo-papel: grayscale(1) opacity(0.55); --540-filter-logo-negro: brightness(0) invert(1) opacity(0.72); /* Los mismos dos, a plena tinta: es el logotipo que está en el centro de la tira. Sigue en gris y sigue en blanco — lo que sube es la presencia, no el color. Devolverle su color a uno solo lo sacaría de la lista, que es justo lo que el gris consigue. */ --540-filter-logo-papel-centro: grayscale(1) opacity(1); --540-filter-logo-negro-centro: brightness(0) invert(1) opacity(1); /* El desenfoque de lo que pasa por detrás de la barra. Suficiente para que una foto deje de leerse como foto y se quede en manchas de color; por debajo, el texto de la barra compite con lo que pasa. */ --540-filter-desenfoque-nav: blur(16px); /* ── Space ───────────────────────────────────────────────── */ --540-space-4: 4px; --540-space-8: 8px; --540-space-12: 12px; --540-space-16: 16px; --540-space-24: 24px; --540-space-28: 28px; --540-space-32: 32px; --540-space-36: 36px; --540-space-48: 48px; /* ── Control · alto de los elementos interactivos ────────── */ --540-control-24: 24px; --540-control-36: 36px; --540-control-45: 45px; /* ── Icono · tamaño del trazado ──────────────────────────── */ --540-icon-16: 16px; --540-icon-18: 18px; /* ── Logo · alto del lockup ──────────────────────────────── */ --540-logo-24: 24px; --540-logo-32: 32px; --540-logo-48: 48px; --540-logo-94: 94px; /* ── Layout · la retícula de la página ───────────────────── */ --540-layout-120: 120px; --540-layout-1200: 1200px; --540-layout-columnas-12: 12; /* ── Radius ──────────────────────────────────────────────── */ --540-radius-10: 10px; --540-radius-full: 9999px; /* ── Tipografía · familia y pesos ────────────────────────── */ --540-font-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --540-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* 350 y no 300. DM Sans es variable, así que el peso es un continuo y no hay que quedarse en los peldaños del archivo estático. El 300 solo se usa a 14 y a 12 px, y a esos tamaños el trazo se rompe: el texto secundario y las etiquetas se leían con esfuerzo. 350 lo devuelve a legible y sigue siendo el más fino del cuerpo, con distancia suficiente al 400 para que la variante ligera se note. */ --540-weight-light: 350; --540-weight-regular: 400; --540-weight-bold: 700; /* El peso del enunciado del recorrido, y el único sitio donde el sistema pasa de Bold. DM Sans es variable de 100 a 1000, así que 800 es un peso real y no un engrosado que se inventa el navegador. */ --540-weight-extrabold: 800; /* ── Tipografía · tamaños ────────────────────────────────── */ --540-size-12: 12px; --540-size-14: 14px; --540-size-16: 16px; --540-size-18: 18px; --540-size-20: 20px; --540-size-22: 22px; --540-size-26: 26px; --540-size-28: 28px; --540-size-32: 32px; --540-size-36: 36px; /* El cuerpo de la frase del recorrido, y **el único tamaño del sistema que no es un peldaño**. La regla que tiene que cumplir no es «medir tanto» sino «caber en una línea a cualquier ancho», y eso ningún valor fijo lo garantiza: con 64 la frase más larga se parte en una tablet, y con el tamaño que cabe en una tablet la portada se queda enana en un monitor. Así que se mide contra la ventana. Los dos extremos sí salen de la escala: el suelo es el cuerpo mínimo al que la frase sigue siendo un titular, y el techo el ancho de la columna partido por lo que ocupa la frase más larga. */ --540-size-frase: clamp(20px, 5.1vw, 76px); } /* ══════ semantic.css ══════ */ /* ───────────────────────────────────────────────────────────── Capa 2 · SEMÁNTICOS Cada uno aliasa a un primitivo y dice PARA QUÉ sirve, no qué es. Esta es la única capa que pueden tocar los componentes. ───────────────────────────────────────────────────────────── */ :root { /* Fondo */ --color-bg-default: var(--540-neutral-50); --color-bg-inverse: var(--540-neutral-950); --color-bg-surface: var(--540-neutral-50); --color-bg-subtle: var(--540-neutral-100); --color-bg-accent: var(--540-accent-yellow); --color-bg-accent-subtle: var(--540-accent-yellow-subtle); --color-bg-inverse-active: var(--540-neutral-800); --color-bg-neutral-hover: var(--540-neutral-100); --color-bg-row-active: var(--540-neutral-100); --color-bg-neutral-active: var(--540-neutral-200); --color-bg-disabled: var(--540-neutral-100); --color-bg-error: var(--540-status-red-subtle); --color-bg-overlay: var(--540-neutral-950-veil); --color-bg-success: var(--540-status-green-subtle); /* El velo de la barra fija. Este sí gira con el tema: lo que hay debajo es la página, y la barra tiene que seguir siendo del color de la página. */ --color-bg-nav: var(--540-neutral-50-veil); /* Texto */ --color-text-primary: var(--540-neutral-950); --color-text-secondary: var(--540-neutral-600); --color-text-inverse: var(--540-neutral-white); /* Un peldaño más claro que su pareja sobre papel, y no el mismo gris del revés: sobre un fondo oscuro el gris se apaga antes. El antetítulo y la entradilla de una cabecera sobre la banda negra se leían como texto deshabilitado teniendo contraste de sobra. */ --color-text-inverse-secondary: var(--540-neutral-200); --color-text-accent: var(--540-accent-yellow); --color-text-accent-inverse: var(--540-accent-gold); --color-text-on-media: var(--540-neutral-white); --color-text-tertiary: var(--540-neutral-450); --color-text-disabled: var(--540-neutral-300); --color-text-error: var(--540-status-red); --color-text-success: var(--540-status-green); /* Borde */ --color-border-default: var(--540-neutral-100); --color-border-strong: var(--540-neutral-900); --color-border-default-inverse: var(--540-neutral-900); --color-border-strong-inverse: var(--540-neutral-white); --color-border-focus: var(--540-neutral-950); /* Espaciado */ --space-xs: var(--540-space-4); --space-s: var(--540-space-8); --space-m: var(--540-space-12); --space-l: var(--540-space-16); --space-xl: var(--540-space-24); --space-2xl: var(--540-space-32); --space-3xl: var(--540-space-48); /* Padding de contenedor */ --padding-page: var(--540-space-16); --padding-section: var(--540-space-36); --padding-card: var(--540-space-24); /* Alto de control */ --size-control-xs: var(--540-control-24); --size-control-sm: var(--540-control-36); --size-control-md: var(--540-control-45); /* Tamaño de icono, emparejado con el alto de control */ --size-icon-sm: var(--540-icon-16); --size-icon-md: var(--540-icon-18); /* Alto del logotipo */ --size-logo-xs: var(--540-logo-24); --size-logo-sm: var(--540-logo-32); --size-logo-md: var(--540-logo-48); --size-logo-client: var(--540-logo-94); /* Retícula de página */ --size-container: var(--540-layout-1200); --padding-section-block: var(--540-space-48); --grid-columns: var(--540-layout-columnas-12); --grid-gutter: var(--540-space-16); --grid-gutter-wide: var(--540-space-48); /* Radio */ --radius-default: var(--540-radius-10); --radius-pill: var(--540-radius-full); /* Gradientes. El halo y el velo de una imagen a sangre. El halo está aquí en su versión de papel: la de la página negra la pone el tema, más abajo. */ --gradient-halo: var(--540-gradient-gris-papel); --gradient-velo-imagen: var(--540-gradient-velo-imagen); /* Filtros. Cómo se ve un logotipo ajeno en esta luz, y cuánto se desenfoca lo que pasa por detrás de la barra. El segundo no gira con el tema: desenfocar es lo mismo sobre papel que sobre negro. */ --filter-logo-cliente: var(--540-filter-logo-papel); --filter-logo-cliente-centro: var(--540-filter-logo-papel-centro); --filter-nav: var(--540-filter-desenfoque-nav); } /* ── El tema oscuro ─────────────────────────────────────────────── Una capa más de la semántica, no una reescritura de la de arriba: el aliasado claro se queda donde está y esto solo vuelve a apuntar los semánticos de **color** dentro de lo que lleve el atributo. Por qué así y no en `:root`: la web de 540 es clara con dos bandas oscuras. Volver a aliasar en la raíz dejaría el hero y el manifiesto en claro sobre una página negra —justo al revés— en las seis páginas que no se tocan. Con el atributo, la portada cambia entera y las demás no se enteran. Deshacerlo es quitar un atributo. No solo el color. Un gradiente y un filtro dependen del fondo igual que un color —un halo blanco sobre papel no se ve y uno negro sobre negro tampoco—, así que se vuelven a apuntar aquí. Es lo que hace posible que la portada tenga sus dos temas sin que ningún componente pregunte de qué tema es la página. Lo que no cambia: el espacio, el radio, el alto de control y el tamaño de icono. La luz no mueve las medidas. La regla de los pares: `inverse` significa **la banda contraria a la de la página**, y eso se mantiene en los dos temas. Con el tema puesto, la página es negra y la banda contraria es clara, así que los pares se giran: un componente en `tone="default"` es el que va sobre la página. Las dos excepciones son el oro y el amarillo, que **no se giran**. No son un par claro/oscuro del tema: son el color de marca sobre fondo claro y sobre fondo oscuro. Lo que cambia con el tema es la luz de la página; la del fondo bajo el que va cada uno de los dos, no. Girarlos dejaba la etiqueta del botón de marca —amarillo relleno, que es oscuro en los dos temas— en oro sobre negro, a 4,26:1. */ [data-tema="oscuro"] { /* Fondo */ --color-bg-default: var(--540-neutral-black); --color-bg-surface: var(--540-neutral-925); --color-bg-subtle: var(--540-neutral-925); --color-bg-inverse: var(--540-neutral-50); --color-bg-inverse-active: var(--540-neutral-200); /* Un peldaño por encima del de hover, y no el mismo: sobre negro el vecino inmediato del fondo son catorce niveles de 255, y la banda abierta no se distinguía de las cerradas. Sobre papel ese salto sí basta. */ --color-bg-neutral-hover: var(--540-neutral-925); --color-bg-row-active: var(--540-neutral-875); --color-bg-neutral-active: var(--540-neutral-875); --color-bg-disabled: var(--540-neutral-875); /* Texto */ --color-text-primary: var(--540-neutral-white); /* Sube un peldaño sobre negro. Compartía primitivo con el terciario, así que los dos escalones del gris eran uno: el antetítulo de una cabecera se leía igual de apagado que un ordinal apagado, teniendo contraste de sobra —los dos pasan de 10:1—. Sobre un fondo oscuro el gris se apaga antes de lo que dice su ratio, y por eso aquí no vale el mismo que sobre papel. */ --color-text-secondary: var(--540-neutral-200); /* El terciario se queda donde estaba, y ahora sí es un peldaño por debajo del de apoyo. Por abajo no puede bajar más: sobre negro el siguiente gris de la escala —el 450— se queda en 4,23:1 y deja de poder leerse como cuerpo de texto. */ --color-text-tertiary: var(--540-neutral-300); --color-text-inverse: var(--540-neutral-950); --color-text-inverse-secondary: var(--540-neutral-600); --color-text-disabled: var(--540-neutral-600); --color-text-error: var(--540-status-red-soft); --color-text-success: var(--540-status-green-soft); /* Borde */ --color-border-default: var(--540-neutral-875); --color-border-strong: var(--540-neutral-white); --color-border-default-inverse: var(--540-neutral-100); --color-border-strong-inverse: var(--540-neutral-950); --color-border-focus: var(--540-neutral-white); /* Gradiente. El mismo halo del revés: sobre negro la luz es blanca, y sobre el papel negra. Un halo claro sobre papel no existiría. */ --gradient-halo: var(--540-gradient-gris); /* Fondo de la barra fija: el mismo velo, en negro. */ --color-bg-nav: var(--540-neutral-black-veil); /* Filtro. Los logotipos de cliente pasan a blanco: en gris oscuro sobre negro no se veía ninguno. Y el del centro, a plena tinta. */ --filter-logo-cliente: var(--540-filter-logo-negro); --filter-logo-cliente-centro: var(--540-filter-logo-negro-centro); } /* ── Las medidas de página, de 1024 en adelante ─────────────────── Arriba están las del tramo estrecho y aquí las de escritorio, en ese orden y con `min-width` por lo mismo que la rejilla y que la escala de texto: los dos únicos números que aparecen en el sistema son los dos saltos del proyecto. Son las cuatro medidas que dependen del ancho de la pantalla y no del ojo: · `--padding-page` — 28 de margen en un móvil de 360 se comen el 16 % del ancho. 16 deja respirar al texto sin acercarlo al borde. · `--padding-section-block` — 120 de aire arriba y abajo de cada sección son media pantalla de móvil en blanco. Una sección tiene que caber con algo de la siguiente asomando, que es lo que dice que la página sigue. · `--grid-gutter` — el canal de la retícula. En una columna sola no separa nada, así que solo hace falta que separe filas. · `--grid-gutter-wide` — lo que separa dos mitades que no se comparan. Apiladas ya no son dos mitades: 120 entre ellas parten la página en dos páginas. Lo que no cambia: el espaciado de la escala (`--space-*`), los altos de control y los tamaños de icono. Un botón se toca con el mismo dedo en las dos pantallas, y el aire entre un título y su párrafo es del texto, no del dispositivo. */ @media (min-width: 1024px) { :root { --padding-page: var(--540-space-28); --padding-section-block: var(--540-layout-120); --grid-gutter: var(--540-space-24); --grid-gutter-wide: var(--540-layout-120); } } /* ══════ typography.css ══════ */ /* ───────────────────────────────────────────────────────────── Capa 2 · ESTILOS DE TEXTO Cada estilo son tres tokens: tamaño, peso e interlineado. Interlineado: `normal` significa «lo que digan las métricas de la fuente». Solo lo llevan explícito Display —a 96px el interlineado natural abre demasiado— y Numbers, que es una cifra suelta y no un párrafo. La escala de body se nombra por tamaño: L es el grande, M el medio y S el pequeño. Y cada peso tiene un único nombre. ───────────────────────────────────────────────────────────── */ :root { --font-sans: var(--540-font-dm-sans); --font-mono: var(--540-font-mono); /* ── Display ─────────────────────────────────────────────── */ /* ── Heading ─────────────────────────────────────────────── */ --text-title-l-size: var(--540-size-28); --text-title-l-weight: var(--540-weight-regular); --text-title-l-line-height: normal; --text-title-m-size: var(--540-size-26); --text-title-m-weight: var(--540-weight-regular); --text-title-m-line-height: normal; --text-title-s-size: var(--540-size-22); --text-title-s-weight: var(--540-weight-regular); --text-title-s-line-height: normal; --text-title-xs-size: var(--540-size-20); --text-title-xs-weight: var(--540-weight-regular); --text-title-xs-line-height: normal; /* ── Body ────────────────────────────────────────────────── */ --text-body-l-size: var(--540-size-18); --text-body-l-weight: var(--540-weight-regular); --text-body-l-line-height: normal; --text-body-m-size: var(--540-size-16); --text-body-m-weight: var(--540-weight-regular); --text-body-m-line-height: normal; --text-body-s-size: var(--540-size-14); --text-body-s-weight: var(--540-weight-regular); --text-body-s-line-height: normal; --text-body-s-light-size: var(--540-size-14); --text-body-s-light-weight: var(--540-weight-light); --text-body-s-light-line-height: normal; --text-body-s-bold-size: var(--540-size-14); --text-body-s-bold-weight: var(--540-weight-bold); --text-body-s-bold-line-height: normal; /* ── Micro ───────────────────────────────────────────────── */ /* Tres pesos y un nombre cada uno, como en Body / S: el sin apellido es el Regular. La letra pequeña que se lee suelta —una etiqueta dentro de una cápsula, sin nada alrededor que la sostenga— necesita ese peso. */ --text-micro-size: var(--540-size-12); --text-micro-weight: var(--540-weight-regular); --text-micro-line-height: normal; --text-micro-light-size: var(--540-size-12); --text-micro-light-weight: var(--540-weight-light); --text-micro-light-line-height: normal; --text-micro-bold-size: var(--540-size-12); --text-micro-bold-weight: var(--540-weight-bold); --text-micro-bold-line-height: normal; /* ── Statement · la frase de un recorrido ────────────────── */ /* El único estilo con tracking, y el único que pasa de Bold. A este cuerpo el espacio que la fuente deja entre caracteres se lee como huecos y el Regular se afina hasta parecer otra tipografía: cerrarlo un punto y subir a 800 le devuelven el bloque compacto que la frase es a ese tamaño. El tracking es del 3 % y estuvo en el 6 %. Se abrió al pasar la frase de versales a caja normal: en mayúsculas todos los caracteres tienen la misma altura y aguantan que se cierren, y en caja normal las astas y los ojos de las minúsculas se tocan antes. Y el tamaño es fluido, que es el único de la escala que lo es: la frase tiene que caber en una línea a cualquier ancho, y eso no lo cumple ningún valor fijo. Por eso no aparece abajo, en el bloque de escritorio — no tiene dos valores, tiene una función. */ --text-statement-size: var(--540-size-frase); --text-statement-weight: var(--540-weight-extrabold); --text-statement-line-height: 0.9; --text-statement-letter-spacing: -0.03em; /* ── Numbers · cifra grande de dato destacado ────────────── */ } /* ── La escala grande, de 1024 en adelante ─────────────────────── Los tamaños de arriba son los del tramo estrecho, y estos los de escritorio. Está escrito en ese orden —el pequeño como base y el grande en la media query— por lo mismo que la rejilla: con `min-width` los dos únicos números que aparecen son los dos saltos del proyecto. Al revés harían falta un 599 y un 1023, que son el mismo salto escrito de la forma en la que uno se equivoca. Baja la mitad de arriba de la escala y nada de la mitad de abajo. Un cuerpo de 16 se lee igual en un móvil que en un monitor —el ojo está más cerca, no el texto más pequeño—, así que Body y Micro no tienen dos valores. Los titulares sí: 96px en 360 de ancho son tres caracteres por línea, y el ordinal de 260 no cabe ni él solo. La proporción entre pasos se conserva, así que la jerarquía se lee igual de arriba abajo en los dos tramos: lo que cambia es la altura de la escala, no su forma. Un solo salto y no dos: entre 600 y 1023 sigue la escala pequeña. Una table en vertical tiene 768 de ancho, y ahí un display de 96 se sale por el mismo motivo que en el móvil. Lo que decide el tamaño del titular es cuánto texto cabe en una línea, no el nombre del dispositivo. */ @media (min-width: 1024px) { :root { --text-title-l-size: var(--540-size-36); --text-title-m-size: var(--540-size-32); --text-title-s-size: var(--540-size-26); --text-title-xs-size: var(--540-size-22); } } /* ══════ columna.css ══════ */ /* La columna de contenido, como clase global. * * Es lo único de este paquete que no es una custom property, y tiene un motivo: * **la columna la necesitan dos paquetes.** La usa `Section` dentro del design * system y la usan las tres piezas de la plantilla que viven fuera de una * sección —la barra, la cabecera de página y el pie—, que son de la app. Un * `composes: … from "…"` no cruza de un paquete a otro, así que la alternativa * era escribir la misma regla en los dos sitios, con el mismo comentario, y que * el día que una se toque la otra no se entere. * * Fue un componente —`Container`— y no llegaba a serlo: cuatro declaraciones y * ningún comportamiento. Esto es lo mismo sin el envoltorio de React. * * Se consume con `composes: columna-540 from global;`. */ .columna-540 { /* El margen lateral no se fija: sale de la resta. La columna mide 1200 y se centra, así que en una ventana de 1440 sobran 240 repartidos en dos — los 120 de la referencia, sin escribirlos en ninguna parte. Fijarlos habría sido correcto exactamente a un ancho: en cuanto la ventana baja de 1200 hay que deshacerlo con una media query. Restando, el aire se encoge solo hasta el margen mínimo de página. */ max-width: var(--size-container); margin-inline: auto; padding-inline: var(--padding-page); /* `content-box` es lo que hace que la columna mida 1200 exactos y no 1200 menos el relleno. */ box-sizing: content-box; /* **Y sin `width`.** No es un olvido: un bloque sin ancho declarado ocupa lo que le den *menos* su relleno; con `width: 100%` ocupa todo y le suma el relleno encima, que en `content-box` son 100 % + 2 × el margen de página. En escritorio no se ve —sobran 240 px de aire lateral que lo absorben— pero en una ventana de 375 no sobra nada: la columna mide 407 y saca a la página a desplazarse en horizontal. Pasó una vez, en las siete pantallas a la vez, y no lo pilló ninguna puerta salvo `ds:anchos`. Si alguien añade aquí un `width`, vuelve a pasar. */ }