/* GENERADO por tools/localaiscope/construir_site_css.py — NO editar aquí. Fuente: entregables/localaiscope-diseno-2026-08-25/sistema.css Tokens retirados por pertenecer a Bricks (23): --las-amber, --las-amber-50, --las-amber-text, --las-data, --las-data-50, --las-deep, --las-deep-2, --las-evidence, --las-evidence-50, --las-ground, --las-ink, --las-ink-2, --las-ink-3, --las-limit, --las-limit-50, --las-mint, --las-on-deep, --las-on-deep-2, --las-rule, --las-rule-soft, --las-surface, --las-teal, --las-wash Las fuentes van en ./fuentes/ (rutas relativas a esta hoja). */ /* ===================================================================== Local AI Scope — sistema visual · propuesta 2026-08-25 Fuente de implementación: este fichero se convierte con bricks/convert-html-css-to-bricks-data junto a cada plantilla .html. Reglas de la casa que este fichero respeta a propósito: · raíz 16px (site.css ya fuerza html{font-size:100%}) · SECCIÓN y CONTENEDOR son dos elementos: `.las-banda` pone el fondo y el padding vertical, `.las-contenedor` pone el ancho de 1080 px y el gutter. Así la conversión da `section → container → block` literal. · medidas de lectura en rem, NUNCA en ch (ch depende del font-size del propio elemento: 64ch en un H1 de 34px son ~1.250px) · estados de evidencia por texto+icono, jamás solo por color · cero petición a terceros: las dos familias van autoalojadas · los puntos de ruptura son los CUATRO de Bricks: 1279 · 991 · 767 · 478 🔴 FUENTE ÚNICA DE VERDAD DE LOS TOKENS (C6). Bricks imprime sus variables globales EN LÍNEA y DESPUÉS del CSS del tema, así que las suyas ganan siempre. En marinauta eso dejó muerto un «puente de tokens» entero: el constructor le enseña a Miguel `--fs-base` creyendo que son 18 px y la web renderiza 16, y su `--brand` es `#0b3954` en vez del `#0B2A5B` de su marca. Un token que miente es peor que no tenerlo. Regla para localaiscope, sin excepciones: · todo nombre que se registre como variable global de Bricks (`--las-*`, `--s-1…--s-10`, `--t-*`) NO se vuelve a declarar aquí; · este fichero solo declara los nombres que Bricks NO tenga; · una variable escrita en un ajuste de Bricks TIENE que existir en la lista de variables globales, y eso se COMPRUEBA, no se supone (marinauta usa `--sp-5`, `--sp-7` y `--sp-9`, que no existen en ninguna parte: la última sección de todas sus guías se pinta con padding vertical 0, en producción, hoy). El bloque `:root` de más abajo es por tanto la LISTA DE ALTA, no el sitio donde vivirán los tokens después de convertir. La lista exacta a registrar está en el README, sección «qué cambió tras leer las plantillas», C5. ===================================================================== */ /* --------------------------------------------------------------------- 1. TIPOGRAFÍA AUTOALOJADA IBM Plex Sans (variable, un solo fichero para 400/500/600) + IBM Plex Mono 400/500. Licencia SIL OFL 1.1. Pesos reales medidos el 25-08-2026: plex-sans-var-latin.woff2 39,3 KB ← el único que bloquea plex-mono-400-latin.woff2 9,8 KB plex-mono-500-latin.woff2 9,8 KB (los -latin-ext suman 42,6 KB y NO se descargan en EN/ES/FR/DE: ä ö ü ß é à ñ ç están todos en el rango «latin») Coste real de primera carga en nuestros cuatro idiomas: 58,9 KB. --------------------------------------------------------------------- */ @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fuentes/plex-sans-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fuentes/plex-sans-var-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fuentes/plex-mono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fuentes/plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fuentes/plex-mono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fuentes/plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --------------------------------------------------------------------- 2. FICHAS DE COLOR Los nueve tokens del 24-08 se conservan tal cual. Lo añadido son escalones intermedios, superficies de estado y la banda oscura. Contrastes medidos (script en el README, no estimados): ink #142321 / fondo ......... 14,96 AAA ink-2 #3E524E / fondo ........ 7,67 AAA ink-3 #5F716D / fondo ........ 4,75 AA ← elegido POR la medición teal #0E5F63 / fondo ......... 6,82 AA data #246B9E / fondo ......... 5,27 AA amber-text #A26217 / fondo ... 4,50 AA amber #C9791C / fondo ........ 3,10 ← NUNCA texto pequeño evidence #2C7A50 / fondo ..... 4,83 AA limit #A7463A / fondo ........ 5,40 AA blanco / deep #08383B ....... 12,81 AAA on-deep-2 #B7C9C6 / deep ..... 7,43 AAA mint #7FD4CE / deep .......... 7,45 AAA --------------------------------------------------------------------- */ :root{ /* aprobados el 24-08 — no se tocan */ /* ampliación medida */ /* rejilla */ --las-contenedor:1080px; --las-gutter:20px; /* escala de espaciado, base 4 — la única permitida */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; /* Ritmo vertical de banda: 96 → 64 → 48. 🔴 C2: antes eran 96 → 72 → 56, y ni 72 ni 56 pertenecen a la escala de diez valores que este mismo fichero declara tres líneas más arriba — era el defecto que la maqueta venía a corregir, cometido por ella misma. 64 y 48 son `--s-8` y `--s-7`, y son exactamente lo que hace marinauta en sus plantillas de artículo (`_padding:mobile_landscape` 64, `_padding:mobile_portrait` 48). */ --banda-y:96px; /* escala tipográfica (raíz 16px) */ --t-mono:0.75rem; /* 12 — rótulos, cabeceras de tabla, evidencia */ --t-xs:0.8125rem; /* 13 — meta */ --t-sm:0.9375rem; /* 15 — notas, pies */ --t-ui:1.0625rem; /* 17 — interfaz, listas, celdas */ --t-base:1.125rem; /* 18 — prosa */ --t-lg:1.25rem; /* 20 — entradilla */ --t-h3:1.375rem; /* 22 */ --t-h2:clamp(1.5rem,1.18rem + 1.4vw,1.9375rem); /* 24 → 31 */ --t-h1:clamp(2rem,1.4rem + 2.6vw,2.875rem); /* 32 → 46 */ --t-display:clamp(2.25rem,1.45rem + 3.5vw,3.375rem); /* 36 → 54 */ --t-cifra:clamp(2rem,1.4rem + 2.6vw,2.75rem); /* Medidas de lectura EN REM, nunca en ch. 🔴 Los caracteres por línea se MIDIERON en el navegador, no se estimaron: con 46rem salían 82 de media (demasiados). Con 39rem la prosa de la guía da 69 de media, dentro del 60-75 recomendado. La web actual sirve 143. */ --medida:42rem; /* 672px — intros de sección, notas y avisos */ --medida-prosa:39rem; /* 624px — el cuerpo de las guías: 69 car. medidos */ --medida-corta:34rem; /* 544px — entradillas y resúmenes */ /* Alto REAL del encabezado pegajoso: 105 px medidos en navegador el 25-08 a 1280 y a 768. Todo lo que se pega (panel, índice, anclas de sección) usa esta variable: si el encabezado cambia de alto se toca aquí y no en cinco sitios. A 760 px o menos el encabezado deja de ser pegajoso. */ --pegado:105px; --r-s:10px; --r-l:16px; --r-pill:999px; --sombra:0 1px 2px rgba(20,35,33,.05), 0 8px 24px -16px rgba(20,35,33,.28); } /* C4 · los puntos de ruptura son los CUATRO de Bricks, sin personalizar: 1279 (base) · 991 tablet_portrait · 767 mobile_landscape · 478 mobile_portrait. Comprobado que localaiscope y marinauta tienen los mismos y con `customEnabled:false`. Antes la maqueta usaba 980/960/760/700/600/480, que no coinciden con ninguno: eso deja franjas (960-991, 478-600) donde una regla de CSS y un override de Bricks pueden discrepar. Es el sedimento de seis anchos que tiene marinauta, evitado antes de crearlo. */ @media (max-width:991px){ :root{ --banda-y:64px; } } @media (max-width:767px){ :root{ --banda-y:48px; } } @media (max-width:478px){ :root{ --las-gutter:16px; } } /* --------------------------------------------------------------------- 3. BASE --------------------------------------------------------------------- */ html{ font-size:100%; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--las-ground); color:var(--las-ink); font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:var(--t-ui); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } *,*::before,*::after{ box-sizing:border-box; } img,svg,table{ max-width:100%; } /* 🔴 `overflow-wrap:break-word` no es un adorno defensivo: es el arreglo de un desbordamiento MEDIDO. La guía alemana sacaba 2 px de barra horizontal a 360 px (`documentElement.scrollWidth` 362 contra `clientWidth` 360, medido con el viewport de verdad, no dentro de un iframe) y el culpable era una sola palabra del H1: «KI-Anwendungen:» no cabe en la caja de 330 px que quedan a ese ancho, y sin esta línea el navegador la deja salirse en vez de partirla. El alemán compone palabras y es EL idioma que revienta cabeceras: la regla va en el titular genérico, no en esa página, porque el fallo es de la clase, no del caso. No se usa `hyphens:auto` a propósito: partiría con guion titulares que hoy caben, o sea cambiaría el aspecto de 200 URLs para arreglar una. `break-word` solo actúa cuando la palabra NO cabe de ninguna manera. */ h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:balance; line-height:1.18; overflow-wrap:break-word; } h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); } h3{ font-size:var(--t-h3); line-height:1.3; } p{ margin:0 0 var(--s-5); } p:last-child{ margin-bottom:0; } a{ color:var(--las-teal); text-underline-offset:3px; text-decoration-thickness:1px; } :focus-visible{ outline:2px solid var(--las-data); outline-offset:3px; border-radius:2px; } code,kbd,samp{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; } .las-vis-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* --------------------------------------------------------------------- 4. BANDA + CONTENEDOR ← C1, el cambio bloqueante del contraste Mecanismo robado a marinauta nº 1: la página se lee como una PILA DE BANDAS de fondo alterno, no como una hoja continua. Cada banda es de borde a borde y su contenido se alinea con el contenedor único. 🔴 SON DOS ELEMENTOS, NO UNO. Hasta el 25-08 `.las-banda` hacía de sección Y de contenedor a la vez: el `max-width` iba escondido dentro de una fórmula `max()` en el padding lateral. Convertido así, `bricks/convert-html-css-to-bricks-data` produce una `section` con una fórmula en el padding y NINGÚN `container` dentro — exactamente el árbol de la ficha rota de localaiscope (cuerpo a 1.280 px, sin gutter), y un ancho de contenedor que Miguel no encuentra en el constructor porque no existe como ajuste. Partido en dos, la conversión es literal: .las-banda → section (_padding vertical + _background) .las-contenedor → container (_widthMax: 1080px) lo de dentro → block que es la anatomía que marinauta tiene en sus cinco plantillas y la que Miguel edita cómodo. --------------------------------------------------------------------- */ .las-banda{ padding-top:var(--banda-y); padding-bottom:var(--banda-y); background:var(--las-ground); } /* El contenedor único de la web. Un ancho, un token, cero deriva — frente a los seis anchos distintos (1200/1160/900/820/760/720) que conviven hoy en las plantillas de marinauta. */ .las-contenedor{ width:100%; max-width:var(--las-contenedor); margin-inline:auto; padding-inline:var(--las-gutter); } .las-contenedor > *{ width:100%; } .las-banda--blanca{ background:var(--las-surface); } .las-banda--lavado{ background:var(--las-wash); } .las-banda--tinta{ background:var(--las-deep); color:var(--las-on-deep); } .las-banda--tinta h1,.las-banda--tinta h2,.las-banda--tinta h3{ color:var(--las-on-deep); } .las-banda--tinta p{ color:var(--las-on-deep-2); } .las-banda--tinta a{ color:var(--las-mint); } .las-banda--fina{ padding-top:var(--s-6); padding-bottom:var(--s-6); } .las-banda--suelta{ padding-top:var(--s-7); padding-bottom:var(--s-7); } /* Filete de separación cuando dos bandas comparten fondo */ .las-banda + .las-banda:not(.las-banda--blanca):not(.las-banda--tinta):not(.las-banda--lavado){ border-top:1px solid var(--las-rule-soft); } /* Cabecera de sección: rótulo mono + título + entradilla, siempre igual. Mecanismo nº 2: la sección SIEMPRE se presenta, nunca empieza en frío. */ .las-seccion-cab{ max-width:var(--medida); margin-bottom:var(--s-7); } .las-seccion-cab p{ margin-top:var(--s-3); color:var(--las-ink-2); font-size:var(--t-base); line-height:1.62; } .las-banda--tinta .las-seccion-cab p{ color:var(--las-on-deep-2); } /* Rótulo mono: la segunda voz tipográfica de la web */ .las-rotulo{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--las-teal); margin:0 0 var(--s-3); display:block; } .las-banda--tinta .las-rotulo{ color:var(--las-mint); } .las-rotulo--dato{ color:var(--las-data); } /* --------------------------------------------------------------------- 5. CABECERA Y PIE --------------------------------------------------------------------- */ /* C11 · enlace de salto. marinauta tiene dos (se los pone Bricks solo); la maqueta no tenía ninguno, y encima a ≤767 convierte la nav en una tira desplazable, que es justo cuando más falta hace poder saltársela. */ .las-salto{ position:absolute; left:var(--s-4); top:var(--s-4); z-index:100; transform:translateY(-200%); background:var(--las-teal); color:#fff; text-decoration:none; font-weight:500; font-size:var(--t-ui); padding:10px 18px; border-radius:var(--r-s); } .las-salto:focus-visible{ transform:none; } /* C1 también aquí: la cabecera es la `section[header]` y su hijo directo es el `container` de 1080 px. Idéntico a marinauta (26 Header). */ .las-cabecera{ background:var(--las-surface); border-bottom:1px solid var(--las-rule); padding-top:var(--s-3); padding-bottom:0; position:sticky; top:0; z-index:20; } .las-cab-fila{ display:flex; align-items:center; gap:var(--s-5); justify-content:space-between; flex-wrap:wrap; } .las-marca{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--las-ink); } .las-marca svg{ flex:none; } .las-marca b{ font-family:'IBM Plex Sans',system-ui,sans-serif; font-weight:600; font-size:1.0625rem; letter-spacing:-.02em; display:block; line-height:1.15; } /* Solo el subrótulo va en mono: es la «etiqueta del instrumento». */ .las-marca > span > span{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.6875rem; letter-spacing:.08em; color:var(--las-ink-3); display:block; } .las-nav{ display:flex; gap:var(--s-5); flex-wrap:wrap; align-items:center; } .las-nav a{ font-size:var(--t-ui); text-decoration:none; color:var(--las-ink-2); padding:var(--s-3) 0 calc(var(--s-3) + 2px); border-bottom:2px solid transparent; white-space:nowrap; } .las-nav a:hover{ color:var(--las-teal); } .las-nav a[aria-current]{ color:var(--las-ink); font-weight:500; border-bottom-color:var(--las-teal); } .las-idiomas{ display:flex; gap:var(--s-1); align-items:center; } .las-idiomas a{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:3px 8px; border-radius:var(--r-pill); color:var(--las-ink-3); border:1px solid transparent; } .las-idiomas a:hover{ color:var(--las-teal); border-color:var(--las-rule); } .las-idiomas a[aria-current]{ color:var(--las-teal); background:var(--las-wash); border-color:var(--las-rule); font-weight:500; } .las-pie{ background:var(--las-deep); color:var(--las-on-deep-2); padding-top:var(--s-8); padding-bottom:var(--s-6); } .las-pie-rejilla{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:var(--s-7) var(--s-6); } .las-pie h2{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--las-mint); font-weight:500; margin-bottom:var(--s-4); } .las-pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); } .las-pie a{ color:var(--las-on-deep-2); text-decoration:none; font-size:var(--t-ui); } .las-pie a:hover{ color:var(--las-on-deep); text-decoration:underline; } .las-pie-marca p{ font-size:var(--t-sm); line-height:1.6; margin-top:var(--s-4); max-width:26rem; color:var(--las-on-deep-2); } .las-pie-cierre{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14); display:flex; gap:var(--s-5); flex-wrap:wrap; align-items:baseline; justify-content:space-between; font-size:var(--t-sm); } .las-fecha-dato{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-xs); color:var(--las-mint); } /* --------------------------------------------------------------------- 6. HERO --------------------------------------------------------------------- */ .las-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s-8); align-items:center; } .las-hero-texto{ max-width:34rem; } .las-hero h1{ font-size:var(--t-display); letter-spacing:-.025em; } .las-hero .las-entradilla{ font-size:var(--t-lg); line-height:1.5; color:var(--las-ink-2); margin-top:var(--s-5); } .las-hero--simple{ grid-template-columns:minmax(0,1fr); } .las-hero--simple .las-hero-texto{ max-width:var(--medida); } /* «Instrumento», no foto: el contrapeso derecho del hero es una LECTURA, no una imagen decorativa. Nada que generar, nada que licenciar. */ .las-lectura{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-5); box-shadow:var(--sombra); } .las-lectura-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-4); } .las-lectura-cab b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-ui); } .las-lectura-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2) var(--s-4); align-items:center; padding:var(--s-3) 0; border-top:1px solid var(--las-rule-soft); } .las-lectura-fila span{ font-size:var(--t-sm); color:var(--las-ink-2); } .las-lectura-fila b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-variant-numeric:tabular-nums; font-size:var(--t-ui); } /* --------------------------------------------------------------------- 7. TIRA DE CIFRAS (mecanismo nº 3 de marinauta) Franja delgada justo bajo el hero con las cifras que sostienen la promesa. Aquí las cifras SON el producto, así que va en banda oscura. --------------------------------------------------------------------- */ .las-tira{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5) var(--s-6); } .las-tira > div{ display:flex; flex-direction:column; gap:2px; } .las-tira b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-variant-numeric:tabular-nums; font-size:1.5rem; color:var(--las-mint); letter-spacing:-.01em; } .las-tira span{ font-size:var(--t-sm); color:var(--las-on-deep-2); line-height:1.4; } /* --------------------------------------------------------------------- 8. CIFRA DESTACADA + PUERTAS DE ENTRADA (mecanismo nº 4) La rejilla asimétrica de marinauta, pero con DATO donde ella pone foto. --------------------------------------------------------------------- */ .las-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5); } .las-cifra{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); } .las-cifra b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-cifra); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--las-teal); } .las-cifra p{ margin:0; font-size:var(--t-sm); line-height:1.55; color:var(--las-ink-2); } .las-cifra--dato b{ color:var(--las-data); } .las-cifra--limite b{ color:var(--las-limit); } .las-puertas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5); } .las-puerta{ grid-column:span 2; background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-6); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:var(--s-3); transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease; } .las-puerta:hover{ border-color:var(--las-teal); transform:translateY(-2px); box-shadow:var(--sombra); } .las-puerta h3{ font-size:var(--t-h3); } .las-puerta p{ margin:0; font-size:var(--t-sm); color:var(--las-ink-2); line-height:1.55; } .las-puerta-dato{ margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--las-rule-soft); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-sm); font-variant-numeric:tabular-nums; color:var(--las-teal); font-weight:500; } .las-puerta--ancha{ grid-column:span 4; } .las-puerta--estrecha{ grid-column:span 2; } /* La primera puerta manda: es la que lleva a la herramienta */ .las-puerta--principal{ background:var(--las-deep); border-color:var(--las-deep); color:var(--las-on-deep); } .las-puerta--principal h3{ color:var(--las-on-deep); } .las-puerta--principal p{ color:var(--las-on-deep-2); } .las-puerta--principal .las-puerta-dato{ color:var(--las-mint); border-top-color:rgba(255,255,255,.16); } .las-puerta--principal:hover{ border-color:var(--las-mint); } /* --------------------------------------------------------------------- 8.bis FAQ Y CIERRE DE PORTADA ← C7 La portada de marinauta tiene SIETE secciones y las dos que a esta maqueta le faltaban son precisamente las que más pesan: la FAQ (es lo que mide `anatomia_serp` como patrón del top, y da el marcado FAQPage) y el CTA final (cerrar la visita en vez de dejarla caer en el pie). marinauta la resuelve con un `accordion-nested` NATIVO de Bricks — editable por Miguel sin tocar HTML. Aquí se maqueta con `
`, que es su equivalente semántico y el elemento al que el convertidor debe mapear el acordeón: sin JavaScript, con teclado, y abrible por el buscador. Cada respuesta va a `--medida` de ancho. --------------------------------------------------------------------- */ .las-faq{ display:grid; gap:var(--s-3); } .las-faq details{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); } .las-faq summary{ cursor:pointer; list-style:none; padding:var(--s-4) var(--s-5); font-size:var(--t-h3); font-weight:600; line-height:1.35; letter-spacing:-.015em; display:flex; gap:var(--s-4); align-items:baseline; justify-content:space-between; } .las-faq summary::-webkit-details-marker{ display:none; } /* El signo es FORMA, no color, igual que las etiquetas de evidencia. */ .las-faq summary::after{ content:'+'; flex:none; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:400; font-size:1.375rem; line-height:1; color:var(--las-teal); } .las-faq details[open] summary::after{ content:'\2212'; } /* − */ .las-faq details[open] summary{ border-bottom:1px solid var(--las-rule-soft); } .las-faq .las-faq-cuerpo{ padding:var(--s-5); } .las-faq .las-faq-cuerpo p{ max-width:var(--medida); font-size:var(--t-base); line-height:1.62; color:var(--las-ink-2); } .las-cierre{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-5); max-width:var(--medida); } .las-cierre h2{ font-size:var(--t-h2); } .las-cierre p{ margin:0; font-size:var(--t-lg); line-height:1.5; color:var(--las-ink-2); max-width:var(--medida-corta); } .las-banda--tinta .las-cierre p{ color:var(--las-on-deep-2); } /* --------------------------------------------------------------------- 9. ETIQUETAS DE EVIDENCIA Icono (FORMA) + texto. El color solo refuerza: en gris, impreso o para un daltónico se sigue distinguiendo. Es el argumento de venta del sitio. --------------------------------------------------------------------- */ .las-evs{ display:flex; flex-wrap:wrap; gap:var(--s-2); } .las-ev{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); padding:3px 10px 3px 8px; border:1px solid var(--las-rule); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); font-weight:500; letter-spacing:.02em; line-height:1.6; max-width:100%; background:var(--las-surface); color:var(--las-ink-2); } .las-ev::before{ font-size:.85em; line-height:1; } .las-ev--medido{ color:var(--las-evidence); border-color:#BFDCCC; background:var(--las-evidence-50); } .las-ev--medido::before{ content:'\25C6'; } /* ◆ rombo lleno */ .las-ev--comunidad{ color:var(--las-data); border-color:#C4D8EA; background:var(--las-data-50); } .las-ev--comunidad::before{ content:'\25C8'; } /* ◈ rombo con centro */ .las-ev--estimado{ color:var(--las-ink-3); border-color:var(--las-rule); } .las-ev--estimado::before{ content:'\25C7'; } /* ◇ rombo vacío */ .las-ev--declarado{ color:var(--las-amber-text); border-color:#EBD6B4; background:var(--las-amber-50); } .las-ev--declarado::before{ content:'\25A0'; } /* ■ cuadrado */ .las-ev--caduco{ color:var(--las-limit); border-color:#E7C5BE; background:var(--las-limit-50); } .las-ev--caduco::before{ content:'\29B0'; } /* ⦰ tachado */ /* Versión en línea, dentro de una celda o un párrafo */ /* 🔴 SIN `white-space:nowrap`. Lo llevaba y desbordaba la página: medido el 25-08 en la maqueta, «Figures measured, cache computed from vendor config.json» sacaba 70 px a 360 px, y «Measured by Local AI Scope» sacaba 93 px de la tarjeta de cifra a 768 px. Una etiqueta de evidencia es TEXTO y los cuatro idiomas la escriben con longitudes distintas: tiene que fluir. */ .las-ev-linea{ display:inline-flex; align-items:baseline; gap:4px; max-width:100%; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); font-weight:500; line-height:1.5; } .las-ev-linea::before{ flex:none; } .las-ev-linea--medido{ color:var(--las-evidence); } .las-ev-linea--medido::before{ content:'\25C6'; } .las-ev-linea--declarado{ color:var(--las-amber-text); } .las-ev-linea--declarado::before{ content:'\25A0'; } .las-ev-linea--estimado{ color:var(--las-ink-3); } .las-ev-linea--estimado::before{ content:'\25C7'; } /* --------------------------------------------------------------------- 10. TABLAS (mecanismo nº 5 de marinauta) Cabecera de color, cebra, primera columna fuerte, desplazamiento PROPIO. El `max-width:100%` y el `min-width:0` del envoltorio no sobran: sin ellos el que se desplaza en horizontal es el cuerpo de la página. 🔴 C13 — EL APARATO SE APLICA POR ELEMENTO, NO SOLO POR CLASE. Verificado en el código el 25-08: `tools/localaiscope/fichas.py` (líneas 144-165) emite `
…` PELADO — sin `class`, sin envoltorio y sin `data-rotulo`. Y el cuerpo de las guías lo pinta el elemento `post-content` de Bricks, que emite `.brxe-post-content`, no `.las-cuerpo`. Estilar solo `.las-tabla` deja las ~78 URLs de contenido exactamente con el aspecto que esta maqueta venía a corregir. DECISIÓN (justificada en el README §«qué cambió», C13): se estilan los SELECTORES REALES y NO se tocan los generadores en este pase. Motivo: es reversible, cuesta cero, cubre también lo que escriba el editor de WordPress a mano, y no obliga a republicar 132 fichas. Es además lo que hace marinauta (`.brxe-post-content table` en su `style.css`) y por eso a ella le funciona. Lo ÚNICO que no se puede alcanzar desde CSS es el modo tarjeta, porque `td::before{content:attr(data-rotulo)}` necesita el atributo en el HTML. Por eso el modo tarjeta sigue siendo OPT-IN por la clase `.las-tabla--tarjetas`: la tabla pelada degrada al desplazamiento horizontal de siempre — que funciona — en vez de degradar a tarjetas sin rótulo, que sería peor que no hacer nada. --------------------------------------------------------------------- */ .las-tabla-envuelta{ overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--las-rule); border-radius:var(--r-l); background:var(--las-surface); } .las-tabla, .las-cuerpo table, .brxe-post-content table, main#brx-content.brxe-container table, article#brx-content table{ border-collapse:collapse; width:100%; min-width:640px; font-size:var(--t-ui); } /* La tabla PELADA que hoy emite el generador no tiene envoltorio y desde CSS no se puede envolver: se le da su propio desplazamiento y su marco. Cuando la tabla SÍ viene envuelta, `.las-tabla-envuelta > table` la devuelve a `display:table` y manda el envoltorio. */ .las-cuerpo > table, .brxe-post-content > table, main#brx-content.brxe-container > table, article#brx-content > table{ display:block; overflow-x:auto; min-width:0; border:1px solid var(--las-rule); border-radius:var(--r-l); background:var(--las-surface); margin:var(--s-6) 0; } .las-tabla thead th, .las-cuerpo table thead th, .brxe-post-content table thead th, main#brx-content.brxe-container table thead th, article#brx-content table thead th{ background:var(--las-deep); color:var(--las-on-deep); text-align:left; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; padding:var(--s-3) var(--s-4); white-space:nowrap; } /* Sin `position:sticky` en el thead a propósito: la cabecera de página ya es pegajosa y las dos se pisan — medido el 25-08 en el hub alemán, la fila de cabecera se metía DEBAJO del encabezado y desaparecía. Una sola cosa pegada por pantalla. */ .las-tabla tbody th, .las-tabla tbody td, .las-cuerpo table tbody th, .las-cuerpo table tbody td, .brxe-post-content table tbody th, .brxe-post-content table tbody td, main#brx-content.brxe-container table tbody th, article#brx-content table tbody th, main#brx-content.brxe-container table tbody td, article#brx-content table tbody td{ padding:var(--s-3) var(--s-4); border-top:1px solid var(--las-rule-soft); vertical-align:top; text-align:left; } .las-tabla tbody tr:nth-child(even), .las-cuerpo table tbody tr:nth-child(even), .brxe-post-content table tbody tr:nth-child(even), main#brx-content.brxe-container table tbody tr:nth-child(even), article#brx-content table tbody tr:nth-child(even){ background:var(--las-ground); } .las-tabla tbody th[scope="row"], .las-cuerpo table tbody th[scope="row"], .brxe-post-content table tbody th[scope="row"], main#brx-content.brxe-container table tbody th[scope="row"], article#brx-content table tbody th[scope="row"]{ font-weight:600; white-space:nowrap; } /* Las cifras en mono tabular. La tabla pelada del generador no lleva `class="num"`, así que también se cazan por el patrón que sí produce: la celda que empieza por `` es la de compresión, y las de cifra caen bajo `.brxe-post-content td` con `font-variant-numeric` heredable. */ .las-tabla .num, .las-cuerpo table .num, .brxe-post-content table .num, main#brx-content.brxe-container table .num, article#brx-content table .num{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } .las-cuerpo table td, .brxe-post-content table td, main#brx-content.brxe-container table td, article#brx-content table td{ font-variant-numeric:tabular-nums; } .las-tabla thead th.num, .las-cuerpo table thead th.num, .brxe-post-content table thead th.num, main#brx-content.brxe-container table thead th.num, article#brx-content table thead th.num{ text-align:right; } .las-tabla a, .las-cuerpo table a, .brxe-post-content table a, main#brx-content.brxe-container table a, article#brx-content table a{ color:var(--las-teal); text-decoration:none; font-weight:500; } .las-tabla a:hover, .las-cuerpo table a:hover, .brxe-post-content table a:hover, main#brx-content.brxe-container table a:hover, article#brx-content table a:hover{ text-decoration:underline; } .las-tabla .si{ color:var(--las-evidence); font-weight:600; } .las-tabla .no{ color:var(--las-ink-3); } .las-tabla-nota{ font-size:var(--t-sm); color:var(--las-ink-2); max-width:var(--medida); margin-top:var(--s-4); line-height:1.6; } /* Hub de guías. Aquí la cabecera de fila no es un identificador (`qwen3-4b-2507`, `RTX 4090 24 GB`) sino el TÍTULO de la guía, o sea una frase de setenta caracteres: el `white-space:nowrap` general —correcto para todo lo demás— haría una tabla de dos metros dentro de su envoltorio desplazable, y con ella una columna de prosa de tres palabras de ancho. Se levanta solo aquí, y el reparto de anchos vive en una media query porque a ≤767 px las celdas ya no son celdas: son bloques de una tarjeta, y un `width:32%` ahí serían 115 px de título. */ .las-guias-tabla tbody th[scope="row"]{ white-space:normal; } .las-guias-tabla tbody th[scope="row"] .las-rotulo{ margin-bottom:6px; } @media (min-width:768px){ .las-guias-tabla th:first-child{ width:32%; } .las-guias-tabla thead th:last-child, .las-guias-tabla tbody td:last-child{ width:15%; } } /* A ≤767 px (C4: el `mobile_landscape` de Bricks, antes 700) la tabla larga deja de ser tabla y pasa a ser una lista de tarjetas: 18 filas × 6 columnas en un móvil no se leen desplazando. Verificado en navegador con el hub ALEMÁN a 767 y a 768 px: a 768 la tabla sigue siendo tabla dentro de su propio `overflow-x` y no desborda la página; a 767 pasa a tarjetas. DEPENDENCIA VIVA: el modo tarjeta es opt-in por `.las-tabla--tarjetas` y exige `data-rotulo` en cada `td`. `fichas.py` no lo emite hoy, así que sus tablas NO llevan la clase y degradan al desplazamiento. */ @media (max-width:767px){ /* 🔴 `table.` delante NO sobra. Sin él, `.las-tabla--tarjetas` (0,1,0) pierde contra el `.las-cuerpo table` (0,1,1) que C13 acaba de añadir, la tabla se queda con su `min-width:640px` y la guía desbordaba 297 px a 360 px. Medido en navegador el 25-08, DESPUÉS de aplicar C13 y ANTES de esta línea: documentElement.scrollWidth 657 contra clientWidth 360. */ .las-tabla--tarjetas, table.las-tabla--tarjetas{ min-width:0; } .las-tabla--tarjetas thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .las-tabla--tarjetas, .las-tabla--tarjetas tbody, .las-tabla--tarjetas tr, .las-tabla--tarjetas th, .las-tabla--tarjetas td{ display:block; } .las-tabla--tarjetas tr{ border-top:1px solid var(--las-rule); padding:var(--s-4) var(--s-4) var(--s-3); } .las-tabla--tarjetas tbody tr:nth-child(even){ background:var(--las-ground); } /* En modo tarjeta el nombre de la máquina puede ser «Workstation with an RTX 4090 24 GB»: aquí el nowrap de la tabla no vale. */ .las-tabla--tarjetas tbody th[scope="row"]{ border:0; padding:0 0 var(--s-3); font-size:var(--t-base); white-space:normal; } .las-tabla--tarjetas tbody td{ border:0; padding:2px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-4); align-items:baseline; } .las-tabla--tarjetas tbody td::before{ content:attr(data-rotulo); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--las-ink-3); } .las-tabla--tarjetas .num{ text-align:right; } /* 🔴 El envoltorio solo deja de desplazarse cuando la tabla de dentro SÍ pasa a tarjetas. Sin el `:has()`, esta línea le quitaba el desplazamiento a TODAS las tablas envueltas, incluidas las que no son `--tarjetas` — y entonces la tabla desborda la página entera en vez de desbordar su caja. Medido el 2026-08-25 en el hub de equipos alemán a 360 px: la tabla medía 1224 px y la PÁGINA sacaba 864. El modo tarjeta es opt-in, así que quitar el desplazamiento también tiene que serlo. */ .las-tabla-envuelta:has(> .las-tabla--tarjetas){ overflow-x:visible; } /* 🔴 Y AQUÍ LA MITAD QUE FALTABA. Costó 297 px de desbordamiento en la ficha alemana, medidos el 2026-08-25 con la primera ficha ya convertida: scrollWidth 657 contra clientWidth 360, exactamente la misma cifra que este mismo bloque documenta más arriba para la guía. El `table.` de la línea de arriba le gana al selector por elemento, sí — pero NO le gana al alias que `construir_site_css.py` genera para los contenedores reales de esta web, porque ese alias lleva un ID: main#brx-content.brxe-container table → (1,1,2) table.las-tabla--tarjetas → (0,1,1) El ID decide y no hay clase que lo alcance. Resultado: la tabla conservaba su `min-width:640px`, sus bordes de tabla y el `nowrap` de la primera columna en pleno modo tarjeta, o sea el modo tarjeta a medias, que es peor que la tabla desplazable entera. La salida no es subir la especificidad a mano —eso caduca en cuanto cambie el árbol— sino escribir estas reglas CON `.las-cuerpo` delante, para que el generador las duplique con los mismos alias. Entonces compiten con una clase MÁS y ganan por especificidad, no por orden. */ .las-cuerpo table.las-tabla--tarjetas, main#brx-content.brxe-container table.las-tabla--tarjetas, article#brx-content table.las-tabla--tarjetas{ min-width:0; } .las-cuerpo table.las-tabla--tarjetas tbody th[scope="row"], main#brx-content.brxe-container table.las-tabla--tarjetas tbody th[scope="row"], article#brx-content table.las-tabla--tarjetas tbody th[scope="row"]{ border:0; padding:0 0 var(--s-3); font-size:var(--t-base); white-space:normal; } .las-cuerpo table.las-tabla--tarjetas tbody td, main#brx-content.brxe-container table.las-tabla--tarjetas tbody td, article#brx-content table.las-tabla--tarjetas tbody td{ border:0; padding:2px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-4); align-items:baseline; } } /* --------------------------------------------------------------------- 11. LA HERRAMIENTA Aquí NO se copia el hero alto de marinauta: en una herramienta cada píxel por encima del primer control es un impuesto. --------------------------------------------------------------------- */ .las-taller{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:var(--s-6); align-items:start; } .las-taller > *{ min-width:0; } .las-panel{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-5); position:sticky; top:calc(var(--pegado) + 16px); display:grid; gap:var(--s-5); } .las-campo > label,.las-campo > legend{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--las-ink-3); margin-bottom:var(--s-2); font-weight:500; } .las-campo select,.las-campo input[type=text]{ width:100%; font:inherit; font-size:var(--t-ui); padding:10px 12px; border:1px solid var(--las-rule); border-radius:var(--r-s); background:var(--las-ground); color:var(--las-ink); } .las-campo fieldset{ border:0; margin:0; padding:0; } .las-opciones{ display:flex; flex-wrap:wrap; gap:var(--s-2); } .las-opcion{ font-size:var(--t-sm); padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--las-rule); background:var(--las-ground); cursor:pointer; color:var(--las-ink-2); font-family:inherit; } .las-opcion[aria-pressed="true"]{ background:var(--las-teal); border-color:var(--las-teal); color:#fff; font-weight:500; } .las-rango{ display:flex; align-items:center; gap:var(--s-3); } .las-rango input{ flex:1; accent-color:var(--las-teal); } .las-rango output{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; font-size:var(--t-sm); min-width:5.5rem; text-align:right; } /* El resultado. La reserva de alto vive aquí (ver README, riesgo CLS). */ .las-resultado{ display:grid; gap:var(--s-5); } .las-veredicto{ border-left:4px solid var(--las-teal); padding:var(--s-2) 0 var(--s-2) var(--s-5); } .las-veredicto h2{ font-size:var(--t-h3); } .las-veredicto p{ margin:var(--s-2) 0 0; color:var(--las-ink-2); font-size:var(--t-ui); max-width:var(--medida); } .las-veredicto--local{ border-left-color:var(--las-evidence); } .las-veredicto--nube{ border-left-color:var(--las-amber-text); } .las-carta{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); overflow:hidden; } .las-carta-cab{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:baseline; justify-content:space-between; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--las-rule-soft); } .las-carta-cab b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-h3); letter-spacing:-.01em; } .las-carta-cab .meta{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); color:var(--las-ink-3); } .las-carta-cuerpo{ padding:var(--s-5); display:grid; gap:var(--s-5); } /* El medidor de memoria: la pieza más «instrumento» de la web */ .las-medidor{ display:grid; gap:var(--s-2); } .las-barra{ display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--las-wash); border:1px solid var(--las-rule); } .las-barra i{ display:block; height:100%; } .las-barra .peso{ background:var(--las-teal); } .las-barra .contexto{ background:var(--las-data); } .las-barra .margen{ background:#BFCBC8; } .las-barra .libre{ background:transparent; } .las-leyenda{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); color:var(--las-ink-2); } .las-leyenda span{ display:inline-flex; align-items:center; gap:6px; } .las-leyenda i{ width:10px; height:10px; border-radius:2px; display:inline-block; } .las-metricas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); border-top:1px solid var(--las-rule-soft); padding-top:var(--s-4); } .las-metrica b{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:1.375rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .las-metrica span{ font-size:var(--t-sm); color:var(--las-ink-3); } .las-plegable{ border-top:1px solid var(--las-rule-soft); } .las-plegable summary{ cursor:pointer; padding:var(--s-4) var(--s-5); font-weight:500; color:var(--las-teal); font-size:var(--t-ui); } .las-plegable[open] summary{ border-bottom:1px solid var(--las-rule-soft); } /* --------------------------------------------------------------------- 12. FICHA DE ENTIDAD La cabecera que hoy no existe: H1, línea de especificación y las tres cifras que el lector vino a buscar, antes de la primera tabla. --------------------------------------------------------------------- */ .las-migas{ font-size:var(--t-sm); color:var(--las-ink-3); margin-bottom:var(--s-5); } .las-migas a{ color:var(--las-ink-2); text-decoration:none; } .las-migas a:hover{ text-decoration:underline; } .las-migas span{ margin:0 8px; color:var(--las-rule); } .las-ficha-cab{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s-7); align-items:start; } .las-ficha-cab h1{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; letter-spacing:-.02em; font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem); } .las-especificacion{ display:flex; flex-wrap:wrap; gap:var(--s-2) 0; margin-top:var(--s-4); font-size:var(--t-sm); color:var(--las-ink-2); } /* El separador es CSS, no un carácter suelto en el HTML: así ni queda huérfano al final de una línea ni el flex lo trata como un elemento más. */ .las-especificacion span + span::before{ content:'·'; color:var(--las-rule); margin:0 12px; } .las-especificacion b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; color:var(--las-ink); } .las-ficha-resumen{ margin-top:var(--s-5); font-size:var(--t-base); line-height:1.6; color:var(--las-ink-2); max-width:var(--medida-corta); } /* 🔴 Un identificador no se puede partir por sílabas y no tiene espacios donde partir: el commit de 40 caracteres del árbol auditado, una ruta de disco, un `127.0.0.1:11434`. A 360 px sacan la caja de sus goznes y con ella la página. Se les deja partir por donde sea — solo a ellos, nunca a la prosa, que partida a mitad de palabra se lee peor que desplazada. */ .las-especificacion b, .las-lectura-fila b, .las-cifra b, .las-tabla code, .las-cuerpo code, main#brx-content.brxe-container code, article#brx-content code{ overflow-wrap:anywhere; } .las-titulares{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); margin-top:var(--s-6); } .las-titular{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-s); padding:var(--s-4); } .las-titular b{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:1.375rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--las-teal); } .las-titular span{ display:block; font-size:var(--t-sm); color:var(--las-ink-3); margin-top:2px; } /* Aviso con filete ámbar — la pieza que ya existía y se conserva */ .las-nota{ border-left:3px solid var(--las-amber); padding:var(--s-2) 0 var(--s-2) var(--s-5); max-width:var(--medida); color:var(--las-ink-2); font-size:var(--t-ui); line-height:1.6; } .las-nota strong{ color:var(--las-ink); } /* Salidas al final de la ficha */ .las-salidas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); } .las-salida{ display:flex; flex-direction:column; gap:var(--s-2); background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-s); padding:var(--s-4) var(--s-5); text-decoration:none; color:inherit; } .las-salida:hover{ border-color:var(--las-teal); } .las-salida b{ font-size:var(--t-ui); font-weight:600; } .las-salida span{ font-size:var(--t-sm); color:var(--las-ink-3); } /* --------------------------------------------------------------------- 13. GUÍA (mecanismo nº 6 de marinauta: el aparato del artículo) --------------------------------------------------------------------- */ .las-guia{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--s-8); align-items:start; } /* 🔴 `minmax(0,…)` en TODAS las variantes, también en las media queries. Un `1fr` a secas es `minmax(auto,1fr)`, y `auto` significa min-content: la tabla de la guía tiene seis cabeceras `nowrap` cuyo min-content son 835 px, así que a 768 px la columna crecía a 835 y la página se desplazaba 87 px en horizontal. Medido en la maqueta el 25-08. El desbordamiento NO lo causaba la tabla —está en un contenedor con `overflow-x`— sino la rejilla que la contiene, que dejó de estar acotada al reescribirse en el móvil. */ .las-guia > *{ min-width:0; } /* 🔴 C9 — LECCIÓN YA PAGADA POR MIGUEL EN MARINAUTA, con el comentario en su propio código: «si la celda mide lo que el rail, el sticky no tiene dónde viajar». Dos cosas, y las dos importan el día de la conversión: 1) el rail se ACOTA en alto y se desplaza por dentro; sin esto, un índice de 12 entradas en una pantalla de portátil se sale y el `sticky` se queda clavado abajo; 2) al convertir, la CELDA que Bricks interponga necesita `align-self:stretch` — y el `position:sticky` tiene que quedarse en el hijo, NO en la celda. Bricks mete `block` envolventes entre la rejilla y el contenido; si el envoltorio mide exactamente lo que mide el rail, el sticky no tiene recorrido y deja de funcionar sin dar ningún error. Aquí NO se pone `align-self:stretch` en `.las-indice` a propósito: `.las-guia` va con `align-items:start` y el rail ES el elemento pegado, así que estirarlo lo rompería. La regla es para el envoltorio que aparezca al convertir, no para esta clase. */ .las-indice{ position:sticky; top:calc(var(--pegado) + 16px); font-size:var(--t-sm); max-height:calc(100vh - var(--pegado) - 24px); overflow-y:auto; scrollbar-width:thin; } .las-indice p{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--las-ink-3); margin:0 0 var(--s-3); } .las-indice ol{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); border-left:2px solid var(--las-rule); } .las-indice a{ display:block; padding-left:var(--s-4); text-decoration:none; color:var(--las-ink-2); line-height:1.4; } .las-indice a:hover{ color:var(--las-teal); } .las-indice li[aria-current] a{ color:var(--las-teal); font-weight:500; box-shadow:-2px 0 0 var(--las-teal); } .las-lectura-tiempo{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); color:var(--las-ink-3); margin-bottom:var(--s-3); display:block; } /* C8 · BARRA DE PROGRESO DE LECTURA. Es uno de los dos aparatos de `[mn_art_rail]` que la maqueta reconstruyó a ojo y se dejó fuera. No es adorno: es lo que convierte una lista de anclas en un instrumento — el lector ve cuánto le queda mientras el índice le dice dónde está. En producción va en el mismo shortcode que el índice (`las_guia_rail`), y el ancho lo escribe el JS: en la maqueta se declara con `data-ancho` para no meter un `style=` que el convertidor tenga que interpretar. */ /* 🔴 El CARRIL lleva filete, y no es estética. Medido con la fórmula WCAG el 25-08: el carril en `--las-rule` (#D5DEDB) da 1,26 contra el fondo de página — o sea, el lector ve por dónde va pero no ve HASTA DÓNDE llega, que es justo la mitad de la información. No hay ningún gris plano que resuelva las dos condiciones a la vez (≥3 contra el fondo Y ≥3 contra el relleno petróleo): el mejor candidato, #9CADA9, se queda en 2,16/3,16. La salida es la que el medidor de memoria de esta misma web ya usa — delimitar el carril con un filete: `--las-ink-3` da **4,75** contra el fondo, y el relleno petróleo da **5,40** contra el carril. Las dos lecturas quedan por encima del umbral de 3:1 de gráficos. */ .las-progreso{ display:block; height:6px; border-radius:3px; background:var(--las-rule); border:1px solid var(--las-ink-3); overflow:hidden; margin-bottom:var(--s-5); } .las-progreso i{ display:block; height:100%; background:var(--las-teal); } /* C8 · ANTERIOR / SIGUIENTE entre guías. marinauta lo tiene (`[mn_art_prevnext]`, sección 4 de su plantilla 149) y la maqueta no tenía nada: la guía terminaba en tres salidas temáticas y ninguna secuencia. */ .las-prevnext{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); } .las-prevnext a{ display:flex; flex-direction:column; gap:var(--s-2); background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-4) var(--s-5); text-decoration:none; color:inherit; } .las-prevnext a:hover{ border-color:var(--las-teal); } .las-prevnext span{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--las-ink-3); } .las-prevnext b{ font-size:var(--t-ui); font-weight:600; line-height:1.35; } .las-prevnext .siguiente{ text-align:right; align-items:flex-end; } /* Cuando la guía no tiene vecino por ningún lado —hoy, ES, FR y DE, con una guía cada uno— no se pintan dos tarjetas al índice con flechas hacia lados opuestos: se pinta una sola, a ancho completo. */ .las-prevnext--sola a{ grid-column:1 / -1; } /* EL CONTRATO DE PROSA. Es la pieza más valiosa de marinauta y la razón de que el cuerpo de una guía tenga ritmo aunque lo escriba el editor de WordPress. 🔴 C3 — VA A DOS SELECTORES, NO A UNO. La prosa de las 6 guías y de las 72 fichas NO la pinta `.las-cuerpo`: la pinta el elemento `post-content` de Bricks, que emite `.brxe-post-content`. Sin la segunda mitad de cada selector, las ~78 URLs de contenido salen a 17 px, sin medida de lectura y con los H2 pegados al párrafo anterior — que es exactamente el defecto diagnosticado (`margin-top: 0`, 143 caracteres por línea). Es la misma clase de fallo que el `#brx-content > .brxe-section` de `site.css`: un selector correcto apuntando a un árbol que no existe. La MEDIDA va en el texto, no en la columna: así las tablas, las cajas y las llamadas usan todo el ancho de la columna y solo la prosa se queda en ~70 caracteres. marinauta pone `max-width:720px` en `.brxe-post-content` entero y por eso SUS tablas se desplazan teniendo 912 px de columna libres. Aquí no se copia ese fallo. */ .las-cuerpo, .brxe-post-content, main#brx-content.brxe-container, article#brx-content{ font-size:var(--t-base); line-height:1.68; color:var(--las-ink); } .las-cuerpo > p, .las-cuerpo > ul, .las-cuerpo > ol, .las-cuerpo > h2, .las-cuerpo > h3, .las-cuerpo > blockquote, .brxe-post-content > p, .brxe-post-content > ul, .brxe-post-content > ol, .brxe-post-content > h2, .brxe-post-content > h3, .brxe-post-content > blockquote, main#brx-content.brxe-container > p, article#brx-content > p, main#brx-content.brxe-container > ul, article#brx-content > ul, main#brx-content.brxe-container > ol, article#brx-content > ol, main#brx-content.brxe-container > h2, article#brx-content > h2, main#brx-content.brxe-container > h3, article#brx-content > h3, main#brx-content.brxe-container > blockquote, article#brx-content > blockquote{ max-width:var(--medida-prosa); } .las-cuerpo h2, .brxe-post-content h2, main#brx-content.brxe-container h2, article#brx-content h2{ margin-top:var(--s-8); margin-bottom:var(--s-4); scroll-margin-top:calc(var(--pegado) + 24px); } /* C12 · el H3 sube de 32 a 48 px de margen superior. Con el H2 a 64, el escalón 64/48 se lee como jerarquía; 64/32 aplastaba el H3 contra el párrafo anterior. Es el único número de la prosa donde marinauta (`--space-7` = 48) acierta más que la maqueta. */ .las-cuerpo h3, .brxe-post-content h3, main#brx-content.brxe-container h3, article#brx-content h3{ margin-top:var(--s-7); margin-bottom:var(--s-3); scroll-margin-top:calc(var(--pegado) + 24px); } .las-cuerpo > *:first-child, .brxe-post-content > *:first-child, main#brx-content.brxe-container > *:first-child, article#brx-content > *:first-child{ margin-top:0; } .las-cuerpo p, .brxe-post-content p, main#brx-content.brxe-container p, article#brx-content p{ margin:0 0 var(--s-5); } .las-cuerpo ul, .las-cuerpo ol, .brxe-post-content ul, .brxe-post-content ol, main#brx-content.brxe-container ul, article#brx-content ul, main#brx-content.brxe-container ol, article#brx-content ol{ margin:0 0 var(--s-5); padding-left:1.4em; } .las-cuerpo li, .brxe-post-content li, main#brx-content.brxe-container li, article#brx-content li{ margin-bottom:var(--s-2); } .las-cuerpo .las-tabla-envuelta, .brxe-post-content .las-tabla-envuelta, main#brx-content.brxe-container .las-tabla-envuelta, article#brx-content .las-tabla-envuelta{ margin:var(--s-6) 0; } .las-cuerpo strong, .brxe-post-content strong, main#brx-content.brxe-container strong, article#brx-content strong{ font-weight:600; } /* La entradilla del artículo, más grande que el cuerpo */ .las-guia-cab{ max-width:var(--medida); } .las-guia-cab .las-entradilla{ font-size:var(--t-lg); line-height:1.5; color:var(--las-ink-2); margin-top:var(--s-5); } .las-firma{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); align-items:center; margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--las-rule); font-size:var(--t-sm); color:var(--las-ink-3); } .las-firma b{ color:var(--las-ink-2); font-weight:600; } /* Caja de claves numeradas, antes del cuerpo */ .las-claves{ background:var(--las-surface); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-6); margin-top:var(--s-7); } .las-claves h2{ font-size:var(--t-h3); margin-bottom:var(--s-5); } .las-claves ol{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); } .las-claves li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-4); align-items:baseline; } .las-claves li b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; color:var(--las-teal); font-size:var(--t-ui); } .las-claves li span{ font-size:var(--t-ui); line-height:1.55; color:var(--las-ink-2); } .las-claves li span strong{ color:var(--las-ink); font-weight:600; } /* Llamada a la herramienta dentro de una guía */ .las-llamada{ display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center; justify-content:space-between; background:var(--las-wash); border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-5) var(--s-6); margin:var(--s-7) 0; } .las-llamada p{ margin:0; max-width:32rem; font-size:var(--t-ui); color:var(--las-ink-2); } .las-llamada strong{ color:var(--las-ink); } .las-boton{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--las-teal); color:#fff; font-weight:500; font-size:var(--t-ui); padding:12px 22px; border-radius:var(--r-pill); border:1px solid var(--las-teal); white-space:nowrap; } .las-boton:hover{ background:#0B4B4E; } .las-boton--claro{ background:transparent; color:var(--las-teal); } .las-boton--claro:hover{ background:var(--las-wash); } .las-boton--tinta{ background:var(--las-mint); border-color:var(--las-mint); color:var(--las-deep); } .las-boton--tinta:hover{ background:#A8DED4; } /* --------------------------------------------------------------------- 14. RESPONSIVO --------------------------------------------------------------------- */ @media (max-width:991px){ .las-hero{ grid-template-columns:minmax(0,1fr); gap:var(--s-6); } .las-taller{ grid-template-columns:minmax(0,1fr); } .las-panel{ position:static; } .las-guia{ grid-template-columns:minmax(0,1fr); gap:var(--s-6); } /* C9: al dejar de estar pegado, el rail recupera su alto natural. */ .las-indice{ position:static; max-height:none; overflow-y:visible; border:1px solid var(--las-rule); border-radius:var(--r-l); padding:var(--s-5); background:var(--las-surface); } .las-ficha-cab{ grid-template-columns:minmax(0,1fr); gap:var(--s-6); } .las-pie-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } .las-prevnext{ grid-template-columns:minmax(0,1fr); } } @media (max-width:767px){ .las-cifras{ grid-template-columns:minmax(0,1fr); } .las-puertas{ grid-template-columns:repeat(2,minmax(0,1fr)); } .las-puerta,.las-puerta--estrecha{ grid-column:span 2; } .las-tira{ grid-template-columns:repeat(2,minmax(0,1fr)); } .las-titulares{ grid-template-columns:minmax(0,1fr); } .las-salidas{ grid-template-columns:minmax(0,1fr); } .las-metricas{ grid-template-columns:minmax(0,1fr); gap:var(--s-3); } .las-cabecera{ position:static; } /* 🔴 `flex-wrap:nowrap` y desplazamiento lateral: con envoltura, la nav alemana («Konfiguration finden / Modelle / Rechner / Programme / Ratgeber») ocupaba tres líneas y el encabezado medía 232 px a 360 px — un tercio de la pantalla antes del primer contenido. Medido el 25-08. */ .las-nav{ gap:var(--s-4); overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; } .las-nav::-webkit-scrollbar{ display:none; } .las-faq summary{ font-size:var(--t-ui); } } @media (max-width:478px){ .las-pie-rejilla{ grid-template-columns:minmax(0,1fr); gap:var(--s-6); } .las-cab-fila{ gap:var(--s-3); } .las-llamada{ flex-direction:column; align-items:flex-start; } /* El alemán escribe botones de 25-30 caracteres: a 360 px se dejan partir. */ .las-boton{ white-space:normal; } } /* Respeto a quien pide menos movimiento */ @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* --------------------------------------------------------------------- 15. UTILIDADES Existen para que en el HTML NO haya ni un `style=` que el convertidor de Bricks tenga que interpretar. La única excepción son los anchos del medidor de memoria (`.las-barra i`), que son un VALOR CALCULADO por la herramienta en el navegador, no una decisión de diseño. --------------------------------------------------------------------- */ .las-medida{ max-width:var(--medida); } .las-medida-corta{ max-width:var(--medida-corta); } .las-estrecho{ max-width:34rem; } .u-m-0{ margin:0; } .u-mt-0{ margin-top:0; } .u-mt-4{ margin-top:var(--s-4); } .u-mt-5{ margin-top:var(--s-5); } .u-mt-6{ margin-top:var(--s-6); } .u-pt-0{ padding-top:0; } .u-pb-0{ padding-bottom:0; } .las-nota-panel{ margin:0; font-size:var(--t-sm); color:var(--las-ink-3); line-height:1.5; } /* Muestras de color de la leyenda del medidor */ .sw-peso{ background:var(--las-teal); } .sw-contexto{ background:var(--las-data); } .sw-margen{ background:#BFCBC8; } .sw-libre{ background:var(--las-wash); border:1px solid var(--las-rule); } /* Marca sobre banda oscura */ .las-marca--claro, .las-marca--claro b{ color:var(--las-on-deep); } /* Tabla sin ancho mínimo (dos columnas, cabe en cualquier pantalla) */ /* `table.` por el mismo motivo que en `.las-tabla--tarjetas`: tiene que ganarle al selector por elemento que C13 añadió para la prosa. */ .las-tabla--corta, table.las-tabla--corta, /* 🔴 Y con el alias delante, por lo mismo que en el modo tarjeta: la prosa de esta web se estila con `main#brx-content.brxe-container table` (1,1,2) y ese ID le gana a cualquier clase. Sin esta tercera línea, la tabla de dos columnas de la ficha de modelo conservaba su `min-width:640px` dentro de un envoltorio de 544 px y se desplazaba en horizontal — dos columnas, en un escritorio de 1280. Visto en el navegador el 2026-08-25. */ .las-cuerpo table.las-tabla--corta, main#brx-content.brxe-container table.las-tabla--corta, article#brx-content table.las-tabla--corta{ min-width:0; } /* Texto de apoyo dentro de una carta de resultado */ .las-nota-panel--cuerpo{ color:var(--las-ink-2); font-size:var(--t-ui); } /* MEDIDOR DE MEMORIA — anchos por atributo, no por `style=`. La herramienta calcula el reparto en el navegador; en la maqueta se declara con `data-ancho` para que el HTML entre en Bricks sin un solo estilo en línea. En producción, `finder.js` escribirá `el.style.width` como hasta ahora: un valor calculado no es una decisión de diseño. */ .las-barra i[data-ancho="8"],.las-progreso i[data-ancho="8"]{ width:8%; } .las-barra i[data-ancho="16"],.las-progreso i[data-ancho="16"]{ width:16%; } .las-barra i[data-ancho="32"],.las-progreso i[data-ancho="32"]{ width:32%; } .las-barra i[data-ancho="55"],.las-progreso i[data-ancho="55"]{ width:55%; } /* ===================================================================== CAPA DE COMPATIBILIDAD — el marcado que YA sirve la web ===================================================================== La maqueta nombra sus piezas `.las-cabecera`, `.las-marca`, `.las-idiomas`, `.las-pie`. El HTML que sirve producción hoy las llama `.las-header`, `.las-brand-name`, `.las-lang`, `.las-footer`: lo emiten las OCHO plantillas de Bricks (cabecera y pie × cuatro idiomas) y los shortcodes del núcleo. Se decide estilar el marcado REAL en vez de reescribir las ocho plantillas por la misma razón que C13: cubre más superficie, cuesta cero y es reversible. Y porque una cadena se toca en un solo sitio: el texto sigue saliendo de `angi_las_textos()` y la estructura de las ocho sigue siendo idéntica. ===================================================================== */ /* ---- Contenedor de las áreas que TODAVÍA no tienen `.las-contenedor` ---- Cabecera y pie son secciones de Bricks sin contenedor dentro, así que su gutter sigue viniendo del padding lateral de la sección. 🔴 El `:not(.las-banda)` no sobra: sin él, una banda ya convertida recibiría el padding DOS veces —el de la sección y el de su contenedor— y la página tendría dos anchos distintos, que es justo el defecto que C1 venía a quitar. */ #brx-header > .brxe-section, #brx-footer > .brxe-section, #brx-content > .brxe-section:not(.las-banda){ align-items:flex-start; /* 🔴 El `+ var(--las-gutter)` no sobra. `.las-contenedor` mide 1080 px de CAJA y lleva 20 px de padding dentro, así que su texto empieza en 120 a 1280 px de ventana. Sin sumar aquí el mismo gutter, la cabecera arrancaba en 100 y el cuerpo en 120: 20 px de desalineación entre el nombre de la marca y el H1, medidos el 2026-08-25. Dos anchos en la misma página se leen como una maqueta rota aunque la diferencia sea pequeña. */ padding-left:max(var(--las-gutter), calc((100% - var(--las-contenedor)) / 2 + var(--las-gutter))); padding-right:max(var(--las-gutter), calc((100% - var(--las-contenedor)) / 2 + var(--las-gutter))); } #brx-header > .brxe-section > *, #brx-footer > .brxe-section > *, #brx-content > .brxe-section:not(.las-banda) > *{ width:100%; } /* 🔴 ESPECIFICIDAD: estas reglas llevan `#brx-header` / `#brx-footer` delante y no es adorno. Cabecera y pie ya tienen CLASES GLOBALES de Bricks con sus propios ajustes (`.las-header`, `.las-header-row`, `.las-footer`…), y Bricks imprime su CSS EN LÍNEA y DESPUÉS de esta hoja: con la misma especificidad gana siempre él. Medido el 2026-08-25: `.las-header-row{display:grid}` escrito aquí no se aplicaba —seguía siendo el `flex` de la clase global— y la cabecera medía 245 px en vez de los ~105 que `--pegado` promete. Con el id delante (1,1,0 contra 0,1,0) manda esta hoja, que es la fuente única del sistema visual. ⚠️ DEUDA CONOCIDA: las ocho plantillas de cabecera y pie siguen teniendo esos ajustes guardados en sus clases globales. Mientras no se vacíen, hay dos sitios donde se puede tocar lo mismo. Convertirlas es la pieza que queda. */ /* ---- Cabecera ---- */ #brx-header .las-header{ background:var(--las-surface); border-bottom:1px solid var(--las-rule); position:sticky; top:0; z-index:20; padding-top:var(--s-3); padding-bottom:var(--s-3); } /* 🔴 Dos filas, no una que envuelve. Medido en producción el 2026-08-25: con los cuatro hijos (marca · lema · idiomas · navegación) en un solo `flex-wrap`, la cabecera medía **257 px a 1280 y 336 px a 360** — un tercio de la pantalla del móvil antes del primer contenido, y `--pegado` (105 px) mintiendo por 150. En rejilla explícita: marca y lema a la izquierda, idiomas y navegación a la derecha, dos filas fijas y nada que envolver. */ #brx-header .las-header-row{ display:grid; width:100%; grid-template-columns:minmax(0,auto) minmax(0,1fr); column-gap:var(--s-5); row-gap:var(--s-1); align-items:center; } #brx-header .las-header-row > :nth-child(1){ grid-area:1/1; align-self:end; } #brx-header .las-header-row > :nth-child(2){ grid-area:2/1; align-self:start; } #brx-header .las-header-row > :nth-child(3){ grid-area:1/2; justify-self:end; } #brx-header .las-header-row > :nth-child(4){ grid-area:2/2; justify-self:end; } #brx-header .las-brand-name{ font-family:'IBM Plex Sans',system-ui,sans-serif; font-weight:600; font-size:1.0625rem; letter-spacing:-.01em; color:var(--las-ink); text-decoration:none; } #brx-header .las-brand-tag{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--las-ink-3); } #brx-header .las-langs{ display:flex; gap:var(--s-1); align-items:center; flex-wrap:wrap; } #brx-header .las-lang{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.6875rem; letter-spacing:.08em; padding:4px 8px; border-radius:var(--r-s); text-decoration:none; color:var(--las-ink-3); border:1px solid transparent; line-height:1.5; } #brx-header .las-lang:hover{ color:var(--las-teal); border-color:var(--las-rule); } #brx-header .las-lang.is-current{ color:var(--las-teal); background:var(--las-wash); border-color:var(--las-rule); font-weight:500; } /* La navegación NO se esconde en móvil y NO necesita JavaScript: se convierte en una tira desplazable. En alemán, con envoltura, la cabecera medía 232 px a 360 px —un tercio de la pantalla antes del primer contenido—. */ #brx-header .las-nav{ display:flex; gap:var(--s-5); flex-wrap:wrap; align-items:center; } #brx-header .las-nav-link{ font-size:var(--t-ui); text-decoration:none; color:var(--las-ink-2); padding-bottom:2px; border-bottom:2px solid transparent; } #brx-header .las-nav-link:hover{ color:var(--las-teal); } #brx-header .las-nav-link.is-current, #brx-header .las-nav-link[aria-current]{ color:var(--las-ink); font-weight:500; border-bottom-color:var(--las-teal); } @media (max-width:767px){ #brx-header .las-header{ position:static; } /* A partir de aquí la cabecera se apila: marca e idiomas en la primera fila, navegación desplazable en la segunda. El lema desaparece —es una frase de 40 caracteres que en 360 px se come dos líneas enteras y no lleva a ningún sitio— y el nombre de la marca lo sigue diciendo. */ #brx-header .las-header-row{ grid-template-columns:minmax(0,1fr) minmax(0,auto); } #brx-header .las-header-row > :nth-child(1){ grid-area:1/1; align-self:center; } #brx-header .las-header-row > :nth-child(2){ display:none; } #brx-header .las-header-row > :nth-child(3){ grid-area:1/2; justify-self:end; } #brx-header .las-header-row > :nth-child(4){ grid-area:2/1/auto/span 2; justify-self:stretch; } /* 🔴 SOMBRA DE DESPLAZAMIENTO, y no es un adorno. La tira desplazable está bien elegida —con envoltura, la nav alemana llevaba la cabecera a 232 px en un móvil—, pero se le ocultó la barra de desplazamiento y entonces NO QUEDA NINGUNA PISTA de que haya más. Medido a 360 px el 2026-08-25: en alemán se queda fuera «Programme», y en francés DOS entradas («Matériel» y «Logiciels»). En inglés no pasa, porque las palabras son cortas — o sea que el defecto solo aparecía en los tres idiomas que menos se miran, que es justo cómo se cuela una web «multilingüe y superficial». Truco de las cuatro capas: las dos primeras van con `background-attachment:local` y tapan a las otras dos cuando la tira está en su extremo; las de `scroll` se quedan quietas. Resultado: la sombra **aparece solo si hay algo que ver** y desaparece al llegar al final. Cero JavaScript, y en inglés no se pinta nada. */ #brx-header .las-nav{ flex-wrap:nowrap; overflow-x:auto; gap:var(--s-4); background: linear-gradient(to right, var(--las-surface) 40%, rgba(255,255,255,0)) left center / 20px 100% no-repeat local, linear-gradient(to left, var(--las-surface) 40%, rgba(255,255,255,0)) right center / 20px 100% no-repeat local, radial-gradient(farthest-side at 0% 50%, rgba(20,35,33,.16), rgba(20,35,33,0)) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(20,35,33,.16), rgba(20,35,33,0)) right center / 10px 100% no-repeat scroll; scrollbar-width:none; -webkit-overflow-scrolling:touch; } #brx-header .las-nav::-webkit-scrollbar{ display:none; } #brx-header .las-nav-link{ white-space:nowrap; } #brx-header .las-langs{ flex-wrap:nowrap; } } /* ---- Pie ---- */ #brx-footer .las-footer{ background:var(--las-deep); color:var(--las-on-deep-2); padding-top:var(--s-8); padding-bottom:var(--s-7); } #brx-footer .las-footer a{ color:var(--las-on-deep-2); } #brx-footer .las-footer a:hover{ color:var(--las-on-deep); } #brx-footer .las-footer-date{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); color:var(--las-mint); white-space:nowrap; } #brx-footer .las-legal-nav{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-4); } #brx-footer .las-legal-link{ font-size:var(--t-sm); text-decoration:none; color:var(--las-on-deep-2); border-bottom:1px solid transparent; } #brx-footer .las-legal-link:hover{ color:var(--las-on-deep); border-bottom-color:var(--las-mint); } /* ---- Enlaces de salto que pone Bricks (`.skip-link`) ---- */ .skip-link{ position:absolute; left:var(--s-3); top:var(--s-3); z-index:100; background:var(--las-teal); color:#fff; padding:10px 16px; border-radius:var(--r-s); font-size:var(--t-sm); text-decoration:none; transform:translateY(-160%); } .skip-link:focus-visible{ transform:none; } /* ---- Tablas de hub: lo que el sistema visual no cubre ---- `.las-tabla` ya les da cabecera oscura, cebra y cifras tabulares. Aquí quedan solo los dos anchos mínimos, que dependen del número de columnas. */ .las-hub-tabla{ min-width:520px; } .las-hub-texto td, .las-hub-texto th[scope="row"]{ font-family:inherit; font-variant-numeric:normal; font-size:var(--t-sm); line-height:1.45; vertical-align:top; } .las-hub-texto th[scope="row"]{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--las-ink); white-space:nowrap; } .las-hub-ancha{ min-width:900px; } .las-hub-h{ margin-top:var(--s-8); } /* ---- Piezas del cuerpo de las fichas y de los hubs que ya emite el núcleo ---- */ .las-entidad-titulo{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:500; font-size:var(--t-h1); letter-spacing:-.02em; } .las-ev{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); letter-spacing:.06em; color:var(--las-ink-3); font-weight:500; } .las-ev-tag{ display:inline-block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-mono); line-height:1.4; font-weight:500; letter-spacing:.04em; margin-top:var(--s-1); } .las-ev-verificado{ color:var(--las-evidence); } /* 🔴 Ámbar de TEXTO (#A26217), no el de la paleta (#C9791C): ese da 3,10 sobre el fondo claro y esta etiqueta es texto pequeño. */ .las-ev-declarado{ color:var(--las-amber-text); } .las-ev-sin{ color:var(--las-ink-3); } .las-lead{ font-size:var(--t-lg); color:var(--las-ink-2); } .las-meta-ficha{ font-size:var(--t-sm); color:var(--las-ink-3); } .las-titular{ font-size:var(--t-ui); } .las-cita{ margin:var(--s-4) 0; padding:var(--s-2) 0 var(--s-2) var(--s-4); border-left:3px solid var(--las-rule); color:var(--las-ink-2); font-size:var(--t-sm); line-height:1.55; max-width:var(--medida); } .las-fuente{ font-size:var(--t-xs); color:var(--las-ink-3); margin-top:var(--s-1); } .las-noscript{ border:1px solid var(--las-rule); border-radius:var(--r-s); padding:var(--s-4) var(--s-5); max-width:var(--medida); } .las-noscript ul{ margin:var(--s-2) 0 0; padding-left:1.1rem; } /* ---- El alto REAL de la cabecera, medido en producción ---- `--pegado` es la única fuente de verdad del alto del encabezado: de ella cuelgan el `top` del panel pegajoso de la herramienta, el del índice de las guías y el `scroll-margin-top` de todos los H2 y H3. La maqueta la fijó en 105 px midiendo SU cabecera; la de producción es otra —lleva lema, selector de idioma y navegación en dos filas de rejilla— y mide **129 px a 1280 y a 768**. Con 105, un ancla de sección dejaba el titular 24 px por debajo del borde superior. A ≤767 la cabecera deja de estar pegada, así que no hay nada que descontar. */ :root{ --pegado:129px; } @media (max-width:767px){ :root{ --pegado:0px; } } /* ---- El cuerpo de las 72 fichas TODAVÍA no trae bandas (R4) ---- Medido en producción el 2026-08-25 en `/en/models/qwen3-4b-2507/`: el cuerpo cuelga directo de `main#brx-content.brxe-container`, sin `.brxe-section` y sin contenedor. Resultado a 1280: la cabecera alineada al contenedor de 1080 (x=100) y el cuerpo empezando en x=0, con las tablas de borde a borde. La página se contradice a sí misma en cada scroll, y son 72 de las ~90 URLs del sitio. Mientras `fichas.py` no envuelva cada sección en su banda —que es la tarea de la fase siguiente, no de esta— el contenedor se le da aquí. 🔴 Y se AUTODESACTIVA: en cuanto el generador emita `.las-banda` dentro, la segunda regla lo devuelve a borde a borde, porque entonces el ancho lo pone `.las-contenedor` y aplicarlo dos veces daría doble gutter. Sin esto habría que acordarse de volver aquí, y de eso ya sabemos cómo acaba. */ main#brx-content.brxe-container{ width:100%; max-width:var(--las-contenedor); margin-inline:auto; padding-inline:var(--las-gutter); } main#brx-content.brxe-container:has(> .las-banda){ max-width:none; margin-inline:0; padding-inline:0; } /* 🔴 …y con eso hecho, la banda TIENE que pedir el ancho entero, porque el padre no se lo da. `main#brx-content` es un `.brxe-container` de Bricks, o sea una COLUMNA FLEX con `align-items:flex-start`: un `
` metido ahí dentro no se estira, se encoge hasta su contenido. Medido en producción el 2026-08-25 con la primera ficha ya convertida, a 1923 px de ventana: las seis bandas salían a x=0 y con anchos 1080/712/712/712/867/918 —uno distinto por banda, según lo que midiera su tabla— y ninguna centrada, porque `.las-contenedor` centra dentro de su sección y la sección medía menos que el contenedor. La maqueta no lo ve porque allí `
` es un bloque normal; esto es de Bricks, y por eso vive en la capa de compatibilidad y no en `sistema.css`. */ main#brx-content.brxe-container > .las-banda, article#brx-content > .las-banda{ width:100%; } /* 🔴 El rail de la guía, y la celda que Bricks interpone. El propio `sistema.css` lo dejó escrito antes de que existiera esta plantilla («la CELDA que Bricks interponga necesita align-self:stretch — y el sticky tiene que quedarse en el hijo, NO en la celda»). Al convertir, el shortcode del índice sale envuelto en un `div.brxe-shortcode`, y ese envoltorio mediría exactamente lo que mide el rail: el `position:sticky` de dentro se quedaría sin recorrido y dejaría de funcionar sin dar ningún error. La salida es `display:contents`, no `align-self:stretch`: el envoltorio desaparece de la maquetación y `.las-indice` pasa a ser la celda de la rejilla, que es exactamente el árbol de la maqueta. Con `align-items:start`, el bloque contenedor de un sticky en rejilla es el ÁREA, no la celda, así que el rail viaja toda la altura de la fila. Es una regla de Bricks y por eso vive aquí. */ .las-guia > .las-indice-caja{ display:contents; }