@font-face { font-family: "Schibsted Grotesk"; src: url("/media/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --neon: #d9bd88;
  --neon-glow: rgba(217,189,136,.22);
  --bg: #0a0b0c;
  --bg2: #111315;
  --bg3: #181b1e;
  --bg4: #22262a;
  --text: #ebe8e1;
  --dim: #a29f97;
  --brass: #c4a46c;
  --brass-2: #d9bd88;
  --m: clamp(16px, 2.4vw, 40px);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: var(--step-body); line-height: 1.45; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brass); color: var(--bg); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; background: var(--text); color: var(--bg); padding: 10px 14px; z-index: 60; }
.skip:focus { top: 10px; }

/* grano de película sobre todo */
.grain { position: fixed; inset: -50%; z-index: 55; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.h-l { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .92; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 36ch; }

.btn { display: inline-flex; align-items: center; gap: .5em; padding: 15px 24px; font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1; background: var(--text); color: var(--bg); text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s; }
.btn:hover { background: var(--brass-2); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.ghost { background: rgba(235, 232, 225, .1); color: var(--text); }
.btn.ghost:hover { background: rgba(235, 232, 225, .2); }

/* barra */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px var(--m); transition: background-color .3s, padding .3s; }
.bar.solid { background: rgba(10, 11, 12, .94); padding-block: 14px; }
.mark { font-weight: 800; letter-spacing: -0.04em; font-size: 1.25rem; text-decoration: none; justify-self: start; }
.bar nav { display: flex; gap: clamp(16px, 2.4vw, 36px); font-weight: 600; font-size: .9375rem; }
.bar nav a, .bar-cta { text-decoration: none; position: relative; }
.bar nav a::after, .bar-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.bar nav a:hover::after, .bar-cta:hover::after { transform: scaleX(1); }
.bar-cta { justify-self: end; font-weight: 600; font-size: .9375rem; }

/* ---------- PORTADA: muro ---------- */
.hero { position: relative; }
.hero-stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; perspective: 1500px; background: var(--bg); }
.wall { position: absolute; inset: -30% -18%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; transform: rotateX(32deg) rotateZ(-12deg) scale(1.08); transform-style: preserve-3d; will-change: transform; }
.col { display: flex; flex-direction: column; gap: 22px; animation: up 60s linear infinite; will-change: transform; }
.col:nth-child(even) { animation-name: down; }
.col:nth-child(1), .col:nth-child(7) { filter: blur(2.5px) brightness(.6); }
.col:nth-child(2), .col:nth-child(6) { filter: blur(1px) brightness(.8); }
@keyframes up { to { transform: translateY(-50%); } }
@keyframes down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.shot { position: relative; border-radius: 8px; overflow: hidden; background: #000; }
.shot img, .shot video { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top; filter: brightness(.62) saturate(.82) contrast(1.05); transition: filter .8s var(--ease); }
.shot.wide img { aspect-ratio: 16/10; }
.shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: 8px; } /* taste-skill-ignore: borde de pantalla */
.shot.hot img, .shot.hot video { filter: brightness(.9) saturate(1) contrast(1.05); }
.shot.hot::after { box-shadow: inset 0 0 0 2px var(--brass); } /* taste-skill-ignore: marco de la pantalla activa */
.sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 200, .07) 48%, transparent 60%); background-size: 250% 100%; animation: sweep 9s var(--ease) infinite; mix-blend-mode: screen; }
@keyframes sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(10,11,12,.66), rgba(10,11,12,.5) 45%, rgba(10,11,12,.94) 85%); }
.hero-copy { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--m); }
.hero-title { font-size: clamp(4rem, 1rem + 10.5vw, 12rem); font-weight: 800; letter-spacing: -0.055em; line-height: .86; }
.hero-title .ch-l { display: inline-block; }
.hero-title .wd { display: inline-block; white-space: nowrap; }
.hero-sub { margin-top: 26px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.35; }
.hero-now { margin-top: 22px; height: 1.5em; overflow: hidden; color: var(--brass-2); font-weight: 600; }
.hero-now span { display: block; transition: transform .45s var(--ease), opacity .45s; }
.hero-act { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.scroll-hint { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: .875rem; font-weight: 600; color: var(--dim); }
.scroll-hint::after { content: ""; display: block; width: 2px; height: 34px; margin: 10px auto 0; background: var(--brass); transform-origin: top; animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- RECORRIDO ---------- */
.reel { position: relative; background: var(--bg); }
.reel-stage { position: relative; height: 100svh; overflow: hidden; perspective: 1200px; }
.reel-bgs img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.08); } /* desenfoque y oscurecido ya vienen horneados en /media/bg */
.reel-bgs img:first-child { opacity: 1; }
.reel-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 60% 50%, rgba(10,11,12,.15), rgba(10,11,12,.85) 85%); }
.reel-h { position: absolute; z-index: 3; top: 92px; left: var(--m); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; }
.reel-items { position: absolute; inset: 0; transform-style: preserve-3d; }
.ri { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 1fr) 1.6fr; align-items: center; gap: 4vw; padding: 120px var(--m) 110px; transform-style: preserve-3d; opacity: 0; visibility: hidden; }
.ri:first-child { opacity: 1; visibility: visible; }
.ri-copy h3 { font-size: clamp(2.6rem, 1rem + 4.6vw, 6.2rem); font-weight: 800; letter-spacing: -0.05em; line-height: .9; }
.ri-copy p { margin-top: 20px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.ri-tag { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--brass-2); }
.ri-dev { position: relative; height: min(64svh, 600px); display: flex; align-items: center; justify-content: center; gap: 3vw; transform-style: preserve-3d; }
.laptop { width: min(100%, 760px); }
.laptop.wide { width: min(100%, 860px); }
.lp-scr { aspect-ratio: 16/10; background: #050607; border: 12px solid #1c1f22; border-bottom-width: 16px; border-radius: 14px 14px 4px 4px; overflow: hidden; }
.lp-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lp-scr img.contain { object-fit: contain; background: #10151a; }
.lp-base { height: 16px; margin: 0 -6%; background: #2a2e32; border-radius: 0 0 14px 14px; }
.phone { position: relative; width: min(30vw, 270px); aspect-ratio: 9/19.5; background: #000; border: 9px solid #1c1f22; border-radius: 40px; overflow: hidden; flex: none; }
.phone > img, .phone > video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop + .phone { position: absolute; right: 0; bottom: -4%; width: min(18vw, 200px); }
.tilt-l { transform: rotateY(14deg) rotateZ(-2deg); }
.tilt-r { transform: rotateY(-14deg) rotateZ(2deg) translateY(30px); }
.float-card { position: absolute; right: -2%; bottom: -6%; width: 44%; border: 8px solid #1c1f22; border-radius: 10px; overflow: hidden; }
.float-card img { width: 100%; aspect-ratio: 21/10; object-fit: cover; }
.reel-index { position: absolute; z-index: 3; left: var(--m); right: var(--m); bottom: 30px; display: flex; gap: 6px; }
.reel-index li { flex: 1; position: relative; padding-top: 12px; font-size: .875rem; font-weight: 600; color: var(--dim); transition: color .3s; }
.reel-index li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(235,232,225,.14); }
.reel-index li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--brass); }
.reel-index li.on { color: var(--text); }

/* ---------- FRASE ---------- */
.ch { position: relative; }
.ch-grow { background: var(--bg); overflow: hidden; padding: 20vh 0 18vh; }
.grow-track { display: flex; flex-direction: column; gap: 1vw; }
.grow-line { font-size: clamp(4rem, 2rem + 11vw, 14rem); font-weight: 800; letter-spacing: -0.055em; line-height: .88; white-space: nowrap; display: block; }
.gl-1 { padding-left: var(--m); }
.gl-2 { padding-left: 30vw; color: var(--brass); }
.grow-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5vw; align-items: end; margin: 12vh var(--m) 0; }
.gcap { font-size: var(--step-lead); max-width: 32ch; line-height: 1.35; }
.grow-fig { overflow: hidden; border-radius: 4px; }
.grow-fig img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }

/* ---------- TODO LO QUE HACEMOS ---------- */
.ch-caps { background: var(--bg2); padding: 160px var(--m); }
.caps { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: start; }
.caps-list .h-l { margin-bottom: 44px; }
.cap { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px; padding: 12px 0; opacity: .38; transition: opacity .24s, transform .24s var(--ease); }
.cap:hover, .cap[aria-pressed="true"] { opacity: 1; }
.cap:hover { transform: translateX(8px); }
.cap:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.cap-name { font-size: clamp(1.75rem, .8rem + 2.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.cap[aria-pressed="true"] .cap-name { color: var(--brass-2); }
.cap-note { font-size: 1rem; max-width: 26ch; text-align: right; }
.cap-inline { display: none; }
.caps-stage { position: sticky; top: 110px; }
.caps-frame { height: min(72svh, 660px); background: #0c0d0e; display: grid; place-items: center; overflow: hidden; border-radius: 6px; }
.caps-frame img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .24s, transform .6s var(--ease); }
.caps-frame img.fading { opacity: 0; transform: scale(.97); }

/* ---------- VIDEOS ---------- */
.ch-videos { background: var(--bg); padding: 160px var(--m); }
.vid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6vw; align-items: center; }
.vid-list .lead { margin: 24px 0 40px; }
.vrow { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 0; opacity: .6; transition: opacity .24s, transform .24s var(--ease); }
.vrow:hover, .vrow.is-on { opacity: 1; }
.vrow:hover { transform: translateX(10px); }
.vrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.vr-name { font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; }
.vr-note { font-size: 1rem; text-align: right; max-width: 22ch; }
.vrow.is-on .vr-name { color: var(--brass-2); }
.vid-stage { display: grid; place-items: center; }
.phone.big { width: min(100%, 360px); }
.phone > video { transition: opacity .24s; }
.phone > video.fading { opacity: 0; }

/* ---------- JUEGO ---------- */
.ch-game { background: var(--bg2); padding: 160px var(--m); }
.game { display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: center; }
.game-copy .lead { margin-top: 24px; }
.game-best { margin-top: 20px; font-weight: 600; min-height: 1.4em; color: var(--brass-2); }
.game-box { position: relative; width: min(84vw, 420px); aspect-ratio: 3/4; background: #12171c; border-radius: 6px; overflow: hidden; touch-action: none; }
.game-box canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.game-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; color: var(--text); background: rgba(10, 11, 12, .82); font-weight: 600; }
.game-over[hidden] { display: none; }

/* ---------- CÓMO ---------- */
.ch-how { background: var(--bg); padding: 160px var(--m) 0; }
.how-h { margin-bottom: 56px; }
.how { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 calc(var(--m) * -1); }
.hf { min-height: 64svh; padding: 48px 28px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.hf:nth-child(1) { background: var(--bg2); } .hf:nth-child(2) { background: var(--bg3); } .hf:nth-child(3) { background: var(--bg4); } .hf:nth-child(4) { background: #2d3237; }
.tk { width: 100%; max-width: 270px; background: var(--text); color: var(--bg); border-radius: 10px; padding: 16px; font-size: 14px; transition: transform .2s var(--ease); }
.hf:hover .tk { transform: translateY(-6px); }
.tk-top { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #cfcac0; } /* taste-skill-ignore: data-ui */
.tk-top b { font-weight: 800; }
.tk p { font-size: 15px; line-height: 1.3; }
.tk-chk { margin-top: 12px; display: grid; gap: 6px; }
.tk-chk span { padding-left: 24px; position: relative; color: #5d5a54; }
.tk-chk span::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border: 2px solid #b5b0a6; border-radius: 3px; }
.tk-chk span.on { color: var(--bg); }
.tk-chk span.on::before { background: #7a6332; border-color: #7a6332; }
.tk-fin { margin-top: 12px; padding: 8px 10px; background: var(--bg); color: var(--brass-2); border-radius: 6px; font-weight: 600; }
.hf-say { font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; max-width: 14ch; }

/* ---------- NEGOCIOS ---------- */
.ch-biz { background: var(--bg); padding: 160px var(--m); }
.biz { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bz:nth-child(2) { margin-top: 90px; }
.bz-m { overflow: hidden; margin-bottom: 22px; border-radius: 4px; }
.bz-m img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bz h3 { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; max-width: 16ch; }
.bz p { max-width: 38ch; }

/* ---------- PEDIDO ---------- */
.ch-order { background: var(--bg2); padding: 160px var(--m); }
.order { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; }
.o-main { background: var(--bg3); border-radius: 6px; padding: 44px; }
.o-say { margin: 18px 0 30px; max-width: 40ch; }
.o-form fieldset { border: 0; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.o-form legend { font-weight: 600; margin-bottom: 12px; padding: 0; }
.o-form fieldset label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg4); cursor: pointer; transition: background-color .18s, color .18s, transform .18s; font-weight: 600; font-size: 1rem; }
.o-form fieldset label:hover { transform: translateY(-2px); }
.o-form fieldset label:has(input:checked) { background: var(--brass); color: var(--bg); }
.o-form input[type=checkbox] { accent-color: var(--bg); width: 18px; height: 18px; margin: 0; }
.o-field { display: grid; gap: 6px; margin-top: 14px; font-weight: 600; max-width: 460px; }
.o-field input { font: inherit; font-weight: 400; padding: 14px 16px; border: 0; border-radius: 4px; background: var(--bg); color: var(--text); }
.o-ticket { background: var(--bg4); border-radius: 6px; padding: 36px 28px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ticket { background: var(--text); color: var(--bg); padding: 22px 22px 30px; width: min(100%, 300px); font-size: 15px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 88% calc(100% - 8px), 82% 100%, 76% calc(100% - 8px), 70% 100%, 64% calc(100% - 8px), 58% 100%, 52% calc(100% - 8px), 46% 100%, 40% calc(100% - 8px), 34% 100%, 28% calc(100% - 8px), 22% 100%, 16% calc(100% - 8px), 10% 100%, 4% calc(100% - 8px), 0 100%); }
.tkt-h { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.tkt-s { color: #5d5a54; margin-bottom: 14px; }
#tlines li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed #b5b0a6; animation: print .35s var(--ease) both; } /* taste-skill-ignore: data-ui */
#tlines li::after { content: ""; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #7a6332; }
.tkt-for { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #b5b0a6; font-weight: 600; } /* taste-skill-ignore: data-ui */
@keyframes print { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- PIE ---------- */
.foot { background: var(--bg); min-height: 80svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; font-size: .9375rem; color: var(--dim); }
.foot-top b { color: var(--text); }
.totop { font-weight: 600; color: var(--text); }
.foot-h { margin-top: auto; padding-bottom: 8px; font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--brass); }
.foot-mail { display: flex; flex-wrap: wrap; text-decoration: none; font-size: clamp(2.6rem, .5rem + 8.6vw, 9.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; padding-bottom: 32px; }
.foot-mail:hover span { color: var(--brass-2); }
.foot-meta { display: flex; justify-content: space-between; gap: 16px; font-size: .875rem; color: var(--dim); }
.foot-meta a { text-decoration: none; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .bar nav { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .wall { grid-template-columns: repeat(4, 1fr); inset: -25% -40%; gap: 14px; }
  .col { gap: 14px; }
  .col:nth-child(n+5) { display: none; }
  .hero-title { font-size: 17vw; }
  .hero-sub { font-size: 1.0625rem; }
  .hero-act .btn { padding: 13px 18px; }
  .ri { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 22px; padding: 132px var(--m) 92px; }
  .ri-copy h3 { font-size: 13vw; }
  .ri-copy p { font-size: 1rem; margin-top: 12px; }
  .ri-tag { margin-top: 10px; }
  .ri-dev { height: auto; min-height: 0; }
  .phone { width: 40vw; border-width: 6px; border-radius: 26px; }
  .laptop + .phone { width: 26vw; }
  .lp-scr { border-width: 7px; border-bottom-width: 9px; }
  .reel-h { top: 84px; font-size: 1.25rem; }
  .reel-index li { font-size: 0; }
  .grow-line { font-size: 19vw; }
  .gl-2 { padding-left: var(--m); }
  .grow-row { grid-template-columns: 1fr; }
  .caps { grid-template-columns: 1fr; }
  .caps-stage { display: none; }
  .cap { grid-template-columns: 1fr; gap: 4px; opacity: 1; }
  .cap-note { text-align: left; }
  .cap-inline { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #0c0d0e; margin: 8px 0 28px; border-radius: 4px; }
  .vid { grid-template-columns: 1fr; }
  .vr-note { display: none; }
  .phone.big { width: 70vw; }
  .game { grid-template-columns: 1fr; }
  .game-box { width: 100%; }
  .how { grid-template-columns: 1fr; }
  .hf { min-height: 0; }
  .biz { grid-template-columns: 1fr; gap: 48px; }
  .bz:nth-child(2) { margin-top: 0; }
  .order { grid-template-columns: 1fr; }
  .o-main { padding: 28px 20px; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-mail { font-size: 12vw; }
  .foot-meta { flex-direction: column; gap: 6px; font-size: .8125rem; }
  .ch-caps, .ch-videos, .ch-game, .ch-biz, .ch-order { padding-block: 110px; }
  .ch-how { padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .grain { display: none; }
}

/* ---------- mejoras ---------- */
.h1-sub { display: block; margin-top: 14px; font-size: clamp(1.25rem, .9rem + 1.3vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--brass-2); }
.hero-sub { color: #d7d3cb; }
/* barras de cine que se abren al cargar */
.bars-cine::before, .bars-cine::after { content: ""; position: fixed; left: 0; right: 0; height: 12vh; background: #000; z-index: 58; transition: transform 1.6s var(--ease) .3s; }
.bars-cine::before { top: 0; } .bars-cine::after { bottom: 0; }
.bars-cine.open::before { transform: translateY(-100%); } .bars-cine.open::after { transform: translateY(100%); }
/* índice del recorrido: botones */
.reel-index button { all: unset; cursor: pointer; display: block; width: 100%; color: inherit; transition: color .2s; }
.reel-index button:hover { color: var(--text); }
.reel-index button:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.ri { padding-inline: max(var(--m), 22px); }
/* hechos */
.ch-facts { background: var(--bg); padding: 140px var(--m) 40px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.facts li { display: grid; gap: 14px; align-content: start; }
.facts b { font-size: clamp(5rem, 2rem + 9vw, 11rem); font-weight: 800; letter-spacing: -0.06em; line-height: .8; color: var(--brass); font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--step-lead); line-height: 1.3; max-width: 22ch; }
/* servicios: textos legibles aunque la fila no esté elegida */
.cap, .cap:hover, .cap[aria-pressed="true"] { opacity: 1; }
.cap .cap-name { color: rgba(235,232,225,.55); transition: color .24s; }
.cap .cap-note { color: var(--dim); }
.cap:hover .cap-name { color: var(--text); }
.cap[aria-pressed="true"] .cap-name { color: var(--brass-2); }
.cap[aria-pressed="true"] .cap-note, .cap:hover .cap-note { color: var(--text); }
.caps-frame { position: relative; }
.caps-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .24s; }
.caps-frame .fading { opacity: 0; }
/* juego */
.game-name { margin-top: 18px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--brass-2); }
#gshare { margin-top: 16px; }
.game-box.shake { animation: shake .3s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* pedido */
.o-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.o-note { min-height: 1.4em; color: var(--brass-2); font-weight: 600; }
/* barra: sección activa */
.bar nav a.on::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr; gap: 48px; }
  .ch-facts { padding-top: 100px; }
  .h1-sub { font-size: 1.25rem; }
  .bars-cine::before, .bars-cine::after { height: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .bars-cine::before, .bars-cine::after { display: none; } }
[hidden] { display: none !important; }
@media (min-width: 600px) and (max-width: 860px) {
  .facts { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .facts b { font-size: 18vw; }
  .facts span { font-size: 1rem; }
  .how { grid-template-columns: 1fr 1fr; }
}

/* encuadre exacto: los videos son 9:16, el teléfono también */
.phone:has(video) { aspect-ratio: 9/16; border-radius: 30px; }
.phone > video { object-fit: cover; object-position: center; }
@media (max-width: 860px) {
  .tilt-l { transform: rotateY(8deg); }
  .tilt-r { transform: rotateY(-8deg) translateY(16px); }
  .ri-dev { gap: 14px; }
  .phone:has(video) { width: 41vw; border-radius: 22px; }
  .phone.big { width: min(72vw, 320px); }
  .laptop + .phone { right: -2%; bottom: -10%; }
  .float-card { width: 52%; bottom: -14%; }
}

/* ---------- juego: tu negocio en 60 segundos ---------- */
.game { grid-template-columns: minmax(280px, .8fr) 1.2fr; }
.gm { position: relative; background: #0d0f11; border-radius: 10px; padding: 22px; display: grid; gap: 14px; font-size: 15px; overflow: hidden; user-select: none; }
.gm-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gm-top > div { background: var(--bg3); border-radius: 8px; padding: 12px 14px; }
.gm-top small { display: block; color: var(--dim); font-size: 13px; }
.gm-top b { display: block; margin-top: 4px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gm-top b.low { color: #e0806f; }
.gm-chart { position: relative; background: var(--bg3); border-radius: 8px; padding: 10px 10px 4px; }
.gm-chart canvas { width: 100%; height: 110px; display: block; }
.gm-rate { position: absolute; top: 10px; right: 14px; font-weight: 600; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.gm-store { background: var(--bg3); border-radius: 8px; padding: 14px; }
.gm-queue { height: 54px; display: flex; align-items: flex-end; gap: 8px; }
.gm-queue i { width: 22px; height: 46px; position: relative; animation: walkin .45s var(--ease) both; transition: transform .35s var(--ease), opacity .35s; }
.gm-queue i::before { content: ""; position: absolute; left: 4px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: hsl(var(--h) 30% 78%); }
.gm-queue i::after { content: ""; position: absolute; left: 1px; top: 16px; width: 20px; height: 30px; border-radius: 9px 9px 3px 3px; background: hsl(calc(var(--h) * 4) 22% 48%); }
.gm-queue i.out { transform: translateX(-40px); opacity: 0; }
@keyframes walkin { from { transform: translateX(60px); opacity: 0; } }
.gm-meta { display: flex; justify-content: space-between; margin-top: 10px; color: var(--dim); font-weight: 600; }
.gm-meta .warn { color: #e0806f; }
.gm-meta .flash { animation: flash .6s; }
@keyframes flash { 30% { color: #e0806f; transform: scale(1.08); } }
.gm-serve { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; justify-content: center; gap: 12px; padding: 18px; border-radius: 8px; background: var(--brass); color: var(--bg); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; text-align: center; transition: transform .08s, background-color .15s; }
.gm-serve small { font-weight: 600; font-size: .8125rem; opacity: .7; }
.gm-serve:hover { background: var(--brass-2); }
.gm-serve:active, .gm-serve.press { transform: scale(.97); }
.gm-serve:disabled { background: var(--bg4); color: var(--dim); cursor: default; }
.gm-serve:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.gm-serve.nope { animation: nope .3s; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.gm-ups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.gm-up { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--bg3); transition: background-color .2s, transform .15s, opacity .2s; }
.gm-up .u-n { font-weight: 800; letter-spacing: -0.02em; }
.gm-up .u-t { font-size: 13px; color: var(--dim); line-height: 1.25; }
.gm-up .u-c { font-weight: 700; color: var(--brass-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.gm-up:disabled { cursor: default; opacity: .45; }
.gm-up.ready { opacity: 1; background: #2a2620; animation: ready 1.4s ease-in-out infinite; }
.gm-up.ready:hover { transform: translateY(-2px); }
.gm-up.on { opacity: 1; background: #1d2a22; }
.gm-up.on .u-c { color: #8fcf9e; }
.gm-up:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@keyframes ready { 50% { background: #3a3326; } }
.gm-event { position: absolute; left: 22px; right: 22px; top: 22px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--text); color: var(--bg); border-radius: 8px; font-weight: 600; overflow: hidden; animation: evin .35s var(--ease); }
.gm-event.auto { background: #1d2a22; color: #cfe8d4; }
.gm-event .btn { background: var(--bg); color: var(--text); padding: 10px 16px; }
.gm-event .ev-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--brass); transform-origin: left; }
@keyframes evin { from { transform: translateY(-20px); opacity: 0; } }
.gm-pop { position: absolute; z-index: 5; pointer-events: none; font-weight: 800; color: var(--brass-2); animation: popup .9s var(--ease) forwards; white-space: nowrap; }
.gm-pop.up { color: #8fcf9e; }
@keyframes popup { to { transform: translateY(-46px); opacity: 0; } }
.gm-over { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 28px; text-align: center; background: rgba(10, 11, 12, .9); }
.go-t { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 18ch; }
.go-s { color: var(--dim); max-width: 34ch; }
@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; }
  .gm { padding: 14px; gap: 10px; }
  .gm-top > div { padding: 10px; }
  .gm-chart canvas { height: 80px; }
  .gm-rate { font-size: 13px; }
  .gm-ups { grid-template-columns: 1fr 1fr; }
  .gm-up .u-t { display: none; }
  .gm-event { left: 14px; right: 14px; top: 14px; font-size: 14px; }
}
@media (min-width: 861px) { .gm-ups { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px) { .gm-up:last-child { grid-column: span 2; } }

/* ===================== v4 ===================== */
/* vuelo de la portada */
.hero-stage { perspective: 1400px; }
.trails { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
/* neón: cometas cortos que recorren cada trazo; .trf es la copia que se dibuja entera al bajar */
.tr { fill: none; stroke: var(--neon); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 150 1150; stroke-dashoffset: 150; }
/* el brillo se calcula una vez para todo el SVG y no por trazo: la portada va a 60 cuadros */
.trails { filter: drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 10px rgba(255,200,40,.6)); }
.tr2 { stroke: #fff3c4; stroke-width: 1.6; }
.tr3 { stroke-width: 1.6; }
.trf { stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; }
.fly { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.fd { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; opacity: 0; will-change: transform, opacity; }
.fd-ph { width: 170px; margin: -185px 0 0 -85px; aspect-ratio: 9/19.5; border: 7px solid #1c1f22; border-radius: 28px; overflow: hidden; background: #000; }
.fd-ph:has(video) { aspect-ratio: 9/16; }
.fd-ph img, .fd-ph video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fd-lap { width: 420px; margin: -140px 0 0 -210px; }
.fd-lap .lp-scr { border-width: 9px; border-bottom-width: 11px; }
.fd-lap .lp-base { height: 11px; }
.fd-card { width: 360px; margin: -80px 0 0 -180px; border: 6px solid #1c1f22; border-radius: 10px; overflow: hidden; }
.fd-card img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.fly-say { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14vh; text-align: center; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; pointer-events: none; }
.fly-say span { display: block; opacity: 0; }
.fly-say span + span { color: var(--brass-2); }
/* pantallas que se mueven solas */
.lp-scr.kb img { animation: kb 14s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
.lp-scr.pan img { object-position: top; animation: pan 12s ease-in-out infinite alternate; height: auto; min-height: 100%; }
@keyframes pan { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 100px)); } }
.float-card.fc-a { right: -3%; bottom: -8%; width: 40%; }
.float-card.fc-b { left: -4%; top: -6%; right: auto; bottom: auto; width: 34%; }
.float-card img { aspect-ratio: 16/9; }
.float-card { animation: bob 6s ease-in-out infinite; }
.float-card.fc-b { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* frase */
.ch-grow { padding: 18vh var(--m) 16vh; }
.grow-h { font-size: clamp(2.8rem, .5rem + 8.4vw, 10.5rem); font-weight: 800; letter-spacing: -0.055em; line-height: .9; }
.grow-h .gw { display: block; }
.grow-h .gw + .gw { color: var(--brass); }
.grow-h .gl { display: inline-block; }
.ch-grow .gcap { margin-top: 48px; max-width: 40ch; }

/* servicios: vistas animadas */
.caps-frame { height: min(72svh, 640px); display: grid; place-items: center; padding: 26px; background: radial-gradient(ellipse at 50% 40%, #1a1d21, #0c0d0e 75%); }
.pv { position: relative; width: 100%; height: 100%; display: grid; place-items: center; animation: pvin .5s var(--ease); }
@keyframes pvin { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.pv-lap { width: 100%; }
.pv-lap .lp-scr { position: relative; }
.pv-lap .lp-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .8s; }
.pv-lap .lp-scr img.on { opacity: 1; animation: pvpan 9s ease-in-out both; }
@keyframes pvpan { from { object-position: 50% 0%; transform: scale(1.04); } to { object-position: 50% 100%; transform: scale(1); } }
.pv-ph { height: 100%; aspect-ratio: 9/19.5; position: relative; border: 8px solid #1c1f22; border-radius: 34px; overflow: hidden; background: #000; }
.pv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: translateY(100%); transition: transform .9s var(--ease); }
.pv-ph img.on { transform: none; } .pv-ph img.gone { transform: translateY(-30%); opacity: .3; }
.pv-kb { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.pv-kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.pv-kb img.on { opacity: 1; animation: kb 6s ease-out both; }
.pv-vid { height: 100%; aspect-ratio: 9/16; border: 8px solid #1c1f22; border-radius: 30px; overflow: hidden; background: #000; }
.pv-vid video { width: 100%; height: 100%; object-fit: cover; }
.pv-game { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.pv-game iframe, .pv-game img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pv-game img { animation: kb 10s ease-in-out infinite alternate; }
.pv-prod { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; }
.pv-prod div { aspect-ratio: 1; background: #fff; border-radius: 10px; display: grid; place-items: center; overflow: hidden; animation: prodin .7s var(--ease) both; }
.pv-prod div img { width: 86%; height: 86%; object-fit: contain; transition: transform .6s var(--ease); }
.pv-prod div:hover img { transform: scale(1.08) rotate(-2deg); }
@keyframes prodin { from { opacity: 0; transform: translateY(20px) rotateX(30deg); } }
.cap-inline { display: none; }

/* videos: estilos */
.est-phone { aspect-ratio: auto !important; height: auto; position: relative; }
.est-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; container-type: inline-size; overflow: hidden; }
.est-cap { margin-top: 18px; text-align: center; color: var(--dim); font-weight: 600; min-height: 1.4em; }
.vid-stage { flex-direction: column; }

/* juego */
.game { grid-template-columns: minmax(280px, .75fr) 1.25fr; }
.game-frame { position: relative; aspect-ratio: 16/10; background: #000; border-radius: 10px; overflow: hidden; }
.game-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); animation: kb 16s ease-in-out infinite alternate; }
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 40px; font-size: 1.25rem; background: var(--brass); color: var(--bg); }
.game-play:hover { transform: translate(-50%, calc(-50% - 2px)); }
.game-frame.full { position: fixed; inset: 0; z-index: 80; border-radius: 0; aspect-ratio: auto; }
.game-frame.full iframe { top: calc(52px + env(safe-area-inset-top)); height: calc(100% - 52px - env(safe-area-inset-top)); bottom: auto; }
.game-close { position: absolute; z-index: 2; top: calc(6px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 10px 16px; background: #0a0b0c; color: var(--text); border: 1px solid rgba(235,232,225,.25); }

/* negocios: animaciones */
.bz-anim { position: relative; aspect-ratio: 4/3.4; background: var(--bg2); border-radius: 6px; margin-bottom: 22px; padding: 22px; overflow: hidden; display: flex; flex-direction: column; }
.bz-anim small { margin-top: auto; color: var(--dim); font-size: 13px; }
.bb-lab { display: flex; justify-content: space-between; align-items: baseline; }
.bb-lab span { color: var(--dim); font-weight: 600; }
.bb-lab b { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.bb-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; margin: 16px 0 10px; }
.bb-chart i { flex: 1; height: var(--h); background: var(--brass); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.bz-anim.on .bb-chart i { transform: scaleY(1); }
.bz-anim.on .bb-chart i:nth-child(n) { transition-delay: calc(var(--i, 0) * 60ms); }
.bb-line { position: absolute; left: 22px; right: 22px; top: 80px; height: 45%; width: calc(100% - 44px); overflow: visible; }
.bb-line path { fill: none; stroke: #e0806f; stroke-width: 2.5; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 2s var(--ease) .4s; }
.bz-anim.on .bb-line path { stroke-dashoffset: 0; }
.ba-donut { align-items: center; }
.ba-donut svg { width: 62%; transform: rotate(-90deg); }
.dn-bg { fill: none; stroke: var(--bg4); stroke-width: 16; }
.dn { fill: none; stroke-width: 16; stroke-dasharray: 0 276.5; stroke-dashoffset: calc(var(--o) * -2.765); transition: stroke-dasharray 1.4s var(--ease); }
.bz-anim.on .dn { stroke-dasharray: calc(var(--p) * 2.765 - 3) 276.5; }
.s1 { stroke: var(--brass-2); } .s2 { stroke: #7fa3b8; } .s3 { stroke: #8fae7d; } .s4 { stroke: #a29f97; }
.dn-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 14px; font-size: 14px; width: 100%; }
.dn-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.c1 { background: var(--brass-2); } .c2 { background: #7fa3b8; } .c3 { background: #8fae7d; } .c4 { background: #a29f97; }
.ba-fm { padding: 0; }
.ba-fm img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; transform-origin: 70% 40%; animation: kb 18s ease-in-out infinite alternate; }
.fm-tick { position: absolute; left: 16px; bottom: 16px; background: var(--text); color: var(--bg); border-radius: 8px; padding: 10px 14px; display: grid; animation: bob 4s ease-in-out infinite; }
.fm-tick span { font-size: 12px; font-weight: 600; color: #5d5a54; }
.fm-tick b { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bz:nth-child(2) { margin-top: 0; }

@media (max-width: 860px) {
  .fd-ph { width: 110px; margin: -120px 0 0 -55px; border-width: 5px; border-radius: 18px; }
  .fd-lap { width: 230px; margin: -80px 0 0 -115px; }
  .fd-card { width: 200px; margin: -45px 0 0 -100px; }
  .fly-say { bottom: 12vh; padding: 0 var(--m); }
  .caps-stage { display: none; }
  .cap-inline { display: block; height: 340px; margin: 8px 0 28px; }
  .cap-inline:empty { display: none; }
  .cap-inline .pv-lap { align-self: center; }
  .game { grid-template-columns: 1fr; }
  .game-frame { aspect-ratio: 4/5; }
  .float-card.fc-b { display: none; }
  .float-card.fc-a { width: 46%; bottom: -16%; }
  .grow-h { font-size: 12.5vw; }
}
@media (prefers-reduced-motion: reduce) { .tr { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .45; } .trf { display: none; } .fly, .fly-say { display: none; } }
html:not(.js) .fly, html:not(.js) .fly-say { display: none; }
html:not(.js) .tr { stroke-dasharray: none; opacity: .45; }
.lp-scr.pan img { height: 100%; min-height: 0; transform: none; animation: pvpan 12s ease-in-out infinite alternate; object-fit: cover; }
.ri .float-card.fc-a { width: 34%; right: -2%; bottom: -10%; }
.ri .float-card.fc-b { width: 26%; left: 2%; top: -8%; }
.ri-dev .laptop.wide { position: relative; z-index: 1; }
.ri .float-card { z-index: 2; }
.float-card img { height: auto; }

/* ===================== revisión 11/11 ===================== */
/* --- portada --- */
.hero.off .col, .hero.off .sweep { animation-play-state: paused; }
.vignette { background: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(10,11,12,.66), rgba(10,11,12,.44) 55%, rgba(10,11,12,.92) 90%); }
.hero-sub, .hero-now, .h1-sub { text-shadow: 0 1px 18px rgba(0,0,0,.85); }
/* la luz se apaga al pasar por detrás del texto */
.trails { -webkit-mask-image: radial-gradient(ellipse 44% 38% at 50% 50%, transparent 0 55%, #000 100%); mask-image: radial-gradient(ellipse 44% 38% at 50% 50%, transparent 0 55%, #000 100%); }
.fly-say span { text-shadow: 0 2px 28px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7); }
.fd-ph:has(video) { margin-top: -146px; }

/* --- equipos con volumen: sombra que los apoya y un reflejo de vidrio --- */
.lp-scr, .pv-vid { position: relative; }
.lp-scr, .phone, .fd-ph, .fd-card, .pv-ph, .pv-vid, .float-card { border-color: #0d0f11;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04), 0 50px 90px -30px rgba(0,0,0,.9), 0 0 140px -40px rgba(255,214,120,.16); }
.lp-scr::after, .phone::after, .fd-ph::after, .fd-card::after, .pv-ph::after, .pv-vid::after, .float-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 30%, transparent 44%); mix-blend-mode: screen; }
.lp-base { position: relative; background: linear-gradient(#3b4046, #1b1e21 75%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 34px 40px -14px rgba(0,0,0,.85); }
.lp-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 5px; transform: translateX(-50%); background: #111316; border-radius: 0 0 6px 6px; }
/* videos 9:16 exactos dentro del marco (el borde no come los costados) */
.phone:has(video), .fd-ph:has(video) { aspect-ratio: auto; height: auto; }
.phone:has(video) > video, .fd-ph:has(video) video { aspect-ratio: 9 / 16; height: auto; }

/* --- recorrido --- */
.reel-stage { position: sticky; top: 0; }
html.js .reel { height: 670svh; }
.reel-h { top: 100px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.reel-items { counter-reset: ri; } .ri { counter-increment: ri; }
.ri-copy::before { content: counter(ri, decimal-leading-zero) "  /  06"; white-space: pre; display: block; margin-bottom: 18px; font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--neon); font-variant-numeric: tabular-nums; }
.ri-tag { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.reel-index li { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.ri[data-k="4"] .lp-scr.pan img { object-position: 0% 50%; transform: none; animation: hpan 14s ease-in-out infinite alternate; }
@keyframes hpan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.ri[data-k="4"] .float-card img { aspect-ratio: 1440 / 675; }
@media (min-width: 861px) {
  .ri-dev .laptop, .ri-dev .laptop.wide { width: min(88%, 820px, calc((100svh - 300px) * 1.5)); }
  .ri .float-card.fc-b { top: 2%; left: 0; }
  .ri:nth-child(even) { grid-template-columns: 1.6fr minmax(280px, 1fr); }
  .ri:nth-child(even) .ri-copy { order: 2; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .ri { padding-top: 140px; padding-bottom: 96px; }
  .ri-copy h3 { font-size: clamp(2.4rem, 1rem + 3.4vw, 4.4rem); }
}
/* sin animación (reducir movimiento o sin GSAP): el recorrido es una lista con los seis sistemas */
html:not(.js) .reel-stage { position: relative; height: auto; overflow: visible; }
html:not(.js) .reel-bgs, html:not(.js) .reel-shade, html:not(.js) .reel-index { display: none; }
html:not(.js) .reel-h { position: static; padding: 120px var(--m) 0; }
html:not(.js) .reel-items { position: static; }
html:not(.js) .ri { position: relative; inset: auto; opacity: 1; visibility: visible; min-height: 0; padding-block: 64px; }

/* --- servicios --- */
.cap { align-items: center; padding: 16px 0; }
@media (min-width: 861px) { .caps-list { padding-bottom: 16svh; } }
.caps-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 40px 100px -40px rgba(0,0,0,.9); }
.pv-lap { width: 100%; }
.pv-lap .lp-base { margin: 0 -3%; }
.pv-lap .lp-scr img { object-position: 0 0; transform-origin: 0 0; }
.pv-lap .lp-scr img.on { animation: pvzoom 9s ease-out both; }
@keyframes pvzoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.caps-frame .pv-lap { transform: perspective(1600px) rotateY(-12deg) rotateX(5deg); animation: lapsway 10s ease-in-out infinite alternate; }
@keyframes lapsway { to { transform: perspective(1600px) rotateY(-3deg) rotateX(2deg); } }
.pv-ph img { transition: transform .9s var(--ease), opacity .9s; z-index: 0; }
.pv-ph img.gone { z-index: 1; }
.pv-ph img.on { z-index: 2; }
.pv-ph img:not(.on):not(.gone) { transition: none; }
.pv-vid { aspect-ratio: auto; display: flex; }
.pv-vid video { height: 100%; width: auto; aspect-ratio: 9 / 16; }
[tabindex="-1"]:focus { outline: none; }

/* --- un solo fondo con luz suave, sin bandas grises --- */
.ch-caps, .ch-game, .ch-order { background: var(--bg); }
.ch > * { position: relative; } /* sin z-index: el juego a pantalla completa tiene que poder pasar por encima de la barra */
.ch-caps::before, .ch-game::before, .ch-order::before, .ch-videos::before, .ch-biz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 85% 25%, rgba(255,200,90,.06), transparent 70%), radial-gradient(45% 40% at 8% 90%, rgba(120,160,190,.04), transparent 70%); }
.ch-videos::before, .ch-biz::before {
  background: radial-gradient(55% 45% at 12% 25%, rgba(255,200,90,.06), transparent 70%), radial-gradient(45% 40% at 92% 90%, rgba(120,160,190,.04), transparent 70%); }
.o-main { background: linear-gradient(160deg, #16191c, #0e1012); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.o-ticket { background: radial-gradient(80% 60% at 50% 0%, rgba(217,189,136,.07), transparent 70%), #121417; }

/* --- cómo trabajamos: pasos con una línea de luz que avanza --- */
.how { position: relative; counter-reset: hf; }
.hf, .hf:nth-child(n) { background: transparent; min-height: 50svh; }
.how::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: var(--neon); box-shadow: none; transform-origin: left; transform: scaleX(var(--how, 0)); }
.hf-say::before { content: counter(hf, decimal-leading-zero); counter-increment: hf; display: block; margin-bottom: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--neon); }
html:not(.js) .how::before { transform: none; }

/* --- juego --- */
.game-name { line-height: 1.02; margin-top: 22px; }

/* --- negocios --- */
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--brass); margin-right: 6px; vertical-align: -1px; }
.lg-l { width: 16px; height: 2px; background: #e0806f; margin-left: 14px; vertical-align: 3px; }
.bb-line path { filter: drop-shadow(0 0 6px rgba(224,128,111,.8)); }
.dn-leg b { color: var(--dim); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* --- pie: contacto chico --- */
.foot { min-height: 0; padding-top: 72px; }
.foot-h { margin-top: 120px; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
.foot-mail { font-size: clamp(1.25rem, .9rem + 1.2vw, 2rem); letter-spacing: -0.03em; padding-bottom: 48px; }
.foot-mail span + span { color: var(--dim); }
.foot-meta a { display: inline-block; padding: 6px 2px; }

/* --- menú del celular --- */
.menu-btn { display: none; }

/* --- celular y tablet --- */
@media (max-width: 860px) {
  .grain { inset: 0; animation: none; }
  .bar { grid-template-columns: 1fr auto auto; gap: 4px; }
  .bar.solid { background: rgba(10, 11, 12, .97); }
  .bar-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; margin-right: -10px; }
  .bar-cta::after { display: none; }
  .menu-btn { all: unset; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 600; font-size: .9375rem; cursor: pointer; }
  .menu-btn:focus-visible { outline: 2px solid var(--brass); }
  .bar nav { display: flex; position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 4px; padding: 0 var(--m); background: var(--bg); font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .bar nav a { padding: 6px 0; }
  .bar nav a::after { display: none; }
  .bar.menu-on nav { opacity: 1; visibility: visible; }

  /* portada */
  .trails { -webkit-mask-image: radial-gradient(ellipse 75% 42% at 50% 50%, transparent 35%, #000 80%); mask-image: radial-gradient(ellipse 75% 42% at 50% 50%, transparent 35%, #000 80%); }

  /* recorrido */
  .reel-h { top: 76px; font-size: .75rem; }
  .ri { grid-template-rows: auto auto; align-content: center; padding-top: 120px; }
  .reel-index { bottom: 14px; }
  .reel-index li { padding-top: 0; font-size: 0; }
  .reel-index button { height: 36px; }
  .reel-index li::before, .reel-index li::after { top: 16px; pointer-events: none; }
  .ri[data-k="2"] .lp-scr, .ri[data-k="4"] .lp-scr { aspect-ratio: 4 / 3; }
  .ri[data-k="2"] .lp-scr img { object-position: 0 0; }
  .lp-scr { border-width: 5px; border-bottom-width: 7px; border-radius: 10px 10px 3px 3px; }
  .lp-base { height: 10px; margin: 0 -4%; }

  /* servicios */
  .cap-inline { height: auto; max-height: none; padding: 18px 0; }
  .cap-inline .pv { height: auto; }
  .cap-inline .pv-ph, .cap-inline .pv-vid { height: min(70svh, 540px); }
  .cap-inline .pv-kb, .cap-inline .pv-game { height: auto; aspect-ratio: 4/3; }
  .cap-inline .pv-prod { height: auto; padding: 0 12px; }
  .cap-inline .pv-lap { width: 88%; }

  /* cómo */
  .hf, .hf:nth-child(n) { min-height: 0; }
  .how::before { display: none; }

  /* pie */
  .foot-h { margin-top: 96px; }
  .foot-meta a { padding: 12px 4px; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .phone { width: min(40vw, 26svh); }
  .phone:has(video) { width: min(41vw, 27svh); }
}

.reel-index li::before, .reel-index li::after { pointer-events: none; }
html:has(.game-frame.full) { overflow: hidden; }
.game-frame.full { background: #0a0b0c; }
.game-frame.full picture, .game-frame.full .game-poster { display: none; }
/* titulares que no pasen de dos líneas */
@media (min-width: 861px) { .game { grid-template-columns: minmax(340px, .95fr) 1.25fr; } }
@media (max-width: 860px) {
  .grow-h { font-size: 10.5vw; }
  .grow-h .gw { white-space: nowrap; }
  .fly-say { font-size: 1.5rem; }
}
.ch-game .h-l { font-size: clamp(2.5rem, 1rem + 3.6vw, 4.6rem); }
.fm-tick span { font-size: 13px; }

/* ===================== vuelta 2 (pedidos de Martín) ===================== */
/* --- texto sin palabras sueltas --- */
h1, h2, h3, .h1-sub, .game-name, .hf h3 { text-wrap: balance; }
p, .lead, .gcap { text-wrap: pretty; }
.cap-note, .vr-note { text-wrap: balance; }
.h1-sub { max-width: 22ch; margin-inline: auto; margin-top: 22px; }
html.js .h1-sub { opacity: 0; }

/* --- portada: el borde de abajo se funde con el fondo (sin corte al soltarse) --- */
.hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16svh; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(10,11,12,0), var(--bg)); }
.scroll-hint, .hero-copy, .fly-say { z-index: 3; }

/* --- vuelo: cada equipo en su lugar, calculado en main.js (nada se pisa) --- */
.fly { transform-style: flat; }
.fly .fd.fd { margin: 0; }
.fly .fd.off { display: none; }
.fd-ph { width: 150px; }
.fd-lap { width: 360px; }
.fd-vid { aspect-ratio: auto !important; }
.fd-vid video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.fly-say { line-height: 1.22; }
@media (max-width: 860px) { .fd-ph { border-width: 5px; border-radius: 16px; } }

/* --- recorrido --- */
.ri-cta { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: rgba(235,232,225,.4); text-underline-offset: 5px; padding-block: 6px; }
.ri-cta:hover { text-decoration-color: var(--brass-2); color: var(--brass-2); }
.ri-copy .ri-cta { display: table; }
.ri[data-k="3"] .ri-copy h3 { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.8rem); }
.reel-index button { padding-block: 8px; margin-block: -8px; }
.bar nav a, .bar-cta { padding-block: 6px; }
@media (max-width: 860px) {
  .ri[data-k="3"] .ri-copy h3 { font-size: 10vw; }
  .ri-cta { margin-top: 6px; font-size: .9375rem; }
  /* el botón de WhatsApp no tapa el último tramo del índice */
  .reel-index { right: calc(var(--m) + 64px); }
}
/* teléfonos bajos (iPhone SE/8): los equipos no tapan el texto */
@media (max-width: 860px) and (max-height: 740px) {
  .ri { padding-top: 100px; padding-bottom: 64px; gap: 14px; }
  .ri-copy h3, .ri[data-k="3"] .ri-copy h3 { font-size: 10vw; }
  .ri-copy p { font-size: .9375rem; margin-top: 8px; }
  .ri-copy::before { margin-bottom: 10px; }
  .phone { width: min(36vw, 28svh); }
  .phone:has(video) { width: min(36vw, 25svh); }
  .laptop.wide { width: 84%; margin-inline: auto; }
  .tilt-r { transform: rotateY(-8deg) translateY(8px); }
}

/* --- carruseles táctiles (servicios y estilos) --- */
.car-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.car-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(235,232,225,.22); color: var(--text); transition: background-color .2s, border-color .2s; }
.car-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-btn:hover { background: rgba(235,232,225,.08); }
.car-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.car-dots { display: flex; gap: 6px; }
.car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(235,232,225,.25); transition: background-color .3s, width .3s; }
.car-dots i.on { width: 18px; border-radius: 3px; background: var(--brass-2); }
.car-count { min-width: 12ch; text-align: center; font-size: .9375rem; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.caps-car, .est-car { display: none; }
/* los carriles horizontales no estiran la página: sus contenedores pueden achicarse */
.caps, .vid { min-width: 0; }
.caps-list, .vid-list, .caps-car, .est-car, .caps-track, .est-track { min-width: 0; }
@media (max-width: 860px) { .caps { grid-template-columns: minmax(0, 1fr); } .vid > * { min-width: 0; } }

/* --- todo lo que hacemos: carrusel en celular y tablet --- */
@media (max-width: 860px) {
  .caps-list:has(.caps-car) .caps-rows { display: none; }
  .caps-car { display: block; margin: 0 calc(var(--m) * -1); }
  .caps-list .h-l { margin-bottom: 24px; }
  .caps-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 var(--m) 4px; scroll-padding-inline: var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .caps-track::-webkit-scrollbar { display: none; }
  .cc { flex: 0 0 84%; scroll-snap-align: center; display: flex; flex-direction: column; opacity: .5; transition: opacity .35s; }
  .cc.on { opacity: 1; }
  .cc-stage { height: min(52svh, 440px); border-radius: 12px; overflow: hidden; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 40%, #1a1d21, #0c0d0e 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
  .cc-stage .pv { width: 100%; height: 100%; }
  .cc-stage .pv-lap { width: 100%; }
  .cc-stage .pv-kb, .cc-stage .pv-game { border-radius: 8px; }
  .cc-stage .pv-prod { gap: 8px; }
  .cc-name { margin-top: 14px; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--brass-2); }
  .cc-note { margin-top: 6px; color: var(--dim); font-size: 1rem; line-height: 1.35; }
}
@media (min-width: 600px) and (max-width: 860px) { .cc { flex-basis: 62%; } .cc-stage { height: min(48svh, 480px); } }

/* --- estilos de video --- */
@media (min-width: 861px) {
  .ch-videos { padding-block: 120px; }
  .vid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "list stage" "list cta"; align-items: center; column-gap: 5vw; row-gap: 18px; }
  .vid-list { grid-area: list; }
  .vid-stage { grid-area: stage; align-self: end; }
  .vid-cta { grid-area: cta; justify-self: center; align-self: start; }
  .ch-videos .h-l { font-size: clamp(2.4rem, 1rem + 3vw, 4.4rem); }
  .vid-list .lead { margin: 18px 0 22px; }
  /* la lista entera entra en una pantalla: se elige sin subir ni bajar */
  .vrow { padding: 7px 0; }
  .vr-name { font-size: clamp(1.35rem, .7rem + 1.25vw, 2.1rem); line-height: 1.05; }
  .vr-note { font-size: .9375rem; color: var(--dim); }
  .vrow.is-on .vr-note { color: var(--text); }
  .phone.big.est-phone { width: min(100%, 330px, calc((100svh - 230px) * .5625 + 18px)); }
}
.vid-cta { justify-self: center; }
@media (max-width: 860px) {
  .vid { display: flex; flex-direction: column; align-items: stretch; }
  .vid:has(.est-car:not([hidden])) .vrows, .vid:has(.est-car:not([hidden])) .vid-stage { display: none; }
  .vid-list .lead { margin: 16px 0 22px; font-size: 1.0625rem; }
  .est-car { display: block; margin: 0 calc(var(--m) * -1); }
  .est-car[hidden] { display: none; }
  .est-track { --sw: min(58vw, calc(52svh * .5625 + 12px), 300px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 6px calc(50% - var(--sw) / 2) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .est-track::-webkit-scrollbar { display: none; }
  .es { flex: 0 0 var(--sw); scroll-snap-align: center; text-align: center; opacity: .45; transform: scale(.94); transition: opacity .35s, transform .35s var(--ease); }
  .es.on { opacity: 1; transform: none; }
  .phone.es-ph { width: 100%; aspect-ratio: auto; height: auto; border-width: 6px; border-radius: 13% / 6%; background: #0c0d0e; }
  .es-name { margin-top: 12px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
  .es-note { margin-top: 2px; font-size: .875rem; color: var(--dim); line-height: 1.3; }
  .est-car .car-count { display: none; }
  .vid-cta { margin-top: 22px; align-self: center; }
}

/* --- cómo trabajamos: cuatro pasos, sobrio y claro --- */
.ch-how { padding: 160px var(--m); }
.how-h { margin-bottom: 56px; }
.how { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; counter-reset: none; }
.how::before { display: none; }
.hf, .hf:nth-child(n) { min-height: 0; padding: 24px 0 0; background: none; border-top: 1px solid rgba(235,232,225,.16); display: block; }
.hf-n { display: block; font-size: .875rem; font-weight: 600; letter-spacing: .14em; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.hf h3 { margin-top: 28px; font-size: clamp(1.375rem, 1rem + .9vw, 1.875rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 14ch; }
.hf p { margin-top: 12px; color: var(--dim); max-width: 30ch; }
@media (min-width: 600px) and (max-width: 860px) { .how { grid-template-columns: 1fr 1fr; gap: 40px 28px; } }
@media (max-width: 599px) {
  .how { grid-template-columns: 1fr; gap: 0; }
  .hf, .hf:nth-child(n) { display: grid; grid-template-columns: 44px 1fr; align-content: start; gap: 0; padding: 20px 0; }
  .hf-n { grid-row: span 2; padding-top: 4px; }
  .hf h3 { margin-top: 0; font-size: 1.375rem; max-width: none; }
  .hf p { margin-top: 6px; font-size: 1rem; }
}

/* --- negocios: detalles --- */
.ba-fm img { object-position: 92% 38%; transform-origin: 90% 40%; }
.bz .ri-cta { margin-top: 14px; }
@media (min-width: 600px) and (max-width: 860px) {
  .biz { grid-template-columns: 1fr 1fr; gap: 20px; }
  .bz:last-child { grid-column: 1 / -1; }
  .bz:last-child .bz-anim { aspect-ratio: 16 / 8; }
}

/* --- pedido --- */
@media (min-width: 861px) {
  .order { align-items: start; }
  .o-ticket { position: sticky; top: 96px; }
}
.o-field small { font-weight: 400; color: var(--dim); }
.o-field input, .o-field textarea { font: inherit; font-weight: 400; padding: 14px 16px; border: 0; border-radius: 6px; background: var(--bg); color: var(--text); }
.o-field textarea { resize: vertical; min-height: 92px; line-height: 1.4; }
.o-field input::placeholder, .o-field textarea::placeholder { color: #7d7a73; }
.o-form input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(235,232,225,.4); display: grid; place-content: center; transition: background-color .15s, border-color .15s; }
.o-form input[type=checkbox]::before { content: ""; width: 10px; height: 10px; background: var(--brass-2); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .18s var(--ease); }
.o-form input[type=checkbox]:checked { background: var(--bg); border-color: var(--bg); }
.o-form input[type=checkbox]:checked::before { transform: scale(1); }
.o-form input[type=checkbox]:focus-visible { outline: none; }
.o-form fieldset label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
.btn-wa { background: #25d366; color: #06210f; }
.btn-wa:hover { background: #3ee07a; }
.wa-ico { width: 20px; height: 20px; flex: none; }
.o-acts { width: 100%; }
@media (max-width: 860px) {
  .o-ticket { align-items: stretch; padding: 28px 20px; }
  .ticket { width: 100%; }
  .o-acts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .o-acts .btn { width: 100%; justify-content: center; padding-block: 16px; }
}

/* --- pie: contacto chico, WhatsApp primero --- */
.foot-h { margin-top: 72px; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-bottom: 40px; }
.foot-cta .foot-mail { padding-bottom: 0; font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem); }
.foot-wa { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #25d366; color: #06210f; font-weight: 700; text-decoration: none; transition: background-color .2s; }
.foot-wa:hover { background: #3ee07a; }
.foot-meta { align-items: baseline; }
.bar-cta.on::after { transform: scaleX(1); }
.ch-order { padding-bottom: 110px; }

/* --- botón flotante de WhatsApp --- */
.wa-float { position: fixed; z-index: 56; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s var(--ease), opacity .3s, visibility .3s; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.06); }
.wa-float:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
html.menu-open .wa-float, html:has(.game-frame.full) .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 860px) {
  .wa-float { width: 52px; height: 52px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .wa-float svg { width: 26px; height: 26px; }
  .foot { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* --- barra en el celular: el llamado se ve como botón --- */
@media (max-width: 860px) {
  .bar-cta { min-height: 38px; padding: 0 14px; margin: 0 0 0 6px; border-radius: 2px; background: var(--brass); color: var(--bg); font-size: .875rem; }
  .menu-btn { padding: 0 8px; }
}

/* --- celular: menos negro entre secciones --- */
@media (max-width: 860px) {
  .ch-caps, .ch-videos, .ch-game, .ch-biz, .ch-order, .ch-how { padding-block: 72px; }
  .ch-grow { padding: 12vh var(--m) 10vh; }
  .game-frame { aspect-ratio: 1 / 1; }
  .game-poster { object-position: 50% 100%; }
  .game-copy .ri-cta { margin-top: 12px; }
}

/* --- tocar no deja el "hover" pegado --- */
@media (hover: none) {
  .cap:hover, .vrow:hover, .o-form fieldset label:hover, .btn:hover { transform: none; }
  .btn:hover { background: var(--text); } .btn.ghost:hover { background: rgba(235,232,225,.1); } .btn-wa:hover { background: #25d366; }
  .game-play:hover { transform: translate(-50%, -50%); background: var(--brass); }
}
/* portada en teléfonos bajos: todo entra debajo de la barra */
@media (max-width: 860px) and (max-height: 740px) {
  .hero-title { font-size: 15vw; }
  .h1-sub { margin-top: 12px; font-size: 1.125rem; }
  .hero-sub { margin-top: 14px; font-size: .9375rem; }
  .hero-now { margin-top: 12px; }
  .hero-act { margin-top: 18px; }
  .scroll-hint { display: none; }
}
/* compu: los diez estilos en dos columnas, todo en una pantalla */
@media (min-width: 861px) {
  .vrows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .vrow { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 9px 0; }
  .vr-note { text-align: left; max-width: 26ch; font-size: .875rem; line-height: 1.3; }
  .vrow:hover { transform: translateX(6px); }
}
.foot { padding-bottom: 96px; }
@media (min-width: 861px) and (max-height: 800px) {
  .ch-videos { padding-block: 96px; }
  .ch-videos .h-l { font-size: clamp(2.2rem, 1rem + 2.4vw, 3.6rem); }
  .vid-list .lead { font-size: 1.125rem; margin: 12px 0 14px; }
  .vrow { padding: 5px 0; }
  .vr-name { font-size: clamp(1.25rem, .7rem + 1vw, 1.75rem); }
}
/* los equipos del recorrido no se salen de la pantalla */
.ri .float-card.fc-a { right: 0; }
@media (max-width: 860px) {
  .ri .float-card.fc-a { right: 0; }
  .ri-copy .ri-cta { display: inline-block; margin: 0 0 0 14px; padding-block: 4px; }
}
.bz-legal { margin-top: 10px; font-size: .8125rem; color: var(--dim); max-width: 38ch; }

/* --- "Ver más": enlaces a la página de cada servicio --- */
.caps-rows li { display: flex; flex-direction: column; }
.cap-more, .cc-more, .ri-more { font-weight: 600; font-size: .9375rem; color: var(--brass-2); text-decoration: underline; text-decoration-color: rgba(217,189,136,.4); text-underline-offset: 5px; padding-block: 6px; transition: color .2s, text-decoration-color .2s; }
.cap-more:hover, .cc-more:hover, .ri-more:hover { color: var(--text); text-decoration-color: var(--brass-2); }
.cap-more { align-self: flex-end; margin: -8px 0 6px; }
.cc-more { align-self: flex-start; margin-top: 8px; }
.ri-acts { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; }
.ri-acts .ri-more { margin-top: 18px; }
.bz > .ri-more { display: inline-block; margin-top: 14px; }
.vid-more { display: inline-block; margin: -8px 0 18px; }
@media (max-width: 860px) {
  .ri-acts .ri-more { margin-top: 6px; }
  .vid-more { margin: 0 0 14px; }
}

/* ===================== vuelta 1 ===================== */
/* negocios: captura real y bloque tipográfico (sin gráficos inventados ni carteras con porcentajes) */
.ba-shot { padding: 0; justify-content: flex-end; }
.ba-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; filter: brightness(.9); }
.ba-shot small { position: relative; margin: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(10,11,12,.9)); color: var(--text); }
.ba-type { justify-content: center; }
.ba-type p { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; color: var(--brass-2); }
.ba-type small { margin-top: 18px; }
/* el botón flotante se esconde donde ya hay un WhatsApp grande */
.wa-float.wa-off { opacity: 0; visibility: hidden; pointer-events: none; }
/* celular: barra fija para mandar el pedido */
.o-bar { position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 57; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
@media (min-width: 861px) { .o-bar { display: none !important; } }
/* el menú abierto no deja mover la página de atrás */
html.menu-open, html.menu-open body { overflow: hidden; touch-action: none; }
/* celular: enlaces fáciles de tocar con el pulgar */
@media (max-width: 860px) {
  .ri-cta, .ri-more, .cc-more, .cap-more, .ri-copy .ri-cta { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .ri-acts { column-gap: 26px; }
  .ri-acts .ri-more { margin-top: 0; }
  html.js .reel { height: 600svh; }
  .car-ctrl { padding-inline: 64px; }
}
.o-copied { margin-top: 12px; font-size: .875rem; color: var(--dim); }