/* ═══════════════════════════════════════════════════════════════ Tuinbit · Sistema Máquina / Persona ─────────────────────────────────────────────────────────────── El negocio es un SaaS híbrido: una plataforma que automatiza la gestión y un equipo que crea y revisa. Ese reparto es el sistema de diseño, no un apartado dentro de él. máquina → frío, monoespaciado, alineado a rejilla, menta persona → cálido, tipografía de texto, fuera de rejilla, ámbar Todo lo de aquí va con prefijo rd- para no colisionar con el CSS anterior, que sigue sirviendo al hero y a la cabecera. ═══════════════════════════════════════════════════════════════ */ :root { /* Zona persona — papel cálido */ --rd-h-paper: #F4F1E9; --rd-h-paper2: #EAE6DB; /* La tinta es la del manual de marca: #020C14, el mismo negro frío del logotipo. Antes iba en #191612, un negro cálido que yo había elegido y que no cuadraba con la marca sobre este papel. */ --rd-h-ink: #020C14; --rd-h-ink-70: rgba(2,12,20,0.70); --rd-h-ink-45: rgba(2,12,20,0.62); /* 0.45 daba 3,1:1 sobre el papel; AA pide 4,5:1. El nombre se conserva. */ --rd-h-line: rgba(2,12,20,0.14); /* Zona máquina — pantalla fría */ --rd-m-paper: #0B0D10; --rd-m-paper2: #13171C; --rd-m-ink: #E7ECF1; --rd-m-ink-70: rgba(231,236,241,0.70); /* 0.55 y no 0.45: es la tinta de etiquetas y notas, y a 0.45 se quedaba en 3,9:1 sobre los fondos de maqueta; AA pide 4,5:1. El nombre se conserva. */ --rd-m-ink-45: rgba(231,236,241,0.55); --rd-m-line: rgba(231,236,241,0.14); /* Las dos voces */ --rd-auto: #35E0B0; /* menta de señal — la plataforma */ --rd-human: #F2A53F; /* ámbar cálido — las personas */ --rd-r: 6px; --rd-r-lg: 12px; /* Curva exponencial: arranca rápido y se posa muy despacio. Es lo que separa una animación elegante de una que parece un efecto. */ --rd-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Alias de la escala única de tokens.css. La familia solo tiene 300/400/500, así que la jerarquía la hacen el tamaño y el tracking, nunca el peso. */ --rd-display: var(--t-display); --rd-h2: var(--t-1); --rd-h3: var(--t-3); --rd-cifra: var(--t-2); --rd-body: var(--t-body); --rd-small: var(--t-small); --rd-micro: var(--t-micro); } /* ── Zonas ──────────────────────────────────────────────────── */ .rd { position: relative; z-index: 10; padding-block: clamp(4.5rem, 9vw, 9rem); color: var(--rd-ink); /* el fondo lo pone la zona (--veil) */ } /* Las dos zonas van sobre --veil, el fondo translúcido que el lienzo actualiza con la profundidad del viaje: casi opaco en la atmósfera, casi transparente en espacio profundo. Eso es lo que deja ver la galaxia a través de la página. Lo que ya no depende del scroll es el color del texto: lo fija la zona, y por eso el contraste aguanta en todo el recorrido. */ .rd--light { --rd-paper2: var(--rd-h-paper2); --rd-ink: var(--rd-h-ink); --rd-ink-70: var(--rd-h-ink-70); --rd-ink-45: var(--rd-h-ink-45); --rd-line: var(--rd-h-line); --rd-auto-t: #0C6E52; --rd-human-t:#8A4E08; background: var(--veil); } .rd--dark { --rd-paper2: var(--rd-m-paper2); --rd-ink: var(--rd-m-ink); --rd-ink-70: var(--rd-m-ink-70); --rd-ink-45: var(--rd-m-ink-45); --rd-line: var(--rd-m-line); --rd-auto-t: var(--rd-auto); --rd-human-t:var(--rd-human); background: var(--veil); } /* ── Reposo ── El velo es uno solo para toda la página y arriba del todo es claro, así que una zona oscura que aún no se ha visto tenía texto claro sobre fondo claro: ilegible sin JS o con «reducir movimiento» (el lienzo no corre), y un suspenso de contraste para cualquier herramienta que mida la página sin desplazarla. Mientras el viaje no ha empezado, cada zona oscura lleva debajo su propio fondo, el mismo que tendrá cuando se lea. En cuanto hay intención de desplazarse, main.js pone .viaje en y manda el velo. Con la página arriba del todo ninguna zona oscura está en pantalla (el hero ocupa el alto entero), así que el cambio no se ve. */ html:not(.viaje) .rd--dark, html:not(.viaje) .lincos-tira { background: var(--rd-m-paper); } /* Secciones de mucho texto: el velo solo no basta para leerlas con la galaxia detrás, así que añaden una capa de densidad propia. Va en un pseudoelemento con z-index negativo para que quede por encima del velo y por debajo del contenido, y así el viaje se sigue viendo en los bordes en lugar de quedar tapado por un fondo plano. */ .rd--dense::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--rd-m-paper) 62%, transparent); } .rd__wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } /* ── Cabecera de sección ────────────────────────────────────── */ .rd__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .rd__head--wide { max-width: 78ch; } .rd__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-ink-45); } .rd__title { margin: 0; font-size: var(--rd-h2); font-weight: 300; line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; color: var(--rd-ink); } .rd__title em { font-style: normal; color: var(--rd-auto-t); } .rd__title i { font-style: normal; color: var(--rd-human-t); } .rd__lead { margin: 1.5rem 0 0; max-width: 58ch; font-size: var(--rd-body); line-height: 1.6; color: var(--rd-ink-70); } /* ── Etiquetas de voz ───────────────────────────────────────── */ .rd-tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.6rem 0.25rem 0.45rem; border: 1px solid var(--rd-line); border-radius: 100px; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .rd-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .rd-tag--auto { color: var(--rd-auto-t); border-color: color-mix(in srgb, var(--rd-auto) 38%, transparent); } .rd-tag--human { color: var(--rd-human-t); border-color: color-mix(in srgb, var(--rd-human) 42%, transparent); } /* El punto de la plataforma respira: está encendida. */ .rd-tag--auto::before { animation: rd-pulse 2.4s ease-in-out infinite; } @keyframes rd-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-auto) 55%, transparent); } 50% { opacity: 0.75; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-auto) 0%, transparent); } } /* ── El reparto: la tesis ───────────────────────────────────── */ .rd-split { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden; background: color-mix(in srgb, var(--rd-m-paper2) 55%, transparent); } @media (min-width: 900px) { .rd-split { grid-template-columns: 1fr 1px 1fr; } } .rd-split__col { padding: clamp(1.75rem, 3.2vw, 3rem); min-width: 0; } .rd-split__col--auto { background: color-mix(in srgb, var(--rd-auto) 5%, transparent); } .rd-split__col--human { background: color-mix(in srgb, var(--rd-human) 6%, transparent); } /* La costura: donde la máquina entrega a la persona. */ .rd-split__seam { position: relative; background: var(--rd-line); min-height: 1px; } @media (min-width: 900px) { .rd-split__seam::after { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 22%; background: linear-gradient( to bottom, transparent, var(--rd-auto) 28%, var(--rd-human) 72%, transparent ); animation: rd-seam 5.5s cubic-bezier(0.65,0,0.35,1) infinite; } } @keyframes rd-seam { 0% { top: -22%; opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .rd-split__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rd-line); } .rd-split__h { margin: 0; font-size: var(--rd-h3); font-weight: 400; letter-spacing: -0.02em; } .rd-split__count { font-family: var(--font-mono); font-size: var(--rd-micro); font-variant-numeric: tabular-nums; color: var(--rd-ink-45); } .rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .rd-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--rd-small); line-height: 1.5; color: var(--rd-ink-70); } .rd-list li::before { content: ""; width: 7px; height: 7px; margin-top: 0.5em; flex: none; } /* La máquina es cuadrada y alineada; la persona es redonda. */ .rd-list--auto li::before { background: var(--rd-auto); border-radius: 1px; } .rd-list--human li::before { background: var(--rd-human); border-radius: 50%; } .rd-split__note { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rd-line); font-family: var(--font-mono); /* Era micro en la tinta más tenue (45 %) y sobre el fondo oscuro de la sección no se leía. Es una frase entera y además dice algo que importa —cómo usamos la IA—, así que sube a cuerpo pequeño y a la tinta al 70 %, que es la que usan el resto de párrafos de la zona. */ font-size: var(--t-small); line-height: 1.6; color: var(--rd-ink-70); } /* ── El flujo: un carril que cambia de voz ──────────────────── */ .rd-flow { display: grid; gap: 0; } .rd-flow__step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.75rem, 3vw, 2.75rem); } /* El carril vertical, con el color de la voz del paso. */ .rd-flow__rail { position: relative; width: 2px; background: var(--rd-line); justify-self: center; } .rd-flow__step:first-child .rd-flow__rail { margin-top: 1.4rem; } .rd-flow__step:last-child .rd-flow__rail { margin-bottom: calc(100% - 1.4rem); } .rd-flow__dot { position: absolute; top: 1.1rem; left: 50%; translate: -50% 0; width: 13px; height: 13px; background: var(--rd-paper2); border: 2px solid var(--rd-ink-45); } .rd-flow__step[data-vox="auto"] .rd-flow__rail { background: color-mix(in srgb, var(--rd-auto) 40%, var(--rd-line)); } .rd-flow__step[data-vox="human"] .rd-flow__rail { background: color-mix(in srgb, var(--rd-human) 40%, var(--rd-line)); } .rd-flow__step[data-vox="auto"] .rd-flow__dot { border-color: var(--rd-auto); border-radius: 2px; } .rd-flow__step[data-vox="human"] .rd-flow__dot { border-color: var(--rd-human); border-radius: 50%; } .rd-flow__body { min-width: 0; padding-top: 0.15rem; } .rd-flow__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; } .rd-flow__n { font-family: var(--font-mono); font-size: var(--rd-micro); font-variant-numeric: tabular-nums; color: var(--rd-ink-45); } .rd-flow__h { margin: 0 0 0.6rem; font-size: var(--rd-h3); font-weight: 400; letter-spacing: -0.02em; color: var(--rd-ink); } .rd-flow__p { margin: 0; max-width: 54ch; font-size: var(--rd-small); line-height: 1.6; color: var(--rd-ink-70); } /* ═══════════════════════════════════════════════════════════════ El relato del episodio ─────────────────────────────────────────────────────────────── Seis pasos iguales se leen como un diagrama, no como una historia. Se agrupan en actos con marca temporal para que se entienda de un vistazo cuánto pones tú y cuánto ponemos nosotros — que es de lo que va la sección. ═══════════════════════════════════════════════════════════════ */ .rd-acto { position: relative; margin-top: clamp(2.75rem, 5vw, 4.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--rd-line); } .rd-acto:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.25rem); } /* Cifra fantasma del acto: rompe la columna de texto sin añadir ruido legible. Se queda detrás y no participa de la lectura. */ .rd-acto__ghost { position: absolute; right: -0.06em; top: clamp(0.5rem, 2vw, 1.25rem); z-index: -1; font-size: clamp(5.5rem, 15vw, 14rem); font-weight: 300; line-height: 0.76; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: var(--rd-ink); opacity: 0.055; pointer-events: none; user-select: none; } /* Variación de composición: los actos pares se desplazan y estrechan, para que la sección no sea una sola columna de arriba abajo. */ @media (min-width: 900px) { .rd-acto:nth-of-type(even) { padding-left: 14%; } .rd-acto:nth-of-type(even) .rd-acto__ghost { right: auto; left: 0; } .rd-acto:nth-of-type(even) .rd-acto__p { max-width: 52ch; } } /* ── Lincos: la capa que solo aparece si la buscas ─────────── Anotaciones en el protocolo de Freudenthal junto a cada acto. No se leen de corrido: emergen al acercarse y se vuelven a ir. */ .lincos-nota { display: inline-block; margin-left: 0.8rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.12em; white-space: nowrap; color: var(--rd-auto); opacity: 0; transform: translateX(-4px); transition: opacity 0.55s ease, transform 0.55s ease; } .rd-acto:hover .lincos-nota, .rd-acto:focus-within .lincos-nota { opacity: 0.6; transform: none; } @media (hover: none) { .lincos-nota { opacity: 0.32; transform: none; } } .rd-acto__marca { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-auto-t); } .rd-acto__marca::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.32; } .rd-acto__t { margin: 0 0 0.75rem; font-size: var(--rd-h3); font-weight: 300; line-height: 1.12; letter-spacing: -0.024em; text-wrap: balance; color: var(--rd-ink); } .rd-acto__t em { font-style: normal; color: var(--rd-auto-t); } .rd-acto__t i { font-style: normal; color: var(--rd-human-t); } .rd-acto__p { margin: 0; max-width: 58ch; font-size: var(--rd-body); line-height: 1.6; color: var(--rd-ink-70); } /* El rendimiento de un episodio: un origen que se abre en muchas salidas. En pantalla ancha el origen queda a la izquierda y las seis salidas a la derecha, para que el despliegue se lea como lo que es. */ .rd-rinde { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden; background: var(--rd-m-paper2); } .rd-rinde__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.5rem); border-bottom: 1px solid var(--rd-line); } .rd-rinde__marca { margin: 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-auto-t); } .rd-rinde__nota { margin: 0; font-size: var(--rd-micro); color: var(--rd-ink-45); } .rd-rinde__cuerpo { display: grid; grid-template-columns: 1fr; } @media (min-width: 880px) { .rd-rinde__cuerpo { grid-template-columns: minmax(200px, 0.85fr) 1.7fr; } } .rd-rinde__origen { position: relative; padding: clamp(1.25rem, 2.6vw, 1.9rem); border-bottom: 1px solid var(--rd-line); background: color-mix(in srgb, var(--rd-auto) 7%, transparent); } @media (min-width: 880px) { .rd-rinde__origen { border-bottom: 0; border-right: 1px solid var(--rd-line); } } .rd-rinde__origen p { margin: 0.7rem 0 0; font-size: var(--rd-small); line-height: 1.55; color: var(--rd-ink-70); } /* Las seis salidas: tres columnas, dos filas exactas. */ .rd-rinde__salidas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rd-line); } @media (min-width: 600px) { .rd-rinde__salidas { grid-template-columns: repeat(3, 1fr); } } .rd-rinde__s { padding: clamp(0.9rem, 2vw, 1.3rem); background: var(--rd-m-paper2); } .rd-rinde__pie { padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1rem, 2.2vw, 1.5rem); border-top: 1px solid var(--rd-line); } .rd-rinde__pie .rd-canales { margin-top: 0; } .rd-mult__n { display: block; font-size: var(--rd-cifra); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; color: var(--rd-ink); } .rd-mult__l { display: block; margin-top: 0.45rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.06em; color: var(--rd-ink-45); } /* Cierre: el plan, ya montado y visible */ .rd-canales { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; } .rd-canales span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1px solid color-mix(in srgb, var(--rd-auto) 32%, transparent); border-radius: 100px; font-family: var(--font-mono); font-size: var(--rd-micro); color: var(--rd-ink-70); white-space: nowrap; } .rd-canales span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-auto); flex: none; } /* ── Marca de área ─────────────────────────────────────────── El sistema simbólico del manual: un signo por área, delante del antetítulo de su sección. No sustituye al texto —va al lado, no en su lugar—, así que quien no conozca el sistema lee igual. El title lleva la definición para quien se pare encima. Disciplinas se queda sin marca a propósito: ninguna de las definiciones del manual le corresponde. */ .rd-marca { display: inline-block; margin-right: 0.7rem; padding-right: 0.7rem; border-right: 1px solid var(--rd-line); font-family: var(--font-mono); letter-spacing: 0; color: var(--rd-auto-t); cursor: help; } /* En la sección de contacto, que es zona clara, la etiqueta usa los tokens antiguos y no los de zona. */ .section-label .rd-marca { border-right-color: var(--ink-15); color: var(--ink-70); } /* ── Kit de interfaz: el producto, a tamaño real ────────────── */ .rd-ui { border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); background: var(--rd-paper2); overflow: hidden; font-size: var(--rd-small); box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 18px 46px -22px rgba(0,0,0,0.5); } .rd-ui__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rd-line); background: color-mix(in srgb, var(--rd-ink) 4%, transparent); } .rd-ui__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rd-line); flex: none; } .rd-ui__name { margin-left: 0.4rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.06em; color: var(--rd-ink-45); } .rd-ui__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-auto-t); } .rd-ui__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rd-pulse 2.4s ease-in-out infinite; } .rd-ui__body { padding: clamp(0.9rem, 2vw, 1.35rem); } /* Calendario editorial */ .rd-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .rd-cal__dow { padding-bottom: 0.5rem; font-family: var(--font-mono); font-size: var(--rd-micro); text-align: center; color: var(--rd-ink-45); } .rd-cal__day { min-height: 62px; padding: 5px; border: 1px solid var(--rd-line); border-radius: var(--rd-r); display: flex; flex-direction: column; gap: 3px; } .rd-cal__day--out { opacity: 0.3; } .rd-cal__n { font-family: var(--font-mono); font-size: var(--rd-micro); font-variant-numeric: tabular-nums; color: var(--rd-ink-45); } .rd-chip { display: block; padding: 2px 5px; border-radius: 3px; font-size: var(--rd-micro); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid; } .rd-chip--auto { background: color-mix(in srgb, var(--rd-auto) 14%, transparent); border-color: var(--rd-auto); color: var(--rd-auto-t); } .rd-chip--human { background: color-mix(in srgb, var(--rd-human) 16%, transparent); border-color: var(--rd-human); color: var(--rd-human-t); } /* Fila de validación */ .rd-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--rd-line); } .rd-row:last-child { border-bottom: 0; } .rd-row__t { margin: 0 0 0.2rem; font-size: var(--rd-small); color: var(--rd-ink); } .rd-row__m { margin: 0; font-family: var(--font-mono); font-size: var(--rd-micro); color: var(--rd-ink-45); } .rd-row__actions { display: flex; gap: 0.4rem; flex: none; } .rd-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: transparent; color: var(--rd-ink-70); font-family: var(--font-mono); font-size: var(--rd-micro); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .rd-btn--go { color: var(--rd-human-t); border-color: color-mix(in srgb, var(--rd-human) 45%, transparent); } .rd-btn:hover, .rd-btn:focus-visible { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); } /* Traducción */ .rd-lang { display: grid; gap: 0.6rem; } .rd-lang__item { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 0.85rem; align-items: center; padding: 0.6rem 0.7rem; border: 1px solid var(--rd-line); border-radius: var(--rd-r); } .rd-lang__code { font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.08em; color: var(--rd-ink-45); } .rd-lang__txt { min-width: 0; font-size: var(--rd-small); color: var(--rd-ink-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-state { font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.06em; white-space: nowrap; } .rd-state--auto { color: var(--rd-auto-t); } .rd-state--human { color: var(--rd-human-t); } /* Informe de impacto */ /* Cuatro fijas: son cuatro cifras y así ninguna se queda sola en una fila. */ .rd-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rd-line); } @media (min-width: 560px) { .rd-kpis { grid-template-columns: repeat(4, 1fr); } } .rd-kpi { padding: 1rem 0.9rem; background: var(--rd-paper2); } .rd-kpi__n { display: block; font-size: var(--rd-cifra); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--rd-ink); } .rd-kpi__l { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--rd-micro); color: var(--rd-ink-45); } /* ── Rejillas de contenido ──────────────────────────────────── */ /* Tres columnas fijas, no auto-fit: las rejillas que alimenta tienen 6 y 3 tarjetas, y con tres por fila ambas quedan completas. Con auto-fit salían cuatro arriba y dos estiradas debajo. */ .rd-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; } @media (min-width: 620px) { .rd-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .rd-grid { grid-template-columns: repeat(3, 1fr); } } .rd-card { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.25rem, 2.4vw, 1.9rem); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); background: color-mix(in srgb, var(--rd-ink) 3%, transparent); } .rd-card__n { font-family: var(--font-mono); font-size: var(--rd-micro); font-variant-numeric: tabular-nums; color: var(--rd-ink-45); } .rd-card__h { margin: 0; font-size: var(--rd-h3); font-weight: 400; letter-spacing: -0.02em; } .rd-card__p { margin: 0; font-size: var(--rd-small); line-height: 1.6; color: var(--rd-ink-70); } /* Dos columnas: texto + producto */ .rd-duo { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 960px) { .rd-duo { grid-template-columns: 0.85fr 1.15fr; } .rd-duo--flip > :first-child { order: 2; } } /* Tira de disciplinas */ .rd-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; } .rd-strip a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border: 1px solid var(--rd-line); border-radius: 100px; font-size: var(--rd-small); color: var(--rd-ink-70); text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .rd-strip a:hover, .rd-strip a:focus-visible { color: var(--rd-ink); border-color: var(--rd-ink-45); background: color-mix(in srgb, var(--rd-ink) 5%, transparent); } /* ═══════════════════════════════════════════════════════════════ Pasos — rejilla compacta ─────────────────────────────────────────────────────────────── Sustituye al carril vertical con párrafos. Cada paso se reduce a lo que hay que saber: quién lo hace y qué es. Sin prosa, seis celdas que se abarcan de un vistazo. ═══════════════════════════════════════════════════════════════ */ .rd-pasos { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: clamp(2rem, 4vw, 3.25rem); background: var(--rd-line); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden; } @media (min-width: 620px) { .rd-pasos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .rd-pasos { grid-template-columns: repeat(3, 1fr); } } .rd-paso { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.75rem); padding: clamp(1.35rem, 2.8vw, 2rem); background: var(--rd-m-paper2); transition: background 0.4s ease; } .rd-paso:hover { background: color-mix(in srgb, var(--rd-ink) 5%, var(--rd-m-paper2)); } .rd-paso__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } /* La cifra manda en la jerarquía de la celda */ .rd-paso__n { font-family: var(--font-mono); font-size: var(--rd-cifra); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--rd-ink-45); } .rd-paso[data-vox="auto"] .rd-paso__n { color: color-mix(in srgb, var(--rd-auto) 65%, transparent); } .rd-paso[data-vox="human"] .rd-paso__n { color: color-mix(in srgb, var(--rd-human) 65%, transparent); } .rd-paso__h { margin: 0; font-size: var(--rd-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; color: var(--rd-ink); } /* Cierre de la sección: el resultado, sin párrafo */ .rd-resultado { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); } .rd-resultado__t { margin: 0 0 1.25rem; max-width: 24ch; font-size: var(--t-2); font-weight: 300; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; color: var(--rd-ink); } .rd-resultado__t em { font-style: normal; color: var(--rd-auto-t); } /* ═══════════════════════════════════════════════════════════════ Llamada a la acción ─────────────────────────────────────────────────────────────── Cierra cada sección. Antes la página iba del hero al formulario sin un solo punto de contacto por el camino. ═══════════════════════════════════════════════════════════════ */ .rd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3.2vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--rd-auto) 30%, transparent); border-radius: var(--rd-r-lg); background: color-mix(in srgb, var(--rd-auto) 6%, transparent); } .rd-cta__t { margin: 0; flex: 1 1 22ch; font-size: var(--rd-h3); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; color: var(--rd-ink); } .rd-cta__t em { font-style: normal; color: var(--rd-auto-t); } .rd-cta .btn { flex: none; } /* En zona oscura el botón claro destaca; se le da el acento de la casa */ .rd--dark .rd-cta .btn { border-color: var(--rd-auto); background: var(--rd-auto); color: #07110D; } .rd--dark .rd-cta .btn::before { background: #07110D; } .rd--dark .rd-cta .btn:hover, .rd--dark .rd-cta .btn:focus-visible { color: var(--rd-auto); } /* ═══════════════════════════════════════════════════════════════ Visor del flujo — el producto real, en movimiento ─────────────────────────────────────────────────────────────── Cuatro capturas de la aplicación encadenadas en el orden en que ocurre el trabajo: se crea el episodio, se derivan las piezas, se validan y se publican. Es el argumento entero de la web contado sin una sola palabra de más. ═══════════════════════════════════════════════════════════════ */ .app-flow { width: 100%; } /* En el hero manda el producto: el visor va primero y a tamaño completo, y la foto del estudio queda debajo, reducida a una franja. Antes la aplicación era una ventanita recortada sobre la imagen y apenas se distinguía, que era justo lo contrario de lo que la web vende. */ .hero__visual { display: flex; flex-direction: column; gap: clamp(0.85rem, 2vw, 1.25rem); } .hero__visual .app-flow { order: -1; margin: 0; } .hero__visual .hero__photo-wrap { aspect-ratio: 16 / 7; } .app-flow__device { position: relative; border: 1px solid rgba(25,22,18,0.16); border-radius: 10px; overflow: hidden; background: #0B0D10; box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 28px 60px -28px rgba(0,0,0,0.42); } .app-flow__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; background: #16191E; border-bottom: 1px solid rgba(255,255,255,0.08); } .app-flow__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); flex: none; } .app-flow__addr { margin-left: 0.5rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.04em; color: rgba(255,255,255,0.38); } .app-flow__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-auto); } .app-flow__live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: rd-pulse 2.4s ease-in-out infinite; } /* Las pantallas se apilan y solo una está encendida */ .app-flow__screens { position: relative; aspect-ratio: 16 / 10; background: #0B0D10; } .app-flow__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.015); transition: opacity 0.7s var(--ease-out, ease), transform 1.4s var(--ease-out, ease); } .app-flow__screen.is-on { opacity: 1; transform: none; } /* Pasos del flujo, debajo del visor */ .app-flow__pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.85rem 0 0; padding: 0; list-style: none; } .app-flow__paso { position: relative; padding-top: 0.6rem; border-top: 2px solid rgba(25,22,18,0.12); font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: rgba(25,22,18,0.38); transition: color 0.45s ease; } /* La barra del paso activo se llena al ritmo del ciclo */ .app-flow__paso::after { content: ""; position: absolute; left: 0; right: 100%; top: -2px; height: 2px; background: var(--rd-auto); transition: right 0s; } .app-flow__paso.is-on { color: rgba(25,22,18,0.82); } .app-flow__paso.is-on::after { right: 0; transition: right 3.4s linear; } .app-flow__paso.is-hecho::after { right: 0; transition: right 0.3s ease; } @media (prefers-reduced-motion: reduce) { .app-flow__screen { transition: opacity 0.2s ease; transform: none; } .app-flow__paso::after { transition: none; } .app-flow__live::before { animation: none; } } /* ═══════════════════════════════════════════════════════════════ Fotografía ─────────────────────────────────────────────────────────────── Las imágenes no entran crudas: pasan por el mismo tratamiento que el resto de la página — desaturadas, con líneas de barrido y un velo frío encima — para que parezcan señal recibida y no stock pegado. Al pasar el cursor recuperan color y se acercan. */ .rd-fig { position: relative; overflow: hidden; border-radius: var(--rd-r-lg); border: 1px solid var(--rd-line); background: var(--rd-m-paper); isolation: isolate; } .rd-fig img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.88) contrast(1.1) brightness(0.78); transform: scale(1.03); transition: filter 0.75s var(--ease-out, ease), transform 1s var(--ease-out, ease); } /* Barrido CRT + caída a negro por abajo, para que el texto encima siempre tenga dónde apoyarse. */ .rd-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.20) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(to top, rgba(7,8,10,0.82) 0%, rgba(7,8,10,0.12) 52%, rgba(7,8,10,0) 100%); } /* Tinte de señal: un punto de menta, como el resto del sistema. */ .rd-fig::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(140deg, color-mix(in srgb, var(--rd-auto) 14%, transparent), transparent 58%); opacity: 0.75; transition: opacity 0.75s ease; } .rd-fig:hover img, .rd-fig:focus-within img { filter: grayscale(0.12) contrast(1.04) brightness(0.98); transform: scale(1.08); } .rd-fig:hover::before { opacity: 0.25; } .rd-fig--4x3 { aspect-ratio: 4 / 3; } .rd-fig--3x2 { aspect-ratio: 3 / 2; } .rd-fig--1x1 { aspect-ratio: 1 / 1; } /* ── Banda a sangre: el momento de escala de la página ─────── */ .rd-banda { position: relative; min-height: min(78vh, 680px); display: flex; align-items: flex-end; padding: 0; overflow: hidden; } .rd-banda .rd-fig { position: absolute; inset: 0; border: 0; border-radius: 0; z-index: 0; } .rd-banda .rd-fig img { filter: grayscale(0.82) contrast(1.12) brightness(0.62); } .rd-banda__texto { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin-inline: auto; padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem); } .rd-banda__texto .rd__title { max-width: 18ch; } .rd-banda__texto .rd__lead { max-width: 52ch; } /* ── Tarjeta de disciplina: imagen con la etiqueta encima ──── */ .rd-disc { position: relative; display: block; text-decoration: none; border-radius: var(--rd-r-lg); overflow: hidden; } .rd-disc .rd-fig { border-radius: var(--rd-r-lg); aspect-ratio: 5 / 4; } .rd-disc__nombre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(0.9rem, 2vw, 1.25rem); font-size: var(--rd-small); line-height: 1.3; color: #F2F5F8; text-wrap: balance; } .rd-disc__ver { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-auto); opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; } .rd-disc:hover .rd-disc__ver, .rd-disc:focus-visible .rd-disc__ver { opacity: 1; transform: none; } .rd-disc:focus-visible { outline: 2px solid var(--rd-auto); outline-offset: 3px; } /* ── Carril horizontal ────────────────────────────────────────── Siete disciplinas en rejilla ocupaban media pantalla de alto para decir una lista de nombres. En carril ocupan una banda, se recorren de lado y el corte del borde derecho ya avisa de que hay más. */ /* ── Pista horizontal ─────────────────────────────────────────── El scroll vertical de la página mueve la banda en horizontal. No se intercepta la rueda: se usa un contenedor alto con la banda pegada dentro, así que el scroll sigue siendo nativo y funciona igual con rueda, trackpad, teclado o dedo. Bajar va a la derecha, subir a la izquierda, y al terminar la página continúa sola. */ .rd-pista { position: relative; } .rd-pista__fija { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 2vw, 1.75rem); overflow: hidden; /* rompe el padding del wrap para llegar al borde de la ventana */ margin-inline: calc(clamp(1.25rem, 4vw, 3rem) * -1); } .rd-carril { display: flex; /* Sin esto, flex estira cada tarjeta a la altura de la más alta del carril (era el marco del clip vertical, 361px) aunque su propio contenido —el vídeo, por ejemplo— midiera menos de la mitad: quedaba hueco en blanco por debajo. Con flex-start cada una mide lo suyo. */ align-items: flex-start; gap: clamp(0.85rem, 1.6vw, 1.25rem); padding-inline: clamp(1.25rem, 4vw, 3rem); width: max-content; will-change: transform; } .rd-carril > * { flex: 0 0 auto; width: 300px; } @media (min-width: 900px) { .rd-carril > * { width: 350px; } } @media (min-width: 1500px) { .rd-carril > * { width: 410px; } } .rd-carril .rd-disc .rd-fig { aspect-ratio: 4 / 5; } /* La imagen es más ancha que su marco y se desplaza al avanzar la pista */ .rd-carril .rd-fig img { width: 118%; transform: translate3d(var(--par, 0%), 0, 0) scale(1.03); transition: filter 0.75s var(--rd-ease); } .rd-carril .rd-disc:hover .rd-fig img { transform: translate3d(var(--par, 0%), 0, 0) scale(1.09); } .rd-pista__pie { padding-inline: clamp(1.25rem, 4vw, 3rem); } .rd-carril-barra { position: relative; height: 2px; background: var(--rd-line); border-radius: 2px; overflow: hidden; } .rd-carril-barra__fill { position: absolute; inset: 0 auto 0 0; width: var(--ancho, 25%); transform: translateX(var(--pos, 0%)); background: var(--rd-auto); border-radius: 2px; } .rd-carril-pista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-ink-45); } .rd-carril-pista__hint { display: inline-flex; align-items: center; gap: 0.5rem; } .rd-carril-pista__hint::after { content: "↓"; animation: rd-empuja 2.2s ease-in-out infinite; } @keyframes rd-empuja { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } } /* En móvil y sin movimiento: banda normal que se desliza con el dedo. La pista pegada se desactiva porque en táctil resulta incómoda. */ @media (max-width: 899px), (prefers-reduced-motion: reduce) { .rd-pista { height: auto !important; } .rd-pista__fija { position: static; height: auto; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .rd-pista__fija::-webkit-scrollbar { display: none; } .rd-carril { transform: none !important; } .rd-carril .rd-fig img { transform: none; width: 100%; } .rd-carril-pista__hint::after { content: "→"; animation: none; } .rd-pista__pie { margin-top: 1rem; } } /* ═══════════════════════════════════════════════════════════════ Ficha de proyecto ─────────────────────────────────────────────────────────────── Sin fotografía: una foto de stock de un ciervo no prueba nada. Aquí manda el dato — institución, ámbito, entregables y la cifra que resume el encargo. ═══════════════════════════════════════════════════════════════ */ .rd-ficha { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); background: color-mix(in srgb, var(--rd-ink) 3%, transparent); transition: border-color 0.4s ease, background 0.4s ease; } .rd-ficha:hover { border-color: color-mix(in srgb, var(--rd-auto) 40%, transparent); background: color-mix(in srgb, var(--rd-ink) 5%, transparent); } .rd-ficha__n { margin: 0; font-size: var(--rd-h3); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--rd-ink); } .rd-ficha__org { margin: 0.45rem 0 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.08em; color: var(--rd-auto-t); } .rd-ficha__campo { margin: 0.3rem 0 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.04em; color: var(--rd-ink-45); } .rd-ficha__lista { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; border-top: 1px solid var(--rd-line); list-style: none; display: grid; gap: 0.6rem; flex: 1; } .rd-ficha__lista li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--rd-small); line-height: 1.45; color: var(--rd-ink-70); } .rd-ficha__lista li::before { content: ""; width: 6px; height: 6px; margin-top: 0.52em; border-radius: 1px; background: var(--rd-auto); flex: none; } /* La cifra que resume el encargo, abajo y con peso */ .rd-ficha__dato { display: flex; align-items: baseline; gap: 0.5rem; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding-top: clamp(1rem, 2vw, 1.35rem); border-top: 1px solid var(--rd-line); } .rd-ficha__dato b { font-size: var(--rd-cifra); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; color: var(--rd-ink); } .rd-ficha__dato span { font-family: var(--font-mono); font-size: var(--rd-micro); color: var(--rd-ink-45); } /* ── Proyectos: tarjeta con foto, cifra destacada y canales ────────── Se monta sobre .rd-ficha para conservar el reveal de scroll, pero anula su relleno: aquí el padding lo pone el cuerpo, porque la foto tiene que llegar hasta el borde. */ .rd-proy { padding: 0; overflow: hidden; background: color-mix(in srgb, var(--rd-ink) 4%, transparent); transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s var(--rd-ease); } .rd-proy:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rd-auto) 55%, transparent); } .rd-proy__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--rd-ink) 8%, transparent); } .rd-proy__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.55) contrast(1.02) brightness(1.06); transition: transform 0.7s var(--rd-ease), filter 0.5s ease; } .rd-proy:hover .rd-proy__media img { transform: scale(1.05); filter: grayscale(0) contrast(1) brightness(1.1); } .rd-proy__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.35rem, 2.6vw, 1.9rem); } .rd-proy__n { margin: 0; font-size: var(--rd-h3); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--rd-ink); } .rd-proy__org { margin: 0.45rem 0 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.08em; color: var(--rd-auto-t); } .rd-proy__campo { margin: 0.3rem 0 0; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.04em; color: var(--rd-ink-45); } /* Los canales como etiquetas: se escanean mejor que una lista */ .rd-proy__chips { margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0; padding: clamp(1.1rem, 2.2vw, 1.5rem) 0 0; border-top: 1px solid var(--rd-line); list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; align-content: flex-start; } .rd-proy__chips li { font-size: var(--rd-micro); line-height: 1.3; padding: 0.34em 0.7em; border-radius: 100px; border: 1px solid var(--rd-line); background: color-mix(in srgb, var(--rd-ink) 4%, transparent); color: var(--rd-ink-70); transition: border-color 0.4s ease, color 0.4s ease; } .rd-proy:hover .rd-proy__chips li { border-color: color-mix(in srgb, var(--rd-auto) 28%, transparent); color: var(--rd-ink); } @media (prefers-reduced-motion: reduce) { .rd-proy, .rd-proy__media img { transition: none; } .rd-proy:hover { transform: none; } .rd-proy:hover .rd-proy__media img { transform: none; } } /* ── Tarjeta de proyecto con foto ───────────────────────────── */ /* Anula el relleno y el borde de .rd-card: aquí los pone el cuerpo, para que la foto llegue a ras del canto en vez de quedar embutida dentro. */ .rd-caso { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; background: none; } .rd-caso .rd-fig { border-radius: var(--rd-r-lg) var(--rd-r-lg) 0 0; border-bottom: 0; aspect-ratio: 16 / 10; } .rd-caso__cuerpo { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; padding: clamp(1.25rem, 2.4vw, 1.75rem); border: 1px solid var(--rd-line); border-top: 0; border-radius: 0 0 var(--rd-r-lg) var(--rd-r-lg); background: color-mix(in srgb, var(--rd-ink) 3%, transparent); } /* ═══════════════════════════════════════════════════════════════ Movimiento del relato ─────────────────────────────────────────────────────────────── La señal recorre la sección: el carril de cada paso se dibuja al entrar en pantalla y las salidas del episodio aparecen una tras otra, no de golpe. Todo parte de un estado ya visible, así que sin JS la página se lee igual. ═══════════════════════════════════════════════════════════════ */ /* El carril base queda tenue y el color de la voz lo rellena al llegar */ .rd-flow__step .rd-flow__rail { background: var(--rd-line); } .rd-flow__rail::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; background: currentColor; transform-origin: top; } .rd-flow__step[data-vox="auto"] .rd-flow__rail { color: var(--rd-auto); } .rd-flow__step[data-vox="human"] .rd-flow__rail { color: var(--rd-human); } .rd-flow__step.rd-in .rd-flow__rail::after { animation: rd-carril 0.95s var(--ease-out, cubic-bezier(0.22,1,0.36,1)) both; } @keyframes rd-carril { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* El punto late una vez cuando la señal lo alcanza */ .rd-flow__step.rd-in .rd-flow__dot { animation: rd-punto 0.7s var(--ease-out, ease) 0.55s both; } @keyframes rd-punto { 0% { transform: translate(-50%, 0) scale(1); box-shadow: 0 0 0 0 currentColor; } 45% { transform: translate(-50%, 0) scale(1.5); box-shadow: 0 0 0 7px transparent; } 100% { transform: translate(-50%, 0) scale(1); box-shadow: 0 0 0 0 transparent; } } /* Las seis celdas de paso entran escalonadas */ .rd-paso.rd-in { animation: rd-salida 0.6s var(--ease-out, ease) both; } .rd-pasos .rd-paso:nth-child(2).rd-in { animation-delay: 0.07s; } .rd-pasos .rd-paso:nth-child(3).rd-in { animation-delay: 0.14s; } .rd-pasos .rd-paso:nth-child(4).rd-in { animation-delay: 0.21s; } .rd-pasos .rd-paso:nth-child(5).rd-in { animation-delay: 0.28s; } .rd-pasos .rd-paso:nth-child(6).rd-in { animation-delay: 0.35s; } /* Salidas del episodio: entran en cascada, no todas a la vez */ .rd-rinde.rd-in .rd-rinde__s { animation: rd-salida 0.62s var(--ease-out, ease) both; } .rd-rinde.rd-in .rd-rinde__s:nth-child(1) { animation-delay: 0.10s; } .rd-rinde.rd-in .rd-rinde__s:nth-child(2) { animation-delay: 0.19s; } .rd-rinde.rd-in .rd-rinde__s:nth-child(3) { animation-delay: 0.28s; } .rd-rinde.rd-in .rd-rinde__s:nth-child(4) { animation-delay: 0.37s; } .rd-rinde.rd-in .rd-rinde__s:nth-child(5) { animation-delay: 0.46s; } .rd-rinde.rd-in .rd-rinde__s:nth-child(6) { animation-delay: 0.55s; } @keyframes rd-salida { from { opacity: 0.25; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Los canales del cierre se encienden uno a uno, como un panel al arrancar */ .rd-canales span { transition: border-color 0.4s ease, color 0.4s ease; } .rd-in .rd-canales span { animation: rd-enciende 0.5s var(--ease-out, ease) both; } .rd-in .rd-canales span:nth-child(1) { animation-delay: 0.06s; } .rd-in .rd-canales span:nth-child(2) { animation-delay: 0.14s; } .rd-in .rd-canales span:nth-child(3) { animation-delay: 0.22s; } .rd-in .rd-canales span:nth-child(4) { animation-delay: 0.30s; } .rd-in .rd-canales span:nth-child(5) { animation-delay: 0.38s; } .rd-in .rd-canales span:nth-child(6) { animation-delay: 0.46s; } .rd-in .rd-canales span:nth-child(7) { animation-delay: 0.54s; } .rd-in .rd-canales span:nth-child(8) { animation-delay: 0.62s; } .rd-in .rd-canales span:nth-child(9) { animation-delay: 0.70s; } @keyframes rd-enciende { from { opacity: 0.2; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* La cifra fantasma entra a destiempo del texto */ .rd-acto.rd-in .rd-acto__ghost { animation: rd-fantasma 1.4s var(--ease-out, ease) 0.15s both; } @keyframes rd-fantasma { from { opacity: 0; transform: translateY(26px); } to { opacity: 0.055; transform: none; } } @media (prefers-reduced-motion: reduce) { .rd-flow__step.rd-in .rd-flow__rail::after, .rd-flow__step.rd-in .rd-flow__dot, .rd-rinde.rd-in .rd-rinde__s, .rd-in .rd-canales span, .rd-acto.rd-in .rd-acto__ghost { animation: none; } } /* ═══════════════════════════════════════════════════════════════ Capa de movimiento ─────────────────────────────────────────────────────────────── Una sola gramática para toda la página: el texto se descubre de arriba abajo tras una máscara, los elementos suben poco y todo se posa con la misma curva. Nada rebota, nada gira. Regla firme: el reposo ya es el estado visible. Si el observador no dispara, la página se lee igual. ═══════════════════════════════════════════════════════════════ */ /* El texto no se anima: antetítulos, titulares y entradillas se leen desde el primer fotograma. Entraban escalonados tras una máscara y, con el resto de la página en movimiento —fondo, cifras, fichas, imágenes—, lo único que hacía era retrasar la lectura. Lo que se mueve ahora son los elementos, no las palabras. */ @keyframes rd-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Fichas de proyecto: suben una tras otra */ .rd-ficha.rd-in { animation: rd-sube 0.85s var(--rd-ease) both; } .rd-grid .rd-ficha:nth-child(2).rd-in { animation-delay: 0.1s; } .rd-grid .rd-ficha:nth-child(3).rd-in { animation-delay: 0.2s; } /* Las imágenes se posan: entran algo más grandes y se asientan */ .rd-fig img { animation: rd-posa 1.6s var(--rd-ease) both; } @keyframes rd-posa { from { transform: scale(1.1); } to { transform: scale(1.03); } } /* El carril tiene su propio parallax, así que no se le aplica */ .rd-carril .rd-fig img { animation: none; } /* ═══════════════════════════════════════════════════════════════ Lincos — la tira de transmisión ─────────────────────────────────────────────────────────────── Entre secciones pasa una línea con fragmentos del protocolo de Freudenthal y de los mensajes reales enviados al espacio. Va muy tenue: se lee si te paras, y si no, es textura. ═══════════════════════════════════════════════════════════════ */ .lincos-tira { position: relative; z-index: 10; overflow: hidden; padding-block: 0.9rem; border-block: 1px solid var(--rd-m-line); background: color-mix(in srgb, var(--rd-m-paper) 55%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .lincos-tira__pista { display: flex; width: max-content; gap: 3.5rem; padding-left: 3.5rem; animation: lincos-corre 64s linear infinite; } .lincos-tira:hover .lincos-tira__pista { animation-play-state: paused; } .lincos-tira span { font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.16em; white-space: nowrap; color: color-mix(in srgb, var(--rd-auto) 64%, transparent); /* 64 %: 5:1 sobre el fondo de la tira */ } /* La mitad es una copia exacta, así que al llegar al 50% reengancha */ @keyframes lincos-corre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .rd__head.rd-in .rd__eyebrow, .rd__head.rd-in .rd__title, .rd__head.rd-in .rd__lead, .rd-resultado.rd-in .rd-resultado__t, .rd-cta.rd-in .rd-cta__t, .rd-cta.rd-in .btn, .rd-ficha.rd-in, .rd-fig img { animation: none; } .lincos-tira__pista { animation: none; } } /* ── Movimiento ─────────────────────────────────────────────── */ /* Regla: el estado en reposo ya es el estado visible. La animación solo la refina. Si el observador nunca dispara, la página se lee. */ .rd-in { animation: rd-in 0.7s var(--ease-out, cubic-bezier(0.22,1,0.36,1)) both; } @keyframes rd-in { from { opacity: 0.45; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rd-in { animation: none; } .rd-tag--auto::before, .rd-ui__live::before, .rd-split__seam::after { animation: none; } .rd-split__seam::after { display: none; } } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 640px) { /* Siete columnas no caben a 375px y el fin de semana se salía del panel. Se ocultan sábado y domingo —las dos últimas celdas de cada grupo de siete, cabecera incluida—, que es justo donde no hay publicaciones. */ .rd-cal { grid-template-columns: repeat(5, 1fr); gap: 2px; } .rd-cal > :nth-child(7n+6), .rd-cal > :nth-child(7n) { display: none; } .rd-cal__day { min-height: 44px; padding: 3px; } .rd-chip { font-size: var(--rd-micro); padding: 1px 3px; } .rd-row { grid-template-columns: 1fr; } .rd-row__actions { justify-content: flex-start; } .rd-lang__item { grid-template-columns: 2.25rem 1fr; } .rd-lang__item .rd-state { grid-column: 2; } } /* ═══════════════════════════════════════════════════════════════ Puente con el CSS anterior ─────────────────────────────────────────────────────────────── El hero, el formulario y el pie siguen sirviéndose de los tokens originales. Antes se los reescribía el lienzo fotograma a fotograma; ahora se fijan aquí, de una vez, contra la paleta persona. El pie cierra en oscuro para que la página termine en el mismo espacio profundo por el que ha pasado. ═══════════════════════════════════════════════════════════════ */ :root { --paper: var(--rd-h-paper); --ink: var(--rd-h-ink); --ink-70: var(--rd-h-ink-70); --ink-40: var(--rd-h-ink-45); --ink-15: var(--rd-h-line); --ink-06: rgba(25,22,18,0.06); --veil: rgba(244,241,233,0.92); --logo-filter: none; } /* El hero va transparente para que se vea el lienzo entero: ahí la atmósfera se pinta en crema y con la rejilla puesta, que es lo que le daba textura. El formulario sí lleva velo, porque hay que leerlo. */ #inicio { background: transparent; } #contacto { background: var(--veil); } #footer { background: var(--rd-m-paper); color: var(--rd-m-ink); border-top-color: var(--rd-m-line); } #footer a { color: var(--rd-m-ink-70); } #footer a:hover, #footer a:focus-visible { color: var(--rd-m-ink); } #footer .footer__brand-name { color: var(--rd-m-ink); } /* Los títulos de columna usaban --ink-40, la tinta oscura de las zonas claras: sobre el fondo oscuro del pie no se veían. */ #footer .footer__col h2, #footer .footer__col h4 { color: var(--rd-m-ink-70); } /* El lema y el crédito seguían con esa misma tinta oscura: sobre el pie no se leían (1:1). Van con la terciaria de zona oscura. */ #footer .footer__brand-line, #footer .footer__credit { color: var(--rd-m-ink-45); } #footer img { filter: invert(1) brightness(2); } /* ═══════════════════════════════════════════════════════════════ La plataforma, reconstruida y en uso ─────────────────────────────────────────────────────────────── Réplica en HTML/CSS de la aplicación real, no una captura: así se puede animar el cursor, el clic y el cambio de estado. Cuenta la historia entera — hay piezas esperando, se aprueban, y aparecen colocadas en el calendario. ═══════════════════════════════════════════════════════════════ */ .app { --app-noche: #12141A; --app-papel: #F8F8F6; --app-linea: #E3E2DD; --app-tinta: #1B1B2F; --app-tenue: #8A8A99; --app-indigo:#2E2A6B; --app-ambar: #C9820F; --app-verde: #0E8A5F; /* Los tres de arriba son para rellenos y tintes. Cuando van como TEXTO sobre claro no llegan a 4,5:1, así que el texto usa estas variantes: las dos de color son las que la web ya usa en zona clara. */ --app-tenue-t: #5F5F73; --app-ambar-t: #8A4E08; --app-verde-t: #0C6E52; position: relative; border-radius: 10px; overflow: hidden; background: var(--app-noche); border: 1px solid rgba(25,22,18,0.18); box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 30px 64px -30px rgba(0,0,0,0.45); /* Todo el interior de la demo escala desde este tamaño. */ font-size: clamp(11px, 1.05vw, 15px); line-height: 1.35; user-select: none; } .app__bar { display: flex; align-items: center; gap: 0.4em; padding: 0.7em 0.9em; background: #1B1E25; border-bottom: 1px solid rgba(255,255,255,0.07); } .app__punto { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(255,255,255,0.2); } .app__url { margin-left: 0.5em; font-family: var(--font-mono); font-size: 0.85em; color: rgba(255,255,255,0.52); } .app__cuerpo { display: grid; grid-template-columns: 27% 1fr; min-height: 0; } /* ── Barra lateral ── */ .app__nav { padding: 1.1em 0.9em; background: var(--app-noche); } /* Misma regla que en el pie: el logotipo es Space Mono. */ .app__marca { display: block; margin-bottom: 1.4em; font-family: var(--font-mono); font-size: 1.35em; letter-spacing: -0.02em; color: #fff; } .app__grupo { margin: 1.2em 0 0.5em; font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.14em; color: rgba(255,255,255,0.52); /* 0.28 no llegaba a 4,5:1 sobre la barra */ } .app__item { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.6em; border-radius: 5px; color: rgba(255,255,255,0.62); transition: background 0.45s var(--rd-ease), color 0.45s var(--rd-ease); } .app__item.is-on { background: rgba(255,255,255,0.10); color: #fff; } .app__badge { margin-left: auto; min-width: 1.6em; padding: 0.1em 0.4em; border-radius: 100px; background: var(--app-ambar); color: #1B1B2F; font-size: 0.82em; text-align: center; font-variant-numeric: tabular-nums; } .app__badge.is-cero { background: var(--app-verde-t); color: #fff; } /* ── Área principal ── */ .app__main { position: relative; background: var(--app-papel); color: var(--app-tinta); } .app__vista { position: absolute; inset: 0; padding: 1.2em 1.3em; opacity: 0; transform: translateY(6px); transition: opacity 0.38s var(--rd-ease), transform 0.5s var(--rd-ease); pointer-events: none; } .app__vista.is-on { opacity: 1; transform: none; } .app__titulo { margin: 0; font-size: 1.45em; font-weight: 500; letter-spacing: -0.02em; } .app__sub { margin: 0.25em 0 1.1em; font-size: 0.92em; color: var(--app-tenue-t); } /* Filas de validación */ .app__fila { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; margin-bottom: 0.5em; border: 1px solid var(--app-linea); border-radius: 7px; background: #fff; transition: border-color 0.5s var(--rd-ease), background 0.5s var(--rd-ease); } .app__fila.is-aprobada { border-color: color-mix(in srgb, var(--app-verde) 45%, transparent); background: color-mix(in srgb, var(--app-verde) 6%, #fff); } .app__tipo { font-family: var(--font-mono); font-size: 0.8em; color: var(--app-verde-t); } .app__nombre { flex: 1; font-size: 0.95em; } .app__estado { padding: 0.22em 0.6em; border-radius: 100px; font-size: 0.8em; white-space: nowrap; background: color-mix(in srgb, var(--app-ambar) 16%, transparent); color: var(--app-ambar-t); transition: background 0.5s var(--rd-ease), color 0.5s var(--rd-ease); } .app__fila.is-aprobada .app__estado { background: color-mix(in srgb, var(--app-verde) 15%, transparent); color: var(--app-verde-t); } .app__boton { padding: 0.3em 0.7em; border-radius: 5px; background: var(--app-indigo); color: #fff; font-size: 0.82em; white-space: nowrap; transition: transform 0.25s var(--rd-ease), filter 0.25s var(--rd-ease); } .app__boton.is-pulsado { transform: scale(0.93); filter: brightness(1.35); } /* Calendario */ .app__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .app__dow { font-family: var(--font-mono); font-size: 0.78em; color: var(--app-tenue-t); text-align: center; padding-bottom: 0.3em; } .app__dia { min-height: 3.2em; padding: 0.25em; border: 1px solid var(--app-linea); border-radius: 4px; background: #fff; } .app__n { font-family: var(--font-mono); font-size: 0.78em; color: var(--app-tenue-t); } .app__chip { display: block; margin-top: 0.18em; padding: 0.12em 0.3em; border-radius: 3px; font-size: 0.74em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-3px); } .app__vista.is-on .app__chip { animation: app-chip 0.5s var(--rd-ease) both; } @keyframes app-chip { to { opacity: 1; transform: none; } } .app__chip--b { background: #E4EBFB; color: #2B4FA8; } .app__chip--v { background: #E1F3EA; color: var(--app-verde-t); } .app__chip--m { background: #EFE7FA; color: #6B3FB5; } /* Cursor simulado */ .app__cursor { position: absolute; top: 0; left: 0; width: 15px; height: 15px; z-index: 5; pointer-events: none; opacity: 0; transform: translate3d(var(--cx, 50%), var(--cy, 50%), 0); transition: transform 0.6s var(--rd-ease), opacity 0.3s ease; } .app__cursor.is-visible { opacity: 1; } .app__cursor::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 62% 90%, 44% 52%, 76% 46%); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } /* Onda del clic */ .app__cursor::after { content: ""; position: absolute; left: -6px; top: -6px; width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--rd-auto); opacity: 0; } .app__cursor.is-clic::after { animation: app-clic 0.4s var(--rd-ease); } @keyframes app-clic { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .app__cursor { display: none; } .app__vista { transition: opacity 0.2s ease; transform: none; } .app__vista.is-on .app__chip { animation: none; opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════ Móvil ─────────────────────────────────────────────────────────────── La réplica de la plataforma es una interfaz de escritorio, y a 375px se descuadraba: la barra lateral se comía el 27% del ancho y el nombre de cada pieza quedaba en una columna de 55px, partido en diez líneas. Aquí se reorganiza en vez de encogerse. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .app { font-size: 13px; } /* Las seis salidas del episodio. En dos columnas estrechas la etiqueta va en mono, que es ancha, y "shorts en vídeo con los mejores momentos" caía en cinco líneas: las celdas quedaban de alturas dispares y la rejilla se leía rota. En vertical pasan a ser una lista —la cifra a la izquierda, la etiqueta al lado— y cada salida ocupa una fila regular. */ .rd-rinde__salidas { grid-template-columns: 1fr; } .rd-rinde__s { display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: 0.85rem; padding: 0.8rem clamp(1rem, 4vw, 1.3rem); } .rd-rinde__s .rd-mult__n { font-size: 1.6rem; } .rd-rinde__s .rd-mult__l { margin-top: 0; letter-spacing: 0.03em; line-height: 1.45; } /* Los saltos manuales están pensados para las columnas anchas del escritorio; aquí solo añadirían huecos. */ .rd-rinde__s .rd-mult__l br { display: none; } /* La barra lateral no cabe en vertical, pero ocultarla del todo dejaba al cursor sin destino al final del ciclo —un elemento sin caja devuelve coordenadas cero y se iba fuera de pantalla—. Pasa a ser una tira de dos pestañas arriba: se conserva el destino y, de paso, se ve el contador bajar, que es lo mejor de la animación. */ .app__cuerpo { grid-template-columns: 1fr; } .app__nav { display: flex; gap: 0.4em; padding: 0.7em 0.8em; border-bottom: 1px solid rgba(255,255,255,0.08); } .app__marca, .app__grupo, .app__item:not([data-nav]) { display: none; } .app__item { flex: 1; justify-content: center; padding: 0.5em 0.4em; font-size: 0.92em; white-space: nowrap; } .app__item .app__badge { margin-left: 0.5em; } /* Las vistas van en position:absolute, así que no dan altura al padre. En escritorio la fila la fijaba la barra lateral, que iba al lado; al pasar a una sola columna, la tira de pestañas y el área principal quedaron en filas distintas y esta última se quedó en 0px — solo se veían la barra y las pestañas. La altura se fija aquí, en em para que acompañe al tamaño base de la réplica. Medido: la vista de validación pide 382px con base de 13px. */ .app__main { min-height: 30em; } .app__vista { padding: 1em 1.1em; } /* Cada fila pasa a dos líneas: el nombre entero arriba, y debajo el canal, el estado y el botón. Así el texto deja de trocearse. */ .app__fila { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nombre nombre" "meta boton"; gap: 0.6em 0.7em; align-items: center; } .app__nombre { grid-area: nombre; font-size: 1em; line-height: 1.3; } .app__tipo { grid-area: meta; justify-self: start; } .app__estado { grid-area: meta; justify-self: end; margin-right: 0.5em; } .app__boton { grid-area: boton; } /* El tipo y el estado comparten celda: se colocan en una fila propia */ .app__fila { grid-template-areas: "nombre nombre" "meta boton"; } .app__tipo, .app__estado { align-self: center; } /* Siete columnas no caben; el fin de semana no lleva publicaciones */ .app__cal { grid-template-columns: repeat(5, 1fr); } .app__cal > :nth-child(7n+6), .app__cal > :nth-child(7n) { display: none; } .app__dia { min-height: 2.6em; } /* Los chips llevan nowrap y a 375px se salían del panel: «Revisión profesional previa a tu validación» medía 461px en un contenedor de 333. Con textos así, la píldora no da: pasan a lista con viñeta, que es la misma información leyéndose de corrido. */ .rd-canales { display: grid; gap: 0.55rem; } .rd-canales span { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0; border: 0; border-radius: 0; white-space: normal; line-height: 1.45; } .rd-canales span::before { width: 6px; height: 6px; margin-top: 0.5em; border-radius: 1px; } /* Llamada a la acción: texto y botón a todo el ancho, apilados */ .rd-cta { flex-direction: column; align-items: stretch; text-align: left; } .rd-cta__t { flex: none; } .rd-cta .btn { width: 100%; text-align: center; } } /* ═══════════════════════════════════════════════════════════════ Cabecera en móvil ─────────────────────────────────────────────────────────────── La rejilla seguía siendo de tres columnas reservando el centro a una navegación oculta, y el logo ocupaba 60 de los 64px de alto. Entre eso y el hamburguesa, al selector de idioma no le quedaba sitio y aparecía apretado contra el borde. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Dos celdas y solo dos hijos visibles: logo a la izquierda, hamburguesa a la derecha. El
tiene cuatro hijos (logo, nav, acciones y hamburguesa); con la navegación y las acciones ocultas quedan dos, que es lo que encaja en la rejilla. Antes las acciones seguían ocupando celda aunque estuvieran vacías y la hamburguesa caía a una segunda fila. */ #site-header { grid-template-columns: auto 1fr; gap: 0.75rem; height: 58px; } .header__logo-img { height: 46px; } /* Vacías en móvil: idioma, acceso y CTA viven en el menú */ .header__actions { display: none; } .header__hamburger { justify-self: end; align-self: center; min-width: 46px; min-height: 40px; padding: 0 0.8rem; display: grid; place-items: center; } } /* El idioma también dentro del menú, que es donde se navega en móvil */ .mobile-menu__lang { display: flex; gap: 0.75rem; margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--ink-15); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; } .mobile-menu__lang button { padding: 0.5rem 0.9rem; border: 1px solid var(--ink-15); border-radius: 100px; color: var(--ink-40); font-family: inherit; font-size: inherit; letter-spacing: inherit; } .mobile-menu__lang button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ═══════════════════════════════════════════════════════════════ Los paneles de la plataforma, vivos ─────────────────────────────────────────────────────────────── Eran cuatro capturas quietas. Cada una pasa a mostrar su propio trabajo: el calendario se puebla, las piezas se aprueban, la traducción se completa y el informe cuenta. ═══════════════════════════════════════════════════════════════ */ /* Calendario: las piezas caen en su día, una tras otra */ .rd-cal .rd-chip { opacity: 0; transform: translateY(-4px); } .rd-ui.rd-vivo .rd-cal .rd-chip { animation: rd-cae 0.5s var(--rd-ease) both; } @keyframes rd-cae { to { opacity: 1; transform: none; } } /* Validación: la fila aprobada se tiñe y cambia sus acciones por el sello */ .rd-row { transition: border-color 0.55s var(--rd-ease), background 0.55s var(--rd-ease); } .rd-row.is-aprobada { border-color: color-mix(in srgb, var(--rd-auto) 40%, transparent); background: color-mix(in srgb, var(--rd-auto) 7%, transparent); } .rd-row__sello { display: none; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--rd-micro); letter-spacing: 0.06em; color: var(--rd-auto-t); white-space: nowrap; } .rd-row__sello::before { content: "✓"; } .rd-row.is-aprobada .rd-row__actions { display: none; } .rd-row.is-aprobada .rd-row__sello { display: inline-flex; animation: rd-sube 0.5s var(--rd-ease) both; } .rd-btn--go.is-pulsado { background: color-mix(in srgb, var(--rd-auto) 22%, transparent); transform: scale(0.94); } .rd-btn { transition: background 0.25s ease, transform 0.25s var(--rd-ease); } /* Traducción: la fila pendiente se resuelve */ .rd-lang__item { transition: border-color 0.55s var(--rd-ease), background 0.55s var(--rd-ease); } .rd-lang__item.is-resuelta { border-color: color-mix(in srgb, var(--rd-human) 35%, transparent); background: color-mix(in srgb, var(--rd-human) 6%, transparent); } .rd-state { transition: color 0.5s var(--rd-ease); } /* Barra de avance mientras traduce */ .rd-lang__item { position: relative; overflow: hidden; } .rd-lang__item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--rd-auto); } .rd-lang__item.is-traduciendo::after { animation: rd-traduce 1.1s var(--rd-ease) both; } @keyframes rd-traduce { from { width: 0; opacity: 1; } to { width: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rd-cal .rd-chip { opacity: 1; transform: none; } .rd-ui.rd-vivo .rd-cal .rd-chip, .rd-row.is-aprobada .rd-row__sello, .rd-lang__item.is-traduciendo::after { animation: none; } }