/* Login de Sellport (2026-10-30). Sólo la pantalla de inicio de sesión (#login): escena clara con el disco
de canales al centro y la tarjeta de acceso encajada en él. Capas en el orden en que se diseñaron. */
/* ===== sellport-login ===== */
/* Login de Sellport, versión clara pasada por Taste, UX Designer y Transitions.
Un solo protagonista: el instrumento, un disco azul noche donde cada marketplace manda su luz al núcleo
Sellport. Todo lo demás es plano y callado: suelo claro liso, una franja de tono para el acceso,
una sola letra (Schibsted Grotesk), texto en tinta completa, sin etiquetas en mayúsculas, sin vidrio,
sin degradados de adorno y sin sombras en reposo. El color vive en el disco y en el polvo de canales.
La versión oscura anterior quedó en sellport-login-oscuro.css. */
:root {
/* Escala de movimiento de transitions.dev. */
--duration-stagger:40ms; --duration-quick:150ms; --duration-fast:250ms; --duration-slow:400ms; --duration-very-slow:500ms;
--ease-smooth-out:cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out:ease-in-out; --ease-linear:linear;
--distance-medium:12px; --blur-medium:3px;
/* Tokens de color del acceso. */
--sp-suelo:#eef0f5; --sp-papel:#ffffff; --sp-tinta:#11152b; --sp-tinta-2:#4a5068; --sp-linea:#d9dce6; --sp-borde:#858ba1;
--sp-noche:#0d1030; --sp-naranja:#ff6a1a; --sp-naranja-tinta:#c2410c; --sp-morado:#8b5cf6; --sp-azul:#2f7cf6;
}
#login.w-d.sp-mando { position:relative; overflow:hidden; isolation:isolate; grid-template-columns:minmax(0,7fr) minmax(440px,5fr);
background:var(--sp-suelo) !important; font-family:"Schibsted Grotesk", sans-serif; color:var(--sp-tinta); }
#login.sp-mando .w-panel { background:transparent !important; position:relative; z-index:1; gap:28px; padding-top:96px; }
/* El acceso es una franja de papel a sangre: un paso de tono, no una tarjeta flotando. */
#login.sp-mando .w-side { background:var(--sp-papel) !important; position:relative; z-index:1; padding:96px clamp(32px,4vw,72px) 48px; }
#login.sp-mando .w-panel::before, #login.sp-mando .w-panel::after { display:none; }
#login.sp-mando .w-panel > .sp-polvo { position:absolute !important; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
/* Barra superior: nombre, qué es y la hora de CDMX, en la letra del texto. */
.sp-barra { position:absolute; z-index:3; top:0; left:0; right:0; height:64px; display:flex; align-items:center; gap:16px; padding:0 clamp(24px,3vw,48px);
font:400 14px/1 "Schibsted Grotesk", sans-serif; color:var(--sp-tinta-2); }
.sp-barra .sp-marca { font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--sp-tinta); }
.sp-barra .sp-reloj { margin-left:auto; color:var(--sp-tinta); font-variant-numeric:tabular-nums; }
.sp-barra .sp-reloj::first-letter { text-transform:uppercase; }
/* Instrumento. */
#login.sp-mando .w-orbita { width:min(440px,58vh,70vw); --r:calc(min(440px,58vh,70vw) / 2 - 30px); overflow:visible; will-change:transform; margin-bottom:28px; }
#login.sp-mando .w-anillo { display:none; }
#login.sp-mando .w-giro, #login.sp-mando .w-giro img { animation:none !important; }
/* El disco: un objeto plano azul noche con un aro blanco lleno, sin sombra. */
#login.sp-mando .w-orbita::before { content:""; position:absolute; inset:-26px; border-radius:50%; z-index:0; background:var(--sp-noche);
box-shadow:0 0 0 10px var(--sp-papel); /* taste-skill-ignore: aro sólido, no sombra */ }
.sp-hud { position:absolute; z-index:1; left:-80px; top:-80px; width:calc(100% + 160px); height:calc(100% + 160px); overflow:visible; pointer-events:none; }
.sp-marcas line { stroke:rgba(17,21,43,.32); stroke-width:1; } .sp-marcas line.mayor { stroke:var(--sp-naranja); stroke-width:1.6; }
.sp-marcas { transform-origin:0 0; animation:w-rota 120s var(--ease-linear) infinite; }
.sp-arco { fill:none; stroke-linecap:round; transform-origin:0 0; }
.sp-arco.a1 { stroke-width:2.5; stroke-dasharray:160 50 10 50 300 700; animation:w-rota 26s var(--ease-linear) infinite; }
.sp-arco.a2 { stroke:var(--sp-naranja); stroke-width:3; stroke-dasharray:80 36 150 360; animation:w-rota 16s var(--ease-linear) infinite reverse; }
.sp-arco.a3 { stroke:var(--sp-azul); stroke-width:1.2; stroke-dasharray:3 6; animation:w-rota 40s var(--ease-linear) infinite; }
.sp-haz { stroke-width:1.6; opacity:.6; transition:opacity var(--duration-fast) var(--ease-smooth-out); }
.sp-pulso { stroke-width:3; stroke-linecap:round; stroke-dasharray:16px calc(var(--l) * 1px + 40px); stroke-dashoffset:16px; animation:sp-viaja 3.2s cubic-bezier(.55,0,.25,1) infinite; }
@keyframes sp-viaja { from { stroke-dashoffset:16px; } to { stroke-dashoffset:calc(var(--l) * -1px); } }
.sp-onda { fill:none; stroke-width:1.5; transform-origin:0 0; animation:sp-onda 2.4s var(--ease-smooth-out) forwards; }
@keyframes sp-onda { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(2.3); } }
.sp-hud[class*="foco-"] .sp-haz { opacity:.2; }
.foco-0 .sp-haz:nth-of-type(1), .foco-1 .sp-haz:nth-of-type(2), .foco-2 .sp-haz:nth-of-type(3), .foco-3 .sp-haz:nth-of-type(4), .foco-4 .sp-haz:nth-of-type(5), .foco-5 .sp-haz:nth-of-type(6) { opacity:1; }
/* Canales: el ícono de cada app sobre una placa del color de su marketplace, mezclado con la noche del disco. */
#login.sp-mando .w-giro li { width:58px; height:58px; margin:-29px 0 0 -29px; z-index:2; }
#login.sp-mando .w-giro li::before { content:""; position:absolute; inset:-5px; border-radius:16px; background:color-mix(in srgb, var(--c) 34%, var(--sp-noche)); }
#login.sp-mando .w-giro img { position:relative; width:58px; height:58px; margin:0; border-radius:12px; box-shadow:none; transition:transform var(--duration-fast) var(--ease-smooth-out); }
#login.sp-mando .w-giro li:hover img { transform:scale(1.08); }
.sp-tag { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); white-space:nowrap; display:flex; align-items:center; gap:6px;
font:500 12px/1 "Schibsted Grotesk", sans-serif; color:#f1f2f8; }
.sp-tag b { width:7px; height:7px; border-radius:50%; background:var(--c); }
/* Núcleo: el reactor. Su luz es parte del dibujo del instrumento, no un adorno de tarjeta. */
#login.sp-mando .w-nucleo { width:168px; height:168px; margin:-84px 0 0 -84px; z-index:2; isolation:isolate; background:var(--sp-papel) !important;
box-shadow:0 0 0 1px #fff, 0 0 60px 8px rgba(255,106,26,.45), 0 0 140px 34px rgba(139,92,246,.4) !important; /* taste-skill-ignore: la luz del reactor */
animation:sp-reactor 4s var(--ease-in-out) infinite; }
#login.sp-mando .w-nucleo::before { content:""; position:absolute; inset:-12px; border-radius:50%; z-index:-1;
background:conic-gradient(from 0deg, #ff6a1a, #8b5cf6, #2f7cf6, #2ef2ea, #ff3fae, #ffe14d, #ff6a1a); /* taste-skill-ignore: anillo con el color de cada canal */
animation:w-rota 6s var(--ease-linear) infinite;
-webkit-mask:radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%); mask:radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%); }
@keyframes sp-reactor { 50% { box-shadow:0 0 0 1px #fff, 0 0 84px 14px rgba(255,106,26,.55), 0 0 180px 50px rgba(139,92,246,.48); } } /* taste-skill-ignore */
#login.sp-mando .w-nucleo img.w-logo-color { content:url("sellport-logo.png?v=naranja"); width:132px; object-fit:contain; mix-blend-mode:multiply; }
#login.sp-mando .w-nucleo b { font:500 12px "Schibsted Grotesk", sans-serif; letter-spacing:0; text-transform:none; color:var(--sp-tinta-2); }
#login .w-logo-blanco { content:url("sellport-logo.png?v=naranja"); object-fit:contain; }
/* Texto del panel: una sola tinta, sin palabra de color. */
#login.sp-mando .w-h1 { font:700 clamp(32px,2.9vw,44px)/1.04 "Schibsted Grotesk", sans-serif; letter-spacing:-.035em; color:var(--sp-tinta) !important; text-wrap:balance; }
#login.sp-mando .w-h1 em { font-weight:inherit; color:inherit !important; animation:none; }
#login.sp-mando .w-lead { max-width:40ch; font:400 16px/1.55 "Schibsted Grotesk", sans-serif; letter-spacing:0; text-transform:none; color:var(--sp-tinta-2); }
/* Acceso. */
#login.sp-mando .w-form { max-width:400px !important; padding:0; background:none; border:0; box-shadow:none; }
#login.sp-mando .w-title { font:700 32px/1.1 "Schibsted Grotesk", sans-serif !important; letter-spacing:-.03em !important; color:var(--sp-tinta) !important; margin-bottom:8px !important; }
#login.sp-mando .w-sub { font:400 16px/1.5 "Schibsted Grotesk", sans-serif !important; color:var(--sp-tinta-2) !important; margin-bottom:32px !important; }
#login.sp-mando .w-help, #login.sp-mando .w-o { font-family:"Schibsted Grotesk", sans-serif !important; font-size:14px !important; color:var(--sp-tinta-2) !important; }
#login.sp-mando .w-o::before, #login.sp-mando .w-o::after { background:var(--sp-linea) !important; }
#login.sp-mando .w-label { font:600 14px "Schibsted Grotesk", sans-serif !important; color:var(--sp-tinta) !important; }
#login.sp-mando .w-input { height:52px !important; border-radius:4px !important; border:1px solid var(--sp-borde) !important; background:var(--sp-suelo) !important;
color:var(--sp-tinta) !important; font:400 16px "Schibsted Grotesk", sans-serif !important; box-shadow:none !important;
transition:border-color var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out) !important; }
#login.sp-mando .w-input::placeholder { color:#5f6580 !important; }
#login.sp-mando .w-input:hover { border-color:var(--sp-tinta-2) !important; }
#login.sp-mando .w-input:focus { border-color:var(--sp-tinta) !important; background:var(--sp-papel) !important; box-shadow:0 0 0 1px var(--sp-tinta) !important; }
#login.sp-mando .w-ms { height:52px !important; border-radius:4px !important; border:1px solid var(--sp-borde) !important; background:var(--sp-papel) !important; color:var(--sp-tinta) !important;
font:600 15px "Schibsted Grotesk", sans-serif !important; box-shadow:none !important; transition:background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out) !important; }
#login.sp-mando .w-ms:hover { background:var(--sp-suelo) !important; border-color:var(--sp-tinta-2) !important; }
#login.sp-mando .w-ms:active, #login.sp-mando .w-btn:active { transform:scale(.98); }
#login.sp-mando .w-btn { height:52px !important; border-radius:4px !important; background:var(--sp-tinta) !important; color:#fff !important; border:0 !important;
font:600 15px "Schibsted Grotesk", sans-serif !important; box-shadow:none !important;
transition:background-color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out) !important; }
#login.sp-mando .w-btn:hover { background:var(--sp-naranja-tinta) !important; box-shadow:none !important; }
#login.sp-mando .w-btn i { color:#fff !important; }
#login.sp-mando .w-btn::after { display:none; }
#login.sp-mando :focus-visible { outline:2px solid var(--sp-naranja-tinta) !important; outline-offset:2px; }
#login.sp-mando .w-error { font-size:14px !important; }
/* Arranque: la escala se enciende, los canales aparecen, cada haz se traza al núcleo, el núcleo se enciende
y entran el texto y el acceso escalonados. Una sola vez por visita. */
#login.sp-arranque .sp-marcas line { animation:sp-aparece var(--duration-very-slow) ease-out both; animation-delay:var(--d); }
@keyframes sp-aparece { from { opacity:0; } }
#login.sp-arranque .sp-arco { animation:sp-traza 1.6s var(--ease-smooth-out) .3s both; stroke-dasharray:2000; }
@keyframes sp-traza { from { stroke-dashoffset:2000; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
#login.sp-arranque .w-orbita::before { animation:sp-disco .9s var(--ease-smooth-out) both; }
@keyframes sp-disco { from { opacity:0; transform:scale(.92); } }
#login.sp-arranque .w-giro li { animation:sp-pop .8s var(--ease-smooth-out) both; animation-delay:var(--d); }
@keyframes sp-pop { from { opacity:0; scale:.4; filter:blur(6px); } }
#login.sp-arranque .sp-haz { stroke-dasharray:calc(var(--l) * 1px); animation:sp-dibuja .8s cubic-bezier(.65,0,.35,1) both; animation-delay:var(--d); }
@keyframes sp-dibuja { from { stroke-dashoffset:calc(var(--l) * 1px); } to { stroke-dashoffset:0; } }
#login.sp-arranque .w-nucleo { animation:sp-enciende 1s var(--ease-smooth-out) 1.9s both; }
@keyframes sp-enciende { from { opacity:0; scale:.6; filter:brightness(3) blur(8px); } }
#login.sp-arranque .w-h1, #login.sp-arranque .w-lead { animation:sp-sube var(--duration-very-slow) var(--ease-smooth-out) both; }
#login.sp-arranque .w-h1 { animation-delay:2.2s; } #login.sp-arranque .w-lead { animation-delay:calc(2.2s + var(--duration-micro, 80ms)); }
#login.sp-arranque .w-form > * { animation:sp-sube var(--duration-very-slow) var(--ease-smooth-out) both; }
#login.sp-arranque .w-form > * { animation-delay:calc(var(--i,0) * var(--duration-stagger)); }
@keyframes sp-sube { from { opacity:0; transform:translateY(var(--distance-medium)); filter:blur(var(--blur-medium)); } }
#login.sp-arranque .sp-barra { animation:sp-aparece var(--duration-slow) ease-out both; }
@media (max-width:900px) {
#login.w-d.sp-mando { grid-template-columns:1fr; grid-template-rows:auto auto !important; min-height:100svh; }
#login.sp-mando .w-panel { min-height:0 !important; padding:84px 20px 24px; }
#login.sp-mando .w-side { padding:32px 20px 40px; }
.sp-barra { padding:0 20px; } .sp-barra .sp-dato { display:none; }
.sp-polvo { display:none; }
#login.w-d.sp-mando { background:var(--sp-papel) !important; }
}
@media (max-width:560px) { .sp-barra .sp-reloj { font-size:13px; } }
@media (prefers-reduced-motion: reduce) { #login.sp-mando *, #login.sp-mando *::before, #login.sp-mando *::after, .sp-hud * { animation:none !important; transition:none !important; } }
/* Mientras se escribe, el instrumento se detiene para no distraer (WCAG 2.2.2) y vuelve al salir del formulario. */
#login.sp-escribiendo .sp-hud *, #login.sp-escribiendo .w-nucleo, #login.sp-escribiendo .w-nucleo::before { animation-play-state:paused !important; }
/* ===== sellport-login-escena ===== */
/* Login de Sellport como escena (referencia: Mercury). Se deja el formato de dos columnas:
una sola escena a sangre, un cielo de hora dorada con horizonte; el instrumento sale en el horizonte
como un sol enorme con los marketplaces en órbita; el titular grande arriba a la izquierda, como cartel;
el acceso es una tarjeta que flota sobre la escena. Va después de sellport-login.css. */
:root { --hz:66%; --sol:min(60vh, 560px); --cx:50%; --cy:50%; --tinta:#0f1430; --tinta-2:#4a4f6a; }
#login.w-d.sp-mando { display:block; position:relative; min-height:100vh; min-height:100svh; overflow:hidden; color:var(--tinta);
background:
radial-gradient(38% 30% at var(--cx) var(--cy), rgba(255,140,70,.55), transparent 70%),
radial-gradient(60% 40% at var(--cx) var(--cy), rgba(255,190,150,.45), transparent 75%),
linear-gradient(180deg, #b9c6ff 0%, #d9d3ff 26%, #f3dcf0 46%, #ffd9c4 60%, #ffe9dc var(--hz), #efe9f7 calc(var(--hz) + .2%), #e4e6f4 82%, #dfe3f2 100%) !important; }
/* Piso: el reflejo suave del sol bajo el horizonte. */
#login.sp-mando::after { content:""; position:absolute; z-index:0; left:var(--cx); top:var(--hz); width:calc(var(--sol) * 1.1); height:34vh; transform:translateX(-50%);
background:radial-gradient(50% 60% at 50% 0%, rgba(13,16,48,.20), transparent 70%), repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px);
-webkit-mask:linear-gradient(180deg, #000, transparent); mask:linear-gradient(180deg, #000, transparent); pointer-events:none; animation:none; }
#login.sp-mando::before { display:none; }
/* El panel es toda la escena. */
#login.sp-mando .w-panel { position:absolute !important; inset:0; display:block; padding:0 !important; background:transparent !important; z-index:1; }
#login.sp-mando .w-panel > .sp-polvo { z-index:0; }
#login.sp-mando .w-brand { display:none !important; }
/* El sol: el instrumento entero, centrado en el horizonte y saliendo de él. */
#login.sp-mando .w-orbita { position:absolute !important; left:var(--cx); top:var(--hz); width:var(--sol); --r:calc(var(--sol) / 2 - 34px);
margin:0 !important; top:var(--cy); translate:-50% -50%; z-index:1; }
#login.sp-mando .w-orbita::before { inset:-30px; background:radial-gradient(circle at 50% 38%, #1b2160, #0d1030 58%, #070920 100%); box-shadow:0 0 0 12px rgba(255,255,255,.55), 0 40px 120px -20px rgba(255,106,26,.55), 0 30px 90px -30px rgba(13,16,48,.5); }
#login.sp-mando .sp-marcas line { stroke:rgba(15,20,48,.35); }
/* El horizonte corta el sol: abajo de la línea se ve como reflejo. */
#login.sp-mando .w-orbita::after { display:none; }
/* Titular de cartel. */
#login.sp-mando .w-h1 { position:absolute !important; left:clamp(28px,4vw,72px); top:clamp(96px,13vh,128px); bottom:auto; z-index:2; margin:0 !important; max-width:none; text-align:left; white-space:nowrap;
font:500 clamp(40px,4.4vw,68px)/.98 "Schibsted Grotesk", sans-serif !important; letter-spacing:-.05em !important; color:var(--tinta) !important; }
#login.sp-mando .w-lead { position:absolute !important; left:clamp(28px,4vw,72px); bottom:clamp(28px,5vh,52px); top:auto; z-index:2; margin:0 !important;
max-width:none; text-align:left; font:400 16px/1.5 "Schibsted Grotesk", sans-serif !important; color:var(--tinta-2) !important; }
/* Barra superior sobre el cielo. */
.sp-barra { background:transparent !important; color:var(--tinta-2) !important; height:64px; }
.sp-barra .sp-marca, .sp-barra .sp-reloj { color:var(--tinta) !important; }
.sp-barra .sp-marca { font-size:18px; }
/* El acceso: una tarjeta que flota sobre la escena. */
#login.sp-mando .w-side { position:absolute !important; z-index:3; right:clamp(24px,5vw,96px); top:50%; translate:0 -50%; padding:0 !important; background:transparent !important; display:block; }
#login.sp-mando .w-form { width:min(400px, 86vw); max-width:none !important; padding:36px 36px 30px !important; border-radius:24px !important;
background:rgba(255,255,255,.78) !important; -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
border:1px solid rgba(255,255,255,.9) !important; box-shadow:0 1px 0 #fff inset, 0 30px 70px -30px rgba(15,20,48,.45), 0 20px 50px -30px rgba(255,106,26,.45) !important; }
#login.sp-mando .w-title { font-size:32px !important; font-weight:500 !important; letter-spacing:-.035em !important; color:var(--tinta) !important; }
#login.sp-mando .w-input { border-radius:12px !important; background:rgba(255,255,255,.9) !important; }
#login.sp-mando .w-ms { border-radius:12px !important; }
#login.sp-mando .w-btn { border-radius:12px !important; background:var(--tinta) !important; color:#fff !important; }
#login.sp-mando .w-btn:hover { background:#c2410c !important; }
#login.sp-mando .w-btn i { color:#ff8a3d !important; }
/* Arranque: el sol sube desde el horizonte. */
#login.sp-arranque .w-orbita { animation:sp-amanece 1.6s cubic-bezier(.22,1,.36,1) both; }
@keyframes sp-amanece { from { translate:-50% -38%; opacity:0; } }
#login.sp-arranque .w-side { animation:sp-flota .9s cubic-bezier(.22,1,.36,1) .5s both; }
@keyframes sp-flota { from { opacity:0; translate:0 calc(-50% + 24px); filter:blur(6px); } }
#login.sp-arranque .w-form > * { animation:none; }
/* Tableta: el sol más chico y la tarjeta abajo a la derecha. */
@media (max-width:1100px) {
:root { --sol:min(56vh, 520px); }
#login.sp-mando .w-h1 { font-size:clamp(40px,5vw,60px) !important; }
}
/* Teléfono: cielo arriba con el titular y el sol pequeño; la tarjeta debajo. */
@media (max-width:760px) {
:root { --hz:46%; --sol:min(84vw, 340px); --cx:50%; }
#login.w-d.sp-mando { min-height:auto; padding-bottom:32px; }
#login.sp-mando .w-panel { position:relative !important; height:560px; }
#login.sp-mando .w-orbita { display:block !important; left:50%; top:262px; translate:-50% -50%; }
#login.sp-mando .w-giro li { width:42px; height:42px; margin:-21px 0 0 -21px; } #login.sp-mando .w-giro img { width:42px; height:42px; border-radius:9px; }
#login.sp-mando .w-nucleo { width:120px; height:120px; margin:-60px 0 0 -60px; } #login.sp-mando .w-nucleo img.w-logo-color { width:96px; } #login.sp-mando .w-nucleo b { font-size:10px; }
#login.sp-mando .sp-tag { display:none; }
#login.sp-mando .w-h1 { top:auto; bottom:8px; left:20px; font-size:36px !important; white-space:normal; }
#login.sp-mando .w-lead { display:none; }
#login.sp-mando::after { display:none; }
#login.sp-mando .w-side { position:relative !important; right:auto; top:auto; translate:none; margin:16px 16px 0; }
#login.sp-mando .w-form { width:auto; padding:26px 22px !important; }
}
@media (prefers-reduced-motion: reduce) { #login.sp-mando .w-orbita, #login.sp-mando .w-side { animation:none !important; } }
/* ===== sellport-login-tarjeta ===== */
/* Ajustes del 30-oct (tarde): disco claro que se funde con el cielo, sin marcas de temporizador,
y la tarjeta de acceso con más carácter. Va después de sellport-login-escena.css. */
/* Sin la escala ni el arco exterior que lo hacían parecer temporizador. */
#login.sp-mando .sp-marcas, #login.sp-mando .sp-arco.a1 { display:none; }
/* Disco de perla: vidrio claro con un aro de luz de la marca, en lugar del azul noche. */
#login.sp-mando .w-orbita::before { inset:-22px;
background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.92), rgba(247,243,255,.78) 55%, rgba(236,230,255,.6) 100%) !important;
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 0 0 1px rgba(255,255,255,.95), 0 0 0 10px rgba(255,255,255,.35), 0 40px 100px -30px rgba(139,92,246,.45), 0 30px 80px -40px rgba(255,106,26,.55) !important; }
#login.sp-mando .w-orbita { --aro:conic-gradient(from 210deg, #ff6a1a, #8b5cf6, #2f7cf6, #2ef2ea, #ff6a1a); }
.sp-arco.a2 { stroke:#ff6a1a; opacity:.7; }
.sp-arco.a3 { stroke:#8b5cf6; opacity:.55; }
.sp-haz { opacity:.75; stroke-width:2; }
.sp-onda { stroke-width:2; }
/* Módulos sobre placas claras teñidas del color de cada marketplace. */
#login.sp-mando .w-giro li::before { background:color-mix(in srgb, var(--c) 22%, #ffffff) !important; box-shadow:0 10px 24px -12px color-mix(in srgb, var(--c) 70%, #0f1430); }
.sp-tag { color:var(--tinta) !important; font-weight:600 !important; }
#login.sp-mando .w-nucleo { box-shadow:0 0 0 1px #fff, 0 18px 40px -12px rgba(15,20,48,.35), 0 0 70px 6px rgba(255,106,26,.35), 0 0 120px 24px rgba(139,92,246,.3) !important; }
/* Tarjeta de acceso. */
#login.sp-mando .w-form { position:relative; padding:40px 38px 32px !important; border-radius:28px !important;
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,246,.9)) padding-box,
linear-gradient(140deg, #ff8a3d, #8b5cf6 55%, #2f7cf6) border-box !important;
border:1.5px solid transparent !important;
box-shadow:0 40px 80px -36px rgba(15,20,48,.5), 0 24px 60px -34px rgba(139,92,246,.6) !important; }
/* Sello de la marca arriba del saludo. */
#login.sp-mando .w-form::before { content:""; display:block; width:56px; height:42px; margin:0 0 20px; border-radius:12px;
background:#fff url("sellport-simbolo.png?v=naranja") center / 46px auto no-repeat; box-shadow:0 0 0 1px rgba(15,20,48,.08), 0 8px 18px -10px rgba(255,106,26,.7); }
#login.sp-mando .w-title { font:600 38px/1.05 "Schibsted Grotesk", sans-serif !important; letter-spacing:-.04em !important; color:var(--tinta) !important; margin:0 0 10px !important; }
#login.sp-mando .w-title::after { content:"."; color:#ff6a1a; }
#login.sp-mando .w-sub { font-size:15.5px !important; line-height:1.55 !important; color:var(--tinta-2) !important; margin-bottom:28px !important; }
#login.sp-mando .w-label { font:600 13.5px "Schibsted Grotesk", sans-serif !important; color:var(--tinta) !important; }
#login.sp-mando .w-o { color:#6b6f88 !important; }
/* Campos con su ícono, fondo lavanda muy claro y foco con el aro de la marca. */
#login.sp-mando .w-input { height:54px !important; border-radius:14px !important; border:1px solid #8c87b5 !important; background-color:#faf9ff !important;
background-repeat:no-repeat !important; background-position:16px 50% !important; background-size:20px !important; padding-left:48px !important; color:var(--tinta) !important; }
#login.sp-mando #email { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando #password { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando .w-input:hover { border-color:#5f5994 !important; }
#login.sp-mando .w-input:focus { border-color:#8b5cf6 !important; background-color:#fff !important; box-shadow:0 0 0 4px rgba(139,92,246,.16) !important; }
#login.sp-mando .w-ms { height:54px !important; border-radius:14px !important; border:1px solid #8c87b5 !important; background:#fff !important; color:var(--tinta) !important; font-weight:600 !important; }
#login.sp-mando .w-ms:hover { background:#f6f4ff !important; border-color:#8b5cf6 !important; }
/* La acción principal: naranja profundo de la marca, texto blanco legible, flecha que avanza. */
#login.sp-mando .w-btn { height:56px !important; border-radius:14px !important; margin-top:14px !important;
background:linear-gradient(100deg, #c94a0f, #b03a0a) !important; color:#fff !important; font:600 16px "Schibsted Grotesk", sans-serif !important;
box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 30px -14px rgba(194,65,12,.85) !important; }
#login.sp-mando .w-btn i { color:#fff !important; }
#login.sp-mando .w-btn:hover { background:linear-gradient(100deg, #c2410c, #9a3412) !important; }
#login.sp-mando .w-help { margin-top:18px !important; font-size:13.5px !important; color:#6b6f88 !important; }
@media (max-width:760px) {
#login.sp-mando .w-form { padding:28px 22px 24px !important; }
#login.sp-mando .w-title { font-size:32px !important; }
}
/* ===== sellport-login-mercury ===== */
/* Colores de Mercury («alpine banking at blue hour», styles.refero.design) llevados a claro:
niebla fría de hora azul en lugar del atardecer, tinta Onyx #171721, grises Mist/Ash, y un solo color de
acción, Cobalt #5266eb. El naranja queda sólo en el logo y en los íconos de los marketplaces.
Va después de sellport-login-tarjeta.css. */
:root { --mc-onyx:#171721; --mc-texto:#4e4e5e; --mc-tenue:#6c6c7c; --mc-mist:#e2e3ed; --mc-borde:#8e90a6; --mc-cobalt:#5266eb; --mc-cobalt-hondo:#3f50d1; --mc-hielo:#f4f5fa; }
/* Cielo de hora azul: azul niebla arriba, casi blanco en el horizonte, piso de hielo. */
#login.w-d.sp-mando { color:var(--mc-onyx);
background:
radial-gradient(34% 34% at var(--cx) var(--cy), rgba(82,102,235,.20), transparent 70%),
radial-gradient(60% 45% at var(--cx) var(--hz), rgba(255,255,255,.85), transparent 75%),
linear-gradient(180deg, #c9d1f2 0%, #dbe0f6 30%, #ebeef9 52%, #f6f7fb var(--hz), #eef0f7 calc(var(--hz) + .2%), #e7e9f2 100%) !important; }
.sp-barra, .sp-barra .sp-dato { color:var(--mc-texto) !important; }
.sp-barra .sp-marca, .sp-barra .sp-reloj { color:var(--mc-onyx) !important; }
#login.sp-mando .w-h1 { color:var(--mc-onyx) !important; font-weight:480 !important; }
#login.sp-mando .w-lead { color:var(--mc-texto) !important; }
/* Disco: perla fría con halo cobalto; anillos y haces en la gama azul de la marca. */
#login.sp-mando .w-orbita::before {
background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), rgba(244,245,252,.82) 60%, rgba(226,229,247,.7) 100%) !important;
box-shadow:0 0 0 1px rgba(255,255,255,.95), 0 0 0 10px rgba(255,255,255,.4), 0 40px 100px -30px rgba(82,102,235,.45), 0 20px 60px -30px rgba(23,23,33,.25) !important; }
.sp-arco.a2 { stroke:var(--mc-cobalt) !important; opacity:.55; }
.sp-arco.a3 { stroke:#8b97f0 !important; opacity:.6; }
#login.sp-mando .w-nucleo { box-shadow:0 0 0 1px #fff, 0 18px 40px -14px rgba(23,23,33,.3), 0 0 70px 6px rgba(82,102,235,.28) !important; }
.sp-tag { color:var(--mc-onyx) !important; }
/* Tarjeta: blanca y callada, borde Mist, sin degradado. */
#login.sp-mando .w-form { background:rgba(255,255,255,.92) !important; border:1px solid var(--mc-mist) !important;
box-shadow:0 30px 70px -34px rgba(23,23,33,.35), 0 20px 50px -36px rgba(82,102,235,.45) !important; }
#login.sp-mando .w-form::before { box-shadow:0 0 0 1px var(--mc-mist) !important; }
#login.sp-mando .w-title { font-weight:480 !important; color:var(--mc-onyx) !important; }
#login.sp-mando .w-title::after { color:var(--mc-cobalt); }
#login.sp-mando .w-sub { color:var(--mc-texto) !important; }
#login.sp-mando .w-label { color:var(--mc-onyx) !important; font-weight:500 !important; }
#login.sp-mando .w-o, #login.sp-mando .w-help { color:var(--mc-tenue) !important; }
#login.sp-mando .w-o::before, #login.sp-mando .w-o::after { background:var(--mc-mist) !important; }
#login.sp-mando .w-input, #login.sp-mando .w-ms { border-color:var(--mc-borde) !important; background-color:var(--mc-hielo) !important; }
#login.sp-mando .w-ms { background:#fff !important; }
#login.sp-mando #email { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando #password { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando .w-input:hover, #login.sp-mando .w-ms:hover { border-color:var(--mc-texto) !important; }
#login.sp-mando .w-input:focus { border-color:var(--mc-cobalt) !important; background-color:#fff !important; box-shadow:0 0 0 4px rgba(82,102,235,.16) !important; }
#login.sp-mando .w-ms:hover { background:var(--mc-hielo) !important; }
/* Acción: cobalto plano, texto blanco. */
#login.sp-mando .w-btn { background:var(--mc-cobalt) !important; color:#fff !important; font-weight:500 !important;
box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -14px rgba(82,102,235,.8) !important; }
#login.sp-mando .w-btn:hover { background:var(--mc-cobalt-hondo) !important; }
#login.sp-mando :focus-visible { outline-color:var(--mc-cobalt) !important; }
/* Lema de la barra y frase del núcleo, con más presencia. */
.sp-barra .sp-lema { font-weight:600; font-size:15px; color:var(--mc-cobalt) !important; letter-spacing:-.01em; padding-left:16px; margin-left:4px; border-left:2px solid rgba(82,102,235,.35); }
#login.sp-mando .w-nucleo b { font:600 12.5px/1.2 "Schibsted Grotesk", sans-serif !important; color:var(--mc-cobalt) !important; letter-spacing:0; }
/* ===== sellport-login-grafito ===== */
/* Paleta B mejorada: grafito, acero claro y una sola brasa naranja.
El instrumento se vuelve una carátula de aluminio cepillado (como un reloj o un tablero de mando de
precisión); todo lo demás es acero y grafito, y el naranja Sellport sólo marca lo vivo: el arco, el
punto del saludo, la flecha y el foco. Va después de sellport-login-mercury.css. */
:root { --gf-tinta:#16191d; --gf-grafito:#1f2329; --gf-texto:#4f555e; --gf-tenue:#646a74; --gf-borde:#8a8f98; --gf-linea:#dfe2e7;
--gf-acero:#f6f7f9; --gf-brasa:#ff6a1a; --gf-brasa-hondo:#c94a0f;
--mc-onyx:var(--gf-tinta); --mc-texto:var(--gf-texto); --mc-tenue:var(--gf-tenue); --mc-mist:var(--gf-linea); --mc-borde:var(--gf-borde); --mc-hielo:var(--gf-acero);
--mc-cobalt:var(--gf-grafito); --mc-cobalt-hondo:var(--gf-brasa-hondo); }
/* Acero claro con horizonte; un calor muy tenue detrás de la carátula. */
#login.w-d.sp-mando {
background:
radial-gradient(30% 32% at var(--cx) var(--cy), rgba(255,106,26,.10), transparent 70%),
radial-gradient(60% 45% at var(--cx) var(--hz), rgba(255,255,255,.9), transparent 75%),
linear-gradient(180deg, #dcdfe4 0%, #e6e8ec 28%, #eff1f4 52%, #f8f9fa var(--hz), #eceef1 calc(var(--hz) + .2%), #e3e6ea 100%) !important; }
/* Barra: lema en grafito con un separador de brasa. */
.sp-barra .sp-lema { color:var(--gf-grafito) !important; border-left-color:var(--gf-brasa) !important; }
/* Carátula de aluminio cepillado: vetas radiales finísimas sobre perla, bisel blanco y sombra grafito. */
#login.sp-mando .w-orbita::before {
background:
repeating-conic-gradient(from 0deg, rgba(255,255,255,.0) 0deg .6deg, rgba(120,128,140,.05) .6deg 1.2deg),
radial-gradient(circle at 50% 35%, #ffffff 0%, #f3f4f6 55%, #e6e8ec 100%) !important;
box-shadow:inset 0 2px 0 #fff, inset 0 -10px 30px rgba(31,35,41,.06), 0 0 0 1px rgba(31,35,41,.10), 0 0 0 9px rgba(255,255,255,.6), 0 0 0 10px rgba(31,35,41,.08),
0 40px 90px -36px rgba(31,35,41,.45), 0 24px 70px -40px rgba(255,106,26,.45) !important; }
.sp-arco.a2 { stroke:var(--gf-brasa) !important; opacity:.85; stroke-width:3; }
.sp-arco.a3 { stroke:var(--gf-grafito) !important; opacity:.35; }
.sp-haz { opacity:.65; }
#login.sp-mando .w-giro li::before { background:color-mix(in srgb, var(--c) 16%, #ffffff) !important; box-shadow:0 0 0 1px rgba(31,35,41,.08), 0 10px 22px -12px rgba(31,35,41,.45) !important; }
.sp-tag { color:var(--gf-tinta) !important; }
#login.sp-mando .w-nucleo { box-shadow:0 0 0 1px #fff, 0 0 0 7px rgba(31,35,41,.05), 0 18px 40px -14px rgba(31,35,41,.4), 0 0 60px 4px rgba(255,106,26,.25) !important; }
/* Tarjeta: blanca, borde acero, con la brasa en los detalles. */
#login.sp-mando .w-form { background:rgba(255,255,255,.96) !important; border:1px solid var(--gf-linea) !important;
box-shadow:0 30px 70px -34px rgba(31,35,41,.4), 0 2px 0 rgba(255,255,255,1) inset !important; }
#login.sp-mando .w-title::after { color:var(--gf-brasa) !important; }
#login.sp-mando #email { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando #password { background-image:url("data:image/svg+xml;utf8,") !important; }
#login.sp-mando .w-input:focus { border-color:var(--gf-grafito) !important; box-shadow:0 0 0 4px rgba(255,106,26,.18) !important; }
#login.sp-mando .w-ms:hover { border-color:var(--gf-grafito) !important; }
/* Acción: grafito con la flecha en brasa; al pasar, toda la tecla se enciende en naranja. */
#login.sp-mando .w-btn { background:var(--gf-grafito) !important; color:#fff !important;
box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 14px 30px -14px rgba(31,35,41,.75) !important;
transition:background-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1) !important; }
#login.sp-mando .w-btn i { color:var(--gf-brasa) !important; transition:color .25s ease, transform .25s cubic-bezier(.22,1,.36,1); }
#login.sp-mando .w-btn:hover { background:var(--gf-brasa-hondo) !important; box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 16px 34px -14px rgba(201,74,15,.8) !important; }
#login.sp-mando .w-btn:hover i { color:#fff !important; }
#login.sp-mando :focus-visible { outline-color:var(--gf-brasa-hondo) !important; }
/* Las ondas del núcleo, en brasa y grafito en lugar de azul. */
.sp-onda:nth-child(odd) { stroke:var(--gf-brasa) !important; }
.sp-onda:nth-child(even) { stroke:var(--gf-grafito) !important; stroke-opacity:.5; }
/* Vida: luz y color sobre el acero. */
/* 1. El acero recibe luz: brasa cálida arriba a la derecha y un frío azul abajo a la izquierda, que se mueven despacio. */
#login.sp-mando::before { display:block !important; content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:1 !important; mix-blend-mode:normal !important;
background:radial-gradient(32% 38% at 84% 8%, rgba(255,106,26,.26), transparent 70%), radial-gradient(34% 40% at 8% 94%, rgba(82,102,235,.18), transparent 70%), radial-gradient(26% 30% at 96% 70%, rgba(236,72,153,.10), transparent 70%) !important;
animation:gf-luz 16s ease-in-out infinite alternate; }
@keyframes gf-luz { to { transform:translate(-3%, 2%) scale(1.06); } }
/* 2. Un destello recorre la carátula de aluminio, como luz sobre metal. */
#login.sp-mando .w-orbita::after { display:block !important; content:''; position:absolute; inset:-22px; border-radius:50%; z-index:0; pointer-events:none;
background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.95) 18deg, transparent 46deg, transparent 180deg, rgba(255,184,140,.55) 200deg, transparent 230deg);
mix-blend-mode:soft-light; animation:w-rota 9s linear infinite; }
/* 3. Cada marketplace brilla con su color. */
#login.sp-mando .w-giro li::before { background:color-mix(in srgb, var(--c) 30%, #ffffff) !important;
box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--c) 85%, transparent) !important; animation:gf-late 3.4s ease-in-out infinite; }
#login.sp-mando .w-giro li:nth-child(2)::before { animation-delay:-.6s; } #login.sp-mando .w-giro li:nth-child(3)::before { animation-delay:-1.2s; }
#login.sp-mando .w-giro li:nth-child(4)::before { animation-delay:-1.8s; } #login.sp-mando .w-giro li:nth-child(5)::before { animation-delay:-2.4s; } #login.sp-mando .w-giro li:nth-child(6)::before { animation-delay:-3s; }
@keyframes gf-late { 50% { box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 12px 34px -6px color-mix(in srgb, var(--c) 95%, transparent); } }
/* 4. Haces y pulsos con más cuerpo. */
.sp-haz { opacity:1 !important; stroke-width:2.2 !important; }
.sp-pulso { stroke-width:4 !important; filter:drop-shadow(0 0 5px currentColor); }
.sp-arco.a2 { opacity:1 !important; filter:drop-shadow(0 0 6px rgba(255,106,26,.6)); }
/* 5. El núcleo respira en brasa. */
#login.sp-mando .w-nucleo { animation:gf-nucleo 3.2s ease-in-out infinite !important; }
@keyframes gf-nucleo { 0%,100% { box-shadow:0 0 0 1px #fff, 0 0 0 7px rgba(31,35,41,.05), 0 18px 40px -14px rgba(31,35,41,.4), 0 0 50px 4px rgba(255,106,26,.30); }
50% { box-shadow:0 0 0 1px #fff, 0 0 0 7px rgba(255,106,26,.12), 0 18px 40px -14px rgba(31,35,41,.4), 0 0 90px 18px rgba(255,106,26,.45); } }
/* 6. El lema y el borde de la tarjeta con la brasa. */
#login.sp-mando .w-form { border-top:3px solid var(--gf-brasa) !important; }
@media (prefers-reduced-motion: reduce) { #login.sp-mando::before, #login.sp-mando .w-orbita::after, #login.sp-mando .w-giro li::before, #login.sp-mando .w-nucleo { animation:none !important; } }
/* ===== sellport-login-consola ===== */
/* La tarjeta de acceso como parte del instrumento: un séptimo módulo conectado al núcleo por su propio haz.
Cabecera de grafito cepillado (el mismo metal de la carátula) con el sello Sellport y una luz de estado;
cuerpo blanco con el saludo; los mismos radios, sombras y brasa del resto de la escena.
Va después de sellport-login-grafito.css. */
#login.sp-mando .w-form { padding:0 !important; overflow:hidden; border:0 !important; border-radius:22px !important; background:rgba(255,255,255,.97) !important;
box-shadow:0 0 0 1px rgba(31,35,41,.10), 0 0 0 8px rgba(255,255,255,.55), 0 0 0 9px rgba(31,35,41,.06), 0 40px 80px -36px rgba(31,35,41,.55), 0 24px 70px -44px rgba(255,106,26,.6) !important; }
#login.sp-mando .w-form::before { display:none !important; }
#login.sp-mando .w-form > :not(.sp-cabeza) { margin-left:34px !important; margin-right:34px !important; width:auto !important; }
#login.sp-mando .w-form > :last-child { margin-bottom:28px !important; }
/* Cabecera de grafito cepillado. */
.sp-cabeza { position:relative; display:flex; align-items:center; gap:12px; padding:16px 20px 16px 16px; margin:0 0 28px;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2a2f37, #1c2026);
color:#fff; font:600 15px/1 "Schibsted Grotesk", sans-serif; letter-spacing:-.01em; }
.sp-cabeza::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, #ff6a1a, #ff9a5c 40%, transparent); }
.sp-cabeza .sp-sello { width:40px; height:30px; border-radius:9px; background:#fff url("sellport-simbolo.png?v=naranja") center / 34px auto no-repeat; box-shadow:0 0 0 1px rgba(255,255,255,.2); flex:none; }
.sp-cabeza small { display:block; margin-top:4px; font:400 12.5px/1 "Schibsted Grotesk", sans-serif; color:#b9bec7; }
.sp-cabeza .sp-estado { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font:500 12.5px/1 "Schibsted Grotesk", sans-serif; color:#d5d9e0; }
.sp-cabeza .sp-estado i { width:8px; height:8px; border-radius:50%; background:#ff6a1a; box-shadow:0 0 0 3px rgba(255,106,26,.25), 0 0 10px rgba(255,106,26,.9); animation:sp-late-brasa 2.2s ease-in-out infinite; }
@keyframes sp-late-brasa { 50% { box-shadow:0 0 0 6px rgba(255,106,26,0), 0 0 4px rgba(255,106,26,.6); } }
/* Cuerpo. */
#login.sp-mando .w-title { font:600 34px/1.05 "Schibsted Grotesk", sans-serif !important; letter-spacing:-.04em !important; margin-bottom:8px !important; }
#login.sp-mando .w-sub { font-size:15px !important; margin-bottom:24px !important; }
#login.sp-mando .w-ms { height:52px !important; border-radius:12px !important; }
#login.sp-mando .w-input { height:52px !important; border-radius:12px !important; background-color:#f6f7f9 !important; }
#login.sp-mando .w-label { margin-top:4px !important; }
#login.sp-mando .w-btn { height:54px !important; border-radius:12px !important; margin-top:10px !important; justify-content:space-between !important; padding:0 22px !important; }
#login.sp-mando .w-btn i { font-size:18px; }
#login.sp-mando .w-btn:hover i { transform:translateX(4px); }
#login.sp-mando .w-help { margin-top:16px !important; padding-top:16px; border-top:1px solid #eceef1; font-size:13px !important; }
/* El haz que une el núcleo con la tarjeta: el acceso es un canal más del puerto. */
.sp-enlace { position:absolute; z-index:2; height:2px; pointer-events:none; transform-origin:0 50%;
background:linear-gradient(90deg, rgba(255,106,26,.15), rgba(255,106,26,.75)); }
.sp-enlace::after { content:""; position:absolute; top:-2px; left:0; width:60px; height:6px; border-radius:6px;
background:radial-gradient(closest-side, #fff, #ff8a3d 55%, transparent); filter:drop-shadow(0 0 6px #ff6a1a); animation:sp-enlace 2.6s cubic-bezier(.55,0,.25,1) infinite; }
@keyframes sp-enlace { from { left:-60px; opacity:0; } 15% { opacity:1; } to { left:100%; opacity:0; } }
#login.sp-escribiendo .sp-enlace::after { animation-duration:1.1s; }
@media (max-width:1100px) { .sp-enlace { display:none; } }
@media (max-width:760px) { #login.sp-mando .w-form > :not(.sp-cabeza) { margin-left:22px !important; margin-right:22px !important; } }
@media (prefers-reduced-motion: reduce) { .sp-enlace::after, .sp-cabeza .sp-estado i { animation:none !important; } }
/* Sin negro: la cabecera es acero claro cepillado y la acción es la brasa naranja. */
.sp-cabeza { background:repeating-linear-gradient(90deg, rgba(31,35,41,.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f7f8fa, #eceef2) !important; color:#16191d !important; border-bottom:1px solid #e1e4e9; }
.sp-cabeza small { color:#5c626c !important; }
.sp-cabeza .sp-estado { color:#4f555e !important; }
.sp-cabeza .sp-sello { box-shadow:0 0 0 1px rgba(31,35,41,.1) !important; }
#login.sp-mando .w-btn { background:linear-gradient(100deg, #c94a0f, #b53d0b) !important; color:#fff !important;
box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 32px -14px rgba(201,74,15,.8) !important; }
#login.sp-mando .w-btn i { color:#fff !important; }
#login.sp-mando .w-btn:hover { background:linear-gradient(100deg, #c2410c, #9a3412) !important; }
/* ===== sellport-login-hoja ===== */
/* Acceso según Taste: sin tarjeta flotante. Una hoja blanca a sangre en el borde derecho, separada de la
escena por un paso de tono (sin sombra, sin aro, sin vidrio); tinta completa, una sola letra, campos con
borde de 1px que cumple 3:1, y una sola acción plana en naranja. Sin sello, sin pastilla de estado,
sin íconos en los campos y sin punto de color en el saludo. Va al final de todas las hojas del login. */
:root { --hj-ancho:min(480px, 36vw); --hj-tinta:#16191d; --hj-texto:#4f555e; --hj-borde:#8a8f98; --hj-brasa:#c94a0f; --hj-brasa-hondo:#a83c0a; }
/* La hoja. */
#login.sp-mando .w-side { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; translate:none !important; width:var(--hj-ancho);
display:flex !important; align-items:center; padding:96px clamp(32px,3.4vw,56px) 48px !important; background:#ffffff !important; z-index:3; }
#login.sp-arranque .w-side { animation:hj-entra .6s cubic-bezier(.22,1,.36,1) both !important; }
@keyframes hj-entra { from { opacity:0; transform:translateX(16px); } }
#login.sp-mando .w-side > * { width:100%; }
#login.sp-mando .w-form { width:100% !important; max-width:380px !important; padding:0 !important; margin:0 auto; border:0 !important; border-radius:0 !important;
background:none !important; box-shadow:none !important; overflow:visible; }
#login.sp-mando .w-form > :not(.sp-cabeza) { margin-left:0 !important; margin-right:0 !important; }
#login.sp-mando .w-form > :last-child { margin-bottom:0 !important; }
#login.sp-mando .w-form::before, #login.sp-mando .w-form::after, .sp-cabeza { display:none !important; }
/* La escena se recorre para dejar sitio a la hoja; el disco queda centrado en lo que se ve. */
:root { --cx:calc((100vw - var(--hj-ancho)) / 2); }
.sp-barra { right:var(--hj-ancho); }
.sp-barra .sp-reloj { display:none; }
/* Texto. */
#login.sp-mando .w-title { font:600 40px/1.05 "Schibsted Grotesk", sans-serif !important; letter-spacing:-.04em !important; color:var(--hj-tinta) !important; margin:0 0 12px !important; }
#login.sp-mando .w-title::after { content:none !important; }
#login.sp-mando .w-sub { font:400 16px/1.55 "Schibsted Grotesk", sans-serif !important; color:var(--hj-texto) !important; margin:0 0 32px !important; }
#login.sp-mando .w-label { font:600 14px/1.3 "Schibsted Grotesk", sans-serif !important; color:var(--hj-tinta) !important; margin:4px 0 8px !important; }
#login.sp-mando .w-o, #login.sp-mando .w-help { font:400 14px/1.5 "Schibsted Grotesk", sans-serif !important; color:var(--hj-texto) !important; }
#login.sp-mando .w-o::before, #login.sp-mando .w-o::after { background:#dfe2e7 !important; }
#login.sp-mando .w-help { margin-top:24px !important; padding-top:0 !important; border-top:0 !important; }
/* Controles: rectos, planos, sin sombra. */
#login.sp-mando .w-ms, #login.sp-mando .w-input, #login.sp-mando .w-btn { border-radius:4px !important; box-shadow:none !important; }
#login.sp-mando .w-input { height:52px !important; padding-left:14px !important; background:#ffffff !important; background-image:none !important; border:1px solid var(--hj-borde) !important;
font:400 16px "Schibsted Grotesk", sans-serif !important; color:var(--hj-tinta) !important; }
#login.sp-mando .w-input:hover { border-color:var(--hj-texto) !important; }
#login.sp-mando .w-input:focus { border-color:var(--hj-tinta) !important; box-shadow:0 0 0 1px var(--hj-tinta) !important; }
#login.sp-mando .w-ms { height:52px !important; background:#ffffff !important; border:1px solid var(--hj-borde) !important; color:var(--hj-tinta) !important; font:600 15px "Schibsted Grotesk", sans-serif !important; }
#login.sp-mando .w-ms:hover { background:#f3f4f6 !important; border-color:var(--hj-texto) !important; }
#login.sp-mando .w-btn { height:54px !important; margin-top:12px !important; padding:0 20px !important; justify-content:space-between !important;
background:var(--hj-brasa) !important; color:#ffffff !important; font:600 16px "Schibsted Grotesk", sans-serif !important;
transition:background-color .2s cubic-bezier(.22,1,.36,1) !important; }
#login.sp-mando .w-btn::after { display:none !important; }
#login.sp-mando .w-btn i { color:#ffffff !important; transition:transform .25s cubic-bezier(.22,1,.36,1); }
#login.sp-mando .w-btn:hover { background:var(--hj-brasa-hondo) !important; }
#login.sp-mando .w-btn:hover i { transform:translateX(4px); }
#login.sp-mando .w-btn:active { transform:scale(.99); }
#login.sp-mando :focus-visible { outline:2px solid var(--hj-tinta) !important; outline-offset:2px; }
/* El haz llega al borde de la hoja. */
.sp-enlace { background:linear-gradient(90deg, rgba(201,74,15,.1), rgba(201,74,15,.6)); }
@media (max-width:1100px) { :root { --hj-ancho:min(440px, 44vw); } }
@media (max-width:760px) {
:root { --hj-ancho:100%; --cx:50%; }
.sp-barra { right:0; }
#login.sp-mando .w-side { position:relative !important; width:auto; padding:32px 20px 40px !important; }
#login.sp-mando .w-title { font-size:34px !important; }
}
#login.sp-mando #email, #login.sp-mando #password { background-image:none !important; padding-left:14px !important; }
/* El disco cabe en la escena sin tocar el titular. */
:root { --sol:min(54vh, 520px, calc((100vw - var(--hj-ancho)) * .46)); --cy:56%; }
@media (max-width:760px) { :root { --sol:min(84vw, 340px); --cy:50%; } }
/* 30-oct: de vuelta a la tarjeta que flota sobre la escena (nada de dos columnas), con el disco centrado
en la pantalla. La tarjeta queda limpia: blanca, una sola sombra suave porque sí flota, sin adornos. */
:root { --cx:50%; --cy:50%; --sol:min(60vh, 560px); }
.sp-barra { right:0 !important; }
.sp-barra .sp-reloj { display:block !important; }
#login.sp-mando .w-side { top:50% !important; bottom:auto !important; right:clamp(24px,5vw,96px) !important; translate:0 -50% !important; width:min(440px, 86vw);
display:block !important; padding:44px 40px 36px !important; background:#ffffff !important; border-radius:20px;
box-shadow:0 0 0 1px rgba(22,25,29,.06), 0 30px 60px -28px rgba(22,25,29,.35) !important; }
#login.sp-arranque .w-side { animation:hj-flota .8s cubic-bezier(.22,1,.36,1) .4s both !important; }
@keyframes hj-flota { from { opacity:0; translate:0 calc(-50% + 18px); } }
#login.sp-mando .w-form { max-width:none !important; }
#login.sp-mando .w-title { font-size:36px !important; }
#login.sp-mando .w-ms, #login.sp-mando .w-input, #login.sp-mando .w-btn { border-radius:10px !important; }
@media (max-width:760px) {
:root { --cx:50%; --sol:min(84vw, 340px); }
#login.sp-mando .w-side { position:relative !important; top:auto !important; right:auto !important; translate:none !important; width:auto; margin:16px 16px 0; padding:28px 22px !important; }
}
/* La tarjeta, del mismo material que el disco: perla cepillada translúcida, el mismo bisel (aro blanco +
línea fina), el anillo con los colores del logo como borde, y el botón con ese mismo anillo. */
#login.sp-mando .w-side { border-radius:28px !important; padding:44px 40px 36px !important;
background:
repeating-linear-gradient(115deg, rgba(120,128,140,.045) 0 1px, transparent 1px 3px) padding-box,
radial-gradient(120% 90% at 30% 0%, #ffffff, #f4f5f7 60%, #eceef1 100%) padding-box,
conic-gradient(from 200deg, #ff6a1a, #8b5cf6, #2f7cf6, #2ef2ea, #ff3fae, #ffe14d, #ff6a1a) border-box !important;
border:2px solid transparent !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 0 0 9px rgba(255,255,255,.55), 0 0 0 10px rgba(31,35,41,.08), 0 40px 90px -36px rgba(31,35,41,.45), 0 24px 70px -40px rgba(255,106,26,.45) !important; }
#login.sp-mando .w-input, #login.sp-mando .w-ms { background:rgba(255,255,255,.85) !important; border-color:#9aa0aa !important; border-radius:12px !important; }
#login.sp-mando .w-input:focus { background:#fff !important; border-color:#6d4bd8 !important; box-shadow:0 0 0 4px rgba(139,92,246,.16) !important; }
#login.sp-mando .w-btn { border-radius:12px !important; background:linear-gradient(100deg, #e4580f, #8b5cf6 55%, #2f7cf6) !important; color:#fff !important;
box-shadow:0 14px 30px -14px rgba(139,92,246,.7) !important; background-size:160% 100% !important; background-position:0 0 !important;
transition:background-position .5s cubic-bezier(.22,1,.36,1), box-shadow .3s ease !important; }
#login.sp-mando .w-btn:hover { background-position:100% 0 !important; box-shadow:0 18px 36px -14px rgba(47,124,246,.75) !important; }
#login.sp-mando .w-btn i { color:#fff !important; }
#login.sp-mando .w-o::before, #login.sp-mando .w-o::after { background:rgba(31,35,41,.12) !important; }
/* ===== sellport-login-encaje ===== */
/* Tarjeta «encajada en el disco» (dirección A): su lado izquierdo es una curva con el radio del disco,
así que se acomoda pegada a él como pieza del mismo mecanismo. Mismo material perla cepillada.
El botón es claro: lavanda pálido con el azul del logo. Va al final de las hojas del login. */
/* Lado a lado: sólo cuando la tarjeta cabe completa junto al disco (el script quita o pone .sp-apilado). */
#login.sp-mando:not(.sp-apilado) {
& .w-side { right:auto !important; left:var(--enc-x, auto) !important; width:520px !important; padding:44px 44px 36px 150px !important;
border:0 !important; border-radius:28px !important; box-shadow:none !important;
background:repeating-linear-gradient(115deg, rgba(120,128,140,.04) 0 1px, transparent 1px 3px), linear-gradient(160deg, #ffffff, #f1f2f5) !important;
-webkit-mask:radial-gradient(circle at calc(-1 * var(--hueco, 0px)) 50%, transparent calc(var(--sol) / 2 + 92px), #000 calc(var(--sol) / 2 + 93px));
mask:radial-gradient(circle at calc(-1 * var(--hueco, 0px)) 50%, transparent calc(var(--sol) / 2 + 92px), #000 calc(var(--sol) / 2 + 93px));
filter:drop-shadow(0 30px 40px rgba(31,35,41,.18)); }
}
.sp-enlace { display:none !important; }
#login.sp-mando .w-input, #login.sp-mando .w-ms { background:#ffffff !important; border-color:#9aa0aa !important; border-radius:12px !important; }
#login.sp-mando .w-input:focus { border-color:#2f55d4 !important; box-shadow:0 0 0 4px rgba(47,85,212,.14) !important; }
/* Botón claro. */
#login.sp-mando .w-btn { border-radius:12px !important; background:#e7ecff !important; color:#1f3fae !important; border:1px solid #c3cdf6 !important;
box-shadow:none !important; transition:background-color .2s cubic-bezier(.22,1,.36,1), border-color .2s ease !important; }
#login.sp-mando .w-btn i { color:#1f3fae !important; }
#login.sp-mando .w-btn:hover { background:#d6defe !important; border-color:#9fb0f0 !important; }
#login.sp-mando .w-btn:active { background:#c7d2fd !important; }
/* Mismo material en todos los tamaños (sin el borde de colores de versiones anteriores). */
#login.sp-mando .w-side { border:0 !important; -webkit-backdrop-filter:none; backdrop-filter:none;
background:repeating-linear-gradient(115deg, rgba(120,128,140,.04) 0 1px, transparent 1px 3px), linear-gradient(160deg, #ffffff, #f1f2f5) !important; }
/* Sin espacio (ventana angosta o baja): una columna. Disco arriba, titular, y la tarjeta debajo, centrada. */
#login.sp-mando.sp-apilado {
--cx:50%; --cy:50%; --sol:min(56vw, 400px) !important;
display:block !important; min-height:100svh; padding-bottom:40px;
&::after { display:none; }
& .w-panel { position:relative !important; inset:auto !important; height:calc(var(--sol) + 230px) !important; }
& .w-orbita { display:block !important; left:50% !important; top:calc(var(--sol) / 2 + 100px) !important; translate:-50% -50% !important; }
& .w-h1 { top:auto !important; bottom:14px !important; left:clamp(20px,6vw,56px) !important; right:clamp(20px,6vw,56px); white-space:normal !important;
font-size:clamp(34px,6.4vw,54px) !important; }
& .w-lead { display:none !important; }
& .w-side { position:relative !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; translate:none !important;
width:auto !important; max-width:520px; margin:20px auto 0 !important; padding:36px clamp(22px,5vw,40px) 30px !important; border-radius:24px !important;
-webkit-mask:none !important; mask:none !important; filter:none !important; box-shadow:0 0 0 1px rgba(31,35,41,.06), 0 24px 50px -30px rgba(31,35,41,.4) !important; }
}
@media (max-width:600px) { #login.sp-mando .w-side { margin:16px 16px 0 !important; } }
/* Lo que el zoom del portal deja fuera del login toma el tono del piso de la escena. */
html:has(#login:not(.hidden)), html:has(#login:not(.hidden)) body { background:#e3e6ea !important; background-image:none !important; }
/* Los nombres de los canales con su propia base, para que ningún haz ni arco les pase por encima. */
.sp-tag { padding:3px 7px 3px 6px; border-radius:99px; background:rgba(255,255,255,.88); }
/* Los marketplaces se alejan hacia el borde del disco para que los arcos naranjas no crucen sus nombres. */
#login.sp-mando .w-orbita { --r:calc(var(--sol) / 2 + 2px) !important; }
/* La carátula crece por fuera para que los canales queden dentro del círculo. */
#login.sp-mando .w-orbita::before { inset:-74px !important; }
/* Con la carátula más ancha, el disco interior se reduce para que el conjunto mida lo mismo. */
:root { --sol:min(52vh, 500px) !important; }
/* «clic» con los colores de «PORT» del logo (pedido del usuario). */
#login.sp-mando .w-h1 .sp-clic { font-weight:600; color:transparent; -webkit-background-clip:text; background-clip:text;
background-image:linear-gradient(90deg, #ff6a1a 0%, #ff8a1a 30%, #8b5cf6 70%, #2f7cf6 100%); }
/* Marca de la empresa en la barra: Select en tinta, shop en naranja. */
.sp-barra .sp-marca .sp-shop { font-weight:inherit; color:#ff6a1a; }
/* Celular: aro de la carátula más delgado, disco más abajo para no tocar la barra, y la tarjeta con margen. */
@media (max-width:600px) {
#login.sp-mando.sp-apilado { --sol:min(60vw, 260px) !important; }
#login.sp-mando.sp-apilado .w-orbita::before { inset:-52px !important; }
#login.sp-mando.sp-apilado .w-panel { height:calc(var(--sol) + 300px) !important; }
#login.sp-mando.sp-apilado .w-orbita { top:calc(var(--sol) / 2 + 130px) !important; }
#login.sp-mando.sp-apilado .w-side { margin:16px 16px 0 !important; }
#login.sp-mando.sp-apilado .sp-tag { display:none; }
}
/* Laptops (pantallas bajas): la misma composición del monitor, más compacta para que quepa a lo alto. */
@media (min-width:901px) and (max-height:820px) {
/* El disco se queda del mismo tamaño que en el monitor (la usuaria lo pidió así, 2026-11-01). */
#login.sp-mando:not(.sp-apilado) .w-side { padding:26px 36px 22px 150px !important; }
#login.sp-mando:not(.sp-apilado) .w-title { font-size:30px !important; margin-bottom:6px !important; }
#login.sp-mando:not(.sp-apilado) .w-sub { font-size:14px !important; margin-bottom:16px !important; }
#login.sp-mando:not(.sp-apilado) .w-input, #login.sp-mando:not(.sp-apilado) .w-ms { height:44px !important; }
#login.sp-mando:not(.sp-apilado) .w-btn { height:46px !important; margin-top:6px !important; }
#login.sp-mando:not(.sp-apilado) .w-label { margin:2px 0 6px !important; }
#login.sp-mando:not(.sp-apilado) .w-o { margin:12px 0 10px !important; }
#login.sp-mando:not(.sp-apilado) .w-help { margin-top:12px !important; }
#login.sp-mando:not(.sp-apilado) .w-h1 { font-size:clamp(36px,4vw,56px) !important; top:clamp(76px,11vh,110px) !important; }
}
/* Logo naranja (2026-10-30): «clic» sigue los colores de PORT del logo nuevo, y el logo del núcleo un poco más grande. */
#login.sp-mando .w-h1 .sp-clic { background-image:linear-gradient(90deg, #f0551f 0%, #ff7a1a 45%, #ffb23f 100%) !important; }
#login.sp-mando .w-nucleo img.w-logo-color { width:142px !important; }
/* Botón naranja claro (logo naranja, 2026-10-30). */
#login.sp-mando .w-btn { background:#fff1e6 !important; color:#b23f08 !important; border-color:#ffc9a3 !important; }
#login.sp-mando .w-btn i { color:#b23f08 !important; }
#login.sp-mando .w-btn:hover { background:#ffe3cc !important; border-color:#ff9d5c !important; color:#9a3608 !important; }
#login.sp-mando .w-btn:active { background:#ffd4b3 !important; }
#login.sp-mando .w-input:focus { border-color:#e2600f !important; box-shadow:0 0 0 4px rgba(255,106,26,.16) !important; }
/* Con la sesión iniciada el login se oculta con .hidden; en celular (.sp-apilado) el display:block !important le
ganaba y el login se quedaba encima del tablero. */
#login.sp-mando.sp-apilado.hidden, #login.sp-mando.hidden { display:none !important; }
/* Tarjeta de inicio de sesión (ux-designer + Taste + impeccable, 2026-11-01). Mismo diseño y contenido; lo que se
corrige: el botón principal casi no se distinguía (naranja pálido), letra chica para gente grande y ayudas al
escribir. */
/* Una sola acción principal, sólida y clara: naranja de marca con letra blanca (5.2:1). */
#login.sp-mando .w-btn { background:#c2410c !important; color:#fff !important; border:0 !important; font-weight:600 !important; font-size:16px !important; }
#login.sp-mando .w-btn i { color:#fff !important; }
#login.sp-mando .w-btn:hover { background:#9a3412 !important; color:#fff !important; }
#login.sp-mando .w-btn:active { background:#7c2d12 !important; }
#login.sp-mando .w-btn:focus-visible { outline:3px solid #16191f !important; outline-offset:2px; }
#login.sp-mando .w-btn[aria-busy="true"] { cursor:progress; opacity:.85; }
#login.sp-mando .w-btn[aria-busy="true"] i { animation:sp-entrando .8s ease-in-out infinite alternate; }
@keyframes sp-entrando { to { transform:translateX(4px); } }
/* Etiquetas y campos legibles; 16 px en los campos para que el celular no haga zoom al tocarlos. */
#login.sp-mando .w-label { font-size:14px !important; font-weight:600 !important; color:#16191f !important; }
#login.sp-mando .w-input { font-size:16px !important; color:#16191f !important; }
#login.sp-mando .w-input::placeholder { color:#6b7280 !important; }
#login.sp-mando .w-sub { font-size:15px !important; color:#414d5c !important; line-height:1.5 !important; }
#login.sp-mando .w-help { font-size:14px !important; color:#5f6b7a !important; }
/* Contraseña con ojo para verla. */
#login.sp-mando .sp-clave { position:relative; }
#login.sp-mando .sp-clave .w-input { width:100%; padding-right:52px !important; }
#login.sp-mando .sp-ojo { position:absolute; top:50%; right:6px; translate:0 -50%; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:10px; background:none; color:#5f6b7a; font-size:18px; cursor:pointer; }
#login.sp-mando .sp-ojo:hover { background:#f1f3f6; color:#16191f; }
#login.sp-mando .sp-ojo:focus-visible { outline:2px solid #c2410c; outline-offset:0; }
#login.sp-mando .sp-mayus { display:flex; align-items:center; gap:6px; margin:6px 0 0 !important; font-size:13px; font-weight:600; color:#a15c07; }
#login.sp-mando .sp-mayus[hidden] { display:none; }
/* Error de inicio: aviso visible, no texto rojo suelto. */
#login.sp-mando .w-error:not(:empty) { display:block; margin-top:12px !important; padding:10px 14px; border:1px solid #fecdca; border-radius:10px; background:#fef3f2; color:#b42318 !important; font-size:14px !important; }
@media (prefers-reduced-motion: reduce) { #login.sp-mando .w-btn[aria-busy="true"] i { animation:none; } }
#login.sp-mando:not(.sp-apilado) .w-sub { font-size:15px !important; }
/* Tarjeta un poco más ancha y con aire a la derecha (antes el formulario quedaba pegado al borde). */
#login.sp-mando:not(.sp-apilado) .w-side { width:560px !important; padding-right:56px !important; }
/* Edge pone su propio ojo en los campos de contraseña: se oculta para que sólo quede el nuestro. */
#login input[type="password"]::-ms-reveal, #login input[type="password"]::-ms-clear { display:none; }