/* Panthera OS - pantherasport.es/software/ - generado por tools/build.py */
/* =============================================================================
PANTHERA OS · base.css — cimientos compartidos (tokens, reset, utilidades,
componentes). Guía de uso para las secciones: src/INTERFAZ.md
Reglas: todo selector empieza por .pss (o body.page-id-122 SOLO aquí).
Dentro de .pss ningún z-index pasa de 10.
============================================================================= */
/* -----------------------------------------------------------------------------
0. Envoltorio de Woodmart SOLO en /software/ (página 122)
Quita la franja blanca de 40 px de arriba y el hueco de abajo de
main.wd-content-layout para que la página toque la cabecera y el pie.
-------------------------------------------------------------------------- */
body.page-id-122 main#main-content.wd-content-layout {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
min-height: 0;
background: transparent;
}
body.page-id-122 .wd-page-content.main-page-wrapper {
padding-bottom: 0;
margin-bottom: 0;
min-height: 0;
background-color: #0A0B0C;
}
body.page-id-122 .wd-page-content.main-page-wrapper + .wd-footer,
body.page-id-122 footer.wd-footer {
margin-top: 0;
}
/* Widget de reseñas de la tienda (Loalia, ventana emergente abajo a la izquierda).
En /software/ tapa la demo (iframe fijo de 360×200 con z-index 2147483000: en 390 px ocupa un
cuarto de pantalla y a 360 px tapa «Sin internet» y «Alarma») y enseña reseñas de cajas de relojes
que un dueño leería como testimonios del software (BRIEF §2 los prohíbe). Lo ideal es excluir la
página 122 en el panel de Loalia; mientras tanto se oculta SOLO en esta página. */
body.page-id-122 .loalia-testimonios,
body.page-id-122 iframe[src*="loalia.es"] {
display: none !important;
}
/* -----------------------------------------------------------------------------
0b. Fuentes propias con OTRO nombre de familia («PSS Inter», «PSS Oswald»).
La tienda carga Inter 400/600 y Oswald 700. Si pidiéramos más pesos de «Inter» u «Oswald»,
su menú (Inter 700) y su marquesina (800) se dibujarían más gruesos en /software/ que en el
resto de la tienda y la cabecera «saltaría» al cambiar de página. Con otro nombre, los pesos
extra solo existen dentro de .pss. Son las fuentes variables de Google Fonts (mismo servidor
que ya usa la tienda); si no llegan, se usa la Inter/Oswald de la tienda.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'PSS Inter';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'PSS Inter';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'PSS Oswald';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'PSS Oswald';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v57/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -----------------------------------------------------------------------------
1. Tokens (BRIEF §3) — nadie usa colores fuera de estos
-------------------------------------------------------------------------- */
.pss {
/* paleta */
--pss-bg: #0A0B0C;
--pss-bg2: #0F1113;
--pss-surface: #15181B;
--pss-surface2: #1C2024;
--pss-line: rgba(255, 255, 255, .08);
--pss-line2: rgba(255, 255, 255, .14);
--pss-line3: rgba(255, 255, 255, .22);
--pss-text: #F3F5F6;
--pss-text2: #A4ABB3;
--pss-text3: #838A92; /* AA: 5,6:1 sobre bg · 5,1 sobre surface · 4,7 sobre surface2 (el #6C737B del BRIEF daba 3,4-4,1) */
--pss-accent: #82B735;
--pss-accent-hi: #A6E05A;
--pss-accent-lo: #5E8A25;
--pss-danger: #FF4D4D;
--pss-warn: #F5B942;
--pss-on-accent: #0A0B0C; /* texto sobre verde: siempre carbón */
/* canales RGB para rgba(var(--pss-accent-rgb), .2) */
--pss-bg-rgb: 10, 11, 12;
--pss-surface-rgb: 21, 24, 27;
--pss-accent-rgb: 130, 183, 53;
--pss-accent-hi-rgb: 166, 224, 90;
--pss-danger-rgb: 255, 77, 77;
--pss-warn-rgb: 245, 185, 66;
/* tipografía */
--pss-f-display: 'PSS Oswald', 'Oswald', 'Arial Narrow', sans-serif;
--pss-f-body: 'PSS Inter', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--pss-f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
/* radios */
--pss-r-xs: 8px;
--pss-r-sm: 12px;
--pss-r: 16px;
--pss-r-lg: 22px;
--pss-r-xl: 32px;
--pss-r-pill: 999px;
/* movimiento: curvas y duraciones estándar */
--pss-ease: cubic-bezier(.22, 1, .36, 1); /* salida suave (por defecto) */
--pss-ease-out: cubic-bezier(.16, 1, .3, 1); /* entradas largas (expo) */
--pss-ease-io: cubic-bezier(.65, 0, .35, 1); /* ida y vuelta */
--pss-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* rebote corto */
--pss-d-1: .16s; /* hover, color */
--pss-d-2: .32s; /* estados, iconos */
--pss-d-3: .6s; /* paneles, sombras */
--pss-d-4: 1s; /* entradas */
/* sombras */
--pss-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
--pss-shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -24px rgba(0, 0, 0, .8), 0 8px 16px -8px rgba(0, 0, 0, .5);
--pss-shadow-3: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 30px 60px -30px rgba(0, 0, 0, .8);
--pss-shadow-glow: 0 0 0 1px rgba(var(--pss-accent-rgb), .45), 0 12px 40px -12px rgba(var(--pss-accent-rgb), .6);
/* maquetación */
--pss-maxw: 1280px;
--pss-gutter: 40px;
--pss-sec-y: 120px; /* 120 + 120 entre secciones: sin pantallas de negro vacío (BRIEF: 120-160) */
--pss-sticky-top: 0px; /* base.js lo actualiza si la cabecera de la tienda se pega */
/* neutraliza variables de Woodmart dentro de la página */
--wd-tags-mb: 0;
--wd-link-decor: none;
--wd-link-decor-hover: none;
--wd-link-color: currentColor;
--wd-link-color-hover: currentColor;
--wd-title-color: currentColor;
--wd-title-transform: none;
--wd-otl-width: 2px;
--wd-otl-style: solid;
--wd-otl-color: #A6E05A;
--wd-otl-offset: 3px;
--btn-transform: none;
--btn-color: currentColor;
--btn-color-hover: currentColor;
--btn-bgcolor: transparent;
--btn-bgcolor-hover: transparent;
--btn-brd-width: 0px;
--btn-brd-color: transparent;
--btn-brd-color-hover: transparent;
--btn-box-shadow: none;
--btn-box-shadow-hover: none;
--btn-padding: 0;
--btn-height: 0;
--btn-font-size: inherit;
--btn-font-weight: inherit;
--wd-form-height: auto;
--wd-form-bg: transparent;
--wd-form-color: currentColor;
--wd-form-brd-width: 1px;
--wd-form-brd-color: rgba(255, 255, 255, .14);
--wd-form-brd-color-focus: #82B735;
--wd-form-brd-radius: 10px;
}
@media (max-width: 1023px) {
.pss { --pss-gutter: 32px; --pss-sec-y: 104px; }
}
@media (max-width: 767px) {
.pss { --pss-gutter: 20px; --pss-sec-y: 88px; }
}
/* -----------------------------------------------------------------------------
2. Raíz: a sangre, contexto de apilamiento propio, sin scroll horizontal
-------------------------------------------------------------------------- */
.pss {
margin: 0 calc(-50vw + 50%);
position: relative;
z-index: 0;
isolation: isolate;
overflow-x: clip;
background: var(--pss-bg);
color: var(--pss-text);
font-family: var(--pss-f-body);
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: normal;
text-align: left;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
@supports not (overflow: clip) {
.pss { overflow-x: hidden; }
}
/* -----------------------------------------------------------------------------
3. Reset FUERTE contra Woodmart (especificidad 0,1,0 con :where para que
cualquier clase de sección, que va después, gane sin pelear)
-------------------------------------------------------------------------- */
.pss *,
.pss *::before,
.pss *::after { box-sizing: border-box; }
.pss :where(h1),
.pss :where(h2),
.pss :where(h3),
.pss :where(h4),
.pss :where(h5),
.pss :where(h6) {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
text-shadow: none;
color: inherit;
min-height: 0;
}
.pss :where(p) {
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
color: inherit;
}
.pss :where(a) {
color: inherit;
text-decoration: none;
background-color: transparent;
text-transform: none;
letter-spacing: inherit;
font-weight: inherit;
transition: none;
outline: 0;
}
.pss :where(ul),
.pss :where(ol),
.pss :where(menu) { list-style: none; margin: 0; padding: 0; }
.pss :where(li) { list-style: none; margin: 0; padding: 0; }
.pss :where(img),
.pss :where(svg),
.pss :where(video),
.pss :where(canvas),
.pss :where(picture) { display: block; max-width: 100%; }
.pss :where(img),
.pss :where(video) { height: auto; border: 0; border-radius: 0; box-shadow: none; }
.pss :where(figure),
.pss :where(blockquote),
.pss :where(dl),
.pss :where(dd),
.pss :where(pre) { margin: 0; padding: 0; }
.pss :where(blockquote) { border: 0; font-size: inherit; quotes: none; }
.pss :where(b),
.pss :where(strong) { font-weight: 700; }
.pss :where(small) { font-size: .82em; }
.pss :where(code),
.pss :where(kbd),
.pss :where(samp),
.pss :where(pre) { font-family: var(--pss-f-mono); font-size: inherit; }
.pss :where(hr) { height: 0; margin: 0; border: 0; border-top: 1px solid var(--pss-line); color: inherit; }
.pss :where(label) { display: inline; margin: 0; color: inherit; font-weight: inherit; vertical-align: baseline; }
.pss :where(fieldset),
.pss :where(legend) { margin: 0; padding: 0; border: 0; font-size: inherit; text-transform: none; }
.pss :where(table) { width: auto; margin: 0; border-collapse: collapse; border-spacing: 0; line-height: inherit; }
.pss :where(th),
.pss :where(td) { padding: 0; border: 0; text-align: inherit; vertical-align: inherit; font: inherit; color: inherit; text-transform: none; letter-spacing: inherit; }
.pss :where(button),
.pss :where(input),
.pss :where(select),
.pss :where(textarea),
.pss :where(optgroup) {
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: none;
margin: 0;
}
.pss :where(button),
.pss :where([type=button]),
.pss :where([type=submit]),
.pss :where([type=reset]) {
display: inline-block;
position: static;
-webkit-appearance: none;
appearance: none;
background: none;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
width: auto;
height: auto;
min-width: 0;
min-height: 0;
gap: normal;
align-items: normal;
justify-content: normal;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-shadow: none;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
transition: none;
outline: 0;
}
.pss :where(input),
.pss :where(select),
.pss :where(textarea) {
width: auto;
max-width: 100%;
height: auto;
min-height: 0;
padding: 10px 14px;
border: 1px solid var(--pss-line2);
border-radius: 10px;
background-color: transparent;
box-shadow: none;
}
.pss :where(input[type=checkbox]),
.pss :where(input[type=radio]),
.pss :where(input[type=range]) { padding: 0; border: 0; width: auto; height: auto; }
.pss :where(summary) { cursor: pointer; }
.pss :where([hidden]) { display: none !important; }
.pss :where(a):focus-visible,
.pss :where(button):focus-visible,
.pss :where(input):focus-visible,
.pss :where(select):focus-visible,
.pss :where(textarea):focus-visible,
.pss :where(summary):focus-visible,
.pss :where([tabindex]):focus-visible {
outline: 2px solid var(--pss-accent-hi);
outline-offset: 3px;
}
.pss ::selection { background: var(--pss-accent); color: var(--pss-on-accent); }
/* -----------------------------------------------------------------------------
4. Maquetación
-------------------------------------------------------------------------- */
.pss-wrap {
position: relative;
width: 100%;
max-width: calc(var(--pss-maxw) + var(--pss-gutter) * 2);
margin-inline: auto;
padding-inline: var(--pss-gutter);
}
.pss-sec {
position: relative;
padding-block: var(--pss-sec-y);
scroll-margin-top: var(--pss-sticky-top, 0px);
}
.pss .pss-sec[tabindex="-1"]:focus { outline: none; }
/* Arranque barato: el navegador no calcula estilos, maquetación ni pintura de las secciones que
están lejos de la pantalla (el héroe siempre se pinta). «auto» recuerda el alto real en cuanto
una sección se ha pintado una vez; PSS.scrollTo las pinta antes de saltar a un ancla (.pss-cv-on)
para que el salto caiga exacto. Efecto secundario asumido: lo que se salga de su sección se recorta. */
.pss > .pss-sec:not(.pss-hero) {
content-visibility: auto;
contain-intrinsic-size: auto 1400px;
}
.pss > .pss-sec.pss-cv-on { content-visibility: visible; }
@media (min-width: 1024px) {
/* el recorrido (narración sticky) mide ~5000 px en escritorio: su hueco provisional, parecido */
.pss > .pss-sec.pss-recorrido { contain-intrinsic-size: auto 4700px; }
}
@media (max-width: 767px) {
.pss > .pss-sec:not(.pss-hero) { contain-intrinsic-size: auto 2000px; }
}
.pss-sec--alt { background: var(--pss-bg2); }
.pss-sec--flush { padding-block: 0; }
.pss-sec--clip { overflow: clip; }
/* -----------------------------------------------------------------------------
5. Tipografía
-------------------------------------------------------------------------- */
.pss-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 920px;
margin: 0 0 clamp(48px, 6vw, 80px);
}
.pss-head--center { align-items: center; text-align: center; margin-inline: auto; }
.pss-head--center .pss-lead { margin-inline: auto; }
.pss-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--pss-f-mono);
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pss-accent);
}
.pss-eyebrow::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .55);
animation: pss-pulse 2.2s var(--pss-ease) infinite;
}
.pss-h1,
.pss-h2 {
font-family: var(--pss-f-display);
font-weight: 700;
text-transform: uppercase;
color: var(--pss-text);
text-wrap: balance;
}
.pss-h1 { font-size: clamp(56px, 9vw, 150px); line-height: .9; letter-spacing: -.005em; }
.pss-h2 { font-size: clamp(42px, 6vw, 92px); line-height: .94; letter-spacing: -.004em; }
.pss-h3 {
font-family: var(--pss-f-display);
font-weight: 600;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.1;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--pss-text);
}
.pss-h1 em, .pss-h2 em, .pss-h3 em, .pss-em { font-style: normal; color: var(--pss-accent); }
.pss-lead {
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.6;
font-weight: 400;
color: var(--pss-text2);
max-width: 60ch;
text-wrap: pretty;
}
.pss-lead strong, .pss-lead b { color: var(--pss-text); font-weight: 600; }
.pss-text { color: var(--pss-text); }
.pss-text2 { color: var(--pss-text2); }
.pss-text3 { color: var(--pss-text3); }
.pss-accent { color: var(--pss-accent); }
.pss-mono {
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
letter-spacing: 0;
}
.pss-num { font-variant-numeric: tabular-nums; }
.pss-nota { font-size: 13px; line-height: 1.5; color: var(--pss-text3); }
.pss-sr {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* texto con degradado verde (y variante con brillo que recorre) */
.pss-grad-text {
--pss-grad: linear-gradient(180deg, #C4F07F 0%, var(--pss-accent-hi) 30%, var(--pss-accent) 62%, var(--pss-accent-lo) 100%);
background-image: var(--pss-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.pss-grad-text--shine {
--pss-grad: linear-gradient(100deg, var(--pss-accent) 0%, var(--pss-accent-hi) 38%, #F3F5F6 48%, var(--pss-accent-hi) 58%, var(--pss-accent) 100%);
background-size: 250% 100%;
animation: pss-shine 6s var(--pss-ease-io) infinite;
}
/* si el texto se ha partido en palabras/letras, el degradado va en cada trozo */
.pss-grad-text.pss-split { background-image: none; }
.pss-grad-text .pss-wi {
background-image: var(--pss-grad);
background-size: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: inherit;
animation-delay: calc(var(--pss-i, 0) * 90ms);
}
/* -----------------------------------------------------------------------------
6. Botones (.pss-btn) — doble clase para ganar al :hover de Woodmart
-------------------------------------------------------------------------- */
.pss .pss-btn {
--pss-btn-h: 52px;
--pss-btn-px: 24px;
--pss-btn-fs: 15px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: var(--pss-btn-h);
min-height: 0;
padding: 0 var(--pss-btn-px);
border: 1px solid transparent;
border-radius: var(--pss-r-pill);
background: transparent;
color: var(--pss-text);
font-family: var(--pss-f-body);
font-size: var(--pss-btn-fs);
font-weight: 600;
line-height: 1;
letter-spacing: -.005em;
text-transform: none;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
isolation: isolate;
-webkit-user-select: none;
user-select: none;
box-shadow: none;
transition:
background-color var(--pss-d-2) var(--pss-ease),
border-color var(--pss-d-2) var(--pss-ease),
color var(--pss-d-2) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
scale var(--pss-d-1) var(--pss-ease),
translate .7s var(--pss-ease-spring);
}
.pss .pss-btn::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, .12) 55%, transparent 70%);
translate: -110% 0;
transition: translate .8s var(--pss-ease);
pointer-events: none;
}
.pss .pss-btn:hover::before { translate: 110% 0; }
.pss .pss-btn:active { scale: .97; }
.pss .pss-btn:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss .pss-btn[disabled],
.pss .pss-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pss .pss-btn--primary,
.pss .pss-btn--primary:hover,
.pss .pss-btn--primary:focus { color: var(--pss-on-accent); }
.pss .pss-btn--primary {
background: var(--pss-accent);
border-color: rgba(var(--pss-accent-hi-rgb), .6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -12px rgba(var(--pss-accent-rgb), .7);
}
.pss .pss-btn--primary:hover {
background: var(--pss-accent-hi);
border-color: var(--pss-accent-hi);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 6px rgba(var(--pss-accent-rgb), .14), 0 18px 44px -12px rgba(var(--pss-accent-rgb), .8);
}
.pss .pss-btn--ghost,
.pss .pss-btn--ghost:focus { color: var(--pss-text); }
.pss .pss-btn--ghost {
background: rgba(255, 255, 255, .03);
border-color: var(--pss-line2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.pss .pss-btn--ghost::before { background: linear-gradient(105deg, transparent 25%, rgba(var(--pss-accent-hi-rgb), .16) 45%, transparent 65%); }
.pss .pss-btn--ghost:hover {
color: var(--pss-text);
background: rgba(var(--pss-accent-rgb), .08);
border-color: rgba(var(--pss-accent-rgb), .6);
box-shadow: 0 0 0 5px rgba(var(--pss-accent-rgb), .07);
}
.pss .pss-btn--lg { --pss-btn-h: 60px; --pss-btn-px: 30px; --pss-btn-fs: 16px; }
.pss .pss-btn--sm { --pss-btn-h: 40px; --pss-btn-px: 16px; --pss-btn-fs: 14px; gap: 8px; }
.pss .pss-btn--block { display: flex; width: 100%; }
.pss .pss-btn-ico {
flex: none;
width: 18px;
height: 18px;
transition: transform var(--pss-d-2) var(--pss-ease);
}
.pss .pss-btn:hover .pss-btn-ico--r { transform: translateX(4px); }
.pss .pss-btn:hover .pss-btn-ico--down { transform: translateY(3px); }
.pss .pss-btn:hover .pss-btn-ico--up { transform: translateY(-3px); }
/* -----------------------------------------------------------------------------
7. Etiquetas, puntos, chips
-------------------------------------------------------------------------- */
.pss-badge {
display: inline-flex;
align-items: center;
gap: 9px;
height: 30px;
padding: 0 13px 0 11px;
border-radius: var(--pss-r-pill);
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.pss-badge--muted { border-color: var(--pss-line2); background: rgba(255, 255, 255, .03); color: var(--pss-text2); }
.pss-badge--warn { border-color: rgba(var(--pss-warn-rgb), .35); background: rgba(var(--pss-warn-rgb), .08); color: var(--pss-warn); }
.pss-badge--danger { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .08); color: var(--pss-danger); }
.pss-badge--sm { height: 24px; padding: 0 10px 0 9px; font-size: 10.5px; gap: 7px; }
@media (max-width: 767px) {
/* legibilidad en móvil: ninguna etiqueta mono en mayúsculas por debajo de 11 px */
.pss-badge--sm { font-size: 11px; letter-spacing: .06em; }
}
.pss-dot {
--pss-dot-rgb: var(--pss-accent-rgb);
display: inline-block;
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(var(--pss-dot-rgb));
box-shadow: 0 0 0 0 rgba(var(--pss-dot-rgb), .55);
animation: pss-pulse-dot 2s var(--pss-ease) infinite;
}
.pss-dot--warn { --pss-dot-rgb: var(--pss-warn-rgb); }
.pss-dot--danger { --pss-dot-rgb: var(--pss-danger-rgb); }
.pss-dot--idle { background: var(--pss-text3); animation: none; }
.pss-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px 9px 9px;
border-radius: 14px;
border: 1px solid var(--pss-line2);
background: rgba(var(--pss-surface-rgb), .74);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 40px -20px rgba(0, 0, 0, .9);
color: var(--pss-text);
font-size: 13px;
line-height: 1.25;
white-space: nowrap;
}
.pss-chip-ico {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
background: rgba(var(--pss-accent-rgb), .14);
color: var(--pss-accent-hi);
}
.pss-chip-ico svg { width: 16px; height: 16px; }
.pss-chip-t { display: block; font-weight: 600; color: var(--pss-text); }
.pss-chip-s { display: block; font-family: var(--pss-f-mono); font-size: 11.5px; color: var(--pss-text2); font-variant-numeric: tabular-nums; }
/* -----------------------------------------------------------------------------
8. Tarjeta con foco de luz (.pss-card) — --pss-mx/--pss-my los pone base.js
-------------------------------------------------------------------------- */
.pss-card {
--pss-mx: 50%;
--pss-my: -20%;
position: relative;
isolation: isolate;
border-radius: var(--pss-r-lg);
border: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%), var(--pss-surface);
box-shadow: var(--pss-shadow-1);
overflow: hidden;
transition: border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), transform var(--pss-d-3) var(--pss-ease);
}
.pss-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(560px circle at var(--pss-mx) var(--pss-my), rgba(var(--pss-accent-rgb), .11), transparent 42%);
opacity: 0;
transition: opacity .5s var(--pss-ease);
pointer-events: none;
}
.pss-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
padding: 1px;
background: radial-gradient(380px circle at var(--pss-mx) var(--pss-my), rgba(var(--pss-accent-hi-rgb), .7), rgba(var(--pss-accent-rgb), .15) 30%, transparent 55%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0;
transition: opacity .5s var(--pss-ease);
pointer-events: none;
}
.pss-card:hover::before, .pss-card.pss-lit::before,
.pss-card:hover::after, .pss-card.pss-lit::after { opacity: 1; }
.pss-card:hover { border-color: var(--pss-line2); }
.pss-card--pad { padding: clamp(24px, 3vw, 36px); }
.pss-card--flat::before, .pss-card--flat::after { display: none; }
@media (hover: none) {
.pss-card::after { opacity: .5; }
}
/* -----------------------------------------------------------------------------
9. Fondos: rejilla, resplandor, grano, brillo que recorre bordes
-------------------------------------------------------------------------- */
.pss-gridbg {
--pss-grid: 64px;
--pss-grid-x: 50%;
--pss-grid-y: 40%;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
background-size: var(--pss-grid) var(--pss-grid);
background-position: calc(50% + var(--pss-grid) / 2) 0;
-webkit-mask-image: radial-gradient(ellipse 65% 60% at var(--pss-grid-x) var(--pss-grid-y), #000 10%, transparent 75%);
mask-image: radial-gradient(ellipse 65% 60% at var(--pss-grid-x) var(--pss-grid-y), #000 10%, transparent 75%);
}
.pss-gridbg--dense { --pss-grid: 32px; }
.pss-glow {
position: absolute;
left: var(--pss-glow-x, 50%);
top: var(--pss-glow-y, 50%);
z-index: 0;
width: var(--pss-glow-size, 640px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .34), rgba(var(--pss-accent-rgb), .1) 55%, transparent 100%);
filter: blur(24px);
transform: translate(-50%, -50%);
pointer-events: none;
}
.pss-glow--soft { opacity: .55; }
.pss-glow--breathe { animation: pss-breathe 7s var(--pss-ease-io) infinite; }
.pss-grain {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: .07;
mix-blend-mode: overlay;
}
.pss-grain::before {
content: "";
position: absolute;
inset: -120px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
animation: pss-grain 1s steps(5) infinite;
}
/* brillo que recorre el borde:
dentro de un contenedor con position y border-radius */
@property --pss-edge-a {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.pss-edge {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: conic-gradient(from var(--pss-edge-a), transparent 0 64%, rgba(var(--pss-accent-hi-rgb), .9) 80%, rgba(var(--pss-accent-rgb), .2) 88%, transparent 94%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: pss-edge 5s linear infinite;
}
/* -----------------------------------------------------------------------------
10. Animaciones de entrada: [data-pss-reveal] y [data-pss-split]
(base.js añade .pss-in al verse; si el JS no arranca, a los 3 s se ve todo)
-------------------------------------------------------------------------- */
.pss [data-pss-reveal] {
opacity: 0;
transition:
opacity var(--pss-d-4) var(--pss-ease-out) var(--pss-delay, 0ms),
transform 1.1s var(--pss-ease-out) var(--pss-delay, 0ms),
filter var(--pss-d-4) var(--pss-ease-out) var(--pss-delay, 0ms);
}
.pss [data-pss-reveal="up"] { transform: translate3d(0, 36px, 0); }
.pss [data-pss-reveal="down"] { transform: translate3d(0, -28px, 0); }
.pss [data-pss-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.pss [data-pss-reveal="right"] { transform: translate3d(48px, 0, 0); }
.pss [data-pss-reveal="scale"] { transform: scale(.92); }
.pss [data-pss-reveal="blur"] { filter: blur(12px); transform: scale(1.02); }
.pss [data-pss-reveal].pss-in { opacity: 1; transform: none; filter: none; }
.pss:not(.pss-js) [data-pss-reveal] { animation: pss-failsafe .01s 3s forwards; }
.pss [data-pss-split] { --pss-st: 40ms; }
.pss .pss-w {
display: inline-block;
overflow: clip;
vertical-align: top;
padding: .14em .02em .1em;
margin: -.14em -.02em -.1em;
}
.pss .pss-wi {
display: inline-block;
transform: translate3d(0, 108%, 0);
opacity: 0;
transition:
transform 1.05s var(--pss-ease-out) calc(var(--pss-d0, 0ms) + var(--pss-i, 0) * var(--pss-st, 40ms)),
opacity .6s var(--pss-ease) calc(var(--pss-d0, 0ms) + var(--pss-i, 0) * var(--pss-st, 40ms));
}
.pss .pss-in .pss-wi,
.pss .pss-in.pss-wi { transform: none; opacity: 1; }
.pss:not(.pss-js) [data-pss-split] { animation: pss-failsafe .01s 3s forwards; }
/* secciones fuera de pantalla: se pausan sus animaciones CSS continuas */
.pss .pss-off *,
.pss .pss-off *::before,
.pss .pss-off *::after { animation-play-state: paused !important; }
/* -----------------------------------------------------------------------------
11. MÓVIL REALISTA (.pss-phone) — base.js añade isla, reflejo y botones.
Todo lo de dentro se mide en em: la pantalla fija font-size = 5 % del ancho.
-------------------------------------------------------------------------- */
.pss-phone {
--pss-phone-w: 260px;
position: relative;
flex: none;
width: var(--pss-phone-w);
aspect-ratio: 71.6 / 146.6;
padding: calc(var(--pss-phone-w) * .016);
border-radius: calc(var(--pss-phone-w) * .17);
background:
linear-gradient(145deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .06) 16%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .22) 100%),
var(--pss-surface2);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .16),
inset 0 0 0 calc(var(--pss-phone-w) * .006) rgba(0, 0, 0, .5),
0 1px 0 1px rgba(0, 0, 0, .6),
0 50px 90px -30px rgba(0, 0, 0, .95),
0 30px 50px -34px rgba(0, 0, 0, .9);
transform-style: preserve-3d;
}
.pss-phone--sm { --pss-phone-w: 220px; }
.pss-phone--md { --pss-phone-w: 260px; }
.pss-phone--lg { --pss-phone-w: 300px; }
.pss-phone-screen {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border: calc(var(--pss-phone-w) * .026) solid #000;
border-radius: calc(var(--pss-phone-w) * .154);
background: var(--pss-bg);
font-size: calc(var(--pss-phone-w) * .05);
line-height: 1.35;
color: var(--pss-text);
isolation: isolate;
-webkit-mask-image: -webkit-radial-gradient(white, black); /* recorte fiable de esquinas en Safari */
}
.pss-phone-island {
position: absolute;
top: 2.1%;
left: 50%;
z-index: 9;
width: 31%;
height: 4.3%;
max-height: 2.3em;
border-radius: 99px;
background: #000;
transform: translateX(-50%);
pointer-events: none;
}
.pss-phone-island::after {
content: "";
position: absolute;
top: 50%;
right: 12%;
width: .62em;
height: .62em;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle at 35% 35%, rgba(90, 110, 160, .9), rgba(20, 24, 40, 1) 55%, #000 70%);
}
.pss-phone-glare {
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .055) 47%, rgba(255, 255, 255, .015) 53%, rgba(255, 255, 255, 0) 60%),
linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 28%);
background-size: 260% 100%, 100% 100%;
background-position: var(--pss-gx, 55%) 0, 0 0;
}
.pss-phone-btn {
position: absolute;
width: calc(var(--pss-phone-w) * .012);
border-radius: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)), var(--pss-surface2);
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .6);
}
.pss-phone-btn--act { left: calc(var(--pss-phone-w) * -.009); top: 17%; height: 4.5%; }
.pss-phone-btn--up { left: calc(var(--pss-phone-w) * -.009); top: 25%; height: 8%; }
.pss-phone-btn--down { left: calc(var(--pss-phone-w) * -.009); top: 35%; height: 8%; }
.pss-phone-btn--pow { right: calc(var(--pss-phone-w) * -.009); top: 27%; height: 12.5%; }
.pss-phone-shadow {
position: absolute;
left: 50%;
bottom: -5%;
z-index: -1;
width: 86%;
height: 7%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
filter: blur(10px);
transform: translateX(-50%);
pointer-events: none;
}
/* -----------------------------------------------------------------------------
12. UI DE LA APP DEL SOCIO (.pss-appui) — va dentro de .pss-phone-screen
-------------------------------------------------------------------------- */
.pss-appui {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background:
radial-gradient(130% 55% at 50% -8%, rgba(var(--pss-accent-rgb), .2), rgba(var(--pss-accent-rgb), 0) 62%),
var(--pss-bg);
color: var(--pss-text);
font-family: var(--pss-f-body);
text-align: left;
}
.pss-appui-status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 3.1em;
padding: .5em 1.55em 0 1.75em;
font-size: .86em;
font-weight: 600;
letter-spacing: .01em;
}
.pss-appui-clock { font-variant-numeric: tabular-nums; }
.pss-appui-sys { display: flex; align-items: center; gap: .32em; }
.pss-appui-sys svg { height: .95em; width: auto; fill: currentColor; }
.pss-appui-head {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: .8em;
padding: .55em 1.15em .1em 1.2em;
}
.pss-appui-logo { height: 1.3em; width: auto; opacity: .95; }
.pss-appui-bell {
position: relative;
display: grid;
place-items: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .05);
color: var(--pss-text2);
}
.pss-appui-bell svg { width: 1.05em; height: 1.05em; }
.pss-appui-bell i {
position: absolute;
top: .42em;
right: .48em;
width: .45em;
height: .45em;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 0 .14em var(--pss-bg);
}
.pss-appui-hello { flex: none; padding: .75em 1.2em .85em; }
.pss-appui-hi {
display: block;
font-family: var(--pss-f-display);
font-weight: 600;
font-size: 1.5em;
line-height: 1.05;
letter-spacing: .015em;
text-transform: uppercase;
}
.pss-appui-where {
display: flex;
align-items: center;
gap: .45em;
margin-top: .3em;
font-family: var(--pss-f-mono);
font-size: .62em;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-appui-where::before {
content: "";
width: .55em;
height: .55em;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 .6em rgba(var(--pss-accent-rgb), .9);
}
.pss-appui-body {
position: relative;
flex: 1 1 auto;
min-height: 0;
padding: 0 1em;
overflow: hidden;
}
.pss-appui-tabs {
flex: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: .55em .5em 1.85em;
border-top: 1px solid var(--pss-line);
background: rgba(var(--pss-surface-rgb), .92);
}
.pss-appui-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: .28em;
font-size: .6em;
font-weight: 600;
letter-spacing: .01em;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss-appui-tab svg { width: 2.25em; height: 2.25em; }
.pss-appui-tab.is-on { color: var(--pss-accent); }
.pss-appui-tab.is-on::before {
content: "";
position: absolute;
top: -.95em;
left: 50%;
width: 2.6em;
height: .25em;
border-radius: 0 0 .3em .3em;
background: var(--pss-accent);
box-shadow: 0 0 1.2em rgba(var(--pss-accent-rgb), .9);
transform: translateX(-50%);
}
.pss-appui-homebar {
position: absolute;
bottom: .55em;
left: 50%;
z-index: 7;
width: 36%;
height: .3em;
border-radius: 99px;
background: rgba(255, 255, 255, .85);
transform: translateX(-50%);
}
/* piezas para las pantallas de la app (reservas, aforo, pagos, avisos…) */
.pss-appui-title {
display: block;
margin: .2em 0 .6em;
font-family: var(--pss-f-display);
font-weight: 600;
font-size: 1.1em;
letter-spacing: .03em;
text-transform: uppercase;
}
.pss-appui-card {
position: relative;
padding: .9em 1em;
border-radius: 1.1em;
border: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), var(--pss-surface);
}
.pss-appui-card + .pss-appui-card { margin-top: .6em; }
.pss-appui-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.pss-appui-muted { font-size: .72em; color: var(--pss-text3); }
.pss-appui-pill {
display: inline-flex;
align-items: center;
gap: .35em;
padding: .28em .65em;
border-radius: 99px;
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
font-size: .64em;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.pss-appui-pill--warn { border-color: rgba(var(--pss-warn-rgb), .35); background: rgba(var(--pss-warn-rgb), .12); color: var(--pss-warn); }
.pss-appui-pill--danger { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .12); color: var(--pss-danger); }
.pss .pss-appui-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 2.7em;
border-radius: .9em;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-size: .82em;
font-weight: 700;
}
.pss .pss-appui-btn:hover { background: var(--pss-accent-hi); color: var(--pss-on-accent); }
/* -----------------------------------------------------------------------------
13. TARJETA DE ACCESO CON QR (.pss-qrcard) — la pinta PSS.qrCard()
-------------------------------------------------------------------------- */
.pss-qrcard {
position: relative;
display: flex;
flex-direction: column;
gap: .75em;
padding: .95em .95em 1em;
border-radius: 1.3em;
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 60%), var(--pss-surface);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1.2em 2.4em -1.2em rgba(0, 0, 0, .8);
text-align: left;
}
.pss-qrcard-top { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.pss-qrcard-label {
font-family: var(--pss-f-display);
font-weight: 600;
font-size: 1em;
letter-spacing: .04em;
text-transform: uppercase;
}
.pss-qrcard-state {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .3em .6em .3em .5em;
border-radius: 99px;
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
font-size: .6em;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}
.pss-qrcard-state::before {
content: "";
width: .6em;
height: .6em;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 .7em currentColor;
}
.pss-qrcard-code {
position: relative;
align-self: center;
width: 80%;
aspect-ratio: 1;
padding: .55em;
border-radius: .95em;
background: var(--pss-text);
box-shadow: 0 0 0 .3em rgba(var(--pss-accent-rgb), .12), 0 .8em 2em -.6em rgba(var(--pss-accent-rgb), .45);
overflow: hidden;
}
.pss-qrcard-code svg { width: 100%; height: 100%; }
.pss-qrcard-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 22%;
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), 0), rgba(var(--pss-accent-rgb), .22) 80%, rgba(var(--pss-accent-rgb), .9) 97%, rgba(var(--pss-accent-rgb), 0) 100%);
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
.pss-qrcard.is-rot .pss-qrcard-scan { animation: pss-qr-scan .9s var(--pss-ease-io) both; }
.pss-qrcard.is-rot .pss-qrcard-code svg { animation: pss-qr-in .7s var(--pss-ease-out) both; }
.pss-qrcard-who { display: flex; flex-direction: column; align-items: center; gap: .1em; text-align: center; }
.pss-qrcard-name { font-weight: 700; font-size: .98em; line-height: 1.2; }
.pss-qrcard-plan { font-size: .68em; color: var(--pss-text2); }
.pss-qrcard-timer {
display: flex;
align-items: center;
gap: .65em;
padding: .5em .7em .5em .5em;
border-radius: .9em;
border: 1px solid var(--pss-line);
background: rgba(255, 255, 255, .035);
}
.pss-qrcard-ring { position: relative; flex: none; width: 2.5em; height: 2.5em; }
.pss-qrcard-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pss-qrcard-ring .pss-qr-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3; }
.pss-qrcard-ring .pss-qr-prog {
fill: none;
stroke: var(--pss-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 100 100;
filter: drop-shadow(0 0 2px rgba(var(--pss-accent-rgb), .8));
transition: stroke-dashoffset .26s linear, stroke .3s;
}
.pss-qrcard-secs {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--pss-f-mono);
font-size: .8em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pss-qrcard-txt { display: flex; flex-direction: column; gap: .12em; min-width: 0; font-size: .72em; line-height: 1.25; color: var(--pss-text2); }
.pss-qrcard-txt b { color: var(--pss-text); font-weight: 600; }
.pss-qrcard-tok { font-family: var(--pss-f-mono); font-size: .9em; color: var(--pss-text3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-qrcard-stamp {
position: absolute;
left: 50%;
top: 50%;
display: none;
padding: .45em .8em;
border-radius: .5em;
border: 2px solid var(--pss-danger);
background: rgba(var(--pss-bg-rgb), .85);
color: var(--pss-danger);
font-family: var(--pss-f-mono);
font-size: .72em;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
transform: translate(-50%, -50%) rotate(-8deg);
}
.pss-qrcard[data-estado="caducado"] .pss-qrcard-code svg { opacity: .35; filter: grayscale(1) blur(.4px); }
.pss-qrcard[data-estado="caducado"] .pss-qrcard-stamp { display: block; }
.pss-qrcard[data-estado="caducado"] .pss-qrcard-state,
.pss-qrcard[data-estado="pendiente"] .pss-qrcard-state { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .12); color: var(--pss-danger); }
.pss-qrcard[data-estado="horario"] .pss-qrcard-state { border-color: rgba(var(--pss-warn-rgb), .35); background: rgba(var(--pss-warn-rgb), .12); color: var(--pss-warn); }
.pss-qrcard[data-estado="caducado"] .pss-qr-prog { stroke: var(--pss-danger); }
.pss-qrcard.is-last .pss-qr-prog { stroke: var(--pss-warn); }
/* -----------------------------------------------------------------------------
14. NAVEGADOR (.pss-browser) — panel y ecosistema
-------------------------------------------------------------------------- */
.pss-browser {
position: relative;
border-radius: 14px;
border: 1px solid var(--pss-line2);
background: var(--pss-surface);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--pss-shadow-3);
overflow: hidden;
}
.pss-browser-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 14px;
border-bottom: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--pss-surface2);
}
.pss-browser-dots { display: flex; gap: 8px; }
.pss-browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--pss-danger); opacity: .85; }
.pss-browser-dots i:nth-child(2) { background: var(--pss-warn); }
.pss-browser-dots i:nth-child(3) { background: var(--pss-accent); }
.pss-browser-url {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 28px;
min-width: min(380px, 46vw);
padding: 0 16px;
border-radius: 8px;
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .6);
color: var(--pss-text2);
font-family: var(--pss-f-mono);
font-size: 12.5px;
line-height: 1;
white-space: nowrap;
}
.pss-browser-url svg { width: 12px; height: 12px; color: var(--pss-accent); flex: none; }
.pss-browser-url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pss-browser-act { justify-self: end; display: flex; align-items: center; gap: 8px; }
.pss-browser-body { position: relative; background: var(--pss-bg2); }
@media (max-width: 767px) {
.pss-browser { border-radius: 12px; }
.pss-browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; height: 38px; padding: 0 10px; gap: 10px; }
.pss-browser-dots { gap: 6px; }
.pss-browser-dots i { width: 9px; height: 9px; }
.pss-browser-url { justify-self: center; min-width: 0; max-width: 100%; height: 24px; padding: 0 10px; gap: 6px; font-size: 11px; overflow: hidden; }
.pss-browser-act { min-width: 0; }
}
/* -----------------------------------------------------------------------------
15. Inclinación 3D genérica (PSS.tilt escribe --pss-rx/--pss-ry)
-------------------------------------------------------------------------- */
.pss-tilt {
transform:
perspective(var(--pss-persp, 1200px))
rotateX(calc(var(--pss-rx0, 0deg) + var(--pss-rx, 0deg)))
rotateY(calc(var(--pss-ry0, 0deg) + var(--pss-ry, 0deg)));
transform-style: preserve-3d;
will-change: transform;
}
/* -----------------------------------------------------------------------------
16. Fotogramas clave
-------------------------------------------------------------------------- */
@keyframes pss-failsafe { to { opacity: 1; transform: none; filter: none; } }
@keyframes pss-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .55); }
70% { box-shadow: 0 0 0 9px rgba(var(--pss-accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), 0); }
}
@keyframes pss-pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(var(--pss-dot-rgb), .55); }
70% { box-shadow: 0 0 0 8px rgba(var(--pss-dot-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--pss-dot-rgb), 0); }
}
@keyframes pss-shine { 0%, 18% { background-position: 100% 0; } 62%, 100% { background-position: 0% 0; } }
@keyframes pss-breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes pss-grain {
0% { transform: translate(0, 0); }
20% { transform: translate(-40px, 25px); }
40% { transform: translate(30px, -45px); }
60% { transform: translate(-25px, -15px); }
80% { transform: translate(45px, 35px); }
100% { transform: translate(0, 0); }
}
@keyframes pss-edge { to { --pss-edge-a: 360deg; } }
@keyframes pss-qr-scan {
0% { opacity: 0; transform: translateY(-100%); }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; transform: translateY(460%); }
}
@keyframes pss-qr-in {
0% { opacity: 0; transform: scale(.94); filter: blur(3px); }
100% { opacity: 1; transform: none; filter: none; }
}
@keyframes pss-spin { to { transform: rotate(360deg); } }
@keyframes pss-float { 0%, 100% { transform: translate3d(0, -8px, 0); } 50% { transform: translate3d(0, 8px, 0); } }
@keyframes pss-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* -----------------------------------------------------------------------------
17. Movimiento reducido: todo visible, nada continuo
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.pss *,
.pss *::before,
.pss *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.pss [data-pss-reveal],
.pss .pss-wi { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.pss .pss-btn::before { display: none; }
.pss .pss-btn:active { scale: 1; }
.pss .pss-grain::before { animation: none; }
}
/* ===== hero ===== */
/* =============================================================================
PANTHERA OS · sección hero
============================================================================= */
@property --pss-sway {
syntax: '';
inherits: true;
initial-value: 0deg;
}
.pss-hero {
--pss-hero-fold: 100%;
position: relative;
display: flex;
align-items: center;
/* pantalla completa: lo que queda visible bajo la cabecera de la tienda (lo mide script.js), mín. 760 */
min-height: clamp(760px, var(--pss-hero-fold), 980px);
padding-block: 40px 110px;
overflow: clip;
background: var(--pss-bg);
}
/* ---------- fondo ---------- */
.pss-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-hero-foto { position: absolute; inset: 0; display: block; }
.pss-hero-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 62% 30%;
opacity: .5;
filter: grayscale(1) brightness(.62) contrast(1.25);
}
.pss-hero-foto::after {
content: "";
position: absolute;
inset: 0;
background: var(--pss-accent);
mix-blend-mode: color;
opacity: .5;
}
.pss-hero-tint {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--pss-bg) 0%, rgba(var(--pss-bg-rgb), .93) 28%, rgba(var(--pss-bg-rgb), .6) 58%, rgba(var(--pss-bg-rgb), .72) 100%),
linear-gradient(0deg, var(--pss-bg) 0%, rgba(var(--pss-bg-rgb), 0) 38%),
linear-gradient(180deg, rgba(var(--pss-bg-rgb), .9) 0%, rgba(var(--pss-bg-rgb), 0) 22%);
}
.pss-hero-grid { --pss-grid: 72px; --pss-grid-x: 74%; --pss-grid-y: 46%; opacity: .75; }
.pss-hero-glow { --pss-glow-x: 74%; --pss-glow-y: 52%; --pss-glow-size: 820px; }
.pss-hero-glow2 { --pss-glow-x: 8%; --pss-glow-y: 4%; --pss-glow-size: 560px; opacity: .22; }
.pss-hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-webkit-mask-image: radial-gradient(ellipse 58% 78% at 74% 50%, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 92%);
mask-image: radial-gradient(ellipse 58% 78% at 74% 50%, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 92%);
}
.pss-hero-horizon {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--pss-accent-rgb), .0) 12%, rgba(var(--pss-accent-rgb), .55) 50%, rgba(var(--pss-accent-rgb), 0) 88%, transparent 100%);
box-shadow: 0 0 24px 1px rgba(var(--pss-accent-rgb), .35);
}
/* ---------- rejilla de contenido ---------- */
.pss-hero-in {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
align-items: center;
gap: clamp(24px, 4vw, 64px);
}
.pss-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pss-hero-badge { margin: 0 0 26px; }
.pss-hero-title {
display: flex;
flex-direction: column;
align-items: flex-start;
font-family: var(--pss-f-display);
font-weight: 700;
text-transform: uppercase;
color: var(--pss-text);
}
.pss-hero-l1,
.pss-hero-l2 {
display: block;
font-size: clamp(56px, 9vw, 150px);
line-height: .9;
letter-spacing: -.012em;
}
.pss-hero-l1 { color: var(--pss-text); }
/* brillo metálico sutil en PANTHERA (va en cada letra porque el texto se parte) */
.pss-hero-l1 .pss-wi {
background-image: linear-gradient(180deg, var(--pss-text) 0%, var(--pss-text) 42%, rgba(243, 245, 246, .62) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.pss-hero-l2 {
position: relative;
display: flex;
align-items: flex-end;
gap: .07em;
}
.pss-hero-l2::before {
content: "";
position: absolute;
left: -.3em;
top: 10%;
width: 2.2em;
height: 90%;
z-index: -1;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .32), transparent);
filter: blur(18px);
pointer-events: none;
}
.pss-hero-os { position: relative; }
/* cursor de terminal: fino y separado de la S (no se lee como una «I»); espera fijo mientras sube «OS»,
parpadea tres veces y se desvanece (400 ms). Arranca cuando base.js pone .pss-in en «OS». */
.pss-hero-caret {
flex: none;
width: .045em;
height: .72em;
margin-bottom: .06em;
margin-left: .14em;
border-radius: 2px;
background: var(--pss-accent-hi);
box-shadow: 0 0 18px rgba(var(--pss-accent-rgb), .75);
opacity: 0;
pointer-events: none;
}
.pss-hero-os.pss-in + .pss-hero-caret { animation: pss-hero-caret 3.3s linear 1.45s both; }
.pss-hero-tag {
display: block;
margin-top: 22px;
font-family: var(--pss-f-body);
font-weight: 500;
font-size: clamp(20px, 1.85vw, 28px);
line-height: 1.22;
letter-spacing: -.018em;
text-transform: none;
color: var(--pss-text);
}
.pss-hero-sub {
margin-top: 14px;
max-width: 44ch;
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-hero-sub strong { color: var(--pss-text); font-weight: 600; }
.pss-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pss .pss-hero-ctas .pss-btn { gap: 12px; }
.pss .pss-hero-wa { width: 19px; height: 19px; color: var(--pss-accent); transition: color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease); }
.pss .pss-btn:hover .pss-hero-wa { color: var(--pss-accent-hi); transform: rotate(-8deg) scale(1.08); }
.pss-hero-pieces {
display: flex;
flex-wrap: wrap;
gap: 14px 0;
margin-top: 34px;
padding-top: 22px;
border-top: 1px solid var(--pss-line);
width: 100%;
max-width: 640px;
}
.pss-hero-pieces li {
display: flex;
align-items: center;
gap: 12px;
padding-right: 22px;
margin-right: 22px;
border-right: 1px solid var(--pss-line);
}
.pss-hero-pieces li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pss-hero-pico {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(var(--pss-accent-rgb), .28);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
}
.pss-hero-pico svg { width: 18px; height: 18px; }
.pss-hero-ptxt { display: flex; flex-direction: column; line-height: 1.25; }
.pss-hero-ptxt b { font-size: 14px; font-weight: 600; color: var(--pss-text); white-space: nowrap; }
.pss-hero-ptxt small { font-size: 12.5px; color: var(--pss-text3); white-space: nowrap; }
/* ---------- escena del móvil ---------- */
.pss-hero-visual { position: relative; min-width: 0; }
.pss-hero-stage {
--pss-phone-w: clamp(236px, 18.6vw, 272px);
--pss-hero-dy: -10px; /* desplazamiento vertical común de móvil, anillo y sombra */
--pss-hero-dx: 0px; /* desplazamiento horizontal de toda la escena */
--pss-hero-gap: 22px; /* aire entre las etiquetas y el marco del móvil */
position: relative;
height: 600px;
display: grid;
place-items: center;
translate: var(--pss-hero-dx) 0;
}
/* halo verde propio del móvil (además del resplandor general del fondo) */
.pss-hero-halo {
position: absolute;
left: 50%;
top: calc(50% + var(--pss-hero-dy));
z-index: 0;
width: calc(var(--pss-phone-w) * 1.75);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .18) 0%, rgba(var(--pss-accent-rgb), .09) 45%, rgba(var(--pss-accent-rgb), 0) 100%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.pss-hero-float {
position: relative;
z-index: 3;
translate: 0 var(--pss-hero-dy);
animation: pss-float 7s var(--pss-ease-io) infinite;
}
.pss-hero-phone {
--pss-phone-w: inherit;
transform:
perspective(1500px)
rotateX(calc(7deg + var(--pss-rx, 0deg)))
rotateY(calc(-17deg + var(--pss-ry, 0deg) + var(--pss-sway)))
rotateZ(1.2deg);
animation: pss-hero-sway 11s var(--pss-ease-io) infinite;
will-change: transform;
}
.pss-hero-shadow {
left: 50%;
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * 1.02 + 16px);
bottom: auto;
z-index: 1;
width: calc(var(--pss-phone-w) * 1.05);
height: 44px;
animation: pss-hero-shadow 7s var(--pss-ease-io) infinite;
}
/* anillo plataforma (mitad detrás, mitad delante del móvil) */
.pss-hero-ring {
position: absolute;
left: 50%;
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * .86);
width: calc(var(--pss-phone-w) * var(--pss-hero-ring, 2));
aspect-ratio: 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
.pss-hero-ring--back { z-index: 2; clip-path: inset(0 0 50% 0); }
.pss-hero-ring--front { z-index: 4; clip-path: inset(50% 0 0 0); }
.pss-hero-ring-plane { width: 100%; height: 100%; transform: perspective(1400px) rotateX(76deg); }
.pss-hero-ring svg { width: 100%; height: 100%; overflow: visible; animation: pss-spin 26s linear infinite; }
.pss-hero-r1 { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; stroke-dasharray: 3 9; }
.pss-hero-r2 { fill: rgba(var(--pss-accent-rgb), .05); stroke: rgba(var(--pss-accent-rgb), .45); stroke-width: 2; }
.pss-hero-r2c {
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 210 1361;
filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), .9));
}
.pss-hero-rdot { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), 1)); }
/* órbita grande, inclinada, siempre detrás */
.pss-hero-orbit {
position: absolute;
left: 50%;
top: calc(46% + var(--pss-hero-dy));
z-index: 1;
width: calc(var(--pss-phone-w) * 2.35);
aspect-ratio: 1;
transform: translate(-50%, -50%) perspective(1400px) rotateX(68deg) rotateY(-16deg);
pointer-events: none;
}
.pss-hero-orbit svg { width: 100%; height: 100%; overflow: visible; animation: pss-spin 44s linear infinite reverse; }
.pss-hero-o1 { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.4; stroke-dasharray: 2 8; }
.pss-hero-o2 { fill: none; stroke: rgba(var(--pss-accent-rgb), .22); stroke-width: 1.4; }
.pss-hero-o2c { fill: none; stroke: rgba(var(--pss-accent-hi-rgb), .8); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 120 1426; }
.pss-hero-odot { fill: var(--pss-accent); }
.pss-hero-odot--hi { fill: var(--pss-accent-hi); }
.pss-hero-odot--w { fill: rgba(255, 255, 255, .8); }
.pss-hero-ohalo { fill: rgba(var(--pss-accent-rgb), .22); }
/* chips flotantes: SIEMPRE fuera de la silueta del móvil (se colocan respecto a su centro; alto del
móvil = 2,048 × ancho). Paralaje corto y a contrapelo del ratón: cuando el móvil gira hacia un lado,
su canto se aleja de las etiquetas de ese lado en vez de ir hacia ellas. */
.pss-hero-cw {
--pss-depth: -8px;
position: absolute;
z-index: 5;
translate: calc(var(--pss-px, 0) * var(--pss-depth)) calc(var(--pss-py, 0) * var(--pss-depth));
}
.pss-hero-cw .pss-hero-chip { animation: pss-hero-bob 6s var(--pss-ease-io) infinite; }
.pss-hero-cw--acc {
right: calc(50% + var(--pss-phone-w) * .5 + var(--pss-hero-gap));
top: calc(50% + var(--pss-hero-dy) - var(--pss-phone-w) * .6);
--pss-depth: -9px;
}
.pss-hero-cw--sig {
left: calc(50% + var(--pss-phone-w) * .5 + var(--pss-hero-gap) + 4px);
top: calc(50% + var(--pss-hero-dy) - var(--pss-phone-w) * .86);
--pss-depth: -6px;
}
.pss-hero-cw--sig .pss-hero-chip { animation-delay: -2s; }
.pss-hero-cw--aforo {
left: calc(50% + var(--pss-phone-w) * .5 + var(--pss-hero-gap) + 14px);
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * .06);
--pss-depth: -10px;
}
.pss-hero-cw--aforo .pss-hero-chip { animation-delay: -4s; }
.pss-hero-cw--cuota {
right: calc(50% + var(--pss-phone-w) * .5 + var(--pss-hero-gap) + 10px);
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * .5);
--pss-depth: -7px;
}
.pss-hero-cw--cuota .pss-hero-chip { animation-delay: -1s; }
.pss-hero-chip { position: relative; }
.pss-hero-chip.is-ping::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid var(--pss-accent-hi);
animation: pss-hero-ping .9s var(--pss-ease) forwards;
pointer-events: none;
}
.pss-hero-feed { min-width: 9.5em; }
.pss-hero-aforo { display: flex; flex-direction: column; gap: 6px; min-width: 8.2em; }
.pss-hero-aforo b { font-family: var(--pss-f-mono); font-weight: 600; color: var(--pss-accent-hi); font-variant-numeric: tabular-nums; }
.pss-hero-aforo-cap { font-family: var(--pss-f-mono); font-weight: 400; color: var(--pss-text3); }
.pss-hero-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pss-hero-bar i {
display: block;
height: 100%;
width: 35%;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent-hi));
box-shadow: 0 0 10px rgba(var(--pss-accent-rgb), .8);
transition: width .8s var(--pss-ease);
}
.pss-hero-ok {
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-left: 4px;
border-radius: 50%;
background: var(--pss-accent);
color: var(--pss-on-accent);
box-shadow: 0 0 14px rgba(var(--pss-accent-rgb), .7);
}
.pss-hero-ok svg { width: 13px; height: 13px; }
/* contenido de la pantalla */
.pss-hero-qr { margin-top: .1em; }
/* ---------- indicador de scroll: centrado en la página, a 24 px de la línea de horizonte del héroe.
En fila (34 px de alto): o se ve entero o queda todo bajo el pliegue, nunca un trozo cortado ---------- */
.pss .pss-hero-scroll {
position: absolute;
left: 50%;
bottom: 24px;
z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 0 4px;
white-space: nowrap;
color: var(--pss-text3);
font-family: var(--pss-f-mono);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
transform: translateX(-50%);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-hero-scroll:hover,
.pss .pss-hero-scroll:focus-visible { color: var(--pss-accent-hi); }
.pss-hero-mouse {
position: relative;
width: 22px;
height: 34px;
border: 1.5px solid currentColor;
border-radius: 12px;
opacity: .9;
}
.pss-hero-mouse i {
position: absolute;
left: 50%;
top: 7px;
width: 3px;
height: 7px;
margin-left: -1.5px;
border-radius: 2px;
background: var(--pss-accent-hi);
animation: pss-hero-wheel 1.8s var(--pss-ease) infinite;
}
.pss-hero-scroll-t { margin-right: -.22em; }
/* ---------- entrada del móvil ---------- */
.pss .pss-hero-visual[data-pss-reveal] { transform: translate3d(0, 70px, 0) scale(.96); transition-duration: 1.4s, 1.6s, 1s; }
.pss .pss-hero-cw[data-pss-reveal] { transform: scale(.82); transition-duration: .8s, .9s, .8s; transition-timing-function: var(--pss-ease), var(--pss-ease-spring), var(--pss-ease); }
.pss .pss-hero-cw[data-pss-reveal].pss-in { transform: none; }
/* ---------- fotogramas ---------- */
@keyframes pss-hero-sway { 0%, 100% { --pss-sway: -3deg; } 50% { --pss-sway: 4deg; } }
@keyframes pss-hero-shadow { 0%, 100% { opacity: .95; transform: translateX(-50%) scale(.94); } 50% { opacity: .7; transform: translateX(-50%) scale(1.04); } }
@keyframes pss-hero-bob { 0%, 100% { transform: translate3d(0, -5px, 0); } 50% { transform: translate3d(0, 5px, 0); } }
@keyframes pss-hero-ping { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes pss-hero-wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(9px); } 100% { opacity: 0; } }
/* 3 parpadeos de 1,15 s (encendido .8 / apagado) y fundido final de 400 ms desde encendido */
@keyframes pss-hero-caret {
0%, 17.4% { opacity: .8; }
17.5%, 34.8% { opacity: 0; }
34.9%, 52.3% { opacity: .8; }
52.4%, 69.8% { opacity: 0; }
69.9% { opacity: .8; }
87.8% { opacity: .8; animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
100% { opacity: 0; }
}
/* ---------- escritorio ancho (> 1280): el móvil manda ---------- */
@media (min-width: 1281px) {
.pss-hero-stage {
/* 280-320 px; en pantallas bajas se ajusta a la parte visible del héroe (--pss-hero-vis, lo mide
script.js) para que móvil + anillo quepan enteros en la primera pantalla */
--pss-phone-w: clamp(280px, min(21vw, calc(var(--pss-hero-vis, 693px) * .46 - 27px)), 320px);
--pss-hero-dy: 8px; /* más abajo que antes: el pie del móvil y el anillo se acercan al horizonte */
--pss-hero-dx: -48px; /* deja sitio a las etiquetas de la derecha sin llegar al borde de la página */
--pss-hero-gap: 24px; /* ≥ 16 px de aire en el peor giro del móvil (medido en las cuatro esquinas) */
}
}
/* ---------- ≤ 1280: a los lados no caben etiquetas sin pisar el móvil → dos debajo, sobre el anillo ---------- */
@media (max-width: 1280px) {
.pss-hero-stage { --pss-hero-dy: -40px; }
.pss-hero-cw--sig,
.pss-hero-cw--cuota { display: none; }
/* +22 px bajo el pie: margen para la flotación del móvil (±8) y el vaivén de la etiqueta (±5) */
.pss-hero-cw--acc {
right: calc(50% + 8px);
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * 1.024 + 22px);
}
.pss-hero-cw--aforo {
left: calc(50% + 8px);
top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * 1.024 + 38px);
}
/* los tres pilares no caben en una fila de 620 px: rejilla de tres columnas (sin saltos sueltos) */
.pss-hero-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.pss-hero-pieces li { margin: 0; padding: 0 14px; }
.pss-hero-pieces li:first-child { padding-left: 0; }
.pss-hero-pieces li:last-child { padding-right: 0; }
.pss-hero-ptxt b,
.pss-hero-ptxt small { white-space: normal; }
}
/* ---------- tableta (768-1023): dos columnas, texto y móvil en la primera pantalla ---------- */
@media (max-width: 1023px) {
.pss-hero { padding-block: 44px 56px; }
.pss-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px; }
.pss-hero-badge { margin-bottom: 22px; }
.pss-hero-l1,
.pss-hero-l2 { font-size: clamp(56px, 10.4vw, 104px); }
.pss-hero-tag { margin-top: 18px; font-size: 20px; }
.pss-hero-sub { font-size: 16px; }
.pss-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; gap: 12px; margin-top: 26px; }
.pss .pss-hero-ctas .pss-btn { width: 100%; --pss-btn-h: 56px; }
.pss-hero-pieces {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 30px;
padding-top: 20px;
}
.pss-hero-pieces li {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 0 10px;
}
.pss-hero-pieces li:first-child { padding-left: 0; }
.pss-hero-pieces li:last-child { padding-right: 0; }
.pss-hero-pico { width: 32px; height: 32px; }
.pss-hero-ptxt b { font-size: 13px; white-space: normal; }
.pss-hero-ptxt small { display: none; }
.pss-hero-stage { --pss-phone-w: clamp(220px, 30vw, 264px); --pss-hero-dy: -44px; --pss-hero-ring: 1.75; height: calc(var(--pss-phone-w) * 2.048 + 112px); }
.pss-hero-chip { font-size: 11.5px; padding: 7px 11px 7px 7px; gap: 8px; border-radius: 12px; }
.pss-hero-chip .pss-chip-ico { width: 26px; height: 26px; border-radius: 8px; }
.pss-hero-chip .pss-chip-ico svg { width: 14px; height: 14px; }
.pss-hero-chip .pss-chip-s { font-size: 10.5px; }
.pss-hero-feed { min-width: 8.6em; }
.pss-hero-aforo { min-width: 7.2em; }
/* la pareja de etiquetas es más ancha que la columna: se corre a la derecha, lejos del texto */
.pss-hero-cw--acc { right: calc(50% - 4px); }
.pss-hero-cw--aforo { left: calc(50% + 12px); }
.pss .pss-hero-scroll { display: none; }
}
/* ---------- móvil (390 px): el móvil asoma ya en la primera pantalla, bajo los botones ---------- */
@media (max-width: 767px) {
.pss-hero { min-height: 640px; padding-block: 30px 40px; align-items: flex-start; }
.pss-hero-foto img { object-position: 50% 20%; opacity: .42; }
.pss-hero-tint {
background:
linear-gradient(180deg, rgba(var(--pss-bg-rgb), .92) 0%, rgba(var(--pss-bg-rgb), .8) 40%, rgba(var(--pss-bg-rgb), .55) 70%, var(--pss-bg) 100%);
}
/* una columna; los tres pilares pasan debajo del móvil (el orden del DOM no cambia) */
.pss-hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pss-hero-copy { display: contents; }
.pss-hero-visual { order: 1; margin-top: 32px; }
.pss-hero-pieces { order: 2; margin-top: 8px; }
.pss-hero-badge { margin-bottom: 20px; }
.pss-hero-l1,
.pss-hero-l2 { font-size: clamp(56px, 20.5vw, 104px); }
.pss-hero-caret { display: none; }
.pss-hero-tag { margin-top: 16px; font-size: 21px; }
.pss-hero-sub { margin-top: 12px; }
.pss-hero-ctas { max-width: none; margin-top: 24px; }
.pss-hero-stage {
--pss-phone-w: 240px;
--pss-hero-dy: -48px; /* = −(alto del escenario − alto del móvil) / 2: arriba del todo, asoma bajo los botones */
--pss-hero-ring: 1.5;
height: calc(var(--pss-phone-w) * 2.048 + 96px);
}
.pss-hero-phone {
transform:
perspective(1300px)
rotateX(calc(5deg + var(--pss-rx, 0deg)))
rotateY(calc(-10deg + var(--pss-ry, 0deg) + var(--pss-sway)))
rotateZ(-6deg);
}
.pss-hero-canvas {
-webkit-mask-image: radial-gradient(ellipse 95% 42% at 50% 64%, #000 30%, rgba(0, 0, 0, .3) 65%, transparent 95%);
mask-image: radial-gradient(ellipse 95% 42% at 50% 64%, #000 30%, rgba(0, 0, 0, .3) 65%, transparent 95%);
}
.pss-hero-glow { --pss-glow-x: 50%; --pss-glow-y: 62%; --pss-glow-size: 620px; }
.pss-hero-grid { --pss-grid-x: 50%; --pss-grid-y: 62%; }
/* dos etiquetas, apoyadas en el anillo por debajo del móvil (no tapan pestañas ni bordes) */
/* siguen la inclinación de −6°: la de la izquierda, bajo la esquina más baja del móvil, va 12 px más abajo */
.pss-hero-cw--acc { right: calc(50% + 5px); top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * 1.024 + 30px); }
.pss-hero-cw--aforo { left: calc(50% + 5px); top: calc(50% + var(--pss-hero-dy) + var(--pss-phone-w) * 1.024 + 18px); }
.pss-hero-ok { width: 18px; height: 18px; }
.pss-hero-ok svg { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.pss-hero-phone,
.pss-hero-float,
.pss-hero-shadow,
.pss-hero-ring svg,
.pss-hero-orbit svg,
.pss-hero-cw .pss-hero-chip { animation: none; }
.pss-hero-l2 .pss-hero-caret { display: none; }
}
/* ===== ticker ===== */
/* =============================================================================
PANTHERA OS · sección ticker
Marquesina a dos filas (la mueve script.js con PSS.loop) + panel de 4 cifras
con rodillos tipo cuentakilómetros.
============================================================================= */
.pss-ticker {
--pss-tk-fs: clamp(40px, 6.1vw, 92px);
padding-top: clamp(40px, 5vw, 72px);
overflow: clip;
background:
radial-gradient(60% 55% at 50% 0%, rgba(var(--pss-accent-rgb), .07), rgba(var(--pss-accent-rgb), 0) 70%),
var(--pss-bg);
}
/* ---------- marquesina ---------- */
.pss-ticker-band {
position: relative;
z-index: 1;
border-block: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .02));
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.pss-ticker-row {
position: relative;
overflow: hidden;
padding-block: calc(var(--pss-tk-fs) * .2) calc(var(--pss-tk-fs) * .17);
}
.pss-ticker-row + .pss-ticker-row { border-top: 1px solid var(--pss-line); }
.pss-ticker-track {
display: flex;
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.pss-ticker-row--b .pss-ticker-track { transform: translate3d(-37%, 0, 0); }
.pss-ticker-set {
display: flex;
flex: none;
align-items: center;
}
.pss-ticker-it {
flex: none;
padding-inline: calc(var(--pss-tk-fs) * .34);
font-family: var(--pss-f-display);
font-size: var(--pss-tk-fs);
font-weight: 700;
line-height: 1;
letter-spacing: -.004em;
text-transform: uppercase;
white-space: nowrap;
color: var(--pss-text);
transition: color .45s var(--pss-ease), -webkit-text-stroke-color .45s var(--pss-ease);
}
.pss-ticker-it em {
font-style: normal;
color: var(--pss-accent);
}
/* la unidad «s» va en minúscula aunque el titular vaya en mayúsculas */
.pss-ticker-row--a .pss-ticker-it:first-child em { text-transform: none; }
.pss-ticker-row--a .pss-ticker-it:hover { color: var(--pss-accent-hi); }
/* fila B: letras huecas, se rellenan de verde al pasar el ratón */
.pss-ticker-row--b .pss-ticker-it {
color: transparent;
-webkit-text-stroke: 1.4px rgba(255, 255, 255, .34);
}
.pss-ticker-row--b .pss-ticker-it:hover {
color: var(--pss-accent);
-webkit-text-stroke-color: var(--pss-accent);
}
/* separadores: pantera (máscara con el icono real) y rayo */
.pss-ticker-sep {
flex: none;
display: block;
width: calc(var(--pss-tk-fs) * .56);
height: calc(var(--pss-tk-fs) * .56);
color: var(--pss-accent);
}
.pss-ticker-sep--pantera {
background: linear-gradient(160deg, var(--pss-accent-hi), var(--pss-accent) 55%, var(--pss-accent-lo));
-webkit-mask: url("https://pantherasport.es/wp-content/uploads/ps-software/img/marca/icono-pantera.svg") center / contain no-repeat;
mask: url("https://pantherasport.es/wp-content/uploads/ps-software/img/marca/icono-pantera.svg") center / contain no-repeat;
filter: drop-shadow(0 0 14px rgba(var(--pss-accent-rgb), .5));
}
.pss-ticker-sep--rayo {
width: calc(var(--pss-tk-fs) * .5);
height: calc(var(--pss-tk-fs) * .6);
}
.pss .pss-ticker-sep--rayo svg {
width: 100%;
height: 100%;
overflow: visible;
fill: currentColor;
filter: drop-shadow(0 0 12px rgba(var(--pss-accent-rgb), .55));
}
.pss-ticker-row--b .pss-ticker-sep--rayo svg {
fill: none;
stroke: var(--pss-accent);
stroke-width: 1.3;
stroke-linejoin: round;
}
/* ---------- panel de cifras ---------- */
.pss-ticker .pss-wrap {
position: relative;
z-index: 1;
margin-top: clamp(64px, 7.5vw, 108px);
}
.pss-ticker-eyebrow { margin: 0 0 26px; }
.pss-ticker-panel {
transform: translate3d(0, 0, 0);
background:
radial-gradient(90% 120% at 0% 0%, rgba(var(--pss-accent-rgb), .06), rgba(var(--pss-accent-rgb), 0) 55%),
linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%),
var(--pss-surface);
box-shadow: var(--pss-shadow-2);
}
.pss-ticker-panel .pss-edge { opacity: .7; }
.pss-ticker-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pss-ticker-stat {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 28px clamp(22px, 2.3vw, 34px) 34px;
}
.pss-ticker-stat + .pss-ticker-stat { border-left: 1px solid var(--pss-line); }
/* línea verde que se enciende arriba al pasar por la cifra */
.pss-ticker-stat::before {
content: "";
position: absolute;
left: clamp(22px, 2.3vw, 34px);
right: clamp(22px, 2.3vw, 34px);
top: -1px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(var(--pss-accent-hi-rgb), 0), var(--pss-accent-hi) 50%, rgba(var(--pss-accent-hi-rgb), 0));
box-shadow: 0 0 16px rgba(var(--pss-accent-rgb), .8);
transform: scaleX(0);
opacity: 0;
transition: transform .7s var(--pss-ease), opacity .5s var(--pss-ease);
}
.pss-ticker-stat:hover::before { transform: scaleX(1); opacity: 1; }
.pss-ticker-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 26px;
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pss-text3);
font-feature-settings: "zero" 1;
}
.pss-ticker-live {
display: inline-flex;
align-items: center;
gap: 8px;
height: 26px;
padding: 0 10px 0 8px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line);
background: rgba(255, 255, 255, .025);
color: var(--pss-text2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.pss .pss-ticker-ring { width: 16px; height: 16px; overflow: visible; transform: rotate(-90deg); }
.pss-ticker-ring-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.pss-ticker-ring-fg {
fill: none;
stroke: var(--pss-accent);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 0;
transition: stroke-dashoffset .5s linear, stroke .3s;
}
.pss-ticker-live--qr.is-last .pss-ticker-ring-fg { stroke: var(--pss-warn); }
.pss-ticker-secs { min-width: 2ch; text-align: right; color: var(--pss-text); }
.pss-ticker-live-u { margin-left: -4px; text-transform: none; }
.pss-ticker-led {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pss-surface2);
box-shadow: inset 0 0 0 1px var(--pss-line2);
animation: pss-ticker-rele 3s steps(1) infinite;
}
.pss .pss-ticker-live--tablet svg {
width: 14px;
height: 14px;
fill: none;
stroke: var(--pss-accent);
stroke-width: 1.8;
stroke-linecap: round;
}
.pss-ticker-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .55);
animation: pss-pulse 2.2s var(--pss-ease) infinite;
}
.pss-ticker-live--hora span { color: var(--pss-text); }
/* la cifra grande.
Medidas de Oswald 600 (en em): ascendente 1.198, descendente .292; tinta de las cifras .825 sobre la
línea base y .02 bajo ella (.845 en total). La caja de la cifra mide 1em y la tinta queda centrada
(≈.078em de aire arriba y abajo), así la ventana del rodillo no asoma por encima de la línea.
El margen superior suma .11em para conservar la distancia visual que ya tenía. */
.pss-ticker-num {
display: flex;
align-items: flex-end;
gap: .08em;
margin-top: calc(26px + .11em);
font-family: var(--pss-f-display);
font-size: clamp(64px, 6.9vw, 112px);
font-weight: 600;
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
}
.pss-ticker-odo {
position: relative;
display: inline-flex;
align-items: flex-start;
height: 1em;
line-height: .9; /* línea base a .903em: la misma que en los rodillos */
font-variant-numeric: proportional-nums;
background-image: linear-gradient(180deg, #D5F59F 0%, var(--pss-accent-hi) 34%, var(--pss-accent) 70%, var(--pss-accent-lo) 108%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 6px 26px rgba(var(--pss-accent-rgb), .22));
transition: filter var(--pss-d-3) var(--pss-ease);
}
.pss-ticker-stat:hover .pss-ticker-odo { filter: drop-shadow(0 6px 30px rgba(var(--pss-accent-rgb), .5)); }
/* rodillos (los monta script.js). Cada cifra rueda en su ventana de 1em recortada (overflow:clip): los
dígitos vecinos nunca asoman por encima de la línea. Paso entre dígitos 1.12em; la columna sube .11em
extra para centrar la tinta (el centro de la tinta cae .05em bajo el centro de su hueco).
Máscara vertical transparente → #000 14% → #000 86% → transparente. En reposo la capa mide 1.4em y
sus fundidos quedan fuera de la ventana (cifra nítida); mientras rueda se ciñe a 1em
(pss-ticker-foco) y difumina lo que entra y sale. */
.pss-ticker-odo.is-reels { background: none; -webkit-text-fill-color: currentColor; color: var(--pss-accent); }
.pss-ticker-reel {
position: relative;
display: block;
width: var(--pss-odo-wmax, auto);
height: 1em;
overflow: hidden;
overflow: clip;
transition: width var(--pss-odo-dur, .7s) var(--pss-ease) var(--pss-odo-d, 0ms);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
-webkit-mask-size: 100% 1.4em;
mask-size: 100% 1.4em;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.pss-ticker-col {
display: flex;
flex-direction: column;
transform: translate3d(0, -.11em, 0);
transition: transform var(--pss-odo-dur, .7s) var(--pss-ease) var(--pss-odo-d, 0ms);
will-change: transform;
}
.pss-ticker-col > span,
.pss-ticker-glyph {
display: block;
text-align: center;
background-image: linear-gradient(180deg, #D5F59F 0%, var(--pss-accent-hi) 34%, var(--pss-accent) 70%, var(--pss-accent-lo) 108%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.pss-ticker-col > span { height: 1.12em; line-height: 1.12; }
.pss-ticker-glyph { height: 1em; line-height: .9; opacity: .5; }
.pss-ticker-stat.is-on .pss-ticker-col,
.pss-ticker-stats.is-on .pss-ticker-col { transform: translate3d(0, calc(var(--pss-odo-i, 0) * -1.12em - .11em), 0); }
.pss-ticker-stat.is-on .pss-ticker-reel,
.pss-ticker-stats.is-on .pss-ticker-reel {
width: var(--pss-odo-wfin, auto);
animation: pss-ticker-foco var(--pss-odo-dur, .7s) linear var(--pss-odo-d, 0ms);
}
.pss-ticker-medida { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; pointer-events: none; }
/* la unidad comparte línea base con la cifra (.097em sobre el borde inferior) */
.pss-ticker-unit {
margin-bottom: .195em;
font-size: .4em;
font-weight: 500;
line-height: 1;
color: var(--pss-text2);
opacity: 0;
transform: translate3d(-.3em, 0, 0);
transition: opacity .5s var(--pss-ease) var(--pss-unit-d, 420ms), transform .6s var(--pss-ease-out) var(--pss-unit-d, 420ms);
}
.pss-ticker-stat.is-on .pss-ticker-unit,
.pss-ticker-stats.is-on .pss-ticker-unit,
.pss:not(.pss-js) .pss-ticker-unit,
.pss-reduced .pss-ticker-unit { opacity: 1; transform: none; }
.pss-ticker-t {
margin-top: 20px;
font-family: var(--pss-f-body);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--pss-text);
}
/* asterisco: el glifo mide 8×20 px; ::after amplía la zona de toque a 36×44 sin mover nada */
.pss .pss-ticker-ast {
position: relative;
display: inline-block;
margin-left: 2px;
color: var(--pss-accent);
font-weight: 700;
text-decoration: none;
transition: color var(--pss-d-1) var(--pss-ease);
}
.pss .pss-ticker-ast::after {
content: "";
position: absolute;
inset: -12px -14px;
}
.pss .pss-ticker-ast:hover,
.pss .pss-ticker-ast:focus-visible { color: var(--pss-accent-hi); }
.pss-ticker-d {
margin-top: 6px;
font-size: 15px;
line-height: 1.55;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-ticker-nota {
display: flex;
gap: 8px;
margin-top: 20px;
padding-left: 2px;
}
.pss-ticker-nota-ast { color: var(--pss-accent); font-weight: 700; }
/* ---------- fotogramas ---------- */
@keyframes pss-ticker-foco {
0%, 55% { -webkit-mask-size: 100% 1em; mask-size: 100% 1em; }
100% { -webkit-mask-size: 100% 1.4em; mask-size: 100% 1.4em; }
}
@keyframes pss-ticker-rele {
0% { background: var(--pss-accent-hi); box-shadow: inset 0 0 0 1px var(--pss-accent-hi), 0 0 10px 1px rgba(var(--pss-accent-rgb), .9); }
33.4% { background: var(--pss-surface2); box-shadow: inset 0 0 0 1px var(--pss-line2); }
}
/* ---------- tableta ---------- */
@media (max-width: 1023px) {
.pss-ticker-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pss-ticker-stat:nth-child(3) { border-left: 0; }
.pss-ticker-stat:nth-child(n+3) { border-top: 1px solid var(--pss-line); }
}
/* ---------- móvil ---------- */
@media (max-width: 767px) {
.pss-ticker { --pss-tk-fs: clamp(34px, 10.5vw, 48px); padding-top: 40px; }
.pss-ticker-band {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pss-ticker-row--b .pss-ticker-it { -webkit-text-stroke-width: 1.1px; }
.pss-ticker .pss-wrap { margin-top: 64px; }
.pss-ticker-eyebrow { margin-bottom: 20px; }
.pss-ticker-stat { padding: 20px 16px 24px; }
.pss-ticker-stat::before { left: 16px; right: 16px; }
.pss-ticker-meta { height: 24px; font-size: 10.5px; }
.pss-ticker-live { height: 24px; padding: 0 8px 0 7px; gap: 6px; }
.pss-ticker-live--rele { padding-right: 9px; }
.pss-ticker-live--tablet { justify-content: center; width: 24px; padding: 0; }
.pss-ticker-live-t { display: none; }
.pss-ticker-num { margin-top: calc(18px + .11em); font-size: clamp(50px, 15vw, 64px); }
.pss-ticker-t { margin-top: 14px; font-size: 15px; }
.pss-ticker-d { font-size: 13.5px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
.pss-ticker-led,
.pss-ticker-dot { animation: none; }
.pss-ticker-led { background: var(--pss-accent); }
}
/* ===== simulador ===== */
/* =============================================================================
PANTHERA OS · sección simulador («Pruébalo tú»)
Estructura: cabecera · consola (.pss-sim-console) = barra de mando + escena (móvil · sistema · torno) + registro/aforo
Estados en la raíz: .is-busy (secuencia en marcha) · .is-off (sin internet) · .is-alarm (alarma) · .is-used
============================================================================= */
.pss-simulador {
position: relative;
overflow: clip;
}
/* ---------- fondo ---------- */
.pss-sim-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-sim-grid { --pss-grid: 72px; --pss-grid-x: 62%; --pss-grid-y: 58%; opacity: .55; }
.pss-sim-glow1 { --pss-glow-x: 78%; --pss-glow-y: 60%; --pss-glow-size: 900px; opacity: .32; }
.pss-sim-glow2 { --pss-glow-x: 14%; --pss-glow-y: 62%; --pss-glow-size: 620px; opacity: .16; }
.pss-sim-in { position: relative; z-index: 1; }
/* ---------- cabecera ---------- */
.pss-sim-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: clamp(36px, 4.4vw, 60px);
}
.pss .pss-sim-head { margin: 0; }
.pss-sim-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
max-width: 330px;
padding-bottom: 6px;
text-align: right;
}
.pss-sim-meta .pss-nota { text-wrap: pretty; }
/* ---------- consola ---------- */
.pss-sim-console {
position: relative;
padding: 22px 24px 24px;
border-radius: var(--pss-r-xl);
border: 1px solid var(--pss-line2);
background:
radial-gradient(80% 60% at 86% 58%, rgba(var(--pss-accent-rgb), .075), rgba(var(--pss-accent-rgb), 0) 70%),
linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 26%),
rgba(var(--pss-surface-rgb), .62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--pss-shadow-3);
}
.pss-sim-console::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(46% 52% at 84% 64%, #000 0%, transparent 100%);
mask-image: radial-gradient(46% 52% at 84% 64%, #000 0%, transparent 100%);
}
.pss-sim-bar,
.pss-sim-main,
.pss-sim-foot { position: relative; z-index: 1; }
/* ---------- barra de mando ---------- */
.pss-sim-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 20px;
margin-bottom: 26px;
border-bottom: 1px solid var(--pss-line);
}
.pss-sim-esc { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.pss .pss-sim-chip {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 58px;
padding: 0 16px 0 9px;
border: 1px solid var(--pss-line);
border-radius: 16px;
background: rgba(255, 255, 255, .02);
color: var(--pss-text);
text-align: left;
cursor: pointer;
transition:
border-color var(--pss-d-2) var(--pss-ease),
background-color var(--pss-d-2) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
transform var(--pss-d-2) var(--pss-ease),
opacity var(--pss-d-2) var(--pss-ease);
}
.pss .pss-sim-chip:hover {
color: var(--pss-text);
border-color: var(--pss-line3);
background: rgba(255, 255, 255, .045);
transform: translateY(-1px);
}
.pss .pss-sim-chip:active { transform: translateY(0) scale(.985); }
.pss .pss-sim-chip:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss .pss-sim-chip[aria-checked="true"] {
border-color: rgba(var(--pss-accent-rgb), .6);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .12), rgba(var(--pss-accent-rgb), .04));
box-shadow: 0 0 0 4px rgba(var(--pss-accent-rgb), .08), 0 14px 30px -18px rgba(var(--pss-accent-rgb), .7);
}
.pss .pss-sim-chip[aria-disabled="true"] { cursor: default; }
.pss .pss-sim-chip[aria-disabled="true"]:not([aria-checked="true"]) { color: var(--pss-text3); }
.pss-sim-chip[aria-disabled="true"]:not([aria-checked="true"]) .pss-sim-av,
.pss-sim-chip[aria-disabled="true"]:not([aria-checked="true"]) small { color: var(--pss-text3); }
.pss .pss-sim-chip[aria-disabled="true"]:hover { transform: none; }
.pss-sim-av {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: linear-gradient(150deg, var(--pss-surface2), var(--pss-bg));
font-family: var(--pss-f-display);
font-size: 17px;
font-weight: 600;
line-height: 1;
color: var(--pss-text);
transition: border-color var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), color var(--pss-d-2) var(--pss-ease);
}
.pss-sim-av svg { width: 19px; height: 19px; }
.pss-sim-chip[aria-checked="true"] .pss-sim-av {
border-color: var(--pss-accent);
color: var(--pss-accent-hi);
box-shadow: 0 0 0 3px rgba(var(--pss-accent-rgb), .16), 0 0 18px rgba(var(--pss-accent-rgb), .35);
}
.pss-sim-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pss-sim-chip-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pss-sim-chip-txt small {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
line-height: 1.2;
color: var(--pss-text2);
white-space: nowrap;
}
.pss-sim-chip-txt small i {
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 8px rgba(var(--pss-accent-rgb), .8);
}
.pss-sim-chip[data-tono="ko"] small i { background: var(--pss-danger); box-shadow: 0 0 8px rgba(var(--pss-danger-rgb), .8); }
.pss-sim-chip[data-tono="warn"] small i { background: var(--pss-warn); box-shadow: 0 0 8px rgba(var(--pss-warn-rgb), .8); }
.pss-sim-chip-ok {
position: absolute;
top: -7px;
right: -7px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--pss-accent);
color: var(--pss-on-accent);
box-shadow: 0 0 0 3px var(--pss-surface), 0 0 14px rgba(var(--pss-accent-rgb), .6);
opacity: 0;
transform: scale(.4);
transition: opacity var(--pss-d-2) var(--pss-ease), transform .45s var(--pss-ease-spring);
}
.pss-sim-chip-ok svg { width: 11px; height: 11px; }
.pss-sim-chip[aria-checked="true"] .pss-sim-chip-ok { opacity: 1; transform: none; }
.pss-sim-ctrl { display: flex; gap: 10px; flex: none; }
.pss .pss-sim-tog {
display: inline-flex;
align-items: center;
gap: 10px;
height: 58px;
padding: 0 14px 0 11px;
border: 1px solid var(--pss-line);
border-radius: 16px;
background: rgba(255, 255, 255, .02);
color: var(--pss-text);
font-size: 14px;
font-weight: 600;
line-height: 1.15;
text-align: left;
cursor: pointer;
transition:
border-color var(--pss-d-2) var(--pss-ease),
background-color var(--pss-d-2) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
color var(--pss-d-2) var(--pss-ease),
opacity var(--pss-d-2) var(--pss-ease),
transform var(--pss-d-1) var(--pss-ease);
}
.pss .pss-sim-tog:hover { color: var(--pss-text); border-color: var(--pss-line3); background: rgba(255, 255, 255, .045); }
.pss .pss-sim-tog:active { transform: scale(.98); }
.pss .pss-sim-tog:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss .pss-sim-tog[aria-disabled="true"],
.pss .pss-sim-tog[aria-disabled="true"]:hover { color: var(--pss-text3); border-color: var(--pss-line); background: rgba(255, 255, 255, .02); cursor: default; }
.pss-sim-tog[aria-disabled="true"] .pss-sim-tog-ico { color: var(--pss-text3); background: rgba(255, 255, 255, .03); }
.pss-sim-tog[aria-disabled="true"] .pss-sim-sw i { background: var(--pss-text3); }
.pss-sim-tog-ico {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, .05);
color: var(--pss-text2);
transition: background-color var(--pss-d-2) var(--pss-ease), color var(--pss-d-2) var(--pss-ease);
}
.pss-sim-tog-ico svg { width: 19px; height: 19px; overflow: visible; }
.pss-sim-wifi-x { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset .45s var(--pss-ease); }
.pss-sim-sw {
position: relative;
flex: none;
width: 40px;
height: 24px;
margin-left: 4px;
border-radius: 99px;
background: rgba(255, 255, 255, .1);
box-shadow: inset 0 0 0 1px var(--pss-line2);
transition: background-color var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-2) var(--pss-ease);
}
.pss-sim-sw i {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--pss-text);
box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
transition: transform .42s var(--pss-ease-spring);
}
.pss .pss-sim-net[aria-checked="true"] { border-color: rgba(var(--pss-warn-rgb), .5); background: rgba(var(--pss-warn-rgb), .07); }
.pss-sim-net[aria-checked="true"] .pss-sim-tog-ico { background: rgba(var(--pss-warn-rgb), .14); color: var(--pss-warn); }
.pss-sim-net[aria-checked="true"] .pss-sim-wifi { opacity: .45; }
.pss-sim-net[aria-checked="true"] .pss-sim-wifi-x { stroke-dashoffset: 0; }
.pss-sim-net[aria-checked="true"] .pss-sim-sw { background: var(--pss-warn); box-shadow: inset 0 0 0 1px rgba(var(--pss-warn-rgb), .6), 0 0 16px rgba(var(--pss-warn-rgb), .35); }
.pss-sim-net[aria-checked="true"] .pss-sim-sw i { transform: translateX(16px); background: var(--pss-on-accent); }
.pss-sim-alarm .pss-sim-tog-ico { color: var(--pss-warn); background: rgba(var(--pss-warn-rgb), .1); }
.pss .pss-sim-alarm:hover { border-color: rgba(var(--pss-warn-rgb), .5); background: rgba(var(--pss-warn-rgb), .06); }
.pss .pss-sim-alarm[aria-pressed="true"],
.pss .pss-sim-alarm[aria-pressed="true"]:hover {
border-color: var(--pss-warn);
background: var(--pss-warn);
color: var(--pss-on-accent);
box-shadow: 0 0 0 5px rgba(var(--pss-warn-rgb), .14), 0 14px 34px -14px rgba(var(--pss-warn-rgb), .8);
}
.pss-sim-alarm[aria-pressed="true"] .pss-sim-tog-ico { background: rgba(var(--pss-bg-rgb), .16); color: var(--pss-on-accent); }
/* ---------- escena: rejilla ---------- */
.pss-sim-main {
display: grid;
grid-template-columns: 272px minmax(0, 1fr) minmax(0, 404px);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
"phone sys msg"
"phone sys torno"
"act sys torno";
column-gap: 34px;
row-gap: 18px;
}
.pss-sim-col--phone,
.pss-sim-col--torno { display: contents; }
.pss-sim-phonewrap { grid-area: phone; }
.pss-sim-act { grid-area: act; }
.pss-sim-col--sys { grid-area: sys; }
.pss-sim-msg { grid-area: msg; }
.pss-sim-torno { grid-area: torno; }
/* ---------- móvil ---------- */
.pss-sim-phonewrap {
position: relative;
display: flex;
justify-content: center;
align-self: start;
padding-top: 4px;
transition: transform .75s var(--pss-ease);
}
.pss-sim-phone {
--pss-phone-w: 234px;
transform: perspective(1400px) rotateY(9deg) rotateX(2deg);
transition: transform .75s var(--pss-ease);
}
.pss-sim-phonewrap.is-near { transform: translate3d(22px, -8px, 0); }
.pss-sim-phonewrap.is-near .pss-sim-phone { transform: perspective(1400px) rotateY(20deg) rotateX(3deg) rotateZ(1.5deg); }
.pss .pss-sim-pshadow { left: 50%; bottom: -18px; width: 80%; height: 40px; }
.pss-sim-qr { margin-top: .1em; }
/* pantallazo de flash al hacer la captura */
.pss .pss-sim-phone .pss-phone-screen.is-flash::after {
content: "";
position: absolute;
inset: 0;
z-index: 7;
background: var(--pss-text);
pointer-events: none;
animation: pss-sim-flashscr .55s var(--pss-ease) forwards;
}
/* visor de fotos con la captura */
.pss-sim-shot {
position: absolute;
inset: 2.67em 0 0;
z-index: 6;
display: flex;
flex-direction: column;
background: var(--pss-bg);
opacity: 0;
visibility: hidden;
transition: opacity .35s var(--pss-ease), visibility 0s linear .35s;
}
.pss-sim-shot.is-on { opacity: 1; visibility: visible; transition: opacity .25s var(--pss-ease), visibility 0s; }
.pss-sim-shot-nav {
flex: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 2.9em;
padding: 0 1em;
color: var(--pss-text);
}
.pss-sim-shot-nav svg { position: absolute; left: .7em; top: 50%; width: 1.3em; height: 1.3em; transform: translateY(-50%); color: var(--pss-accent-hi); }
.pss-sim-shot-t { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.pss-sim-shot-t b { font-size: .74em; font-weight: 600; }
.pss-sim-shot-t small { font-size: .58em; color: var(--pss-text3); }
.pss-sim-shot-img { position: relative; flex: 1 1 auto; min-height: 0; }
.pss-sim-shot-frame {
position: absolute;
left: 50%;
top: 50%;
border-radius: 2.4em;
overflow: hidden;
background: var(--pss-bg);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 1.4em 3em -1em rgba(0, 0, 0, .9);
transform: translate(-50%, -50%) scale(var(--pss-sim-k, .7));
}
.pss-sim-shot.is-on .pss-sim-shot-frame { animation: pss-sim-shotin .75s var(--pss-ease-out) both; }
.pss-sim-shot-frame .pss-appui { pointer-events: none; }
.pss-sim-shot-tools {
flex: none;
display: flex;
align-items: center;
justify-content: space-around;
height: 3.2em;
padding: 0 1.4em 1.4em;
color: var(--pss-accent-hi);
}
.pss-sim-shot-tools svg { width: 1.25em; height: 1.25em; }
/* aviso dentro de la app (el motivo lo ve el socio en su móvil) */
.pss-sim-toast {
position: absolute;
left: .85em;
right: .85em;
bottom: 5.1em;
z-index: 7;
display: flex;
align-items: center;
gap: .65em;
padding: .7em .8em;
border-radius: 1.1em;
border: 1px solid var(--pss-line2);
background: rgba(var(--pss-surface-rgb), .94);
box-shadow: 0 1em 2em -.8em rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
opacity: 0;
transform: translateY(1.2em) scale(.96);
pointer-events: none;
transition: opacity .35s var(--pss-ease), transform .5s var(--pss-ease);
}
.pss-sim-toast.is-on { opacity: 1; transform: none; transition: opacity .3s var(--pss-ease), transform .6s var(--pss-ease-spring); }
.pss-sim-toast-ico {
flex: none;
display: grid;
place-items: center;
width: 2.1em;
height: 2.1em;
border-radius: 50%;
background: var(--pss-accent);
color: var(--pss-on-accent);
}
.pss-sim-toast-ico svg { width: 1.1em; height: 1.1em; }
.pss-sim-toast[data-t="ko"] .pss-sim-toast-ico { background: var(--pss-danger); color: var(--pss-on-accent); }
.pss-sim-toast[data-t="warn"] .pss-sim-toast-ico { background: var(--pss-warn); color: var(--pss-on-accent); }
.pss-sim-toast-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pss-sim-toast-txt b { font-size: .74em; font-weight: 700; }
.pss-sim-toast-txt small { font-size: .62em; color: var(--pss-text2); }
/* botón principal */
.pss-sim-act { display: flex; flex-direction: column; align-items: stretch; gap: 12px; align-self: end; }
.pss .pss-sim-go { gap: 12px; }
.pss .pss-sim-go-ico { width: 20px; height: 20px; }
.pss .pss-sim-go.is-busy[aria-disabled="true"] { opacity: 1; }
.pss .pss-sim-go.is-busy .pss-sim-go-ico { animation: pss-sim-pulse-ico 1s var(--pss-ease-io) infinite; }
.pss-simulador:not(.is-used) .pss-sim-go:not([aria-disabled="true"]) { animation: pss-sim-call 2.6s var(--pss-ease) 1.2s infinite; }
.pss-sim-hint { font-size: 12.5px; line-height: 1.45; color: var(--pss-text3); text-align: center; text-wrap: balance; }
/* ---------- columna del sistema: servidor · enlace · puente ---------- */
.pss-sim-col--sys { display: flex; flex-direction: column; min-width: 0; }
.pss-sim-node {
position: relative;
border-radius: 20px;
border: 1px solid var(--pss-line);
background: var(--pss-surface);
box-shadow: var(--pss-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .06);
transition: opacity .5s var(--pss-ease), filter .5s var(--pss-ease), border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease);
}
.pss-sim-node > .pss-edge { opacity: 0; transition: opacity .4s var(--pss-ease); animation-play-state: paused; }
.pss-sim-node.is-busy > .pss-edge { opacity: 1; animation-play-state: running; animation-duration: 2.2s; }
.pss-sim-node.is-busy { border-color: rgba(var(--pss-accent-rgb), .3); box-shadow: var(--pss-shadow-2), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 4px rgba(var(--pss-accent-rgb), .05); }
.pss-sim-node-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.pss-sim-node-ico {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
border: 1px solid rgba(var(--pss-accent-rgb), .28);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
}
.pss-sim-node-ico svg { width: 20px; height: 20px; }
.pss-sim-node-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pss-sim-node-t b { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--pss-text); }
.pss-sim-node-t small { font-size: 12.5px; line-height: 1.3; color: var(--pss-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-sim-state {
--pss-sim-st: var(--pss-accent-rgb);
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
height: 26px;
margin-left: auto;
padding: 0 10px 0 9px;
border-radius: 99px;
border: 1px solid rgba(var(--pss-sim-st), .3);
background: rgba(var(--pss-sim-st), .08);
color: rgb(var(--pss-sim-st));
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
transition: color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease), background-color var(--pss-d-2) var(--pss-ease);
}
.pss-sim-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pss-sim-state[data-t="run"] { --pss-sim-st: var(--pss-accent-hi-rgb); }
.pss-sim-state[data-t="run"] i { animation: pss-sim-blink .7s steps(2) infinite; }
.pss-sim-state[data-t="ko"] { --pss-sim-st: var(--pss-danger-rgb); }
.pss-sim-state[data-t="warn"] { --pss-sim-st: var(--pss-warn-rgb); }
/* plegado suave (servidor ↔ puente) */
.pss-sim-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .65s var(--pss-ease), opacity .45s var(--pss-ease); }
.pss-sim-fold-in { min-height: 0; overflow: hidden; }
.pss-sim-pte-fold { grid-template-rows: 0fr; opacity: 0; }
.pss-simulador.is-off .pss-sim-srv-fold { grid-template-rows: 0fr; opacity: 0; }
.pss-simulador.is-off .pss-sim-pte-fold { grid-template-rows: 1fr; opacity: 1; }
.pss-simulador.is-off .pss-sim-srv { opacity: .5; filter: grayscale(.9); }
.pss-simulador.is-off .pss-sim-pte { border-color: rgba(var(--pss-warn-rgb), .3); }
.pss-sim-panel { padding: 0 10px 12px; }
.pss-sim-srv-panel { border-top: 1px solid var(--pss-line); padding-top: 8px; }
.pss-sim-pte-panel { border-top: 1px solid var(--pss-line); padding-top: 8px; }
/* comprobaciones */
.pss-sim-checks { display: flex; flex-direction: column; gap: 2px; }
.pss-sim-ck {
position: relative;
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 50px;
padding: 7px 10px;
border-radius: 12px;
overflow: hidden;
transition: background-color .35s var(--pss-ease), opacity .35s var(--pss-ease);
}
.pss-sim-ck::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(var(--pss-accent-rgb), 0), rgba(var(--pss-accent-rgb), .14) 50%, rgba(var(--pss-accent-rgb), 0));
transform: translateX(-100%);
opacity: 0;
pointer-events: none;
}
.pss-sim-ck[data-st="run"] { background: rgba(var(--pss-accent-rgb), .05); }
.pss-sim-ck[data-st="run"]::after { opacity: 1; animation: pss-sim-sweep .8s var(--pss-ease-io) infinite; }
.pss-sim-ck[data-st="ok"] { background: rgba(var(--pss-accent-rgb), .04); }
.pss-sim-ck[data-st="ko"] { background: rgba(var(--pss-danger-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--pss-danger-rgb), .28); }
.pss-sim-ck[data-st="skip"] { opacity: .38; }
.pss-sim-ck-ico { position: relative; width: 26px; height: 26px; }
.pss-sim-ck-ico svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pss-sim-ck-ring { stroke: var(--pss-line2); stroke-width: 1.6; transition: stroke .3s var(--pss-ease), fill .3s var(--pss-ease); }
.pss-sim-ck-spin { stroke: var(--pss-accent-hi); stroke-width: 2.2; stroke-dasharray: 16 60; opacity: 0; transform-origin: 12px 12px; }
.pss-sim-ck-ok,
.pss-sim-ck-ko { stroke-width: 2.4; stroke-dasharray: 20; stroke-dashoffset: 20; }
.pss-sim-ck-ok { stroke: var(--pss-on-accent); }
.pss-sim-ck-ko { stroke: var(--pss-text); }
.pss-sim-ck-skip { stroke: var(--pss-text3); stroke-width: 2; opacity: 0; }
.pss-sim-ck[data-st="run"] .pss-sim-ck-spin { opacity: 1; animation: pss-spin .7s linear infinite; }
.pss-sim-ck[data-st="ok"] .pss-sim-ck-ring { fill: var(--pss-accent); stroke: var(--pss-accent-hi); filter: drop-shadow(0 0 5px rgba(var(--pss-accent-rgb), .7)); }
.pss-sim-ck[data-st="ok"] .pss-sim-ck-ok { stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--pss-ease) .06s; }
.pss-sim-ck[data-st="ko"] .pss-sim-ck-ring { fill: var(--pss-danger); stroke: var(--pss-danger); filter: drop-shadow(0 0 6px rgba(var(--pss-danger-rgb), .7)); }
.pss-sim-ck[data-st="ko"] .pss-sim-ck-ko { stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--pss-ease) .06s; }
.pss-sim-ck[data-st="skip"] .pss-sim-ck-skip { opacity: 1; }
.pss-sim-ck[data-st="ok"] .pss-sim-ck-ico,
.pss-sim-ck[data-st="ko"] .pss-sim-ck-ico { animation: pss-sim-pop .45s var(--pss-ease-spring); }
.pss-sim-ck-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pss-sim-ck-txt b { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--pss-text); }
/* el subtítulo baja de línea en vez de cortarse («Firma comprobada en el puente · caduca en 7 s» no cabe por debajo de ~1300 px) */
.pss-sim-ck-txt small { font-size: 12.5px; line-height: 1.3; color: var(--pss-text3); transition: color .3s var(--pss-ease); }
.pss-sim-ck[data-st="ok"] small { color: var(--pss-text2); }
.pss-sim-ck[data-st="ko"] small { color: var(--pss-danger); }
.pss-simulador .pss-sim-ck[data-ck="horario"][data-st="ko"] { background: rgba(var(--pss-warn-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--pss-warn-rgb), .3); }
.pss-simulador .pss-sim-ck[data-ck="horario"][data-st="ko"] .pss-sim-ck-ring { fill: var(--pss-warn); stroke: var(--pss-warn); filter: drop-shadow(0 0 6px rgba(var(--pss-warn-rgb), .7)); }
.pss-simulador .pss-sim-ck[data-ck="horario"][data-st="ko"] .pss-sim-ck-ko { stroke: var(--pss-on-accent); }
.pss-simulador .pss-sim-ck[data-ck="horario"][data-st="ko"] small { color: var(--pss-warn); }
.pss-sim-ck-ms {
min-width: 44px;
font-family: var(--pss-f-mono);
font-size: 12px;
font-feature-settings: "zero" 1;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--pss-text3);
}
.pss-sim-ck[data-st="ok"] .pss-sim-ck-ms { color: var(--pss-accent-hi); }
.pss-sim-ck[data-st="ko"] .pss-sim-ck-ms { color: var(--pss-danger); }
.pss-sim-dec {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
margin: 8px 0 0;
padding: 11px 10px 2px;
border-top: 1px dashed var(--pss-line2);
}
.pss-sim-dec-l { font-family: var(--pss-f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pss-text3); }
.pss-sim-dec-v {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: 99px;
border: 1px solid var(--pss-line2);
font-size: 13px;
font-weight: 600;
color: var(--pss-text3);
white-space: nowrap;
}
.pss-sim-dec-ms { margin-left: auto; font-family: var(--pss-f-mono); font-size: 12px; font-feature-settings: "zero" 1; color: var(--pss-text2); white-space: nowrap; }
.pss-sim-dec[data-st="ok"] .pss-sim-dec-v { background: var(--pss-accent); border-color: var(--pss-accent-hi); color: var(--pss-on-accent); box-shadow: 0 0 22px -4px rgba(var(--pss-accent-rgb), .8); }
.pss-sim-dec[data-st="ko"] .pss-sim-dec-v { background: rgba(var(--pss-danger-rgb), .12); border-color: rgba(var(--pss-danger-rgb), .55); color: var(--pss-danger); }
/* enlace servidor ↔ puente */
.pss-sim-link {
position: relative;
flex: none;
height: 40px;
margin-left: 35px;
}
.pss-sim-link-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .55), rgba(var(--pss-accent-rgb), .25));
transition: opacity .4s var(--pss-ease);
}
.pss-sim-link-pk {
position: absolute;
left: 50%;
top: 100%;
width: 8px;
height: 14px;
margin: -7px 0 0 -4px;
border-radius: 4px;
background: var(--pss-accent-hi);
box-shadow: 0 0 12px 2px rgba(var(--pss-accent-hi-rgb), .9);
opacity: 0;
}
.pss-sim-link-t {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-family: var(--pss-f-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text3);
white-space: nowrap;
transition: opacity .3s var(--pss-ease);
}
.pss-sim-link-x {
position: absolute;
left: -13px;
top: 50%;
display: inline-flex;
align-items: center;
gap: 10px;
transform: translateY(-50%) scale(.6);
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-danger);
white-space: nowrap;
opacity: 0;
transition: opacity .3s var(--pss-ease), transform .45s var(--pss-ease-spring);
}
.pss-sim-link-x svg {
width: 26px;
height: 26px;
padding: 6px;
border-radius: 50%;
border: 1px solid rgba(var(--pss-danger-rgb), .5);
background: var(--pss-surface);
box-shadow: 0 0 14px rgba(var(--pss-danger-rgb), .35);
}
.pss-simulador.is-off .pss-sim-link-line { background: repeating-linear-gradient(180deg, rgba(var(--pss-danger-rgb), .55) 0 4px, transparent 4px 9px); }
.pss-simulador.is-off .pss-sim-link-t { opacity: 0; }
.pss-simulador.is-off .pss-sim-link-x { opacity: 1; transform: translateY(-50%); }
/* relé */
.pss-sim-relay {
position: relative;
display: grid;
grid-template-columns: 62px auto minmax(40px, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 16px 14px;
border-top: 1px solid var(--pss-line);
}
.pss-sim-relay-svg { width: 62px; height: 31px; overflow: visible; }
.pss-sim-relay-box { fill: var(--pss-bg); stroke: var(--pss-line2); stroke-width: 1.2; }
.pss-sim-relay-pin { fill: var(--pss-text3); }
.pss-sim-relay-arm {
stroke: var(--pss-text2);
stroke-width: 3;
stroke-linecap: round;
transform-origin: 16px 22px;
transform: rotate(0deg);
transition: transform .14s cubic-bezier(.5, 0, .5, 1.6), stroke .2s;
}
.pss-sim-relay-led { fill: var(--pss-text3); transition: fill .15s, filter .15s; }
.pss-sim-relay[data-st="closed"] .pss-sim-relay-arm { transform: rotate(18deg); stroke: var(--pss-accent-hi); }
.pss-sim-relay[data-st="closed"] .pss-sim-relay-no { fill: var(--pss-accent-hi); }
.pss-sim-relay[data-st="closed"] .pss-sim-relay-led { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 4px rgba(var(--pss-accent-hi-rgb), 1)); }
.pss-sim-relay-t { display: flex; flex-direction: column; line-height: 1.25; }
.pss-sim-relay-t b { font-size: 14px; font-weight: 600; }
.pss-sim-relay-t small { font-family: var(--pss-f-mono); font-size: 11px; color: var(--pss-text3); white-space: nowrap; transition: color .2s; }
.pss-sim-relay[data-st="closed"] .pss-sim-relay-t small { color: var(--pss-accent-hi); }
.pss-sim-relay-bar { position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pss-sim-relay-bar i {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent-hi));
box-shadow: 0 0 10px rgba(var(--pss-accent-rgb), .9);
transform: scaleX(0);
transform-origin: left center;
}
.pss-sim-relay-1s { font-family: var(--pss-f-mono); font-size: 11.5px; color: var(--pss-text3); }
.pss-sim-clic {
position: absolute;
left: 39px;
top: 6px;
padding: 2px 7px;
border-radius: 6px;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0;
transform: translate(-50%, 0);
pointer-events: none;
}
/* emergencia sobre el sistema */
.pss-simulador.is-alarm .pss-sim-srv,
.pss-simulador.is-alarm .pss-sim-link { opacity: .4; filter: grayscale(1); }
.pss-simulador.is-alarm .pss-sim-pte { border-color: rgba(var(--pss-warn-rgb), .45); }
/* ---------- mensaje del torno ---------- */
.pss-sim-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 172px; }
.pss-sim-msg-k {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-sim-msg-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.pss-sim-msg-t {
font-family: var(--pss-f-display);
font-weight: 700;
font-size: clamp(34px, 3.2vw, 46px);
line-height: .98;
letter-spacing: -.004em;
text-transform: uppercase;
color: var(--pss-text2);
text-wrap: balance;
transition: color .3s var(--pss-ease), text-shadow .5s var(--pss-ease);
}
.pss-sim-msg-s { font-size: 14.5px; line-height: 1.5; color: var(--pss-text2); max-width: 40ch; text-wrap: pretty; }
.pss-sim-msg-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(var(--pss-warn-rgb), .35);
background: rgba(var(--pss-warn-rgb), .08);
color: var(--pss-warn);
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
}
.pss-sim-msg-d {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 2px;
font-family: var(--pss-f-mono);
font-size: 12.5px;
}
.pss-sim-msg-d span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pss-text3); }
.pss-sim-msg-d b {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 10px;
border-radius: 7px;
border: 1px solid var(--pss-line2);
background: var(--pss-bg);
color: var(--pss-text2);
font-weight: 600;
letter-spacing: .02em;
box-shadow: inset 0 0 12px rgba(0, 0, 0, .6);
}
.pss-sim-msg[data-st="run"] .pss-sim-msg-t { color: var(--pss-text); }
.pss-sim-msg[data-st="run"] .pss-sim-msg-k { color: var(--pss-accent-hi); }
.pss-sim-msg[data-st="ok"] .pss-sim-msg-t { color: var(--pss-accent-hi); text-shadow: 0 0 34px rgba(var(--pss-accent-rgb), .5); }
.pss-sim-msg[data-st="ok"] .pss-sim-msg-k,
.pss-sim-msg[data-st="ok"] .pss-sim-msg-d b { color: var(--pss-accent-hi); }
.pss-sim-msg[data-st="ok"] .pss-sim-msg-d b { border-color: rgba(var(--pss-accent-rgb), .45); }
.pss-sim-msg[data-st="ko"] .pss-sim-msg-t { color: var(--pss-danger); text-shadow: 0 0 34px rgba(var(--pss-danger-rgb), .35); }
.pss-sim-msg[data-st="ko"] .pss-sim-msg-k,
.pss-sim-msg[data-st="ko"] .pss-sim-msg-d b { color: var(--pss-danger); }
.pss-sim-msg[data-st="ko"] .pss-sim-msg-d b { border-color: rgba(var(--pss-danger-rgb), .45); }
.pss-sim-msg[data-st="alarm"] .pss-sim-msg-t { color: var(--pss-warn); text-shadow: 0 0 34px rgba(var(--pss-warn-rgb), .4); }
.pss-sim-msg[data-st="alarm"] .pss-sim-msg-k,
.pss-sim-msg[data-st="alarm"] .pss-sim-msg-d b { color: var(--pss-warn); }
.pss-sim-msg[data-st="alarm"] .pss-sim-msg-d b { border-color: rgba(var(--pss-warn-rgb), .45); }
.pss-sim-msg.is-in .pss-sim-msg-t { animation: pss-sim-msgin .6s var(--pss-ease-out) both; }
.pss-sim-msg.is-in .pss-sim-msg-s,
.pss-sim-msg.is-in .pss-sim-msg-tag,
.pss-sim-msg.is-in .pss-sim-msg-d { animation: pss-sim-msgin .6s var(--pss-ease-out) .08s both; }
.pss .pss-sim-rearm {
margin-top: 4px;
background: var(--pss-warn);
border-color: var(--pss-warn);
color: var(--pss-on-accent);
}
.pss .pss-sim-rearm:hover,
.pss .pss-sim-rearm:focus { background: var(--pss-text); border-color: var(--pss-text); color: var(--pss-on-accent); }
/* ---------- torno ---------- */
.pss-sim-torno { position: relative; align-self: end; min-width: 0; }
.pss .pss-sim-tsvg {
--pss-sim-rgb: 164, 171, 179;
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.pss .pss-sim-tsvg--top { position: absolute; left: 0; top: 0; pointer-events: none; }
.pss .pss-sim-tsvg[data-led="read"] { --pss-sim-rgb: var(--pss-accent-hi-rgb); }
.pss .pss-sim-tsvg[data-led="ok"] { --pss-sim-rgb: var(--pss-accent-hi-rgb); }
.pss .pss-sim-tsvg[data-led="ko"] { --pss-sim-rgb: var(--pss-danger-rgb); }
.pss .pss-sim-tsvg[data-led="warn"] { --pss-sim-rgb: var(--pss-warn-rgb); }
.pss-sim-st-a { stop-color: var(--pss-surface2); }
.pss-sim-st-b { stop-color: var(--pss-bg2); }
.pss-sim-st-c { stop-color: var(--pss-surface2); }
.pss-sim-st-d { stop-color: var(--pss-bg); }
.pss-sim-st-e { stop-color: var(--pss-text3); }
.pss-sim-st-f { stop-color: var(--pss-text); }
.pss-sim-st-g { stop-color: var(--pss-text2); }
.pss-sim-st-h { stop-color: var(--pss-text3); }
.pss-sim-st-led { stop-color: rgb(var(--pss-sim-rgb)); stop-opacity: .55; }
.pss-sim-st-led0 { stop-color: rgb(var(--pss-sim-rgb)); stop-opacity: 0; }
.pss-sim-t-suelo { fill: url(#pss-sim-g-suelo); opacity: .35; transition: opacity .5s var(--pss-ease); }
.pss-sim-tsvg[data-led="ok"] .pss-sim-t-suelo,
.pss-sim-tsvg[data-led="ko"] .pss-sim-t-suelo,
.pss-sim-tsvg[data-led="warn"] .pss-sim-t-suelo { opacity: 1; }
.pss-sim-t-sombra { fill: rgba(0, 0, 0, .75); }
.pss-sim-t-carril { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.2; stroke-dasharray: 5 8; }
.pss-sim-t-carril--b { stroke: rgba(255, 255, 255, .06); }
.pss-sim-t-chev {
fill: none;
stroke: rgba(255, 255, 255, .1);
opacity: 0;
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .4s var(--pss-ease);
}
.pss-sim-tsvg[data-led="ok"] .pss-sim-t-chev { stroke: var(--pss-accent-hi); animation: pss-sim-chev 1.1s var(--pss-ease) calc(var(--pss-sim-i) * 130ms) both; }
.pss-sim-t-logo { opacity: .2; transition: opacity .6s var(--pss-ease); }
.pss-sim-tsvg[data-led="ok"] .pss-sim-t-logo { opacity: .34; }
.pss-sim-tsvg[data-led="warn"] .pss-sim-t-chev { stroke: rgba(var(--pss-warn-rgb), .75); animation: pss-sim-blinkw 1s steps(2) infinite; }
.pss-sim-t-izq { fill: url(#pss-sim-g-izq); stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.pss-sim-t-fre { fill: url(#pss-sim-g-fre); stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.pss-sim-t-zocalo { fill: var(--pss-bg); }
.pss-sim-t-zocalo--f { fill: var(--pss-bg); }
.pss-sim-t-ranura { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6; }
.pss-sim-t-tapa { fill: url(#pss-sim-g-tapa); }
.pss-sim-t-canto { fill: var(--pss-text3); }
.pss-sim-t-canto--f { fill: var(--pss-text2); }
.pss-sim-t-arista { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.pss-sim-t-tira { fill: none; stroke: rgb(var(--pss-sim-rgb)); stroke-width: 3; stroke-linecap: round; opacity: .55; transition: opacity .3s var(--pss-ease); }
.pss-sim-t-tira-g { fill: none; stroke: rgb(var(--pss-sim-rgb)); stroke-width: 9; stroke-linecap: round; opacity: .18; transition: opacity .3s var(--pss-ease); }
.pss-sim-tsvg:not([data-led="idle"]) .pss-sim-t-tira { opacity: 1; }
.pss-sim-tsvg:not([data-led="idle"]) .pss-sim-t-tira-g { opacity: .85; }
.pss-sim-tsvg[data-led="read"] .pss-sim-t-tira,
.pss-sim-tsvg[data-led="read"] .pss-sim-t-tira-g { animation: pss-sim-breath .8s var(--pss-ease-io) infinite; }
.pss-sim-tsvg[data-led="warn"] .pss-sim-t-tira,
.pss-sim-tsvg[data-led="warn"] .pss-sim-t-tira-g { animation: pss-sim-blinkw 1s steps(2) infinite; }
.pss-sim-t-pant { fill: var(--pss-bg); stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.pss-sim-t-pic {
fill: none;
stroke: rgb(var(--pss-sim-rgb));
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
filter: drop-shadow(0 0 3px rgba(var(--pss-sim-rgb), .9));
transition: opacity .25s var(--pss-ease);
}
.pss-sim-tsvg[data-led="idle"] .pss-sim-t-pic--idle,
.pss-sim-tsvg[data-led="read"] .pss-sim-t-pic--idle,
.pss-sim-tsvg[data-led="ok"] .pss-sim-t-pic--ok,
.pss-sim-tsvg[data-led="ko"] .pss-sim-t-pic--ko,
.pss-sim-tsvg[data-led="warn"] .pss-sim-t-pic--warn { opacity: 1; }
.pss-sim-t-lec-l { fill: var(--pss-bg); }
.pss-sim-t-lec-f { fill: var(--pss-surface2); }
.pss-sim-t-lec-t { fill: var(--pss-bg); stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.pss-sim-t-lec-v { fill: rgba(var(--pss-accent-rgb), .1); stroke: rgba(var(--pss-accent-rgb), .55); stroke-width: 1; }
.pss-sim-t-lec-scan { fill: none; stroke: var(--pss-accent-hi); stroke-width: 1.4; stroke-linecap: round; animation: pss-sim-breath 2.4s var(--pss-ease-io) infinite; }
.pss-sim-t-lec-flash { fill: var(--pss-accent-hi); opacity: 0; }
.pss-sim-tsvg.is-read .pss-sim-t-lec-flash { animation: pss-sim-flash .9s var(--pss-ease) both; }
.pss-sim-tsvg.is-read .pss-sim-t-lec-v { fill: rgba(var(--pss-accent-hi-rgb), .45); }
.pss-sim-t-rotor { fill: url(#pss-sim-g-rotor); stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.pss-sim-t-aro { fill: none; stroke: rgb(var(--pss-sim-rgb)); stroke-width: 2.4; opacity: .6; filter: drop-shadow(0 0 4px rgba(var(--pss-sim-rgb), .9)); transition: opacity .3s var(--pss-ease); }
.pss-sim-tsvg:not([data-led="idle"]) .pss-sim-t-aro { opacity: 1; }
.pss-sim-t-tapon { fill: var(--pss-surface2); stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.pss-sim-t-pernos circle { fill: var(--pss-text3); }
.pss-sim-t-b-sh { fill: none; stroke: rgba(0, 0, 0, .6); stroke-linecap: round; }
.pss-sim-t-b-bd { fill: none; stroke: var(--pss-text2); stroke-linecap: round; }
.pss-sim-t-b-hl { fill: none; stroke: var(--pss-text); stroke-linecap: round; opacity: .85; }
.pss-sim-t-b-cap { fill: var(--pss-bg); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.pss-sim-t-b-caph { fill: rgba(255, 255, 255, .28); }
.pss-sim-t-all { transform-box: view-box; transform-origin: 50% 90%; }
.pss-sim-t-all.is-shake { animation: pss-sim-shake .55s var(--pss-ease) both; }
/* estelas del giro (copias retrasadas del brazo; su opacidad la pone el JS según la velocidad) */
.pss-sim-t-e1,
.pss-sim-t-e2 { fill: none; stroke-linecap: round; opacity: 0; }
.pss-sim-t-e1 { stroke: rgb(var(--pss-sim-rgb)); }
.pss-sim-t-e2 { stroke: rgba(var(--pss-sim-rgb), .7); }
.pss-sim-paso {
position: absolute;
left: 27%;
top: 7%;
padding: 7px 12px;
border-radius: 99px;
border: 1px solid rgba(var(--pss-accent-rgb), .5);
background: rgba(var(--pss-surface-rgb), .9);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 10px 30px -12px rgba(var(--pss-accent-rgb), .7);
opacity: 0;
transform: translate(-50%, 10px) scale(.9);
pointer-events: none;
}
.pss-sim-paso.is-on { animation: pss-sim-paso 2.4s var(--pss-ease) both; }
/* ---------- pastilla de aforo «Aforo 42/120 ▲1» ---------- */
.pss-sim-af {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 10px;
border-radius: 99px;
border: 1px solid rgba(var(--pss-accent-rgb), .3);
background: rgba(var(--pss-accent-rgb), .07);
font-family: var(--pss-f-mono);
font-size: 11.5px;
line-height: 1;
font-feature-settings: "zero" 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pss-sim-af-dot {
position: relative;
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 8px rgba(var(--pss-accent-rgb), .8);
}
.pss-sim-af-l { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pss-text2); }
.pss-sim-af-v { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--pss-text); }
.pss-sim-af-c { margin-left: -6px; color: var(--pss-text3); }
.pss-sim-af-up {
display: none;
align-items: center;
gap: 3px;
height: 18px;
padding: 0 5px 0 4px;
border-radius: 5px;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-size: 10.5px;
font-style: normal;
font-weight: 700;
}
.pss-sim-af-up svg { width: 8px; height: 8px; fill: currentColor; }
.pss-sim-af[data-up="1"] .pss-sim-af-up { display: inline-flex; animation: pss-sim-afup .55s var(--pss-ease-spring) both; }
.pss-sim-af.is-pulse { animation: pss-sim-afglow 1.6s var(--pss-ease) both; }
.pss-sim-af.is-pulse .pss-sim-af-dot::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1.5px solid var(--pss-accent-hi);
animation: pss-sim-afring 1.1s var(--pss-ease-out) 2 both;
}
/* junto al mensaje del torno: aparece al terminar el giro, bajo «Paso realizado» */
.pss-sim-msg-af { display: none; }
.pss-sim-msg-af.is-on { display: inline-flex; animation: pss-sim-msgin .6s var(--pss-ease-out) both; }
.pss-sim-msg-af.is-on.is-pulse { animation: pss-sim-msgin .6s var(--pss-ease-out) both, pss-sim-afglow 1.6s var(--pss-ease) both; }
/* ---------- tira resumen (tableta y móvil: el panel del sistema queda debajo) ---------- */
.pss-sim-sum { display: none; grid-area: sum; min-width: 0; }
.pss-sim-sum-ck { display: flex; gap: 5px; min-width: 0; }
.pss-sim-sum-ck li {
flex: 1 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 0;
height: 28px;
padding: 0 8px 0 6px;
border-radius: 99px;
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .02);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
color: var(--pss-text3);
white-space: nowrap;
transition: color .3s var(--pss-ease), background-color .3s var(--pss-ease), border-color .3s var(--pss-ease), opacity .3s var(--pss-ease);
}
.pss-sim-sum-i {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 14px;
height: 14px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.4px var(--pss-line3);
transition: background-color .3s var(--pss-ease), box-shadow .3s var(--pss-ease);
}
.pss .pss-sim-sum-i svg { width: 12px; height: 12px; overflow: visible; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pss-sim-sum-ok,
.pss-sim-sum-ko { stroke: var(--pss-on-accent); stroke-dasharray: 10; stroke-dashoffset: 10; }
.pss-sim-sum-sk { stroke: var(--pss-text3); opacity: 0; }
.pss-sim-sum-ck li[data-st="run"] { color: var(--pss-text); border-color: rgba(var(--pss-accent-rgb), .45); background: rgba(var(--pss-accent-rgb), .06); }
.pss-sim-sum-ck li[data-st="run"] .pss-sim-sum-i { box-shadow: inset 0 0 0 1.4px rgba(var(--pss-accent-hi-rgb), .22); }
.pss-sim-sum-ck li[data-st="run"] .pss-sim-sum-i::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.6px solid transparent;
border-top-color: var(--pss-accent-hi);
animation: pss-spin .7s linear infinite;
}
.pss-sim-sum-ck li[data-st="ok"] { color: var(--pss-accent-hi); border-color: rgba(var(--pss-accent-rgb), .4); background: rgba(var(--pss-accent-rgb), .08); }
.pss-sim-sum-ck li[data-st="ok"] .pss-sim-sum-i { background: var(--pss-accent); box-shadow: 0 0 8px rgba(var(--pss-accent-rgb), .6); }
.pss-sim-sum-ck li[data-st="ok"] .pss-sim-sum-ok,
.pss-sim-sum-ck li[data-st="ko"] .pss-sim-sum-ko { stroke-dashoffset: 0; transition: stroke-dashoffset .32s var(--pss-ease) .05s; }
.pss-sim-sum-ck li[data-st="ko"] { color: var(--pss-danger); border-color: rgba(var(--pss-danger-rgb), .5); background: rgba(var(--pss-danger-rgb), .1); }
.pss-sim-sum-ck li[data-st="ko"] .pss-sim-sum-i { background: var(--pss-danger); box-shadow: 0 0 8px rgba(var(--pss-danger-rgb), .6); }
.pss-sim-sum-ck li[data-ck="horario"][data-st="ko"] { color: var(--pss-warn); border-color: rgba(var(--pss-warn-rgb), .5); background: rgba(var(--pss-warn-rgb), .1); }
.pss-sim-sum-ck li[data-ck="horario"][data-st="ko"] .pss-sim-sum-i { background: var(--pss-warn); box-shadow: 0 0 8px rgba(var(--pss-warn-rgb), .6); }
.pss-sim-sum-ck li[data-st="ok"] .pss-sim-sum-i,
.pss-sim-sum-ck li[data-st="ko"] .pss-sim-sum-i { animation: pss-sim-pop .45s var(--pss-ease-spring); }
.pss-sim-sum-ck li[data-st="skip"] { opacity: .42; }
.pss-sim-sum-ck li[data-st="skip"] .pss-sim-sum-sk { opacity: 1; }
.pss-sim-sum-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.pss-sim-sum-dec {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-left: 4px;
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pss-text3);
white-space: nowrap;
transition: color .3s var(--pss-ease);
}
.pss-sim-sum-dec i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: box-shadow .3s var(--pss-ease); }
.pss-sim-sum-dec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pss-sim-sum-dec[data-st="run"] { color: var(--pss-accent-hi); }
.pss-sim-sum-dec[data-st="run"] i { animation: pss-sim-blink .7s steps(2) infinite; }
.pss-sim-sum-dec[data-st="ok"] { color: var(--pss-accent-hi); }
.pss-sim-sum-dec[data-st="ko"] { color: var(--pss-danger); }
.pss-sim-sum-dec[data-st="warn"],
.pss-sim-sum-dec[data-st="alarm"] { color: var(--pss-warn); }
.pss-sim-sum-dec:not([data-st="idle"]) i { box-shadow: 0 0 8px currentColor; }
/* ---------- cables y efectos ---------- */
.pss .pss-sim-cables {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.pss-sim-cable { fill: none; stroke: rgba(255, 255, 255, .11); stroke-width: 1.5; }
.pss-sim-cable--rel { stroke-dasharray: 2 5; stroke: rgba(var(--pss-accent-rgb), .35); }
.pss-sim-cable-pk {
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 3.2;
stroke-linecap: round;
opacity: 0;
filter: drop-shadow(0 0 5px rgba(var(--pss-accent-hi-rgb), 1));
}
.pss-sim-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pss-sim-fly {
position: absolute;
border-radius: 12%;
background: var(--pss-text);
box-shadow: 0 0 0 2px rgba(var(--pss-accent-hi-rgb), .9), 0 0 26px 4px rgba(var(--pss-accent-rgb), .7), 0 20px 50px -10px rgba(0, 0, 0, .8);
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.pss .pss-sim-fly svg { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; }
.pss-sim-fly--ghost { background: rgba(var(--pss-accent-hi-rgb), .35); box-shadow: 0 0 22px rgba(var(--pss-accent-rgb), .6); }
.pss-sim-fly--ghost svg { opacity: var(--pss-sim-ga, .3); }
.pss-sim-ring {
position: absolute;
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid var(--pss-accent-hi);
box-shadow: 0 0 20px rgba(var(--pss-accent-rgb), .9), inset 0 0 12px rgba(var(--pss-accent-rgb), .6);
transform: translate(-50%, -50%);
opacity: 0;
}
/* ---------- registro y aforo ---------- */
.pss-sim-foot {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 18px;
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid var(--pss-line);
}
.pss-sim-log,
.pss-sim-aforo {
position: relative;
padding: 18px 20px 14px;
border-radius: 20px;
border: 1px solid var(--pss-line);
background: var(--pss-bg2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pss-sim-cardh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pss-sim-cardh-t { font-family: var(--pss-f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pss-text2); }
.pss-sim-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pss-f-mono); font-size: 11px; color: var(--pss-text3); white-space: nowrap; }
.pss-sim-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pss-accent); box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .55); animation: pss-pulse 2s var(--pss-ease) infinite; }
.pss-sim-thead,
.pss-sim-row {
display: grid;
grid-template-columns: 92px minmax(0, 1.15fr) minmax(0, 1.25fr) 76px;
align-items: center;
gap: 12px;
}
.pss-sim-thead {
padding: 6px 10px;
font-family: var(--pss-f-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-sim-thead span:last-child,
.pss-sim-r-d { text-align: right; }
.pss-sim-rows { display: flex; flex-direction: column; }
.pss-sim-row {
position: relative;
height: 46px;
padding: 0 10px;
border-top: 1px solid var(--pss-line);
border-radius: 10px;
overflow: hidden;
transition: background-color 1.6s var(--pss-ease);
}
.pss-sim-row.is-new { background: rgba(var(--pss-accent-rgb), .08); transition: none; }
.pss-sim-row.is-new[data-res="ko"] { background: rgba(var(--pss-danger-rgb), .08); }
.pss-sim-row.is-new[data-res="warn"],
.pss-sim-row.is-new[data-res="alarm"] { background: rgba(var(--pss-warn-rgb), .09); }
.pss-sim-r-h { font-family: var(--pss-f-mono); font-size: 12.5px; font-feature-settings: "zero" 1; font-variant-numeric: tabular-nums; color: var(--pss-text2); }
.pss-sim-r-s { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 500; }
.pss-sim-r-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-sim-r-av {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: var(--pss-surface2);
font-family: var(--pss-f-display);
font-size: 12px;
font-style: normal;
font-weight: 600;
color: var(--pss-text2);
}
.pss-sim-r-r { min-width: 0; }
.pss-sim-r-r em {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
height: 24px;
padding: 0 10px 0 8px;
border-radius: 99px;
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
font-size: 12px;
font-style: normal;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pss-sim-r-r em::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pss-sim-row[data-res="ko"] .pss-sim-r-r em { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .08); color: var(--pss-danger); }
.pss-sim-row[data-res="warn"] .pss-sim-r-r em { border-color: rgba(var(--pss-warn-rgb), .35); background: rgba(var(--pss-warn-rgb), .08); color: var(--pss-warn); }
.pss-sim-row[data-res="alarm"] .pss-sim-r-r em { border-color: var(--pss-warn); background: var(--pss-warn); color: var(--pss-on-accent); }
.pss-sim-row[data-res="alarm"] .pss-sim-r-av { border-color: rgba(var(--pss-warn-rgb), .5); color: var(--pss-warn); }
.pss-sim-r-d { font-family: var(--pss-f-mono); font-size: 11.5px; color: var(--pss-text3); white-space: nowrap; }
.pss-sim-aforo { display: flex; flex-direction: column; }
.pss-sim-aforo-n { position: relative; display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.pss-sim-aforo-v {
font-family: var(--pss-f-display);
font-size: 76px;
font-weight: 700;
line-height: .9;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
color: var(--pss-text);
display: inline-block;
}
.pss-sim-aforo-cap { font-family: var(--pss-f-mono); font-size: 16px; color: var(--pss-text3); }
.pss-sim-aforo-plus {
position: absolute;
left: 118px;
top: -4px;
padding: 3px 8px;
border-radius: 8px;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
opacity: 0;
pointer-events: none;
}
.pss-sim-aforo-bar { position: relative; display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pss-sim-aforo-bar i {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent-hi));
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .8);
transform-origin: left center;
transform: scaleX(0);
transition: transform 1.1s var(--pss-ease);
}
.pss-sim-aforo-nota { margin-top: auto; padding-top: 14px; font-size: 13px; line-height: 1.5; color: var(--pss-text3); text-wrap: pretty; }
/* ---------- fotogramas ---------- */
@keyframes pss-sim-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pss-sim-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pss-sim-blink { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes pss-sim-blinkw { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes pss-sim-breath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pss-sim-flash { 0% { opacity: 0; } 12% { opacity: .95; } 30% { opacity: .15; } 46% { opacity: .9; } 100% { opacity: 0; } }
@keyframes pss-sim-flashscr { 0% { opacity: .92; } 100% { opacity: 0; } }
@keyframes pss-sim-shotin { 0% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(var(--pss-sim-k, .7)); } }
@keyframes pss-sim-msgin { 0% { opacity: 0; transform: translateY(10px); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes pss-sim-chev { 0% { opacity: .2; } 35% { opacity: 1; } 100% { opacity: .55; } }
@keyframes pss-sim-shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-5px); }
30% { transform: translateX(4px); }
45% { transform: translateX(-3px); }
60% { transform: translateX(2px); }
75% { transform: translateX(-1px); }
}
@keyframes pss-sim-paso {
0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); }
14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
100% { opacity: 0; transform: translate(-50%, -8px) scale(1); }
}
@keyframes pss-sim-afup { 0% { opacity: 0; transform: translateY(4px) scale(.5); } 100% { opacity: 1; transform: none; } }
@keyframes pss-sim-afglow {
0% { border-color: var(--pss-accent-hi); box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .45), 0 0 26px -6px rgba(var(--pss-accent-rgb), .9); }
100% { border-color: rgba(var(--pss-accent-rgb), .3); box-shadow: 0 0 0 10px rgba(var(--pss-accent-rgb), 0), 0 0 26px -6px rgba(var(--pss-accent-rgb), 0); }
}
@keyframes pss-sim-afring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes pss-sim-pulse-ico { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.88); } }
@keyframes pss-sim-call {
0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -12px rgba(var(--pss-accent-rgb), .7), 0 0 0 0 rgba(var(--pss-accent-rgb), .45); }
70% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -12px rgba(var(--pss-accent-rgb), .7), 0 0 0 14px rgba(var(--pss-accent-rgb), 0); }
100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -12px rgba(var(--pss-accent-rgb), .7), 0 0 0 0 rgba(var(--pss-accent-rgb), 0); }
}
/* ---------- tableta ---------- */
@media (max-width: 1180px) {
.pss-sim-bar { flex-direction: column; align-items: stretch; }
.pss-sim-esc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pss .pss-sim-chip { padding-right: 12px; }
.pss-sim-chip-txt b,
.pss-sim-chip-txt small { overflow: hidden; text-overflow: ellipsis; }
.pss-sim-ctrl { display: grid; grid-template-columns: 1fr 1fr; }
.pss .pss-sim-cables { display: none; }
/* el panel del sistema baja: la tira resumen se queda bajo el mensaje del torno, a la vista al pulsar */
.pss-sim-main {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
grid-template-areas:
"phone msg"
"phone sum"
"phone torno"
"act torno"
"sys sys";
row-gap: 22px;
}
.pss-sim-sum {
display: flex;
flex-direction: column;
gap: 9px;
padding: 10px;
border-radius: 16px;
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pss-simulador .pss-sim-msg-af.is-on { display: none; }
/* torno algo más contenido para que la columna derecha no empuje el botón hacia abajo */
.pss-sim-torno { justify-self: center; width: 100%; max-width: 300px; }
.pss-sim-col--sys { margin-top: 10px; }
}
@media (max-width: 1023px) {
.pss-sim-sum-x { display: none; }
/* columna estrecha (310 px a 768): tira compacta */
.pss-sim-sum { gap: 8px; padding: 8px; border-radius: 14px; }
.pss-sim-sum-ck { gap: 3px; }
.pss-sim-sum-ck li { gap: 3px; height: 27px; padding: 0 6px 0 4px; font-size: 10.5px; }
.pss-sim-sum-i { width: 13px; height: 13px; }
}
/* ---------- tableta estrecha (768–1023 px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
/* fichas de socio en 2 × 2: el motivo de cada escenario se lee entero */
.pss-sim-esc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* registro a todo el ancho (nombres completos) y el aforo debajo, en horizontal */
.pss-sim-foot { grid-template-columns: minmax(0, 1fr); }
.pss-sim-aforo {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "h h" "n b" "n nota";
column-gap: 28px;
align-items: center;
}
.pss-sim-aforo > .pss-sim-cardh { grid-area: h; }
.pss-sim-aforo-n { grid-area: n; margin: 4px 0 0; }
.pss-sim-aforo-bar { grid-area: b; align-self: end; }
.pss-sim-aforo-nota { grid-area: nota; align-self: start; margin: 0; padding-top: 10px; }
}
/* ---------- móvil (≤ 767 px) ---------- */
@media (max-width: 767px) {
.pss-sim-top { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 28px; }
.pss-sim-meta { align-items: flex-start; text-align: left; max-width: none; padding: 0; }
.pss-sim-console { margin-inline: -8px; padding: 14px 12px 14px; border-radius: var(--pss-r-lg); }
.pss-sim-console::before { background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 30% at 70% 42%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 30% at 70% 42%, #000 0%, transparent 100%); }
.pss-sim-bar { gap: 8px; padding-bottom: 14px; margin-bottom: 16px; }
.pss-sim-esc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pss .pss-sim-chip { height: 54px; gap: 9px; padding: 0 10px 0 7px; border-radius: 14px; }
.pss-sim-av { width: 32px; height: 32px; font-size: 15px; }
.pss-sim-av svg { width: 16px; height: 16px; }
.pss-sim-chip-txt b { font-size: 14px; }
.pss-sim-chip-txt small { font-size: 11.5px; gap: 6px; }
.pss-sim-chip-ok { top: -6px; right: -6px; width: 18px; height: 18px; }
.pss-sim-ctrl { gap: 8px; }
.pss .pss-sim-tog { height: 52px; gap: 7px; padding: 0 8px 0 7px; border-radius: 14px; font-size: 13px; }
.pss-sim-tog-ico { width: 28px; height: 28px; border-radius: 8px; }
.pss-sim-tog-ico svg { width: 16px; height: 16px; }
.pss-sim-sw { width: 34px; height: 20px; margin-left: auto; }
.pss-sim-sw i { top: 2px; left: 2px; width: 16px; height: 16px; }
.pss-sim-net[aria-checked="true"] .pss-sim-sw i { transform: translateX(14px); }
/* móvil a la izquierda; resultado y torno a la derecha; debajo, el botón y las comprobaciones:
todo cabe en una pantalla al pulsar */
.pss-sim-main {
grid-template-columns: 138px minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto auto auto;
grid-template-areas:
"phone msg"
"phone torno"
"sum sum"
"act act"
"sys sys";
column-gap: 12px;
row-gap: 12px;
}
/* tira resumen a todo el ancho, justo encima del botón: se ve lo que se comprueba mientras se pulsa */
.pss-sim-sum-ck { gap: 4px; }
.pss-sim-sum-ck li { gap: 4px; padding: 0 6px 0 5px; font-size: 11px; }
.pss-sim-sum-i { width: 14px; height: 14px; }
.pss-sim-sum-dec { font-size: 10px; letter-spacing: .08em; }
.pss-sim-af { height: 26px; gap: 6px; padding: 0 9px; font-size: 11px; }
.pss-sim-af-l { font-size: 9.5px; letter-spacing: .12em; }
.pss-sim-af-v { font-size: 12px; }
.pss-sim-torno { justify-self: stretch; width: auto; max-width: none; }
.pss-sim-phone { --pss-phone-w: 138px; transform: perspective(900px) rotateY(8deg); }
.pss-sim-phonewrap { padding-top: 2px; }
.pss-sim-phonewrap.is-near { transform: translate3d(10px, -4px, 0); }
.pss-sim-phonewrap.is-near .pss-sim-phone { transform: perspective(900px) rotateY(16deg) rotateZ(1.5deg); }
.pss .pss-sim-pshadow { bottom: -12px; height: 26px; }
.pss-sim-torno { align-self: end; margin: -4px -8px 0 -14px; }
.pss-sim-act { gap: 8px; margin-top: 4px; }
.pss .pss-sim-go { --pss-btn-h: 56px; }
.pss-sim-hint { font-size: 12px; }
.pss-sim-msg { min-height: 0; gap: 5px; padding-top: 2px; }
.pss-sim-msg-k { gap: 6px; font-size: 9.5px; letter-spacing: .1em; }
.pss-sim-msg-k::before { width: 5px; height: 5px; }
.pss-sim-msg-t { font-size: 24px; line-height: 1; }
.pss-sim-msg-s { font-size: 12px; line-height: 1.4; }
.pss-sim-msg-tag { padding: 4px 7px; border-radius: 7px; font-size: 10.5px; }
.pss-sim-msg-d { gap: 7px; margin-top: 0; font-size: 11px; }
.pss-sim-msg-d span { font-size: 9px; letter-spacing: .1em; }
.pss-sim-msg-d b { height: 22px; padding: 0 8px; border-radius: 6px; }
.pss .pss-sim-rearm { --pss-btn-h: 38px; --pss-btn-px: 12px; --pss-btn-fs: 13px; gap: 7px; }
.pss-sim-paso { top: 4%; left: 30%; font-size: 9.5px; padding: 5px 8px; }
.pss-sim-col--sys { margin-top: 0; }
.pss-sim-node { border-radius: 16px; }
.pss-sim-node-h { gap: 10px; padding: 12px; }
.pss-sim-node-ico { width: 34px; height: 34px; border-radius: 10px; }
.pss-sim-node-ico svg { width: 18px; height: 18px; }
.pss-sim-node-t b { font-size: 14px; }
.pss-sim-node-t small { font-size: 11.5px; }
.pss-sim-state { height: 24px; padding: 0 8px; font-size: 9.5px; gap: 6px; }
.pss-sim-panel { padding: 0 6px 8px; }
.pss-sim-ck { gap: 10px; min-height: 46px; padding: 6px 8px; grid-template-columns: 24px minmax(0, 1fr) auto; }
.pss-sim-ck-ico { width: 24px; height: 24px; }
.pss-sim-ck-txt b { font-size: 13.5px; }
.pss-sim-ck-txt small { font-size: 12px; }
.pss-sim-ck-ms { min-width: 38px; font-size: 11.5px; }
.pss-sim-dec { padding: 10px 8px 2px; }
.pss-sim-dec-ms { margin-left: 0; width: 100%; }
.pss-sim-link { margin-left: 29px; height: 34px; }
.pss-sim-relay { grid-template-columns: 54px auto minmax(30px, 1fr) auto; gap: 10px; padding: 10px 12px 12px; }
.pss-sim-relay-svg { width: 54px; height: 27px; }
.pss-sim-clic { left: 34px; }
.pss-sim-foot { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; }
.pss-sim-aforo { order: -1; padding: 16px; }
.pss-sim-log { padding: 16px 12px 10px; }
.pss-sim-aforo-v { font-size: 60px; }
.pss-sim-aforo-plus { left: 94px; }
.pss-sim-thead,
.pss-sim-row { grid-template-columns: 58px minmax(0, .75fr) minmax(0, 1.35fr); gap: 8px; }
.pss-sim-thead span:last-child,
.pss-sim-r-d { display: none; }
.pss-sim-thead { padding: 4px 6px; }
.pss-sim-row { padding: 0 6px; }
.pss-sim-r-h { font-size: 11.5px; }
.pss-sim-r-s { gap: 8px; font-size: 13px; }
.pss-sim-r-av { width: 22px; height: 22px; font-size: 11px; }
.pss-sim-r-r em { font-size: 11.5px; padding: 0 8px 0 7px; }
.pss-sim-nom { display: none; }
}
/* ---------- móvil estrecho (≤ 380 px): fichas más compactas para que el motivo quepa entero ---------- */
@media (max-width: 380px) {
.pss .pss-sim-chip { gap: 7px; padding: 0 8px 0 6px; }
.pss-sim-av { width: 28px; height: 28px; font-size: 14px; }
.pss-sim-av svg { width: 15px; height: 15px; }
.pss-sim-chip-txt small { gap: 5px; font-size: 11px; white-space: normal; }
.pss-sim-sum-ck { gap: 3px; }
.pss-sim-sum-ck li { gap: 3px; padding: 0 5px 0 4px; font-size: 10.5px; }
.pss-sim-sum-i { width: 13px; height: 13px; }
.pss-sim-sum-dec { letter-spacing: .06em; }
/* registro: sin avatar, para que «Fuera de tu horario» y el nombre quepan enteros */
.pss-sim-thead,
.pss-sim-row { grid-template-columns: 58px minmax(0, .55fr) minmax(0, 1.45fr); }
.pss-sim-r-av { display: none; }
.pss-sim-node-t small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.pss-sim-phonewrap,
.pss-sim-phone { transition: none; }
.pss-simulador:not(.is-used) .pss-sim-go:not([aria-disabled="true"]) { animation: none; }
}
/* ===== recorrido ===== */
/* =============================================================================
PANTHERA OS · sección recorrido («Cómo funciona»)
Modos (clase en la sección, la pone script.js):
.is-live escritorio/tableta: narración sticky ligada al scroll
.is-mob móvil: línea vertical cuyos pasos se encienden al pasar
.is-static movimiento reducido o pantalla muy baja: todo visible y encendido
Sin clase (antes del JS): lista vertical legible + diagrama.
============================================================================= */
.pss-recorrido {
--pss-rc-per: 48vh; /* recorrido de scroll por paso (7 pasos) */
--pss-rc-dist: calc(var(--pss-rc-per) * 7);
--pss-rc-ar: 1.2727; /* 840 / 660: proporción del diagrama */
--pss-rc-vh: 100vh; /* alto visible (100svh donde exista: barras móviles de tableta) */
position: relative;
overflow-x: clip;
background: var(--pss-bg);
}
@supports (height: 100svh) {
.pss-recorrido { --pss-rc-vh: 100svh; }
}
/* ---------- fondo ---------- */
.pss-rc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pss-rc-bggrid { --pss-grid: 72px; --pss-grid-y: 6%; opacity: .5; }
.pss-rc-bgglow { --pss-glow-x: 50%; --pss-glow-y: 0; --pss-glow-size: 900px; opacity: .22; }
.pss-recorrido > .pss-wrap,
.pss-rc-track { position: relative; z-index: 1; }
.pss-recorrido .pss-rc-head { margin-bottom: clamp(56px, 6vw, 88px); }
.pss-recorrido .pss-rc-head .pss-lead { max-width: 54ch; }
/* textos de ayuda según la pantalla: «Baja» con ratón, «Desliza» en táctil (.pss-touch lo pone base.js) */
.pss-recorrido .pss-only-touch { display: none; }
.pss.pss-touch .pss-recorrido .pss-only-touch { display: inline; }
.pss.pss-touch .pss-recorrido .pss-only-mouse { display: none; }
/* ---------- escenario (por defecto: todo en flujo) ---------- */
.pss-rc-stage {
display: grid;
grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
align-items: start;
gap: clamp(40px, 5vw, 80px);
}
.pss-rc-copy { position: relative; min-width: 0; }
.pss-rc-meta { display: none; }
.pss-rc-hint { display: none; }
/* ---------- lista de pasos: línea vertical (móvil, estático) ---------- */
.pss-rc-list { position: relative; }
.pss-recorrido .pss-rc-steps { position: relative; display: flex; flex-direction: column; }
.pss-recorrido .pss-rc-step {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 22px;
padding-bottom: 44px;
}
.pss-recorrido .pss-rc-step:last-child { padding-bottom: 0; }
.pss-rc-step-ico {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), var(--pss-surface);
box-shadow: var(--pss-shadow-1);
color: rgba(243, 245, 246, .5);
transition: color var(--pss-d-3) var(--pss-ease), border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), background-color var(--pss-d-3) var(--pss-ease);
}
.pss-rc-step-ico::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid var(--pss-accent-hi);
opacity: 0;
pointer-events: none;
}
.pss .pss-rc-step-ico svg {
width: 30px;
height: 30px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.pss-rc-rail {
position: absolute;
left: 25px;
top: 26px;
width: 2px;
height: calc(100% - 52px);
border-radius: 2px;
background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .06));
pointer-events: none;
}
.pss-rc-rail-fill {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, var(--pss-accent-lo), var(--pss-accent) 40%, var(--pss-accent-hi));
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .55);
transform-origin: 50% 0;
transform: scaleY(1);
}
.pss-rc-rail-pk {
position: absolute;
left: 50%;
top: 0;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: radial-gradient(circle, var(--pss-text) 0 22%, var(--pss-accent-hi) 34%, rgba(var(--pss-accent-hi-rgb), .35) 58%, rgba(var(--pss-accent-rgb), 0) 72%);
box-shadow: 0 0 18px 4px rgba(var(--pss-accent-rgb), .55);
opacity: 0;
transition: opacity var(--pss-d-2) var(--pss-ease);
}
.pss-rc-step-body { min-width: 0; padding-top: 3px; }
.pss-rc-step-head { position: relative; }
/* resumen de una línea y botón de detalle: solo en móvil (.is-corto) */
.pss-recorrido .pss-rc-step-s,
.pss-recorrido .pss-rc-more,
.pss-recorrido .pss-rc-mini { display: none; }
.pss-recorrido .pss-rc-step-n {
display: block;
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-accent);
}
.pss-recorrido .pss-rc-step-t {
margin-top: 10px;
font-family: var(--pss-f-display);
font-weight: 600;
font-size: clamp(24px, 2.1vw, 30px);
line-height: 1.12;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--pss-text);
text-wrap: balance;
}
.pss-recorrido .pss-rc-step-p {
margin-top: 10px;
max-width: 46ch;
font-size: 16px;
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-recorrido .pss-rc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pss-recorrido .pss-rc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 11px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .03);
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 500;
line-height: 1;
color: var(--pss-text2);
white-space: nowrap;
transition: opacity .5s var(--pss-ease), transform .6s var(--pss-ease-out), border-color var(--pss-d-3) var(--pss-ease), background-color var(--pss-d-3) var(--pss-ease), color var(--pss-d-3) var(--pss-ease);
}
.pss-recorrido .pss-rc-chips--checks .pss-rc-chip { padding-left: 8px; }
.pss .pss-rc-ok {
flex: none;
width: 14px;
height: 14px;
overflow: visible;
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pss-rc-ok path { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--pss-ease); }
/* impulso del relé (1 s) */
.pss-rc-imp {
display: flex;
align-items: center;
gap: 12px;
max-width: 340px;
margin-top: 18px;
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
}
.pss-rc-imp-k { letter-spacing: .14em; text-transform: uppercase; color: var(--pss-text2); }
.pss-rc-imp-bar {
position: relative;
flex: 1 1 auto;
height: 6px;
border-radius: 6px;
background: rgba(255, 255, 255, .08);
overflow: hidden;
}
.pss-rc-imp-bar i {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent-hi));
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .8);
transform-origin: 0 50%;
transform: scaleX(1);
}
.pss-rc-imp-v { color: var(--pss-accent-hi); font-variant-numeric: tabular-nums; }
/* registro (ejemplo) */
.pss-rc-log {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 380px;
margin-top: 18px;
padding: 12px 14px;
border-radius: var(--pss-r-sm);
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--pss-surface);
font-family: var(--pss-f-mono);
font-size: 12px;
line-height: 1.3;
font-feature-settings: "zero" 1;
}
.pss-rc-log-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pss-rc-log-h { flex: none; color: var(--pss-accent-hi); font-variant-numeric: tabular-nums; }
.pss-rc-log-w { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pss-text); }
.pss-rc-log-ok {
flex: none;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--pss-accent);
color: var(--pss-on-accent);
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6);
}
.pss .pss-rc-log-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pss-rc-log-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 9px;
border-top: 1px solid var(--pss-line);
color: var(--pss-text2);
font-size: 11px;
}
.pss-rc-log-foot b { display: inline-block; margin-left: 4px; color: var(--pss-accent-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.pss-rc-log-foot b.is-bump { animation: pss-rc-bump .7s var(--pss-ease-spring); }
.pss-rc-log-tag { color: var(--pss-text3); letter-spacing: .04em; white-space: nowrap; }
/* ---------- estados de los pasos de la lista (móvil con scroll) ---------- */
.pss-recorrido.is-mob .pss-rc-step-ico { color: rgba(243, 245, 246, .45); }
.pss-recorrido.is-mob .pss-rc-step .pss-rc-step-n { color: var(--pss-text2); transition: color var(--pss-d-3) var(--pss-ease); }
.pss-recorrido.is-mob .pss-rc-step.is-on .pss-rc-step-n,
.pss-recorrido.is-mob .pss-rc-step.is-done .pss-rc-step-n { color: var(--pss-accent); }
.pss-recorrido .pss-rc-step.is-done .pss-rc-step-ico,
.pss-recorrido .pss-rc-step.is-on .pss-rc-step-ico {
color: var(--pss-accent-hi);
border-color: rgba(var(--pss-accent-rgb), .5);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .14), rgba(var(--pss-accent-rgb), .02) 70%), var(--pss-surface);
}
.pss-recorrido .pss-rc-step.is-on .pss-rc-step-ico {
border-color: var(--pss-accent-hi);
box-shadow: 0 0 0 4px rgba(var(--pss-accent-rgb), .12), 0 10px 30px -8px rgba(var(--pss-accent-rgb), .7);
}
.pss-recorrido .pss-rc-step.is-on .pss-rc-step-ico::after { animation: pss-rc-ring 2s var(--pss-ease) infinite; }
.pss-recorrido.is-mob .pss-rc-rail-fill { transform: scaleY(0); }
.pss-recorrido.is-mob .pss-rc-chips--checks .pss-rc-ok path { stroke-dashoffset: 16; }
.pss-recorrido.is-mob .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-ok path,
.pss-recorrido.is-mob .pss-rc-step.is-done .pss-rc-chips--checks .pss-rc-ok path { stroke-dashoffset: 0; }
.pss-recorrido.is-mob .pss-rc-imp-bar i { transform: scaleX(0); }
.pss-recorrido.is-mob .pss-rc-step.is-done .pss-rc-imp-bar i { transform: scaleX(1); }
/* escalonado de las comprobaciones */
.pss-rc-chips--checks .pss-rc-chip:nth-child(2) .pss-rc-ok path,
.pss-rc-chips--checks .pss-rc-chip:nth-child(2) { transition-delay: .08s; }
.pss-rc-chips--checks .pss-rc-chip:nth-child(3) .pss-rc-ok path,
.pss-rc-chips--checks .pss-rc-chip:nth-child(3) { transition-delay: .16s; }
.pss-rc-chips--checks .pss-rc-chip:nth-child(4) .pss-rc-ok path,
.pss-rc-chips--checks .pss-rc-chip:nth-child(4) { transition-delay: .24s; }
.pss-rc-chips--checks .pss-rc-chip:nth-child(5) .pss-rc-ok path,
.pss-rc-chips--checks .pss-rc-chip:nth-child(5) { transition-delay: .32s; }
/* ---------- iconos vivos (lista y diagrama) ---------- */
.pss-rc-faint { opacity: .5; }
.pss-rc-link-dash { stroke-dasharray: 1.6 2.4; }
.pss-rc-led { stroke-width: 2.8; }
.pss .pss-rc-step-ico .pss-rc-led { stroke-width: 3.2; }
.pss-rc-lever {
transform-box: view-box;
transform-origin: 10px 28px;
transform: rotate(0deg);
}
.pss-rc-arms {
transform-box: view-box;
transform-origin: 20px 14px;
transform: rotate(0deg);
transition: transform .8s var(--pss-ease);
}
.pss-rc-tick { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .6s var(--pss-ease) .2s; }
.pss-recorrido .is-on .pss-rc-beam { animation: pss-rc-scan 1.7s var(--pss-ease-io) infinite; }
.pss-recorrido .is-on .pss-rc-led { animation: pss-rc-leds 1.1s var(--pss-ease-io) infinite; }
.pss-recorrido .is-on .pss-rc-lever { animation: pss-rc-lever 1.6s var(--pss-ease) .45s both; }
.pss-recorrido .is-on .pss-rc-imp-bar i { animation: pss-rc-imp 1.6s linear .45s both; }
.pss-recorrido .is-on .pss-rc-arms,
.pss-recorrido .is-done .pss-rc-arms { transform: rotate(120deg); transition: transform 1.3s var(--pss-ease) .35s; }
.pss-recorrido .is-on .pss-rc-tick,
.pss-recorrido .is-done .pss-rc-tick { stroke-dashoffset: 0; }
.pss-recorrido .is-on .pss-rc-light,
.pss-recorrido .is-done .pss-rc-light { stroke: var(--pss-accent-hi); }
.pss-recorrido.is-static .pss-rc-tick,
.pss-recorrido:not(.is-live):not(.is-mob) .pss-rc-tick { stroke-dashoffset: 0; }
/* ---------- diagrama SVG ---------- */
.pss-rc-fig { position: relative; min-width: 0; margin: 0; container-type: inline-size; }
.pss .pss-rc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pss-rc-stop-a { stop-color: var(--pss-accent); }
.pss-rc-stop-h { stop-color: var(--pss-accent-hi); }
.pss-rc-stop-s { stop-color: var(--pss-surface); }
.pss-rc-stop-s2 { stop-color: var(--pss-surface2); }
.pss-rc-band { fill: rgba(255, 255, 255, .014); stroke: rgba(255, 255, 255, .1); stroke-width: 1; stroke-dasharray: 4 6; }
.pss-rc-bandd { fill: rgba(var(--pss-accent-rgb), .7); }
.pss-rc-bandt { font-family: var(--pss-f-body); font-size: 13px; font-weight: 400; fill: var(--pss-text2); fill-opacity: .85; }
.pss-rc-bandl {
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
fill: var(--pss-text2);
fill-opacity: .8;
}
/* callout «sin internet» */
.pss-rc-off-l { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1.3; stroke-dasharray: 3 5; stroke-linejoin: round; transition: stroke var(--pss-d-3) var(--pss-ease); }
.pss-rc-off-box { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .13); stroke-width: 1; stroke-dasharray: 4 5; transition: fill var(--pss-d-3) var(--pss-ease), stroke var(--pss-d-3) var(--pss-ease); }
.pss-rc-off-ico { overflow: visible; fill: none; stroke: rgba(243, 245, 246, .5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--pss-d-3) var(--pss-ease); }
.pss-rc-off-k {
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
fill: var(--pss-text2);
transition: fill var(--pss-d-3) var(--pss-ease);
}
.pss-rc-off-t { font-family: var(--pss-f-body); font-size: 13.5px; font-weight: 400; fill: var(--pss-text2); }
.pss-rc-off.is-on .pss-rc-off-box { fill: rgba(var(--pss-accent-rgb), .07); stroke: rgba(var(--pss-accent-hi-rgb), .65); }
.pss-rc-off.is-on .pss-rc-off-l { stroke: var(--pss-accent-hi); animation: pss-rc-march 1s linear infinite; }
.pss-rc-off.is-on .pss-rc-off-ico { stroke: var(--pss-accent-hi); }
.pss-rc-off.is-on .pss-rc-off-k { fill: var(--pss-accent-hi); }
.pss-rc-off.is-on .pss-rc-off-t { fill: var(--pss-text); }
/* conexiones */
.pss-rc-base { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; stroke-dasharray: 1.5 5.5; stroke-linecap: round; }
.pss-rc-glowl,
.pss-rc-lit { fill: none; stroke-linecap: butt; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.pss-rc-glowl { stroke: rgba(var(--pss-accent-rgb), .2); stroke-width: 9; }
.pss-rc-lit { stroke: var(--pss-accent-hi); stroke-width: 2; }
.pss-rc-chev { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--pss-d-3) var(--pss-ease); }
.pss-rc-ll {
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 500;
fill: var(--pss-text2);
transition: fill var(--pss-d-3) var(--pss-ease);
}
.pss-rc-ll--dim { fill-opacity: .7; }
.pss-rc-link.is-lit .pss-rc-chev { stroke: var(--pss-accent-hi); }
.pss-rc-link.is-lit .pss-rc-ll { fill: var(--pss-accent-hi); }
/* paquete de luz */
.pss-rc-pk,
.pss-rc-ghost { opacity: 0; }
.pss-rc-pk-halo { fill: url(#pss-rc-g-pk); }
.pss-rc-pk-core { fill: var(--pss-accent-hi); }
.pss-rc-pk-hot { fill: var(--pss-text); }
.pss-rc-ghost { fill: var(--pss-accent-hi); }
/* piezas */
.pss-rc-node { transition: opacity .7s var(--pss-ease); }
.pss-rc-halo { fill: url(#pss-rc-g-halo); opacity: 0; transition: opacity var(--pss-d-3) var(--pss-ease); }
.pss-rc-card { fill: url(#pss-rc-g-card); stroke: rgba(255, 255, 255, .13); stroke-width: 1; transition: stroke var(--pss-d-3) var(--pss-ease); }
.pss-rc-tint { fill: url(#pss-rc-g-tint); opacity: 0; transition: opacity var(--pss-d-3) var(--pss-ease); }
.pss-rc-ico {
overflow: visible;
fill: none;
stroke: rgba(243, 245, 246, .5);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke var(--pss-d-3) var(--pss-ease);
}
.pss-rc-num {
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .06em;
fill: var(--pss-text3);
transition: fill var(--pss-d-3) var(--pss-ease);
}
.pss-rc-lbl {
font-family: var(--pss-f-display);
font-size: 18px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
fill: var(--pss-text2);
transition: fill var(--pss-d-3) var(--pss-ease);
}
.pss-rc-sub {
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 400;
fill: var(--pss-text2);
fill-opacity: .85;
}
.pss-rc-st-ring { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, .22); stroke-width: 1.3; transition: fill var(--pss-d-2) var(--pss-ease), stroke var(--pss-d-2) var(--pss-ease); }
.pss-rc-st-ok { fill: none; stroke: var(--pss-on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--pss-d-2) var(--pss-ease); }
.pss-rc-st-pulse { fill: none; stroke: var(--pss-accent-hi); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pss-rc-node.is-done .pss-rc-card { stroke: rgba(var(--pss-accent-rgb), .42); }
.pss-rc-node.is-done .pss-rc-ico { stroke: var(--pss-accent); }
.pss-rc-node.is-done .pss-rc-lbl { fill: var(--pss-text); }
.pss-rc-node.is-done .pss-rc-num { fill: var(--pss-accent); }
.pss-rc-node.is-done .pss-rc-st-ring { fill: var(--pss-accent); stroke: var(--pss-accent); }
.pss-rc-node.is-done .pss-rc-st-ok { opacity: 1; }
.pss-rc-node.is-on .pss-rc-card { stroke: var(--pss-accent-hi); }
.pss-rc-node.is-on .pss-rc-halo,
.pss-rc-node.is-on .pss-rc-tint { opacity: 1; }
.pss-rc-node.is-on .pss-rc-ico { stroke: var(--pss-accent-hi); }
.pss-rc-node.is-on .pss-rc-lbl { fill: var(--pss-text); }
.pss-rc-node.is-on .pss-rc-num { fill: var(--pss-accent-hi); }
.pss-rc-node.is-on .pss-rc-st-ring { fill: var(--pss-accent-hi); stroke: var(--pss-accent-hi); }
.pss-rc-node.is-on .pss-rc-st-pulse { animation: pss-rc-ping 1.8s var(--pss-ease) infinite; }
/* diagrama pequeño: el texto del SVG crece para seguir legible (cabe en tarjetas y huecos) */
@container (max-width: 760px) {
.pss-recorrido .pss-rc-sub { font-size: 12.5px; }
.pss-recorrido .pss-rc-ll { font-size: 12.5px; }
.pss-recorrido .pss-rc-num { font-size: 11.5px; }
.pss-recorrido .pss-rc-lbl { font-size: 19px; }
.pss-recorrido .pss-rc-bandl,
.pss-recorrido .pss-rc-off-k { font-size: 11.5px; }
.pss-recorrido .pss-rc-bandt { font-size: 14.5px; }
.pss-recorrido .pss-rc-off-t { font-size: 14.5px; }
}
@container (max-width: 620px) {
.pss-recorrido .pss-rc-sub { font-size: 14px; }
.pss-recorrido .pss-rc-ll { font-size: 13px; }
.pss-recorrido .pss-rc-num { font-size: 12.5px; }
.pss-recorrido .pss-rc-lbl { font-size: 20px; }
.pss-recorrido .pss-rc-bandl,
.pss-recorrido .pss-rc-off-k { font-size: 12.5px; }
.pss-recorrido .pss-rc-bandt { font-size: 16px; }
.pss-recorrido .pss-rc-off-t { font-size: 15.5px; }
}
/* piezas pulsables con ratón (modo vivo): llevan a su paso */
.pss-recorrido.is-live.is-hover .pss-rc-node { cursor: pointer; }
.pss-recorrido.is-live.is-hover .pss-rc-node:hover .pss-rc-card { stroke: rgba(var(--pss-accent-hi-rgb), .75); }
.pss-recorrido.is-live.is-hover .pss-rc-node:hover .pss-rc-ico { stroke: var(--pss-accent-hi); }
.pss-recorrido.is-live.is-hover .pss-rc-node:hover .pss-rc-lbl { fill: var(--pss-text); }
/* recorrido completo: el camino brilla un poco más */
.pss-rc-glowl { transition: stroke var(--pss-d-4) var(--pss-ease); }
.pss-recorrido.is-fin .pss-rc-glowl { stroke: rgba(var(--pss-accent-rgb), .34); }
/* estático / sin JS: todo encendido; en escritorio el diagrama acompaña a la lista */
.pss-recorrido.is-static .pss-rc-glowl,
.pss-recorrido.is-static .pss-rc-lit { stroke-dashoffset: 0; }
@media (min-width: 1024px) {
.pss-recorrido.is-static .pss-rc-fig { position: sticky; top: calc(var(--pss-sticky-top, 0px) + 40px); }
}
.pss-rc-cap {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
padding-right: 8px;
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
color: var(--pss-text2);
opacity: .8;
}
.pss-rc-cap .pss-dot { width: 6px; height: 6px; }
/* =============================================================================
MODO VIVO: narración sticky (escritorio y tableta)
============================================================================= */
.pss-recorrido.is-live .pss-rc-head { margin-bottom: 8px; }
.pss-recorrido.is-live .pss-rc-track {
height: calc(var(--pss-rc-vh) - var(--pss-sticky-top, 0px) + var(--pss-rc-dist));
}
.pss-recorrido.is-live .pss-rc-sticky {
position: sticky;
top: var(--pss-sticky-top, 0px);
display: flex;
align-items: center;
height: calc(var(--pss-rc-vh) - var(--pss-sticky-top, 0px));
}
.pss-recorrido.is-live .pss-rc-stage {
width: 100%;
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
align-items: center;
}
.pss-recorrido.is-live .pss-rc-fig {
justify-self: end;
width: min(100%, calc((var(--pss-rc-vh) - var(--pss-sticky-top, 0px) - 150px) * var(--pss-rc-ar)));
}
/* entrada del diagrama (una vez) */
.pss-recorrido.is-live:not(.is-in) .pss-rc-node,
.pss-recorrido.is-live:not(.is-in) .pss-rc-links,
.pss-recorrido.is-live:not(.is-in) .pss-rc-off,
.pss-recorrido.is-live:not(.is-in) .pss-rc-bands { opacity: 0; }
.pss-rc-links,
.pss-rc-off,
.pss-rc-bands { transition: opacity 1s var(--pss-ease) .5s; }
.pss-rc-bands { transition-delay: 0s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(1) { transition-delay: .05s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(2) { transition-delay: .12s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(3) { transition-delay: .19s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(4) { transition-delay: .26s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(5) { transition-delay: .33s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(6) { transition-delay: .40s; }
.pss-recorrido.is-live .pss-rc-node:nth-child(7) { transition-delay: .47s; }
/* contador y navegación por pasos */
.pss-recorrido.is-live .pss-rc-meta {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 34px;
}
.pss-rc-count {
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pss-text2);
}
.pss-rc-count b { color: var(--pss-accent-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.pss-rc-count-of { color: var(--pss-text3); }
/* cada botón mide 44 px de alto (área de toque) y lleva la barra fina centrada; los márgenes negativos
mantienen la maqueta como con barras de 22 px y 6 px de separación */
.pss-rc-nav {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
width: calc(100% + 6px);
max-width: 346px;
margin: -11px -3px;
}
.pss .pss-rc-nav-b {
position: relative;
display: block;
width: 100%;
height: 44px;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pss .pss-rc-nav-b::before,
.pss .pss-rc-nav-b i {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 50%;
height: 3px;
margin-top: -1.5px;
border-radius: 3px;
}
/* foco de teclado: anillo ceñido a la barra, no a toda el área de toque */
.pss .pss-rc-nav-b::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 15px;
margin-top: -7.5px;
border-radius: 6px;
box-shadow: 0 0 0 2px var(--pss-accent-hi);
opacity: 0;
pointer-events: none;
}
.pss .pss-rc-nav-b::before { background: rgba(255, 255, 255, .12); transition: background-color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease); }
.pss .pss-rc-nav-b i {
display: block;
background: linear-gradient(90deg, var(--pss-accent), var(--pss-accent-hi));
box-shadow: 0 0 10px rgba(var(--pss-accent-rgb), .55);
transform-origin: 0 50%;
transform: scaleX(0);
}
.pss .pss-recorrido .pss-rc-nav-b:hover,
.pss .pss-recorrido .pss-rc-nav-b:focus { background: transparent; color: inherit; border: 0; box-shadow: none; }
.pss .pss-recorrido .pss-rc-nav-b:hover::before { background: rgba(255, 255, 255, .26); transform: scaleY(1.7); }
.pss .pss-recorrido .pss-rc-nav-b:active::before { background: rgba(255, 255, 255, .34); }
/* Woodmart pinta el foco con !important a partir de --wd-otl-* (base.css los fija en .pss): aquí se apaga
porque el anillo va ceñido a la barra */
.pss .pss-recorrido .pss-rc-nav-b:focus-visible { outline: 0; --wd-otl-style: none; --wd-otl-width: 0px; }
.pss .pss-recorrido .pss-rc-nav-b:focus-visible::after { opacity: 1; }
/* pasos superpuestos: solo se ve el activo */
.pss-recorrido.is-live .pss-rc-rail { display: none; }
.pss-recorrido.is-live .pss-rc-steps { display: grid; }
.pss-recorrido.is-live .pss-rc-step {
grid-area: 1 / 1;
display: block;
padding: 0;
opacity: 0;
transform: translate3d(0, 28px, 0);
filter: blur(6px);
pointer-events: none;
transition: opacity .4s var(--pss-ease), transform .75s var(--pss-ease-out), filter .45s var(--pss-ease);
}
.pss-recorrido.is-live .pss-rc-step.is-past { transform: translate3d(0, -28px, 0); }
.pss-recorrido.is-live .pss-rc-step.is-on {
opacity: 1;
transform: none;
filter: none;
pointer-events: auto;
transition-delay: .12s;
}
.pss-recorrido.is-live .pss-rc-step-ico { display: none; }
.pss-recorrido.is-live .pss-rc-step-n { font-size: 12.5px; }
.pss-recorrido.is-live .pss-rc-step-t { margin-top: 14px; font-size: clamp(38px, 3.5vw, 54px); line-height: 1.08; }
.pss-recorrido.is-live .pss-rc-step-p { margin-top: 18px; max-width: 36ch; font-size: 18px; }
.pss-recorrido.is-live .pss-rc-chips { margin-top: 24px; }
.pss-recorrido.is-live .pss-rc-chips,
.pss-recorrido.is-live .pss-rc-imp,
.pss-recorrido.is-live .pss-rc-log { margin-top: 26px; }
/* los chips entran uno a uno */
.pss-recorrido.is-live .pss-rc-step .pss-rc-chip { opacity: 0; transform: translate3d(0, 10px, 0); }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip { opacity: 1; transform: none; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip:nth-child(1) { transition-delay: .3s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip:nth-child(2) { transition-delay: .4s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip:nth-child(3) { transition-delay: .5s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip:nth-child(4) { transition-delay: .6s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chip:nth-child(5) { transition-delay: .7s; }
.pss-recorrido.is-live .pss-rc-chips--checks .pss-rc-ok path { stroke-dashoffset: 16; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-ok path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--pss-ease); }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip:nth-child(1) .pss-rc-ok path { transition-delay: .55s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip:nth-child(2) .pss-rc-ok path { transition-delay: .7s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip:nth-child(3) .pss-rc-ok path { transition-delay: .85s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip:nth-child(4) .pss-rc-ok path { transition-delay: 1s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip:nth-child(5) .pss-rc-ok path { transition-delay: 1.15s; }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-chips--checks .pss-rc-chip { border-color: rgba(var(--pss-accent-rgb), .35); background: rgba(var(--pss-accent-rgb), .07); color: var(--pss-text); }
.pss-recorrido.is-live .pss-rc-imp-bar i { transform: scaleX(0); }
.pss-recorrido.is-live .pss-rc-log-row { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .5s var(--pss-ease), transform .6s var(--pss-ease-out); }
.pss-recorrido.is-live .pss-rc-step.is-on .pss-rc-log-row { opacity: 1; transform: none; transition-delay: .45s; }
/* pista «desliza» */
.pss-recorrido.is-live .pss-rc-hint {
position: absolute;
left: 50%;
bottom: 22px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pss-text3);
transform: translateX(-50%);
transition: opacity var(--pss-d-3) var(--pss-ease), transform var(--pss-d-3) var(--pss-ease);
pointer-events: none;
}
.pss-recorrido.is-live.is-moved .pss-rc-hint { opacity: 0; transform: translate(-50%, 8px); }
.pss-rc-hint-m { position: relative; width: 16px; height: 25px; border: 1.5px solid currentColor; border-radius: 9px; }
.pss-rc-hint-m i {
position: absolute;
left: 50%;
top: 5px;
width: 2px;
height: 5px;
margin-left: -1px;
border-radius: 2px;
background: var(--pss-accent-hi);
animation: pss-rc-wheel 1.8s var(--pss-ease) infinite;
}
/* en táctil (tableta apaisada) la rueda del ratón se cambia por un gesto de deslizar */
.pss-rc-hint-sw { display: none; position: relative; width: 14px; height: 25px; }
.pss-rc-hint-sw::before {
content: "";
position: absolute;
left: 50%;
top: 3px;
bottom: 3px;
width: 1.5px;
margin-left: -.75px;
border-radius: 2px;
background: currentColor;
opacity: .55;
}
.pss-rc-hint-sw i {
position: absolute;
left: 50%;
top: 0;
width: 8px;
height: 8px;
margin-left: -4px;
border-radius: 50%;
background: var(--pss-accent-hi);
box-shadow: 0 0 8px rgba(var(--pss-accent-rgb), .7);
animation: pss-rc-swipe 1.8s var(--pss-ease) infinite;
}
.pss.pss-touch .pss-recorrido .pss-rc-hint-m { display: none; }
.pss.pss-touch .pss-recorrido .pss-rc-hint-sw { display: block; }
/* =============================================================================
CIERRE: la frase clave
============================================================================= */
.pss-rc-outro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: clamp(96px, 8.4vw, 120px);
}
/* modo vivo: el escenario va centrado en la pantalla y deja aire debajo (--pss-rc-libre, lo mide script.js);
el cierre sube ese aire para que entre el diagrama y el pulso queden ~120 px */
.pss-recorrido.is-live .pss-rc-outro { margin-top: calc(-1 * var(--pss-rc-libre, 0px)); }
.pss-rc-pulse {
position: relative;
width: min(100%, 820px);
height: 118px;
margin-bottom: clamp(36px, 4vw, 56px);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
clip-path: inset(0 100% 0 0);
transition: clip-path 1.8s var(--pss-ease-out);
}
.pss-rc-pulse.is-in { clip-path: inset(0 0 0 0); }
.pss .pss-rc-pulse-svg {
position: absolute;
left: 0;
top: 30px;
width: 100%;
height: 64px;
overflow: visible;
}
.pss-rc-pulse-base { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.5; stroke-linejoin: round; }
.pss-rc-pm { display: none; }
.pss-rc-pulse-on {
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), .9));
animation: pss-rc-pulse 3.2s var(--pss-ease-io) infinite;
}
.pss-rc-pulse-dim {
position: absolute;
left: 40%;
width: 20%;
top: 2px;
height: 18px;
border-left: 1px solid rgba(var(--pss-accent-rgb), .6);
border-right: 1px solid rgba(var(--pss-accent-rgb), .6);
}
.pss-rc-pulse-dim::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: rgba(var(--pss-accent-rgb), .6);
}
.pss-rc-pulse-v {
position: absolute;
left: 50%;
top: 50%;
padding: 0 10px;
background: var(--pss-bg);
font-family: var(--pss-f-mono);
font-size: 13px;
font-weight: 600;
line-height: 1;
color: var(--pss-accent-hi);
transform: translate(-50%, -50%);
white-space: nowrap;
}
.pss-rc-pulse-k {
position: absolute;
top: 100px;
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-text3);
white-space: nowrap;
transform: translateX(-50%);
}
/* abierto · cerrado · abierto: misma línea, mismo estilo; el «1 s» es la cota verde de arriba */
.pss-rc-pulse-k--a { left: 26%; }
.pss-rc-pulse-k--b { left: 50%; }
.pss-rc-pulse-k--c { left: 74%; }
.pss-recorrido .pss-rc-key {
max-width: 1120px;
font-family: var(--pss-f-display);
font-weight: 600;
font-size: clamp(34px, 4.7vw, 74px);
line-height: 1.05;
letter-spacing: -.002em;
text-transform: uppercase;
color: var(--pss-text);
text-wrap: balance;
}
.pss-recorrido .pss-rc-key-em { font-style: normal; color: var(--pss-accent-hi); }
.pss-recorrido .pss-rc-key-em .pss-wi {
background-image: linear-gradient(180deg, var(--pss-accent-hi) 0%, var(--pss-accent-hi) 38%, var(--pss-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.pss-recorrido .pss-rc-key-sub {
max-width: 52ch;
margin-top: 28px;
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.6;
color: var(--pss-text2);
}
.pss-recorrido .pss-rc-key-sub strong { color: var(--pss-text); font-weight: 600; }
.pss-rc-outro-cta { margin-top: 34px; }
/* portátil pequeño / tableta apaisada: columna de texto más estrecha, diagrama más grande */
@media (min-width: 1024px) and (max-width: 1279px) {
.pss-recorrido.is-live .pss-rc-stage { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 40px; }
.pss-recorrido.is-live .pss-rc-step-t { font-size: 38px; }
.pss-recorrido.is-live .pss-rc-step-p { font-size: 17px; }
.pss-recorrido.is-live .pss-rc-nav { max-width: 306px; }
}
/* =============================================================================
Tableta (768-1023): diagrama arriba, texto debajo
============================================================================= */
@media (max-width: 1023px) {
.pss-rc-stage { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.pss-rc-fig { order: -1; }
.pss-recorrido.is-live .pss-rc-stage { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pss-recorrido.is-live .pss-rc-fig {
justify-self: center;
width: min(100%, calc((var(--pss-rc-vh) - var(--pss-sticky-top, 0px) - 400px) * var(--pss-rc-ar)));
}
.pss-recorrido.is-live .pss-rc-copy { justify-self: center; width: 100%; max-width: 640px; }
.pss-recorrido.is-live .pss-rc-meta { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pss-recorrido.is-live .pss-rc-nav { max-width: 306px; }
.pss-recorrido.is-live .pss-rc-step-t { margin-top: 10px; font-size: 34px; }
.pss-recorrido.is-live .pss-rc-step-p { margin-top: 12px; max-width: 56ch; font-size: 16.5px; }
.pss-recorrido.is-live .pss-rc-chips,
.pss-recorrido.is-live .pss-rc-imp,
.pss-recorrido.is-live .pss-rc-log { margin-top: 16px; }
.pss-recorrido.is-live .pss-rc-hint { display: none; }
}
/* =============================================================================
Móvil (≤767): línea vertical, sin sticky ni diagrama
============================================================================= */
@media (max-width: 767px) {
.pss-recorrido .pss-rc-head { margin-bottom: 52px; }
.pss-rc-fig { display: none; }
.pss-recorrido .pss-rc-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 40px; }
.pss-rc-step-ico { width: 48px; height: 48px; border-radius: 14px; }
.pss .pss-rc-step-ico svg { width: 28px; height: 28px; }
.pss-rc-rail { left: 23px; top: 24px; height: calc(100% - 48px); }
.pss-recorrido .pss-rc-step-n { font-size: 11.5px; }
.pss-recorrido .pss-rc-step-t { margin-top: 8px; font-size: 25px; }
.pss-recorrido .pss-rc-step-p { font-size: 15.5px; }
.pss-recorrido .pss-rc-chips { gap: 7px; margin-top: 14px; }
.pss-recorrido .pss-rc-chip { height: 27px; padding: 0 10px; font-size: 11px; }
.pss-rc-log { padding: 11px 12px; }
.pss-rc-log-row { gap: 10px; }
.pss-rc-log-foot { flex-wrap: wrap; row-gap: 6px; }
.pss-rc-outro { padding-top: 96px; }
.pss-rc-pulse { height: 104px; margin-bottom: 30px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.pss .pss-rc-pulse-svg { top: 28px; height: 56px; }
.pss-rc-pd { display: none; }
.pss-rc-pm { display: inline; }
.pss-rc-pulse-dim { left: 32%; width: 36%; }
.pss-rc-pulse-k { top: 92px; font-size: 9.5px; letter-spacing: .1em; }
.pss-rc-pulse-k--a { left: 17%; }
.pss-rc-pulse-k--c { left: 83%; }
.pss-recorrido .pss-rc-key { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; }
.pss-recorrido .pss-rc-key-sub { margin-top: 22px; font-size: 16px; }
.pss-rc-outro-cta { width: 100%; margin-top: 28px; }
.pss .pss-rc-outro-cta .pss-btn { width: 100%; }
}
/* =============================================================================
MÓVIL COMPACTO (.is-corto, la pone script.js por debajo de 768 px)
Cada paso: titular + una línea; el párrafo y los detalles se despliegan con «+».
Arriba, un mini diagrama pegajoso con las 7 piezas que se encienden con el paso activo.
============================================================================= */
.pss-recorrido.is-corto .pss-rc-head { margin-bottom: 40px; }
.pss-recorrido.is-corto .pss-rc-step { padding-bottom: 34px; }
.pss-recorrido.is-corto .pss-rc-step:last-child { padding-bottom: 0; }
.pss-recorrido.is-corto .pss-rc-step-s {
display: block;
max-width: 36ch;
margin-top: 8px;
font-size: 15px;
line-height: 1.5;
color: var(--pss-text2);
text-wrap: pretty;
}
/* botón de detalle: cubre la cabecera del paso (área de toque grande); el «+» va a la derecha del número */
.pss-recorrido.is-corto .pss-rc-more {
display: block;
position: absolute;
top: -8px;
right: -6px;
bottom: -8px;
left: -10px;
z-index: 1;
width: auto;
height: auto;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.pss-rc-more-ico {
position: absolute;
top: 0;
right: 6px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .03);
color: var(--pss-text2);
transition: color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease), background-color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss-rc-more-ico i {
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 1.6px;
margin: -.8px 0 0 -5.5px;
border-radius: 2px;
background: currentColor;
transition: transform .45s var(--pss-ease);
}
.pss-rc-more-ico i + i { transform: rotate(90deg); }
.pss .pss-recorrido .pss-rc-more:hover,
.pss .pss-recorrido .pss-rc-more:focus { background: transparent; border: 0; box-shadow: none; color: inherit; }
.pss .pss-recorrido .pss-rc-more:hover .pss-rc-more-ico { border-color: rgba(var(--pss-accent-hi-rgb), .55); color: var(--pss-text); }
.pss .pss-recorrido .pss-rc-more:active .pss-rc-more-ico { transform: scale(.88); }
.pss .pss-recorrido .pss-rc-more:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 0; --wd-otl-offset: 0px; }
.pss-recorrido .pss-rc-step.is-open .pss-rc-more-ico {
border-color: rgba(var(--pss-accent-hi-rgb), .6);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
}
.pss-recorrido .pss-rc-step.is-open .pss-rc-more-ico i + i { transform: rotate(180deg); }
/* detalle plegado */
.pss-recorrido.is-corto .pss-rc-det {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows .5s var(--pss-ease), opacity .28s var(--pss-ease), visibility 0s linear .5s;
}
.pss-recorrido.is-corto .pss-rc-det-in { min-height: 0; overflow: hidden; }
.pss-recorrido.is-corto .pss-rc-step.is-open .pss-rc-det {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
transition: grid-template-rows .55s var(--pss-ease), opacity .45s var(--pss-ease) .1s, visibility 0s;
}
.pss-recorrido.is-corto .pss-rc-step-p { margin-top: 12px; }
.pss-recorrido.is-corto .pss-rc-chips,
.pss-recorrido.is-corto .pss-rc-imp,
.pss-recorrido.is-corto .pss-rc-log { margin-top: 14px; }
/* mini diagrama pegajoso */
.pss-recorrido.is-corto .pss-rc-mini {
display: block;
position: sticky;
top: calc(var(--pss-sticky-top, 0px) + 10px);
z-index: 4;
margin: 0 0 34px;
padding: 11px 10px 5px;
border: 1px solid var(--pss-line2);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 55%), rgba(var(--pss-bg-rgb), .82);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: var(--pss-shadow-2);
}
.pss-rc-mini-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 0 7px;
}
.pss-rc-mini-k {
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pss-text2);
white-space: nowrap;
}
.pss-rc-mini-k b { color: var(--pss-accent-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.pss-rc-mini-of { color: var(--pss-text3); }
.pss-rc-mini-name {
min-width: 0;
overflow: hidden;
font-family: var(--pss-f-display);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: .05em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--pss-text);
}
.pss-rc-mini-row {
position: relative;
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.pss-rc-mini-line {
position: absolute;
left: 22px;
right: 22px;
top: 50%;
height: 2px;
margin-top: -1px;
background-image: linear-gradient(90deg, rgba(255, 255, 255, .24) 0 2px, transparent 2px 100%);
background-size: 6px 2px;
pointer-events: none;
}
.pss-rc-mini-fill {
position: absolute;
inset: 0;
border-radius: 2px;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent) 45%, var(--pss-accent-hi));
box-shadow: 0 0 10px rgba(var(--pss-accent-rgb), .6);
transform-origin: 0 50%;
transform: scaleX(var(--pss-rc-mf, 0));
}
.pss-rc-mini-pk {
position: absolute;
top: 50%;
left: calc(var(--pss-rc-mf, 0) * 100%);
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: radial-gradient(circle, var(--pss-text) 0 22%, var(--pss-accent-hi) 36%, rgba(var(--pss-accent-hi-rgb), .3) 62%, rgba(var(--pss-accent-rgb), 0) 74%);
box-shadow: 0 0 14px 3px rgba(var(--pss-accent-rgb), .55);
opacity: 0;
transition: opacity var(--pss-d-2) var(--pss-ease);
}
.pss-rc-mini.is-viaje .pss-rc-mini-pk { opacity: 1; }
.pss .pss-recorrido .pss-rc-mini-b {
position: relative;
z-index: 1;
display: grid;
place-items: center;
flex: 0 1 44px;
min-width: 0;
height: 44px;
padding: 0;
border: 0;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.pss .pss-recorrido .pss-rc-mini-b:hover,
.pss .pss-recorrido .pss-rc-mini-b:focus { background: transparent; border: 0; box-shadow: none; color: inherit; }
.pss .pss-recorrido .pss-rc-mini-b:focus-visible { outline: 0; --wd-otl-style: none; --wd-otl-width: 0px; }
.pss .pss-recorrido .pss-rc-mini-b:focus-visible .pss-rc-mini-ico { outline: 2px solid var(--pss-accent-hi); outline-offset: 2px; }
.pss .pss-recorrido .pss-rc-mini-b:active .pss-rc-mini-ico { transform: scale(.9); }
.pss-rc-mini-ico {
position: relative;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), var(--pss-surface);
color: rgba(243, 245, 246, .45);
transition: color var(--pss-d-3) var(--pss-ease), border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), background-color var(--pss-d-3) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss .pss-rc-mini-ico svg {
width: 19px;
height: 19px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pss .pss-rc-mini-ico .pss-rc-led { stroke-width: 3.4; }
.pss-rc-mini-b.is-done .pss-rc-mini-ico {
color: var(--pss-accent);
border-color: rgba(var(--pss-accent-rgb), .45);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .12), rgba(var(--pss-accent-rgb), .02) 70%), var(--pss-surface);
}
.pss-rc-mini-b.is-on .pss-rc-mini-ico {
color: var(--pss-accent-hi);
border-color: var(--pss-accent-hi);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .2), rgba(var(--pss-accent-rgb), .04) 70%), var(--pss-surface);
box-shadow: 0 0 0 3px rgba(var(--pss-accent-rgb), .14), 0 6px 18px -6px rgba(var(--pss-accent-rgb), .85);
}
/* ---------- fotogramas ---------- */
@keyframes pss-rc-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes pss-rc-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes pss-rc-scan { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes pss-rc-leds { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pss-rc-lever {
0% { transform: rotate(0deg); }
12% { transform: rotate(26.3deg); }
74.5% { transform: rotate(26.3deg); }
90%, 100% { transform: rotate(0deg); }
}
@keyframes pss-rc-imp {
0% { transform: scaleX(0); opacity: 1; }
12% { transform: scaleX(0); }
74.5% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: .5; }
}
@keyframes pss-rc-march { to { stroke-dashoffset: -16; } }
@keyframes pss-rc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--pss-text); } 100% { transform: scale(1); } }
@keyframes pss-rc-wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(7px); } 100% { opacity: 0; } }
@keyframes pss-rc-swipe { 0% { opacity: 0; transform: translateY(17px); } 25% { opacity: 1; } 80% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes pss-rc-pulse {
0%, 18% { opacity: .08; }
24% { opacity: 1; }
55% { opacity: 1; }
62%, 100% { opacity: .08; }
}
/* ---------- movimiento reducido: todo visible, nada continuo ---------- */
@media (prefers-reduced-motion: reduce) {
.pss-rc-pulse { clip-path: none; transition: none; }
.pss-rc-pulse-on { animation: none; opacity: 1; }
.pss-recorrido .pss-rc-step.is-on .pss-rc-step-ico::after,
.pss-rc-node.is-on .pss-rc-st-pulse,
.pss-recorrido .is-on .pss-rc-beam,
.pss-recorrido .is-on .pss-rc-led,
.pss-rc-off.is-on .pss-rc-off-l,
.pss-rc-hint-m i,
.pss-rc-hint-sw i { animation: none; }
.pss-recorrido .is-on .pss-rc-lever,
.pss-recorrido .is-on .pss-rc-imp-bar i { animation: none; }
.pss-recorrido .pss-rc-arms,
.pss-recorrido .is-on .pss-rc-arms,
.pss-recorrido .is-done .pss-rc-arms,
.pss-recorrido .pss-rc-tick,
.pss-recorrido .pss-rc-ok path,
.pss-recorrido .pss-rc-step,
.pss-recorrido .pss-rc-chip,
.pss-recorrido .pss-rc-node,
.pss-recorrido .pss-rc-links,
.pss-recorrido .pss-rc-off,
.pss-recorrido .pss-rc-bands,
.pss-recorrido.is-corto .pss-rc-det,
.pss-recorrido.is-corto .pss-rc-step.is-open .pss-rc-det,
.pss-recorrido .pss-rc-more-ico,
.pss-recorrido .pss-rc-more-ico i,
.pss-recorrido .pss-rc-mini-ico,
.pss-recorrido .pss-rc-mini-pk { transition: none; }
}
/* ===== panel ===== */
/* =============================================================================
PANTHERA OS · sección panel — «Panel de recepción» dentro de .pss-browser
Prefijos: .pss-panel (sección) · .pss-pnl-* (piezas del panel)
Los botones llevan siempre dos clases y :hover propio (Woodmart).
============================================================================= */
.pss-panel {
position: relative;
overflow: clip;
background: var(--pss-bg);
}
.pss-panel-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* horizonte verde arriba: marca el cambio de capítulo (mismo lenguaje que el borde inferior del héroe) */
.pss-panel-bg::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--pss-accent-rgb), 0) 18%, rgba(var(--pss-accent-rgb), .45) 50%, rgba(var(--pss-accent-rgb), 0) 82%, transparent 100%);
box-shadow: 0 0 22px 1px rgba(var(--pss-accent-rgb), .28);
}
.pss-panel-bg::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(900px, 90%);
height: 260px;
background: radial-gradient(50% 100% at 50% 0%, rgba(var(--pss-accent-rgb), .1), transparent 100%);
transform: translateX(-50%);
}
.pss-panel-grid { --pss-grid: 56px; --pss-grid-x: 50%; --pss-grid-y: 46%; opacity: .55; }
.pss-panel-glow { --pss-glow-x: 50%; --pss-glow-y: 64%; --pss-glow-size: 1100px; opacity: .3; }
.pss-panel-in { position: relative; z-index: 1; }
.pss-panel .pss-panel-head { margin-bottom: clamp(36px, 4.4vw, 56px); }
/* ---------- etiqueta y pista sobre el navegador ---------- */
.pss-panel .pss-pnl-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
flex-wrap: wrap;
margin: 0 0 18px;
}
.pss-panel .pss-pnl-hint {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--pss-text2);
}
.pss-panel .pss-pnl-hint svg { width: 17px; height: 17px; color: var(--pss-accent); flex: none; }
/* ---------- escenario: halo + inclinación ligada al scroll ---------- */
.pss-panel .pss-pnl-stage {
--pss-pnl-p: 1;
position: relative;
isolation: isolate;
}
.pss-panel .pss-pnl-halo {
position: absolute;
left: 8%;
right: 8%;
top: 18%;
bottom: -6%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .24), rgba(var(--pss-accent-rgb), .09) 45%, rgba(var(--pss-accent-rgb), .025) 75%, transparent 100%);
opacity: calc(.4 + var(--pss-pnl-p) * .6);
pointer-events: none;
}
/* la inclinación solo existe mientras entra (clase .is-tilt): en reposo no es una capa 3D */
.pss-panel .pss-pnl-stage.is-tilt .pss-pnl-browser {
transform:
perspective(2200px)
rotateX(calc((1 - var(--pss-pnl-p)) * 13deg))
scale(calc(.95 + var(--pss-pnl-p) * .05));
}
.pss-panel .pss-pnl-browser {
transform-origin: 50% 0%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .05),
0 0 0 1px rgba(0, 0, 0, .5),
0 60px 120px -40px rgba(0, 0, 0, .95),
0 40px 90px -50px rgba(var(--pss-accent-rgb), .35);
}
.pss-panel .pss-pnl-browser .pss-browser-bar { position: relative; z-index: 2; }
/* =============================================================================
Aplicación: barra lateral + contenido
============================================================================= */
.pss-panel .pss-pnl-app {
display: grid;
grid-template-columns: 226px minmax(0, 1fr);
color: var(--pss-text);
font-size: 14px;
line-height: 1.4;
text-align: left;
}
/* ---------- barra lateral ---------- */
.pss-panel .pss-pnl-side {
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
padding: 20px 12px 14px;
border-right: 1px solid var(--pss-line);
background:
linear-gradient(180deg, rgba(var(--pss-accent-rgb), .045), rgba(var(--pss-accent-rgb), 0) 180px),
var(--pss-bg);
}
.pss-panel .pss-pnl-brand {
display: flex;
align-items: center;
gap: 10px;
height: 28px;
padding: 0 10px;
}
.pss-panel .pss-pnl-logo { height: 21px; width: auto; max-width: none; }
.pss-panel .pss-pnl-icono { display: none; width: 28px; height: 28px; }
.pss-panel .pss-pnl-os {
display: inline-flex;
align-items: center;
height: 19px;
padding: 0 6px;
border-radius: 6px;
border: 1px solid rgba(var(--pss-accent-rgb), .34);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
line-height: 1;
}
.pss-panel .pss-pnl-nav { display: flex; flex-direction: column; gap: 2px; }
.pss-panel .pss-pnl-nav-i {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
height: 38px;
padding: 0 10px 0 11px;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
color: var(--pss-text2);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
text-align: left;
transition: background-color var(--pss-d-1) var(--pss-ease), color var(--pss-d-1) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-nav-i svg {
flex: none;
width: 18px;
height: 18px;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss-panel .pss-pnl-nav-i:hover {
background: rgba(255, 255, 255, .045);
border-color: transparent;
color: var(--pss-text);
}
.pss-panel .pss-pnl-nav-i:hover svg { color: var(--pss-text2); transform: scale(1.06); }
.pss-panel .pss-pnl-nav-i:active { background: rgba(255, 255, 255, .07); }
.pss-panel .pss-pnl-nav-i.is-on,
.pss-panel .pss-pnl-nav-i.is-on:hover {
background: linear-gradient(90deg, rgba(var(--pss-accent-rgb), .16), rgba(var(--pss-accent-rgb), .03));
border-color: rgba(var(--pss-accent-rgb), .2);
color: var(--pss-text);
}
.pss-panel .pss-pnl-nav-i.is-on svg { color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-nav-i::before {
content: "";
position: absolute;
left: -13px;
top: 50%;
width: 3px;
height: 18px;
border-radius: 0 3px 3px 0;
background: var(--pss-accent);
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .9);
transform: translateY(-50%) scaleY(0);
transition: transform var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-nav-i.is-on::before { transform: translateY(-50%) scaleY(1); }
.pss-panel .pss-pnl-nav-i:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 1px; }
.pss-panel .pss-pnl-nav-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pss-panel .pss-pnl-nav-n {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 19px;
margin-left: auto;
padding: 0 6px;
border-radius: 99px;
background: rgba(var(--pss-accent-rgb), .16);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
transition: opacity var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss-panel .pss-pnl-nav-n.is-zero { opacity: 0; transform: scale(.6); }
.pss-panel .pss-pnl-nav-n.is-bump { animation: pss-pnl-bump .5s var(--pss-ease-spring); }
.pss-panel .pss-pnl-label {
display: block;
padding: 0 11px;
margin-bottom: 8px;
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-panel .pss-pnl-devlist { display: flex; flex-direction: column; gap: 1px; }
.pss-panel .pss-pnl-dev {
display: flex;
align-items: center;
gap: 9px;
height: 30px;
padding: 0 8px 0 11px;
font-size: 12.5px;
color: var(--pss-text2);
white-space: nowrap;
}
.pss-panel .pss-pnl-dev b { font-weight: 500; color: var(--pss-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pss-panel .pss-pnl-dev em {
flex: none;
margin-left: auto;
font-style: normal;
font-family: var(--pss-f-mono);
font-size: 10px;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-led {
--pss-dot-rgb: var(--pss-accent-rgb);
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgb(var(--pss-dot-rgb));
box-shadow: 0 0 8px rgba(var(--pss-dot-rgb), .8);
transition: background-color var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-dev.is-off .pss-pnl-led { --pss-dot-rgb: var(--pss-danger-rgb); animation: pss-pulse-dot 2s var(--pss-ease) infinite; }
.pss-panel .pss-pnl-dev.is-off em { color: var(--pss-danger); }
.pss-panel .pss-pnl-dev.is-busy .pss-pnl-led { --pss-dot-rgb: var(--pss-warn-rgb); }
.pss-panel .pss-pnl-dev.is-busy em { color: var(--pss-warn); }
.pss-panel .pss-pnl-dev.is-act .pss-pnl-led { --pss-dot-rgb: var(--pss-accent-hi-rgb); box-shadow: 0 0 0 4px rgba(var(--pss-accent-rgb), .25), 0 0 14px rgba(var(--pss-accent-hi-rgb), 1); }
.pss-panel .pss-pnl-dev.is-act em { color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-user {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 12px 10px 2px;
border-top: 1px solid var(--pss-line);
}
.pss-panel .pss-pnl-uav {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(140deg, var(--pss-accent-hi), var(--pss-accent-lo));
color: var(--pss-on-accent);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .02em;
}
.pss-panel .pss-pnl-utxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pss-panel .pss-pnl-utxt b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.pss-panel .pss-pnl-utxt small { font-size: 11.5px; color: var(--pss-text3); line-height: 1.2; white-space: nowrap; }
/* ---------- contenido ---------- */
.pss-panel .pss-pnl-main {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
padding: 18px 22px 22px;
background:
radial-gradient(120% 70% at 100% 0%, rgba(var(--pss-accent-rgb), .045), transparent 60%),
var(--pss-bg2);
}
/* barra de carga al cambiar de centro o de vista */
.pss-panel .pss-pnl-load {
position: absolute;
left: 0;
top: 0;
z-index: 6;
width: 100%;
height: 2px;
background: linear-gradient(90deg, rgba(var(--pss-accent-rgb), 0), var(--pss-accent-hi) 70%, var(--pss-accent));
box-shadow: 0 0 10px rgba(var(--pss-accent-hi-rgb), .8);
transform: scaleX(0);
transform-origin: 0 50%;
opacity: 0;
pointer-events: none;
}
.pss-panel .pss-pnl-load.is-run { animation: pss-pnl-load .75s var(--pss-ease-out) forwards; }
.pss-panel .pss-pnl-top {
display: flex;
align-items: center;
gap: 14px 16px;
min-width: 0;
}
.pss-panel .pss-pnl-title { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.pss-panel .pss-pnl-h {
font-family: var(--pss-f-display);
font-weight: 600;
font-size: 22px;
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--pss-text);
}
.pss-panel .pss-pnl-now {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 7px;
font-family: var(--pss-f-mono);
font-size: 11.5px;
line-height: 1.2;
color: var(--pss-text3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pss-panel .pss-pnl-clock { color: var(--pss-text2); }
/* de 00:00 a 06:00 el panel enseña una tarde: lo dice junto al reloj */
.pss-panel .pss-pnl-simh {
display: inline-flex;
align-items: center;
gap: 5px;
height: 17px;
padding: 0 6px 0 5px;
border-radius: 5px;
border: 1px solid rgba(var(--pss-warn-rgb), .3);
background: rgba(var(--pss-warn-rgb), .08);
color: var(--pss-warn);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
cursor: help;
}
.pss-panel .pss-pnl-simh::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: .9;
}
.pss-panel .pss-pnl-simh[hidden] { display: none; }
/* ---------- selector de centro (segmentado con pastilla que se desliza) ---------- */
.pss-panel .pss-pnl-centros {
position: relative;
display: inline-flex;
flex: none;
padding: 3px;
border-radius: 11px;
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .7);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.pss-panel .pss-pnl-thumb {
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: var(--pss-pnl-tw, 0px);
border-radius: 8px;
border: 1px solid rgba(var(--pss-accent-rgb), .36);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .2), rgba(var(--pss-accent-rgb), .08)), var(--pss-surface2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 14px -6px rgba(var(--pss-accent-rgb), .7);
transform: translateX(var(--pss-pnl-tx, 0px));
transition: transform .55s var(--pss-ease), width .55s var(--pss-ease);
pointer-events: none;
}
.pss-panel .pss-pnl-centros.is-static .pss-pnl-thumb { transition: none; }
.pss-panel .pss-pnl-cbtn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 14px;
border-radius: 8px;
border: 0;
background: transparent;
color: var(--pss-text2);
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-cbtn:hover { background: transparent; color: var(--pss-text); }
.pss-panel .pss-pnl-cbtn.is-on,
.pss-panel .pss-pnl-cbtn.is-on:hover { color: var(--pss-text); }
.pss-panel .pss-pnl-cbtn:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 1px; }
.pss-panel .pss-pnl-cshort { display: none; }
.pss-panel .pss-pnl-cping {
position: absolute;
top: 5px;
right: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pss-accent-hi);
box-shadow: 0 0 8px rgba(var(--pss-accent-hi-rgb), .9);
opacity: 0;
transform: scale(.4);
transition: opacity var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss-panel .pss-pnl-cbtn.has-new .pss-pnl-cping { opacity: 1; transform: none; }
/* ---------- botón «Abrir torno» ---------- */
.pss-panel .pss-pnl-open {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
flex: none;
min-width: 158px;
height: 40px;
padding: 0 18px 0 14px;
border-radius: 11px;
border: 1px solid rgba(var(--pss-accent-hi-rgb), .6);
background: var(--pss-accent);
color: var(--pss-on-accent);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: -.005em;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -12px rgba(var(--pss-accent-rgb), .9);
transition:
background-color var(--pss-d-2) var(--pss-ease),
border-color var(--pss-d-2) var(--pss-ease),
color var(--pss-d-2) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
scale var(--pss-d-1) var(--pss-ease);
}
.pss-panel .pss-pnl-open:hover,
.pss-panel .pss-pnl-open:focus {
background: var(--pss-accent-hi);
border-color: var(--pss-accent-hi);
color: var(--pss-on-accent);
}
.pss-panel .pss-pnl-open:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 5px rgba(var(--pss-accent-rgb), .15), 0 14px 34px -12px rgba(var(--pss-accent-rgb), .95);
}
.pss-panel .pss-pnl-open:focus:not(:focus-visible) { background: var(--pss-accent); border-color: rgba(var(--pss-accent-hi-rgb), .6); }
.pss-panel .pss-pnl-open:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss-panel .pss-pnl-open:active { scale: .97; }
.pss-panel .pss-pnl-open-fill {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .42));
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
.pss-panel .pss-pnl-open-ico { position: relative; display: grid; width: 19px; height: 19px; flex: none; }
.pss-panel .pss-pnl-open-ico svg { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity var(--pss-d-2) var(--pss-ease), transform .5s var(--pss-ease-spring); }
.pss-panel .pss-pnl-open-ok { opacity: 0; transform: scale(.3) rotate(-30deg); }
.pss-panel .pss-pnl-open-t { position: relative; }
/* abriendo: el relé cierra 1 s (la barra recorre el botón) y los brazos giran 120° */
.pss-panel .pss-pnl-open.is-opening { cursor: progress; }
.pss-panel .pss-pnl-open.is-opening .pss-pnl-open-fill { transform: scaleX(1); transition: transform 1s linear; }
.pss-panel .pss-pnl-open.is-opening .pss-pnl-open-torno { transform: rotate(120deg); transition: transform 1s var(--pss-ease-io); }
/* abierto: confirmación */
.pss-panel .pss-pnl-open.is-done,
.pss-panel .pss-pnl-open.is-done:hover,
.pss-panel .pss-pnl-open.is-done:focus {
background: rgba(var(--pss-accent-rgb), .14);
border-color: rgba(var(--pss-accent-rgb), .7);
color: var(--pss-accent-hi);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 4px rgba(var(--pss-accent-rgb), .12), 0 0 28px -4px rgba(var(--pss-accent-rgb), .55);
cursor: default;
}
.pss-panel .pss-pnl-open.is-done .pss-pnl-open-torno { opacity: 0; transform: scale(.4) rotate(120deg); }
.pss-panel .pss-pnl-open.is-done .pss-pnl-open-ok { opacity: 1; transform: none; }
.pss-panel .pss-pnl-open.is-done::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(var(--pss-accent-hi-rgb), .7);
animation: pss-pnl-ring 1.1s var(--pss-ease-out) both;
pointer-events: none;
}
.pss-panel .pss-pnl-open[aria-disabled="true"] { pointer-events: none; }
/* ---------- aviso flotante (confirmación del torno): sale bajo «Abrir torno», como un globo del botón ----------
Posición medida en JS (colocarToast): --pss-pnl-tt (arriba), --pss-pnl-tr (derecha), --pss-pnl-tc (centro del botón).
Fondo sólido y sin backdrop-filter: oculto no deja ninguna capa compuesta encima de las tarjetas. */
.pss-panel .pss-pnl-toast {
position: absolute;
top: var(--pss-pnl-tt, 70px);
right: var(--pss-pnl-tr, 22px);
z-index: 7;
padding-right: 18px;
border-color: rgba(var(--pss-accent-rgb), .35);
background: var(--pss-surface2);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 0 0 4px rgba(var(--pss-accent-rgb), .06),
var(--pss-shadow-3),
0 18px 40px -16px rgba(0, 0, 0, .9),
0 0 36px -12px rgba(var(--pss-accent-rgb), .45);
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(.96);
transform-origin: calc(100% - var(--pss-pnl-tc, 79px)) 0;
transition: opacity .3s var(--pss-ease), transform .45s var(--pss-ease), visibility 0s linear .45s;
pointer-events: none;
}
.pss-panel .pss-pnl-toast.is-on {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .3s var(--pss-ease), transform .55s var(--pss-ease-spring), visibility 0s;
}
/* pico que apunta al botón */
.pss-panel .pss-pnl-toast::before {
content: "";
position: absolute;
top: -6px;
right: calc(var(--pss-pnl-tc, 79px) - 6px);
width: 11px;
height: 11px;
border-top: 1px solid rgba(var(--pss-accent-rgb), .35);
border-left: 1px solid rgba(var(--pss-accent-rgb), .35);
border-radius: 3px 0 0 0;
background: var(--pss-surface2);
transform: rotate(45deg);
}
.pss-panel .pss-pnl-toast .pss-chip-ico { background: var(--pss-accent); color: var(--pss-on-accent); }
.pss-panel .pss-pnl-toast .pss-chip-ico svg { transition: transform 1s var(--pss-ease-io); }
.pss-panel .pss-pnl-toast.is-turn .pss-chip-ico svg { transform: rotate(120deg); }
/* ---------- vistas (se apilan en la misma celda: sin saltos de alto) ---------- */
.pss-panel .pss-pnl-views { display: grid; min-width: 0; }
.pss-panel .pss-pnl-view {
grid-area: 1 / 1;
min-width: 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .35s var(--pss-ease), transform .5s var(--pss-ease), visibility 0s linear .35s;
}
.pss-panel .pss-pnl-view.is-on {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .45s var(--pss-ease) .06s, transform .6s var(--pss-ease) .06s, visibility 0s;
}
/* ---------- tarjetas ---------- */
.pss-panel .pss-pnl-card {
--pss-my: -40%;
border-radius: 14px;
/* degradado opaco (surface2 ≈ surface + 3 % de blanco): el translúcido se pintaba a rayas en algunos mosaicos */
background: linear-gradient(180deg, var(--pss-surface2), var(--pss-surface) 46%);
}
.pss-panel .pss-pnl-card::before { background: radial-gradient(420px circle at var(--pss-mx) var(--pss-my), rgba(var(--pss-accent-rgb), .08), transparent 45%); }
.pss-panel .pss-pnl-card::after { background: radial-gradient(300px circle at var(--pss-mx) var(--pss-my), rgba(var(--pss-accent-hi-rgb), .55), rgba(var(--pss-accent-rgb), .12) 32%, transparent 58%); }
.pss-panel .pss-pnl-ch {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 15px 18px 0;
}
.pss-panel .pss-pnl-ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pss-panel .pss-pnl-ct h4 { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; color: var(--pss-text); }
.pss-panel .pss-pnl-ct p { font-size: 12px; line-height: 1.3; color: var(--pss-text3); }
.pss-panel .pss-pnl-live {
display: inline-flex;
align-items: center;
gap: 7px;
flex: none;
font-family: var(--pss-f-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
color: var(--pss-accent);
}
.pss-panel .pss-pnl-live i {
--pss-dot-rgb: var(--pss-accent-rgb);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pss-accent);
animation: pss-pulse-dot 2s var(--pss-ease) infinite;
}
/* ---------- KPI ---------- */
.pss-panel .pss-pnl-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.pss-panel .pss-pnl-kpi {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 136px;
padding: 15px 18px 15px;
}
.pss-panel .pss-pnl-kh {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
color: var(--pss-text2);
}
.pss-panel .pss-pnl-kico { width: 17px; height: 17px; flex: none; color: var(--pss-text3); }
.pss-panel .pss-pnl-val {
display: block;
font-family: var(--pss-f-body);
font-size: 34px;
font-weight: 600;
line-height: 1;
letter-spacing: -.035em;
color: var(--pss-text);
white-space: nowrap;
}
.pss-panel .pss-pnl-eur { font-size: .62em; font-weight: 500; letter-spacing: 0; color: var(--pss-text2); }
.pss-panel .pss-pnl-ks {
display: block;
margin-top: auto;
font-size: 12px;
line-height: 20px;
color: var(--pss-text3);
}
.pss-panel .pss-pnl-delta {
display: inline-flex;
align-items: center;
gap: 3px;
height: 20px;
margin-right: 6px;
vertical-align: top;
padding: 0 7px 0 5px;
border-radius: 99px;
background: rgba(var(--pss-accent-rgb), .13);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pss-panel .pss-pnl-delta svg { width: 11px; height: 11px; }
.pss-panel .pss-pnl-wdot {
display: inline-block;
margin-right: 6px;
vertical-align: 1px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pss-warn);
box-shadow: 0 0 8px rgba(var(--pss-warn-rgb), .7);
}
.pss-panel .pss-pnl-meter {
position: relative;
height: 6px;
margin-top: 2px;
border-radius: 99px;
background: rgba(var(--pss-accent-rgb), .14);
overflow: hidden;
}
.pss-panel .pss-pnl-meter i {
position: absolute;
inset: 0 auto 0 0;
width: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent) 60%, var(--pss-accent-hi));
transform: scaleX(var(--pss-pnl-m, 0));
transform-origin: 0 50%;
transition: transform 1.2s var(--pss-ease-out);
}
.pss-panel .pss-pnl-kpi--aforo .pss-pnl-ks { margin-top: 0; }
/* minigráfica de entradas acumuladas */
.pss-panel .pss-pnl-vrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; }
.pss-panel .pss-pnl-spark { flex: none; width: 88px; height: 34px; overflow: visible; margin-bottom: -2px; }
.pss-panel .pss-pnl-spark stop { stop-color: var(--pss-accent); }
.pss-panel .pss-pnl-spark-l {
fill: none;
stroke: var(--pss-accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1.6s var(--pss-ease-out) .2s;
}
.pss-panel .pss-pnl-spark-a { opacity: 0; transition: opacity 1s var(--pss-ease) .9s; }
.pss-panel .pss-pnl-spark-d {
fill: var(--pss-accent-hi);
stroke: var(--pss-surface);
stroke-width: 2;
opacity: 0;
transition: opacity .5s var(--pss-ease) 1.5s;
}
.pss-panel .pss-pnl-app.is-in .pss-pnl-spark-l { stroke-dashoffset: 0; }
.pss-panel .pss-pnl-app.is-in .pss-pnl-spark-a,
.pss-panel .pss-pnl-app.is-in .pss-pnl-spark-d { opacity: 1; }
/* socios: al día / cuota pendiente */
.pss-panel .pss-pnl-split { display: flex; gap: 2px; height: 6px; margin-top: 2px; }
.pss-panel .pss-pnl-split i {
flex: 0 1 0%;
min-width: 4px;
border-radius: 99px;
transition: flex-grow 1.2s var(--pss-ease-out);
}
.pss-panel .pss-pnl-split-ok { flex-grow: 1; background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent)); }
.pss-panel .pss-pnl-split-w { flex-grow: 0; background: var(--pss-warn); box-shadow: 0 0 8px rgba(var(--pss-warn-rgb), .5); }
/* aforo: anillo + cifra */
.pss-panel .pss-pnl-aforo { display: flex; align-items: center; gap: 14px; margin-top: -2px; }
.pss-panel .pss-pnl-ring { position: relative; flex: none; width: 52px; height: 52px; }
.pss-panel .pss-pnl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pss-panel .pss-pnl-ring-t { fill: none; stroke: rgba(var(--pss-accent-rgb), .14); stroke-width: 4; }
.pss-panel .pss-pnl-ring-p {
--pss-pnl-rc: var(--pss-accent);
fill: none;
stroke: var(--pss-pnl-rc);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
filter: drop-shadow(0 0 3px rgba(var(--pss-accent-rgb), .7));
transition: stroke-dashoffset 1.1s var(--pss-ease-out), stroke .4s var(--pss-ease);
}
.pss-panel .pss-pnl-kpi--aforo.is-warn .pss-pnl-ring-p { stroke: var(--pss-warn); filter: drop-shadow(0 0 3px rgba(var(--pss-warn-rgb), .7)); }
.pss-panel .pss-pnl-ring-n {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--pss-text2);
font-variant-numeric: tabular-nums;
}
.pss-panel .pss-pnl-kv { display: inline-flex; align-items: baseline; gap: 3px; }
.pss-panel .pss-pnl-of { font-size: 15px; font-weight: 500; color: var(--pss-text3); letter-spacing: 0; }
.pss-panel .pss-pnl-val.is-tick { animation: pss-pnl-tick .6s var(--pss-ease); }
/* ---------- rejilla: gráfica · directo · avisos ---------- */
.pss-panel .pss-pnl-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
grid-template-rows: auto auto;
gap: 14px;
margin-top: 14px;
}
.pss-panel .pss-pnl-chart { grid-column: 1; grid-row: 1; }
.pss-panel .pss-pnl-feed { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-height: 0; }
.pss-panel .pss-pnl-alerts { grid-column: 1; grid-row: 2; }
/* ---------- gráfica de afluencia ---------- */
.pss-panel .pss-pnl-legend { display: flex; align-items: center; gap: 14px; flex: none; padding-top: 2px; }
.pss-panel .pss-pnl-legend li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--pss-text2); }
.pss-panel .pss-pnl-sw {
width: 10px;
height: 10px;
border-radius: 3px;
background: linear-gradient(180deg, var(--pss-accent-hi), var(--pss-accent));
}
.pss-panel .pss-pnl-sw--fc { background: rgba(var(--pss-accent-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--pss-accent-rgb), .3); }
.pss-panel .pss-pnl-plot {
--pss-pnl-ph: 188px;
position: relative;
height: calc(var(--pss-pnl-ph) + 30px);
margin: 14px 18px 12px 18px;
padding: 0 0 30px 34px;
border-radius: 8px;
outline-offset: 6px;
}
.pss-panel .pss-pnl-plot:focus-visible { outline: 2px solid var(--pss-accent-hi); }
.pss-panel .pss-pnl-yax {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--pss-pnl-ph);
pointer-events: none;
}
.pss-panel .pss-pnl-gl {
position: absolute;
left: 34px;
right: 0;
height: 1px;
background: rgba(255, 255, 255, .06);
transition: bottom .8s var(--pss-ease);
}
.pss-panel .pss-pnl-gl--0 { background: rgba(255, 255, 255, .13); }
.pss-panel .pss-pnl-gl span {
position: absolute;
right: calc(100% + 8px);
top: -6px;
font-family: var(--pss-f-mono);
font-size: 10px;
line-height: 12px;
color: var(--pss-text3);
font-variant-numeric: tabular-nums;
}
.pss-panel .pss-pnl-bars {
position: relative;
display: grid;
grid-template-columns: repeat(18, minmax(0, 1fr));
height: var(--pss-pnl-ph);
}
.pss-panel .pss-pnl-col {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
}
.pss-panel .pss-pnl-col::before {
/* franja de la hora señalada */
content: "";
position: absolute;
inset: 0 1px;
border-radius: 6px;
background: rgba(255, 255, 255, .035);
opacity: 0;
transition: opacity var(--pss-d-1) var(--pss-ease);
}
.pss-panel .pss-pnl-col.is-hover::before { opacity: 1; }
.pss-panel .pss-pnl-fc,
.pss-panel .pss-pnl-b {
position: absolute;
bottom: 0;
left: 50%;
width: min(62%, 22px);
border-radius: 4px 4px 0 0;
transform: translateX(-50%);
transition: height .9s var(--pss-ease-out) var(--pss-pnl-bd, 0ms), opacity .4s var(--pss-ease);
}
.pss-panel .pss-pnl-fc {
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .24), rgba(var(--pss-accent-rgb), .1));
box-shadow: inset 0 1px 0 rgba(var(--pss-accent-hi-rgb), .35);
}
.pss-panel .pss-pnl-b {
background: linear-gradient(180deg, var(--pss-accent) 0%, rgba(var(--pss-accent-rgb), .72) 55%, rgba(var(--pss-accent-rgb), .38) 100%);
}
.pss-panel .pss-pnl-col.is-now .pss-pnl-b {
background: linear-gradient(180deg, var(--pss-accent-hi) 0%, var(--pss-accent) 60%, rgba(var(--pss-accent-rgb), .55) 100%);
box-shadow: 0 0 18px -2px rgba(var(--pss-accent-hi-rgb), .65);
}
.pss-panel .pss-pnl-col.is-hover .pss-pnl-b { filter: brightness(1.18); }
.pss-panel .pss-pnl-col.is-hover .pss-pnl-fc { background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .34), rgba(var(--pss-accent-rgb), .14)); }
.pss-panel .pss-pnl-plot.is-pre .pss-pnl-b,
.pss-panel .pss-pnl-plot.is-pre .pss-pnl-fc { height: 0 !important; }
/* línea de «ahora» */
.pss-panel .pss-pnl-nowl {
position: absolute;
top: -6px;
bottom: 0;
z-index: 2;
width: 0;
border-left: 1px solid rgba(var(--pss-accent-hi-rgb), .85);
box-shadow: 0 0 10px rgba(var(--pss-accent-hi-rgb), .6);
transition: left .9s var(--pss-ease), opacity .6s var(--pss-ease) .5s;
pointer-events: none;
}
.pss-panel .pss-pnl-nowl::after {
content: "";
position: absolute;
left: -4.5px;
bottom: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pss-accent-hi);
box-shadow: 0 0 0 3px rgba(var(--pss-accent-rgb), .25);
animation: pss-pulse 2.2s var(--pss-ease) infinite;
}
.pss-panel .pss-pnl-nowl span {
position: absolute;
top: -10px;
left: 0;
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: 6px;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-family: var(--pss-f-mono);
font-size: 10px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transform: translateX(-50%);
box-shadow: 0 6px 16px -6px rgba(var(--pss-accent-rgb), .9);
}
.pss-panel .pss-pnl-nowl.is-end span { transform: translateX(-100%); border-radius: 6px 6px 2px 6px; }
.pss-panel .pss-pnl-nowl span { transition: opacity var(--pss-d-2) var(--pss-ease); }
.pss-panel .pss-pnl-plot.is-tip .pss-pnl-nowl span { opacity: .2; }
.pss-panel .pss-pnl-plot.is-pre .pss-pnl-nowl { opacity: 0; }
.pss-panel .pss-pnl-xax {
position: absolute;
left: 34px;
right: 0;
bottom: 0;
height: 22px;
display: grid;
grid-template-columns: repeat(18, minmax(0, 1fr));
}
.pss-panel .pss-pnl-xax span {
justify-self: center;
font-family: var(--pss-f-mono);
font-size: 10px;
line-height: 22px;
color: var(--pss-text3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pss-panel .pss-pnl-xax span.is-now { color: var(--pss-accent-hi); }
/* tooltip */
.pss-panel .pss-pnl-tip {
position: absolute;
top: 0;
left: 0;
z-index: 4;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 118px;
padding: 8px 11px 9px;
border-radius: 10px;
border: 1px solid var(--pss-line2);
background: rgba(var(--pss-surface-rgb), .97);
box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .9);
opacity: 0;
visibility: hidden;
transform: translate(var(--pss-pnl-tx, 0px), var(--pss-pnl-ty, 0px)) scale(.96);
transition: opacity var(--pss-d-1) var(--pss-ease), transform .22s var(--pss-ease), visibility 0s linear var(--pss-d-1);
pointer-events: none;
white-space: nowrap;
}
.pss-panel .pss-pnl-tip.is-on { opacity: 1; visibility: visible; transform: translate(var(--pss-pnl-tx, 0px), var(--pss-pnl-ty, 0px)); transition: opacity var(--pss-d-1) var(--pss-ease), transform .22s var(--pss-ease), visibility 0s; }
.pss-panel .pss-pnl-tip b { font-family: var(--pss-f-mono); font-size: 10.5px; font-weight: 600; color: var(--pss-text3); letter-spacing: .02em; }
.pss-panel .pss-pnl-tip span { font-size: 13px; font-weight: 600; color: var(--pss-text); }
.pss-panel .pss-pnl-tip span small { font-weight: 400; font-size: 12px; color: var(--pss-text2); }
/* tabla equivalente de la gráfica (solo lectores de pantalla): sin anchura propia */
.pss-panel .pss-pnl-srt { position: absolute; left: 0; top: 0; }
.pss-panel .pss-pnl-srt table { width: 1px; table-layout: fixed; }
.pss-panel .pss-pnl-srt table * { white-space: normal; }
/* ---------- accesos en directo ---------- */
.pss-panel .pss-pnl-feed .pss-pnl-ch { padding-bottom: 10px; border-bottom: 1px solid var(--pss-line); }
.pss-panel .pss-pnl-list {
position: relative;
flex: 1 1 0;
min-height: 0;
padding: 4px 8px 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 64px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 64px), transparent 100%);
transition: opacity .25s var(--pss-ease);
}
.pss-panel .pss-pnl-list.is-swap { opacity: 0; transition-duration: .16s; }
.pss-panel .pss-pnl-row {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows .55s var(--pss-ease), opacity .45s var(--pss-ease);
}
.pss-panel .pss-pnl-row.is-enter { grid-template-rows: 0fr; opacity: 0; }
.pss-panel .pss-pnl-row .pss-pnl-rin { transition: transform .6s var(--pss-ease), background-color var(--pss-d-1) var(--pss-ease); }
.pss-panel .pss-pnl-row:hover .pss-pnl-rin { background-color: rgba(255, 255, 255, .03); }
.pss-panel .pss-pnl-row.is-enter .pss-pnl-rin { transform: translateY(-14px); }
.pss-panel .pss-pnl-rin {
position: relative;
display: flex;
align-items: center;
gap: 11px;
min-height: 0;
padding: 9px 10px;
border-radius: 10px;
overflow: hidden;
}
.pss-panel .pss-pnl-row + .pss-pnl-row .pss-pnl-rin::before {
content: "";
position: absolute;
left: 10px;
right: 10px;
top: 0;
height: 1px;
background: var(--pss-line);
}
.pss-panel .pss-pnl-row.is-new .pss-pnl-rin { animation: pss-pnl-flash 2.2s var(--pss-ease) both; }
.pss-panel .pss-pnl-row--no.is-new .pss-pnl-rin { animation-name: pss-pnl-flash-no; }
.pss-panel .pss-pnl-av {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--pss-surface2);
box-shadow: inset 0 0 0 1px var(--pss-line2);
color: var(--pss-text2);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
}
.pss-panel .pss-pnl-av svg { width: 16px; height: 16px; }
.pss-panel .pss-pnl-av::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--pss-surface);
background: var(--pss-accent);
}
.pss-panel .pss-pnl-row--no .pss-pnl-av::after { background: var(--pss-danger); }
.pss-panel .pss-pnl-row--out .pss-pnl-av::after { background: var(--pss-text3); }
.pss-panel .pss-pnl-row--man .pss-pnl-av { background: rgba(var(--pss-accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--pss-accent-rgb), .4); color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-row--man .pss-pnl-av::after { display: none; }
.pss-panel .pss-pnl-who { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.pss-panel .pss-pnl-who b { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--pss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* el detalle baja de línea si no cabe («Solo Musculación · Portillo PMR · lista local»), nunca se corta con «…» */
.pss-panel .pss-pnl-who small { font-size: 11.5px; line-height: 1.25; color: var(--pss-text3); overflow-wrap: break-word; }
.pss-panel .pss-pnl-row--no .pss-pnl-who small { color: var(--pss-danger); }
.pss-panel .pss-pnl-res { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pss-panel .pss-pnl-res time { font-family: var(--pss-f-mono); font-size: 10.5px; line-height: 1; color: var(--pss-text3); font-variant-numeric: tabular-nums; }
.pss-panel .pss-pnl-tag {
display: inline-flex;
align-items: center;
height: 19px;
padding: 0 7px;
border-radius: 6px;
border: 1px solid rgba(var(--pss-accent-rgb), .3);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.pss-panel .pss-pnl-row--no .pss-pnl-tag { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .12); color: var(--pss-danger); }
.pss-panel .pss-pnl-row--out .pss-pnl-tag { border-color: var(--pss-line2); background: rgba(255, 255, 255, .04); color: var(--pss-text2); }
.pss-panel .pss-pnl-sim {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(255, 255, 255, .07);
color: var(--pss-text2);
font-family: var(--pss-f-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .06em;
vertical-align: 1px;
}
/* ---------- avisos ---------- */
.pss-panel .pss-pnl-acount {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: 99px;
border: 1px solid rgba(var(--pss-warn-rgb), .38);
background: rgba(var(--pss-warn-rgb), .12);
color: var(--pss-warn);
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
transition: color var(--pss-d-2) var(--pss-ease), background-color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-acount.is-ok { border-color: rgba(var(--pss-accent-rgb), .35); background: rgba(var(--pss-accent-rgb), .12); color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-alist {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px 14px 14px;
transition: opacity .25s var(--pss-ease);
}
/* cambio de centro: solo opacidad (sin capas compuestas sobre los avisos; en tableta pintaban mal) */
.pss-panel .pss-pnl-alist.is-swap { opacity: 0; transition-duration: .16s; }
.pss-panel .pss-pnl-al {
--pss-pnl-arg: var(--pss-warn-rgb);
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
column-gap: 10px;
row-gap: 8px;
min-width: 0;
padding: 11px 12px 12px;
border-radius: 11px;
border: 1px solid rgba(var(--pss-pnl-arg), .22);
/* color plano + brillo arriba (un degradado de alfa tan bajo se pintaba a rectángulos en tableta y móvil) */
background: rgba(var(--pss-pnl-arg), .045);
box-shadow: inset 0 1px 0 rgba(var(--pss-pnl-arg), .1);
transition: border-color var(--pss-d-3) var(--pss-ease), background-color var(--pss-d-3) var(--pss-ease), opacity var(--pss-d-3) var(--pss-ease);
}
.pss-panel .pss-pnl-al--danger { --pss-pnl-arg: var(--pss-danger-rgb); }
.pss-panel .pss-pnl-al--ok { --pss-pnl-arg: var(--pss-accent-rgb); }
.pss-panel .pss-pnl-al-ico {
display: grid;
place-items: center;
grid-row: 1 / span 2;
width: 28px;
height: 28px;
margin-top: -2px;
border-radius: 8px;
background: rgba(var(--pss-pnl-arg), .14);
color: rgb(var(--pss-pnl-arg));
}
.pss-panel .pss-pnl-al--ok .pss-pnl-al-ico { color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-al-ico svg { width: 15px; height: 15px; }
.pss-panel .pss-pnl-al-t { display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--pss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-panel .pss-pnl-al-d { font-size: 12px; line-height: 1.35; color: var(--pss-text2); min-width: 0; }
.pss-panel .pss-pnl-al-f {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding-top: 2px;
}
.pss-panel .pss-pnl-al-f time { flex: none; font-family: var(--pss-f-mono); font-size: 10.5px; color: var(--pss-text3); font-variant-numeric: tabular-nums; }
.pss-panel .pss-pnl-abtn {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 11px;
border-radius: 8px;
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .04);
color: var(--pss-text);
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: background-color var(--pss-d-1) var(--pss-ease), border-color var(--pss-d-1) var(--pss-ease), color var(--pss-d-1) var(--pss-ease), scale var(--pss-d-1) var(--pss-ease);
}
.pss-panel .pss-pnl-abtn:hover,
.pss-panel .pss-pnl-abtn:focus {
background: rgba(var(--pss-pnl-arg), .14);
border-color: rgba(var(--pss-pnl-arg), .55);
color: var(--pss-text);
}
.pss-panel .pss-pnl-abtn:focus:not(:focus-visible) { background: rgba(255, 255, 255, .04); border-color: var(--pss-line2); }
.pss-panel .pss-pnl-abtn:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 2px; }
.pss-panel .pss-pnl-abtn:active { scale: .96; }
.pss-panel .pss-pnl-abtn svg { width: 13px; height: 13px; }
.pss-panel .pss-pnl-abtn.is-busy { pointer-events: none; color: var(--pss-text2); }
.pss-panel .pss-pnl-abtn.is-busy svg { animation: pss-spin .8s linear infinite; }
.pss-panel .pss-pnl-abtn[disabled],
.pss-panel .pss-pnl-abtn[disabled]:hover {
cursor: default;
border-color: rgba(var(--pss-accent-rgb), .3);
background: rgba(var(--pss-accent-rgb), .1);
color: var(--pss-accent-hi);
}
.pss-panel .pss-pnl-al.is-flash { animation: pss-pnl-alflash 1s var(--pss-ease); }
/* ---------- vistas secundarias (Accesos, Socios, Clases, Cobros, Ajustes) ---------- */
.pss-panel .pss-pnl-sheet { display: flex; flex-direction: column; min-height: 0; }
.pss-panel .pss-pnl-sheet .pss-pnl-ch { padding-bottom: 14px; border-bottom: 1px solid var(--pss-line); align-items: center; }
.pss-panel .pss-pnl-filt { display: inline-flex; gap: 4px; flex: none; padding: 3px; border-radius: 10px; border: 1px solid var(--pss-line); background: rgba(var(--pss-bg-rgb), .6); }
.pss-panel .pss-pnl-fbtn {
height: 28px;
padding: 0 11px;
border-radius: 7px;
border: 0;
background: transparent;
color: var(--pss-text2);
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: background-color var(--pss-d-1) var(--pss-ease), color var(--pss-d-1) var(--pss-ease);
}
.pss-panel .pss-pnl-fbtn:hover { background: rgba(255, 255, 255, .05); color: var(--pss-text); }
.pss-panel .pss-pnl-fbtn[aria-pressed="true"],
.pss-panel .pss-pnl-fbtn[aria-pressed="true"]:hover { background: var(--pss-surface2); color: var(--pss-text); box-shadow: inset 0 0 0 1px rgba(var(--pss-accent-rgb), .35); }
.pss-panel .pss-pnl-fbtn:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 1px; }
.pss-panel .pss-pnl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pss-panel .pss-pnl-tbl th {
padding: 11px 16px 9px;
border-bottom: 1px solid var(--pss-line);
font-family: var(--pss-f-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-align: left;
color: var(--pss-text3);
white-space: nowrap;
}
.pss-panel .pss-pnl-tbl td {
padding: 10px 16px;
border-bottom: 1px solid var(--pss-line);
color: var(--pss-text2);
vertical-align: middle;
white-space: nowrap;
}
.pss-panel .pss-pnl-tbl tr:last-child td { border-bottom: 0; }
.pss-panel .pss-pnl-tbl tbody tr { transition: background-color var(--pss-d-1) var(--pss-ease); }
.pss-panel .pss-pnl-tbl tbody tr:hover { background: rgba(255, 255, 255, .025); }
.pss-panel .pss-pnl-tbl td.is-name { color: var(--pss-text); font-weight: 600; }
.pss-panel .pss-pnl-tbl td.is-mono { font-family: var(--pss-f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.pss-panel .pss-pnl-tbl td.is-r, .pss-panel .pss-pnl-tbl th.is-r { text-align: right; }
.pss-panel .pss-pnl-tbl .pss-pnl-tag { vertical-align: middle; }
.pss-panel .pss-pnl-tag--no { border-color: rgba(var(--pss-danger-rgb), .35); background: rgba(var(--pss-danger-rgb), .12); color: var(--pss-danger); }
.pss-panel .pss-pnl-tag--warn { border-color: rgba(var(--pss-warn-rgb), .35); background: rgba(var(--pss-warn-rgb), .12); color: var(--pss-warn); }
.pss-panel .pss-pnl-tag--mut { border-color: var(--pss-line2); background: rgba(255, 255, 255, .04); color: var(--pss-text2); }
.pss-panel .pss-pnl-tblwrap { overflow: hidden; }
.pss-panel .pss-pnl-tbl tr.is-enter td { animation: pss-pnl-flash 2.2s var(--pss-ease) both; }
.pss-panel .pss-pnl-2col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pss-panel .pss-pnl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.pss-panel .pss-pnl-stat { padding: 15px 18px; display: flex; flex-direction: column; gap: 8px; }
.pss-panel .pss-pnl-stat span { font-size: 12.5px; color: var(--pss-text2); font-weight: 500; }
.pss-panel .pss-pnl-stat b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--pss-text); }
.pss-panel .pss-pnl-stat small { font-size: 12px; color: var(--pss-text3); }
/* plazas de una clase */
.pss-panel .pss-pnl-cap { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.pss-panel .pss-pnl-capbar { position: relative; flex: 1 1 auto; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pss-panel .pss-pnl-capbar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent)); }
.pss-panel .pss-pnl-capbar.is-full i { background: linear-gradient(90deg, rgba(var(--pss-warn-rgb), .6), var(--pss-warn)); }
.pss-panel .pss-pnl-cap span { font-family: var(--pss-f-mono); font-size: 11.5px; color: var(--pss-text2); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
/* ajustes: interruptores y dispositivos */
.pss-panel .pss-pnl-set { display: flex; flex-direction: column; }
.pss-panel .pss-pnl-setrow {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
border-bottom: 1px solid var(--pss-line);
}
.pss-panel .pss-pnl-setrow:last-child { border-bottom: 0; }
.pss-panel .pss-pnl-settxt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.pss-panel .pss-pnl-settxt b { font-size: 13px; font-weight: 600; color: var(--pss-text); }
.pss-panel .pss-pnl-settxt small { font-size: 12px; line-height: 1.35; color: var(--pss-text3); }
.pss-panel .pss-pnl-sw2 {
position: relative;
flex: none;
width: 40px;
height: 24px;
border-radius: 99px;
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .08);
transition: background-color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-sw2::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--pss-text2);
box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
transition: transform var(--pss-d-2) var(--pss-ease-spring), background-color var(--pss-d-2) var(--pss-ease);
}
.pss-panel .pss-pnl-sw2:hover { background: rgba(255, 255, 255, .12); border-color: var(--pss-line3); }
.pss-panel .pss-pnl-sw2[aria-checked="true"],
.pss-panel .pss-pnl-sw2[aria-checked="true"]:hover { background: var(--pss-accent); border-color: var(--pss-accent-hi); }
.pss-panel .pss-pnl-sw2[aria-checked="true"]::after { transform: translateX(16px); background: var(--pss-on-accent); }
.pss-panel .pss-pnl-sw2:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 2px; }
.pss-panel .pss-pnl-sw2[aria-disabled="true"] { cursor: not-allowed; opacity: .75; }
.pss-panel .pss-pnl-lock { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--pss-f-mono); font-size: 10.5px; color: var(--pss-text3); text-transform: uppercase; letter-spacing: .08em; }
.pss-panel .pss-pnl-lock svg { width: 13px; height: 13px; }
/* =============================================================================
Tableta: barra lateral de iconos
============================================================================= */
/* portátiles (1101-1379): los tres avisos no caben en columnas (el botón se salía de su tarjeta)
→ lista de filas: icono · texto · acción con la hora debajo */
@media (min-width: 1101px) and (max-width: 1379px) {
.pss-panel .pss-pnl-alist { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pss-panel .pss-pnl-al {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 3px;
align-items: center;
padding: 11px 12px 11px 12px;
}
.pss-panel .pss-pnl-al-ico { grid-row: 1 / span 2; margin-top: 0; }
.pss-panel .pss-pnl-al-t { grid-column: 2; grid-row: 1; align-self: end; }
.pss-panel .pss-pnl-al-d { grid-column: 2; grid-row: 2; align-self: start; }
.pss-panel .pss-pnl-al-f { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 0; }
}
@media (max-width: 1239px) {
.pss-panel .pss-pnl-cfull { display: none; }
.pss-panel .pss-pnl-cshort { display: inline; }
.pss-panel .pss-pnl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}
@media (max-width: 1100px) {
.pss-panel .pss-pnl-app { grid-template-columns: 64px minmax(0, 1fr); }
.pss-panel .pss-pnl-side { align-items: center; padding: 18px 8px 14px; gap: 22px; }
.pss-panel .pss-pnl-brand { padding: 0; justify-content: center; }
.pss-panel .pss-pnl-logo, .pss-panel .pss-pnl-os { display: none; }
.pss-panel .pss-pnl-icono { display: block; }
.pss-panel .pss-pnl-nav { width: 100%; align-items: center; }
.pss-panel .pss-pnl-nav-i { width: 44px; height: 42px; padding: 0; justify-content: center; }
.pss-panel .pss-pnl-nav-i::before { left: -9px; }
.pss-panel .pss-pnl-nav-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pss-panel .pss-pnl-nav-n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 16px; padding: 0 4px; font-size: 9.5px; margin: 0; }
.pss-panel .pss-pnl-devs, .pss-panel .pss-pnl-utxt { display: none; }
.pss-panel .pss-pnl-date, .pss-panel .pss-pnl-sep { display: none; }
.pss-panel .pss-pnl-user { padding: 12px 0 0; justify-content: center; }
.pss-panel .pss-pnl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pss-panel .pss-pnl-kpi { min-height: 124px; }
.pss-panel .pss-pnl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pss-panel .pss-pnl-chart { grid-column: 1 / -1; grid-row: 1; }
.pss-panel .pss-pnl-feed { grid-column: 1; grid-row: 2; }
.pss-panel .pss-pnl-feed .pss-pnl-list { flex: 1 1 0; min-height: 356px; }
.pss-panel .pss-pnl-alerts { grid-column: 2; grid-row: 2; }
.pss-panel .pss-pnl-alist { grid-template-columns: minmax(0, 1fr); }
.pss-panel .pss-pnl-2col { grid-template-columns: minmax(0, 1fr); }
}
/* =============================================================================
Pantallas táctiles (tabletas incluidas): objetivos de 44 px sin cambiar el aspecto
============================================================================= */
@media (pointer: coarse) {
.pss-panel .pss-pnl-open { height: 44px; }
.pss-panel .pss-pnl-cbtn { height: 36px; }
.pss-panel .pss-pnl-cbtn::after { content: ""; position: absolute; inset: -4px 0; }
.pss-panel .pss-pnl-abtn { position: relative; }
.pss-panel .pss-pnl-abtn::after { content: ""; position: absolute; inset: -8px -4px; }
.pss-panel .pss-pnl-fbtn { position: relative; }
.pss-panel .pss-pnl-fbtn::after { content: ""; position: absolute; inset: -8px 0; }
.pss-panel .pss-pnl-sw2::before { content: ""; position: absolute; inset: -10px -4px; }
}
/* =============================================================================
Móvil (≤ 767): el marco se adapta — menú arriba y tarjetas apiladas
============================================================================= */
@media (max-width: 767px) {
.pss-panel .pss-panel-glow { --pss-glow-size: 640px; --pss-glow-y: 55%; }
.pss-panel .pss-panel-head { margin-bottom: 30px; }
.pss-panel .pss-pnl-meta { gap: 10px; margin-bottom: 14px; }
.pss-panel .pss-pnl-hint { font-size: 13px; }
.pss-panel .pss-pnl-browser { transform: none; }
.pss-panel .pss-pnl-halo { left: 0; right: 0; top: 10%; bottom: 10%; }
.pss-panel .pss-pnl-app { display: block; font-size: 13px; }
.pss-panel .pss-pnl-side {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 8px;
padding: 12px 10px 8px;
border-right: 0;
border-bottom: 1px solid var(--pss-line);
background: var(--pss-bg);
}
.pss-panel .pss-pnl-brand { flex: 1 1 auto; justify-content: flex-start; padding: 0 4px; height: 24px; }
.pss-panel .pss-pnl-logo { display: block; height: 16px; }
.pss-panel .pss-pnl-os { display: inline-flex; height: 17px; font-size: 9.5px; }
.pss-panel .pss-pnl-icono { display: none; }
.pss-panel .pss-pnl-devs { display: none; }
.pss-panel .pss-pnl-user { order: 2; margin: 0; padding: 0; border: 0; }
.pss-panel .pss-pnl-uav { width: 26px; height: 26px; font-size: 10px; }
.pss-panel .pss-pnl-nav {
order: 3;
flex: 1 1 100%;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 2px;
}
.pss-panel .pss-pnl-nav-i {
flex-direction: column;
justify-content: center;
gap: 5px;
width: auto;
height: 50px;
padding: 0 2px;
font-size: 10px;
}
.pss-panel .pss-pnl-nav-i svg { width: 18px; height: 18px; }
.pss-panel .pss-pnl-nav-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-weight: 600; letter-spacing: .01em; }
.pss-panel .pss-pnl-nav-i::before { left: 50%; top: auto; bottom: -9px; width: 20px; height: 3px; border-radius: 3px 3px 0 0; transform: translateX(-50%) scaleX(0); }
.pss-panel .pss-pnl-nav-i.is-on::before { transform: translateX(-50%) scaleX(1); }
.pss-panel .pss-pnl-nav-n { top: 2px; right: 50%; margin-right: -22px; }
.pss-panel .pss-pnl-main { padding: 14px 12px 14px; gap: 14px; }
.pss-panel .pss-pnl-top { flex-wrap: wrap; gap: 12px 10px; }
.pss-panel .pss-pnl-title { flex: 1 1 0; }
.pss-panel .pss-pnl-h { font-size: 20px; }
.pss-panel .pss-pnl-now { font-size: 10.5px; gap: 5px; }
.pss-panel .pss-pnl-date { display: none; }
.pss-panel .pss-pnl-sep { display: none; }
/* objetivos táctiles de 44 px como mínimo (lo que más se toca: «Abrir torno» y el selector de centro) */
.pss-panel .pss-pnl-open { min-width: 0; height: 44px; padding: 0 16px 0 13px; font-size: 13.5px; gap: 8px; border-radius: 12px; }
.pss-panel .pss-pnl-centros { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pss-panel .pss-pnl-cbtn { padding: 0 6px; height: 38px; font-size: 12.5px; }
.pss-panel .pss-pnl-cbtn::after { content: ""; position: absolute; inset: -4px 0; }
.pss-panel .pss-pnl-toast { left: 12px; right: var(--pss-pnl-tr, 12px); white-space: normal; transform: translateY(-8px) scale(.97); }
/* botones pequeños de las tarjetas: mismo aspecto, zona de toque ampliada a 44 px */
.pss-panel .pss-pnl-abtn { position: relative; height: 32px; padding: 0 12px; }
.pss-panel .pss-pnl-abtn::after { content: ""; position: absolute; inset: -8px -4px; }
.pss-panel .pss-pnl-fbtn { position: relative; height: 32px; }
.pss-panel .pss-pnl-fbtn::after { content: ""; position: absolute; inset: -6px 0; }
.pss-panel .pss-pnl-sw2::before { content: ""; position: absolute; inset: -10px -4px; }
.pss-panel .pss-pnl-kpis { gap: 10px; }
.pss-panel .pss-pnl-kpi { min-height: 0; padding: 13px 13px 13px; gap: 9px; }
.pss-panel .pss-pnl-kh { font-size: 11.5px; }
.pss-panel .pss-pnl-kico { display: none; }
.pss-panel .pss-pnl-live { font-size: 9px; letter-spacing: .08em; gap: 5px; }
.pss-panel .pss-pnl-kpi--aforo .pss-pnl-live { display: none; }
.pss-panel .pss-pnl-val { font-size: 27px; }
.pss-panel .pss-pnl-of { font-size: 13px; }
.pss-panel .pss-pnl-aforo { gap: 10px; }
.pss-panel .pss-pnl-ring { width: 42px; height: 42px; }
.pss-panel .pss-pnl-ring-n { font-size: 9px; }
.pss-panel .pss-pnl-ks { font-size: 11.5px; line-height: 1.45; }
.pss-panel .pss-pnl-delta { margin: 0 6px 3px 0; }
.pss-panel .pss-pnl-kst { display: block; }
.pss-panel .pss-browser-act { display: none; }
.pss-panel .pss-pnl-spark { width: 66px; height: 26px; }
.pss-panel .pss-pnl-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pss-panel .pss-pnl-ch { padding: 13px 14px 0; }
.pss-panel .pss-pnl-chart .pss-pnl-ch { flex-direction: column; gap: 8px; }
.pss-panel .pss-pnl-plot { --pss-pnl-ph: 150px; margin: 12px 12px 10px; padding-left: 28px; }
.pss-panel .pss-pnl-gl { left: 28px; }
.pss-panel .pss-pnl-xax { left: 28px; }
.pss-panel .pss-pnl-xax span { font-size: 9.5px; }
.pss-panel .pss-pnl-fc, .pss-panel .pss-pnl-b { width: 64%; border-radius: 3px 3px 0 0; }
.pss-panel .pss-pnl-feed .pss-pnl-list { flex: none; height: 292px; min-height: 0; padding: 2px 4px 0; }
.pss-panel .pss-pnl-rin { padding: 8px 8px; gap: 10px; }
.pss-panel .pss-pnl-alist { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 12px; gap: 8px; }
.pss-panel .pss-pnl-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* en móvil cada vista ocupa su propio alto (no se apilan) */
.pss-panel .pss-pnl-view { display: none; transform: none; transition: none; }
.pss-panel .pss-pnl-view.is-on { display: block; animation: pss-pnl-in .45s var(--pss-ease) both; }
.pss-panel .pss-pnl-tbl th, .pss-panel .pss-pnl-tbl td { padding-left: 12px; padding-right: 12px; }
.pss-panel .pss-pnl-tbl .is-hide-m { display: none; }
.pss-panel .pss-pnl-sheet .pss-pnl-ch { flex-wrap: wrap; }
}
/* =============================================================================
Fotogramas clave
============================================================================= */
@keyframes pss-pnl-load {
0% { opacity: 1; transform: scaleX(0); }
70% { opacity: 1; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(1); }
}
@keyframes pss-pnl-flash {
0% { background-color: rgba(var(--pss-accent-rgb), .16); }
100% { background-color: rgba(var(--pss-accent-rgb), 0); }
}
@keyframes pss-pnl-flash-no {
0% { background-color: rgba(var(--pss-danger-rgb), .14); }
100% { background-color: rgba(var(--pss-danger-rgb), 0); }
}
@keyframes pss-pnl-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--pss-accent-hi-rgb), .7); }
100% { box-shadow: 0 0 0 14px rgba(var(--pss-accent-hi-rgb), 0); }
}
@keyframes pss-pnl-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes pss-pnl-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes pss-pnl-tick { 0% { color: var(--pss-accent-hi); text-shadow: 0 0 18px rgba(var(--pss-accent-hi-rgb), .7); } 100% { color: var(--pss-text); text-shadow: none; } }
@keyframes pss-pnl-alflash { 0% { box-shadow: 0 0 0 0 rgba(var(--pss-pnl-arg), .5); } 100% { box-shadow: 0 0 0 10px rgba(var(--pss-pnl-arg), 0); } }
/* =============================================================================
Movimiento reducido: todo visible y quieto
============================================================================= */
@media (prefers-reduced-motion: reduce) {
.pss-panel .pss-pnl-browser { transform: none; }
.pss-panel .pss-pnl-view,
.pss-panel .pss-pnl-row,
.pss-panel .pss-pnl-fc,
.pss-panel .pss-pnl-b,
.pss-panel .pss-pnl-nowl,
.pss-panel .pss-pnl-thumb,
.pss-panel .pss-pnl-ring-p,
.pss-panel .pss-pnl-meter i,
.pss-panel .pss-pnl-list,
.pss-panel .pss-pnl-alist,
.pss-panel .pss-pnl-toast,
.pss-panel .pss-pnl-spark-l,
.pss-panel .pss-pnl-spark-a,
.pss-panel .pss-pnl-spark-d,
.pss-panel .pss-pnl-split i { transition: none; }
}
/* ===== app ===== */
/* =============================================================================
PANTHERA OS · sección app — «La app del socio»
Por defecto (móvil y sin JS): carrusel táctil con scroll-snap.
Con JS en escritorio y tableta (.pss-app.is-fan): abanico 3D con perspectiva.
Dentro de los móviles todo se mide en em (5 % del ancho del móvil).
============================================================================= */
.pss-app {
--pss-app-w: clamp(236px, 19.4vw, 280px); /* ancho del móvil */
--pss-app-gap: 18px; /* hueco entre móviles en el carrusel táctil */
--pss-app-top: 30px; /* aire sobre los móviles en el escenario */
position: relative;
overflow: clip;
}
/* ---------- fondo ---------- */
.pss-app-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pss-app-hair {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--pss-accent-rgb), 0) 14%, rgba(var(--pss-accent-rgb), .4) 50%, rgba(var(--pss-accent-rgb), 0) 86%, transparent 100%);
}
.pss-app-grid { --pss-grid: 64px; --pss-grid-x: 66%; --pss-grid-y: 64%; opacity: .5; }
.pss-app-glow { --pss-glow-x: 66%; --pss-glow-y: 66%; --pss-glow-size: 900px; opacity: .62; }
.pss-app-glow2 { --pss-glow-x: 4%; --pss-glow-y: 8%; --pss-glow-size: 520px; opacity: .16; }
.pss-app-in { position: relative; z-index: 1; }
/* ---------- cabecera en dos columnas ---------- */
.pss-app-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: end;
gap: 22px clamp(32px, 5vw, 88px);
max-width: none;
margin-bottom: clamp(36px, 4.5vw, 64px);
}
.pss-app-head-a { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.pss-app-head-b { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; padding-bottom: 10px; }
.pss-app-head .pss-lead { max-width: 46ch; }
.pss-app-head .pss-h2 { white-space: nowrap; }
/* ---------- rejilla principal: texto | escenario ---------- */
.pss-app-main {
display: grid;
grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
grid-template-areas: "info view";
align-items: center;
gap: clamp(24px, 3.4vw, 56px);
}
.pss-app-view { grid-area: view; position: relative; min-width: 0; }
.pss-app-info { grid-area: info; }
/* =============================================================================
ESCENARIO — carrusel táctil (por defecto)
============================================================================= */
.pss-app-stage {
position: relative;
margin-inline: calc(var(--pss-gutter) * -1);
border-radius: var(--pss-r);
outline: none;
}
/* foco del teclado en el escenario: se resalta el móvil de delante (no un recuadro enorme) */
.pss .pss-app-stage:focus-visible { outline: none; }
/* Woodmart pinta [tabindex="0"]:focus-visible con !important usando --wd-otl-*: ancho 0 solo en el
escenario; sus botones interiores recuperan los 2 px */
.pss .pss-app-stage { --wd-otl-width: 0px; }
.pss .pss-app-stage * { --wd-otl-width: 2px; }
.pss .pss-app-stage:focus-visible .pss-app-slide.is-active .pss-app-phone { outline: 2px solid var(--pss-accent-hi); outline-offset: 5px; }
.pss .pss-app-stage:focus-visible .pss-app-slide.is-active .pss-app-phone::before {
content: "Usa ← y →";
position: absolute;
left: 50%;
bottom: calc(100% + 16px);
padding: 5px 10px;
border-radius: var(--pss-r-pill);
border: 1px solid rgba(var(--pss-accent-rgb), .45);
background: rgba(var(--pss-surface-rgb), .92);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
white-space: nowrap;
transform: translateX(-50%);
pointer-events: none;
}
.pss-app-track {
position: relative;
z-index: 1;
display: flex;
overflow-x: auto;
overflow-y: hidden;
padding: var(--pss-app-top) calc(50% - (var(--pss-app-w) + var(--pss-app-gap)) / 2) 64px;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pss-app-track::-webkit-scrollbar { display: none; }
.pss-app-slide {
position: relative;
flex: none;
width: calc(var(--pss-app-w) + var(--pss-app-gap));
padding-inline: calc(var(--pss-app-gap) / 2);
scroll-snap-align: center;
scroll-snap-stop: always;
transform-origin: 50% 50%;
-webkit-user-select: none;
user-select: none;
}
.pss-app-slide:not(.is-active) { cursor: pointer; }
/* capa del efecto de profundidad del carrusel táctil: el giro va aquí y no en la diapositiva, porque
Chrome calcula el punto de encaje del scroll-snap con la caja ya transformada (con el giro en la
diapositiva, tocar un punto la dejaba 4 px descentrada y algo borrosa) */
.pss-app-fx { position: relative; transform-origin: 50% 50%; }
.pss-app-slide img { -webkit-user-drag: none; }
.pss-app-lift { position: relative; transform-style: preserve-3d; transition: transform .9s var(--pss-ease); }
/* móvil: usa el ancho del escenario; los de atrás flotan suave (cada uno a su ritmo) y el de
delante se queda quieto para que sus botones se pulsen sin perseguirlos */
.pss .pss-app-phone {
--pss-phone-w: var(--pss-app-w);
animation: pss-app-bob 7.5s var(--pss-ease-io) infinite;
}
.pss .pss-app-slide.is-active .pss-app-phone { animation: none; }
.pss-app-slide:nth-child(2) .pss-app-phone { animation-delay: -1.5s; }
.pss-app-slide:nth-child(3) .pss-app-phone { animation-delay: -3s; }
.pss-app-slide:nth-child(4) .pss-app-phone { animation-delay: -4.5s; }
.pss-app-slide:nth-child(5) .pss-app-phone { animation-delay: -6s; }
/* recorte de la pantalla: en el abanico 3D la máscara radial de base (truco para Safari) se pinta a
veces en blanco sobre las tarjetas; un clip-path redondeado recorta igual en todos los navegadores */
.pss .pss-app-phone .pss-phone-screen {
-webkit-mask-image: none;
mask-image: none;
clip-path: inset(0 round calc(var(--pss-phone-w) * .154));
}
/* capa que apaga los móviles que no están delante */
.pss-app-phone::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
border-radius: inherit;
background: var(--pss-bg);
opacity: var(--pss-app-dim, 0);
pointer-events: none;
}
.pss-app-shadow { bottom: -4.5%; width: 82%; height: 6%; opacity: .9; }
/* suelo bajo el móvil central: resplandor + anillo plataforma (como el héroe) */
.pss-app-floor {
position: absolute;
left: 50%;
top: calc(var(--pss-app-top) + var(--pss-app-w) * 2.04);
z-index: 0;
width: calc(var(--pss-app-w) * 2.1);
aspect-ratio: 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
.pss-app-floor-glow {
position: absolute;
left: 50%;
top: 50%;
width: 92%;
height: 26%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .42), rgba(var(--pss-accent-rgb), .08) 60%, transparent 100%);
filter: blur(14px);
transform: translate(-50%, -50%);
}
.pss-app-ring { position: absolute; inset: 0; }
.pss-app-ring-plane { width: 100%; height: 100%; transform: perspective(1400px) rotateX(77deg); }
.pss .pss-app-ring svg { width: 100%; height: 100%; overflow: visible; animation: pss-spin 30s linear infinite; }
.pss-app-r1 { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; stroke-dasharray: 3 9; }
.pss-app-r2 { fill: rgba(var(--pss-accent-rgb), .05); stroke: rgba(var(--pss-accent-rgb), .4); stroke-width: 2; }
.pss-app-r2c {
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 220 1326;
filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), .9));
}
.pss-app-rdot { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), 1)); }
/* =============================================================================
ESCENARIO — abanico 3D (escritorio y tableta, lo activa script.js)
============================================================================= */
.pss-app.is-fan .pss-app-stage {
height: calc(var(--pss-app-top) + var(--pss-app-w) * 2.0475 + 84px);
margin-inline: 0;
touch-action: pan-y;
cursor: grab;
-webkit-user-select: none;
user-select: none;
overflow-x: clip;
}
.pss-app.is-fan.is-drag .pss-app-stage { cursor: grabbing; }
.pss-app.is-fan .pss-app-track {
position: absolute;
inset: 0;
display: block;
overflow: visible;
padding: 0;
perspective: 1800px;
perspective-origin: 50% 42%;
}
.pss-app.is-fan .pss-app-slide {
position: absolute;
left: 50%;
top: var(--pss-app-top);
width: var(--pss-app-w);
margin-left: calc(var(--pss-app-w) / -2);
padding: 0;
transition: transform .95s var(--pss-ease-out), opacity .7s var(--pss-ease);
will-change: transform, opacity;
}
.pss-app.is-fan .pss-app-phone::after { transition: opacity .7s var(--pss-ease); }
.pss-app.is-fan .pss-app-slide:not(.is-active):hover .pss-app-phone::after { opacity: calc(var(--pss-app-dim, 0) * .55); }
/* inclinación 3D del móvil de delante con el ratón (PSS.tilt escribe --pss-rx/--pss-ry en el escenario) */
.pss-app.is-fan .pss-app-slide.is-active .pss-app-lift {
transform: perspective(1400px) rotateX(var(--pss-rx, 0deg)) rotateY(var(--pss-ry, 0deg));
transition: none;
}
.pss-app.is-drag .pss-app-slide,
.pss-app.is-drag .pss-app-phone::after { transition: none; }
/* entrada: los móviles salen del centro y se abren en abanico */
.pss-app.is-intro .pss-app-slide { transition: transform 1.5s var(--pss-ease-out), opacity 1s var(--pss-ease); }
/* =============================================================================
CONTROLES: flechas, pestañas (puntos en móvil) y pausa
============================================================================= */
.pss-app-ctrl {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
.pss .pss-app-arrow,
.pss .pss-app-play {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: rgba(var(--pss-surface-rgb), .7);
color: var(--pss-text);
transition: border-color var(--pss-d-2) var(--pss-ease), background-color var(--pss-d-2) var(--pss-ease), color var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), scale var(--pss-d-1) var(--pss-ease);
}
.pss .pss-app-arrow:hover,
.pss .pss-app-play:hover {
border-color: rgba(var(--pss-accent-rgb), .6);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
box-shadow: 0 0 0 5px rgba(var(--pss-accent-rgb), .07);
}
.pss .pss-app-arrow:active,
.pss .pss-app-play:active { scale: .92; }
.pss .pss-app-arrow:focus-visible,
.pss .pss-app-play:focus-visible,
.pss .pss-app-tab:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss .pss-app-arrow svg { width: 18px; height: 18px; transition: transform var(--pss-d-2) var(--pss-ease); }
.pss .pss-app-arrow--prev:hover svg { transform: translateX(-2px); }
.pss .pss-app-arrow--next:hover svg { transform: translateX(2px); }
.pss .pss-app-play { width: 38px; height: 38px; margin-left: 4px; color: var(--pss-text2); }
.pss .pss-app-play svg { width: 15px; height: 15px; }
.pss .pss-app-play .pss-app-play-r { display: none; }
.pss .pss-app-play.is-paused .pss-app-play-p { display: none; }
.pss .pss-app-play.is-paused .pss-app-play-r { display: block; margin-left: 2px; }
.pss-app-tabs {
position: relative;
display: flex;
align-items: center;
padding: 4px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line2);
background: rgba(var(--pss-surface-rgb), .72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px -24px rgba(0, 0, 0, .9);
}
.pss-app-ind {
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 0;
border-radius: var(--pss-r-pill);
background: var(--pss-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 26px -8px rgba(var(--pss-accent-rgb), .75);
overflow: hidden;
transition: transform .55s var(--pss-ease), width .55s var(--pss-ease);
pointer-events: none;
}
.pss-app-prog {
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: rgba(var(--pss-bg-rgb), .5);
transform: scaleX(0);
transform-origin: 0 50%;
opacity: 0;
transition: opacity .3s var(--pss-ease);
}
.pss-app.is-auto .pss-app-prog { opacity: 1; }
.pss .pss-app-tab {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border-radius: var(--pss-r-pill);
color: var(--pss-text2);
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: -.005em;
white-space: nowrap;
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-app-tab:hover { color: var(--pss-text); background: transparent; }
.pss .pss-app-tab[aria-selected="true"],
.pss .pss-app-tab[aria-selected="true"]:hover { color: var(--pss-on-accent); }
.pss .pss-app-tab svg { flex: none; width: 17px; height: 17px; }
/* =============================================================================
TEXTO DE LA PANTALLA ACTIVA (paneles apilados en la misma celda)
============================================================================= */
.pss-app-info { position: relative; display: grid; min-width: 0; }
.pss-app-panel {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.pss-app-panel.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.pss-app-panel.is-out {
visibility: visible;
opacity: 0;
transform: translate3d(calc(var(--pss-app-dx, 1) * -22px), 0, 0);
transition: opacity .3s var(--pss-ease), transform .36s var(--pss-ease);
}
.pss-app-panel > * {
opacity: 0;
transform: translate3d(calc(var(--pss-app-dx, 1) * 28px), 0, 0);
}
.pss-app-panel.is-on > *,
.pss-app-panel.is-out > * { opacity: 1; transform: none; }
.pss-app-panel.is-on > * {
transition:
opacity .6s var(--pss-ease) calc(var(--pss-k, 0) * 55ms + 150ms),
transform .95s var(--pss-ease-out) calc(var(--pss-k, 0) * 55ms + 150ms);
}
.pss-app-panel > :nth-child(2) { --pss-k: 1; }
.pss-app-panel > :nth-child(3) { --pss-k: 2; }
.pss-app-panel > :nth-child(4) { --pss-k: 3; }
.pss-app-panel > :nth-child(5) { --pss-k: 4; }
.pss-app-panel > :nth-child(6) { --pss-k: 5; }
.pss-app-panel > :nth-child(7) { --pss-k: 6; }
.pss-app-pnum { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; line-height: 1; }
.pss-app-pn {
font-family: var(--pss-f-display);
font-weight: 700;
font-size: 68px;
line-height: .9;
letter-spacing: .01em;
color: transparent;
-webkit-text-stroke: 1.3px rgba(var(--pss-accent-rgb), .75);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .22), rgba(var(--pss-accent-rgb), 0) 75%);
-webkit-background-clip: text;
background-clip: text;
}
.pss-app-pof { font-family: var(--pss-f-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--pss-text3); }
.pss-app-kick {
margin: 0 0 10px;
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pss-accent);
}
.pss-app-pt {
font-family: var(--pss-f-display);
font-weight: 700;
font-size: clamp(40px, 3.5vw, 54px);
line-height: .95;
letter-spacing: .005em;
text-transform: uppercase;
color: var(--pss-text);
text-wrap: balance;
}
.pss-app-pd {
margin-top: 18px;
max-width: 40ch;
font-size: 17px;
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-app-pd strong { color: var(--pss-text); font-weight: 600; }
.pss-app-pl { display: grid; gap: 11px; margin-top: 22px; }
.pss-app-pl li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--pss-text); }
.pss-app-tick {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
}
.pss-app-tick svg { width: 11px; height: 11px; }
/* dato en directo, sincronizado con el móvil */
.pss-app-live {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 26px;
padding: 11px 16px 11px 14px;
border-radius: 14px;
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), rgba(var(--pss-surface-rgb), .6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 12.5px;
line-height: 1.2;
color: var(--pss-text2);
transition: border-color .5s var(--pss-ease), box-shadow .5s var(--pss-ease);
}
.pss-app-live-k {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-app-live-v { font-size: 14px; font-weight: 600; color: var(--pss-text); font-variant-numeric: tabular-nums; }
.pss-app-live-s { color: var(--pss-text3); }
.pss-app-live-s b { color: var(--pss-text2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pss-app-live.is-flash { animation: pss-app-flash 1s var(--pss-ease); }
.pss-app-pa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.pss .pss-app-act { gap: 9px; }
.pss .pss-app-act .pss-btn-ico { width: 16px; height: 16px; }
.pss .pss-app-act.is-busy { pointer-events: none; }
.pss .pss-app-act[aria-pressed="true"] {
background: rgba(var(--pss-warn-rgb), .12);
border-color: rgba(var(--pss-warn-rgb), .6);
color: var(--pss-warn);
box-shadow: none;
}
.pss .pss-app-act[aria-pressed="true"]:hover { background: rgba(var(--pss-warn-rgb), .18); border-color: var(--pss-warn); color: var(--pss-warn); }
.pss .pss-app-act.is-done,
.pss .pss-app-act.is-done:hover {
background: rgba(var(--pss-accent-rgb), .1);
border-color: rgba(var(--pss-accent-rgb), .5);
color: var(--pss-accent-hi);
box-shadow: none;
}
.pss-app-hint { font-size: 13px; color: var(--pss-text3); }
/* punto que late (texto y app) */
/* el anillo se anima con transform y opacity (compositor): no repinta el móvil en cada fotograma */
.pss-app-livedot {
position: relative;
flex: none;
display: inline-block;
width: .55em;
height: .55em;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 .5em rgba(var(--pss-accent-rgb), .7);
}
.pss-app-livedot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(var(--pss-accent-rgb), .55);
animation: pss-app-live 1.9s var(--pss-ease) infinite;
}
.pss-app-live-k .pss-app-livedot { width: 7px; height: 7px; }
/* =============================================================================
PANTALLAS DE LA APP (todo en em)
============================================================================= */
.pss-app-slide--page .pss-appui-hello { display: none; }
.pss-app-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: .6em;
padding: .7em .1em .75em;
}
.pss-app-top-a { display: flex; flex-direction: column; min-width: 0; }
.pss-app-top-t {
font-family: var(--pss-f-display);
font-weight: 600;
font-size: 1.5em;
line-height: 1.05;
letter-spacing: .015em;
text-transform: uppercase;
}
.pss-app-top-s {
margin-top: .45em;
font-family: var(--pss-f-mono);
font-size: .58em;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--pss-text3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pss-app-top-p { flex: none; margin-bottom: .2em; }
.pss-app-top-p b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pss-app-pill-ico { width: 1.05em; height: 1.05em; }
/* tarjetas de las pantallas: fondo opaco (degradado entre tokens) y sin posicionar; con el degradado
translúcido de base, algunas rasterizaciones del abanico 3D las pintaban blanquecinas */
.pss .pss-app-phone .pss-appui-card,
.pss .pss-app-phone .pss-app-class,
.pss .pss-app-phone .pss-app-noti {
background: linear-gradient(180deg, var(--pss-surface2), var(--pss-surface) 72%);
}
.pss .pss-app-phone .pss-appui-card { position: static; }
.pss .pss-app-phone .pss-app-class.is-mine {
background: linear-gradient(180deg, color-mix(in srgb, var(--pss-accent) 16%, var(--pss-surface)), color-mix(in srgb, var(--pss-accent) 4%, var(--pss-surface)));
}
/* ── Mi acceso ── */
.pss-app-qr { margin-top: .1em; }
/* ── Reservas ── */
.pss-app-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .26em; margin-bottom: .75em; }
.pss-app-day {
display: flex;
flex-direction: column;
align-items: center;
gap: .12em;
padding: .36em 0 .4em;
border-radius: .72em;
border: 1px solid var(--pss-line);
background: rgba(255, 255, 255, .02);
}
.pss-app-day small {
font-family: var(--pss-f-mono);
font-size: .46em;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-app-day b { font-size: .74em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pss-app-day.is-on {
border-color: rgba(var(--pss-accent-hi-rgb), .8);
background: var(--pss-accent);
color: var(--pss-on-accent);
box-shadow: 0 .45em 1.2em -.45em rgba(var(--pss-accent-rgb), .85);
}
.pss-app-day.is-on small { color: rgba(var(--pss-bg-rgb), .66); }
.pss-app-classes { display: flex; flex-direction: column; gap: .46em; }
.pss-app-class {
display: grid;
grid-template-columns: 3em minmax(0, 1fr) auto;
align-items: center;
gap: .6em;
padding: .7em .62em .7em .72em;
border-radius: .95em;
border: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--pss-surface);
transition: border-color .45s var(--pss-ease), background-color .45s var(--pss-ease), box-shadow .45s var(--pss-ease);
}
.pss-app-class.is-mine {
border-color: rgba(var(--pss-accent-rgb), .55);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .14), rgba(var(--pss-accent-rgb), .03)), var(--pss-surface);
box-shadow: 0 0 0 .18em rgba(var(--pss-accent-rgb), .08);
}
.pss-app-class.is-pulse { animation: pss-app-pulse .9s var(--pss-ease); }
.pss-app-class-h {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-right: .5em;
border-right: 1px solid var(--pss-line);
}
.pss-app-class-h b { font-family: var(--pss-f-mono); font-size: .78em; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pss-app-class-h small { margin-top: .25em; font-size: .52em; line-height: 1.2; color: var(--pss-text3); white-space: nowrap; }
.pss-app-class-i { display: flex; flex-direction: column; min-width: 0; }
.pss-app-class-i > b { font-size: .78em; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-app-class-i > small { margin-top: .14em; font-size: .56em; line-height: 1.3; color: var(--pss-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-app-cap { display: flex; align-items: center; gap: .45em; margin-top: .42em; }
.pss-app-bar { flex: 1 1 auto; max-width: 3.8em; height: .22em; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pss-app-bar i {
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent-hi));
transition: width .9s var(--pss-ease), background-color .4s;
}
.pss-app-left {
display: inline-flex;
align-items: baseline;
gap: .28em;
font-size: .55em;
font-weight: 700;
line-height: 1.2;
color: var(--pss-accent-hi);
white-space: nowrap;
transition: color .4s var(--pss-ease);
}
.pss-app-num {
display: inline-block;
min-width: .7em;
height: 1.2em;
overflow: hidden;
text-align: center;
font-family: var(--pss-f-mono);
font-variant-numeric: tabular-nums;
vertical-align: bottom;
}
.pss-app-num i { display: inline-block; font-style: normal; }
.pss-app-class[data-nivel="poco"] .pss-app-left { color: var(--pss-warn); }
.pss-app-class[data-nivel="poco"] .pss-app-bar i { background: linear-gradient(90deg, rgba(var(--pss-warn-rgb), .6), var(--pss-warn)); }
.pss-app-class[data-nivel="lleno"] .pss-app-left { color: var(--pss-danger); }
.pss-app-class[data-nivel="lleno"] .pss-app-bar i { background: linear-gradient(90deg, rgba(var(--pss-danger-rgb), .6), var(--pss-danger)); }
.pss .pss-app-book {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 6.6em;
height: 2.7em;
padding: 0 .95em;
border-radius: 99px;
background: var(--pss-accent);
color: var(--pss-on-accent);
font-size: .58em;
font-weight: 700;
line-height: 1;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .5em 1.2em -.5em rgba(var(--pss-accent-rgb), .8);
transition: background-color .25s var(--pss-ease), color .25s var(--pss-ease), box-shadow .3s var(--pss-ease), scale .15s var(--pss-ease);
}
.pss .pss-app-book:hover { background: var(--pss-accent-hi); color: var(--pss-on-accent); }
.pss .pss-app-book:active { scale: .94; }
.pss .pss-app-book:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 2px; }
.pss .pss-app-book.is-done,
.pss .pss-app-book.is-done:hover {
background: rgba(var(--pss-accent-rgb), .14);
color: var(--pss-accent-hi);
box-shadow: inset 0 0 0 1px rgba(var(--pss-accent-rgb), .6);
}
.pss .pss-app-book[disabled],
.pss .pss-app-book[disabled]:hover {
background: rgba(255, 255, 255, .05);
color: var(--pss-text3);
box-shadow: inset 0 0 0 1px var(--pss-line);
cursor: not-allowed;
}
.pss-app-book-t { display: inline-flex; align-items: center; gap: .35em; transition: opacity .15s; }
.pss-app-book-t svg { width: 1.15em; height: 1.15em; }
.pss .pss-app-book.is-busy .pss-app-book-t { opacity: 0; }
.pss .pss-app-book.is-busy::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1.25em;
height: 1.25em;
margin: -.625em 0 0 -.625em;
border-radius: 50%;
border: .18em solid rgba(var(--pss-bg-rgb), .25);
border-top-color: var(--pss-on-accent);
animation: pss-spin .7s linear infinite;
}
.pss .pss-app-book.is-done.is-busy::after { border-color: rgba(var(--pss-accent-rgb), .25); border-top-color: var(--pss-accent-hi); }
/* ── Aforo ── */
.pss-app-gauge { position: relative; width: 11.6em; aspect-ratio: 1; margin: -.3em auto 0; }
.pss .pss-app-g-svg { width: 100%; height: 100%; overflow: visible; }
.pss-app-g-ticks path { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: .9; stroke-linecap: round; }
.pss-app-g-track,
.pss-app-g-prog {
fill: none;
stroke-width: 7;
stroke-linecap: round;
transform: rotate(135deg);
transform-origin: 60px 60px;
}
.pss-app-g-track { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 75 100; }
.pss-app-g-prog {
--pss-app-gc: var(--pss-accent);
--pss-app-gc-rgb: var(--pss-accent-rgb);
stroke: var(--pss-app-gc);
stroke-dasharray: 26.25 100;
filter: drop-shadow(0 0 3px rgba(var(--pss-app-gc-rgb), .85));
transition: stroke .6s var(--pss-ease);
}
.pss-app-gauge[data-nivel="medio"] .pss-app-g-prog { --pss-app-gc: var(--pss-warn); --pss-app-gc-rgb: var(--pss-warn-rgb); }
.pss-app-gauge[data-nivel="alto"] .pss-app-g-prog { --pss-app-gc: var(--pss-danger); --pss-app-gc-rgb: var(--pss-danger-rgb); }
.pss-app-g-c {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: .1em;
text-align: center;
}
.pss-app-g-n {
font-family: var(--pss-f-display);
font-weight: 700;
font-size: 3.2em;
line-height: .95;
letter-spacing: .01em;
color: var(--pss-text);
}
.pss-app-g-l { margin-top: .4em; font-size: .6em; font-weight: 600; color: var(--pss-text2); }
.pss-app-g-cap { margin-top: .35em; font-family: var(--pss-f-mono); font-size: .5em; color: var(--pss-text3); font-variant-numeric: tabular-nums; }
.pss-app-g-row { display: flex; align-items: center; justify-content: center; gap: .6em; margin: -1.25em 0 .8em; position: relative; }
.pss-app-g-lvl { transition: color .4s, background-color .4s, border-color .4s; }
.pss-app-g-upd { font-family: var(--pss-f-mono); font-size: .48em; color: var(--pss-text3); font-variant-numeric: tabular-nums; }
.pss-app-chart { padding: .75em .85em .6em; }
.pss-app-chart-t { font-size: .64em; font-weight: 700; }
.pss-app-chart-s { font-family: var(--pss-f-mono); font-size: .48em; color: var(--pss-text3); white-space: nowrap; }
.pss-app-bars {
display: flex;
align-items: flex-end;
gap: .2em;
height: 3.9em;
margin-top: .3em;
padding-top: 1em;
}
.pss-app-bars i {
position: relative;
flex: 1 1 0;
height: calc(var(--h, .3) * 100%);
min-height: .2em;
border-radius: .2em .2em .06em .06em;
background: rgba(255, 255, 255, .1);
transition: height .9s var(--pss-ease), background-color .4s;
}
.pss-app-bars i.is-past { background: rgba(var(--pss-accent-rgb), .32); }
.pss-app-bars i.is-now {
background: linear-gradient(180deg, var(--pss-accent-hi), var(--pss-accent));
box-shadow: 0 0 .7em rgba(var(--pss-accent-rgb), .7);
}
.pss-app-bars i.is-now::after {
content: "ahora";
position: absolute;
left: 50%;
bottom: calc(100% + .25em);
font-family: var(--pss-f-mono);
font-size: .42em;
font-weight: 600;
font-style: normal;
color: var(--pss-accent-hi);
transform: translateX(-50%);
white-space: nowrap;
}
.pss-app-bars-x {
display: flex;
justify-content: space-between;
margin-top: .35em;
font-family: var(--pss-f-mono);
font-size: .44em;
color: var(--pss-text3);
}
/* ── Pagos ── */
.pss-app-fee { padding: .8em .9em .75em; }
.pss-app-k { font-size: .54em; font-weight: 600; color: var(--pss-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-app-stripe {
flex: none;
padding: .3em .6em;
border-radius: .45em;
border: 1px solid var(--pss-line2);
font-family: var(--pss-f-mono);
font-size: .46em;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text2);
}
.pss-app-amount { display: flex; align-items: baseline; gap: .4em; margin-top: .3em; }
.pss-app-amount b { font-family: var(--pss-f-display); font-weight: 600; font-size: 1.85em; line-height: 1.05; letter-spacing: .01em; }
.pss-app-amount small { font-size: .56em; color: var(--pss-text3); }
.pss-app-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6em;
margin-top: .55em;
padding-top: .55em;
border-top: 1px dashed var(--pss-line2);
font-size: .58em;
color: var(--pss-text2);
}
.pss-app-next b { display: inline-flex; align-items: center; gap: .4em; color: var(--pss-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pss-app-next.is-busy b::before {
content: "";
width: .9em;
height: .9em;
border-radius: 50%;
border: .16em solid rgba(var(--pss-accent-rgb), .25);
border-top-color: var(--pss-accent-hi);
animation: pss-spin .7s linear infinite;
}
.pss-app-cardrow { display: flex; align-items: center; gap: .45em; margin-top: .5em; font-size: .52em; color: var(--pss-text3); }
.pss-app-cardico { display: grid; place-items: center; width: 1.9em; height: 1.4em; border-radius: .3em; background: rgba(255, 255, 255, .08); color: var(--pss-text2); }
.pss-app-cardico svg { width: 1.2em; height: 1.2em; }
.pss-app-pan { font-family: var(--pss-f-mono); color: var(--pss-text2); white-space: nowrap; }
.pss-app-auto { margin-left: auto; white-space: nowrap; }
.pss-app-contract { padding: .7em .9em .65em; }
.pss-app-ct { display: flex; align-items: center; gap: .55em; min-width: 0; }
.pss-app-ct-ico {
flex: none;
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: .6em;
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
}
.pss-app-ct-ico svg { width: 1.1em; height: 1.1em; }
.pss-app-ct b { display: block; font-size: .66em; font-weight: 700; line-height: 1.25; }
.pss-app-ct small { display: block; margin-top: .15em; font-size: .5em; color: var(--pss-text3); }
.pss-app-sign { height: 2.4em; margin: .35em 0 .25em; padding: .1em .4em; border-bottom: 1px dashed var(--pss-line2); }
.pss .pss-app-sign svg { width: 100%; height: 100%; overflow: visible; }
.pss-app-sign-p {
fill: none;
stroke: var(--pss-text);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 1;
stroke-dashoffset: 0;
}
.pss-app-slide.is-active .pss-app-sign-p { animation: pss-app-sign 1.9s var(--pss-ease-io) .45s both; }
.pss-app-sign-m { display: flex; align-items: center; gap: .6em; font-family: var(--pss-f-mono); font-size: .46em; color: var(--pss-text3); }
.pss-app-signed { display: inline-flex; align-items: center; gap: .3em; margin-left: auto; font-weight: 600; color: var(--pss-accent-hi); }
.pss-app-signed svg { width: 1.15em; height: 1.15em; }
.pss-app-receipts { margin-top: .65em; }
.pss-app-rt {
display: block;
margin: 0 0 .35em .25em;
font-family: var(--pss-f-mono);
font-size: .48em;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-app-rlist { display: flex; flex-direction: column; }
.pss-app-rlist li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: .7em;
padding: .5em .35em;
border-top: 1px solid var(--pss-line);
border-radius: .5em;
font-size: .6em;
}
.pss-app-rlist li:first-child { border-top-color: transparent; }
.pss-app-rm { font-weight: 600; color: var(--pss-text); }
.pss-app-rlist b { font-family: var(--pss-f-mono); font-weight: 600; color: var(--pss-text2); }
.pss-app-paid { padding: .25em .6em; border-radius: 99px; background: rgba(var(--pss-accent-rgb), .12); color: var(--pss-accent-hi); font-size: .86em; font-weight: 700; }
.pss-app-rlist li.is-new { animation: pss-app-new 2s var(--pss-ease) both; }
/* ── Avisos ── */
.pss-app-notis { display: flex; flex-direction: column; gap: .42em; }
.pss-app-noti {
position: relative;
display: grid;
grid-template-columns: 2.1em minmax(0, 1fr) auto;
align-items: start;
gap: .6em;
padding: .6em .65em .6em .6em;
border-radius: .95em;
border: 1px solid var(--pss-line);
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--pss-surface);
}
.pss-app-noti.is-unread { border-color: rgba(var(--pss-accent-rgb), .3); }
.pss-app-noti.is-unread::after {
content: "";
position: absolute;
right: .7em;
bottom: .7em;
width: .42em;
height: .42em;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 .6em rgba(var(--pss-accent-rgb), .9);
}
.pss-app-noti.is-new { animation: pss-app-new 2s var(--pss-ease) both; }
.pss-app-noti-ico {
display: grid;
place-items: center;
width: 2.1em;
height: 2.1em;
border-radius: .65em;
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
}
.pss-app-noti-ico svg { width: 1.1em; height: 1.1em; }
.pss-app-noti-tx { display: flex; flex-direction: column; min-width: 0; padding-top: .1em; }
.pss-app-noti-tx b { font-size: .64em; font-weight: 700; line-height: 1.25; }
.pss-app-noti-tx small { margin-top: .2em; font-size: .54em; line-height: 1.35; color: var(--pss-text2); }
.pss-app-noti-h { padding-top: .35em; font-family: var(--pss-f-mono); font-size: .46em; color: var(--pss-text3); white-space: nowrap; }
/* notificación push que baja desde arriba (la crea script.js) */
.pss-app-push {
position: absolute;
left: .55em;
right: .55em;
top: 2.95em;
z-index: 8;
display: grid;
grid-template-columns: 2.2em minmax(0, 1fr);
align-items: center;
gap: .6em;
padding: .62em .75em .62em .62em;
border-radius: 1.15em;
border: 1px solid var(--pss-line2);
background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)), rgba(var(--pss-surface-rgb), .97);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1.2em 2.2em -.8em rgba(0, 0, 0, .95);
transform: translate3d(0, -150%, 0) scale(.96);
opacity: 0;
transition: transform .7s var(--pss-ease-spring), opacity .35s var(--pss-ease);
pointer-events: none;
}
.pss-app-push.is-in { transform: none; opacity: 1; }
.pss-app-push.is-out { transform: translate3d(0, -150%, 0) scale(.96); opacity: 0; transition: transform .5s var(--pss-ease-io), opacity .4s var(--pss-ease); }
.pss-app-push-ico {
display: grid;
place-items: center;
width: 2.2em;
height: 2.2em;
border-radius: .62em;
background: radial-gradient(120% 100% at 30% 0%, rgba(var(--pss-accent-rgb), .45), rgba(var(--pss-accent-rgb), 0) 70%), var(--pss-bg);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.pss .pss-app-push-ico img { width: 72%; height: auto; }
.pss-app-push-tx { display: flex; flex-direction: column; min-width: 0; }
.pss-app-push-h {
display: flex;
justify-content: space-between;
gap: .6em;
font-family: var(--pss-f-mono);
font-size: .46em;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-app-push-tx b { margin-top: .25em; font-size: .64em; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-app-push-tx small { margin-top: .1em; font-size: .54em; line-height: 1.3; color: var(--pss-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* campana del avisos activa */
.pss-app-ui-avisos .pss-appui-bell { color: var(--pss-accent-hi); border-color: rgba(var(--pss-accent-rgb), .5); background: rgba(var(--pss-accent-rgb), .12); }
/* ---------- entrada del bloque ---------- */
.pss .pss-app-view[data-pss-reveal] { transform: translate3d(0, 56px, 0) scale(.97); transition-duration: 1.2s, 1.4s, 1s; }
/* =============================================================================
FOTOGRAMAS
============================================================================= */
@keyframes pss-app-bob { 0%, 100% { transform: translate3d(0, -6px, 0); } 50% { transform: translate3d(0, 6px, 0); } }
@keyframes pss-app-live {
0% { opacity: .9; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(3); }
}
@keyframes pss-app-flash {
0% { border-color: var(--pss-line2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
25% { border-color: rgba(var(--pss-accent-rgb), .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 4px rgba(var(--pss-accent-rgb), .1); }
100% { border-color: var(--pss-line2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
}
@keyframes pss-app-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--pss-accent-rgb), .45); }
100% { box-shadow: 0 0 0 .7em rgba(var(--pss-accent-rgb), 0); }
}
@keyframes pss-app-sign { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pss-app-new {
0% { opacity: 0; transform: translate3d(0, -.6em, 0) scale(.97); background-color: rgba(var(--pss-accent-rgb), .22); }
25% { opacity: 1; transform: none; background-color: rgba(var(--pss-accent-rgb), .16); }
100% { opacity: 1; transform: none; background-color: rgba(var(--pss-accent-rgb), 0); }
}
/* =============================================================================
PUNTOS DE CORTE
============================================================================= */
/* escritorio estrecho: pestañas solo con icono */
@media (max-width: 1199px) and (min-width: 1024px) {
.pss .pss-app-tab { padding: 0 14px; }
.pss .pss-app-tab span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
/* tableta: escenario arriba, texto debajo */
@media (max-width: 1023px) {
.pss-app-head { grid-template-columns: 1fr; }
.pss-app-main {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "view" "info";
gap: 40px;
}
.pss-app-info { width: 100%; max-width: 620px; margin-inline: auto; }
/* la acción sube justo debajo de los controles, centrada bajo ellos: el móvil y su botón caben
juntos en pantalla y el cambio (aforo, reserva, cobro, QR) se ve en el móvil al pulsar. Solo
cambia el orden visual: el botón sigue siendo el único elemento enfocable del panel */
.pss-app-panel > .pss-app-pa { order: -1; --pss-k: 0; align-self: stretch; justify-content: center; margin: -8px 0 44px; }
.pss-app-glow { --pss-glow-x: 50%; --pss-glow-y: 44%; }
.pss-app-grid { --pss-grid-x: 50%; --pss-grid-y: 44%; }
}
/* móvil (390 px): carrusel táctil con puntos */
@media (max-width: 767px) {
.pss-app { --pss-app-w: min(236px, 62vw); --pss-app-gap: 16px; --pss-app-top: 24px; }
.pss-app-head { gap: 18px; margin-bottom: 28px; }
.pss-app-head .pss-h2 { white-space: normal; }
.pss-app-main { gap: 0; }
.pss-app-track { padding-bottom: 50px; }
.pss-app-slide { transition: opacity .2s linear; }
.pss-app-floor { width: calc(var(--pss-app-w) * 1.75); }
.pss .pss-app-arrow,
.pss .pss-app-play { display: none; }
.pss-app-ctrl { margin-top: -11px; }
.pss-app-tabs {
gap: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.pss-app-ind { display: none; }
/* área de toque de 44 × 44 alrededor de cada punto visible (esquinas poco redondeadas: con la
píldora, el toque en las esquinas caía en el hueco entre dos puntos) */
.pss .pss-app-tab {
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
}
/* el anillo de foco queda dentro de su área (las áreas de los puntos se tocan entre sí) */
.pss .pss-app-tab:focus-visible { outline-offset: -5px; }
.pss .pss-app-tab svg { display: none; }
.pss .pss-app-tab span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pss .pss-app-tab::before {
content: "";
width: 7px;
height: 7px;
border-radius: 99px;
background: var(--pss-line3);
transition: width .45s var(--pss-ease), background-color .3s var(--pss-ease), box-shadow .3s var(--pss-ease);
}
.pss .pss-app-tab[aria-selected="true"]::before {
width: 24px;
background: var(--pss-accent);
box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6);
}
.pss-app-info { margin-top: 14px; }
/* la acción (subida en tableta) va a todo el ancho, justo debajo de los puntos */
.pss-app-panel > .pss-app-pa { margin: 0 0 40px; }
.pss-app-pn { font-size: 54px; }
.pss-app-pt { font-size: 38px; }
.pss-app-pd { margin-top: 14px; font-size: 16px; }
.pss-app-pl { margin-top: 18px; gap: 10px; }
.pss-app-pl li { font-size: 14.5px; align-items: flex-start; }
.pss-app-pl li .pss-app-tick { margin-top: -1px; }
.pss-app-live { margin-top: 22px; }
.pss .pss-app-act { --pss-btn-h: 50px; width: 100%; }
.pss-app-hint { display: none; }
.pss-app-glow { --pss-glow-size: 620px; --pss-glow-y: 40%; }
}
/* =============================================================================
MOVIMIENTO REDUCIDO: todo visible, sin movimiento continuo
============================================================================= */
@media (prefers-reduced-motion: reduce) {
.pss .pss-app-phone,
.pss .pss-app-ring svg,
.pss-app-livedot::after { animation: none; }
.pss-app-livedot::after { opacity: 0; }
.pss-app.is-fan .pss-app-slide,
.pss-app-panel.is-on > *,
.pss-app-panel.is-out { transition: opacity .2s linear; }
.pss-app-panel > * { transform: none; }
.pss-app-slide.is-active .pss-app-sign-p { animation: none; }
}
.pss-reduced .pss-app-phone,
.pss-reduced .pss-app-ring svg,
.pss-reduced .pss-app-livedot::after { animation: none; }
/* ===== ecosistema ===== */
/* =============================================================================
PANTHERA OS · sección ecosistema («Todo Panthera, conectado»)
Rejilla bento 7/5 · 5/7 con .pss-card (foco de luz), brillo de borde al hover,
leve inclinación (PSS.tilt → --pss-rx/--pss-ry) y capturas reales en .pss-browser.
============================================================================= */
.pss-ecosistema {
position: relative;
overflow: clip;
}
/* ---------- fondo ---------- */
.pss-eco-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-eco-grid-bg { --pss-grid: 72px; --pss-grid-x: 50%; --pss-grid-y: 0%; opacity: .55; }
.pss-eco-glow { --pss-glow-x: 18%; --pss-glow-y: 8%; --pss-glow-size: 720px; opacity: .3; }
.pss-eco-in { position: relative; z-index: 1; }
/* ---------- cabecera en dos columnas ---------- */
.pss-eco-top {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
align-items: end;
gap: 24px 56px;
margin-bottom: clamp(44px, 5.2vw, 72px);
}
.pss .pss-eco-head { margin: 0; }
.pss-eco-lead { max-width: 44ch; padding-bottom: .35em; }
/* ---------- rejilla bento ---------- */
.pss-eco-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px;
}
.pss-eco-cell { display: flex; min-width: 0; }
.pss-eco-cell--plan { grid-column: span 7; }
.pss-eco-cell--web { grid-column: span 5; }
.pss-eco-cell--equipo { grid-column: span 5; }
.pss-eco-cell--acceso { grid-column: span 7; }
/* ---------- tarjeta ---------- */
.pss .pss-eco-card {
--pss-eco-pad: clamp(26px, 2.6vw, 36px);
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 600px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 38%),
var(--pss-surface);
transform: perspective(1700px) rotateX(var(--pss-rx, 0deg)) rotateY(var(--pss-ry, 0deg));
transition:
border-color var(--pss-d-3) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
translate .7s var(--pss-ease);
will-change: transform;
}
.pss .pss-eco-cell--equipo .pss-eco-card,
.pss .pss-eco-cell--acceso .pss-eco-card { min-height: 470px; }
/* 1.ª fila: la altura la marca la captura del planificador a su proporción (la web se adapta) */
@media (min-width: 1024px) {
.pss .pss-eco-cell--plan .pss-eco-card,
.pss .pss-eco-cell--web .pss-eco-card { min-height: 0; }
.pss .pss-eco-media--web { min-height: 250px; }
}
.pss .pss-eco-card:hover {
translate: 0 -4px;
border-color: var(--pss-line2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 40px 80px -40px rgba(0, 0, 0, .95),
0 24px 60px -36px rgba(var(--pss-accent-rgb), .35);
}
/* brillo que recorre el borde: solo al pasar el ratón */
.pss .pss-eco-edge {
z-index: 4;
opacity: 0;
animation-play-state: paused;
transition: opacity .6s var(--pss-ease);
}
.pss .pss-eco-card:hover .pss-eco-edge { opacity: 1; animation-play-state: running; }
/* cuerpo de texto */
.pss-eco-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--pss-eco-pad) var(--pss-eco-pad) 0;
}
.pss-eco-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
margin-bottom: 16px;
}
.pss-eco-ico {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
border: 1px solid rgba(var(--pss-accent-rgb), .3);
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .16), rgba(var(--pss-accent-rgb), .05));
color: var(--pss-accent-hi);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
transition: transform var(--pss-d-3) var(--pss-ease-spring), box-shadow var(--pss-d-3) var(--pss-ease);
}
.pss-eco-ico svg { width: 18px; height: 18px; }
.pss .pss-eco-card:hover .pss-eco-ico {
transform: rotate(-6deg) scale(1.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 22px -4px rgba(var(--pss-accent-rgb), .7);
}
.pss-eco-kicker {
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-text2);
}
.pss-eco-badge { margin-left: 2px; }
.pss .pss-eco-title {
font-size: clamp(27px, 2.5vw, 36px);
line-height: 1;
letter-spacing: .005em;
}
.pss-eco-txt {
margin-top: 12px;
max-width: 46ch;
font-size: 15.5px;
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-eco-txt strong { color: var(--pss-text); font-weight: 600; }
.pss-eco-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px 20px;
width: 100%;
margin-top: 22px;
}
.pss-eco-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pss-eco-tags li {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .03);
font-size: 12.5px;
font-weight: 500;
color: var(--pss-text2);
white-space: nowrap;
}
/* enlace (se estira a toda la tarjeta con ::after) */
.pss .pss-eco-link,
.pss .pss-eco-link:hover,
.pss .pss-eco-link:focus { color: var(--pss-accent-hi); }
.pss .pss-eco-link {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -.005em;
white-space: nowrap;
text-decoration: none;
}
.pss .pss-eco-link > span:first-child {
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
padding-bottom: 2px;
transition: background-size .5s var(--pss-ease);
}
.pss .pss-eco-link svg { flex: none; width: 17px; height: 17px; transition: transform var(--pss-d-2) var(--pss-ease); }
.pss .pss-eco-card:hover .pss-eco-link > span:first-child { background-size: 100% 1.5px; }
.pss .pss-eco-card:hover .pss-eco-link svg { transform: translateX(4px); }
.pss .pss-eco-card--web:hover .pss-eco-link svg { transform: translate(3px, -3px); }
.pss .pss-eco-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
border-radius: inherit;
}
/* capas: el ::after del enlace cubre la tarjeta entera, así que todo lo que hay entre
el enlace y la tarjeta es estático; el texto sube por encima de fotos y capturas */
.pss .pss-eco-body { position: static; }
.pss .pss-eco-body > *,
.pss .pss-eco-foot > * { position: relative; z-index: 2; }
.pss .pss-eco-body > .pss-eco-foot { position: static; }
.pss .pss-eco-foot > .pss-eco-link { position: static; }
.pss .pss-eco-link > span,
.pss .pss-eco-link > svg { position: relative; z-index: 6; }
@supports selector(:has(*)) {
/* Woodmart pinta el foco con !important usando sus variables --wd-otl-*: se apagan solo en este enlace */
.pss .pss-eco-link { --wd-otl-width: 0px; --wd-otl-style: none; --wd-otl-color: transparent; }
.pss .pss-eco-link:focus-visible { outline: none; }
.pss .pss-eco-card:has(.pss-eco-link:focus-visible) { outline: 2px solid var(--pss-accent-hi); outline-offset: 4px; }
}
/* ---------- navegador con captura ----------
Las dos ventanas (planificador y web) se tratan igual: el mismo margen que el texto a izquierda
y derecha, y solo sangran por abajo (la tarjeta las corta y un degradado funde el corte). */
.pss .pss-eco-browser {
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4);
transition: translate 1.1s var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease);
}
.pss .pss-eco-browser .pss-browser-bar { height: 38px; padding: 0 12px; gap: 10px; }
.pss .pss-eco-browser .pss-browser-dots { gap: 7px; }
.pss .pss-eco-browser .pss-browser-dots i { width: 10px; height: 10px; }
.pss .pss-eco-browser .pss-browser-url {
min-width: 0;
width: min(100%, 300px);
height: 25px;
padding: 0 12px;
font-size: 11.5px;
overflow: hidden;
}
.pss-eco-shot { overflow: hidden; }
.pss-eco-shot img { display: block; width: 100%; max-width: none; height: auto; }
.pss-eco-media {
--pss-eco-bleed: 44px;
position: relative;
z-index: 1;
flex: 1 1 auto;
display: flex;
min-width: 0;
margin: 28px var(--pss-eco-pad) calc(var(--pss-eco-bleed) * -1);
}
.pss-eco-media .pss-eco-browser { display: flex; flex-direction: column; width: 100%; }
.pss .pss-eco-card:hover .pss-eco-browser { translate: 0 -10px; }
.pss-eco-media::after {
content: "";
position: absolute;
left: -40px;
right: -40px;
bottom: -2px;
height: 90px;
z-index: 2;
background: linear-gradient(180deg, rgba(var(--pss-surface-rgb), 0), rgba(var(--pss-surface-rgb), .85));
pointer-events: none;
}
/* 1 · planificador: captura entera a su proporción; si la fila fuera más alta, la ventana crece y la
captura la cubre anclada arriba a la izquierda (solo se recorta la derecha del catálogo) */
.pss-eco-media--plan .pss-eco-shot {
flex: 1 0 auto;
position: relative;
width: 100%;
aspect-ratio: 1400 / 680;
}
.pss .pss-eco-media--plan .pss-eco-shot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 0%;
transform-origin: 34% 0%;
transition: scale 1.6s var(--pss-ease), translate 1.6s var(--pss-ease);
}
/* acercamiento anclado arriba: la barra de herramientas del planificador no se corta */
.pss .pss-eco-card--plan:hover .pss-eco-shot img { scale: 1.06; translate: 1.2% 0; }
/* 2 · web para tu club: la página se desplaza dentro de la ventana */
.pss-eco-media--web { min-height: 300px; }
.pss-eco-shot--tall { flex: 1 1 auto; position: relative; min-height: 0; }
.pss .pss-eco-shot--tall img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
transition: object-position 1.3s var(--pss-ease-io);
}
.pss .pss-eco-card--web:hover .pss-eco-shot--tall img {
object-position: 50% 100%;
transition: object-position 6s var(--pss-ease-io);
}
/* 3 · equipamiento: foto real a sangre */
.pss-eco-card--equipo { justify-content: flex-end; }
.pss-eco-photo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: inherit;
}
.pss .pss-eco-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 35%;
filter: saturate(.92) contrast(1.06) brightness(.82);
transform-origin: 60% 40%;
transition: scale 1.8s var(--pss-ease), filter 1s var(--pss-ease);
}
.pss-eco-photo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(var(--pss-bg-rgb), .1) 0%, rgba(var(--pss-bg-rgb), .3) 26%, rgba(var(--pss-bg-rgb), .86) 56%, rgba(var(--pss-bg-rgb), .97) 100%),
radial-gradient(90% 60% at 80% 0%, rgba(var(--pss-accent-rgb), .16), transparent 70%);
}
.pss .pss-eco-card--equipo:hover .pss-eco-photo img { scale: 1.07; filter: saturate(1) contrast(1.08) brightness(.9); }
.pss .pss-eco-body--bottom { padding-bottom: var(--pss-eco-pad); }
/* categorías de la tienda: enlaces reales (por encima del enlace estirado de la tarjeta) */
.pss .pss-eco-foot > .pss-eco-cats { z-index: 6; pointer-events: none; }
.pss .pss-eco-cats li {
height: auto;
padding: 0;
border: 0;
background: none;
}
.pss .pss-eco-cat,
.pss .pss-eco-cat:hover,
.pss .pss-eco-cat:focus { color: var(--pss-text); text-decoration: none; }
.pss .pss-eco-cat {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 11px 0 14px;
border-radius: var(--pss-r-pill);
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(var(--pss-bg-rgb), .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 12.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition:
border-color var(--pss-d-2) var(--pss-ease),
background-color var(--pss-d-2) var(--pss-ease),
box-shadow var(--pss-d-2) var(--pss-ease),
scale var(--pss-d-1) var(--pss-ease);
}
.pss .pss-eco-cat svg {
flex: none;
width: 13px;
height: 13px;
color: var(--pss-accent-hi);
transition: transform var(--pss-d-2) var(--pss-ease);
}
.pss .pss-eco-cat:hover {
border-color: rgba(var(--pss-accent-rgb), .6);
background: rgba(var(--pss-accent-rgb), .16);
box-shadow: 0 0 22px -8px rgba(var(--pss-accent-rgb), .8);
}
.pss .pss-eco-cat:hover svg { transform: translateX(2px); }
.pss .pss-eco-cat:active { scale: .96; }
.pss .pss-eco-cat:focus-visible { outline-offset: 2px; }
@supports selector(:has(*)) {
/* sobre una categoría, el «Ver el catálogo» no se subraya (no es ahí adonde va el clic) */
.pss .pss-eco-card:has(.pss-eco-cat:hover) .pss-eco-link > span:first-child { background-size: 0 1.5px; }
.pss .pss-eco-card:has(.pss-eco-cat:hover) .pss-eco-link svg { transform: none; }
}
/* 4 · control de acceso: texto + esquema del hardware */
.pss .pss-eco-card--acceso {
flex-direction: row;
align-items: stretch;
}
.pss .pss-eco-card--acceso .pss-eco-body {
flex: 0 0 43%;
padding-bottom: var(--pss-eco-pad);
}
.pss .pss-eco-card--acceso .pss-eco-foot { margin-top: auto; padding-top: 22px; }
.pss-eco-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pss-eco-legend li {
display: flex;
align-items: baseline;
gap: 11px;
font-size: 13.5px;
line-height: 1.4;
color: var(--pss-text2);
}
.pss-eco-legend-dot {
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pss-accent);
box-shadow: 0 0 10px rgba(var(--pss-accent-rgb), .9);
transform: translateY(-2px);
}
.pss-eco-scene {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 22px 22px 16px 4px;
}
.pss-eco-scene::before {
content: "";
position: absolute;
inset: 8% 4% 0 0;
background: radial-gradient(60% 55% at 55% 70%, rgba(var(--pss-accent-rgb), .1), transparent 70%);
pointer-events: none;
}
.pss .pss-eco-hw { position: relative; width: 100%; max-width: 470px; height: auto; overflow: hidden; }
/* ---------- esquema SVG del hardware ---------- */
.pss-eco-hw .pss-eco-st-a { stop-color: var(--pss-surface2); }
.pss-eco-hw .pss-eco-st-b { stop-color: #FFFFFF; stop-opacity: .1; }
.pss-eco-hw .pss-eco-st-c { stop-color: var(--pss-surface); }
.pss-eco-hw .pss-eco-st-l1 { stop-color: #FFFFFF; stop-opacity: .2; }
.pss-eco-hw .pss-eco-st-l2 { stop-color: var(--pss-surface2); }
.pss-eco-hw .pss-eco-st-b1 { stop-color: var(--pss-accent-hi); stop-opacity: .55; }
.pss-eco-hw .pss-eco-st-b2 { stop-color: var(--pss-accent-hi); stop-opacity: 0; }
.pss-eco-hw .pss-eco-st-f0 { stop-color: #FFFFFF; stop-opacity: 0; }
.pss-eco-hw .pss-eco-st-f1 { stop-color: #FFFFFF; stop-opacity: .26; }
.pss-eco-hw .pss-eco-st-g1 { stop-color: var(--pss-accent); stop-opacity: .26; }
.pss-eco-hw .pss-eco-st-g0 { stop-color: var(--pss-accent); stop-opacity: 0; }
.pss-eco-hw .pss-eco-st-h1 { stop-color: var(--pss-text); }
.pss-eco-hw .pss-eco-st-h2 { stop-color: var(--pss-text3); }
.pss-eco-hw .pss-eco-st-h3 { stop-color: var(--pss-surface2); }
.pss-eco-hw .h-glow { fill: url(#pss-eco-g-glow); }
.pss-eco-hw .h-persp path { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.pss-eco-hw .h-floor { stroke: url(#pss-eco-g-floor); stroke-width: 1.2; }
.pss-eco-hw .h-cable { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pss-eco-hw .h-up { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.4; stroke-dasharray: 3 5; }
/* servidor */
.pss-eco-hw .h-srv-card { fill: var(--pss-surface2); stroke: var(--pss-line3); stroke-width: 1; animation: pss-eco-srv var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-srv-ico rect { fill: none; stroke: var(--pss-accent-hi); stroke-width: 1.5; }
.pss-eco-hw .h-srv-ico circle { fill: var(--pss-accent-hi); }
.pss-eco-hw .h-srv-t { fill: var(--pss-text); font-family: var(--pss-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.pss-eco-hw .h-srv-sep { stroke: var(--pss-line2); stroke-width: 1; }
.pss-eco-hw .h-chk circle { fill: rgba(255, 255, 255, .05); stroke: var(--pss-line3); stroke-width: 1.2; }
.pss-eco-hw .h-chk path { fill: none; stroke: var(--pss-on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pss-eco-hw .h-chk text { fill: var(--pss-text3); font-family: var(--pss-f-body); font-size: 11.5px; font-weight: 500; }
.pss-eco-hw .h-chk circle { animation: pss-eco-chk-c var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-chk path { animation: pss-eco-chk-p var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-chk text { animation: pss-eco-chk-t var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-chk--2 > * { animation-delay: .14s; }
.pss-eco-hw .h-chk--3 > * { animation-delay: .28s; }
.pss-eco-hw .h-chk--4 > * { animation-delay: .42s; }
/* portillo PMR */
.pss-eco-hw .h-post { fill: url(#pss-eco-g-cab); stroke: var(--pss-line2); stroke-width: 1; }
.pss-eco-hw .h-led { fill: rgba(255, 255, 255, .16); }
.pss-eco-hw .h-glass { fill: rgba(var(--pss-accent-hi-rgb), .045); stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; }
.pss-eco-hw .h-glass-rail { fill: rgba(255, 255, 255, .14); }
.pss-eco-hw .h-isa { fill: none; stroke: var(--pss-text2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pss-eco-hw .h-isa circle { fill: var(--pss-text2); stroke: none; }
.pss-eco-hw .h-gate { transform-box: fill-box; transform-origin: 0 50%; }
/* torno */
.pss-eco-hw .h-cab { fill: url(#pss-eco-g-cab); stroke: var(--pss-line2); stroke-width: 1; }
.pss-eco-hw .h-seam { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.pss-eco-hw .h-lid { fill: url(#pss-eco-g-lid); stroke: var(--pss-line2); stroke-width: 1; stroke-linejoin: round; }
.pss-eco-hw .h-lector { fill: var(--pss-bg); stroke: var(--pss-line3); stroke-width: 1; }
.pss-eco-hw .h-lector-win { fill: rgba(var(--pss-accent-rgb), .3); }
.pss-eco-hw .h-beam { fill: url(#pss-eco-g-beam); opacity: 0; }
.pss-eco-hw .h-disp { fill: var(--pss-bg); stroke: var(--pss-line2); stroke-width: 1; }
.pss-eco-hw .h-disp-x { fill: none; stroke: rgba(var(--pss-danger-rgb), .7); stroke-width: 2.4; stroke-linecap: round; }
.pss-eco-hw .h-disp-ok { fill: none; stroke: var(--pss-accent-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pss-eco-hw .h-arms-box { fill: none; stroke: none; }
.pss-eco-hw .h-arms { transform-box: fill-box; transform-origin: 50% 50%; }
.pss-eco-hw .h-arm-b { stroke: rgba(0, 0, 0, .6); stroke-width: 9; stroke-linecap: round; }
.pss-eco-hw .h-arm-f { stroke: var(--pss-text2); stroke-width: 5.5; stroke-linecap: round; }
.pss-eco-hw .h-hub { fill: url(#pss-eco-g-hub); stroke: var(--pss-line3); stroke-width: 1; }
/* puente */
.pss-eco-hw .h-box { fill: var(--pss-surface2); stroke: var(--pss-line3); stroke-width: 1; }
.pss-eco-hw .h-box-vent { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.4; stroke-linecap: round; }
.pss-eco-hw .h-box-led { fill: rgba(255, 255, 255, .18); }
.pss-eco-hw .h-box-led--a { fill: var(--pss-accent-lo); }
.pss-eco-hw .h-pk {
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 9 220;
stroke-dashoffset: 9;
opacity: 0;
filter: drop-shadow(0 0 4px rgba(var(--pss-accent-hi-rgb), .95));
}
.pss-eco-hw .h-pk--up1,
.pss-eco-hw .h-pk--dn1,
.pss-eco-hw .h-pk--up2,
.pss-eco-hw .h-pk--dn2 { stroke-dasharray: 14 220; stroke-dashoffset: 14; }
.pss-eco-hw .h-rele { opacity: 0; }
.pss-eco-hw .h-rele rect { fill: rgba(var(--pss-accent-rgb), .14); stroke: rgba(var(--pss-accent-rgb), .55); stroke-width: 1; }
.pss-eco-hw .h-rele circle { fill: var(--pss-accent-hi); }
.pss-eco-hw .h-rele text { fill: var(--pss-accent-hi); font-family: var(--pss-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.pss-eco-hw .h-lbl text { fill: var(--pss-text3); font-family: var(--pss-f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pss-eco-hw .h-lbl-line { fill: none; stroke: var(--pss-line3); stroke-width: 1; }
.pss-eco-hw .h-lbl-dot { fill: var(--pss-accent); }
/* ciclo de 9 s: torno (0-50 %) y portillo PMR con el mismo QR (53-100 %) */
.pss-eco-hw { --pss-eco-cyc: 9s; }
.pss-eco-hw .h-beam--1 { animation: pss-eco-beam1 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-beam--2 { animation: pss-eco-beam2 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-lector-win { animation: pss-eco-win var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--1 { animation: pss-eco-pk1 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--up1 { animation: pss-eco-up1 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--dn1 { animation: pss-eco-dn1 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--2 { animation: pss-eco-pk2 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--3 { animation: pss-eco-pk3 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--up2 { animation: pss-eco-up2 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--dn2 { animation: pss-eco-dn2 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-pk--4 { animation: pss-eco-pk4 var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-box-led--c { animation: pss-eco-boxled var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-led--t { animation: pss-eco-ledt var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-disp-ok { animation: pss-eco-ok var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-disp-x { animation: pss-eco-x var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-rele { animation: pss-eco-rele var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-arms { animation: pss-eco-arms var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-led--pmr { animation: pss-eco-ledp var(--pss-eco-cyc) linear infinite; }
.pss-eco-hw .h-gate { animation: pss-eco-gate var(--pss-eco-cyc) linear infinite; }
@keyframes pss-eco-beam1 { 0% { opacity: 0; } 1.5% { opacity: .95; } 7% { opacity: .85; } 9.5%, 100% { opacity: 0; } }
@keyframes pss-eco-beam2 { 0%, 53% { opacity: 0; } 54.5% { opacity: .95; } 60% { opacity: .85; } 62.5%, 100% { opacity: 0; } }
@keyframes pss-eco-win {
0%, 100% { fill: rgba(var(--pss-accent-rgb), .3); }
1.5%, 8% { fill: var(--pss-accent-hi); }
10%, 53% { fill: rgba(var(--pss-accent-rgb), .3); }
54.5%, 61% { fill: var(--pss-accent-hi); }
63% { fill: rgba(var(--pss-accent-rgb), .3); }
}
@keyframes pss-eco-pk1 { 0%, 8% { stroke-dashoffset: 9; opacity: 0; } 8.5% { opacity: 1; } 15% { stroke-dashoffset: -100; opacity: 1; } 15.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-up1 { 0%, 15% { stroke-dashoffset: 14; opacity: 0; } 15.5% { opacity: 1; } 20% { stroke-dashoffset: -100; opacity: 1; } 20.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-dn1 { 0%, 27.5% { stroke-dashoffset: 14; opacity: 0; } 28% { opacity: 1; } 32.5% { stroke-dashoffset: -100; opacity: 1; } 33%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-pk2 { 0%, 33% { stroke-dashoffset: 9; opacity: 0; } 33.5% { opacity: 1; } 38.5% { stroke-dashoffset: -100; opacity: 1; } 39%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-pk3 { 0%, 60% { stroke-dashoffset: 9; opacity: 0; } 60.5% { opacity: 1; } 66% { stroke-dashoffset: -100; opacity: 1; } 66.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-up2 { 0%, 66% { stroke-dashoffset: 14; opacity: 0; } 66.5% { opacity: 1; } 70.5% { stroke-dashoffset: -100; opacity: 1; } 71%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-dn2 { 0%, 77% { stroke-dashoffset: 14; opacity: 0; } 77.5% { opacity: 1; } 81.5% { stroke-dashoffset: -100; opacity: 1; } 82%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-pk4 { 0%, 82% { stroke-dashoffset: 9; opacity: 0; } 82.5% { opacity: 1; } 90% { stroke-dashoffset: -100; opacity: 1; } 90.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-eco-srv {
0%, 20%, 30%, 70.5%, 80%, 100% { stroke: var(--pss-line3); }
21%, 28%, 71.5%, 78% { stroke: rgba(var(--pss-accent-rgb), .75); }
}
@keyframes pss-eco-chk-c {
0%, 21% { fill: rgba(255, 255, 255, .05); stroke: var(--pss-line3); }
21.5%, 46% { fill: var(--pss-accent); stroke: var(--pss-accent-hi); }
46.5%, 71.5% { fill: rgba(255, 255, 255, .05); stroke: var(--pss-line3); }
72%, 97% { fill: var(--pss-accent); stroke: var(--pss-accent-hi); }
97.5%, 100% { fill: rgba(255, 255, 255, .05); stroke: var(--pss-line3); }
}
@keyframes pss-eco-chk-p { 0%, 21% { opacity: 0; } 21.5%, 46% { opacity: 1; } 46.5%, 71.5% { opacity: 0; } 72%, 97% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes pss-eco-chk-t { 0%, 21% { fill: var(--pss-text3); } 21.5%, 46% { fill: var(--pss-text); } 46.5%, 71.5% { fill: var(--pss-text3); } 72%, 97% { fill: var(--pss-text); } 97.5%, 100% { fill: var(--pss-text3); } }
@keyframes pss-eco-boxled {
0%, 32.5% { fill: rgba(255, 255, 255, .18); }
33%, 39% { fill: var(--pss-accent-hi); }
39.5%, 81.5% { fill: rgba(255, 255, 255, .18); }
82%, 88% { fill: var(--pss-accent-hi); }
88.5%, 100% { fill: rgba(255, 255, 255, .18); }
}
@keyframes pss-eco-ledt {
0%, 38.5% { fill: rgba(255, 255, 255, .16); filter: none; }
39%, 50% { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 5px rgba(var(--pss-accent-hi-rgb), 1)); }
50.5%, 100% { fill: rgba(255, 255, 255, .16); filter: none; }
}
@keyframes pss-eco-ok { 0%, 38.5% { opacity: 0; } 39.5%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes pss-eco-x { 0%, 38.5% { opacity: 1; } 39.5%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes pss-eco-rele { 0%, 38.5% { opacity: 0; } 40%, 49.5% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes pss-eco-arms {
0%, 40% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
48.5%, 100% { transform: rotate(120deg); }
}
@keyframes pss-eco-ledp {
0%, 90% { fill: rgba(255, 255, 255, .16); filter: none; }
90.5%, 99% { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 5px rgba(var(--pss-accent-hi-rgb), 1)); }
99.5%, 100% { fill: rgba(255, 255, 255, .16); filter: none; }
}
@keyframes pss-eco-gate {
0%, 90.5% { transform: scaleX(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
94%, 96% { transform: scaleX(.16); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
100% { transform: scaleX(1); }
}
/* ---------- táctil: sin hover, la captura de la web se desplaza sola al verse ---------- */
@media (hover: none) {
.pss .pss-eco-card.is-vis .pss-eco-shot--tall img { animation: pss-eco-scroll 16s var(--pss-ease-io) 1s infinite; }
.pss .pss-eco-card.is-vis .pss-eco-media--plan .pss-eco-shot img { animation: pss-eco-ken 14s var(--pss-ease-io) infinite; }
}
@keyframes pss-eco-scroll {
0%, 12% { object-position: 50% 0%; }
50%, 62% { object-position: 50% 100%; }
100% { object-position: 50% 0%; }
}
@keyframes pss-eco-ken {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06) translateX(1.2%); }
}
/* ---------- tableta ---------- */
@media (max-width: 1023px) {
.pss-eco-top { grid-template-columns: 1fr; gap: 20px; }
.pss-eco-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pss-eco-cell--plan { grid-column: span 6; }
.pss-eco-cell--web { grid-column: span 3; }
.pss-eco-cell--equipo { grid-column: span 3; }
.pss-eco-cell--acceso { grid-column: span 6; }
.pss .pss-eco-card { min-height: 540px; }
.pss .pss-eco-cell--acceso .pss-eco-card { min-height: 440px; }
}
/* ---------- móvil ---------- */
@media (max-width: 767px) {
.pss-eco-top { margin-bottom: 36px; }
.pss-eco-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pss-eco-cell--plan,
.pss-eco-cell--web,
.pss-eco-cell--equipo,
.pss-eco-cell--acceso { grid-column: 1 / -1; }
.pss .pss-eco-card { --pss-eco-pad: 24px; min-height: 0; transform: none; }
.pss .pss-eco-cell--equipo .pss-eco-card { min-height: 460px; }
.pss .pss-eco-cell--acceso .pss-eco-card { min-height: 0; }
.pss .pss-eco-title { font-size: 28px; }
.pss-eco-txt { font-size: 15px; }
.pss-eco-meta { margin-bottom: 16px; }
.pss-eco-foot { margin-top: 18px; }
.pss .pss-eco-card--plan .pss-eco-tags { display: none; }
.pss-eco-media { --pss-eco-bleed: 36px; margin-top: 24px; }
.pss-eco-media::after { height: 64px; }
.pss .pss-eco-browser { border-radius: 12px; }
.pss-eco-media--web { min-height: 340px; }
/* categorías: tres botones iguales a todo el ancho, con altura cómoda para el dedo */
.pss .pss-eco-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.pss .pss-eco-cats li { display: block; min-width: 0; }
.pss .pss-eco-cat { width: 100%; justify-content: center; height: 42px; padding: 0 4px; font-size: 13px; }
.pss .pss-eco-cat svg { display: none; }
.pss .pss-eco-card--acceso { flex-direction: column; }
.pss .pss-eco-card--acceso .pss-eco-body { flex: none; padding-bottom: 0; }
.pss .pss-eco-card--acceso .pss-eco-foot { padding-top: 0; margin-top: 18px; }
.pss-eco-scene { padding: 18px 10px 12px; }
.pss .pss-eco-browser .pss-browser-url { width: auto; }
}
/* móviles muy estrechos (320 px): «Musculación» tiene que caber en su botón */
@media (max-width: 359px) {
.pss .pss-eco-cats { gap: 5px; }
.pss .pss-eco-cat { padding: 0 2px; font-size: 11.5px; }
}
/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
.pss .pss-eco-card,
.pss .pss-eco-card:hover { transform: none; translate: none; }
.pss .pss-eco-card:hover .pss-eco-browser,
.pss .pss-eco-card:hover .pss-eco-shot img,
.pss .pss-eco-card:hover .pss-eco-photo img { translate: none; scale: none; }
.pss .pss-eco-card--web:hover .pss-eco-shot--tall img { object-position: 50% 0%; }
.pss .pss-eco-edge { display: none; }
.pss-eco-hw .h-disp-ok { opacity: 1; }
.pss-eco-hw .h-disp-x { opacity: 0; }
.pss-eco-hw .h-led--t { fill: var(--pss-accent-hi); }
}
/* ===== empieza ===== */
/* =============================================================================
PANTHERA OS · sección empieza («Empieza sin tornos»)
3 escalones con línea de progreso que se dibuja al entrar (escritorio) o con el
scroll (móvil, vertical). Miniaturas: tablet con torno virtual (JS), banco de
pruebas interactivo (JS) e instalación (CSS, ciclo de 8 s).
============================================================================= */
.pss-empieza { position: relative; overflow: clip; }
.pss-emp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-emp-grid-bg { --pss-grid: 64px; --pss-grid-x: 50%; --pss-grid-y: 58%; opacity: .5; }
.pss-emp-glow { --pss-glow-x: 50%; --pss-glow-y: 62%; --pss-glow-size: 900px; opacity: .22; }
.pss-emp-in { position: relative; z-index: 1; }
.pss .pss-emp-head { max-width: 860px; }
.pss .pss-emp-head .pss-lead { max-width: 58ch; }
/* ---------- escalones + línea de progreso ---------- */
.pss-emp-flow { position: relative; }
.pss-emp-steps {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.pss-emp-step {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
.pss-emp-cell { display: flex; align-self: stretch; flex: 1 1 auto; min-width: 0; }
/* la línea: base.js no la conoce; script.js la coloca entre el primer y el último nodo */
.pss-emp-track {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 0;
height: 2px;
border-radius: 2px;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px);
pointer-events: none;
}
.pss-emp-fill {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--pss-accent-lo), var(--pss-accent) 55%, var(--pss-accent-hi));
box-shadow: 0 0 14px rgba(var(--pss-accent-rgb), .75);
transition: width 1.9s cubic-bezier(.45, .05, .4, 1);
}
.pss-emp-fill::after {
content: "";
position: absolute;
right: -5px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
border-radius: 50%;
background: var(--pss-accent-hi);
box-shadow: 0 0 0 4px rgba(var(--pss-accent-hi-rgb), .2), 0 0 18px 2px rgba(var(--pss-accent-hi-rgb), .9);
opacity: 0;
transition: opacity .4s var(--pss-ease);
}
.pss-emp-flow.is-on .pss-emp-fill { width: 100%; }
.pss-emp-flow.is-on .pss-emp-fill::after { opacity: 1; }
.pss-emp-flow.is-done .pss-emp-fill::after { opacity: 0; transition-duration: 1s; }
.pss-emp-node {
position: relative;
z-index: 2;
flex: none;
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 30px;
border-radius: 50%;
border: 1px solid var(--pss-line2);
background: var(--pss-bg2);
box-shadow: 0 0 0 8px var(--pss-bg2);
color: var(--pss-text3);
font-family: var(--pss-f-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
font-feature-settings: "zero" 1;
transition:
background-color .5s var(--pss-ease) var(--pss-emp-d, 0s),
color .5s var(--pss-ease) var(--pss-emp-d, 0s),
border-color .5s var(--pss-ease) var(--pss-emp-d, 0s),
box-shadow .7s var(--pss-ease) var(--pss-emp-d, 0s),
transform .6s var(--pss-ease-spring) var(--pss-emp-d, 0s);
}
.pss-emp-node::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid var(--pss-accent-hi);
opacity: 0;
pointer-events: none;
}
.pss-emp-flow.is-on .pss-emp-step { --pss-emp-d: calc(var(--pss-emp-i, 0) * .88s); }
.pss-emp-flow.is-scroll .pss-emp-step { --pss-emp-d: 0s; }
.pss-emp-step.is-lit .pss-emp-node {
background: var(--pss-accent);
border-color: var(--pss-accent-hi);
color: var(--pss-on-accent);
transform: scale(1.06);
box-shadow: 0 0 0 8px var(--pss-bg2), 0 0 0 9px rgba(var(--pss-accent-rgb), .3), 0 0 34px 2px rgba(var(--pss-accent-rgb), .55);
}
.pss-emp-step.is-lit .pss-emp-node::after { animation: pss-emp-ring 2.8s var(--pss-ease) calc(var(--pss-emp-d, 0s) + .4s) infinite; }
/* ---------- tarjeta ---------- */
.pss .pss-emp-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
transition: border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), translate .6s var(--pss-ease);
}
.pss .pss-emp-card:hover { translate: 0 -3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 70px -40px rgba(0, 0, 0, .95); }
.pss-emp-stage {
position: relative;
z-index: 1;
flex: none;
height: 244px;
display: grid;
place-items: center;
overflow: hidden;
border-bottom: 1px solid var(--pss-line);
background:
radial-gradient(80% 90% at 50% 100%, rgba(var(--pss-accent-rgb), .1), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
}
.pss-emp-stage::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 22px 22px;
background-position: center center;
-webkit-mask-image: radial-gradient(70% 80% at 50% 45%, #000 20%, transparent 80%);
mask-image: radial-gradient(70% 80% at 50% 45%, #000 20%, transparent 80%);
pointer-events: none;
}
.pss-emp-body {
position: relative;
z-index: 1;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 26px 28px 30px;
}
.pss-emp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 34px; margin-bottom: 12px; }
.pss-emp-paso {
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pss-accent);
}
.pss-emp-tag {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line2);
background: rgba(255, 255, 255, .03);
font-size: 12.5px;
font-weight: 600;
color: var(--pss-text);
white-space: nowrap;
}
.pss-emp-tag--big {
height: 34px;
padding: 0 14px;
border-color: rgba(var(--pss-accent-rgb), .45);
background: rgba(var(--pss-accent-rgb), .12);
color: var(--pss-accent-hi);
font-family: var(--pss-f-display);
font-size: 20px;
font-weight: 600;
letter-spacing: .02em;
box-shadow: 0 0 24px -6px rgba(var(--pss-accent-rgb), .6);
}
.pss .pss-emp-title { font-size: clamp(23px, 1.9vw, 27px); line-height: 1.05; text-wrap: balance; }
.pss-emp-txt { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--pss-text2); text-wrap: pretty; }
/* ---------- 1 · tablet con torno virtual ---------- */
.pss-emp-stage--tablet { --pss-emp-tw: 232px; }
.pss-emp-tab {
position: relative;
width: var(--pss-emp-tw);
aspect-ratio: 4 / 3;
padding: 9px;
border-radius: 20px;
font-size: calc(var(--pss-emp-tw) * .0474); /* 11 px con la tablet de 232: todo lo de dentro va en em */
background:
linear-gradient(145deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .12) 100%),
var(--pss-surface2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 0 0 3px rgba(0, 0, 0, .35), 0 34px 50px -26px rgba(0, 0, 0, .95);
transform: perspective(1000px) rotateX(9deg) rotateY(-10deg) translateX(-20px);
}
.pss-emp-tab-cam {
position: absolute;
right: 3px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: var(--pss-bg);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.pss-emp-tab-screen {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
padding: .82em 1em .73em;
border-radius: 12px;
background:
radial-gradient(120% 70% at 50% -10%, rgba(var(--pss-accent-rgb), .14), transparent 60%),
var(--pss-bg);
overflow: hidden;
transition: box-shadow .5s var(--pss-ease);
}
.pss-emp-tab-top {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--pss-f-mono);
font-size: .77em;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-emp-tab-app { color: var(--pss-text2); }
.pss-emp-tab-door { display: inline-flex; align-items: center; gap: 5px; }
.pss-emp-tab-door i { width: .55em; height: .55em; border-radius: 50%; background: var(--pss-accent); box-shadow: 0 0 6px rgba(var(--pss-accent-rgb), .9); }
.pss-emp-tab-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .6em;
min-height: 0;
text-align: center;
}
.pss-emp-tab-ring {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
border: 2px solid var(--pss-line2);
background: rgba(255, 255, 255, .03);
color: var(--pss-text3);
transition: background-color .35s var(--pss-ease), border-color .35s var(--pss-ease), box-shadow .5s var(--pss-ease), color .35s var(--pss-ease);
}
.pss-emp-tab-ring svg { position: absolute; left: 50%; top: 50%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--pss-ease), transform .45s var(--pss-ease-spring); }
.pss-emp-tab-tri { width: 2.7em; height: 2.7em; margin: -1.35em 0 0 -1.35em; stroke-width: 3; }
.pss-emp-tab-tri circle { fill: currentColor; stroke: none; }
.pss-emp-tab-tri g { transform-origin: 20px 20px; transition: transform .9s var(--pss-ease-io); }
.pss-emp-tab-ok,
.pss-emp-tab-ko { width: 2em; height: 2em; margin: -1em 0 0 -1em; stroke-width: 3; opacity: 0; transform: scale(.5); }
.pss-emp-tab-msg { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.pss-emp-tab-t { font-size: 1.23em; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: var(--pss-text); white-space: nowrap; transition: color .3s var(--pss-ease); }
.pss-emp-tab-s { max-width: 100%; font-size: .86em; line-height: 1.3; color: var(--pss-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pss-emp-tab-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: .55em;
border-top: 1px solid var(--pss-line);
font-family: var(--pss-f-mono);
font-size: .77em;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-emp-tab-n { font-size: 1.4em; font-weight: 600; color: var(--pss-accent-hi); font-variant-numeric: tabular-nums; }
.pss-emp-tab-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 36%;
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), 0), rgba(var(--pss-accent-rgb), .18) 80%, rgba(var(--pss-accent-hi-rgb), .9) 98%, rgba(var(--pss-accent-rgb), 0));
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
.pss-emp-tab-phone {
position: absolute;
left: calc(50% + var(--pss-emp-tw) / 2 - 36px);
top: 50%;
width: 52px;
height: 100px;
margin-top: -44px;
padding: 26px 0 0;
border-radius: 12px;
background: var(--pss-bg);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), inset 0 0 0 3.5px rgba(0, 0, 0, .6), 0 22px 30px -14px rgba(0, 0, 0, .95);
opacity: 0;
transform: translate(46px, 10px) rotate(10deg);
transition: opacity .45s var(--pss-ease), transform .6s var(--pss-ease);
}
.pss-emp-tab-phone::before {
content: "";
position: absolute;
left: 50%;
top: 6px;
width: 16px;
height: 4px;
margin-left: -8px;
border-radius: 4px;
background: rgba(255, 255, 255, .12);
}
.pss-emp-tab-qr {
display: block;
width: 38px;
height: 38px;
margin: 0 auto;
padding: 3px;
border-radius: 6px;
background: var(--pss-text);
}
.pss-emp-tab-qr svg { width: 100%; height: 100%; }
.pss-emp-tab-phone::after {
content: "";
position: absolute;
left: 50%;
top: 72px;
width: 26px;
height: 5px;
margin-left: -13px;
border-radius: 5px;
background: rgba(var(--pss-accent-rgb), .8);
}
/* estados */
.pss-emp-stage--tablet:not([data-estado="idle"]) .pss-emp-tab-phone { opacity: 1; transform: translate(0, 0) rotate(-6deg); }
.pss-emp-stage--tablet[data-estado="scan"] .pss-emp-tab-ring { border-color: rgba(var(--pss-accent-rgb), .6); color: var(--pss-accent); }
.pss-emp-stage--tablet[data-estado="scan"] .pss-emp-tab-scan { animation: pss-emp-scan .8s var(--pss-ease-io) both; }
.pss-emp-stage--tablet[data-estado="ok"] .pss-emp-tab-ring {
background: var(--pss-accent);
border-color: var(--pss-accent-hi);
color: var(--pss-on-accent);
box-shadow: 0 0 0 5px rgba(var(--pss-accent-rgb), .16), 0 0 26px rgba(var(--pss-accent-rgb), .7);
}
.pss-emp-stage--tablet[data-estado="ok"] .pss-emp-tab-tri { opacity: 0; transform: scale(.6); }
.pss-emp-stage--tablet[data-estado="ok"] .pss-emp-tab-ok { opacity: 1; transform: none; }
.pss-emp-stage--tablet[data-estado="ok"] .pss-emp-tab-screen { box-shadow: inset 0 0 0 1px rgba(var(--pss-accent-rgb), .5), inset 0 0 40px rgba(var(--pss-accent-rgb), .16); }
.pss-emp-stage--tablet[data-estado="ok"] .pss-emp-tab-t { color: var(--pss-accent-hi); }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-ring {
background: rgba(var(--pss-danger-rgb), .14);
border-color: var(--pss-danger);
color: var(--pss-danger);
box-shadow: 0 0 22px rgba(var(--pss-danger-rgb), .45);
animation: pss-emp-shake .5s var(--pss-ease) both;
}
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-tri { opacity: 0; transform: scale(.6); }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-ko { opacity: 1; transform: none; }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-screen { box-shadow: inset 0 0 0 1px rgba(var(--pss-danger-rgb), .45), inset 0 0 40px rgba(var(--pss-danger-rgb), .12); }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-t { color: var(--pss-danger); }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-qr svg { opacity: .35; filter: grayscale(1); }
.pss-emp-stage--tablet[data-estado="ko"] .pss-emp-tab-phone::after { background: rgba(var(--pss-danger-rgb), .8); }
.pss-emp-tab-n.is-up { animation: pss-emp-up .5s var(--pss-ease) both; }
/* ---------- 2 · banco de pruebas de mesa ---------- */
.pss .pss-emp-bench { width: 100%; max-width: 396px; height: auto; padding: 6px 8px 0; overflow: visible; }
.pss-emp-bench .pss-emp-st-h1 { stop-color: var(--pss-accent-hi); stop-opacity: .55; }
.pss-emp-bench .pss-emp-st-h2 { stop-color: var(--pss-accent); stop-opacity: .18; }
.pss-emp-bench .pss-emp-st-h0 { stop-color: var(--pss-accent); stop-opacity: 0; }
.pss-emp-bench .pss-emp-st-t1 { stop-color: #FFFFFF; stop-opacity: .1; }
.pss-emp-bench .pss-emp-st-t2 { stop-color: #FFFFFF; stop-opacity: .03; }
.pss-emp-bench .pss-emp-st-b1 { stop-color: var(--pss-accent-hi); stop-opacity: .7; }
.pss-emp-bench .pss-emp-st-b0 { stop-color: var(--pss-accent-hi); stop-opacity: 0; }
/* aparatos: --pss-surface2 con un canto de luz arriba (como el bisel de la tablet de la tarjeta 1) */
.pss-emp-bench .pss-emp-st-d1,
.pss-emp-bench .pss-emp-st-d2 { stop-color: var(--pss-surface2); }
@supports (color: color-mix(in srgb, red, blue)) {
.pss-emp-bench .pss-emp-st-d1 { stop-color: color-mix(in srgb, var(--pss-surface2) 82%, #FFFFFF); }
}
/* en reposo la luz verde queda al 20 %: se lee como «apagada pero lista» */
.pss-emp-bench .b-halo { fill: url(#pss-emp-g-halo); opacity: .2; transition: opacity .18s linear; }
.pss-emp-bench .b-table { fill: url(#pss-emp-g-table); stroke: var(--pss-line3); stroke-width: 1; stroke-linejoin: round; }
.pss-emp-bench .b-table-edge { fill: rgba(255, 255, 255, .08); }
.pss-emp-bench .b-reflect { fill: var(--pss-accent-hi); opacity: .1; filter: blur(3px); transition: opacity .18s linear; }
.pss-emp-bench .b-wire { fill: none; stroke: var(--pss-line3); stroke-width: 2; stroke-linecap: round; }
.pss-emp-bench .b-pk { fill: none; stroke: var(--pss-accent-hi); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0; filter: drop-shadow(0 0 4px rgba(var(--pss-accent-hi-rgb), .95)); }
/* pulso del cable de datos (lector → puente) cada 3 s, solo en reposo; más fino y tenue que un paquete real */
.pss-emp-bench .b-hb { fill: none; stroke: var(--pss-accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 12 200; stroke-dashoffset: 12; opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--pss-accent-rgb), .9)); }
.pss-emp-bench[data-estado="idle"] .b-hb { animation: pss-emp-hb 3s linear .5s infinite; }
.pss-emp-bench[data-estado="idle"] .b-led--st:not(.is-ok):not(.is-ko) { animation: pss-emp-hbled 3s linear .5s infinite; }
.pss-emp-bench .b-phone { transition: transform .5s var(--pss-ease); }
.pss-emp-bench .b-phone-body { fill: url(#pss-emp-g-dev); stroke: var(--pss-line3); stroke-width: 1.2; }
.pss-emp-bench .b-phone-screen { fill: var(--pss-bg); }
.pss-emp-bench .b-phone-isla { fill: rgba(255, 255, 255, .1); }
.pss-emp-bench .b-qr-bg { fill: var(--pss-text); }
.pss-emp-bench .b-qr svg { transition: opacity .3s var(--pss-ease); }
.pss-emp-bench .b-phone-pill { fill: var(--pss-accent); transition: fill .3s var(--pss-ease); }
.pss-emp-bench .b-phone-line { fill: rgba(255, 255, 255, .1); }
.pss-emp-bench .b-stamp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-12deg) scale(.7); transition: opacity .25s var(--pss-ease), transform .35s var(--pss-ease-spring); }
.pss-emp-bench .b-stamp rect { fill: rgba(var(--pss-bg-rgb), .9); stroke: var(--pss-danger); stroke-width: 1.4; }
.pss-emp-bench .b-stamp text { fill: var(--pss-danger); font-family: var(--pss-f-mono); font-size: 7.6px; font-weight: 600; letter-spacing: .08em; }
.pss-emp-bench .b-beam { fill: url(#pss-emp-g-beam); opacity: 0; transition: opacity .15s linear; }
.pss-emp-bench .b-lector-base,
.pss-emp-bench .b-lector-neck,
.pss-emp-bench .b-lector-head { fill: url(#pss-emp-g-dev); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-bench .b-lector-win { fill: rgba(var(--pss-accent-rgb), .35); transition: fill .15s linear; }
.pss-emp-bench .b-lector-led { fill: rgba(255, 255, 255, .2); transition: fill .15s linear; }
.pss-emp-bench .b-box { fill: url(#pss-emp-g-dev); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-bench .b-vent { fill: none; stroke: var(--pss-line3); stroke-width: 1.2; stroke-linecap: round; }
.pss-emp-bench .b-led { fill: rgba(255, 255, 255, .18); transition: fill .15s linear; }
.pss-emp-bench .b-led--pwr { fill: var(--pss-accent-lo); }
.pss-emp-bench .b-rele-coil { fill: rgba(255, 255, 255, .06); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-bench .b-screw { fill: var(--pss-text3); }
.pss-emp-bench .b-bal-foot,
.pss-emp-bench .b-bal-pole,
.pss-emp-bench .b-bal-cap { fill: url(#pss-emp-g-dev); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-bench .b-bal-red { fill: rgba(var(--pss-danger-rgb), .16); stroke: rgba(var(--pss-danger-rgb), .38); stroke-width: 1; }
.pss-emp-bench .b-bal-green { fill: rgba(var(--pss-accent-rgb), .26); stroke: rgba(var(--pss-accent-hi-rgb), .55); stroke-width: 1; filter: drop-shadow(0 0 5px rgba(var(--pss-accent-rgb), .45)); transition: fill .12s linear, stroke .12s linear, filter .12s linear; }
.pss-emp-bench .b-bal-sheen { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 2; stroke-linecap: round; }
.pss-emp-bench .b-lbl text { fill: var(--pss-text2); font-family: var(--pss-f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: fill .2s linear; }
.pss-emp-bench .b-lbl .b-lbl-luz { fill: var(--pss-accent); }
/* estados del banco (data-estado en el svg; data-qr = ok | caducado) */
.pss-emp-bench:not([data-estado="idle"]) .b-phone { transform: translateX(16px); }
.pss-emp-bench[data-qr="caducado"] .b-qr svg { opacity: .3; }
.pss-emp-bench[data-qr="caducado"] .b-phone-pill { fill: var(--pss-danger); }
.pss-emp-bench[data-qr="caducado"]:not([data-estado="idle"]) .b-stamp { opacity: 1; transform: rotate(-12deg) scale(1); }
.pss-emp-bench[data-estado="lee"] .b-beam { opacity: 1; }
.pss-emp-bench[data-estado="lee"] .b-lector-win,
.pss-emp-bench[data-estado="lee"] .b-lector-led { fill: var(--pss-accent-hi); }
.pss-emp-bench .b-led--st.is-ok,
.pss-emp-bench .b-led--rele.is-ok { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 3px rgba(var(--pss-accent-hi-rgb), 1)); }
.pss-emp-bench .b-led--st.is-ko { fill: var(--pss-danger); filter: drop-shadow(0 0 3px rgba(var(--pss-danger-rgb), 1)); }
.pss-emp-bench[data-estado="luz"] .b-bal-green { fill: var(--pss-accent-hi); stroke: #FFFFFF; filter: drop-shadow(0 0 8px rgba(var(--pss-accent-hi-rgb), 1)); }
.pss-emp-bench[data-estado="luz"] .b-halo { opacity: 1; }
.pss-emp-bench[data-estado="luz"] .b-reflect { opacity: .45; }
.pss-emp-bench[data-estado="luz"] .b-lbl .b-lbl-luz { fill: var(--pss-accent-hi); }
/* botones y estado del banco */
.pss-emp-try { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pss .pss-emp-qrbtn { --pss-btn-h: 42px; --pss-btn-px: 16px; }
.pss .pss-emp-qrbtn .pss-btn-ico { width: 17px; height: 17px; color: var(--pss-accent-hi); }
.pss .pss-emp-qrbtn--ko .pss-btn-ico { color: var(--pss-danger); }
.pss .pss-emp-qrbtn--ko:hover { border-color: rgba(var(--pss-danger-rgb), .55); background: rgba(var(--pss-danger-rgb), .07); box-shadow: 0 0 0 5px rgba(var(--pss-danger-rgb), .06); }
.pss .pss-emp-qrbtn.is-on { border-color: rgba(var(--pss-accent-rgb), .7); background: rgba(var(--pss-accent-rgb), .12); }
.pss .pss-emp-qrbtn--ko.is-on { border-color: rgba(var(--pss-danger-rgb), .7); background: rgba(var(--pss-danger-rgb), .1); }
.pss-emp-st {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 40px;
margin-top: 14px;
padding: 10px 14px 12px;
border-radius: 12px;
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .5);
font-family: var(--pss-f-mono);
font-size: 12px;
line-height: 1.35;
color: var(--pss-text2);
overflow: hidden;
transition: border-color .3s var(--pss-ease);
}
.pss-emp-st-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pss-text3); transition: background-color .2s linear, box-shadow .2s linear; }
.pss-emp-st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .05); }
.pss-emp-st-bar i { display: block; width: 0; height: 100%; background: var(--pss-accent-hi); box-shadow: 0 0 8px rgba(var(--pss-accent-hi-rgb), .9); }
.pss-emp-st[data-estado="lee"] .pss-emp-st-dot { background: var(--pss-warn); box-shadow: 0 0 8px rgba(var(--pss-warn-rgb), .8); }
.pss-emp-st[data-estado="ok"] { border-color: rgba(var(--pss-accent-rgb), .45); color: var(--pss-text); }
.pss-emp-st[data-estado="ok"] .pss-emp-st-dot { background: var(--pss-accent-hi); box-shadow: 0 0 10px rgba(var(--pss-accent-hi-rgb), .95); }
.pss-emp-st[data-estado="ko"] { border-color: rgba(var(--pss-danger-rgb), .45); color: var(--pss-text); }
.pss-emp-st[data-estado="ko"] .pss-emp-st-dot { background: var(--pss-danger); box-shadow: 0 0 10px rgba(var(--pss-danger-rgb), .9); }
/* ---------- 3 · instalación (ciclo CSS de 8 s) ---------- */
.pss-emp-stage--inst {
grid-template-columns: minmax(0, 1fr) 138px;
gap: 10px;
padding: 0 22px 0 26px;
place-items: center stretch;
}
.pss-emp-check { position: relative; display: flex; flex-direction: column; gap: 11px; }
.pss-emp-check li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
color: var(--pss-text3);
animation: pss-emp-li 8s linear infinite;
}
.pss-emp-tick {
flex: none;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 6px;
border: 1.5px solid var(--pss-line3);
animation: pss-emp-box 8s linear infinite;
}
.pss-emp-tick svg { width: 14px; height: 14px; fill: none; stroke: var(--pss-on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: pss-emp-draw 8s linear infinite; }
.pss-emp-check li:nth-child(2) { animation-name: pss-emp-li2; }
.pss-emp-check li:nth-child(2) .pss-emp-tick { animation-name: pss-emp-box2; }
.pss-emp-check li:nth-child(2) .pss-emp-tick svg { animation-name: pss-emp-draw2; }
.pss-emp-check li:nth-child(3) { animation-name: pss-emp-li3; }
.pss-emp-check li:nth-child(3) .pss-emp-tick { animation-name: pss-emp-box3; }
.pss-emp-check li:nth-child(3) .pss-emp-tick svg { animation-name: pss-emp-draw3; }
.pss-emp-check li:nth-child(4) { animation-name: pss-emp-li4; }
.pss-emp-check li:nth-child(4) .pss-emp-tick { animation-name: pss-emp-box4; }
.pss-emp-check li:nth-child(4) .pss-emp-tick svg { animation-name: pss-emp-draw4; }
.pss .pss-emp-inst { width: 100%; height: auto; max-height: 210px; overflow: visible; }
.pss-emp-inst .pss-emp-st-c1 { stop-color: var(--pss-surface2); }
.pss-emp-inst .pss-emp-st-c2 { stop-color: #FFFFFF; stop-opacity: .1; }
.pss-emp-inst .pss-emp-st-c3 { stop-color: var(--pss-surface); }
.pss-emp-inst .i-glow { fill: rgba(var(--pss-accent-rgb), .12); filter: blur(6px); }
.pss-emp-inst .i-floor { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.pss-emp-inst .i-cab { fill: url(#pss-emp-g-cab); stroke: var(--pss-line2); stroke-width: 1; }
.pss-emp-inst .i-lid { fill: rgba(255, 255, 255, .1); stroke: var(--pss-line2); stroke-width: 1; stroke-linejoin: round; }
.pss-emp-inst .i-led { fill: rgba(255, 255, 255, .16); animation: pss-emp-iled 8s linear infinite; }
.pss-emp-inst .i-lector { fill: var(--pss-bg); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-inst .i-lector-win { fill: rgba(var(--pss-accent-rgb), .35); animation: pss-emp-iwin 8s linear infinite; }
.pss-emp-inst .i-disp { fill: var(--pss-bg); stroke: var(--pss-line2); stroke-width: 1; }
.pss-emp-inst .i-disp-x { fill: none; stroke: rgba(var(--pss-danger-rgb), .7); stroke-width: 2.2; stroke-linecap: round; animation: pss-emp-ix 8s linear infinite; }
.pss-emp-inst .i-disp-ok { fill: none; stroke: var(--pss-accent-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: pss-emp-iok 8s linear infinite; }
.pss-emp-inst .i-term { fill: var(--pss-surface2); stroke: var(--pss-line3); stroke-width: 1; }
.pss-emp-inst .i-screw { fill: var(--pss-text3); }
.pss-emp-inst .i-wire { fill: none; stroke: var(--pss-text2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: pss-emp-iwire 8s linear infinite; }
.pss-emp-inst .i-wire--b { stroke: var(--pss-danger); stroke-opacity: .75; }
.pss-emp-inst .i-pk { fill: none; stroke: var(--pss-accent-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 200; stroke-dashoffset: 18; opacity: 0; filter: drop-shadow(0 0 4px rgba(var(--pss-accent-hi-rgb), .95)); animation: pss-emp-ipk 8s linear infinite; }
.pss-emp-inst .i-arms-box { fill: none; stroke: none; }
.pss-emp-inst .i-arms { transform-box: fill-box; transform-origin: 50% 50%; animation: pss-emp-iarms 8s linear infinite; }
.pss-emp-inst .i-arm-b { stroke: rgba(0, 0, 0, .6); stroke-width: 7; stroke-linecap: round; }
.pss-emp-inst .i-arm-f { stroke: var(--pss-text2); stroke-width: 4; stroke-linecap: round; }
.pss-emp-inst .i-hub { fill: var(--pss-text3); stroke: var(--pss-line3); stroke-width: 1; }
/* ---------- frase clave ---------- */
.pss-emp-quote {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 1000px;
margin: clamp(64px, 8vw, 112px) auto 0;
text-align: center;
}
.pss-emp-quote-luz {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid rgba(var(--pss-accent-rgb), .35);
background: radial-gradient(circle, rgba(var(--pss-accent-rgb), .22), rgba(var(--pss-accent-rgb), 0) 70%);
}
.pss-emp-quote-luz i {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--pss-accent-hi);
box-shadow: 0 0 0 5px rgba(var(--pss-accent-hi-rgb), .16), 0 0 26px 6px rgba(var(--pss-accent-hi-rgb), .75);
animation: pss-emp-luz 3.2s var(--pss-ease-io) infinite;
}
.pss-emp-quote-luz::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid rgba(var(--pss-accent-hi-rgb), .7);
animation: pss-emp-ring 3.2s var(--pss-ease) infinite;
}
.pss .pss-emp-quote-t { margin: 0; padding: 0; border: 0; text-align: center; font-style: normal; }
.pss .pss-emp-quote-t::before,
.pss .pss-emp-quote-t::after { content: none; display: none; }
.pss .pss-emp-quote-t p {
font-size: clamp(27px, 3.3vw, 46px);
font-weight: 600;
line-height: 1.16;
letter-spacing: -.028em;
color: var(--pss-text);
text-align: center;
text-wrap: balance;
}
.pss .pss-emp-quote-t em {
font-style: normal;
background: linear-gradient(100deg, var(--pss-accent) 0%, var(--pss-accent-hi) 55%, #C4F07F 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.pss-emp-quote-c {
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss .pss-emp-nota { margin-top: 28px; text-align: center; font-family: var(--pss-f-mono); font-size: 11.5px; letter-spacing: .06em; }
/* ---------- fotogramas ---------- */
@keyframes pss-emp-ring { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes pss-emp-luz { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.92); } }
@keyframes pss-emp-scan { 0% { opacity: 0; transform: translateY(-100%); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(290%); } }
@keyframes pss-emp-shake { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes pss-emp-up { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
/* latido del cable de datos: recorre el cable en ~0,7 s y el LED del puente parpadea tenue al llegar */
@keyframes pss-emp-hb {
0% { stroke-dashoffset: 12; opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
3% { opacity: .9; }
24% { stroke-dashoffset: -100; opacity: .9; }
26%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes pss-emp-hbled {
0%, 22% { fill: rgba(255, 255, 255, .18); }
25% { fill: rgba(var(--pss-accent-hi-rgb), .85); }
38%, 100% { fill: rgba(255, 255, 255, .18); }
}
/* lista del instalador: cada línea se marca por turno (6 %, 20 %, 34 %, 48 %) y todas se desmarcan juntas (90 %) */
@keyframes pss-emp-li { 0%, 6% { color: var(--pss-text3); } 8%, 88% { color: var(--pss-text); } 92%, 100% { color: var(--pss-text3); } }
@keyframes pss-emp-li2 { 0%, 20% { color: var(--pss-text3); } 22%, 88% { color: var(--pss-text); } 92%, 100% { color: var(--pss-text3); } }
@keyframes pss-emp-li3 { 0%, 34% { color: var(--pss-text3); } 36%, 88% { color: var(--pss-text); } 92%, 100% { color: var(--pss-text3); } }
@keyframes pss-emp-li4 { 0%, 48% { color: var(--pss-text3); } 50%, 88% { color: var(--pss-text); } 92%, 100% { color: var(--pss-text3); } }
@keyframes pss-emp-box {
0%, 6% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
8%, 88% { background-color: var(--pss-accent); border-color: var(--pss-accent-hi); box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6); }
92%, 100% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
}
@keyframes pss-emp-box2 {
0%, 20% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
22%, 88% { background-color: var(--pss-accent); border-color: var(--pss-accent-hi); box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6); }
92%, 100% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
}
@keyframes pss-emp-box3 {
0%, 34% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
36%, 88% { background-color: var(--pss-accent); border-color: var(--pss-accent-hi); box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6); }
92%, 100% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
}
@keyframes pss-emp-box4 {
0%, 48% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
50%, 88% { background-color: var(--pss-accent); border-color: var(--pss-accent-hi); box-shadow: 0 0 12px rgba(var(--pss-accent-rgb), .6); }
92%, 100% { background-color: transparent; border-color: var(--pss-line3); box-shadow: none; }
}
@keyframes pss-emp-draw { 0%, 6% { stroke-dashoffset: 16; } 10%, 88% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 16; } }
@keyframes pss-emp-draw2 { 0%, 20% { stroke-dashoffset: 16; } 24%, 88% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 16; } }
@keyframes pss-emp-draw3 { 0%, 34% { stroke-dashoffset: 16; } 38%, 88% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 16; } }
@keyframes pss-emp-draw4 { 0%, 48% { stroke-dashoffset: 16; } 52%, 88% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 16; } }
/* torno: cables (34-44 %), impulso (52-56 %), luz y giro 1 s (56-68,5 %) */
@keyframes pss-emp-iwire { 0%, 34% { stroke-dashoffset: 100; opacity: 1; } 44%, 88% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pss-emp-ipk { 0%, 51% { stroke-dashoffset: 18; opacity: 0; } 51.5% { opacity: 1; } 56% { stroke-dashoffset: -100; opacity: 1; } 56.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pss-emp-iwin { 0%, 48% { fill: rgba(var(--pss-accent-rgb), .35); } 49%, 53% { fill: var(--pss-accent-hi); } 55%, 100% { fill: rgba(var(--pss-accent-rgb), .35); } }
@keyframes pss-emp-iled {
0%, 56% { fill: rgba(255, 255, 255, .16); filter: none; }
56.5%, 68.5% { fill: var(--pss-accent-hi); filter: drop-shadow(0 0 4px rgba(var(--pss-accent-hi-rgb), 1)); }
69%, 100% { fill: rgba(255, 255, 255, .16); filter: none; }
}
@keyframes pss-emp-iok { 0%, 56% { opacity: 0; } 57%, 68.5% { opacity: 1; } 69.5%, 100% { opacity: 0; } }
@keyframes pss-emp-ix { 0%, 56% { opacity: 1; } 57%, 68.5% { opacity: 0; } 69.5%, 100% { opacity: 1; } }
@keyframes pss-emp-iarms {
0%, 57% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
66%, 100% { transform: rotate(120deg); }
}
/* ---------- tableta y móvil: vertical, con la línea a la izquierda ---------- */
@media (max-width: 1023px) {
.pss-emp-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pss-emp-step {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
column-gap: 18px;
}
.pss-emp-node { width: 44px; height: 44px; margin: 0; font-size: 12px; }
.pss-emp-track {
width: 2px;
background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px);
}
.pss-emp-fill {
width: 100%;
height: 0;
background: linear-gradient(180deg, var(--pss-accent-lo), var(--pss-accent) 55%, var(--pss-accent-hi));
transition: none;
}
.pss-emp-flow.is-on .pss-emp-fill { width: 100%; }
.pss-emp-fill::after { right: auto; left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -5px; }
/* tableta: tarjeta en horizontal (miniatura | texto) */
.pss .pss-emp-card { flex-direction: row; }
.pss-emp-stage { flex: 0 0 46%; height: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--pss-line); }
.pss-emp-body { justify-content: center; padding: 26px 26px 28px; }
.pss-emp-stage--tablet { --pss-emp-tw: 216px; }
.pss-emp-stage--inst { grid-template-columns: minmax(0, 1fr) 108px; gap: 8px; padding: 0 16px 0 22px; }
}
/* ---------- móvil ---------- */
@media (max-width: 767px) {
.pss-emp-step { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
.pss-emp-node {
width: 36px;
height: 36px;
font-size: 11.5px;
box-shadow: 0 0 0 6px var(--pss-bg2);
}
.pss-emp-step.is-lit .pss-emp-node { box-shadow: 0 0 0 6px var(--pss-bg2), 0 0 0 7px rgba(var(--pss-accent-rgb), .3), 0 0 26px 2px rgba(var(--pss-accent-rgb), .55); }
.pss .pss-emp-card { flex-direction: column; }
.pss-emp-stage { flex: none; height: 216px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--pss-line); }
.pss-emp-stage--tablet { --pss-emp-tw: 196px; }
.pss .pss-emp-bench { padding: 6px 8px 0; }
.pss-emp-body { justify-content: flex-start; padding: 20px 18px 22px; }
.pss .pss-emp-title { font-size: 23px; }
.pss-emp-txt { font-size: 14.5px; }
.pss-emp-try { gap: 8px; }
/* antes el grupo medía lo justo (el cuerpo alinea a flex-start) y «QR caducado» se salía de su
margen: ahora el grupo ocupa todo el ancho, cada botón parte de su texto y reparten lo que sobra;
en pantallas más estrechas bajan a dos filas a todo el ancho */
.pss-emp-try { align-self: stretch; }
.pss .pss-emp-qrbtn { flex: 1 1 auto; --pss-btn-px: 10px; --pss-btn-h: 44px; gap: 7px; }
.pss-emp-st { font-size: 11.5px; padding: 10px 12px 12px; }
.pss-emp-stage--inst { grid-template-columns: minmax(0, 1fr) 92px; gap: 6px; padding: 0 12px 0 16px; }
.pss-emp-check { gap: 10px; }
.pss-emp-check li { gap: 8px; font-size: 12px; }
.pss-emp-tick { width: 18px; height: 18px; border-radius: 5px; }
.pss-emp-quote { gap: 20px; margin-top: 64px; }
.pss .pss-emp-quote-t p { font-size: 25px; letter-spacing: -.022em; }
.pss-emp-quote-c { font-size: 11px; letter-spacing: .1em; line-height: 1.5; max-width: 30ch; }
}
/* ---------- movimiento reducido: todo visible, marcado y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
.pss-emp-fill { transition: none; }
.pss-emp-check li { color: var(--pss-text); }
.pss-emp-tick { background-color: var(--pss-accent); border-color: var(--pss-accent-hi); }
.pss-emp-tick svg { stroke-dashoffset: 0; }
.pss-emp-inst .i-wire { stroke-dashoffset: 0; }
.pss-emp-inst .i-disp-ok { opacity: 1; }
.pss-emp-inst .i-disp-x { opacity: 0; }
.pss-emp-inst .i-led { fill: var(--pss-accent-hi); }
.pss .pss-emp-card:hover { translate: none; }
}
/* ===== seguridad ===== */
/* =============================================================================
PANTHERA OS · sección seguridad
Rejilla bento: dos tarjetas grandes con una ilustración viva (QR que cambia frente a una
captura tachada · torno cuyo brazo cae con la alarma), cuatro pequeñas con iconos de línea
que se dibujan al entrar (pathLength=1 + stroke-dashoffset) y un acceso al simulador.
============================================================================= */
.pss-seguridad { overflow: clip; }
.pss-seg-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-seg-rejilla { --pss-grid: 56px; --pss-grid-x: 50%; --pss-grid-y: 18%; opacity: .6; }
.pss-seg-glow { --pss-glow-x: 50%; --pss-glow-y: 6%; --pss-glow-size: 900px; opacity: .32; filter: none; }
.pss-seg-in { position: relative; z-index: 1; }
.pss-seg-head .pss-lead { max-width: 58ch; }
/* ---------- rejilla bento: 3 columnas; las grandes ocupan 2 ----------
fila 1: QR (2) + sin internet · fila 2: antipassback + emergencia (2) · fila 3: PMR + datos + pruébalo */
.pss .pss-seg-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.pss-seg-item { display: flex; min-width: 0; }
.pss-seg-item--big { grid-column: span 2; }
/* ---------- tarjeta (común) ---------- */
.pss-seg-card {
display: flex;
flex-direction: column;
width: 100%;
padding: 30px 30px 24px;
/* capa propia: la tarjeta recorta sus esquinas en su propia capa (sin esto, el Chrome sin GPU de
las capturas pinta bandas falsas; en navegadores reales no cambia nada) */
transform: translate3d(0, 0, 0);
transition:
border-color var(--pss-d-3) var(--pss-ease),
box-shadow var(--pss-d-3) var(--pss-ease),
transform var(--pss-d-3) var(--pss-ease);
}
.pss-seg-card:hover {
transform: translate3d(0, -4px, 0);
box-shadow: var(--pss-shadow-2), 0 30px 60px -40px rgba(var(--pss-accent-rgb), .45);
}
.pss-seg-top {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.pss-seg-ico {
position: relative;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 18px;
border: 1px solid rgba(var(--pss-accent-rgb), .26);
background:
radial-gradient(circle at 30% 18%, rgba(var(--pss-accent-hi-rgb), .16), rgba(var(--pss-accent-rgb), .04) 70%),
rgba(var(--pss-bg-rgb), .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 26px -14px rgba(0, 0, 0, .9);
/* capa propia: al dibujarse y animarse el icono solo se repinta esta caja de 64 px, no la tarjeta */
transform: translate3d(0, 0, 0);
transition: border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), background-color var(--pss-d-3) var(--pss-ease);
}
.pss-seg-card:hover .pss-seg-ico {
border-color: rgba(var(--pss-accent-hi-rgb), .6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 5px rgba(var(--pss-accent-rgb), .08), 0 12px 32px -10px rgba(var(--pss-accent-rgb), .55);
}
.pss .pss-seg-ico svg { width: 38px; height: 38px; overflow: visible; }
.pss-seg-n {
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
line-height: 1;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss-seg-card:hover .pss-seg-n { color: var(--pss-accent); }
.pss-seg-t { position: relative; z-index: 2; margin-top: 30px; text-wrap: balance; }
.pss-seg-d {
position: relative;
z-index: 2;
margin-top: 12px;
margin-bottom: 26px;
font-size: 15.5px;
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-seg-spec {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--pss-line);
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-seg-spec svg,
.pss .pss-seg-tags svg {
flex: none;
width: 14px;
height: 14px;
fill: none;
stroke: var(--pss-accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pss-seg-card:hover .pss-seg-spec { color: var(--pss-text2); }
.pss-seg-nota { max-width: 72ch; margin: 36px auto 0; text-align: center; }
/* ---------- tarjeta grande: texto + escenario ---------- */
.pss .pss-seg-big {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
align-items: stretch;
gap: 32px;
padding: 30px;
}
.pss-seg-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-width: 0;
padding: 4px 0 2px 2px;
}
.pss .pss-seg-k {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 11.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-accent-hi);
}
.pss-seg-k-n {
display: inline-grid;
place-items: center;
height: 24px;
padding: 0 8px;
border-radius: var(--pss-r-pill);
border: 1px solid rgba(var(--pss-accent-rgb), .32);
background: rgba(var(--pss-accent-rgb), .08);
color: var(--pss-accent-hi);
letter-spacing: .08em;
}
.pss .pss-seg-t--big {
margin-top: 22px;
font-size: clamp(28px, 2.5vw, 38px);
line-height: 1.02;
text-wrap: balance;
}
.pss-seg-big .pss-seg-d { margin-top: 14px; margin-bottom: 24px; font-size: 16px; }
/* ficha técnica: la misma línea mono de las pequeñas, en columna */
.pss .pss-seg-tags {
display: flex;
flex-direction: column;
margin-top: auto;
}
.pss .pss-seg-tags li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0 11px;
border-top: 1px solid var(--pss-line);
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text3);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-seg-tags li:last-child { padding-bottom: 0; }
.pss-seg-big:hover .pss-seg-tags li { color: var(--pss-text2); }
/* escenario: ventana oscura con rejilla fina donde vive la ilustración */
.pss-seg-stage {
position: relative;
z-index: 2;
min-width: 0;
min-height: 320px;
overflow: hidden;
border-radius: var(--pss-r);
border: 1px solid var(--pss-line);
background:
radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .035), transparent 60%),
rgba(var(--pss-bg-rgb), .62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -30px 60px -30px rgba(0, 0, 0, .6);
/* capa propia: lo que se anima dentro no repinta la tarjeta */
transform: translate3d(0, 0, 0);
}
.pss-seg-stage-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 24px 24px;
background-position: -1px -1px;
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
pointer-events: none;
}
.pss-seg-stage-glow {
position: absolute;
left: 50%;
top: 48%;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .17), rgba(var(--pss-accent-rgb), .05) 60%, transparent);
transform: translate(-50%, -50%);
pointer-events: none;
}
.pss-seg-stage-glow::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(closest-side, rgba(var(--pss-warn-rgb), .2), rgba(var(--pss-warn-rgb), .05) 60%, transparent);
opacity: 0;
transition: opacity .7s var(--pss-ease);
}
/* ============ escenario QR: captura tachada frente al QR vivo ============ */
.pss-seg-qrs { font-size: 15px; }
.pss-seg-shot,
.pss-seg-live { position: absolute; z-index: 1; }
/* captura antigua */
.pss-seg-shot {
--pss-seg-rot: -7deg;
left: 6.5%;
top: 16%;
width: 9.4em;
padding: .55em .55em .6em;
border-radius: .95em;
border: 1px solid var(--pss-line2);
background: var(--pss-surface2);
box-shadow: var(--pss-shadow-2);
transform: rotate(var(--pss-seg-rot));
transform-origin: 50% 60%;
}
.pss-seg-shot-bar {
display: flex;
align-items: center;
gap: .45em;
margin: .1em .2em .55em;
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: .6em;
font-weight: 600;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pss-text3);
}
.pss-seg-shot-ico {
flex: none;
width: 1.1em;
height: 1.1em;
border: 1.5px dashed currentColor;
border-radius: .25em;
}
.pss-seg-shot-h { margin-left: auto; color: var(--pss-text2); font-variant-numeric: tabular-nums; }
.pss-seg-code {
position: relative;
padding: .45em;
border-radius: .7em;
background: var(--pss-text);
}
.pss .pss-seg-qrsvg svg { display: block; width: 100%; height: auto; }
.pss-seg-code--shot { --pss-seg-alto: 7.3em; }
.pss-seg-code--shot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(var(--pss-bg-rgb), .46);
}
.pss-seg-tacha {
position: absolute;
left: 50%;
top: 55%;
width: 118%;
height: 3px;
margin: -1.5px 0 0 -59%;
border-radius: 3px;
background: var(--pss-danger);
box-shadow: 0 0 0 2px rgba(var(--pss-bg-rgb), .55), 0 0 16px rgba(var(--pss-danger-rgb), .55);
transform: rotate(-52deg) scaleX(0);
transform-origin: 50% 50%;
transition: transform .6s var(--pss-ease-out) .25s;
}
.pss-seg-sello {
position: absolute;
left: 50%;
top: 55%;
padding: .45em .75em;
border-radius: var(--pss-r-pill);
background: var(--pss-danger);
color: var(--pss-on-accent);
font-family: var(--pss-f-mono);
font-size: .6em;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 8px 20px -6px rgba(var(--pss-danger-rgb), .7);
opacity: 0;
transform: translate(-50%, -50%) scale(.6);
transition: opacity .3s var(--pss-ease) .55s, transform .5s var(--pss-ease-spring) .55s;
}
.pss-seg-big.is-drawn .pss-seg-tacha { transform: rotate(-52deg) scaleX(1); }
.pss-seg-big.is-drawn .pss-seg-sello { opacity: 1; transform: translate(-50%, -50%); }
.pss:not(.pss-js) .pss-seg-tacha { transform: rotate(-52deg); }
.pss:not(.pss-js) .pss-seg-sello { opacity: 1; transform: translate(-50%, -50%); }
/* QR vivo (el mismo que el móvil del principio) */
.pss-seg-live {
right: 6.5%;
top: 8%;
width: 12.4em;
padding: .7em .7em .75em;
border-radius: 1.1em;
border: 1px solid rgba(var(--pss-accent-rgb), .34);
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%), var(--pss-surface2);
box-shadow: var(--pss-shadow-3), 0 18px 50px -20px rgba(var(--pss-accent-rgb), .5);
}
.pss-seg-live::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 2px solid var(--pss-accent-hi);
opacity: 0;
pointer-events: none;
}
.pss-seg-live-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5em;
margin: .05em .15em .6em;
font-family: var(--pss-f-display);
font-size: .8em;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--pss-text);
}
.pss-seg-live-ok {
display: inline-flex;
align-items: center;
gap: .4em;
height: 1.8em;
padding: 0 .65em 0 .55em;
border-radius: var(--pss-r-pill);
background: rgba(var(--pss-accent-rgb), .14);
color: var(--pss-accent-hi);
font-family: var(--pss-f-mono);
font-size: .74em;
font-weight: 600;
letter-spacing: .08em;
}
.pss-seg-live-ok i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.pss-seg-code--live { --pss-seg-alto: 10.1em; }
.pss-seg-live.is-rot .pss-seg-qrsvg { animation: pss-seg-rot .7s var(--pss-ease-out) both; }
.pss-seg-timer {
display: flex;
align-items: center;
gap: .6em;
margin-top: .6em;
padding: .45em .55em;
border-radius: .75em;
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .55);
}
.pss-seg-ring { position: relative; flex: none; width: 2.1em; height: 2.1em; }
.pss .pss-seg-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pss-seg-ring-t { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3; }
.pss-seg-ring-p {
fill: none;
stroke: var(--pss-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 0;
transition: stroke-dashoffset .25s linear, stroke var(--pss-d-2) var(--pss-ease);
}
.pss-seg-live.is-last .pss-seg-ring-p { stroke: var(--pss-warn); }
.pss-seg-secs {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--pss-f-mono);
font-size: .68em;
font-weight: 700;
color: var(--pss-text);
font-variant-numeric: tabular-nums;
}
.pss-seg-timer-tx { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.pss-seg-timer-l { font-size: .7em; line-height: 1.1; color: var(--pss-text2); white-space: nowrap; }
.pss-seg-timer-l b { color: var(--pss-text); font-variant-numeric: tabular-nums; }
.pss-seg-tok {
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: .6em;
line-height: 1.1;
letter-spacing: .02em;
color: var(--pss-text3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* marco del lector (esquinas) y línea de barrido */
.pss-seg-marco {
position: absolute;
inset: -.4em;
opacity: 0;
transform: scale(1.08);
transition: opacity .3s var(--pss-ease), transform .5s var(--pss-ease);
pointer-events: none;
}
.pss-seg-marco i {
position: absolute;
width: 1.15em;
height: 1.15em;
border: 2px solid var(--pss-accent-hi);
transition: border-color .25s var(--pss-ease);
}
.pss-seg-marco i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: .55em; }
.pss-seg-marco i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: .55em; }
.pss-seg-marco i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: .55em; }
.pss-seg-marco i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: .55em; }
.pss-seg-barrido {
position: absolute;
left: .25em;
right: .25em;
top: .45em;
height: 2px;
border-radius: 2px;
background: var(--pss-accent-hi);
box-shadow: 0 0 10px 2px rgba(var(--pss-accent-hi-rgb), .55);
opacity: 0;
pointer-events: none;
}
.pss-seg-qrs[data-fase="captura"] .pss-seg-code--shot .pss-seg-marco,
.pss-seg-qrs[data-fase="vivo"] .pss-seg-code--live .pss-seg-marco { opacity: 1; transform: none; }
.pss-seg-qrs[data-fase="captura"][data-paso="lee"] .pss-seg-code--shot .pss-seg-barrido,
.pss-seg-qrs[data-fase="vivo"][data-paso="lee"] .pss-seg-code--live .pss-seg-barrido { animation: pss-seg-barre .95s var(--pss-ease-io) both; }
.pss-seg-qrs[data-fase="captura"][data-paso="res"] .pss-seg-code--shot .pss-seg-marco i { border-color: var(--pss-danger); }
.pss-seg-qrs[data-fase="captura"][data-paso="res"] .pss-seg-shot { animation: pss-seg-niega .5s var(--pss-ease) both; }
.pss-seg-qrs[data-fase="captura"][data-paso="res"] .pss-seg-sello { animation: pss-seg-sello .5s var(--pss-ease-spring) both; }
.pss-seg-qrs[data-fase="vivo"][data-paso="res"] .pss-seg-live::after { animation: pss-seg-anillo .9s var(--pss-ease-out) both; }
/* línea de estado del lector */
.pss .pss-seg-lector {
position: absolute;
z-index: 2;
left: 6.5%;
bottom: 7%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .75em;
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: .66em;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
color: var(--pss-text2);
}
.pss-seg-lector-k { font-size: .88em; letter-spacing: .16em; color: var(--pss-text3); }
.pss-seg-lector-v { display: flex; align-items: center; gap: .6em; }
.pss-seg-lector-dot {
flex: none;
width: .7em;
height: .7em;
border-radius: 50%;
background: var(--pss-text3);
transition: background-color .25s var(--pss-ease), box-shadow .25s var(--pss-ease);
}
.pss-seg-qrs[data-res="ko"] .pss-seg-lector-dot,
.pss-seg-qrs:not([data-res]) .pss-seg-lector-dot { background: var(--pss-danger); box-shadow: 0 0 8px rgba(var(--pss-danger-rgb), .8); }
.pss-seg-qrs[data-res="ok"] .pss-seg-lector-dot { background: var(--pss-accent-hi); box-shadow: 0 0 8px rgba(var(--pss-accent-hi-rgb), .8); }
.pss-seg-qrs[data-res="ko"] .pss-seg-lector { color: var(--pss-text); }
.pss-seg-qrs[data-res="ok"] .pss-seg-lector { color: var(--pss-text); }
/* ============ escenario emergencia: torno trípode, central de incendios y cable ============ */
.pss .pss-seg-emg-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
/* sobre el escenario oscuro no hace falta el cristal (backdrop-filter) de .pss-badge: fondo sólido */
.pss .pss-seg-emg-chip {
position: absolute;
z-index: 3;
left: 14px;
top: 14px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: linear-gradient(rgba(var(--pss-accent-rgb), .1), rgba(var(--pss-accent-rgb), .1)), rgba(var(--pss-bg-rgb), .8);
transition: color .3s var(--pss-ease), border-color .3s var(--pss-ease);
}
.pss .pss-seg-emg-chip.pss-badge--warn { background: linear-gradient(rgba(var(--pss-warn-rgb), .1), rgba(var(--pss-warn-rgb), .1)), rgba(var(--pss-bg-rgb), .8); }
.pss .pss-seg-emg-chip.pss-badge--muted { background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), rgba(var(--pss-bg-rgb), .8); }
.pss-seg-emg[data-fase="senal"] .pss-seg-stage-glow::after,
.pss-seg-emg[data-fase="libre"] .pss-seg-stage-glow::after { opacity: 1; }
/* degradados (colores de los tokens) */
.pss-seg-st-fre0 { stop-color: var(--pss-surface2); }
.pss-seg-st-fre1 { stop-color: var(--pss-bg2); }
.pss-seg-st-izq0 { stop-color: var(--pss-surface); }
.pss-seg-st-izq1 { stop-color: var(--pss-bg); }
.pss-seg-st-tapa0 { stop-color: var(--pss-text3); }
.pss-seg-st-tapa1 { stop-color: var(--pss-text2); }
.pss-seg-st-tapa2 { stop-color: var(--pss-text3); }
.pss-seg-st-ac0 { stop-color: var(--pss-text); }
.pss-seg-st-ac1 { stop-color: var(--pss-text3); }
.pss-seg-st-v0 { stop-color: var(--pss-accent); stop-opacity: .3; }
.pss-seg-st-v1 { stop-color: var(--pss-accent); stop-opacity: 0; }
.pss-seg-st-a0 { stop-color: var(--pss-warn); stop-opacity: .32; }
.pss-seg-st-a1 { stop-color: var(--pss-warn); stop-opacity: 0; }
/* suelo */
.pss-seg-e-halo { transition: opacity .7s var(--pss-ease); }
.pss-seg-e-halo--a { opacity: 0; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-halo--v,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-halo--v { opacity: 0; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-halo--a,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-halo--a { opacity: 1; }
.pss-seg-e-suelo { fill: none; stroke: url(#pss-seg-g-suelo); stroke-width: 1.2; }
.pss-seg-st-s0 { stop-color: var(--pss-text); stop-opacity: 0; }
.pss-seg-st-s1 { stop-color: var(--pss-text); stop-opacity: .16; }
.pss-seg-e-chev path {
fill: none;
stroke: var(--pss-line2);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .4s var(--pss-ease);
}
/* luces de paso en secuencia (a saltos: pocos repintados por segundo) */
.pss-seg-emg[data-fase="libre"] .pss-seg-e-chev path {
stroke: var(--pss-warn);
animation: pss-seg-chev 1.2s steps(1) infinite;
animation-delay: calc(var(--pss-i, 0) * .2s + .5s);
}
/* central de incendios, cable y pulso */
.pss-seg-e-caja { fill: var(--pss-surface2); stroke: var(--pss-line2); stroke-width: 1; }
.pss-seg-e-llama { fill: var(--pss-text3); transition: fill .3s var(--pss-ease); }
.pss-seg-e-sirena { fill: var(--pss-accent-lo); transition: fill .3s var(--pss-ease); }
.pss-seg-e-rejilla { fill: none; stroke: var(--pss-line2); stroke-width: 1.5; stroke-linecap: round; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-llama,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-llama { fill: var(--pss-warn); }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-sirena,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-sirena { fill: var(--pss-warn); animation: pss-seg-parpadeo .5s steps(1) infinite; }
.pss-seg-e-cable-f { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pss-seg-e-cable { fill: none; stroke: var(--pss-line3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--pss-ease); }
.pss-seg-emg[data-fase="libre"] .pss-seg-e-cable { stroke: rgba(var(--pss-warn-rgb), .5); }
.pss-seg-e-pulso,
.pss-seg-e-pulso-g {
fill: none;
stroke: var(--pss-warn);
stroke-linecap: round;
stroke-dasharray: .14 1.2;
stroke-dashoffset: .14;
opacity: 0;
}
.pss-seg-e-pulso { stroke-width: 3; }
.pss-seg-e-pulso-g { stroke-width: 9; stroke-opacity: .28; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-pulso,
.pss-seg-emg[data-fase="senal"] .pss-seg-e-pulso-g { animation: pss-seg-pulso .8s cubic-bezier(.4, 0, .6, 1) .05s both; }
/* cuerpo del torno */
.pss-seg-e-izq { fill: url(#pss-seg-g-izq); stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.pss-seg-e-fre { fill: url(#pss-seg-g-fre); stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.pss-seg-e-tapa { fill: url(#pss-seg-g-tapa); }
.pss-seg-e-canto { fill: var(--pss-text3); }
.pss-seg-e-zocalo { fill: var(--pss-bg); }
.pss-seg-e-arista { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.pss-seg-e-ranura { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.pss-seg-e-lector { fill: var(--pss-surface2); stroke: var(--pss-line2); stroke-width: 1; }
.pss-seg-e-lector-v { fill: var(--pss-accent-lo); opacity: .9; transition: fill .4s var(--pss-ease), opacity .4s var(--pss-ease); }
.pss-seg-emg[data-fase="libre"] .pss-seg-e-lector-v { fill: var(--pss-text3); opacity: .35; }
.pss-seg-e-led { fill: var(--pss-accent-hi); transition: fill .35s var(--pss-ease); }
.pss-seg-e-led-g { fill: var(--pss-accent); opacity: .28; transition: fill .35s var(--pss-ease), opacity .35s var(--pss-ease); }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-led,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-led { fill: var(--pss-warn); }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-led-g,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-led-g { fill: var(--pss-warn); opacity: .42; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-led { animation: pss-seg-parpadeo .4s steps(1) infinite; }
.pss-seg-e-pant { fill: var(--pss-bg); stroke: var(--pss-line2); stroke-width: 1; }
.pss-seg-e-pic { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--pss-ease); }
.pss-seg-e-pic--ok { stroke: var(--pss-accent-hi); }
.pss-seg-e-pic--warn { stroke: var(--pss-warn); opacity: 0; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-pic--ok,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-pic--ok { opacity: 0; }
.pss-seg-emg[data-fase="senal"] .pss-seg-e-pic--warn,
.pss-seg-emg[data-fase="libre"] .pss-seg-e-pic--warn { opacity: 1; }
.pss-seg-e-marca {
fill: var(--pss-text3);
opacity: .55;
font-family: var(--pss-f-display);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 2.2px;
}
/* brazos de acero y rotor */
.pss-seg-e-b-sh { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 12.5; stroke-linecap: round; }
.pss-seg-e-b-bd { fill: none; stroke: var(--pss-text2); stroke-width: 9; stroke-linecap: round; }
.pss-seg-e-b-hl { fill: none; stroke: var(--pss-text); stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.pss-seg-e-b-cap { fill: var(--pss-text3); stroke: rgba(0, 0, 0, .4); stroke-width: 1; }
.pss-seg-e-b-caph { fill: var(--pss-text); opacity: .55; }
.pss-seg-e-brazo--b .pss-seg-e-b-bd { stroke: var(--pss-text3); }
.pss-seg-e-brazo--b .pss-seg-e-b-cap { fill: var(--pss-surface2); }
.pss-seg-e-rotor { fill: url(#pss-seg-g-acero); stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.pss-seg-e-aro { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.pss-seg-e-tapon { fill: var(--pss-surface2); stroke: var(--pss-text3); stroke-width: 1; }
/* el brazo horizontal cae con la alarma (péndulo amortiguado) y vuelve a subir al rearmar */
.pss-seg-e-caida { transform-origin: 237px 126px; }
.pss-seg-emg[data-fase="libre"] .pss-seg-e-caida { transform: rotate(-76deg); animation: pss-seg-cae 1.25s both; }
.pss-seg-emg[data-fase="rearme"] .pss-seg-e-caida { animation: pss-seg-sube 1s var(--pss-ease-io) both; }
/* ============ pequeñas: iconos de trazo que se dibujan ============
Ojo: nada de filter (drop-shadow) en piezas del SVG que se animan: obliga a repintar la tarjeta
entera en cada fotograma (y en el Chrome sin GPU de las capturas pinta bandas falsas).
Tiempos: cada icono se dibuja en ~600 ms (trazo de 520 ms + 30 ms por pieza), empieza en cuanto
se ve el 15 % de la tarjeta y las tarjetas se escalonan 80 ms (script.js). */
.pss-seg-p {
fill: none;
stroke: var(--pss-accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
opacity: 0;
transition:
stroke-dashoffset .52s var(--pss-ease-out) calc(var(--pss-k, 0) * 30ms),
opacity .1s linear calc(var(--pss-k, 0) * 30ms),
stroke var(--pss-d-2) var(--pss-ease);
}
.pss-seg-p--thin { stroke-width: 1.8; }
.pss-seg-p--hi { stroke: var(--pss-accent-hi); }
.pss-seg-p--mute { stroke: var(--pss-text2); stroke-width: 2; }
.pss-seg-f {
fill: var(--pss-accent-hi);
opacity: 0;
transform: scale(.2);
transform-box: fill-box;
transform-origin: center;
transition: opacity .3s var(--pss-ease) .3s, transform .5s var(--pss-ease-spring) .3s;
}
.pss-seg-card.is-drawn .pss-seg-p { stroke-dashoffset: 0; opacity: 1; }
.pss-seg-card.is-drawn .pss-seg-f { opacity: 1; transform: none; }
.pss:not(.pss-js) .pss-seg-p { stroke-dashoffset: 0; opacity: 1; }
.pss:not(.pss-js) .pss-seg-f { opacity: 1; transform: none; }
/* animación propia de cada icono (.is-play la pone script.js al terminar de dibujarse y al pasar
el ratón; se quita sola cuando acaba) */
/* 02 · sin internet: las ondas buscan señal y el puente sigue latiendo en verde */
.pss-seg-card[data-ico="red"].is-play .pss-seg-arc { animation: pss-seg-onda 1.1s var(--pss-ease-io) both; }
.pss-seg-card[data-ico="red"].is-play .pss-seg-arc--2 { animation-delay: .14s; }
.pss-seg-card[data-ico="red"].is-play .pss-seg-arc--3 { animation-delay: .28s; }
.pss-seg-card[data-ico="red"].is-play .pss-seg-puente { animation: pss-seg-latido 1.2s var(--pss-ease) .2s both; }
/* 05 · PMR: la rueda gira y la persona avanza */
.pss-seg-rueda { transform-origin: 21.3px 33px; }
.pss-seg-persona { transition: transform .5s var(--pss-ease); }
.pss-seg-card[data-ico="pmr"].is-play .pss-seg-rueda { animation: pss-seg-rueda 1.2s var(--pss-ease-io) both; }
.pss-seg-card[data-ico="pmr"].is-play .pss-seg-persona { animation: pss-seg-avanza 1.2s var(--pss-ease-io) both; }
/* 03 · antipassback: la flecha da la vuelta y el reloj corre */
.pss-seg-giro,
.pss-seg-agujas { transform-origin: 24px 24px; }
.pss-seg-card[data-ico="anti"].is-play .pss-seg-giro { animation: pss-seg-vuelta 1.3s var(--pss-ease-io) both; }
.pss-seg-card[data-ico="anti"].is-play .pss-seg-agujas { animation: pss-seg-agujas 1.3s var(--pss-ease-io) both; }
/* 06 · datos: los pilotos del servidor parpadean en secuencia */
.pss-seg-card[data-ico="datos"].is-play .pss-seg-led { animation: pss-seg-led .9s steps(1) both; }
.pss-seg-card[data-ico="datos"].is-play .pss-seg-led--2 { animation-delay: .15s; }
.pss-seg-card[data-ico="datos"].is-play .pss-seg-led--3 { animation-delay: .3s; }
.pss-seg-card[data-ico="datos"].is-play .pss-seg-led--4 { animation-delay: .45s; }
/* ============ pruébalo: lleva al simulador y activa su alarma ============ */
.pss-seguridad .pss-seg-cta,
.pss-seguridad .pss-seg-cta:hover,
.pss-seguridad .pss-seg-cta:focus-visible {
color: var(--pss-text);
text-decoration: none;
}
.pss-seguridad .pss-seg-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 30px 30px 28px;
border-color: rgba(var(--pss-warn-rgb), .22);
background:
radial-gradient(90% 70% at 100% 0%, rgba(var(--pss-warn-rgb), .12), transparent 62%),
radial-gradient(80% 60% at 0% 100%, rgba(var(--pss-accent-rgb), .1), transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%),
var(--pss-surface);
transform: translate3d(0, 0, 0);
transition: border-color var(--pss-d-3) var(--pss-ease), box-shadow var(--pss-d-3) var(--pss-ease), transform var(--pss-d-3) var(--pss-ease);
}
.pss-seguridad .pss-seg-cta:hover {
border-color: rgba(var(--pss-warn-rgb), .4);
transform: translate3d(0, -4px, 0);
box-shadow: var(--pss-shadow-2), 0 30px 60px -40px rgba(var(--pss-warn-rgb), .45);
}
.pss-seguridad .pss-seg-cta:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss-seg-cta-ico {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
border: 1px solid rgba(var(--pss-warn-rgb), .35);
background: radial-gradient(circle at 30% 20%, rgba(var(--pss-warn-rgb), .22), rgba(var(--pss-warn-rgb), .05) 70%), rgba(var(--pss-bg-rgb), .5);
color: var(--pss-warn);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 26px -14px rgba(0, 0, 0, .9);
}
.pss .pss-seg-cta-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pss-seguridad .pss-seg-cta:hover .pss-seg-cta-ico svg { animation: pss-seg-llama 1s var(--pss-ease-io) both; }
.pss-seg-cta-k {
position: relative;
z-index: 2;
margin-top: 26px;
font-family: var(--pss-f-mono);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pss-warn);
}
.pss-seg-cta-t {
position: relative;
z-index: 2;
margin-top: 12px;
font-family: var(--pss-f-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
line-height: 1.1;
letter-spacing: .01em;
text-transform: uppercase;
text-wrap: balance;
}
.pss-seg-cta-d {
position: relative;
z-index: 2;
margin: 12px 0 24px;
font-size: 15.5px;
line-height: 1.6;
color: var(--pss-text2);
text-wrap: pretty;
}
.pss-seg-cta-go {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
height: 46px;
margin-top: auto;
padding: 0 18px 0 20px;
border-radius: var(--pss-r-pill);
background: var(--pss-accent);
color: var(--pss-on-accent);
font-size: 15px;
font-weight: 600;
line-height: 1;
box-shadow: 0 10px 30px -12px rgba(var(--pss-accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .25);
transition: background-color var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-2) var(--pss-ease), transform var(--pss-d-1) var(--pss-ease);
}
.pss .pss-seg-cta-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--pss-d-2) var(--pss-ease); }
.pss-seguridad .pss-seg-cta:hover .pss-seg-cta-go { background: var(--pss-accent-hi); box-shadow: 0 14px 36px -12px rgba(var(--pss-accent-hi-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pss-seguridad .pss-seg-cta:hover .pss-seg-cta-go svg { transform: translate3d(0, -3px, 0); }
.pss-seguridad .pss-seg-cta:active .pss-seg-cta-go { transform: scale(.97); }
/* ---------- fotogramas ---------- */
@keyframes pss-seg-onda {
0%, 100% { stroke: var(--pss-accent); opacity: 1; }
30% { stroke: var(--pss-accent-hi); opacity: .25; }
60% { stroke: var(--pss-accent-hi); opacity: 1; }
}
@keyframes pss-seg-latido {
0%, 100% { transform: none; }
25% { transform: scale(1.55); }
50% { transform: scale(.9); }
70% { transform: scale(1.25); }
}
@keyframes pss-seg-rueda { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pss-seg-avanza { 0%, 100% { transform: none; } 45% { transform: translate3d(2px, 0, 0); } }
@keyframes pss-seg-vuelta { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pss-seg-agujas { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
@keyframes pss-seg-led {
0% { opacity: 1; }
20% { opacity: .15; }
40% { opacity: 1; }
60% { opacity: .15; }
80%, 100% { opacity: 1; }
}
@keyframes pss-seg-rot {
0% { opacity: .15; transform: scale(.94); filter: blur(4px); }
100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes pss-seg-barre {
0% { opacity: 0; transform: translate3d(0, 0, 0); }
12% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; transform: translate3d(0, var(--pss-seg-alto, 8em), 0); }
}
@keyframes pss-seg-niega {
0%, 100% { transform: rotate(var(--pss-seg-rot)); }
18% { transform: rotate(var(--pss-seg-rot)) translate3d(-5px, 0, 0); }
36% { transform: rotate(var(--pss-seg-rot)) translate3d(5px, 0, 0); }
54% { transform: rotate(var(--pss-seg-rot)) translate3d(-3px, 0, 0); }
72% { transform: rotate(var(--pss-seg-rot)) translate3d(2px, 0, 0); }
}
@keyframes pss-seg-sello {
0% { transform: translate(-50%, -50%); }
40% { transform: translate(-50%, -50%) scale(1.14); }
100% { transform: translate(-50%, -50%); }
}
@keyframes pss-seg-anillo {
0% { opacity: .95; transform: none; }
100% { opacity: 0; transform: scale(1.07); }
}
@keyframes pss-seg-chev {
0% { opacity: 1; }
34% { opacity: .3; }
}
@keyframes pss-seg-parpadeo {
0% { opacity: 1; }
50% { opacity: .25; }
}
@keyframes pss-seg-pulso {
0% { stroke-dashoffset: .14; opacity: 1; }
92% { opacity: 1; }
100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes pss-seg-cae {
0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .95, .55); }
44% { transform: rotate(-93deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
64% { transform: rotate(-66deg); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
82% { transform: rotate(-81deg); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
100% { transform: rotate(-76deg); }
}
@keyframes pss-seg-sube {
0% { transform: rotate(-76deg); }
82% { transform: rotate(3deg); }
100% { transform: rotate(0deg); }
}
@keyframes pss-seg-llama {
0%, 100% { transform: none; }
30% { transform: scale(1.12) rotate(-6deg); }
60% { transform: scale(.96) rotate(4deg); }
}
/* ---------- tableta: 2 columnas; las grandes a todo el ancho ---------- */
@media (max-width: 1023px) {
.pss .pss-seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pss-seg-item--big,
.pss-seg-item--cta { grid-column: 1 / -1; }
.pss .pss-seg-big { gap: 28px; padding: 28px; }
}
/* ---------- móvil: una columna; escenario arriba en las grandes, pequeñas compactas ---------- */
@media (max-width: 767px) {
.pss-seg-head .pss-h2 { line-height: 1.14; }
.pss .pss-seg-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pss .pss-seg-big { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 12px 20px; }
.pss-seg-big .pss-seg-stage { order: -1; }
.pss-seg-copy { padding: 20px 8px 0; }
.pss .pss-seg-t--big { margin-top: 16px; font-size: 27px; }
.pss-seg-big .pss-seg-d { margin: 12px 0 20px; font-size: 15px; }
.pss .pss-seg-tags li { padding: 11px 0 10px; font-size: 11px; }
.pss .pss-seg-tags li:last-child { padding-bottom: 0; }
.pss-seg-stage { min-height: 0; border-radius: 13px; }
.pss-seg-qrs { height: 282px; font-size: 12.5px; }
.pss-seg-shot { left: 4.5%; top: 18%; }
.pss-seg-live { right: 4.5%; top: 6%; }
.pss .pss-seg-lector { left: 5%; bottom: 6%; }
.pss-seg-emg { height: 250px; }
.pss .pss-seg-emg-chip { left: 10px; top: 10px; }
.pss-seg-card:not(.pss-seg-big) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px;
align-items: center;
padding: 20px 20px 18px;
}
.pss-seg-top { grid-column: 1; grid-row: 1; }
.pss-seg-ico { width: 52px; height: 52px; border-radius: 15px; }
.pss .pss-seg-ico svg { width: 32px; height: 32px; }
.pss-seg-n { display: none; }
.pss-seg-card:not(.pss-seg-big) .pss-seg-t { grid-column: 2; grid-row: 1; margin: 0; padding-right: 8px; font-size: 21px; }
.pss-seg-card:not(.pss-seg-big) .pss-seg-d { grid-column: 1 / -1; margin: 14px 0 18px; font-size: 15px; }
.pss-seg-spec { grid-column: 1 / -1; padding-top: 14px; font-size: 11px; }
.pss-seg-card:hover { transform: translate3d(0, 0, 0); }
.pss-seguridad .pss-seg-cta { padding: 22px 20px 20px; }
.pss-seguridad .pss-seg-cta:hover { transform: translate3d(0, 0, 0); }
.pss-seg-cta-ico { width: 46px; height: 46px; border-radius: 14px; }
.pss-seg-cta-k { margin-top: 18px; }
.pss-seg-cta-t { font-size: 23px; }
.pss-seg-cta-d { margin: 10px 0 20px; font-size: 15px; }
.pss-seg-nota { margin-top: 28px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.pss-seg-p,
.pss-seg-f,
.pss-seg-tacha,
.pss-seg-sello,
.pss-seg-marco { transition: none; }
.pss-seg-card.is-play *,
.pss-seg-stage *,
.pss-seg-stage *::after,
.pss-seg-cta * { animation: none !important; }
.pss-seg-card:hover,
.pss-seguridad .pss-seg-cta:hover { transform: translate3d(0, 0, 0); }
}
/* ===== requisitos ===== */
/* =============================================================================
PANTHERA OS · requisitos — «Tu app no se tira: se amplía»
Lista de lo que hace falta para ampliar la app actual en vez de hacer una nueva.
Cada punto es un botón que se marca (aria-pressed) y un medidor cuenta 0/7.
============================================================================= */
.pss .pss-requisitos { position: relative; overflow: hidden; }
/* ---- fondo ---- */
.pss .pss-req-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pss .pss-req-rejilla { --pss-grid-y: 12%; opacity: .55; }
.pss .pss-req-glow { --pss-glow-x: 78%; --pss-glow-y: 38%; --pss-glow-size: 760px; opacity: .55; }
.pss .pss-req-in { position: relative; z-index: 1; }
.pss .pss-req-head { max-width: 860px; }
/* ---- rejilla: lista + panel lateral ---- */
.pss .pss-req-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 48px;
align-items: start;
margin-top: 56px;
}
.pss .pss-req-hint {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text2);
}
.pss .pss-req-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--pss-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* ---- lista ---- */
.pss .pss-req-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
list-style: none;
counter-reset: none;
}
.pss .pss-req-list > li { display: flex; min-width: 0; }
/* 7 puntos en 2 columnas: el último ocupa las dos para cerrar la rejilla sin huecos */
.pss .pss-req-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pss .pss-req-item {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
grid-template-rows: auto;
column-gap: 16px;
align-items: start;
width: 100%;
min-height: 100%;
padding: 22px 56px 22px 20px;
text-align: left;
cursor: pointer;
border-radius: var(--pss-r-lg);
background: var(--pss-surface);
border: 1px solid var(--pss-line);
color: var(--pss-text);
transition: border-color var(--pss-d-2) var(--pss-ease), background-color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease), box-shadow var(--pss-d-2) var(--pss-ease);
-webkit-tap-highlight-color: transparent;
}
.pss .pss-req-item:hover {
background: var(--pss-surface);
border-color: var(--pss-line2);
color: var(--pss-text);
transform: translateY(-2px);
}
.pss .pss-req-item:active { transform: translateY(0) scale(.99); }
.pss .pss-req-item:focus-visible { outline: 2px solid var(--pss-accent-hi); outline-offset: 3px; }
.pss .pss-req-item[aria-pressed="true"] {
background: linear-gradient(180deg, rgba(var(--pss-accent-rgb), .10), rgba(var(--pss-accent-rgb), .03)), var(--pss-surface);
border-color: rgba(var(--pss-accent-rgb), .55);
box-shadow: 0 0 0 1px rgba(var(--pss-accent-rgb), .18), 0 18px 40px -24px rgba(var(--pss-accent-rgb), .55);
}
.pss .pss-req-item[aria-pressed="true"]:hover { border-color: rgba(var(--pss-accent-rgb), .75); }
/* icono */
.pss .pss-req-ico {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(var(--pss-accent-rgb), .08);
border: 1px solid rgba(var(--pss-accent-rgb), .22);
transition: background-color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-req-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--pss-accent-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pss .pss-req-item[aria-pressed="true"] .pss-req-ico { background: rgba(var(--pss-accent-rgb), .16); border-color: rgba(var(--pss-accent-rgb), .45); }
/* textos */
.pss .pss-req-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pss .pss-req-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pss .pss-req-n {
font-family: var(--pss-f-mono);
font-feature-settings: "zero" 1;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
line-height: 1;
color: var(--pss-text2);
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-req-item:hover .pss-req-n,
.pss .pss-req-item[aria-pressed="true"] .pss-req-n { color: var(--pss-accent-hi); }
.pss .pss-req-tag {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line2);
font-family: var(--pss-f-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1;
color: var(--pss-text2);
white-space: nowrap;
}
.pss .pss-req-tag--clave { color: var(--pss-on-accent); background: var(--pss-accent); border-color: var(--pss-accent); }
.pss .pss-req-t {
display: block;
margin-top: 4px;
font-family: var(--pss-f-display);
font-size: clamp(20px, 1.6vw, 24px);
font-weight: 600;
line-height: 1.12;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--pss-text);
text-wrap: balance;
}
.pss .pss-req-d { display: block; font-size: 15px; line-height: 1.55; color: var(--pss-text2); text-wrap: pretty; }
/* casilla de marcar (arriba a la derecha) */
.pss .pss-req-check {
position: absolute;
z-index: 2;
top: 18px;
right: 18px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 8px;
border: 1.5px solid var(--pss-line3);
background: rgba(var(--pss-bg-rgb), .5);
transition: background-color var(--pss-d-2) var(--pss-ease), border-color var(--pss-d-2) var(--pss-ease), transform var(--pss-d-2) var(--pss-ease-spring);
}
.pss .pss-req-check svg { width: 18px; height: 18px; fill: none; stroke: var(--pss-on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pss .pss-req-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--pss-ease) .05s; }
.pss .pss-req-item:hover .pss-req-check { border-color: rgba(var(--pss-accent-rgb), .7); }
.pss .pss-req-item[aria-pressed="true"] .pss-req-check { background: var(--pss-accent); border-color: var(--pss-accent); transform: scale(1.06); }
.pss .pss-req-item[aria-pressed="true"] .pss-req-check path { stroke-dashoffset: 0; }
/* el imprescindible lleva un borde verde tenue siempre */
.pss .pss-req-item--clave { border-color: rgba(var(--pss-accent-rgb), .3); }
/* ---- también ayuda ---- */
.pss .pss-req-extra {
margin-top: 22px;
padding: 20px 22px;
border-radius: var(--pss-r-lg);
border: 1px dashed var(--pss-line2);
}
.pss .pss-req-extra-t {
margin-bottom: 12px;
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pss-accent-hi);
}
.pss .pss-req-extra-list { display: grid; gap: 10px; list-style: none; }
.pss .pss-req-extra-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--pss-text2); }
.pss .pss-req-extra-list svg { width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; fill: none; stroke: var(--pss-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ---- panel lateral ---- */
.pss .pss-req-side { position: sticky; top: calc(var(--pss-sticky-top, 0px) + 32px); }
.pss .pss-req-panel {
position: relative;
padding: 28px;
border-radius: var(--pss-r-lg);
background: linear-gradient(180deg, var(--pss-surface2), var(--pss-surface));
border: 1px solid var(--pss-line2);
box-shadow: var(--pss-shadow-2);
}
.pss .pss-req-panel > *:not(.pss-edge) { position: relative; z-index: 1; }
.pss .pss-req-meter { display: flex; align-items: center; gap: 20px; }
.pss .pss-req-ring { position: relative; flex-shrink: 0; width: 104px; height: 104px; }
.pss .pss-req-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pss .pss-req-ring circle { fill: none; stroke-width: 8; }
.pss .pss-req-ring-t { stroke: rgba(255, 255, 255, .07); }
.pss .pss-req-ring-p {
stroke: var(--pss-accent);
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
filter: drop-shadow(0 0 6px rgba(var(--pss-accent-rgb), .55));
transition: stroke-dashoffset .6s var(--pss-ease), stroke .3s var(--pss-ease);
}
.pss .pss-req-ring-n {
position: absolute;
inset: 0;
display: flex;
align-items: baseline;
justify-content: center;
padding-top: 32px;
font-family: var(--pss-f-display);
color: var(--pss-text);
}
.pss .pss-req-ring-n b { font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pss .pss-req-ring-n small { font-size: 18px; font-weight: 500; color: var(--pss-text2); }
.pss .pss-req-meter-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pss .pss-req-meter-k { font-family: var(--pss-f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pss-text2); }
.pss .pss-req-estado { font-family: var(--pss-f-display); font-size: 24px; font-weight: 600; line-height: 1.1; text-transform: uppercase; color: var(--pss-text); }
.pss .pss-req-panel.is-completo .pss-req-estado { color: var(--pss-accent-hi); }
.pss .pss-req-panel.is-completo .pss-req-ring-p { stroke: var(--pss-accent-hi); }
.pss .pss-req-side-t {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--pss-line);
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pss-accent-hi);
}
.pss .pss-req-pasos { display: grid; gap: 14px; margin-top: 16px; list-style: none; }
.pss .pss-req-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--pss-text2); }
.pss .pss-req-pasos b { color: var(--pss-text); font-weight: 600; }
.pss .pss-req-paso-n {
display: grid;
place-items: center;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(var(--pss-accent-rgb), .45);
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
color: var(--pss-accent-hi);
}
.pss .pss-req-aviso {
display: flex;
gap: 12px;
margin-top: 22px;
padding: 14px 16px;
border-radius: var(--pss-r-sm);
background: rgba(var(--pss-warn-rgb), .07);
border: 1px solid rgba(var(--pss-warn-rgb), .28);
}
.pss .pss-req-aviso svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--pss-warn); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pss .pss-req-aviso p { font-size: 14px; line-height: 1.55; color: var(--pss-text2); }
.pss .pss-req-aviso b { color: var(--pss-text); font-weight: 600; }
.pss .pss-req-nota { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--pss-text2); }
.pss .pss-req-nota svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--pss-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pss .pss-req-reset {
display: inline-flex;
align-items: center;
margin-top: 18px;
padding: 0;
font-family: var(--pss-f-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pss-text2);
background: none;
border: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--pss-line3);
}
.pss .pss-req-reset:hover { color: var(--pss-text); background: none; text-decoration-color: var(--pss-accent); }
.pss .pss-req-reset[hidden] { display: none; }
/* ---- tableta ---- */
@media (max-width: 1023px) {
.pss .pss-req-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 44px; }
.pss .pss-req-side { position: relative; top: auto; }
}
/* ---- móvil ---- */
@media (max-width: 767px) {
.pss .pss-req-grid { margin-top: 36px; }
.pss .pss-req-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pss .pss-req-list > li:last-child:nth-child(odd) { grid-column: auto; }
/* en móvil el icono se va para que el texto use todo el ancho (la tarjeta queda más baja) */
.pss .pss-req-item { grid-template-columns: minmax(0, 1fr); padding: 18px 56px 20px 18px; }
.pss .pss-req-ico { display: none; }
.pss .pss-req-check { top: 16px; right: 14px; width: 28px; height: 28px; }
.pss .pss-req-t { font-size: 20px; }
.pss .pss-req-d { font-size: 14.5px; }
.pss .pss-req-extra { padding: 18px; }
.pss .pss-req-panel { padding: 22px 20px; }
.pss .pss-req-ring { width: 88px; height: 88px; }
.pss .pss-req-ring-n { padding-top: 26px; }
.pss .pss-req-ring-n b { font-size: 32px; }
.pss .pss-req-estado { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.pss .pss-req-item,
.pss .pss-req-check,
.pss .pss-req-check path,
.pss .pss-req-ring-p { transition: none; }
}
/* ===== cta ===== */
/* =============================================================================
PANTHERA OS · sección cta (cierre)
Carbón: foto real del gimnasio en blanco y negro muy oscurecida (tinte verde ≤ 8 %),
viñeta a --pss-bg en los bordes y el verde SOLO como halo detrás del botón.
Luz neutra que sigue al cursor, titular por palabras y botón magnético de WhatsApp
con un contorno de 1 px que recorre un brillo.
============================================================================= */
@property --pss-cta-a {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.pss-cta {
position: relative;
display: flex;
align-items: center;
min-height: clamp(720px, 94vh, 940px);
padding-block: clamp(120px, 11vw, 168px);
overflow: clip;
background: var(--pss-bg);
}
/* ---------- fondo ---------- */
.pss-cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pss-cta-parallax {
position: absolute;
inset: -70px 0;
transform: translate3d(0, var(--pss-cta-py, 0px), 0);
will-change: transform;
}
.pss-cta-foto { position: absolute; inset: 0; display: block; }
.pss-cta-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 26%;
/* carbón: blanco y negro, muy oscura y desenfocada (textura, no protagonista) */
opacity: .5;
filter: grayscale(1) brightness(.35) contrast(1.1) blur(3px);
}
/* tinte verde como mucho del 8 % */
.pss-cta-foto::after {
content: "";
position: absolute;
inset: 0;
background: var(--pss-accent);
mix-blend-mode: color;
opacity: .08;
}
/* viñeta: los bordes se funden a --pss-bg (#0A0B0C); arriba y abajo, costura limpia con las bandas vecinas */
.pss-cta-tint {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 78% 72% at 50% 50%, rgba(var(--pss-bg-rgb), .34) 0%, rgba(var(--pss-bg-rgb), .5) 52%, var(--pss-bg) 100%),
linear-gradient(180deg, var(--pss-bg) 0%, rgba(var(--pss-bg-rgb), 0) 22%, rgba(var(--pss-bg-rgb), 0) 72%, var(--pss-bg) 100%);
}
.pss-cta-rejilla { --pss-grid: 72px; --pss-grid-x: 50%; --pss-grid-y: 60%; opacity: .4; }
/* luz neutra que sigue al cursor (la mueve script.js; solo con ratón, no se ve en reposo) */
.pss-cta-luz {
position: absolute;
inset: 0;
background: radial-gradient(circle 460px at var(--pss-cta-mx, 50%) var(--pss-cta-my, 30%), rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 45%, rgba(255, 255, 255, 0) 72%);
opacity: 0;
transition: opacity .8s var(--pss-ease);
}
.pss-cta.is-luz .pss-cta-luz { opacity: 1; }
.pss-cta-linea {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--pss-accent-rgb), 0) 12%, rgba(var(--pss-accent-rgb), .55) 50%, rgba(var(--pss-accent-rgb), 0) 88%, transparent 100%);
box-shadow: 0 0 24px 1px rgba(var(--pss-accent-rgb), .35);
}
/* ---------- contenido ---------- */
.pss-cta-in {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pss-cta-title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 28px;
font-family: var(--pss-f-display);
font-size: clamp(56px, 9.6vw, 158px);
font-weight: 700;
line-height: .9;
letter-spacing: -.012em;
text-transform: uppercase;
color: var(--pss-text);
}
.pss-cta-l1,
.pss-cta-l2 { display: block; white-space: nowrap; }
/* brillo metálico sutil en la primera línea (como PANTHERA en el héroe) */
.pss-cta-l1 .pss-wi {
background-image: linear-gradient(180deg, var(--pss-text) 0%, var(--pss-text) 44%, rgba(243, 245, 246, .66) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* el titular, el texto y la nota van por encima del halo del botón (que se sale 120 px hacia arriba) */
.pss-cta-title,
.pss-cta-sub,
.pss-cta-small { position: relative; z-index: 1; }
.pss-cta-sub {
max-width: 44ch;
margin-top: 30px;
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.55;
color: var(--pss-text2);
text-wrap: balance;
}
.pss-cta-sub strong { color: var(--pss-text); font-weight: 600; }
.pss-cta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px 34px;
margin-top: 46px;
}
.pss-cta-btnwrap {
position: relative;
display: inline-flex;
border-radius: var(--pss-r-pill);
transition: translate .7s var(--pss-ease-spring);
}
/* el único verde del fondo: un halo de 640×320 px detrás del botón */
.pss-cta-halo {
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
width: 640px;
height: 320px;
background: radial-gradient(closest-side, rgba(var(--pss-accent-rgb), .22), rgba(var(--pss-accent-rgb), .07) 55%, rgba(var(--pss-accent-rgb), 0) 100%);
transform: translate(-50%, -50%);
pointer-events: none;
transition: opacity var(--pss-d-3) var(--pss-ease), scale var(--pss-d-3) var(--pss-ease);
opacity: .85;
}
.pss-cta-btnwrap:hover .pss-cta-halo { opacity: 1; scale: 1.06; }
/* contorno de 1 px en --pss-line2 separado del botón, con un brillo que lo recorre */
.pss-cta-marco {
position: absolute;
inset: -7px;
border-radius: var(--pss-r-pill);
box-shadow: inset 0 0 0 1px var(--pss-line2);
pointer-events: none;
transition: box-shadow var(--pss-d-2) var(--pss-ease), opacity var(--pss-d-2) var(--pss-ease);
}
.pss-cta-marco::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--pss-cta-a), rgba(var(--pss-accent-hi-rgb), 0) 0deg, rgba(var(--pss-accent-hi-rgb), 0) 250deg, rgba(var(--pss-accent-hi-rgb), .95) 312deg, rgba(255, 255, 255, .9) 322deg, rgba(var(--pss-accent-hi-rgb), 0) 346deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: .75;
animation: pss-cta-giro 4.8s linear infinite;
transition: opacity var(--pss-d-2) var(--pss-ease);
}
.pss-cta-btnwrap:hover .pss-cta-marco { box-shadow: inset 0 0 0 1px var(--pss-line3); }
.pss-cta-btnwrap:hover .pss-cta-marco::before { opacity: 1; }
/* con el foco de teclado, el contorno de foco ocupa su sitio */
.pss-cta-btnwrap:has(.pss-cta-wa:focus-visible) .pss-cta-marco { opacity: 0; }
.pss .pss-cta-wa {
--pss-btn-h: 72px;
--pss-btn-px: 34px;
--pss-btn-fs: 18px;
gap: 14px;
letter-spacing: -.01em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 16px 40px -16px rgba(var(--pss-accent-rgb), .7);
}
.pss .pss-cta-wa:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 20px 48px -14px rgba(var(--pss-accent-rgb), .85);
}
.pss .pss-cta-wa:focus-visible { outline-offset: 6px; }
.pss .pss-cta-wa-ico { width: 24px; height: 24px; transition: transform var(--pss-d-2) var(--pss-ease-spring); }
.pss .pss-cta-wa:hover .pss-cta-wa-ico { transform: rotate(-10deg) scale(1.1); }
.pss .pss-cta-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 4px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: var(--pss-text);
text-decoration: none;
transition: color var(--pss-d-2) var(--pss-ease);
}
.pss .pss-cta-link span {
padding-bottom: 4px;
background:
linear-gradient(var(--pss-accent-hi), var(--pss-accent-hi)) 0 100% / 0% 1px no-repeat,
linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)) 0 100% / 100% 1px no-repeat;
transition: background-size .55s var(--pss-ease);
}
.pss .pss-cta-link svg { width: 16px; height: 16px; flex: none; transition: transform var(--pss-d-2) var(--pss-ease); }
.pss .pss-cta-link:hover,
.pss .pss-cta-link:focus-visible { color: var(--pss-accent-hi); }
.pss .pss-cta-link:hover span,
.pss .pss-cta-link:focus-visible span { background-size: 100% 1px, 100% 1px; }
.pss .pss-cta-link:hover svg { transform: translate3d(2px, -2px, 0); }
.pss-cta-small {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 34px;
padding: 8px 16px 8px 10px;
border-radius: var(--pss-r-pill);
border: 1px solid var(--pss-line);
background: rgba(var(--pss-bg-rgb), .62);
font-size: 14.5px;
line-height: 1.35;
color: var(--pss-text2);
}
.pss .pss-cta-small svg {
flex: none;
width: 20px;
height: 20px;
padding: 3px;
border-radius: 50%;
background: rgba(var(--pss-accent-rgb), .16);
fill: none;
stroke: var(--pss-accent-hi);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------- fotogramas ---------- */
@keyframes pss-cta-giro { to { --pss-cta-a: 360deg; } }
/* ---------- móvil ---------- */
@media (max-width: 767px) {
.pss-cta { min-height: 660px; padding-block: 96px 104px; }
.pss-cta-parallax { inset: -40px 0; }
.pss-cta-foto img { object-position: 50% 18%; opacity: .5; filter: grayscale(1) brightness(.35) contrast(1.1) blur(2px); }
.pss-cta-tint {
background:
radial-gradient(ellipse 110% 62% at 50% 46%, rgba(var(--pss-bg-rgb), .34) 0%, rgba(var(--pss-bg-rgb), .52) 55%, var(--pss-bg) 100%),
linear-gradient(180deg, var(--pss-bg) 0%, rgba(var(--pss-bg-rgb), 0) 20%, rgba(var(--pss-bg-rgb), 0) 64%, var(--pss-bg) 100%);
}
.pss-cta-halo { width: 460px; height: 260px; }
.pss-cta-marco { inset: -6px; }
.pss-cta-title { margin-top: 22px; font-size: clamp(44px, 13.4vw, 64px); line-height: .92; }
.pss-cta-sub { margin-top: 22px; font-size: 16.5px; }
.pss-cta-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 34px; }
.pss-cta-btnwrap { display: flex; }
.pss .pss-cta-wa { --pss-btn-h: 62px; --pss-btn-px: 22px; --pss-btn-fs: 16.5px; gap: 12px; width: 100%; }
.pss .pss-cta-wa-ico { width: 22px; height: 22px; }
.pss .pss-cta-link { align-self: center; padding: 14px 4px; }
.pss-cta-small {
display: block;
margin-top: 18px;
padding: 0;
border: 0;
background: none;
font-size: 13px;
text-align: center;
text-wrap: balance;
}
.pss .pss-cta-small svg { display: inline-block; width: 18px; height: 18px; margin-right: 7px; vertical-align: -4px; }
}
@media (prefers-reduced-motion: reduce) {
/* sin brillo que recorre: queda solo el contorno fino */
.pss-cta-marco::before { display: none; }
.pss-cta-parallax { transform: none; }
}
/* ===== integracion ===== */
/* =============================================================================
PANTHERA OS · integración de la página entera
Va la última en sections.json: solo retoca la UNIÓN entre secciones, sin tocar
su interior. Cada regla dice qué arregla.
============================================================================= */
/* ---------------------------------------------------------------------------
1. Costura común entre secciones: «horizonte verde».
El héroe (abajo), el panel, la app y el cierre ya lo dibujan con sus propios
fondos. Aquí se añade el MISMO trazo a las cinco uniones que no lo tenían
(ticker→simulador, simulador→recorrido, app→ecosistema, ecosistema→empieza,
empieza→seguridad). Así ninguna banda cambia de fondo en seco y el ritmo es
siempre el mismo: 144 px · horizonte · 144 px (88 · 88 en móvil).
Las raíces de estas secciones no usaban ::before ni ::after.
--------------------------------------------------------------------------- */
.pss .pss-simulador::before,
.pss .pss-recorrido::before,
.pss .pss-ecosistema::before,
.pss .pss-empieza::before,
.pss .pss-seguridad::before,
.pss .pss-requisitos::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 1;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(var(--pss-accent-rgb), 0) 18%, rgba(var(--pss-accent-rgb), .45) 50%, rgba(var(--pss-accent-rgb), 0) 82%, transparent 100%);
box-shadow: 0 0 22px 1px rgba(var(--pss-accent-rgb), .28);
}
/* luz que cae del horizonte (como la del panel) donde la sección no tiene ya
un resplandor arriba: simulador y empieza. Recorrido, ecosistema y seguridad
ya lo traen en su propio fondo. */
.pss .pss-simulador::after,
.pss .pss-empieza::after {
content: "";
position: absolute;
left: 50%;
top: 0;
z-index: 0;
width: min(900px, 90%);
height: 260px;
pointer-events: none;
background: radial-gradient(50% 100% at 50% 0%, rgba(var(--pss-accent-rgb), .09), transparent 100%);
transform: translateX(-50%);
}
/* el trazo de la app no tenía halo: el mismo que el del panel */
.pss .pss-app .pss-app-hair { box-shadow: 0 0 22px 1px rgba(var(--pss-accent-rgb), .28); }