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

html:has(body.vp-page) { overflow-x: clip; scroll-padding-top: calc(72px + 1rem); }
html.tp-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html:has(body.vp-page) { scroll-behavior: auto; }
}

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

.vp-page main { position: relative; z-index: var(--ws-z-base); display: block; }
.vp-page main *, .vp-page main *::before, .vp-page main *::after { box-sizing: border-box; }
.vp-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; }
.vp-page main :where(p, ul, ol, figure) { margin: 0; padding: 0; }
.vp-page main :where(ul, ol) { list-style: none; }
.vp-page main :where(img, video, canvas, svg) { display: block; max-width: 100%; }
.vp-page main :where(a) { color: inherit; }
.vp-page main :where(button) { font: inherit; }
.vp-page main :focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 3px; }

.vp-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; }
.vp-skip:focus { transform: none; }
.vp-page .vp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

.vp-head { display: grid; gap: var(--ws-space-md); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.vp-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; }
.vp-head__body strong { color: var(--ws-ink); font-weight: 600; }

@media (min-width: 60rem) {
  .vp-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ws-space-2xl); align-items: end; }
}

/* ============================ HERO ============================ */
.vp-hero {
  --lens: clamp(19rem, 35vw, 33rem);
  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;
}

.vp-hero__media { position: absolute; inset: 0; z-index: -3; transform-origin: 50% 50%; will-change: transform; }
.vp-hero__video { width: 100%; height: 100%; object-fit: cover; }
.vp-hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 82% 42%, transparent 0%, oklch(8% 0.01 82 / 0.45) 70%),
    linear-gradient(90deg, oklch(7% 0.01 82 / 0.9) 0%, oklch(7% 0.01 82 / 0.62) 42%, oklch(7% 0.01 82 / 0.12) 100%),
    linear-gradient(0deg, oklch(7% 0.01 82 / 0.7) 0%, transparent 30%);
}

.vp-hero__grain {
  position: absolute; inset: -50%; z-index: -1; opacity: 0.09; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: vp-grain 0.9s steps(6) infinite;
}

@keyframes vp-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.vp-hero__bar { position: absolute; left: 0; right: 0; z-index: 3; height: 11%; background: #000; pointer-events: none; transform-origin: 50% 0; }
.vp-hero__bar--top { top: 0; transform-origin: 50% 0; }
.vp-hero__bar--bottom { bottom: 0; transform-origin: 50% 100%; }

.vp-hero__content { position: relative; z-index: 4; display: grid; gap: var(--ws-space-md); width: var(--ws-shell); max-width: 44rem; margin-inline: auto 0; margin-left: max(1.5rem, calc((100% - 74rem) / 2)); }
@media (min-width: 60rem) { .vp-hero__content { max-width: min(44rem, calc(100% - var(--lens) - 8rem)); } }
.vp-hero__title { font-size: clamp(2.6rem, 6.2vw + 0.6rem, 5.8rem); line-height: 0.98; letter-spacing: -0.03em; }
.vp-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; }

.vp-hero__lens {
  position: absolute; z-index: 4;
  right: clamp(1rem, 3vw, 4rem); top: 50%;
  width: var(--lens); aspect-ratio: 4 / 3.4;
  transform: translateY(-46%);
}

.vp-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; }
.vp-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: vp-cue 1.8s var(--ws-ease-out) infinite; }
@keyframes vp-cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(0.9rem); opacity: 0; } }

@media (max-width: 59.999rem) {
  .vp-hero { align-items: end; padding-bottom: 5.5rem; }
  .vp-hero__content { margin-left: 1.5rem; max-width: none; width: calc(100% - 3rem); }
  .vp-hero__lens { top: calc(var(--ws-nav-h) + 3.4rem); right: 1.5rem; width: 9.5rem; aspect-ratio: 4 / 3.4; transform: none; }
  .vp-hero__veil { background: linear-gradient(0deg, oklch(7% 0.01 82 / 0.95) 0%, oklch(7% 0.01 82 / 0.55) 55%, oklch(7% 0.01 82 / 0.25) 100%); }
}

/* Cinta de servicios */
.vp-ticker { position: relative; display: flex; align-items: stretch; border-block: 1px solid var(--vp-line); background: linear-gradient(180deg, oklch(10% 0.01 82), oklch(8% 0.008 82)); overflow: hidden; }
.vp-ticker__label { display: none; flex: none; align-items: center; padding-inline: 2rem 2.4rem; border-right: 1px solid var(--vp-line); }
.vp-ticker__rows { position: relative; flex: 1; min-width: 0; display: grid; gap: 0.7rem; 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); }
.vp-ticker__row { display: flex; width: max-content; }
.vp-ticker__group { display: flex; flex: none; gap: 0.7rem; padding-right: 0.7rem; animation: vp-slide 52s linear infinite; }
.vp-ticker__row--rev .vp-ticker__group { animation-direction: reverse; animation-duration: 64s; }
.vp-ticker:hover .vp-ticker__group, .vp-ticker:focus-within .vp-ticker__group, .vp-ticker:focus .vp-ticker__group { animation-play-state: paused; }
@keyframes vp-slide { to { transform: translateX(-100%); } }

@media (min-width: 60rem) {
  .vp-ticker__label { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-ticker__rows { -webkit-mask-image: none; mask-image: none; }
  .vp-ticker__row { width: auto; flex-wrap: wrap; }
  .vp-ticker__group { flex-wrap: wrap; animation: none; }
  .vp-ticker__group[aria-hidden="true"] { display: none; }
  .vp-hero__grain { animation: none; }
}

/* ============================ PIPELINE (cada toma) ============================ */
.vp-pipe__work { display: grid; gap: var(--ws-space-lg); }
.vp-pipe__stage { position: sticky; top: calc(var(--ws-nav-h) + 0.5rem); z-index: 5; }
.vp-pipe__steps { display: grid; gap: 0; }
.vp-pipe__step { display: flex; align-items: center; gap: var(--ws-space-md); min-height: 34svh; padding-block: var(--ws-space-lg); }

@media (min-width: 60rem) {
  .vp-pipe__work { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--ws-space-2xl); align-items: start; }
  .vp-pipe__stage { top: calc(var(--ws-nav-h) + 2rem); }
  .vp-pipe__step { min-height: 62svh; }
  .vp-pipe__steps { padding-top: 6svh; }
}

/* ============================ SUITE ============================ */
.vp-suite__work { display: grid; gap: var(--ws-space-lg); min-width: 0; }
.vp-suite__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-xs); }

@media (min-width: 60rem) {
  .vp-suite__work { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); grid-template-areas: "tabs stage" "tabs panels"; column-gap: var(--ws-space-xl); align-items: start; }
  .vp-suite__tabs { grid-area: tabs; grid-template-columns: 1fr; }
  .vp-suite__stage { grid-area: stage; }
  .vp-suite__panels { grid-area: panels; }
}

/* ============================ TELEPROMPTER ============================ */
.vp-tp__top { display: grid; gap: var(--ws-space-xl); align-items: center; }
.vp-tp__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }

@media (min-width: 60rem) {
  .vp-tp__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ws-space-2xl); }
}

/* ============================ EJEMPLO REAL ============================ */
.vp-benefits { display: grid; gap: var(--ws-space-lg); margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.vp-case__media { display: grid; gap: clamp(2rem, 4vw, 3rem); min-width: 0; padding-top: clamp(1rem, 2vw, 2rem); border-top: 1px solid var(--ws-rule); }

@media (min-width: 40rem) { .vp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .vp-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .vp-case__media { grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); padding-top: clamp(2.5rem, 4vw, 3.5rem); }
}

/* ============================ DRON ============================ */
.vp-drone { position: relative; background: #05070a; }
.vp-drone__pin { position: relative; isolation: isolate; overflow: hidden; }
.vp-drone__bg { position: absolute; inset: 0; z-index: -2; }
.vp-drone__bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vp-drone__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(7% 0.01 82 / 0.92), oklch(7% 0.01 82 / 0.55) 60%, oklch(7% 0.01 82 / 0.75)); }
.vp-drone__grid { display: grid; gap: var(--ws-space-xl); padding-block: clamp(4.5rem, 9vw, 7rem); align-items: center; }
.vp-drone__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }

@media (min-width: 60rem) {
  .vp-drone { height: 230svh; }
  .vp-drone__pin { position: sticky; top: 0; height: 100svh; }
  .vp-drone__grid { height: 100%; padding-block: calc(var(--ws-nav-h) + 1rem) 2rem; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--ws-space-xl); }
}

/* ============================ PORTAFOLIO ============================ */
.vp-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-md); align-items: start; }
.vp-g--horizontal { grid-column: 1 / -1; }

@media (min-width: 48rem) {
  .vp-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ws-space-lg); }
  .vp-g--horizontal { grid-column: span 4; }
  .vp-g--vertical { grid-column: span 2; }
}

.vp-filters { display: flex; flex-wrap: wrap; gap: var(--ws-space-xs); margin-top: var(--ws-space-md); }

/* ============================ PROCESO ============================ */
.vp-reel__work { display: grid; gap: var(--ws-space-lg); }
.vp-reel__stage { position: sticky; top: calc(var(--ws-nav-h) + 0.5rem); z-index: 5; }
.vp-reel__steps { display: grid; }
.vp-reel__step { display: grid; align-content: center; gap: var(--ws-space-xs); min-height: 38svh; padding-block: var(--ws-space-lg); }

@media (min-width: 60rem) {
  .vp-reel__work { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--ws-space-2xl); align-items: start; }
  .vp-reel__stage { top: calc(var(--ws-nav-h) + 2rem); }
  .vp-reel__step { min-height: 64svh; }
}

/* ============================ CIERRE ============================ */
.vp-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; }
.vp-cta__grid { display: grid; gap: var(--ws-space-xl); align-items: center; }
.vp-cta__copy { display: grid; gap: var(--ws-space-md); justify-items: start; }
.vp-cta__stage { display: grid; gap: var(--ws-space-sm); }
.vp-cta__stage figcaption { color: var(--ws-subtle); font-size: var(--ws-text-sm); }

@media (min-width: 60rem) {
  .vp-cta__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--ws-space-2xl); }
}