/* LUM360 · SEO local v3 · capa 2 de 4 · layout: base de página, ritmo de secciones y composición de cada sección */

html:has(body.sl-page) { overflow-x: clip; scroll-padding-top: calc(72px + 1rem); }
@media (prefers-reduced-motion: reduce) { html:has(body.sl-page) { scroll-behavior: auto; } }

body.sl-page { overflow-x: clip; color: var(--ws-ink); background: var(--ws-paper); font-family: var(--ws-font-body); }

.sl-page main { position: relative; z-index: var(--ws-z-base); display: block; }
.sl-page main *, .sl-page main *::before, .sl-page main *::after { box-sizing: border-box; }
.sl-page main :where(h1, h2, h3, h4) { min-width: 0; margin: 0; color: var(--ws-ink); font-family: var(--ws-font-display); font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; text-wrap: balance; }
.sl-page main :where(p, ul, ol, figure) { margin: 0; padding: 0; }
.sl-page main :where(ul, ol) { list-style: none; }
.sl-page main :where(img, video, canvas, svg) { display: block; max-width: 100%; }
.sl-page main :where(a) { color: inherit; }
.sl-page main :where(button) { font: inherit; }
.sl-page main :focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 3px; }

.sl-skip { position: fixed; z-index: 3000; top: 0.5rem; left: 0.5rem; padding: 0.6rem 1rem; transform: translateY(-200%); color: #111; background: #f2d675; font-weight: 600; }
.sl-skip:focus { transform: none; }

.sl-shell { width: var(--ws-shell); margin-inline: auto; }
.sl-section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--ws-paper); }
.sl-section--tint { background: var(--ws-paper-2); }

.sl-head { display: grid; gap: var(--ws-space-md); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sl-head__body { display: grid; gap: var(--ws-space-md); max-width: 46rem; color: var(--ws-muted); font-size: var(--ws-text-md); line-height: 1.6; }
.sl-head__body strong { color: var(--ws-ink); font-weight: 600; }
@media (min-width: 60rem) {
  .sl-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ws-space-2xl); align-items: end; }
}

/* ============================ HERO ============================ */
.sl-hero {
  position: relative; isolation: isolate; display: grid; align-items: end;
  min-height: max(40rem, 100svh);
  padding: calc(var(--ws-nav-h) + 3rem) 0 clamp(5rem, 9vh, 7rem);
  overflow: hidden; background: #050506;
}
.sl-hero__stage { position: absolute; inset: 0; z-index: -3; }
.sl-hero__stage .ws-stage { border-radius: 0; }
.sl-hero__veil {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, oklch(7% 0.01 82 / 0.94) 0%, oklch(7% 0.01 82 / 0.7) 36%, oklch(7% 0.01 82 / 0.1) 78%),
    linear-gradient(0deg, oklch(7% 0.01 82 / 0.8) 0%, transparent 16%);
}
.sl-hero__content { position: relative; z-index: 4; display: grid; gap: var(--ws-space-md); width: var(--ws-shell); max-width: 42rem; margin-left: max(1.5rem, calc((100% - 74rem) / 2)); }
.sl-hero__title { font-size: clamp(2.7rem, 6vw + 0.6rem, 5.6rem); line-height: 0.98; letter-spacing: -0.03em; }
.sl-hero__title strong { display: block; color: var(--ws-accent-strong); font-style: italic; font-weight: 500; }
.sl-hero__lead { max-width: 36rem; color: oklch(88% 0.01 82); font-size: clamp(1rem, 0.8vw + 0.8rem, 1.2rem); line-height: 1.6; }
.sl-hero__cue { position: absolute; z-index: 5; left: 50%; bottom: 1.4rem; width: 1.6rem; height: 2.6rem; margin-left: -0.8rem; border: 1.5px solid oklch(100% 0 0 / 0.5); border-radius: 1rem; }
.sl-hero__cue span { position: absolute; left: 50%; top: 0.45rem; width: 3px; height: 0.5rem; margin-left: -1.5px; border-radius: 2px; background: var(--ws-accent-fill, var(--ws-accent-strong)); animation: sl-cue 1.8s var(--ws-ease-out) infinite; }
@keyframes sl-cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(0.9rem); opacity: 0; } }

@media (max-width: 59.999rem) {
  /* la película ocupa la parte alta (más alta con escena 3D: v2026.10.16.1); el texto va debajo */
  .sl-hero { --sl-stage-h: 40svh; align-items: start; min-height: 0; padding: calc(var(--ws-nav-h) + var(--sl-stage-h)) 0 5.5rem; }
  [data-ws-hero="stage"] .sl-hero { --sl-stage-h: min(58svh, 34rem); }
  .sl-hero__stage { bottom: auto; height: calc(var(--ws-nav-h) + var(--sl-stage-h)); }
  .sl-hero__content { margin-left: 1.5rem; max-width: none; width: calc(100% - 3rem); }
  .sl-hero__veil { background: linear-gradient(180deg, oklch(7% 0.01 82 / 0.5) 0%, transparent 16%, transparent calc(var(--ws-nav-h) + var(--sl-stage-h) - 10svh), oklch(7% 0.01 82 / 0.98) calc(var(--ws-nav-h) + var(--sl-stage-h))); }
}

/* Cinta */
.sl-ticker { position: relative; display: flex; border-block: 1px solid var(--sl-line); background: linear-gradient(180deg, oklch(10% 0.01 82), oklch(8% 0.008 82)); overflow: hidden; }
.sl-ticker__rows { position: relative; flex: 1; min-width: 0; padding-block: 1.1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sl-ticker__row { display: flex; width: max-content; }
.sl-ticker__group { display: flex; flex: none; gap: 0.7rem; padding-right: 0.7rem; animation: sl-slide 56s linear infinite; }
.sl-ticker:hover .sl-ticker__group, .sl-ticker:focus-within .sl-ticker__group, .sl-ticker:focus .sl-ticker__group { animation-play-state: paused; }
@keyframes sl-slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .sl-ticker__rows { -webkit-mask-image: none; mask-image: none; }
  .sl-ticker__row { width: auto; flex-wrap: wrap; }
  .sl-ticker__group { flex-wrap: wrap; animation: none; }
  .sl-ticker__group[aria-hidden="true"] { display: none; }
}

/* ============================ CÓMO DECIDE UN CLIENTE ============================ */
.sl-funnel { display: grid; gap: var(--ws-space-md); counter-reset: fn; }
@media (min-width: 48rem) { .sl-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ws-space-lg); } }

/* ============================ RECORRIDO CONECTADO ============================ */
.sl-pack__work { display: grid; gap: var(--ws-space-lg); min-width: 0; }
@media (min-width: 60rem) {
  .sl-pack__work { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ws-space-2xl); align-items: center; }
}

/* ============================ MAPEO ============================ */
.sl-map__work { display: grid; gap: var(--ws-space-lg); }
.sl-map__stage { position: sticky; top: calc(var(--ws-nav-h) + 0.5rem); z-index: 5; }
.sl-map__steps { display: grid; }
@media (min-width: 60rem) {
  .sl-map__work { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--ws-space-2xl); align-items: start; }
  .sl-map__stage { top: calc(var(--ws-nav-h) + 2rem); }
}
.sl-ba-wrap { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: var(--ws-space-md); }

/* ============================ AUDITORÍA / NAP ============================ */
.sl-nap__work { display: grid; gap: var(--ws-space-lg); }
.sl-nap__stage { position: sticky; top: calc(var(--ws-nav-h) + 0.5rem); z-index: 5; }
.sl-nap__steps { display: grid; }
@media (min-width: 60rem) {
  .sl-nap__work { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ws-space-2xl); align-items: start; }
  .sl-nap__stage { top: calc(var(--ws-nav-h) + 2rem); }
}
.sl-route { display: grid; gap: var(--ws-space-md); margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 48rem) { .sl-route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ws-space-lg); } }

/* ============================ IA ============================ */
.sl-ai__top { display: grid; gap: var(--ws-space-xl); align-items: center; }
.sl-ai__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }
@media (min-width: 60rem) {
  .sl-ai__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ws-space-2xl); }
}
.sl-ai__bottom { display: grid; gap: var(--ws-space-lg); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60rem) { .sl-ai__bottom { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ws-space-xl); align-items: stretch; } }
.sl-ai__cards { display: grid; gap: var(--ws-space-md); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) { .sl-ai__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ws-space-lg); } }

/* ============================ CIERRE ============================ */
.sl-cta { position: relative; isolation: isolate; padding-block: clamp(4.5rem, 9vw, 8rem); background: radial-gradient(90% 70% at 70% 40%, oklch(18% 0.03 84), var(--ws-paper)); overflow: hidden; }
.sl-cta__grid { display: grid; gap: var(--ws-space-xl); align-items: center; }
.sl-cta__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }
.sl-cta__stage { display: grid; gap: var(--ws-space-sm); }
@media (min-width: 60rem) {
  .sl-cta__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--ws-space-2xl); }
}