/* LUM360 · SEO local v3 · capa 3 de 4 · componentes: tipografía, botones, cinta, tarjetas, interruptor, comparador, terminal y pasos */

/* ---------- Tipografía y botones ---------- */
.sl-kicker { display: inline-flex; align-items: baseline; gap: 0.7rem; color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.sl-kicker::before { content: ""; flex: none; width: 2rem; height: 1px; background: currentColor; transform: translateY(-0.35em); }
.sl-eyebrow { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: var(--ws-text-sm); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.sl-h2 { font-size: var(--ws-text-display-s); line-height: 1.02; }
.sl-h2 strong { color: var(--ws-accent-strong); font-weight: 500; font-style: italic; }
.sl-lead { max-width: 40rem; color: var(--ws-muted); font-size: var(--ws-text-md); line-height: 1.6; }
.sl-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.sl-w > span { display: inline-block; will-change: transform; }
html.sl-motion [data-split] { opacity: 0; }
html.sl-motion [data-reveal] { opacity: 0; }
html.sl-motion [data-clip] { opacity: 0; }

.sl-actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-sm); }
.sl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: var(--ws-hit); padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform var(--ws-dur-short) var(--ws-ease-out), background var(--ws-dur-short), box-shadow var(--ws-dur-long) var(--ws-ease-out); }
.sl-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-btn--solid { color: var(--ws-accent-ink); background: linear-gradient(135deg, var(--ws-accent-fill, var(--ws-accent-strong)), var(--ws-accent-fill, var(--ws-accent))); box-shadow: 0 0 0 0 oklch(80% 0.13 86 / 0), 0 0.6rem 1.6rem -0.6rem oklch(60% 0.12 84 / 0.6); }
.sl-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 0 2.2rem -0.4rem oklch(80% 0.13 86 / 0.7), 0 0.8rem 1.8rem -0.6rem oklch(60% 0.12 84 / 0.6); }
.sl-btn--ghost { color: var(--ws-ink); border-color: var(--ws-rule-strong); background: oklch(100% 0 0 / 0.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sl-btn--ghost:hover { transform: translateY(-2px); border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.sl-chip { min-height: 2.4rem; padding: 0.4rem 1rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-ink); background: transparent; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background var(--ws-dur-short), border-color var(--ws-dur-short), color var(--ws-dur-short); }
.sl-chip:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.sl-chip[aria-pressed="true"], .sl-chip[aria-expanded="true"] { color: var(--ws-accent-ink); border-color: var(--ws-accent-line, var(--ws-accent-strong)); background: var(--ws-accent-fill, var(--ws-accent-strong)); }
.sl-checks { display: grid; gap: var(--ws-space-xs); }
.sl-checks li { display: flex; gap: 0.7rem; color: var(--ws-muted); line-height: 1.5; }
.sl-checks li::before { content: ""; flex: none; width: 1.2rem; height: 1px; margin-top: 0.8em; background: var(--ws-accent-fill, var(--ws-accent-strong)); }
.sl-tags { display: flex; flex-wrap: wrap; gap: var(--ws-space-xs); }
.sl-tags li { padding: 0.3rem 0.8rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-muted); font-family: var(--sl-mono); font-size: var(--ws-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.sl-cta__actions { margin-top: var(--ws-space-sm); }

/* ---------- Entrada del hero (CSS puro) ---------- */
.sl-hero__stage { animation: sl-zoom 2.6s var(--ws-ease-out) backwards; }
.sl-hero__content > * { animation: sl-rise 0.95s var(--ws-ease-out) backwards; }
.sl-hero__content > :nth-child(1) { animation-delay: 0.3s; }
.sl-hero__content > :nth-child(2) { animation-delay: 0.45s; }
.sl-hero__content > :nth-child(3) { animation-delay: 0.6s; }
.sl-hero__content > :nth-child(4) { animation-delay: 0.75s; }
.sl-hero__content > :nth-child(5) { animation-delay: 0.9s; }
@keyframes sl-zoom { from { transform: scale(1.08); opacity: 0.4; } }
@keyframes sl-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .sl-hero__stage, .sl-hero__content > * { animation: none; } }

.sl-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sl-hero__chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border: 1px solid var(--sl-line); border-radius: 999px; color: oklch(90% 0.01 82); background: var(--sl-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.75rem; font-weight: 500; }
.sl-hero__chips li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.6rem var(--ws-accent-strong); }
.sl-hero__tag { position: absolute; z-index: 5; right: clamp(1rem, 3vw, 3rem); bottom: 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem; border-radius: 999px; color: oklch(92% 0.01 82); background: oklch(8% 0.01 82 / 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--sl-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.sl-hero__tag i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ws-accent-fill, var(--ws-accent-strong)); animation: sl-blink 1.4s steps(1) infinite; }
@keyframes sl-blink { 50% { opacity: 0.2; } }
@media (max-width: 59.999rem) { .sl-hero__tag { right: auto; left: 1.5rem; top: calc(var(--ws-nav-h) + 40svh - 2.6rem); bottom: auto; } }

/* ---------- Cinta ---------- */
.sl-ticker li { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; border: 1px solid var(--sl-line); border-radius: 999px; color: oklch(90% 0.01 82); background: oklch(100% 0 0 / 0.03); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.sl-ticker li i { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: 0.625rem; font-style: normal; letter-spacing: 0.1em; }

/* ---------- Tarjetas de vidrio ---------- */
.sl-card { position: relative; display: grid; align-content: start; gap: var(--ws-space-sm); padding: clamp(1.2rem, 2.2vw, 1.8rem); border: 1px solid var(--ws-rule); border-radius: 1rem; background: linear-gradient(135deg, oklch(100% 0 0 / 0.05), oklch(100% 0 0 / 0.01)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="light"] body.sl-page .sl-section:not(.sl-dark) .sl-card { background: var(--ws-card); }
.sl-card__n { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.2em; }
.sl-card h3 { font-size: var(--ws-text-lg); line-height: 1.1; }
.sl-card p { color: var(--ws-muted); line-height: 1.55; }
.sl-note { color: var(--ws-subtle); font-size: var(--ws-text-sm); line-height: 1.5; }

/* ---------- Interruptor del recorrido conectado ---------- */
.sl-pack__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }
.sl-switch { display: inline-flex; align-items: center; gap: 0.9rem; min-height: var(--ws-hit); padding: 0.4rem 1.1rem 0.4rem 0.5rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-ink); background: var(--ws-card); cursor: pointer; font-size: 0.875rem; font-weight: 600; transition: border-color var(--ws-dur-short); }
.sl-switch:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.sl-switch__track { position: relative; flex: none; width: 3.4rem; height: 1.9rem; border-radius: 999px; background: var(--ws-rule-strong); transition: background var(--ws-dur-short); }
.sl-switch__track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px oklch(0% 0 0 / 0.4); transition: transform var(--ws-dur-short) var(--ws-ease-out); }
.sl-switch[aria-checked="true"] .sl-switch__track { background: var(--ws-accent-fill, var(--ws-accent-strong)); }
.sl-switch[aria-checked="true"] .sl-switch__track::after { transform: translateX(1.5rem); }
.sl-pack__caption { max-width: 34rem; color: var(--ws-muted); line-height: 1.55; }
.sl-pack__caption strong { color: var(--ws-ink); }
.sl-pack__caption[hidden] { display: none; }
.sl-points { display: grid; gap: var(--ws-space-sm); }
.sl-points li { display: grid; gap: 0.15rem; padding-left: 1.1rem; border-left: 2px solid var(--ws-accent-line, var(--ws-accent-strong)); color: var(--ws-muted); line-height: 1.5; }
.sl-points strong { color: var(--ws-ink); font-weight: 600; }

/* ---------- Pasos con riel (mapeo y auditoría) ---------- */
.sl-steps { position: relative; padding-left: 1.6rem; }
.sl-steps::before { content: ""; position: absolute; left: 0.35rem; top: 2svh; bottom: 2svh; width: 2px; background: linear-gradient(180deg, transparent, var(--ws-rule-strong) 8%, var(--ws-rule-strong) 92%, transparent); }
.sl-step { position: relative; align-self: center; display: grid; gap: var(--ws-space-xs); margin-block: 1rem; padding: clamp(1.1rem, 2vw, 1.8rem); border: 1px solid var(--ws-rule); border-radius: 1rem; background: linear-gradient(135deg, oklch(100% 0 0 / 0.05), oklch(100% 0 0 / 0.01)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: border-color var(--ws-dur-long), box-shadow var(--ws-dur-long), transform var(--ws-dur-long) var(--ws-ease-out); }
html[data-theme="light"] body.sl-page .sl-section:not(.sl-dark) .sl-step { background: var(--ws-card); }
.sl-step::before { content: ""; position: absolute; left: calc(-1.6rem + 0.1rem); top: 2.1rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ws-rule-strong); transition: background var(--ws-dur-long), box-shadow var(--ws-dur-long); }
.sl-step.is-active { border-color: var(--ws-accent-line, var(--ws-accent-strong)); box-shadow: 0 0 3rem -1rem oklch(80% 0.13 86 / 0.55); transform: translateX(6px); }
.sl-step.is-active::before { background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.9rem var(--ws-accent-strong); }
.sl-step__n { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.2em; }
.sl-step h3 { font-size: var(--ws-text-lg); line-height: 1.1; }
.sl-step p { color: var(--ws-muted); line-height: 1.55; }
.sl-step .sl-checks { margin-top: var(--ws-space-xs); }
.sl-step .sl-checks li { font-size: 0.9rem; }
@media (min-width: 60rem) { .sl-step { margin-block: 9svh; } .sl-steps { padding-block: 6svh; } }

/* ---------- Comparador: ficha de Google Maps sin actualizar vs. con mapeo LUM360 ---------- */
.sl-ba { --ba: 50%; position: relative; width: 100%; height: clamp(31rem, 44vw, 36rem); overflow: hidden; border: 1px solid var(--ws-rule-strong); border-radius: 1.1rem; background: #0a0b0e; touch-action: pan-y; user-select: none; box-shadow: 0 2.4rem 5rem -2rem oklch(0% 0 0 / 0.7); }
.sl-ba__pane { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); color: #f3efe6; background: #101216; }
.sl-ba__pane--before { z-index: 1; clip-path: inset(0 calc(100% - var(--ba)) 0 0); filter: saturate(0.25) brightness(0.85); }
.sl-ba__map { position: relative; min-width: 0; overflow: hidden; background: #14171d; }
.sl-ba__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-ba__sheet { position: relative; display: grid; align-content: start; gap: 0.7rem; min-width: 0; padding: 1rem 1.1rem 1rem; overflow: hidden; background: linear-gradient(180deg, #181b21, #101216); border-left: 1px solid oklch(100% 0 0 / 0.08); }
.sl-ba__sv { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 0.6rem; border: 1px solid oklch(100% 0 0 / 0.12); }
.sl-ba__sv svg { display: block; width: 100%; height: 100%; }
.sl-ba__chip { position: absolute; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.55rem; border-radius: 999px; color: #fff; background: oklch(8% 0.01 82 / 0.78); font-family: var(--sl-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sl-ba__chip--tl { top: 0.45rem; left: 0.45rem; }
.sl-ba__chip--br { bottom: 0.45rem; right: 0.45rem; }
.sl-ba__pano { position: relative; height: 3.6rem; overflow: hidden; border-radius: 0.5rem; border: 1px solid oklch(100% 0 0 / 0.12); background: #1a140b; }
.sl-ba__pano-strip { display: flex; width: 200%; height: 100%; animation: sl-pan 26s linear infinite; }
.sl-ba__pano-strip svg { flex: none; width: 50%; height: 100%; }
@keyframes sl-pan { to { transform: translateX(-50%); } }
.sl-ba__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; height: 3.6rem; }
.sl-ba__photos i { display: grid; place-items: center; border: 1px dashed oklch(100% 0 0 / 0.25); border-radius: 0.45rem; color: oklch(100% 0 0 / 0.35); font-family: var(--sl-mono); font-size: 0.55rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; background: repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.04) 0 6px, transparent 6px 12px); }
.sl-ba__name { font-family: var(--ws-font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.1; }
.sl-ba__sub { color: oklch(85% 0.01 82); font-size: 0.78rem; }
.sl-ba__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sl-ba__tags span { padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.66rem; font-weight: 500; border: 1px solid oklch(100% 0 0 / 0.16); color: oklch(88% 0.01 82); }
.sl-ba__pane--after .sl-ba__tags span { border-color: oklch(76% 0.12 150 / 0.6); color: oklch(88% 0.1 150); background: oklch(40% 0.08 150 / 0.2); }
.sl-ba__pane--before .sl-ba__tags span { border-style: dashed; color: oklch(70% 0.01 82); }
.sl-ba__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.sl-ba__acts span { display: grid; place-items: center; min-height: 1.9rem; border-radius: 0.5rem; font-size: 0.68rem; font-weight: 600; border: 1px solid oklch(100% 0 0 / 0.16); }
.sl-ba__pane--after .sl-ba__acts span { color: oklch(18% 0.02 82); background: linear-gradient(135deg, var(--ws-accent-fill, var(--ws-accent-strong)), var(--ws-accent-fill, var(--ws-accent))); border-color: transparent; }
.sl-ba__pane--before .sl-ba__acts span { color: oklch(60% 0.01 82); border-style: dashed; }
.sl-ba__warn { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.65rem; border-radius: 0.5rem; color: oklch(85% 0.08 60); background: oklch(40% 0.08 60 / 0.25); border: 1px solid oklch(70% 0.1 60 / 0.4); font-size: 0.72rem; line-height: 1.3; }
.sl-ba__ok { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.65rem; border-radius: 0.5rem; color: oklch(88% 0.1 150); background: oklch(40% 0.08 150 / 0.22); border: 1px solid oklch(76% 0.12 150 / 0.5); font-size: 0.72rem; line-height: 1.3; }
.sl-ba__route { stroke-dasharray: 6 6; animation: sl-dash 2.2s linear infinite; }
@keyframes sl-dash { to { stroke-dashoffset: -24; } }
.sl-ba__pulse { transform-box: fill-box; transform-origin: center; animation: sl-pulse 2.4s ease-out infinite; }
@keyframes sl-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.sl-ba__twinkle { animation: sl-twinkle 3.2s ease-in-out infinite; }
@keyframes sl-twinkle { 50% { opacity: 0.45; } }
.sl-ba__handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: var(--ws-accent-fill, var(--ws-accent-strong)); pointer-events: none; box-shadow: 0 0 1.2rem var(--ws-accent-strong); }
.sl-ba__handle::after { content: "\2039 \203A"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; transform: translate(-50%, -50%); border-radius: 50%; color: var(--ws-accent-ink); background: var(--ws-accent-fill, var(--ws-accent-strong)); font-weight: 700; letter-spacing: 0.1em; }
.sl-ba input { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.sl-ba:focus-within { outline: 2px solid var(--ws-focus); outline-offset: 3px; }
.sl-ba__tag { position: absolute; z-index: 3; bottom: 0.8rem; padding: 0.25rem 0.7rem; border-radius: 999px; color: #fff; background: oklch(8% 0.01 82 / 0.78); font-family: var(--sl-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.sl-ba__tag--l { left: 0.8rem; }
.sl-ba__tag--r { right: 0.8rem; }
.sl-ba-legend { display: grid; gap: var(--ws-space-sm); margin-top: var(--ws-space-md); }
.sl-ba-legend li { display: flex; gap: 0.7rem; color: var(--ws-muted); line-height: 1.5; font-size: 0.95rem; }
.sl-ba-legend li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.5em; border-radius: 50%; background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.6rem var(--ws-accent-strong); }
.sl-ba-legend strong { color: var(--ws-ink); font-weight: 600; }
@media (min-width: 48rem) { .sl-ba-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ws-space-lg); } .sl-ba-legend li { flex-direction: column; gap: 0.4rem; } }
@media (max-width: 47.999rem) {
  .sl-ba { height: 41rem; }
  .sl-ba__pane { grid-template-columns: 1fr; grid-template-rows: 13rem minmax(0, 1fr); }
  .sl-ba__sheet { border-left: 0; border-top: 1px solid oklch(100% 0 0 / 0.08); padding: 0.8rem 0.9rem; gap: 0.5rem; }
  .sl-ba__sv { aspect-ratio: 3 / 1; }
  .sl-ba__pano, .sl-ba__photos { height: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .sl-ba__pano-strip, .sl-ba__route, .sl-ba__pulse, .sl-ba__twinkle { animation: none; } }

/* ---------- Ruta de trabajo (4 pasos) ---------- */
.sl-route__step { position: relative; display: grid; gap: var(--ws-space-xs); padding-top: 1.6rem; align-content: start; }
.sl-route__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ws-rule-strong); }
.sl-route__step::after { content: ""; position: absolute; top: -0.3rem; left: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.9rem var(--ws-accent-strong); }
.sl-route__step h3 { font-size: var(--ws-text-lg); line-height: 1.1; }
.sl-route__step p { color: var(--ws-muted); line-height: 1.55; font-size: 0.95rem; }
.sl-route__n { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.2em; }

/* ---------- IA ---------- */
.sl-platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sl-platforms li { padding: 0.4rem 0.9rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-ink); background: oklch(100% 0 0 / 0.04); font-size: 0.8125rem; font-weight: 500; }
.sl-term { display: grid; align-content: start; gap: 0.35rem; padding: clamp(1rem, 2.4vw, 1.6rem); border: 1px solid var(--ws-rule-strong); border-radius: 0.8rem; background: #07080a; color: oklch(88% 0.02 150); font-family: var(--sl-mono); font-size: clamp(0.72rem, 1.1vw, 0.85rem); line-height: 1.55; overflow: hidden; }
.sl-term__bar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; color: var(--ws-subtle); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sl-term__bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: oklch(100% 0 0 / 0.2); }
.sl-term p { margin: 0; opacity: 0; transform: translateY(4px); overflow-wrap: anywhere; }
.sl-term p.is-cmd { color: var(--ws-accent-strong); }
.sl-term p.is-ok { color: oklch(80% 0.14 150); }
.sl-term.is-in p { animation: sl-line 0.5s var(--ws-ease-out) forwards; animation-delay: calc(var(--i) * 0.32s); }
@keyframes sl-line { to { opacity: 1; transform: none; } }
html:not(.ws-js) .sl-term p, html:not(.sl-motion) .sl-term p { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .sl-term p { opacity: 1; transform: none; animation: none !important; } }
.sl-factors { display: grid; gap: var(--ws-space-sm); align-content: center; padding: clamp(1.2rem, 2.4vw, 1.8rem); border: 1px solid var(--ws-rule); border-radius: 1rem; background: linear-gradient(135deg, oklch(100% 0 0 / 0.05), oklch(100% 0 0 / 0.01)); }
.sl-factors h3 { font-size: var(--ws-text-lg); }
.sl-factors .sl-checks li { color: var(--ws-ink); }

@media (max-width: 59.999rem) {
  .sl-pack__stage .sl-stage--wide, .sl-ai__stage .sl-stage--wide, .sl-cta__stage .sl-stage--wide { aspect-ratio: 4 / 3.6; }
  .sl-map__stage .sl-stage--wide, .sl-nap__stage .sl-stage--wide { aspect-ratio: 16 / 11; max-height: 44svh; width: 100%; }
}

/* ---------- Hero · película «Cómo te encuentran, en 5 pasos» (v2026.10.16.1) ----------
   Con escena 3D: un subtítulo a la vez, sincronizado con la animación (core/film.js), con avance y pausa.
   Sin escena (estático, movimiento reducido o sin JS): la lista completa de los 5 pasos. */
.sl-film { position: absolute; z-index: 5; top: calc(var(--ws-nav-h) + clamp(1rem, 3.2vh, 2.25rem)); right: max(1.5rem, calc((100% - 74rem) / 2)); width: min(23rem, 31vw); padding: 0.95rem 1.1rem 0.85rem; border: 1px solid oklch(100% 0 0 / 0.14); border-radius: 1rem; color: oklch(94% 0.01 82); background: linear-gradient(180deg, oklch(11% 0.012 82 / 0.8), oklch(7% 0.01 82 / 0.66)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1.6rem 3rem -1.6rem #000, inset 0 1px 0 oklch(100% 0 0 / 0.06); animation: sl-rise 0.95s var(--ws-ease-out) 1s backwards; }
.sl-film__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.sl-film__kicker { color: var(--ws-accent-strong); font-family: var(--sl-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
.sl-film__toggle { position: relative; display: none; flex: none; width: 2rem; height: 2rem; padding: 0; border: 1px solid oklch(100% 0 0 / 0.22); border-radius: 50%; color: #fff; background: oklch(100% 0 0 / 0.06); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.sl-film__toggle:hover { border-color: var(--ws-accent-strong); background: oklch(100% 0 0 / 0.12); }
.sl-film__toggle:focus-visible, .sl-film__bar button:focus-visible { outline: 2px solid var(--ws-accent-strong); outline-offset: 2px; }
.sl-film__toggle span { position: absolute; left: 50%; top: 50%; width: 0.62rem; height: 0.7rem; margin: -0.35rem 0 0 -0.31rem; border-inline: 0.2rem solid currentColor; box-sizing: border-box; }
.sl-film__toggle[aria-pressed="true"] span { width: 0; height: 0; margin: -0.38rem 0 0 -0.18rem; border-style: solid; border-width: 0.38rem 0 0.38rem 0.62rem; border-color: transparent transparent transparent currentColor; }
.sl-film__steps { display: grid; gap: 0.95rem; }
.sl-film__step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 0.7rem; align-items: start; }
.sl-film__n { color: var(--ws-accent-strong); font-family: var(--ws-font-display); font-size: 2rem; font-style: italic; line-height: 0.9; }
.sl-film__step strong { display: block; margin-bottom: 0.3rem; color: #fff; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.sl-film__step p { color: oklch(84% 0.01 82); font-size: 0.86rem; line-height: 1.5; }
.sl-film__bar { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.8rem; }
.sl-film__bar button { position: relative; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.sl-film__bar button::before, .sl-film__bar i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.sl-film__bar button::before { background: oklch(100% 0 0 / 0.18); transition: background 0.2s; }
.sl-film__bar button:hover::before { background: oklch(100% 0 0 / 0.34); }
.sl-film__bar i { background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.5rem oklch(80% 0.13 86 / 0.6); transform: scaleX(0); transform-origin: 0 50%; }
.sl-film__bar .is-done i { transform: scaleX(1); }
.sl-film__bar .is-active i { transform: scaleX(var(--p, 0)); }
.sl-film__note { margin-top: 0.55rem; color: oklch(72% 0.01 82); font-family: var(--sl-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; }
[data-ws-hero="stage"] .sl-film__toggle { display: block; }
[data-ws-hero="stage"] .sl-film__bar { display: grid; }
[data-ws-hero="stage"] .sl-film__steps { gap: 0; }
[data-ws-hero="stage"] .sl-film__step { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(0.45rem); transition: opacity 0.35s var(--ws-ease-out), transform 0.35s var(--ws-ease-out), visibility 0s linear 0.35s; }
[data-ws-hero="stage"] .sl-film__step.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity 0.6s var(--ws-ease-out) 0.12s, transform 0.6s var(--ws-ease-out) 0.12s, visibility 0s; }
@media (min-width: 60rem) {
  .sl-hero__content { max-width: min(42rem, 58vw); }
}
@media (min-width: 60rem) and (max-height: 46rem) {
  .sl-film { padding-block: 0.75rem 0.65rem; }
  .sl-film__step p { font-size: 0.8rem; }
}
@media (max-width: 59.999rem) {
  .sl-film { position: relative; top: auto; right: auto; width: auto; margin: 2.2rem 1.5rem 0; }
  [data-ws-hero="stage"] .sl-film { position: absolute; left: 0.9rem; right: 0.9rem; top: calc(var(--ws-nav-h) + var(--sl-stage-h)); margin: 0; padding: 0.7rem 0.85rem 0.45rem; transform: translateY(calc(-100% - 0.6rem)); animation: none; }
  [data-ws-hero="stage"] .sl-film__head { margin-bottom: 0.35rem; }
  [data-ws-hero="stage"] .sl-film__toggle { width: 1.75rem; height: 1.75rem; }
  [data-ws-hero="stage"] .sl-film__step { grid-template-columns: 1.7rem minmax(0, 1fr); column-gap: 0.55rem; }
  [data-ws-hero="stage"] .sl-film__n { font-size: 1.6rem; }
  [data-ws-hero="stage"] .sl-film__step strong { margin-bottom: 0.15rem; font-size: 0.95rem; }
  [data-ws-hero="stage"] .sl-film__step p { font-size: 0.8rem; line-height: 1.42; }
  [data-ws-hero="stage"] .sl-film__bar { margin-top: 0.4rem; }
  [data-ws-hero="stage"] .sl-film__note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sl-film, .sl-film__step { animation: none; transition: none !important; } }