/* The sign-up screens of self-provisioning (SignupLayout.razor, which says why they wear the look of
   www.recepcion24.com). The palette and the font are in brand.css. Every rule is scoped to .su. It sat inside the
   layout until 2026-10-18. */
body:has(.su){background:var(--bg)}
.su{min-height:100vh;color:var(--ink);font-size:17px;line-height:1.6;font-family:var(--font);-webkit-font-smoothing:antialiased}
.su a{color:var(--blue)} .su a:hover{color:var(--blue-d)}
.su .su-top{background:#fff;border-bottom:1px solid var(--line)}
.su .su-in{max-width:1160px;margin:0 auto;padding:0 24px}
.su .su-top .su-in{padding-top:16px;padding-bottom:16px}
/* The wordmark (Wordmark.razor, its colours in brand.css), laid out as the site's own .wordmark: a flex line, the same gap after
   the dot and after «Recepción». */
.su .su-mark{display:inline-flex;align-items:center;gap:.18em;font-size:26px;font-weight:800;letter-spacing:-.03em;
    line-height:1;color:var(--ink);white-space:nowrap}
.su .su-mark:hover{text-decoration:none;color:var(--ink)}
.su .su-main{padding-top:56px;padding-bottom:96px}
.su h1{font-size:2.5rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);max-width:22ch}
.su .su-lead{font-size:1.15rem;color:var(--muted);margin:0 0 40px;max-width:60ch}
/* The form and the price side by side on a computer, the form first; one column on a phone. */
.su .su-pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.su .su-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.su .su-card.main{border:2px solid var(--blue);box-shadow:0 20px 50px rgba(37,99,235,.12)}
.su .su-field{margin-bottom:18px}
.su label small{font-size:.85rem;font-weight:400;color:var(--muted);margin-left:4px}
.su .su-help{margin:6px 0 0;font-size:.9rem;color:var(--muted)}
/* A card alone (the screen behind the mailed link): as wide as the form card of the sign-up. */
.su .su-one{max-width:620px}
.su .su-body{font-size:1.1rem;margin:0 0 20px}
/* The waiting screen while the employee reads the site (SignupReading.razor): one panel of the site's colours that drift,
   her face with three rings that grow, and four steps that light one after the other on the screen's own clock, each in
   its colour (--c), with a turning ring while it is on (--at) and a tick when it is done (--done). The last step has no
   end: it turns until the read ends and the screen leaves. A bar under them fills to 92% in about 14 seconds. */
.su .su-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:56px;border-radius:28px;
    border:1px solid var(--line);box-shadow:0 30px 80px rgba(15,23,42,.10);background-color:#fff;background-size:130% 130%;
    background-image:radial-gradient(50% 60% at 5% 10%,rgba(37,99,235,.32),transparent 70%),radial-gradient(45% 55% at 95% 5%,rgba(249,115,22,.32),transparent 70%),
        radial-gradient(50% 60% at 80% 95%,rgba(20,184,166,.34),transparent 70%),radial-gradient(45% 55% at 15% 95%,rgba(139,92,246,.26),transparent 70%);
    animation:su-drift 9s ease-in-out infinite alternate}
@keyframes su-drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.su .su-read h1{max-width:none}
.su .su-read .su-lead{margin:0}
.su .su-face{position:relative;width:128px;height:128px;margin-bottom:28px}
.su .su-face svg{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;background:#fff;
    box-shadow:0 0 0 5px #fff,0 14px 34px rgba(15,23,42,.18)}
.su .su-face i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--blue);opacity:0;animation:su-ring 2.4s ease-out infinite}
.su .su-face i:nth-child(2){border-color:var(--orange);animation-delay:.8s}
.su .su-face i:nth-child(3){border-color:#14B8A6;animation-delay:1.6s}
@keyframes su-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
.su .su-progress{padding:32px;border-radius:20px;background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:0 12px 32px rgba(15,23,42,.06)}
.su .su-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:20px}
.su .su-steps li{--c:var(--blue);--at:0s;--done:3s;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;font-size:1.05rem;
    font-weight:600;color:var(--faint);animation:su-lit .4s var(--at) forwards}
.su .su-steps li:nth-child(2){--c:#14B8A6;--at:3s;--done:7s}
.su .su-steps li:nth-child(3){--c:var(--orange);--at:7s;--done:11s}
.su .su-steps li:nth-child(4){--c:#8B5CF6;--at:11s;--done:9999s}
@keyframes su-lit{to{color:var(--ink)}}
.su .su-dot{position:relative;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line);
    animation:su-dot-on .3s var(--at) forwards,su-dot-done .3s var(--done) forwards}
@keyframes su-dot-on{to{border-color:var(--c)}}
@keyframes su-dot-done{to{border-color:var(--c);background:var(--c);box-shadow:0 6px 16px color-mix(in srgb,var(--c) 40%,transparent)}}
.su .su-dot::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:3px solid transparent;border-top-color:var(--c);opacity:0;
    animation:su-spin .8s linear infinite,su-on .2s var(--at) forwards,su-off .2s var(--done) forwards}
.su .su-dot svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
    stroke-linejoin:round;opacity:0;animation:su-on .3s var(--done) forwards}
@keyframes su-spin{to{transform:rotate(360deg)}}
@keyframes su-on{to{opacity:1}}
@keyframes su-off{to{opacity:0}}
.su .su-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.su .su-bar i{display:block;width:4%;height:100%;border-radius:inherit;background-size:200% 100%;
    background-image:linear-gradient(90deg,var(--blue),#14B8A6,var(--orange),#8B5CF6,var(--blue));
    animation:su-fill 14s cubic-bezier(.2,.7,.3,1) forwards,su-flow 2.5s linear infinite}
@keyframes su-fill{to{width:92%}}
@keyframes su-flow{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.su .su-read,.su .su-face i,.su .su-bar i{animation-duration:30s}.su .su-dot::before{animation-duration:3s,.2s,.2s}}
.su label{display:block;margin:0 0 6px;font-size:.95rem;font-weight:600;color:var(--charcoal)}
.su input[type=text],.su input[type=email]{display:block;width:100%;max-width:none;padding:13px 14px;font:inherit;font-size:1rem;
    color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;transition:border-color .12s,box-shadow .12s}
.su input[type=text]:focus,.su input[type=email]:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.su .su-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 24px;font-size:.95rem;font-weight:400;color:var(--charcoal)}
.su .su-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.su .su-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 26px;border:0;border-radius:10px;
    background:var(--cta);color:#fff;font:inherit;font-size:1.1rem;font-weight:700;line-height:1;cursor:pointer;transition:background .12s,transform .12s}
.su .su-go:hover{background:var(--cta-d);transform:translateY(-1px)}
/* A wrong field: a red edge, and its message under it (Signup.razor). Under the box of the conditions, the message takes the gap below the box. */
.su input[aria-invalid=true]{border-color:var(--err-ink)}
.su .su-field-err{margin:6px 0 0;font-size:.9rem;font-weight:600;color:var(--err-ink)}
.su .su-check:has(+ .su-field-err){margin-bottom:0}
.su .su-check + .su-field-err{margin:6px 0 24px}
.su .su-err{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-ink);border-radius:10px;padding:12px 14px;margin-bottom:20px;font-size:.95rem}
.su .su-done{text-align:center;padding:16px 0}
.su .su-done span{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;
    background:var(--ok-chip);color:var(--good);margin-bottom:12px}
.su .su-done svg{width:28px;height:28px}
.su .su-done p{font-size:1.2rem;font-weight:700;margin:0}
.su .su-price h2{font-size:1.25rem;line-height:1.35;font-weight:800;margin:0 0 12px;color:var(--ink);text-transform:none;letter-spacing:0}
.su .su-ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.su .su-ticks li{display:grid;grid-template-columns:auto 1fr;gap:10px;color:var(--charcoal)}
.su .su-ticks svg{color:var(--good);margin-top:5px}
.su .su-then{border-top:1px solid var(--line);margin:24px 0 0;padding-top:20px;color:var(--muted);font-weight:600}
.su .su-amount{font-size:3.25rem;line-height:1;font-weight:800;letter-spacing:-.03em;margin:8px 0 6px}
.su .su-amount small{font-size:1.05rem;font-weight:600;letter-spacing:0;color:var(--muted)}
.su .su-note{color:var(--muted);margin:0 0 16px}
/* The cookie banner (SignupLayout): the one of www.recepcion24.com, in the colours of .su. consent.js shows it while no choice is stored. */
.su .su-cookies{position:fixed;left:0;right:0;bottom:0;z-index:1100;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:14px 24px;background:var(--charcoal);color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.su .su-cookies[hidden]{display:none}
.su .su-cookies p{margin:0;font-size:.9rem;line-height:1.5;max-width:62ch;color:rgba(255,255,255,.85)}
.su .su-cookies a{color:#fff;text-decoration:underline}
.su .su-cookies-actions{display:flex;gap:10px;flex:none}
.su .su-cookies button{font:inherit;font-size:.95rem;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer}
.su .su-cookies .su-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.su .su-cookies .su-ghost:hover{background:rgba(255,255,255,.1)}
.su .su-cookies .su-ok{background:var(--blue);color:#fff;border:0}
.su .su-cookies .su-ok:hover{background:var(--blue-d)}
@media (max-width:860px){.su .su-pair,.su .su-read{grid-template-columns:minmax(0,1fr)} .su .su-read{gap:32px;padding:32px}}
@media (max-width:640px){
    .su .su-card{padding:22px}
    .su .su-read{padding:22px;border-radius:20px} .su .su-progress{padding:22px} .su .su-face{width:96px;height:96px}
    .su .su-in{padding:0 16px}
    .su .su-main{padding-top:32px;padding-bottom:56px}
    .su h1{font-size:1.85rem}
    .su .su-lead{font-size:1.05rem;margin-bottom:24px}
    .su .su-mark{font-size:22px}
    /* A slim bar on a phone, as on www.recepcion24.com (site.css): one sentence and the link, the buttons in a row at the
       right. The full banner hid the form's terms box and its button (growth-review of 2026-11-05, recommendation 5). */
    .su .su-cookies{flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px}
    .su .su-cookies p{font-size:.8rem;line-height:1.4}
    .su .su-cookies-more{display:none}
    .su .su-cookies-actions{justify-content:flex-end}
    .su .su-cookies button{padding:9px 16px;font-size:.9rem}
}