/* Signature designs (public/designs.js), shared by the pages and the GIF recorder (lib/animated.js): the customers' designs
   (.cp, .m-<motion>, at the end). --acc is the accent of the person on the root .rs;
   decorative gradients stay fixed. Every cycle divides the GIF's 4.8 s loop (lib/gif.js would fit it to one), so a page
   plays exactly what the GIF plays. */
/* ====== shared ====== */
.rs { --c: #111; font-family: "Geist", Arial, sans-serif; color: #111; width: 100%; max-width: 380px; min-width: 0; text-align: left; position: relative; }
.rs .row { display: flex; gap: 18px; align-items: center; }
.rs .ph { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; position: relative; z-index: 1; flex: none; }
.rs .nm { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.rs .rl { font-size: 12.5px; color: #6e6e73; margin-top: 3px; }
/* the labels share one column as wide as the longest (es "correo"), at least 34 px; each row stays a box of its own */
.rs .ct { font-size: 12px; color: #3a3a3c; display: grid; grid-template-columns: minmax(34px, max-content) minmax(0, 1fr); gap: 3px 0; margin-top: 12px; }
.rs .ct > * { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.rs .ct b { font-weight: 500; color: #a1a1a6; padding-right: 6px; }
.rs .soc { display: flex; gap: 7px; margin-top: 12px; }
.rs .soc i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; }
.rs .soc i svg { width: 13px; height: 13px; display: block; }
/* photo slot without a photo: the logo as a mark, else initials; a logo next to a photo goes under the signature */
.rs .ph.mark { object-fit: contain; background: #fff; border-radius: 18px; }
.rs .ph.mono { display: grid; place-items: center; background: var(--acc); color: #fff; font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.rs .bm { display: block; max-height: 24px; max-width: 140px; margin-top: 12px; }
/* a white or nearly white logo (designs.js logoTile) on a tile of the brand colour or near-black: on white it vanished */
.rs .on-tile, .rs .ph.mark.on-tile { background: var(--tile); }
.rs .ph.mark.on-tile { box-sizing: border-box; padding: 12%; }
.rs .bm.on-tile { box-sizing: content-box; padding: 6px 10px; border-radius: 8px; }
/* each platform's own colours ride on its icon (public/platforms.js brandVars): the brand colour, a multicolour tile, a dark mark */
.rs .soc.brand i { background: var(--pg, var(--pc)); color: var(--pi, #fff); }
/* a link's site icon (lib/site-icon.js): an opaque square, filling the tile like an app icon */
.rs .soc i[data-k="site"] { overflow: hidden; } .rs .soc i[data-k="site"] img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.rs .soc.pulse i { animation: tap 2.4s ease-in-out infinite; }
.rs .soc.pulse i:nth-child(2) { animation-delay: .22s; } .rs .soc.pulse i:nth-child(3) { animation-delay: .44s; } .rs .soc.pulse i:nth-child(4) { animation-delay: .66s; } .rs .soc.pulse i:nth-child(5) { animation-delay: .88s; }
@keyframes tap { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.28); } 20% { transform: scale(.94); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(40,200,64,.6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(40,200,64,0); } }

/* ====== the customers' designs (DESIGNS): three low layouts, a motion each ======
   One geometry for every motion: the photo slot is the same 64 px box in every layout (a 56 px photo and room for its accent), so a motion
   never moves the layout, and the text column keeps room at the end of its last line for the "Save contact" button. Every
   first frame is the whole signature at rest (Outlook shows only that one). */
.cp { --cp-ph: 56px; --cp-slot: 64px; --cp-gap: 16px; --cp-logo: 22px; width: fit-content; max-width: 380px; }
.cp .cp-row { display: flex; align-items: center; gap: var(--cp-gap); }
.cp .cp-slot { position: relative; flex: none; width: var(--cp-slot); height: var(--cp-slot); display: grid; place-items: center; }
.cp .cp-slot > * { grid-area: 1 / 1; }
.cp .ph { width: var(--cp-ph); height: var(--cp-ph); }
.cp .ph.mono { font-size: 21px; }
.cp .ph.mark { border-radius: 14px; }
.cp .cp-tx { min-width: 248px; }
/* one line each, a long one ends in an ellipsis: every person's signature is as high as the next (all of it is on his card) */
.cp .nm { font-size: 16px; line-height: 20px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .rl { font-size: 12px; line-height: 16px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the contacts in one line, a dot between: what wraps to a second line is hidden, so the height never grows; a hidden one
   never widens the signature (the line takes the width the rest gives it) */
.cp .ct { display: flex; flex-wrap: wrap; height: 16px; overflow: hidden; contain: inline-size; margin-top: 6px; font-size: 12px; line-height: 16px; }
.cp .ct > * { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp .ct > * + *::before { content: "·"; margin: 0 7px; color: #c7c7cc; }
/* the last line: the icons, the logo small and inline, the button */
.cp .cp-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cp .soc { margin-top: 0; gap: 16px 5px; min-width: 0; flex-shrink: 8; height: 20px; flex-wrap: wrap; overflow: clip; overflow-clip-margin: 10px; } /* one line: an icon that does not fit goes whole (out of sight), a pulse keeps its room */
.cp .soc i { width: 20px; height: 20px; border-radius: 6px; background: var(--acc); }
.cp .soc i svg { width: 11px; height: 11px; }
.cp .bm { flex: 0 1 auto; min-width: 0; display: block; margin: 0; height: var(--cp-logo); width: auto; max-height: none; max-width: 120px; object-fit: contain; object-position: left center; }
.cp .bm.on-tile { height: calc(var(--cp-logo) - 8px); padding: 4px 8px; border-radius: 6px; }
.cp .cta { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* every layout as high as itself, whatever he writes (designs.js LAYOUTS): lines he has not filled leave the others
   centred beside the photo, so a pasted signature never changes its height */
.cp-classic .cp-row { height: 90px; }
.cp-classic .cp-foot { height: 22px; }
/* card: the name and title with the logo on their right; under a hairline the contacts and, at their end, the icons */
.cp-card { width: 380px; }
.cp-card .cp-row { height: 76px; }
.cp-card .cp-tx { flex: 1; min-width: 0; }
.cp-card .cp-top, .cp-card .cp-bottom { display: flex; align-items: center; gap: 12px; }
.cp-card .cp-who { flex: 1; min-width: 0; }
.cp-card .cp-top .bm { flex: none; max-width: 110px; }
.cp-card .cp-bottom { height: 22px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #ececef; box-sizing: content-box; }
.cp-card .cp-bottom .ct { flex: 1; min-width: 0; margin-top: 0; }
.cp-card .cp-end { flex: 0 1 auto; min-width: 0; max-width: 55%; display: flex; align-items: center; gap: 10px; } /* the contacts keep most of the line */
/* columns: the name, the title and the logo; beside them, after a line in the brand colour, the phone and the website on
   lines of their own (the e-mail is on his card), then the button and the icons – what does not fit that line is hidden */
.cp-columns { width: 380px; }
.cp-columns .cp-row { height: 66px; }
.cp-columns .cp-who { flex: 1 1 auto; min-width: 0; }
.cp-columns .cp-who .bm { margin-top: 6px; max-width: 110px; }
.cp-columns .cp-reach { flex: 0 1 auto; min-width: 0; max-width: 150px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 14px; border-left: 2px solid var(--acc); }
.cp-columns .ct { display: block; height: 36px; margin-top: 0; contain: none; }
.cp-columns .ct > * { line-height: 18px; }
.cp-columns .ct > :nth-child(n+3) { display: none; }
.cp-columns .ct > * + *::before { content: none; }
.cp-columns .cp-end { display: flex; align-items: center; gap: 8px; height: 22px; }
.cp-columns .cp-end:empty { display: none; }
.cp-columns .cp-end .soc { flex: 1 1 0; }
.cp-columns.m-save .cp-reach { flex-shrink: 0; } /* room for the whole button: the name takes the ellipsis */

/* the hand that shows the signature can be clicked (designs.js cpHint): it glides in to the photo, clicks it with a ripple
   in the brand colour and glides away, once per loop – nowhere in the first frame, and nowhere while nothing plays */
.cp .cp-hint { position: absolute; left: 47px; top: 45px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.cp .cp-hint-hand { position: absolute; left: -6px; top: -2px; width: 19px; height: 19px; overflow: visible; opacity: 0; transform-origin: 6px 2px; fill: #fff; stroke: #1d1d1f; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .28)); animation: cp-hint-hand 4.8s infinite; }
.cp .cp-hint-crease { fill: none; }
.cp .cp-hint-ring { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); box-sizing: border-box; opacity: 0; animation: cp-hint-ring 4.8s infinite; }
@keyframes cp-hint-hand {
  0%, 36% { opacity: 0; transform: translate(var(--cp-hx, 26px), var(--cp-hy, 20px)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  50% { opacity: 1; transform: translate(0, 0); animation-timing-function: ease-in-out; }
  54% { opacity: 1; transform: translate(0, 0) scale(.84); animation-timing-function: ease-out; }
  59%, 66% { opacity: 1; transform: translate(0, 0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  80%, 100% { opacity: 0; transform: translate(var(--cp-lx, 20px), var(--cp-ly, 24px)); }
}
@keyframes cp-hint-ring {
  0%, 54% { opacity: 0; transform: scale(.2); }
  55% { opacity: .9; transform: scale(.3); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  74%, 100% { opacity: 0; transform: scale(1.15); }
}
/* the hand on another part he named (designs.js compact: .cp-hint-at holds it – the button itself, a box around the logo,
   the name's own block): the point it clicks inside that part, and the way it comes and goes – from above on the bottom
   line, so it stays inside the GIF's frame */
.cp .cp-hint-at { position: relative; }
.cp .cp-bmw { display: flex; flex: 0 1 auto; min-width: 0; width: fit-content; max-width: 100%; }
.cp-card .cp-top .cp-bmw { flex: none; }
.cp .cp-hint-cta { left: 62%; top: 62%; --cp-hx: 18px; --cp-hy: -22px; --cp-lx: 14px; --cp-ly: -24px; }
.cp .cp-hint-logo { left: 50%; top: 60%; --cp-hx: 18px; --cp-hy: -22px; --cp-lx: 14px; --cp-ly: -24px; }
.cp-card .cp-hint-logo { --cp-hx: -26px; --cp-hy: 18px; --cp-lx: -22px; --cp-ly: 22px; } /* on the top line at the right edge: from the left */
.cp .cp-hint-name { left: 34px; top: 13px; }

/* glow (the owner's favourite): a rainbow halo turns behind the photo, a blurred copy of it glows */
.m-glow .cp-slot::before, .m-glow .cp-slot::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: conic-gradient(#ff6b6b, #ffb86b, #7c5cff, #2bd4c5, #ff6b6b); animation: spin 4.8s linear infinite; }
.m-glow .cp-slot::after { filter: blur(8px); opacity: .6; }
.m-glow .ph { box-shadow: 0 0 0 3px #fff; }

/* orbs: three soft orbs in the brand's colours circle the photo – the accent, a lighter and a darker shade of it */
.m-orbs .cp-orb { position: absolute; inset: -6px; animation: spin 4.8s linear infinite; pointer-events: none; }
.m-orbs .cp-orb:nth-child(2) { animation-direction: reverse; }
.m-orbs .cp-orb:nth-child(3) { animation-duration: 2.4s; }
.m-orbs .cp-orb::before { content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--acc); filter: blur(6px); }
.m-orbs .cp-orb:nth-child(2)::before { top: auto; bottom: 2px; width: 17px; height: 17px; margin-left: -8.5px; background: color-mix(in srgb, var(--acc) 45%, #fff); }
.m-orbs .cp-orb:nth-child(3)::before { top: 30px; left: 2px; margin-left: 0; width: 14px; height: 14px; background: color-mix(in srgb, var(--acc) 70%, #000); }
.m-orbs .ph { box-shadow: 0 0 0 3px #fff; position: relative; z-index: 1; }

/* ring: the company's name turns slowly round the photo – a third, half or whole turn per loop (designs.js ringOf) */
.m-ring .cp-ringtext { position: absolute; left: -10px; top: -10px; width: 84px; height: 84px; overflow: visible; animation: cp-turn 4.8s linear infinite; }
.m-ring .cp-ringtext text { font: 600 7px "Geist", Arial, sans-serif; letter-spacing: 1.4px; fill: var(--acc); }
@keyframes cp-turn { to { rotate: var(--cp-turn, 360deg); } }

/* holo: the name shimmers in iridescent colours; the gradient travels exactly its own width per loop (seamless) */
.m-holo .nm { width: fit-content; max-width: 100%; padding: .15em 0; margin: -.15em 0; background: linear-gradient(90deg, #8b5cf6, #ec4899, #06b6d4, #f59e0b, #8b5cf6) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 4.8s linear infinite; }
@keyframes holo { to { background-position: 200% 0; } } /* the image is 200 % of the name: 200 % moves it one whole tile, where the repeat starts again */

/* logo: the logo is drawn in from the left once per loop (whole in the first frame); without a logo beside the details,
   what is in the photo slot (the logo as a mark, the photo or the initials) */
.m-logo .bm, .m-logo:not(:has(.bm)) .cp-slot > .ph { animation: cp-draw 4.8s linear infinite; }
@keyframes cp-draw {
  0%, 56% { clip-path: inset(0 0 0 0); opacity: 1; }
  60% { clip-path: inset(0 0 0 0); opacity: 0; }
  60.5% { clip-path: inset(0 100% 0 0); opacity: 0; }
  61% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  84%, 100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* badge: the logo in a white disc on the photo's lower right corner, half out of the photo, ringed in white over it,
   with a soft shadow; the logo fills the disc (3 px inside it: a tall crest fits the circle whole; a square logo's corners are clipped to it); the disc beats (fx heartbeat, designs.js MOTIONS), the photo stays still. The disc is the logo
   part, so the chat moves it (right, bottom…), resizes it (width and height) and gives it other animations. */
.m-badge .cp-badge { position: absolute; right: -7px; bottom: -2px; z-index: 2; width: 28px; height: 28px; box-sizing: border-box; padding: 3px; border-radius: 50%;
  overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .28); }
.m-badge .cp-badge-logo { display: block; width: 100%; height: 100%; object-fit: contain; }