/* /src/styles/pase.css */
.psp {
--psp-fondo: #040d1b;
--psp-tarjeta: #0a1628;
--psp-tarjeta-2: #0d1c30;
--psp-borde: #1a2a3d;
--psp-texto: #f2f5fb;
--psp-texto-2: #c3cbdb;
--psp-texto-3: #8793a8;
--psp-cian: #1fe3f5;
--psp-cian-oscuro: #0a3a47;
--psp-rosa: #ff3cb4;
--psp-rosa-texto: #ff6cc6;
--psp-verde: #3ddba8;
--psp-pista: #1b2e47;
--psp-letra: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--psp-visibles: 5;
margin-top: calc(-1 * var(--navbar-height, 64px));
padding-top: var(--navbar-height, 64px);
min-height: 100vh;
padding-bottom: 72px;
background:
radial-gradient(900px 500px at 85% 0%, rgba(255, 60, 180, .08), transparent 70%),
radial-gradient(900px 600px at 10% 40%, rgba(31, 227, 245, .05), transparent 70%),
var(--psp-fondo);
color: var(--psp-texto);
overflow-x: clip;
}
body:has(.psp) #main-footer { margin-top: 0; }
.psp :where(h1, h2, h3, p, span, a, button, small, b, strong, li, ol, ul, nav) {
font-family: var(--psp-letra);
letter-spacing: normal;
text-transform: none;
}
.psp :where(h1, h2, h3, p, ol, ul) { margin: 0; }
.psp :focus-visible { outline: 3px solid var(--psp-cian); outline-offset: 3px; }
.psp-contenedor {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
position: relative;
}
.psp-oculto {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.psp-ico { flex: none; }
.psp-hero {
position: relative;
max-width: 1120px;
margin: 0 auto;
min-height: 340px;
}
.psp-hero-arte {
position: absolute;
top: 0;
right: 0;
width: 62%;
height: 100%;
object-fit: cover;
object-position: center;
image-rendering: auto;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, #000 26%, #000 86%, transparent 100%),
linear-gradient(180deg, #000 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, #000 26%, #000 86%, transparent 100%),
linear-gradient(180deg, #000 70%, transparent 100%);
mask-composite: intersect;
pointer-events: none;
}
.psp-hero-texto {
padding-top: 36px;
padding-bottom: 56px;
z-index: 1;
}
.psp .psp-migas {
display: flex;
gap: 10px;
font-size: 15px;
color: var(--psp-texto-2);
margin-bottom: 30px;
}
.psp .psp-migas a { color: var(--psp-texto-2); text-decoration: none; }
.psp .psp-migas a:hover { color: var(--psp-texto); text-decoration: underline; }
.psp .psp-antetitulo {
font-size: 16px;
font-weight: 700;
color: var(--psp-rosa);
text-transform: uppercase;
letter-spacing: .02em;
}
.psp .psp-titulo {
margin-top: 8px;
font-size: clamp(44px, 6.4vw, 72px);
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: #fff;
text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
.psp .psp-lema {
margin-top: 8px;
font-size: clamp(20px, 2.4vw, 27px);
color: var(--psp-texto-2);
}
.psp .psp-plazo {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
padding: 8px 16px;
border: 1px solid #2b3a52;
border-radius: 999px;
background: rgba(10, 22, 40, .8);
font-size: 14px;
font-weight: 500;
}
.psp-nivel {
position: relative;
z-index: 1;
margin-top: -24px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding: 22px 28px;
background: linear-gradient(180deg, rgba(13, 28, 48, .96), rgba(10, 22, 40, .96));
border: 1px solid var(--psp-borde);
border-radius: 10px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.psp-retrato {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 35%, #1c3b8a, #0b1636 70%);
box-shadow: 0 0 0 3px #16305c, 0 0 0 5px rgba(31, 227, 245, .35), 0 0 22px rgba(31, 227, 245, .25);
}
.psp-retrato :is(svg, img) { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.psp .psp-nivel-num {
font-size: 30px;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
}
.psp .psp-nivel-num b { font-size: 38px; margin-left: 4px; }
.psp .psp-nivel-xp { margin-top: 10px; font-size: 16px; color: var(--psp-texto-2); }
.psp-barra {
margin-top: 14px;
max-width: 480px;
height: 12px;
border-radius: 999px;
background: var(--psp-pista);
overflow: hidden;
}
.psp-barra > span {
display: block;
height: 100%;
min-width: 12px;
border-radius: inherit;
background: linear-gradient(90deg, #12c9e0, var(--psp-cian));
box-shadow: 0 0 12px rgba(31, 227, 245, .55);
}
.psp-siguiente {
display: flex;
align-items: center;
gap: 22px;
padding-left: 28px;
border-left: 1px solid var(--psp-borde);
min-height: 90px;
}
.psp-siguiente small { display: block; font-size: 14px; color: var(--psp-texto-2); }
.psp-siguiente b { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; }
.psp-siguiente-arte { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.psp-insignia {
display: grid;
place-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
font-family: var(--font-pixel, 'Press Start 2P', monospace);
font-size: 22px;
color: var(--psp-cian);
background: radial-gradient(circle at 50% 40%, #123a5a, #07142a 72%);
box-shadow: 0 0 0 2px rgba(31, 227, 245, .35), 0 0 24px rgba(31, 227, 245, .25);
}
.psp .psp-nota {
margin-top: 14px;
font-size: 15px;
color: var(--psp-texto-2);
}
.psp .psp-nota a { color: var(--psp-cian); font-weight: 600; }
.psp-recompensas { margin-top: 48px; }
.psp-rec-cabecera {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.psp-rec-cabecera h2 {
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 800;
line-height: 1.1;
}
.psp-rec-cabecera p { margin-top: 8px; font-size: 18px; color: var(--psp-texto-2); }
.psp-paginador { display: flex; align-items: center; gap: 16px; }
.psp .psp-pag-texto { font-size: 15px; color: var(--psp-texto-2); min-width: 118px; text-align: center; }
.psp-pag-btn {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid #2b3a52;
border-radius: 8px;
background: var(--psp-tarjeta);
color: var(--psp-texto);
cursor: pointer;
}
.psp-pag-btn:hover:not(:disabled) { border-color: var(--psp-cian); color: var(--psp-cian); }
.psp-pag-btn:disabled { opacity: .35; cursor: default; }
.psp-listas {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
padding: 12px 18px;
border: 1px solid rgba(31, 227, 245, .4);
border-radius: 8px;
background: rgba(31, 227, 245, .08);
}
.psp .psp-listas p { font-size: 15px; color: var(--psp-texto); }
.psp-tabla {
--psp-cab: 46px;
--psp-fila: 214px;
display: grid;
grid-template-columns: 118px 1fr;
}
.psp-carriles {
display: grid;
grid-template-rows: var(--psp-cab) var(--psp-fila) var(--psp-fila);
}
.psp-carril {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 0 14px;
background: var(--psp-tarjeta);
border: 1px solid var(--psp-borde);
border-right: 0;
}
.psp-carril--gratis { border-radius: 10px 0 0 0; }
.psp-carril--premium { border-top: 0; border-radius: 0 0 0 10px; }
.psp .psp-carril b { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.psp .psp-carril small { font-size: 12px; line-height: 1.35; }
.psp .psp-carril--gratis b { color: var(--psp-cian); }
.psp .psp-carril--gratis small { color: #7fe9f5; }
.psp .psp-carril--premium b { color: var(--psp-rosa); }
.psp .psp-carril--premium small { color: var(--psp-rosa-texto); }
.psp-pista {
list-style: none;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(100% / var(--psp-visibles));
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: 0 10px 10px 0;
}
.psp-pista::-webkit-scrollbar { display: none; }
.psp-col {
scroll-snap-align: start;
display: grid;
grid-template-rows: var(--psp-cab) var(--psp-fila) var(--psp-fila);
position: relative;
}
.psp-col-cab {
display: grid;
place-items: center;
font-size: 18px;
font-weight: 800;
background: var(--psp-tarjeta-2);
border: 1px solid var(--psp-borde);
border-left: 0;
}
.psp-col:first-child .psp-col-cab { border-left: 1px solid var(--psp-borde); }
.psp-celda {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 12px;
background: var(--psp-tarjeta);
border-right: 1px solid var(--psp-borde);
border-bottom: 1px solid var(--psp-borde);
}
.psp-col:first-child .psp-celda { border-left: 1px solid var(--psp-borde); }
.psp-col--actual::after {
content: '';
position: absolute;
inset: 0;
border: 1.5px solid var(--psp-cian);
border-radius: 8px;
box-shadow: 0 0 18px rgba(31, 227, 245, .25), inset 0 0 18px rgba(31, 227, 245, .08);
pointer-events: none;
}
.psp-col--actual .psp-col-cab { background: var(--psp-cian-oscuro); color: #fff; }
.psp-cromo {
width: 116px;
height: 116px;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.psp-cromo--misterio {
display: grid;
place-items: center;
font-family: var(--font-pixel, 'Press Start 2P', monospace) !important;
font-size: 34px;
color: rgba(195, 203, 219, .45);
background: radial-gradient(circle at 50% 40%, #13233c, #070f1e 72%);
box-shadow: inset 0 0 0 2px rgba(135, 147, 168, .22);
outline: 1px dashed rgba(135, 147, 168, .35);
outline-offset: 5px;
}
.psp-celda--premium .psp-cromo--misterio {
background: radial-gradient(circle at 50% 40%, #2a1236, #0d0717 72%);
color: rgba(255, 108, 198, .5);
box-shadow: inset 0 0 0 2px rgba(255, 60, 180, .22);
outline-color: rgba(255, 60, 180, .3);
}
.psp .psp-cromo-nombre {
font-size: 15px;
font-weight: 600;
text-align: center;
line-height: 1.2;
}
.psp .psp-celda--por-anunciar .psp-cromo-nombre { color: var(--psp-texto-3); font-weight: 500; }
.psp .psp-estado {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 136px;
min-height: 32px;
padding: 0 10px;
border: 1px solid #2b3a52;
border-radius: 5px;
font-size: 13px;
font-weight: 500;
color: var(--psp-texto-2);
background: rgba(4, 13, 27, .5);
white-space: nowrap;
}
.psp .psp-estado--ok {
color: var(--psp-verde);
border-color: rgba(61, 219, 168, .45);
background: rgba(61, 219, 168, .08);
}
.psp .psp-reclamar {
min-height: 34px;
border: 0;
background: var(--psp-cian);
color: #04121a;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .02em;
box-shadow: 0 0 16px rgba(31, 227, 245, .45);
cursor: pointer;
}
.psp .psp-reclamar:hover { background: #7af0fa; }
.psp .psp-reclamar:disabled { opacity: .6; cursor: progress; }
.psp-premium {
margin-top: 26px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding: 22px 32px;
border: 1px solid #7a1f63;
border-radius: 10px;
background:
radial-gradient(420px 160px at 8% 50%, rgba(255, 60, 180, .22), transparent 70%),
linear-gradient(90deg, #2a0c2f, #160d27 60%, #1a0c28);
box-shadow: 0 0 30px rgba(255, 60, 180, .12);
}
.psp-vale {
width: 118px;
height: 80px;
color: var(--psp-rosa);
filter: drop-shadow(0 0 6px rgba(255, 60, 180, .9)) drop-shadow(0 0 16px rgba(255, 60, 180, .5));
}
.psp-premium h2 { font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; }
.psp-premium p { margin-top: 6px; font-size: 17px; color: var(--psp-texto-2); }
.psp .psp-premium-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 28px;
border: 2px solid var(--psp-rosa);
border-radius: 6px;
background: rgba(255, 60, 180, .08);
color: var(--psp-rosa-texto);
font-size: 17px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 0 14px rgba(255, 60, 180, .25);
}
.psp .psp-premium-btn:hover { background: rgba(255, 60, 180, .18); color: #fff; }
.psp .psp-premium-btn:disabled { opacity: .6; cursor: progress; }
.psp .psp-sello {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 20px;
border-radius: 999px;
border: 1px solid var(--psp-rosa);
color: var(--psp-rosa-texto);
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.psp .psp-sello--apagado { border-color: rgba(255, 108, 198, .35); color: var(--psp-texto-2); font-weight: 500; }
.psp-pie {
margin-top: 26px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.psp-tarjeta {
display: flex;
align-items: flex-start;
gap: 22px;
padding: 24px 26px;
background: var(--psp-tarjeta);
border: 1px solid var(--psp-borde);
border-radius: 10px;
}
.psp-tarjeta-ico {
display: grid;
place-items: center;
flex: none;
width: 62px;
height: 62px;
border: 1.5px solid rgba(31, 227, 245, .55);
border-radius: 10px;
color: var(--psp-cian);
background: rgba(31, 227, 245, .06);
}
.psp-tarjeta h2 { font-size: 19px; font-weight: 800; }
.psp-tarjeta p { margin-top: 8px; font-size: 15px; color: var(--psp-texto-2); line-height: 1.45; }
.psp .psp-enlace {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--psp-cian);
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.psp .psp-enlace:hover { text-decoration: underline; }
.psp-tarjeta--coleccion { align-items: center; }
.psp-tarjeta--coleccion > div:not(.psp-coleccion-miniaturas) { flex: 1; }
.psp-coleccion-miniaturas { display: flex; flex: none; }
.psp-coleccion-miniaturas:empty { display: none; }
.psp-coleccion-miniaturas img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--psp-tarjeta);
margin-left: -8px;
}
.psp-fuentes {
margin-top: 24px;
padding: 22px 26px;
background: var(--psp-tarjeta);
border: 1px solid var(--psp-borde);
border-radius: 10px;
}
.psp-fuentes ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px 24px;
}
.psp-fuentes li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--psp-borde);
}
.psp-fuente-ico { color: var(--psp-cian); display: grid; place-items: center; }
.psp-fuentes li > span:nth-child(2) { flex: 1; }
.psp .psp-fuentes b { display: block; font-size: 15px; font-weight: 600; }
.psp .psp-fuentes small { display: block; font-size: 13px; color: var(--psp-texto-3); }
.psp .psp-fuentes strong { font-size: 15px; font-weight: 800; color: var(--psp-cian); white-space: nowrap; }
.psp-vacio { padding: 120px 24px; text-align: center; }
.psp-vacio h1 { font-size: 40px; font-weight: 800; }
.psp-vacio p { margin-top: 12px; color: var(--psp-texto-2); }
@media (max-width: 900px) {
.psp { --psp-visibles: 3; }
.psp-hero-arte { width: 78%; opacity: .75; }
.psp-nivel { grid-template-columns: auto 1fr; }
.psp-siguiente {
grid-column: 1 / -1;
padding: 16px 0 0;
border-left: 0;
border-top: 1px solid var(--psp-borde);
min-height: 0;
justify-content: space-between;
}
.psp-premium { grid-template-columns: auto 1fr; }
.psp-premium > :last-child { grid-column: 1 / -1; justify-self: start; }
.psp-pie { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.psp { --psp-visibles: 2; }
.psp-contenedor { padding: 0 16px; }
.psp-hero { min-height: 0; }
.psp-hero-arte {
position: static;
display: block;
width: 100%;
height: 190px;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.psp-hero-texto { padding-top: 4px; padding-bottom: 44px; }
.psp .psp-migas { margin-bottom: 18px; }
.psp-nivel { gap: 16px; padding: 18px; }
.psp-retrato { width: 72px; height: 72px; }
.psp .psp-nivel-num { font-size: 24px; }
.psp .psp-nivel-num b { font-size: 30px; }
.psp .psp-nivel-xp { font-size: 14px; }
.psp-rec-cabecera p { font-size: 16px; }
.psp-paginador { width: 100%; justify-content: space-between; }
.psp-tabla { --psp-fila: 196px; grid-template-columns: 76px 1fr; }
.psp-carril { padding: 0 8px; }
.psp .psp-carril b { font-size: 14px; }
.psp .psp-carril small { font-size: 11px; }
.psp-cromo { width: 92px; height: 92px; }
.psp .psp-cromo-nombre { font-size: 14px; }
.psp-premium { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
.psp-vale { width: 90px; height: 60px; }
.psp-tarjeta { padding: 20px; gap: 16px; }
.psp-tarjeta--coleccion { flex-wrap: wrap; }
.psp-tarjeta-ico { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
.psp-pista { scroll-behavior: auto; }
}
.psp--cerrado .psp-hero { min-height: 360px; }
.psp .psp-titulo--anuncio {
max-width: 560px;
font-size: clamp(36px, 4.6vw, 54px);
line-height: 1.04;
}
.psp .psp-entradilla {
max-width: 470px;
margin-top: 16px;
font-size: 17px;
line-height: 1.55;
color: var(--psp-texto-2);
}
.psp .psp-cinta {
position: absolute;
z-index: 2;
right: -6px;
bottom: 58px;
margin: 0;
padding: 12px 30px 14px;
background: #ffd23f;
color: #0b0b12;
transform: rotate(-6deg);
box-shadow: 0 10px 0 rgba(0, 0, 0, .35), 0 0 0 3px rgba(11, 11, 18, .85);
pointer-events: none;
}
.psp .psp-cinta small {
display: block;
font-family: var(--font-pixel, 'Press Start 2P', monospace) !important;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
}
.psp .psp-cinta b {
display: block;
margin-top: 4px;
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 900;
letter-spacing: -.01em;
line-height: 1;
text-transform: uppercase;
}
.psp-barra-fila { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.psp-barra-fila .psp-barra { flex: 1; margin-top: 0; }
.psp--cerrado .psp-barra > span { min-width: 0; }
.psp .psp-barra-cifra { font-size: 14px; color: var(--psp-texto-2); white-space: nowrap; }
.psp-siguiente--cerrado { gap: 16px; }
.psp-siguiente-candado { color: var(--psp-texto-2); display: grid; place-items: center; }
.psp .psp-chapa {
display: inline-block;
margin-top: 8px;
padding: 3px 10px;
border-radius: 3px;
background: var(--psp-rosa);
color: #fff;
font-family: var(--font-pixel, 'Press Start 2P', monospace) !important;
font-size: 8px;
letter-spacing: .04em;
text-transform: uppercase;
}
.psp .psp-insignia--misterio {
font-family: var(--font-pixel, 'Press Start 2P', monospace) !important;
font-size: 22px;
color: var(--psp-texto-3);
border-color: rgba(255, 60, 180, .4);
}
.psp--cerrado .psp-carril { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.psp--cerrado .psp-carril > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.psp-carril-ico { display: grid; place-items: center; flex: none; }
.psp--cerrado .psp-carril--gratis .psp-carril-ico { color: var(--psp-cian); }
.psp--cerrado .psp-carril--premium .psp-carril-ico { color: #ffd23f; }
.psp .psp-estado--pronto {
gap: 5px;
min-height: 24px;
padding: 0 6px;
font-size: 11px;
max-width: 100%;
}
.psp-pie--tres .psp-tarjeta { gap: 18px; }
.psp-tarjeta--rosa .psp-tarjeta-ico {
color: var(--psp-rosa);
border-color: rgba(255, 60, 180, .55);
background: rgba(255, 60, 180, .06);
}
@media (min-width: 1101px) {
.psp.psp--cerrado { --psp-visibles: 10; }
.psp--cerrado .psp-tabla { --psp-fila: 150px; grid-template-columns: 128px 1fr; }
.psp--cerrado .psp-cromo { width: 46px; height: 46px; }
.psp--cerrado .psp-cromo--misterio { font-size: 16px; outline-offset: 3px; }
.psp--cerrado .psp-cromo-nombre { font-size: 12px; white-space: nowrap; }
.psp--cerrado .psp-celda { gap: 8px; padding: 10px 4px; }
.psp--cerrado .psp-estado--pronto { gap: 3px; padding: 0 4px; font-size: 9.5px; min-height: 22px; }
.psp--cerrado .psp-estado--pronto svg { width: 10px; height: 10px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.psp.psp--cerrado { --psp-visibles: 5; }
}
@media (min-width: 901px) {
.psp-pie--tres { grid-template-columns: repeat(3, 1fr); }
.psp--cerrado .psp-tabla { grid-template-columns: 128px 1fr; }
.psp--cerrado .psp-carril { padding: 0 10px; gap: 8px; }
.psp--cerrado .psp-carril-ico svg { width: 24px; height: 24px; }
.psp--cerrado .psp-carril b { font-size: 16px; }
.psp--cerrado .psp-carril small { font-size: 11px; }
}
@media (max-width: 900px) {
.psp--cerrado .psp-carril { flex-direction: column; align-items: flex-start; gap: 6px; }
.psp--cerrado .psp-carril-ico svg { width: 22px; height: 22px; }
}
@media (max-width: 900px) {
.psp .psp-cinta { right: 10px; bottom: auto; top: 18px; padding: 8px 18px 10px; }
.psp .psp-cinta b { font-size: 26px; }
.psp .psp-cinta small { font-size: 9px; }
}
@media (max-width: 640px) {
.psp .psp-cinta { top: 120px; right: 8px; }
.psp .psp-cinta b { font-size: 22px; }
.psp .psp-entradilla { font-size: 15px; }
.psp-barra-fila { flex-wrap: wrap; gap: 8px; }
.psp-siguiente--cerrado .psp-insignia { width: 56px; height: 56px; }
.psp--cerrado .psp-carril { flex-direction: column; align-items: flex-start; gap: 6px; }
.psp--cerrado .psp-carril-ico svg { width: 22px; height: 22px; }
}