/* Home "Empleados digitales" (empleados.html, la arma build-empleados.py). Se carga después de clay.css, que no se toca:
usa sus tokens, familias de color (t-*), botones, pastillas, menú, portada, bandeja, cierre, pie y diálogo.
Orden: íconos, portada (lo general; el tender va al final), Dai en chico, Conocé a tu empleado, Trabaja donde trabajás vos (WhatsApp, Slack, mail),
Cómo se incorpora, cierre y pie, tablet, celular, movimiento reducido. */
/* ============ Íconos de interfaz (Lucide, sprite en la página) ============ */
.ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ============ Portada: título más corto que el de clay.html, así que va más grande (como el H1 de Clay) ============ */
.em .hero-h1 { max-width: 800px; font-size: clamp(3.5rem, 1.6rem + 4.2vw, 5.5rem); }
/* Del alto de la pantalla: Conocé (que se monta 80 sobre el verde) recién aparece al bajar. El contenido va centrado
en lo que queda debajo del menú. */
.em-portada {
display: flex; flex-direction: column; justify-content: center;
min-height: calc(100vh + var(--hero-overlap)); min-height: calc(100svh + var(--hero-overlap));
padding-top: calc(var(--nav-h) + 48px);
}
.em-portada .hero-in { padding-bottom: calc(var(--hero-overlap) + 48px); }
.em-portada { overflow: clip; }
/* ============ Dai en chico (chats, panel, fichas): su foto o, si todavía no está, la forma del núcleo, quieta ============ */
.dai-av {
position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px;
border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%; background: var(--ube-400);
}
.dai-av i { width: 42%; height: 42%; border-radius: 58% 42% 44% 56% / 52% 58% 42% 48%; background: var(--ube-200); }
/* Con el color de su rol: Mae (Comercial) fucsia, Ori (Operaciones) celeste, Noa (Recursos humanos) azul */
.dai-av.is-comercial { background: var(--dragonfruit-400); }
.dai-av.is-comercial i { background: var(--dragonfruit-200); }
.dai-av.is-operaciones { background: var(--slushie-400); }
.dai-av.is-operaciones i { background: var(--slushie-200); }
.dai-av.is-rrhh { background: var(--blueberry-400); }
.dai-av.is-rrhh i { background: var(--blueberry-200); }
.dai-av.is-asistente { background: var(--lime-400); } /* Eli, el asistente personal (en el pie, desde el 15 oct): lima */
.dai-av.is-asistente i { background: var(--lime-200); }
/* Con foto (13 oct): la del personaje con el fondo de su color, redonda */
.dai-av.con-foto { overflow: hidden; border-radius: 50%; background: var(--ube-200); }
.dai-av.con-foto.is-comercial { background: var(--dragonfruit-200); }
.dai-av.con-foto.is-operaciones { background: var(--slushie-200); }
.dai-av.con-foto.is-rrhh { background: var(--blueberry-200); }
.dai-av.con-foto.is-asistente { background: var(--lime-200); }
.dai-av.con-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Etiqueta "Ejemplo": la pastilla tinta de clay.html (.eq-ejemplo) */
.ce-ejemplo, .cn-ejemplo {
flex: none; padding: 3px 9px; border-radius: 999px; background: var(--c-ink); color: #fff;
font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em;
}
/* ============ Conocé a tu empleado: card grande sobre el verde, como la primera card de clay.html ============ */
.ce { position: relative; z-index: 3; margin-top: calc(-1 * var(--hero-overlap)); padding-bottom: 64px; }
.ce-card {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
background: var(--t-bg); color: var(--t-ink); border-radius: var(--r-xl);
transition: background-color 0.5s var(--ease-out-quart), color 0.5s var(--ease-out-quart);
}
.ce-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 48px 8px 48px 48px; }
.ce-h { margin-top: 16px; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.04em; color: var(--t-ink); }
.ce-p { margin-top: 20px; max-width: 470px; font-size: 16px; line-height: 1.4; }
/* Roles: el chip de clay.html sobre fondo de color (.cx-caso-b, .fl-tab): avena con bisel; el elegido, el 200 de su familia */
/* Cuatro roles en una fila (el de Administración dice solo "Administración" en el botón) */
.ce-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.ce-rol-b {
flex: none; height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--c-oat-100); box-shadow: var(--bevel);
color: var(--c-ink); font: 500 16px/1.5 var(--font-sans); white-space: nowrap; cursor: pointer;
transition: background-color 0.3s var(--ease-out-circ);
}
.ce-rol-b:hover { background: #fff; }
.ce-rol-b[aria-selected="true"] { background: var(--t-chip); box-shadow: none; }
/* Invitación a tocarlos (Pato, 14 oct; empleados.js, invitar): una sola vez, al llegar a la sección, el rol elegido
parpadea (se apaga y vuelve, con un halo de su color) y después cada uno de los otros se tiñe un instante del suyo,
de izquierda a derecha (--k: su orden entre los no elegidos). La misma para los canales de Trabaja donde ya trabajas
(--inv-base: el color del botón sin elegir, avena 100 en las áreas y avena 200 en los canales). Con movimiento
reducido no corre. */
.cn-chip { --inv-base: var(--c-oat-200); }
.ce-roles.is-invita .ce-rol-b[aria-selected="true"], .cn-chips.is-invita .cn-chip[aria-selected="true"] { animation: ceParpadeo 0.9s var(--ease-out-quart) both; }
.ce-roles.is-invita .ce-rol-b[aria-selected="false"], .cn-chips.is-invita .cn-chip[aria-selected="false"] { animation: ceBarrido 0.6s ease-in-out calc(0.5s + var(--k, 0) * 0.13s) both; }
@keyframes ceParpadeo {
0% { background: var(--t-chip); box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent) 55%, transparent); }
22% { background: var(--inv-base, var(--c-oat-100)); }
50% { background: var(--t-chip); }
100% { background: var(--t-chip); box-shadow: 0 0 0 12px color-mix(in srgb, var(--t-accent) 0%, transparent); }
}
@keyframes ceBarrido {
0%, 100% { background: var(--inv-base, var(--c-oat-100)); translate: 0 0; }
45% { background: color-mix(in srgb, var(--t-chip) 75%, var(--inv-base, var(--c-oat-100))); translate: 0 -2px; }
}
@media (prefers-reduced-motion: reduce) { .ce-roles.is-invita .ce-rol-b, .cn-chips.is-invita .cn-chip { animation: none; } }
/* Ejemplo de la responsabilidad elegida */
.ce-dets { width: 100%; max-width: 540px; min-height: 292px; margin-top: 24px; } /* el ejemplo más largo: la card no salta al cambiar */
.ce-det { padding: 20px 24px 14px; background: #fff; border-radius: var(--r-md); box-shadow: var(--bevel); }
/* "Ver todos los perfiles" (perfiles.html, 14 oct): enlace debajo del ejemplo, en la tinta del rol, con la flecha que rueda */
.ce-todos {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px;
font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--t-ink); text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
transition: text-decoration-color 0.25s var(--ease-out-circ);
}
.ce-todos:hover, .ce-todos:focus-visible { text-decoration-color: currentColor; }
.ce-todos:hover .arw-track, .ce-todos:focus-visible .arw-track { transform: translateY(0); }
@media (max-width: 767px) { .ce-copy > .ce-todos { order: 7; align-self: flex-start; margin: -4px 28px 20px; } } /* apilado: al final de la card */
@media (max-width: 767px) { .ce-copy > .ce-todos { margin: -4px 16px 12px; } }
.js .ce-det:not(.is-on) { display: none; }
html:not(.js) .ce-det + .ce-det { margin-top: 12px; }
/* Pase entre responsabilidades (Pato, 14 oct: "parece como que parpadea"; antes la card entera se apagaba y volvía).
Con JS la card blanca es .ce-dets y queda quieta; adentro, los ejemplos corren como en un carrusel: el que se va
(.is-sale, encima y sin ocupar lugar) sale entero hacia la izquierda mientras el nuevo (.is-in) entra pegado a él
desde la derecha, al mismo paso. La card nunca queda vacía y los textos no se enciman (un fundido cruzado los
mezclaba). Vale también al cambiar de área (los grupos de cada rol no ocultan a su ejemplo mientras sale). Con
movimiento reducido, cambio directo: empleados.js no pone .is-in ni .is-sale. */
.js .ce-dets { position: relative; overflow: hidden; background: #fff; border-radius: var(--r-md); box-shadow: var(--bevel); }
.js .ce-dets-rol, .js .ce-dets-rol[hidden] { display: contents; }
.js .ce-det { background: none; border-radius: 0; box-shadow: none; }
.js .ce-dets > .ce-dets-rol > .ce-det.is-sale {
display: block; position: absolute; top: 0; left: 0; right: 0; visibility: visible; pointer-events: none;
animation: ceDetSale 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.ce-det.is-in { animation: ceDetEntra 0.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes ceDetSale { to { opacity: 0.3; translate: -100% 0; } }
@keyframes ceDetEntra { from { opacity: 0.3; translate: 100% 0; } }
/* Los ejemplos de responsabilidad uno encima del otro (los de todos los roles, ocultos menos el elegido): el bloque mide
lo que el más largo y no salta al cambiar (antes era un mínimo fijo de 292, que no acompañaba al compactar). En
todos los anchos (revisión, 15 oct: en celular cambiaba solo cada 4,2 s, su alto iba de 278 a 368 y lo de abajo se
corría; antes valía solo desde 768). */
.js .ce-dets { display: grid; min-height: 0; }
.js .ce-dets-rol, .js .ce-dets-rol[hidden] { display: contents; }
.js .ce-det { grid-area: 1 / 1; }
.js .ce-det:not(.is-on), .js .ce-dets-rol[hidden] .ce-det { display: block; visibility: hidden; }
.ce-det-top { display: flex; align-items: center; gap: 12px; }
.ce-det-top .tile { width: 36px; height: 36px; background: var(--t-bg); box-shadow: none; }
.tile .ic { width: 18px; height: 18px; }
.ce-det-t { flex: 1; min-width: 0; font-size: 24px; font-weight: 530; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-ink); }
.ce-filas { margin: 12px 0 0; }
.ce-fila { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--c-oat-200); }
.ce-fila dt { display: flex; align-items: center; gap: 8px; align-self: start; padding-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--t-accent); }
.ce-fila dt .ic { width: 16px; height: 16px; }
.ce-fila dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--c-ink); }
/* Escenario: Dai en el centro y sus responsabilidades alrededor, sobre una grilla de puntos */
.ce-media { min-width: 0; padding: 24px; }
.ce-frame {
position: relative; display: flex; flex-direction: column; height: 100%; min-height: 680px; overflow: hidden;
border-radius: var(--r-md); background-color: #fff;
background-image: radial-gradient(circle, rgba(209, 205, 199, 0.55) 1px, transparent 1.5px); background-size: 22px 22px; background-position: center;
}
.ce-stage { position: relative; flex: 1; min-height: 600px; }
.ce-rol { position: absolute; inset: 0; }
.ce-rol[hidden] { display: none; }
.ce-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ce-l { fill: none; stroke: var(--c-oat-300); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 6; transition: stroke 0.3s ease; }
.ce-l.is-on { stroke: var(--t-accent); stroke-width: 2; stroke-dasharray: none; }
.ce-pulso { fill: none; stroke: var(--t-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 5 200; stroke-dashoffset: 5; opacity: 0; }
.ce-pulso.is-on { opacity: 1; animation: cePulso 1.8s var(--ease-out-quart) infinite; }
@keyframes cePulso { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -100; } }
/* (Las formas valen para cualquier elemento con data-forma: también las usa el armado, armar.html.)
El núcleo: dos formas que respiran y giran, con un latido doble como el del logo y ondas que salen al latir.
Cada rol tiene su forma (redonda, en movimiento, más cuadrada): misma familia. Si ya está su foto 3D, va adentro. */
[data-forma="a"] { --f1: 42% 58% 63% 37% / 41% 44% 56% 59%; --f2: 60% 40% 38% 62% / 55% 61% 39% 45%; --f3: 38% 62% 56% 44% / 62% 38% 62% 38%; --giro: 22s; }
[data-forma="b"] { --f1: 70% 30% 46% 54% / 30% 44% 56% 70%; --f2: 30% 70% 70% 30% / 50% 70% 30% 50%; --f3: 58% 42% 28% 72% / 70% 30% 70% 30%; --giro: 12s; }
[data-forma="c"] { --f1: 24% 34% 28% 38% / 34% 24% 38% 28%; --f2: 36% 22% 38% 26% / 26% 36% 24% 40%; --f3: 22% 40% 26% 34% / 40% 26% 34% 22%; --giro: 40s; }
.ce-nucleo { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 184px; height: 184px; translate: -50% -50%; }
.ce-forma, .ce-onda { position: absolute; }
.ce-onda { inset: 28px; border: 2px solid var(--t-accent); border-radius: var(--f1); opacity: 0; animation: ceOnda 2.6s var(--ease-out-quart) infinite; }
.ce-onda.is-2 { animation-delay: 0.52s; }
.ce-forma.is-b { inset: 8px; border-radius: var(--f2); background: var(--t-chip); rotate: var(--ce-ang); animation: ceMorph 11s ease-in-out infinite alternate-reverse, ceGiraAng calc(var(--giro) * 1.6) linear infinite reverse; }
.ce-forma.is-a { inset: 30px; border-radius: var(--f1); background: var(--t-accent); animation: ceMorph 8s ease-in-out infinite alternate, ceGira var(--giro) linear infinite, ceLate 2.6s ease-in-out infinite; }
.ce-nombre { position: relative; z-index: 1; font-size: 28px; font-weight: 575; line-height: 1; letter-spacing: -0.03em; color: #fff; }
/* Con foto (los personajes 3D, 13 oct): el personaje va adentro de la forma de afuera, que sigue cambiando de forma
y de color según el rol; la forma de adentro y el nombre se ocultan (el nombre ya está en el rótulo). La foto queda
siempre derecha: la forma gira con el ángulo --ce-ang y la foto lee ese mismo ángulo y lo descuenta, en el mismo
cuadro. (14 oct: antes la foto tenía su propio giro al revés; al aparecer o cambiar de personaje arrancaba de cero
y quedaba torcida o cabeza abajo.) */
.con-cara .ce-forma.is-b { overflow: hidden; }
.con-cara .ce-forma.is-a, .con-cara .ce-nombre { display: none; }
.ce-cara { position: absolute; inset: 0; rotate: calc(var(--ce-ang) * -1); }
.ce-cara[hidden] { display: none; }
.ce-cara img { position: absolute; left: 50%; bottom: -8%; width: auto; height: 108%; translate: -50% 0; } /* el buzo sigue debajo del borde */
@keyframes ceMorph { 0% { border-radius: var(--f1); } 50% { border-radius: var(--f2); } 100% { border-radius: var(--f3); } }
@keyframes ceGira { to { rotate: 360deg; } }
@property --ce-ang { syntax: ''; inherits: true; initial-value: 0deg; }
@keyframes ceGiraAng { to { --ce-ang: 360deg; } }
@keyframes ceLate { 0%, 45%, 100% { scale: 1; } 10% { scale: 1.07; } 20% { scale: 0.99; } 30% { scale: 1.04; } }
@keyframes ceOnda { 0% { opacity: 0.55; scale: 0.95; } 100% { opacity: 0; scale: 1.75; } }
/* Rótulo del escenario, arriba a la izquierda: quién es y en qué rol */
.ce-rol-t {
position: absolute; left: 20px; top: 20px; z-index: 1;
padding: 4px 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-oat-200);
font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--c-oat-800);
}
.ce-rol-t b { font-weight: 600; color: var(--t-accent); }
/* Responsabilidades */
.ce-caps { list-style: none; margin: 0; padding: 0; }
/* --sy acerca las de arriba y abajo al centro en pantallas bajas y --sx las de los costados en tablet (1% = la posición
de diseño); las líneas las siguen */
.ce-cap { position: absolute; left: calc(50% + (var(--x) - 50) * var(--sx, 1%)); top: calc(50% + (var(--y) - 50) * var(--sy, 1%)); z-index: 2; translate: -50% -50%; }
.ce-cap-b {
display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 14px;
background: #fff; color: var(--c-ink); font: 500 16px/1.3 var(--font-sans); white-space: nowrap; cursor: pointer;
box-shadow: var(--shadow-popover), inset 0 0 0 1px rgba(209, 205, 199, 0.7);
transition: background-color 0.3s var(--ease-out-circ), color 0.3s var(--ease-out-circ), box-shadow 0.3s var(--ease-out-circ);
}
.ce-cap-b .tile { width: 32px; height: 32px; border-radius: 9px; background: var(--t-bg); box-shadow: none; transition: background-color 0.3s var(--ease-out-circ), color 0.3s var(--ease-out-circ); }
.ce-cap-b .tile .ic { width: 16px; height: 16px; }
.ce-cap-b:hover { box-shadow: var(--shadow-popover), inset 0 0 0 2px var(--t-chip); }
.ce-cap-b[aria-pressed="true"] { box-shadow: var(--shadow-popover), inset 0 0 0 1px var(--t-accent), 0 0 0 5px var(--t-chip); }
.ce-cap-b[aria-pressed="true"] .tile { background: var(--t-accent); color: #fff; }
/* Al cambiar de rol: el núcleo aparece y las responsabilidades se despliegan de a una */
.ce-rol.is-in .ce-nucleo { animation: ceNuc 0.6s var(--ease-out-quart) both; }
.ce-rol.is-in .ce-lineas { animation: ceFade 0.6s 0.2s both; }
.ce-rol.is-in .ce-cap { animation: ceCap 0.55s calc(var(--i) * 60ms + 120ms) var(--ease-out-quart) both; }
@keyframes ceNuc { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes ceCap { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes ceFade { from { opacity: 0; } to { opacity: 1; } }
/* ============ Trabaja donde trabajás vos: tabs (spec 7.3) con la charla en tres canales ============ */
.cn { position: relative; z-index: 2; padding-bottom: 64px; }
.cn > .container { padding-top: 64px; }
/* Título y bajada; abajo (en escritorio, a la derecha) los canales y la frase del canal elegido */
.cn-head { max-width: 760px; margin: 0 auto; text-align: center; }
.cn-bajada { margin-top: 12px; font-size: 22px; line-height: 1.3; color: var(--c-ink); }
.cn-ctl { margin-top: 28px; }
.cn .h2 .acc { transition: color 0.3s ease; }
.cn-descs { display: grid; max-width: 560px; margin: 16px auto 0; }
.cn-desc { grid-area: 1 / 1; font-size: 20px; line-height: 1.3; color: #000; text-wrap: balance; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.cn-desc.is-on { opacity: 1; visibility: visible; }
.cn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (min-width: 768px) {
.cn-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 48px; align-items: end; max-width: none; text-align: left; }
.cn-ctl { margin-top: 0; padding-bottom: 4px; }
.cn-chips { justify-content: flex-start; }
.cn-descs { max-width: none; margin: 14px 0 0; }
.cn-desc { min-height: 2.6em; font-size: 18px; text-wrap: pretty; }
}
/* La charla mide hasta 620 de alto con la ventana en 580 (antes 560 y 520; revisión, 15 oct): en pantallas altas
(1440x900, 1920x1080) sobraba alto y la charla de WhatsApp y la de Slack no entraban por poco; ahora entran enteras
y solo el mail pliega mensajes (ver encuadrar, en empleados.js). El bloque de color sigue en dos tercios del alto. */
.cn-stage { position: relative; height: 620px; margin-top: 48px; }
.cn-block { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; border-radius: var(--r-lg); background: var(--t-block); transition: background-color 0.5s var(--ease-out-quart); }
.cn-ps { position: absolute; z-index: 1; top: 0; left: 9%; width: min(620px, 56%); height: 580px; }
.cn-p { position: absolute; inset: 0; }
.cn-p:not(.is-on) { display: none; }
.cn-p.is-in { animation: cardIn 0.45s var(--ease-out-quart) both; }
.cn-win {
display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 16px;
box-shadow: var(--shadow-popover), 0 0 0 1px rgba(209, 205, 199, 0.6);
}
.cn-hilo { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; overflow: hidden; }
.js .cn-m:not(.is-v) { display: none; }
/* La charla como un chat bajado hasta el final (revisión, 15 oct; las reglas, en encuadrar, en canales() de
empleados.js). Lo que no entra arriba sale entero de la vista (.is-fuera; sigue ahí para los lectores de pantalla,
como el texto .sr de clay.css). Lo de más arriba que asoma cortado (unos dos renglones o más, o el mensaje con los
datos) queda bajo un fundido (.is-corrido): el hilo se borra hacia arriba, sin borde duro. --fundido: dónde
empieza (en WhatsApp, debajo de la cabecera, que va encima del hilo). */
.cn-hilo > .is-fuera { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cn-hilo.is-corrido {
-webkit-mask-image: linear-gradient(to bottom, transparent var(--fundido, 0px), #000 calc(var(--fundido, 0px) + 40px));
mask-image: linear-gradient(to bottom, transparent var(--fundido, 0px), #000 calc(var(--fundido, 0px) + 40px));
}
.cn-m.is-v { animation: msgIn 0.45s var(--ease-out-quart) both; }
@keyframes msgIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.cn-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cn-who b { font-size: 15px; font-weight: 600; }
.cn-who small { font-size: 12px; color: #667781; }
/* "Escribiendo": cada app lo muestra a su manera (WhatsApp en la cabecera, Slack debajo de la caja, el mail no tiene).
El JS marca la ventana con .is-escribe; .cn-escribe queda como marca invisible. */
.cn-escribe { display: none; }
/* Una charla por rol: solo se ve la del rol elegido en Conocé a tu empleado */
.cn-win[hidden], .cn-panel[hidden] { display: none; }
/* WhatsApp de compu, como la app de Mac de hoy: letra del sistema (San Francisco en Mac, Segoe UI en Windows, como
WhatsApp), lista con filtros y "Archivados", contactos sin foto con círculo pastel y silueta, fondo claro con dibujitos
(propio, al estilo del de WhatsApp), burbujas con colita abajo, hora con "a. m." y doble tilde, cabecera translúcida y
barra con el botón verde. "Escribiendo…" va en la cabecera, como en WhatsApp. */
.is-wa {
flex-direction: row; color: #111b21; -webkit-font-smoothing: antialiased;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.is-wa .cn-ejemplo { font-family: var(--font-sans); }
.wa-side { flex: 0 0 214px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #e9edef; background: #fff; }
/* Nombres de la lista más enteros (revisión, 15 oct: quedaban en "Equipo T…", "Estudio conta…", "Imprenta …"): la
lista de chats acompaña el ancho de la ventana (37,5 %, entre 214 y 256), como en WhatsApp de compu al agrandar la
ventana, y la ventana llega a 680 donde sobra lugar al lado del panel (antes, 620 desde 1280 y 600 debajo; el de 992
a 1279 está en "Escritorio base"). El panel sigue sin tocarla (a 1280 quedan 42 entre los dos y a 1200, 87). A 1080
no hay más lugar: la ventana sigue en 595 y la lista gana 9. Slack y el mail usan la misma ventana. El alto no
cambia. */
.wa-side { flex-basis: clamp(214px, 37.5%, 256px); }
@media (min-width: 1280px) {
.cn-ps { width: min(680px, 56%); }
}
.wa-side-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; }
.wa-side-h b { flex: 1; text-align: center; font-size: 15px; font-weight: 700; }
.wa-redondo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f2f2; color: #3b4a54; }
.wa-redondo .ic { width: 16px; height: 16px; }
.wa-redondo.is-lleno { background: #e9e9e9; color: #fff; }
.wa-redondo.is-lleno .ic { stroke-width: 2.6; }
.wa-buscar { display: flex; align-items: center; gap: 8px; margin: 0 10px; padding: 7px 12px; border-radius: 99px; background: #f2f2f2; font-size: 13.5px; color: #667781; }
.wa-buscar .ic { width: 15px; height: 15px; }
/* La fila de filtros no se achica (flex: none): en ventanas bajas (1080x620, 1280x720) la columna de chats le sacaba
alto y las píldoras quedaban aplastadas, con el texto corrido; ahora lo que se recorta es la lista de chats.
Ninguna píldora se corta a la mitad (revisión, 14 oct: en 214 px se leía "Favorit"): la que no entra entera baja a un
segundo renglón (flex-wrap) que queda fuera del alto fijo de la fila (9 + 25 + 4); el hueco entre renglones (12 px)
lo deja del todo afuera, así se ven solo las que entran enteras. */
.wa-filtros {
flex: none; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 12px 5px;
height: 38px; padding: 9px 10px 4px; overflow: hidden;
}
/* Texto centrado en la píldora, a lo ancho y a lo alto (Pato, 14 oct): el renglón se recorta a la altura de las
mayúsculas (text-box) y lleva el mismo aire arriba y abajo, así lo que queda al medio son las letras y no el lugar de
los acentos y las colitas. Donde text-box no existe (Firefox) se centra el renglón entero en un alto fijo. */
.wa-filtros span {
flex: none; display: flex; align-items: center; justify-content: center; height: 25px; padding: 0 10px; border-radius: 99px;
box-shadow: inset 0 0 0 1px #e1e4e6; font-size: 12.5px; font-weight: 500; line-height: 1; color: #54656f; white-space: nowrap;
}
@supports (text-box: trim-both cap alphabetic) {
.wa-filtros span { display: block; height: auto; padding: 8px 10px; text-box: trim-both cap alphabetic; }
}
.wa-filtros .is-on { background: #d9fdd3; box-shadow: none; color: #0b5e33; }
.wa-archivados { display: flex; align-items: center; gap: 16px; margin: 0 10px; padding: 10px 6px 9px 12px; border-bottom: 1px solid #f0f2f5; font-size: 14px; font-weight: 500; color: #3b4a54; }
.wa-archivados .ic { width: 17px; height: 17px; color: #54656f; stroke-width: 1.7; }
.wa-archivados span { flex: 1; }
.wa-archivados small { font-size: 12px; color: #667781; }
.wa-chats { list-style: none; margin: 0; padding: 2px 6px; overflow: hidden; }
.wa-chats li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.wa-chats li.is-on { background: #f2f2f2; }
.wa-chats .dai-av, .wa-av { width: 40px; height: 40px; }
.wa-av { flex: none; display: grid; place-items: end center; overflow: hidden; border-radius: 50%; }
.wa-sil { width: 74%; height: 74%; margin-bottom: 1px; fill: currentColor; }
.wa-av.is-lila { background: #e7e2fc; color: #6e4fe0; }
.wa-av.is-verde { background: #d4f4e2; color: #128c4e; }
.wa-av.is-celeste { background: #cdeffa; color: #0e7fa8; }
.wa-av.is-durazno { background: #ffe4d1; color: #d4691e; }
.wa-chat-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-bottom: 7px; border-bottom: 1px solid #f0f2f5; margin-bottom: -7px; }
.wa-chats li.is-on .wa-chat-t, .wa-chats li:last-child .wa-chat-t { border-bottom-color: transparent; }
.wa-chat-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wa-chat-t b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.wa-chat-h { flex: none; font-size: 11.5px; color: #667781; }
.wa-chat-h.is-nuevo { color: #1daa61; font-weight: 500; }
.wa-chat-t small { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; white-space: nowrap; font-size: 13px; color: #667781; }
.wa-chat-t small .wa-tildes { flex: none; color: #8696a0; }
/* El último mensaje termina en "…" cuando no entra, como en WhatsApp (revisión, 14 oct: se cortaba a mitad de palabra).
Va en su propio span porque la caja de afuera es flex (por las tildes) y ahí "text-overflow" no hace nada. */
.wa-chat-m { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-chat-f i { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #25d366; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.wa-main {
position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background-color: #f0ebe3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='320' fill='none' stroke='%23dbd2c4' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(27 22) rotate(-9) scale(1.25)'%3E%3Crect x='-11' y='-6' width='22' height='15' rx='3'/%3E%3Ccircle cy='1.5' r='4'/%3E%3Cpath d='M-4-6l2-3h4l2 3'/%3E%3C/g%3E%3Cg transform='translate(93 21) rotate(-16) scale(1.15)'%3E%3Cpath d='M-9-8 10-8 0 11z'/%3E%3Cpath d='M-9-8q9-4 19 0'/%3E%3Ccircle cx='-1' cy='-2' r='1.5'/%3E%3Ccircle cx='3' cy='2' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(151 25) rotate(-24) scale(1.05)'%3E%3Cellipse cy='-3' rx='7' ry='9'/%3E%3Cpath d='M0 6q-3 4 1 9'/%3E%3C/g%3E%3Cg transform='translate(202 27) rotate(6) scale(1.05)'%3E%3Cpath d='M-11 0a11 11 0 0 1 22 0zM0 0v9a2.5 2.5 0 0 1-5 0'/%3E%3C/g%3E%3Cg transform='translate(262 26) rotate(-4) scale(1.15)'%3E%3Ccircle r='9'/%3E%3Cpath d='M0-5v5l4 2'/%3E%3C/g%3E%3Cg transform='translate(52 74) rotate(19) scale(1.15)'%3E%3Cpath d='M-11 1 0-9l11 10M-8-2v11h16V-2'/%3E%3Cpath d='M-2 9V3h4v6'/%3E%3C/g%3E%3Cg transform='translate(119 85) rotate(-16) scale(1.05)'%3E%3Cpath d='M-8 0h16l-3 10H-5z'/%3E%3Cpath d='M-8 0q0-9 8-9t8 9'/%3E%3Cpath d='M-2.5 0v10M2.5 0v10'/%3E%3Ccircle cy='-11' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(173 76) rotate(27) scale(1.15)'%3E%3Cpath d='M0-9l2.6 5.6 6 .7-4.5 4.1 1.2 6L0 4.4-5.3 7.4l1.2-6-4.5-4.1 6-.7z'/%3E%3C/g%3E%3Cg transform='translate(242 86) rotate(6) scale(1.05)'%3E%3Ccircle cx='-7' cy='4' r='5'/%3E%3Ccircle cx='8' cy='4' r='5'/%3E%3Cpath d='M-7 4l4-9h7l4 9M-3-5h-2M4-5l-1-3h3'/%3E%3C/g%3E%3Cg transform='translate(1 79) rotate(19) scale(1.25)'%3E%3Ccircle r='5'/%3E%3Cpath d='M0-12v3M0 9v3M-12 0h3M9 0h3M-8.5-8.5l2 2M6.5 6.5l2 2M-8.5 8.5l2-2M6.5-6.5l2-2'/%3E%3C/g%3E%3Cg transform='translate(301 79) rotate(19) scale(1.25)'%3E%3Ccircle r='5'/%3E%3Cpath d='M0-12v3M0 9v3M-12 0h3M9 0h3M-8.5-8.5l2 2M6.5 6.5l2 2M-8.5 8.5l2-2M6.5-6.5l2-2'/%3E%3C/g%3E%3Cg transform='translate(39 127) rotate(6) scale(1.25)'%3E%3Crect x='-7' y='-12' width='14' height='24' rx='3'/%3E%3Cpath d='M-2 8.5h4'/%3E%3C/g%3E%3Cg transform='translate(96 130) rotate(19) scale(1.15)'%3E%3Cpath d='M-8-3l-1-9 6 4M8-3l1-9-6 4'/%3E%3Ccircle cy='1' r='9'/%3E%3Cpath d='M-3.5-.5h.01M3.5-.5h.01M-2 4q2 1.6 4 0M-15 2h6M9 2h6M-14 6l5-1.5M9 4.5l5 1.5'/%3E%3C/g%3E%3Cg transform='translate(144 128) rotate(19) scale(1.05)'%3E%3Ccircle cy='-8' r='3'/%3E%3Cpath d='M0-5v15M-5-1h10M-9 4q2 7 9 7t9-7'/%3E%3C/g%3E%3Cg transform='translate(207 138) rotate(-9) scale(1.05)'%3E%3Cpath d='M-9 9l3-9 12-12 6 6-12 12z'/%3E%3Cpath d='M3-9l6 6M-9 9l3-1'/%3E%3C/g%3E%3Cg transform='translate(264 134) rotate(-9) scale(1.05)'%3E%3Ccircle cx='-4' cy='8' r='3'/%3E%3Cpath d='M-1 8V-9l9 3v12'/%3E%3Ccircle cx='5' cy='6' r='3'/%3E%3C/g%3E%3Cg transform='translate(63 185) rotate(-4) scale(1.25)'%3E%3Cpath d='M0 8C-12 0-8-10 0-4 8-10 12 0 0 8z'/%3E%3C/g%3E%3Cg transform='translate(121 181) rotate(-4) scale(1.05)'%3E%3Cpath d='M-9 5a5 5 0 0 1 1-10 7 7 0 0 1 13-1 5 5 0 0 1 1 11z'/%3E%3C/g%3E%3Cg transform='translate(172 183) rotate(27) scale(1.25)'%3E%3Cpath d='M-6-1 0 13 6-1M-3 4h6'/%3E%3Cpath d='M-7-1a7 7 0 0 1 14 0z'/%3E%3C/g%3E%3Cg transform='translate(243 186) rotate(-9) scale(1.15)'%3E%3Ccircle r='9'/%3E%3Cpath d='M-3.5-2h.01M3.5-2h.01M-4 3q4 4 8 0'/%3E%3C/g%3E%3Cg transform='translate(297 188) rotate(6) scale(1.05)'%3E%3Crect x='-9' y='-3' width='18' height='12' rx='1.5'/%3E%3Cpath d='M-10-3h20M0-3v12M0-3q-6-7-7-2t7 2q6-7 7-2t-7 2'/%3E%3C/g%3E%3Cg transform='translate(-3 188) rotate(6) scale(1.05)'%3E%3Crect x='-9' y='-3' width='18' height='12' rx='1.5'/%3E%3Cpath d='M-10-3h20M0-3v12M0-3q-6-7-7-2t7 2q6-7 7-2t-7 2'/%3E%3C/g%3E%3Cg transform='translate(29 237) rotate(-9) scale(1.15)'%3E%3Crect x='-10' y='-7' width='20' height='14' rx='2'/%3E%3Cpath d='M-10-6 0 1l10-7'/%3E%3C/g%3E%3Cg transform='translate(95 243) rotate(12) scale(1.25)'%3E%3Cpath d='M4-9a9 9 0 1 0 6 13A7 7 0 0 1 4-9z'/%3E%3C/g%3E%3Cg transform='translate(145 241) rotate(12) scale(1.05)'%3E%3Cpath d='M-8-3h13v6a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6zM5-1h2a3 3 0 0 1 0 6H5M-4-7q1-2 0-4M1-7q1-2 0-4'/%3E%3C/g%3E%3Cg transform='translate(210 245) rotate(-24) scale(1.15)'%3E%3Cpath d='M-6 4h12l-2 8H-4zM0 4V-4M0-2q-7-1-7-8 7 0 7 8M0-4q6-1 7-7-7 0-7 7'/%3E%3C/g%3E%3Cg transform='translate(274 237) rotate(19) scale(1.15)'%3E%3Cpath d='M-10-7h20a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H-3l-6 5v-5h-1a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(69 288) rotate(19) scale(1.15)'%3E%3Cpath d='M-8 8C-8-4 0-10 9-9 10 0 4 8-8 8zM-8 8 3-3'/%3E%3C/g%3E%3Cg transform='translate(119 297) rotate(-16) scale(1.15)'%3E%3Crect x='-11' y='-6' width='22' height='15' rx='3'/%3E%3Ccircle cy='1.5' r='4'/%3E%3Cpath d='M-4-6l2-3h4l2 3'/%3E%3C/g%3E%3Cg transform='translate(174 293) rotate(19) scale(1.05)'%3E%3Cpath d='M-9-8 10-8 0 11z'/%3E%3Cpath d='M-9-8q9-4 19 0'/%3E%3Ccircle cx='-1' cy='-2' r='1.5'/%3E%3Ccircle cx='3' cy='2' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(232 296) rotate(-4) scale(1.05)'%3E%3Cellipse cy='-3' rx='7' ry='9'/%3E%3Cpath d='M0 6q-3 4 1 9'/%3E%3C/g%3E%3Cg transform='translate(5 294) rotate(-4) scale(1.15)'%3E%3Cpath d='M-11 0a11 11 0 0 1 22 0zM0 0v9a2.5 2.5 0 0 1-5 0'/%3E%3C/g%3E%3Cg transform='translate(305 294) rotate(-4) scale(1.15)'%3E%3Cpath d='M-11 0a11 11 0 0 1 22 0zM0 0v9a2.5 2.5 0 0 1-5 0'/%3E%3C/g%3E%3Cg fill='%23dfd6c9' stroke='none'%3E%3Ccircle cx='49' cy='109' r='1.2'/%3E%3Ccircle cx='31' cy='181' r='2.2'/%3E%3Ccircle cx='30' cy='116' r='1.2'/%3E%3Ccircle cx='21' cy='67' r='1.6'/%3E%3Ccircle cx='45' cy='81' r='1.6'/%3E%3Ccircle cx='181' cy='152' r='1.2'/%3E%3Ccircle cx='255' cy='318' r='1.6'/%3E%3Ccircle cx='144' cy='100' r='1.2'/%3E%3Ccircle cx='31' cy='110' r='1.6'/%3E%3Ccircle cx='144' cy='221' r='2.2'/%3E%3Ccircle cx='7' cy='304' r='2.2'/%3E%3Ccircle cx='109' cy='221' r='1.2'/%3E%3Ccircle cx='227' cy='95' r='2.2'/%3E%3Ccircle cx='259' cy='223' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
background-size: 300px 320px;
}
.wa-head {
position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.wa-head .cn-who b { font-size: 15px; font-weight: 600; }
.wa-head .cn-who small { font-size: 12.5px; color: #667781; }
.wa-escribiendo { display: none; color: #1daa61; }
.is-wa.is-escribe .wa-linea { display: none; }
.is-wa.is-escribe .wa-escribiendo { display: inline; }
.wa-head-i { display: flex; gap: 16px; color: #3b4a54; }
.wa-head-i .ic { width: 19px; height: 19px; stroke-width: 1.7; }
.wa-hilo { --fundido: 44px; gap: 6px; padding: 64px 22px 8px; background: none; }
.wa-fecha { align-self: center; margin: 2px 0; padding: 4px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); font-size: 12px; font-weight: 600; color: #111b21; }
.wa-m {
position: relative; max-width: 80%; padding: 6px 10px 7px 11px; border-radius: 14px; font-size: 14px; line-height: 1.36; color: #111b21;
box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
/* La colita, abajo: en la última burbuja de cada tanda (acá se alternan, así que en todas) */
.wa-m::after { content: ""; position: absolute; bottom: 0; width: 11px; height: 15px; }
.wa-m.is-in { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.wa-m.is-in::after { left: -7px; background: #fff; clip-path: path("M11 0 L7 0 L7 5 C6 11 4 14.5 0 15 L11 15 Z"); }
.wa-m.is-out { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.wa-m.is-out::after { right: -7px; background: #d9fdd3; clip-path: path("M0 0 L4 0 L4 5 C5 11 7 14.5 11 15 L0 15 Z"); }
.wa-m p + p, .wa-lista + p { margin-top: 4px; }
.wa-lista { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.wa-lista li { padding-left: 2px; }
/* La hora va abajo a la derecha. El hueco (.wa-esp) le guarda lugar al final del texto: si entra en el último renglón,
la hora queda al lado; si no, baja a un renglón propio. */
.wa-esp { display: inline-block; width: 66px; height: 1px; }
.wa-m.is-out .wa-esp { width: 86px; }
.wa-m .cn-h { position: absolute; right: 9px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.2; color: #667781; white-space: nowrap; }
.wa-tildes { width: 16px; height: 16px; color: #53bdeb; stroke-width: 2.2; }
.wa-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; }
.wa-barra .wa-redondo { width: 32px; height: 32px; background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12); color: #54656f; }
.wa-barra .wa-redondo .ic { width: 18px; height: 18px; }
.wa-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12); font-size: 14px; line-height: 1.3; color: #8696a0; white-space: nowrap; overflow: hidden; }
.wa-input .ic { flex: none; width: 19px; height: 19px; margin-left: auto; color: #3b4a54; stroke-width: 1.7; }
.wa-mic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #25d366; color: #fff; }
.wa-mic .ic { width: 17px; height: 17px; }
/* Slack de compu como hoy: barra del espacio de trabajo y barra lateral en berenjena, letra Lato, nombres en negrita
900, listas con viñetas, botones de la app (en Slack existen), caja para escribir y "está escribiendo…" debajo. */
.is-sl { flex-direction: row; color: #1d1c1d; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.is-sl .cn-ejemplo { font-family: var(--font-sans); }
.sl-rail { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; background: #350d36; color: #fff; }
.sl-ws-ic { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 8px; background: #e9d5ea; color: #350d36; font-size: 12px; font-weight: 900; }
.sl-rail-i { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.sl-rail-i i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.sl-rail-i.is-on i { background: rgba(255, 255, 255, 0.2); }
.sl-rail-i .ic { width: 17px; height: 17px; }
.sl-side { flex: 0 0 150px; min-width: 0; padding: 12px 8px; background: #3f0e40; color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 1.3; }
.sl-ws { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 0 6px; font-size: 16px; font-weight: 900; color: #fff; white-space: nowrap; }
.sl-ws .ic, .sl-sec .ic { width: 14px; height: 14px; }
.sl-sec { display: flex; align-items: center; gap: 4px; padding: 8px 4px 4px; font-size: 13px; font-weight: 700; }
.sl-li { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.sl-li .ic { flex: none; width: 14px; height: 14px; }
.sl-li .dai-av { width: 18px; height: 18px; }
.sl-li.is-on { background: rgba(255, 255, 255, 0.92); color: #3f0e40; font-weight: 700; }
.sl-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.sl-head { display: flex; align-items: center; gap: 3px; padding: 11px 14px; border-bottom: 1px solid #e2e2e2; font-size: 17px; }
.sl-head .ic { width: 15px; height: 15px; }
.sl-head > b { font-weight: 900; }
.sl-gente { display: flex; align-items: center; margin-left: auto; margin-right: 10px; padding: 2px 6px 2px 3px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e2e2e2; }
.sl-gente i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--blueberry-200); color: var(--blueberry-500); font-size: 8px; font-style: normal; font-weight: 900; box-shadow: 0 0 0 2px #fff; }
.sl-gente i.is-2 { margin-left: -5px; background: var(--dragonfruit-200); color: var(--dragonfruit-500); }
.sl-gente small { margin-left: 5px; font-size: 12px; font-weight: 700; color: #616061; }
.sl-hilo { gap: 12px; padding: 14px 16px 8px; }
.sl-m { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.46; }
.sl-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--blueberry-200); color: var(--blueberry-500); font-size: 12px; font-weight: 900; }
.sl-m .dai-av { width: 34px; height: 34px; border-radius: 8px; }
.sl-cuerpo { flex: 1; min-width: 0; }
.sl-quien { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; }
.sl-quien b { font-weight: 900; }
.sl-quien .cn-h { font-size: 12px; color: #616061; }
.sl-app { align-self: center; padding: 1px 4px; border-radius: 3px; background: rgba(29, 28, 29, 0.1); color: rgba(29, 28, 29, 0.7); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; }
.sl-men { padding: 0 2px; border-radius: 3px; background: rgba(29, 155, 209, 0.1); color: #1264a3; }
.sl-lista { margin: 2px 0 2px; padding-left: 22px; list-style: disc; }
.sl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sl-btn { padding: 3px 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(29, 28, 29, 0.3); background: #fff; color: #1d1c1d; font-size: 13px; font-weight: 700; line-height: 1.6; transition: box-shadow 0.2s ease; }
.sl-btn.is-pri { box-shadow: none; background: #007a5a; color: #fff; }
.sl-btn.is-tap { box-shadow: 0 0 0 3px rgba(0, 122, 90, 0.28); }
.sl-nota { display: flex; align-items: center; gap: 6px; margin-left: 43px; font-size: 13px; color: #616061; }
.sl-nota .ic { width: 14px; height: 14px; color: #007a5a; stroke-width: 3; }
.sl-barra { margin: 0 14px 18px; border-radius: 8px; box-shadow: inset 0 0 0 1px #bbbabb; }
.sl-barra p { padding: 9px 12px 2px; font-size: 14.5px; color: #868686; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-barra-i { display: flex; align-items: center; gap: 12px; padding: 5px 8px 7px 12px; color: #616061; }
.sl-barra-i .ic { width: 16px; height: 16px; }
.sl-barra-i i { display: grid; place-items: center; margin-left: auto; width: 30px; height: 26px; border-radius: 4px; color: #b5b5b5; }
.sl-escribiendo { position: absolute; left: 16px; bottom: 2px; font-size: 11px; color: #616061; opacity: 0; transition: opacity 0.2s ease; }
.sl-escribiendo b { font-weight: 700; }
.is-sl.is-escribe .sl-escribiendo { opacity: 1; }
/* Gmail de compu como hoy: letra Roboto, la conversación sin tarjetas (líneas que separan), avatar con la inicial,
asunto con su etiqueta, la hora y la estrella a la derecha, y "Responder" y "Reenviar" abajo. Sin botones adentro. */
.is-ml { background: #fff; color: #1f1f1f; font-family: "Roboto", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.is-ml .cn-ejemplo { font-family: var(--font-sans); }
.ml-barra { display: flex; align-items: center; gap: 20px; padding: 12px 18px 6px; color: #444746; }
.ml-barra .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.ml-barra .cn-ejemplo { margin-left: auto; }
.ml-asunto { display: flex; align-items: center; gap: 10px; padding: 6px 18px 10px; font-size: 20px; line-height: 1.3; color: #1f1f1f; }
.ml-etiqueta { padding: 1px 6px; border-radius: 4px; background: #e8eaed; font-size: 12px; color: #444746; }
.ml-hilo { gap: 0; padding: 0 18px; background: #fff; }
/* Gmail va de arriba hacia abajo, como el real (revisión, 15 oct): los mensajes empiezan debajo del asunto y lo que
sobra queda abajo. Solo cuando no entran y el de arriba asoma cortado (.is-corrido) se juntan abajo, como al bajar
hasta el último. Sin JS, juntos abajo, como antes. */
.js .ml-hilo { justify-content: flex-start; }
.js .ml-hilo.is-corrido { justify-content: flex-end; }
/* Hilo largo, como en Gmail: los mensajes que no entran quedan plegados en una fila con su cantidad, un círculo sobre
una doble línea, a la altura de los avatares, pegada al asunto (revisión, 15 oct: en pantallas bajas quedaba arriba
un renglón suelto sin remitente). Va fuera del hilo, así nunca queda cortada. La muestra empleados.js (encuadrar)
con el número; si no hace falta, no está. */
.ml-plegados { position: relative; flex: none; height: 40px; margin: 0 18px; }
.ml-plegados[hidden] { display: none; }
.ml-plegados::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; translate: 0 -50%; border-block: 1px solid #e3e3e3; }
.ml-plegados span {
position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px;
border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #c4c7c5; font-size: 14px; font-weight: 500; color: #444746;
}
.ml-m { padding: 12px 0 14px; border-top: 1px solid #eceff1; font-size: 14px; line-height: 1.43; }
.ml-de { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.ml-de .dai-av, .ml-av { width: 32px; height: 32px; }
.ml-av { flex: none; display: grid; place-items: center; border-radius: 50%; background: #0b8043; color: #fff; font-size: 15px; font-weight: 500; }
.ml-de p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ml-de b { font-weight: 500; }
.ml-de small { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #5e5e5e; }
.ml-de small .ic { width: 12px; height: 12px; }
.ml-de .cn-h { padding-top: 1px; font-size: 12px; color: #5e5e5e; }
.ml-de-i { display: flex; gap: 12px; padding-top: 1px; color: #444746; }
.ml-de-i .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.ml-m > p, .ml-tabla { margin-left: 42px; }
.ml-tabla { width: calc(100% - 42px); margin-top: 6px; border-collapse: collapse; font-size: 13.5px; }
.ml-tabla td { padding: 4px 6px 4px 0; border-top: 1px solid #eceff1; }
.ml-tabla td + td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #444746; }
.ml-mas td { color: #5e5e5e; }
.ml-resp { display: flex; gap: 10px; padding: 10px 18px 14px 60px; }
.ml-resp span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px #747775; font-size: 14px; font-weight: 500; color: #444746; }
.ml-resp .ic { width: 16px; height: 16px; }
/* Panel flotante: lo que hizo Dai, con las mismas palabras que Conocé a tu empleado */
.cn-panel {
position: absolute; z-index: 2; top: 96px; right: 7%; width: 300px; padding: 20px;
background: #fff; border-radius: 16px; box-shadow: var(--shadow-popover), inset 0 0 0 1px rgba(209, 205, 199, 0.5);
}
.cn-panel-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-oat-200); }
.cn-panel-top .dai-av { width: 40px; height: 40px; }
.cn-panel-top > span:last-child { display: flex; flex-direction: column; }
.cn-panel-t { font-size: 18px; font-weight: 530; line-height: 1.3; color: var(--c-ink); }
.cn-panel-s { font-size: 13px; line-height: 1.4; color: var(--c-oat-800); }
.cn-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cn-paso { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.3; color: var(--c-muted-aa); transition: color 0.3s ease; }
.cn-paso-i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c-oat-200); color: var(--c-oat-400); transition: background-color 0.3s ease, color 0.3s ease; }
.cn-paso-i .ic { width: 16px; height: 16px; }
.cn-paso-t { flex: 1; min-width: 0; }
.cn-paso-t b { font-weight: 600; }
.cn-paso-ok { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--t-accent); color: #fff; opacity: 0; scale: 0.5; transition: opacity 0.3s ease, scale 0.3s var(--ease-out-quart); }
.cn-paso-ok .ic { width: 12px; height: 12px; stroke-width: 3; }
.cn-paso.is-hecho, .cn-paso.is-espera { color: var(--c-ink); }
.cn-paso.is-hecho .cn-paso-i { background: var(--t-chip); color: var(--t-ink); }
.cn-paso.is-hecho .cn-paso-ok { opacity: 1; scale: 1; }
.cn-paso.is-espera .cn-paso-i { background: var(--t-accent); color: #fff; animation: espera 1.2s ease-in-out infinite; }
@keyframes espera { 50% { scale: 0.9; } }
html:not(.js) .cn-paso { color: var(--c-ink); }
html:not(.js) .cn-paso-ok { opacity: 1; scale: 1; }
/* ============ Cómo se incorporan: bandeja avena con tres cards y "Así crece" ============
Como en el commit 5784505 (Pato, 14 oct: volver a los tres pasos y a "Así crece", sin la pizarra). Sus escalones
de alto y de ancho van todos acá abajo, en el mismo orden en que estaban repartidos en el archivo (así se pisan igual
que entonces), para no mezclarlos con los de las otras secciones. Única diferencia con 5784505: lo de "escritorio
angosto" llega hasta 1319 de ancho (antes 1199). De 1200 a 1319 las cards ya son angostas y los textos bajan de
renglón: a 1200x700, 1200x910 o 1260x620 la bandeja no entraba en la pantalla (ya pasaba en 5784505). */
.in { position: relative; z-index: 2; padding: 64px 0; }
/* Con fondo, como las demás secciones que tapan las líneas de marco (.frame de clay.css, fijas por debajo de las
secciones con z-index 2): sin él, en su relleno de abajo asomaban dos rayitas verticales sobre el cierre (revisión,
15 oct, en la parada del cierre a 1440x900) */
.em .in { background: #fff; }
.in-tray { box-shadow: var(--glow-white); }
.in-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px 32px; }
.in-eb { grid-column: 1 / -1; color: var(--slushie-400); }
.in-h { color: var(--c-ink); }
.in-h .acc { color: var(--slushie-400); }
.in-pasos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.in-pasos[hidden] { display: none; } /* una versión por rol: se ve la del rol elegido en Conocé a tu empleado */
.in-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 24px; border-radius: var(--r-md); background: var(--t-bg); color: var(--t-ink); }
.in-card-p { min-height: 4.2em; font-size: 16px; line-height: 1.4; }
.in-vis { width: 100%; margin-top: auto; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--bevel); color: var(--c-ink); }
.in-perfil { display: flex; align-items: center; gap: 10px; }
.in-perfil .dai-av { width: 36px; height: 36px; }
.in-perfil > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.in-perfil b { font-size: 16px; font-weight: 600; }
.in-perfil small { font-size: 13px; color: var(--c-oat-800); }
.in-vis-k { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-oat-800); }
.in-elige { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.in-elige li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px dashed var(--c-oat-300); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--c-oat-800); }
.in-elige li.is-on { border: 1px solid var(--t-accent); background: var(--t-accent); color: #fff; }
.in-elige .ic { width: 14px; height: 14px; }
.in-accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.in-accesos li { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 10px; font-size: 14px; }
.in-accesos .ic { width: 18px; height: 18px; color: var(--t-ink); } /* tipos de herramienta (Lucide), no logos: 14 oct */
.in-accesos span { font-weight: 500; }
.in-accesos small { text-align: right; font-size: 12.5px; color: var(--c-oat-800); }
.in-regla { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--t-bg); font-size: 14px; font-weight: 500; color: var(--t-ink); }
.in-regla .ic { width: 16px; height: 16px; color: var(--t-accent); }
.in-linea { list-style: none; margin: 0; padding: 0; }
.in-linea li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0 7px 24px; font-size: 14.5px; font-weight: 500; }
.in-linea li::before { content: ""; position: absolute; left: 3px; top: 50%; width: 11px; height: 11px; translate: 0 -50%; border-radius: 50%; background: var(--t-accent); }
.in-linea li::after { content: ""; position: absolute; left: 8px; top: calc(50% + 7px); width: 1px; height: calc(100% - 14px); background: var(--t-chip); }
.in-linea li:last-child::after { display: none; }
.in-linea li:not(.is-on) { color: var(--c-muted-aa); }
.in-linea li:not(.is-on)::before { background: #fff; box-shadow: inset 0 0 0 2px var(--c-oat-300); }
.in-mes { flex: 0 0 64px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-accent); }
.in-linea li:not(.is-on) .in-mes { color: var(--c-muted-aa); }
/* Camino: dos o tres tareas, rutina, nuevas capacidades, un empleado digital más valioso */
.in-camino { margin-top: 16px; padding: 24px 32px 28px; border-radius: var(--r-md); background: #fff; }
.in-camino-t { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slushie-400); }
.in-cam { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.in-cam::before, .in-cam::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 19px; height: 2px; border-radius: 2px; background: var(--c-oat-200); }
.in-cam::after { background: var(--slushie-400); transform-origin: left center; }
.js .in-cam::after { transform: scaleX(0); transition: transform 1.4s var(--ease-out-quart); }
.js .in-cam.is-on::after { transform: none; }
.in-cam li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--c-ink); }
.in-dot { display: grid; place-items: center; width: 40px; height: 40px; }
.in-dot::before, .in-dot::after { content: ""; grid-area: 1 / 1; }
.in-dot::before {
width: var(--s); height: var(--s); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--slushie-400);
box-shadow: 0 0 0 5px #fff; rotate: calc(var(--g, 0) * 1deg);
}
.in-dot::after { width: calc(var(--s) * 0.44); height: calc(var(--s) * 0.44); border-radius: 60% 40% 38% 62% / 55% 61% 39% 45%; background: var(--slushie-200); rotate: calc(var(--g, 0) * -1.4deg); }
.js .in-cam li { opacity: 0.3; transition: opacity 0.5s ease; }
.js .in-cam.is-on li { opacity: 1; }
.js .in-cam.is-on li:nth-child(2) { transition-delay: 0.35s; }
.js .in-cam.is-on li:nth-child(3) { transition-delay: 0.7s; }
.js .in-cam.is-on li:nth-child(4) { transition-delay: 1.05s; }
/* Una sección, una pantalla (escritorio): con menos alto, se compacta por escalones (los mismos que las otras secciones) */
@media (min-width: 992px) and (min-height: 620px) and (max-height: 909px),
(min-width: 992px) and (max-width: 1319px) and (min-height: 620px) and (max-height: 1028px) {
.in { padding-block: 48px; }
.in-tray { padding: 32px 40px; }
.in-pasos { margin-top: 28px; gap: 12px; }
.in-card { gap: 12px; padding: 20px; }
.in-vis { padding: 14px; }
.in-camino { margin-top: 12px; padding: 18px 28px 20px; }
.in-cam { margin-top: 12px; }
/* 5 (antes 7): el Mes 1 lleva dos o tres y baja a dos renglones (Pato, 15 oct); así la card 03 no es la más alta y la
bandeja sigue entrando (a 1440x800 se pasaba por 13; a 1366x700, por 4) */
.in-linea li { padding-block: 5px; }
}
@media (min-width: 992px) and (min-height: 620px) and (max-height: 799px),
(min-width: 992px) and (max-width: 1319px) and (min-height: 620px) and (max-height: 909px) {
.in-tray { padding: 28px 32px; }
.in-head { row-gap: 10px; }
.in-h { font-size: 2.5rem; }
.in-pasos { margin-top: 20px; }
.in-card-p { min-height: 0; font-size: 15px; }
/* El camino en una sola franja: el título a la izquierda y los cuatro pasos al lado */
.in-camino { display: flex; align-items: center; gap: 24px; padding: 14px 24px; }
.in-camino-t { flex: none; }
.in-cam { flex: 1; margin-top: 0; }
.in-cam li { gap: 6px; font-size: 15px; }
}
@media (min-width: 992px) and (min-height: 620px) and (max-height: 699px),
(min-width: 992px) and (max-width: 1319px) and (min-height: 620px) and (max-height: 759px) {
.in { padding-block: 40px; }
.in-tray { padding: 20px 28px; }
.in-h { font-size: 2rem; }
.in-pasos { margin-top: 16px; }
.in-card { gap: 10px; padding: 16px; }
.in-card-p { font-size: 14.5px; }
.in-vis { padding: 12px; }
.in-vis-k { margin-top: 10px; }
.in-elige li { padding: 4px 8px; font-size: 13px; }
.in-accesos { gap: 8px; }
.in-regla { margin-top: 10px; padding-block: 6px; }
.in-linea li { padding-block: 5px; }
.in-camino { margin-top: 10px; padding-block: 10px; }
}
/* Escritorio angosto y tablet (768 a 1319): todo un poco más chico, para que nada se corte ni baje de renglón */
@media (min-width: 768px) and (max-width: 1319px) {
.in-card .eb-pill { padding-inline: 12px calc(12px - 0.03em); letter-spacing: 0.03em; }
.in-elige li { padding: 3px 7px; font-size: 12.5px; }
.in-accesos li { gap: 8px; font-size: 13px; }
.in-accesos small { font-size: 11.5px; }
.in-regla { font-size: 13px; }
.in-linea li { font-size: 13.5px; }
}
@media (min-width: 992px) and (max-width: 1319px) and (min-height: 620px) and (max-height: 759px) {
.in-card-p { font-size: 14px; line-height: 1.35; }
.in-vis-k { display: none; } /* "Para empezar": las pastillas se entienden solas */
.in-elige { margin-top: 10px; }
.in-tray { padding-block: 16px; }
.in-pasos { margin-top: 12px; }
.in-camino { padding-block: 8px; }
/* 2 (antes 4): el Mes 1 lleva dos o tres y baja a dos renglones (Pato, 15 oct); así la card 03 no pasa a la 02 y la
bandeja sigue entrando a 1080x620 */
.in-linea li { padding-block: 2px; }
}
/* Celular (hasta 767): todo apilado. En tablet (768 a 991) siguen las tres cards en fila, como en compu */
@media (max-width: 767px) {
.in-head { grid-template-columns: minmax(0, 1fr); }
.in-pasos { grid-template-columns: minmax(0, 1fr); }
.in-card-p { min-height: 0; }
/* Las pastillas de las cards, como en tablet: la que no entra en un renglón baja a dos dentro de su pastilla
(revisión, 15 oct: a 320, "03 Capacitación continua" se salía de la card, la página medía 355 de ancho, se corría
de costado y cortaba el botón del menú). La letra sigue en 12 (en celular, nada por debajo de 12); el espaciado y el
relleno, algo más cortos que los de clay.css, para que en un renglón entre desde 360 de ancho. */
.in-card .eb { max-width: 100%; }
.in-card .eb-pill { height: auto; min-height: 32px; padding: 6px calc(12px - 0.1em) 6px 12px; line-height: 1.3; letter-spacing: 0.1em; white-space: normal; }
}
/* Celular (hasta 767): el camino en vertical */
@media (max-width: 767px) {
.in { padding: 40px 0; }
.in-tray { padding: 28px 20px; }
.in-pasos { margin-top: 28px; }
.in-card { padding: 20px; }
.in-camino { padding: 20px; }
/* Herramientas por tipo (nombres más largos que las marcas de 5784505): lo que hace con cada una va debajo del nombre */
.in-accesos li { grid-template-columns: 20px minmax(0, 1fr); align-items: start; row-gap: 2px; }
.in-accesos .ic { margin-top: 1px; }
.in-accesos small { grid-column: 2; text-align: left; }
.in-cam { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.in-cam li { flex-direction: row; text-align: left; }
.in-cam::before, .in-cam::after { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
.in-cam::after { transform-origin: center top; }
.js .in-cam::after { transform: scaleY(0); }
}
/* Movimiento reducido: el camino ya lleno, sin transiciones */
@media (prefers-reduced-motion: reduce) {
.js .in-cam li, .js .in-cam::after { transition: none; }
}
/* ============ Cierre y pie (el pie simple de proximamente.html) ============ */
.em-cierre-p { max-width: 520px; margin: 16px auto 0; font-size: 16px; line-height: 1.4; color: var(--c-oat-800); }
/* Cierre con la ficha de lo elegido más arriba: texto y botón a la izquierda, ficha a la derecha (apilado en tablet y
celular: título, texto, ficha, botón). La ficha es la del armado (paso 4), en chico. */
.em-cierre-in {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "h ficha" "p ficha" "btn ficha";
grid-template-rows: 1fr auto 1fr; /* la ficha es más alta que el texto: título, texto y botón quedan juntos en el medio */
align-content: center; column-gap: 64px; max-width: 1040px; margin: 0 auto; text-align: left;
}
/* En compu, el cierre arranca donde arranca el resto: el borde del contenedor (2,5 % de cada lado) más el aire de adentro
de las cards, como el logo del pie que va justo debajo (40). Solo se nota con menos de 1200 de ancho, donde el máximo de
1040 ya no lo centra: a 1080 el título arrancaba a 20 del borde y el resto de las secciones a unos 60 (revisión, 15 oct). */
@media (min-width: 992px) {
.em-cierre { padding-inline: calc(2.5% + 40px); }
}
.em-cierre-in .h-cta { grid-area: h; align-self: end; }
.em-cierre-in .em-cierre-p { grid-area: p; margin: 16px 0 0; }
.em-cierre-btn { grid-area: btn; align-self: start; }
/* La ficha es la tarjeta del tender (más abajo): adelante la foto, el nombre, el área y con qué empieza; atrás, lo
que hace en esa responsabilidad, dónde trabaja y a quién responde. Hasta 340 de ancho; en compu, también del alto que
deje la pantalla (abajo, con el acomodo), así el cierre entra entero en una pantalla. Antes ese límite por alto valía
siempre y con el celular acostado (390 de alto) la ficha medía 123 de ancho, con letra de 4 a 6 (revisión, 15 oct). */
.em-ficha { grid-area: ficha; align-self: center; justify-self: end; width: min(340px, 100%); }
@media (min-width: 992px) and (min-height: 620px) {
.em-ficha { width: min(340px, calc((100vh - 220px) / 1.38), 100%); }
}
/* La foto casi entera y apoyada abajo, así el corte cae en el pecho y no en el cuello del suéter (revisión, 14 oct: con
Ori cortaba justo en el cuello). La caja es apenas más ancha que alta (1.12: se ve el 89 % del alto de la foto) y lo
que se recorta va más arriba que abajo (70 %): arriba se pierde un 7,5 % y abajo se ve hasta el 97 %. El rodete de Dai,
el que más alto llega, empieza en el 10 %. Para que entre, el nombre y el pie van un poco más juntos que en el tender. */
.em-ficha .tn-foto { aspect-ratio: 1.12; }
.em-ficha .tn-foto img { object-position: 50% 70%; }
/* El guiño (empleados.js, guino()): una capa del mismo tamaño que la foto, con el mismo encuadre (la regla de arriba vale
para las dos imágenes), que aparece un instante con un fundido cortito, como un parpadeo */
.em-ficha .tn-foto .em-guino { opacity: 0; transition: opacity 50ms linear; }
.em-ficha .tn-foto.is-guino .em-guino { opacity: 1; }
.em-ficha .tn-nombre { margin-top: 3.5cqw; }
.em-ficha .tn-pie { padding-top: 3.4cqw; }
.em-ficha-cap { margin-top: 2cqw; padding-right: 10cqw; font-size: 7cqw; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.em-ficha-tareas { list-style: none; display: grid; gap: 2.6cqw; margin: 4cqw 0 0; padding: 3.6cqw; border-radius: 4.5cqw; background: rgba(255, 255, 255, 0.55); }
.em-ficha-tareas li { display: grid; grid-template-columns: 8cqw minmax(0, 1fr); gap: 2.8cqw; align-items: start; font-size: 3.9cqw; line-height: 1.35; color: var(--c-ink); }
.em-ficha-tareas b { display: block; font-size: 3.3cqw; font-weight: 600; line-height: 1.3; color: var(--t-accent); }
.em-ficha-ti { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 2.4cqw; background: #fff; color: var(--t-accent); }
.em-ficha-ti .ic { width: 4.4cqw; height: 4.4cqw; }
.em-ficha .tn-datos { margin-top: auto; }
/* El paquete del Mes 1 (Pato, 15 oct; empleados.js, ficha()): sin el título grande, que ya está adelante ("Cobranzas y
2 más"); las filas, una por tarea, dicen cada nombre */
.em-ficha.is-paquete .em-ficha-cap { display: none; }
/* El botón de volver, arriba a la derecha. Con ".em-ficha" adelante para ganarle a ".tn-dorso > :not(.tn-brillo)" (más
abajo, misma fuerza): hasta el 15 oct quedaba relativo y aparecía abajo a la izquierda, pegado a la esquina. El rótulo
de arriba deja lugar para él (si no, el botón tapaba el "#01"). */
.em-ficha .tn-dorso > .em-ficha-volver { position: absolute; top: 3.6cqw; right: 3.6cqw; width: 9cqw; height: 9cqw; }
.em-ficha .tn-dorso > .tn-top { padding-right: 11cqw; }
/* En celular (también acostado) y en pantallas táctiles, nada de la ficha por debajo de 12 (revisión, 15 oct: medía de
10,6 a 11,5, y a 320 de ancho 8,3): los rótulos de arriba y "Empieza con", las tareas y los datos. Con el dedo, el botón
de volver mide 44 (medía de 23 a 31) y el rótulo y el título de atrás le dejan lugar. */
@media (max-width: 767px), (pointer: coarse) {
.em-ficha .tn-top, .em-ficha .tn-pie small { font-size: max(3.4cqw, 12px); }
.em-ficha-tareas li { font-size: max(3.9cqw, 12px); }
.em-ficha-tareas b { font-size: max(3.3cqw, 12px); }
.em-ficha .tn-datos div { font-size: max(4cqw, 12px); }
}
@media (pointer: coarse) {
.em-ficha .tn-dorso > .em-ficha-volver { width: max(9cqw, 44px); height: max(9cqw, 44px); }
.em-ficha .tn-dorso > .tn-top, .em-ficha-cap { padding-right: calc(max(9cqw, 44px) + 2cqw); }
}
/* ============ Tarjeta de empleado (tn-: la del tender, prueba-tender.html, y la ficha del cierre) ============
Frente con la foto del personaje (sin fondo, sobre el color de su rol), nombre y área; dorso con el tornasolado. Se da
vuelta cuando una caja de más arriba tiene is-vuelta. Los tamaños de adentro van en cqw (porcentaje de su ancho). */
.tn-tarjeta { position: relative; perspective: 1200px; container-type: inline-size; }
/* Inclinación hacia el mouse (rápida) y la vuelta (lenta), en capas separadas para que una no apure a la otra */
.tn-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s ease-out; }
.tn-tarjeta.is-mueve .tn-tilt { transition: transform 0.12s ease-out; }
.tn-giro {
position: relative; height: 138cqw; transform-style: preserve-3d;
transform: rotateY(var(--vuelta, 0deg)); transition: transform 0.8s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.is-vuelta .tn-giro { --vuelta: 180deg; }
/* Toques y clics: solo los recibe la cara que se ve. Las capas que giran (.tn-tilt, .tn-giro) y la cara de atrás quedan
en el mismo plano que la de adelante, y el navegador elegía cualquiera de las tres: dada vuelta, con el dedo, el 60 % de
arriba del dorso caía en la foto del frente y no respondía (revisión, 15 oct; portada y ficha del cierre), y en compu
el clic en "Arma a Mae" caía a veces en .tn-giro y no llevaba al armado (15 oct, a 1920x1080). */
.tn-tilt { pointer-events: none; }
.tn-cara { pointer-events: auto; }
.tn-dorso, .is-vuelta .tn-frente { pointer-events: none; }
.is-vuelta .tn-dorso { pointer-events: auto; }
.tn-cara {
position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqw 5cqw 5.5cqw; border: 0; border-radius: 7cqw;
background: #f6f5f3; color: var(--c-ink); text-align: left; font: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 34px -16px rgba(30, 25, 20, 0.35);
}
.tn-frente { cursor: pointer; }
.tn-frente:focus-visible, .tn-volver:focus-visible, .tn-armar:focus-visible { outline: 2px dashed #000; outline-offset: 3px; }
/* Tornasolado perlado, como una lámina holográfica (referencia de Pato, 13 oct): manchas grandes y suaves de pasteles
apagados (rosa arriba a la izquierda, celeste, verde agua y crema, lavanda abajo a la derecha) sobre un gris perla,
sin franjas. Cada mancha se corre distinto con el mouse (--sx, --sy) y con el balanceo (--ang): por eso los colores
cambian de lugar como en una lámina de verdad. Va en .tn-cara porque ahí ya llega la posición del mouse. */
.tn-cara {
--sx: calc(var(--px, 50%) - 50% + var(--ang, 0) * 3%); --sy: calc(var(--py, 40%) - 40%);
--foil:
radial-gradient(85% 62% at calc(8% + var(--sx) * 0.6) calc(4% + var(--sy) * 0.4), #f6c6dc, rgba(246, 198, 220, 0) 76%),
radial-gradient(80% 66% at calc(88% - var(--sx) * 0.7) calc(34% + var(--sy) * 0.3), #c0dcf6, rgba(192, 220, 246, 0) 78%),
radial-gradient(70% 50% at calc(56% + var(--sx) * 0.3) calc(60% - var(--sy) * 0.3), #f1f0cf, rgba(241, 240, 207, 0) 74%),
radial-gradient(70% 55% at calc(18% + var(--sx) * 0.5) calc(76% - var(--sy) * 0.4), #d9eed3, rgba(217, 238, 211, 0) 76%),
radial-gradient(85% 62% at calc(94% - var(--sx) * 0.4) calc(100% - var(--sy) * 0.3), #d3c4f5, rgba(211, 196, 245, 0) 78%),
linear-gradient(#ebe8f2, #ebe8f2);
}
/* Dorso: arriba de las manchas, un reflejo blanco donde está el mouse, un brillo ancho y suave que se cruza para el
otro lado (el efecto metal) y una sombra leve del lado opuesto al mouse. */
.tn-dorso { transform: rotateY(180deg); cursor: pointer;
background:
radial-gradient(circle at var(--px, 50%) var(--py, 40%), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 42%),
linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 70%)
calc(var(--px, 50%) + var(--ang, 0) * 4%) 0 / 200% 100% no-repeat,
radial-gradient(130% 100% at calc(100% - var(--px, 50%)) calc(100% - var(--py, 40%)), rgba(105, 95, 145, 0.12), rgba(105, 95, 145, 0) 65%),
var(--foil);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 34px -16px rgba(30, 25, 20, 0.35);
}
/* Frente */
.tn-top { display: flex; justify-content: space-between; font-size: 3.4cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-oat-800); }
.tn-top small { font-size: inherit; }
/* La foto va por encima del brillo tornasolado (z-index): el brillo queda solo en el fondo de la tarjeta, nunca sobre
la cara (Pato, 14 oct) */
.tn-foto {
position: relative; z-index: 1; display: block; margin-top: 3.5cqw; aspect-ratio: 1.08; border-radius: 5cqw; overflow: hidden;
background: radial-gradient(90% 90% at 50% 30%, var(--t-bg), var(--t-chip));
}
.tn-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* En el tender la foto se apoya abajo: lo que se recorta es aire de arriba, la cara sube y el corte cae en el pecho
(apoyada arriba cortaba en el cuello). Las fotos -hero son cuadradas y la caja apenas más ancha. */
.tn-col .tn-foto img { object-position: 50% 100%; }
.tn-sil[hidden] { display: none; }
.tn-sil { position: absolute; left: 50%; bottom: 0; width: 78%; translate: -50% 0; fill: var(--t-accent); opacity: 0.28; }
.tn-nombre { margin-top: 5cqw; font-size: 8.6cqw; font-weight: 560; line-height: 1.05; letter-spacing: -0.02em; }
.tn-area { margin-top: 1.6cqw; font-size: 5cqw; line-height: 1.25; color: var(--c-oat-800); }
.tn-pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4cqw; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.tn-pie small { font-size: 3.4cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink); }
/* Con qué empieza (empieza() en build-empleados.py): el mismo dato en el tender y en la ficha del cierre */
.tn-empieza { display: flex; flex-direction: column; gap: 1cqw; min-width: 0; }
.tn-empieza b { font-size: 5.2cqw; font-weight: 600; line-height: 1.15; color: var(--t-accent); }
.tn-flecha { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--c-ink); color: #fff; }
.tn-flecha svg { width: 55%; height: 55%; }
/* Brillo del frente al pasar el mouse: la misma lámina perlada, suave, con el reflejo blanco que sigue al mouse */
.tn-brillo {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
background: var(--foil); transition: opacity 0.35s ease;
}
.tn-frente::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
background: radial-gradient(circle at var(--px, 50%) var(--py, 40%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%);
}
.tn-tarjeta:hover .tn-brillo, .tn-tarjeta:focus-within .tn-brillo { opacity: 0.75; }
.tn-tarjeta:hover .tn-frente::after, .tn-tarjeta:focus-within .tn-frente::after { opacity: 1; }
/* Atrás el tornasolado es el fondo mismo del dorso: el brillo de encima sobra */
.tn-dorso > :not(.tn-brillo) { position: relative; z-index: 1; }
.tn-dorso .tn-brillo { display: none; }
/* Dorso */
.tn-id { display: flex; align-items: center; gap: 3.5cqw; margin-top: 4cqw; }
.tn-mini { position: relative; flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; overflow: hidden; background: var(--t-chip); }
.tn-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-mini .tn-sil { width: 90%; opacity: 0.4; }
.tn-id p { display: flex; flex-direction: column; min-width: 0; }
.tn-id b { font-size: 6.6cqw; font-weight: 600; line-height: 1.1; }
.tn-id small { font-size: 4cqw; line-height: 1.3; color: var(--c-oat-800); }
.tn-bio { margin-top: 4.5cqw; font-size: 5cqw; line-height: 1.35; }
.tn-k { margin-top: 4.5cqw; font-size: 3.4cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-accent); }
.tn-hace { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6cqw; margin: 2cqw 0 0; padding: 0; }
.tn-hace li { padding: 1cqw 3cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.75); font-size: 4cqw; line-height: 1.4; }
.tn-datos { margin: 4cqw 0 0; }
.tn-datos div { display: flex; justify-content: space-between; gap: 3cqw; padding: 2cqw 0; border-top: 1px solid rgba(0, 0, 0, 0.07); font-size: 4cqw; line-height: 1.3; }
.tn-datos dt { color: var(--c-oat-800); }
.tn-datos dd { margin: 0; font-weight: 500; text-align: right; }
.tn-dorso-pie { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: auto; padding-top: 3cqw; }
.tn-armar {
position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2cqw; padding: 2.6cqw 4cqw; border-radius: 99px;
background: var(--c-ink); color: #fff; font-size: 4.4cqw; font-weight: 500; text-decoration: none;
}
.tn-armar svg { width: 4.6cqw; height: 4.6cqw; }
.tn-volver { position: relative; z-index: 1; display: grid; place-items: center; width: 10cqw; height: 10cqw; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: var(--c-ink); cursor: pointer; }
.tn-volver svg { width: 55%; height: 55%; }
/* Pie (rediseño 14 oct), sobre la card avena de clay.html: arriba la marca (logo, qué es Pulso y "Hablemos") y tres
columnas de accesos que miden lo que su texto, sin cortar renglones, y se reparten el ancho que sobra; abajo, una
franja fina con el año. En tablet la marca va sola arriba; en celular todo va en una columna y cada
enlace mide 44 de alto (lo cómodo para el dedo). Los roles llevan la cara de su empleado, como en el resto de la página. */
/* Compacto y angosto (Pato, 14 oct: menos aire, contenido más angosto): la card mide como mucho 1040 de ancho (antes el
ancho del contenedor, 1280) y la banda verde, la card y la franja del año tienen menos aire. A 1920x1080 el cierre
entero y el pie entran juntos en la última pantalla, con aire debajo del menú. */
.em-pie-wrap { padding-top: 56px; }
.em-pie { max-width: 1040px; gap: 0; padding: 36px 48px 0; }
.em-pie-cols {
display: grid; grid-template-columns: minmax(200px, 280px) repeat(3, max-content);
justify-content: space-between; align-items: start; gap: 32px 40px;
}
.em-pie-marca { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.em-pie-logo { display: inline-flex; color: #000; }
.em-pie-logo svg { display: block; width: auto; height: 30px; }
.em-pie-frase { margin-top: 12px; max-width: 280px; font-size: 15px; line-height: 1.5; color: var(--c-oat-800); }
.em-pie-btn { margin-top: 16px; box-shadow: var(--shadow-input); }
.em-pie-btn:hover { background: var(--c-oat-btn); box-shadow: var(--shadow-input-hover); }
.em-pie .pie-col { gap: 10px; }
.em-pie-lista { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.em-pie-lista li { display: flex; } /* sin renglón alrededor del enlace: todas las filas miden lo mismo, con cara o sin ella */
.em-pie .em-pie-lista a {
display: inline-flex; align-items: center; gap: 10px; min-height: 30px;
font-size: 15px; line-height: 1.3; color: var(--c-oat-800); white-space: nowrap; overflow-wrap: normal;
}
.em-pie .em-pie-lista a:hover { color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.em-pie-rol .dai-av { width: 24px; height: 24px; }
.em-pie-contacto a > svg { flex: none; width: 18px; height: 18px; margin-inline: 3px; } /* 24 de caja, como las caras */
.em-pie-base {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
margin-top: 28px; padding: 14px 0 18px; border-top: 1px solid var(--c-border);
font-size: 14px; line-height: 1.4; color: var(--c-oat-800);
}
.em-pie-base small { font-size: inherit; }
@media (prefers-reduced-motion: no-preference) {
.em-pie-rol .dai-av { transition: transform 0.2s var(--ease-out-quart); }
.em-pie-rol:hover .dai-av { transform: scale(1.12); }
}
@media (max-width: 1199px) {
.em-pie { padding-inline: 40px; }
.em-pie-cols { grid-template-columns: minmax(180px, 280px) repeat(3, max-content); column-gap: 28px; }
}
@media (max-width: 991px) {
.em-pie { padding: 32px 36px 0; }
.em-pie-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); row-gap: 28px; }
.em-pie-marca { grid-column: 1 / -1; }
.em-pie-frase { max-width: 520px; }
.em-pie .em-pie-lista a { white-space: normal; }
}
@media (max-width: 767px) {
.em-pie-wrap { padding-top: 40px; }
.em-pie { padding: 28px 20px 0; }
.em-pie-cols { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.em-pie-marca { grid-column: auto; }
.em-pie-logo { padding-block: 8px; margin-block: -8px; } /* el logo lleva al inicio: 44 de alto para el dedo */
.em-pie-logo svg { height: 28px; }
.em-pie-frase { font-size: 16px; }
.em-pie-btn { align-self: stretch; min-height: 44px; }
.em-pie .pie-col { gap: 4px; }
.em-pie .em-pie-lista { gap: 0; }
.em-pie .em-pie-lista a { min-height: 44px; font-size: 16px; }
.em-pie-contacto .em-pie-lista { flex-direction: row; flex-wrap: wrap; column-gap: 24px; }
.em-pie-base { flex-direction: column; margin-top: 24px; padding: 16px 0 24px; }
}
/* ============ Escritorio base (992 a 1279) ============ */
@media (max-width: 1279px) {
.ce-cap-b { gap: 8px; padding-right: 12px; font-size: 14px; }
.ce-fila { grid-template-columns: 132px minmax(0, 1fr); }
.cn-ps { left: 4%; width: min(680px, 58%); } /* hasta 680 (antes 600): ver .wa-side */
.cn-panel { right: 4%; }
}
/* ============ El scroll se acomoda solo en cada sección (escritorio) ============
Lo hace empleados.js (acomodar): al terminar de mover la ruedita o el trackpad, la página sigue hasta la sección
siguiente en esa dirección. Acá solo la distancia al menú: cada sección queda a 16 de él (también con los enlaces). No
es scroll-snap del navegador: con "mandatory", un movimiento corto vuelve a la sección de antes y la página se siente
trabada (las secciones miden casi una pantalla). */
@media (min-width: 992px) and (min-height: 620px) {
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
/* Al ir por el menú, el foco pasa a la sección (empleados.js): sin el recuadro punteado alrededor de toda la sección */
main > section[tabindex="-1"]:focus { outline: none; }
/* Conocé ocupa la pantalla entera debajo del menú, como las otras secciones (Pato, 13 oct: era más baja y el
acomodo se la salteaba, porque su parada quedaba muy cerca de la siguiente). El texto queda centrado en el alto. */
.ce-card { min-height: calc(100vh - var(--nav-h) - 32px); }
.ce-copy { justify-content: center; }
/* Final natural (Pato, 14 oct): el cierre y el pie (el mismo de perfiles y el armado) quedan con su alto propio, sin
aire agregado. La última parada es el final de la página: la parte de abajo del cierre y el pie entero. */
}
/* ============ Una sección, una pantalla (escritorio) ============
Conocé, Trabaja donde trabajás vos y Cómo se incorpora entran enteras debajo del menú, con 16 de aire arriba y abajo:
cada bloque mide como mucho el alto de la pantalla menos 91 (menú 59 + 32). Con menos alto se compactan por escalones
(909, 799 y 699 de alto); con menos de 620 de alto hay scroll normal, como en clay.css. En escritorio angosto (hasta
1199 de ancho) los textos bajan más de renglón, así que cada escalón arranca un escalón antes (1028 y 909). */
@media (min-width: 768px) {
/* (Los ejemplos de responsabilidad uno encima del otro ahora valen en todos los anchos: arriba, con el pase) */
/* El escenario de Dai toma el alto de la columna de texto, sin mínimo propio de 680 */
.ce-frame { min-height: 0; }
.ce-stage { min-height: 400px; }
/* Títulos en un renglón también a 1280 (antes, "¿Qué puede hacer por vos?" bajaba a dos y la card crecía 48) */
.ce-h { font-size: min(var(--fs-h3), 3.5vw); }
}
/* Sin la industria, la columna de texto de Conocé es más baja: con 800 de alto o más, el escenario no baja de 540 (si no,
a 1280 de ancho las responsabilidades de abajo tocan el núcleo) */
@media (min-width: 992px) and (min-height: 800px) {
.ce-stage { min-height: 540px; }
}
/* Trabaja donde trabajás vos: el título y los canales arriba, y la charla toma el alto que queda (entre 330 y 620;
hasta el 15 oct, 560) */
@media (min-width: 992px) and (min-height: 620px) and (max-height: 1028px) {
.cn > .container { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h) + 32px); } /* 64 de aire arriba + el bloque */
.cn-stage { flex: 1 1 auto; height: auto; min-height: 330px; max-height: 620px; }
.cn-ps { height: calc(100% - 40px); }
.cn-block { height: 68%; }
.cn-panel { top: clamp(0px, calc(100% - 300px), 96px); }
}
@media (min-width: 992px) and (min-height: 620px) and (max-height: 909px),
(min-width: 992px) and (max-width: 1199px) and (min-height: 620px) and (max-height: 1028px) {
.ce-copy { padding-block: 32px; }
.ce-cap { --sy: 0.92%; } /* con el escenario más bajo, la de arriba no toca el rótulo "Dai · rol" */
.ce-h { margin-top: 12px; }
.ce-p { margin-top: 12px; }
.ce-roles { margin-top: 20px; }
.ce-dets { margin-top: 16px; }
.ce-det { padding: 16px 20px 10px; }
.ce-filas { margin-top: 8px; }
.ce-fila { padding: 8px 0; }
.cn > .container { padding-top: 48px; height: calc(100vh - var(--nav-h) + 16px); }
.cn .h2 { font-size: min(3.5rem, 4.4vw); }
.cn-stage { margin-top: 32px; }
}
@media (min-width: 992px) and (min-height: 620px) and (max-height: 799px),
(min-width: 992px) and (max-width: 1199px) and (min-height: 620px) and (max-height: 909px) {
.ce-copy { padding-block: 28px; }
.ce-h { font-size: min(2.5rem, 3.5vw); }
.ce-p { display: none; } /* la instrucción de uso; los roles y las responsabilidades ya se ven tocables */
.ce-rol-b { height: 40px; padding: 8px 14px; font-size: 15px; }
.ce-det-top .tile { width: 32px; height: 32px; }
.ce-det-t { font-size: 20px; }
.ce-fila { padding: 7px 0; }
.ce-fila dd { font-size: 15px; }
.ce-nucleo { width: 140px; height: 140px; }
.ce-forma.is-a { inset: 22px; }
.ce-forma.is-b { inset: 6px; }
.ce-onda { inset: 20px; }
.ce-nombre { font-size: 24px; }
.ce-cap { --sy: 0.84%; } /* la de arriba no toca el rótulo "Dai · rol" */
.cn .h2 { font-size: min(3rem, 4.2vw); }
.cn-bajada { margin-top: 8px; font-size: 20px; }
.cn-desc { font-size: 16px; }
.cn-descs { margin-top: 10px; }
.cn-chip { height: 40px; padding: 8px 14px; font-size: 15px; }
.cn-stage { margin-top: 24px; }
}
@media (min-width: 992px) and (min-height: 620px) and (max-height: 699px),
(min-width: 992px) and (max-width: 1199px) and (min-height: 620px) and (max-height: 759px) {
.ce-copy { padding-block: 24px; }
.ce-h { margin-top: 8px; }
.ce-roles { margin-top: 16px; }
.ce-rol-b { height: 36px; padding-block: 6px; }
.ce-det-top .tile { width: 28px; height: 28px; }
.ce-det-t { font-size: 18px; }
.ce-dets { margin-top: 12px; }
.ce-det { padding: 12px 16px 6px; }
.ce-fila { padding: 6px 0; }
.ce-fila dd { font-size: 14.5px; }
.cn > .container { padding-top: 40px; height: calc(100vh - var(--nav-h) + 8px); }
.cn .h2 { font-size: min(2.5rem, 4vw); }
.cn-stage { margin-top: 20px; }
}
/* Escritorio angosto y tablet (768 a 1199): todo un poco más chico para que nada se corte ni baje
de renglón (los roles en una fila desde 992 y en tablet de a dos, el núcleo sin tocar las responsabilidades, la pastilla de "Capacitación continua"
dentro de su card). Va después de los escalones de alto para ganarles. */
@media (min-width: 768px) and (max-width: 1366px) {
.ce-rol-b { padding-inline: 13px; font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.ce-copy { padding-left: 36px; }
/* 13 y 9 (antes 13,5 y 10): de 992 a 1023 los cuatro roles pedían 443 y había 427 a 442, y "Recursos humanos"
bajaba a otra fila (revisión, 15 oct, a 1024x768) */
.ce-rol-b { padding-inline: 9px; font-size: 13px; }
.ce-fila { grid-template-columns: 116px minmax(0, 1fr); }
.ce-nucleo { width: 130px; height: 130px; }
.ce-forma.is-a { inset: 20px; }
.ce-forma.is-b { inset: 6px; }
.ce-onda { inset: 18px; }
.ce-nombre { font-size: 22px; }
.ce-cap-b { gap: 6px; padding: 5px 10px 5px 5px; font-size: 13px; }
.ce-cap-b .tile { width: 26px; height: 26px; border-radius: 8px; }
}
/* ============ Tablet (hasta 991): el menú con el botón de tres rayas (clay.css) ============
Las secciones van en columnas como en compu desde 768 de ancho (Pato, 14 oct: en una ventana de 900 o 960, la mitad
de una pantalla, todo pasaba a una columna como en el celular). Apiladas, solo en celular (hasta 767). */
@media (max-width: 991px) {
.em .hero-h1 { font-size: clamp(2.75rem, 9vw, 4.5rem); }
.em-portada { padding-top: calc(57px + 40px); }
.em-portada .hero-in { padding-bottom: calc(var(--hero-overlap) + 32px); }
.wa-side { flex-basis: 170px; }
.sl-side { flex-basis: 130px; }
}
/* ============ Tablet en columnas (768 a 991): como compu, un poco más chico ============
Va después de los escalones de alto y de "escritorio angosto" (que también valen acá) para ganarles. */
@media (min-width: 768px) and (max-width: 991px) {
/* Conoce: el escenario mide unos 330 de ancho. Las responsabilidades más chicas y más cerca del centro (--sx, como
--sy en lo alto), así las de los costados no se salen del marco (a 768, "Reporte de ventas" quedaba 10 afuera) */
.ce-copy { padding-left: 28px; }
/* Las cuatro áreas, de a dos en una grilla pareja (revisión, 15 oct: "Recursos humanos" bajaba sola a una segunda
fila). En una fila no entran: piden unos 420 y esta columna tiene de 330 (a 768) a 435 (a 991); achicarlas hasta
que entren las dejaría ilegibles. Mide lo mismo que las dos filas de antes. */
.ce-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-media { padding: 16px; }
.ce-cap { --sx: 0.86%; }
.ce-cap-b { gap: 6px; padding: 4px 9px 4px 4px; font-size: 12.5px; }
.ce-cap-b .tile { width: 24px; height: 24px; border-radius: 7px; }
.ce-nucleo { width: 120px; height: 120px; }
.ce-forma.is-a { inset: 18px; }
.ce-onda { inset: 16px; }
/* Dónde trabajan: el título y los canales a la par; la ventana un poco más ancha y el panel más angosto, abajo a la
derecha (sin las listas de chats y de canales, como en celular: no entran) */
.cn-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
.cn .h2 { font-size: min(3rem, 5vw); }
.cn-bajada { font-size: 18px; }
.cn-ps { left: 3%; width: 60%; }
.cn-panel { top: auto; bottom: 24px; right: 3%; width: 240px; padding: 16px; }
.sl-side, .wa-side, .sl-rail, .sl-gente { display: none; }
/* Cómo se incorporan: las tres cards siguen en fila, con menos relleno; la etiqueta de "Capacitación continua", si no
entra en un renglón, baja a dos dentro de su pastilla */
.in-tray { padding-inline: 16px; }
.in-pasos { gap: 10px; }
.in-card { padding: 14px; }
.in-card .eb { max-width: 100%; }
.in-card .eb-pill { height: auto; min-height: 32px; padding: 6px 10px; font-size: 11px; line-height: 1.3; letter-spacing: 0.02em; white-space: normal; }
/* Herramientas: lo que hace con cada una va debajo del nombre (como en celular) */
.in-accesos li { grid-template-columns: 20px minmax(0, 1fr); align-items: start; row-gap: 2px; }
.in-accesos .ic { margin-top: 1px; }
.in-accesos small { grid-column: 2; text-align: left; }
.in-camino { padding-inline: 16px; }
.in-camino-t { white-space: nowrap; }
.in-cam li { font-size: 14px; }
/* Cierre: el texto y la ficha a la par */
.em-cierre-in { column-gap: 40px; }
}
/* ============ Celular (hasta 767): todo apilado ============ */
@media (max-width: 767px) {
/* Orden apilado: roles, Dai y sus responsabilidades, el ejemplo y la industria (al tocar una, el ejemplo queda abajo) */
.ce-card { display: flex; flex-direction: column; }
.ce-copy { display: contents; }
.ce-copy > * { margin-inline: 32px; }
.ce-copy > .eb { order: 1; align-self: flex-start; margin-top: 40px; }
.ce-h { order: 2; }
.ce-p { order: 3; }
.ce-roles { order: 4; }
.ce-media { order: 5; padding: 20px 16px 0; }
.ce-dets { order: 6; width: auto; max-width: none; min-height: 0; margin: 16px 16px 16px; }
.ce-frame { min-height: 620px; }
.cn-stage { height: auto; padding-bottom: 24px; }
.cn-block { height: 72%; }
.cn-ps { position: relative; left: auto; width: min(600px, 100%); height: 540px; margin: 0 auto; }
.cn-panel { position: relative; top: auto; right: auto; width: min(560px, calc(100% - 32px)); margin: 16px auto 0; }
.em-cierre-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "ficha" "btn"; grid-template-rows: none; max-width: 560px; text-align: center; }
.em-cierre-in .em-cierre-p { margin-inline: auto; }
.em-ficha { justify-self: center; margin-top: 28px; text-align: left; }
.em-cierre-btn { justify-content: center; }
}
/* ============ Celular (hasta 767): el núcleo arriba y las responsabilidades en dos columnas ============ */
@media (max-width: 767px) {
.ce { padding-bottom: 40px; }
.ce-copy > * { margin-inline: 20px; }
.ce-copy > .eb { margin-top: 28px; }
.ce-roles { margin-top: 20px; }
.ce-dets { margin: 12px 12px 12px; }
.ce-rol-b { height: 40px; font-size: 14px; }
.ce-det { padding: 16px 16px 10px; }
.ce-det-t { font-size: 20px; }
.ce-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ce-media { padding: 16px 12px 0; }
.ce-frame { min-height: 0; }
.ce-stage { flex: none; min-height: 0; }
.ce-rol { position: relative; inset: auto; padding: 28px 12px 16px; }
.ce-lineas { display: none; }
.ce-nucleo { position: relative; left: auto; top: auto; width: 150px; height: 150px; margin: 0 auto; translate: none; }
.ce-forma.is-a { inset: 24px; }
.ce-onda { inset: 22px; }
.ce-rol-t { left: 12px; top: 12px; }
.ce-rol { padding-top: 52px; }
.ce-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.ce-cap { position: static; translate: none; }
.ce-cap-b { width: 100%; padding: 6px 10px 6px 6px; white-space: normal; text-align: left; font-size: 14px; }
.cn > .container { padding-top: 40px; }
.cn-desc { font-size: 18px; }
.cn-stage { margin-top: 32px; }
.cn-block { height: 80%; }
/* La ventana de la charla, más alta (revisión, 15 oct: con 520 fijos, a 375 la charla tenía 468 de los 631 a 838 que
pide y se veía cortada): cerca de 640, pero sin pasar del alto de la pantalla debajo del menú, así se ve entera
(a 375x667 queda en 584), y nunca menos que los 520 de antes. Lo que igual no entra lo resuelve empleados.js
(encuadrar, en canales()): se ocultan enteros los mensajes más viejos. */
.cn-ps { height: clamp(520px, calc(100svh - var(--nav-h) - 24px), 640px); }
.sl-side, .wa-side, .sl-rail, .sl-gente { display: none; }
.ml-resp { padding-left: 18px; }
.wa-hilo { padding-inline: 16px; }
.wa-head-i { display: none; }
.cn-panel { width: calc(100% - 24px); padding: 16px; }
}
/* Celular angosto (menos de 360): las responsabilidades de dos en dos con un poco más de lugar para la palabra más
larga (revisión, 15 oct: a 320, "Incorporación", "Seguimientos" y "Evaluaciones" eran 10, 7 y 4 más anchas que su
botón y se salían). A 360 ya entran como están. */
@media (max-width: 359px) {
.ce-rol { padding-inline: 8px; }
.ce-caps { gap: 6px; }
.ce-cap-b { gap: 6px; padding-right: 8px; font-size: 13px; }
}
/* Pantallas táctiles: las áreas y las responsabilidades de Conoce con 44 de alto como mínimo, para el dedo (revisión,
15 oct: las áreas medían 40 en celular y las responsabilidades 32 con el celular acostado o en tablet). Con mouse no
cambia nada. */
@media (pointer: coarse) {
.ce-rol-b, .ce-cap-b { min-height: 44px; }
}
/* En celular (también acostado) y en pantallas táctiles, nada por debajo de 12 (revisión, 15 oct: medían 11): la
etiqueta "Ejemplo" (la del ejemplo de Conoce, la de las charlas y la del paso 4 del armado) y "Para empezar" de
Cómo se incorporan. Igual que los rótulos chicos de la portada (más abajo, con los 44 de alto). */
@media (max-width: 767px), (pointer: coarse) {
.ce-ejemplo, .cn-ejemplo, .in-vis-k { font-size: 12px; }
}
/* Lo mismo en tablet y celular acostado con el dedo (revisión, 15 oct): en Cómo se incorporan, las pastillas de las
cards (11 de 768 a 991) y lo que hace con cada herramienta ("Lee y deja borradores", 11,5 de 768 a 1319). Con mouse
siguen como estaban. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1319px) {
.in-card .eb-pill, .in-accesos small { font-size: 12px; }
}
/* ============ Movimiento reducido: el núcleo quieto, sin ondas ni pulsos ============
Lo de la primera regla se ve, pero sin animación: la forma queda quieta (sin giro, --ce-ang en 0) y la cara derecha
adentro. Ojo al tocar esta lista: tiene que terminar en su propia llave. (14 oct: al sacar la credencial se borró la
llave junto con su última línea, la lista se pegó a la de las ondas y con movimiento reducido se ocultaban la forma,
la cara, las charlas y las responsabilidades de la home y del armado.) */
@media (prefers-reduced-motion: reduce) {
.ce-forma, .ce-cara, .ce-pulso.is-on, .cn-escribe i, .cn-paso.is-espera .cn-paso-i, .cn-m.is-v, .cn-p.is-in, .ce-det.is-in, .ce-det.is-sale,
.ce-rol.is-in .ce-nucleo, .ce-rol.is-in .ce-lineas, .ce-rol.is-in .ce-cap { animation: none !important; }
.ce-onda { display: none; }
.tn-giro, .tn-tilt { transition: none; }
}
/* ============ Portada: el tender (va al final: así pisa lo de la portada de clay.css y de más arriba) ============
La arma build-empleados.py (portada()). Fondo blanco, solo el
título arriba, los cuatro empleados digitales colgados de un hilo y los botones abajo; el menú aparece al bajar.
Cada tarjeta: frente con la foto del personaje, nombre y área; atrás, con fondo tornasolado, qué hace y el botón para
armarlo. Se mueven como colgadas (prueba-tender.js: el mouse las empuja y van frenando solas), brillan y se dan
vuelta al pasar el mouse. Los tamaños de adentro de la tarjeta van en cqw (porcentaje de su ancho). */
/* ============ Portada blanca ============ */
.tn-portada { padding-top: 40px; background: #fff; color: var(--c-ink); } /* sin menú arriba: el contenido sube */
.tn-in { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
/* Arriba: la etiqueta y el título a la izquierda (el título, un 20 % más chico que antes); a la derecha un texto corto
y la línea "Empleados digitales que crecen con tu empresa", chiquitos (como en la referencia de Framer). En compu, desde 1080 de
ancho, el texto va en un solo renglón y la columna mide lo que él (Pato, 15 oct; antes 340 de ancho, en dos o tres
renglones); en tablet y celular puede partirse. */
.tn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.tn-eb, .tn-meta {
display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--c-muted-aa);
}
.tn-eb i, .tn-meta i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ube-400); }
.tn-meta i { background: #17a06b; }
.em .tn-h1 { max-width: none; margin-top: 22px; font-size: clamp(2.2rem, 0.8rem + 2.72vw, 3.8rem); line-height: 1.02; color: var(--c-ink); }
.tn-lado { flex: 0 1 340px; padding-top: 44px; }
.tn-lado-p { font-size: 15px; line-height: 1.7; color: var(--c-muted-aa); }
@media (min-width: 1080px) {
.tn-lado { flex-basis: auto; }
.tn-lado-p { white-space: nowrap; }
}
.tn-meta { margin-top: 18px; }
.tn-acc { display: block; color: var(--ube-400); }
.tn-portada .btn--oat { background: var(--c-oat-btn, #f1efea); color: #000; }
.tn-portada .btn--oat:hover { background: var(--c-oat-btn-hover, #e9e6df); }
/* Abajo: los botones, a la izquierda (sin la ayuda "Pasá el mouse..." a la derecha: Pato, 14 oct) */
.tn-abajo { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 4px; }
/* ============ El menú aparece al bajar (en la portada no está) ============ */
.nav { transition: translate 0.45s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.3s ease; }
html.tn-sin-nav .nav:not(:focus-within):not(.is-open) { translate: 0 -130%; opacity: 0; pointer-events: none; }
/* ============ El tender ============ */
/* Un solo tender con los cuatro, a cualquier ancho de compu o tablet. Con pantalla ancha mide lo mismo que el texto;
si el texto queda angosto (menos de 1110), el tender se estira más allá, hasta 24 del borde de la pantalla, así las
tarjetas no quedan tan chicas.
Ancho de cada tarjeta: sale del ancho del tender (cqw), así las cuatro siempre entran y no se corta ninguna, con
unos 45 de aire entre una y otra (a 1440, 213 de ancho); si al balancearse se tocan, se chocan (prueba-tender.js).
En pantallas bajas, el ancho también sale del alto.
--fila: alto del tender (hilo, broche, tarjeta y lo que baja al balancearse).
--n: cuántas cuelgan (las primeras; en celular, dos) y --paso: la distancia entre broches, en fracción del ancho
(22 %). Con eso cada tarjeta sabe dónde va (.tn-col) y el grupo queda siempre centrado en el hilo. */
.tn-tender {
--tw: min(18cqw, max(140px, calc((100vh - 400px) * 0.66)), 224px); --th: calc(var(--tw) * 1.38); --fila: calc(114px + var(--th));
--n: 4; --paso: 0.22; --dorso: 200;
container-type: inline-size; margin: 24px calc(50% - max(50%, min(50vw - 24px, 555px))) 0;
}
.tn-tender-in { position: relative; height: var(--fila); }
.tn-hilo { position: absolute; left: -2%; top: 0; width: 104%; height: 60px; overflow: visible; }
.tn-hilo path { fill: none; stroke: #a8a39b; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.tn-tarjetas { list-style: none; margin: 0; padding: 0; }
/* Cada empleado cuelga de su punto del hilo: se balancea desde ahí. --d: cuánto se corre del medio del tender (en
fracción del ancho), según su número (--i). La altura es la de la curva del hilo en ese punto (la del SVG: baja de 6
en las puntas a 30 en el medio). */
.tn-col {
--d: calc((var(--i) - (var(--n) - 1) / 2) * var(--paso));
position: absolute; left: calc(50% + var(--d) * 100%); top: calc(30px - 96px * var(--d) * var(--d)); width: var(--tw); translate: -50% 0;
transform-origin: 50% 0; rotate: var(--giro); animation: tnVaiven calc(5.2s + var(--i) * 0.7s) ease-in-out calc(var(--i) * -1.3s) infinite alternate;
}
.tn-tender.tn-fisica .tn-col { animation: none; } /* con JS se mueven con física (prueba-tender.js) */
.tn-col::before { /* el hilito del broche al hilo */
content: ''; position: absolute; left: 50%; top: 0; width: 1.4px; height: calc(var(--cuerda) + 4px); translate: -50% 0; background: #a8a39b;
}
.tn-broche {
position: absolute; left: 50%; top: calc(var(--cuerda) - 4px); z-index: 2; width: 18px; height: 22px; translate: -50% 0;
border-radius: 5px 5px 7px 7px; background: linear-gradient(#e9e7e3, #c9c5be); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.15);
}
.tn-broche::before { content: ''; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; translate: -50% 0; border: 2px solid #b9b4ac; border-radius: 50%; }
.tn-col .tn-tarjeta {
width: 100%; margin-top: calc(var(--cuerda) + 10px); transform-origin: 50% 0;
transition: scale 0.5s cubic-bezier(0.2, 0.85, 0.25, 1), translate 0.5s cubic-bezier(0.2, 0.85, 0.25, 1),
width 0.5s cubic-bezier(0.2, 0.85, 0.25, 1), margin-left 0.5s cubic-bezier(0.2, 0.85, 0.25, 1);
}
/* En compu con mouse (desde 1080 de ancho), si las tarjetas quedaron chicas (ventana angosta o baja), la que se da vuelta
se agranda en su lugar hasta --dorso de ancho (unos 200) para que se lea, y pasa por encima de las otras. --zoom lo
calcula empleados.js (ubicar()) para cada tarjeta: hasta 1,6 y sin tapar los botones de abajo (revisión, 15 oct: con
pantallas bajas, de 620 a 675 de alto, Mae tapaba 42 de "Conoce al equipo" y Dai pisaba "Arma tu empleado digital").
Si abajo no le alcanza, sube lo que falta (--sube), sin tapar el título: en esas pantallas bajas, así el dorso sigue
midiendo unos 200 de ancho. Subida (is-sube) pasa por encima de su broche, que si no le queda en el medio del dorso. */
.tn-col.is-vuelta { z-index: 3; }
.tn-col.is-vuelta .tn-tarjeta { scale: var(--zoom, 1); translate: 0 var(--sube, 0px); }
.tn-col.is-sube .tn-tarjeta { z-index: 3; }
/* ============ Tarjeta flotante (celular y tablet) ============
En pantallas táctiles o de menos de 1080 de ancho, y siempre que se la toque con el dedo (Pato, 15 oct: en celular y
tablet el dorso se leía en 6 a 9 px y la tarjeta dada vuelta tapaba los botones). Al tocarla se da vuelta y se agranda
hasta casi todo el ancho de la pantalla (16 de aire a los costados; en tablet, hasta --flota de ancho, así no queda un
cartel), centrada en la pantalla y derecha, por encima del resto de la portada y sobre un velo. Nunca se sale de la
pantalla: si no entra de alto (celular acostado), se achica hasta entrar. Se cierra tocándola, tocando afuera (el velo),
con Escape o al mover la página. De frente quedan como siempre.
empleados.js (ubicar()) calcula su ancho (--ancho) y cuánto se corre (--fx, --fy) desde donde cuelga. Se agranda con
el ancho de verdad y no con scale (Pato, 15 oct: en el celular se veía un poco pixelada; agrandada con scale, el
navegador puede dibujarla al tamaño chico y estirarla): los tamaños de adentro van en cqw, así que crece todo parejo
y se dibuja nítida a su tamaño final; margin-left la mantiene centrada en su broche mientras crece. is-flota queda
puesta también mientras vuelve a su lugar, así pasa por encima de todo hasta el final; tn-alta (en la portada y el
tender), lo mismo: la portada pasa por encima de Conoce (que se le monta abajo) y no recorta de alto; tn-flota (en la
raíz), solo mientras está abierta: el velo y el menú escondido (si no, en el celular acostado tapaba la parte de arriba).
Letra: nada del dorso mide menos de 12 en la tarjeta abierta, ni "Arma a ..." y el botón de volver menos de 44 de alto:
--piso y --dedo son esos 12 y 44 pasados a cqw de su ancho final (empleados.js), así mientras crece o se achica todo
va en proporción. */
.tn-tender { --flota: 440; }
.tn-portada.tn-alta { z-index: 4; overflow: clip visible; }
.tn-tender.tn-alta { position: relative; z-index: 5; }
.tn-tender-in::before {
content: ''; position: absolute; inset: -300vh -100vw; z-index: 2; background: rgba(24, 22, 20, 0.24);
opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
html.tn-flota .tn-tender-in::before { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
html.tn-flota .nav:not(.is-open) { translate: 0 -130%; opacity: 0; pointer-events: none; }
.tn-col.is-flota { z-index: 4; rotate: 0deg !important; transition: rotate 0.5s cubic-bezier(0.2, 0.85, 0.25, 1); }
.tn-col.is-flota.is-vuelta .tn-tarjeta {
width: var(--ancho, 100%); margin-left: calc((100% - var(--ancho, 100%)) / 2); scale: none; translate: var(--fx, 0) var(--fy, 0);
}
.tn-col.is-flota .tn-tarjeta { z-index: 3; } /* por encima de su broche, que si no queda pegado en el medio del dorso */
.tn-col.is-flota .tn-dorso .tn-top, .tn-col.is-flota .tn-k { font-size: max(3.4cqw, var(--piso, 0px)); }
.tn-col.is-flota .tn-id small, .tn-col.is-flota .tn-hace li, .tn-col.is-flota .tn-datos div { font-size: max(4cqw, var(--piso, 0px)); }
.tn-col.is-flota .tn-bio { font-size: max(5cqw, var(--piso, 0px)); }
.tn-col.is-flota .tn-armar { min-height: var(--dedo, 0px); font-size: max(4.4cqw, var(--piso, 0px)); }
.tn-col.is-flota .tn-volver { width: max(10cqw, var(--dedo, 0px)); height: max(10cqw, var(--dedo, 0px)); }
@keyframes tnVaiven { from { rotate: calc(var(--giro) - 1.6deg); } to { rotate: calc(var(--giro) + 1.6deg); } }
.tn-col:hover, .tn-col.is-vuelta { animation-play-state: paused; }
/* Al abrir la página las tarjetas ya están colgadas en su lugar (hasta el 14 oct caían una detrás de la otra: Pato
pidió sacarlo) */
/* Mini gesto (Pato, 14 oct): Mae sube las cejas, Ori sube las cejas por encima de los anteojos y Noa sube una ceja (Dai guiña: abajo), un
instante. Encima de la foto, capas del mismo tamaño y encuadre que la foto (misma caja y mismo recorte que ella),
transparentes salvo la zona del gesto: la que se mueve (.tn-g-mueve: en Mae y Ori solo las cejas, sobre una capa
quieta con la piel sin las cejas; en Noa, un recorte de la foto con el borde difuminado) y, encima, quieto, lo que va
delante (pelo, ojos, pecas, el marco de los anteojos). Quietas son iguales a la foto, así que solo se muestran durante
el gesto (empleados.js pone is-gesto). Lo que se mueve va y vuelve en 600 ms: sube suave, se queda un instante y
baja suave. Cuánto (--g-x y --g-y), desde dónde (--g-ox y --g-oy), en px de la foto, y cuánto gira (--g-r) y se
estira (--g-ex, --g-ey) salen de GESTOS en build-empleados.py (gesto_estilo()); las capas, de
clay-generadores/gestos-tender.py.
--g-px: un px de la foto en la tarjeta (la foto mide 90cqw, la tarjeta menos 5cqw de cada lado, y tiene 720 px).
Lo que se anima es --g-k (de 0 a 1) y el transform sale de ahí: así el navegador dibuja el recorte igual que la foto
de abajo. Animando el transform directo, lo pasa a la placa de video y lo dibuja apenas distinto (los bordes de la
ceja cambian un poco al empezar y al terminar el gesto, medido el 14 oct); lo mismo si la capa no tiene la misma
caja que la foto. Sin @property, empleados.js no lo pide. */
@property --g-k { syntax: ''; inherits: false; initial-value: 0; }
.tn-gesto { --g-px: calc(90cqw / 720); position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.tn-col.is-gesto .tn-gesto { visibility: visible; }
.tn-col.is-gesto .tn-g-mueve {
transform-origin: calc(var(--g-ox, 360) * var(--g-px)) calc(100% - (720 - var(--g-oy, 360)) * var(--g-px)); /* la foto se apoya abajo */
transform: translate(calc(var(--g-x, 0) * var(--g-k) * var(--g-px)), calc(var(--g-y, 0) * var(--g-k) * var(--g-px)))
rotate(calc(var(--g-r, 0) * var(--g-k) * 1deg)) scale(calc(1 + (var(--g-ex, 1) - 1) * var(--g-k)), calc(1 + (var(--g-ey, 1) - 1) * var(--g-k)));
animation: tnGesto 600ms both;
}
@keyframes tnGesto {
0% { --g-k: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
42% { --g-k: 1; animation-timing-function: linear; }
54% { --g-k: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
100% { --g-k: 0; }
}
/* El guiño de Dai (Pato, 15 oct): adelante va su foto con los ojos abiertos y su capa (.tn-g-guino, el ojo guiñado de la
foto original) no se mueve: aparece con un fundido cortito, se queda unos 300 ms y se va, como el guiño de la ficha
del cierre. Entra en la misma ronda que los gestos (empleados.js), así que dura lo mismo (600 ms): al final, nada. */
.tn-col.is-gesto .tn-g-guino { animation: tnGuino 600ms both; }
@keyframes tnGuino {
0% { opacity: 0; }
8% { opacity: 1; }
50% { opacity: 1; }
58%, 100% { opacity: 0; }
}
/* ============ Celular (hasta 767): el texto abajo del título y solo Dai y Mae ============ */
/* Las cuatro en fila quedarían ilegibles: cuelgan las dos primeras, centradas, sin tira para deslizar (Pato, 14 oct).
El tender va de borde a borde de la pantalla (hasta 460, centrado); cada tarjeta mide el 41 % de ese ancho y entre
las dos queda un 7 % de aire (--paso, 41 + 7), así inclinadas no se tocan quietas. Las de más se ocultan (si cambia
--n, cambiar el nth-child) y empleados.js las deja fuera de los choques. Dada vuelta es la tarjeta flotante (más
arriba): por eso el tender ya no deja lugar abajo para la tarjeta agrandada (hasta el 15 oct crecía con --zoom y la
agrandaba hasta 180 de ancho en su lugar, con letra de 6 a 9). */
@media (max-width: 767px) {
.tn-head { flex-direction: column; }
.tn-lado { flex: none; padding-top: 0; }
.tn-tender { --n: 2; --paso: 0.48; --tw: 41cqw; margin-inline: calc(50% - min(50vw, 230px)); }
.tn-col:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tn-col { animation: none; }
.tn-col .tn-tarjeta { transition: none; }
.tn-gesto { display: none; } /* sin gesto (empleados.js tampoco lo pide) */
}
/* ============ Pantallas táctiles: 44 de alto para el dedo (revisión, 15 oct) ============
Vale para las tres páginas (home, armado y perfiles cargan este archivo). Con el dedo, todo lo que se toca mide al
menos 44 de alto: los botones y las pastillas de Clay (medían 42, los chicos 39 y las de canal de la home 40), el menú
de arriba (el logo, los enlaces, "Hablemos", las tres rayas, "Salir" del armado y el "Hablemos" del panel abierto), la
X del diálogo "Hablemos" y, en el pie, el logo y los enlaces (con el celular derecho ya medían 44; acostado y en
tablet, 30). Va por "pointer: coarse" y no por ancho: así cubre el celular acostado y la tablet, y en la compu con
mouse no cambia nada. El menú sigue midiendo lo mismo (59, y 57 en celular): el aire de arriba y abajo de la barra
baja lo que crecen los botones, y adentro quedan justo 44. */
@media (pointer: coarse) {
.btn, .chip { min-height: 44px; }
.nav-bar { padding-top: 6.5px; padding-bottom: 7.5px; }
.nav-bar .logo { min-height: 44px; }
.nav-links a { height: 44px; }
.nav-menu-btn { width: 44px; height: 44px; }
.dlg-x { width: 44px; height: 44px; }
}
@media (pointer: coarse) and (max-width: 767px) {
.nav-bar { padding-top: 5.5px; padding-bottom: 6.5px; }
}
@media (pointer: coarse) and (min-width: 768px) {
.em-pie-logo { padding-block: 7px; margin-block: -7px; } /* en celular ya lo tiene (regla del pie, hasta 767) */
.em-pie .em-pie-lista { gap: 0; }
.em-pie .em-pie-lista a { min-height: 44px; }
}
/* Los rótulos chiquitos de arriba ("Pulso · El equipo" y "Empleados digitales que crecen con tu empresa" en la portada de la home, "Perfiles
disponibles" y "05 perfiles para empezar" en perfiles) en 12 en celular y en pantallas táctiles (medían 11) */
@media (max-width: 767px), (pointer: coarse) {
.tn-eb, .tn-meta { font-size: 12px; }
}
/* ============ Menú de tres rayas (celular y tablet): el panel mide lo que su contenido (Pato, 15 oct) ============
Antes ocupaba toda la ventana (inset: 0, de clay.css) con "Hablemos" pegado abajo, y en el iPhone se veía más largo que
la pantalla: con las barras de Safari, la ventana no es lo que se ve, y "Hablemos" quedaba debajo de la barra de abajo.
Ahora baja desde arriba con su contenido (los enlaces y, debajo, "Hablemos"), con las puntas de abajo redondeadas como
la barra del menú, y el resto de la página queda detrás de un velo (.nav-velo, va en build-empleados.py, nav():
tocarlo cierra el menú, clay.js). Nunca pasa del alto que se ve (dvh, con el de la ventana para navegadores viejos):
si no entra, se desplaza adentro, sin mover la página de atrás. */
.nav-panel {
bottom: auto; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
justify-content: flex-start; gap: 16px; padding-bottom: 24px; border-radius: 0 0 24px 24px;
box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.25);
}
/* El velo: debajo del menú (que va en 9999), con cursor de mano (con mouse, tocarlo cierra) y sin arrastrar la página
de atrás. Para que el iPhone mande el toque escucha el clic (un script vacío al lado, en nav()) */
.nav-velo { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(27, 26, 24, 0.4); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
html.menu-open .nav-velo { display: block; }