/* ═══ 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 {
/*
* sx.css — la piel del SITE-KIT (los bloques de marketing del sitio público).
* Reglas de la casa (docs/css/03): SOLO consume tokens --mx-* (la línea de tokens del SITIO — ver
* stk-tokens.css, que los aísla del motor --mx-*); cero hex de tema, cero candados de importancia;
* responsive por auto-fit/clamp (sin breakpoints frágiles); entra en @layer lib.
*/
/* ── SxSection · el ritmo del sitio ── */
/* El AIRE de una sección lo manda la perilla DENSIDAD del tema (--mx-space-12), no un clamp fijo:
un rubro compacto («se consume parado, con hambre») y uno amplio tienen que RESPIRAR distinto. El
clamp queda como piso/techo para que ningún grado rompa el layout, y el vw conserva la respuesta
al ancho. Sin esto, la perilla existía pero no movía lo único que de verdad se nota: el aire. */
.sx-section { padding: clamp(24px, var(--mx-space-12, 80px), 128px) clamp(16px, 4vw, 40px); }
.sx-section--alt { background: color-mix(in srgb, var(--mx-color-primary) 4%, var(--mx-color-bg)); }
.sx-section--brand { background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)); color: var(--mx-color-primary-on); }
.sx-section__inner { max-width: 1100px; margin: 0 auto; min-width: 0; }
/* ── SxNav · glass sutil, sticky ── */
.sx-nav {
position: sticky; top: 0; z-index: 50;
background: var(--mx-glass-bg, color-mix(in srgb, var(--mx-color-bg) 82%, transparent));
backdrop-filter: var(--mx-glass-blur, blur(12px));
border-bottom: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
}
.sx-nav__inner {
max-width: 1100px; margin: 0 auto;
display: flex; align-items: center; gap: 14px;
padding: 12px clamp(16px, 4vw, 40px); min-width: 0;
}
.sx-nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--mx-text-lg, 16px); letter-spacing: -.01em; min-width: 0; }
.sx-nav__brand svg { width: 30px; height: 30px; display: block; }
.sx-nav__links { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ── SxHero ── */
.sx-hero { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
.sx-hero--split { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.sx-hero--center { text-align: center; justify-items: center; }
.sx-hero__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sx-hero--center .sx-hero__copy { align-items: center; }
.sx-hero__kicker {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px; /* lens-mejora · acomoda el punto de acento */
font-size: var(--mx-text-xs, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--mx-color-primary);
background: color-mix(in srgb, var(--mx-color-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--mx-color-primary) 25%, transparent);
padding: 5px 13px; border-radius: var(--mx-radius-full, 999px);
}
.sx-hero__kicker::before { /* lens-mejora · punto de acento — el kicker deja de ser una píldora plana */
content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
background: var(--mx-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-color-primary) 22%, transparent);
}
.sx-hero--center .sx-hero__kicker { align-self: center; }
.sx-hero__title {
margin: 0; font-size: clamp(30px, 5.4vw, 54px); font-weight: 800; letter-spacing: -.025em;
line-height: 1.05; text-wrap: balance; overflow-wrap: break-word;
background: var(--sx-title-fill, linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-secondary))); /* trío de marca; el dial Temperamento lo fuerza a sólido (formal) o tricolor (fiesta) */
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-hero__subtitle { margin: 0; max-width: 52ch; color: var(--mx-color-text-muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.6; }
.sx-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; } /* lens-mejora · más aire entre botones y respecto de la bajada */
.sx-hero__media { min-width: 0; }
.sx-hero__media img, .sx-hero__media svg { border-radius: var(--mx-radius-xl, 16px); box-shadow: var(--mx-elevation-3); }
/* ── SxFeatures / SxFeature ── */
.sx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--sx-feat-min, 240px), 100%), 1fr)); gap: 16px; }
.sx-feature {
display: flex; flex-direction: column; gap: 10px; min-width: 0;
padding: 22px;
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
border-radius: var(--mx-radius-xl, 16px);
box-shadow: var(--mx-elevation-1);
transition: transform var(--mx-dur-2, .18s) var(--mx-ease-out, ease), box-shadow var(--mx-dur-2, .18s) var(--mx-ease-out, ease);
}
.sx-feature:hover { transform: translateY(-3px); box-shadow: var(--mx-elevation-3); }
.sx-feature__icon {
width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px;
background: color-mix(in srgb, var(--mx-color-primary) 12%, var(--mx-color-surface));
border-radius: var(--mx-radius-md, 10px);
}
.sx-feature__title { margin: 0; font-size: var(--mx-text-lg, 16px); font-weight: 700; }
.sx-feature__body { color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13.5px); line-height: 1.55; }
/* ── SxStats / SxStat ── */
.sx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.sx-stat {
display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
padding: 20px 12px;
border-radius: var(--mx-radius-lg, 12px);
background: color-mix(in srgb, var(--mx-color-primary) 6%, var(--mx-color-surface));
border: 1px solid color-mix(in srgb, var(--mx-color-primary) 16%, transparent);
}
.sx-stat__value {
font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1;
color: var(--mx-color-primary);
font-variant-numeric: tabular-nums;
}
.sx-stat__label { color: var(--mx-color-text-muted); font-size: var(--mx-text-xs, 12px); }
/* ── SxSteps / SxStep · el counter pinta el número ── */
.sx-steps { list-style: none; counter-reset: sx-paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.sx-step { counter-increment: sx-paso; position: relative; padding: 20px 20px 20px 64px; background: var(--mx-color-surface); border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); border-radius: var(--mx-radius-xl, 16px); min-width: 0; }
.sx-step::before {
content: counter(sx-paso);
position: absolute; left: 18px; top: 18px;
width: 32px; height: 32px; display: grid; place-items: center;
font-weight: 800; font-size: var(--mx-text-sm, 14px);
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, 999px);
}
.sx-step__title { margin: 0 0 6px; font-size: var(--mx-text-base, 15px); font-weight: 700; }
.sx-step__body { color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13.5px); line-height: 1.55; }
/* ── SxQuote ── */
.sx-quote { margin: 0; padding: 22px 24px; background: var(--mx-color-surface); border-left: 3px solid var(--mx-color-primary); border-radius: var(--mx-radius-lg, 12px); box-shadow: var(--mx-elevation-1); }
.sx-quote__text { margin: 0 0 10px; font-size: var(--mx-text-base, 15px); line-height: 1.6; color: var(--mx-color-text); }
.sx-quote__who { color: var(--mx-color-text-muted); font-size: var(--mx-text-xs, 12px); }
/* ── SxGallery ── */
.sx-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--sx-gal-min, 220px), 100%), 1fr)); gap: 12px; }
.sx-gallery img { width: 100%; border-radius: var(--mx-radius-lg, 12px); box-shadow: var(--mx-elevation-1); }
/* ── SxCta · el banner de marca ── */
.sx-cta {
display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap;
padding: clamp(24px, 4vw, 44px);
border-radius: var(--mx-radius-2xl, 22px);
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
color: var(--mx-color-primary-on);
box-shadow: var(--mx-elevation-3), var(--mx-glow-primary, none);
}
.sx-cta__copy { flex: 1 1 320px; min-width: 0; }
.sx-cta__title { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; }
.sx-cta__subtitle { margin: 6px 0 0; opacity: .85; font-size: var(--mx-text-sm, 14px); }
.sx-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* ── SxFooter ── */
.sx-footer { border-top: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); background: color-mix(in srgb, var(--mx-color-primary) 3%, var(--mx-color-bg)); }
.sx-footer__inner { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.sx-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13.5px); }
.sx-footer__copy { border-top: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); padding-top: 14px; color: var(--mx-color-text-subtle); font-size: var(--mx-text-xs, 12px); }
@media (prefers-reduced-motion: reduce) { .sx-feature, .sx-feature:hover { transition: none; transform: none; } }
/* ── SxLink · ancla vestida de botón (salidas del sitio: /portal, externos) ── */
.sx-link {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 18px; border-radius: var(--mx-radius-md, 10px);
font-weight: 600; font-size: var(--mx-text-sm, 14px); text-decoration: none;
transition: filter var(--mx-dur-2, .15s), background var(--mx-dur-2, .15s);
}
.sx-link--primary { background: var(--mx-color-primary); color: var(--mx-color-primary-on); }
.sx-link--primary:hover { filter: brightness(1.08); }
.sx-link--outlined { border: 1px solid var(--mx-color-primary); color: var(--mx-color-primary); background: transparent; }
.sx-link--outlined:hover { background: color-mix(in srgb, var(--mx-color-primary) 8%, transparent); }
.sx-link--text { color: var(--mx-color-primary); background: transparent; padding: 9px 10px; }
.sx-link--text:hover { background: color-mix(in srgb, var(--mx-color-primary) 8%, transparent); }
/* ── SxAuthForm · el registro del sitio ── */
.sx-auth {
display: flex; flex-direction: column; gap: 14px;
max-width: 420px; margin: 0 auto; width: 100%;
padding: clamp(18px, 3vw, 28px);
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
border-radius: var(--mx-radius-xl, 16px);
box-shadow: var(--mx-elevation-2);
}
.sx-auth__field { display: flex; flex-direction: column; gap: 5px; font-size: var(--mx-text-sm, 13px); font-weight: 600; color: var(--mx-color-text); }
.sx-auth__field .cx-input { width: 100%; box-sizing: border-box; }
.sx-auth__submit { border: 0; cursor: pointer; font-family: inherit; margin-top: 4px; }
.sx-auth__alt { margin: 2px 0 0; text-align: center; font-size: var(--mx-text-xs, 12px); color: var(--mx-color-text-muted); }
.sx-auth__alt a { color: var(--mx-color-primary); font-weight: 600; }
/* ── SxNav · los links del sitio con la página ACTIVA marcada ── */
.sx-nav__link {
color: var(--mx-color-text-muted); text-decoration: none;
font-size: var(--mx-text-sm, 14px); font-weight: 600;
padding: 7px 12px; border-radius: var(--mx-radius-md, 10px);
transition: color var(--mx-dur-2, .15s), background var(--mx-dur-2, .15s);
}
.sx-nav__link:hover { color: var(--mx-color-text); background: color-mix(in srgb, var(--mx-color-primary) 7%, transparent); }
.sx-nav__link.on {
color: var(--mx-color-primary); font-weight: 700;
background: color-mix(in srgb, var(--mx-color-primary) 10%, transparent);
}
/* ═══ E3 · los bloques de CONTENIDO (la segunda mitad del site-kit) ═══ */
/* ── SxProse · el texto rico (markdown ligero) ── */
.sx-prose { max-width: 68ch; line-height: 1.7; color: var(--mx-color-text); font-size: var(--mx-text-base, 15px); }
.sx-prose h2 { margin: 1.6em 0 .5em; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.sx-prose h2:first-child, .sx-prose h3:first-child, .sx-prose p:first-child { margin-top: 0; }
.sx-prose h3 { margin: 1.3em 0 .4em; font-size: var(--mx-text-lg, 17px); font-weight: 700; }
.sx-prose p { margin: 0 0 .9em; }
.sx-prose ul { margin: 0 0 .9em; padding-left: 1.3em; }
.sx-prose li { margin: .25em 0; }
.sx-prose a { color: var(--mx-color-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mx-color-primary) 35%, transparent); }
.sx-prose a:hover { border-bottom-color: var(--mx-color-primary); }
.sx-prose b { font-weight: 700; }
/* ── SxMediaText · imagen ↔ texto ── */
.sx-mediatext { display: grid; gap: clamp(18px, 3.5vw, 44px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.sx-mediatext__media { min-width: 0; }
.sx-mediatext--right .sx-mediatext__media { order: 2; }
.sx-mediatext__media img, .sx-mediatext__media svg { border-radius: var(--mx-radius-xl, 16px); box-shadow: var(--mx-elevation-2); max-width: 100%; }
.sx-mediatext__body { min-width: 0; }
/* ── SxColumns · columnas libres ── */
.sx-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--sx-col-min, 260px), 100%), 1fr)); gap: clamp(16px, 3vw, 32px); }
/* ── SxEmbed · video/mapa whitelisted ── */
.sx-embed { position: relative; width: 100%; border-radius: var(--mx-radius-xl, 16px); overflow: hidden; box-shadow: var(--mx-elevation-2); background: var(--mx-color-surface-2, var(--mx-color-surface)); }
.sx-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-embed--bloqueado { aspect-ratio: auto; padding: 18px; color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13px); box-shadow: none; border: 1px dashed var(--mx-color-border); }
/* ── SxFaq · acordeón nativo ── */
.sx-faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sx-faq__item { background: var(--mx-color-surface); border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); border-radius: var(--mx-radius-lg, 12px); overflow: hidden; }
.sx-faq__item summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: var(--mx-text-base, 15px); list-style: none; position: relative; padding-right: 40px; }
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--mx-color-primary); transition: transform var(--mx-dur-2, .18s); }
.sx-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sx-faq__item[open] summary { border-bottom: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); }
.sx-faq__a { padding: 12px 18px 16px; color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13.5px); line-height: 1.6; }
/* ── SxPricing / SxPrice · la tabla de precios ── */
.sx-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.sx-price {
position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
padding: 24px 22px;
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
border-radius: var(--mx-radius-xl, 16px);
box-shadow: var(--mx-elevation-1);
}
.sx-price--featured {
border-color: color-mix(in srgb, var(--mx-color-primary) 45%, transparent);
box-shadow: var(--mx-elevation-3), 0 0 0 1px color-mix(in srgb, var(--mx-color-primary) 30%, transparent);
}
.sx-price__badge {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
font-size: var(--mx-text-xs, 11px); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--mx-color-primary-on); background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
padding: 3px 12px; border-radius: var(--mx-radius-full, 999px); white-space: nowrap;
}
.sx-price__title { margin: 0; font-size: var(--mx-text-base, 15px); font-weight: 700; }
.sx-price__amount { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--mx-color-primary); font-variant-numeric: tabular-nums; }
.sx-price__period { font-size: var(--mx-text-xs, 12px); font-weight: 500; color: var(--mx-color-text-muted); margin-left: 4px; }
.sx-price__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sx-price__features li { position: relative; padding-left: 22px; font-size: var(--mx-text-sm, 13.5px); color: var(--mx-color-text-muted); line-height: 1.45; }
.sx-price__features li::before { content: "✓"; position: absolute; left: 0; color: var(--mx-color-success, var(--mx-color-primary)); font-weight: 700; }
.sx-price__actions { margin-top: 6px; }
/* ── SxBanner · el aviso ── */
.sx-banner {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 18px; border-radius: var(--mx-radius-lg, 12px);
font-size: var(--mx-text-sm, 14px); line-height: 1.5;
}
.sx-banner--info { background: color-mix(in srgb, var(--mx-color-primary) 8%, var(--mx-color-surface)); border: 1px solid color-mix(in srgb, var(--mx-color-primary) 22%, transparent); }
.sx-banner--warn { background: color-mix(in srgb, var(--mx-color-warn, #b45309) 10%, var(--mx-color-surface)); border: 1px solid color-mix(in srgb, var(--mx-color-warn, #b45309) 28%, transparent); }
.sx-banner--brand { background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)); color: var(--mx-color-primary-on); }
.sx-banner__icon { font-size: 18px; line-height: 1.3; }
.sx-banner__body { min-width: 0; }
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
* C5 · Fase 1 — REALCE DE APARIENCIA (todo sobre la capa --mx-*, cero JS, degrada limpio)
* Sube el sitio de "plano" a "de campaña": tipografía display, tonos cálidos, micro-interacción y
* reveal al scroll. Va al final para reforzar las reglas de arriba (misma especificidad, orden posterior).
* ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── Ritmo vertical más amplio (secciones 56–112px como el original) ── */
.sx-section { padding-block: clamp(28px, var(--mx-space-12, 80px), 136px); }
/* ── Tipografía DISPLAY de campaña en los títulos (Nunito-like, pesos altos) ── */
.sx-nav__brand,
.sx-hero__title, .sx-hero__kicker,
.sx-cta__title, .sx-stat__value, .sx-price__amount,
.sx-prose h2, .sx-prose h3, .sx-step__title, .sx-feature__title {
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif));
}
.sx-hero__title { font-weight: 900; letter-spacing: -.03em; }
.sx-cta__title { font-weight: 900; letter-spacing: -.02em; }
.sx-stat__value, .sx-price__amount { font-weight: 900; }
.sx-prose h2 { font-weight: 900; letter-spacing: -.02em; font-size: clamp(22px, 3.2vw, 34px); }
/* ── Tono CÁLIDO por sección (el motor daba fondos neutros) ── */
.sx-section--alt {
background: linear-gradient(180deg, color-mix(in srgb, var(--mx-color-primary) 6%, var(--mx-color-bg)), var(--mx-color-bg));
}
.sx-section--brand {
background:
radial-gradient(130% 150% at 10% -25%, color-mix(in srgb, #E9A93E 30%, transparent), transparent 55%),
linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-secondary)); /* trío de marca · la banda muestra el 2º color */
}
/* ── Hover-LIFT cálido en TODAS las cards (antes solo SxFeature) ── */
.sx-stat, .sx-quote, .sx-price, .sx-gallery img {
transition: transform var(--mx-dur-2, .18s) var(--mx-ease-out, ease),
box-shadow var(--mx-dur-2, .18s) var(--mx-ease-out, ease);
}
.sx-stat:hover, .sx-quote:hover, .sx-price:hover, .sx-gallery img:hover {
transform: translateY(calc(var(--sx-lift, 1) * -4px)); /* dial Temperamento: 0 = sin levantar */
box-shadow: var(--mx-elevation-2);
}
.sx-feature:hover {
transform: translateY(calc(var(--sx-lift, 1) * -6px));
box-shadow: var(--mx-elevation-3), 0 0 24px color-mix(in srgb, var(--mx-color-primary) 20%, transparent);
}
/* ── REVEAL-on-scroll · 100% CSS (scroll-driven animations), degrada a visible ── */
@keyframes sx-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.sx-section__inner > *, .sx-hero__copy > *, .sx-hero__media {
animation: sx-reveal var(--sx-reveal-dur, .8s) var(--mx-ease-out, ease) both; /* dial Temperamento: 0s = sin movimiento */
animation-timeline: view();
animation-range: entry 0% cover 26%;
}
}
}
/* F1 fondos-vivos · CASCADA del bento: las tejas entran UNA tras otra (hoy el grid llegaba como
bloque monolítico). El stagger es por RANGO de scroll, no por delay — los timelines de view() no
corren en tiempo. El contenedor cede su reveal (las tejas toman el relevo). fill BACKWARDS a
propósito: con `both`, al completar el reveal la animación seguiría pisando `transform` y mataría
el lift del hover; con backwards la teja queda LIBRE al terminar. --sx-reveal-dur: 0s = quieto. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.sx-section__inner > .sx-bento { animation: none; }
/* rangos por ENTRY, no cover — BUG cazado en vivo: con cover 66%, una teja al FONDO de una
página corta nunca alcanza su rango (el scroll se acaba antes) y queda clavada a media
entrada PARA SIEMPRE (opacidad .6 + 9.7px, medido). entry 100% = «terminó de entrar al
viewport» — alcanzable para toda teja que pueda verse completa, en cualquier página. */
.sx-bento__tile {
animation: sx-reveal var(--sx-reveal-dur, .8s) var(--mx-ease-out, ease) backwards;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
.sx-bento__tile:nth-child(2) { animation-range: entry 8% entry 100%; }
.sx-bento__tile:nth-child(3) { animation-range: entry 16% entry 100%; }
.sx-bento__tile:nth-child(4) { animation-range: entry 24% entry 100%; }
.sx-bento__tile:nth-child(5) { animation-range: entry 32% entry 100%; }
.sx-bento__tile:nth-child(6) { animation-range: entry 40% entry 100%; }
.sx-bento__tile:nth-child(n+7) { animation-range: entry 48% entry 100%; }
}
}
/* F1 fondos-vivos · «remolino de sorbete»: el gradiente del título se DESPLAZA dentro de las letras.
Colgado del contrato de gating del dial: --mx-anim-play (paused a grado bajo → frame 0 quieto) y
--mx-anim-dur-mult (11s de base → 8.25s a Carnaval). Con un fill SÓLIDO (grados formales) el
desplazamiento es invisible por construcción — inocuo. background-size >100% es lo que da recorrido;
nota asumida (juez de viabilidad): el frame 0 muestra el gradiente con zoom 240%, no el 100% de hoy.
POSICIÓN deliberada: DESPUÉS del reveal genérico (.sx-hero__copy > *) — misma especificidad, acá gana
por orden: el título cede su reveal de entrada (arriba del fold era casi instantáneo) por el remolino. */
@media (prefers-reduced-motion: no-preference) {
.sx-hero__title {
background-size: 240% 100%;
animation: sx-remolino calc(11s * var(--mx-anim-dur-mult, 1)) ease-in-out infinite;
animation-play-state: var(--mx-anim-play, paused);
}
@keyframes sx-remolino {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
}
/* ── SxNav · glass más rico + sombra al despegar del top (sin JS) ── */
.sx-nav { backdrop-filter: saturate(1.3) var(--mx-glass-blur, blur(12px)); }
@supports (animation-timeline: scroll()) {
.sx-nav { animation: sx-nav-shadow linear both; animation-timeline: scroll(root block); animation-range: 0 90px; }
@keyframes sx-nav-shadow { to { box-shadow: var(--mx-elevation-2); } }
}
/* El reset de movimiento reducido ya cubre transform/transition; acá anulamos también el reveal. */
@media (prefers-reduced-motion: reduce) {
.sx-section__inner > *, .sx-hero__copy > *, .sx-hero__media { animation: none; }
.sx-stat, .sx-quote, .sx-price, .sx-gallery img { transition: none; }
.sx-stat:hover, .sx-quote:hover, .sx-price:hover, .sx-gallery img:hover, .sx-feature:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════
FASE 3 · componentes que MATAN la deuda Cx/Z del sitio (100% serie S, solo --mx-*)
SxEyebrow · SxBadge · SxChip · SxCard · SxRarityCard
══════════════════════════════════════════════════════════════════════════════ */
/* ── SxEyebrow — kicker de sección ── */
.sx-eyebrow {
display: inline-block;
margin-bottom: 10px;
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif));
font-weight: 800;
font-size: var(--mx-text-xs);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mx-color-primary-dark, var(--mx-color-primary));
}
/* ── SxBadge — pastilla semántica (color regional) ── */
.sx-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
line-height: 1;
border-radius: var(--mx-radius-full);
white-space: nowrap;
}
.sx-badge--sm { padding: 4px 10px; font-size: var(--mx-text-xs); }
.sx-badge--md { padding: 6px 13px; font-size: var(--mx-text-sm); }
.sx-badge--lg { padding: 8px 17px; font-size: var(--mx-text-base); }
.sx-badge--neutral { background: color-mix(in srgb, var(--mx-color-text) 9%, var(--mx-color-surface)); color: var(--mx-color-text); }
.sx-badge--success { background: color-mix(in srgb, #5A8F29 16%, var(--mx-color-surface)); color: color-mix(in srgb, #5A8F29 78%, #000); }
.sx-badge--info { background: color-mix(in srgb, #1F6F8B 16%, var(--mx-color-surface)); color: color-mix(in srgb, #1F6F8B 78%, #000); }
.sx-badge--warn { background: color-mix(in srgb, #E9A93E 22%, var(--mx-color-surface)); color: color-mix(in srgb, #E9A93E 62%, #000); }
.sx-badge--brand { background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)); color: var(--mx-color-primary-on); }
/* ── SxChip — tag delineado (ghost) ── */
.sx-chip {
display: inline-flex;
align-items: center;
font-weight: 600;
line-height: 1;
color: var(--mx-color-text);
background: color-mix(in srgb, var(--mx-color-surface) 70%, transparent);
border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
border-radius: var(--mx-radius-full);
text-decoration: none;
transition: border-color .16s, color .16s, transform .16s var(--mx-ease-out);
}
.sx-chip--sm { padding: 5px 12px; font-size: var(--mx-text-xs); }
.sx-chip--md { padding: 7px 15px; font-size: var(--mx-text-sm); }
.sx-chip--lg { padding: 9px 19px; font-size: var(--mx-text-base); }
a.sx-chip:hover { border-color: var(--mx-color-primary); color: var(--mx-color-primary-dark, var(--mx-color-primary)); transform: translateY(-2px); }
/* ── SxCard — ficha de contenido ── */
.sx-card {
display: flex;
flex-direction: column;
overflow: hidden;
text-decoration: none;
color: inherit;
background: var(--mx-color-surface);
border-radius: var(--mx-radius-xl);
transition: transform .2s var(--mx-ease-out), box-shadow .2s var(--mx-ease-out);
}
.sx-card--elevated { box-shadow: var(--mx-elevation-1); }
.sx-card--outlined { border: 1px solid var(--mx-color-border); }
.sx-card--plain { background: transparent; }
.sx-card__media { line-height: 0; }
.sx-card__media :is(img, svg) { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-card__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: clamp(16px, 2.4vw, 22px);
}
.sx-card__title { margin: 0; font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 800; font-size: var(--mx-text-lg); line-height: 1.2; }
.sx-card__subtitle { margin: 0; font-size: var(--mx-text-sm); color: var(--mx-color-text-subtle, var(--mx-color-text-muted)); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.sx-card__text { margin: 0; color: var(--mx-color-text-muted); font-size: var(--mx-text-base); line-height: 1.55; }
.sx-card__footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
/* SxStats dentro del footer de una SxCard (vitrina/showcase): ocupa TODO el ancho para que sus KPIs
queden en FILA — el grid auto-fit necesita ancho, y como flex-item del footer colapsaba a 1 columna. */
.sx-card__footer > .sx-stats { flex: 1 1 100%; }
.sx-card--elevated:hover, .sx-card--link:hover { transform: translateY(-4px); box-shadow: var(--mx-elevation-3); }
/* ── SxRarityCard — tarjeta de rareza/tier ── */
.sx-rarity {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(20px, 2.6vw, 26px);
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-border);
border-radius: var(--mx-radius-xl);
border-top: 4px solid var(--_tier, var(--mx-color-border));
box-shadow: var(--mx-elevation-1);
transition: transform .2s var(--mx-ease-out), box-shadow .2s var(--mx-ease-out);
}
.sx-rarity:hover { transform: translateY(-4px); box-shadow: var(--mx-elevation-2); }
.sx-rarity__pct {
align-self: flex-start;
padding: 5px 13px;
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif));
font-weight: 900;
font-size: var(--mx-text-base);
color: #fff;
background: var(--_tier, var(--mx-color-text-muted));
border-radius: var(--mx-radius-full);
}
.sx-rarity__title { margin: 0; font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 900; font-size: var(--mx-text-lg); }
.sx-rarity__body { margin: 0; color: var(--mx-color-text-muted); font-size: var(--mx-text-base); line-height: 1.5; }
.sx-rarity--comun { --_tier: color-mix(in srgb, var(--mx-color-text) 40%, var(--mx-color-surface)); }
.sx-rarity--pococomun { --_tier: #5A8F29; }
.sx-rarity--raro { --_tier: #1F6F8B; }
.sx-rarity--epico {
--_tier: var(--mx-color-primary);
border-top-color: transparent;
background:
linear-gradient(var(--mx-color-surface), var(--mx-color-surface)) padding-box,
linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)) border-box;
border: 2px solid transparent;
box-shadow: var(--mx-elevation-2);
}
.sx-rarity--epico .sx-rarity__pct { background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark)); }
@media (prefers-reduced-motion: reduce) {
.sx-card, .sx-rarity, a.sx-chip { transition: none; }
.sx-card:hover, .sx-rarity:hover, a.sx-chip:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════
FASE 4 · SHOWPIECES (golpe de vista) — SxPhone · SxReceipt · SxTimeline · SxTestimonial
══════════════════════════════════════════════════════════════════════════════ */
/* ── SxPhone — mockup de teléfono ── */
.sx-phone { display: flex; justify-content: center; }
.sx-phone__frame {
position: relative;
width: min(300px, 78vw);
aspect-ratio: 9 / 19;
padding: 12px;
background: linear-gradient(150deg, #23262e, #0e1014);
border-radius: 44px;
box-shadow: var(--mx-elevation-3), inset 0 0 0 2px rgba(255,255,255,.06);
}
.sx-phone__notch {
position: absolute;
top: 12px; left: 50%; transform: translateX(-50%);
width: 42%; height: 22px;
background: #0e1014;
border-radius: 0 0 16px 16px;
z-index: 2;
}
.sx-phone__screen {
position: relative;
width: 100%; height: 100%;
overflow: hidden;
border-radius: 32px;
background: var(--mx-color-bg);
}
.sx-phone__screen :is(img, svg) { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── SxReceipt — ticket térmico con QR ── */
.sx-receipt {
--_paper: #fbfaf7;
width: min(320px, 100%);
margin: 0 auto;
padding: 22px 24px 26px;
background: var(--_paper);
color: #2a2a2a;
font-family: var(--mx-font-mono);
font-size: 13px;
line-height: 1.7;
box-shadow: var(--mx-elevation-2);
/* borde dentado arriba y abajo (recibo térmico) */
-webkit-mask:
radial-gradient(7px at 7px 50%, transparent 98%, #000) 0 0/14px 100% repeat-y,
radial-gradient(7px at calc(100% - 7px) 50%, transparent 98%, #000) 100% 0/14px 100% repeat-y,
linear-gradient(#000 0 0) 7px 0/calc(100% - 14px) 100% no-repeat;
mask:
radial-gradient(7px at 7px 50%, transparent 98%, #000) 0 0/14px 100% repeat-y,
radial-gradient(7px at calc(100% - 7px) 50%, transparent 98%, #000) 100% 0/14px 100% repeat-y,
linear-gradient(#000 0 0) 7px 0/calc(100% - 14px) 100% no-repeat;
}
.sx-receipt__top { text-align: center; padding-bottom: 12px; border-bottom: 2px dashed #c9c6bd; }
.sx-receipt__store { display: block; font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 900; font-size: 17px; letter-spacing: .02em; }
.sx-receipt__date { display: block; color: #8a877e; font-size: 11px; margin-top: 2px; }
.sx-receipt__lines { list-style: none; margin: 12px 0; padding: 0; }
.sx-receipt__lines li { display: flex; justify-content: space-between; gap: 12px; }
.sx-receipt__concept { color: #444; }
.sx-receipt__amount { font-variant-numeric: tabular-nums; }
.sx-receipt__note { text-align: center; color: #8a877e; font-size: 11px; margin: 8px 0; }
.sx-receipt__total {
display: flex; justify-content: space-between;
margin-top: 8px; padding-top: 10px;
border-top: 2px dashed #c9c6bd;
font-weight: 800; font-size: 15px;
font-variant-numeric: tabular-nums;
}
.sx-receipt__qr {
width: 108px; height: 108px;
margin: 16px auto 8px;
/* faux-QR decorativo (mockup): trama tipo damero denso + esquinas */
background:
conic-gradient(#1a1a1a 90deg, #fff 0 180deg, #1a1a1a 0 270deg, #fff 0) 0 0 / 12px 12px;
border: 4px solid #1a1a1a;
border-radius: 6px;
}
.sx-receipt__code { text-align: center; letter-spacing: .18em; font-weight: 700; font-size: 12px; }
/* ── SxTimeline / SxMilestone — línea de tiempo vertical ── */
.sx-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sx-milestone {
position: relative;
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
padding-bottom: 26px;
}
.sx-milestone:last-child { padding-bottom: 0; }
/* la línea conectora corre por los dots */
.sx-milestone::before {
content: "";
position: absolute;
left: 16px; top: 26px; bottom: -4px;
width: 2px;
background: color-mix(in srgb, var(--mx-color-primary) 30%, var(--mx-color-border));
}
.sx-milestone:last-child::before { display: none; }
.sx-milestone__dot {
grid-row: 1;
width: 18px; height: 18px;
margin: 4px auto 0 8px;
border-radius: var(--mx-radius-full);
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-color-primary) 18%, transparent);
z-index: 1;
}
.sx-milestone__when { font-weight: 800; font-size: var(--mx-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--mx-color-primary-dark, var(--mx-color-primary)); }
.sx-milestone__title { margin: 2px 0 4px; font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 800; font-size: var(--mx-text-lg); }
.sx-milestone__body { margin: 0; color: var(--mx-color-text-muted); font-size: var(--mx-text-base); line-height: 1.5; }
/* ── SxTestimonial — testimonio (prueba social) ── */
.sx-testimonial {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: clamp(22px, 3vw, 30px);
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-border);
border-radius: var(--mx-radius-xl);
box-shadow: var(--mx-elevation-1);
transition: transform .2s var(--mx-ease-out), box-shadow .2s var(--mx-ease-out);
}
.sx-testimonial:hover { transform: translateY(-4px); box-shadow: var(--mx-elevation-2); }
.sx-testimonial__quote {
margin: 0;
font-size: var(--mx-text-lg);
line-height: 1.55;
color: var(--mx-color-text);
quotes: "“" "”";
}
.sx-testimonial__quote::before { content: open-quote; color: var(--mx-color-primary); font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 900; margin-right: 2px; }
.sx-testimonial__by { display: flex; align-items: center; gap: 12px; }
.sx-testimonial__avatar {
width: 46px; height: 46px; flex: 0 0 46px;
border-radius: var(--mx-radius-full);
object-fit: cover;
}
.sx-testimonial__avatar--ph {
display: grid; place-items: center;
font-family: var(--mx-font-display,var(--mx-font-sans,system-ui,sans-serif)); font-weight: 900; font-size: var(--mx-text-lg);
color: var(--mx-color-primary-on);
background: linear-gradient(135deg,var(--mx-color-primary),var(--mx-color-primary-dark));
}
.sx-testimonial__meta { display: flex; flex-direction: column; }
.sx-testimonial__name { font-weight: 800; }
.sx-testimonial__role { font-size: var(--mx-text-sm); color: var(--mx-color-text-muted); }
@media (prefers-reduced-motion: reduce) {
.sx-testimonial, .sx-testimonial:hover { transition: none; transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════
TRÍO DE MARCA · el 2º y 3º color como ACENTO (para paletas de 2-3 colores)
El site-kit era mono-primario: cambiar el secundario/terciario no se veía en la página.
Acá entran en puntos elegidos —número de stats, badge de pasos, tinte de íconos— para
que una paleta de 3 colores se NOTE sin recargar. Usa los pasos AA del motor (-strong
para texto, -on sobre relleno); en una paleta de 1 color el secundario derivado es
análogo del primario, así que el efecto degrada a algo sutil, nunca roto.
══════════════════════════════════════════════════════════════════════════════ */
/* SxStat · el número (y su tinte de tarjeta) cicla primario → secundario → terciario */
.sx-stat:nth-child(3n+2) .sx-stat__value { color: var(--mx-color-secondary-strong, var(--mx-color-secondary)); }
.sx-stat:nth-child(3n) .sx-stat__value { color: var(--mx-color-tertiary-strong, var(--mx-color-tertiary)); }
.sx-stat:nth-child(3n+2) { background: color-mix(in srgb, var(--mx-color-secondary) 6%, var(--mx-color-surface)); border-color: color-mix(in srgb, var(--mx-color-secondary) 16%, transparent); }
.sx-stat:nth-child(3n) { background: color-mix(in srgb, var(--mx-color-tertiary) 6%, var(--mx-color-surface)); border-color: color-mix(in srgb, var(--mx-color-tertiary) 16%, transparent); }
/* SxStep · el badge numerado cicla el trío (relleno + texto -on, contraste AA garantizado) */
.sx-step:nth-child(3n+2)::before { background: linear-gradient(135deg,var(--mx-color-secondary),var(--mx-color-secondary-dark)); color: var(--mx-color-secondary-on, #fff); }
.sx-step:nth-child(3n)::before { background: linear-gradient(135deg,var(--mx-color-tertiary),var(--mx-color-tertiary-dark)); color: var(--mx-color-tertiary-on, #fff); }
/* SxFeature · el tinte del ícono cicla el trío (fondo suave, sin problema de contraste) */
.sx-feature:nth-child(3n+2) .sx-feature__icon { background: color-mix(in srgb, var(--mx-color-secondary) 14%, var(--mx-color-surface)); }
.sx-feature:nth-child(3n) .sx-feature__icon { background: color-mix(in srgb, var(--mx-color-tertiary) 14%, var(--mx-color-surface)); }
/* SxLink · variante secundaria (botón/enlace con el 2º color) — lista para que las plantillas la usen */
.sx-link--secondary { background: var(--mx-color-secondary); color: var(--mx-color-secondary-on, #fff); }
.sx-link--secondary:hover { filter: brightness(1.08); }
.sx-link--secondary-outlined { border: 1px solid var(--mx-color-secondary); color: var(--mx-color-secondary-strong, var(--mx-color-secondary)); background: transparent; }
.sx-link--secondary-outlined:hover { background: color-mix(in srgb, var(--mx-color-secondary) 8%, transparent); }
/* ── TEXTURA · grano de film (dial Temperamento vía --mx-grain-opacity; 0 = invisible por defecto) ── */
.sx-section { position: relative; isolation: isolate; }
.sx-section > .sx-section__inner { position: relative; z-index: 1; }
.sx-section::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: var(--mx-grain-opacity, 0);
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ══════════════════════════════════════════════════════════════════════════════
C6 · MÓVIL — la única capa con breakpoint del site-kit (el resto es intrínseco).
La barra (marca + 6 links + CTA) NO cabe en una fila de teléfono. En móvil pasa a
un esquema NATIVO: hamburguesa → DRAWER vertical desplegable, 100% CSS (hack del
checkbox por combinador de hermano — soporte universal, sin :has() ni JS). El
drawer se cierra solo al navegar (cada link carga otra página). En escritorio el
toggle/hamburguesa quedan ocultos y los links son la barra horizontal de siempre.
══════════════════════════════════════════════════════════════════════════════ */
/* el checkbox está OCULTO pero enfocable (accesible por teclado); la hamburguesa solo en móvil */
.sx-nav__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sx-nav__burger { display: none; }
@media (max-width: 760px) {
.sx-nav__inner { flex-wrap: wrap; row-gap: 8px; }
/* hamburguesa (3 rayas → X al abrir) */
.sx-nav__burger {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
margin-left: auto; width: 44px; height: 40px; padding: 10px 9px; box-sizing: border-box;
cursor: pointer; border-radius: var(--mx-radius-md, 10px);
}
.sx-nav__burger span {
display: block; height: 2px; width: 100%; border-radius: 2px;
background: var(--mx-color-text);
transition: transform var(--mx-dur-2, .2s) var(--mx-ease-out, ease), opacity var(--mx-dur-2, .2s);
}
.sx-nav__toggle:focus-visible ~ .sx-nav__burger { outline: 2px solid var(--mx-color-primary); outline-offset: 2px; }
.sx-nav__toggle:checked ~ .sx-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-nav__toggle:checked ~ .sx-nav__burger span:nth-child(2) { opacity: 0; }
.sx-nav__toggle:checked ~ .sx-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* el DRAWER: oculto hasta abrir; luge vertical, links a todo el ancho y tappables */
.sx-nav__links {
order: 3; width: 100%; margin-left: 0;
display: none; flex-direction: column; align-items: stretch; gap: 2px;
padding-top: 6px;
}
.sx-nav__toggle:checked ~ .sx-nav__links { display: flex; }
.sx-nav__links > .sx-nav__link {
padding: 12px 14px; border-radius: var(--mx-radius-md, 10px);
border-bottom: 1px solid var(--mx-color-outline-variant, var(--mx-color-border));
}
.sx-nav__links > .sx-nav__link:last-of-type { border-bottom: 0; }
.sx-nav__links > .sx-link { margin-top: 8px; justify-content: center; padding: 12px; }
.sx-section { padding-block: clamp(44px, 9vw, 112px); }
}
/* ══ MODERNO 2026 · SxBento (mosaico) + aurora + vidrio ══
Rompe el apilado clásico. Todo derivado de tokens --mx-* (AA y themeable). */
.sx-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(148px, auto);
grid-auto-flow: dense;
gap: clamp(10px, 1.4vw, 18px);
position: relative;
isolation: isolate;
}
/* AURORA · blobs radiales de marca (primary/secondary/tertiary), difuminados, detrás del mosaico */
.sx-bento--glow::before {
content: "";
position: absolute; inset: -8% 0; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 48% at 16% 18%, color-mix(in srgb, var(--mx-color-primary) 50%, transparent), transparent 70%),
radial-gradient(36% 44% at 84% 26%, color-mix(in srgb, var(--mx-color-secondary, var(--mx-color-primary)) 46%, transparent), transparent 70%),
radial-gradient(44% 52% at 62% 96%, color-mix(in srgb, var(--mx-color-tertiary, var(--mx-color-primary)) 42%, transparent), transparent 72%);
filter: blur(46px) saturate(1.2);
opacity: .5;
}
/* F3 fondos-vivos · MICRO-VIDAS, todas colgadas del contrato de gating del dial (frame 0 = el look
de hoy; grados formales → play-state paused / amp 0 = quieto; reduced-motion las apaga). */
@media (prefers-reduced-motion: no-preference) {
/* el glow del bento RESPIRA: la aurora deja de ser un halo congelado. Se anima opacity (compositor),
0.5 (el valor de hoy) → +.25 × amp del dial. 9s base → 6.75s a Carnaval (≪ 0.5 Hz, WCAG). */
.sx-bento--glow::before {
animation: sx-glow-respira calc(9s * var(--mx-anim-dur-mult, 1)) ease-in-out infinite;
animation-play-state: var(--mx-anim-play, paused);
}
@keyframes sx-glow-respira {
0%, 100% { opacity: .5; }
50% { opacity: calc(.5 + .25 * var(--mx-anim-amp, 0)); }
}
/* la GOTA del kicker late — a punto de caer. Amplitud × amp del dial (amp 0 → scale 1 fijo). */
.sx-hero__kicker::before {
animation: sx-gota calc(3.2s * var(--mx-anim-dur-mult, 1)) ease-in-out infinite;
animation-play-state: var(--mx-anim-play, paused);
}
@keyframes sx-gota {
0%, 100% { transform: scale(1); }
50% { transform: scale(calc(1 + .35 * var(--mx-anim-amp, 0))); }
}
/* el DESTELLO de escaparate — SOLO al hover/focus (el panel de jueces condenó el loop temporal como
«el cliché 2015»): un barrido único de 1.1s. El tile ya trae overflow:hidden + position:relative.
Se anima transform (no left — layout es antipatrón); el gate del dial va en la OPACIDAD del propio
keyframe (con play-state se congelaría un fantasma visible en el frame `from`). */
.sx-tile--link::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
transform: skewX(-14deg); opacity: 0; pointer-events: none;
}
.sx-tile--link:hover::after, .sx-tile--link:focus-visible::after {
animation: sx-escaparate 1.1s var(--mx-ease-out, ease);
}
@keyframes sx-escaparate {
from { transform: translateX(0) skewX(-14deg); opacity: var(--mx-anim-amp, 0); }
to { transform: translateX(520%) skewX(-14deg); opacity: var(--mx-anim-amp, 0); }
}
}
.sx-bento__tile {
grid-column: span var(--c, 2);
grid-row: span var(--r, 1);
display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
padding: clamp(18px, 2vw, 30px);
border-radius: clamp(16px, 1.7vw, 26px);
min-width: 0; position: relative; overflow: hidden;
transition: transform .24s var(--mx-ease-out, cubic-bezier(.2,.7,.3,1)),
box-shadow .24s var(--mx-ease-out, ease), border-color .24s ease;
}
.sx-bento__tile.sx-tile--link { cursor: pointer; text-decoration: none; color: inherit; }
/* F3 · lift GOBERNADO: el único hover que vivía fuera del contrato — ahora obedece --sx-lift del dial (0 = quieto) */
.sx-bento__tile:hover { transform: translateY(calc(var(--sx-lift, 1) * -5px)); box-shadow: var(--mx-elevation-5, 0 24px 60px rgba(0,0,0,.24)); }
/* TONOS */
.sx-tile--glass {
background: color-mix(in srgb, var(--mx-color-surface) 52%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid color-mix(in srgb, var(--mx-color-text) 12%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), var(--mx-elevation-1);
}
.sx-tile--surface { background: var(--mx-color-surface); border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); box-shadow: var(--mx-elevation-1); }
.sx-tile--outline { background: color-mix(in srgb, var(--mx-color-primary) 4%, transparent); border: 1.5px solid color-mix(in srgb, var(--mx-color-primary) 38%, var(--mx-color-border)); }
.sx-tile--brand {
background: linear-gradient(135deg, var(--mx-color-primary), var(--mx-color-primary-dark, var(--mx-color-primary)));
color: var(--mx-color-primary-on); border: 1px solid transparent; box-shadow: var(--mx-elevation-2);
}
.sx-tile--accent {
background: linear-gradient(135deg,
color-mix(in srgb, var(--mx-color-secondary, var(--mx-color-primary)) 92%, transparent),
color-mix(in srgb, var(--mx-color-tertiary, var(--mx-color-secondary, var(--mx-color-primary))) 82%, transparent));
/* los acentos (secondary/tertiary) suelen ser VIVOS → la tinta legible es la del acento (on-secondary),
no la del primary (que puede ser blanca y reventar el contraste sobre un cian claro). El tema la fija. */
color: var(--mx-color-on-secondary, var(--mx-color-primary-on)); border: 1px solid transparent; box-shadow: var(--mx-elevation-2);
}
/* CONTENIDO de la tile */
.sx-tile__copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sx-tile__visual { font-size: clamp(34px, 4.4vw, 60px); line-height: .95; font-weight: 800; letter-spacing: -.03em; }
/* números/íconos con gradiente de marca en las tiles claras (efecto moderno) */
.sx-tile--glass .sx-tile__visual, .sx-tile--surface .sx-tile__visual, .sx-tile--outline .sx-tile__visual {
background: linear-gradient(135deg, var(--mx-color-primary), var(--mx-color-secondary, var(--mx-color-primary)));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-tile__eyebrow { font-size: var(--mx-text-xs, 12px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .68; }
.sx-tile__title { margin: 0; font-size: clamp(18px, 1.7vw, 23px); font-weight: 750; letter-spacing: -.015em; line-height: 1.12; }
.sx-tile__body { color: color-mix(in srgb, currentColor 68%, transparent); font-size: var(--mx-text-sm, 13.5px); line-height: 1.55; min-width: 0; }
.sx-tile--brand .sx-tile__body { color: color-mix(in srgb, var(--mx-color-primary-on) 86%, transparent); }
.sx-tile--accent .sx-tile__body { color: color-mix(in srgb, var(--mx-color-on-secondary, var(--mx-color-primary-on)) 86%, transparent); }
/* RESPONSIVE · 6→2 columnas, tiles a ancho completo */
@media (max-width: 860px) {
.sx-bento { grid-template-columns: repeat(2, 1fr); }
.sx-bento__tile { grid-column: span 2; grid-row: span 1; }
}
/* HERO DISPLAY · titular sobredimensionado y kinético (moderno), centrado */
.sx-hero--display { text-align: center; justify-items: center; }
.sx-hero--display .sx-hero__copy { align-items: center; }
.sx-hero--display .sx-hero__title { font-size: clamp(40px, 8.5vw, 104px); line-height: .96; letter-spacing: -.035em; font-weight: 850; }
.sx-hero--display .sx-hero__subtitle { max-width: 56ch; font-size: clamp(16px, 2.2vw, 21px); }
/* ══ SxHero COVER · la foto DETRÁS, el copy encima (2026-07-20) ══════════════════════════════════════
El velo es un DEGRADADO, no un tinte plano: opaco abajo (donde vive el texto) y casi limpio arriba
(donde vive la foto). Un tinte parejo mata la imagen para salvar el texto; el degradado salva a los
dos. `color-mix` con el primario le da temperatura de marca al negro — el mismo truco del kit. */
.sx-hero--cover {
position: relative; isolation: isolate; overflow: hidden;
border-radius: var(--mx-radius-2xl, 22px);
min-height: clamp(340px, 52vh, 620px);
display: flex; align-items: flex-end;
padding: clamp(20px, 5vw, 64px);
box-shadow: var(--mx-elevation-3);
}
.sx-hero--cover .sx-hero__bg { position: absolute; inset: 0; z-index: -2; }
.sx-hero--cover .sx-hero__bg img, .sx-hero--cover .sx-hero__bg svg {
width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; display: block;
}
.sx-hero--cover .sx-hero__veil {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top,
color-mix(in srgb, #000 82%, var(--mx-color-primary)) 0%,
color-mix(in srgb, #000 58%, var(--mx-color-primary)) 38%,
color-mix(in srgb, #000 18%, transparent) 78%,
transparent 100%);
}
.sx-hero--cover .sx-hero__copy { position: relative; max-width: 44ch; }
.sx-hero--cover .sx-hero__title { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.sx-hero--cover .sx-hero__subtitle { color: color-mix(in srgb, #fff 86%, transparent); }
.sx-hero--cover .sx-hero__kicker { background: color-mix(in srgb, #fff 16%, transparent); color: #fff; backdrop-filter: blur(6px); }
/* ══ SxBanda · el corte de ritmo: franja a sangre con un susurro encima ══ */
.sx-banda {
position: relative; isolation: isolate; overflow: hidden;
border-radius: var(--mx-radius-xl, 16px);
display: flex; align-items: flex-end;
box-shadow: var(--mx-elevation-2);
}
.sx-banda--corta { aspect-ratio: 32 / 9; }
.sx-banda--media { aspect-ratio: 21 / 9; }
.sx-banda--alta { aspect-ratio: 16 / 9; }
.sx-banda__img { position: absolute; inset: 0; z-index: -2; }
.sx-banda__img img, .sx-banda__img svg { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; display: block; }
.sx-banda__veil {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .34) 52%, rgb(0 0 0 / .08) 100%);
}
.sx-banda--marca .sx-banda__veil {
background: linear-gradient(to top,
color-mix(in srgb, var(--mx-color-primary) 88%, #000) 0%,
color-mix(in srgb, var(--mx-color-primary) 46%, transparent) 60%,
transparent 100%);
}
.sx-banda__copy { position: relative; padding: clamp(16px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 6px; max-width: 46ch; }
.sx-banda__copy--centro { margin-inline: auto; text-align: center; align-items: center; }
.sx-banda__copy--derecha { margin-inline-start: auto; text-align: right; align-items: flex-end; }
.sx-banda__eyebrow {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: color-mix(in srgb, #fff 78%, transparent); font-weight: 700;
}
.sx-banda__titulo { margin: 0; color: #fff; font-family: var(--mx-font-display, inherit); font-weight: 800;
font-size: clamp(20px, 3.6vw, 40px); line-height: 1.1; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / .4); }
.sx-banda__texto { margin: 0; color: color-mix(in srgb, #fff 84%, transparent); font-size: clamp(13px, 1.6vw, 16px); }
/* ══ SxMosaico · la serie manda sobre la pieza ══ */
.sx-mosaico { display: grid; gap: 10px; grid-auto-rows: var(--sx-mos-alto, 180px); grid-template-columns: repeat(4, 1fr); }
.sx-mosaico > * { min-width: 0; overflow: hidden; border-radius: var(--mx-radius-lg, 12px); }
.sx-mosaico img, .sx-mosaico svg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
.sx-mosaico--destacada > *:first-child { grid-column: span 2; grid-row: span 2; }
.sx-mosaico--escalera > *:nth-child(3n+1) { grid-column: span 2; }
.sx-mosaico--pareja > * { grid-column: span 1; }
@media (max-width: 720px) {
/* móvil: una columna de verdad — el pulgar no navega mosaicos */
.sx-mosaico { grid-template-columns: repeat(2, 1fr); }
.sx-mosaico--destacada > *:first-child { grid-column: span 2; }
.sx-hero--cover { min-height: 78vw; }
/* LA BANDA DEJA DE APLASTARSE (verificado a 375px, 2026-07-20): una panorámica 32:9 da ~105px de
alto en un teléfono, y el copy —sello + título + línea de apoyo— chocaba contra la foto. Acá la
proporción cede y el bloque CRECE con su texto: la foto se recorta, las palabras nunca. */
.sx-banda--corta, .sx-banda--media, .sx-banda--alta { aspect-ratio: auto; min-height: 52vw; }
.sx-banda__copy { padding-block: 18px; }
}
/* ══ CONTRASTE · el héroe DENTRO de una sección de marca (2026-07-20) ═══════════════════════════════
El título del héroe se pinta con el degradado de marca (recortado al texto). Sobre el fondo blanco
eso brilla; sobre una sección Tone="Brand" —que YA es el degradado de marca— el texto se pinta del
color del fondo y desaparece: quedaba un CTA ilegible al final de la página, justo donde se pide la
acción. Dentro de marca, el texto vuelve a ser sólido sobre el color «on» que el motor calcula AA. */
.sx-section--brand .sx-hero__title,
.sx-section--brand .sx-cta__title {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--mx-color-primary-on, #fff);
text-shadow: 0 1px 12px rgb(0 0 0 / .18);
}
.sx-section--brand .sx-hero__subtitle { color: color-mix(in srgb, var(--mx-color-primary-on, #fff) 88%, transparent); }
.sx-section--brand .sx-hero__kicker {
background: color-mix(in srgb, var(--mx-color-primary-on, #fff) 18%, transparent);
color: var(--mx-color-primary-on, #fff);
}
/* ── SxSection Sticky · la barra que se pega al scrollear (categorías de una carta) ── */
.sx-section--sticky {
position: sticky; top: 0; z-index: 40;
padding-block: clamp(8px, var(--mx-space-3, 12px), 20px);
background: color-mix(in srgb, var(--mx-color-bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--mx-color-text) 8%, transparent);
}
/* ── SxPrecio · el número que decide la compra ── */
.sx-precio { display: inline-flex; align-items: baseline; gap: 6px; }
.sx-precio__monto {
font-family: var(--mx-font-display, inherit);
font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1;
letter-spacing: -.02em; color: var(--mx-color-primary);
font-variant-numeric: tabular-nums; /* los precios de una carta se leen en COLUMNA: deben alinear */
}
.sx-precio__nota { font-size: var(--mx-text-xs, 12px); font-weight: 500; color: var(--mx-color-text-muted); }
}