/* ═══ LA CAPA VIAJA CON LA HOJA ══════════════════════════════════════════════
   La hoja declara su @layer adentro: así cae en su capa sin importar cómo se la cargue (una hoja sin capa le
   gana a todo lo capado), y el <head> puede usar <link> (paralelo, y un fallo se ve en Network) en vez de
   @import (serial y, si falla, en silencio).
   ═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
 * sx.css — la piel del site-kit (los bloques de marketing del sitio público).
 * Sólo consume tokens --mx-*; cero hex de tema y cero !important; 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 de densidad del tema (--mx-space-12): un rubro compacto y uno
   amplio respiran distinto. El clamp es piso y techo, y el vw conserva la respuesta al ancho. */
.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); }
/* Dark: la sección de tinta de un sitio editorial. Re-declara los tokens de texto y superficie adentro, así que
   el contenido se adapta solo. Los colores son perillas del tema (--mx-dark-bg / --mx-dark-fg); el background
   usa la perilla y no --mx-color-text, que se redefine en el mismo elemento y se leería invertido. */
.sx-section--dark {
    background: var(--mx-dark-bg, #2a2620);
    --mx-color-text: var(--mx-dark-fg, #f6f2ea);
    --mx-color-text-muted: color-mix(in srgb, var(--mx-dark-fg, #f6f2ea) 78%, transparent);
    --mx-color-text-subtle: color-mix(in srgb, var(--mx-dark-fg, #f6f2ea) 60%, transparent);
    --mx-color-surface: color-mix(in srgb, #fff 5%, var(--mx-dark-bg, #2a2620));
    --mx-color-border: color-mix(in srgb, #fff 16%, transparent);
    --mx-color-outline-variant: color-mix(in srgb, #fff 16%, transparent);
    color: var(--mx-color-text);
}
.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;   /* 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 {   /* punto de acento del kicker */
    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__em { font-style: inherit; }   /* el énfasis del titular: hereda; la skin editorial lo pasa a la serif de lectura */
.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; }   /* aire entre botones y respecto de la bajada */
.sx-hero__media { min-width: 0; position: relative; }
/* Los adornos de la foto del héroe: rótulo, insignia flotante y notita. Posiciones base sobre tokens; la skin
   del sitio los afina. */
.sx-hero__media-label { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: var(--mx-text-xs, 11px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 6px rgb(0 0 0 / .6); pointer-events: none; }
.sx-hero__media-badge { position: absolute; right: -14px; top: 22px; width: 96px; padding: 8px; border-radius: 50%; background: var(--mx-color-surface); box-shadow: var(--mx-elevation-2); transform: rotate(12deg); }
.sx-hero__media-badge img, .sx-hero__media-badge svg { width: 100%; height: auto; display: block; border-radius: 0; box-shadow: none; }
.sx-hero__media-note { position: absolute; left: -20px; bottom: -22px; width: min(88%, 420px); display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--mx-color-surface); border: 1px solid var(--mx-color-outline-variant, var(--mx-color-border)); border-radius: var(--mx-radius-lg, 10px); box-shadow: var(--mx-elevation-3); font-size: var(--mx-text-sm, 13px); }
.sx-hero__media-note b { display: block; font-weight: 700; color: var(--mx-color-text); }
.sx-hero__media-note span:not(.sx-hero__media-note-icon) { display: block; margin-top: 5px; color: var(--mx-color-text-muted); font-size: var(--mx-text-xs, 11px); }
.sx-hero__media-note-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; background: color-mix(in srgb, var(--mx-color-primary) 12%, var(--mx-color-surface)); }
.sx-hero:has(.sx-hero__media-note) { margin-bottom: 24px; }
.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--gradient { background: var(--mx-gradient-primary, linear-gradient(135deg, var(--mx-color-primary), var(--mx-color-primary-dark))); color: var(--mx-color-primary-on); box-shadow: var(--mx-elevation-2), var(--mx-glow-primary, none); }
.sx-link--gradient:hover { filter: brightness(1.06); transform: translateY(-2px); }
.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);
}

/* ═══ Los bloques de contenido ═══ */

/* ── 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; position: relative; }
/* el pie de foto sobre la imagen: velo abajo + frase; el <em> es la segunda voz */
.sx-mediatext__media:has(.sx-mediatext__caption)::after { content: ""; position: absolute; inset: 0; border-radius: var(--mx-radius-xl, 16px); background: linear-gradient(transparent 35%, rgb(0 0 0 / .72)); pointer-events: none; }
.sx-mediatext__caption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; margin: 0; color: #fff; font-family: var(--mx-font-display, var(--mx-font-sans)); font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.sx-mediatext__caption em { font-family: var(--mx-font-serif, inherit); font-style: italic; font-weight: 400; }
.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; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * REALCE DE APARIENCIA (sobre --mx-*, sin JS, degrada limpio): tipografía display, tonos cálidos,
 * micro-interacción y reveal al scroll. Va al final para reforzar las reglas de arriba por orden.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Ritmo vertical más amplio ── */
.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 ── */
.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 ── */
.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%;
        }
    }
}

/* Cascada del bento: las tejas entran una tras otra. El stagger es por rango de scroll, no por delay (los
   timelines de view() no corren en tiempo). El contenedor cede su reveal. fill backwards a propósito: con
   `both`, la animación seguiría pisando `transform` y mataría el lift del hover. --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: con cover, una teja al fondo de una página corta nunca alcanza su rango y
           queda a media entrada para siempre. entry 100% = «terminó de entrar al viewport», siempre alcanzable. */
        .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%; }
    }
}

/* «Remolino de sorbete»: el gradiente del título se desplaza dentro de las letras, colgado del gating del dial
   (--mx-anim-play, --mx-anim-dur-mult). Con un fill sólido (grados formales) es invisible. background-size >100%
   da el recorrido (el frame 0 muestra el gradiente con zoom). Va después del reveal genérico a propósito: misma
   especificidad, gana por orden y el título cambia su reveal de entrada 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; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Componentes de contenido de la serie S (sólo --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; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Piezas de vitrina: 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, 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); con una paleta de 1 color el secundario derivado es análogo y el efecto queda sutil.
   ══════════════════════════════════════════════════════════════════════════════ */
/* 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");
}

/* ══════════════════════════════════════════════════════════════════════════════
   MÓVIL · la única capa con breakpoint del site-kit. La barra no cabe en una fila de teléfono: pasa a
   hamburguesa → drawer vertical, 100% CSS (checkbox + combinador de hermano, sin :has() ni JS). El drawer se
   cierra al navegar; en escritorio el toggle queda oculto y los links son la barra horizontal.
   ══════════════════════════════════════════════════════════════════════════════ */
/* 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); }
}

/* ══ 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;
}

/* Micro-vidas, colgadas del gating del dial: el frame 0 es el look de siempre; grados formales → paused / amp 0
   = quieto; reduced-motion las apaga. */
@media (prefers-reduced-motion: no-preference) {
    /* El glow del bento respira: se anima opacity (compositor), 0.5 → +.25 × amp del dial; 9s de base
       (≪ 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, sólo al hover/focus (un loop temporal sería el cliché): un barrido único de
       1.1s. Se anima transform, no left. El gate del dial va en la opacidad del keyframe: con play-state quedaría
       un fantasma visible en `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; }
/* Lift gobernado por --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 ══
   El velo es un degradado: opaco abajo (el texto) y casi limpio arriba (la foto); un tinte parejo mata la
   imagen. color-mix con el primario le da temperatura de marca al negro. */
.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: una panorámica 32:9 mide ~105px de alto en un teléfono y el copy chocaba con
       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 ══
   El título del héroe se pinta con el degradado de marca recortado al texto; sobre una sección Tone="Brand"
   (que ya es ese degradado) desaparecería. Dentro de marca vuelve a ser sólido sobre el «on» AA del motor. */
.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); }
}