/* CurioFeed — hoja de estilo del sitio. Fuente de verdad: entregables/curiofeed-reconstruccion/diseno/mockup-aprobado.html Tokens y reglas: entregables/curiofeed-reconstruccion/diseno/TOKENS.md Aprobado por Miguel el 2026-08-22 («de momento puede valer»). Aprobación provisional. Las clases .note y .banner del mockup NO van aquí: eran anotaciones para la revisión. */ :root{ --paper:#F1F3EE; /* blanco algodón del papel moneda, frío, no cream */ --surface:#FFFFFF; --surface-2:#E7ECE6; --ink:#0F2118; /* verde-negro de tinta de grabado */ --ink-2:#2E4238; --muted:#5B6A62; /* gris con sesgo verde, elegido no heredado. 🔴 2026-08-22, MEDIDO en el navegador: el valor aprobado (#66776E) da 4,24:1 sobre --paper y 3,96:1 sobre --surface-2, por debajo del 4,5:1 que pide WCAG AA para texto pequeño — y es el color de casi todo el texto secundario del sitio (eyebrows, sellos de hora, notas). Se oscurece lo MÍNIMO que pasa AA sobre los cinco fondos del sistema (4,53–5,70:1); mismo tono, mismo papel. Es la única desviación de la paleta aprobada, y se deshace poniendo #66776E aquí. */ --line:#D5DCD4; --line-2:#C2CCC0; --vault:#17513F; /* el verde del billete */ --vault-soft:#DCE8E1; --gilt:#9C7724; /* dorado apagado: el metal y lo raro */ --gilt-soft:#F0E7D0; --alert:#8C3A1E; --radius:4px; /* casi recto: esto es un documento, no una app */ --maxw:64rem; } /* Oscuro SOLO por interruptor: la web es clara por defecto (decisión de Miguel, 2026-08-22). Respondiendo al sistema, la hoja de las páginas —que usa tokens --cf-* sin versión oscura— dejaba 69 elementos ilegibles: h1 negro sobre fondo negro (1,15), tablas con texto claro sobre blanco (1,22) y el botón de cookies blanco sobre blanco (1,00). */ :root[data-theme="dark"]{ --paper:#0C1712; --surface:#132019; --surface-2:#1A2A22; --ink:#E4EAE4; --ink-2:#B8C6BE; --muted:#85988D; --line:#26362D; --line-2:#33473C; --vault:#6FBF9C; --vault-soft:#172E25; --gilt:#D9B05C; --gilt-soft:#2A2317; --alert:#E08463; } :root[data-theme="dark"]{ --paper:#0C1712; --surface:#132019; --surface-2:#1A2A22; --ink:#E4EAE4; --ink-2:#B8C6BE; --muted:#85988D; --line:#26362D; --line-2:#33473C; --vault:#6FBF9C; --vault-soft:#172E25; --gilt:#D9B05C; --gilt-soft:#2A2317; --alert:#E08463; } /* ══ EL rem DE ESTA WEB ═══════════════════════════════════════════════════ 🔴 Medido en el navegador el 2026-08-22: el tema Bricks trae `html{font-size:62.5%}`, o sea **rem = 10 px**, no 16. Todo el diseño aprobado está escrito en rem sobre la suposición de 16 px, así que sin esto el sitio se servía al **62,5 % del tamaño previsto**: el lede a 10,6 px en vez de 17, los H2 a 17 en vez de 27, y el ancho máximo a 640 px en vez de 1.024. Y estuvo OCULTO un buen rato: con la optimización de CSS de LiteSpeed encendida, la hoja que llegaba al navegador no traía esa regla y las medidas salían bien. Apagar el optimizador fue lo que dejó ver el problema de verdad — el enmascarador no es un punto ciego, es un punto ciego con buena letra. Se devuelve el rem a 16 px. `html:root` (0,1,1) gana a `html` (0,0,1) sin recurrir a `!important`. Riesgo acotado: esta web no usa componentes de Bricks —no queda ni una plantilla— salvo el envoltorio del 404; todo lo demás es HTML propio. Deshacer: borrar esta regla. ═════════════════════════════════════════════════ */ html:root{font-size:100%} *{box-sizing:border-box} body{ margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.65 "Public Sans","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem} /* ── cabecera ────────────────────────────────────────── */ header.site{border-bottom:1px solid var(--line);background:var(--surface)} .head{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem 0} .logo{display:flex;align-items:baseline;gap:.45rem;font-family:Newsreader,Georgia,serif;font-size:1.4rem;font-weight:600;letter-spacing:-.01em} .logo .star{color:var(--gilt);font-size:1.1em;line-height:1} nav.main{display:flex;gap:1.4rem;font-size:.9rem;font-weight:500} nav.main a{color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent} nav.main a:hover,nav.main a:focus-visible{color:var(--vault);border-bottom-color:var(--vault)} /* ── hero = la herramienta ───────────────────────────── */ .hero{padding:3.25rem 0 2rem} .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem} h1{ font-family:Newsreader,Georgia,serif; font-weight:500; font-size:clamp(2.1rem,5.2vw,3.3rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 .7rem; text-wrap:balance; } h1 em{font-style:italic;color:var(--vault)} .lede{font-size:1.06rem;color:var(--ink-2);max-width:34rem;margin:0 0 2rem} /* el campo: maquetado como el propio billete */ .tool{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; } .tool-head{ display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.6rem 1.1rem;border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace;font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .tool-body{padding:1.5rem 1.1rem 1.35rem;display:grid;gap:1.1rem} .field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:.4rem} .serial{ display:flex;align-items:center;gap:.5rem; border:2px solid var(--vault);border-radius:var(--radius); background:var(--paper);padding:.55rem .85rem; } .serial input{ flex:1;border:0;background:transparent;color:var(--ink); font-family:"IBM Plex Mono",monospace;font-size:clamp(1.15rem,3.4vw,1.55rem); font-weight:500;letter-spacing:.06em;padding:.25rem 0;min-width:0; } .serial input:focus{outline:none} .serial:focus-within{box-shadow:0 0 0 3px var(--vault-soft)} .serial .mark{color:var(--gilt);font-size:1.5rem;line-height:1} .row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end} .sel{ font-family:"Public Sans",sans-serif;font-size:.95rem; border:1px solid var(--line-2);border-radius:var(--radius); background:var(--surface);color:var(--ink);padding:.55rem .7rem; } .btn{ background:var(--vault);color:var(--surface);border:0;border-radius:var(--radius); font:600 .95rem/1 "Public Sans",sans-serif;padding:.8rem 1.5rem;cursor:pointer; } :root[data-theme="dark"] .btn,:root:not([data-theme="light"]) .btn{color:#0C1712} :root:not([data-theme="dark"]) .btn{color:#fff} .btn:hover{filter:brightness(1.08)} .btn:focus-visible{outline:3px solid var(--gilt);outline-offset:2px} /* ── resultado ───────────────────────────────────────── */ .result{border-top:1px solid var(--line);background:var(--surface-2)} .result-in{padding:1.4rem 1.1rem} .verdict{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.1rem} .chip{ font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase; padding:.32rem .65rem;border-radius:2px; background:var(--gilt);color:var(--paper); } :root[data-theme="dark"] .chip,:root:not([data-theme="light"]) .chip{color:#0C1712} .verdict h2{ font-family:Newsreader,Georgia,serif;font-weight:500; font-size:clamp(1.3rem,3.6vw,1.7rem);margin:0;letter-spacing:-.01em; } .facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1px;background:var(--line);border:1px solid var(--line); } .fact{background:var(--surface);padding:.85rem .9rem} .fact dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;font-family:"IBM Plex Mono",monospace} .fact dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:1.05rem;font-weight:500;font-variant-numeric:tabular-nums} .fact dd.big{font-size:1.35rem;color:var(--gilt);font-weight:600} .caveat{ margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line); font-size:.84rem;color:var(--muted); } .caveat strong{color:var(--ink-2)} /* ── rejilla de herramientas ─────────────────────────── */ section.tools{padding:3.5rem 0 1rem} .sec-head{margin-bottom:1.5rem} .sec-head h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:1.7rem;margin:0 0 .3rem;letter-spacing:-.01em} .sec-head p{margin:0;color:var(--muted);font-size:.95rem} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .card{background:var(--surface);padding:1.25rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:inherit} .card:hover{background:var(--vault-soft)} .card:focus-visible{outline:3px solid var(--gilt);outline-offset:-3px} .card .k{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .card h3{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:1.18rem;margin:0;letter-spacing:-.01em} .card p{margin:0;font-size:.88rem;color:var(--ink-2)} .card .live{margin-top:.35rem;font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--vault);font-variant-numeric:tabular-nums} /* ── procedencia ─────────────────────────────────────── */ .prov{margin:3.5rem 0 0;border-top:2px solid var(--ink);padding-top:1.4rem} .prov h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:1.35rem;margin:0 0 .8rem} .prov ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem;font-size:.9rem;color:var(--ink-2)} .prov li{display:flex;gap:.6rem} .prov li::before{content:"—";color:var(--gilt);flex:none} footer.site{margin-top:3.5rem;border-top:1px solid var(--line);padding:1.6rem 0 3rem;font-size:.84rem;color:var(--muted)} @media (max-width:640px){ .head{flex-direction:column;align-items:flex-start;gap:.9rem} nav.main{flex-wrap:wrap;gap:1rem} .hero{padding-top:2.25rem} } /* ══════════════════════════════════════════════════════════════════════════ IMPLEMENTACIÓN — añadido 2026-08-22 al montar el sitio sobre WordPress+Bricks ────────────────────────────────────────────────────────────────────────── Todo lo de arriba es el mockup aprobado, palabra por palabra. Lo de aquí abajo es lo que el mockup no tenía que resolver porque era una página suelta: el contenedor que pone Bricks, la tipografía de las páginas de texto, el puente de tokens hacia los widgets y las guardas de desbordamiento en móvil. NINGÚN color ni familia nueva: todo sale de los tokens de TOKENS.md. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · El contenedor de Bricks ────────────────────────────────────────── Bricks envuelve el contenido en
. Sin plantilla de Bricks (las 20 están en la papelera) ese contenedor no trae ni ancho ni márgenes: se los damos aquí, con el mismo --maxw del diseño. */ /* `body #brx-content` (1,0,1) y no `#brx-content` (1,0,0): Bricks trae su propia regla sobre ese mismo ID y ganaba. La regla exacta, localizada leyendo la cascada en el navegador en vez de adivinando: `content-default.min.css` trae `#brx-content.wordpress{max-width:100%;width:1100px}` — (1,1,0). Por eso aquí va `body #brx-content.wordpress` (1,1,1). Medido: el contenido salía a 1.100 px con --maxw en 1.024 y arrancaba 14 px a la izquierda del .wrap de la cabecera. */ body #brx-content,body #brx-content.wordpress{max-width:var(--maxw);margin:0 auto;padding:2.75rem 1.5rem 0;width:100%; display:flex;flex-direction:column} /* 🔴 Bricks pinta ÉL el

con el título de la página, antes del contenido. Medido en el HTML servido de /methodology/ el 22-08. Consecuencias, las dos resueltas aquí: (1) el contenido NO lleva su propio

— habría dos; el título de WordPress ES el H1, así que el título de cada página se escribe como titular, no como etiqueta de menú; (2) el eyebrow del diseño va ENCIMA del H1, y en el DOM viene después. Se recoloca con `order:-1` sobre el contenedor flex: el orden del documento (H1 primero) se conserva para quien lee el HTML, y el orden visual es el del mockup. Nada oculto. */ body #brx-content > h1,body #brx-content.wordpress > h1{font-family:Newsreader,Georgia,serif;font-weight:500; font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.08;letter-spacing:-.02em; margin:0 0 .9rem;text-wrap:balance} body #brx-content > .cf-top{order:-1;margin:0 0 .8rem} body #brx-content > .cf-lede{font-size:1.06rem;color:var(--ink-2);max-width:34rem;margin:0 0 2rem} body #brx-content > .cf-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw} body{overflow-x:hidden} /* red de seguridad, no sustituto de medir */ img,svg,video{max-width:100%;height:auto} /* ── 2 · Cabecera y pie que emite el mu-plugin ───────────────────────────── */ .logo{color:inherit;text-decoration:none} .logo:hover{color:var(--vault)} nav.main a[aria-current="page"]{color:var(--vault);border-bottom-color:var(--vault)} footer.site .foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:0 0 .9rem} footer.site .foot-nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)} footer.site .foot-nav a:hover{color:var(--vault);border-bottom-color:var(--vault)} footer.site .foot-note{margin:0 0 .6rem;max-width:44rem} footer.site .foot-copy{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em} /* ── 3 · Páginas de texto (legales, methodology, about, contact) ────────── El cuerpo mide lo mismo que el del mockup; lo que cambia es que aquí sí hay prosa larga, tablas de cuatro columnas y listas. */ .cf-page{padding:0 0 1rem} .cf-page > *:first-child{margin-top:0} .cf-page h1{margin-bottom:1.1rem} .cf-page h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:1.5rem;line-height:1.2; letter-spacing:-.01em;margin:2.4rem 0 .7rem;padding-top:.9rem;border-top:1px solid var(--line)} .cf-page h3{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:1.2rem;margin:1.7rem 0 .5rem} .cf-page p,.cf-page li{max-width:44rem} .cf-page p{margin:0 0 1rem} .cf-page ul,.cf-page ol{margin:0 0 1.2rem;padding-left:1.25rem} .cf-page li{margin-bottom:.4rem} .cf-page a{color:var(--vault);text-decoration:underline;text-underline-offset:2px} .cf-page a:hover{color:var(--ink)} .cf-page .cf-lede{font-size:1.06rem;color:var(--ink-2);border-left:3px solid var(--vault); padding-left:1rem;margin-bottom:1.6rem} .cf-page code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--surface-2); padding:.1em .35em;border-radius:2px} .cf-page dl{margin:0 0 1.2rem} .cf-page dt{font-weight:600;margin-top:.8rem} .cf-page dd{margin:0 0 0 1.1rem;color:var(--ink-2)} /* Tablas: dentro de un carril que hace scroll SOLO ella. La página nunca se desplaza en horizontal — es el punto que se mide a 375 px. */ .cf-page .cf-tablewrap,.cf-page table{max-width:100%} .cf-page .cf-tablewrap{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line)} .cf-page table{border-collapse:collapse;width:100%;font-size:.9rem;background:var(--surface)} .cf-page thead th{background:var(--surface-2);text-align:left;font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;font-family:"IBM Plex Mono",monospace;color:var(--muted);font-weight:600} .cf-page th,.cf-page td{border:1px solid var(--line);padding:.6rem .7rem;vertical-align:top} .cf-page td p:last-child{margin-bottom:0} /* Columnas de dato. TOKENS.md §Tipografía: los números van SIEMPRE en IBM Plex Mono con tabular-nums. Sin esto, una columna de tiradas (25,000 / 9,600,000) baila de fila en fila y deja de poder compararse de un vistazo, que es para lo que existe la tabla. */ .cf-page td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums; text-align:right;white-space:nowrap} /* Cita literal de una fuente (un artículo de ley, una condición de venta). Va marcada como cita, no como aviso: el `.caveat` es la voz de la casa avisando, y esto es la voz de OTRO. En una web cuyo argumento es «cada cifra con su fuente», que se vea la costura importa. */ .cf-page blockquote{margin:0 0 1.2rem;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--gilt); background:var(--gilt-soft);max-width:44rem} .cf-page blockquote p{margin:.8rem 0;font-style:italic;color:var(--ink-2)} /* ── 4 · El descargo financiero ([curiofeed_disclaimer]) ────────────────── Tipografía IGUAL de grande que el cuerpo, a propósito: un descargo en letra pequeña es el patrón que se lee como intento de esconderlo. */ .cf-disclaimer{background:var(--gilt-soft);border-left:4px solid var(--gilt); padding:1rem 1.15rem;margin:0 0 1.8rem;border-radius:0 var(--radius) var(--radius) 0} .cf-disclaimer p{margin:0;font-size:1rem;color:var(--ink);max-width:46rem} .cf-disclaimer a{color:var(--ink);text-decoration:underline} /* ── 5 · Cabecera de página de herramienta ───────────────────────────────── */ .cf-toolhead{padding:2.5rem 0 1.4rem} .cf-toolhead h1{margin-bottom:.6rem} .cf-toolhead .lede{margin-bottom:1.4rem} .cf-widget{margin:0 0 2.2rem} .cf-body{padding-bottom:1rem} /* ── 6 · El precio vivo suelto (cf-live.js) ──────────────────────────────── */ .cf-live{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--vault)} .cf-live--off{color:var(--alert)} .card .cf-live{margin-top:.35rem;font-size:.78rem} /* ── 7 · Puente de tokens hacia los widgets ────────────────────────────── Los cuatro widgets se construyeron antes que el diseño y leen su paleta de variables --cf-*, con valores por defecto propios. Aquí se les da la paleta aprobada: así adoptan el sitio sin tocar ni una línea de su HTML — y el día que el diseño evolucione, evolucionan con él. */ :root{ --cf-ink:var(--ink); --cf-brand:var(--vault); --cf-muted:var(--muted); --cf-line:var(--line); --cf-surface-alt:var(--surface-2); --cf-gold:var(--gilt); --cf-gold-soft:var(--gilt-soft); --cf-silver:var(--ink-2); --cf-silver-soft:var(--surface-2); --cf-good:var(--vault); --cf-good-bg:var(--vault-soft); --cf-warn:var(--alert); --cf-warn-bg:var(--gilt-soft); --cf-radius:var(--radius); --cf-radius-sm:2px; --cf-font-heading:Newsreader,Georgia,serif; --cf-font-body:"Public Sans","Helvetica Neue",Arial,sans-serif; } /* Los widgets pintan su propia superficie en blanco duro; en modo oscuro eso sería un rectángulo cegador dentro de una página oscura. */ .cfg-calc,.cfs-calc,.cfc-calc,.cfs-lookup{background:var(--surface);color:var(--ink);max-width:100%} .cfg-calc *,.cfs-calc *,.cfc-calc *,.cfs-lookup *{max-width:100%} /* ── 8 · Móvil (medido a 375 px) ─────────────────────────────────────────── */ @media (max-width:640px){ body #brx-content,body #brx-content.wordpress{padding:2rem 1rem 0} .wrap{padding:0 1rem} .cf-page h2{font-size:1.3rem} .cf-page .cf-lede{padding-left:.8rem} .grid{grid-template-columns:1fr} .facts{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr))} } /* Nota menor al pie de una página (no es un descargo: eso va en .cf-disclaimer, que por norma se compone al mismo tamaño que el cuerpo). */ .cf-note-small{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line); padding-top:.9rem;margin:1.6rem 0 0} /* La imagen de identificación del titular: el NIF y el domicilio solo viajan dentro de ella, nunca como texto. Se encuadra para que se lea como un documento, no como una foto. */ .mn-legal-id{margin:1.2rem 0 1.6rem;padding:0;max-width:34rem} .mn-legal-id img{border:1px solid var(--line-2);border-radius:var(--radius);display:block} /* El enlace de consentimiento del pie. Es un