/* ========================================================================== Pablo Ruiz Carrizosa — portafolio editorial de datos Sistema de diseño "Deep Intel" (ver DESIGN.md en la raíz del repo). Negros neutros por capas tonales, naranja #ff5c00 como primario, rojo para alertas/negativos, azul frío como terciario. Hanken Grotesk como única familia tipográfica de todo el sitio. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Color — capas tonales (elevación sin sombras) */ --bg: #0a0a0a; /* nivel 0-1: lienzo */ --bg-deep: #0e0e0e; --surface: #171717; /* nivel 2: tarjetas */ --surface-high: #202020; /* nivel 3: hover / paneles elevados */ --surface-glass: rgba(255, 255, 255, 0.03); --ink: #e5e2e1; --ink-soft: #b6b2b0; --ink-faint: #878280; --line: #2e2c2b; --line-soft: #222020; /* Acentos */ --accent: #ff5c00; /* primario: acciones, tendencias clave */ --accent-soft: #ffb59a; /* primario claro: texto acentuado */ --accent-deep: #a73a00; --red: #ff5449; /* secundario: alertas, negativos */ --red-soft: #ffb4a8; --blue: #0096fd; /* terciario: contraste frío */ --blue-soft: #a0c9ff; --glow: rgba(255, 92, 0, 0.22); /* Papel para figuras (matplotlib sobre blanco) */ --paper-hi: #f4f2f0; --paper-lo: #e9e6e3; /* Tipografía — una sola familia para todo el sitio */ --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; --font-code: Consolas, "Cascadia Mono", monospace; /* solo bloques de código en las notas */ /* Espaciado y forma — radios contenidos (4/8 px) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 28px; --sp-4: 48px; --sp-5: 88px; --maxw: 1680px; --pad-x: clamp(24px, 4vw, 56px); --measure: 62ch; --radius: 8px; --radius-sm: 4px; /* Movimiento */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.22s; --dur-med: 0.4s; --dur-slow: 0.85s; /* Sombra — solo elementos flotantes, nítida y sutil */ --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lift: 0 12px 32px -8px rgba(0, 0, 0, 0.6); } /* -------------------------------------------------------------------------- 1b. Tema claro — "chrome claro + islas oscuras" El sitio es OSCURO por defecto (:root de arriba). data-theme="light" invierte solo el 'chrome' (fondos, texto, nav, tarjetas de texto); los bloques de medios (hero/globo, figuras oscuras, portadas, código) conservan su marco oscuro re-declarando los tokens oscuros dentro de ellos. Ninguna imagen se regenera. El tema se fija antes de pintar mediante un script inline en . -------------------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #f5f4f2; --bg-deep: #eceae7; --surface: #ffffff; --surface-high: #f1efec; --surface-glass: rgba(0, 0, 0, 0.03); --ink: #1b1a19; --ink-soft: #46433f; --ink-faint: #6d6763; --line: #dbd7d3; --line-soft: #e7e3df; --accent-soft: #b8420a; /* naranja profundo: legible sobre claro */ --red: #d23a2e; --red-soft: #b0342a; --blue: #0a72c9; --blue-soft: #135f9e; --glow: rgba(255, 92, 0, 0.16); --shadow: 0 4px 14px rgba(23, 20, 18, 0.10); --shadow-lift: 0 14px 34px -10px rgba(23, 20, 18, 0.16); } /* Islas oscuras: dentro de ellas los tokens vuelven a los valores oscuros. El hero NO es isla: su globo se recolorea en JS para leerse sobre claro. */ :root[data-theme="light"] .exhibit.exhibit-dark, :root[data-theme="light"] .figure, :root[data-theme="light"] .cover-dark, :root[data-theme="light"] .article pre { --bg: #0a0a0a; --bg-deep: #0e0e0e; --surface: #171717; --surface-high: #202020; --ink: #e5e2e1; --ink-soft: #b6b2b0; --ink-faint: #878280; --line: #2e2c2b; --line-soft: #222020; --accent-soft: #ffb59a; --blue-soft: #a0c9ff; --red-soft: #ffb4a8; } :root[data-theme="light"] .exhibit.exhibit-dark, :root[data-theme="light"] .figure { box-shadow: 0 8px 24px -12px rgba(23, 20, 18, 0.28); } /* Chrome con colores 'quemados' que deben invertirse en claro */ :root[data-theme="light"] .site-header { background: rgba(245, 244, 242, 0.82); } :root[data-theme="light"] .nav-menu { background: rgba(0, 0, 0, 0.02); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04); } :root[data-theme="light"] .nav-menu::before { background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 32%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.03) 80%, rgba(0,0,0,0.08) 100%); } :root[data-theme="light"] .nav-menu a:hover { background: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .btn-outline { background: rgba(0, 0, 0, 0.02); } :root[data-theme="light"] .prose p, :root[data-theme="light"] .article p, :root[data-theme="light"] .article ul, :root[data-theme="light"] .article ol { color: #3b3835; } :root[data-theme="light"] .article code { background: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .copy-btn { background: rgba(0, 0, 0, 0.04); } @media (max-width: 880px) { :root[data-theme="light"] .nav-menu { background: rgba(245, 244, 242, 0.98); } } /* Transición suave al alternar el tema (no dispara en la carga: el tema queda fijado antes del primer pintado). */ body, .site-header, .nav-menu, .work-card, .site-footer, .contact-links > li > a, .exhibit, .btn-outline, .btn-cv, .theme-toggle, .f-soc { transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } @media (prefers-reduced-motion: reduce) { body, .site-header, .nav-menu, .work-card, .site-footer { transition: none; } } /* Transiciones de página (mejora progresiva). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; } ::view-transition-new(root) { animation: vt-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } } @supports not (view-transition-name: root) { body { animation: page-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); } } @keyframes page-in { from { opacity: 0; transform: translateY(10px); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 17px; } @media (max-width: 1680px) { html { font-size: 15.5px; } } @media (max-width: 1440px) { html { font-size: 15px; } } @media (max-width: 1024px) { html { font-size: 16.5px; } } body { font-family: var(--font-body); background-color: var(--bg); color: var(--ink); line-height: 1.7; font-size: 1rem; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Red de seguridad: ningún token largo (correo, URL) fuerza scroll horizontal */ overflow-wrap: break-word; } /* Atmósfera mínima: un solo halo naranja muy tenue arriba */ body::before { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(50% 36% at 22% 0%, rgba(255, 92, 0, 0.07), transparent 65%), radial-gradient(40% 30% at 88% 8%, rgba(0, 150, 253, 0.045), transparent 62%); } ::selection { background: var(--accent); color: #140800; } img, svg, canvas { max-width: 100%; height: auto; } a { color: var(--accent-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .mono { font-family: var(--font-body); } .muted { color: var(--ink-faint); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #140800; padding: 10px 18px; border-radius: var(--radius-sm); z-index: 300; font-weight: 700; } .skip-link:focus { left: 8px; } /* -------------------------------------------------------------------------- 2. Header y navegación -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, 0.78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line-soft); } .nav { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad-x); display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; margin-right: auto; } .brand:hover { color: var(--ink); } .brand .brand-mark { flex: none; width: 32px; height: 32px; } /* Píldora "liquid glass" para el menú (como en las referencias de video) */ .nav-menu { display: flex; gap: 2px; list-style: none; align-items: center; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.015); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08); position: relative; } .nav-menu::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.06) 80%, rgba(255,255,255,0.22) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .nav-menu a { display: block; padding: 9px 17px; border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: 0.99rem; font-weight: 500; position: relative; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); } .nav-menu a[aria-current="page"] { background: var(--accent); color: #140800; font-weight: 700; } .nav-menu .menu-cv { display: none; } .btn-cv { display: inline-flex; align-items: center; gap: 8px; padding: 10px 21px; border-radius: var(--radius-sm); white-space: nowrap; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.94rem; font-weight: 600; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .btn-cv:hover { border-color: var(--accent); color: var(--accent-soft); background: rgba(255, 92, 0, 0.06); } .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; align-items: center; gap: 8px; } /* Interruptor de tema — slider deslizante Sol (claro) / Luna (oscuro). Ambos iconos quedan visibles en los extremos; una perilla se desliza al modo activo y el icono de ese modo queda sobre ella con alto contraste. */ .theme-toggle { position: relative; flex: none; padding: 0; width: 52px; height: 28px; display: inline-flex; align-items: center; background: var(--surface-glass); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* perilla deslizante */ .theme-toggle::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transform: translate(24px, -50%); /* oscuro: perilla a la derecha (luna) */ transition: transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease); } /* iconos fijos a cada extremo, centrados sobre cada posición de la perilla */ .theme-toggle svg { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 14px; height: 14px; display: block; transition: color var(--dur-fast) var(--ease); } .theme-toggle .tt-sun { left: 7px; color: var(--ink-faint); } /* inactivo en oscuro */ .theme-toggle .tt-moon { right: 7px; color: var(--bg); } /* activo en oscuro: sobre la perilla */ /* tema claro: la perilla se desliza a la izquierda (sol) */ :root[data-theme="light"] .theme-toggle::before { transform: translate(0, -50%); } :root[data-theme="light"] .theme-toggle .tt-sun { color: var(--bg); } /* activo: sobre la perilla */ :root[data-theme="light"] .theme-toggle .tt-moon { color: var(--ink-faint); } /* inactivo */ @media (prefers-reduced-motion: reduce) { .theme-toggle::before { transition: none; } } /* Interruptor de idioma (ES/EN) — mismo lenguaje visual que el de tema: dos etiquetas fijas y una perilla que marca el idioma ACTUAL. Todo el control es un enlace al otro idioma; la posición depende de . */ .lang-toggle { position: relative; flex: none; padding: 0; width: 58px; height: 28px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-glass); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .lang-toggle:hover { border-color: var(--accent); } .lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* perilla deslizante */ .lang-toggle::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 3px; width: 26px; height: 22px; border-radius: 999px; background: var(--ink); transform: translate(0, -50%); /* español (defecto): perilla a la izquierda */ transition: transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease); } /* etiquetas fijas, centradas sobre cada posición de la perilla */ .lang-toggle .lt-opt { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 26px; text-align: center; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; transition: color var(--dur-fast) var(--ease); } .lang-toggle .lt-es { left: 3px; color: var(--bg); } /* activo en español: sobre la perilla */ .lang-toggle .lt-en { right: 3px; color: var(--ink-faint); } /* inactivo */ /* páginas en inglés: la perilla se desliza a la derecha (EN) */ html[lang="en"] .lang-toggle::before { transform: translate(26px, -50%); } html[lang="en"] .lang-toggle .lt-es { color: var(--ink-faint); } html[lang="en"] .lang-toggle .lt-en { color: var(--bg); } @media (prefers-reduced-motion: reduce) { .lang-toggle::before { transition: none; } } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .btn-cv { display: none; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(12, 12, 12, 0.97); border-bottom: 1px solid var(--line-soft); padding: 12px 18px 18px; backdrop-filter: blur(20px); } .nav-menu { border-radius: 0; box-shadow: none; padding: 12px 18px 18px; } .nav-menu::before { display: none; } .nav-menu.open { display: flex; } .nav-menu a { padding: 13px 16px; border-radius: var(--radius-sm); } .nav-menu .menu-cv { display: block; border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 6px; } .nav-menu .menu-cv a { color: var(--accent-soft); font-weight: 700; } .nav { gap: 14px; } } /* Pantallas estrechas: el header lleva marca + ES/EN + tema + menú. Compactamos separaciones y volvemos el botón de menú un icono cuadrado (igual que el de tema) para que todo quepa. */ @media (max-width: 480px) { .nav { gap: 10px; padding-left: 18px; padding-right: 18px; } .nav-toggle { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; } .nav-toggle svg { width: 20px; height: 20px; } } /* Muy estrecho: el nombre completo no cabe junto a los tres botones, así que dejamos solo el logo (el nombre está en el héroe, el título y el pie). */ @media (max-width: 430px) { .nav { gap: 9px; padding-left: 16px; padding-right: 16px; } .brand { font-size: 0; gap: 0; } .brand .brand-mark { width: 34px; height: 34px; } } /* -------------------------------------------------------------------------- 3. Hero — nombre gigante + globo conectado girando La entrada escalonada (fadeSlideUp) la orquesta anime.js desde main.js; sin JavaScript todo queda visible de inmediato. -------------------------------------------------------------------------- */ .hero { position: relative; min-height: calc(100vh - 78px); display: flex; flex-direction: column; padding-top: clamp(16px, 3vh, 36px); padding-bottom: 64px; overflow: hidden; } .hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; flex: 1; display: flex; flex-direction: column; } /* Escenario central: globo detrás, nombre delante */ .hero-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; } .hero-globe { position: absolute; right: clamp(-180px, -7vw, -30px); top: 44%; transform: translateY(-50%); width: min(68vw, 1040px); aspect-ratio: 1 / 1; pointer-events: none; } .hero-globe canvas { display: block; width: 100%; height: 100%; } .kicker { font-family: var(--font-body); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-soft); font-weight: 600; } /* Nombre protagonista — gigante, abajo a la izquierda, sobre el globo */ .hero-name { position: relative; z-index: 1; font-family: var(--font-body); color: var(--ink); font-size: clamp(3.2rem, 9.6vw, 9.4rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; margin: 26px 0 0; } .hn-line { display: inline-block; } .hn-accent { color: var(--accent); } /* Pie del hero: tagline en una línea y botones grandes debajo */ .hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vh, 30px); margin-top: clamp(26px, 4vh, 48px); position: relative; z-index: 1; } .hero-tagline { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin: 0; } @media (min-width: 1100px) { .hero-tagline { white-space: nowrap; } } .hero-tagline .accent-word { color: var(--accent); } .hero .btn { padding: 16px 32px; font-size: 1.04rem; } /* Los tres botones del hero, del mismo ancho (el del texto más largo) y con el contenido centrado — igual en móvil y en desktop. */ .hero .btn-row .btn { min-width: 192px; justify-content: center; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: var(--radius-sm); font-weight: 650; font-size: 0.93rem; text-decoration: none; border: 1px solid transparent; transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease), color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); cursor: pointer; font-family: var(--font-body); } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: #140800; } .btn-primary:hover { background: #ff7a2e; color: #140800; transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--glow); } .btn-outline { border-color: var(--line); color: var(--ink); background: rgba(255, 255, 255, 0.02); } .btn-outline:hover { border-color: var(--accent); color: var(--accent-soft); background: rgba(255, 92, 0, 0.06); transform: translateY(-2px); } .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; } .scroll-hint::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--accent), transparent); animation: scroll-pulse 2s var(--ease) infinite; } @keyframes scroll-pulse { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 70% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* Hero en pantallas angostas: globo más pequeño asomando por la derecha */ @media (max-width: 900px) { .hero-globe { width: min(100vw, 470px); right: -24vw; top: 36%; transform: translateY(-50%); opacity: 0.9; } .hero-foot { grid-template-columns: 1fr; gap: 20px; align-items: start; } /* El indicador de scroll (centrado abajo) se montaba sobre los botones en móvil y tablet; en desktop no estorba. Lo ocultamos en pantallas angostas. */ .scroll-hint { display: none; } } /* Móvil: botones del hero más compactos (los grandes quedaban enormes y se amontonaban en pantallas estrechas). */ @media (max-width: 640px) { .hero .btn { padding: 12px 18px; font-size: 0.9rem; } .btn-row { gap: 10px; } .hero .btn-row .btn { min-width: 158px; } .hero { padding-bottom: 44px; } } /* Pantallas cortas (laptops): compactar hero */ @media (max-height: 850px) and (min-width: 901px) { .hero { padding-top: 12px; padding-bottom: 46px; } .hero-name { font-size: clamp(2.8rem, 8.2vw, 7.4rem); margin-top: 18px; } .hero-tagline { font-size: clamp(1rem, 1.4vw, 1.3rem); } .hero .btn { padding: 14px 28px; font-size: 0.98rem; } .hero-foot { margin-top: 22px; } .hero-globe { width: min(62vw, 920px); } .scroll-hint { display: none; } } /* Desktop alto: al igualar el ancho de los tres botones, la fila llega hasta el indicador de scroll (centrado abajo). Le damos aire abajo para que el indicador quede debajo de los botones, no encima. */ @media (min-width: 901px) and (min-height: 851px) { .hero { padding-bottom: 104px; } } /* Cinta ticker — métodos y fuentes de datos */ .ticker { overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-deep); } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 52s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-group { display: flex; flex: none; } .ticker-group span { display: inline-flex; align-items: center; gap: 34px; padding: 13px 17px 13px; white-space: nowrap; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } .ticker-group span::after { content: "/"; color: var(--accent); font-weight: 700; } @keyframes ticker-scroll { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 4. Secciones -------------------------------------------------------------------------- */ .section { padding-top: var(--sp-5); padding-bottom: var(--sp-5); position: relative; } .section + .section { border-top: 1px solid var(--line-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 26px; margin-bottom: 44px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(1.8rem, 2.7vw, 2.7rem); letter-spacing: -0.025em; order: 0; } .section-head::after { content: ""; order: 1; flex: 1 1 60px; min-width: 48px; height: 1px; background: var(--line-soft); align-self: center; } .section-head .index { font-family: var(--font-body); color: var(--accent); font-size: 0.85rem; letter-spacing: 0.14em; order: 2; align-self: center; } /* Botón redondo tipo píldora, con el lenguaje del menú superior pero con un tono naranja que lo hace visible. Sirve en encabezados de sección y en cualquier enlace de "ver más". */ .more { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--accent-soft); background: rgba(255, 92, 0, 0.09); border: 1px solid rgba(255, 92, 0, 0.34); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .more:hover { background: var(--accent); border-color: var(--accent); color: #140800; } .section-head .more { order: 2; align-self: center; } .page-head { padding-top: clamp(36px, 5vh, 56px); padding-bottom: 20px; } .page-head h1 { font-size: clamp(1.9rem, 3vw, 3.1rem); margin: 14px 0 14px; letter-spacing: -0.03em; } .page-head .lede { font-size: 1.08rem; color: var(--ink-soft); } /* -------------------------------------------------------------------------- 5. Sobre mí en el inicio — foto, prosa con mini-cifras y panel -------------------------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; } @media (max-width: 1100px) { .about-grid { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } .about-grid .panel { grid-column: 1 / -1; } } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 320px; } } .about-photo { margin: 0; } .contact-photo { max-width: 300px; margin-bottom: 28px; } .about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); } .about-main .prose p { font-size: 1.08rem; } .mini-stats { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); } .mini-stats li { font-size: 0.88rem; color: var(--ink-faint); display: flex; flex-direction: column; gap: 2px; } .mini-stats strong { font-size: clamp(1.7rem, 2.2vw, 2.3rem); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } /* -------------------------------------------------------------------------- 6. Tarjetas de trabajo destacado / notas -------------------------------------------------------------------------- */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 920px) { .cards-3 { grid-template-columns: 1fr; } } .work-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease); } .work-card:hover, .work-card:focus-within { transform: translateY(-4px); border-color: var(--accent); background: var(--surface-high); } .work-cover { border-bottom: 1px solid var(--line); overflow: hidden; background: linear-gradient(160deg, var(--paper-hi), var(--paper-lo)); padding: 12px; } .work-cover img, .work-cover svg { display: block; width: 100%; height: auto; transition: transform 0.6s var(--ease); } .work-cover img { mix-blend-mode: multiply; border-radius: 4px; filter: saturate(0.94); aspect-ratio: 400 / 165; object-fit: cover; object-position: center 30%; } /* Portada oscura: elemento visual único integrado a la tarjeta (sin "papel") */ .work-cover.cover-dark { background: radial-gradient(90% 120% at 65% 20%, rgba(255, 92, 0, 0.05), transparent 65%), transparent; padding: 0; } .work-cover.cover-dark img { mix-blend-mode: normal; filter: none; border-radius: 0; object-position: center; } .work-card:hover .work-cover img, .work-card:hover .work-cover svg { transform: scale(1.03); } .work-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 13px; flex: 1; } .work-body .work-meta { font-family: var(--font-body); font-size: 0.74rem; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.12em; } .work-body h3 { font-size: 1.4rem; line-height: 1.24; } .work-body h3 a { color: inherit; text-decoration: none; } .work-body h3 a:hover { color: var(--accent-soft); } .work-body p { font-size: 0.92rem; color: var(--ink-soft); } .work-body .work-result { color: var(--ink); font-size: 0.9rem; border-left: 2px solid var(--accent); padding-left: 12px; } /* Pregunta-objetivo del proyecto */ /* La pregunta de investigación es el gancho de la tarjeta: va en el durazno del primario, igual que en las páginas de proyecto (.pb-question) */ .work-body .work-question { font-size: 0.98rem; color: var(--accent-soft); font-weight: 600; line-height: 1.55; } /* CTA de la tarjeta: botón naranja hacia la página del proyecto */ .work-body .read-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--accent); font-weight: 700; font-size: 0.93rem; color: #140800; text-decoration: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .work-body .read-more:hover { background: #ff7a2e; color: #140800; transform: translateY(-2px); } .work-body .read-more span { transition: transform var(--dur-fast) var(--ease); } .work-body .read-more:hover span { transform: translateX(4px); } .tag-row { display: flex; flex-wrap: wrap; gap: 7px; } .tag { font-family: var(--font-body); font-size: 0.72rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.02); letter-spacing: 0.04em; } .tag.tag-accent { border-color: rgba(255, 92, 0, 0.5); color: var(--accent-soft); background: rgba(255, 92, 0, 0.09); } .status-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 0.72rem; padding: 5px 13px; border-radius: 999px; letter-spacing: 0.04em; width: fit-content; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-active { background: rgba(255, 92, 0, 0.1); color: var(--accent-soft); border: 1px solid rgba(255, 92, 0, 0.3); } .status-wip { background: rgba(0, 150, 253, 0.1); color: var(--blue-soft); border: 1px solid rgba(0, 150, 253, 0.3); } /* -------------------------------------------------------------------------- 7. Capacidades -------------------------------------------------------------------------- */ /* Capacidades: lista editorial de dos columnas. Cada capacidad es un título y una frase corta, sin etiquetas de herramientas — esas viven ahora en los proyectos, las notas y en «Plataformas de datos». */ .caps { column-count: 2; column-gap: clamp(40px, 5vw, 88px); } @media (max-width: 760px) { .caps { column-count: 1; } } .cap { break-inside: avoid; position: relative; padding: 18px 0 20px 26px; border-top: 1px solid var(--line-soft); } /* Viñeta triangular en color de acento: da ritmo y resalta cada capacidad. */ .cap::before { content: ""; position: absolute; left: 2px; top: 24px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--accent); } .cap h3 { font-size: 1.08rem; margin: 0 0 5px; color: var(--ink); letter-spacing: -0.01em; } .cap p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.5; } /* Plataformas de datos — carrusel de marcas. Decorativo (aria-hidden): el detalle accesible vive en las cajas por categoría de abajo. Monocromo para respetar la paleta; se pausa al pasar el cursor y se detiene con reduce-motion. El truco del bucle: dos copias del set y un translateX de -50%. */ .logo-marquee { position: relative; overflow: hidden; margin-bottom: clamp(26px, 4vw, 44px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-track { display: flex; align-items: center; width: max-content; animation: logo-scroll 50s linear infinite; } .logo-marquee:hover .logo-track { animation-play-state: paused; } /* Cada plataforma en una ficha clara y discreta: necesaria para que los logos oscuros (Bloomberg, FRED) y los sellos a color se lean sobre el lienzo negro. Fichas pequeñas y sombra suave para que se vean finas, no como cajones. */ .logo-item { flex: none; margin: 0 clamp(9px, 1vw, 15px); height: 62px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; background: #f3f1ed; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 11px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34); } .logo-item img { height: 29px; width: auto; max-width: 176px; object-fit: contain; display: block; } .logo-item-txt { font-family: var(--font-body); font-size: 1.12rem; font-weight: 700; color: #1c1b1b; letter-spacing: -0.01em; white-space: nowrap; } :root[data-theme="light"] .logo-item { background: #fff; border-color: var(--line); box-shadow: 0 1px 4px rgba(23, 20, 18, 0.12); } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } /* Resumen por categoría de datos, debajo del carrusel. Tipográfico y sin cajas: una regla fina arriba, el nombre de la categoría, el uso y las fuentes. */ .data-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.4vw, 52px); margin-top: clamp(34px, 4.5vw, 58px); } .data-cat { border-top: 1px solid var(--line); padding-top: 20px; } .data-cat h3 { font-size: 1.16rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; margin: 0 0 10px; } .data-cat p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; margin: 0 0 14px; max-width: 34ch; } .data-cat .ds-srcs { margin: 0; max-width: none; color: var(--accent-soft); font-size: 0.9rem; font-weight: 600; line-height: 1.7; } @media (max-width: 760px) { .data-cats { grid-template-columns: 1fr; gap: 22px; } .data-cat { padding-top: 16px; } } /* -------------------------------------------------------------------------- 8. Exhibit — figuras integradas al tono del sitio -------------------------------------------------------------------------- */ .exhibit { background: linear-gradient(160deg, var(--paper-hi), var(--paper-lo)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 12px; box-shadow: var(--shadow); margin: 0; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .exhibit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .exhibit img { display: block; width: 100%; height: auto; border-radius: 4px; mix-blend-mode: multiply; filter: saturate(0.94) contrast(0.99); } .exhibit figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6f6a67; margin-top: 10px; } /* Figura oscura: panel sutil apenas levantado del lienzo, sin papel blanco */ .exhibit.exhibit-dark { background: linear-gradient(165deg, #151413, #0f0e0d); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: none; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 16px; } .exhibit.exhibit-dark:hover { transform: none; box-shadow: none; } .exhibit.exhibit-dark img { mix-blend-mode: normal; filter: none; border-radius: 0; } .exhibit.exhibit-dark figcaption { color: var(--ink-faint); } /* -------------------------------------------------------------------------- 9. Proyectos — bloques con índice lateral -------------------------------------------------------------------------- */ .progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 200; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); } .project-layout { display: grid; grid-template-columns: 210px 1fr; gap: 56px; align-items: start; } @media (max-width: 1000px) { .project-layout { grid-template-columns: 1fr; gap: 0; } } .toc { position: sticky; top: 96px; } .toc .toc-title { font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: 14px; } .toc ol { list-style: none; display: grid; gap: 4px; } .toc a { display: block; padding: 9px 14px; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 0.88rem; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .toc a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.03); } .toc a.active { color: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; } @media (max-width: 1000px) { .toc { position: static; margin-bottom: 34px; overflow-x: auto; } .toc ol { display: flex; gap: 8px; } .toc a { border-left: none; border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: nowrap; padding: 8px 16px; } .toc a.active { border-color: var(--accent); } } .project-block { padding: var(--sp-4) 0; } .project-block + .project-block { border-top: 1px dashed var(--line); } .project-block .pb-head { margin-bottom: 26px; } .project-block .pb-num { font-family: var(--font-body); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.18em; } .project-block h2 { font-size: clamp(1.5rem, 2.1vw, 2.1rem); margin: 12px 0 8px; } .pb-question { color: var(--accent-soft); font-weight: 600; font-size: 1.05rem; max-width: 52ch; } .pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 26px; } @media (max-width: 880px) { .pb-grid { grid-template-columns: 1fr; gap: 28px; } } .pb-media { display: grid; gap: 16px; } .pb-media .exhibit.secondary { width: 82%; justify-self: end; margin-top: -4px; } @media (max-width: 880px) { .pb-media .exhibit.secondary { width: 100%; } } .pb-body h3 { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-soft); font-weight: 600; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin: 22px 0 10px; } .pb-body h3:first-child { margin-top: 0; } .pb-body p, .pb-body li { font-size: 0.95rem; color: var(--ink-soft); text-align: justify; hyphens: auto; } .pb-body ul { margin: 0 0 4px 20px; } .pb-body li { margin-bottom: 6px; } .pb-body .pb-result { color: var(--ink); border-left: 2px solid var(--accent); padding-left: 14px; } .pb-body details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; margin: 14px 0; } .pb-body details summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 0.92rem; color: var(--ink); list-style-position: inside; } .pb-body details[open] summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; } .pb-body details > *:not(summary) { padding-bottom: 6px; } .pb-limit { font-size: 0.85rem; color: var(--ink-faint); margin-top: 14px; } .pb-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; align-items: center; } .pb-links a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: var(--radius-sm); background: var(--accent); color: #140800; font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .pb-links a:hover { background: #ff7a2e; color: #140800; transform: translateY(-2px); } .ficha-pendiente { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-faint); } /* Página individual de proyecto — las figuras abrazan su contenido y conviven con el texto en lugar de ocupar todo el ancho */ .ph-wide .lede { color: var(--accent-soft); font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.15rem); } .pp-main img, .pp-second img { display: block; width: 100%; height: auto; } .pp-main { max-width: 1020px; margin: 0 auto clamp(32px, 4vw, 48px); } .pp-second { max-width: 1020px; margin: clamp(32px, 4vw, 48px) auto 0; } .pp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 110px); align-items: start; } @media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr; gap: 10px; } } /* Variante con figura integrada al texto (mapa u otra figura vertical). La columna de la figura lleva 1.05fr en ambas variantes para que todas las figuras de la página se vean del mismo tamaño. */ .pp-grid-media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 3.6vw, 64px); } .pp-grid-media + .pp-grid-media { margin-top: clamp(30px, 3.2vw, 48px); } .pp-grid-media .exhibit { width: 100%; margin: 0; align-self: start; } .pp-grid-media .exhibit img { width: 100%; height: auto; } .pp-grid-media.media-right { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } @media (max-width: 900px) { .pp-grid-media, .pp-grid-media.media-right { grid-template-columns: 1fr; gap: 24px; } } /* Prosa de proyecto a lo ancho, con medida de lectura */ .pp-prose { max-width: 920px; margin: clamp(32px, 4vw, 52px) 0 0; } .pp-prose + .pp-grid-media, .pp-grid-media + .pp-prose { margin-top: clamp(30px, 3.2vw, 48px); } /* Tarjeta "en preparación" */ .next-card { border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px; text-align: center; margin-top: var(--sp-4); color: var(--ink-soft); } .next-card h2 { font-size: 1.4rem; margin-bottom: 10px; } .next-card p { max-width: 52ch; margin: 0 auto; font-size: 0.95rem; } /* -------------------------------------------------------------------------- 10. Perfil — encabezado, línea de tiempo, paneles -------------------------------------------------------------------------- */ /* Encabezado del perfil: marca personal a la izquierda, retrato a la derecha */ .profile-head { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); gap: clamp(30px, 4vw, 64px); align-items: center; } @media (max-width: 880px) { .profile-head { grid-template-columns: 1fr; gap: 32px; } } /* La marca personal es la frase de apertura del CV. Va más grande que un lede: es una declaración, no relleno. El tamaño (no un tope de ancho) controla la longitud de línea, así el texto llega hasta la foto sin quedar hueco. */ .profile-head .profile-brand { color: var(--ink); font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.5; letter-spacing: -0.005em; } .profile-head .profile-brand strong { color: var(--blue-soft); font-weight: 600; } /* Retrato del perfil: recortado 4:5 y graduado como las portadas, para que se funda con el lienzo oscuro en vez de pelear con la paleta. */ .profile-photo { margin: 0; aspect-ratio: 4 / 5; max-width: clamp(360px, 27vw, 470px); width: 100%; justify-self: end; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); } .profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* En una sola columna el retrato se centra en vez de pegarse a la derecha. Va después de la regla base para ganar en especificidad de orden. */ @media (max-width: 880px) { .profile-photo { justify-self: center; max-width: 380px; } } .two-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start; } @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 34px; } } .prose p { margin-bottom: 16px; color: #cfccca; } .prose strong { color: var(--ink); } .timeline { list-style: none; position: relative; padding-left: 28px; } /* La línea ocupa de 6 a 8 px: su centro está en 7 */ .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), rgba(255, 92, 0, 0.05)); } .timeline li { position: relative; padding-bottom: 30px; } /* El punto necesita su propio box-sizing (el `*` no alcanza a los pseudo-elementos, así que el borde sumaba y lo descentraba). Con 12px totales va de 1 a 13 px: centro en 7, igual que la línea. */ .timeline li::before { content: ""; position: absolute; left: -27px; top: 7px; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent); } .timeline .t-date { font-family: var(--font-body); font-size: 0.73rem; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.1em; } .timeline h3 { font-size: 1.12rem; margin: 5px 0 3px; } .timeline .t-org { font-size: 0.92rem; color: var(--accent-soft); font-weight: 600; } .timeline p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 6px; } .timeline ul { margin: 10px 0 0 18px; font-size: 0.92rem; color: var(--ink-soft); } .timeline ul li { padding-bottom: 6px; } .timeline ul li::before { display: none; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px; } .panel h3 { font-size: 1.05rem; margin-bottom: 6px; } .panel .panel-use { font-size: 0.86rem; color: var(--ink-faint); margin-bottom: 14px; } .panel ul { list-style: none; display: grid; gap: 9px; font-size: 0.92rem; color: var(--ink-soft); } .panel li strong { color: var(--ink); } .cv-entry { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .cv-entry:last-child { border-bottom: none; } @media (max-width: 640px) { .cv-entry { grid-template-columns: 1fr; gap: 4px; } } .cv-entry .cv-date { font-family: var(--font-body); font-size: 0.78rem; color: var(--accent-soft); padding-top: 3px; } .cv-entry h3 { font-size: 1.02rem; } .cv-entry .cv-org { color: var(--accent-soft); font-weight: 600; font-size: 0.9rem; } /* Formación complementaria: ledger a dos columnas, cada fila abre su PDF */ .edu-note { color: var(--ink-faint); font-size: 0.9rem; margin: -6px 0 20px; } .edu-list { column-count: 2; column-gap: clamp(40px, 5vw, 88px); } @media (max-width: 760px) { .edu-list { column-count: 1; } } .edu-item { break-inside: avoid; display: grid; grid-template-columns: 74px 1fr auto; align-items: baseline; gap: 16px; padding: 15px 0 16px; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; } @media (max-width: 640px) { .edu-item { grid-template-columns: 62px 1fr auto; gap: 12px; } } .edu-date { font-size: 0.78rem; color: var(--accent-soft); letter-spacing: 0.01em; white-space: nowrap; } .edu-body { display: block; } .edu-item h3 { font-size: 1.02rem; margin: 0 0 3px; color: var(--ink); letter-spacing: -0.01em; transition: color var(--dur-fast) var(--ease); } .edu-org { color: var(--accent-soft); font-weight: 600; font-size: 0.9rem; } .edu-go { color: var(--ink-faint); font-size: 1.05rem; align-self: center; transform: translateX(-2px); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } a.edu-item:hover h3 { color: var(--accent); } a.edu-item:hover .edu-go { color: var(--accent); transform: translate(2px, -2px); } a.edu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } /* Curso con dos partes (FMI): enlaces separados por parte */ .edu-parts { display: flex; gap: 16px; margin-top: 7px; } .edu-parts a { font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .edu-parts a:hover { color: var(--accent); } /* Curso sin certificado adjunto: se lista sin flecha ni enlace */ .edu-item--nolink, .edu-item--group { cursor: default; } @media (prefers-reduced-motion: reduce) { .edu-go, a.edu-item:hover .edu-go { transition: none; } } /* -------------------------------------------------------------------------- 11. Notas y artículos -------------------------------------------------------------------------- */ .post-card { /* alias del work-card para notas */ } .article { max-width: 1000px; margin: 0 auto; padding: clamp(40px, 6vh, 64px) var(--pad-x) 80px; } .article .post-meta { font-family: var(--font-body); font-size: 0.78rem; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.14em; } .article h1 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); margin: 16px 0 14px; letter-spacing: -0.025em; } .article .article-lede { font-size: 1.2rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 40px; line-height: 1.6; } /* Los h2 de nota llevan el azul terciario, igual que los subtítulos de proyecto, con una regla corta que los ancla y da color a la columna de texto */ .article h2 { font-size: 1.5rem; margin: 52px 0 16px; color: var(--blue-soft); letter-spacing: -0.01em; } .article h2::before { content: ""; display: block; width: 34px; height: 2px; background: var(--accent); margin-bottom: 14px; border-radius: 2px; } .article h3 { font-size: 1.18rem; margin: 34px 0 12px; color: var(--ink); } .article p { margin-bottom: 18px; color: #cfccca; text-align: justify; hyphens: auto; } .article ul, .article ol { margin: 0 0 18px 24px; color: #cfccca; } .article li { margin-bottom: 9px; text-align: justify; hyphens: auto; } .article strong { color: var(--ink); } .article blockquote { border-left: 2px solid var(--accent); padding: 8px 0 8px 24px; margin: 30px 0; font-size: 1.18rem; font-weight: 600; line-height: 1.55; color: var(--ink); } .article code { font-family: var(--font-code); font-size: 0.85em; background: rgba(255, 255, 255, 0.06); padding: 2px 7px; border-radius: 4px; color: var(--accent-soft); } .article pre { background: var(--bg-deep); border: 1px solid var(--line); color: #d4d1cf; border-radius: var(--radius); padding: 22px; overflow-x: auto; margin-bottom: 22px; font-size: 0.85rem; font-family: var(--font-code); } .article pre code { background: none; padding: 0; color: inherit; } /* Figura de nota: panel oscuro sutil, intercalada en el flujo del texto al ancho de la columna de lectura (sin bandas ni saltos). Lenguaje de .exhibit-dark. */ .figure { margin: clamp(24px, 2.6vw, 32px) 0; width: 100%; max-width: none; background: linear-gradient(165deg, #151413, #0f0e0d); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) 16px; } .figure svg, .figure img { display: block; width: 100%; height: auto; } .figure figcaption { font-family: var(--font-body); font-size: 0.76rem; color: var(--ink-faint); margin-top: 14px; line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 12px; } .figure figcaption strong { color: var(--blue-soft); font-weight: 600; } /* Panel de cierre con las ideas para llevarse */ .takeaways { background: rgba(160, 201, 255, 0.05); border: 1px solid rgba(160, 201, 255, 0.16); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px); margin: 44px 0 8px; } .takeaways h2 { margin: 0 0 14px; font-size: 1.3rem; } .takeaways h2::before { background: var(--blue-soft); } .takeaways ul, .takeaways ol { margin-bottom: 0; } .takeaways li:last-child { margin-bottom: 0; } /* Pie de nota: de dónde salen los datos */ .note-source { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--ink-faint); text-align: left; } /* Navegación de pie. En proyectos sigue el ancho de .wrap, para que los botones queden a ras del contenido; en las notas sigue la columna de lectura. */ .article-nav { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x) 72px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .article + .article-nav { max-width: 1000px; } /* Móvil: los dos botones (volver / siguiente) del mismo ancho y en la misma línea. */ @media (max-width: 640px) { .article-nav { flex-wrap: nowrap; gap: 10px; } .article-nav .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 12px 12px; font-size: 0.82rem; line-height: 1.25; } } /* -------------------------------------------------------------------------- 12. Contacto -------------------------------------------------------------------------- */ /* Contacto es una página corta: menos aire arriba/abajo para que no queden grandes vacíos, y el pie sube más cerca del contenido. */ .contact-section { padding-top: clamp(6px, 1.5vh, 18px); padding-bottom: clamp(28px, 4vh, 48px); } body:has(.contact-section) .site-footer { margin-top: clamp(28px, 5vh, 56px); } .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-links { list-style: none; display: grid; gap: 12px; container-type: inline-size; } .contact-links > li > a, .contact-links .contact-row { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; text-decoration: none; color: var(--ink); transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .contact-links > li > a:hover { transform: translateX(6px); border-color: var(--accent); background: var(--surface-high); } .contact-links .cl-icon { color: var(--accent); flex: none; } .contact-links .cl-label { font-weight: 600; } /* La columna de texto (etiqueta + valor) debe poder encogerse dentro del flex, y el correo/URL partir línea, para que la fila no fuerce scroll horizontal en móviles angostos (~≤400px). */ .contact-links > li > a > span, .contact-links .contact-row > span { min-width: 0; } .contact-links .cl-value { font-size: 0.85rem; color: var(--ink-faint); font-family: var(--font-body); overflow-wrap: anywhere; } .copy-btn { margin-left: auto; flex: none; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.04); color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .copy-btn:hover { border-color: var(--accent); color: var(--accent-soft); } .copy-feedback { font-family: var(--font-body); font-size: 0.78rem; color: var(--accent-soft); min-height: 1.4em; display: block; margin-top: 10px; } /* Acciones del correo: enviar (mailto) + copiar, agrupadas a la derecha de la fila */ .cl-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; } .cl-actions .copy-btn { margin-left: 0; } .cl-send { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; background: var(--accent); color: #140800; border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 15px; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .cl-send:hover { background: #ff7a2e; transform: translateY(-1px); } /* Cuando la columna de canales se angosta (móvil, o rejilla a 2 columnas en tablet) las acciones del correo bajan a su propia línea, sin partir el correo. */ @container (max-width: 470px) { .contact-links .contact-row { flex-wrap: wrap; } .cl-actions { margin-left: 0; width: 100%; margin-top: 4px; } } .topics { list-style: none; display: grid; } .topics li { display: flex; align-items: flex-start; gap: 16px; padding: 17px 2px; border-top: 1px solid var(--line-soft); font-size: 1.04rem; color: var(--ink); line-height: 1.5; } .topics li:last-child { border-bottom: 1px solid var(--line-soft); } .topics li::before { content: "→"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; margin-top: -2px; background: rgba(255, 92, 0, 0.1); color: var(--accent); font-weight: 700; font-size: 0.92rem; } /* -------------------------------------------------------------------------- 13. CTA — banda naranja de alto impacto -------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--accent) 0%, #e04c00 55%, var(--accent-deep) 120%); border: none; border-radius: calc(var(--radius) + 4px); padding: 60px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } @media (max-width: 640px) { .cta-band { padding: 40px 28px; } } .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.09) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 100% at 50% 0%, black, transparent); } .cta-band h2 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); position: relative; z-index: 1; color: #1c0a00; } .cta-band p { color: rgba(28, 10, 0, 0.78); font-weight: 500; margin-top: 10px; position: relative; z-index: 1; } .cta-band .btn { position: relative; z-index: 1; } .cta-band .btn-primary { background: #140800; color: #ffb59a; } .cta-band .btn-primary:hover { background: #2a1200; color: #ffdbce; box-shadow: none; } /* En tema claro la banda se aligera: degradado vivo (sin el óxido oscuro), retícula de líneas claras y botón claro con texto naranja. */ :root[data-theme="light"] .cta-band { background: linear-gradient(115deg, #ff8038 0%, var(--accent) 58%, #f15c02 120%); } :root[data-theme="light"] .cta-band::after { background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px); } :root[data-theme="light"] .cta-band .btn-primary { background: #fff7f1; color: #a83a00; } :root[data-theme="light"] .cta-band .btn-primary:hover { background: #ffffff; color: #8f3200; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line-soft); margin-top: var(--sp-5); background: var(--bg-deep); } /* CTA superior del footer: titular grande + botón (el elemento llamativo). */ .footer-cta { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(30px, 3.6vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); } .fc-title { font-size: clamp(1.7rem, 3.4vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.04; color: var(--ink); font-weight: 800; } .fc-btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; background: var(--accent); color: #140800; text-decoration: none; font-weight: 700; font-size: 1.02rem; padding: 14px 26px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .fc-btn:hover { background: #ff7a2e; transform: translateY(-2px); } @media (max-width: 560px) { .footer-cta { flex-direction: column; align-items: flex-start; gap: 20px; } } /* En las páginas que ya tienen la banda CTA ("¿Hablamos?"...) el CTA del footer sobra. */ body:has(.cta-band) .footer-cta { display: none; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(38px, 4vw, 56px) var(--pad-x) clamp(32px, 3.4vw, 44px); display: grid; grid-template-columns: 1.7fr 1fr 1.2fr; gap: clamp(32px, 4vw, 64px); align-items: start; } @media (max-width: 980px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 36px; } } @media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; gap: 32px; } } /* Marca con logo, tamaño intermedio */ .footer-brand .f-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.1; } .footer-brand .f-brand .brand-mark { width: 30px; height: 30px; flex: none; } .footer-brand .f-tag { font-size: 0.9rem; color: var(--ink-faint); margin-top: 12px; max-width: 34ch; line-height: 1.55; } .f-social { display: flex; gap: 10px; margin-top: 20px; } .f-soc { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface-glass); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .f-soc svg { width: 18px; height: 18px; } .f-soc:hover { color: var(--accent); border-color: var(--accent); background: rgba(255, 92, 0, 0.07); transform: translateY(-2px); } .f-soc::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--surface-high); color: var(--ink); border: 1px solid var(--line); font-size: 0.7rem; padding: 4px 9px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .f-soc:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .footer-col .f-head { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-soft); margin-bottom: 16px; } .f-nav { display: grid; gap: 12px; } .f-nav a { color: var(--ink-soft); text-decoration: none; width: fit-content; position: relative; font-size: clamp(0.96rem, 1.1vw, 1.06rem); font-weight: 500; transition: color var(--dur-fast) var(--ease); } .f-nav a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease); } .f-nav a:hover { color: var(--ink); } .f-nav a:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .f-nav a::after { transition: none; } } .f-contact { display: grid; gap: 11px; font-style: normal; font-size: 0.92rem; color: var(--ink-soft); } .f-contact a { color: var(--ink-soft); text-decoration: none; width: fit-content; transition: color var(--dur-fast) var(--ease); } .f-contact a:hover { color: var(--accent); } .footer-bottom { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--line-soft); font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-faint); padding: 20px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 15. Reveal + accesibilidad de movimiento -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .scroll-hint::after { animation: none; } .ticker-track { animation: none; } body { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .work-card:hover, .exhibit:hover, .contact-links > li > a:hover { transform: none; } .work-card:hover .work-cover img, .work-card:hover .work-cover svg { transform: none; } .progress-bar { display: none; } } /* -------------------------------------------------------------------------- 16. Página 404 / redirecciones -------------------------------------------------------------------------- */ .center-page { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 14px; padding: 40px 24px; } .center-page h1 { font-size: clamp(2.4rem, 8vw, 5rem); } .center-page p { color: var(--ink-soft); }