/* LUM360 · video y fotografía v3 · capa 3 de 4 · componentes: tipografía, botones, visor del hero, cinta, tarjetas, teleprompter, marcos y portafolio */

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

.vp-actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-sm); }
.vp-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); }
.vp-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-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); }
.vp-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); }
.vp-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); }
.vp-btn--ghost:hover { transform: translateY(-2px); border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-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); }
.vp-chip:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-chip[aria-pressed="true"], .vp-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)); }
.vp-checks { display: grid; gap: var(--ws-space-xs); }
.vp-checks li { display: flex; gap: 0.7rem; color: var(--ws-muted); line-height: 1.5; }
.vp-checks li::before { content: ""; flex: none; width: 1.2rem; height: 1px; margin-top: 0.8em; background: var(--ws-accent-fill, var(--ws-accent-strong)); }
.vp-tags { display: flex; flex-wrap: wrap; gap: var(--ws-space-xs); }
.vp-tags li { padding: 0.3rem 0.8rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-muted); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Visor de cámara del hero ---------- */
.vp-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: oklch(96% 0.01 82); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; }
.vp-hud__bracket { position: absolute; width: clamp(1.6rem, 3vw, 2.6rem); height: clamp(1.6rem, 3vw, 2.6rem); border: 0 solid oklch(96% 0.01 82 / 0.85); }
.vp-hud__bracket--tl { top: calc(var(--ws-nav-h) + 1.4rem); left: 1.4rem; border-top-width: 2px; border-left-width: 2px; }
.vp-hud__bracket--tr { top: calc(var(--ws-nav-h) + 1.4rem); right: 1.4rem; border-top-width: 2px; border-right-width: 2px; }
.vp-hud__bracket--bl { bottom: 1.4rem; left: 1.4rem; border-bottom-width: 2px; border-left-width: 2px; }
.vp-hud__bracket--br { bottom: 1.4rem; right: 1.4rem; border-bottom-width: 2px; border-right-width: 2px; }
.vp-hud__rec { position: absolute; top: calc(var(--ws-nav-h) + 1.4rem + 0.2rem); left: calc(1.4rem + clamp(2.2rem, 4vw, 3.4rem)); display: flex; align-items: center; gap: 0.6rem; }
.vp-hud__rec time { font-variant-numeric: tabular-nums; }
.vp-hud__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--vp-rec); box-shadow: 0 0 0.9rem var(--vp-rec); animation: vp-blink 1.4s steps(1) infinite; }
@keyframes vp-blink { 50% { opacity: 0.15; } }
.vp-hud__cam { position: absolute; bottom: 1.5rem; left: calc(1.4rem + clamp(2.2rem, 4vw, 3.4rem)); opacity: 0.8; }
.vp-hud__meter { position: absolute; top: calc(var(--ws-nav-h) + 1.4rem + 0.1rem); right: calc(1.4rem + clamp(2.2rem, 4vw, 3.4rem)); display: flex; align-items: flex-end; gap: 3px; height: 1.2rem; }
.vp-hud__meter i { width: 3px; height: 100%; border-radius: 1px; background: linear-gradient(0deg, oklch(80% 0.17 145), var(--ws-accent-fill, var(--ws-accent-strong)) 70%, var(--vp-rec)); transform-origin: 50% 100%; transform: scaleY(0.3); }
.vp-hud__focus { display: none; position: absolute; top: 46%; right: 0; width: 5rem; height: 5rem; margin: -2.5rem -2.5rem 0 0; border: 1px solid oklch(96% 0.01 82 / 0.0); }
.vp-hero__lens { overflow: visible; }
.vp-hero__lens-cap { position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%); color: oklch(96% 0.01 82 / 0.75); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.3em; text-transform: uppercase; }

@media (max-width: 47.999rem) {
  .vp-hud__cam, .vp-hud__meter { display: none; }
  .vp-hero__lens-cap { display: none; }
}

/* ---------- Cinta de servicios ---------- */
.vp-ticker__label span { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.vp-ticker__group li { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.15rem 0.6rem 0.9rem; border: 1px solid var(--vp-line); border-radius: 999px; color: oklch(92% 0.01 82); background: linear-gradient(180deg, oklch(100% 0 0 / 0.07), oklch(100% 0 0 / 0.02)); font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: border-color var(--ws-dur-short), background var(--ws-dur-short); }
.vp-ticker__group li i { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: 0.68rem; font-style: normal; letter-spacing: 0.1em; }
.vp-ticker__group li:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); background: oklch(80% 0.13 86 / 0.12); }
.vp-ticker::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ws-accent-fill, var(--ws-accent-strong)), transparent); opacity: 0.6; animation: vp-sweep 5s linear infinite; }
@keyframes vp-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- Pasos de la producción ---------- */
.vp-pipe__step { opacity: 0.4; transition: opacity var(--ws-dur-long) var(--ws-ease-out); }
.vp-pipe__step.is-active { opacity: 1; }
html:not(.ws-js) .vp-pipe__step { opacity: 1; min-height: 0; }
.vp-pipe__n { color: var(--ws-accent-strong); font-family: var(--ws-font-display); font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.9; opacity: 0.9; }
.vp-pipe__step h3 { margin-bottom: var(--ws-space-2xs); font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.vp-pipe__step p { color: var(--ws-muted); font-size: var(--ws-text-md); line-height: 1.5; }
.vp-pipe__step { border-top: 1px solid var(--ws-rule); }

/* ---------- Pestañas y paneles de formatos ---------- */
.vp-suite__tabs button { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.9rem 1rem; border: 1px solid var(--ws-rule); border-radius: var(--ws-radius-md); color: var(--ws-muted); background: transparent; text-align: left; cursor: pointer; transition: border-color var(--ws-dur-short), background var(--ws-dur-short), color var(--ws-dur-short), transform var(--ws-dur-short) var(--ws-ease-out); }
.vp-suite__tabs button span { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.12em; }
.vp-suite__tabs button strong { font-family: var(--ws-font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.1; }
.vp-suite__tabs button:hover { border-color: var(--ws-rule-strong); transform: translateX(3px); }
.vp-suite__tabs button[aria-selected="true"] { color: var(--ws-ink); border-color: var(--ws-accent-line, var(--ws-accent-strong)); background: var(--ws-accent-soft); }
.vp-panel { display: grid; gap: var(--ws-space-sm); max-width: 44rem; padding-top: var(--ws-space-md); }
.vp-panel[hidden] { display: none; }
.vp-panel.is-entering { animation: vp-panel 0.6s var(--ws-ease-out); }
@keyframes vp-panel { from { opacity: 0; transform: translateY(12px); } }
.vp-panel__type { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.vp-panel h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.08; }
.vp-panel p:not(.vp-panel__type) { color: var(--ws-muted); font-size: var(--ws-text-md); line-height: 1.6; }
html:not(.ws-js) .vp-panel[hidden] { display: grid; }

/* ---------- Teleprompter en vivo ---------- */
.vp-prompter { position: relative; display: grid; gap: var(--ws-space-md); margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(1rem, 2.4vw, 1.8rem); border: 1px solid var(--vp-line); border-radius: 1.2rem; background: linear-gradient(180deg, oklch(100% 0 0 / 0.045), oklch(100% 0 0 / 0.01)); box-shadow: 0 2rem 5rem -2rem oklch(0% 0 0 / 0.8), inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.vp-prompter__head { display: grid; gap: 0.3rem; }
.vp-prompter__head h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.vp-prompter__head p { color: var(--ws-muted); font-size: var(--ws-text-base); }
.vp-tp-screen { position: relative; overflow: hidden; border: 1px solid oklch(100% 0 0 / 0.12); border-radius: 0.9rem; background: radial-gradient(120% 100% at 50% 40%, oklch(14% 0.015 84), oklch(7% 0.008 82)); height: clamp(17rem, 52svh, 30rem); }
.vp-tp-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%); }
.vp-tp-view:active { cursor: grabbing; }
.vp-tp-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; padding-inline: clamp(1rem, 6vw, 5rem); }
.vp-tp-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35em; }
.vp-tp-lines p { min-width: 0; overflow-wrap: break-word; color: oklch(96% 0.01 82); font-family: var(--ws-font-body); font-size: var(--tp-size, 54px); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.vp-tp-lines p.tp-gap { height: 0.8em; }
.vp-prompter.is-mirror .vp-tp-track { transform-origin: 50% 0; scale: -1 1; }
.vp-tp-focus { position: absolute; left: 0; right: 0; top: 38%; height: 0; pointer-events: none; }
.vp-tp-focus i { position: absolute; top: -0.9rem; width: 0; height: 0; border: 0.55rem solid transparent; }
.vp-tp-focus i:first-child { left: 0.4rem; border-left-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-tp-focus i:last-child { right: 0.4rem; border-right-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-tp-focus::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4em; height: 4.8em; background: linear-gradient(180deg, transparent, oklch(80% 0.13 86 / 0.08) 20%, oklch(80% 0.13 86 / 0.08) 80%, transparent); font-size: var(--tp-size, 54px); }
.vp-tp-hud { position: absolute; z-index: 3; top: 0.8rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: center; color: oklch(96% 0.01 82 / 0.8); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.16em; pointer-events: none; }
.vp-tp-hud__rec { display: inline-flex; align-items: center; gap: 0.5rem; }
.vp-tp-hud__rec i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: oklch(50% 0.02 82); }
.vp-prompter.is-playing .vp-tp-hud__rec i { background: var(--vp-rec); box-shadow: 0 0 0.8rem var(--vp-rec); animation: vp-blink 1.2s steps(1) infinite; }
.vp-tp-hud__mirror { opacity: 0; color: var(--vp-cyan); }
.vp-prompter.is-mirror .vp-tp-hud__mirror { opacity: 1; }
.vp-tp-count { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--ws-accent-strong); font-family: var(--ws-font-display); font-size: clamp(6rem, 22vw, 12rem); line-height: 1; text-shadow: 0 0 3rem oklch(80% 0.13 86 / 0.6); pointer-events: none; }
.vp-tp-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.3rem; text-align: center; color: oklch(96% 0.01 82 / 0.75); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; animation: vp-hint 2.2s ease-in-out infinite; }
@keyframes vp-hint { 50% { opacity: 0.35; } }
.vp-tp-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(100% 0 0 / 0.1); }
.vp-tp-progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--ws-accent-fill, var(--ws-accent-strong)); }

.vp-tp-controls { display: grid; gap: var(--ws-space-md); }
.vp-tp-controls__main { display: flex; flex-wrap: wrap; gap: var(--ws-space-xs); }
.vp-tp-play .p-pause { display: none; }
.vp-prompter.is-playing .vp-tp-play .p-play, .vp-prompter.is-counting .vp-tp-play .p-play { display: none; }
.vp-prompter.is-playing .vp-tp-play .p-pause, .vp-prompter.is-counting .vp-tp-play .p-pause { display: inline; }
.vp-tp-field { display: grid; gap: 0.35rem; }
.vp-tp-field label { display: flex; justify-content: space-between; color: var(--ws-muted); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.vp-tp-field output { color: var(--ws-accent-strong); font-variant-numeric: tabular-nums; }
.vp-tp-slider { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: 0.5rem; }
.vp-tp-slider button { height: 2.75rem; border: 1px solid var(--ws-rule-strong); border-radius: 999px; color: var(--ws-ink); background: transparent; font-weight: 600; cursor: pointer; }
.vp-tp-slider button:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-tp-slider input[type="range"] { width: 100%; height: 2.75rem; margin: 0; accent-color: var(--ws-accent-strong); background: transparent; cursor: pointer; }
.vp-tp-controls__more { display: flex; flex-wrap: wrap; gap: var(--ws-space-xs); }
.vp-tp-keys { color: var(--ws-subtle); font-size: var(--ws-text-sm); line-height: 1.8; }
.vp-tp-keys kbd { margin-inline: 0.15rem; padding: 0.05rem 0.4rem; border: 1px solid var(--ws-rule-strong); border-radius: 0.3rem; font-family: var(--vp-mono); font-size: 0.72rem; }
.vp-tp-editor { display: grid; gap: var(--ws-space-xs); }
.vp-tp-editor[hidden] { display: none; }
.vp-tp-editor label { color: var(--ws-muted); font-size: var(--ws-text-sm); }
.vp-tp-editor textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--ws-rule-strong); border-radius: 0.6rem; color: var(--ws-ink); background: oklch(100% 0 0 / 0.04); font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.vp-tp-editor button { justify-self: start; }

@media (min-width: 60rem) {
  .vp-tp-controls { grid-template-columns: auto 1fr 1fr; align-items: end; column-gap: var(--ws-space-lg); }
  .vp-tp-controls__more, .vp-tp-keys { grid-column: 1 / -1; }
  .vp-tp-controls__more { grid-column: 1 / 3; }
}

/* pantalla completa (también en móvil): el guion ocupa todo y los controles se atenúan */
.vp-prompter.is-full { position: fixed; inset: 0; z-index: 2000; margin: 0; padding: 0; border: 0; border-radius: 0; background: #050507; gap: 0; grid-template-rows: 1fr; height: 100dvh; }
.vp-prompter.is-full .vp-prompter__head, .vp-prompter.is-full .vp-tp-keys, .vp-prompter.is-full .vp-tp-editor { display: none; }
.vp-prompter.is-full .vp-tp-screen { height: 100dvh; border: 0; border-radius: 0; }
.vp-prompter.is-full .vp-tp-controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: linear-gradient(0deg, oklch(6% 0.01 82 / 0.96), oklch(6% 0.01 82 / 0.7) 70%, transparent); transition: opacity 0.4s, transform 0.4s var(--ws-ease-out); }
.vp-prompter.is-full.is-quiet .vp-tp-controls { opacity: 0; transform: translateY(100%); pointer-events: none; }
.vp-prompter.is-full .vp-tp-hint { bottom: 9rem; }
.vp-prompter.is-full .vp-tp-controls__more { grid-column: auto; }
@media (min-width: 60rem) {
  .vp-prompter.is-full .vp-tp-controls { grid-template-columns: auto 1fr 1fr auto; }
}

/* ---------- Ejemplo real: monitor y navegador ---------- */
.vp-benefits li { display: grid; gap: 0.35rem; padding: var(--ws-space-md); border: 1px solid var(--ws-rule); border-radius: var(--ws-radius-md); color: var(--ws-muted); background: var(--ws-card); line-height: 1.5; }
.vp-benefits li span { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.16em; }
.vp-benefits li strong { color: var(--ws-ink); font-family: var(--ws-font-display); font-size: 1.35rem; font-weight: 500; }
.vp-monitor { overflow: hidden; border: 1px solid oklch(100% 0 0 / 0.14); border-radius: 0.9rem; background: #050507; box-shadow: 0 2rem 4rem -1.5rem oklch(0% 0 0 / 0.7); }
.vp-monitor__bar, .vp-browser__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid oklch(100% 0 0 / 0.1); background: oklch(14% 0.01 82); color: oklch(92% 0.01 82); font-size: var(--ws-text-sm); }
.vp-monitor__bar span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.vp-monitor__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--vp-rec); animation: vp-blink 1.4s steps(1) infinite; }
.vp-monitor__bar em { color: oklch(76% 0.01 82); font-style: normal; }
.vp-monitor video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #000; }
.vp-connector { display: grid; justify-items: center; gap: 0.7rem; color: var(--ws-subtle); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.vp-connector i { display: block; width: 100%; min-width: 3rem; height: 2px; background: linear-gradient(90deg, var(--ws-accent-fill, var(--ws-accent)), var(--ws-accent-fill, var(--ws-accent-strong))); box-shadow: 0 0 1rem oklch(80% 0.13 86 / 0.6); }
.vp-connector span { max-width: 10rem; line-height: 1.5; }
@media (max-width: 59.999rem) { .vp-connector i { width: 2px; height: 3rem; min-width: 0; } }
.vp-browser { overflow: hidden; border: 1px solid var(--ws-rule-strong); border-radius: 0.9rem; background: var(--ws-card); box-shadow: 0 2rem 4rem -1.5rem var(--ws-shadow); }
.vp-browser__bar { justify-content: flex-start; flex-wrap: nowrap; background: var(--ws-card-2); color: var(--ws-ink); border-color: var(--ws-rule); }
.vp-browser__bar > span { display: inline-flex; gap: 0.35rem; }
.vp-browser__bar > span i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ws-rule-strong); }
.vp-browser__bar div { flex: 1; min-width: 0; }
.vp-browser__bar p { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.vp-browser__bar h3 { font-family: var(--ws-font-body); font-size: var(--ws-text-sm); font-weight: 600; letter-spacing: 0; }
.vp-browser__bar a { flex: none; color: var(--ws-accent-strong); font-size: var(--ws-text-sm); }
.vp-browser iframe { display: block; width: 100%; height: clamp(22rem, 52svh, 34rem); border: 0; background: #fff; }

/* ---------- Dron ---------- */
.vp-drone__points { display: grid; gap: var(--ws-space-xs); width: 100%; }
.vp-drone__points li { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--vp-line); border-radius: var(--ws-radius-md); color: var(--ws-muted); background: var(--vp-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--ws-text-md); transition: border-color var(--ws-dur-long), color var(--ws-dur-long), transform var(--ws-dur-long) var(--ws-ease-out), background var(--ws-dur-long); }
.vp-drone__points li span { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.14em; }
.vp-drone__points li.is-active { color: var(--ws-ink); border-color: var(--ws-accent-line, var(--ws-accent-strong)); background: oklch(80% 0.13 86 / 0.13); transform: translateX(6px); }

/* ---------- Portafolio ---------- */
.vp-g { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--ws-rule); border-radius: 0.6rem; background: #000; transition: opacity 0.5s, border-color 0.4s, transform 0.5s var(--ws-ease-out); }
.vp-g[hidden] { display: none; }
.vp-g video { width: 100%; background: #000; }
.vp-g--horizontal video { aspect-ratio: 16 / 9; object-fit: cover; }
.vp-g--vertical video { aspect-ratio: 9 / 16; object-fit: cover; }
.vp-g figcaption { position: absolute; left: 0; right: 0; top: 0; padding: 0.8rem 1rem 2.4rem; color: oklch(94% 0.01 82); background: linear-gradient(180deg, oklch(0% 0 0 / 0.75), transparent); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; transition: opacity 0.3s; }
.vp-g figcaption span { color: var(--ws-accent-strong); font-weight: 600; margin-right: 0.4rem; }
.vp-g figcaption span::after { content: " ·"; }
.vp-g::before, .vp-g::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 0.55rem; background: repeating-linear-gradient(90deg, transparent 0 0.5rem, oklch(0% 0 0 / 0.65) 0.5rem 0.9rem); pointer-events: none; opacity: 0.8; }
.vp-g::before { top: 0; }
.vp-g::after { bottom: 3rem; }
.vp-gallery.is-playing .vp-g:not(.is-current) { opacity: 0.4; }
.vp-g:hover { border-color: var(--ws-accent-line, var(--ws-accent-strong)); }
.vp-g:has(video:not([paused])) figcaption { opacity: 0.0; }

/* ---------- Proceso ---------- */
.vp-reel__step { border-top: 1px solid var(--ws-rule); opacity: 0.4; transition: opacity var(--ws-dur-long) var(--ws-ease-out); position: relative; }
.vp-reel__step.is-active { opacity: 1; }
html:not(.ws-js) .vp-reel__step { opacity: 1; min-height: 0; }
.vp-reel__phase { color: var(--ws-accent-strong); font-family: var(--vp-mono); font-size: var(--ws-text-xs); letter-spacing: 0.2em; text-transform: uppercase; }
.vp-reel__n { color: var(--ws-accent-strong); font-family: var(--ws-font-display); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 0.85; }
.vp-reel__step h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.08; }
.vp-reel__step p { color: var(--ws-muted); font-size: var(--ws-text-md); line-height: 1.6; }

/* ---------- Cierre ---------- */
.vp-cta__actions { margin-top: var(--ws-space-sm); }
html.vp-motion .vp-cta__actions a { opacity: 0; }

/* con el teleprompter a pantalla completa, la página (menú, asistente) queda por debajo */
html.tp-locked body.vp-page main { position: static; z-index: auto; }
html.tp-locked body.vp-page .vp-tp { position: static; }
html.tp-locked #navbar, html.tp-locked .mobile-nav { visibility: hidden; }

/* ---------- Entrada del hero (CSS puro) ---------- */
.vp-hero__bar { transform: scaleY(0); animation: vp-bar 1.5s var(--ws-ease-in-out) 0.15s both; }
.vp-hero__media { animation: vp-zoom 2.6s var(--ws-ease-out) backwards; }
.vp-hud__bracket { animation: vp-bracket 1.1s var(--ws-ease-out) 0.3s backwards; }
.vp-hero__content > * { animation: vp-rise 0.95s var(--ws-ease-out) backwards; }
.vp-hero__content > :nth-child(1) { animation-delay: 0.45s; }
.vp-hero__content > :nth-child(2) { animation-delay: 0.58s; }
.vp-hero__content > :nth-child(3) { animation-delay: 0.72s; }
.vp-hero__content > :nth-child(4) { animation-delay: 0.86s; }
.vp-hero__lens { animation: vp-lens 1.6s var(--ws-ease-out) 0.5s backwards; }
@keyframes vp-bar { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes vp-zoom { from { transform: scale(1.14); } }
@keyframes vp-bracket { from { opacity: 0; transform: scale(1.3); } }
@keyframes vp-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
@keyframes vp-lens { from { opacity: 0; scale: 0.82; } }
@media (prefers-reduced-motion: reduce) {
  .vp-hero__bar, .vp-hero__media, .vp-hud__bracket, .vp-hero__content > *, .vp-hero__lens { animation: none; }
}

/* ---------- Pasos de «cada toma»: tarjetas de vidrio con riel de avance ---------- */
.vp-pipe__steps { position: relative; padding-left: 1.6rem; }
.vp-pipe__steps::before { content: ""; position: absolute; left: 0.35rem; top: 4svh; bottom: 4svh; width: 2px; background: linear-gradient(180deg, transparent, var(--ws-rule-strong) 8%, var(--ws-rule-strong) 92%, transparent); }
.vp-pipe__step { position: relative; align-self: center; margin-block: 1.2rem; 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); min-height: 0; transition: opacity var(--ws-dur-long) var(--ws-ease-out), border-color var(--ws-dur-long), box-shadow var(--ws-dur-long), transform var(--ws-dur-long) var(--ws-ease-out); }
.vp-pipe__step::before { content: ""; position: absolute; left: calc(-1.6rem + 0.1rem); top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.3rem; border-radius: 50%; background: var(--ws-rule-strong); transition: background var(--ws-dur-long), box-shadow var(--ws-dur-long); }
.vp-pipe__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); }
.vp-pipe__step.is-active::before { background: var(--ws-accent-fill, var(--ws-accent-strong)); box-shadow: 0 0 0.9rem var(--ws-accent-strong); }
@media (min-width: 60rem) { .vp-pipe__step { margin-block: 14svh; } .vp-pipe__steps { padding-block: 10svh; } }