/* ========================================================================== iURBANS · hoja editorial para web css/iurbans-editorial.css -------------------------------------------------------------------------- Traduce a pantalla, componente por componente, la hoja del memorando de inversión (css/referencia/memo-a4.css). Esa hoja es la FUENTE DE VERDAD: si aquí algo discrepa de ella en proporción, peso, tracking o filete, gana ella y se corrige esta. ORDEN DE CARGA (obligatorio, en ): 1. fuentes/fuentes.css @font-face: Big Shoulders, IBM Plex Serif, IBM Plex Mono 2. tokens/tokens.css variables --color-*, --font-*, --fs-*, --tracking-*, --space-* 3. css/iurbans-editorial.css esta hoja (componentes con prefijo iu-) ... Esta hoja no repite ningún color en hexadecimal: todo sale de tokens.css (var(--color-...)); las mezclas se hacen con color-mix() sobre esos tokens. REGLAS DEL SISTEMA (no negociables) - Cero radios, cero sombras, cero degradados decorativos. El único degradado admitido es el velo ébano sobre fotografía (legibilidad). - El rojo (--color-crimson) es sello: selección, alerta o la cifra que importa. Nunca relleno decorativo. Cero iconos genéricos. - Display (Big Shoulders 700) siempre en MAYÚSCULAS. Mono (IBM Plex Mono) en rótulos, etiquetas y notas, en mayúsculas con tracking. Serif (IBM Plex Serif) en texto corrido, bajadas en cursiva y citas. - Filetes: 1 px ink-4 para dividir; 2 px ébano ARRIBA de cada grupo (cifras, tabla, tarjeta, fases, comparativa); 3 px carmesí a la IZQUIERDA de la cita. - Fotografía del problema en blanco y negro (.iu-figura--problema); propuesta en color (.iu-figura--propuesta). - Cifras en español: 44.038 · 4,3 · 87 % (espacio antes de %). - La marca: iURBANS MÓVIL PRIMERO base < 40em (640 px) una columna, gutter 16 px tablet >= 40em dos columnas donde el componente lo admite escritorio >= 64em (1024 px) la retícula del memorando Cada componente declara su colapso en un comentario «MÓVIL:». CLARO / ÉBANO Los componentes no llevan tinta fija: leen variables de contexto (--iu-texto, --iu-texto-2, --iu-texto-3, --iu-filete, --iu-filete-grupo, --iu-fondo, --iu-fondo-grupo, --iu-pista, --iu-techo). .iu-seccion-oscura, .iu-portada y .iu-visual-a-sangre las redefinen, y todo lo que llevan dentro pasa a su estado sobre ébano. Lo que no basta con variables se declara en el bloque «SOBRE ÉBANO:» de cada componente. ÍNDICE 00 contexto y base 08 tabla 16 portada 01 retícula 09 tarjeta 17 visual a sangre 02 marca (.wm) 10 lista + 18 embudo 03 kicker y titular 11 fases 19 barras (SVG) 04 bajada y texto 12 comparativa 20 apilada (SVG) 05 nota y pie 13 cita 21 infografía de tres estados 06 banda 14 figura 22 ecosistema 07 cifras 15 sección oscura 23 utilidades · movimiento ========================================================================== */ /* ------------------------------------------------------------------ 00 contexto y base */ :root, .iu-contexto-claro { --iu-fondo: var(--color-white); --iu-fondo-grupo: var(--color-paper); --iu-texto: var(--color-ebony); --iu-texto-2: var(--color-ink-2); --iu-texto-3: var(--color-ink-3); --iu-filete: var(--color-ink-4); --iu-filete-grupo: var(--color-ebony); --iu-pista: color-mix(in srgb, var(--color-paper) 60%, var(--color-white)); --iu-techo: var(--color-silver); --iu-gutter: var(--space-4); } .iu-seccion-oscura, .iu-portada, .iu-visual-a-sangre { --iu-fondo: var(--color-ebony); --iu-fondo-grupo: color-mix(in srgb, var(--color-white) 10%, var(--color-ebony)); --iu-texto: var(--color-white); --iu-texto-2: var(--color-paper-on-dark-2); --iu-texto-3: var(--color-paper-on-dark-3); --iu-filete: var(--color-rule-on-dark); --iu-filete-grupo: var(--color-white); --iu-pista: color-mix(in srgb, var(--color-white) 9%, transparent); --iu-techo: color-mix(in srgb, var(--color-white) 38%, transparent); } @media (min-width: 40em) { :root { --iu-gutter: var(--space-6); } } @media (min-width: 64em) { :root { --iu-gutter: var(--space-8); } } .iu-pagina { margin: 0; background: var(--color-white); color: var(--color-ebony); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--leading-body); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; } .iu-pagina *, .iu-pagina *::before, .iu-pagina *::after { box-sizing: border-box; border-radius: 0; } .iu-pagina :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; } .iu-pagina :where(img, svg) { max-width: 100%; } .iu-pagina :where(strong, b) { font-weight: 700; } .iu-pagina :where(code, kbd, samp) { font-family: var(--font-mono); font-size: .9em; } .iu-pagina a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--color-crimson); } .iu-pagina a:hover { color: var(--color-crimson); } .iu-pagina :focus-visible { outline: 2px solid var(--color-crimson); outline-offset: 2px; } .iu-pagina ::selection { background: var(--color-crimson); color: var(--color-ebony); } /* ------------------------------------------------------------------ 01 retícula memo: .page (márgenes de 17 mm), .cols2, .cols3, .cols-6-4 MÓVIL: todas las columnas colapsan a una; .iu-columnas--3 pasa a dos en tablet y a tres en escritorio; --2 y --6-4 abren en escritorio. */ .iu-contenedor { width: 100%; max-width: calc(var(--container) + 2 * var(--iu-gutter)); margin-inline: auto; padding-inline: var(--iu-gutter); } .iu-seccion { background: var(--iu-fondo); color: var(--iu-texto); padding-block: var(--space-12); } .iu-seccion-papel { --iu-fondo: var(--color-paper); --iu-fondo-grupo: var(--color-white); background: var(--color-paper); } @media (min-width: 64em) { .iu-seccion { padding-block: var(--space-20); } } .iu-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } @media (min-width: 40em) { .iu-columnas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } } @media (min-width: 64em) { .iu-columnas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); } .iu-columnas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .iu-columnas--6-4 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: var(--space-10); } } .iu-pila > * + * { margin-top: var(--space-6); } /* ------------------------------------------------------------------ 02 marca (.wm) memo: .wm .i .r · la i minúscula en IBM Plex Serif Bold carmesí a 0,91 em; URBANS en Big Shoulders Bold en mayúsculas. El tamaño es el font-size de .wm. SOBRE ÉBANO: URBANS hereda el blanco del contexto; la i sigue carmesí. */ .wm { font-weight: 700; white-space: nowrap; line-height: 1; } .wm .i { font-family: var(--font-serif); font-weight: 700; font-style: normal; font-size: .91em; color: var(--color-crimson); text-transform: lowercase; } .wm .r { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; color: inherit; } .wm--grande { font-size: clamp(2.75rem, 6vw, 4.5rem); } .wm--media { font-size: clamp(1.75rem, 3vw, 2.5rem); } /* ------------------------------------------------------------------ 03 kicker, titular, sumario, subtítulo, rótulo memo: .kicker (mono 700, 8 pt, .16em, carmesí), h1 (display 35 pt, interlínea .94, en carmesí), .sub (mono 7,2 pt .12em ink-3 con filete inferior), h2 (serif 700 13,5 pt), h3 (mono 700 7,6 pt .12em). CONTRASTE (guía §2.4): el memorando compone el rótulo entero en carmesí a 8 pt; en pantalla, carmesí sobre blanco a 13 px da 3,86:1 y falla. Por eso el rótulo va en la tinta del contexto y solo las barras // van en carmesí:
// El problema
MÓVIL: los tamaños escalan con clamp() desde tokens.css; el titular no se parte con guiones y sus
solo actúan desde tablet. SOBRE ÉBANO: el texto del kicker pasa a blanco y las // siguen carmesí; titular blanco con carmesí; sumario a texto-3 con filete sobre ébano. */ .iu-kicker { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--iu-texto); line-height: 1.3; } .iu-kicker__barras { color: var(--color-crimson); } .iu-titular { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--iu-texto); margin: 6px 0 10px; hyphens: manual; overflow-wrap: break-word; } .iu-titular em { font-style: normal; color: var(--color-crimson); } .iu-titular--portada { font-size: var(--fs-display-xl); line-height: .9; letter-spacing: .003em; } .iu-titular--visual { font-size: clamp(2.25rem, 5vw, 4rem); } .iu-br-tablet { display: none; } @media (min-width: 40em) { .iu-br-tablet { display: inline; } } .iu-sumario { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--iu-texto-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--iu-filete); margin-bottom: var(--space-6); line-height: 1.5; } .iu-subtitulo { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; color: var(--iu-texto); margin: var(--space-6) 0 var(--space-2); } .iu-rotulo { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--iu-texto); margin: var(--space-5) 0 var(--space-2); line-height: 1.35; } .iu-subtitulo:first-child, .iu-rotulo:first-child { margin-top: 0; } /* ------------------------------------------------------------------ 04 bajada y texto memo: p.lead (serif cursiva 12 pt, 1,38, ink-2), p (10,2 pt), .small (8,4 pt). MÓVIL: ancho completo; la bajada se limita a 62ch en pantallas anchas. SOBRE ÉBANO: la bajada a texto-2 (blanco al 78 %). */ .iu-bajada { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: var(--leading-lead); color: var(--iu-texto-2); margin-bottom: var(--space-6); max-width: 62ch; } .iu-texto { font-size: var(--fs-body); line-height: var(--leading-body); color: var(--iu-texto); max-width: var(--measure); } .iu-texto + .iu-texto { margin-top: var(--space-3); } .iu-texto--pequeno { font-size: var(--fs-small); line-height: 1.42; } /* ------------------------------------------------------------------ 05 nota y pie memo: .note (mono 6,6 pt .02em ink-3, 1,45) y .run (pie corrido: mono 6,6 pt .12em mayúsculas ink-3, filete superior de 1 px, número en carmesí). CONTRASTE (guía §2.4): ink-3 sobre blanco da 3,03:1 y falla en texto pequeño; en pantalla, notas, fuentes y pies de figura van en texto-2 (ink-2, 6,99:1). El pie corrido global conserva texto-3: es navegación, no la condición de una cifra. MÓVIL: el pie parte marca y número en dos líneas si no caben. SOBRE ÉBANO: nota a texto-2 (blanco al 78 %); pie a texto-3; filete sobre ébano. */ .iu-nota { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--tracking-note); line-height: var(--leading-note); color: var(--iu-texto-2); margin-top: var(--space-3); max-width: 110ch; } .iu-nota strong { color: var(--iu-texto-2); } .iu-pie { background: var(--iu-fondo); color: var(--iu-texto-3); padding-block: var(--space-6) var(--space-8); } .iu-pie__linea { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid var(--iu-filete); padding-top: var(--space-3); } .iu-pie__linea .wm { font-size: 1.25em; letter-spacing: 0; color: var(--iu-texto-2); } .iu-pie__numero { color: var(--color-crimson); font-weight: 700; } /* ------------------------------------------------------------------ 06 banda memo: .band (fondo carmesí, texto ÉBANO, mono 700 7,4 pt .14em mayúsculas) y .band.ebony (fondo ébano, texto blanco). MÓVIL: la banda en línea (--en-linea) nunca supera el ancho y parte su texto. SOBRE ÉBANO: la carmesí no cambia; --ebano se invierte a fondo blanco con texto ébano para no desaparecer. */ .iu-banda { display: block; background: var(--color-crimson); color: var(--color-ebony); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-band); text-transform: uppercase; line-height: 1.35; padding: 9px 12px; } .iu-banda--en-linea { display: inline-block; max-width: 100%; } .iu-banda--ebano { background: var(--color-ebony); color: var(--color-white); } .iu-seccion-oscura .iu-banda--ebano, .iu-portada .iu-banda--ebano { background: var(--color-white); color: var(--color-ebony); } /* ------------------------------------------------------------------ 07 cifras memo: .stats (.c2 .c3 .c4) con filete de 2 px ébano arriba; .stat con filete inferior de 1 px y divisor vertical de 1 px; .n display 30 pt, interlínea .95, tracking -.01em (.red en carmesí); .l mono 6,8 pt .08em mayúsculas ink-2. Variante --acento: filete superior carmesí (páginas 10, 13, 14, 18 y 19 del PDF). MÓVIL: --2 y --4 a dos columnas; --3 a una. Escritorio: --3 y --4 en su número. SOBRE ÉBANO: filete superior blanco (carmesí en --acento), divisores sobre ébano, etiqueta a texto-2. */ .iu-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--iu-filete-grupo); } .iu-cifras--3 { grid-template-columns: minmax(0, 1fr); } .iu-cifras--acento { border-top-color: var(--color-crimson); } .iu-cifra { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--iu-filete); min-width: 0; } .iu-cifras:not(.iu-cifras--3) > .iu-cifra:nth-child(2n) { padding-left: var(--space-4); border-left: 1px solid var(--iu-filete); } .iu-cifra__numero { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: var(--iu-texto); white-space: nowrap; font-variant-numeric: tabular-nums; } .iu-cifra__numero--rojo { color: var(--color-crimson); } .iu-cifra__etiqueta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--iu-texto-2); margin-top: 6px; line-height: 1.35; } @media (min-width: 40em) { .iu-cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iu-cifras--3 > .iu-cifra:not(:nth-child(3n+1)) { padding-left: var(--space-4); border-left: 1px solid var(--iu-filete); } } @media (min-width: 64em) { .iu-cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .iu-cifras--4 > .iu-cifra:nth-child(2n) { padding-left: 0; border-left: 0; } .iu-cifras--4 > .iu-cifra:not(:nth-child(4n+1)) { padding-left: var(--space-4); border-left: 1px solid var(--iu-filete); } } /* dato en línea (memo .ig-dato): número grande + texto serif a la derecha. El número va a unos 0,73 de la cifra de impacto, como en el memorando (.ig-dato .n 22 pt, memo-a4.css línea 252, frente a .stat .n 30 pt). MÓVIL: igual; el texto parte en varias líneas junto al número. */ .iu-dato { display: flex; align-items: center; gap: var(--space-3); } .iu-dato__numero { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1; white-space: nowrap; color: var(--iu-texto); } .iu-dato__numero--rojo { color: var(--color-crimson); } .iu-dato__texto { font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.3; color: var(--iu-texto); } /* ------------------------------------------------------------------ 08 tabla memo: table (8,6 pt, 1,32), th (mono 700 6,6 pt .1em mayúsculas, BLANCO sobre ÉBANO), td (filete inferior de 1 px ink-4), td.k (clave mono 700 carmesí), .num (a la derecha, cifras tabulares), tr.tot (filete superior 2 px ébano y negrita), tr.hl (fondo carmesí al 10 %), table.compact. MÓVIL: dos colapsos, a elegir por tabla: .iu-tabla-marco la tabla conserva su forma y se desplaza DENTRO de su marco (tablas numéricas anchas: años, escenarios). La página no desborda. .iu-tabla--apilable cada fila pasa a bloque y cada celda muestra su cabecera desde data-etiqueta="...". Para tablas de texto. SOBRE ÉBANO: la cabecera pasa a fondo transparente, texto blanco, filete superior blanco de 2 px e inferior sobre ébano; la fila destacada sube al 22 % de carmesí para seguir viéndose. */ .iu-tabla-marco { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .iu-tabla { width: 100%; border-collapse: collapse; font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.35; color: var(--iu-texto); margin: var(--space-2) 0 var(--space-1); } .iu-tabla th { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700; letter-spacing: var(--tracking-table-head); text-transform: uppercase; text-align: left; color: var(--color-white); background: var(--color-ebony); padding: 8px 10px; vertical-align: bottom; line-height: 1.3; } .iu-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--iu-filete); vertical-align: top; } .iu-tabla .iu-clave { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-crimson); white-space: nowrap; } .iu-tabla .iu-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .iu-tabla .iu-fila-total td { border-top: 2px solid var(--iu-filete-grupo); font-weight: 700; } .iu-tabla .iu-fila-destacada td { background: var(--color-crimson-soft); } .iu-tabla--compacta td { padding: 6px 8px; } .iu-tabla--compacta th { padding: 6px 8px; } .iu-tabla--ancha { min-width: 46rem; } .iu-tabla .iu-rot { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; } .iu-tabla .iu-rot .wm { font-size: 1.35em; letter-spacing: 0; } .iu-seccion-oscura .iu-tabla th { background: transparent; color: var(--color-white); border-top: 2px solid var(--color-white); border-bottom: 1px solid var(--color-rule-on-dark); } .iu-seccion-oscura .iu-tabla .iu-fila-destacada td { background: color-mix(in srgb, var(--color-crimson) 22%, transparent); } @media (max-width: 39.99em) { .iu-tabla--apilable, .iu-tabla--apilable tbody, .iu-tabla--apilable tr, .iu-tabla--apilable td { display: block; width: 100%; } .iu-tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .iu-tabla--apilable { border-top: 2px solid var(--iu-filete-grupo); } .iu-tabla--apilable tr { border-bottom: 1px solid var(--iu-filete); padding: var(--space-2) 0; } .iu-tabla--apilable td { border-bottom: 0; padding: 3px 0; text-align: left; white-space: normal; } .iu-tabla--apilable td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700; letter-spacing: var(--tracking-table-head); text-transform: uppercase; color: var(--iu-texto-2); margin-bottom: 2px; } .iu-tabla--apilable .iu-num { text-align: left; } .iu-tabla--apilable .iu-fila-total { border-top: 2px solid var(--iu-filete-grupo); } .iu-tabla--apilable .iu-fila-total td { border-top: 0; } .iu-tabla--apilable .iu-fila-destacada { background: var(--color-crimson-soft); padding-inline: var(--space-2); } .iu-tabla--apilable .iu-fila-destacada td { background: transparent; } } /* ------------------------------------------------------------------ 09 tarjeta memo: .card (filete superior 2 px ébano; .tag mono 700 carmesí; .tt serif 700 11 pt; p 8,6 pt; .pay mono 6,9 pt con filete superior de 1 px). Variante --acento: filete superior carmesí (cierre del memorando). MÓVIL: .iu-tarjetas a una columna; dos en tablet; su número en escritorio. SOBRE ÉBANO: filete superior blanco (carmesí en --acento); título blanco; texto a texto-2. */ .iu-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); } @media (min-width: 40em) { .iu-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .iu-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iu-tarjetas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .iu-tarjeta { border-top: 2px solid var(--iu-filete-grupo); padding-top: var(--space-3); color: var(--iu-texto); } .iu-tarjeta--acento { border-top-color: var(--color-crimson); } .iu-tarjeta__etiqueta { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-crimson); line-height: 1.3; } .iu-tarjeta__titulo { font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; line-height: 1.15; margin: 4px 0 6px; color: var(--iu-texto); } .iu-tarjeta__texto { font-size: var(--fs-small); line-height: 1.42; color: var(--iu-texto); } .iu-seccion-oscura .iu-tarjeta__texto { color: var(--iu-texto-2); } .iu-tarjeta__cobro { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .04em; line-height: 1.45; color: var(--iu-texto-2); border-top: 1px solid var(--iu-filete); padding-top: 6px; margin-top: var(--space-2); } /* ------------------------------------------------------------------ 10 lista con + memo: ul.plus (sin viñeta; «+» mono 700 carmesí colgado a 5 mm). MÓVIL: igual; la sangría colgada baja de 1,35 em a 1,1 em. SOBRE ÉBANO: texto blanco, el + sigue carmesí. */ .iu-lista-mas { list-style: none; padding: 0; margin: var(--space-1) 0 var(--space-3); color: var(--iu-texto); } .iu-lista-mas li { position: relative; padding-left: 1.1em; margin-bottom: 6px; } .iu-lista-mas li::before { content: "+"; position: absolute; left: 0; top: -.05em; font-family: var(--font-mono); font-weight: 700; color: var(--color-crimson); } .iu-lista-mas--pequena { font-size: var(--fs-small); line-height: 1.42; } @media (min-width: 40em) { .iu-lista-mas li { padding-left: 1.35em; } } /* ------------------------------------------------------------------ 11 fases (recorrido) memo: .journey (8 columnas, filete superior 2 px ébano, divisores de 1 px); .no display 17 pt carmesí; .nm mono 700 6,4 pt; p 7,4 pt. MÓVIL: lista de una columna con el número a la izquierda y filete inferior; tablet: cuatro columnas (dos filas); escritorio: las ocho en línea. SOBRE ÉBANO: filete superior blanco, divisores sobre ébano. */ .iu-fases { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--iu-filete-grupo); color: var(--iu-texto); } .iu-fase { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--iu-filete); } .iu-fase__numero { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-s); line-height: 1; color: var(--color-crimson); } .iu-fase__nombre { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; margin: 0 0 4px; } .iu-fase__texto { font-size: var(--fs-small); line-height: 1.35; } @media (min-width: 40em) { .iu-fases { grid-template-columns: repeat(4, minmax(0, 1fr)); } .iu-fase { display: block; padding: var(--space-3) var(--space-3) var(--space-4); border-right: 1px solid var(--iu-filete); } .iu-fase:nth-child(4n) { border-right: 0; } .iu-fase__numero { display: block; } .iu-fase__nombre { margin: 6px 0; } } @media (min-width: 64em) { .iu-fases { grid-template-columns: repeat(8, minmax(0, 1fr)); } .iu-fase { border-bottom: 0; padding: var(--space-3) 10px; } .iu-fase:nth-child(4n) { border-right: 1px solid var(--iu-filete); } .iu-fase:last-child { border-right: 0; } .iu-fase__texto { font-size: .875rem; line-height: 1.3; } } /* ------------------------------------------------------------------ 12 comparativa memo: .vs (rejilla 30 mm | 1fr | 1fr, filete superior 2 px ébano, filas con filete de 1 px); .h cabecera mono 700 sobre papel; .h.red cabecera sobre carmesí con texto ébano; .rk rótulo de fila mono 700 ink-2. Estructura: .iu-comparativa > .iu-comparativa__fila > celdas (__rotulo, __hoy, __propuesta); la primera fila lleva --cabecera. MÓVIL: cada fila se apila: el rótulo arriba y cada valor precedido de su columna (data-etiqueta); la propuesta se marca con un filete carmesí a la izquierda. La fila de cabecera queda solo para lectores de pantalla. SOBRE ÉBANO: la cabecera «hoy» toma el fondo de grupo (ébano aclarado); la de la propuesta sigue carmesí; filetes sobre ébano. */ .iu-comparativa { border-top: 2px solid var(--iu-filete-grupo); font-size: var(--fs-small); line-height: 1.4; color: var(--iu-texto); } .iu-comparativa__fila { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--iu-filete); padding: var(--space-3) 0; gap: var(--space-2); } .iu-comparativa__fila > * { min-width: 0; } .iu-comparativa__fila--cabecera { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .iu-comparativa__cabecera { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700; letter-spacing: var(--tracking-table-head); text-transform: uppercase; background: var(--iu-fondo-grupo); line-height: 1.3; } .iu-comparativa__cabecera--vacia { background: transparent; } .iu-comparativa__cabecera--propuesta { background: var(--color-crimson); color: var(--color-ebony); } .iu-comparativa__cabecera .wm { font-size: 1.3em; letter-spacing: 0; } /* La marca sobre fondo carmesí: la «i» carmesí desaparecería sobre su propio color, así que pasa a ébano, como todo texto sobre rojo (guía §2.4 y §3.5). */ .iu-comparativa__cabecera--propuesta .wm .i, .iu-banda:not(.iu-banda--ebano) .wm .i { color: var(--color-ebony); } .iu-comparativa__rotulo { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iu-texto-2); } .iu-comparativa__hoy[data-etiqueta]::before, .iu-comparativa__propuesta[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--tracking-table-head); text-transform: uppercase; color: var(--iu-texto-2); margin-bottom: 2px; } .iu-comparativa__propuesta { border-left: 3px solid var(--color-crimson); padding-left: var(--space-3); } @media (min-width: 40em) { .iu-comparativa__fila { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr); padding: 0; gap: 0; } .iu-comparativa__fila > * { padding: 8px 10px; } .iu-comparativa__fila > .iu-comparativa__rotulo { padding-left: 0; } .iu-comparativa__fila--cabecera { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; } .iu-comparativa__hoy[data-etiqueta]::before, .iu-comparativa__propuesta[data-etiqueta]::before { content: none; } .iu-comparativa__propuesta { border-left: 0; } } /* ------------------------------------------------------------------ 13 cita memo: .quote (serif 700 17 pt, 1,18, tracking -.01em, filete IZQUIERDO de 3 px carmesí, sangría de 5 mm). MÓVIL: el cuerpo baja por clamp(); el filete se mantiene. SOBRE ÉBANO: texto blanco, filete carmesí. */ .iu-cita { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 1.875rem); line-height: 1.2; letter-spacing: -.01em; color: var(--iu-texto); border-left: 3px solid var(--color-crimson); padding-left: var(--space-5); margin: var(--space-6) 0; } /* la cita grande ocupa el ancho del contenedor (memo p. 02: dos líneas a todo el ancho); la pequeña, la de columna, se limita a 46ch */ .iu-cita--pequena { font-size: clamp(1.125rem, 1.6vw, 1.375rem); max-width: 46ch; } /* recuadro de salvedad (memo p. 14: «Proyectos viables · no medible todavía»): filete discontinuo de 1,5 px, título mono 700. Nombra lo que NO se afirma. MÓVIL: igual, con menos relleno lateral. SOBRE ÉBANO: el filete pasa a blanco. */ .iu-recuadro { border: 1.5px dashed var(--iu-filete-grupo); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); color: var(--iu-texto); } .iu-recuadro__titulo { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; } @media (min-width: 40em) { .iu-recuadro { padding: var(--space-3) var(--space-5); } } /* ------------------------------------------------------------------ 14 figura memo: .fig img (ancho completo), .fig.banda / .alta / .baja (alto fijo con object-fit), figcaption mono 6,3 pt .04em ink-3 con en ébano. REGLA DE IMAGEN: el problema en blanco y negro (--problema aplica grayscale), la propuesta en color (--propuesta prohíbe cualquier filtro). MÓVIL: --banda pasa de 19:5 a 16:9 para no quedar en una tira; .iu-figuras a una columna. CONTRASTE: el pie va en texto-2 (el memorando usa ink-3; ver bloque 05). SOBRE ÉBANO: el pie a texto-2 y su en blanco. */ .iu-figura { margin: 0; } .iu-figura img { display: block; width: 100%; height: auto; } .iu-figura--banda img { aspect-ratio: 16 / 9; object-fit: cover; } .iu-figura--alta img { aspect-ratio: 5 / 4; object-fit: cover; } .iu-figura--baja img { aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 40em) { .iu-figura--banda img { aspect-ratio: 19 / 5; } .iu-figura--baja img { aspect-ratio: 2 / 1; } } .iu-figura--problema img { filter: grayscale(1); } .iu-figura--propuesta img { filter: none; } .iu-figura__pie { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .04em; line-height: 1.45; color: var(--iu-texto-2); margin-top: 6px; } .iu-figura__pie b { color: var(--iu-texto); font-weight: 700; } .iu-seccion-oscura .iu-figura__pie { color: var(--iu-texto-2); } .iu-figuras { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-4); } @media (min-width: 40em) { .iu-figuras--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iu-figuras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .iu-credito { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .12em; text-transform: uppercase; color: var(--color-paper-on-dark-3); } /* ------------------------------------------------------------------ 15 sección oscura memo: .page.dark (fondo ébano, texto blanco) y .page.paper (papel: .iu-seccion-papel). Redefine las variables de contexto (bloque 00): todo componente dentro pasa a su estado sobre ébano. Admite foto de fondo velada con .iu-seccion-oscura__foto (receta del cierre del memorando: velo de 4 paradas). Como en el A4 (112 de 297 mm, un 38 %), la foto ocupa el 40 % inferior: el titular, la bajada y las tarjetas van sobre ébano plano y la foto entra por debajo, con el velo del memorando (ébano pleno, 55 % a 35, 45 % a 70 y 85 % al pie). MÓVIL: igual que .iu-seccion; la foto ocupa el mismo 40 % inferior. */ .iu-seccion-oscura { position: relative; isolation: isolate; background: var(--color-ebony); color: var(--color-white); overflow: hidden; } .iu-seccion-oscura__foto { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; } .iu-seccion-oscura__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .iu-seccion-oscura__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-ebony) 0%, color-mix(in srgb, var(--color-ebony) 55%, transparent) 35%, color-mix(in srgb, var(--color-ebony) 45%, transparent) 70%, color-mix(in srgb, var(--color-ebony) 85%, transparent) 100%); } /* cifra del cierre (memo p. 23): rótulo mono ARRIBA, cifra display y unidad mono en caja normal DEBAJO. Se usa dentro de .iu-cifras:
Tramo 1 · ahora

1.200 M
COP · base, piloto y primer ingreso
*/ .iu-cifra__rotulo { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-band); text-transform: uppercase; color: var(--iu-texto-2); margin-bottom: 6px; line-height: 1.35; } .iu-cifra--cierre .iu-cifra__numero { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; } .iu-cifra__unidad { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--iu-texto-2); margin-top: 6px; line-height: 1.35; } /* ------------------------------------------------------------------ 16 portada memo: .cover (ébano; marca a 44 pt; lema mono .24em; h1.big 64 pt con interlínea .9 y carmesí; bajada; banda; .grid de 12 columnas con celdas .on carmesí y .lo veladas; .meta mono .14em; .foto del barrio en blanco y negro bajo velo ébano de 4 paradas; .credito). Estructura: .iu-portada > .iu-portada__fondo(img) + .iu-contenedor.iu-portada__contenido Como en el A4 (138 de 297 mm, un 46 %), en escritorio la foto ocupa el 46 % inferior: el titular y la bajada van sobre ébano plano. MÓVIL: alto mínimo de una pantalla (100svh, con tope de 64rem en pantallas muy altas); la foto ocupa el 55 % inferior; la rejilla conserva sus 12 columnas con celdas de 14 px; la fila meta se apila. SOBRE ÉBANO: es su estado único (no tiene versión clara). */ .iu-portada { position: relative; isolation: isolate; overflow: hidden; background: var(--color-ebony); color: var(--color-white); min-height: min(100vh, 64rem); min-height: min(100svh, 64rem); display: flex; flex-direction: column; } .iu-portada__fondo { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: -1; } .iu-portada__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } .iu-portada__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-ebony) 0%, color-mix(in srgb, var(--color-ebony) 62%, transparent) 30%, color-mix(in srgb, var(--color-ebony) 38%, transparent) 62%, color-mix(in srgb, var(--color-ebony) 78%, transparent) 100%); } .iu-portada__contenido { flex: 1; display: flex; flex-direction: column; padding-block: var(--space-12) var(--space-8); } .iu-portada__lema { font-family: var(--font-mono); font-size: var(--fs-kicker); letter-spacing: var(--tracking-tagline); text-transform: uppercase; color: var(--color-paper-on-dark-2); margin-top: var(--space-3); line-height: 1.5; } .iu-portada .iu-titular--portada { color: var(--color-white); margin: var(--space-16) 0 var(--space-6); } .iu-portada .iu-bajada { color: var(--color-paper-on-dark-2); max-width: 44em; } .iu-portada__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: var(--space-12); } .iu-celda { display: block; height: 14px; border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent); } .iu-celda--on { background: var(--color-crimson); border-color: var(--color-crimson); } .iu-celda--tenue { background: color-mix(in srgb, var(--color-white) 14%, transparent); } .iu-portada__credito { text-align: right; margin-top: var(--space-2); } .iu-portada__meta { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-band); text-transform: uppercase; color: var(--color-paper-on-dark-3); } .iu-portada__meta .iu-minusculas { text-transform: none; letter-spacing: .06em; } @media (min-width: 40em) { .iu-celda { height: clamp(16px, 2.4vw, 28px); } .iu-portada__rejilla { gap: 6px; } .iu-portada__meta { flex-direction: row; justify-content: space-between; } } @media (min-width: 64em) { .iu-portada__fondo { height: 46%; } .iu-portada__contenido { padding-block: var(--space-16) var(--space-10); } .iu-portada .iu-titular--portada { margin-top: var(--space-24); } } /* ------------------------------------------------------------------ 17 visual a sangre memo: .page.visual (foto a toda página; velo ébano casi nulo hasta el 38 % y ébano pleno al 88 %; texto abajo: kicker, titular blanco con carmesí, bajada al 86 %, crédito de imagen). Es PROPUESTA: la foto va en color. MÓVIL: alto mínimo de 36rem; el velo empieza antes (26 %) porque el texto ocupa más alto de pantalla. SOBRE ÉBANO: es su estado único. */ .iu-visual-a-sangre { position: relative; isolation: isolate; overflow: hidden; background: var(--color-ebony); color: var(--color-white); min-height: 36rem; display: flex; align-items: flex-end; } .iu-visual-a-sangre__foto { position: absolute; inset: 0; z-index: -1; } .iu-visual-a-sangre__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .iu-visual-a-sangre__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-ebony) 10%, transparent) 0%, color-mix(in srgb, var(--color-ebony) 5%, transparent) 26%, color-mix(in srgb, var(--color-ebony) 78%, transparent) 52%, var(--color-ebony) 80%); } .iu-visual-a-sangre__texto { padding-block: var(--space-16) var(--space-12); } .iu-visual-a-sangre .iu-titular { color: var(--color-white); } .iu-visual-a-sangre .iu-bajada { color: color-mix(in srgb, var(--color-white) 86%, transparent); max-width: 60ch; } @media (min-width: 64em) { .iu-visual-a-sangre { min-height: clamp(40rem, 92vh, 62rem); } .iu-visual-a-sangre__foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-ebony) 10%, transparent) 0%, color-mix(in srgb, var(--color-ebony) 5%, transparent) 38%, color-mix(in srgb, var(--color-ebony) 78%, transparent) 64%, var(--color-ebony) 88%); } } /* ------------------------------------------------------------------ 18 embudo memo: .fun / .fr / .ft (cifra display 14 pt + texto serif 9 pt + meta mono 6,6 pt a la derecha en ink-3) / .fbw (pista de 3,4 mm en papel aclarado) / .fb (barra ébano) / .fb.lt (techo en plata). El último paso va en carmesí con su techo en rosa (--color-iso-public-extra). Lo pinta embudo() de componentes/iurbans-graficos.js. MÓVIL: el texto de cada paso parte en dos líneas si hace falta y la meta cae a la derecha de la segunda; la pista conserva el ancho completo. SOBRE ÉBANO: pista blanca al 9 %, barra blanca, techo blanco al 38 %; el paso destacado sigue en carmesí. */ .iu-embudo { display: flex; flex-direction: column; gap: var(--space-4); color: var(--iu-texto); } .iu-embudo__leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--iu-texto-2); list-style: none; padding: 0; margin: 0; } .iu-embudo__leyenda li { display: inline-flex; align-items: center; gap: 6px; } .iu-embudo__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .iu-embudo__fila { display: flex; flex-direction: column; gap: 5px; } .iu-embudo__texto { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; font-size: var(--fs-small); line-height: 1.25; } .iu-embudo__cifra { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1; letter-spacing: .01em; } .iu-embudo__cifra--rojo { color: var(--color-crimson); } .iu-embudo__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--iu-texto-2); white-space: nowrap; } .iu-embudo__pista { position: relative; height: 13px; background: var(--iu-pista); overflow: hidden; } .iu-embudo__barra { position: absolute; left: 0; top: 0; height: 100%; background: var(--iu-texto); transform-origin: left center; } .iu-embudo__barra--techo { background: var(--iu-techo); } .iu-embudo__barra--rojo { background: var(--color-crimson); } .iu-embudo__barra--techo-rojo { background: var(--color-iso-public-extra); } /* muestra de color de leyenda (embudo y apilada) */ .iu-muestra-leyenda { display: inline-block; flex: none; width: 16px; height: 11px; background: var(--iu-texto); } .iu-muestra-leyenda--techo { background: var(--iu-techo); } .iu-muestra-leyenda--rojo { background: var(--color-crimson); } .iu-muestra-leyenda--ebano { background: var(--color-ebony); } .iu-muestra-leyenda--plata { background: var(--color-silver); } .iu-muestra-leyenda--papel { background: var(--color-paper); } .iu-seccion-oscura .iu-muestra-leyenda--ebano { background: var(--color-white); } /* ------------------------------------------------------------------ 19 barras (SVG) memo: gráfico de la página 18 del PDF: ingreso (ébano) y EBITDA (carmesí) por año; los negativos BAJO el eje; cifras display 700; años y rótulos en mono. Sin degradados. Lo pinta barras() de componentes/iurbans-graficos.js, que entrega DOS SVG dentro de la misma figura. MÓVIL: se muestra .iu-barras__horizontal (un año por fila, barras horizontales, los negativos a la izquierda del eje del cero); desde tablet se muestra .iu-barras__vertical (el gráfico del memorando). SOBRE ÉBANO: barras de ingreso, eje, cifras y años pasan a blanco; EBITDA sigue carmesí. */ .iu-barras { margin: 0; color: var(--iu-texto); max-width: 56rem; } /* el tope de 56rem mantiene la proporción del memorando: sus cifras quedan al cuerpo del texto, no por encima. Si el gráfico va con su tabla de datos (memo p. 18), los dos van dentro de .iu-bloque-grafico, que aplica el mismo tope a ambos para que queden alineados al mismo ancho. */ .iu-bloque-grafico { max-width: 56rem; } .iu-bloque-grafico .iu-barras { max-width: none; } .iu-barras svg { display: block; width: 100%; height: auto; overflow: visible; } .iu-barras .iu-barras__vertical { display: none; } @media (min-width: 40em) { .iu-barras .iu-barras__vertical { display: block; } .iu-barras .iu-barras__horizontal { display: none; } } .iu-g-ingreso { fill: var(--iu-texto); } .iu-g-ebitda { fill: var(--color-crimson); } .iu-g-eje { stroke: var(--iu-texto); } .iu-g-valor { font-family: var(--font-display); font-weight: 700; fill: var(--iu-texto); } .iu-g-valor--rojo { fill: var(--color-crimson); } .iu-g-mono { font-family: var(--font-mono); fill: var(--iu-texto); } .iu-g-mono--tenue { fill: var(--iu-texto-2); } /* nota y título del gráfico: misma regla de contraste que .iu-nota */ /* ------------------------------------------------------------------ 20 apilada (SVG) memo: barra única partida de la página 11 del PDF («La anatomía de 30 meses»: carmesí | ébano | plata, cifra display dentro, rótulo mono) y la partición de la brecha de la página 10. La pinta apilada() de componentes/iurbans-graficos.js: la etiqueta va DENTRO solo si el tramo cabe; si no, queda en la leyenda. Proporción del memorando: rótulo mono a 7/26 de la cifra (6,5 frente a 24 en el viewBox), en negrita solo en el tramo carmesí. MÓVIL: la barra escala con el ancho (viewBox fijo, la decisión de «cabe» no cambia); el nombre mono de dentro del tramo se oculta (a 390 px quedaría en 4 px) y queda la cifra; la leyenda, que siempre nombra cada tramo, pasa a una columna. SOBRE ÉBANO: el tramo ébano pasa a blanco con su texto en ébano. */ .iu-apilada { margin: 0; color: var(--iu-texto); } .iu-apilada svg { display: block; width: 100%; height: auto; border-top: 2px solid var(--iu-filete-grupo); } .iu-g-tono--rojo { fill: var(--color-crimson); } .iu-g-tono--ebano { fill: var(--color-ebony); } .iu-g-tono--plata { fill: var(--color-silver); } .iu-g-tono--papel { fill: var(--color-paper); } .iu-g-tramo-texto { fill: var(--color-ebony); } .iu-g-tramo-texto--ebano { fill: var(--color-white); } .iu-g-tramo-texto.iu-g-valor { font-family: var(--font-display); font-weight: 700; } .iu-g-tramo-texto.iu-g-mono { font-family: var(--font-mono); } .iu-seccion-oscura .iu-g-tono--ebano { fill: var(--color-white); } .iu-seccion-oscura .iu-g-tramo-texto--ebano { fill: var(--color-ebony); } @media (max-width: 39.99em) { .iu-apilada .iu-g-tramo-texto.iu-g-mono { display: none; } } .iu-apilada__leyenda { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px var(--space-6); } @media (min-width: 40em) { .iu-apilada__leyenda { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } .iu-apilada__item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; border-bottom: 1px solid var(--iu-filete); padding-bottom: 6px; font-size: var(--fs-small); line-height: 1.3; } .iu-apilada__item .iu-muestra-leyenda { align-self: center; } .iu-apilada__valor { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1; white-space: nowrap; } .iu-apilada__detalle { display: block; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--iu-texto-2); margin-top: 2px; } /* ------------------------------------------------------------------ 21 infografía de tres estados memo: página 06 del PDF. .ig-datos (dos cifras con texto), .ig-panels3 (tres paneles de 56 mm), .ig-band (mono 700 sobre papel; .hoy blanco con filete ébano; .ebony con la marca), .ig-sub (mono 5,8 pt), .ig-draw3 (dibujo isométrico), .ig-call3 (llamadas con marcador cuadrado; el de espacio público en carmesí; cada fila de llamada tiene alto fijo, 7,6 mm, para que sus filetes crucen los tres paneles a la misma altura), .ig-legend (cuatro columnas, filete superior ébano), .ig-table y .ig-notes. El dibujo se sirve como desde graficos/infografia-manzana/sin-numeros/. MARCADOR: con los dibujos sin números, .iu-marcador va VACÍO y funciona como código de color (ébano; carmesí el de espacio público). Solo con los dibujos de con-numeros/ lleva su número del 1 al 5, que apunta al dibujo. El filete de la banda «hoy» es un borde de 1 px (la hoja A4 lo simulaba con una sombra interior: aquí no hay sombras). MÓVIL: los tres paneles se apilan (hoy → lote a lote → manzana); la leyenda baja a una columna (dos en tablet, cuatro en escritorio); la tabla usa .iu-tabla--apilable. SOBRE ÉBANO: el dibujo se asienta en una placa blanca (sus linderos son ébano); la banda «hoy» cambia su filete a blanco; la banda iURBANS se invierte a blanco con texto ébano; las muestras de la leyenda van sobre blanco. */ .iu-infografia { color: var(--iu-texto); } .iu-infografia__datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-8); margin: var(--space-2) 0 var(--space-6); } .iu-infografia__fuente { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .06em; text-transform: uppercase; color: var(--iu-texto-2); } @media (min-width: 40em) { .iu-infografia__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iu-infografia__fuente { grid-column: 1 / -1; } } .iu-infografia__paneles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } @media (min-width: 64em) { .iu-infografia__paneles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } } .iu-infografia__panel { min-width: 0; } .iu-infografia__banda { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .5em; min-height: 2.5rem; padding: 6px 12px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; background: var(--color-paper); color: var(--color-ebony); border: 1px solid transparent; line-height: 1.25; } .iu-infografia__banda--hoy { background: var(--color-white); border-color: var(--color-ebony); } .iu-infografia__banda--iurbans { background: var(--color-ebony); color: var(--color-white); } .iu-infografia__banda .wm { font-size: 1.2em; letter-spacing: 0; } .iu-infografia__sub { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .04em; text-transform: uppercase; color: var(--iu-texto-2); margin: 8px 0 4px; line-height: 1.35; min-height: 2.7em; } .iu-infografia__dibujo { margin: 0; } .iu-infografia__dibujo img { display: block; width: 100%; height: auto; aspect-ratio: 56 / 48; } .iu-infografia__llamadas { list-style: none; padding: 0; margin: var(--space-2) 0 0; } .iu-llamada { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 2.9rem; padding: 6px 0; border-top: 1px solid var(--iu-filete); font-size: var(--fs-small); line-height: 1.3; } .iu-llamada b { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--iu-texto-2); } /* en escritorio los tres paneles van en fila: alto fijo para dos líneas (2 × 15 px × 1,3 + relleno), igual en todos, y los filetes alinean */ @media (min-width: 64em) { .iu-llamada { min-height: 3.25rem; } } .iu-marcador { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; background: var(--iu-texto); color: var(--iu-fondo); font-family: var(--font-mono); font-weight: 700; font-size: 9px; line-height: 1; } .iu-marcador--rojo { background: var(--color-crimson); color: var(--color-ebony); } .iu-infografia__leyenda { list-style: none; padding: var(--space-3) 0 0; margin: var(--space-6) 0 0; border-top: 1px solid var(--iu-filete-grupo); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-5); } @media (min-width: 40em) { .iu-infografia__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .iu-infografia__leyenda { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .iu-leyenda__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .03em; line-height: 1.3; color: var(--iu-texto-2); } .iu-leyenda__item svg { flex: none; width: 28px; height: 14px; } /* muestras de la leyenda: svg de 28 x 14 con estas clases de relleno y trazo */ .iu-iso-cesion { fill: var(--color-iso-public); } .iu-iso-patio { fill: var(--color-iso-public-extra); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-compensada { fill: none; stroke: var(--color-crimson); stroke-width: 1.1; stroke-dasharray: 5 3.2; } .iu-iso-altura { fill: none; stroke: var(--color-iso-line); stroke-width: .8; stroke-dasharray: 4 2.8; } .iu-iso-techo { fill: var(--color-iso-top); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-lado { fill: var(--color-iso-side-light); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-sombra { fill: var(--color-iso-side-dark); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-zocalo { fill: var(--color-ebony); } .iu-iso-suelo { fill: var(--color-iso-ground); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-conservada { fill: var(--color-white); stroke: var(--color-ebony); stroke-width: .85; } .iu-iso-trama { stroke: var(--color-ebony); stroke-width: .4; } .iu-iso-tronco { stroke: var(--color-ebony); stroke-width: .75; } .iu-iso-copa { fill: var(--color-white); stroke: var(--color-ebony); stroke-width: .5; } .iu-iso-lindero { stroke: var(--color-iso-side-dark); stroke-width: .6; } .iu-seccion-oscura .iu-infografia__dibujo { background: var(--color-white); padding: var(--space-2); } .iu-seccion-oscura .iu-infografia__banda--hoy { border-color: var(--color-white); background: transparent; color: var(--color-white); } .iu-seccion-oscura .iu-infografia__banda--iurbans { background: var(--color-white); color: var(--color-ebony); } .iu-seccion-oscura .iu-leyenda__item svg { background: var(--color-white); } /* ------------------------------------------------------------------ 22 ecosistema memo: .eco (nodos con borde de 1,5 px ébano y rótulo mono carmesí; núcleo ébano con la marca al centro; líneas finas de nodo a núcleo; sin iconos). MÓVIL: el núcleo va primero y los cuatro nodos debajo en una columna (dos en tablet); las líneas (.iu-ecosistema__lineas) solo existen en escritorio. SOBRE ÉBANO: nodos con borde blanco y fondo transparente; el núcleo se invierte a blanco con URBANS en ébano. */ .iu-ecosistema { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: var(--space-4) 0; color: var(--iu-texto); } .iu-ecosistema__lineas { display: none; } .iu-ecosistema__nodo { border: 1.5px solid var(--iu-filete-grupo); background: var(--iu-fondo); padding: 8px 10px; font-size: var(--fs-small); line-height: 1.3; } .iu-ecosistema__nodo b { display: block; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--color-crimson); margin-bottom: 3px; } .iu-ecosistema__nucleo { order: -1; background: var(--color-ebony); color: var(--color-white); padding: var(--space-4); text-align: center; } .iu-ecosistema__nucleo .wm { font-size: 2rem; } .iu-ecosistema__nucleo small { display: block; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--color-paper-on-dark-2); margin-top: 4px; } @media (min-width: 40em) { .iu-ecosistema { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iu-ecosistema__nucleo { grid-column: 1 / -1; } } /* Escritorio: nodos en las cuatro esquinas y núcleo al centro. Las líneas van del centro de cada nodo al centro del diagrama (viewBox 0-100, sin deformar el trazo): nodos y núcleo tienen fondo opaco y las tapan, así que solo se ven en el hueco, sea cual sea el alto de cada nodo. */ @media (min-width: 64em) { .iu-ecosistema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto var(--space-16) auto; column-gap: var(--space-4); row-gap: 0; } .iu-ecosistema__lineas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .iu-ecosistema__lineas line { stroke: var(--iu-filete-grupo); stroke-width: 1; vector-effect: non-scaling-stroke; } .iu-ecosistema__nodo, .iu-ecosistema__nucleo { position: relative; z-index: 1; } .iu-ecosistema__nodo:nth-of-type(1) { grid-column: 1; grid-row: 1; } .iu-ecosistema__nodo:nth-of-type(2) { grid-column: 3; grid-row: 1; } .iu-ecosistema__nodo:nth-of-type(3) { grid-column: 1; grid-row: 3; } .iu-ecosistema__nodo:nth-of-type(4) { grid-column: 3; grid-row: 3; } .iu-ecosistema__nucleo { grid-column: 2; grid-row: 1 / 4; align-self: center; order: 0; } } .iu-seccion-oscura .iu-ecosistema__nodo { background: var(--color-ebony); } .iu-seccion-oscura .iu-ecosistema__nucleo { background: var(--color-white); color: var(--color-ebony); } .iu-seccion-oscura .iu-ecosistema__nucleo small { color: var(--color-ink-2); } /* ------------------------------------------------------------------ 23 utilidades · movimiento memo: .red, .muted, .small. Movimiento: ninguno por defecto; .iu-animar hace crecer las barras del embudo al cargar. prefers-reduced-motion lo apaga todo. */ .iu-rojo { color: var(--color-crimson); } .iu-tenue { color: var(--iu-texto-3); } .iu-pequeno { font-size: var(--fs-small); line-height: 1.42; } .iu-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; } .iu-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .iu-separador { border: 0; border-top: 1px solid var(--iu-filete); margin: var(--space-8) 0; } @keyframes iu-crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } } .iu-animar .iu-embudo__barra { animation: iu-crecer 700ms cubic-bezier(.2, .7, .2, 1) both; } .iu-animar .iu-embudo__fila:nth-child(2) .iu-embudo__barra { animation-delay: 80ms; } .iu-animar .iu-embudo__fila:nth-child(3) .iu-embudo__barra { animation-delay: 160ms; } .iu-animar .iu-embudo__fila:nth-child(4) .iu-embudo__barra { animation-delay: 240ms; } .iu-animar .iu-embudo__fila:nth-child(5) .iu-embudo__barra { animation-delay: 320ms; } .iu-pagina a { transition: color 150ms ease; } @media (prefers-reduced-motion: reduce) { .iu-pagina *, .iu-pagina *::before, .iu-pagina *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .iu-animar .iu-embudo__barra { animation: none; transform: none; } } @media print { .iu-portada, .iu-visual-a-sangre { min-height: auto; } .iu-barras .iu-barras__vertical { display: block; } .iu-barras .iu-barras__horizontal { display: none; } }