: los seis agentes enteros, uno al lado de otro, muy juntos pero sin taparse
(el mismo hueco entre todos, medido con la silueta de cada uno). Van en data-modo="sigue": sus ojos
siguen al cursor por la página. Entran una vez, de uno en uno.
Variante .redondos: caras en círculos que se montan un poco (con .cara.centro se puede poner el logo en medio). */
.orb-equipo { --agente: 140px; --hueco: 7; display: flex; justify-content: center; align-items: center; margin: -12px auto 12px; }
.orb-equipo .cara { --izq: 20; --der: 20; position: relative; flex: none; margin: 0 calc(var(--agente) * (var(--hueco) / 2 - var(--der)) / 100) 0 calc(var(--agente) * (var(--hueco) / 2 - var(--izq)) / 100); transition: transform var(--orb-dur-feedback) var(--orb-ease); animation: orb-cara-entra 520ms var(--orb-ease-reveal) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.orb-equipo .cara:first-child { margin-left: 0; }
.orb-equipo .cara:last-child { margin-right: 0; }
/* lo que sobra a cada lado de cada silueta, en % de su caja */
.orb-equipo .cara:has(> [data-orb-agente="blanco"]) { --izq: 22; --der: 21.3; }
.orb-equipo .cara:has(> [data-orb-agente="cian"]) { --izq: 23.2; --der: 20.2; }
.orb-equipo .cara:has(> [data-orb-agente="lila"]) { --izq: 16.2; --der: 19.1; }
.orb-equipo .cara:has(> [data-orb-agente="ambar"]) { --izq: 20.6; --der: 23.1; }
.orb-equipo .cara:has(> [data-orb-agente="menta"]) { --izq: 29.5; --der: 26.5; }
.orb-equipo .cara:has(> [data-orb-agente="coral"]) { --izq: 16.9; --der: 16.6; }
.orb-equipo .cara .orb-agente { display: block; font-size: var(--agente); }
.orb-equipo .cara:hover { transform: translateY(-4px); }
@keyframes orb-cara-entra { from { opacity: 0; transform: translateY(10px) scale(.86); } }
/* variante: caras redondas que se montan un poco */
.orb-equipo.redondos { --cara: 84px; --centro: 108px; --monta: 14px; margin: 0 auto 36px; }
.orb-equipo.redondos .cara { width: var(--cara); height: var(--cara); margin: 0 0 0 calc(var(--monta) * -1); border-radius: 50%; overflow: hidden; background: var(--orb-surface); box-shadow: 0 0 0 3px var(--orb-canvas); }
.orb-equipo.redondos .cara:first-child { margin-left: 0; }
.orb-equipo.redondos .cara:has(> [data-orb-agente="cian"]) { background: var(--orb-cian-surface); }
.orb-equipo.redondos .cara:has(> [data-orb-agente="lila"]) { background: var(--orb-lila-surface); }
.orb-equipo.redondos .cara:has(> [data-orb-agente="ambar"]) { background: var(--orb-ambar-surface); }
.orb-equipo.redondos .cara:has(> [data-orb-agente="menta"]) { background: var(--orb-menta-surface); }
.orb-equipo.redondos .cara:has(> [data-orb-agente="coral"]) { background: var(--orb-coral-surface); }
.orb-equipo.redondos .cara .orb-agente { position: absolute; left: 50%; top: 50%; translate: -50% -42%; font-size: calc(var(--cara) * 1.9); }
.orb-equipo.redondos .cara.centro { z-index: 1; width: var(--centro); height: var(--centro); display: grid; place-items: center; background: var(--orb-ink); color: var(--orb-canvas); }
.orb-equipo.redondos .cara.centro .orb-isotipo { font-size: calc(var(--centro) * .62); }
@media (max-width: 767px) {
.orb-equipo { --agente: 84px; margin: -8px auto 8px; }
.orb-equipo.redondos { --cara: 54px; --centro: 70px; --monta: 10px; margin-bottom: 28px; }
.orb-equipo.redondos .cara { box-shadow: 0 0 0 2px var(--orb-canvas); }
}
/* =====================================================================
15 · CABECERA DE SECCIÓN
===================================================================== */
.orb-seccion-cab { display: grid; gap: 16px; padding: 0 32px 48px; }
.orb-seccion-cab h2 { max-width: 18ch; text-wrap: balance; }
.orb-seccion-cab.centrada { justify-items: center; text-align: center; }
/* =====================================================================
16 · CELDAS CON ILUSTRACIÓN
===================================================================== */
.orb-cells > .orb-celda-ilus { padding: 0; display: grid; grid-template-rows: auto 1fr; }
.orb-celda-ilus .ilus { min-height: 200px; display: grid; place-items: center; border-bottom: var(--orb-rail) solid var(--orb-hair); padding: 24px; }
.orb-celda-ilus .ilus .orb-agente { font-size: 120px; }
.orb-celda-ilus .texto { padding: 24px 32px 32px; }
.orb-celda-ilus h3 { font: 500 var(--orb-sub)/var(--orb-sub-lh) var(--orb-font-text); margin-bottom: 6px; }
.orb-celda-ilus p { color: var(--orb-muted); font: 400 16px/24px var(--orb-font-text); }
/* =====================================================================
17 · RECORRIDO (proceso en pasos, con estela que los une)
===================================================================== */
.orb-recorrido { container-type: inline-size; position: relative; padding-top: 32px; }
.orb-recorrido .estela { padding: 0 12.5%; margin-bottom: -18px; position: relative; z-index: 1; }
.orb-recorrido .orb-cells > div { padding-top: 40px; }
.orb-recorrido .n { display: block; font: 400 var(--orb-h3)/var(--orb-h3-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); color: var(--orb-faint); margin-bottom: 12px; }
.orb-recorrido h3 { font: 500 18px/26px var(--orb-font-text); margin-bottom: 6px; }
.orb-recorrido p { color: var(--orb-muted); font: 400 15px/22px var(--orb-font-text); }
@media (max-width: 767px) { .orb-recorrido .estela { display: none; } }
/* =====================================================================
18 · ANTES Y DESPUÉS
===================================================================== */
.orb-comparar > div { padding: 32px; }
.orb-comparar h3 { font: 500 var(--orb-sub)/var(--orb-sub-lh) var(--orb-font-text); margin: 10px 0 16px; }
.orb-comparar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.orb-comparar li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font: 400 16px/24px var(--orb-font-text); }
.orb-comparar li .orb-icono { width: 20px; height: 20px; margin-top: 2px; }
.orb-comparar .antes li { color: var(--orb-muted); }
.orb-comparar .despues { background: var(--orb-surface); }
/* =====================================================================
19 · ACORDEÓN (preguntas frecuentes y todo lo que se pliega)
===================================================================== */
/*
01…
…
… */
.orb-acordeon, .orb-preguntas { border-top: var(--orb-rail) solid var(--orb-hair); interpolate-size: allow-keywords; }
.orb-acordeon details { border-bottom: var(--orb-rail) solid var(--orb-hair); transition: background-color var(--orb-dur-state) var(--orb-ease); }
.orb-acordeon details[open] { background: var(--orb-surface); }
.orb-acordeon summary { list-style: none; display: grid; grid-template-columns: 40px 1fr 36px; gap: 16px; align-items: center; padding: 22px 32px; cursor: pointer; font: 500 18px/26px var(--orb-font-text); color: var(--orb-ink); }
.orb-acordeon summary::-webkit-details-marker { display: none; }
.orb-acordeon summary:focus-visible { outline: 2px solid var(--orb-focus); outline-offset: -4px; border-radius: var(--orb-r-control); }
.orb-acordeon .n { font: 400 13px/26px var(--orb-font-mono); letter-spacing: 0; color: var(--orb-faint); transition: color var(--orb-dur-state) var(--orb-ease); }
.orb-acordeon details[open] .n { color: var(--orb-ink); }
.orb-acordeon .signo { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--orb-line); background: var(--orb-btn-sec); box-shadow: var(--orb-btn-sombra-suave); transition: background var(--orb-dur-state) var(--orb-ease), border-color var(--orb-dur-state) var(--orb-ease); }
.orb-acordeon .signo::before, .orb-acordeon .signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -.875px 0 0 -6px; border-radius: 2px; background: var(--orb-ink); transition: transform var(--orb-dur-state) var(--orb-ease), background var(--orb-dur-state) var(--orb-ease); }
.orb-acordeon .signo::after { transform: rotate(90deg); }
.orb-acordeon summary:hover .signo { border-color: color-mix(in srgb, var(--orb-ink) 28%, var(--orb-line)); }
.orb-acordeon details[open] .signo { background: var(--orb-action); border-color: var(--orb-action); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
.orb-acordeon details[open] .signo::before, .orb-acordeon details[open] .signo::after { background: var(--orb-on-action); }
.orb-acordeon details[open] .signo::after { transform: rotate(0deg); }
.orb-acordeon .respuesta { padding: 0 84px 26px 88px; color: var(--orb-muted); font: 400 16px/26px var(--orb-font-text); }
.orb-acordeon .respuesta p { max-width: 64ch; }
.orb-acordeon details::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--orb-ease-reveal), content-visibility 320ms allow-discrete; }
.orb-acordeon details[open]::details-content { block-size: auto; }
@media (max-width: 639px) {
.orb-acordeon summary { grid-template-columns: 1fr 32px; padding: 18px 20px; font-size: 16px; line-height: 24px; }
.orb-acordeon .n { display: none; }
.orb-acordeon .signo { width: 32px; height: 32px; }
.orb-acordeon .respuesta { padding: 0 20px 22px; }
}
/* =====================================================================
20 · HERRAMIENTAS (de otros, en gris)
===================================================================== */
.orb-herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.orb-herramientas span { padding: 8px 16px; border: var(--orb-rail) solid var(--orb-line); border-radius: var(--orb-r-control); font: 600 14px/20px var(--orb-font-text); color: var(--orb-faint); background: var(--orb-canvas); filter: grayscale(1); }
/* =====================================================================
21 · BANDA DE CIERRE (la única invertida: lleva el tema contrario)
===================================================================== */
.orb-cierre { position: relative; overflow: hidden; background: var(--orb-canvas); color: var(--orb-ink); text-align: center; padding: 140px 32px; }
.orb-cierre > *:not(.orb-textura) { position: relative; }
.orb-cierre .orb-isotipo { font-size: 180px; display: block; margin: 0 auto 32px; }
.orb-cierre h2 { max-width: 16ch; margin: 0 auto 20px; text-wrap: balance; }
.orb-cierre .orb-lede { margin: 0 auto 32px; }
.orb-cierre .orb-acciones { justify-content: center; }
/* =====================================================================
22 · PIE DE PÁGINA
===================================================================== */
.orb-pie { container-type: inline-size; background: var(--orb-canvas); color: var(--orb-ink); }
.orb-pie .columnas { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding: 56px 32px 40px; }
.orb-pie .orb-logo { font-size: 36px; color: inherit; }
.orb-pie .marca p { color: var(--orb-muted); font: 400 15px/22px var(--orb-font-text); margin-top: 16px; max-width: 32ch; }
.orb-pie h3 { font: 400 12px/18px var(--orb-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--orb-muted); margin-bottom: 14px; }
.orb-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.orb-pie ul a { color: var(--orb-ink); text-decoration: none; font: 500 15px/22px var(--orb-font-text); }
.orb-pie ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.orb-pie .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 32px; border-top: var(--orb-rail) solid var(--orb-hair); font: 400 14px/20px var(--orb-font-text); color: var(--orb-muted); }
.orb-pie .legal a { color: var(--orb-muted); }
@container (max-width: 760px) { .orb-pie .columnas { grid-template-columns: 1fr 1fr; padding: 40px 20px 32px; } .orb-pie .marca { grid-column: 1 / -1; } .orb-pie .legal { padding: 20px; } }
/* =====================================================================
23 · FORMULARIO Y CONTACTO
===================================================================== */
.orb-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.orb-formulario .entero, .orb-formulario .orb-aviso { grid-column: 1 / -1; }
@media (max-width: 639px) { .orb-formulario { grid-template-columns: 1fr; } }
/* sección de contacto: lo que pasa después a la izquierda, el formulario en su panel a la derecha */
.orb-contacto { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: center; padding-inline: clamp(20px, 5vw, 64px); }
.orb-contacto .lado { width: 100%; max-width: 440px; justify-self: center; }
.orb-contacto .lado h2 { margin: 14px 0 16px; text-wrap: balance; }
.orb-contacto .lado .orb-lede { margin-bottom: 28px; }
/* lo que pasa después: tres pasos juntos en una caja, unidos por una línea de puntos */
.orb-contacto .despues { padding: 22px 24px 4px; border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); background: var(--orb-surface); }
.orb-contacto .despues > .orb-label { display: block; margin-bottom: 16px; }
.orb-contacto .despues ol { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.orb-contacto .despues li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding-bottom: 18px; counter-increment: paso; }
.orb-contacto .despues li::before { content: counter(paso); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: var(--orb-rail) solid var(--orb-line); background: var(--orb-canvas); font: 500 13px/1 var(--orb-font-text); color: var(--orb-ink); position: relative; z-index: 1; }
.orb-contacto .despues li:first-child::before { background: var(--orb-ink); border-color: var(--orb-ink); color: var(--orb-canvas); }
.orb-contacto .despues li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 2px; background: radial-gradient(circle, var(--orb-control) 0.9px, transparent 1.3px) center top / 2px 6px repeat-y; }
.orb-contacto .despues b { font: 500 15px/22px var(--orb-font-text); color: var(--orb-ink); padding-top: 5px; }
.orb-contacto .despues span { font: 400 14px/20px var(--orb-font-text); color: var(--orb-muted); }
.orb-contacto .panel { background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-panel); box-shadow: var(--orb-shadow-card); padding: 32px; }
.orb-contacto .panel .pie-form { display: grid; gap: 14px; }
.orb-contacto .listo { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 24px 8px; }
.orb-contacto .listo .orb-agente { font-size: 150px; margin: -16px 0 -12px; }
.orb-contacto .listo h3 { font: 500 var(--orb-h4)/var(--orb-h4-lh) var(--orb-font-text); }
.orb-contacto .listo p { color: var(--orb-muted); max-width: 38ch; font: 400 15px/22px var(--orb-font-text); margin-bottom: 8px; }
@media (max-width: 899px) { .orb-contacto { grid-template-columns: 1fr; gap: 32px; } .orb-contacto .lado { max-width: 560px; justify-self: start; } }
@media (max-width: 639px) { .orb-contacto .panel { padding: 20px; } }
/* =====================================================================
24 · CITA (solo citas reales, con permiso)
===================================================================== */
.orb-cita { margin: 0; display: grid; gap: 24px; }
.orb-cita blockquote { margin: 0; font: 400 var(--orb-h3)/var(--orb-h3-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); max-width: 30ch; text-wrap: balance; }
.orb-cita figcaption { display: flex; align-items: center; gap: 12px; font: 400 15px/22px var(--orb-font-text); color: var(--orb-muted); }
.orb-cita figcaption b { color: var(--orb-ink); font-weight: 600; display: block; }
.orb-cita .inicial { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orb-soft); color: var(--orb-ink); font: 600 15px/1 var(--orb-font-text); }
/* =====================================================================
25 · LISTA DE PROCESOS (app)
===================================================================== */
.orb-procesos { border-top: var(--orb-rail) solid var(--orb-hair); }
.orb-proceso { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) 40px; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: var(--orb-rail) solid var(--orb-hair); font: 400 15px/22px var(--orb-font-text); }
.orb-proceso.cab { font: 400 12px/18px var(--orb-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--orb-muted); padding-block: 10px; }
.orb-proceso .nombre b { display: block; font-weight: 500; }
.orb-proceso .nombre span { color: var(--orb-muted); font-size: 14px; }
.orb-proceso .agente { display: flex; align-items: center; gap: 8px; min-width: 0; }
.orb-proceso .agente .orb-agente { font-size: 32px; }
.orb-proceso .cuando { color: var(--orb-muted); font-size: 14px; }
.orb-proceso:not(.cab):hover { background: var(--orb-surface); }
@media (max-width: 767px) {
.orb-proceso { grid-template-columns: 1fr auto; row-gap: 6px; }
.orb-proceso.cab { display: none; }
.orb-proceso .agente { grid-column: 1; }
.orb-proceso .cuando { display: none; }
.orb-proceso .orb-desplegable { grid-row: 1; grid-column: 2; }
.orb-proceso > :nth-child(3), .orb-proceso .orb-desplegable { justify-self: end; }
}
/* =====================================================================
26 · TARJETA DE AGENTE
===================================================================== */
.orb-tarjeta-agente { display: grid; gap: 4px; justify-items: start; background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); box-shadow: var(--orb-shadow-card); padding: 24px; transition: box-shadow var(--orb-dur-state) var(--orb-ease); }
.orb-tarjeta-agente:hover { box-shadow: var(--orb-shadow-overlay); }
.orb-tarjeta-agente .orb-agente { font-size: 112px; margin: -8px 0 4px -10px; }
.orb-tarjeta-agente h3 { font: 500 var(--orb-sub)/var(--orb-sub-lh) var(--orb-font-text); }
.orb-tarjeta-agente p { color: var(--orb-muted); font: 400 15px/22px var(--orb-font-text); margin-bottom: 12px; }
.orb-tarjeta-agente .pie-tarjeta .orb-meta, .orb-tarjeta-agente .pie-tarjeta .orb-button { white-space: nowrap; }
.orb-tarjeta-agente .pie-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding-top: 16px; border-top: var(--orb-rail) solid var(--orb-hair); }
/* =====================================================================
27 · MÉTRICA (solo con un dato real y su fuente)
===================================================================== */
.orb-metrica { display: grid; gap: 6px; align-content: start; }
.orb-metrica .valor { font: 400 var(--orb-h1)/var(--orb-h1-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); font-variant-numeric: tabular-nums; }
.orb-metrica .valor small { font: 400 var(--orb-h4)/1 var(--orb-font-display); color: var(--orb-muted); margin-left: 4px; }
.orb-metrica .fuente { font: 400 13px/18px var(--orb-font-text); color: var(--orb-muted); margin-top: 6px; }
/* =====================================================================
28-29 · GRÁFICOS (motor:
)
===================================================================== */
/* En una tarjeta: arriba el título y la cifra del periodo; debajo, el gráfico dibujado al ancho real.
Base gris y un solo acento (tinta, o la de un agente con "agente"). Al pasar el ratón, cada dato
dice su valor. Las barras crecen y la línea se dibuja una sola vez, al verse. */
.orb-grafico { --acento: var(--orb-ink); margin: 0; display: grid; gap: 20px; padding: 22px 24px 14px; background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); }
.orb-grafico figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.orb-grafico .titulo { display: grid; gap: 2px; }
.orb-grafico .titulo b { font: 500 15px/22px var(--orb-font-text); color: var(--orb-ink); }
.orb-grafico .titulo span { font: 400 13px/18px var(--orb-font-text); color: var(--orb-muted); }
.orb-grafico .cifra { display: flex; align-items: center; gap: 10px; }
.orb-grafico .cifra strong { font: 400 32px/1 var(--orb-font-display); letter-spacing: var(--orb-tracking); color: var(--orb-ink); }
.orb-grafico .leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: -8px; font: 400 13px/18px var(--orb-font-text); color: var(--orb-muted); }
.orb-grafico .leyenda i { display: inline-block; width: 16px; border-top: 2px solid var(--acento); vertical-align: middle; margin: -2px 6px 0 0; }
.orb-grafico .leyenda i.antes { border-top-style: dashed; border-color: var(--orb-faint); }
.orb-grafico .lienzo { position: relative; min-height: 240px; touch-action: pan-y; }
.orb-grafico svg { display: block; overflow: visible; }
.orb-grafico .eje { font: 400 11px var(--orb-font-mono); fill: var(--orb-muted); letter-spacing: 0; }
.orb-grafico .rejilla { stroke: var(--orb-hair); stroke-width: 1; stroke-dasharray: 3 4; }
.orb-grafico .base { stroke: var(--orb-line); stroke-width: 1; }
.orb-grafico .barra { fill: color-mix(in srgb, var(--orb-ink) 11%, transparent); transition: fill var(--orb-dur-feedback) var(--orb-ease); }
.orb-grafico .barra.encima { fill: color-mix(in srgb, var(--orb-ink) 24%, transparent); }
.orb-grafico .barra.destacada { fill: var(--acento); }
.orb-grafico .pildora rect { fill: var(--acento); }
.orb-grafico .pildora text { font: 600 12px var(--orb-font-text); fill: var(--orb-surface); letter-spacing: 0; }
.orb-grafico .trazo { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orb-grafico .anterior { fill: none; stroke: var(--orb-faint); stroke-width: 1.5; stroke-dasharray: 4 4; }
.orb-grafico .final { fill: var(--acento); stroke: var(--orb-surface); stroke-width: 3; }
.orb-grafico .guia { stroke: var(--orb-line); stroke-width: 1; }
.orb-grafico .marca { fill: var(--orb-surface); stroke: var(--acento); stroke-width: 2; }
.orb-grafico .punta { position: absolute; left: 0; top: -8px; z-index: 2; display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: var(--orb-r-media); background: var(--orb-invert-bg); color: var(--orb-invert-ink); font: 400 12px/16px var(--orb-font-text); white-space: nowrap; pointer-events: none; box-shadow: var(--orb-shadow-overlay); }
.orb-grafico .punta b { font-weight: 600; }
.orb-grafico .punta span { opacity: .72; }
.orb-grafico .punta[hidden] { display: none; }
.orb-grafico.espera .barra, .orb-grafico.espera .pildora, .orb-grafico.espera .trazo, .orb-grafico.espera .area, .orb-grafico.espera .final { opacity: 0; }
.orb-grafico.entra .barra { transform-box: fill-box; transform-origin: bottom; animation: orb-barra-crece 640ms var(--orb-ease-reveal) both; animation-delay: calc(var(--i, 0) * 45ms); }
.orb-grafico.entra .pildora, .orb-grafico.entra .final { animation: orb-aparece 360ms var(--orb-ease) 560ms both; }
.orb-grafico.entra .trazo { stroke-dasharray: 1; animation: orb-trazo 900ms var(--orb-ease-reveal) both; }
.orb-grafico.entra .area { animation: orb-aparece 700ms var(--orb-ease) 300ms both; }
@keyframes orb-barra-crece { from { transform: scaleY(0); } }
@keyframes orb-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes orb-aparece { from { opacity: 0; } }
/* =====================================================================
30 · REGISTRO DE ACTIVIDAD
===================================================================== */
.orb-registro { list-style: none; margin: 0; padding: 0; border-top: var(--orb-rail) solid var(--orb-hair); }
.orb-registro li { display: grid; grid-template-columns: 64px 12px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: var(--orb-rail) solid var(--orb-hair); font: 400 15px/22px var(--orb-font-text); }
.orb-registro time { font: 400 13px/22px var(--orb-font-mono); letter-spacing: 0; color: var(--orb-muted); }
.orb-registro .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--orb-faint); transform: translateY(-1px); }
.orb-registro .punto.cian { background: var(--orb-agent-cian); } .orb-registro .punto.lila { background: var(--orb-agent-lila); } .orb-registro .punto.ambar { background: var(--orb-agent-ambar); } .orb-registro .punto.menta { background: var(--orb-agent-menta); } .orb-registro .punto.coral { background: var(--orb-agent-coral); } .orb-registro .punto.nucleo { background: var(--orb-ink); }
.orb-registro b { font-weight: 600; }
.orb-registro .orb-meta { display: block; }
/* =====================================================================
35 · FLUJO DE AGENTES (tarjetas unidas por una línea con flecha)
===================================================================== */
/* : nodo, conector, nodo… Cada nodo dice qué es (disparador, agente,
resultado), quién y qué hace. Un pulso recorre las líneas en orden, como el trabajo pasando
de uno a otro (solo transform y opacidad; se para con movimiento reducido). */
.orb-flujo { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) minmax(28px, 56px); align-items: center; }
.orb-flujo .nodo { display: grid; justify-items: center; align-content: start; gap: 2px; height: 100%; box-sizing: border-box; padding: 14px 12px 18px; text-align: center; background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); }
.orb-flujo .tipo { font: 500 11px/16px var(--orb-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--orb-muted); }
.orb-flujo .nodo .orb-agente { font-size: 76px; margin: -2px 0 -6px; }
.orb-flujo .evento { width: 50px; height: 50px; margin: 10px 0 8px; border-radius: 50%; display: grid; place-items: center; background: var(--orb-canvas); border: var(--orb-rail) solid var(--orb-line); color: var(--orb-ink); }
.orb-flujo .evento.fin { background: var(--orb-ink); border-color: var(--orb-ink); color: var(--orb-canvas); }
.orb-flujo .nodo b { font: 500 15px/22px var(--orb-font-text); color: var(--orb-ink); }
.orb-flujo .nodo small { font: 400 13px/18px var(--orb-font-text); color: var(--orb-muted); }
.orb-flujo .conector { position: relative; height: 2px; margin: 0 6px; container-type: inline-size; }
.orb-flujo .conector::before { content: ""; position: absolute; inset: 0 2px 0 0; border-radius: 1px; background: var(--orb-line); }
.orb-flujo .conector::after { content: ""; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--orb-line); border-right: 2px solid var(--orb-line); transform: translateY(-50%) rotate(45deg); }
.orb-flujo .conector i { position: absolute; left: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--orb-ink); opacity: 0; animation: orb-flujo-pulso 3.6s var(--orb-ease) infinite; }
.orb-flujo .conector:nth-child(4) i { animation-delay: 1.2s; }
.orb-flujo .conector:nth-child(6) i { animation-delay: 2.4s; }
.orb-flujo .conector:nth-child(8) i { animation-delay: 3.6s; }
@keyframes orb-flujo-pulso {
0% { transform: translateX(0); opacity: 0; }
4% { opacity: 1; }
22% { transform: translateX(calc(100cqw - 10px)); opacity: 1; }
27%, 100% { transform: translateX(calc(100cqw - 10px)); opacity: 0; }
}
@media (max-width: 767px) {
.orb-flujo { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: auto 44px; justify-items: center; }
.orb-flujo .nodo { width: 100%; max-width: 320px; }
.orb-flujo .conector { width: 36px; margin: 0; transform: rotate(90deg); }
}
/* =====================================================================
36 · ÓRBITA DE AGENTES (portada; motor: data-orb-orbita)
===================================================================== */
.orb-orbita { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; container-type: inline-size; margin: 0 auto; }
.orb-orbita > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--orb-ink); }
.orb-orbita .orb-isotipo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 58cqw; }
@media (prefers-reduced-motion: reduce) {
.orb-esqueleto i { animation: none; }
}
/* =====================================================================
ESTADOS CON BORDE (tablas) Y "TRABAJANDO" CON ORBE
===================================================================== */
.orb-estado.borde { background: transparent; border: 1px solid var(--orb-line); color: var(--orb-ink); padding: 1px 10px; }
.orb-estado.borde.activo::before { background: var(--orb-menta-ink); }
.orb-estado.borde.revision::before { background: var(--orb-ambar-ink); }
.orb-estado.borde.error::before { background: var(--orb-coral-ink); }
.orb-trabajando { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/18px var(--orb-font-text); color: var(--orb-ink); white-space: nowrap; }
/* =====================================================================
ORBES PENSANDO (motor/orbes.js): cuando un agente está trabajando
===================================================================== */
.orb-orbe { display: inline-block; vertical-align: middle; flex: none; line-height: 0; }
/* =====================================================================
CHAT DE AGENTES: un canal donde los agentes avisan lo que hacen
===================================================================== */
.orb-chat { background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-line); border-radius: var(--orb-r-card); box-shadow: var(--orb-shadow-card); overflow: hidden; max-width: 520px; }
.orb-chat .cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: var(--orb-rail) solid var(--orb-hair); }
.orb-chat .canal { font: 500 15px/22px var(--orb-font-mono); letter-spacing: 0; color: var(--orb-ink); }
.orb-chat .canal i { font-style: normal; color: var(--orb-muted); margin-right: 6px; }
.orb-chat .caras { display: flex; align-items: center; }
.orb-chat .cara, .orb-chat .caras .mas { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--orb-canvas); box-shadow: 0 0 0 2px var(--orb-surface); margin-left: -8px; }
.orb-chat .cara:first-child { margin-left: 0; }
.orb-chat .cara .orb-agente { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 64px; }
.orb-chat .caras .mas { background: var(--orb-soft); font: 600 11px/1 var(--orb-font-text); color: var(--orb-muted); }
.orb-chat .mensajes { list-style: none; margin: 0; padding: 10px 0 14px; }
.orb-chat .mensaje { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px 20px; }
.orb-chat .mensaje > .orb-agente { font-size: 60px; margin: -12px 0 0 -10px; }
.orb-chat .quien { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.orb-chat .quien b { font: 600 15px/22px var(--orb-font-text); color: var(--orb-ink); }
.orb-chat .quien time { font: 400 12px/22px var(--orb-font-mono); letter-spacing: 0; color: var(--orb-muted); }
.orb-chat .mensaje p { font: 400 15px/22px var(--orb-font-text); color: color-mix(in srgb, var(--orb-ink) 78%, var(--orb-surface)); max-width: none; }
.orb-chat .mensaje p + p { margin-top: 4px; }
.orb-chat .escribiendo .quien { align-items: center; gap: 8px; font: 400 14px/22px var(--orb-font-text); color: var(--orb-muted); margin-top: 6px; }
/* =====================================================================
FONDOS ANIMADOS (motor/fondos.js) · fase 4, guía de movimiento
===================================================================== */
/* El canvas va dentro de un bloque con position: relative, detrás del contenido.
.hueco-centro / .hueco-izquierda apagan los puntos donde va el texto. */
.orb-fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* .hueco-centro, .hueco-izquierda y .hueco-derecha: el motor borra esa zona en el propio lienzo
(con una máscara CSS no saldría al imprimir ni al guardar como PDF). */
.orb-con-fondo { position: relative; isolation: isolate; }
.orb-con-fondo > :not(.orb-fondo, .orb-textura) { position: relative; z-index: 1; }
.orb-con-fondo > .orb-fondo { position: absolute; inset: 0; z-index: 0; }
/* Barra de navegación fija arriba (webs largas). Fondo sólido: nada de desenfoque. */
.orb-nav.fija { position: sticky; top: 0; z-index: 30; }
/* Aparecer al hacer scroll: [data-orb-revelar] en un bloque y sus hijos entran uno a uno (motor/componentes.js) */
/* =====================================================================
ESQUELETO DE APP (fase 4, guía de apps): barra lateral + barra de arriba + contenido
En el móvil la barra lateral se abre por encima (botón .abrir-lateral; motor/componentes.js).
===================================================================== */
.orb-app { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); background: var(--orb-canvas); }
.orb-app .lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 18px 14px; border-right: var(--orb-rail) solid var(--orb-hair); background: var(--orb-canvas); overflow-y: auto; }
.orb-app .lateral > .orb-logo { font-size: 30px; padding: 6px 8px; }
.orb-app .grupo-menu { display: grid; gap: 2px; }
.orb-app .grupo-menu > .orb-label { padding: 0 10px 6px; }
.orb-app .grupo-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--orb-r-media); font: 500 15px/22px var(--orb-font-text); color: var(--orb-muted); text-decoration: none; transition: background var(--orb-dur-feedback) var(--orb-ease), color var(--orb-dur-feedback) var(--orb-ease); }
.orb-app .grupo-menu a .orb-icono { width: 18px; height: 18px; }
.orb-app .grupo-menu a:hover { background: var(--orb-soft); color: var(--orb-ink); }
.orb-app .grupo-menu a[aria-current="page"] { background: var(--orb-surface); color: var(--orb-ink); box-shadow: inset 0 0 0 var(--orb-rail) var(--orb-line); }
.orb-app .grupo-menu .cuenta { margin-left: auto; font: 500 12px/18px var(--orb-font-mono); letter-spacing: 0; color: var(--orb-muted); }
.orb-app .lateral .abajo { margin-top: auto; display: grid; gap: 10px; }
.orb-app .usuario { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: var(--orb-rail) solid var(--orb-hair); padding-top: 14px; }
.orb-app .usuario .inicial { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--orb-soft); font: 600 13px/1 var(--orb-font-text); color: var(--orb-ink); flex: none; }
.orb-app .usuario b { display: block; font: 500 14px/20px var(--orb-font-text); }
.orb-app .usuario span { display: block; font: 400 12px/18px var(--orb-font-text); color: var(--orb-muted); }
.orb-app .principal { min-width: 0; display: flex; flex-direction: column; }
.orb-app .barra-app { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 28px; background: var(--orb-canvas); border-bottom: var(--orb-rail) solid var(--orb-hair); }
.orb-app .barra-app .buscar { flex: 1; max-width: 420px; }
.orb-app .barra-app > .orb-acciones { margin-left: auto; flex-wrap: nowrap; }
.orb-app .abrir-lateral, .orb-app .barra-app > .orb-logo { display: none; }
.orb-app .contenido-app { width: min(1280px, 100%); padding: 28px; display: grid; gap: 24px; align-content: start; }
.orb-app .cab-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.orb-app .cab-pagina h1 { font: 400 var(--orb-h3)/var(--orb-h3-lh) var(--orb-font-display); letter-spacing: var(--orb-tracking); }
.orb-app .cab-pagina p { color: var(--orb-muted); font: 400 15px/22px var(--orb-font-text); margin-top: 4px; }
.orb-app .rejilla-app { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.orb-app .rejilla-app > .orb-chat { max-width: none; }
.orb-app .velo { position: fixed; inset: 0; z-index: 50; background: rgb(25 25 25 / .42); }
@media (max-width: 1099px) { .orb-app .rejilla-app { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959px) {
.orb-app { grid-template-columns: minmax(0, 1fr); }
.orb-app .lateral { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%; transform: translateX(-100%); visibility: hidden; transition: transform var(--orb-dur-state) var(--orb-ease), visibility 0s linear var(--orb-dur-state); box-shadow: var(--orb-shadow-overlay); }
.orb-app.lateral-abierta .lateral { transform: none; visibility: visible; transition: transform var(--orb-dur-state) var(--orb-ease); }
.orb-app .abrir-lateral { display: inline-flex; }
.orb-app .barra-app > .orb-logo { display: inline-flex; font-size: 26px; }
.orb-app .barra-app { padding: 10px 16px; }
.orb-app .barra-app .buscar { display: none; }
.orb-app .contenido-app { padding: 20px 16px; }
}
/* Panel: la tarjeta de las apps (un objeto: una lista, un gráfico, un registro) */
.orb-panel { background: var(--orb-surface); border: var(--orb-rail) solid var(--orb-hair); border-radius: var(--orb-r-card); box-shadow: var(--orb-shadow-card); min-width: 0; overflow: hidden; }
.orb-panel > .cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: var(--orb-rail) solid var(--orb-hair); }
.orb-panel > .cab h2 { font: 500 16px/24px var(--orb-font-text); letter-spacing: var(--orb-tracking); }
.orb-panel > .cuerpo { padding: 8px 20px 16px; }
.orb-panel > .orb-cells { border-block: 0; }
.orb-panel > .orb-procesos { border-top: 0; }
.orb-panel .orb-proceso:last-child { border-bottom: 0; }
.orb-panel > .orb-registro { border-top: 0; padding: 4px 20px 8px; }
.orb-panel > .orb-registro li:last-child { border-bottom: 0; }
/* =====================================================================
ESCENAS · ilustraciones de línea (guias/ilustracion.md)
===================================================================== */
/*
Trazo de tinta de 2 px (no crece al agrandar), puntas redondas, rellenos planos del propio fondo
y UN acento: el del agente de la escena. El agente es el de verdad (parpadea y mira), encima del
dibujo: --x y --y en % de la escena (su centro), --t su tamaño en % del ancho. */
.orb-escena { --acento: var(--orb-cian-ink); --acento-fondo: var(--orb-cian-surface); --acento-vivo: var(--orb-agent-cian); --trazo: 2px;
position: relative; margin: 0; container-type: inline-size; color: var(--orb-ink); }
.orb-escena > svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: visible;
fill: none; stroke: currentColor; stroke-width: var(--trazo); stroke-linecap: round; stroke-linejoin: round; }
.orb-escena > svg * { vector-effect: non-scaling-stroke; }
.orb-escena .f { fill: var(--orb-canvas); } /* recorta lo de detrás con el color del fondo */
.orb-escena .s { fill: var(--orb-surface); }
.orb-escena .sv { fill: var(--orb-soft); }
.orb-escena .sombra { fill: var(--orb-soft); stroke: none; }
.orb-escena .a { stroke: var(--acento); }
.orb-escena .af { fill: var(--acento-vivo); } /* el relleno del acento: el color del agente */
.orb-escena .as { fill: var(--acento-fondo); }
.orb-escena .t { fill: currentColor; stroke: none; }
.orb-escena .fino { stroke-width: calc(var(--trazo) * .65); }
.orb-escena .tenue { stroke: var(--orb-faint); }
.orb-escena .guion { stroke-dasharray: 1 7; }
.orb-escena > .orb-agente { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); font-size: calc(var(--t) * 1cqi); translate: -50% -50%; }
.orb-escena > figcaption { margin-top: 12px; font: 400 14px/20px var(--orb-font-text); color: var(--orb-muted); }
.orb-escena[data-agente="lila"] { --acento: var(--orb-lila-ink); --acento-fondo: var(--orb-lila-surface); --acento-vivo: var(--orb-agent-lila); }
.orb-escena[data-agente="ambar"] { --acento: var(--orb-ambar-ink); --acento-fondo: var(--orb-ambar-surface); --acento-vivo: var(--orb-agent-ambar); }
.orb-escena[data-agente="menta"] { --acento: var(--orb-menta-ink); --acento-fondo: var(--orb-menta-surface); --acento-vivo: var(--orb-agent-menta); }
.orb-escena[data-agente="coral"] { --acento: var(--orb-coral-ink); --acento-fondo: var(--orb-coral-surface); --acento-vivo: var(--orb-agent-coral); }
.orb-escena[data-agente="blanco"] { --acento: var(--orb-ink); --acento-fondo: var(--orb-soft); --acento-vivo: var(--orb-agent-nucleo); }
.orb-escena.grueso { --trazo: 4px; } /* para imágenes de redes (1080 px) */