/* =========================================================
   Portada de Flowtrace (pantallaInicio: "portada") — 24-oct-2026
   Pantalla limpia a pantalla completa + barra arriba. La tarjeta de acceso (la etiqueta)
   aparece solo al pulsar «Entrar». Fondo sereno con los colores del logo (azul y verde).
   Todo va bajo #portada para no chocar con los estilos de la app.
   Volver a otra entrada: ?inicio=circuito | ?inicio=normal, o pantallaInicio en config.js.
   ========================================================= */
html.inicio-portada #splash{display:none!important}
/* la app de siempre no debe verse ni un instante mientras la portada aún se construye (se construye al final de la página);
   se muestra cuando el usuario entra (pt-sale mientras la portada se desvanece, luego pt-fuera). Si la portada no llega a construirse, inicio.js quita inicio-portada a los 4 s. */
html.inicio-portada:not(.pt-fuera):not(.pt-sale) .app{visibility:hidden}
html.inicio-portada .toast{z-index:900}                       /* los avisos de la app se ven sobre la portada */
/* el fondo de arranque vale solo mientras la portada está a la vista (pt-fuera = ya se entró a la app) */
html.inicio-portada.pt-noche:not(.pt-fuera),html.inicio-portada.pt-noche:not(.pt-fuera) body{background:#070b14}
html.inicio-portada.pt-dia:not(.pt-fuera),html.inicio-portada.pt-dia:not(.pt-fuera) body{background:#e6f0fc}
html.con-portada,html.con-portada body{overflow:hidden}

#portada{
  --pt-azul:#0a6cff;--pt-cian:#10b8ff;--pt-verde:#14e0a0;--pt-teal:#0fd0c4;
  --pt-mono:'Cascadia Mono','JetBrains Mono',Consolas,ui-monospace,monospace;
  position:fixed;inset:0;z-index:300;overflow:hidden;color:var(--pt-tx);
  font-family:'Geist','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--pt-bg);transition:opacity .6s ease}
#portada[hidden]{display:none}
#portada.sale{opacity:0;pointer-events:none}
html.pt-noche #portada{
  --pt-bg:#070b14;--pt-tx:#e8f1f7;--pt-mut:rgba(232,241,247,.64);--pt-tenue:rgba(232,241,247,.42);--pt-lin:rgba(255,255,255,.13);
  --pt-vidrio:rgba(13,19,33,.58);--pt-punto:rgba(255,255,255,.055);--pt-acento:#46b6ff;--pt-sup:rgba(12,18,31,.94);
  --pt-campo:rgba(255,255,255,.05);--pt-err:#ff6b8a;--pt-sombra:0 40px 90px -30px rgba(0,0,0,.85)}
html.pt-dia #portada{
  --pt-bg:#e6f0fc;--pt-tx:#0a1b36;--pt-mut:rgba(10,27,54,.68);--pt-tenue:rgba(10,40,100,.5);--pt-lin:rgba(10,70,170,.17);
  --pt-vidrio:rgba(240,247,255,.7);--pt-punto:rgba(10,90,210,.14);--pt-acento:#0a56c8;--pt-sup:rgba(246,250,255,.97);
  --pt-campo:rgba(10,70,170,.06);--pt-err:#c8193f;--pt-sombra:0 40px 90px -34px rgba(10,50,130,.38)}

/* ---------- fondo: trama de puntos + manchas de luz suaves (sin animación continua) ---------- */
#portada .pt-fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#portada .pt-puntos{position:absolute;inset:0;background-image:radial-gradient(var(--pt-punto) 1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 85%)}
#portada .pt-luz{position:absolute;border-radius:50%;opacity:0;animation:pt-luz 2.2s cubic-bezier(.32,.72,0,1) .1s forwards;will-change:transform}
@keyframes pt-luz{to{opacity:1}}
#portada .pt-luz.a{width:90vmax;height:90vmax;left:-38vmax;bottom:-52vmax}
#portada .pt-luz.b{width:84vmax;height:84vmax;right:-34vmax;bottom:-50vmax;animation-delay:.35s}
#portada .pt-luz.c{width:70vmax;height:46vmax;left:50%;top:-30vmax;margin-left:-35vmax;border-radius:50%;animation-delay:.6s}
html.pt-noche #portada .pt-luz.a{background:radial-gradient(closest-side,rgba(10,108,255,.55),rgba(10,108,255,.18) 55%,transparent)}
html.pt-noche #portada .pt-luz.b{background:radial-gradient(closest-side,rgba(20,224,160,.42),rgba(20,224,160,.14) 55%,transparent)}
html.pt-noche #portada .pt-luz.c{background:radial-gradient(closest-side,rgba(16,184,255,.22),transparent)}
html.pt-dia #portada .pt-luz.a{background:radial-gradient(closest-side,rgba(10,108,255,.50),rgba(10,108,255,.18) 55%,transparent)}
html.pt-dia #portada .pt-luz.b{background:radial-gradient(closest-side,rgba(30,140,255,.36),rgba(20,200,200,.14) 55%,transparent)}
html.pt-dia #portada .pt-luz.c{background:radial-gradient(closest-side,rgba(40,150,255,.34),transparent)}

/* movimiento 1: halo de luz bajo el cursor · movimiento 2: los puntos se encienden cerca de él */
html.pt-noche #portada{--pt-punto-luz:rgba(130,205,255,.8);--pt-halo:radial-gradient(closest-side,rgba(40,150,255,.22),rgba(20,224,160,.08) 55%,transparent)}
html.pt-dia #portada{--pt-punto-luz:rgba(10,90,215,.7);--pt-halo:radial-gradient(closest-side,rgba(10,100,255,.20),rgba(30,170,255,.08) 55%,transparent)}
#portada .pt-halo{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:var(--pt-halo);
  transform:translate3d(var(--hx,50vw),var(--hy,50vh),0);opacity:0;transition:opacity .6s ease;will-change:transform}
#portada .pt-puntos-luz{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-image:radial-gradient(var(--pt-punto-luz) 1.5px,transparent 2.2px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(circle 190px at var(--hx,50vw) var(--hy,50vh),#000 0%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--hx,50vw) var(--hy,50vh),#000 0%,transparent 100%)}
#portada.pt-cursor .pt-halo,#portada.pt-cursor .pt-puntos-luz{opacity:1}
#portada.pt-abierta .pt-halo,#portada.pt-abierta .pt-puntos-luz{opacity:0}

/* movimiento 4: onda de luz desde «Entrar» */
#portada .pt-onda{position:absolute;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;border:2px solid var(--pt-cian);
  opacity:0;animation:pt-onda 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes pt-onda{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(15);border-width:1px}}

/* ---------- barra superior ---------- */
#portada .pt-barra{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));left:clamp(14px,3vw,28px);right:clamp(12px,3vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
#portada .pt-barra>*{pointer-events:auto}
#portada .pt-cliente{font:600 10.5px var(--pt-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pt-tenue);padding:0 4px}
#portada .pt-der{display:flex;gap:8px;align-items:center}
#portada .pt-ico{display:inline-grid;place-items:center;height:40px;min-width:40px;border-radius:999px;border:1px solid var(--pt-lin);cursor:pointer;padding:0;
  background:var(--pt-vidrio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--pt-mut);
  transition:color .2s,border-color .2s,transform .2s cubic-bezier(.32,.72,0,1)}
#portada .pt-ico svg{width:18px;height:18px}
#portada .pt-ico.pt-txt{padding:0 13px;font:600 10.5px var(--pt-mono);letter-spacing:.16em}
#portada .pt-ico:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){#portada .pt-ico:hover{color:var(--pt-tx);border-color:var(--pt-acento)}}
#portada .pt-entrar{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 18px;border:0;border-radius:999px;cursor:pointer;
  font:700 14px 'Geist','Segoe UI',sans-serif;color:#03121c;background:linear-gradient(100deg,#19c3ff,#14e0a0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -10px rgba(20,200,200,.7);transition:transform .2s cubic-bezier(.32,.72,0,1),filter .2s}
#portada .pt-entrar svg{width:30px;height:30px;padding:7px;border-radius:50%;background:rgba(3,18,28,.14)}
#portada .pt-entrar:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){#portada .pt-entrar:hover{filter:brightness(1.07)}}
#portada .pt-ico:focus-visible,#portada .pt-entrar:focus-visible,#portada .pt-menu button:focus-visible{outline:2px solid var(--pt-acento);outline-offset:2px}

/* ---------- centro: nombre del producto ---------- */
#portada .pt-hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 20px 4vh;pointer-events:none}
#portada .pt-marca{margin:0;font-weight:800;letter-spacing:-.045em;line-height:1;font-size:clamp(30px,10.4vw,150px);
  background:linear-gradient(96deg,#12c5ff 0%,#2a7bff 38%,#14e0a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(14px);filter:blur(8px);animation:pt-entra 1.3s cubic-bezier(.32,.72,0,1) .5s forwards}
html.pt-dia #portada .pt-marca{background-image:linear-gradient(96deg,#0a9bf5 0%,#1f55e0 45%,#0aa6b8 100%)}
#portada .pt-lema{margin:18px 0 0;font:600 clamp(11px,1.4vw,13px) var(--pt-mono);letter-spacing:.34em;text-transform:uppercase;color:var(--pt-mut);
  opacity:0;animation:pt-entra 1.1s cubic-bezier(.32,.72,0,1) 1s forwards}
@keyframes pt-entra{to{opacity:1;transform:none;filter:none}}
#portada .pt-marca.pt-letras{opacity:1;transform:none;filter:none;animation:none}
#portada .pt-marca .pt-letra{background-image:inherit;background-size:var(--w) 100%;background-position:calc(var(--ox) * -1) 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
#portada .pt-marca.pt-volcar .pt-letra{animation:pt-volcar .85s cubic-bezier(.2,.9,.25,1.25) both;animation-delay:calc(var(--i) * 55ms + 350ms)}

/* ---------- menú «⋯» y ventanas de texto ---------- */
#portada .pt-menu{position:absolute;z-index:6;top:calc(max(14px,env(safe-area-inset-top)) + 52px);right:clamp(12px,3vw,28px);width:min(290px,calc(100vw - 28px));
  padding:8px;border-radius:20px;border:1px solid var(--pt-lin);background:var(--pt-sup);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--pt-sombra);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;
  transition:opacity .25s cubic-bezier(.32,.72,0,1),transform .25s cubic-bezier(.32,.72,0,1),visibility 0s linear .3s}
#portada .pt-menu.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
#portada .pt-menu button{display:flex;width:100%;align-items:center;gap:12px;padding:12px 14px;border:0;background:none;border-radius:14px;cursor:pointer;
  font:500 14.5px 'Geist','Segoe UI',sans-serif;color:var(--pt-tx);text-align:left}
#portada .pt-menu svg{flex:none;width:18px;height:18px;color:var(--pt-mut)}
@media (hover:hover) and (pointer:fine){#portada .pt-menu button:hover{background:var(--pt-campo)}}
#portada .pt-menu hr{border:0;border-top:1px solid var(--pt-lin);margin:6px 8px}
#portada .pt-solo-angosto{display:none}
#portada .pt-hoja{position:absolute;inset:0;z-index:8;visibility:hidden;pointer-events:none}
#portada .pt-hoja.on{visibility:visible;pointer-events:auto}
#portada .pt-hoja-fondo{position:absolute;inset:0;background:rgba(4,8,16,.55);opacity:0;transition:opacity .3s cubic-bezier(.32,.72,0,1)}
#portada .pt-hoja.on .pt-hoja-fondo{opacity:1}
#portada .pt-hoja-caja{position:absolute;left:50%;top:50%;width:min(620px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:auto;border-radius:24px;padding:28px 28px 24px;
  background:var(--pt-sup);border:1px solid var(--pt-lin);color:var(--pt-tx);outline:none;box-shadow:var(--pt-sombra);opacity:0;transform:translate(-50%,-46%) scale(.98);
  transition:opacity .35s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1)}
#portada .pt-hoja.on .pt-hoja-caja{opacity:1;transform:translate(-50%,-50%)}
#portada .pt-cerrar{display:grid;place-items:center;position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--pt-campo);color:var(--pt-mut)}
#portada .pt-cerrar svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){#portada .pt-cerrar:hover{color:var(--pt-tx)}}
#portada .pt-texto h2{margin:0 40px 4px 0;font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.15}
#portada .pt-texto .pt-sub{margin:0 0 18px;color:var(--pt-tenue);font:600 10px var(--pt-mono);letter-spacing:.18em;text-transform:uppercase}
#portada .pt-texto h4{margin:18px 0 6px;font:600 11px var(--pt-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pt-acento)}
#portada .pt-texto p,#portada .pt-texto li{color:var(--pt-mut);font-size:14px;line-height:1.6;margin:0 0 6px}
#portada .pt-texto ul{padding-left:20px;margin:6px 0}
#portada .pt-texto .pt-aviso-g{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--pt-tx);font-weight:600}

/* ---------- tarjeta de acceso: la etiqueta (solo tras «Entrar») ---------- */
#portada .pt-acceso{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,8,16,.42)}
html.pt-dia #portada .pt-acceso{background:rgba(200,222,250,.5)}
#portada.pt-abierta .pt-acceso{display:flex}
#portada.pt-abierta .pt-barra .pt-entrar{opacity:.0;pointer-events:none}
#portada .pt-hero{transition:opacity .5s ease}
#portada.pt-abierta .pt-hero{opacity:.08}
#portada .pt-etiqueta{position:relative;width:480px;max-width:100%;padding:28px 34px 26px;border-radius:8px;overflow:hidden;
  background:var(--pt-sup);border:1px solid var(--pt-lin);
  box-shadow:0 0 0 1px rgba(20,200,220,.1),0 0 34px rgba(16,184,255,.16),var(--pt-sombra);
  transition:transform 1s cubic-bezier(.6,0,.3,1),opacity .7s ease .25s}
#portada.pt-abierta .pt-etiqueta{animation:pt-tarjeta .6s cubic-bezier(.32,.72,0,1) both}
@keyframes pt-tarjeta{from{opacity:0;transform:translateY(18px) scale(.97)}}
#portada .pt-esq{position:absolute;width:20px;height:20px;border:2px solid var(--pt-acento);opacity:.9}
#portada .pt-esq.a{top:8px;left:8px;border-right:0;border-bottom:0}#portada .pt-esq.b{top:8px;right:8px;border-left:0;border-bottom:0}
#portada .pt-esq.c{bottom:8px;left:8px;border-right:0;border-top:0}#portada .pt-esq.d{bottom:8px;right:8px;border-left:0;border-top:0}
#portada .pt-etiqueta.tiembla{animation:pt-tiembla .4s steps(2,end)}
@keyframes pt-tiembla{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
#portada.pt-despega .pt-etiqueta{transform:perspective(900px) rotateX(55deg) translateY(-30vh) scale(.6);opacity:0}
#portada .pt-et-cab{padding:2px 0 12px;position:relative}
#portada .pt-et-cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--pt-azul),var(--pt-verde));opacity:.85}
#portada .pt-et-marca{font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1.05;
  background:linear-gradient(96deg,#12c5ff 0%,#2a7bff 45%,#14e0a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html.pt-dia #portada .pt-et-marca{background-image:linear-gradient(96deg,#0a9bf5,#1f55e0 45%,#0aa6b8)}
#portada .pt-et-cli{margin-top:5px;font:600 10px var(--pt-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--pt-tenue)}
#portada .pt-saludo{margin:14px 0 0;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--pt-tx);min-height:25px}
#portada .pt-letra{display:inline-block;transform-origin:50% 100%}
#portada .pt-palabra{display:inline-block;white-space:nowrap}
#portada .pt-volcar .pt-letra{animation:pt-volcar .75s cubic-bezier(.2,.9,.25,1.25) both;animation-delay:calc(var(--i) * 26ms)}
@keyframes pt-volcar{0%{opacity:0;transform:perspective(420px) translateY(-.35em) rotateX(96deg)}55%{opacity:1}100%{opacity:1;transform:none}}
#portada .pt-franja{display:flex;justify-content:space-between;gap:10px;font:600 10.5px/1.3 var(--pt-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--pt-tenue);padding:10px 0 14px;border-bottom:1px dashed var(--pt-lin)}
#portada form{display:grid;gap:12px;padding-top:16px}
#portada label{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:end;font:700 10.5px/1.2 var(--pt-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pt-mut)}
#portada input{width:100%;min-width:0;font:600 16px/1.3 'Geist','Segoe UI',sans-serif;letter-spacing:.02em;text-transform:none;color:var(--pt-tx);
  background:transparent;border:0;border-bottom:1.5px solid var(--pt-lin);padding:4px 2px;outline:none;border-radius:0;caret-color:var(--pt-acento)}
#portada input:focus{border-bottom-color:var(--pt-acento);box-shadow:0 6px 12px -8px var(--pt-acento)}
#portada .pt-msg{min-height:16px;font:600 12px/1.3 var(--pt-mono);color:var(--pt-err)}
#portada .pt-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:4px}
#portada .pt-codigo svg{display:block}#portada .pt-codigo rect{fill:var(--pt-acento)}
#portada .pt-codigo small{display:block;font:600 10px/1.4 var(--pt-mono);letter-spacing:.18em;color:var(--pt-acento);text-align:center}
#portada .pt-acc{font:800 12.5px/1 var(--pt-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pt-acento);background:transparent;
  border:1.5px solid var(--pt-acento);border-radius:4px;padding:13px 16px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
#portada .pt-acc:hover{background:var(--pt-acento);color:var(--pt-sup)}
#portada .pt-acc[disabled]{opacity:.55;cursor:default}
#portada .pt-laser{position:absolute;left:-10%;right:-10%;height:2px;top:-4px;pointer-events:none;opacity:0;background:#fff;
  box-shadow:0 0 8px 2px rgba(16,184,255,.9),0 0 26px 7px rgba(16,184,255,.4)}
#portada .pt-laser.barre{animation:pt-barre .7s ease-in-out}
#portada .pt-laser.verde{box-shadow:0 0 8px 2px rgba(20,224,160,.95),0 0 26px 7px rgba(20,224,160,.4)}
#portada .pt-laser.rojo{box-shadow:0 0 8px 2px rgba(255,107,138,.95),0 0 26px 7px rgba(255,107,138,.4)}
@keyframes pt-barre{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
#portada .pt-sello{position:absolute;right:26px;top:92px;width:150px;height:150px;border-radius:50%;pointer-events:none;
  border:3px double var(--pt-verde);color:var(--pt-verde);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:900 17px/1.05 var(--pt-mono);letter-spacing:.1em;text-align:center;opacity:0;transform:rotate(-14deg) scale(2.4);
  text-shadow:0 0 10px rgba(20,224,160,.6);box-shadow:0 0 20px rgba(20,224,160,.4),inset 0 0 20px rgba(20,224,160,.25);background:radial-gradient(circle,rgba(20,224,160,.12),transparent 70%)}
html.pt-dia #portada .pt-sello{color:#079a6e;border-color:#079a6e;text-shadow:none}
#portada .pt-sello span{font-size:9px;letter-spacing:.26em;margin-top:7px}
#portada .pt-sello.cae{animation:pt-cae .4s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pt-cae{to{opacity:1;transform:rotate(-14deg) scale(1)}}
#portada .pt-noleido{position:absolute;left:62px;bottom:46px;font:800 14px/1 var(--pt-mono);letter-spacing:.22em;color:var(--pt-err);
  background:var(--pt-sup);border:2.5px solid var(--pt-err);padding:6px 10px;transform:rotate(-8deg);opacity:0;transition:opacity .15s;pointer-events:none}
#portada .pt-noleido.vis{opacity:.95}

/* ---------- mientras carga una sesión ya abierta: solo el fondo, sin barra ni texto ---------- */
#portada.velo .pt-barra,#portada.velo .pt-hero,#portada.velo .pt-acceso{display:none}

/* ---------- cambio día/noche: el fondo nuevo entra por la silueta del logo ---------- */
html.pt-vt-logo::view-transition-old(root),html.pt-vt-logo::view-transition-new(root),
html.pt-vt-circulo::view-transition-old(root),html.pt-vt-circulo::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.pt-vt-logo::view-transition-new(root){
  -webkit-mask:url('img/flowtrace-silueta.svg') center 50% / 0px auto no-repeat,radial-gradient(circle,#000 70%,transparent 71%) center 50% / 0px 0px no-repeat;
  mask:url('img/flowtrace-silueta.svg') center 50% / 0px auto no-repeat,radial-gradient(circle,#000 70%,transparent 71%) center 50% / 0px 0px no-repeat;
  animation:pt-vt-logo 1.3s cubic-bezier(.7,-0.05,.3,1) both}
html.pt-vt-logo::view-transition-old(root){animation:pt-vt-viejo 1.3s ease-in both}
@keyframes pt-vt-logo{
  0%{-webkit-mask-size:90px auto,0px 0px;mask-size:90px auto,0px 0px}
  45%{-webkit-mask-size:58vmin auto,0px 0px;mask-size:58vmin auto,0px 0px}
  100%{-webkit-mask-size:1500vmax auto,280vmax 280vmax;mask-size:1500vmax auto,280vmax 280vmax}}
@keyframes pt-vt-viejo{0%,70%{opacity:1}100%{opacity:.6}}
/* el logo en color se ve un instante en el centro, mientras el fondo nuevo lo atraviesa */
#ptLogoVt{position:fixed;left:50%;top:50%;width:58vmin;height:58vmin;margin:-29vmin 0 0 -29vmin;z-index:2147483000;pointer-events:none;view-transition-name:ptlogo}
html.pt-vt-logo::view-transition-group(ptlogo){animation:none}
html.pt-vt-logo::view-transition-old(ptlogo){display:none}
html.pt-vt-logo::view-transition-new(ptlogo){animation:pt-logo-vt 1.3s cubic-bezier(.4,0,.2,1) both}
@keyframes pt-logo-vt{0%{opacity:0;transform:scale(.55) rotate(-12deg)}28%{opacity:1;transform:scale(1) rotate(0)}58%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.25)}}
html.pt-vt-circulo::view-transition-new(root){animation:pt-vt-circulo .8s cubic-bezier(.65,0,.35,1) both}
@keyframes pt-vt-circulo{from{clip-path:circle(0 at var(--pt-cx,50%) var(--pt-cy,50%))}to{clip-path:circle(150vmax at var(--pt-cx,50%) var(--pt-cy,50%))}}

@media (max-width:640px){
  #portada .pt-amplio{display:none}
  #portada .pt-solo-angosto{display:block}
  #portada .pt-cliente{display:none}
  #portada .pt-barra{justify-content:flex-end}
  #portada .pt-entrar{padding-left:14px}
  #portada label{grid-template-columns:1fr;gap:4px}
  #portada .pt-pie{flex-direction:column;align-items:stretch}
  #portada .pt-sello{width:120px;height:120px;top:80px;font-size:14px}
  #portada .pt-etiqueta{padding:24px 22px 22px}
}
@media (prefers-reduced-motion:reduce){
  #portada .pt-luz,#portada .pt-marca,#portada .pt-lema{animation:none;opacity:1;transform:none;filter:none}
  #portada .pt-halo,#portada .pt-puntos-luz,#portada .pt-onda{display:none}
  #portada .pt-laser.barre,#portada .pt-sello.cae,#portada .pt-etiqueta,#portada .pt-etiqueta.tiembla,#portada .pt-volcar .pt-letra{animation:none}
  #portada .pt-sello.cae{opacity:1;transform:rotate(-14deg)}
}