/* ========================================================================== ÍNDICE — PERSONAL LINK HUB Sistema de diseño editorial: papel + tinta, tipografía nativa del sistema, sin dependencias externas. Los colores se definen una única vez con light-dark() y el modo se resuelve vía la propiedad color-scheme. ========================================================================== */ :root { color-scheme: light dark; /* Tokens del pack "terracota" (por defecto). Cada pack alternativo (ver bloques [data-theme-pack] más abajo) redefine estas variables --light-* / --dark-* / --accent juntas; el resto de la hoja de estilos solo usa light-dark() sobre ellas, así que nunca hay que tocar nada más. */ --light-bg: #F5F3EC; --light-surface: #FFFFFF; --light-surface-hover: #FBF9F2; --light-line: #E4DFD1; --light-line-strong: #17140F; --light-text: #17140F; --light-text-body: #4B463C; --dark-bg: #131110; --dark-surface: #1B1815; --dark-surface-hover: #201C18; --dark-line: #2B2621; --dark-line-strong: #F2EFE9; --dark-text: #F2EFE9; --dark-text-body: #B8B0A2; /* Superficies */ --bg: light-dark(var(--light-bg), var(--dark-bg)); --surface: light-dark(var(--light-surface), var(--dark-surface)); --surface-hover: light-dark(var(--light-surface-hover), var(--dark-surface-hover)); /* Líneas */ --line: light-dark(var(--light-line), var(--dark-line)); --line-strong: light-dark(var(--light-line-strong), var(--dark-line-strong)); /* Tipografía */ --text: light-dark(var(--light-text), var(--dark-text)); --text-body: light-dark(var(--light-text-body), var(--dark-text-body)); /* --text-dim / --text-muted se calculan a partir de --text y --bg (no con literales por tema) para que salgan siempre con el matiz correcto del tema activo Y con contraste garantizado, en vez de tener que ajustar 12 valores a mano (6 temas × claro/oscuro) cada vez. --text-dim va por encima del mínimo AA (4.5:1) para texto normal, con margen de sobra para que se lea bien también en pantallas más pequeñas o con brillo bajo; --text-muted es más claro a propósito y se reserva para elementos decorativos/aria-hidden. */ --text-dim: color-mix(in srgb, var(--text) 68%, var(--bg) 32%); --text-muted: color-mix(in srgb, var(--text) 46%, var(--bg) 54%); /* Acento (sello / tinta roja, no el naranja genérico de IA) */ --accent: light-dark(#A6321C, #E2724A); /* Indicadores de FASE DE PROYECTO — un único punto de color, sin fondo relleno. Solo describen el ciclo de vida; la categoría (repositorio, música, servicio...) va en "label" como texto libre, sin color propio. */ --c-activo: light-dark(#1F9D53, #34D399); --c-desarrollo: light-dark(#1D6FD1, #5B9BF2); --c-pausa: light-dark(#C27803, #FBBF24); --c-proximamente: light-dark(#D9490F, #FB923C); --c-inactivo: light-dark(#8A8374, #6B7280); /* Indicadores de DISPONIBILIDAD PERSONAL — catálogo separado del de proyectos, porque "en pausa" para un proyecto no es lo mismo que "estoy de vacaciones" para una persona. */ --p-disponible: light-dark(#1F9D53, #34D399); --p-ocupado: light-dark(#C27803, #FBBF24); --p-vacaciones: light-dark(#6D3FBF, #B794F6); --p-no-disponible: light-dark(#8A8374, #6B7280); --shadow-elevated: light-dark(0 1px 2px rgba(23, 20, 15, 0.04), 0 10px 30px rgba(0, 0, 0, 0.45)); /* Tipografía: pila nativa del sistema, sin peticiones de red */ --font-display: ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace; --max-width: 980px; --radius: 2px; } /* -------------------------------------------------------------------------- Packs de tema alternativos — elegidos desde config.js (SITE_CONFIG.theme), aplicados vía [data-theme-pack] en . Cada uno trae ya coordinadas su versión clara y su versión oscura; cuál de las dos se ve depende del sistema o del botón de tema, exactamente igual que con "terracota". "terracota" es el valor por defecto ya definido arriba en :root. -------------------------------------------------------------------------- */ :root[data-theme-pack="vino"] { --light-bg: #F7F0F1; --light-surface: #FFFFFF; --light-surface-hover: #F0E6E8; --light-line: #E6D5D9; --light-line-strong: #1C1013; --light-text: #1C1013; --light-text-body: #4A3339; --dark-bg: #150C0E; --dark-surface: #1E1215; --dark-surface-hover: #24161A; --dark-line: #332025; --dark-line-strong: #F3E9EB; --dark-text: #F3E9EB; --dark-text-body: #BFA3A9; --accent: light-dark(#7A2436, #D97B94); } :root[data-theme-pack="mostaza"] { --light-bg: #F7F3E9; --light-surface: #FFFFFF; --light-surface-hover: #F0EADA; --light-line: #E6DCC2; --light-line-strong: #1C1810; --light-text: #1C1810; --light-text-body: #4A4130; --dark-bg: #15120A; --dark-surface: #1E1911; --dark-surface-hover: #241E14; --dark-line: #332B1C; --dark-line-strong: #F3EEE0; --dark-text: #F3EEE0; --dark-text-body: #BFB397; --accent: light-dark(#8A6A16, #D9A94D); } :root[data-theme-pack="monocromo"] { --light-bg: #FFFFFF; --light-surface: #FFFFFF; --light-surface-hover: #F5F5F5; --light-line: #E5E5E5; --light-line-strong: #111111; --light-text: #111111; --light-text-body: #3D3D3D; --dark-bg: #000000; --dark-surface: #0A0A0A; --dark-surface-hover: #141414; --dark-line: #242424; --dark-line-strong: #F5F5F5; --dark-text: #F5F5F5; --dark-text-body: #A8A8A8; --accent: light-dark(#3A3A3A, #D9D9D9); } :root[data-theme-pack="azul"] { --light-bg: #E6EBF7; --light-surface: #FFFFFF; --light-surface-hover: #DAE2F3; --light-line: #C4D0E9; --light-line-strong: #0E1729; --light-text: #0E1729; --light-text-body: #33436B; --dark-bg: #0D131C; --dark-surface: #141C28; --dark-surface-hover: #19222F; --dark-line: #26303F; --dark-line-strong: #EDF1F6; --dark-text: #EDF1F6; --dark-text-body: #A9B4C4; /* Acento: azul puro (hue ~213°), no índigo/violeta — antes se iba hacia el morado al bajar demasiado el verde respecto al azul. */ --accent: light-dark(#1668E6, #5FA8FF); } :root[data-theme-pack="petroleo"] { --light-bg: #EEF3F1; --light-surface: #FFFFFF; --light-surface-hover: #E5EDEA; --light-line: #D6E3DE; --light-line-strong: #0F211D; --light-text: #0F211D; --light-text-body: #37493F; --dark-bg: #0A1613; --dark-surface: #101E1A; --dark-surface-hover: #152520; --dark-line: #223530; --dark-line-strong: #E9F2EE; --dark-text: #E9F2EE; --dark-text-body: #A6BFB4; --accent: light-dark(#0F5C56, #5FC2B4); } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* -------------------------------------------------------------------------- Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; background-color: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; background-color: var(--bg); background-image: radial-gradient(ellipse at top, light-dark(rgba(23,20,15,0.035), rgba(255,255,255,0.03)), transparent 60%); /* La transición índice ↔ servicios saca los paneles fuera del viewport (ver .panel-slide-* más abajo) — sin esto aparecería una barra de scroll horizontal fantasma mientras dura la animación. */ overflow-x: hidden; } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.8rem; z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* -------------------------------------------------------------------------- Page Grid — Masthead (sidebar) + Index (main) -------------------------------------------------------------------------- */ .page { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 1.5rem; padding-top: max(3.5rem, env(safe-area-inset-top)); padding-bottom: max(3.5rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr; gap: 2.75rem; } /* display:grid de arriba gana por especificidad al [hidden] del user-agent stylesheet — mismo patrón que .whatsapp-cta[hidden] y compañía. Solo initQrPage oculta ".page" (ver script.js). */ .page[hidden] { display: none; } @media (min-width: 860px) { /* Página estática: nada de scroll (ni de "rebote" al forzarlo) en todo el sitio — lo único que se desplaza es la propia lista de enlaces/ servicios, dentro de su propio hueco (ver .index-list más abajo). En móvil se deja el scroll normal de toda la página (una sola columna, sin masthead fijo al lado con el que compaginar el desplazamiento). */ html, body { height: 100%; overflow: hidden; } .page { height: 100vh; height: 100dvh; grid-template-columns: 15.5rem 1fr; grid-template-rows: minmax(0, 1fr); gap: 4rem; align-items: stretch; /* Mucho menos hueco muerto abajo que en móvil (3.5rem): con la página fija a 100dvh, ese margen le quitaba a la lista casi 1cm de alto útil antes de necesitar scroll, dejando la zona de desvanecido demasiado arriba, lejos del borde real del navegador. */ padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } /* Vista de servicios (ver initViewSwitcher en script.js): el masthead pasa a la columna derecha y la lista de contenido a la izquierda — solo tiene sentido "el otro lado" cuando hay dos columnas; en una sola columna (móvil) el swap queda desactivado y solo se ve la animación. "order" por sí solo NO basta: solo decide qué elemento va en qué columna, pero las columnas del grid mantienen su ancho (15.5rem/1fr) donde estaban — sin invertir también grid-template-columns, la lista de servicios quedaría apretada en la columna estrecha. */ .page--services { grid-template-columns: 1fr 15.5rem; } .page--services .masthead { order: 2; } .page--services .index { order: 1; } } /* -------------------------------------------------------------------------- Transición índice ↔ servicios El masthead sale de pantalla por la izquierda y vuelve a entrar por la derecha (colocándose al otro lado del grid); la lista de contenido hace el movimiento espejo. translateX en vw (no en % del propio ancho) para que "salir"/"entrar" sea siempre respecto al viewport, sin importar en qué columna esté el elemento en ese momento. -------------------------------------------------------------------------- */ .masthead, .index { transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease; } .panel-slide-left { transform: translateX(-120vw); opacity: 0; } .panel-slide-right { transform: translateX(120vw); opacity: 0; } .no-transition { transition: none !important; } /* -------------------------------------------------------------------------- Masthead -------------------------------------------------------------------------- */ .masthead { display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); } @media (min-width: 860px) { .masthead { /* La página ya no hace scroll (ver .page más arriba), así que no hace falta "sticky" — el masthead simplemente se queda donde está. */ padding-bottom: 0; border-bottom: none; min-height: 0; overflow: hidden; } } .masthead-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* Indicador de estado — mismo estilo de texto para todos los estados en todo el sitio (masthead y filas del índice); lo único que cambia entre uno y otro es el color del punto, vía la clase .status-* en el mismo elemento (solo afecta a .flag-dot dentro, no al texto). */ .flag, .row-flag { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .flag { font-size: 0.7rem; } .row-flag { font-size: 0.66rem; } .flag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background-color: var(--text-muted); } .status-activo .flag-dot { background-color: var(--c-activo); } .status-desarrollo .flag-dot { background-color: var(--c-desarrollo); } .status-pausa .flag-dot { background-color: var(--c-pausa); } .status-proximamente .flag-dot { background-color: var(--c-proximamente); } .status-inactivo .flag-dot { background-color: var(--c-inactivo); } /* Disponibilidad personal (catálogo separado, ver arriba) */ .status-disponible .flag-dot { background-color: var(--p-disponible); } .status-ocupado .flag-dot { background-color: var(--p-ocupado); } .status-vacaciones .flag-dot { background-color: var(--p-vacaciones); } .status-no-disponible .flag-dot { background-color: var(--p-no-disponible); } /* Theme toggle: un pequeño "dial" en vez de emoji inconsistentes entre plataformas */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.3rem 0.55rem; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { border-color: var(--line-strong); color: var(--text); } .theme-toggle:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 2px; } .theme-dial { width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid currentColor; background: conic-gradient(currentColor 0 50%, transparent 50% 100%); } .theme-toggle[data-state="dark"] .theme-dial { background: currentColor; } .theme-toggle[data-state="light"] .theme-dial { background: transparent; } /* Identity block */ .identity { display: flex; flex-direction: column; gap: 0.4rem; } .identity-kicker { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; } .identity-name { font-family: var(--font-display); font-size: 2.15rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); } .identity-role { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.03em; line-height: 1.5; } .identity-role .sep { color: var(--accent); font-weight: 800; font-size: 1.15em; margin: 0 0.2rem; } /* Contact block */ .contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; } /* Botones de acción (teléfono, WhatsApp): en fila por defecto (pantalla estrecha, donde el masthead ocupa todo el ancho y sobra sitio de sobra para varios botones uno junto a otro) y en columna a partir de 860px, donde el masthead pasa a ser una columna lateral estrecha (15.5rem) en la que una fila de 2-3 botones no cabría. */ .contact-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; } @media (min-width: 860px) { .contact-actions { flex-direction: column; align-items: flex-start; } } .contact-kicker { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; } /* Es un