:root { --bg: #161613; --bg-entry: #1e1e19; --bg-entry-hover: #232319; --text: #ddd6c4; --text-dim: #7d7a6a; --moss: #6b7a5e; --moss-soft: #4d5844; --clay: #8a5a44; --clay-soft: #5f4235; --tinta: #5d6b73; --tinta-soft: #414c52; --hairline: #2a2a23; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-color: #4d5844 #161613; scrollbar-width: thin; } html::-webkit-scrollbar { width: 11px; } html::-webkit-scrollbar-track { background: #161613; } html::-webkit-scrollbar-thumb { background: #4d5844; border-radius: 6px; border: 2px solid #161613; } html::-webkit-scrollbar-thumb:hover { background: #6b7a5e; } /* foco visible pero con color propio, no el azul genérico */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-radius: 1px; } @media (prefers-reduced-motion: no-preference) { body { animation: pagina-aparece 0.6s ease; } } @keyframes pagina-aparece { from { opacity: 0; } to { opacity: 1; } } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Literata', Georgia, serif; } body { min-height: 100vh; position: relative; background: var(--tinte-hora, var(--bg)); transition: background 2.5s ease; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 18 C2 10 6 3 14 2 C16 9 13 16 4 18 Z' fill='%236b7a5e' stroke='%232a2a23' stroke-width='1'/%3E%3Cpath d='M5 17 C7 12 9 8 13 4' stroke='%232a2a23' stroke-width='0.8' fill='none'/%3E%3C/svg%3E") 4 18, auto; } /* textura de papel, muy sutil, en todas las páginas — con un amarilleo que crece muy despacio con la edad real del diario */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: linear-gradient(rgba(184, 152, 88, var(--papel-alfa, 0)), rgba(184, 152, 88, var(--papel-alfa, 0))), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* identidad de fondo por sección, activada con una clase en */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.055; background-repeat: repeat; } body.tema-bonsai::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Ccircle cx='70' cy='70' r='58' fill='none' stroke='%236b7a5e' stroke-width='1'/%3E%3Ccircle cx='70' cy='70' r='38' fill='none' stroke='%236b7a5e' stroke-width='1'/%3E%3Ccircle cx='70' cy='70' r='18' fill='none' stroke='%236b7a5e' stroke-width='1'/%3E%3C/svg%3E"); background-size: 140px 140px; } body.tema-escritura::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='34'%3E%3Cline x1='0' y1='33' x2='10' y2='33' stroke='%238a5a44' stroke-width='1'/%3E%3C/svg%3E"); background-size: 100% 34px; } body.tema-hallazgos::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='4' cy='4' r='1.4' fill='%235d6b73'/%3E%3C/svg%3E"); background-size: 60px 60px; } body.tema-hallazgos .wrap { max-width: 680px; } body.tema-hallazgos .texto-entrada { line-height: 1.75; } /* escritura se siente distinta: un archivo de notas sueltas, no una libreta pulcra — el cuerpo del texto usa una letra de máquina de escribir, más cruda, más de borrador */ .tema-escritura .texto-entrada, .tema-escritura .texto-entrada p { font-family: 'Courier Prime', 'JetBrains Mono', monospace; font-size: 0.92rem; line-height: 1.75; letter-spacing: 0.01em; } .tema-escritura .texto-entrada p:first-of-type::first-letter { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; float: none; padding: 0; color: inherit; } .tema-escritura .nota { font-family: 'Courier Prime', 'JetBrains Mono', monospace; font-style: normal; } /* --- variedad de "papel": cada entrada saca un puñado fijo de rasgos --- */ .tema-escritura .ancho-b { max-width: 92%; } .tema-escritura .ancho-c { max-width: 85%; } .tema-escritura .ancho-b, .tema-escritura .ancho-c { align-self: flex-start; } .tema-escritura .papel-b { background-color: #2a2419; } .tema-escritura .papel-c { background-color: #16181a; } .tema-escritura .tinta-clara .texto-entrada { color: var(--text-dim); } .tema-escritura .tinta-marcada .texto-entrada, .tema-escritura .tinta-marcada .texto-entrada p { font-weight: 700; } .tema-escritura .borde-irregular { clip-path: polygon( 0% 3%, 4% 0%, 8% 3%, 12% 0%, 16% 3%, 20% 0%, 24% 3%, 28% 0%, 32% 3%, 36% 0%, 40% 3%, 44% 0%, 48% 3%, 52% 0%, 56% 3%, 60% 0%, 64% 3%, 68% 0%, 72% 3%, 76% 0%, 80% 3%, 84% 0%, 88% 3%, 92% 0%, 96% 3%, 100% 0%, 100% 97%, 96% 100%, 92% 97%, 88% 100%, 84% 97%, 80% 100%, 76% 97%, 72% 100%, 68% 97%, 64% 100%, 60% 97%, 56% 100%, 52% 97%, 48% 100%, 44% 97%, 40% 100%, 36% 97%, 32% 100%, 28% 97%, 24% 100%, 20% 97%, 16% 100%, 12% 97%, 8% 100%, 4% 97%, 0% 100% ); padding-top: 1.6rem; padding-bottom: 1.6rem; } .tema-escritura .renglones .texto-entrada { background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 26px, rgba(221, 214, 196, 0.06) 27px ); } /* --- detalles ocasionales, agregados como pequeños elementos --- */ .deco { position: absolute; pointer-events: none; } .deco-perforado { left: -2px; top: 10px; bottom: 10px; width: 6px; background-image: radial-gradient(circle, var(--bg) 2px, transparent 2.3px); background-size: 100% 15px; background-repeat: repeat-y; } .deco-mancha { width: 44px; height: 36px; top: 8%; right: 6%; background: radial-gradient(ellipse at center, rgba(138, 90, 68, 0.16), transparent 72%); filter: blur(1px); } .deco-cinta { top: -9px; left: 20px; width: 46px; height: 16px; background: rgba(154, 130, 77, 0.3); border: 1px solid rgba(154, 130, 77, 0.15); transform: rotate(-4deg); } .deco-numero { bottom: 6px; right: 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); opacity: 0.55; letter-spacing: 0.03em; } .deco-clip { top: -7px; left: 26px; width: 16px; height: 11px; border: 2px solid #8a8578; border-bottom: none; border-radius: 3px 3px 0 0; opacity: 0.5; } .marca-lapiz { position: absolute; width: 6px; height: 1.5px; background: var(--acento, #8a7454); opacity: 0.32; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); pointer-events: none; border-radius: 1px; } /* ---------- El cursor de tinta al final de cada entrada de escritura ---------- */ .cursor-tinta { display: inline-block; width: 2px; height: 1em; background: var(--acento, currentColor); margin-left: 2px; vertical-align: text-bottom; opacity: 0; } /* ===================================================================== MOVIMIENTO — solo en escritura, y solo si el sistema no pidió "reducir movimiento". Todo se dispara al entrar/salir de pantalla, y es reversible: lo que se "escribe" al entrar se "borra" al salir. ===================================================================== */ @media (prefers-reduced-motion: no-preference) { .tema-escritura .entrada { opacity: 0; transform: rotate(calc(var(--rot, 0deg) * 2.4)) translateY(8px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); } .tema-escritura .entrada.en-vista { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0); animation: respirar-borde 6s ease-in-out infinite; } .tema-escritura .entrada.leida { opacity: 0.4; transition: opacity 1s ease; } .tema-escritura .entrada.leida:hover { opacity: 1; } .tema-escritura .texto-entrada { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(.3, .7, .2, 1); } .tema-escritura .entrada.en-vista .texto-entrada { clip-path: inset(0 0 0 0); } .tema-escritura .texto-entrada del::after { transition: width 0.6s ease 0.15s; } .tema-escritura .entrada:not(.en-vista) .texto-entrada del::after { width: 0%; } .tema-escritura .resaltado { transition: background-size 0.6s ease 0.2s; } .tema-escritura .entrada:not(.en-vista) .resaltado { background-size: 0% 100%; } .tema-escritura .corte { transition: transform 0.6s ease 0.15s; } .tema-escritura .entrada:not(.en-vista) .corte { transform: scaleX(0); } .tema-escritura .suspension span { transition: opacity 0.4s ease; } .tema-escritura .entrada:not(.en-vista) .suspension span { opacity: 0; } .tema-escritura .entrada.en-vista .suspension span:nth-child(1) { transition-delay: 0.15s; } .tema-escritura .entrada.en-vista .suspension span:nth-child(2) { transition-delay: 0.4s; } .tema-escritura .entrada.en-vista .suspension span:nth-child(3) { transition-delay: 0.65s; } .tema-escritura .nota { transition: transform 0.5s ease, opacity 0.5s ease; } .tema-escritura .entrada:not(.en-vista) .nota { transform: translateX(-10px); opacity: 0.4; } .tema-escritura .entrada.en-vista .grito { animation: grito-rebote 0.45s ease; } .tema-escritura .entrada.en-vista .pregunta-fuerte { animation: pregunta-temblor 0.4s ease; } .tema-escritura .entrada.en-vista .ilegible { animation: ilegible-fluctua 4s ease-in-out infinite; } .tema-escritura .entrada.en-vista .cursor-tinta { animation: cursor-parpadeo 1.1s steps(1) 1; } } @keyframes respirar-borde { 0%, 100% { border-left-color: var(--acento); } 50% { border-left-color: color-mix(in srgb, var(--acento) 55%, transparent); } } @keyframes grito-rebote { 0% { transform: scale(1.3); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes pregunta-temblor { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } } @keyframes ilegible-fluctua { 0%, 100% { filter: blur(2.5px); opacity: 0.55; } 50% { filter: blur(1.2px); opacity: 0.7; } } @keyframes cursor-parpadeo { 0%, 100% { opacity: 0; } 10%, 30%, 50%, 70% { opacity: 1; } 20%, 40%, 60%, 80% { opacity: 0; } } ::selection { background: var(--moss-soft); color: var(--bg); } .wrap { max-width: 620px; margin: 0 auto; padding: 4rem 1.5rem 8rem; position: relative; z-index: 1; } /* ---------- Navegación ---------- */ .menu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 3rem; } .menu a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; } .menu a:hover, .menu a:focus { color: var(--text); border-color: var(--text-dim); } .menu a.actual { color: var(--text); border-color: currentColor; } .menu .raiz { color: var(--text); font-family: 'Fraunces', serif; font-style: italic; font-size: 0.85rem; margin-right: 0.2rem; } /* ---------- Encabezado ---------- */ header { margin-bottom: 2.5rem; } .titulo { font-family: 'Fraunces', serif; font-optical-sizing: auto; font-weight: 300; font-style: italic; font-size: 2.1rem; letter-spacing: 0.01em; color: var(--text); margin: 0 0 0.4rem; } .titulo span { display: inline-block; opacity: 0; animation: letra-aparece 0.4s ease forwards; } @keyframes letra-aparece { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .titulo-seccion { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; font-size: 1.6rem; color: var(--text); margin: 0 0 0.3rem; } .subtitulo { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--text-dim); margin: 0; } /* ---------- El árbol ---------- */ .arbol-cont { margin: 2.5rem 0 0.5rem; display: flex; justify-content: center; } .arbol-cont svg { width: 100%; max-width: 340px; height: auto; overflow: visible; transition: filter 0.8s ease; } /* el follaje responde muy sutilmente a la estación del año real */ .arbol-cont.season-primavera svg { filter: saturate(1.15) hue-rotate(-6deg) brightness(1.05); } .arbol-cont.season-verano svg { filter: saturate(1.05) hue-rotate(0deg); } .arbol-cont.season-otono svg { filter: saturate(1.05) hue-rotate(24deg) sepia(0.12) brightness(0.97); } .arbol-cont.season-invierno svg { filter: saturate(0.6) brightness(0.85); } .rama { stroke: #4a4436; stroke-width: 2.2; stroke-linecap: round; fill: none; } .tronco { stroke: #4a4436; stroke-linecap: round; fill: none; transition: stroke-width 1s ease; } .raiz-sutil { stroke: #4a4436; stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: 0.32; } .rama-conexion { stroke-width: 1.4; stroke-linecap: round; fill: none; opacity: 0.55; stroke-dasharray: 1 3; } .hoja-link { cursor: pointer; } .hoja { transition: transform 0.25s ease, opacity 0.25s ease; transform-box: fill-box; transform-origin: center; } .hoja-link:hover .hoja, .hoja-link:focus .hoja { opacity: 1 !important; transform: scale(1.4); } .hoja-hoy { fill: none; stroke: var(--text); stroke-width: 0.8; opacity: 0.5; } .grieta { fill: none; stroke: #100e0a; stroke-width: 1; opacity: 0.55; stroke-linecap: round; } .maceta-grupo { cursor: help; } .conteo, .siembra { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.05em; margin: 0.15rem 0; } .siembra { margin-bottom: 3rem; } /* ---------- Leyenda ---------- */ .leyenda { display: flex; gap: 1.4rem; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-dim); margin-bottom: 3rem; letter-spacing: 0.02em; } .leyenda a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-dim); text-decoration: none; transition: color 0.25s ease; } .leyenda a:hover { color: var(--text); } .punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ---------- Entradas ---------- */ .orden-btn { display: block; margin: 0 0 2rem; background: none; border: none; border-bottom: 1px dashed var(--hairline); color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; padding: 0 0 0.2rem; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; } .orden-btn:hover, .orden-btn:focus { color: var(--text); border-color: var(--text-dim); } .entradas { display: flex; flex-direction: column; gap: 1.4rem; } .entrada { position: relative; background: var(--bg-entry); border-left: 2px solid var(--hairline); padding: 1.3rem 1.5rem; border-radius: 2px; transform: rotate(var(--rot, 0deg)); transition: background 0.3s ease, transform 0.3s ease; scroll-margin-top: 2rem; } .entrada:hover { background: var(--bg-entry-hover); transform: rotate(0deg); } .entrada:target { border-left-width: 3px; animation: destello 1.1s ease; } @keyframes destello { 0% { background: var(--acento, var(--moss-soft)); } 100% { background: var(--bg-entry); } } .meta { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; } .fecha { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.03em; opacity: 0; transition: opacity 0.3s ease; } .entrada:hover .fecha, .entrada:focus-within .fecha, .entrada:target .fecha { opacity: 1; } .fecha::before { content: "· "; } .conteo-seccion { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.04em; margin: -0.6rem 0 2.2rem; } .glifo { font-size: 0.75rem; line-height: 1; } .titulo-entrada { font-family: 'Fraunces', serif; font-weight: 500; font-size: 0.95rem; color: var(--text); margin: 0; } .hito { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.04em; color: var(--text-dim); border-top: 1px dashed var(--hairline); margin: 0.5rem 0 0.8rem; padding-top: 0.5rem; } .hito-muerte { font-style: italic; opacity: 0.85; } .texto-entrada { position: relative; font-size: 0.98rem; line-height: 1.65; color: var(--text); margin: 0.5rem 0 0; } .texto-entrada p { margin: 0 0 0.7rem; } .texto-entrada p:last-child { margin-bottom: 0; } .texto-entrada p:first-of-type::first-letter { font-family: 'Fraunces', serif; font-weight: 500; font-size: 2.4em; line-height: 0.7; float: left; padding-right: 0.1em; padding-top: 0.05em; color: var(--acento, var(--text)); } /* nota al margen: un párrafo que empieza con "> " se vuelve cita */ .nota { font-style: italic; font-size: 0.92rem; color: var(--text-dim); border-left: 2px dashed var(--acento, var(--tinta-soft)); padding-left: 1rem; margin: 1rem 0; } /* ---------- Reglas de marcado (funcionan en cualquier sección) ---------- */ .texto-entrada del { position: relative; text-decoration: none; color: var(--text-dim); } .texto-entrada del::after { content: ""; position: absolute; left: 0; top: 55%; height: 1px; width: 100%; background: var(--acento, currentColor); } .resaltado { background-image: linear-gradient(rgba(154, 130, 77, 0.28), rgba(154, 130, 77, 0.28)); background-repeat: no-repeat; background-size: 100% 100%; background-position: left center; color: inherit; padding: 0 0.15em; border-radius: 1px; } .subrayado { text-decoration: underline; text-decoration-color: var(--acento, currentColor); text-underline-offset: 3px; } .pregunta-fuerte { letter-spacing: 0.03em; font-style: italic; } .ilegible { filter: blur(2.5px); opacity: 0.55; letter-spacing: 0.15em; user-select: none; } .acotacion { font-size: 0.85em; color: var(--text-dim); font-style: italic; } .grito { font-weight: 700; letter-spacing: 0.02em; } .corte { border-top: 1px dashed var(--hairline); margin: 1.3rem 2.2rem; transform-origin: left center; transform: scaleX(1); } .suspension { text-align: center; color: var(--text-dim); opacity: 0.55; margin: 0.7rem 0 !important; } .suspension span { display: inline-block; margin: 0 0.35em; opacity: 1; } .vacio { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-dim); padding: 2rem 0; } /* ---------- Buscador ---------- */ .buscador { margin-bottom: 3rem; } #buscar-input { width: 100%; background: none; border: none; border-bottom: 1px solid var(--hairline); color: var(--text); font-family: 'Literata', Georgia, serif; font-style: italic; font-size: 0.95rem; padding: 0.4rem 0.1rem; outline: none; transition: border-color 0.25s ease; } #buscar-input::placeholder { color: var(--text-dim); opacity: 0.8; } #buscar-input:focus { border-color: var(--text-dim); } #buscar-resultados { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; } .resultado-buscar { font-size: 0.85rem; color: var(--text); text-decoration: none; border-left: 2px solid var(--hairline); padding: 0.3rem 0 0.3rem 0.7rem; transition: border-color 0.25s ease, background 0.25s ease; } .resultado-buscar:hover { border-color: var(--moss-soft); background: var(--bg-entry); } .fecha-buscar { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-dim); } .vacio-buscar { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-dim); margin: 0; } /* ---------- Pie ---------- */ footer { margin-top: 4.5rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--hairline); letter-spacing: 0.05em; } @media (prefers-reduced-motion: reduce) { .hoja, .entrada, .fecha { transition: none; } } @media (max-width: 480px) { .wrap { padding: 3rem 1.2rem 6rem; } .titulo { font-size: 1.8rem; } }