/* mal-ds v1.0.15 · https://una.red/ds/ */ /* ══════════════════════════════════════════════════════════════ MAL DESIGN SYSTEM · v2 https://una.red/ds/mal/mal.css UN SISTEMA, CUATRO TEMAS. Este archivo es todo el sistema: una.red, maldonado.pro, elmercio.com, las apps y los juegos se pintan con el mismo CSS. Lo único que cambia es `data-marca` en el : (nada) MAL la marca: crema cálida, filete, sombra blanda mercio prensa blanco, PT Serif, radio 0, sin sombras apps producto app nativa, controles de 52 px, presión al pulsar juegos juego sombra dura, borde de 2 px, relleno en degradado LOS TEMAS NO CONVIVEN: un documento, un tema, y viste la página entera. Ya no existen /ds/mercio/ ni /ds/apps/ como hojas aparte — sus componentes viven aquí, porque un campo es un campo en cualquier tema. Los alias --em-* y --app-* se resuelven contra los roles, así que el marcado que ya estaba escrito sigue valiendo. Claro y oscuro son OTRO eje: `data-tema="claro|oscuro"`, o nada y manda el sistema operativo. Y `data-ds="invitado"` apaga el reset, para vivir dentro de algo que ya maqueta (WordPress). Tres capas de tokens, la arquitectura de Material: 1 referencia --ref-* paletas, familias y expresión ← lo único que cambia 2 sistema --mal-* roles derivados 3 componentes hablan solo roles TIPOGRAFÍA — tres voces, cada una con su trabajo: Syne SOLO display (h1, h2 grandes, cifras de portada). A tamaño de texto pierde legibilidad: no usar por debajo de ~1.4rem ni para párrafos. Inter subtítulos, cuerpo, interfaz. Todo lo que se lee. JetBrains Mono rótulos, etiquetas, datos. Regla de la casa: espacios alrededor de + y - dentro de clamp()/calc(), o el navegador descarta la declaración entera. ══════════════════════════════════════════════════════════════ */ /* ─── fuentes ─────────────────────────────────────────────── */ @font-face{font-family:"Syne";src:url("../fonts/syne.woff2") format("woff2");font-weight:400 800;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Inter";src:url("../fonts/inter-italic.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap} /* del tema del periódico: no pesan hasta que un tema las pide */ @font-face{font-family:"PT Serif";src:url("../fonts/pt-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"PT Serif";src:url("../fonts/pt-serif-bold-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap} /* PT Serif Caption: el corte óptico para textos pequeños. Solo lo usa el periódico, pero vive aquí para que TODA su tipografía tenga un único dueño. Los seis archivos son los de Google Fonts, subconjunto latin, byte a byte (comprobado por sha256). */ @font-face{font-family:"PT Serif Caption";src:url("../fonts/pt-serif-caption.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"PT Serif Caption";src:url("../fonts/pt-serif-caption-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Montserrat";src:url("../fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-display:swap} /* ─── tokens ──────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════ TOKENS EN TRES CAPAS La arquitectura es la de Material 3; la piel, la de MAL. Lo que hace themeable a un sistema no es su aspecto, es este orden: 1 REFERENCIA las paletas y familias crudas. ES LO ÚNICO QUE CAMBIA POR MARCA. 2 SISTEMA los roles semánticos (`primary`, `on-primary`, `surface`, `outline`…). Nombres estables. 3 COMPONENTES hablan SOLO roles, así que funcionan igual en los cuatro temas sin tocar una regla. CUATRO MARCAS, UN SISTEMA. Se cambian con un atributo en la raíz: periódico producto juegos MAL, por defecto y son ortogonales al claro/oscuro (`data-tema`), así que se combinan: ``. Los nombres de color de la primera época (`--mal-rojo`, `--mal-ink`, `--mal-paper`…) siguen existiendo como ALIAS al pie de esta sección, porque hay páginas que ya los usan. Lo nuevo va en roles: en el tema del periódico `--mal-rojo` es rojo, pero en el de apps es el color de la app, y un token que se llama «rojo» y no es rojo miente. ══════════════════════════════════════════════════════════════ */ :root{ /* ─── 1 · REFERENCIA · MAL (la marca de la casa) ─────────── */ --ref-marca:#D6382B; /* el rojo */ --ref-marca-2:#B52E23; /* su hover */ --ref-marca-txt:#B52E23; /* la versión que sí se lee como texto */ --ref-sobre-marca:#fff; /* lo que va encima del color de marca */ --ref-acento:#1F3BD6; /* acento secundario */ --ref-acento-2:#6B21C8; /* terciario: el punto de EL MERCIO. */ --ref-n0:#F5F2EC; /* lienzo */ --ref-n1:#EBE7DE; /* rebaje */ --ref-n2:#FDFCF9; /* superficie */ --ref-n3:#F3F0E9; /* superficie alterna */ --ref-t0:#191817; /* tinta */ --ref-t1:#54524B; /* secundaria */ --ref-t2:#5C5A53; /* terciaria */ --ref-borde-rgb:20,20,18; /* el color del filete, en RGB para poder graduarlo (el grosor es --ref-borde) */ --ref-display:"Syne",system-ui,-apple-system,sans-serif; --ref-marca-tipo:var(--ref-display); /* la familia del logotipo, si es otra */ --ref-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --ref-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ref-peso-display:800; --ref-tracking:-.04em; /* el display geométrico pide tracking negativo */ /* ── EXPRESIÓN · lo que hace que dos temas no se parezcan aunque compartan componente. No es color: es forma y materia. ── */ --ref-radio:1; /* factor de forma · 0 = a escuadra */ --ref-borde:1px; /* grosor del filete · 0 = sin borde */ --ref-densidad:1; /* aire · <1 compacto, >1 editorial */ --ref-tap:44px; /* altura mínima de un control */ --ref-elev-1:0 2px 8px rgba(0,0,0,.05); /* reposo */ --ref-elev-2:0 8px 28px rgba(0,0,0,.09); /* levantado */ --ref-relleno:var(--ref-n2); /* con qué se llena una superficie */ --ref-relleno-marca:var(--ref-marca); /* …y una superficie de marca */ --ref-campo:var(--ref-n2); /* …y un campo de formulario */ --ref-linea:rgba(var(--ref-borde-rgb),.14); /* color del filete de un contenedor */ --ref-acento-linea:1; /* filetes de acento (citas, avisos): 0 los quita */ --ref-vidrio:none; /* backdrop-filter de las superficies (ningún tema lo usa hoy) */ --ref-vidrio-barra:blur(12px); /* …el de las barras (la cabecera de UNA) */ --ref-relleno-barra:color-mix(in srgb, var(--ref-n0) 84%, transparent); /* con qué se llena una barra */ --ref-fondo:var(--ref-n0); /* el fondo del documento (puede ser degradado) */ --ref-grano:""; /* el grano del fondo · `none` lo quita del todo */ --ref-interlinea:1.6; /* la interlínea del cuerpo */ --ref-salto:translateY(-2px); /* qué hace al pasar por encima */ --ref-presion:scale(.98); /* …y al pulsar */ color-scheme:light dark; } /* ══════════════ LOS ROLES ═════════════════════════════════════ Viven en la raíz, y solo ahí: los temas NO conviven en una misma página. Cada sitio elige el suyo con `data-marca` en el y todo el documento va vestido igual — menús, fondos y componentes. (Hubo una versión con ámbitos de clase `.em`/`.app`/`.juego` para mezclar temas en una página. Se retiró: mezclarlos no es un caso real y obligaba a repetir la lista de roles en cada ámbito, porque una custom property que apunta a otra se computa donde se declara.) */ :root, :root[data-marca]{ --mal-primary:var(--ref-marca); --mal-primary-hover:var(--ref-marca-2); --mal-primary-txt:var(--ref-marca-txt); --mal-on-primary:var(--ref-sobre-marca); --mal-primary-container:color-mix(in srgb, var(--ref-marca) 10%, transparent); --mal-on-primary-container:var(--ref-marca-txt); --mal-secondary:var(--ref-acento); --mal-tertiary:var(--ref-acento-2); --mal-bg:var(--ref-n0); --mal-bg-2:var(--ref-n1); --mal-surface:var(--ref-n2); --mal-surface-alt:var(--ref-n3); --mal-on-surface:var(--ref-t0); --mal-on-surface-2:var(--ref-t1); --mal-on-surface-3:var(--ref-t2); --mal-outline:rgba(var(--ref-borde-rgb), .14); --mal-outline-2:rgba(var(--ref-borde-rgb), .3); --mal-ok:#1F7A3D; --mal-warn:#B45309; --mal-danger:#a8352c; --mal-info:#33618f; /* tipografía · la escala es la misma; cambia la familia */ --mal-display:var(--ref-display); --mal-texto:var(--ref-texto); --mal-mono:var(--ref-mono); /* ── escala tipográfica ─────────────────────────────────── Un paso por nivel, y el paso crece con el tamaño: 1,12 entre h4 y el cuerpo; 1,7 entre el display y el h1. A 1280 px son 17 · 19 · 24 · 34 · 52 · 88. El salto de h2 a h3 valía 2,35 y por eso no había jerarquía: la sección y el subtítulo no se parecían a nada intermedio. `display` es el cartel — la portada, el logotipo, el hero —, NO el h1 de una página cualquiera. */ --mal-t-mini:.75rem; /* fechas, arrobas, lo más pequeño que se lee */ --mal-t-caption:.875rem; /* pies, apoyos, metadatos */ --mal-t-micro:.75rem; /* el rótulo en versalitas (mono, no es texto corrido) */ --mal-t-cuerpo:clamp(1rem, .95rem + .25vw, 1.0625rem); --mal-t-lede:clamp(1.08rem, 1rem + .35vw, 1.3rem); --mal-t-h4:clamp(1.0625rem, 1rem + .2vw, 1.1875rem); --mal-t-h3:clamp(1.25rem, 1.05rem + .6vw, 1.6rem); --mal-t-h2:clamp(1.6rem, 1.25rem + 1.1vw, 2.6rem); --mal-t-h1:clamp(2.2rem, 1.6rem + 2.05vw, 3.6rem); --mal-t-display:clamp(3rem, 1.9rem + 4.5vw, 6.5rem); --mal-t-prosa:var(--mal-t-lede); /* el texto corrido de un artículo */ --mal-t-cita:1.15em; /* la cita, relativa a lo que la rodea */ --ref-cita-estilo:normal; /* la cursiva es editorial: solo el periódico */ --ref-cita-sangria:var(--mal-e4); /* el hueco del filete */ --ref-cita-alto:0; /* …o el de la comilla, si el tema la usa */ --ref-peso-cita:600; /* forma · todo se multiplica por --ref-radio, así que el tema del periódico lo pone a 0 y el sistema entero va a escuadra */ --mal-r:calc(18px * var(--ref-radio)); --mal-r-s:calc(10px * var(--ref-radio)); --mal-r-full:calc(999px * var(--ref-radio)); /* materia · derivada de la expresión del tema */ --mal-borde:var(--ref-borde) solid var(--ref-linea); /* el filo de un contenedor */ --mal-borde-fuerte:var(--ref-borde) solid var(--mal-outline-2); --mal-separador:var(--ref-borde) solid var(--mal-outline); /* la raya entre dos filas */ --mal-acento-linea:calc(3px * var(--ref-acento-linea)); /* el filete de acento */ --mal-campo:var(--ref-campo); --mal-vidrio:var(--ref-vidrio); --mal-vidrio-barra:var(--ref-vidrio-barra); --mal-relleno-barra:var(--ref-relleno-barra); --mal-fondo:var(--ref-fondo); --mal-marca-tipo:var(--ref-marca-tipo); --mal-elev-1:var(--ref-elev-1); --mal-elev-2:var(--ref-elev-2); --mal-relleno:var(--ref-relleno); --mal-relleno-marca:var(--ref-relleno-marca); --mal-tap:var(--ref-tap); --mal-salto:var(--ref-salto); --mal-presion:var(--ref-presion); /* espaciado · escala por densidad */ --mal-e1:calc(4px * var(--ref-densidad)); --mal-e2:calc(8px * var(--ref-densidad)); --mal-e3:calc(12px * var(--ref-densidad)); --mal-e4:calc(16px * var(--ref-densidad)); --mal-e5:calc(24px * var(--ref-densidad)); --mal-e6:calc(32px * var(--ref-densidad)); --mal-e7:calc(48px * var(--ref-densidad)); --mal-e8:calc(64px * var(--ref-densidad)); --mal-sombra:var(--ref-elev-2); --mal-sombra-sm:var(--ref-elev-1); --mal-sombra-md:var(--ref-elev-2); --mal-ease:cubic-bezier(.2,.7,.2,1); --mal-dur:.28s; --mal-ancho:1200px; /* ─── ALIAS heredados · no usar en código nuevo ──────────── */ --mal-paper:var(--mal-surface); --mal-paper-2:var(--mal-surface-alt); --mal-ink:var(--mal-on-surface); --mal-ink-2:var(--mal-on-surface-2); --mal-ink-3:var(--mal-on-surface-3); --mal-line:var(--mal-outline); --mal-line-2:var(--mal-outline-2); --mal-rojo:var(--mal-primary); --mal-rojo-2:var(--mal-primary-hover); --mal-rojo-txt:var(--mal-primary-txt); --mal-sobre-rojo:var(--mal-on-primary); --mal-azul:var(--mal-secondary); --mal-morado:var(--mal-tertiary); --mal-verde:var(--mal-ok); --mal-ambar:var(--mal-warn); } /* ══════════════════ MODO OSCURO · solo la referencia ══════════ */ @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --ref-marca:#EF4F41; --ref-marca-2:#F26A5E; --ref-marca-txt:#F26A5E; --ref-sobre-marca:#151514; --ref-acento:#8AA0FF; --ref-acento-2:#A77BFF; --ref-n0:#151514; --ref-n1:#1D1D1C; --ref-n2:#222220; --ref-n3:#2A2A28; --ref-t0:#ECECEA; --ref-t1:#B3B3AE; --ref-t2:#8D8D87; --ref-borde-rgb:235,235,228; --mal-ok:#57B87A; --mal-warn:#E0A93A; --mal-danger:#f0a9a2; --mal-info:#a9c8ea; --ref-elev-1:0 2px 8px rgba(0,0,0,.3); --ref-elev-2:0 12px 36px rgba(0,0,0,.5); } } :root[data-tema="oscuro"]{ --ref-marca:#EF4F41; --ref-marca-2:#F26A5E; --ref-marca-txt:#F26A5E; --ref-sobre-marca:#151514; --ref-acento:#8AA0FF; --ref-acento-2:#A77BFF; --ref-n0:#151514; --ref-n1:#1D1D1C; --ref-n2:#222220; --ref-n3:#2A2A28; --ref-t0:#ECECEA; --ref-t1:#B3B3AE; --ref-t2:#8D8D87; --ref-borde-rgb:235,235,228; --mal-ok:#57B87A; --mal-warn:#E0A93A; --mal-danger:#f0a9a2; --mal-info:#a9c8ea; --ref-elev-1:0 2px 8px rgba(0,0,0,.3); --ref-elev-2:0 12px 36px rgba(0,0,0,.5); } /* ══════════════════ TEMA · EL MERCIO. ═════════════════════════ Prensa. Copia literal del theme.json del tema en producción: serif de texto, Montserrat en rótulos y ESQUINAS A ESCUADRA (el radio a 0 es deliberado en todo el periódico). */ :root[data-marca="mercio"]{ --ref-marca:#c53b2b; --ref-marca-2:#141414; --ref-marca-txt:#c53b2b; --ref-sobre-marca:#ffffff; --ref-acento:#a6c7f2; --ref-acento-2:#c53b2b; --ref-n0:#ffffff; --ref-n1:#f3f3f3; --ref-n2:#ffffff; --ref-n3:#fafafa; /* base · surface · base · base-2 */ --ref-t0:#141414; --ref-t1:#282828; --ref-t2:#646464; /* contrast · -2 · -3 */ --ref-borde-rgb:20,20,20; --ref-relleno:var(--ref-n1); /* un contenedor es un rectángulo de tono sobre la página blanca */ --ref-display:"PT Serif",Georgia,"Times New Roman",serif; --ref-texto:"PT Serif",Georgia,"Times New Roman",serif; --ref-mono:"Montserrat","Helvetica Neue",Arial,sans-serif; --ref-peso-display:700; --ref-tracking:-.01em; --ref-radio:0; /* a escuadra */ --ref-borde:0px; /* SIN LÍNEAS: la separación la hace el aire */ --ref-grano:none; /* un periódico no lleva textura encima */ --ref-interlinea:1.5; /* la de theme.json */ --ref-vidrio-barra:none; --ref-relleno-barra:var(--ref-n0); /* barra blanca, sin efectos */ --ref-acento-linea:0; /* ni filetes de acento: la cita lleva comilla */ /* Densidad 1, NO 1,35. El aire del periódico no sale de multiplicar la escala: sale de que sus secciones llevan 64 px de padding puestos a mano en cada bloque. Con 1,35 la escala del sistema (4·8·12·16·24· 32·48·64) pasaba a 5,4·10,8·16,2·21,6·32,4·43,2·64,8·86,4 y ningún componente encajaba con el espaciado de WordPress, que usa la escala literal. Este es el número que hace que las dos coincidan. */ --ref-densidad:1; --ref-tap:44px; --ref-elev-1:none; /* SIN SOMBRAS: el papel no flota */ --ref-elev-2:none; --ref-salto:none; /* ni salta al pasar por encima */ --ref-presion:none; --ref-campo:var(--ref-n1); /* un campo es un rectángulo de tono, no un marco */ --ref-marca-tipo:"Montserrat","Helvetica Neue",Arial,sans-serif; /* el logotipo */ --mal-outline:#e6e6e6; --mal-outline-2:#d0d0d0; --mal-comilla:block; /* la cita abre con comilla grande en vez de filete */ /* la escala del tema es de píxeles fijos: nada escala con la pantalla */ /* LA ESCALA REAL DEL PERIÓDICO, copiada del sitio en producción. No son píxeles fijos: elmercio.com hereda la tipografía fluida de twentytwentyfour, así que cada tamaño es un `clamp()` que crece con la pantalla. Estos son los valores que emite WordPress desde `theme.json`, medidos en el sitio vivo — no una aproximación. Es plana a propósito (24 → 22 entre h2 y h3): en prensa la jerarquía la hacen el peso, el aire y el rótulo, no el tamaño. */ --mal-t-mini:11px; --mal-t-micro:11px; --mal-t-caption:14px; /* caption, fijo */ --mal-t-cuerpo:clamp(14px, .875rem + ((1vw - 3.2px) * .417), 18px); --mal-t-lede:20px; --mal-t-h4:clamp(14px, .875rem + ((1vw - 3.2px) * .417), 18px); --mal-t-h3:clamp(14.642px, .915rem + ((1vw - 3.2px) * .766), 22px); --mal-t-h2:clamp(15.747px, .984rem + ((1vw - 3.2px) * .86), 24px); --mal-t-h1:clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.25), 32px); --mal-t-display:clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.663), 40px); --mal-t-cita:clamp(14.642px, .915rem + ((1vw - 3.2px) * .766), 22px); --mal-t-prosa:var(--mal-t-cuerpo); --em-t-badge:9px; --em-t-button:clamp(14px, .875rem + ((1vw - 3.2px) * .208), 16px); --ref-cita-estilo:italic; --ref-peso-cita:400; /* serif en cursiva: la cita de prensa */ --ref-cita-sangria:0; --ref-cita-alto:1.35em; /* sin filete: manda la comilla */ } @media (prefers-color-scheme:dark){ :root[data-marca="mercio"]:not([data-tema="claro"]){ --ref-marca:#e8604f; --ref-marca-txt:#e8604f; --ref-sobre-marca:#141414; --ref-n0:#1a1a1a; --ref-n1:#222222; --ref-n2:#141414; --ref-n3:#1a1a1a; --ref-t0:#f2f2f2; --ref-t1:#d8d8d8; --ref-t2:#a0a0a0; --ref-borde-rgb:242,242,242; --mal-outline:#333333; --mal-outline-2:#454545; } } :root[data-marca="mercio"][data-tema="oscuro"]{ --ref-marca:#e8604f; --ref-marca-txt:#e8604f; --ref-sobre-marca:#141414; --ref-n0:#1a1a1a; --ref-n1:#222222; --ref-n2:#141414; --ref-n3:#1a1a1a; --ref-t0:#f2f2f2; --ref-t1:#d8d8d8; --ref-t2:#a0a0a0; --ref-borde-rgb:242,242,242; --mal-outline:#333333; --mal-outline-2:#454545; } /* ══════════════════ TEMA · APPS ═══════════════════════════════ Producto. Sin display: una app no tiene portada. Inter para todo y el color reservado para la acción. */ :root[data-marca="apps"]{ --ref-marca:#c41e1e; --ref-marca-2:#8b1515; --ref-marca-txt:#c41e1e; --ref-sobre-marca:#ffffff; --ref-acento:#33618f; --ref-acento-2:#1f7a3d; --ref-n0:#f6f5f1; --ref-n1:#edebe4; --ref-n2:#fffefb; --ref-n3:#f6f5f1; --ref-t0:#1b1d1a; --ref-t1:#565b53; --ref-t2:#63685d; --ref-borde-rgb:27,29,26; --ref-display:var(--ref-texto); /* sin tipografía de display */ --ref-peso-display:700; --ref-tracking:-.02em; --ref-radio:1.2; --ref-borde:1px; --ref-densidad:1; --ref-tap:52px; /* el dedo manda: controles grandes */ /* APP NATIVA ACTUAL. Superficies sólidas sobre un fondo agrupado (tarjetas blancas sobre gris cálido), separadores finísimos, y SOLO las barras —la de arriba, la de pestañas, la de acciones, las hojas— son translúcidas y desenfocan lo que pasa debajo. */ --ref-vidrio:none; /* las superficies no son cristal */ --ref-vidrio-barra:blur(20px) saturate(180%); /* las barras sí */ --ref-relleno-barra:color-mix(in srgb, var(--ref-n2) 78%, transparent); --ref-relleno:var(--ref-n2); /* la tarjeta es sólida */ --ref-campo:var(--ref-n1); /* el campo es un rectángulo de tono */ --ref-linea:rgba(var(--ref-borde-rgb),.09); /* hairline */ --ref-elev-1:0 1px 2px rgba(18,20,18,.04); /* la tarjeta casi no flota */ --ref-elev-2:0 8px 28px rgba(18,20,18,.12); /* lo que sí flota: hojas, menús */ --ref-fondo:var(--ref-n0); --ref-salto:none; /* en táctil no hay hover: la respuesta es al pulsar */ --ref-presion:scale(.97); --mal-r:18px; --mal-r-s:12px; /* la escala de producto: 12/18/26 */ /* la escala del sistema operativo: cuerpo de 17, y los títulos por encima. Antes h3 valía 1rem y h4 heredaba 1,0625 del tema base, así que el h4 salía MÁS GRANDE que el h3. */ --mal-t-cuerpo:1.0625rem; --mal-t-micro:.8125rem; --mal-t-mini:.75rem; --mal-t-caption:.9375rem; /* footnote y subhead */ --mal-t-h4:1.0625rem; --mal-t-h3:1.25rem; --mal-t-h2:1.375rem; --mal-t-h1:1.75rem; --mal-t-lede:1.1875rem; --mal-t-display:2.125rem; /* el título grande de una pantalla */ --mal-t-cita:1.1em; --ref-peso-cita:500; --mal-t-prosa:var(--mal-t-cuerpo); } @media (prefers-color-scheme:dark){ :root[data-marca="apps"]:not([data-tema="claro"]){ --ref-marca:#ff6b6b; --ref-marca-2:#ff9999; --ref-marca-txt:#ff6b6b; --ref-sobre-marca:#1a1d1a; --ref-n0:#121412; --ref-n1:#252823; --ref-n2:#1a1d1a; --ref-n3:#1e211e; --ref-t0:#e7e9e3; --ref-t1:#abb0a5; --ref-t2:#8f948a; --ref-borde-rgb:231,233,227; --ref-relleno:var(--ref-n2); --ref-relleno-barra:color-mix(in srgb, var(--ref-n2) 80%, transparent); --ref-campo:var(--ref-n1); --ref-linea:rgba(255,255,255,.08); --ref-elev-1:0 1px 2px rgba(0,0,0,.3); --ref-elev-2:0 12px 36px rgba(0,0,0,.5); } } :root[data-marca="apps"][data-tema="oscuro"]{ --ref-marca:#ff6b6b; --ref-marca-2:#ff9999; --ref-marca-txt:#ff6b6b; --ref-sobre-marca:#1a1d1a; --ref-n0:#121412; --ref-n1:#252823; --ref-n2:#1a1d1a; --ref-n3:#1e211e; --ref-t0:#e7e9e3; --ref-t1:#abb0a5; --ref-t2:#8f948a; --ref-borde-rgb:231,233,227; --ref-relleno:var(--ref-n2); --ref-relleno-barra:color-mix(in srgb, var(--ref-n2) 80%, transparent); --ref-campo:var(--ref-n1); --ref-linea:rgba(255,255,255,.08); --ref-elev-1:0 1px 2px rgba(0,0,0,.3); --ref-elev-2:0 12px 36px rgba(0,0,0,.5); } /* ══════════════════ TEMA · JUEGOS ═════════════════════════════ Nace de las paletas reales de Pambamesa y La fanesca: talavera, rosa mexicano y maíz. Oscuro por defecto —se juega de noche— y con más radio que ningún otro tema. */ :root[data-marca="juegos"]{ --ref-marca:#e01b6a; --ref-marca-2:#b01254; --ref-marca-txt:#c2185b; --ref-sobre-marca:#ffffff; --ref-acento:#1b5faa; --ref-acento-2:#f5a623; --ref-n0:#f3f1ec; --ref-n1:#e3dfd6; --ref-n2:#ffffff; --ref-n3:#f8f6f2; --ref-t0:#2b2129; --ref-t1:#5c4d58; --ref-t2:#6f626c; --ref-borde-rgb:43,33,41; --ref-peso-display:800; --ref-tracking:-.03em; --ref-radio:1.3; /* más redondo que ningún otro */ --ref-borde:2px; /* contorno marcado, de juguete */ --ref-densidad:1; --ref-tap:52px; /* VOLUMEN: la sombra no difumina, se apoya. El botón tiene grosor. */ --ref-elev-1:0 4px 0 var(--mal-primary-hover); --ref-elev-2:0 7px 0 var(--mal-primary-hover), 0 14px 26px rgba(43,33,41,.28); --ref-salto:translateY(-3px); --ref-presion:translateY(3px); /* al pulsar, se hunde hasta su sombra */ /* HOLOGRAMA. El degradado va SOLO entre los dos tonos oscuros —rosa y talavera— porque el maíz de en medio dejaba el texto en 2,0:1: sobre un degradado, el contraste hay que medirlo en la parada peor, no en la media. El maíz se queda donde sí funciona: el destello del borde. */ --ref-relleno-marca:linear-gradient(135deg, var(--ref-marca) 0%, #8d2d8f 52%, var(--ref-acento) 100%); --ref-destello:linear-gradient(135deg, var(--ref-acento-2), #ff77ab, var(--ref-acento)); --mal-ok:#6fae2e; --mal-warn:#f5a623; } @media (prefers-color-scheme:dark){ :root[data-marca="juegos"]:not([data-tema="claro"]){ --ref-marca:#ff77ab; --ref-marca-2:#f53d8a; --ref-marca-txt:#ff77ab; --ref-sobre-marca:#1d1822; --ref-acento:#5f97d8; --ref-acento-2:#ffc93c; --ref-n0:#1d1822; --ref-n1:#2f2733; --ref-n2:#272031; --ref-n3:#332b3a; --ref-t0:#f3f1ec; --ref-t1:#cbc5b8; --ref-t2:#a99fb0; --ref-borde-rgb:243,241,236; } } :root[data-marca="juegos"][data-tema="oscuro"]{ --ref-marca:#ff77ab; --ref-marca-2:#f53d8a; --ref-marca-txt:#ff77ab; --ref-sobre-marca:#1d1822; --ref-acento:#5f97d8; --ref-acento-2:#ffc93c; --ref-n0:#1d1822; --ref-n1:#2f2733; --ref-n2:#272031; --ref-n3:#332b3a; --ref-t0:#f3f1ec; --ref-t1:#cbc5b8; --ref-t2:#a99fb0; --ref-borde-rgb:243,241,236; } /* ─── vidrio ────────────────────────────────────────────────── Las superficies que, en el tema de APPS, se vuelven translúcidas y desenfocan lo que tienen detrás. En los demás temas `--mal-vidrio` es `none` y esta regla no hace nada. */ .tarj,.card,.sheet,.menu__lista,.panel,.modal{ -webkit-backdrop-filter:var(--mal-vidrio);backdrop-filter:var(--mal-vidrio); } /* las barras: lo que en una app nativa es translúcido y desenfoca */ .navbar,.cabecera-app,.barra-acciones,.hud,.modal--hoja,.sheet{ background:var(--mal-relleno-barra); -webkit-backdrop-filter:var(--mal-vidrio-barra);backdrop-filter:var(--mal-vidrio-barra); } /* ─── base ────────────────────────────────────────────────── */ /* EL RESET, EN SU PROPIA CAPA. `margin:0;padding:0` sobre `*` vale (0,0,0), la misma especificidad que las reglas de maquetación de WordPress —`:where(.is-layout-flow) > *`— y que las de cualquier motor parecido. Cuando empatan gana la que va después, así que con el sistema cargado al final el reset borraba el ritmo vertical de todo el sitio anfitrión. Metido en `@layer`, el reset pierde SIEMPRE contra cualquier regla sin capa, tenga la especificidad que tenga. Es justo lo que queremos: sirve para quitar los márgenes por defecto del navegador (que son de otro origen y no compiten) y se aparta en cuanto el anfitrión opina. `box-sizing` se queda fuera de la capa: de eso sí dependen los componentes y nadie lo discute. MODO INVITADO. Cuando el sistema entra en un CMS que ya tiene su propio ritmo vertical, el anfitrión pone `data-ds="invitado"` en el y el reset no se aplica en absoluto. Hace falta porque hay contenido que se apoya en los márgenes POR DEFECTO DEL NAVEGADOR —el hueco entre la foto y el titular de elmercio.com son los 0,83 em que el navegador le da a un

, no una decisión de nadie— y contra el origen del navegador una regla en capa sigue ganando. Subir la especificidad aquí es inofensivo: dentro de `@layer` el reset pierde igualmente contra cualquier componente, que va sin capa. */ *,*::before,*::after{box-sizing:border-box} @layer reset{ html:not([data-ds="invitado"]) *, html:not([data-ds="invitado"]) *::before, html:not([data-ds="invitado"]) *::after{margin:0;padding:0} } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--mal-texto);font-weight:400;color:var(--mal-ink);background:var(--mal-fondo); line-height:var(--ref-interlinea);font-size:var(--mal-t-cuerpo); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,iframe{display:block;max-width:100%} img,svg{height:auto} a{color:inherit;text-decoration-thickness:1px;text-decoration-color:var(--mal-line-2);text-underline-offset:.18em} a:hover{color:var(--mal-rojo-txt)} strong,b{font-weight:700} ::selection{background:rgba(214,56,43,.24)} :focus-visible{outline:2px solid var(--mal-rojo);outline-offset:3px;border-radius:3px} .wrap{width:min(100% - 2 * clamp(1rem, 4vw, 2.75rem), var(--mal-ancho));margin-inline:auto} .salta{position:absolute;left:-9999px} .salta:focus{left:1rem;top:1rem;z-index:99;padding:.7rem 1rem;background:var(--mal-ink);color:var(--mal-bg);border-radius:var(--mal-r-s)} /* ─── tipografía ──────────────────────────────────────────── */ /* display: Syne. Nunca por debajo de 1.4rem. */ h1,h2,.display{font-family:var(--mal-display);font-weight:var(--ref-peso-display);letter-spacing:var(--ref-tracking);line-height:1.02;text-wrap:balance} .display{font-size:var(--mal-t-display);line-height:.92;letter-spacing:-.05em} h1{font-size:var(--mal-t-h1);line-height:1.02;letter-spacing:-.04em} h2{font-size:var(--mal-t-h2);line-height:1.08;letter-spacing:-.03em} /* subtítulos y todo lo que se lee: Inter */ h3,h4,h5,h6{font-family:var(--mal-texto);font-weight:700;letter-spacing:-.015em;line-height:1.25;text-wrap:balance} h3{font-size:var(--mal-t-h3);line-height:1.22} h4{font-size:var(--mal-t-h4);line-height:1.3} h5,h6{font-size:1rem} p{text-wrap:pretty} .lede{font-family:var(--mal-texto);font-size:var(--mal-t-lede);line-height:1.45;color:var(--mal-ink-2);max-width:42ch} .intro{color:var(--mal-ink-2);max-width:56ch;text-wrap:pretty} .micro{font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mal-ink-3)} .kicker{ font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--mal-ink-3);display:flex;align-items:center;gap:.8rem;font-weight:500; } .kicker::before{content:"";flex:none;width:2.2rem;height:1px;background:var(--mal-rojo)} .prosa p + p{margin-top:1rem} .prosa{max-width:68ch} /* ─── cabecera ────────────────────────────────────────────── */ .hud{ position:sticky;top:0;z-index:50;border-bottom:var(--mal-separador); background:var(--mal-relleno-barra); -webkit-backdrop-filter:var(--mal-vidrio-barra);backdrop-filter:var(--mal-vidrio-barra); } .hud__in{ display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem; font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.14em;text-transform:uppercase; } .hud__marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--mal-ink-2)} .hud__marca b{font-family:var(--mal-display);font-weight:800;font-size:1.1rem;letter-spacing:-.04em;text-transform:none;color:var(--mal-ink)} .hud__marca:hover b{color:var(--mal-rojo-txt)} .hud__punto{width:8px;height:8px;border-radius:50%;background:var(--mal-rojo);animation:mal-latir 2.4s ease-in-out infinite} .hud nav{display:flex;gap:clamp(.9rem, 2vw, 1.6rem)} .hud nav a{text-decoration:none;color:var(--mal-ink-2);padding:.35rem 0;border-bottom:1px solid transparent;white-space:nowrap} .hud nav a:hover,.hud nav a[aria-current]{color:var(--mal-ink);border-bottom-color:var(--mal-rojo)} @media (max-width:640px){ .hud__in{flex-wrap:wrap;row-gap:.25rem} .hud nav{width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem} .hud nav::-webkit-scrollbar{display:none} } /* ─── botones ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:var(--mal-tap);padding:0 var(--mal-e5);border-radius:var(--mal-r-full); font-family:var(--mal-texto);font-weight:600;text-decoration:none;font-size:var(--mal-t-caption);color:var(--mal-ink); border:var(--mal-borde-fuerte);background:var(--mal-campo);cursor:pointer; transition:transform .18s var(--mal-ease), background .18s, color .18s, border-color .18s, box-shadow .18s; } .btn:hover{transform:var(--mal-salto);color:var(--mal-ink);border-color:var(--mal-ink)} .btn:active{transform:var(--mal-presion)} /* el botón de marca: en Juegos el relleno es un degradado y la sombra es dura, así que el mismo selector sale volumétrico sin tocarlo. */ .btn--rojo{ background:var(--mal-relleno-marca);color:var(--mal-sobre-rojo); border-color:transparent;box-shadow:var(--mal-elev-1); } .btn--rojo:hover{background:var(--mal-relleno-marca);border-color:transparent; color:var(--mal-sobre-rojo);box-shadow:var(--mal-elev-2)} .btn--rojo:active{box-shadow:none} /* el destello holográfico: donde el tema lo define, el botón de marca gana un filo iridiscente arriba. En los demás temas no existe y la regla no pinta nada. */ .btn--rojo{position:relative;overflow:hidden} .btn--rojo::before{ content:"";position:absolute;inset:0 0 auto;height:2px; background:var(--ref-destello, transparent);opacity:.9; } .btn--fantasma{background:transparent} .btn--sm{padding:.5rem .85rem;font-size:var(--mal-t-caption)} /* ─── secciones ───────────────────────────────────────────── */ .sec{padding-block:calc(clamp(3.5rem, 8vw, 6.5rem) * var(--ref-densidad));border-top:var(--mal-borde)} .sec--primera{border-top:0} .sec__cab{ display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);gap:1.4rem clamp(2rem, 5vw, 5rem); align-items:end;margin-bottom:clamp(1.8rem, 4vw, 3rem); } .sec__cab h2{margin-top:.9rem} @media (max-width:720px){.sec__cab{grid-template-columns:1fr}} /* ─── hero ────────────────────────────────────────────────── */ .hero{position:relative;isolation:isolate;padding-block:clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.55; background-image:radial-gradient(var(--mal-line-2) 1px, transparent 1.5px);background-size:26px 26px; -webkit-mask-image:radial-gradient(70% 80% at 72% 45%, #000 0%, transparent 100%); mask-image:radial-gradient(70% 80% at 72% 45%, #000 0%, transparent 100%); } .hero__in{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:clamp(2rem, 5vw, 5rem);align-items:center} .hero h1{margin-top:1.2rem} .hero h1 em{font-style:normal;color:var(--mal-rojo)} .hero .lede{margin-top:1.6rem} .hero__acciones{margin-top:2rem;display:flex;gap:.7rem;flex-wrap:wrap} .hero__texto > *{animation:mal-subir .7s var(--mal-ease) both} .hero__texto > :nth-child(2){animation-delay:.06s} .hero__texto > :nth-child(3){animation-delay:.12s} .hero__texto > :nth-child(4){animation-delay:.18s} .hero__texto > :nth-child(5){animation-delay:.24s} .hero__red{animation:mal-aparecer 1.1s ease .25s both} @media (max-width:860px){.hero__in{grid-template-columns:1fr}.hero__red{display:none}} .hero--404{min-height:66vh;display:grid;align-items:center} .cifras{ margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem .55rem;list-style:none; font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.08em;text-transform:uppercase; } /* inline-flex para que una píldora con icono no se descuadre: con `inline` el .icono cae por debajo de la línea base y estira la caja. */ .cifras li{display:inline-flex;align-items:center;gap:.4em;padding:.45rem .8rem;border:var(--mal-borde);border-radius:var(--mal-r-full);background:var(--mal-paper);color:var(--mal-ink-2)} .cifras b{color:var(--mal-ink);font-weight:600} /* ─── el mapa de la red (SVG) ─────────────────────────────── */ .red{width:100%;height:auto;font-family:var(--mal-mono);overflow:visible} .red .anillo{fill:none;stroke:var(--mal-line);stroke-dasharray:2 5} .red line{stroke:var(--mal-line);stroke-width:1} .red .n{fill:var(--mal-ink);transition:r .15s ease} .red .n--medio{fill:var(--mal-rojo)} .red .n--juego{fill:var(--mal-ink)} .red .n--app{fill:var(--mal-ink-3)} .red text{fill:var(--mal-ink-2);font-size:var(--mal-t-mini);letter-spacing:.03em} .red a{text-decoration:none} .red a:hover text{fill:var(--mal-rojo-txt);font-weight:500} .red a:hover .n{r:7} .red .centro-c{fill:var(--mal-ink)} .red .centro{fill:var(--mal-bg);font-family:var(--mal-display);font-weight:800;font-size:24px;letter-spacing:-1.2px} /* ─── tarjetas ────────────────────────────────────────────── */ .rej{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr))} .rej--2{grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr))} .tarj{ position:relative;display:flex;flex-direction:column;background:var(--mal-relleno); border:var(--mal-borde);border-radius:var(--mal-r);overflow:hidden;box-shadow:var(--mal-elev-1); transition:transform var(--mal-dur) var(--mal-ease), box-shadow var(--mal-dur) ease, border-color var(--mal-dur) ease; } .tarj:hover{transform:var(--mal-salto);box-shadow:var(--mal-elev-2);border-color:var(--mal-line-2)} .tarj__cover{aspect-ratio:16 / 10;background:var(--mal-bg-2);overflow:hidden;display:grid;place-items:center} .tarj__cover img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--mal-ease)} .tarj:hover .tarj__cover img{transform:scale(1.03)} .tarj__cover--icono{background:var(--fondo, var(--mal-bg-2));position:relative} .tarj__cover--icono::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.14), transparent 70%)} .tarj__cover--icono img{width:34%;height:auto;object-fit:contain;border-radius:22%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))} .tarj:hover .tarj__cover--icono img{transform:scale(1.05) rotate(-1.5deg)} .tarj__cover--glifo{background:var(--fondo, var(--mal-ink));color:#fff;font-family:var(--mal-display);font-weight:800;font-size:clamp(3rem, 8vw, 5rem);letter-spacing:-.05em} /* la cabecera del periódico es papel y tinta SIEMPRE: no sigue el tema a propósito */ .tarj__cover--em{background:#FCFAF6;color:#111;font-family:var(--mal-display);font-weight:800;font-size:clamp(5rem, 14vw, 11rem);letter-spacing:-.06em;line-height:1} .tarj__cover--em i{font-style:normal;color:var(--mal-morado)} .tarj__cuerpo{padding:var(--mal-e4) var(--mal-e5) var(--mal-e5);display:flex;flex-direction:column;gap:.5rem;flex:1} .tarj__kicker{font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--mal-ink-3)} .tarj h3 a{text-decoration:none;color:inherit} .tarj h3 a::after{content:"";position:absolute;inset:0} .tarj:hover h3 a{color:var(--mal-rojo-txt)} .tarj p:not(.tarj__kicker):not(.tarj__acc){color:var(--mal-ink-2);font-size:var(--mal-t-caption);line-height:1.5} .tarj__tags{ display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin-top:auto;padding-top:.5rem; font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mal-ink-3); } .tarj__tags li{font-size:var(--mal-t-mini);border:var(--mal-borde);border-radius:var(--mal-r-full);padding:.22rem .55rem} .tarj__acc{display:flex;gap:1.1rem;align-items:baseline;margin-top:.5rem;font-size:var(--mal-t-caption);font-weight:600} .tarj__acc a{position:relative;z-index:1;text-decoration:none;color:var(--mal-rojo-txt)} .tarj__acc a:hover{text-decoration:underline} .tarj__acc .sec-link{color:var(--mal-ink-2);font-family:var(--mal-mono);font-weight:500;font-size:var(--mal-t-micro);letter-spacing:.12em;text-transform:uppercase} .tarj--destacada{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr)} .tarj--destacada .tarj__cover{aspect-ratio:auto;min-height:340px;height:100%} .tarj--destacada .tarj__cover--icono img{width:38%} .tarj--destacada .tarj__cuerpo{padding:clamp(1.4rem, 3vw, 2.4rem)} .tarj--destacada h3{font-family:var(--mal-display);font-weight:var(--ref-peso-display);letter-spacing:var(--ref-tracking);font-size:var(--mal-t-h2)} .tarj--destacada p:not(.tarj__kicker):not(.tarj__acc){font-size:1.02rem} @media (max-width:720px){ .tarj--destacada{grid-template-columns:1fr} .tarj--destacada .tarj__cover{aspect-ratio:16 / 10;min-height:0;height:auto} } /* la cita de un medio manda sobre su descripción */ /* ─── LA CITA · un solo componente ──────────────────────────── `.cita`, `blockquote`, `.em-quote` y la del artículo son la misma pieza. El tamaño es relativo (`--mal-t-cita`, 1,15em por defecto), así que una cita dentro de una tarjeta pequeña no sale gritando. Cómo se marca depende del tema, no del marcado: · con filete cuando el tema tiene líneas (`--ref-acento-linea:1`) · con comilla grande cuando no las tiene (`--mal-comilla:block`) Antes había tres componentes con tres tamaños (20,8 · 21 · 22,2) y solo uno pintaba la comilla. */ .cita,blockquote,.em-quote{ position:relative;margin:0;text-wrap:pretty; font-family:var(--mal-texto);font-size:var(--mal-t-cita);font-weight:var(--ref-peso-cita); font-style:var(--ref-cita-estilo);letter-spacing:-.015em;line-height:1.4;color:var(--mal-ink); padding-left:var(--ref-cita-sangria);padding-top:var(--ref-cita-alto); border-left:var(--mal-acento-linea) solid var(--mal-primary); } /* La comilla ocupa su sitio: `--ref-cita-alto` le abre hueco arriba. Sin eso se montaba sobre el párrafo anterior, que es justo lo que pasaba en el periódico —el único tema que la enseña—. */ .cita::before,blockquote::before,.em-quote::before{ content:"\201C";display:var(--mal-comilla, none);position:absolute;left:0;top:0; font-family:var(--mal-display);font-size:2.6em;line-height:.9;color:var(--mal-primary); font-style:normal;pointer-events:none; } /* quien firma la cita: un escalón por debajo y sin cursiva */ .cita cite,blockquote cite,.em-quote cite,.cita__autor{ display:block;margin-top:var(--mal-e2);font-family:var(--mal-mono);font-size:var(--mal-t-micro); font-style:normal;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mal-ink-3); } /* ─── lista de enlaces ────────────────────────────────────── */ .lista{list-style:none;border-top:var(--mal-separador)} .lista a{ display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:1rem 1.3rem;align-items:center; padding:1.1rem 0;border-bottom:var(--mal-separador);text-decoration:none;color:inherit; } .lista a:hover .nom{color:var(--mal-rojo-txt)} .lista .ico{width:48px;height:48px;border-radius:13px;object-fit:cover;background:var(--mal-paper);border:var(--mal-borde);filter:grayscale(1)} .lista a:hover .ico{filter:none} .ico--glifo{display:grid;place-items:center;font-family:var(--mal-mono);font-size:1rem;color:var(--mal-ink-2);filter:none !important} .lista .nom{font-weight:700;font-size:1.1rem;letter-spacing:-.015em;transition:color .15s} .lista .url{font-family:var(--mal-mono);font-size:var(--mal-t-micro);color:var(--mal-ink-3);letter-spacing:.08em;margin-left:.5rem} .lista .des{color:var(--mal-ink-2);font-size:var(--mal-t-caption)} .lista .fl{font-size:1.5rem;color:var(--mal-ink-3);transition:transform .2s ease, color .2s ease} .lista a:hover .fl{transform:translateX(5px);color:var(--mal-rojo)} /* ─── ficha de persona ────────────────────────────────────── */ .quien{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:clamp(1.5rem, 4vw, 3.5rem);align-items:start} .quien img{ width:clamp(130px, 18vw, 210px);aspect-ratio:1;object-fit:cover;border-radius:var(--mal-r); border:var(--mal-borde);filter:grayscale(1) contrast(1.05);transition:filter .4s ease; } .quien img:hover{filter:none} .quien h2{margin-top:.9rem;max-width:20ch} .quien p{max-width:62ch;margin-top:1rem;color:var(--mal-ink-2)} .quien p strong{color:var(--mal-ink)} .enlaces{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem;list-style:none} .enlaces a{ display:inline-block;font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.12em;text-transform:uppercase; text-decoration:none;padding:.6rem .95rem;border:var(--mal-borde-fuerte);border-radius:var(--mal-r-full);color:var(--mal-ink); transition:border-color .15s, color .15s, transform .15s; } .enlaces a:hover{border-color:var(--mal-rojo);color:var(--mal-rojo-txt);transform:translateY(-2px)} @media (max-width:560px){.quien{grid-template-columns:1fr}} /* ─── aviso ───────────────────────────────────────────────── */ .aviso{ border:var(--mal-borde-fuerte);border-left:var(--mal-acento-linea) solid var(--mal-primary);border-radius:var(--mal-r-s); padding:var(--mal-e3) var(--mal-e4);background:var(--mal-relleno);color:var(--mal-ink-2);font-size:var(--mal-t-caption); } .aviso b{color:var(--mal-ink)} .aviso--ok{border-left-color:var(--mal-verde)} .aviso--atencion{border-left-color:var(--mal-ambar)} /* ─── marco de app embebida ───────────────────────────────── */ .marco{ border:var(--mal-borde);border-radius:var(--mal-r);overflow:hidden;background:var(--mal-relleno); box-shadow:var(--mal-elev-2); } .marco__barra{ display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;border-bottom:var(--mal-separador); background:var(--mal-paper-2);font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.1em; text-transform:uppercase;color:var(--mal-ink-3); } .marco__luces{display:flex;gap:.35rem;flex:none} .marco__luces i{width:9px;height:9px;border-radius:50%;background:var(--mal-line-2);display:block} .marco__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.04em} .marco__acc{display:flex;gap:.5rem;flex:none} .marco iframe{width:100%;height:min(78vh, 900px);border:0;background:var(--mal-bg-2);display:block} .marco--movil iframe{height:min(80vh, 860px)} /* ─── pie ─────────────────────────────────────────────────── */ .pie{border-top:var(--mal-separador);padding-block:2.4rem 3.2rem;font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mal-ink-3)} .pie__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;align-items:center} .pie a{text-decoration:none;color:var(--mal-ink-2)} .pie a:hover{color:var(--mal-rojo-txt)} .pie ul{display:flex;gap:1.2rem;list-style:none;flex-wrap:wrap} /* ─── código, tablas y formularios ────────────────────────── */ /* Lo mínimo para que un consumidor con un ejemplo de código, una tabla o un formulario no tenga que inventárselo. */ pre{ font-family:var(--mal-mono);font-size:var(--mal-t-mini);line-height:1.6;overflow-x:auto; background:var(--mal-paper-2);border:var(--mal-borde);border-radius:var(--mal-r-s); padding:1rem 1.1rem;color:var(--mal-ink-2); } pre code{background:none;border:0;padding:0;font-size:inherit} /* bloque de código con botón de copiar. `.btn-copy` ya existía, pero no tenía dónde vivir fuera del storybook: sin esto, cualquier sitio que quisiera enseñar una línea copiable tenía que inventarse la caja. */ .codigo-bloque{position:relative} .codigo-bloque pre{margin:0;padding-right:6.5rem} .codigo-bloque .btn-copy{position:absolute;top:.6rem;right:.6rem} .tabla-env{overflow-x:auto;border:var(--mal-borde);border-radius:var(--mal-r-s)} table{border-collapse:collapse;width:100%;font-size:var(--mal-t-caption)} th,td{text-align:left;padding:.65rem .85rem;border-bottom:var(--mal-separador);vertical-align:top} th{font-family:var(--mal-mono);font-size:var(--mal-t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mal-ink-3);font-weight:500} tbody tr:last-child td{border-bottom:0} label{display:block;font-weight:600;font-size:var(--mal-t-caption);margin-bottom:.3rem} input,select,textarea{ font-family:var(--mal-texto);font-size:1rem;color:var(--mal-ink);background:var(--mal-relleno); border:var(--mal-borde-fuerte);border-radius:var(--mal-r-s);padding:0 var(--mal-e4); min-height:var(--mal-tap);width:100%;max-width:34rem; } textarea{padding-block:var(--mal-e3);min-height:calc(var(--mal-tap) * 2.5)} input:focus,select:focus,textarea:focus{outline:2px solid var(--mal-rojo);outline-offset:1px;border-color:var(--mal-rojo)} /* ─── movimiento ──────────────────────────────────────────── */ @keyframes mal-latir{0%,100%{opacity:1}50%{opacity:.3}} @keyframes mal-subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes mal-aparecer{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important} } /* ─── páginas de embed (/apps//) ──────────────────────── */ .emb{padding-block:clamp(1.5rem, 4vw, 3rem)} .emb__t{font-size:clamp(2rem, 1.4rem + 2.6vw, 3.4rem);margin-block:.7rem .4rem} .emb__d{max-width:62ch} .emb .marco{margin-top:1.4rem} .emb__n{margin-top:1rem} .emb__s{margin-top:clamp(2rem, 5vw, 3.5rem)} .emb__h2{font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem);margin-block:.6rem 1rem} code{font-family:var(--mal-mono);font-size:.9em;background:var(--mal-paper-2);border:var(--mal-borde);border-radius:6px;padding:.1em .35em} /* el recuadro es para el código EN LÍNEA: si la clase pide la familia mono como espécimen tipográfico, estorba. */ code.text-mono,pre code,.sb-code code{background:none;border:0;padding:0;font-size:inherit} /* ══════════════════════════════════════════════════════════════ CAPA 2 · EL UI KIT COMPLETO Portado del storybook original de maldonado.pro (`index.css`), con sus mismas medidas y comportamiento, pero hablando en tokens `--mal-*` en vez de los `hsl(var(--bg-000))` de aquella hoja. Así el kit entero sigue el tema y se puede consumir desde fuera. ══════════════════════════════════════════════════════════════ */ /* ─── utilidades de texto ─────────────────────────────────── */ .text-display,.text-sans{font-family:var(--mal-display)} .text-mono{font-family:var(--mal-mono)} .text-accent{color:var(--mal-rojo-txt)} .text-blue{color:var(--mal-azul)} .text-muted{color:var(--mal-ink-2)} .text-faint{color:var(--mal-ink-3)} /* ─── superficies y texturas ──────────────────────────────── */ .bg-dotted{background-image:radial-gradient(color-mix(in srgb, var(--mal-ink) 12%, transparent) 1.2px, transparent 0);background-size:24px 24px} /* El grano del sistema, tal cual estaba en el storybook original: una capa fija sobre TODO el documento, no un fondo por caja. Es lo que le da al papel su textura, y en pantallas grandes se nota. */ body{position:relative} /* El grano va sobre TODO el documento. Un tema lo quita con `--ref-grano:none`: con `content:none` el pseudo-elemento ni se genera. */ body::before{ content:var(--ref-grano);position:fixed;inset:0;pointer-events:none;z-index:10000;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* y la versión por caja, para una superficie suelta */ .bg-noise{position:relative} .bg-noise::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } .glow-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.4} /* ─── botones del kit (alias del storybook original) ──────── */ .btn-primary{background:var(--mal-ink);color:var(--mal-bg);border-color:var(--mal-ink)} .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--mal-sombra-md);color:var(--mal-bg)} .btn-outline{background:transparent;color:var(--mal-ink);border:var(--mal-borde-fuerte)} .btn-outline:hover{background:var(--mal-paper-2)} .btn-ghost{background:transparent;color:var(--mal-ink-2);border-color:transparent} .btn-ghost:hover{background:var(--mal-paper-2);color:var(--mal-ink)} .btn-install{ display:inline-flex;align-items:center;gap:12px;background:var(--mal-paper-2); border:var(--mal-borde-fuerte);border-radius:var(--mal-r-s);padding:8px 16px; font-family:var(--mal-mono);font-size:var(--mal-t-caption);color:var(--mal-ink-2); } .btn-install .prompt{color:var(--mal-rojo-txt);font-weight:700} /* ─── etiquetas e indicadores ─────────────────────────────── */ .tag{ display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--mal-paper-2); border:var(--mal-borde);border-radius:var(--mal-r-full);font-family:var(--mal-mono); font-size:var(--mal-t-mini);color:var(--mal-ink-2);text-transform:uppercase;letter-spacing:.05em;width:fit-content; } .tag--acento{background:color-mix(in srgb, var(--mal-rojo) 10%, transparent);color:var(--mal-rojo-txt);border-color:transparent} .metric-badge{ display:inline-flex;flex-direction:column;gap:4px;padding:16px 24px;background:var(--mal-paper-2); border:var(--mal-borde);border-radius:var(--mal-r); } .metric-value{font-family:var(--mal-display);font-size:var(--mal-t-h1);font-weight:800;color:var(--mal-rojo-txt);line-height:1} .metric-label{font-family:var(--mal-mono);font-size:var(--mal-t-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--mal-ink-2)} /* ─── pestañas ────────────────────────────────────────────── */ .tabs-control{ display:flex;gap:4px;background:var(--mal-paper-2);border:var(--mal-borde); padding:6px;border-radius:var(--mal-r-s);width:fit-content; } .tab-trigger{ padding:8px 16px;border-radius:6px;font-family:var(--mal-texto);font-size:var(--mal-t-caption);font-weight:600; cursor:pointer;border:0;background:transparent;color:var(--mal-ink-2);transition:.15s; } .tab-trigger[aria-selected="true"],.tab-trigger.active{background:var(--mal-ink);color:var(--mal-bg)} /* ─── acordeón · sin JavaScript, con
────────────── */ .accordion-item{border-bottom:var(--mal-separador)} .accordion-item summary{ list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between; align-items:center;gap:16px;font-weight:600;font-size:var(--mal-t-cuerpo);color:var(--mal-ink); } .accordion-item summary::-webkit-details-marker{display:none} .accordion-item summary::after{content:"+";font-family:var(--mal-mono);font-size:20px;color:var(--mal-ink-3);transition:transform .25s} .accordion-item[open] summary::after{transform:rotate(45deg)} .accordion-item .accordion-content{padding-bottom:20px;color:var(--mal-ink-2);font-size:var(--mal-t-caption)} /* ─── terminal ────────────────────────────────────────────── */ .terminal{background:#0a0a0a;border:var(--mal-borde);border-radius:var(--mal-r-s);overflow:hidden;box-shadow:var(--mal-sombra-md)} .terminal-header{background:#1a1a1a;padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #333} .dot{width:10px;height:10px;border-radius:50%;display:block} .dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f} .terminal-body{padding:20px;font-family:var(--mal-mono);font-size:var(--mal-t-caption);color:#f0ede8;line-height:1.6} .t-line{margin-bottom:6px;display:flex;align-items:flex-start;gap:8px} .t-prompt{color:#ff6b5e;font-weight:700;flex-shrink:0} .t-line.success{color:#4caf72} .t-line.info{color:#c9c6c0} /* ─── bento y tarjetas de contenido ───────────────────────── */ .bento-grid{ display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;background:var(--mal-line-2); border:var(--mal-borde);border-radius:var(--mal-r);overflow:hidden; } .bento-grid .card{background:var(--mal-paper);padding:32px;display:flex;flex-direction:column;gap:16px;transition:background .15s} .bento-grid .card:hover{background:var(--mal-paper-2)} .card-large{grid-column:span 2} .card.bordered{border:var(--mal-borde);border-radius:var(--mal-r)} .card.small{padding:20px;gap:8px} .bento-grid--sueltas{display:flex;flex-wrap:wrap;gap:24px;background:transparent;border:0} @media (max-width:800px){.bento-grid{grid-template-columns:1fr}.card-large{grid-column:span 1}} /* ─── precios ─────────────────────────────────────────────── */ .pricing-card{ background:var(--mal-paper-2);border:var(--mal-borde);border-radius:var(--mal-r); padding:32px;display:flex;flex-direction:column;gap:16px;position:relative; } .pricing-card.featured{border-color:var(--mal-rojo);box-shadow:0 0 24px color-mix(in srgb, var(--mal-rojo) 14%, transparent)} .price{font-family:var(--mal-display);font-size:var(--mal-t-h1);font-weight:800;letter-spacing:-.02em;line-height:1} .period{font-size:var(--mal-t-caption);color:var(--mal-ink-2)} /* ─── carné de identidad ──────────────────────────────────── */ .ticket{ width:300px;background:var(--mal-paper);border:var(--mal-borde-fuerte);border-radius:12px; display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--mal-elev-2); } .ticket-photo-full{width:100%;height:240px;background:var(--mal-bg-2);overflow:hidden} .ticket-photo-full img{width:100%;height:100%;object-fit:cover} .ticket-content{flex:1;padding:24px;display:flex;flex-direction:column} .ticket-group{margin-bottom:8px} .ticket-label-sm{ font-family:var(--mal-mono);font-size:var(--mal-t-mini);text-transform:uppercase;letter-spacing:.12em; font-weight:700;color:var(--mal-ink-3);margin-bottom:6px;display:block; } .ticket-value-sm{font-family:var(--mal-display);font-size:var(--mal-t-h3);font-weight:800;line-height:1.1;color:var(--mal-ink);letter-spacing:-.02em} .ticket-signature-svg{width:140px;height:50px;opacity:.9;color:var(--mal-ink);margin:4px 0 20px} .ticket-separator{border:0;border-top:var(--mal-separador);margin:0 0 20px} .ticket-bottom-row{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-top:auto} /* ─── tarjeta social ──────────────────────────────────────── */ .social-card{ background:var(--mal-paper);border:var(--mal-borde);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s, border-color .15s; } .social-card:hover{transform:translateY(-4px);box-shadow:var(--mal-sombra-md);border-color:var(--mal-line-2)} .social-card-body{padding:20px 16px;font-family:var(--mal-mono);font-size:var(--mal-t-caption);line-height:1.6;color:var(--mal-ink-2);flex-grow:1} .social-card-footer{padding:12px 16px;display:flex;align-items:center;gap:12px;border-top:var(--ref-borde) dotted var(--mal-outline-2)} .social-avatar{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff; font-weight:700;font-size:var(--mal-t-caption);text-transform:uppercase;flex-shrink:0;background:var(--mal-ink-2); } .social-info{display:flex;flex-direction:column;gap:2px} .social-name{font-size:var(--mal-t-caption);font-weight:700;color:var(--mal-ink)} .social-handle{font-size:var(--mal-t-mini);color:var(--mal-ink-3)} .social-card.accent{border-left:calc(4px * var(--ref-acento-linea)) solid var(--mal-rojo)} .social-card.pro{border-left:calc(4px * var(--ref-acento-linea)) solid var(--mal-morado)} /* ─── caso de portafolio ──────────────────────────────────── */ .portfolio-case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);align-items:center} @media (max-width:900px){.portfolio-case{grid-template-columns:1fr}} .case-content{display:flex;flex-direction:column;gap:20px} .case-tag{font-family:var(--mal-mono);color:var(--mal-rojo-txt);font-weight:700;font-size:var(--mal-t-mini);text-transform:uppercase;letter-spacing:.1em} .case-title{font-family:var(--mal-display);font-size:var(--mal-t-h2);line-height:1.05;font-weight:800;letter-spacing:-.03em} .case-metrics-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;margin-top:8px} .portfolio-stack{position:relative;aspect-ratio:4/3;perspective:1000px} .portfolio-card{ position:absolute;inset:0;border-radius:var(--mal-r);overflow:hidden;border:var(--mal-borde); background:var(--mal-paper-2);box-shadow:var(--mal-sombra-md); } .portfolio-card:nth-child(2){transform:rotate(-4deg) translate(-10px, 10px);z-index:1} .portfolio-card:nth-child(1){z-index:2} .portfolio-card img{width:100%;height:100%;object-fit:cover} /* ─── pasos de proceso ────────────────────────────────────── */ .feature-stepper{display:flex;flex-direction:column} .feature-step{padding:20px 24px;border-top:var(--mal-separador);position:relative;transition:background .3s} .feature-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mal-rojo);transform:scaleY(0);transition:transform .3s} .feature-step.active{background:var(--mal-paper-2)} .feature-step.active::before{transform:scaleY(1)} .feature-step-title{font-weight:700;font-size:var(--mal-t-cuerpo);color:var(--mal-ink)} .feature-step-desc{font-size:var(--mal-t-caption);color:var(--mal-ink-2);margin-top:8px} /* ─── módulos y listas de característica ──────────────────── */ .plugin-card{ background:var(--mal-paper);border:var(--mal-borde);border-radius:var(--mal-r);padding:24px; max-width:280px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--mal-sombra-sm);transition:transform .3s, box-shadow .3s; } .plugin-card:hover{transform:translateY(-4px);box-shadow:var(--mal-sombra-md)} .plugin-card-image{width:100%;aspect-ratio:16/9;background:var(--mal-rojo);border-radius:var(--mal-r-s);display:grid;place-items:center;font-size:var(--mal-t-h1)} .plugin-card-title{font-size:var(--mal-t-caption);font-weight:700;color:var(--mal-ink);line-height:1.3} .plugin-card-desc{font-size:var(--mal-t-caption);color:var(--mal-ink-2);line-height:1.5} .list-features{display:flex;flex-direction:column;border-top:var(--mal-separador)} .list-feature-item{display:grid;grid-template-columns:320px 1fr;gap:60px;padding:40px 0;border-bottom:var(--mal-separador)} .list-feature-header{display:flex;align-items:flex-start;gap:20px} .list-feature-icon{font-size:24px;flex-shrink:0;margin-top:4px} .list-feature-title{font-family:var(--mal-display);font-size:clamp(1.4rem, 1.1rem + 1vw, 1.75rem);font-weight:800;line-height:1.1;letter-spacing:-.03em} .list-feature-points{list-style:none;display:flex;flex-direction:column;gap:14px} .list-feature-points li{position:relative;padding-left:24px;font-size:var(--mal-t-cuerpo);line-height:1.5;color:var(--mal-ink-2)} .list-feature-points li::before{content:"•";position:absolute;left:0;color:var(--mal-rojo);font-size:22px;line-height:1} @media (max-width:800px){.list-feature-item{grid-template-columns:1fr;gap:20px}} /* ─── pila de tarjetas y paginación ───────────────────────── */ .stacked-cards-container{position:relative;width:100%;max-width:320px;height:240px} .stacked-card{ position:absolute;inset:0;background:var(--mal-paper);border:var(--mal-borde); border-radius:var(--mal-r);padding:24px;display:flex;flex-direction:column;gap:10px; transition:transform .4s cubic-bezier(.175,.885,.32,1.275); } .stacked-card:nth-child(3){transform:translate(16px, 16px);z-index:1} .stacked-card:nth-child(2){transform:translate(8px, 8px);z-index:2} .stacked-card:nth-child(1){z-index:3;box-shadow:var(--mal-sombra-md)} .pagination-wrap{display:flex;align-items:center;gap:16px;margin-top:24px} .pagination-dots{display:flex;gap:8px} .dot-indicator{width:6px;height:6px;border-radius:50%;background:var(--mal-line-2)} .dot-indicator.active{background:var(--mal-rojo);width:14px;border-radius:3px} .nav-arrow{ width:34px;height:34px;border:var(--mal-borde);border-radius:50%;display:grid; place-items:center;cursor:pointer;background:var(--mal-paper);color:var(--mal-ink-2);transition:.15s; } .nav-arrow:hover{background:var(--mal-paper-2);border-color:var(--mal-ink);color:var(--mal-ink)} /* ─── texto en cluster ────────────────────────────────────── */ .text-cluster-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:20px} .text-cluster-base{font-family:var(--mal-display);font-size:clamp(28px, 5vw, 62px);font-weight:800;letter-spacing:-.04em;line-height:1} .vibrant-tag{ font-family:var(--mal-display);padding:8px 24px;border-radius:14px;font-weight:800; font-size:clamp(22px, 4vw, 48px);display:inline-block;box-shadow:var(--mal-elev-1); transition:transform .3s cubic-bezier(.175,.885,.32,1.275); } .vibrant-tag.verde{background:#00E676;color:#000;transform:rotate(-3deg)} .vibrant-tag.azul{background:var(--mal-azul);color:#fff;transform:rotate(4deg)} .vibrant-tag.acento{background:var(--mal-rojo);color:var(--mal-sobre-rojo);transform:rotate(-2deg)} .vibrant-tag:hover{transform:scale(1.05) rotate(0deg)} /* ─── blog ────────────────────────────────────────────────── */ .blog-card{ display:flex;flex-direction:column;background:var(--mal-paper);border:var(--mal-borde); border-radius:var(--mal-r);overflow:hidden;height:100%;text-decoration:none;transition:transform .3s, box-shadow .3s, border-color .3s; } .blog-card:hover{transform:translateY(-4px);box-shadow:var(--mal-sombra-md);border-color:var(--mal-line-2)} .blog-card-image{width:100%;aspect-ratio:16/9;background:var(--mal-bg-2);overflow:hidden;border-bottom:var(--mal-separador)} .blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .blog-card:hover .blog-card-image img{transform:scale(1.05)} .blog-card-content{padding:24px;display:flex;flex-direction:column;flex-grow:1;gap:14px} .blog-card-meta{ display:flex;justify-content:space-between;font-family:var(--mal-mono);font-size:var(--mal-t-mini); color:var(--mal-ink-3);text-transform:uppercase;letter-spacing:.05em; } .blog-card-title{font-size:var(--mal-t-h3);font-weight:700;color:var(--mal-ink);line-height:1.25;letter-spacing:-.02em;transition:color .15s} .blog-card:hover .blog-card-title{color:var(--mal-rojo-txt)} .blog-card-excerpt{font-size:var(--mal-t-caption);color:var(--mal-ink-2);line-height:1.6;flex-grow:1} .author-meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:var(--ref-borde) dotted var(--mal-outline-2)} .author-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:var(--mal-borde-fuerte);flex-shrink:0;background:var(--mal-bg-2)} .author-avatar img{width:100%;height:100%;object-fit:cover} .author-info{display:flex;flex-direction:column} .author-name{font-size:var(--mal-t-caption);font-weight:700;color:var(--mal-ink)} .author-date{font-size:var(--mal-t-mini);color:var(--mal-ink-3)} .filter-bar{display:flex;gap:12px;flex-wrap:wrap} .filter-chip{ padding:8px 16px;border-radius:var(--mal-r-full);background:var(--mal-paper-2); border:var(--mal-borde);font-size:var(--mal-t-caption);font-weight:600;color:var(--mal-ink-2); cursor:pointer;text-decoration:none;transition:.15s; } .filter-chip:hover{background:var(--mal-bg-2);color:var(--mal-ink)} .filter-chip.active,.filter-chip[aria-current]{background:var(--mal-ink);color:var(--mal-bg);border-color:var(--mal-ink)} /* ─── artículo ────────────────────────────────────────────── */ .article-container{max-width:800px;margin-inline:auto} .article-meta{ display:flex;align-items:center;gap:12px;font-family:var(--mal-mono);font-size:var(--mal-t-mini); color:var(--mal-ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;flex-wrap:wrap; } .article-title{font-family:var(--mal-display);font-size:var(--mal-t-h1);font-weight:800;line-height:1;letter-spacing:-.035em;margin-bottom:20px} .article-subtitle{font-size:var(--mal-t-h4);line-height:1.5;color:var(--mal-ink-2)} .article-hero-image{width:100%;aspect-ratio:21/9;background:var(--mal-bg-2);border-radius:var(--mal-r);overflow:hidden;margin:32px 0 40px;border:var(--mal-borde)} .article-hero-image img{width:100%;height:100%;object-fit:cover} .prose p{margin-bottom:24px} .prose strong{color:var(--mal-ink)} .prose h2{font-family:var(--mal-display);font-size:var(--mal-t-h2);font-weight:800;color:var(--mal-ink);margin:44px 0 16px;line-height:1.2;letter-spacing:-.03em} .prose a{color:var(--mal-rojo-txt);text-decoration:underline;text-underline-offset:4px} .prose ul,.prose ol{margin-bottom:24px;padding-left:24px} .prose li{margin-bottom:10px} .prose li::marker{color:var(--mal-rojo)} /* la cita del artículo es la misma `.cita` de arriba; aquí solo el aire */ .prose blockquote{padding-block:var(--mal-e2);margin-block:var(--mal-e5)} .prose figcaption{text-align:center;font-family:var(--mal-mono);font-size:var(--mal-t-caption);color:var(--mal-ink-3);margin-top:-12px;margin-bottom:32px} .article-author-box{ display:flex;gap:24px;align-items:center;padding:28px;background:var(--mal-paper-2); border:var(--mal-borde);border-radius:var(--mal-r);margin-top:48px; } .article-author-box .author-avatar{width:72px;height:72px} .author-box-content{display:flex;flex-direction:column;gap:8px} .author-box-name{font-size:var(--mal-t-h4);font-weight:800;color:var(--mal-ink)} .author-box-bio{font-size:var(--mal-t-caption);color:var(--mal-ink-2);line-height:1.5} /* ─── navegación de sitio (píldora y ancho completo) ──────── */ .nav-glass{ width:100%;background:color-mix(in srgb, var(--mal-paper) 85%, transparent); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); border:var(--mal-borde);border-radius:var(--mal-r-full);padding:12px 24px; display:flex;justify-content:space-between;align-items:center;box-shadow:var(--mal-sombra-sm);gap:24px; } .nav-glass--full{border-radius:0;border-width:0 0 1px;padding:16px 24px} .logo{font-family:var(--mal-display);font-weight:800;font-size:var(--mal-t-h3);letter-spacing:-.04em} .nav-links-scroll{display:flex;gap:28px;align-items:center;overflow-x:auto;scrollbar-width:none} .nav-links-scroll::-webkit-scrollbar{display:none} .nav-links-scroll a{white-space:nowrap;text-decoration:none;font-size:var(--mal-t-caption);font-weight:500;color:var(--mal-ink-2)} .nav-links-scroll a:hover{color:var(--mal-ink)} /* ─── marquesina ──────────────────────────────────────────── */ /* OJO: en el sitio de Anny la marquesina está prohibida. Aquí es parte del kit de MAL, donde sí se usa. Se para con reduced-motion. */ .marquee-container{ width:100%;overflow:hidden;padding:32px 0;border-block:var(--mal-separador); background:var(--mal-paper-2);display:flex;align-items:center; } .marquee-content{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:mal-marquesina 26s linear infinite} .marquee-item{ font-family:var(--mal-display);font-size:clamp(28px, 5vw, 56px);font-weight:800; letter-spacing:-.04em;color:var(--mal-ink);display:flex;align-items:center;gap:20px; } .marquee-item::after{content:"•";color:var(--mal-rojo)} @keyframes mal-marquesina{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-content{animation:none}} /* ─── hero de página ──────────────────────────────────────── */ .hero-title{font-family:var(--mal-display);font-size:clamp(40px, 7vw, 80px);line-height:1;font-weight:800;letter-spacing:-.04em} .hero-subtitle{font-size:var(--mal-t-h3);color:var(--mal-ink-2);line-height:1.5;max-width:540px} /* ══════════════════════════════════════════════════════════════ CAPA 3 · PRODUCTO Venía de `apps.css`, que era un sistema aparte. Ya no lo es: un campo, una barra inferior o una hoja no son «de las apps», son componentes del sistema que en el tema de producto se ven de una manera y en el del periódico de otra. Los tokens `--app-*` que usaban se resuelven contra los roles, así que siguen valiendo. ══════════════════════════════════════════════════════════════ */ :root{ --app-bg:var(--mal-bg); --app-surface:var(--mal-surface); --app-surface-2:var(--mal-bg-2); --app-sheet:var(--mal-surface-alt); --app-ink:var(--mal-on-surface); --app-ink-2:var(--mal-on-surface-2); --app-ink-3:var(--mal-on-surface-3); --app-line:var(--mal-outline); --app-line-strong:var(--mal-outline-2); --app-brand:var(--mal-primary); --app-brand-deep:var(--mal-primary-hover); --app-on-brand:var(--mal-on-primary); --app-ok:var(--mal-ok); --app-warn:var(--mal-warn); --app-danger:var(--mal-danger); --app-info:var(--mal-info); --app-on-danger:#fff; --app-ok-soft:color-mix(in oklab, var(--mal-ok) 10%, var(--mal-surface)); --app-warn-soft:color-mix(in oklab, var(--mal-warn) 10%, var(--mal-surface)); --app-danger-soft:color-mix(in oklab, var(--mal-danger) 9%, var(--mal-surface)); --app-info-soft:color-mix(in oklab, var(--mal-info) 10%, var(--mal-surface)); --app-font:var(--ref-texto); --app-mono:var(--ref-mono); --app-t-micro:var(--mal-t-micro); --app-t-caption:.8125rem; --app-t-body:1rem; --app-t-title:1.125rem; --app-t-screen:1.5rem; --app-t-display:clamp(2rem, 1.4rem + 2.6vw, 3rem); --app-r-s:var(--mal-r-s); --app-r-m:var(--mal-r); --app-r-l:calc(26px * var(--ref-radio)); --app-r-full:var(--mal-r-full); --app-sombra-1:var(--mal-elev-1); --app-sombra-2:var(--mal-elev-2); --app-ease:var(--mal-ease); --app-dur:260ms; --app-tap:var(--mal-tap); --app-ancho:520px; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){--app-on-danger:#1a1d1a} } :root[data-tema="oscuro"]{--app-on-danger:#1a1d1a} /* ─── botones ─────────────────────────────────────────────── */ /* el .btn base vive en la capa UI; aquí solo sus variantes de producto */ .btn-tonal{background:color-mix(in oklab, var(--app-brand) 8%, var(--app-surface)); color:var(--app-brand);border-color:color-mix(in oklab, var(--app-brand) 30%, transparent)} .btn-quiet{background:var(--app-surface);color:var(--app-ink);border-color:var(--app-line-strong)} .btn-ghost{background:transparent;color:var(--app-ink-2);border-color:transparent} .btn-danger{background:var(--app-danger);color:var(--app-on-danger)} .btn-block{width:100%} .icon-btn{ display:inline-grid;place-items:center;width:var(--app-tap);height:var(--app-tap); border-radius:var(--app-r-full);border:var(--mal-borde);background:var(--app-surface); color:var(--app-ink-2);cursor:pointer; } /* ─── superficies ─────────────────────────────────────────── */ .card{ background:var(--app-surface);border:var(--mal-borde);border-radius:var(--app-r-m); padding:1rem;box-shadow:var(--app-sombra-1); } .card-flat{box-shadow:none} .hint-card{ background:color-mix(in oklab, var(--app-brand) 8%, var(--app-surface)); border:var(--ref-borde) solid color-mix(in oklab, var(--app-brand) 30%, transparent);border-radius:var(--app-r-m); padding:.9rem 1rem;font-size:var(--app-t-caption);color:var(--app-ink-2); } .empty-state{ text-align:center;padding:2.5rem 1rem;color:var(--app-ink-3); border:var(--ref-borde) dashed var(--mal-outline-2);border-radius:var(--app-r-m); } /* ─── campos ──────────────────────────────────────────────── */ .field{display:flex;flex-direction:column;gap:.35rem} .field > label{font-size:var(--app-t-caption);font-weight:600;color:var(--app-ink-2)} .input,input[type=text],input[type=number],input[type=email],select,textarea{ font-family:inherit;font-size:1rem;color:var(--app-ink);background:var(--app-surface); min-height:var(--app-tap);padding:.65rem .85rem;border:var(--mal-borde-fuerte); border-radius:var(--app-r-s);width:100%; transition:border-color .15s, box-shadow .15s; } .input:focus,input:focus,select:focus,textarea:focus{ outline:0;border-color:var(--app-brand); box-shadow:0 0 0 3px color-mix(in oklab, var(--app-brand) 18%, transparent); } .field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} /* ─── chips y segmentado ──────────────────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:.35rem;min-height:var(--app-tap);padding:.35rem .9rem; border-radius:var(--app-r-full);border:var(--mal-borde-fuerte); background:var(--app-surface);color:var(--app-ink-2);font-size:var(--app-t-caption); font-weight:500;cursor:pointer; } .chip[aria-pressed=true],.chip.is-on{ background:var(--app-brand);border-color:var(--app-brand);color:var(--app-on-brand); } .seg{ display:inline-flex;padding:3px;gap:3px;min-height:var(--app-tap);align-items:center;border-radius:var(--app-r-full); background:var(--app-surface-2);border:var(--mal-borde); } .seg button{ border:0;background:transparent;border-radius:var(--app-r-full);padding:.7rem 1rem;min-height:38px; font:inherit;font-size:var(--app-t-caption);font-weight:600;color:var(--app-ink-2);cursor:pointer; } .seg button[aria-selected=true]{background:var(--app-surface);color:var(--app-ink);box-shadow:var(--app-sombra-1)} /* ─── insignias y estados ─────────────────────────────────── */ .badge{ display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:var(--app-r-full); font-size:var(--app-t-micro);font-weight:600;background:var(--app-surface-2);color:var(--app-ink-2); } .badge-ok{background:var(--app-ok-soft);color:var(--app-ok)} .badge-warn{background:var(--app-warn-soft);color:var(--app-warn)} .badge-danger{background:var(--app-danger-soft);color:var(--app-danger)} .badge-info{background:var(--app-info-soft);color:var(--app-info)} /* ─── filas de lista ──────────────────────────────────────── */ .list-row{ display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center; min-height:var(--app-tap);padding:.75rem 0;border-bottom:var(--mal-separador); } .list-row:last-child{border-bottom:0} .icon-circle{ display:grid;place-items:center;width:40px;height:40px;border-radius:var(--app-r-full); background:color-mix(in oklab, var(--app-brand) 8%, var(--app-surface));color:var(--app-brand);flex:none; } /* ─── barra de progreso / resultado ───────────────────────── */ .result-bar{height:10px;border-radius:var(--app-r-full);background:var(--app-surface-2);overflow:hidden} .result-bar > span{display:block;height:100%;background:var(--app-brand);border-radius:inherit;transition:width var(--app-dur) var(--app-ease)} .result-bar.result-winner > span{background:var(--app-ok)} /* ─── navegación inferior ─────────────────────────────────── */ .navbar{ position:sticky;bottom:0;display:flex;justify-content:space-around;gap:.25rem; padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background:var(--mal-relleno-barra); -webkit-backdrop-filter:var(--mal-vidrio-barra);backdrop-filter:var(--mal-vidrio-barra); border-top:var(--mal-separador); } .nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem; min-height:var(--app-tap);padding:.4rem 0;border:0;background:none;cursor:pointer; font-size:var(--app-t-micro);font-weight:600;color:var(--app-ink-3);text-decoration:none; } .nav-item[aria-current=page]{color:var(--app-brand)} /* ─── hoja inferior ───────────────────────────────────────── */ .sheet{ background:var(--app-sheet);border-radius:var(--app-r-l) var(--app-r-l) 0 0; padding:1rem 1.15rem 1.5rem;box-shadow:var(--app-sombra-2); } .sheet-handle{width:38px;height:4px;border-radius:var(--app-r-full);background:var(--app-line-strong);margin:0 auto .85rem} .sheet-title{font-size:var(--app-t-title);font-weight:700} .sheet-sub{font-size:var(--app-t-caption);color:var(--app-ink-3)} /* [hidden] tiene que ganarle a display:flex — si no, el paso 1 y el botón de volver salen a la vez. Trampa real de la POC de acolita. */ [hidden]{display:none !important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} } /* ─── tinte por app ─────────────────────────────────────────── El tema de producto es neutro; cada app le pone su color. Va en la raíz y junto al tema a propósito: con un selector de menos peso, `:root[data-marca="apps"]` le ganaría y el color de la app no se vería nunca. Y mueve `--ref-marca`, no solo el alias, para que un componente del sistema —un `.btn--rojo`— también se tiña. */ :root[data-app="quanto"]{--ref-marca:#c41e1e;--ref-marca-2:#8b1515;--ref-marca-txt:#c41e1e; --ref-sobre-marca:#fff;--app-brand:#c41e1e;--app-brand-deep:#8b1515;--app-on-brand:#fff} :root[data-app="agro"]{--ref-marca:#1f7a3d;--ref-marca-2:#175c2e;--ref-marca-txt:#1f7a3d; --ref-sobre-marca:#fff;--app-brand:#1f7a3d;--app-brand-deep:#175c2e;--app-on-brand:#fff} :root[data-app="jacky"]{--ref-marca:#2f7657;--ref-marca-2:#205c43;--ref-marca-txt:#2f7657; --ref-sobre-marca:#fff;--app-brand:#2f7657;--app-brand-deep:#205c43;--app-on-brand:#fff} :root[data-app="cds"]{--ref-marca:#33618f;--ref-marca-2:#26496b;--ref-marca-txt:#33618f; --ref-sobre-marca:#fff;--app-brand:#33618f;--app-brand-deep:#26496b;--app-on-brand:#fff} @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"])[data-app="quanto"]{--ref-marca:#ff6b6b;--ref-marca-2:#ff9999; --ref-marca-txt:#ff6b6b;--ref-sobre-marca:#1a1d1a;--app-brand:#ff6b6b;--app-on-brand:#1a1d1a} :root:not([data-tema="claro"])[data-app="agro"]{--ref-marca:#5cbf85;--ref-marca-2:#8fd8a9; --ref-marca-txt:#5cbf85;--ref-sobre-marca:#12210f;--app-brand:#5cbf85;--app-on-brand:#12210f} :root:not([data-tema="claro"])[data-app="jacky"]{--ref-marca:#6dc39b;--ref-marca-2:#9adcbd; --ref-marca-txt:#6dc39b;--ref-sobre-marca:#0f3d2e;--app-brand:#6dc39b;--app-on-brand:#0f3d2e} :root:not([data-tema="claro"])[data-app="cds"]{--ref-marca:#8ab4e0;--ref-marca-2:#b3d1ef; --ref-marca-txt:#8ab4e0;--ref-sobre-marca:#12233a;--app-brand:#8ab4e0;--app-on-brand:#12233a} } :root[data-tema="oscuro"][data-app="quanto"]{--ref-marca:#ff6b6b;--ref-marca-2:#ff9999; --ref-marca-txt:#ff6b6b;--ref-sobre-marca:#1a1d1a;--app-brand:#ff6b6b;--app-on-brand:#1a1d1a} :root[data-tema="oscuro"][data-app="agro"]{--ref-marca:#5cbf85;--ref-marca-2:#8fd8a9; --ref-marca-txt:#5cbf85;--ref-sobre-marca:#12210f;--app-brand:#5cbf85;--app-on-brand:#12210f} :root[data-tema="oscuro"][data-app="jacky"]{--ref-marca:#6dc39b;--ref-marca-2:#9adcbd; --ref-marca-txt:#6dc39b;--ref-sobre-marca:#0f3d2e;--app-brand:#6dc39b;--app-on-brand:#0f3d2e} :root[data-tema="oscuro"][data-app="cds"]{--ref-marca:#8ab4e0;--ref-marca-2:#b3d1ef; --ref-marca-txt:#8ab4e0;--ref-sobre-marca:#12233a;--app-brand:#8ab4e0;--app-on-brand:#12233a} /* tipografía de producto · se usa igual en cualquier tema */ .caption{font-size:var(--app-t-caption);color:var(--mal-on-surface-3)} .tabular{font-family:var(--mal-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .display-num{ font-family:var(--mal-mono);font-size:var(--app-t-display);font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1; } .display-num small{font-family:var(--mal-texto);font-size:.35em;font-weight:500; color:var(--mal-on-surface-3);margin-left:.3em} .screen-title{font-size:var(--app-t-screen);font-weight:700;letter-spacing:-.02em;line-height:1.2} .app-col{width:min(100% - 2rem, var(--app-ancho));margin-inline:auto} /* ══════════════════════════════════════════════════════════════ CAPA 4 · PRENSA Venía de `mercio.css`. Misma idea: una tarjeta de noticia, una lista numerada de opinión o una franja de destacados sirven en cualquier tema; en el del periódico se ven como prensa porque el tema pone serif, radio 0 y cero sombra. ══════════════════════════════════════════════════════════════ */ :root{ --em-base:var(--mal-surface); --em-base-2:var(--mal-surface-alt); --em-surface:var(--mal-bg-2); --em-surface-2:var(--mal-on-surface-2); --em-inverse:var(--mal-on-surface); --em-contrast:var(--mal-on-surface); --em-contrast-2:var(--mal-on-surface-2); --em-contrast-3:var(--mal-on-surface-3); --em-accent:var(--mal-primary); --em-accent-blue:var(--ref-acento); --em-border:var(--mal-outline); --em-serif:var(--ref-display); --em-sans:var(--ref-mono); --em-t-badge:9px; --em-t-caption:14px; --em-t-button:16px; --em-t-body:var(--mal-t-cuerpo); --em-t-h3:var(--mal-t-h3); --em-t-h2:var(--mal-t-h2); --em-t-h1:var(--mal-t-h1); --em-t-display:40px; --em-4:var(--mal-e1); --em-8:var(--mal-e2); --em-12:var(--mal-e3); --em-16:var(--mal-e4); --em-20:var(--mal-e4); --em-24:var(--mal-e5); --em-32:var(--mal-e6); --em-48:var(--mal-e7); --em-64:var(--mal-e8); --em-radio:var(--mal-r-s); --em-ancho:1280px; --em-franja:#141414; --em-franja-txt:#fafafa; --em-franja-meta:#a8a8a8; } /* ─── titulares ───────────────────────────────────────────── */ .em-h1{font-family:var(--em-serif);font-size:var(--em-t-h1);font-weight:700;line-height:1.15;letter-spacing:-.3px} .em-h2{font-family:var(--em-serif);font-size:var(--em-t-h2);font-weight:700;line-height:1.2;letter-spacing:-.2px} .em-h3{font-family:var(--em-serif);font-size:var(--em-t-h3);font-weight:700;line-height:1.2} .em-h4{font-family:var(--em-serif);font-size:var(--em-t-body);font-weight:700;line-height:1.3} .em-display{font-family:var(--em-serif);font-size:var(--em-t-display);font-weight:700;line-height:1.1;letter-spacing:-.4px} .em-caption{font-family:var(--em-sans);font-size:var(--em-t-caption);font-weight:var(--em-sans-peso,500);color:var(--em-contrast-3)} p a,.em-link{color:var(--em-contrast);text-decoration:underline} /* el enlace de texto tiene más peso que los componentes: hay que devolvérselo o un botón dentro de un

sale subrayado. */ /* `p a` tiene más peso que cualquier componente: hay que devolvérselo a todo lo que es botón o marca, incluidos los del sistema (.btn, .tag…), o salen subrayados dentro de un párrafo. */ .em-btn,.em-logo,.em-nav a,.em-card h3 a,.em-opinion a, .btn,.tag,.chip,.filter-chip,.enlaces a,.lista a{text-decoration:none} p a:hover,.em-link:hover{color:var(--em-accent)} /* ─── la marca: "EL MERCIO." con el punto en rojo ─────────── */ .em-logo{ font-family:var(--em-serif);font-weight:700;letter-spacing:-.5px;line-height:1; color:var(--em-contrast);text-decoration:none;display:inline-block; } .em-logo i{font-style:normal;color:var(--em-accent)} /* ══════════════════════════════════════════════════════════════ LA REGLA TIPOGRÁFICA DEL PERIÓDICO (Francisco, 2026-08-23) · Montserrat logotipo, marca, botones, iniciales y rótulos. SIEMPRE en mayúscula y NUNCA por debajo de 500: la Montserrat ligera se deshace al lado de una serif. · PT Serif 700 titulares. · PT Serif 400 texto. Con solo dos pesos en la serif, **la jerarquía la hace el tamaño**, no el peso. Por eso ningún titular baja de 700 ni sube de ahí: lo que distingue un h1 de un h2 es la escala, no la grasa. `--em-sans-peso` es el suelo de peso de la sans; quien necesite más lo pide, pero nadie puede pedir menos. ══════════════════════════════════════════════════════════════ */ :root[data-marca="mercio"]{ --em-sans-peso:500; --em-sans-tracking:.06em; } /* Los RÓTULOS, en mayúscula: son etiquetas de una o dos palabras. Ojo con la frontera —una descripción de sección, un pie de foto o una frase legal también van en la sans, y en versalitas no se leen—. Esas llevan la sans y el peso, pero NO la caja alta: son `.em-frase`. */ :root[data-marca="mercio"] :is(.em-kicker,.em-badge,.em-meta, .em-post-nav__label,.em-podcast-rss time,.em-menu-toggle, .em-nav,.em-nav-links){ text-transform:uppercase; letter-spacing:var(--em-sans-tracking); font-weight:var(--em-sans-peso); } /* La sans en frases: mismo peso mínimo, caja normal. */ :root[data-marca="mercio"] :is(.em-caption,.em-section-description, .em-article figcaption,.em-figcaption,.em-frase){ font-family:var(--em-sans); font-weight:var(--em-sans-peso); text-transform:none; letter-spacing:normal; } /* El logotipo y los botones piden su propio peso, más alto. */ :root[data-marca="mercio"] :is(.em-logo,.em-btn,.btn){text-transform:uppercase} /* ─── rótulo de sección / badge ───────────────────────────── */ .em-badge{ font-family:var(--em-sans);font-size:var(--em-t-badge);font-weight:700;letter-spacing:1px; text-transform:uppercase;color:var(--em-base);background:var(--em-accent); padding:var(--em-4) var(--em-8);border-radius:var(--em-radio);display:inline-block; } .em-badge--oscuro{background:var(--em-inverse)} .em-kicker{ font-family:var(--em-sans);font-size:var(--mal-t-mini);font-weight:700;letter-spacing:1.2px; text-transform:uppercase;color:var(--em-accent); } .em-meta{font-family:var(--em-sans);font-size:var(--em-t-caption);font-weight:var(--em-sans-peso,500);color:var(--em-contrast-3)} /* ─── botón ───────────────────────────────────────────────── */ .em-btn{ display:inline-block;font-family:var(--em-sans);font-size:var(--em-t-button);font-weight:700; letter-spacing:.2px;color:var(--em-base);background:var(--em-accent);text-decoration:none; padding:var(--em-12) var(--em-24);border:0;border-radius:var(--em-radio);cursor:pointer; transition:background .2s ease; } .em-btn:hover{background:var(--em-inverse);color:var(--em-base)} .em-btn--linea{background:transparent;color:var(--em-contrast);border:var(--ref-borde) solid var(--em-contrast);background:var(--mal-campo)} .em-btn--linea:hover{background:var(--em-contrast);color:var(--em-base)} /* ─── cabecera del periódico ──────────────────────────────── */ .em-header{ display:flex;align-items:center;justify-content:space-between;gap:var(--em-24); padding:var(--em-16) 0;border-bottom:var(--mal-separador);background:var(--em-base); } /* El color va en el CONTENEDOR, no en el enlace: el `` que genera el bloque de navegación de WordPress lleva `color:inherit` con más peso que cualquier regla nuestra, y la cabecera hereda un gris (#e6e6e6, el token de borde) que WordPress le cuelga por el `has-border-color`. Vistiendo el `