/* =========================================================================== orchest.info — la hoja de estilo del sitio entero. Vive en un archivo aparte y no dentro de cada página porque el sitio pasó de una página a ocho: ocho copias del mismo bloque se separan sin que nadie lo note, y el día que el ámbar cambie habría que acordarse de ocho lugares. DOS REGLAS QUE NO SE ADIVINAN, y que explican casi todo lo de abajo: 1. LOS COLORES SON LOS DEL PRODUCTO, copiados uno por uno de `src/orchest/ipc/static/settings.html`. No hay ni un color inventado. Si el panel cambia su ámbar, este archivo miente hasta que se actualice. 2. LA ESTRUCTURA SE HACE CON LÍNEAS, NO CON CAJAS. No hay una sola grilla de tarjetas cuadradas apiladas. Lo que separa dos cosas es una línea de un píxel (`--rule`) y aire; lo que jerarquiza es el tamaño de la letra y la columna en la que cae. La única superficie con fondo, borde y sombra de todo el sitio es la que imita al panel de Orchest hablando — y ahí es material del producto, no decoración. =========================================================================== */ /* --------------------------------------------------------------------------- LA PALETA — exacta, de settings.html. El producto arranca OSCURO (`:root` allá es el tema oscuro) y aclara con `prefers-color-scheme: light`. Acá se hace igual, más una tercera puerta: `[data-theme]` en el , que gana sobre el sistema cuando la persona elige a mano. El bloque claro está escrito DOS VECES a propósito. CSS no deja unir una media query con un selector normal en la misma regla, y la alternativa —mapear cada token a otro token— triplica las líneas en vez de duplicarlas. Si tocás un valor de acá, tocá los dos. --------------------------------------------------------------------------- */ :root { /* Oscuro: el fondo profundo del panel. */ --bg: #14151b; --z0-bg: #0e0f14; --superficie: #1c1e26; --text: #ece7da; --text-secondary: #9b9686; --accent: #d99a4e; --accent-text: #14151b; --ok: #4caf7d; --warn: #d99a4e; --err: #d1614f; --rule: rgba(236, 231, 218, 0.14); --rule-suave: rgba(236, 231, 218, 0.07); --tinte-acento: rgba(217, 154, 78, 0.13); /* El aura Z0 del panel: la única cosa que respira en toda la casa. 0,05 es el techo que fijó el producto — más que eso es neón. */ --aura: 217, 154, 78; --aura-alpha: 0.05; /* El cristal. Es el material del panel de Orchest y acá se reserva para las superficies que muestran a Orchest hablando. */ --glass-bg: rgba(28, 30, 38, 0.62); --glass-border: rgba(236, 231, 218, 0.10); --glass-blur: 18px; --glass-radius: 18px; --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --glass-topline: rgba(255, 255, 255, 0.06); /* Los cinco tipos de ancla del grafo de la Memoria. Son cinco y no más porque el vocabulario del grafo es cerrado. */ --anchor-persona: #d99a4e; --anchor-lugar: #4caf7d; --anchor-hora: #4a90d9; --anchor-dia: #b07fd4; --anchor-tema: #9b9686; /* Tipografía. Todo del sistema: ni una fuente que haya que bajar de un tercero, así que la página abre sin esperar a nadie. La serif no es adorno: marca lo que Orchest DICE. La sans es la interfaz y la mono son los datos —horas, rutas, cifras— que se leen en columna. */ --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "New York", Georgia, serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Ritmo. Las duraciones son las del panel. */ --dur-1: 160ms; --dur-2: 240ms; --dur-3: 620ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-suave: cubic-bezier(0.2, 0.7, 0.3, 1); /* Medidas de página. */ --hoja: 1120px; --margen: clamp(20px, 5.5vw, 84px); --aire: clamp(72px, 10vw, 152px); } /* Claro, cuando lo pide el sistema y nadie eligió a mano. Papel cálido, carbón profundo, bronce. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f1e7; --z0-bg: #f6f1e7; --superficie: #ffffff; --text: #211f1a; --text-secondary: #6b6558; --accent: #a8672a; --accent-text: #ffffff; --ok: #2f7a4a; --warn: #a8672a; --err: #b23b28; --rule: rgba(33, 31, 26, 0.14); --rule-suave: rgba(33, 31, 26, 0.07); --tinte-acento: rgba(168, 103, 42, 0.10); --aura-alpha: 0.10; --glass-bg: rgba(255, 255, 255, 0.62); --glass-border: rgba(20, 21, 27, 0.10); --glass-blur: 14px; --glass-shadow: 0 10px 30px rgba(30, 25, 15, 0.12); --glass-topline: rgba(255, 255, 255, 0.55); --anchor-persona: #a8672a; --anchor-lugar: #2f7a4a; --anchor-hora: #2f5fa8; --anchor-dia: #7a4fa0; --anchor-tema: #6b6558; } } /* Claro elegido a mano. Mismos valores; ver el comentario de arriba. */ :root[data-theme="light"] { --bg: #f6f1e7; --z0-bg: #f6f1e7; --superficie: #ffffff; --text: #211f1a; --text-secondary: #6b6558; --accent: #a8672a; --accent-text: #ffffff; --ok: #2f7a4a; --warn: #a8672a; --err: #b23b28; --rule: rgba(33, 31, 26, 0.14); --rule-suave: rgba(33, 31, 26, 0.07); --tinte-acento: rgba(168, 103, 42, 0.10); --aura-alpha: 0.10; --glass-bg: rgba(255, 255, 255, 0.62); --glass-border: rgba(20, 21, 27, 0.10); --glass-blur: 14px; --glass-shadow: 0 10px 30px rgba(30, 25, 15, 0.12); --glass-topline: rgba(255, 255, 255, 0.55); --anchor-persona: #a8672a; --anchor-lugar: #2f7a4a; --anchor-hora: #2f5fa8; --anchor-dia: #7a4fa0; --anchor-tema: #6b6558; } /* --------------------------------------------------------------------------- BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* La barra de arriba es fija: sin esto, un ancla deja el título tapado. */ scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--z0-bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* La habitación cambia de luz, no de golpe. La transición se enciende SOLO mientras dura el cambio (`.mudando`, 620 ms) y se apaga después: dejarla siempre puesta le cobra un repintado a cada `:hover` de la página. */ html.mudando, html.mudando body, html.mudando .cristal, html.mudando .barra, html.mudando .franja { transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); } /* Z0 — la luz. Detrás de todo. Es lo mismo que hace el panel del producto: dos manchas de ámbar muy tenues que respiran cada 18 segundos. Una sola cosa respira en toda la página; dos compiten y tres son una feria. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 22% 4%, rgba(var(--aura), var(--aura-alpha)), transparent 70%), radial-gradient(52% 42% at 88% 92%, rgba(var(--aura), calc(var(--aura-alpha) * 0.55)), transparent 70%); animation: respirar 18s ease-in-out infinite; } @keyframes respirar { 50% { opacity: 0.6; } } ::selection { background: var(--tinte-acento); color: var(--text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } img, svg { max-width: 100%; } /* --------------------------------------------------------------------------- TIPOGRAFÍA Editorial: los títulos van grandes, con el interletrado cerrado y sin negrita gruesa. 640 en vez de 700 — el peso lo pone el tamaño, no la tinta. --------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.028em; line-height: 1.05; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 6.6vw, 4.7rem); letter-spacing: -0.038em; line-height: 0.99; } h2 { font-size: clamp(1.85rem, 4.2vw, 3rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); letter-spacing: -0.02em; line-height: 1.2; } h4 { font-size: 1.02rem; letter-spacing: -0.012em; line-height: 1.3; } p { margin: 0; } p + p { margin-top: 1.05em; } a { color: var(--accent); } /* El subrayado crece desde la izquierda en vez de aparecer entero: es el gesto más barato que tiene la página y el que más se repite. */ .enlace { color: inherit; text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease); padding-bottom: 1px; } .enlace:hover { background-size: 100% 1px; color: var(--accent); } /* Rótulo de sección: mayúscula chica, mono, con su número al lado. Es el mismo recurso de un libro: el número te dice dónde estás. */ .rotulo { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: baseline; gap: 14px; margin: 0 0 26px; } .rotulo b { color: var(--accent); font-weight: 600; } /* En un teléfono el rótulo ya ocupa dos renglones; el filete de la derecha queda colgando al lado del primero y ensucia. */ @media (max-width: 700px) { .rotulo { flex-wrap: wrap; gap: 6px 12px; } .rotulo::after { display: none; } } .rotulo::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform: translateY(-3px); } .entrada { font-size: clamp(1.06rem, 1.9vw, 1.32rem); line-height: 1.56; color: var(--text-secondary); max-width: 46ch; margin-top: 28px; } .entrada strong, .marca { color: var(--text); font-weight: 600; } .nota { font-size: 0.87rem; line-height: 1.55; color: var(--text-secondary); } .dicho { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.32; letter-spacing: -0.012em; font-weight: 400; } code, .ruta { font-family: var(--mono); font-size: 0.86em; background: var(--tinte-acento); padding: 1px 6px; border-radius: 4px; word-break: break-word; } /* --------------------------------------------------------------------------- ESTRUCTURA DE PÁGINA --------------------------------------------------------------------------- */ .hoja { max-width: var(--hoja); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); } .angosta { max-width: 760px; } section { padding: var(--aire) 0; position: relative; } /* La línea que separa dos secciones NO llega a los bordes: arranca y termina en el margen de la hoja, como el filete de un libro. */ .franja { border-top: 1px solid var(--rule-suave); } /* La reja editorial. Una columna angosta a la izquierda para el número, el rótulo o el año; el texto a la derecha. En un teléfono se apila y el margen se convierte en el renglón de arriba. */ .reja { display: grid; grid-template-columns: 1fr; gap: 10px 40px; } @media (min-width: 900px) { .reja { grid-template-columns: 190px minmax(0, 1fr); gap: 0 48px; } } /* --------------------------------------------------------------------------- LA LISTA CON LÍNEAS — el reemplazo de la grilla de tarjetas. Cada ítem es un renglón de una tabla de contenidos: nombre a la izquierda, qué hace a la derecha, y una línea de un píxel entre uno y el siguiente. Al pasar el mouse la línea se tiñe de ámbar y el renglón se corre 4 px — suficiente para que se sienta vivo, nada más. --------------------------------------------------------------------------- */ .lista { border-top: 1px solid var(--rule); } .renglon { display: grid; grid-template-columns: 1fr; gap: 6px 48px; padding: 26px 0; border-bottom: 1px solid var(--rule); transition: border-color var(--dur-2) var(--ease); } @media (min-width: 760px) { .renglon { grid-template-columns: 190px minmax(0, 1fr); gap: 0 48px; align-items: baseline; } } .renglon:hover { border-bottom-color: var(--accent); } .renglon-que { font-weight: 620; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 12px; } .renglon-num { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); font-weight: 500; letter-spacing: 0.04em; } .renglon-como { color: var(--text-secondary); font-size: 0.97rem; line-height: 1.58; } .renglon-como b { color: var(--text); font-weight: 600; } /* Estado de una capacidad. No es una insignia de color: es una palabra chica al final del renglón, porque «en construcción» tiene que leerse, no brillar. */ .estado { display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px; white-space: nowrap; vertical-align: 2px; } .estado--anda { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, transparent); } .estado--obra { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); } /* --------------------------------------------------------------------------- BOTONES --------------------------------------------------------------------------- */ .botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 40px; } .boton { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 0.95rem; font-weight: 620; letter-spacing: -0.01em; padding: 13px 22px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } .boton:hover { transform: translateY(-1px); } .boton:active { transform: translateY(0); } .boton[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .boton--lleno { background: var(--accent); color: var(--accent-text); } .boton--lleno:hover { filter: brightness(1.07); } .boton--linea { border-color: var(--rule); color: var(--text-secondary); } .boton--linea:hover { color: var(--text); border-color: var(--text-secondary); } /* --------------------------------------------------------------------------- LA BARRA DE ARRIBA Fija, de cristal, con una línea de un píxel abajo que solo aparece cuando la página ya se movió — así el encabezado del principio no arranca partido en dos por una raya. --------------------------------------------------------------------------- */ .barra { position: sticky; top: 0; z-index: 40; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease); } .barra.posada { border-bottom-color: var(--rule); } @supports not (backdrop-filter: blur(1px)) { .barra { background: var(--bg); } } .barra-fila { display: flex; align-items: center; gap: 18px; height: 62px; } /* La marca: el tablero de ajedrez. Dos cuadros en diagonal, y es el mismo glifo que usa la cuenta de Instagram — la marca es el tablero. */ .marca-enlace { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); flex: none; } .glifo { width: 22px; height: 22px; border-radius: 6px; flex: none; background: conic-gradient(var(--accent) 0 25%, transparent 0 50%, var(--accent) 0 75%, transparent 0); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: transform var(--dur-2) var(--ease); } .marca-enlace:hover .glifo { transform: rotate(90deg); } .marca-nombre { font-weight: 680; letter-spacing: -0.025em; font-size: 1.02rem; } .menu { display: none; align-items: center; gap: 4px; margin-left: auto; } @media (min-width: 1000px) { .menu { display: flex; } } .menu a, .menu-boton { font-family: inherit; font-size: 0.88rem; font-weight: 540; color: var(--text-secondary); text-decoration: none; padding: 7px 11px; border-radius: 8px; border: none; background: transparent; cursor: pointer; transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); } .menu a:hover, .menu-boton:hover { color: var(--text); background: var(--rule-suave); } .menu a[aria-current="page"] { color: var(--text); } /* El desplegable. Se abre al pasar el mouse y también al tocar (el JS lo abre con clic), porque en un teléfono no hay hover. */ .desplegable { position: relative; } .desplegable-panel { position: absolute; top: calc(100% + 8px); left: -6px; min-width: 268px; padding: 8px; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-topline); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2); } @supports not (backdrop-filter: blur(1px)) { .desplegable-panel { background: var(--superficie); } } .desplegable:hover .desplegable-panel, .desplegable.abierto .desplegable-panel { opacity: 1; visibility: visible; transform: translateY(0); } .desplegable-panel a { display: block; padding: 9px 11px; border-radius: 9px; font-size: 0.9rem; font-weight: 600; color: var(--text); text-decoration: none; transition: background-color var(--dur-1) var(--ease); } .desplegable-panel a:hover { background: var(--rule-suave); } .desplegable-panel a span { display: block; font-size: 0.79rem; color: var(--text-secondary); font-weight: 440; margin-top: 2px; line-height: 1.4; } .desplegable-panel a:hover span { color: var(--text-secondary); } .barra-fin { display: flex; align-items: center; gap: 8px; margin-left: auto; } @media (min-width: 1000px) { .barra-fin { margin-left: 0; } } /* El conmutador de tema. Un botón, no tres: toca y cambia. El rótulo dice a qué va a cambiar, no en qué está — un control dice qué va a pasar. */ .tema-boton { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; flex: none; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .tema-boton:hover { color: var(--accent); border-color: var(--accent); } .tema-boton svg { width: 16px; height: 16px; } /* Solo se ve el glifo que corresponde al tema en uso. **Todos estos selectores llevan `.tema-boton` adelante a propósito.** Antes la regla que ocultaba la luna era `.tema-luna { display: none }` y perdía contra `.tema-boton svg`, que es más específica — así que el botón mostraba el sol Y la luna a la vez, en los dos temas. Visto el 2026-08-24. */ .tema-boton .tema-sol { display: block; } .tema-boton .tema-luna { display: none; } :root[data-theme="dark"] .tema-boton .tema-luna { display: block; } :root[data-theme="dark"] .tema-boton .tema-sol { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema-boton .tema-luna { display: block; } :root:not([data-theme="light"]) .tema-boton .tema-sol { display: none; } } /* El menú de teléfono: el mismo contenido, desplegado hacia abajo. */ .hamburguesa { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; } @media (min-width: 1000px) { .hamburguesa { display: none; } } .hamburguesa svg { width: 16px; height: 16px; } .menu-chico { display: none; border-top: 1px solid var(--rule); padding: 12px 0 18px; } .menu-chico.abierto { display: block; } @media (min-width: 1000px) { .menu-chico, .menu-chico.abierto { display: none; } } .menu-chico a { display: block; padding: 11px 2px; color: var(--text); text-decoration: none; font-size: 0.98rem; border-bottom: 1px solid var(--rule-suave); } .menu-chico a:last-child { border-bottom: none; } .menu-chico a span { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-top: 1px; } /* --------------------------------------------------------------------------- EL CRISTAL — la única superficie con fondo del sitio. Se usa donde se muestra a Orchest haciendo algo: es el material del panel, copiado de settings.html con blur y todo. Fuera de eso, la página no tiene cajas. --------------------------------------------------------------------------- */ .cristal { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-topline); overflow: hidden; } @supports not (backdrop-filter: blur(1px)) { .cristal { background: var(--superficie); } } /* Quien pidió menos transparencia la pierde entera, no solo el desenfoque. */ @media (prefers-reduced-transparency: reduce) { .cristal, .barra, .desplegable-panel { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; } } .cristal-cabeza { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--rule); font-size: 0.79rem; color: var(--text-secondary); } .cristal-quien { font-weight: 660; color: var(--text); letter-spacing: -0.01em; } .cristal-hora { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; } .cristal-cuerpo { padding: 20px 18px; } .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: latir 2.6s ease-out infinite; } @keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 125, 0.42); } 70% { box-shadow: 0 0 0 9px rgba(76, 175, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 125, 0); } } /* El rótulo de conexión. Sin conexión NO se pinta de rojo: no está fallando nada, es el estado en el que esto igual funciona. */ .sin-red { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-family: var(--mono); } .sin-red::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); opacity: 0.5; } /* Fichas de acción: lo que Orchest ofrece después de hablar. No son botones —acá no hacen nada— así que no se disfrazan de botón. */ .fichas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; } .ficha { font-size: 0.83rem; font-weight: 580; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule); color: var(--text-secondary); } .ficha--si { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } /* --------------------------------------------------------------------------- LA TRAZA — una línea vertical con horas. Sirve para «qué miró antes de hablar» y para el changelog. Es un filete, no una tarjeta por paso. --------------------------------------------------------------------------- */ .traza { border-left: 1px solid var(--rule); padding-left: 24px; display: grid; gap: 22px; margin-top: 40px; } .paso { display: grid; grid-template-columns: 1fr; gap: 5px; position: relative; } @media (min-width: 700px) { .paso { grid-template-columns: 96px minmax(0, 1fr); gap: 0 22px; align-items: baseline; } } .paso::before { content: ""; position: absolute; left: -28px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rule); border: 1px solid var(--z0-bg); } .paso--hito::before { background: var(--accent); } .paso-cuando { font-family: var(--mono); font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .paso-que { color: var(--text-secondary); line-height: 1.58; font-size: 0.97rem; } .paso-que b { color: var(--text); font-weight: 620; } /* --------------------------------------------------------------------------- LAS DOS COLUMNAS con una línea en el medio. Sirve para el antes/después de la redacción y para cualquier comparación de a dos. --------------------------------------------------------------------------- */ .par { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 44px; border-top: 1px solid var(--rule); } .par > * { padding: 28px 0; border-bottom: 1px solid var(--rule); } @media (min-width: 820px) { .par { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); } .par > * { border-bottom: none; padding: 30px 34px; } .par > *:first-child { padding-left: 0; border-right: 1px solid var(--rule); } .par > *:last-child { padding-right: 0; } } .par-titulo { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px; } /* Etiquetas de dato redactado. El color viene del tipo de ancla del grafo: una persona es ámbar, un lugar es verde, un correo es azul. */ .pieza { font-weight: 620; color: var(--text); } .tapa { font-family: var(--mono); font-size: 0.86em; padding: 1px 6px; border-radius: 4px; background: var(--rule-suave); border: 1px solid var(--rule); white-space: nowrap; } .tapa--persona { color: var(--anchor-persona); } .tapa--lugar { color: var(--anchor-lugar); } .tapa--hora { color: var(--anchor-hora); } /* --------------------------------------------------------------------------- DATOS EN COLUMNA — cifras verificables. Sin cajas: la cifra grande y su frase debajo, separadas por líneas verticales. --------------------------------------------------------------------------- */ .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 44px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; } @media (min-width: 860px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cifra { background: var(--z0-bg); padding: 24px 20px; } .cifra-n { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 620; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; } .cifra-q { font-size: 0.84rem; color: var(--text-secondary); margin-top: 9px; line-height: 1.45; } /* --------------------------------------------------------------------------- FORMULARIOS (la cuenta) --------------------------------------------------------------------------- */ .campo { display: grid; gap: 6px; margin-bottom: 14px; } .campo label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .campo input[type="email"], .campo input[type="password"] { font-family: inherit; font-size: 0.96rem; color: var(--text); background: transparent; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 9px 2px; transition: border-color var(--dur-1) var(--ease); } .campo input:focus { outline: none; border-bottom-color: var(--accent); } .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--text-secondary); margin: 18px 0; line-height: 1.5; } .acepto input { margin-top: 3px; accent-color: var(--accent); flex: none; } /* En una línea de consentimiento los enlaces van subrayados desde el principio: acá el subrayado que aparece al pasar el mouse no alcanza, porque nadie firma algo cuyos enlaces no ve. */ .acepto a { background-size: 100% 1px; color: var(--accent); } .pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; } .pestana { font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 14px 11px; margin-bottom: -1px; cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .pestana:hover { color: var(--text); } .pestana.activa { color: var(--text); border-bottom-color: var(--accent); } .aviso { font-size: 0.88rem; line-height: 1.5; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--rule); margin: 16px 0 0; } .aviso.is-error { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); } .aviso.is-success { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } /* --------------------------------------------------------------------------- PIE --------------------------------------------------------------------------- */ .pie { border-top: 1px solid var(--rule); padding: 52px 0 64px; font-size: 0.9rem; color: var(--text-secondary); } .pie-reja { display: grid; grid-template-columns: 1fr; gap: 34px; } @media (min-width: 760px) { .pie-reja { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } } .pie h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; margin-bottom: 14px; } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .pie a { color: var(--text-secondary); text-decoration: none; } .pie a:hover { color: var(--accent); } .pie-fin { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule-suave); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.83rem; } /* --------------------------------------------------------------------------- VOLVER — el control de retorno de una subpágina. Vive arriba del título, y la flecha se corre un poco a la izquierda al pasar el mouse. --------------------------------------------------------------------------- */ .volver { display: inline-flex; align-items: center; gap: 9px; font-size: 0.87rem; color: var(--text-secondary); text-decoration: none; margin-bottom: 30px; } .volver:hover { color: var(--accent); } .volver span { display: inline-block; transition: transform var(--dur-2) var(--ease); } .volver:hover span { transform: translateX(-4px); } /* --------------------------------------------------------------------------- APARICIÓN AL DESPLAZAR Arranca invisible SOLO si hay JS (la clase `js` la pone un script en el antes de pintar). Sin JS la página se ve entera, que es lo correcto. --------------------------------------------------------------------------- */ .js .sube { opacity: 0; transform: translateY(16px); transition: opacity 0.72s var(--ease-suave), transform 0.72s var(--ease-suave); transition-delay: calc(var(--i, 0) * 70ms); } .js .sube.visto { opacity: 1; transform: none; } /* --------------------------------------------------------------------------- EL PANEL QUIETO `prefers-reduced-motion` es del sistema operativo. Una sola regla que apaga por resta, el mismo patrón que usa el panel del producto: repetir el media query en cada bloque garantiza que el próximo se escape. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .js .sube { opacity: 1; transform: none; } body::before { animation: none; } } /* --------------------------------------------------------------------------- AJUSTES CHICOS Nombres de clase en vez de `style=""` sueltos por el HTML: lo que se repite en más de una página tiene que poder cambiarse en un solo lugar. --------------------------------------------------------------------------- */ .seccion--alta { padding-top: clamp(52px, 8vw, 100px); } /* El rótulo que vive en la columna angosta de la reja: sin el filete de la derecha, porque en 190 px el rótulo ya ocupa dos renglones y la línea queda colgando al lado del primero. */ .rotulo--fijo { margin: 0; } .rotulo--fijo::after { display: none; } .medida { max-width: 52ch; } .ancho-medio { max-width: 660px; } .ancho-texto { max-width: 62ch; } .lista--separada { margin-top: clamp(38px, 5vw, 52px); } .peso-medio { font-weight: 600; } .ambar { color: var(--accent); font-weight: 600; } .lista-plana { padding-left: 18px; margin: 0; display: grid; gap: 8px; } .boton--chico { padding: 9px 16px; font-size: 0.88rem; } .boton--ancho { width: 100%; justify-content: center; } .ficha--tocable { font-family: inherit; background: transparent; cursor: pointer; text-align: left; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .ficha--tocable:hover { color: var(--text); border-color: var(--text-secondary); } .ficha--tocable.ficha--si:hover { color: var(--accent); border-color: var(--accent); } .pestana--suelta { padding-left: 0; } .linea-hola { font-size: 1.06rem; margin-bottom: 6px; } /* El enlace al instructivo aparece recién cuando la descarga arrancó: antes de eso no hay nada que instalar. */ .enlace-posterior { margin-top: 16px; display: none; } .enlace-posterior.se-ve { display: block; } .marca-enlace--pie { margin-bottom: 14px; } /* La demo del inicio, adentro del cristal. */ .demo-arriba { padding: 20px 18px 8px; } .demo-frases { display: flex; flex-wrap: wrap; gap: 8px; } .demo-salida { padding: 6px 18px 22px; } .traza--pegada { margin-top: 22px; } .dicho--chico { font-size: clamp(1.1rem, 2.2vw, 1.45rem); margin-top: 26px; } .dicho em { font-style: normal; color: var(--accent); font-weight: 600; } /* --------------------------------------------------------------------------- PÁGINAS LEGALES Una sola columna angosta, numeración visible, y los renglones separados por líneas — igual que el resto del sitio. Nada de letra chica: el cuerpo es del mismo tamaño que el de cualquier otra página. --------------------------------------------------------------------------- */ .legal { max-width: 720px; } .legal h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 54px 0 14px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; gap: 14px; } .legal h2 .n { font-family: var(--mono); font-size: 0.76rem; color: var(--accent); font-weight: 500; letter-spacing: 0.04em; flex: none; } .legal h3 { font-size: 1.02rem; margin: 30px 0 8px; letter-spacing: -0.012em; } .legal p { margin-top: 0.9em; line-height: 1.68; } .legal ul { padding-left: 20px; margin: 0.9em 0 0; display: grid; gap: 9px; } .legal li { line-height: 1.62; } .legal .fecha { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text-secondary); margin: 0 0 44px; } /* Un marcador que el fundador tiene que completar. Se ve a propósito: un hueco discreto es un hueco que se publica sin que nadie lo note. */ .pendiente { display: inline-block; font-family: var(--mono); font-size: 0.82em; font-weight: 600; color: var(--accent); background: var(--tinte-acento); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 5px; padding: 1px 7px; } /* El resumen de arriba de la política: lo que contesta la pregunta sin leer diez secciones. */ .resumen-legal { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 26px 0; margin: 34px 0 10px; display: grid; gap: 16px; } .resumen-legal p { margin: 0; } .resumen-legal .clave { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px; } /* Impresión: los términos y la política se imprimen, y en papel el tema oscuro es un desperdicio de tinta. */ @media print { .barra, .pie, .botones, .tema-boton, .hamburguesa { display: none !important; } body { background: #fff; color: #000; } body::before { display: none; } a { color: #000; text-decoration: underline; } } /* --------------------------------------------------------------------------- ELEGIR LOS MODELOS (modelos.html) La página donde alguien decide qué baja antes de bajarlo. Todo lo de acá es material —una regla, renglones que se eligen— y nada es adorno: la única forma que no existía en el sitio es la regla, y existe porque el argumento de la página ES una proporción, y una proporción se ve o no se ve. --------------------------------------------------------------------------- */ /* LA REGLA. Una sola línea con el total dibujado a escala. El fondo llega hasta el total más caro que se puede elegir, así que el largo dice dos cosas a la vez: cuánto ocupa lo tuyo y cuánto de lo posible estás usando. */ .regla { margin-top: 30px; } .regla-via { position: relative; height: 3px; background: var(--rule-suave); border-radius: 2px; } .regla-lleno { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; transition: width var(--dur-3) var(--ease-suave); } /* El corte entre los dos modelos, adentro de lo lleno: un mordisco del color del fondo, no una línea encima. Así el ojo lee dos tramos y no tres cosas. */ .regla-corte { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--z0-bg); transition: left var(--dur-3) var(--ease-suave); } .regla-marcas { position: relative; height: 1.6em; margin-top: 12px; font-family: var(--mono); font-size: 0.72rem; color: var(--text-secondary); } .regla-marcas > span:first-child { position: absolute; left: 0; } .regla-marcas > span:last-child { position: absolute; right: 0; } .regla-total { position: absolute; transform: translateX(-50%); color: var(--accent); white-space: nowrap; transition: left var(--dur-3) var(--ease-suave); } /* RENGLONES QUE SE ELIGEN. Un renglón de la lista de siempre, que además se puede apretar. La marca de elegido es un filete ámbar a la izquierda que entra deslizándose — el mismo gesto que el subrayado de los enlaces. */ .renglon--elegible { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; cursor: pointer; position: relative; padding-left: 0; transition: border-color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease); } .renglon--elegible::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-2) var(--ease); } .renglon--elegible:hover { border-bottom-color: var(--accent); } .renglon--elegible.elegido { padding-left: 18px; } .renglon--elegible.elegido::before { transform: scaleY(1); } .renglon--elegible.elegido .renglon-que b { color: var(--accent); } .renglon--elegible:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* La que no entra en la memoria de esta Mac. No se esconde y no se apaga del todo: se puede leer y se puede elegir igual —la decisión es de la persona— pero queda dicho que Orchest la va a rechazar. */ .renglon--elegible.no-entra { opacity: 0.5; } .renglon--elegible.no-entra .renglon-que b { text-decoration: line-through; } .renglon-peso { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); font-weight: 500; letter-spacing: 0.02em; } .lista--separada .renglon { align-items: start; } /* --------------------------------------------------------------------------- LO QUE SE MUEVE (2026-09-07) Pedido del fundador: «decoraciones minimalistas y animaciones bonitas para ciertas cosas». La regla con la que se eligió qué animar es la de la casa: **el movimiento está por debajo del umbral de notarse, o ES el argumento.** Nunca en el medio, que es donde vive todo el diseño hecho por una máquina. Lo que se mueve, y por qué cada uno se ganó su lugar: el filete del rótulo dibuja la línea que separa una sección de la otra la traza la línea baja mientras se leen los pasos las cifras el número ES la afirmación (lo hace el JS) las esquinas enmarcan lo que Orchest dice, y solo eso el hilo de lectura dice cuánto falta de un texto legal largo Nada aparece por opacidad que no apareciera ya (`.sube` es de agosto y se queda). Nada late. Nada flota. --------------------------------------------------------------------------- */ /* EL FILETE DEL RÓTULO se dibuja de izquierda a derecha cuando la sección entra. Es la línea que ya estaba: lo único nuevo es que llega dibujándose, así que la sección se separa de la anterior a la vista y no de golpe. */ .js .sube .rotulo::after, .js .sube.rotulo::after { transform: translateY(-3px) scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-suave) 0.12s; } .js .sube.visto .rotulo::after, .js .sube.visto.rotulo::after { transform: translateY(-3px) scaleX(1); } /* LA TRAZA baja mientras se lee. La línea vertical de los pasos se dibuja de arriba abajo: es el orden del texto, hecho movimiento. El filete de `.traza` es un `border-left`, y un borde no se puede escalar, así que acá se lo vuelve transparente y la línea la dibuja un `::before` puesto exactamente encima. Sin JS la clase `js` no está y el borde original se queda como siempre. */ .js .sube .traza, .js .sube.traza { position: relative; border-left-color: transparent; } .js .sube .traza::before, .js .sube.traza::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--rule); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.15s var(--ease-suave) 0.1s; } .js .sube.visto .traza::before, .js .sube.visto.traza::before { transform: scaleY(1); } /* LAS ESQUINAS del cristal. Cuatro ángulos de 1 px en las puntas de lo que Orchest dice — la marca de registro de una hoja de imprenta. Es la única decoración del sitio y está donde importa: enmarca la voz del producto y nada más. Se dibujan al entrar, en el mismo gesto que el filete. */ .cristal { position: relative; } .cristal::before, .cristal::after { content: ""; position: absolute; width: 13px; height: 13px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; } .cristal::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .cristal::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .js .sube .cristal::before, .js .sube.cristal::before, .js .sube .cristal::after, .js .sube.cristal::after { opacity: 0; transition: opacity 0.7s var(--ease-suave) 0.35s; } .js .sube.visto .cristal::before, .js .sube.visto.cristal::before, .js .sube.visto .cristal::after, .js .sube.visto.cristal::after { opacity: 1; } /* EL HILO DE LECTURA, solo en las páginas legales. Un pelo ámbar arriba de todo que dice cuánto falta. En un texto de catorce secciones eso no es adorno: es la única forma barata de saber en qué parte del contrato estás. Lo pone `orchest.js` y solo si la página lleva `.legal`. */ .hilo { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 60; pointer-events: none; } /* EL ÍNDICE DE UN TEXTO LEGAL. Catorce secciones numeradas piden una columna al lado que diga dónde estás; en un teléfono no cabe y no se muestra. */ .indice-legal { display: none; } @media (min-width: 1080px) { .indice-legal { display: block; position: fixed; top: 120px; left: max(20px, calc(50vw - var(--hoja) / 2 - 190px)); width: 168px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; line-height: 1.5; z-index: 30; } .indice-legal a { display: block; padding: 4px 0 4px 12px; color: var(--text-secondary); border-left: 1px solid var(--rule-suave); text-decoration: none; transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .indice-legal a:hover { color: var(--text); } .indice-legal a.aqui { color: var(--accent); border-left-color: var(--accent); } } @media (prefers-reduced-motion: reduce) { .js .sube .rotulo::after, .js .sube.rotulo::after, .js .sube.visto .rotulo::after, .js .sube.visto.rotulo::after { transform: translateY(-3px); } .js .sube .traza::before, .js .sube.traza::before, .js .sube.visto .traza::before, .js .sube.visto.traza::before { transform: scaleY(1); } .js .sube .cristal::before, .js .sube.cristal::before, .js .sube .cristal::after, .js .sube.cristal::after { opacity: 1; } .hilo { display: none; } }