/* ============ Norte Studio Motion — estilos ============ */
:root {
  --bg: #09060f; --bg2: #0f0a1b; --bg3: #161027;
  --fg: #f6f2ff; --muted: #a79fbd; --lead: #d9d2ea; --line: rgba(246, 242, 255, .14);
  --ac: #8b5cff; --ac-rgb: 139, 92, 255; --ac2: #ff3d9a; --hi: #5ef2ff; --btn: #7440ff; --on: #ffffff;
  --lime: var(--hi); --p1: var(--ac); --p2: var(--ac2);
  --f-head: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-head); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.wrap { width: min(1200px, 100% - var(--gut) * 2); margin-inline: auto; }

/* ---------- efectos globales ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.fx-grain {
  opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{background-position:0 0} 20%{background-position:-40px 20px} 40%{background-position:30px -50px} 60%{background-position:-60px -20px} 80%{background-position:50px 40px} 100%{background-position:0 0} }
.fx-vignette { background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

.cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--fg); mix-blend-mode: difference; pointer-events: none; opacity: 0; display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .3s; }
.cursor span { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.on { opacity: 1; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #fff; mix-blend-mode: normal; }
.cursor.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- navegación ---------- */
.nav { position: fixed; z-index: 100; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gut); transition: background .4s, backdrop-filter .4s, padding .4s; }
.nav.solid { background: rgba(7, 7, 7, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav__logo { display: flex; align-items: center; gap: 10px; }
.nav__logo img { width: 64px; height: auto; }
.nav__logo .mono { color: var(--ac); font-size: 11px; }

/* ---------- botones ---------- */
.btn { --h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; border: 1px solid transparent; transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s; will-change: transform; }
.btn--sm { --h: 40px; padding: 0 18px; font-size: 14px; background: var(--fg); color: var(--bg); }
.btn--primary { background: var(--btn); color: #fff; box-shadow: 0 10px 40px -10px var(--btn); }
.btn--primary:hover { background: color-mix(in srgb, var(--btn) 82%, #fff); box-shadow: 0 14px 50px -8px var(--btn); }
.btn--ghost { border-color: var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--dark { background: #000; color: #fff; --h: 64px; padding: 0 34px; font-size: 18px; }
.btn--dark:hover { background: #fff; color: #000; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- tipografía de sección ---------- */
.h1 { font-size: clamp(44px, min(12.4vw, 14.5vh), 150px); line-height: .92; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.h1 .serif { display: block; font-size: 1.04em; letter-spacing: -.03em; }
.serif .wi { background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.h2 { font-size: clamp(36px, 9vw, 112px); line-height: .98; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; max-width: 16ch; }
.h2 .serif { font-size: 1.04em; }
.lead { font-size: clamp(17px, 2.2vw, 22px); color: var(--lead); max-width: 46ch; }
.sub { color: var(--muted); font-size: 17px; margin-top: 20px; max-width: 52ch; }
.sub b { color: var(--fg); }
.eyebrow { color: var(--muted); }

/* palabra por palabra */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; will-change: transform; }
.anim [data-split] { opacity: 0; }
.anim [data-reveal] { opacity: 0; transform: translateY(32px); }

.chap { display: flex; align-items: center; gap: 14px; color: var(--muted); margin-bottom: clamp(24px, 4vw, 48px); }
.chap i { display: block; height: 1px; width: 64px; background: var(--ac); transform-origin: left; }
.chap span:first-child { color: var(--ac); }

/* ---------- secciones ---------- */
.sec { position: relative; padding: clamp(84px, 13vw, 176px) 0; overflow-x: clip; }
.sec > .wrap { position: relative; z-index: 1; }
.sec--a { background: var(--bg); }
.sec--b { background: var(--bg2); }
.sec + .sec, .sec + .final { box-shadow: 0 -1px 0 var(--line); }

/* ---------- 1 hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 96px 0 clamp(72px, 10vh, 120px); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media canvas, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 80% at 30% 45%, transparent 20%, rgba(7,7,7,.75) 90%), linear-gradient(180deg, rgba(7,7,7,.35) 0%, transparent 30%, rgba(7,7,7,.85) 100%); }
.hero__copy { display: grid; gap: 22px; }
.hero__copy .h1 { max-width: 11ch; }
.hud { position: absolute; inset: 78px var(--gut) 24px; z-index: 0; pointer-events: none; color: rgba(244,241,236,.55); font-size: 10px; }
.hud > span { position: absolute; }
.hud__rec { top: 0; left: 0; display: flex; align-items: center; gap: 8px; }
.hud__rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); animation: blink 1.2s steps(2) infinite; }
.hud__r { top: 0; right: 0; }
.hud__tc { bottom: 0; left: 0; display: none; }
.hud__b { bottom: 0; right: 0; display: none; }
@keyframes blink { 50% { opacity: 0; } }
.scrollhint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; display: none; align-items: center; gap: 12px; color: var(--muted); }
.scrollhint i { width: 1px; height: 44px; background: linear-gradient(var(--fg), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 público ---------- */
.who { display: grid; gap: clamp(28px, 5vw, 56px); }
.who li { font-size: clamp(26px, 5.6vw, 64px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; max-width: 22ch; color: var(--lead); }
.who li .serif { font-size: 1.05em; }
.who li:nth-child(2) { margin-left: auto; text-align: right; }

/* ---------- 3 portafolio ---------- */
.reel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: clamp(32px, 5vw, 56px) var(--gut) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.reel::-webkit-scrollbar { display: none; }
.vcard { flex: 0 0 66vw; max-width: 300px; scroll-snap-align: center; display: grid; gap: 16px; perspective: 900px; }
.phone { position: relative; aspect-ratio: 9 / 19; border-radius: 38px; padding: 9px; background: linear-gradient(145deg, #2a2a2a, #0c0c0c); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 0 var(--ac); transition: box-shadow .5s var(--ease); transform-style: preserve-3d; }
.vcard.live .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 30px 80px -20px rgba(var(--ac-rgb), .45); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #000; }
.phone__screen canvas, .phone__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__notch { position: absolute; z-index: 2; top: 17px; left: 50%; width: 30%; height: 18px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.phone__shine { position: absolute; inset: 9px; z-index: 2; border-radius: 30px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 35%); }
.vmeta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.vmeta .mono { color: var(--ac); grid-row: span 2; }
.vmeta h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; line-height: 1.1; }
.vmeta p { color: var(--muted); font-size: 14px; }
.reel__meta { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--muted); }
.reel__meta i { flex: 1; height: 1px; background: var(--line); position: relative; }
.reel__meta b { position: absolute; left: 0; top: -1px; height: 3px; width: 16%; background: var(--ac); transform-origin: left; }

/* ---------- 4 incluye ---------- */
.inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(32px, 5vw, 64px); background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.inc li { background: var(--bg); padding: 20px 16px; display: grid; gap: 6px; align-content: start; transition: background .4s; }
.inc li:hover { background: var(--bg3); }
.inc .mono { color: var(--ac); }
.inc h3 { font-size: clamp(18px, 4.6vw, 24px); letter-spacing: -.03em; font-weight: 700; }
.inc p { color: var(--muted); font-size: 14px; }

/* ---------- 5 paquetes ---------- */
.packs { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: clamp(32px, 5vw, 56px) var(--gut) 12px; scrollbar-width: none; overscroll-behavior-x: contain; align-items: stretch; }
.packs::-webkit-scrollbar { display: none; }
.pack { position: relative; flex: 0 0 82vw; max-width: 340px; scroll-snap-align: center; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 22px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg3), var(--bg)); transition: transform .5s var(--ease), border-color .4s; }
.pack:hover { border-color: rgba(244,241,236,.35); }
.pack--rec { border-color: var(--ac); background: linear-gradient(180deg, rgba(var(--ac-rgb),.16), var(--bg) 70%); box-shadow: 0 30px 80px -30px rgba(var(--ac-rgb),.55); }
.pack__badge { position: absolute; top: -13px; left: 22px; padding: 6px 12px; border-radius: 99px; background: var(--ac); color: #fff; font-size: 10px; }
.pack__name { font-size: 15px; color: var(--muted); }
.pack__n { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pack__price { font-size: clamp(38px, 11vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pack__price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.pack__per { color: var(--muted); font-size: 14px; }
.pack__per b { color: var(--ac2); font-weight: 600; }
.pack__note { font-size: 15px; color: var(--lead); min-height: 3em; }
.pack__ant { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--lead); }
.pack__ant b { color: var(--fg); }
.pack__btns { display: grid; gap: 10px; margin-top: auto; }
.pack .btn { --h: 50px; font-size: 15px; width: 100%; }
.pack .btn--wompi { background: var(--fg); color: var(--bg); }
.pack .btn--wompi:hover { background: var(--ac); color: #fff; transform: translateY(-2px); }
.pack--rec .btn--wompi { background: var(--ac); color: #fff; }

/* ---------- 6 proceso ---------- */
.steps { position: relative; display: grid; gap: 38px; margin-top: clamp(36px, 6vw, 72px); padding-left: 44px; }
.steps__line { position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.steps__line b { position: absolute; inset: 0; background: var(--ac); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 18px var(--ac); }
.step { position: relative; display: grid; gap: 6px; }
.step::before { content: ""; position: absolute; left: -38px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ac); }
.step .mono { color: var(--ac); }
.step h3 { font-size: clamp(26px, 5vw, 44px); letter-spacing: -.035em; font-weight: 800; line-height: 1.05; }
.step p { color: var(--muted); max-width: 46ch; }

/* ---------- 7 caso ---------- */
.stats { display: grid; gap: 1px; margin-top: clamp(32px, 5vw, 64px); background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.stat { background: var(--bg2); padding: 28px 22px; display: grid; gap: 6px; }
.stat__n { font-size: clamp(56px, min(18vw, 7.4vw + 20px), 112px); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.stat__n em { font-style: normal; color: var(--ac); }
.stat p { color: var(--muted); }
.tagex { display: inline-block; margin-left: 10px; padding: 3px 8px; border: 1px dashed var(--ac); border-radius: 6px; color: var(--ac); font-size: 10px; vertical-align: middle; }
.quote { margin-top: clamp(32px, 5vw, 64px); padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--bg3); border: 1px solid var(--line); }
.quote blockquote { margin: 0; font-size: clamp(22px, 4.4vw, 40px); line-height: 1.15; letter-spacing: -.03em; font-weight: 600; }
.quote blockquote::before { content: "“"; display: block; font: italic 80px/0.6 var(--f-serif); color: var(--ac); margin-bottom: 6px; }
.quote figcaption { margin-top: 20px; color: var(--muted); display: grid; }
.quote figcaption b { color: var(--fg); }

/* ---------- 8 FAQ ---------- */
.faq { margin-top: clamp(28px, 5vw, 56px); border-top: 1px solid var(--line); max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 22px 0; font-size: clamp(18px, 3.4vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.faq__q i { flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: transform .45s var(--ease), background .3s, border-color .3s; }
.faq__q i::before, .faq__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; }
.faq__q i::after { transform: rotate(90deg); transition: transform .45s var(--ease); }
.faq__item.open .faq__q i { transform: rotate(180deg); background: var(--ac); border-color: var(--ac); }
.faq__item.open .faq__q i::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--muted); padding: 0 40px 24px 0; max-width: 60ch; }

/* ---------- CTA final ---------- */
.final { background: var(--ac); color: #000; padding: clamp(96px, 16vw, 220px) 0; position: relative; overflow: hidden; }
.final::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 80% 100%, rgba(0,0,0,.28), transparent 60%); pointer-events: none; }
.final .wrap { position: relative; z-index: 1; display: grid; gap: clamp(22px, 4vw, 40px); justify-items: start; }
.final__eye { opacity: .7; }
.final__h { font-size: clamp(40px, 11vw, 150px); line-height: .94; letter-spacing: -.05em; font-weight: 800; max-width: 14ch; text-wrap: balance; }
.final__h .serif, .final__h .serif .wi { background: none; color: #fff; -webkit-text-fill-color: #fff; font-size: 1.04em; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 10px; }
.foot img { width: 48px; height: auto; opacity: .8; }

.fab { position: fixed; z-index: 95; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: #fff; box-shadow: 0 12px 36px -8px var(--ac); transform: translateY(90px) scale(.8); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.fab.show { transform: none; opacity: 1; }

/* ---------- escritorio ---------- */
@media (min-width: 760px) {
  :root { --gut: 32px; }
  .nav { padding: 18px var(--gut); }
  .hud { inset: 92px var(--gut) 28px; font-size: 11px; }
  .hud__tc, .hud__b { display: block; }
  .scrollhint { display: flex; }
  .inc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inc li { padding: 36px 30px; min-height: 200px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 36px 0 0; }
  .steps__line { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .steps__line b { transform: scaleX(0); transform-origin: left; }
  .step::before { left: 0; top: -37px; }
  .hero__copy .h1 { max-width: 12ch; }
}
@media (min-width: 1024px) {
  .reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; overflow: visible; width: min(1200px, 100% - var(--gut) * 2); margin-inline: auto; padding: 56px 0 0; }
  .vcard { flex: none; max-width: none; justify-items: center; }
  .vcard .phone { width: min(100%, 290px); }
  .vmeta { width: min(100%, 290px); }
  .reel__meta { display: none; }
  .packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; width: min(1200px, 100% - var(--gut) * 2); margin-inline: auto; padding: 56px 0 0; }
  .pack { flex: none; max-width: none; padding: 30px 22px 24px; }
  .pack__price { font-size: clamp(30px, 3.1vw, 46px); }
  .pack--rec { top: -14px; }
  .who li { max-width: 24ch; }
  #portafolio.pinmode { height: 100vh; min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; padding: 84px 0 22px; overflow: hidden; }
  .pinmode .chap { margin-bottom: 14px; }
  .pinmode .h2 { font-size: clamp(34px, 5vw, 68px); max-width: none; }
  .pinmode .reel { display: flex; width: max-content; margin: 0; gap: clamp(48px, 7vw, 110px); padding: 0 0 0 max(32px, calc((100vw - 1200px) / 2)); will-change: transform; }
  .pinmode .vcard { flex: none; will-change: transform; }
  .pinmode .vcard .phone, .pinmode .vmeta { width: min(230px, 23.5vh); }
  .pinmode .reel__meta { display: flex; width: min(1200px, 100% - var(--gut) * 2); margin: 0 auto; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .hud__rec::before, .scrollhint i { animation: none; }
  .fx-grain { display: none; }
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* =================== EXTRAS CINEMÁTICOS =================== */
/* precarga */
.loader { position: fixed; inset: 0; z-index: 200; display: none; color: var(--fg); }
.anim .loader { display: block; animation: lfail .01s 8s forwards; }
@keyframes lfail { to { visibility: hidden; pointer-events: none; } }
.loader__half { position: absolute; left: 0; right: 0; height: 50.2%; background: #050505; }
.loader__half--t { top: 0; border-bottom: 1px solid rgba(var(--ac-rgb),.5); }
.loader__half--b { bottom: 0; }
.loader__in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; z-index: 2; }
.loader__logo { width: min(52vw, 220px); height: auto; clip-path: inset(0 100% 0 0); }
.loader__n { font-size: clamp(40px, 12vw, 96px); font-weight: 500; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.loader__n i { font-style: normal; font-size: .35em; color: var(--ac); }
.loader__bar { width: min(60vw, 280px); height: 2px; background: var(--line); overflow: hidden; }
.loader__bar b { display: block; height: 100%; background: var(--ac); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 14px var(--ac); }
.loader__in p { color: var(--muted); font-size: 10px; }
html.loading, html.loading body { overflow: hidden; }

.progress { position: fixed; z-index: 110; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ac), var(--ac2)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--ac); pointer-events: none; }

/* hero extra */
.hero__mark { position: absolute; z-index: -2; right: -18vw; top: 50%; width: min(120vw, 1100px); max-width: none; height: auto; opacity: .055; transform: translateY(-50%); pointer-events: none; }
.hero__copy, .hero__media { will-change: transform; }

/* botones: texto que rueda */
.btn__t { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: middle; white-space: nowrap; }
.btn__t > span { display: block; transition: transform .55s var(--ease); }
.btn__t::after { content: attr(data-t); position: absolute; left: 0; top: 0; transform: translateY(115%); transition: transform .55s var(--ease); }
@media (hover: hover) {
  .btn:hover .btn__t > span { transform: translateY(-115%); }
  .btn:hover .btn__t::after { transform: translateY(0); }
}

/* franja cinética */
.marq { position: relative; padding: clamp(18px, 3vw, 40px) 0; overflow: hidden; background: var(--bg); border-block: 1px solid var(--line); display: grid; gap: clamp(2px, 1vw, 12px); }
.marq__row { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.marq__g { display: flex; align-items: center; gap: .45em; padding-right: .45em; font-size: clamp(40px, 8.4vw, 120px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; text-transform: uppercase; }
.marq__g .o { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.marq__g i { font-style: normal; color: var(--ac); font-size: .5em; }

/* palabras gigantes de fondo */
.bgword { position: absolute; z-index: 0; top: 6%; left: 0; font-size: clamp(140px, 34vw, 480px); font-weight: 800; letter-spacing: -.06em; line-height: .9; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 9%, transparent); pointer-events: none; user-select: none; will-change: transform; }

/* relleno de texto con el scroll */
[data-fill] .w { transition: none; }

/* iconos que se dibujan */
.ico-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ico { width: 44px; height: 44px; color: var(--ac); overflow: visible; }
.anim .ico path, .anim .ico circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico.done { animation: icoPulse 3.6s var(--ease) infinite; }
@keyframes icoPulse { 0%, 70%, 100% { filter: drop-shadow(0 0 0 transparent); } 85% { filter: drop-shadow(0 0 8px var(--ac)); } }

/* foco que sigue al cursor */
.spot { position: relative; --mx: 50%; --my: 50%; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx) var(--my), var(--ac), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--ac-rgb), .13), transparent 60%); }
.spot:hover::before, .spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
.pack.spot > .pack__badge { position: absolute; z-index: 3; }

/* paquete recomendado: borde cónico giratorio */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pack--rec { border: 1px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 32%, #05030a), var(--bg) 72%) padding-box, conic-gradient(from var(--ang), var(--ac), rgba(var(--ac-rgb), 0) 28%, var(--ac2) 52%, rgba(var(--ac-rgb), 0) 78%, var(--ac)) border-box;
  animation: spinBorder 5s linear infinite; }
@keyframes spinBorder { to { --ang: 360deg; } }
.pack__badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3s 1s ease-in-out infinite; }
.pack__badge { overflow: hidden; }
@keyframes shine { 60%, 100% { transform: translateX(120%); } }

/* línea de tiempo de edición (proceso) */
.tl { position: relative; margin-top: clamp(28px, 5vw, 56px); padding: 34px 0 0; }
.tl__ruler { position: absolute; left: 0; right: 0; top: 0; height: 30px; border-bottom: 1px solid var(--line); }
.tl__ruler i { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--line); }
.tl__ruler i.l { height: 14px; background: rgba(244,241,236,.35); }
.tl__ruler b { position: absolute; bottom: 18px; left: 4px; font: 500 10px/1 var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.tl__track { position: relative; height: 62px; margin-top: 12px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px calc(100% / 12)); }
.tl__clip { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: -.01em; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, #2a2a2a, #1a1a1a); color: var(--lead); transform-origin: left; transition: background .4s, color .4s, border-color .4s, box-shadow .4s; }
.tl__clip b { font: 500 10px/1 var(--f-mono); color: var(--ac); }
.tl__clip span { overflow: hidden; text-overflow: ellipsis; }
.tl__clip.on { background: linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--btn) 62%, #000)); color: #fff; border-color: transparent; box-shadow: 0 0 30px -4px var(--ac); }
.tl__clip.on b { color: #fff; }
.tl__ph { position: absolute; z-index: 3; top: 0; bottom: -10px; left: 0; width: 2px; background: var(--ac); box-shadow: 0 0 14px var(--ac); will-change: left; }
.tl__ph span { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); padding: 4px 8px; border-radius: 6px; background: var(--ac); color: #fff; font-size: 10px; white-space: nowrap; }
.anim .step:not(.on) > * { opacity: .32; }
.step > * { transition: opacity .5s; }

/* cifras con anillo */
.stat { position: relative; overflow: hidden; }
.ring { position: absolute; right: 14px; bottom: 14px; width: clamp(48px, 6vw, 68px); height: auto; transform: rotate(-90deg); pointer-events: none; z-index: 0; }
.ring circle { fill: none; stroke-width: 6; }
.ring__bg { stroke: var(--line); }
.ring__fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--ac)); }
.anim .ring__fg { stroke-dashoffset: 1; }
html:not(.anim) .ring__fg { stroke-dashoffset: .25; }

/* estela del cursor */
.trail { position: fixed; left: 0; top: 0; z-index: 119; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ac); pointer-events: none; opacity: 0; }
@media (hover: none), (pointer: coarse) { .trail { display: none; } }

/* CTA final */
.final__act { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); }
.badge { width: clamp(104px, 16vw, 168px); height: auto; color: #000; flex: none; will-change: transform; }
.final::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 40% at 20% 30%, rgba(var(--ac-rgb),.5), transparent 70%), radial-gradient(35% 35% at 85% 70%, rgba(var(--ac-rgb),.35), transparent 70%); animation: blobs 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes blobs { to { transform: translate3d(6%, -4%, 0) scale(1.15) rotate(8deg); } }
.final { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pack--rec, .pack__badge::after, .final::before, .ico.done { animation: none; }
  .loader, .trail, .progress { display: none !important; }
  .ring__fg { stroke-dashoffset: .25; }
}
.stat.spot > .ring { position: absolute; z-index: 0; }

/* =================== VIDEOS REALES: escenario del hero, pared, reproductor =================== */
.sec--c { background: var(--bg); }

/* teléfonos del hero */
.hero__stage { position: absolute; z-index: 0; left: 0; right: 0; top: 104px; height: min(33svh, 290px); display: flex; justify-content: center; align-items: center; pointer-events: none; }
.hs { position: absolute; height: 100%; aspect-ratio: 9 / 19; padding: 4px; border-radius: 22px; background: linear-gradient(145deg, #2c2c2c, #0b0b0b); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 24px 50px -16px rgba(0,0,0,.9), 0 0 60px -10px rgba(var(--ac-rgb),.35); will-change: transform; }
.hs__scr { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.hs__scr video, .hs__scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs--c { z-index: 3; }
.hs--l { z-index: 1; transform: translateX(-64%) rotate(-9deg) scale(.86); }
.hs--r { z-index: 2; transform: translateX(64%) rotate(9deg) scale(.86); }
.hero__copy { position: relative; z-index: 2; }
@media (min-width: 1000px) {
  .hero__stage { left: auto; right: 2vw; width: min(44vw, 640px); top: 50%; height: min(76vh, 660px); margin-top: calc(min(76vh, 660px) / -2); }
  .hs { border-radius: 30px; padding: 7px; }
  .hs__scr { border-radius: 24px; }
  .hs--l { transform: translateX(-70%) translateY(4%) rotate(-10deg) scale(.82); }
  .hs--r { transform: translateX(70%) translateY(4%) rotate(10deg) scale(.82); }
  .hero__copy .h1 { max-width: 9.4ch; }
}

/* resplandor del color de marca en el portafolio */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #070707; }
#portafolio { --glow: #070707; transition: --glow 1s ease; }
#portafolio::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 62%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%); }
.vcard.live .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 30px 90px -20px color-mix(in srgb, var(--bc, var(--ac)) 70%, transparent); }
.vcard { cursor: pointer; }
.vmeta .mono { color: var(--bc, var(--ac)); }
.vcard .play { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); }
.vcard .play::before { content: ""; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: #fff; margin-left: 3px; }

/* pared de video */
.wall { padding-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg3); font-size: 14px; font-weight: 600; transition: background .3s, border-color .3s, color .3s; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--bc, var(--fg)); }
.chip[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) { .chip:hover { border-color: var(--fg); } }
.wallgrid { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; width: min(1400px, 100% - var(--gut) * 2); margin: 34px auto 0; height: min(125vh, 1150px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.wcol { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.tile { position: relative; flex: none; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; transition: transform .5s var(--ease), box-shadow .4s; -webkit-tap-highlight-color: transparent; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile video { opacity: 0; transition: opacity .5s; }
.tile.on video { opacity: 1; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--bc, var(--ac)); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tile.on::after { opacity: .9; }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.88)); font-size: 12px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.tile__cap i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 10px var(--bc); }
@media (hover: hover) { .tile:hover { transform: scale(1.035); z-index: 3; box-shadow: 0 20px 50px -10px rgba(0,0,0,.8); } .tile:hover::after { opacity: 1; } }
@media (min-width: 760px) { .wallgrid { gap: 14px; } .wcol { gap: 14px; } .tile { border-radius: 18px; } .tile__cap { font-size: 13px; padding: 36px 14px 14px; } }

/* reproductor */
.lb { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--bc, var(--ac)) 30%, #000), rgba(0,0,0,.94)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lb__box { position: relative; z-index: 2; display: grid; gap: 14px; width: min(100%, 440px); max-height: 100%; justify-items: center; }
.lb__box video { width: auto; max-width: 100%; height: min(78svh, 800px); aspect-ratio: 9 / 16; background: #000; border-radius: 22px; box-shadow: 0 40px 120px -20px rgba(0,0,0,.9); object-fit: contain; }
.lb__info { display: grid; gap: 6px; justify-items: center; text-align: center; }
.lb__info h3 { font-size: clamp(20px, 5vw, 28px); letter-spacing: -.03em; font-weight: 800; }
.lb__brand { color: var(--bc); }
.lb__info .btn { --h: 46px; font-size: 15px; margin-top: 4px; }
.lb__x, .lb__nav { position: absolute; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 22px; line-height: 1; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s; }
.lb__x { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb__nav { top: 50%; margin-top: -23px; font-size: 30px; padding-bottom: 4px; }
.lb__nav--p { left: 10px; } .lb__nav--n { right: 10px; }
@media (hover: hover) { .lb__x:hover, .lb__nav:hover { background: var(--ac); } }
@media (max-width: 759px) { .lb__nav { top: auto; bottom: 18px; margin: 0; } .lb__nav--p { left: 14px; } .lb__nav--n { right: 14px; } .lb__box video { height: min(70svh, 800px); } }
.lb:not([hidden]) .lb__box, .lb:not([hidden]) .lb__bg { animation: lbIn .45s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.94); } }

/* botón de sonido */
.snd { position: fixed; z-index: 96; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 99px; background: rgba(10,10,10,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); color: var(--muted); transition: color .3s, border-color .3s, transform .5s var(--ease), opacity .4s; }
.snd.on { color: var(--fg); border-color: var(--ac); }
.snd__bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.snd__bars i { width: 3px; height: 4px; border-radius: 2px; background: currentColor; transition: height .3s; }
.snd.on .snd__bars i { animation: eq .9s ease-in-out infinite; background: var(--ac); }
.snd.on .snd__bars i:nth-child(2) { animation-delay: .15s; } .snd.on .snd__bars i:nth-child(3) { animation-delay: .3s; } .snd.on .snd__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.snd__t { font-size: 10px; }
body.lbopen .snd, body.lbopen .fab { opacity: 0; pointer-events: none; }

/* modo ligero (celulares lentos / ahorro de datos) */
html.lite .fx-grain { animation: none; opacity: .05; }
html.lite .final::before, html.lite .pack--rec, html.lite .pack__badge::after, html.lite .ico.done { animation: none; }
html.lite .hs { box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
@media (prefers-reduced-motion: reduce) { .snd__bars i { animation: none !important; } }
html.lbopen { overflow: hidden; }
.hs { animation: hsFloat 6s ease-in-out infinite alternate; }
.hs--c { animation-delay: -2s; } .hs--r { animation-delay: -4s; }
@keyframes hsFloat { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .hs { animation: none; } }
html.lite .hs { animation: none; }




/* =================== PALETAS =================== */
html[data-tema="fuego"] { --bg: #0a0707; --bg2: #120c0b; --bg3: #1b1210; --fg: #f8f1e9; --muted: #a79d93; --lead: #ded4c9; --line: rgba(248,241,233,.14); --ac: #ff4a2e; --ac-rgb: 255, 74, 46; --ac2: #ffa14a; --hi: #fff0d6; --btn: #f23a1f; --on: #fff; }
html[data-tema="oro"] { --bg: #0a0908; --bg2: #11100c; --bg3: #191610; --fg: #f8f2e4; --muted: #a79f8a; --lead: #ddd4be; --line: rgba(248,242,228,.14); --ac: #d9b36a; --ac-rgb: 217, 179, 106; --ac2: #f6e2b0; --hi: #ffffff; --btn: #d9b36a; --on: #0a0908; }
html[data-tema="hielo"] { --bg: #05090f; --bg2: #0a111b; --bg3: #101a28; --fg: #eef6ff; --muted: #8fa3bd; --lead: #cfe0f5; --line: rgba(238,246,255,.14); --ac: #35e0c2; --ac-rgb: 53, 224, 194; --ac2: #4d8bff; --hi: #ffffff; --btn: #1fc9ab; --on: #04110e; }

/* =================== TEMA: oscuro cinematográfico =================== */
.cb { --bg: var(--p1); --bg2: color-mix(in srgb, var(--p1) 70%, #000); --bg3: color-mix(in srgb, var(--p1) 82%, #fff); --fg: var(--on); --muted: color-mix(in srgb, var(--on) 76%, transparent); --lead: var(--on); --line: color-mix(in srgb, var(--on) 30%, transparent); --ac: var(--hi); --ac2: var(--on); color: var(--on);
  background: linear-gradient(120deg, var(--p1), var(--p2)); }
.lb { --fg: #f6f2ff; --muted: #a79fbd; color: var(--fg); }
.fx-vignette { display: none; }
.fx-grain { opacity: .09; mix-blend-mode: overlay; }
.cursor { background: #fff; }
.nav.solid { background: color-mix(in srgb, var(--bg) 82%, transparent); box-shadow: 0 1px 0 var(--line); }
.nav__logo .mono { color: var(--ac); }
.btn--sm { background: var(--fg); color: var(--bg); }
.btn--primary { background: var(--btn); color: var(--on); box-shadow: 0 10px 40px -10px rgba(var(--ac-rgb), .8); }
.btn--primary:hover { background: color-mix(in srgb, var(--btn) 82%, #fff); }
.inc li:hover { background: var(--bg3); }
.pack { background: linear-gradient(180deg, var(--bg3), var(--bg)); box-shadow: none; }
.pack:hover { border-color: color-mix(in srgb, var(--fg) 50%, transparent); }
.pack--rec { --fg: var(--on); --muted: color-mix(in srgb, var(--on) 78%, transparent); --lead: var(--on); --line: color-mix(in srgb, var(--on) 28%, transparent); --ac: var(--hi); color: var(--on);
  background: linear-gradient(165deg, var(--btn), color-mix(in srgb, var(--ac2) 55%, #05030a) 90%) padding-box, conic-gradient(from var(--ang), var(--hi), transparent 28%, #fff 52%, transparent 78%, var(--hi)) border-box; box-shadow: 0 40px 90px -30px rgba(var(--ac-rgb), .75); }
.pack--rec .btn--wompi { background: var(--on); color: var(--btn); }
.pack__badge { background: var(--hi); color: #0a0a0f; }
.pack__per b { color: var(--ac); }
.tl__clip { border-color: var(--line); background: var(--bg3); color: var(--lead); }
.tl__clip.on { background: linear-gradient(180deg, var(--ac), var(--btn)); color: var(--on); border-color: transparent; box-shadow: 0 0 30px -4px rgba(var(--ac-rgb), .8); }
.tl__clip.on b { color: var(--on); }
.tl__ph, .tl__ph span { background: var(--hi); color: #0a0a0f; box-shadow: 0 0 14px var(--hi); }
.tile { background: #15151f; }
.snd { background: rgba(10,8,16,.85); color: #a79fbd; border-color: rgba(246,242,255,.16); }
.snd.on { color: #f6f2ff; border-color: var(--hi); }
.snd.on .snd__bars i { background: var(--hi); }
.cb .stat { background: var(--bg2); }
.cb .quote { background: var(--bg2); }
.cb .tagex { color: var(--hi); border-color: var(--hi); }
.cb .stat__n em { color: var(--hi); }
.marq.cb .marq__g i { color: var(--hi); }
.marq__g .o { -webkit-text-stroke-color: currentColor; }
.final { background: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ac2) 80%, transparent) 0%, transparent 60%), radial-gradient(70% 80% at 10% 100%, color-mix(in srgb, var(--ac) 50%, #000) 0%, transparent 70%), color-mix(in srgb, var(--ac) 55%, #07040d); color: #fff; }
.final::after { background: none; }
.final .btn--dark { background: #fff; color: #0a0a0f; }
.final .btn--dark:hover { background: var(--hi); }
.final__h .serif, .final__h .serif .wi { background: none; -webkit-text-fill-color: var(--hi); color: var(--hi); }
.badge { color: #fff; }
.fab { background: var(--btn); color: var(--on); box-shadow: 0 12px 36px -8px rgba(var(--ac-rgb), .8); }
.progress { display: none; }
.loader__half { background: #07050c; }
.hud__rec::before { background: var(--hi); }
.lb__bg { background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--bc, var(--ac)) 30%, #000), rgba(0,0,0,.94)); }
.pack__price small { display: block; margin: 6px 0 0; }
.who li { color: var(--fg); }
.rail { display: none !important; }
/* ---------- apertura cinematográfica (pinned) ---------- */
.open { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fg); }
.open > * { position: absolute; }
.open .hero__media { inset: 0; z-index: 0; }
.open .hero__mark { z-index: 1; filter: none; opacity: .07; right: -22vw; }
.open__ink { inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1400px; pointer-events: none; }
.open__word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-weight: 800; letter-spacing: -.05em; line-height: .82; font-size: clamp(66px, 21vw, 340px); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(244,240,232,.45); user-select: none; }
.open__word span { display: inline-block; will-change: transform; }
.open__word b { display: block; font-weight: 800; }
.logo3d { position: relative; width: min(66vw, 640px); aspect-ratio: 585.7 / 292; transform-style: preserve-3d; will-change: transform; }
.logo3d i { position: absolute; inset: 0; -webkit-mask: url(../assets/logo.svg) center / contain no-repeat; mask: url(../assets/logo.svg) center / contain no-repeat; background: var(--ac); }
.logo3d i:first-child { background: #fff; }
.open__tag { position: absolute; left: 0; right: 0; bottom: max(28px, 5vh); text-align: center; z-index: 3; color: rgba(244,240,232,.72); }
.open__tag span { color: var(--lime); }
.open__hint { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); width: 1px; height: 36px; background: linear-gradient(#f4f0e8, transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
.open__bone { inset: 0; z-index: 4; background: radial-gradient(70% 60% at 70% 55%, rgba(var(--ac-rgb), .22), transparent 70%), var(--bg); color: var(--fg); clip-path: circle(0% at 50% 50%); overflow: hidden; }
.open__mg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: -.055em; line-height: .84; font-size: clamp(60px, 19.5vw, 330px); pointer-events: none; }
.open__mg span { display: block; will-change: transform; }
.open__mg .g { color: transparent; -webkit-text-stroke: 2px var(--btn); }
.open__mg .g.fill { background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.ringwrap { position: absolute; z-index: 2; perspective: 1500px; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.rp { --pw: min(34vw, 15svh, 230px); position: absolute; width: var(--pw); aspect-ratio: 9 / 19; left: calc(var(--pw) / -2); top: calc(var(--pw) * -1.0556); padding: 5px; border-radius: 26px; background: linear-gradient(145deg, #2c2c34, #0b0b10); transform: rotateY(calc(var(--i) * 72deg)) translateZ(calc(var(--pw) * .98)); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 70px -26px rgba(12,11,16,.7); }
.rp__scr { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #000; }
.rp__scr video, .rp__scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.open .hero__copy { position: absolute; z-index: 5; left: 0; right: 0; bottom: max(26px, 4.5vh); display: grid; gap: 14px; }
.open .hero__copy .h1 { max-width: 12ch; font-size: clamp(36px, min(10.5vw, 9.4vh), 120px); }
.open .hero__copy .lead { max-width: 40ch; font-size: clamp(15px, 1.6vw, 20px); }
.open__fl { position: absolute; z-index: 1; pointer-events: none; }
@media (min-width: 1000px) {
  .open .hero__copy { bottom: auto; top: 50%; transform: translateY(-50%); }
  .open .hero__copy > * { max-width: 520px; }
  .open .hero__copy .h1 { font-size: clamp(44px, min(5.6vw, 9vh), 96px); max-width: 9ch; }
  .ringwrap { left: 38%; }
  .rp { --pw: min(20vw, 25svh, 250px); }
}
@media (max-width: 999px) { .ringwrap { bottom: 46%; } .rp { --pw: min(30vw, 15.5svh, 160px); } }
.hero__shade, .hud, .scrollhint, .hero__stage { display: none !important; }

/* ---------- elementos 3D flotantes ---------- */
.fl { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.fl--orb { width: var(--s, 160px); height: var(--s, 160px); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, color-mix(in srgb, var(--ac) 45%, #fff) 13%, var(--ac) 42%, color-mix(in srgb, var(--ac) 45%, #05030a) 74%, #05030a 100%); box-shadow: 0 40px 90px -30px rgba(var(--ac-rgb), .75); }
.fl--lime { background: radial-gradient(circle at 32% 28%, #fff 0, color-mix(in srgb, var(--ac2) 45%, #fff) 13%, var(--ac2) 44%, color-mix(in srgb, var(--ac2) 45%, #05030a) 76%, #05030a 100%); box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--ac2) 70%, transparent); }
.fl--ring { width: var(--s, 140px); height: var(--s, 140px); border-radius: 50%; border: calc(var(--s, 140px) * .12) solid var(--ac); opacity: .85; }
.fl--plus { width: var(--s, 56px); height: var(--s, 56px); }
.fl--plus::before, .fl--plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--fg); }
.fl--plus::after { transform: rotate(90deg); }
.fl--cube { width: var(--s, 90px); height: var(--s, 90px); transform-style: preserve-3d; animation: cubeSpin 14s linear infinite; }
.fl--cube b { position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--fg) 70%, transparent); background: color-mix(in srgb, var(--ac) 14%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.fl--cube b:nth-child(1) { transform: translateZ(calc(var(--s, 90px) / 2)); } .fl--cube b:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s, 90px) / 2)); }
.fl--cube b:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s, 90px) / 2)); } .fl--cube b:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s, 90px) / 2)); }
.fl--cube b:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s, 90px) / 2)); } .fl--cube b:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s, 90px) / 2)); }
@keyframes cubeSpin { to { transform: rotateX(360deg) rotateY(360deg); } }
html.lite .fl--cube { animation: none; transform: rotateX(-24deg) rotateY(32deg); }
@media (prefers-reduced-motion: reduce) { .fl--cube { animation: none; } }

/* ---------- riel de escenas (presentación) ---------- */
.rail { position: fixed; z-index: 94; right: 18px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 14px; mix-blend-mode: difference; color: #fff; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; opacity: .55; transition: opacity .3s; }
.rail a span { opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .4s var(--ease); }
.rail a i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: transform .4s var(--ease); }
.rail a.on { opacity: 1; } .rail a.on i { transform: scale(1.9); }
.rail a:hover span, .rail a.on span { opacity: 1; transform: none; }
@media (min-width: 1100px) { .rail { display: flex; } }
.open__skip { position: absolute; z-index: 6; right: 16px; bottom: 16px; }

.open__word span { display: block; }
.open__mg .g { position: relative; }
.open__mg .g::after { content: attr(data-t); position: absolute; inset: 0; background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; clip-path: inset(0 calc(100% - var(--fp, 0%)) 0 0); }
.open .btn { --h: 52px; }
@media (max-width: 999px) { .ringwrap { top: 9%; } .open .btn { --h: 46px; padding: 0 16px; font-size: 14px; } .open .btns { flex-wrap: nowrap; gap: 8px; } }
@media (max-width: 999px) and (max-height: 780px) { .open .hero__copy .lead { display: none; } }
@media (min-width: 1000px) { .ringwrap { top: 6%; bottom: 0; } }
html:not(.anim) .open { height: auto; min-height: 100svh; }
html:not(.anim) .open__ink { display: none; }
html:not(.anim) .open__bone { position: relative; clip-path: none; min-height: 100svh; }
.open { padding: 0; display: block; }

@media (max-width: 999px) { .open__tag { bottom: 76px; } .open__fl.hm { display: none; } }
@media (max-width: 999px) { .open .hero__copy { bottom: 74px; } }
.open__word span { display: block; }
.open__mg .g { position: relative; }
.open__mg .g::after { content: attr(data-t); position: absolute; inset: 0; background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; clip-path: inset(0 calc(100% - var(--fp, 0%)) 0 0); }
.open .btn { --h: 52px; }
@media (max-width: 999px) { .ringwrap { top: 9%; } .open .btn { --h: 46px; padding: 0 16px; font-size: 14px; } .open .btns { flex-wrap: nowrap; gap: 8px; } }
@media (max-width: 999px) and (max-height: 780px) { .open .hero__copy .lead { display: none; } }
@media (min-width: 1000px) { .ringwrap { top: 6%; bottom: 0; } }
html:not(.anim) .open { height: auto; min-height: 100svh; }
html:not(.anim) .open__ink { display: none; }
html:not(.anim) .open__bone { position: relative; clip-path: none; min-height: 100svh; }
.open { padding: 0; display: block; }
@media (max-width: 999px) { .open__tag { bottom: 76px; } .open__fl.hm { display: none; } }
@media (max-width: 999px) { .open .hero__copy { bottom: 74px; } }

/* ---------- íconos con movimiento ---------- */
.anim .ico[data-mo] path, .anim .ico[data-mo] circle, .anim .ico[data-mo] rect, .anim .ico[data-mo] ellipse { stroke-dasharray: none; stroke-dashoffset: 0; }
.ico[data-mo] { width: 52px; height: 52px; overflow: visible; }
.ico[data-mo] * { transform-box: fill-box; transform-origin: center; }
.mo-spin { animation: moSpin 8s linear infinite; } @keyframes moSpin { to { transform: rotate(360deg); } }
.mo-pulse { animation: moPulse 1.8s cubic-bezier(.5,0,.2,1) infinite; } @keyframes moPulse { 0%,100% { transform: scale(.7); } 50% { transform: scale(1.18); } }
.mo-t1, .mo-t2, .mo-t3 { stroke-dasharray: 16; animation: moType 3.6s cubic-bezier(.6,0,.2,1) infinite; transform-origin: left; }
.mo-t2 { animation-delay: .35s; } .mo-t3 { animation-delay: .7s; stroke-dasharray: 9; }
@keyframes moType { 0% { stroke-dashoffset: 16; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -16; } }
.mo-cur { animation: moBlink 1s steps(2) infinite; } @keyframes moBlink { 50% { opacity: 0; } }
.mo-ball { transform-origin: 50% 100%; animation: moBall 1.5s infinite; }
@keyframes moBall { 0% { transform: translateY(0) scale(.88, 1.16); animation-timing-function: cubic-bezier(.55,0,1,.45); } 46% { transform: translateY(21px) scale(.9, 1.1); } 50% { transform: translateY(26px) scale(1.35, .62); animation-timing-function: cubic-bezier(0,.55,.45,1); } 56% { transform: translateY(21px) scale(.92, 1.1); } 100% { transform: translateY(0) scale(.88, 1.16); } }
.mo-sh { animation: moSh 1.5s infinite; } @keyframes moSh { 0%, 100% { transform: scaleX(.5); opacity: .15; } 50% { transform: scaleX(1.3); opacity: .5; } }
.mo-bar { transform-origin: center bottom; animation: moBar 1s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes moBar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.mo-rot { animation: moRot 3.2s cubic-bezier(.65,0,.25,1) infinite; } @keyframes moRot { 0%, 15% { transform: rotate(0); } 60%, 100% { transform: rotate(360deg); } }
.mo-ok { stroke-dasharray: 26; animation: moOk 3.2s ease infinite; } @keyframes moOk { 0%, 55% { stroke-dashoffset: 26; } 75%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ico[data-mo] * { animation: none !important; } }
html.lite .ico[data-mo] .mo-spin { animation: none; }

/* ---------- línea de tiempo de la página (HUD tipo After Effects) ---------- */
.tlh { position: fixed; z-index: 97; left: 0; right: 0; bottom: 0; height: 46px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 var(--gut) env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(246,242,255,.12); color: #f6f2ff; }
.tlh__l, .tlh__r { font-size: 10px; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.tlh__l b { font-weight: 500; color: var(--hi); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.tlh__comp { opacity: .5; display: none; }
.tlh__r { min-width: 96px; justify-content: flex-end; color: #f6f2ff; }
.tlh__track { position: relative; height: 22px; cursor: pointer; }
.tlh__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(246,242,255,.18); }
.tlh__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--ac), var(--ac2)); pointer-events: none; }
.tlh__keys { position: absolute; inset: 0; }
.tlh__keys button { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); background: #0b0813; border: 1.5px solid rgba(246,242,255,.55); transition: background .3s, border-color .3s, transform .3s var(--ease); padding: 0; }
.tlh__keys button.on, .tlh__keys button:hover { background: var(--hi); border-color: var(--hi); transform: rotate(45deg) scale(1.25); }
.tlh__keys button span { position: absolute; left: 50%; bottom: 18px; transform: rotate(-45deg) translate(50%, 0); transform-origin: left bottom; white-space: nowrap; font: 500 9px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; padding: 5px 7px; background: #f6f2ff; color: #0a0a0f; border-radius: 4px; }
.tlh__keys button:hover span { opacity: 1; }
.tlh__ph { position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; background: var(--hi); box-shadow: 0 0 12px var(--hi); pointer-events: none; will-change: left; }
.tlh__ph::before { content: ""; position: absolute; left: 50%; top: -3px; width: 10px; height: 8px; margin-left: -5px; background: var(--hi); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (min-width: 760px) { .tlh { height: 52px; gap: 28px; } .tlh__comp { display: inline; } .tlh__l, .tlh__r { font-size: 11px; } }
.snd { bottom: calc(60px + env(safe-area-inset-bottom)); } .fab { bottom: calc(60px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .snd, .fab { bottom: calc(68px + env(safe-area-inset-bottom)); } }
body.lbopen .tlh { opacity: 0; pointer-events: none; }
.foot { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
html:not(.anim) .tlh { display: none; }

/* selector de paleta (vista previa) */
.themer { position: fixed; z-index: 98; left: 50%; top: 66px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: rgba(10,8,16,.88); border: 1px solid rgba(246,242,255,.18); color: #f6f2ff; font-size: 10px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.themer[hidden] { display: none; }
.themer span { opacity: .6; margin-right: 4px; }
.themer button { padding: 0; width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; }
.themer button i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.themer button.on { border-color: #fff; }
@media (min-width: 760px) { .themer { top: 76px; } }
@media (max-width: 759px) { .tlh__r { display: none; } .tlh { grid-template-columns: auto 1fr; } }
@media (max-width: 759px) { .open .hero__copy { bottom: 118px; gap: 12px; } }

/* =====================================================================
   SITIO COMPLETO · niveles con degradado propio, planes, cotizador
   ===================================================================== */
/* barra de categorías */
.cats { position: fixed; z-index: 99; top: 62px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 var(--gut); pointer-events: none; opacity: 0; transform: translateY(-14px); transition: opacity .4s, transform .5s var(--ease); }
.cats.show { opacity: 1; transform: none; pointer-events: auto; }
.cats__in { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; padding: 5px; border-radius: 99px; background: rgba(10, 8, 18, .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); scrollbar-width: none; box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .8); }
.cats__in::-webkit-scrollbar { display: none; }
.cats a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); transition: color .25s, background .25s; white-space: nowrap; }
.cats a i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--l1), var(--l2)); box-shadow: 0 0 10px color-mix(in srgb, var(--l1) 70%, transparent); }
.cats a:hover { color: var(--fg); }
.cats a.on { color: var(--fg); background: linear-gradient(135deg, color-mix(in srgb, var(--l1) 38%, transparent), color-mix(in srgb, var(--l2) 38%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--l1) 60%, transparent); }

/* botón con degradado de nivel */
.btn--lv { --h: 54px; background: linear-gradient(100deg, var(--l1), var(--l2)); color: var(--lon, #06070c); box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--l1) 70%, transparent); width: 100%; }
.btn--lv:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -10px color-mix(in srgb, var(--l2) 80%, transparent); }
.btn--lv svg { flex: none; }

/* tarjetas selectoras de nivel */
.lvgrid { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lvc { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px 20px; min-height: 230px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--l1) 30%, transparent), transparent 70%), radial-gradient(70% 70% at 0% 100%, color-mix(in srgb, var(--l2) 22%, transparent), transparent 70%), var(--bg2);
  border: 1px solid color-mix(in srgb, var(--l1) 35%, var(--line)); transition: transform .5s var(--ease), border-color .3s, box-shadow .4s; }
.lvc:hover { transform: translateY(-6px); border-color: var(--l1); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--l1) 70%, transparent); }
.lvc__n { color: var(--l1); }
.lvc h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lvc p { color: var(--lead); font-size: 14px; max-width: 28ch; }
.lvc__p { margin-top: auto; font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--l1), var(--l2)); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lvc__p small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.lvc__go { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 8%, transparent); transition: transform .4s var(--ease), background .3s, color .3s; }
.lvc:hover .lvc__go { transform: rotate(-45deg); background: var(--l1); color: var(--lon, #000); }

/* banda de oferta */
.offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 14px; padding: clamp(22px, 3.4vw, 36px); border-radius: 26px; color: #06121c; background: linear-gradient(100deg, #2ee6c5, #3b82ff); box-shadow: 0 30px 80px -34px #3b82ff; }
.offer__t .mono { color: rgba(6, 18, 28, .7); }
.offer h3 { font-size: clamp(26px, 5vw, 48px); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-top: 6px; }
.offer p { margin-top: 6px; font-weight: 500; opacity: .8; }
.offer .btn { width: auto; background: #06121c; color: #fff; box-shadow: none; }
.offer .btn:hover { background: #fff; color: #06121c; }

/* sección de nivel */
.lv { --ac: var(--l1); --ac2: var(--l2); --btn: var(--l1); --ac-rgb: 120, 120, 255; border-top: 0 !important; box-shadow: none !important;
  background: radial-gradient(75% 55% at 100% 0%, color-mix(in srgb, var(--l1) 30%, transparent), transparent 70%), radial-gradient(65% 60% at 0% 100%, color-mix(in srgb, var(--l2) 26%, transparent), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg2)); }
.lv::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--l1), var(--l2)); box-shadow: 0 0 30px var(--l1); }
.lv__top { display: grid; gap: clamp(28px, 4vw, 44px); align-items: start; }
@media (min-width: 900px) { .lv__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } .lv__card { position: sticky; top: 130px; } }
.lv .h2 { max-width: 12ch; }
.lv__inc { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 560px) { .lv__inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv__inc li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--line); font-weight: 500; line-height: 1.3; }
.lv__inc svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--l1), var(--l2)); color: var(--lon, #000); margin-top: 1px; }
.lv__card { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 28px; border: 1px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--bg2) 92%, var(--l1)), color-mix(in srgb, var(--bg2) 92%, var(--l1))) padding-box, linear-gradient(135deg, var(--l1), var(--l2)) border-box; box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--l1) 70%, transparent); }
.lv__card > .mono { color: var(--muted); }
.lv__price { font-size: clamp(54px, 9vw, 84px); font-weight: 800; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--l1), var(--l2)); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.lv__price small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.lv__offer { display: grid; gap: 6px; padding: 16px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--l1) 70%, transparent); background: color-mix(in srgb, var(--l1) 10%, transparent); }
.lv__offer .mono { color: var(--l1); }
.lv__offer b { font-size: 21px; letter-spacing: -.03em; line-height: 1.1; }
.lv__offer p { color: var(--lead); font-size: 14px; }
.lv__offer .btn { margin-top: 6px; }
.lv__cot { text-align: center; font-weight: 600; color: var(--lead); padding: 6px; transition: color .25s; }
.lv__cot:hover { color: var(--l1); }
.lv__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(32px, 5vw, 56px); padding: 22px 24px; border-radius: 22px; border: 1px dashed color-mix(in srgb, var(--l1) 60%, transparent); background: color-mix(in srgb, var(--l1) 7%, transparent); }
.lv__empty .mono { color: var(--l1); }
.lv__empty p { margin-top: 4px; color: var(--lead); max-width: 46ch; }
.lv__empty .btn { width: auto; }
.lv .reel { padding-top: clamp(36px, 5vw, 60px); }
.lv .vmeta .mono { color: var(--l1); }
.lv .vcard.live .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 30px 80px -20px color-mix(in srgb, var(--l1) 55%, transparent); }

/* planes */
.plans { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 22px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(100% 60% at 100% 0%, color-mix(in srgb, var(--l1) 22%, transparent), transparent 70%), var(--bg2); border: 1px solid color-mix(in srgb, var(--l1) 30%, var(--line)); transition: transform .5s var(--ease), box-shadow .4s; }
.plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--l1), var(--l2)); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 80px -34px color-mix(in srgb, var(--l1) 80%, transparent); }
.plan--rec { border: 1px solid transparent; background: radial-gradient(100% 60% at 100% 0%, color-mix(in srgb, var(--l1) 30%, transparent), transparent 70%), linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(135deg, var(--l1), var(--l2)) border-box; box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--l1) 80%, transparent); }
.plan__badge { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 99px; background: linear-gradient(100deg, var(--l1), var(--l2)); color: #06070c; font-size: 10px; }
.plan__name { color: var(--l1); }
.plan__price { white-space: nowrap; font-size: clamp(34px, 3.3vw, 46px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.plan__txt { color: var(--lead); min-height: 3em; }
.plan__inc { display: grid; gap: 10px; margin-bottom: 8px; }
.plan__inc li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.3; }
.plan__inc svg { flex: none; color: var(--l1); margin-top: 1px; }
.plan .btn { margin-top: auto; --h: 50px; font-size: 15px; }

/* cotizador */
.calc { --l1: #c6f432; --l2: #12c98a; display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; } }
.calc__l, .calc__r { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 3vw, 34px); border-radius: 28px; border: 1px solid var(--line); background: var(--bg3); }
.calc__r { background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--l1) 22%, transparent), transparent 70%), var(--bg3); border-color: color-mix(in srgb, var(--l1) 40%, var(--line)); transition: border-color .4s; }
.calc__lab { color: var(--muted); margin-top: 6px; }
.calc__lab:first-child { margin-top: 0; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .opts--d { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opts--d { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { display: grid; gap: 2px; text-align: left; padding: 12px 12px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); transition: border-color .25s, background .25s, transform .3s var(--ease); --l1: #8b5cff; --l2: #ff3d9a; }
.opts--d .opt { --l1: inherit; --l2: inherit; }
.opt b { font-size: 16px; letter-spacing: -.02em; }
.opt span { font-size: 12px; color: var(--muted); line-height: 1.25; }
.opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.opt.on { border-color: transparent; background: linear-gradient(color-mix(in srgb, var(--bg3) 78%, var(--l1)), color-mix(in srgb, var(--bg3) 78%, var(--l1))) padding-box, linear-gradient(135deg, var(--l1), var(--l2)) border-box; box-shadow: 0 10px 30px -14px var(--l1); }
.qty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qty button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background .25s, border-color .25s; }
.qty button:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); border-color: var(--fg); }
.qty b { min-width: 2ch; text-align: center; font-size: 40px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc__sub { color: var(--muted); font-size: 14px; flex: 1 1 100%; }
.calc__sub b { color: var(--fg); }
.calc__add { --h: 48px; font-size: 15px; width: 100%; }
.calc__tip { font-size: 13px; color: var(--muted); }
.cart { display: grid; gap: 8px; }
.cart li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid var(--line); font-size: 15px; }
.cart li:not(:has(button)) { grid-template-columns: 1fr auto; }
.cart em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart li button { width: 28px; height: 28px; border-radius: 50%; color: var(--muted); font-size: 12px; }
.cart li button:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.cart__d { color: var(--l1); }
.calc__tot { display: grid; gap: 2px; margin-top: 6px; }
.calc__tot small { color: var(--muted); font-size: 13px; }
.calc__tot strong { font-size: clamp(46px, 8vw, 72px); font-weight: 800; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--l1), var(--l2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc__dep { font-size: 14px; color: var(--lead); }
.calc__dep b { color: var(--fg); }
.calc__send { --lon: #06070c; }

/* a medida */
.amed { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 760px) { .amed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.am { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg); transition: border-color .3s, transform .5s var(--ease); }
.am:hover { border-color: var(--ac); transform: translateY(-4px); }
.am svg { color: var(--ac); margin-bottom: 4px; }
.am h3 { font-size: 22px; letter-spacing: -.03em; font-weight: 700; }
.am p { color: var(--muted); font-size: 15px; }
.am__a { margin-top: 6px; font-weight: 700; color: var(--ac); }

/* cómo funciona */
.how { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 56px); counter-reset: none; }
@media (min-width: 760px) { .how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how__s { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.how__n { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ac); font-family: var(--f-head); }
.how__t { position: absolute; top: 18px; right: 16px; padding: 4px 9px; border-radius: 99px; background: var(--ac); color: #fff; font-size: 10px; }
.how__s h3 { font-size: 22px; letter-spacing: -.03em; font-weight: 700; line-height: 1.1; }
.how__s p { color: var(--muted); font-size: 15px; }

/* clientes */
.cstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(28px, 4vw, 48px); background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
@media (min-width: 900px) { .cstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs { background: var(--bg3); padding: 24px 20px; display: grid; gap: 6px; }
.cs b { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.cs em { font-style: normal; background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs p { color: var(--muted); font-size: 14px; }
.clients { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.cl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); transition: border-color .3s, transform .5s var(--ease); }
.cl:hover { border-color: var(--ac); transform: translateY(-3px); }
.cl img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg3); grid-row: span 2; }
.cl h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.cl p { color: var(--muted); font-size: 13px; line-height: 1.3; }
.cl__f { grid-column: 2; color: var(--ac); display: flex; align-items: baseline; gap: 8px; }
.cl__f small { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.vf { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; border-radius: 50%; background: #2f9bff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/68% no-repeat; }
.tst { margin-top: 14px; display: grid; gap: 20px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 70%), var(--bg3); }
@media (min-width: 900px) { .tst { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; } .tst blockquote { grid-column: 1; } .tst figcaption { grid-column: 1; } .tst__proof { grid-column: 2; grid-row: 1 / span 2; } }
.tst blockquote { margin: 0; font-size: clamp(22px, 3.6vw, 36px); line-height: 1.18; letter-spacing: -.03em; font-weight: 600; }
.tst blockquote::before { content: "“"; display: block; font: italic 80px/.6 var(--f-serif); color: var(--ac); margin-bottom: 6px; }
.tst figcaption { display: flex; align-items: center; gap: 14px; }
.tst figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.tst figcaption div { display: grid; line-height: 1.3; }
.tst figcaption b { font-size: 17px; }
.tst figcaption span { color: var(--muted); font-size: 14px; }
.tst__src { color: var(--ac) !important; font-size: 10px !important; margin-top: 2px; }
.tst__proof { width: 100%; max-width: 460px; height: auto; border-radius: 16px; border: 1px solid var(--line); background: #fff; }

/* nivel 5 · comerciales animados */
.motiv { --bg: #14082e; --fg: #fff; --muted: rgba(255, 255, 255, .78); --line: rgba(255, 255, 255, .26); --ac: #5ef2ff; --ac2: #fff; --btn: #fff;
  color: #fff; padding-top: clamp(120px, 16vw, 220px); padding-bottom: clamp(110px, 14vw, 200px);
  background: radial-gradient(80% 70% at 85% 10%, rgba(255, 61, 154, .75), transparent 65%), radial-gradient(70% 80% at 0% 100%, rgba(116, 64, 255, .9), transparent 70%), linear-gradient(160deg, #2b0f6e, #14082e); }
.motiv .h2 { max-width: 14ch; }
.motiv .serif { background: none; -webkit-text-fill-color: #5ef2ff; color: #5ef2ff; }
.motiv .sub { max-width: 54ch; color: rgba(255, 255, 255, .85); }
.motiv .btn--primary { background: #fff; color: #14082e; box-shadow: 0 14px 50px -12px rgba(255, 255, 255, .5); }
.motiv__btns { margin-top: 28px; }
.sec--a.motiv + .sec { box-shadow: none; }

.faq__h { margin-top: 38px; color: var(--ac); }
.foot a { margin-left: auto; color: var(--muted); }
.foot a + a { margin-left: 18px; }
.foot a:hover { color: var(--fg); }
@media (max-width: 759px) {
  .cats { top: 58px; }
  .lvc { min-height: 0; }
  .lv .h2 { max-width: 11ch; }
  .offer .btn { width: 100%; }
}

/* oferta destacada dentro del nivel 1 */
.lv__offer { background: linear-gradient(120deg, var(--l1), var(--l2)); border: 0; color: var(--lon, #06121c); }
.lv__offer .mono { color: color-mix(in srgb, var(--lon) 70%, transparent); }
.lv__offer b { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.045em; line-height: 1; }
.lv__offer p { color: color-mix(in srgb, var(--lon) 80%, transparent); font-weight: 500; }
.lv__offer .btn { background: var(--lon); color: #fff; box-shadow: none; }
.lv__offer .btn:hover { background: #fff; color: var(--lon); }
.lv__price--s { font-size: clamp(34px, 5vw, 46px); }

/* ===== multipágina ===== */
.nav__links { display: none; align-items: center; gap: 22px; margin-left: auto; margin-right: 18px; }
.nav__links a { font-size: 14px; font-weight: 600; color: var(--muted); transition: color .25s; white-space: nowrap; }
.nav__links a:hover { color: var(--fg); }
@media (min-width: 820px) { .nav__links { display: flex; } }
.lv__sub { color: var(--lead); font-size: 15px; margin-top: -4px; }
.motiv__reel { padding-top: clamp(28px, 4vw, 48px); }
.motiv .vmeta .mono { color: #5ef2ff; }
.motiv .vmeta p { color: rgba(255, 255, 255, .7); }

/* enlace cruzado desde motion */
.xlink__in { display: grid; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%), var(--bg3); }
@media (min-width: 900px) { .xlink__in { grid-template-columns: 1.4fr 1fr; } .xlink__in .btns { justify-content: flex-end; } }
.xlink h2 { font-size: clamp(30px, 5vw, 54px); letter-spacing: -.045em; font-weight: 800; line-height: 1; margin: 8px 0 10px; }
.xlink p { color: var(--muted); max-width: 46ch; }
.xlink .mono { color: var(--ac); }

/* página de oferta */
.olv { --ac: var(--l1); --ac2: var(--l2); --btn: var(--l1); background: radial-gradient(75% 55% at 100% 0%, color-mix(in srgb, var(--l1) 22%, transparent), transparent 70%), radial-gradient(65% 60% at 0% 100%, color-mix(in srgb, var(--l2) 20%, transparent), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg2)); }
.ohero { position: relative; padding: clamp(104px, 14vw, 150px) 0 clamp(48px, 7vw, 96px); overflow: hidden; isolation: isolate; }
.ohero__in { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .ohero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.ohero__copy { display: grid; gap: 20px; }
.ohero .eyebrow { color: var(--l1); }
.oh1 { font-size: clamp(44px, 9.5vw, 104px); line-height: .96; letter-spacing: -.05em; font-weight: 800; max-width: 11ch; text-wrap: balance; }
.oh1 .serif { font-size: 1.04em; }
.ohero .lead { color: var(--lead); font-size: clamp(17px, 2vw, 21px); max-width: 44ch; }
.otrust { display: grid; gap: 8px; }
.otrust li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--lead); }
.otrust svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--l1), var(--l2)); color: var(--lon); margin-top: 1px; }
.obtn { width: auto; --h: 58px; font-size: 17px; padding: 0 30px; }
.osmall { font-size: 13px; color: var(--muted); }
.ohero__ph { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; min-height: 360px; }
.rph { position: relative; width: min(46vw, 230px); flex: none; }
.rph .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 40px 80px -30px color-mix(in srgb, var(--l1) 55%, #000); }
.rph--0 { transform: rotate(-7deg) translate(30px, 18px); z-index: 1; }
.rph--1 { transform: translateY(-16px); z-index: 3; width: min(54vw, 262px); }
.rph--2 { transform: rotate(7deg) translate(-30px, 18px); z-index: 2; }
@media (max-width: 899px) { .ohero__ph { min-height: 0; padding: 8px 0 0; } .rph { width: 30vw; } .rph--1 { width: 36vw; } .rph--0 { transform: rotate(-6deg) translate(16px, 10px); } .rph--2 { transform: rotate(6deg) translate(-16px, 10px); } }
.rph .phone { border-radius: 30px; padding: 7px; }
.rph .phone__screen { border-radius: 24px; }
.rph .phone__notch { top: 12px; height: 12px; }
.olv .reel { padding-top: clamp(32px, 5vw, 56px); }
.olv .vmeta .mono { color: var(--l1); }

.reel__more { display: none; justify-content: center; margin-top: 28px; }
.reel__more .btn { --h: 48px; font-size: 15px; width: auto; }
@media (min-width: 900px) { .reel--cap .vcard:nth-child(n+7) { display: none; } .reel__more { display: flex; } }