/* ========================================================================== ALARCOS — Sistema visual "nítido" (papel técnico + laboratorio) -------------------------------------------------------------------------- Capa aditiva: se carga DESPUÉS de style.css y solo actúa si el lleva la clase `nitido`. Sin esa clase este fichero no pinta nada, igual que `cc-ui` en el panel ALARNET3 (spec §2.16). Activar/revertir = poner o quitar la clase en index.php. Dirección "instrumento técnico": fondo claro, rejilla de plano técnico, líneas finas en vez de sombras difusas, titulares en Inter apretado y metadatos/cifras en IBM Plex Mono (kicker entre corchetes, marcas de medición). Un único acento de acción. Nada de degradados decorativos. ========================================================================== */ :root { /* Tinta */ --n-ink: #16202c; --n-ink-2: #4a5768; --n-ink-3: #7b8798; --n-ink-deep: #101a26; /* Superficies y líneas */ --n-surface: #ffffff; --n-paper: #f6f8fb; --n-line: #e4e9f0; --n-line-strong: #cfd8e3; /* Marca (los valores RGB vienen de style.css) */ --n-blue: rgb(var(--alarcos-blue-value)); --n-blue-ink: #0b6fa4; /* azul legible sobre blanco (AA) */ --n-blue-wash: rgba(var(--alarcos-blue-value), 0.06); --n-green: rgb(var(--alarcos-green-value)); --n-green-ink: #4e7d16; /* Radios: solo dos */ --n-r: 12px; --n-r-sm: 8px; /* Elevación: casi nada */ --n-shadow: 0 1px 2px rgba(16, 32, 44, 0.05); --n-shadow-lift: 0 2px 6px rgba(16, 32, 44, 0.07); /* Ritmo vertical */ --n-section: clamp(56px, 7vw, 96px); --n-max: 1240px; /* Tipografía: Inter para todo el texto, mono técnico para metadatos y cifras */ --n-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --n-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ── Base ────────────────────────────────────────────────────────────── */ body.nitido { font-family: var(--n-sans); color: var(--n-ink); background-color: var(--n-surface); font-feature-settings: 'cv05' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; } body.nitido ::selection { background: var(--n-blue-wash); color: var(--n-ink); } body.nitido :focus-visible { outline: 2px solid var(--n-blue-ink); outline-offset: 2px; border-radius: 4px; } /* ── Cáscara: navbar y footer ────────────────────────────────────────── */ body.nitido .navbar { background-color: var(--n-surface); border-bottom: 1px solid var(--n-line); box-shadow: none; } body.nitido .navbar.scrolled { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid var(--n-line-strong); box-shadow: var(--n-shadow) !important; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } body.nitido .main-menu .nav-link { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; color: var(--n-ink-2); position: relative; } body.nitido .main-menu .nav-link:hover, body.nitido .main-menu .nav-link:focus, body.nitido .main-menu .nav-link.active { color: var(--n-ink); } body.nitido .main-menu .nav-item > .nav-link.active::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.1rem; height: 2px; background: var(--n-blue); } body.nitido .navbar .dropdown-menu { border: 1px solid var(--n-line); border-radius: var(--n-r-sm); box-shadow: var(--n-shadow-lift); font-size: 0.88rem; } body.nitido #scroll-progress { height: 2px; background: var(--n-blue); border-radius: 0; } body.nitido .site-footer { background: var(--n-ink-deep); border-top: 1px solid rgba(255, 255, 255, 0.08); /* La rejilla del footer se pasa ~10px del ancho cuando hay barra de scroll (gutters negativos de Bootstrap; preexistente, se ve como scroll horizontal a partir de ~1000px). Se recorta aquí en vez de tocar footer.php. */ overflow-x: clip; } body.nitido .footer-title::after { background: var(--n-green); } /* ── Tipografía del sistema ──────────────────────────────────────────── */ .n-kicker { font-family: var(--n-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-blue-ink); margin: 0 0 0.9rem; } .n-kicker::before { content: "[ "; } .n-kicker::after { content: " ]"; } .n-display { font-family: var(--n-sans); font-weight: 600; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; color: var(--n-ink); margin: 0 0 1.1rem; max-width: 20ch; } .n-h2 { font-family: var(--n-sans); font-weight: 600; font-size: clamp(1.55rem, 2.5vw, 2.05rem); line-height: 1.18; letter-spacing: -0.024em; color: var(--n-ink); margin: 0; } .n-lead { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--n-ink-2); max-width: 58ch; margin: 0 0 1.25rem; } .n-motto { font-family: var(--n-mono); font-size: 0.78rem; line-height: 1.55; color: var(--n-blue-ink); background: var(--n-blue-wash); border-left: 2px solid var(--n-blue-ink); padding: 0.5rem 0.8rem; margin: 0 0 1.75rem; max-width: 52ch; display: inline-block; } /* ── Contenedor, secciones y cabeceras ───────────────────────────────── */ .n-container { width: 100%; max-width: var(--n-max); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } .n-section { padding-block: var(--n-section); } .n-section--paper { background: var(--n-paper); border-block: 1px solid var(--n-line); } .n-head { max-width: 62ch; margin-bottom: clamp(28px, 3.5vw, 44px); } .n-head__text { margin: 0.75rem 0 0; color: var(--n-ink-2); line-height: 1.6; } .n-rule { height: 1px; background: var(--n-line); border: 0; margin: 0; } /* ── Acciones ────────────────────────────────────────────────────────── */ .n-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .n-actions--end { justify-content: flex-end; } .n-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.72rem 1.35rem; border-radius: 6px; border: 1px solid var(--n-blue-ink); background: var(--n-blue-ink); color: #fff; font-size: 0.94rem; font-weight: 500; line-height: 1; text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .n-btn:hover, .n-btn:focus { background: #095c88; border-color: #095c88; color: #fff; } .n-btn--ghost { background: transparent; color: var(--n-ink); border-color: var(--n-line-strong); } .n-btn--ghost:hover, .n-btn--ghost:focus { background: var(--n-blue-wash); border-color: var(--n-blue); color: var(--n-ink); } .n-link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.94rem; font-weight: 500; color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.18s ease, gap 0.18s ease; } .n-link-arrow:hover, .n-link-arrow:focus { color: var(--n-blue-ink); border-bottom-color: var(--n-blue-ink); gap: 0.7rem; } /* ── Hero ────────────────────────────────────────────────────────────── */ .n-hero { position: relative; padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--n-paper) 0%, var(--n-surface) 100%); overflow: hidden; } .n-hero::after { /* rejilla técnica apenas perceptible, sin animación */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(11, 111, 164, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 111, 164, 0.07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, transparent 92%); pointer-events: none; } .n-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .n-hero__mark { display: flex; justify-content: center; } .n-hero__mark img { width: min(100%, 300px); height: auto; display: block; } /* ── Mapa del grupo: la bola y sus líneas de investigación ───────────── */ .n-map { margin: 0; width: min(100%, 380px); } .n-map__svg { display: block; width: 100%; height: auto; overflow: visible; } .n-map__orbit { fill: none; stroke: var(--n-line); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 190px 190px; animation: n-map-spin 90s linear infinite; } .n-map__link { stroke: var(--n-line); stroke-width: 1; transition: stroke 0.35s ease; } .n-map__dot { fill: var(--n-surface); stroke: #b8c4d2; stroke-width: 1.6; transition: fill 0.35s ease, stroke 0.35s ease; } .n-map__halo { fill: var(--n-blue-ink); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.5); transition: opacity 0.35s ease, transform 0.35s ease; } .n-map__node { cursor: pointer; } .n-map__node:focus { outline: none; } .n-map__node:focus-visible .n-map__dot { stroke: var(--n-blue-ink); stroke-width: 3; } .n-map__node.is-active .n-map__link { stroke: var(--n-blue-ink); } .n-map__node.is-active .n-map__dot { fill: var(--n-blue-ink); stroke: var(--n-blue-ink); } .n-map__node.is-active .n-map__halo { opacity: 0.14; transform: scale(1); } .n-map__read { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0.55rem; margin: 0.4rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--n-line); font-family: var(--n-mono); font-size: 0.78rem; line-height: 1.45; /* Altura reservada: sin ella el bloque crecía al cambiar de línea y movía el logo. Medido contra los 12 títulos reales (el peor, "Desarrollo Global de Software y Gestión de Conocimiento", pide 6,22 em en ES y EN); se deja 7 em de margen por si se da de alta una línea con nombre más largo. */ min-height: 7em; } .n-map__idx { color: var(--n-blue-ink); white-space: nowrap; } .n-map__name { color: var(--n-ink-2); } @keyframes n-map-spin { to { transform: rotate(360deg); } } /* ── Bloque breve (dos columnas: título a la izquierda, texto a la derecha) ─ */ .n-section--tight { padding-block: clamp(40px, 4.5vw, 64px); } .n-brief { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 64px); align-items: start; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--n-line); } .n-brief__text { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.6; color: var(--n-ink-2); max-width: 62ch; } .n-brief__text strong { color: var(--n-ink); font-weight: 600; } /* ── Actualidad: destacado + titulares AL LADO (nunca debajo) ────────── */ .n-news .news-carousel-container { background: var(--n-surface); } .n-news__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 36px); align-items: stretch; } .n-news__layout--solo { grid-template-columns: minmax(0, 1fr); } .n-more { display: flex; flex-direction: column; min-width: 0; } .n-more .n-kicker { margin-bottom: 0.75rem; } .n-headlines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-line-strong); } .n-headline { border-bottom: 1px solid var(--n-line); } .n-headline__link { display: block; padding: 0.85rem 0.6rem; text-decoration: none; border-left: 2px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; } .n-headline__link:hover, .n-headline__link:focus-visible { background: var(--n-surface); border-left-color: var(--n-blue-ink); } .n-headline__date { display: block; font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-blue-ink); margin-bottom: 0.3rem; } .n-headline__title { display: block; font-size: 0.94rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; color: var(--n-ink); } /* ── Chips de filtro reutilizables ───────────────────────────────────── */ .n-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(24px, 3vw, 36px); } .n-chip-btn { font-family: var(--n-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--n-ink-2); background: var(--n-surface); border: 1px solid var(--n-line-strong); border-radius: 6px; padding: 0.5rem 0.9rem; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .n-chip-btn:hover, .n-chip-btn:focus-visible { border-color: var(--n-blue-ink); background: var(--n-blue-wash); color: var(--n-ink); } .n-chip-btn.active { background: var(--n-blue-ink); border-color: var(--n-blue-ink); color: #fff; } /* `.filter-btn` (galería de instalaciones) arrastra de style.css nueve reglas con !important: píldora de 50px, borde de 2px, degradado azul-verde y sombra de 32px. Hay que ganarlas explícitamente para que el chip del sistema se imponga. */ body.nitido .n-chip-btn.filter-btn { min-width: 0; padding: 0.5rem 0.9rem !important; border-radius: 6px !important; border: 1px solid var(--n-line-strong) !important; background: var(--n-surface) !important; color: var(--n-ink-2) !important; font-weight: 400 !important; letter-spacing: 0.04em; box-shadow: none !important; transform: none !important; } body.nitido .n-chip-btn.filter-btn:hover, body.nitido .n-chip-btn.filter-btn:focus-visible { border-color: var(--n-blue-ink) !important; background: var(--n-blue-wash) !important; color: var(--n-ink) !important; } body.nitido .n-chip-btn.filter-btn.active { background: var(--n-blue-ink) !important; border-color: var(--n-blue-ink) !important; color: #fff !important; } /* ── Índice de áreas (#page-transferencia) ───────────────────────────── */ .n-areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-line-strong); } .n-area { border-bottom: 1px solid var(--n-line); } .n-area__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: clamp(12px, 2vw, 28px); padding: 1.05rem 0.6rem; text-decoration: none; border-left: 2px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; } .n-area__link:hover, .n-area__link:focus-visible { background: var(--n-paper); border-left-color: var(--n-blue-ink); } .n-area__idx { font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-blue-ink); } .n-area__name { font-size: 1.04rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.014em; color: var(--n-ink); } .n-area__count { font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-ink-3); white-space: nowrap; } .n-area__go { font-size: 1.05rem; color: var(--n-ink-3); align-self: center; transition: color 0.18s ease, transform 0.18s ease; } .n-area__link:hover .n-area__go, .n-area__link:focus-visible .n-area__go { color: var(--n-blue-ink); transform: translateX(3px); } @media (max-width: 640px) { .n-area__link { grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.9rem; padding-inline: 0; } .n-area__count { grid-column: 2; } .n-area__go { display: none; } } /* ── Fichas de transferencia (#page-tt-*) ────────────────────────────── */ .n-tt { border-top: 1px solid var(--n-line-strong); } .n-tt__item { border-bottom: 1px solid var(--n-line); } .n-tt__summary { display: flex; gap: 0.9rem; align-items: baseline; padding: 1.05rem 0.6rem; cursor: pointer; list-style: none; transition: background-color 0.18s ease; } .n-tt__summary::-webkit-details-marker { display: none; } .n-tt__summary:hover { background: var(--n-paper); } .n-tt__idx { font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-blue-ink); flex: 0 0 auto; } .n-tt__title { font-size: 1.02rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; color: var(--n-ink); } .n-tt__summary::after { content: "+"; margin-left: auto; font-family: var(--n-mono); color: var(--n-ink-3); flex: 0 0 auto; } .n-tt__item[open] .n-tt__summary::after { content: "−"; } .n-tt__body { padding: 0.25rem 0.6rem 1.5rem; font-size: 0.96rem; } /* ── Legales: el contenido conserva sus clases antiguas ──────────────── */ body.nitido .legal-wrapper .footer-title, body.nitido .legal-wrapper h3, body.nitido .legal-wrapper h4 { font-family: var(--n-sans); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.018em; color: var(--n-ink); margin: 2rem 0 0.6rem; } body.nitido .legal-wrapper .footer-title::after { display: none; } body.nitido .legal-wrapper .footer-text, body.nitido .legal-wrapper p, body.nitido .legal-wrapper li { color: var(--n-ink); font-size: 1rem; line-height: 1.75; } body.nitido .legal-wrapper .text-center { text-align: left !important; } /* ── Índice de servicios (#page-servicios) ───────────────────────────── */ .n-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); /* Cada tarjeta con su altura: si no, la de Publicaciones (6 enlaces) estira a las demás y deja huecos enormes. */ align-items: start; } .n-index__item { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); padding: clamp(20px, 2.2vw, 28px); text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-index__item:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-index__idx { font-family: var(--n-mono); font-size: 0.72rem; color: var(--n-blue-ink); margin-bottom: 0.6rem; } .n-index__name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.018em; color: var(--n-ink); margin: 0 0 0.5rem; } .n-index__desc { font-size: 0.92rem; line-height: 1.6; color: var(--n-ink-2); margin: 0 0 1.25rem; } .n-index__go { margin-top: auto; font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-blue-ink); } /* Variante con lista de enlaces dentro (índice de I+D) */ .n-index__item--static { cursor: default; } .n-index__links { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--n-line); } .n-index__links li { border-bottom: 1px solid var(--n-line); } .n-index__links li:last-child { border-bottom: 0; } .n-index__links a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; font-size: 0.94rem; color: var(--n-ink); text-decoration: none; transition: color 0.18s ease, padding-left 0.18s ease; } .n-index__links a:hover, .n-index__links a:focus-visible { color: var(--n-blue-ink); padding-left: 0.35rem; } .n-index__links .material-icons-outlined { font-size: 1rem; color: var(--n-ink-3); } .n-index__links a:hover .material-icons-outlined, .n-index__links a:focus-visible .material-icons-outlined { color: var(--n-blue-ink); } @media (max-width: 900px) { .n-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .n-index { grid-template-columns: minmax(0, 1fr); } .n-tt__summary, .n-tt__body { padding-inline: 0; } } /* ── Eventos (#page-eventos) ─────────────────────────────────────────── */ .n-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(14px, 1.6vw, 20px); /* Sin esto, al desplegar una tarjeta las vecinas de su fila se estiran igual */ align-items: start; } .n-event { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); padding: clamp(16px, 1.8vw, 22px); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-event:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-event[hidden] { display: none !important; } .n-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; } .n-event__type { font-family: var(--n-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border: 1px solid var(--n-line-strong); border-radius: 6px; color: var(--n-ink-2); } /* El tipo es la única señal de color de la tarjeta, y en tinta, no en relleno */ .n-event__type--conf { color: var(--n-blue-ink); border-color: rgba(11, 111, 164, 0.4); } .n-event__type--workshop { color: var(--n-green-ink); border-color: rgba(78, 125, 22, 0.4); } .n-event__type--standards { color: #8a5a00; border-color: rgba(138, 90, 0, 0.35); } .n-event__year { font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-ink-3); } .n-event__title { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; color: var(--n-ink); margin: 0; } .n-event__details { margin-top: auto; padding-top: 0.9rem; } .n-event__details summary { font-family: var(--n-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--n-blue-ink); cursor: pointer; list-style: none; } .n-event__details summary::-webkit-details-marker { display: none; } .n-event__details summary::after { content: " +"; } .n-event__details[open] summary::after { content: " −"; } .n-event__desc { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--n-line); font-size: 0.9rem; line-height: 1.6; color: var(--n-ink-2); } .n-event__desc p { margin: 0 0 0.8rem; } .n-event__desc p:last-child { margin-bottom: 0; } .n-event__link { margin: 0.75rem 0 0; } .n-event__link a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid transparent; } .n-event__link a:hover, .n-event__link a:focus-visible { border-bottom-color: var(--n-blue-ink); } .n-event__link .material-icons-outlined { font-size: 1rem; } /* ── Listado de noticias (#page-noticias) ────────────────────────────── */ .n-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding-bottom: clamp(28px, 3.5vw, 44px); margin-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--n-line-strong); } .n-featured__img { display: block; border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; background: var(--n-paper); aspect-ratio: 16 / 10; } .n-featured__img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .n-featured__img:hover img { transform: scale(1.02); } .n-featured__date, .n-newscard__date { display: flex; align-items: center; gap: 0.6rem; font-family: var(--n-mono); font-size: 0.76rem; color: var(--n-blue-ink); margin: 0 0 0.6rem; } .n-featured__flag { padding: 0.15rem 0.5rem; border: 1px solid var(--n-line-strong); border-radius: 6px; color: var(--n-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.64rem; } .n-featured__title { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.024em; margin: 0 0 0.7rem; } .n-featured__title a, .n-newscard__title a { color: var(--n-ink); text-decoration: none; } .n-featured__title a:hover, .n-featured__title a:focus-visible, .n-newscard__title a:hover, .n-newscard__title a:focus-visible { color: var(--n-blue-ink); } .n-featured__desc { font-size: 0.98rem; line-height: 1.65; color: var(--n-ink-2); margin: 0 0 1.1rem; } .n-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); } .n-newscard { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-newscard:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } /* El filtro del archivo por año oculta con [hidden]; sin esto ganaría el display:flex de arriba (ahora funciona porque el reboot de Bootstrap lo marca !important, pero no conviene depender de eso). */ .n-newscard[hidden] { display: none !important; } .n-newscard__img { display: block; aspect-ratio: 16 / 9; background: var(--n-paper); border-bottom: 1px solid var(--n-line); overflow: hidden; } .n-newscard__img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; } .n-newscard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.8vw, 22px); } .n-newscard__title { font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; margin: 0 0 0.5rem; } .n-newscard__desc { font-size: 0.88rem; line-height: 1.55; color: var(--n-ink-2); margin: 0; /* Los resúmenes vienen de longitudes muy dispares: 4 líneas y a otra cosa */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .n-years { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--n-line); } .n-years .n-chip-btn { text-decoration: none; display: inline-block; } @media (max-width: 900px) { .n-featured { grid-template-columns: minmax(0, 1fr); } .n-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .n-news-grid { grid-template-columns: minmax(0, 1fr); } } /* ── Noticia individual (#page-noticia-detalle) ──────────────────────── */ .n-article { max-width: 760px; /* medida de lectura: ~72 caracteres por línea */ } .n-article__head { margin-bottom: clamp(24px, 3vw, 36px); } .n-article__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.026em; color: var(--n-ink); margin: 0 0 0.9rem; } .n-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-family: var(--n-mono); font-size: 0.78rem; color: var(--n-ink-3); margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--n-line); } .n-article__draft { padding: 0.2rem 0.55rem; border: 1px solid var(--n-blue-ink); border-radius: 6px; color: var(--n-blue-ink); background: var(--n-blue-wash); } .n-article__figure { margin: 0 0 clamp(24px, 3vw, 36px); border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; background: var(--n-paper); } .n-article__figure img { width: 100%; height: auto; max-width: 100%; display: block; } /* Cuerpo: el HTML lo genera Parsedown + el editor, así que se estila por etiqueta */ .n-article__body { font-size: 1.02rem; line-height: 1.75; color: var(--n-ink); } .n-article__body p { margin: 0 0 1.15rem; } .n-article__body h2, .n-article__body h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 2rem 0 0.75rem; } .n-article__body h2 { font-size: 1.35rem; } .n-article__body h3 { font-size: 1.12rem; } .n-article__body a { color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid rgba(11, 111, 164, 0.35); } .n-article__body a:hover, .n-article__body a:focus-visible { border-bottom-color: var(--n-blue-ink); } .n-article__body ul, .n-article__body ol { margin: 0 0 1.15rem; padding-left: 1.3rem; } .n-article__body li { margin-bottom: 0.4rem; } .n-article__body img { max-width: 100%; height: auto; border-radius: var(--n-r-sm); border: 1px solid var(--n-line); margin: 1.25rem 0; } .n-article__body blockquote { margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.1rem; border-left: 2px solid var(--n-green); color: var(--n-ink-2); } .n-article__body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.94rem; } .n-article__body th, .n-article__body td { border: 1px solid var(--n-line); padding: 0.5rem 0.7rem; text-align: left; } .n-article__body code { font-family: var(--n-mono); font-size: 0.88em; background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 4px; padding: 0.1rem 0.35rem; } /* ── Áreas de servicio: formación y consultoría ──────────────────────── */ .n-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; } .n-offer { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); padding: clamp(18px, 2vw, 26px); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-offer:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-offer__idx { font-family: var(--n-mono); font-size: 0.72rem; color: var(--n-blue-ink); margin: 0 0 0.55rem; } .n-offer__title { font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.018em; color: var(--n-ink); margin: 0 0 0.9rem; } .n-offer__list { list-style: none; margin: 0; padding: 0; } .n-offer__list li { position: relative; padding-left: 1.1rem; padding-block: 0.3rem; font-size: 0.92rem; line-height: 1.5; color: var(--n-ink-2); border-top: 1px solid var(--n-line); } .n-offer__list li:first-child { border-top: 0; padding-top: 0; } .n-offer__list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 6px; height: 1px; background: var(--n-green); } .n-offer__list li:first-child::before { top: 0.7em; } .n-offer__list a { color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid rgba(11, 111, 164, 0.35); } .n-offer__list a:hover, .n-offer__list a:focus-visible { border-bottom-color: var(--n-blue-ink); } @media (max-width: 900px) { .n-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .n-offers { grid-template-columns: minmax(0, 1fr); } } .n-note { margin: clamp(24px, 3vw, 32px) 0 0; padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--n-line); font-size: 0.94rem; color: var(--n-ink-2); } .n-note a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid transparent; } .n-note a:hover, .n-note a:focus-visible { border-bottom-color: var(--n-blue-ink); } .n-note .material-icons-outlined { font-size: 1rem; } /* ── Spin-offs (#page-spinoffs) ──────────────────────────────────────── */ .n-spinoffs, .n-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); align-items: stretch; } .n-spinoff, .n-tool { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-spinoff:hover, .n-tool:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-spinoff__logo, .n-tool__logo { display: flex; align-items: center; justify-content: center; height: 116px; padding: 1.25rem; background: var(--n-paper); border-bottom: 1px solid var(--n-line); } .n-spinoff__logo img, .n-tool__logo img { max-height: 100%; max-width: 78%; width: auto; object-fit: contain; } .n-spinoff__body, .n-tool__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 26px); } .n-spinoff__name, .n-tool__name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.018em; color: var(--n-ink); margin: 0 0 0.35rem; } .n-spinoff__tag { font-family: var(--n-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--n-blue-ink); margin: 0 0 0.9rem; } .n-spinoff__desc, .n-tool__desc { font-size: 0.9rem; line-height: 1.6; color: var(--n-ink-2); margin: 0; } .n-spinoff__link, .n-tool__link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; } @media (max-width: 900px) { .n-spinoffs, .n-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .n-spinoffs, .n-tools { grid-template-columns: minmax(0, 1fr); } } /* ── Libros (#page-libros) ───────────────────────────────────────────── */ .n-books { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-line-strong); } .n-book { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: clamp(16px, 2.2vw, 32px); padding: clamp(18px, 2vw, 26px) 0.6rem; border-bottom: 1px solid var(--n-line); border-left: 2px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; } .n-book:hover { background: var(--n-paper); border-left-color: var(--n-blue-ink); } .n-book[hidden] { display: none !important; } .n-book__cover { align-self: start; border: 1px solid var(--n-line); border-radius: var(--n-r-sm); overflow: hidden; background: var(--n-surface); } .n-book__cover img { display: block; width: 100%; height: auto; max-width: 100%; } .n-book__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; font-family: var(--n-mono); font-size: 0.74rem; color: var(--n-ink-3); margin: 0 0 0.45rem; } .n-book__year { color: var(--n-blue-ink); } .n-book__title { font-size: 1.06rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.016em; color: var(--n-ink); margin: 0 0 0.35rem; } .n-book__authors { font-size: 0.88rem; line-height: 1.5; color: var(--n-ink-2); margin: 0; } .n-book__desc { font-size: 0.9rem; line-height: 1.6; color: var(--n-ink-2); margin: 0.6rem 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .n-book__link { margin-top: 0.85rem; } @media (max-width: 560px) { .n-book { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding-inline: 0; } } /* ── Contacto (#page-contacto) ───────────────────────────────────────── */ .n-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 32px); align-items: stretch; } .n-contact__map { min-height: 380px; border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; background: var(--n-paper); } .n-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; } .n-contact__card { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); padding: clamp(20px, 2.2vw, 30px); } .n-contact__data { margin: 0 0 1.25rem; } .n-contact__data dt { font-family: var(--n-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink-3); margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--n-line); } .n-contact__data dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .n-contact__data dd { margin: 0.4rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--n-ink); } .n-contact__data a { color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid rgba(11, 111, 164, 0.35); } .n-contact__data a:hover, .n-contact__data a:focus-visible { border-bottom-color: var(--n-blue-ink); } .n-contact__card .n-link-arrow { margin-top: auto; align-self: flex-start; } @media (max-width: 800px) { .n-contact { grid-template-columns: minmax(0, 1fr); } .n-contact__map, .n-contact__map iframe { min-height: 280px; } } /* ── Galería de instalaciones (#page-instalaciones) ──────────────────── */ .n-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); } .n-shot { margin: 0; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-shot:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-shot__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--n-paper); } .n-shot__img img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform 0.4s ease; } .n-shot:hover .n-shot__img img { transform: scale(1.03); } .n-shot__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-top: 1px solid var(--n-line); } .n-shot--link a { display: block; text-decoration: none; color: inherit; } .n-shot__go { font-size: 1.05rem; color: var(--n-ink-3); transition: color 0.18s ease, transform 0.18s ease; } .n-shot--link:hover .n-shot__go { color: var(--n-blue-ink); transform: translateX(3px); } .n-shot__name { font-size: 0.94rem; font-weight: 500; line-height: 1.35; color: var(--n-ink); } .n-shot__tag { font-family: var(--n-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--n-ink-3); white-space: nowrap; } /* La lupa a pantalla completa ya existía; solo se le quita el aire de plantilla */ body.nitido #lightbox-overlay { background: rgba(16, 26, 38, 0.92); } @media (max-width: 900px) { .n-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .n-gallery { grid-template-columns: minmax(0, 1fr); } } /* ── Miembros (#page-miembros) ───────────────────────────────────────── */ /* Las 41 fichas son includes estáticos: aquí solo se reviste lo que pintan. */ body.nitido #page-miembros .section-title { font-family: var(--n-sans); font-size: clamp(1.55rem, 2.5vw, 2.05rem); font-weight: 600; letter-spacing: -0.024em; color: var(--n-ink); } body.nitido #page-miembros h4.section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; letter-spacing: -0.015em; margin-top: 2.5rem; } body.nitido #page-miembros h4.section-title img { width: 20px; height: 20px; } /* El titular llevaba texto con degradado recortado y una barra decorativa de 4px */ body.nitido #page-miembros .section-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; } body.nitido #page-miembros .section-title::after { display: none; } body.nitido #page-miembros hr { background: var(--n-line) !important; border: 0; height: 1px; opacity: 1; margin: 0.75rem 0 0; } /* Cabecera centrada y, debajo, UNA sola barra con buscador + categorías (antes el buscador y las pestañas eran dos bloques sueltos y separados). */ body.nitido #page-miembros > .container > .text-center { max-width: 60ch; margin-inline: auto; } body.nitido .n-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); max-width: 900px; margin: 0 auto clamp(36px, 4vw, 56px); padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); background: var(--n-paper); border: 1px solid var(--n-line); border-radius: var(--n-r); } body.nitido .n-toolbar .member-search-wrapper { flex: 0 1 340px; margin-bottom: 0; gap: 0.35rem; } body.nitido .n-toolbar .member-search-box { max-width: none; } body.nitido .n-toolbar__tabs { display: flex; flex: 1 1 auto; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; } body.nitido .n-toolbar .member-search-count { text-align: left; } @media (max-width: 700px) { body.nitido .n-toolbar { flex-direction: column; align-items: stretch; } /* En columna, `flex: 0 1 340px` fija la BASE en el eje vertical: el buscador se quedaba con 340px de alto y abría un hueco enorme antes de las categorías. */ body.nitido .n-toolbar .member-search-wrapper { flex: 0 0 auto; } body.nitido .n-toolbar__tabs { justify-content: center; } } body.nitido #page-miembros .section-intro { color: var(--n-ink-2); line-height: 1.6; max-width: 58ch; } /* Pestañas de categoría: chips, no píldoras con degradado */ body.nitido #page-miembros .nav-pills .nav-link { font-family: var(--n-mono); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.04em; background: var(--n-surface); color: var(--n-ink-2); border: 1px solid var(--n-line-strong); border-radius: 6px; padding: 0.5rem 0.9rem; margin: 0 4px 8px; } body.nitido #page-miembros .nav-pills .nav-link:hover, body.nitido #page-miembros .nav-pills .nav-link:focus-visible { border-color: var(--n-blue-ink); background: var(--n-blue-wash); color: var(--n-ink); } body.nitido #page-miembros .nav-pills .nav-link.active { background: var(--n-blue-ink); border-color: var(--n-blue-ink); color: #fff; } /* Buscador */ body.nitido .member-search-input { font-family: var(--n-sans); font-size: 0.94rem; border: 1px solid var(--n-line-strong); border-radius: 6px; box-shadow: none; background: var(--n-surface); color: var(--n-ink); } body.nitido .member-search-input:focus { border-color: var(--n-blue-ink); box-shadow: 0 0 0 3px var(--n-blue-wash); } body.nitido .member-search-count, body.nitido .member-no-results { font-family: var(--n-mono); font-size: 0.78rem; color: var(--n-ink-3); } /* Ficha */ body.nitido .member-card { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r) !important; box-shadow: var(--n-shadow); padding: 1.5rem 1.25rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } body.nitido .member-card:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); transform: none; } /* Retrato: anillo fino en vez de degradado con halo */ body.nitido .member-avatar-wrapper { background: var(--n-line-strong); box-shadow: none; padding: 2px; /* La cara es lo importante de la ficha: manda sobre los iconos de redes */ width: 172px; height: 172px; } body.nitido .member-avatar { border: 3px solid var(--n-surface); } body.nitido .member-card:hover .member-avatar-wrapper { background: var(--n-blue); } body.nitido .member-name, body.nitido .member-surname { font-family: var(--n-sans); font-weight: 600; font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--n-ink); } body.nitido .member-description { font-size: 0.88rem; line-height: 1.5; color: var(--n-ink-3); } /* Los iconos competían con el retrato: más pequeños, con aire y MONOCROMOS. Doce colores de marca distintos por ficha (azul, verde, naranja, turquesa…) eran lo más ruidoso de la pantalla y el color no informaba de nada: todos son perfiles. Van en gris y se encienden en azul al pasar por encima o al recibir el foco. */ body.nitido .member-social-links { flex-wrap: wrap; gap: 0.55rem; padding-top: 0.25rem; } body.nitido .member-social-links .social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; } body.nitido .member-social-links img, body.nitido .member-social-links i { height: auto; font-size: 1.3rem; line-height: 1; color: var(--n-ink-3) !important; transition: color 0.18s ease; } body.nitido .social-icon-link:hover i, body.nitido .social-icon-link:focus-visible i { color: var(--n-blue-ink) !important; } body.nitido .member-social-links a { display: inline-flex; align-items: center; text-decoration: none; /* los iconos salían subrayados */ opacity: 0.9; transition: opacity 0.18s ease; } body.nitido .member-social-links a:hover, body.nitido .member-social-links a:focus-visible { opacity: 1; } body.nitido .member-social-links a:hover img, body.nitido .member-social-links a:hover i { transform: none; filter: none; color: var(--n-blue-ink); } /* Botón "Volver" heredado de la maqueta antigua */ body.nitido .view-all-news-btn { border: 1px solid var(--n-line-strong); border-radius: 6px; color: var(--n-ink); background: var(--n-surface); font-weight: 500; padding: 0.7rem 1.35rem; } body.nitido .view-all-news-btn:hover, body.nitido .view-all-news-btn:focus-visible { border-color: var(--n-blue-ink); background: var(--n-blue-wash); color: var(--n-ink); } /* ── Filtros (barra de formulario del sistema) ───────────────────────── */ .n-filters { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); align-items: flex-end; padding: clamp(16px, 2vw, 22px); background: var(--n-paper); border: 1px solid var(--n-line); border-radius: var(--n-r); margin-bottom: 1.5rem; } .n-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 180px; } .n-field--grow { flex: 1 1 260px; } .n-field__label { font-family: var(--n-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink-3); } .n-input { font-family: var(--n-sans); font-size: 0.94rem; color: var(--n-ink); background: var(--n-surface); border: 1px solid var(--n-line-strong); border-radius: 6px; padding: 0.6rem 0.75rem; width: 100%; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-input:focus { outline: none; border-color: var(--n-blue-ink); box-shadow: 0 0 0 3px var(--n-blue-wash); } .n-filters__actions { display: flex; gap: 0.6rem; } .n-count { font-family: var(--n-mono); font-size: 0.78rem; color: var(--n-ink-3); margin: 0 0 1.25rem; } .n-count__num { color: var(--n-ink); font-weight: 500; } /* ── Listado de publicaciones (referencia bibliográfica) ─────────────── */ .n-pubs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n-line-strong); } .n-pub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2.5vw, 40px); padding: 1.15rem 0.6rem; border-bottom: 1px solid var(--n-line); border-left: 2px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; } .n-pub:hover { background: var(--n-paper); border-left-color: var(--n-blue-ink); } .n-pub__main { min-width: 0; } .n-pub__title { font-size: 1.02rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; color: var(--n-ink); margin: 0 0 0.35rem; } .n-pub__authors { font-size: 0.88rem; line-height: 1.5; color: var(--n-ink-2); margin: 0; } .n-pub__venue { font-size: 0.88rem; line-height: 1.5; color: var(--n-ink-3); font-style: italic; margin: 0.15rem 0 0; } .n-pub__links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; } .n-pub__links:empty { display: none; } .n-chip--link { font-family: var(--n-mono); color: var(--n-blue-ink); text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease; } .n-chip--link:hover, .n-chip--link:focus-visible { border-color: var(--n-blue-ink); background: var(--n-blue-wash); } .n-pub__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; } .n-pub__year { font-family: var(--n-mono); font-size: 1rem; color: var(--n-ink); } .n-pub__type { font-family: var(--n-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink-3); white-space: nowrap; } /* ── Paginación ──────────────────────────────────────────────────────── */ .n-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; } .n-pager__btn { font-family: var(--n-mono); font-size: 0.8rem; padding: 0.55rem 1rem; border: 1px solid var(--n-line-strong); border-radius: 6px; color: var(--n-ink); text-decoration: none; background: var(--n-surface); transition: border-color 0.18s ease, background-color 0.18s ease; } .n-pager__btn:hover, .n-pager__btn:focus-visible { border-color: var(--n-blue-ink); background: var(--n-blue-wash); } .n-pager__btn.is-disabled { color: var(--n-ink-3); background: var(--n-paper); border-color: var(--n-line); cursor: default; } .n-pager__info { font-family: var(--n-mono); font-size: 0.8rem; color: var(--n-ink-3); } /* ── Pantalla de líneas de investigación (#page-id-lineas) ───────────── */ .n-kicker__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .n-kicker__link:hover, .n-kicker__link:focus-visible { color: var(--n-blue-ink); border-bottom-color: currentColor; } .n-grid-lineas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .n-linea { display: flex; flex-direction: column; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-linea:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-linea__img { /* Banda más baja que 16/9: los diagramas son apaisados y con `contain` sobraba mucho espacio en blanco arriba y abajo. */ aspect-ratio: 16 / 7; background: var(--n-surface); border-bottom: 1px solid var(--n-line); overflow: hidden; } .n-linea__img img { width: 100%; height: 100%; max-width: 100%; /* Son diagramas, no fotos: recortarlos con `cover` se come parte del esquema */ object-fit: contain; padding: clamp(10px, 1.4vw, 18px); display: block; } .n-linea__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 26px); } .n-linea__idx { font-family: var(--n-mono); font-size: 0.72rem; color: var(--n-blue-ink); margin: 0 0 0.55rem; } .n-linea__title { font-size: 1.12rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.018em; color: var(--n-ink); margin: 0 0 0.7rem; } .n-linea__desc { font-size: 0.94rem; line-height: 1.6; color: var(--n-ink-2); } .n-linea__desc p:last-child { margin-bottom: 0; } .n-linea__extra { margin: 0.9rem 0 0; font-size: 0.9rem; } .n-linea__extra a, .n-linea__contacto a { color: var(--n-blue-ink); text-decoration: none; border-bottom: 1px solid transparent; } .n-linea__extra a:hover, .n-linea__contacto a:hover, .n-linea__extra a:focus-visible, .n-linea__contacto a:focus-visible { border-bottom-color: currentColor; } .n-linea__contacto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: auto 0 0; padding-top: 1.1rem; font-size: 0.94rem; color: var(--n-ink); } .n-linea__contacto-label { font-family: var(--n-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink-3); } /* ── Líneas de investigación (rejilla) ───────────────────────────────── */ /* Sin uso en la home desde 2026-09-10 (allí va el bloque breve .n-brief); se conserva para cuando se convierta la pantalla IDLineas.php. */ .n-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--n-line); border: 1px solid var(--n-line); } .n-line { background: var(--n-surface); } .n-line__link { display: block; height: 100%; padding: clamp(18px, 2vw, 24px); text-decoration: none; border-left: 2px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; } .n-line__link:hover, .n-line__link:focus-visible { background: var(--n-blue-wash); border-left-color: var(--n-blue-ink); } .n-line__idx { display: block; font-family: var(--n-mono); font-size: 0.72rem; color: var(--n-blue-ink); margin-bottom: 0.6rem; } .n-line__name { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--n-ink); } .n-line__desc { display: block; margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.5; color: var(--n-ink-2); } /* ── Franja de evidencia (cifras reales) ─────────────────────────────── */ .n-evidence { border-block: 1px solid var(--n-line); background: var(--n-surface); } .n-evidence__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .n-fact { position: relative; padding: clamp(20px, 2.4vw, 30px) clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--n-line); } /* marca de medición: la muesca del instrumento */ .n-fact::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 10px; background: var(--n-blue-ink); } .n-fact:first-child { border-left: 0; } .n-fact__num { font-family: var(--n-mono); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--n-ink); font-variant-numeric: tabular-nums; display: block; } .n-fact__label { display: block; margin-top: 0.5rem; font-family: var(--n-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-ink-3); } .n-fact__bar { display: block; width: 100%; max-width: 120px; height: 1px; margin-top: 0.9rem; background: linear-gradient(to right, var(--n-green) 22%, var(--n-line) 22%); } .n-fact--accent .n-fact__bar { background: linear-gradient(to right, var(--n-blue-ink) 22%, var(--n-line) 22%); } /* ── Tarjetas y filas (para el resto de pantallas) ───────────────────── */ .n-card { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-r); padding: clamp(18px, 2vw, 26px); box-shadow: var(--n-shadow); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .n-card:hover { border-color: var(--n-blue); box-shadow: var(--n-shadow-lift); } .n-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border: 1px solid var(--n-line-strong); border-radius: 6px; font-family: var(--n-mono); font-size: 0.72rem; font-weight: 400; color: var(--n-ink-2); background: var(--n-surface); } .n-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--n-line); } .n-row__title { font-family: var(--n-sans); font-size: 1.04rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; color: var(--n-ink); margin: 0 0 0.3rem; } .n-row__meta { font-family: var(--n-mono); font-size: 0.8rem; color: var(--n-ink-3); white-space: nowrap; } /* Estado vacío / sin datos */ .n-empty { margin: 0; padding: clamp(28px, 4vw, 44px); border: 1px dashed var(--n-line-strong); border-radius: var(--n-r); background: var(--n-paper); color: var(--n-ink-3); text-align: center; font-size: 0.95rem; } /* ── Noticias de la home (reviste el carrusel existente) ─────────────── */ body.nitido .featured-news-section, body.nitido .news-section-badge, body.nitido .view-all-news-btn { background: none; } body.nitido .news-carousel-container { padding: 0; background: none; border: 1px solid var(--n-line); border-radius: var(--n-r); box-shadow: var(--n-shadow); overflow: hidden; } body.nitido .news-carousel-container::before, body.nitido .news-carousel-container::after, body.nitido .featured-news-section::before, body.nitido .featured-news-section::after { display: none !important; } body.nitido .modern-carousel .carousel-image-container, body.nitido .modern-carousel .carousel-item { border-radius: 0; } body.nitido .modern-carousel .carousel-overlay { background: linear-gradient(180deg, rgba(16, 26, 38, 0) 34%, rgba(16, 26, 38, 0.82) 100%); } body.nitido .modern-caption .news-title, body.nitido .mobile-news-card .news-title-mobile { font-family: var(--n-sans); font-weight: 600; letter-spacing: -0.022em; text-shadow: none; } body.nitido .modern-caption .news-date, body.nitido .news-date-mobile { font-family: var(--n-mono); font-size: 0.78rem; } body.nitido .modern-caption .news-description { font-family: var(--n-sans); text-shadow: none; } body.nitido .news-badge { border-radius: 6px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(4px); } /* Indicadores: rayas finas en vez de bolas (la activa usaba Bola.ico) */ body.nitido #newsCarousel .carousel-indicators button { width: 22px; height: 3px; opacity: 1; border-radius: 0; } body.nitido #newsCarousel .carousel-indicators button::before, body.nitido #newsCarousel .carousel-indicators button.active::before { width: 22px; height: 3px; border-radius: 0; background-image: none; background-color: rgba(255, 255, 255, 0.45); } body.nitido #newsCarousel .carousel-indicators button.active::before { background-color: #fff; } /* Botón "Ver noticia" y tarjeta móvil, alineados al sistema */ body.nitido .news-read-more { border-radius: var(--n-r-sm); font-weight: 500; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); } body.nitido .news-read-more:hover, body.nitido .news-read-more:focus { background: rgba(255, 255, 255, 0.24); } body.nitido .mobile-news-card { border-radius: 0; border-top: 1px solid var(--n-line); box-shadow: none; } /* Botón de subir: círculo limpio, sin degradado ni sombra difusa */ body.nitido .scroll-top-btn { background: var(--n-surface); border: 1px solid var(--n-line-strong); box-shadow: var(--n-shadow-lift); } body.nitido .scroll-top-icon { color: var(--n-ink); } body.nitido .progress-ring__circle { stroke: var(--n-blue); } body.nitido .modern-control .carousel-control-icon { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--n-line-strong); color: var(--n-ink); border-radius: var(--n-r-sm); box-shadow: none; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .n-evidence__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .n-fact:nth-child(3n + 1) { border-left: 0; } .n-fact:nth-child(n + 4) { border-top: 1px solid var(--n-line); } } @media (max-width: 1100px) { .n-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { .n-grid-lineas { grid-template-columns: minmax(0, 1fr); } /* El año en columna propia estrecha demasiado el título: pasa a etiqueta arriba */ .n-pub { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding-inline: 0; } .n-pub__meta { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.75rem; order: -1; text-align: left; } .n-filters__actions { width: 100%; } .n-filters__actions .n-btn { flex: 1; justify-content: center; } } @media (max-width: 900px) { .n-hero__grid { grid-template-columns: 1fr; } .n-brief { grid-template-columns: 1fr; } /* En una sola columna el mapa quedaba ENCIMA del titular y empujaba el texto hacia abajo: en móvil/tablet no se muestra (decisión del usuario 2026-09-10). El ciclo ni siquiera arranca: el IntersectionObserver no dispara sobre un elemento oculto. */ .n-hero__mark { display: none; } /* Apilada, la lista volvería a quedar debajo del slider: en móvil y tablet se queda solo el destacado + "Ver todas las noticias". */ .n-more { display: none; } .n-news__layout { grid-template-columns: minmax(0, 1fr); } .n-display { max-width: 22ch; } } @media (max-width: 600px) { .n-evidence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* el mono es más ancho: etiquetas como "AÑOS DE TRAYECTORIA" rozaban el borde */ .n-fact__label { font-size: 0.62rem; letter-spacing: 0.03em; } .n-fact:nth-child(odd) { border-left: 0; } .n-fact:nth-child(n + 3) { border-top: 1px solid var(--n-line); } .n-row { grid-template-columns: 1fr; gap: 0.35rem; } .n-lines { grid-template-columns: 1fr; } /* en móvil el titular manda: la fecha se va arriba y la flecha sobra */ .n-headline__link { grid-template-columns: 1fr; gap: 0.3rem; padding-inline: 0; } .n-headline__go { display: none; } } /* ── Movimiento reducido ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.nitido *, body.nitido *::before, body.nitido *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body.nitido [data-animate] { opacity: 1 !important; transform: none !important; } }