/* ═══ LA CAPA VIAJA CON LA HOJA (2026-07-20) ══════════════════════════════════
Esta hoja declara su @layer ACÁ ADENTRO. Antes la capa la ponía quien la
importaba —`@import url(...) layer(lib)`, repetido en 4 emisores— así que
la hoja caía en su capa SOLO si el importador acertaba, y cargarla por
la dejaba SIN CAPA: en CSS lo no-capado le gana a todo lo capado.
Con la capa acá la hoja es inmune a CÓMO se la cargue, y el puede
usar (paralelo, y un fallo se ve en Network) en vez de @import
(serial, render-blocking, y si falla se pierde EN SILENCIO — el defecto que
dejaba el shell sin `container-type` y tiraba el layout a flujo plano).
═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
* sw.css — LOS WIDGETS del sitio (serie Sw). Bloques ESPECIALES/interactivos del .guiz.
*
* Regla dura: el sitio renderiza HEADLESS (HTML estático, sin circuito Blazor) → toda la interacción
* es CSS PURO (truco :checked, @keyframes, :hover), jamás JS del circuito. Consume SOLO tokens --mx-*
* (ver MxLite.MyST.Sx/wwwroot/stk-tokens.css): el site-kit aislado del motor (--mx-*).
*
* Se importa a layer(lib) desde StudioHtml.AxmlPage.
*/
/* ══════════════════════════════════════════════════════════════════════════
SwWelcome — modal de bienvenida SIN JS (truco :checked)
El switch nace checked → el modal ENTRA al cargar; la ×/scrim/dismiss lo desmarcan → cierra.
══════════════════════════════════════════════════════════════════════════ */
.sw-welcome-root { display: contents; }
.sw-welcome {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 40px);
opacity: 0;
visibility: hidden;
transition: opacity .3s var(--mx-ease-out), visibility .3s var(--mx-ease-out);
}
/* nace visible (switch checked por defecto) → animación de entrada en el primer paint */
.sw-welcome__switch:checked ~ .sw-welcome { opacity: 1; visibility: visible; }
.sw-welcome__scrim {
position: absolute;
inset: 0;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
background: color-mix(in srgb, #0b1220 62%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.sw-welcome__card {
position: relative;
z-index: 1;
width: min(520px, 100%);
max-height: calc(100dvh - 48px);
overflow: auto;
box-sizing: border-box;
padding: clamp(24px, 4vw, 40px);
text-align: center;
background: var(--mx-color-surface);
color: var(--mx-color-text);
border: 1px solid var(--mx-color-border);
border-radius: var(--mx-radius-2xl);
box-shadow: var(--mx-elevation-3);
transform: translateY(14px) scale(.97);
transition: transform .34s var(--mx-ease-out);
}
.sw-welcome__switch:checked ~ .sw-welcome .sw-welcome__card { transform: none; }
/* franja de marca superior */
.sw-welcome__card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 6px;
border-radius: var(--mx-radius-2xl) var(--mx-radius-2xl) 0 0;
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
}
.sw-welcome__x {
position: absolute;
top: 12px;
right: 14px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
font-size: 26px;
line-height: 1;
cursor: pointer;
border-radius: var(--mx-radius-full);
color: var(--mx-color-text-muted);
transition: background .18s, color .18s;
}
.sw-welcome__x:hover { background: color-mix(in srgb, var(--mx-color-text) 8%, transparent); color: var(--mx-color-text); }
.sw-welcome__badge {
display: inline-block;
margin-bottom: 12px;
padding: 5px 14px;
font-size: var(--mx-text-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mx-color-primary-dark, var(--mx-color-primary));
background: color-mix(in srgb, var(--mx-color-primary) 14%, transparent);
border-radius: var(--mx-radius-full);
}
.sw-welcome__title {
margin: 4px 0 10px;
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif));
font-weight: 900;
font-size: clamp(24px, 4vw, 32px);
line-height: 1.1;
text-wrap: balance;
}
.sw-welcome__subtitle {
margin: 0 auto;
max-width: 40ch;
color: var(--mx-color-text-muted);
font-size: var(--mx-text-lg);
line-height: 1.5;
}
.sw-welcome__body { margin-top: 18px; }
.sw-welcome__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 26px;
}
.sw-welcome__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 30px;
font-weight: 800;
text-decoration: none;
color: var(--mx-color-primary-on);
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
border-radius: var(--mx-radius-full);
box-shadow: var(--mx-elevation-2);
transition: transform .16s var(--mx-ease-out), box-shadow .16s;
}
.sw-welcome__cta:hover { transform: translateY(-2px); box-shadow: var(--mx-elevation-3); }
.sw-welcome__dismiss {
cursor: pointer;
padding: 13px 18px;
font-weight: 600;
color: var(--mx-color-text-muted);
border-radius: var(--mx-radius-full);
transition: color .16s, background .16s;
}
.sw-welcome__dismiss:hover { color: var(--mx-color-text); background: color-mix(in srgb, var(--mx-color-text) 6%, transparent); }
/* ══════════════════════════════════════════════════════════════════════════
SwTicker — cintilla animada SIN JS (@keyframes + contenido duplicado)
══════════════════════════════════════════════════════════════════════════ */
.sw-ticker {
--_dur: 30s;
overflow: hidden;
position: relative;
display: flex;
width: 100%;
/* difuminado en los bordes: los mensajes entran/salen sin corte duro */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sw-ticker--slow { --_dur: 46s; }
.sw-ticker--fast { --_dur: 16s; }
.sw-ticker--brand {
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
color: var(--mx-color-primary-on);
}
.sw-ticker--surface {
background: var(--mx-color-surface);
color: var(--mx-color-text);
border-block: 1px solid var(--mx-color-border);
}
.sw-ticker__track {
display: flex;
flex: 0 0 auto;
width: max-content;
animation: sw-ticker-scroll var(--_dur) linear infinite;
}
.sw-ticker:hover .sw-ticker__track { animation-play-state: paused; }
.sw-ticker__group {
display: flex;
align-items: center;
flex: 0 0 auto;
padding-block: 11px;
}
.sw-ticker__item {
padding-inline: 22px;
font-weight: 700;
font-size: var(--mx-text-sm);
letter-spacing: .01em;
white-space: nowrap;
}
.sw-ticker__sep { opacity: .5; font-size: var(--mx-text-sm); }
@keyframes sw-ticker-scroll { to { transform: translateX(-50%); } }
/* ══════════════════════════════════════════════════════════════════════════
SwFab — botón flotante de acción (WhatsApp/contacto), SIN JS
══════════════════════════════════════════════════════════════════════════ */
.sw-fab {
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
z-index: 1100;
display: inline-flex;
align-items: center;
gap: 0;
max-width: 56px;
height: 56px;
padding: 0;
overflow: hidden;
text-decoration: none;
font-weight: 800;
color: #fff;
border-radius: var(--mx-radius-full);
box-shadow: var(--mx-elevation-3);
transition: max-width .32s var(--mx-ease-out), transform .18s var(--mx-ease-out), box-shadow .18s;
}
.sw-fab__icon {
flex: 0 0 56px;
display: grid;
place-items: center;
width: 56px;
height: 56px;
font-size: 25px;
}
.sw-fab__label {
white-space: nowrap;
padding-right: 22px;
font-size: var(--mx-text-base);
}
/* pill cerrada (solo icono) → se ABRE en hover/focus mostrando el label */
.sw-fab:hover,
.sw-fab:focus-visible { max-width: 320px; transform: translateY(-2px); }
.sw-fab--whatsapp { background: #25D366; }
.sw-fab--whatsapp:hover { background: #1ebe5b; }
.sw-fab--brand { background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)); }
.sw-fab--dark { background: #16202e; }
/* halo pulsante para llamar la atención (respeta reduce-motion abajo) */
.sw-fab::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 currentColor;
opacity: .5;
animation: sw-fab-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes sw-fab-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
70% { box-shadow: 0 0 0 16px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ── Accesibilidad: sin movimiento, todo queda estático y usable ── */
@media (prefers-reduced-motion: reduce) {
.sw-ticker__track { animation: none; }
.sw-fab::after { animation: none; }
.sw-welcome,
.sw-welcome__card { transition: none; }
.sw-fab { transition: transform .18s; }
}
/* ══════════════════════════════════════════════════════════════════════════
SwScratch — rasca-y-gana SIN JS (truco :checked + lámina metálica que se desvanece)
══════════════════════════════════════════════════════════════════════════ */
.sw-scratch {
position: relative;
display: grid;
place-items: center;
min-height: 170px;
isolation: isolate;
text-align: center;
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-border);
border-radius: var(--mx-radius-xl);
overflow: hidden;
box-shadow: var(--mx-elevation-1);
}
.sw-scratch__prize {
display: flex;
flex-direction: column;
gap: 6px;
padding: clamp(20px, 3vw, 30px);
}
.sw-scratch__title {
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif));
font-weight: 900;
font-size: clamp(20px, 3vw, 26px);
line-height: 1.1;
color: var(--mx-color-primary-dark, var(--mx-color-primary));
}
.sw-scratch__body { color: var(--mx-color-text-muted); font-size: var(--mx-text-base); }
.sw-scratch__foil {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
cursor: pointer;
color: #464a56;
font-weight: 800;
font-size: var(--mx-text-lg);
letter-spacing: .03em;
/* lámina metálica con textura de rascado (hatch diagonal) */
background:
repeating-linear-gradient(48deg, rgba(255,255,255,.35) 0 3px, transparent 3px 9px),
repeating-linear-gradient(-42deg, rgba(0,0,0,.06) 0 4px, transparent 4px 11px),
linear-gradient(135deg, #d9dce4, #b4b8c3 55%, #cdd0d9);
transition: opacity .45s var(--mx-ease-out), transform .45s var(--mx-ease-out), filter .45s;
}
.sw-scratch__hint {
padding: 8px 16px;
border-radius: var(--mx-radius-full);
background: color-mix(in srgb, #fff 55%, transparent);
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* rascada: la lámina se va con un giro; el premio aparece con un pop */
.sw-scratch__switch:checked ~ .sw-scratch__foil {
opacity: 0;
transform: scale(1.18) rotate(-4deg);
filter: blur(2px);
pointer-events: none;
}
.sw-scratch__switch:checked ~ .sw-scratch__prize {
animation: sw-scratch-pop .55s var(--mx-ease-out) both;
}
@keyframes sw-scratch-pop {
0% { transform: scale(.82); opacity: .35; }
60% { transform: scale(1.06); }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sw-scratch__foil { transition: opacity .2s; transform: none; filter: none; }
.sw-scratch__switch:checked ~ .sw-scratch__foil { transform: none; filter: none; }
.sw-scratch__switch:checked ~ .sw-scratch__prize { animation: none; }
}
}