/* ☁️ La portada de starposweb.app (lienzo «Portada neumórfica», 📍 Marcelo 21/10), con sus dos temas: #pn el oscuro (la paleta del sitio,
   por defecto) y #pc el claro. Cada uno con sus estilos y animaciones bajo su id, para no pisarse con el sitio. Se ve la del tema elegido;
   la otra, escondida, no anima. Generado desde el lienzo: no se edita a mano. */
html.claro #pn, html:not(.claro) #pc { display: none; }
/* 🧭 La barra del sitio: escondida mientras se ve la portada, baja al scrollear (la portada ya tiene su logo e Ingresar). */
.barraPortada { position: fixed; left: 0; right: 0; top: 10px; margin: 0 auto; transition: transform .45s ease, opacity .45s ease; }
.barraPortada.pnOculta { transform: translateY(-160%); opacity: 0; pointer-events: none; }
#pn { position: relative; width: 100%; height: 56.25vw; overflow: hidden; background: #252A3D; background-image: radial-gradient(ellipse 62% 88% at 80% 52%, #46507A 0%, #3A4262 28%, #2F3550 50%, #292E44 68%, #252A3D 86%);
    color: #11212D; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; line-height: normal; }
  #pnEscenario { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
  #pn *, #pn *::before, #pn *::after { box-sizing: content-box; }
  #pn [style*="box-sizing: border-box"], #pn button, #pn .modulo, #pn .bloque { box-sizing: border-box; }
  #pn h1, #pn p, #pn button { font-family: inherit; }
  #pn .pnFundido { position: absolute; left: -3000px; right: -3000px; bottom: 0; height: 26%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(37,42,61,0) 0%, rgba(37,42,61,.55) 55%, #252A3D 100%); }
  #pn.pnPausa * { animation-play-state: paused !important; }
  /* 📱 En el celular: el texto arriba, a su tamaño; la caja, abajo (ver ajustar). */
  #pn .pnCabeza { position: relative; z-index: 2; color: #FFFFFF; }
  #pn.pnCelu .pnCabeza { padding: 18px 20px 36px; }
  #pn.pnCelu .pnArriba { position: absolute !important; top: 16px !important; right: 16px !important; gap: 12px !important; }
  #pn.pnCelu .pnArriba .plana { height: 42px !important; padding: 0 18px !important; border-radius: 14px !important; }
  #pn.pnCelu .pnTexto { position: static !important; width: auto !important; padding: 0 !important; gap: 0 !important; }
  #pn.pnCelu .pnTexto > div:first-child { margin-top: 2px !important; height: auto !important; }
  #pn.pnCelu .pnTexto .logoInclinado { gap: 6px !important; }
  #pn.pnCelu .pnTexto .logoInclinado svg { height: 46px !important; }
  #pn.pnCelu .pnTexto [aria-label="Web, beta"] > span { font-size: 11px !important; padding: 4px 7px 4px 10px !important; }
  #pn.pnCelu .pnTexto > div:last-child { margin-top: 26px !important; gap: 16px !important; }
  #pn.pnCelu .pnTexto .hondoB { height: 32px !important; font-size: 12px !important; padding: 0 14px !important; }
  #pn.pnCelu .pnTexto h1 { font-size: clamp(30px, 8.4vw, 52px) !important; }
  #pn.pnCelu .pnTexto p { font-size: 16px !important; max-width: 520px !important; }
  #pn.pnCelu .pnTexto a.plana { height: 52px !important; padding: 0 24px !important; font-size: 16px !important; border-radius: 16px !important; }
  #pn .tema { position: relative; width: 60px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
  #pn .tema:focus-visible { outline: 2px solid #F9B233; outline-offset: 3px; }
  #pn .temaPista { position: absolute; inset: 0; border-radius: 999px; background: #1E2133; box-shadow: inset 3px 3px 6px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.05); }
  #pn .temaPerilla { position: absolute; top: 4px; left: 32px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    color: #F9B233; transition: left .22s ease; background: linear-gradient(150deg, #4C5680, #3C4463); box-shadow: -1px 1px 0 #252A44, -2px 3px 5px rgba(0,0,0,.45); }
  #pn .tema.yendo .temaPerilla { left: 4px; }
#pn a{color:#11212D}
#pn a:hover{color:#06141B}
#pn .p3{transform-style:preserve-3d}
#pn .tecla{border:0;font:inherit;cursor:pointer;color:#253745;background:linear-gradient(150deg,#F3F5F4 0%,#DCE1E0 100%);
  transform:translateZ(14px);transition:transform .12s ease,box-shadow .12s ease;
  box-shadow:-1px 1px 0 #C3CACB,-2px 2px 0 #BCC4C6,-3px 3px 0 #B5BEC0,-4px 4px 0 #AEB8BA,-5px 5px 0 #A7B2B4,-6px 6px 0 #A0ACAF,-7px 7px 0 #9BA8AB,
    -14px 18px 22px rgba(17,33,45,.32)}
#pn .tecla:hover{transform:translateZ(18px)}
#pn .tecla:active,#pn .tecla.on{transform:translateZ(3px);box-shadow:-1px 1px 0 #BCC4C6,-2px 2px 0 #A7B2B4,-4px 5px 8px rgba(17,33,45,.30)}
#pn .tecla:focus-visible{outline:2px solid #253745;outline-offset:3px}
#pn .oscura{color:#CCD0CF;background:linear-gradient(150deg,#3A4D5B 0%,#253745 55%,#1A2C38 100%);
  box-shadow:-1px 1px 0 #182833,-2px 2px 0 #15242E,-3px 3px 0 #12202A,-4px 4px 0 #0F1C25,-5px 5px 0 #0C1820,-6px 6px 0 #09161D,-7px 7px 0 #06141B,
    -16px 20px 26px rgba(6,20,27,.45)}
#pn .oscura:active,#pn .oscura.on{box-shadow:-1px 1px 0 #12202A,-2px 2px 0 #06141B,-4px 5px 8px rgba(6,20,27,.4)}
#pn .hondo{background:#C3C9C9;box-shadow:inset 6px 6px 12px #9BA8AB,inset -6px -6px 12px #EEF1F0}
#pn .hondoB{background:#EEF1F0;box-shadow:inset 5px 5px 10px #CCD0CF,inset -5px -5px 10px #FFFFFF}
#pn .plana{border:0;font:inherit;cursor:pointer;color:#253745;background:linear-gradient(150deg,#FFFFFF,#E4E8E7);transition:transform .12s ease,box-shadow .12s ease;
  box-shadow:-1px 1px 0 #CCD0CF,-2px 2px 0 #BCC4C6,-3px 3px 0 #AEB8BA,-4px 4px 0 #9BA8AB,-10px 14px 20px rgba(17,33,45,.18)}
#pn .plana:hover{transform:translate(1px,-1px)}
#pn .plana:active{transform:translate(-3px,3px);box-shadow:-1px 1px 0 #AEB8BA,-3px 4px 8px rgba(17,33,45,.2)}
#pn .plana.oscura{color:#CCD0CF;background:linear-gradient(150deg,#3A4D5B,#253745 55%,#1A2C38);
  box-shadow:-1px 1px 0 #15242E,-2px 2px 0 #12202A,-3px 3px 0 #0C1820,-4px 4px 0 #06141B,-12px 16px 22px rgba(6,20,27,.3)}
#pn .plana:focus-visible{outline:2px solid #253745;outline-offset:3px}
@keyframes pn_vista{0%,100%{perspective-origin:20% 35%}33%{perspective-origin:24% 31%}66%{perspective-origin:17% 38%}}
@keyframes pn_deriva{0%,100%{transform:rotateX(27deg) rotateY(19deg) rotateZ(-7deg) translateY(0)}
  30%{transform:rotateX(26.2deg) rotateY(20deg) rotateZ(-7deg) translateY(-6px)}
  70%{transform:rotateX(27.8deg) rotateY(18.2deg) rotateZ(-7deg) translateY(5px)}}
#pn .vista{animation:pn_vista 19s ease-in-out infinite}
#pn .deriva{animation:pn_deriva 23s ease-in-out infinite}
@keyframes pn_aparece{from{opacity:0;transform:translateZ(30px) translateY(12px)}to{opacity:1;transform:translateZ(96px)}}
@keyframes pn_barrido{0%{top:8%}50%{top:86%}100%{top:8%}}
@keyframes pn_cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pn_entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pn_late{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
#pn .codigo{transform:translateZ(96px);animation:pn_aparece .35s ease-out both}
#pn .barrido{animation:pn_barrido 1s ease-in-out infinite}
#pn .cursor{animation:pn_cursor 1s step-end infinite}
#pn .linea{animation:pn_entra .4s ease-out both}
#pn .punto{animation:pn_late 1.8s ease-in-out infinite}
#pn .pieza{transform-style:preserve-3d;transform:translateZ(0);opacity:1;
  transition:transform 1.2s cubic-bezier(.3,.7,.2,1) var(--d,0s),opacity .35s ease var(--d,0s)}
#pn .pieza.fuera{pointer-events:none;opacity:.04;
  transition:transform 1.3s cubic-bezier(.45,.05,.3,1) var(--d,0s),opacity .9s ease calc(var(--d,0s) + .25s)}
#pn .pz1.fuera{transform:translateZ(1500px)}
#pn .pz2.fuera{transform:translateZ(1350px)}
#pn .pz2{transition:transform 1.2s cubic-bezier(.3,.7,.2,1) var(--d,0s),opacity .35s ease var(--d,0s),background-color .35s ease,box-shadow .35s ease}
#pn .pz2.fuera{background-color:transparent;box-shadow:none;
  transition:transform 1.3s cubic-bezier(.45,.05,.3,1) var(--d,0s),opacity .9s ease calc(var(--d,0s) + .25s),background-color .35s ease,box-shadow .35s ease}
#pn .pz3.fuera{transform:translateZ(1650px)}
#pn .pz4.fuera{transform:translateZ(1580px)}
#pn .pz5.fuera{transform:translateZ(1250px)}
#pn .motor{opacity:0;transition:opacity .45s ease}
#pn .motor.visible{opacity:.999;transition:opacity .7s ease .35s}
#pn .bloque{position:absolute;box-sizing:border-box;border-radius:14px;background:linear-gradient(150deg,#D3D9D9,#C2C9CA);transform:translateZ(10px);
  box-shadow:-1px 1px 0 #BCC4C6,-2px 2px 0 #AEB8BA,-4px 4px 0 #9BA8AB,-10px 14px 16px rgba(17,33,45,.22)}
#pn .bloque.hueco{background:#C3C9C9;transform:none;box-shadow:inset 4px 4px 8px #9BA8AB,inset -4px -4px 8px #EEF1F0}
#pn .engranaje{position:absolute;display:block}
#pn .modulo{position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;color:#253745;
  background:linear-gradient(150deg,#FFFFFF,#EAEEED);transform:translateZ(22px);
  box-shadow:-1px 1px 0 #C3CACB,-2px 2px 0 #B5BEC0,-4px 4px 0 #A7B2B4,-6px 6px 0 #9BA8AB,-16px 22px 26px rgba(17,33,45,.30)}
#pn .estado{font-size:12px;font-weight:700;color:#4A5C6A}
#pn .estado.ok{color:#1F7A4D}
@keyframes pn_gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pn_giraAtras{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
#pn .giraA{animation:pn_gira 7s linear infinite}
#pn .giraB{animation:pn_giraAtras 4.2s linear infinite}
@keyframes pn_fluye{to{stroke-dashoffset:-32}}
#pn .fluye{animation:pn_fluye 1.2s linear infinite}
#pn .nube{position:absolute;pointer-events:none;filter:blur(1.2px) drop-shadow(-6px 16px 22px rgba(74,92,106,.16))}
#pn .nube svg{display:block;width:100%;height:100%;overflow:visible}
#pn .bola{position:absolute;border-radius:50%;transform:scaleY(.6);
  background:radial-gradient(ellipse at 50% 36%,#FFFFFF 0%,#FFFFFF 38%,rgba(250,252,253,.92) 50%,rgba(205,217,224,.55) 62%,rgba(205,217,224,0) 73%)}
#pn .lejos{opacity:.8;filter:blur(3px)}
@keyframes pn_nubeA{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes pn_viaja{0%{transform:translateX(-240px);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateX(300px);opacity:0}}
#pn .deriva1{animation:pn_nubeA 34s ease-in-out infinite}
#pn .viaja1{animation:pn_viaja 62s linear infinite -24s}
#pn .viaja2{animation:pn_viaja 48s linear infinite -36s}
#pn .viaja3{animation:pn_viaja 85s linear infinite -10s}
#pn .logoInclinado{transform:none;filter:drop-shadow(-2px 3px 2px rgba(17,33,45,.14)) drop-shadow(-18px 26px 20px rgba(17,33,45,.24))}
#pn .beta3d{box-shadow:0 1px 0 #D9961F,0 2px 0 #C2841A,0 3px 0 #A86F14,0 4px 0 #946010,0 9px 10px rgba(17,33,45,.20)}
#pn .tecla{color:#FFFFFF;background:linear-gradient(150deg,#454D70 0%,#343954 100%);
  box-shadow:-1px 1px 0 #2B3049,-2px 2px 0 #282C44,-3px 3px 0 #25293F,-4px 4px 0 #22263A,-5px 5px 0 #1F2336,-6px 6px 0 #1C1F31,-7px 7px 0 #191C2C,-14px 18px 22px rgba(0,0,0,.45)}
#pn .tecla:active,#pn .tecla.on{box-shadow:-1px 1px 0 #25293F,-2px 2px 0 #1C1F31,-4px 5px 8px rgba(0,0,0,.4)}
#pn .tecla:focus-visible,#pn .plana:focus-visible{outline-color:#F9B233}
#pn .oscura{color:#1D2131;background:linear-gradient(150deg,#FFC861 0%,#F9B233 55%,#E9A020 100%);
  box-shadow:-1px 1px 0 #D9961F,-2px 2px 0 #CF8E1C,-3px 3px 0 #C2841A,-4px 4px 0 #B57A17,-5px 5px 0 #A86F14,-6px 6px 0 #9E6812,-7px 7px 0 #946010,-16px 20px 26px rgba(0,0,0,.5)}
#pn .oscura:active,#pn .oscura.on{box-shadow:-1px 1px 0 #C2841A,-2px 2px 0 #946010,-4px 5px 8px rgba(0,0,0,.45)}
#pn .hondo{background:#1E2133;box-shadow:inset 6px 6px 12px rgba(0,0,0,.45),inset -5px -5px 10px rgba(255,255,255,.05)}
#pn .hondoB{background:#1E2133;box-shadow:inset 5px 5px 10px rgba(0,0,0,.45),inset -4px -4px 8px rgba(255,255,255,.05)}
#pn .plana{color:#FFFFFF;background:linear-gradient(150deg,#454D70,#343954);
  box-shadow:-1px 1px 0 #2B3049,-2px 2px 0 #25293F,-3px 3px 0 #1F2336,-4px 4px 0 #191C2C,-10px 14px 20px rgba(0,0,0,.4)}
#pn .plana:active{box-shadow:-1px 1px 0 #25293F,-3px 4px 8px rgba(0,0,0,.4)}
#pn .plana:hover{color:#FFFFFF}
#pn .plana.oscura:hover{color:#1D2131}
#pn .plana.oscura{color:#1D2131;background:linear-gradient(150deg,#FFC861,#F9B233 55%,#E9A020);
  box-shadow:-1px 1px 0 #D9961F,-2px 2px 0 #C2841A,-3px 3px 0 #A86F14,-4px 4px 0 #946010,-12px 16px 22px rgba(0,0,0,.45)}
#pn .bloque{background:linear-gradient(150deg,#2E3349,#272B3F);box-shadow:-1px 1px 0 #20243A,-2px 2px 0 #1C1F31,-4px 4px 0 #181A2A,-10px 14px 16px rgba(0,0,0,.35)}
#pn .bloque.hueco{background:#1E2133;box-shadow:inset 4px 4px 8px rgba(0,0,0,.45),inset -3px -3px 6px rgba(255,255,255,.04)}
#pn .modulo{color:#FFFFFF;background:linear-gradient(150deg,#4C5680,#3C4463);
  box-shadow:-1px 1px 0 #333A57,-2px 2px 0 #2C3250,-4px 4px 0 #252A44,-6px 6px 0 #1E2133,-16px 22px 26px rgba(0,0,0,.45)}
#pn .estado{color:rgba(255,255,255,.62)}
#pn .estado.ok{color:#62D092}
#pn .nube{filter:blur(1.2px) drop-shadow(-6px 16px 22px rgba(0,0,0,.35))}
#pn .logoInclinado{filter:drop-shadow(-2px 3px 2px rgba(0,0,0,.3)) drop-shadow(-18px 26px 20px rgba(0,0,0,.45))}
#pn .beta3d{box-shadow:0 1px 0 #D9961F,0 2px 0 #C2841A,0 3px 0 #A86F14,0 4px 0 #946010,0 9px 10px rgba(0,0,0,.4)}

#pc { position: relative; width: 100%; height: 56.25vw; overflow: hidden; background: #FFFFFF; background-image: radial-gradient(ellipse 62% 88% at 80% 52%, #C9D7DF 0%, #D6E1E7 30%, #E6EDF1 52%, #F5F8F9 70%, #FFFFFF 86%);
    color: #11212D; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; line-height: normal; }
  #pcEscenario { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
  #pc *, #pc *::before, #pc *::after { box-sizing: content-box; }
  #pc [style*="box-sizing: border-box"], #pc button, #pc .modulo, #pc .bloque { box-sizing: border-box; }
  #pc h1, #pc p, #pc button { font-family: inherit; }
  #pc .pnFundido { position: absolute; left: -3000px; right: -3000px; bottom: 0; height: 26%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(238,241,242,.6) 55%, #EEF1F2 100%); }
  #pc.pnPausa * { animation-play-state: paused !important; }
  /* 📱 En el celular: el texto arriba, a su tamaño; la caja, abajo (ver ajustar). */
  #pc .pnCabeza { position: relative; z-index: 2; color: #11212D; }
  #pc.pnCelu .pnCabeza { padding: 18px 20px 36px; }
  #pc.pnCelu .pnArriba { position: absolute !important; top: 16px !important; right: 16px !important; gap: 12px !important; }
  #pc.pnCelu .pnArriba .plana { height: 42px !important; padding: 0 18px !important; border-radius: 14px !important; }
  #pc.pnCelu .pnTexto { position: static !important; width: auto !important; padding: 0 !important; gap: 0 !important; }
  #pc.pnCelu .pnTexto > div:first-child { margin-top: 2px !important; height: auto !important; }
  #pc.pnCelu .pnTexto .logoInclinado { gap: 6px !important; }
  #pc.pnCelu .pnTexto .logoInclinado svg { height: 46px !important; }
  #pc.pnCelu .pnTexto [aria-label="Web, beta"] > span { font-size: 11px !important; padding: 4px 7px 4px 10px !important; }
  #pc.pnCelu .pnTexto > div:last-child { margin-top: 26px !important; gap: 16px !important; }
  #pc.pnCelu .pnTexto .hondoB { height: 32px !important; font-size: 12px !important; padding: 0 14px !important; }
  #pc.pnCelu .pnTexto h1 { font-size: clamp(30px, 8.4vw, 52px) !important; }
  #pc.pnCelu .pnTexto p { font-size: 16px !important; max-width: 520px !important; }
  #pc.pnCelu .pnTexto a.plana { height: 52px !important; padding: 0 24px !important; font-size: 16px !important; border-radius: 16px !important; }
  #pc .tema { position: relative; width: 60px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
  #pc .tema:focus-visible { outline: 2px solid #F9B233; outline-offset: 3px; }
  #pc .temaPista { position: absolute; inset: 0; border-radius: 999px; background: #E4E8E7; box-shadow: inset 3px 3px 6px #BCC4C6, inset -3px -3px 6px #FFFFFF; }
  #pc .temaPerilla { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    color: #F9B233; transition: left .22s ease; background: linear-gradient(150deg, #FFFFFF, #E4E8E7); box-shadow: -1px 1px 0 #BCC4C6, -2px 3px 5px rgba(17,33,45,.25); }
  #pc .tema.yendo .temaPerilla { left: 32px; }
#pc a{color:#11212D}
#pc a:hover{color:#06141B}
#pc .p3{transform-style:preserve-3d}
#pc .tecla{border:0;font:inherit;cursor:pointer;color:#253745;background:linear-gradient(150deg,#F3F5F4 0%,#DCE1E0 100%);
  transform:translateZ(14px);transition:transform .12s ease,box-shadow .12s ease;
  box-shadow:-1px 1px 0 #C3CACB,-2px 2px 0 #BCC4C6,-3px 3px 0 #B5BEC0,-4px 4px 0 #AEB8BA,-5px 5px 0 #A7B2B4,-6px 6px 0 #A0ACAF,-7px 7px 0 #9BA8AB,
    -14px 18px 22px rgba(17,33,45,.32)}
#pc .tecla:hover{transform:translateZ(18px)}
#pc .tecla:active,#pc .tecla.on{transform:translateZ(3px);box-shadow:-1px 1px 0 #BCC4C6,-2px 2px 0 #A7B2B4,-4px 5px 8px rgba(17,33,45,.30)}
#pc .tecla:focus-visible{outline:2px solid #253745;outline-offset:3px}
#pc .oscura{color:#CCD0CF;background:linear-gradient(150deg,#3A4D5B 0%,#253745 55%,#1A2C38 100%);
  box-shadow:-1px 1px 0 #182833,-2px 2px 0 #15242E,-3px 3px 0 #12202A,-4px 4px 0 #0F1C25,-5px 5px 0 #0C1820,-6px 6px 0 #09161D,-7px 7px 0 #06141B,
    -16px 20px 26px rgba(6,20,27,.45)}
#pc .oscura:active,#pc .oscura.on{box-shadow:-1px 1px 0 #12202A,-2px 2px 0 #06141B,-4px 5px 8px rgba(6,20,27,.4)}
#pc .hondo{background:#C3C9C9;box-shadow:inset 6px 6px 12px #9BA8AB,inset -6px -6px 12px #EEF1F0}
#pc .hondoB{background:#EEF1F0;box-shadow:inset 5px 5px 10px #CCD0CF,inset -5px -5px 10px #FFFFFF}
#pc .plana{border:0;font:inherit;cursor:pointer;color:#253745;background:linear-gradient(150deg,#FFFFFF,#E4E8E7);transition:transform .12s ease,box-shadow .12s ease;
  box-shadow:-1px 1px 0 #CCD0CF,-2px 2px 0 #BCC4C6,-3px 3px 0 #AEB8BA,-4px 4px 0 #9BA8AB,-10px 14px 20px rgba(17,33,45,.18)}
#pc .plana:hover{transform:translate(1px,-1px)}
#pc .plana:active{transform:translate(-3px,3px);box-shadow:-1px 1px 0 #AEB8BA,-3px 4px 8px rgba(17,33,45,.2)}
#pc .plana.oscura{color:#CCD0CF;background:linear-gradient(150deg,#3A4D5B,#253745 55%,#1A2C38);
  box-shadow:-1px 1px 0 #15242E,-2px 2px 0 #12202A,-3px 3px 0 #0C1820,-4px 4px 0 #06141B,-12px 16px 22px rgba(6,20,27,.3)}
#pc .plana:focus-visible{outline:2px solid #253745;outline-offset:3px}
@keyframes pc_vista{0%,100%{perspective-origin:20% 35%}33%{perspective-origin:24% 31%}66%{perspective-origin:17% 38%}}
@keyframes pc_deriva{0%,100%{transform:rotateX(27deg) rotateY(19deg) rotateZ(-7deg) translateY(0)}
  30%{transform:rotateX(26.2deg) rotateY(20deg) rotateZ(-7deg) translateY(-6px)}
  70%{transform:rotateX(27.8deg) rotateY(18.2deg) rotateZ(-7deg) translateY(5px)}}
#pc .vista{animation:pc_vista 19s ease-in-out infinite}
#pc .deriva{animation:pc_deriva 23s ease-in-out infinite}
@keyframes pc_aparece{from{opacity:0;transform:translateZ(30px) translateY(12px)}to{opacity:1;transform:translateZ(96px)}}
@keyframes pc_barrido{0%{top:8%}50%{top:86%}100%{top:8%}}
@keyframes pc_cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pc_entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pc_late{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
#pc .codigo{transform:translateZ(96px);animation:pc_aparece .35s ease-out both}
#pc .barrido{animation:pc_barrido 1s ease-in-out infinite}
#pc .cursor{animation:pc_cursor 1s step-end infinite}
#pc .linea{animation:pc_entra .4s ease-out both}
#pc .punto{animation:pc_late 1.8s ease-in-out infinite}
#pc .pieza{transform-style:preserve-3d;transform:translateZ(0);opacity:1;
  transition:transform 1.2s cubic-bezier(.3,.7,.2,1) var(--d,0s),opacity .35s ease var(--d,0s)}
#pc .pieza.fuera{pointer-events:none;opacity:.04;
  transition:transform 1.3s cubic-bezier(.45,.05,.3,1) var(--d,0s),opacity .9s ease calc(var(--d,0s) + .25s)}
#pc .pz1.fuera{transform:translateZ(1500px)}
#pc .pz2.fuera{transform:translateZ(1350px)}
#pc .pz2{transition:transform 1.2s cubic-bezier(.3,.7,.2,1) var(--d,0s),opacity .35s ease var(--d,0s),background-color .35s ease,box-shadow .35s ease}
#pc .pz2.fuera{background-color:transparent;box-shadow:none;
  transition:transform 1.3s cubic-bezier(.45,.05,.3,1) var(--d,0s),opacity .9s ease calc(var(--d,0s) + .25s),background-color .35s ease,box-shadow .35s ease}
#pc .pz3.fuera{transform:translateZ(1650px)}
#pc .pz4.fuera{transform:translateZ(1580px)}
#pc .pz5.fuera{transform:translateZ(1250px)}
#pc .motor{opacity:0;transition:opacity .45s ease}
#pc .motor.visible{opacity:.999;transition:opacity .7s ease .35s}
#pc .bloque{position:absolute;box-sizing:border-box;border-radius:14px;background:linear-gradient(150deg,#D3D9D9,#C2C9CA);transform:translateZ(10px);
  box-shadow:-1px 1px 0 #BCC4C6,-2px 2px 0 #AEB8BA,-4px 4px 0 #9BA8AB,-10px 14px 16px rgba(17,33,45,.22)}
#pc .bloque.hueco{background:#C3C9C9;transform:none;box-shadow:inset 4px 4px 8px #9BA8AB,inset -4px -4px 8px #EEF1F0}
#pc .engranaje{position:absolute;display:block}
#pc .modulo{position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;color:#253745;
  background:linear-gradient(150deg,#FFFFFF,#EAEEED);transform:translateZ(22px);
  box-shadow:-1px 1px 0 #C3CACB,-2px 2px 0 #B5BEC0,-4px 4px 0 #A7B2B4,-6px 6px 0 #9BA8AB,-16px 22px 26px rgba(17,33,45,.30)}
#pc .estado{font-size:12px;font-weight:700;color:#4A5C6A}
#pc .estado.ok{color:#1F7A4D}
@keyframes pc_gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pc_giraAtras{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
#pc .giraA{animation:pc_gira 7s linear infinite}
#pc .giraB{animation:pc_giraAtras 4.2s linear infinite}
@keyframes pc_fluye{to{stroke-dashoffset:-32}}
#pc .fluye{animation:pc_fluye 1.2s linear infinite}
#pc .nube{position:absolute;pointer-events:none;filter:blur(1.2px) drop-shadow(-6px 16px 22px rgba(74,92,106,.16))}
#pc .nube svg{display:block;width:100%;height:100%;overflow:visible}
#pc .bola{position:absolute;border-radius:50%;transform:scaleY(.6);
  background:radial-gradient(ellipse at 50% 36%,#FFFFFF 0%,#FFFFFF 38%,rgba(250,252,253,.92) 50%,rgba(205,217,224,.55) 62%,rgba(205,217,224,0) 73%)}
#pc .lejos{opacity:.8;filter:blur(3px)}
@keyframes pc_nubeA{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes pc_viaja{0%{transform:translateX(-240px);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateX(300px);opacity:0}}
#pc .deriva1{animation:pc_nubeA 34s ease-in-out infinite}
#pc .viaja1{animation:pc_viaja 62s linear infinite -24s}
#pc .viaja2{animation:pc_viaja 48s linear infinite -36s}
#pc .viaja3{animation:pc_viaja 85s linear infinite -10s}
#pc .logoInclinado{transform:none;filter:drop-shadow(-2px 3px 2px rgba(17,33,45,.14)) drop-shadow(-18px 26px 20px rgba(17,33,45,.24))}
#pc .beta3d{box-shadow:0 1px 0 #D9961F,0 2px 0 #C2841A,0 3px 0 #A86F14,0 4px 0 #946010,0 9px 10px rgba(17,33,45,.20)}

/* ☀️ El resto del sitio en el tema claro: sus variables y los blancos semitransparentes de bordes y superficies, al azul tinta. Sale de los
   estilos de index.js: si cambian sus blancos, se vuelve a generar. */
html.claro { --bg: #EEF1F2; --deep: #E2E7E9; --surface: #FFFFFF; --text: #11212D; --text-2: rgba(17, 33, 45, .80); --text-3: rgba(17, 33, 45, .64);
  --linea: rgba(17, 33, 45, .10); --ok: #1F7A4D; --velo-rgb: 17, 33, 45; color-scheme: light; }
html.claro { --text-2: rgba(17, 33, 45, .80); --text-3: rgba(17, 33, 45, .66); --linea: rgba(17, 33, 45, .08) }
  html.claro body { background-image: radial-gradient(rgba(17, 33, 45, .045) 1px, transparent 1px) }
  html.claro .barraPortada .sp-barra { box-shadow: inset 0 1px 0 rgba(17, 33, 45, .10), 0 10px 26px rgba(0, 0, 0, .28) }
  html.claro .enlaceBarra:hover { background: rgba(17, 33, 45, .06) }
  html.claro .btn.ghost { background: rgba(17, 33, 45, .10) }
  html.claro .btn.ghost:hover { background: rgba(17, 33, 45, .16) }
  html.claro .chips li { background: rgba(17, 33, 45, .06) }
  html.claro .caja { box-shadow: inset 0 1px 0 rgba(17, 33, 45, .10), 0 24px 50px rgba(0, 0, 0, .30) }
  html.claro .filas li { background: rgba(17, 33, 45, .04) }
  html.claro .totalFila { border-top: 1px dashed rgba(17, 33, 45, .14) }
  html.claro .medios > span { background: rgba(17, 33, 45, .06) }
  html.claro .tarjeta { box-shadow: inset 0 1px 0 rgba(17, 33, 45, .10), 0 10px 24px rgba(0, 0, 0, .16) }
  html.claro .tarjeta:hover { box-shadow: inset 0 1px 0 rgba(17, 33, 45, .12), 0 22px 40px rgba(0, 0, 0, .28) }
  html.claro .tarjeta .fondo { color: rgba(17, 33, 45, .045) }
  html.claro .via { background: rgba(17, 33, 45, .10) }
  html.claro .formulario { box-shadow: inset 0 1px 0 rgba(17, 33, 45, .10), 0 24px 50px rgba(0, 0, 0, .25) }
  html.claro .check { border: 1px solid rgba(17, 33, 45, .10) }
  html.claro .campo input { border: 1px solid rgba(17, 33, 45, .12) }
  html.claro .campo input::placeholder { color: rgba(17, 33, 45, .38) }
  html.claro dialog.presentacion { border: 1px solid rgba(17, 33, 45, .14) }
  html.claro .presentacionControles button { background: rgba(17, 33, 45, .10) }
  html.claro .presentacionControles button:hover { background: rgba(17, 33, 45, .16) }
  html.claro .presentacionBarra { background: rgba(17, 33, 45, .12) }