/*
SecForge — shared theme tokens.
All UI colours read from CSS variables on :root so flipping
`` recolours the entire site.
*/
:root,
html[data-theme="dark"] {
--background: 240 10% 4%;
--surface: 240 6% 9%;
--surface-2: 240 6% 11%;
--border: 240 5% 13%;
--foreground: 0 0% 98%;
--muted-foreground: 240 5% 65%;
--muted: 240 4% 46%;
--accent: 142 76% 45%;
--accent-2: 172 78% 48%;
--accent-dark: 142 72% 29%;
--accent-foreground: 240 10% 4%;
--shadow: 0 0 0 rgba(0, 0, 0, 0);
--hero-overlay-a: 240 10% 4% / 0.85;
--hero-overlay-b: 240 10% 4% / 0.35;
--hero-bottom-a: 240 10% 4%;
--hero-bottom-b: 240 10% 4% / 0.4;
}
html[data-theme="light"] {
--background: 225 18% 84%;
--surface: 222 18% 91%;
--surface-2: 225 16% 81%;
--border: 225 14% 72%;
--foreground: 225 20% 12%;
--muted-foreground: 225 8% 36%;
--muted: 225 6% 48%;
--accent: 160 70% 32%;
--accent-2: 188 70% 35%;
--accent-dark: 160 80% 22%;
--accent-foreground: 0 0% 100%;
--hero-overlay-a: 0 0% 99% / 0.0;
--hero-overlay-b: 0 0% 99% / 0.0;
--hero-bottom-a: 0 0% 99%;
--hero-bottom-b: 0 0% 99% / 0.4;
}
/* Force “dark” colour tokens locally inside hero sections (and the navbar
while it overlays the hero). This keeps the dark video readable without
washing it out in light mode. */
[data-theme-section="dark"] {
--background: 240 10% 4%;
--surface: 240 6% 9%;
--surface-2: 240 6% 11%;
--border: 240 5% 13%;
--foreground: 0 0% 98%;
--muted-foreground: 240 5% 65%;
--muted: 240 4% 46%;
--hero-overlay-a: 240 10% 4% / 0.85;
--hero-overlay-b: 240 10% 4% / 0.35;
--hero-bottom-a: 240 10% 4%;
--hero-bottom-b: 240 10% 4% / 0.4;
color: hsl(var(--foreground));
}
html,
body {
background: hsl(var(--background));
color: hsl(var(--foreground));
}
/* Utility colour bridges so any `bg-background`, `bg-surface`, etc. tailwind
utilities stay correct when theme flips — tailwind config wires its
colour tokens to these same variables. */
::selection {
background: hsl(var(--accent) / .35);
color: hsl(var(--foreground));
}
/* Reveal animation primitive used by index pages */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* Marquee — a continuous horizontal scroll for the AI signals strip.
Track holds the cards duplicated; translating by -50% loops seamlessly. */
@keyframes sf-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.marquee-track {
display: flex;
gap: 1rem;
width: max-content;
animation: sf-marquee 60s linear infinite;
}
.marquee:hover .marquee-track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
}
/* Light theme: tweak the hero overlay so dark video doesn't ruin contrast */
html[data-theme="light"] .video-mask::after {
background: linear-gradient(135deg, transparent 0%, hsl(var(--background) / 0.85) 60%, hsl(var(--background)) 100%);
}
/* ── Section mood: OFFENSIVE (red/orange) ────────────────────────────── */
/* Use: or on any container.
Especificidad: debe igualar o superar la de ":root, html[data-theme=dark]"
(0,1,1) o el verde por defecto gana siempre — bug real, corregido 2026-07-07:
antes esta regla era solo "[data-section-mood=...]" (0,1,0) y nunca ganaba. */
[data-section-mood="offensive"],
html[data-section-mood="offensive"] {
--accent: 12 85% 55%;
--accent-2: 28 90% 52%;
--accent-dark: 12 80% 35%;
--accent-foreground: 0 0% 100%;
}
html[data-theme="light"][data-section-mood="offensive"] {
--accent: 12 78% 45%;
--accent-2: 28 82% 42%;
--accent-dark: 12 80% 28%;
}
/* ── Section mood: DEFENSIVE (blue) ──────────────────────────────────── */
/* Use: or on any container. Misma
corrección de especificidad que offensive, arriba. */
[data-section-mood="defensive"],
html[data-section-mood="defensive"] {
--accent: 210 80% 55%;
--accent-2: 195 85% 50%;
--accent-dark: 210 75% 35%;
--accent-foreground: 0 0% 100%;
}
html[data-theme="light"][data-section-mood="defensive"] {
--accent: 210 70% 42%;
--accent-2: 195 75% 38%;
--accent-dark: 210 72% 28%;
}
/* ════════════════════════════════════════════════════════════════════════
SecForge design system v2 (rediseño 2026-07-07)
Identidad por sección + componentes premium. Verde es la marca; cada
sección lo combina con un color secundario controlado (azul, cian,
morado, ámbar) vía . Especificidad (0,1,1) para
ganar a ":root, html[data-theme=dark]" por orden de fuente, igual que el
sistema de mood de arriba. Light theme se sobreescribe con (0,2,1).
════════════════════════════════════════════════════════════════════════ */
/* — Dark (por defecto) — */
html[data-section="ai"] { --accent: 190 90% 52%; --accent-2: 262 83% 68%; --accent-dark: 200 80% 38%; --accent-foreground: 240 10% 5%; }
html[data-section="lab"] { --accent: 265 84% 68%; --accent-2: 288 85% 70%; --accent-dark: 265 60% 42%; --accent-foreground: 0 0% 100%; }
html[data-section="compare"] { --accent: 38 92% 56%; --accent-2: 172 78% 50%; --accent-dark: 32 80% 40%; --accent-foreground: 240 10% 5%; }
html[data-section="resources"] { --accent: 168 78% 46%; --accent-2: 190 85% 52%; --accent-dark: 168 70% 30%; --accent-foreground: 240 10% 5%; }
html[data-section="news"] { --accent: 142 74% 46%; --accent-2: 200 88% 56%; --accent-dark: 142 72% 29%; --accent-foreground: 240 10% 5%; }
html[data-section="cyber"] { --accent: 142 76% 45%; --accent-2: 168 78% 50%; --accent-dark: 142 72% 29%; --accent-foreground: 240 10% 5%; }
html[data-section="home"] { --accent: 142 76% 45%; --accent-2: 190 85% 55%; --accent-dark: 142 72% 29%; --accent-foreground: 240 10% 5%; }
/* — Light overrides — */
html[data-theme="light"][data-section="ai"] { --accent: 198 85% 38%; --accent-2: 262 70% 52%; --accent-dark: 200 80% 30%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="lab"] { --accent: 265 70% 52%; --accent-2: 288 66% 52%; --accent-dark: 265 62% 40%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="compare"] { --accent: 32 88% 42%; --accent-2: 172 70% 34%; --accent-dark: 30 84% 34%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="resources"] { --accent: 168 72% 30%; --accent-2: 190 75% 36%; --accent-dark: 168 74% 24%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="news"] { --accent: 160 68% 32%; --accent-2: 205 78% 42%; --accent-dark: 160 78% 24%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="cyber"] { --accent: 160 70% 32%; --accent-2: 172 70% 34%; --accent-dark: 160 78% 24%; --accent-foreground: 0 0% 100%; }
html[data-theme="light"][data-section="home"] { --accent: 160 70% 32%; --accent-2: 198 76% 40%; --accent-dark: 160 78% 24%; --accent-foreground: 0 0% 100%; }
/* ── Gradient text (marca / palabra clave del hero) ─────────────────────── */
.sf-grad {
background: linear-gradient(100deg, hsl(var(--accent)) 0%, hsl(var(--accent-2)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* ── Hero premium: aura radial + rejilla técnica enmascarada ────────────── */
.sf-hero { position: relative; overflow: hidden; isolation: isolate; }
.sf-hero-aura::before {
content: ''; position: absolute; inset: -10% -10% auto auto; width: 60%; height: 120%;
background:
radial-gradient(45% 45% at 80% 18%, hsl(var(--accent) / 0.20), transparent 70%),
radial-gradient(40% 40% at 62% 42%, hsl(var(--accent-2) / 0.16), transparent 72%);
filter: blur(6px); z-index: -1; pointer-events: none;
}
/* Home: mapa mundi decorativo, muy sutil, detrás de la rejilla técnica */
.sf-hero-map::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: url('img/thumb-home-map.webp') top center / 100% auto no-repeat;
opacity: 0.32;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 48%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 48%);
}
html[data-theme="light"] .sf-hero-map::before { opacity: 0.14; }
@media (max-width: 1023px) { .sf-hero-map::before { display: none; } }
.sf-hero-grid::after {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(to right, hsl(var(--foreground) / 0.045) 1px, transparent 1px),
linear-gradient(to bottom, hsl(var(--foreground) / 0.045) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(120% 90% at 75% 0%, #000 0%, transparent 68%);
mask-image: radial-gradient(120% 90% at 75% 0%, #000 0%, transparent 68%);
}
/* ── Card: elevación + glow del acento en hover (sin tocar el HTML) ──────── */
.card { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.card:hover { transform: translateY(-4px); }
.card > .relative:first-child,
.card > div:first-child { transition: border-color .35s ease, box-shadow .35s ease; }
.card:hover > .relative:first-child,
.card:hover > div:first-child {
border-color: hsl(var(--accent) / 0.45);
box-shadow: 0 0 0 1px hsl(var(--accent) / 0.22), 0 20px 48px -22px hsl(var(--accent) / 0.40);
}
.card:hover .ul-link::after { transform: scaleX(1); }
/* ── Chips premium (toolbar de filtros) ─────────────────────────────────── */
.sf-chip { transition: color .2s, border-color .2s, background-color .2s; }
/* ── Sistema de categorías de color (Cybersecurity) ─────────────────────── */
/* Cada categoría fija su propio --cat; los átomos leen de ahí. */
.sf-cat { --cat: var(--accent); }
.sf-cat--threat { --cat: 142 70% 48%; }
.sf-cat--vuln { --cat: 265 84% 68%; }
.sf-cat--web { --cat: 190 88% 54%; }
.sf-cat--cloud { --cat: 205 88% 60%; }
.sf-cat--malware { --cat: 20 90% 58%; }
.sf-cat--incident { --cat: 40 94% 56%; }
.sf-cat--defense { --cat: 210 85% 62%; }
html[data-theme="light"] .sf-cat--threat { --cat: 150 70% 30%; }
html[data-theme="light"] .sf-cat--vuln { --cat: 265 65% 50%; }
html[data-theme="light"] .sf-cat--web { --cat: 196 80% 36%; }
html[data-theme="light"] .sf-cat--cloud { --cat: 208 80% 42%; }
html[data-theme="light"] .sf-cat--malware { --cat: 20 80% 44%; }
html[data-theme="light"] .sf-cat--incident { --cat: 36 88% 40%; }
html[data-theme="light"] .sf-cat--defense { --cat: 212 76% 44%; }
/* Chip de categoría */
.sf-cat-badge {
display: inline-flex; align-items: center; gap: .4rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: hsl(var(--cat)); border: 1px solid hsl(var(--cat) / 0.35);
background: hsl(var(--cat) / 0.08); padding: .28rem .6rem; border-radius: 999px;
}
.sf-cat-dot { width: .45rem; height: .45rem; border-radius: 999px; background: hsl(var(--cat)); box-shadow: 0 0 8px hsl(var(--cat) / 0.8); }
/* Tarjeta de categoría (rejilla de pilares) */
.sf-cat-card {
position: relative; display: flex; flex-direction: column; gap: .55rem;
padding: 1.25rem; border-radius: 14px; overflow: hidden;
background: hsl(var(--surface) / 0.7); border: 1px solid hsl(var(--border));
transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.sf-cat-card::before {
content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
background: linear-gradient(hsl(var(--cat)), hsl(var(--cat) / 0.2));
}
.sf-cat-card::after {
content: ''; position: absolute; inset: -40% -40% auto auto; width: 70%; height: 90%;
background: radial-gradient(50% 50% at 70% 20%, hsl(var(--cat) / 0.18), transparent 70%);
opacity: 0; transition: opacity .35s; pointer-events: none;
}
.sf-cat-card:hover {
transform: translateY(-4px); border-color: hsl(var(--cat) / 0.5);
box-shadow: 0 20px 48px -24px hsl(var(--cat) / 0.5);
}
.sf-cat-card:hover::after { opacity: 1; }
.sf-cat-ico {
width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 10px;
color: hsl(var(--cat)); background: hsl(var(--cat) / 0.1); border: 1px solid hsl(var(--cat) / 0.28);
}
/* ── Panel de estadística real (sin cifras inventadas) ──────────────────── */
.sf-stat { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--surface) / 0.6); padding: 1rem 1.15rem; }
.sf-stat b { font-family: 'Sora', sans-serif; font-weight: 600; }
/* ── Nebulosa cósmica (hero de Lab) ─────────────────────────────────────── */
.sf-nebula::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 55% at 78% 20%, hsl(265 84% 60% / 0.28), transparent 70%),
radial-gradient(34% 50% at 92% 55%, hsl(288 85% 62% / 0.22), transparent 72%),
radial-gradient(30% 45% at 60% 85%, hsl(230 80% 55% / 0.16), transparent 74%);
}
.sf-stars::after {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
background-image:
radial-gradient(1px 1px at 20% 30%, hsl(0 0% 100% / .7), transparent),
radial-gradient(1px 1px at 65% 20%, hsl(0 0% 100% / .5), transparent),
radial-gradient(1px 1px at 80% 60%, hsl(0 0% 100% / .6), transparent),
radial-gradient(1px 1px at 40% 75%, hsl(0 0% 100% / .45), transparent),
radial-gradient(1.5px 1.5px at 90% 35%, hsl(0 0% 100% / .5), transparent),
radial-gradient(1px 1px at 15% 65%, hsl(0 0% 100% / .4), transparent);
}
html[data-theme="light"] .sf-stars::after { opacity: .18; }
/* ── Thumbnails de marca (sustituyen a los SVG ruidosos) ────────────────── */
/* Degradado del acento de la sección + rejilla técnica difuminada + emblema
de la sección enmascarado en color de acento. Coherente, limpio, adaptable
a tema y sección. El ![]()
antiguo se oculta. Placeholder premium hasta que
se metan imágenes reales por artículo. */
.sf-thumb {
position: relative; overflow: hidden;
background-color: hsl(var(--surface));
background-image:
radial-gradient(120% 150% at 100% 0%, hsl(var(--accent) / 0.30), transparent 52%),
radial-gradient(120% 150% at 0% 100%, hsl(var(--accent-2) / 0.24), transparent 52%),
linear-gradient(125deg, hsl(var(--accent) / 0.06), hsl(var(--accent-2) / 0.05));
}
.sf-thumb img[src$=".svg"] { display: none !important; }
.sf-thumb img:not([src$=".svg"]) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-thumb:has(img:not([src$=".svg"]))::before,
.sf-thumb:has(img:not([src$=".svg"]))::after { display: none; }
.sf-thumb::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--foreground) / 0.05) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask: radial-gradient(90% 90% at 78% 22%, #000 0%, transparent 72%);
mask: radial-gradient(90% 90% at 78% 22%, #000 0%, transparent 72%);
}
.sf-thumb::after {
content: ''; position: absolute; right: 5%; bottom: -12%; width: 46%; height: 82%;
background: linear-gradient(150deg, hsl(var(--accent)), hsl(var(--accent-2)));
-webkit-mask: var(--thumb-ico, none) center / contain no-repeat;
mask: var(--thumb-ico, none) center / contain no-repeat;
opacity: 0.85; pointer-events: none;
}
/* Emblema por sección (silueta rellena, enmascarada) */
html[data-section="cyber"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 4 8 8 9 4-1 8-4 8-9V5z'/%3E%3C/svg%3E"); }
html[data-section="ai"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 21 7v10l-9 5-9-5V7z'/%3E%3C/svg%3E"); }
html[data-section="lab"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v2h-1v4.6l5.3 8.9A2 2 0 0 1 17.6 21H6.4a2 2 0 0 1-1.7-3.5L10 8.6V4H9z'/%3E%3C/svg%3E"); }
html[data-section="compare"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 5.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m7 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E"); }
html[data-section="resources"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h8l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m8 1.5V7h3.5z'/%3E%3C/svg%3E"); }
html[data-section="news"] { --thumb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm3 4h7v5H6zm9 0h4v2h-4zm0 3h4v2h-4zM6 15h13v2H6z'/%3E%3C/svg%3E"); }
/* Chip sobre thumbnail (categoría/índice de la entrada). Los renders siempre
son oscuros, en los dos temas — así que el chip usa cristal oscuro fijo en
vez de --background, o en modo claro se veía como una neblina blanca sobre
la imagen. */
.sf-chip-media {
background: hsl(230 22% 7% / 0.75);
color: hsl(0 0% 97%) !important;
border-color: hsl(0 0% 97% / 0.35) !important;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Heroes fotográficos: en OSCURO difuminan los bordes para fundirse con el fondo */
.sf-hero img[fetchpriority="high"] {
-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
mask-composite: intersect;
}
/* En CLARO el difuminado deja un halo oscuro feo -> lo enmarcamos limpio */
html[data-theme="light"] .sf-hero img[fetchpriority="high"] {
-webkit-mask-image: none; mask-image: none;
border-radius: 16px; border: 1px solid hsl(var(--border));
}
/* ── Tarjetas de sección del Home (render real + color por sección) ─────── */
.sf-sec-card {
position: relative; display: flex; flex-direction: column;
border-radius: 14px; overflow: hidden; border: 1px solid hsl(var(--border));
background: hsl(var(--surface) / 0.45);
transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.sf-sec-card:hover { transform: translateY(-6px); border-color: hsl(var(--cat) / 0.5); box-shadow: 0 26px 64px -30px hsl(var(--cat) / 0.55); }
.sf-sec-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sf-sec-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.sf-sec-card:hover .sf-sec-media img { transform: scale(1.06); }
/* Fade fijo a un tono oscuro (no --surface, que en tema claro crea un velo
gris pálido sobre unas ilustraciones con fondo oscuro nativo, dejándolas
"sucias"/difuminadas en vez de fundirse limpiamente). */
.sf-sec-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, hsl(240 10% 4% / 0.92) 3%, transparent 58%); }
.sf-sec-media::before { content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px hsl(var(--cat) / 0.12); opacity: 0; transition: opacity .35s; }
.sf-sec-card:hover .sf-sec-media::before { opacity: 1; }
.sf-sec-eyebrow, .sf-sec-arrow { color: hsl(var(--cat)); }
/* ── Slot para imagen real (cuando el usuario aporte renders/fotos) ─────── */
/* Uso:
La imagen rellena el hueco con overlay para integrarse con el tema. */
.sf-media { position: relative; overflow: hidden; background: hsl(var(--surface)); }
.sf-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(160deg, transparent 55%, hsl(var(--background) / 0.35));
}
/* ── News: fila tipo periódico digital (calcada al mockup) ──────────────── */
.sf-news-row { position: relative; }
@media (min-width: 768px) {
.sf-news-row { display: grid; grid-template-columns: 1fr 224px; gap: 1.75rem; align-items: center; }
}
/* Caja de miniatura FIJA e idéntica en todas las filas (16:10). La imagen la
rellena con object-fit:cover — nunca se estira a la altura del texto. */
.sf-news-media { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid hsl(var(--border)); aspect-ratio: 16 / 10; width: 100%; }
@media (max-width: 767px) { .sf-news-media { margin-top: 1.1rem; } }
.sf-tag {
display: inline-flex; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 0.22rem 0.6rem; background: hsl(var(--surface-2) / 0.6);
}
.sf-byline-ava {
width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center;
border: 1px solid hsl(var(--accent) / 0.35); background: hsl(var(--accent) / 0.10); flex: none;
}
.sf-bookmark {
position: absolute; top: 1.35rem; right: 1.35rem; z-index: 2;
width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px;
color: hsl(var(--muted)); background: hsl(var(--background) / 0.5); border: 1px solid hsl(var(--border));
transition: color 0.2s, border-color 0.2s;
}
.sf-bookmark:hover { color: hsl(var(--accent)); border-color: hsl(var(--accent) / 0.5); }
/* ── Toolbar tipo dropdown (visual) + paginación ────────────────────────── */
.sf-tool {
display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.85rem;
border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--surface) / 0.4);
font-size: 12.5px; color: hsl(var(--muted-foreground)); transition: color 0.2s, border-color 0.2s;
}
.sf-tool:hover { color: hsl(var(--foreground)); }
.sf-view-btn { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px; color: hsl(var(--muted-foreground)); transition: color 0.2s, background-color 0.2s; }
.sf-view-btn[aria-pressed="true"] { color: hsl(var(--accent)); background: hsl(var(--accent) / 0.12); }
.sf-page {
min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; display: inline-grid; place-items: center;
border-radius: 8px; border: 1px solid transparent; font-size: 13px; color: hsl(var(--muted-foreground)); transition: all 0.2s;
}
.sf-page:hover { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.sf-page[aria-current="page"] { color: hsl(var(--accent)); border-color: hsl(var(--accent) / 0.45); background: hsl(var(--accent) / 0.10); }
.sf-page[disabled] { opacity: 0.4; pointer-events: none; }
/* Vista cuadrícula opcional (toggle lista/grid) */
#cards.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
#cards.is-grid .sf-news-row { display: flex; flex-direction: column; }
#cards.is-grid .sf-news-media { order: -1; margin: 0 0 1.1rem; aspect-ratio: 16 / 9; }
/* Pagefind search UI — retema el widget genérico para que use la paleta,
tipografía y radios de SecForge en vez del look por defecto (blanco,
Helvetica, gris #393939). Las variables leen de los mismos tokens HSL
que el resto del sitio, así que reaccionan solas al cambio de tema. */
#sf-pagefind {
--pagefind-ui-scale: 1;
--pagefind-ui-primary: hsl(var(--accent));
--pagefind-ui-text: hsl(var(--foreground));
--pagefind-ui-background: hsl(var(--surface));
--pagefind-ui-border: hsl(var(--border));
--pagefind-ui-tag: hsl(var(--surface-2));
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 10px;
--pagefind-ui-image-border-radius: 8px;
--pagefind-ui-image-box-ratio: 16 / 9;
--pagefind-ui-font: 'Sora', sans-serif;
}
#sf-pagefind .pagefind-ui__search-input {
font-family: 'Sora', sans-serif;
font-weight: 500;
color: hsl(var(--foreground));
background-color: hsl(var(--background));
}
#sf-pagefind .pagefind-ui__search-input:focus-visible {
outline: 2px solid hsl(var(--accent) / 0.5);
outline-offset: -1px;
}
#sf-pagefind .pagefind-ui__search-clear { background-color: transparent; }
#sf-pagefind .pagefind-ui__result-link { font-family: 'Sora', sans-serif; }
#sf-pagefind .pagefind-ui__result-link:hover { text-decoration-color: hsl(var(--accent)); }
#sf-pagefind .pagefind-ui__result-excerpt mark {
background: hsl(var(--accent) / 0.22);
color: hsl(var(--foreground));
border-radius: 3px;
}
#sf-pagefind .pagefind-ui__button {
font-family: 'Sora', sans-serif;
background: hsl(var(--surface-2));
}
#sf-pagefind .pagefind-ui__button:hover {
border-color: hsl(var(--accent));
color: hsl(var(--accent));
}
#sf-pagefind .pagefind-ui__message { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 400; opacity: 0.75; }
/* Resultados de búsqueda como tarjetas: miniatura real + etiqueta de
sección (assets/page.js añade el elemento .sf-result-tag por resultado). */
#sf-pagefind .pagefind-ui__result {
border-radius: 10px;
padding-left: 10px; padding-right: 10px;
margin-left: -10px; margin-right: -10px;
transition: background-color 0.15s ease;
}
#sf-pagefind .pagefind-ui__result:hover { background-color: hsl(var(--surface-2) / 0.6); }
#sf-pagefind .pagefind-ui__result-thumb {
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--border));
}
#sf-pagefind .sf-result-tag {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
color: hsl(var(--accent));
background: hsl(var(--accent) / 0.12);
border-radius: 999px;
padding: 3px 9px;
margin-bottom: 6px;
}
#cards.is-grid .sf-bookmark { top: 1rem; right: 1rem; }
/* Home hero: fondo de red de nodos interactiva (decorativo, assets/hero-fx.js).
Bloque aislado — no toca ninguna regla existente. Seguro de borrar entero
(esta regla + hero-fx.js + el