/* GuestTap Inmersivo — el visor gira, se acerca, se pone y se ve el lodge por dentro. Todo va con el scroll (sin frenar la rueda). */
:root {
  --bg: #07100e; --ink: #f4efe6; --ink-2: #b9b3a8; --line: rgba(255, 255, 255, .12); --card: rgba(255, 255, 255, .035);
  --tan: #e2c296; --coral: #c8632f; --shell: #f2f0ec; --shell-2: #d9d5ce; --edge: #3a3d40; --green: #1f3a2c;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.1; }
a { color: var(--tan); }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.wrap.narrow { width: min(760px, calc(100% - 32px)); }
.center { text-align: center; }
.eyebrow { margin: 0 0 14px; color: var(--tan); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: linear-gradient(rgba(7, 16, 14, .75), transparent); transition: background .3s; }
.nav.solid { background: rgba(7, 16, 14, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand img { height: 26px; width: auto; display: block; }
.nav-r { display: flex; align-items: center; gap: 8px; }
.tag { font-size: 12.5px; font-weight: 700; color: var(--tan); border: 1px solid rgba(226, 194, 150, .4); border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 700; }
.pill:hover { background: rgba(255, 255, 255, .12); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq b { width: 3px; height: 4px; border-radius: 2px; background: currentColor; opacity: .6; }
.snd[aria-pressed=true] { border-color: rgba(226, 194, 150, .55); color: var(--tan); }
.snd[aria-pressed=true] .eq b { opacity: 1; animation: eq .9s ease-in-out infinite alternate; }
.snd[aria-pressed=true] .eq b:nth-child(2) { animation-delay: -.3s; } .snd[aria-pressed=true] .eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
@media (max-width: 560px) { .tag { display: none; } }

/* ---------- el escenario fijo ---------- */
.vr { position: relative; height: 900vh; }
.vr-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 30%, #17302a 0%, #0b1714 55%, var(--bg) 100%); }

.stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; perspective-origin: 50% 45%; }
.hs { --w: min(62vw, 440px, 48vh); --h: calc(var(--w) * .56); --d: calc(var(--w) * .3);
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: translateY(var(--ty, 0px)) rotateX(var(--rx, 12deg)) rotateY(var(--ry, -28deg)) scale(var(--s, 1)); will-change: transform; }
.hs-body, .hs-front, .hs-back { position: absolute; inset: 0; border-radius: 30% / 44%; }
.hs-body { transform-style: preserve-3d; }
.hs-body i { position: absolute; inset: 0; border-radius: inherit; background: var(--edge); }
.hs-front { transform: translateZ(calc(var(--d) / 2)); backface-visibility: hidden; overflow: hidden;
  background: radial-gradient(90% 120% at 35% 20%, #fff 0%, var(--shell) 45%, var(--shell-2) 100%);
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .14), inset 0 6px 14px rgba(255, 255, 255, .9); }
.sweep { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: calc(var(--sweep, 0) * 100%) 0; mix-blend-mode: screen; opacity: .45; }
.cam { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #555 0 18%, #111 40%); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.c1 { left: 9%; top: 30%; } .c2 { right: 9%; top: 30%; } .c3 { left: 20%; bottom: 14%; width: 5%; } .c4 { right: 20%; bottom: 14%; width: 5%; }
.hs-logo { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; opacity: .5;
  background: url(/assets/guesttap-mark.svg) center / contain no-repeat; filter: grayscale(1); }
.hs-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); backface-visibility: hidden; background: #222; overflow: hidden;
  box-shadow: inset 0 0 0 calc(var(--w) * .035) #2c2c2c; }
.foam { position: absolute; inset: 7%; border-radius: 30% / 46%; background: radial-gradient(100% 100% at 50% 40%, #121212 55%, #1d1d1d 100%); box-shadow: inset 0 0 30px #000; }
.lens { position: absolute; top: 22%; width: 31%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(160, 210, 255, .55) 0 6%, transparent 14%),
              radial-gradient(circle at 50% 50%, #0a1420 0 46%, #1b2a3a 62%, #050505 70%, #3a3a3a 72%, #111 76%);
  box-shadow: 0 0 calc(var(--glow, 0) * 40px) calc(var(--glow, 0) * 8px) rgba(120, 190, 255, .35); }
.lens.l { left: 13%; } .lens.r { right: 13%; }
.nose { position: absolute; left: 50%; bottom: -4%; width: 20%; height: 30%; translate: -50% 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; background: #0a0a0a; }
/* correas: salen de los costados hacia atrás; se esconden cuando el visor se acerca a la cara */
.strap { position: absolute; top: 34%; height: 32%; width: calc(var(--d) * 1.5); border-radius: 10px; background: linear-gradient(#34383c, #1f2224); opacity: var(--strap, 1); }
.strap.l { left: 0; transform-origin: left center; transform: rotateY(90deg); }
.strap.r { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.floor { position: absolute; left: 50%; top: calc(50% + min(18vw, 130px, 14vh)); width: min(50vw, 360px); height: 40px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); opacity: var(--floor, 1); filter: blur(4px); }

/* videos opcionales (Google Flow) */
.clip { position: absolute; inset: 0; display: none; pointer-events: none; }
.clip.has { display: block; }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip.intro { opacity: var(--ci, 0); }
.clip.outro { opacity: var(--co, 0); }
.clip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(7, 16, 14, .75)); }

/* ---------- textos que entran y salen ---------- */
.copy { position: absolute; left: 0; right: 0; padding: 0 20px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .35s, translate .35s; translate: 0 12px; }
.copy.on { opacity: 1; translate: 0 0; }
.copy.on .btn-snd { pointer-events: auto; }
.copy h1 { font-size: clamp(36px, 5.4vw, 72px); font-weight: 800; }
.copy h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 800; }
.copy p { color: var(--ink-2); margin: 14px 0 0; }
.c-a { top: 11vh; } .c-b { bottom: 12vh; }
.c-end { top: 50%; translate: 0 calc(-50% + 12px); } .c-end.on { translate: 0 -50%; }
.btn-snd { margin-top: 14px; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(226, 194, 150, .5); background: rgba(226, 194, 150, .1); color: var(--tan); font-size: 14px; font-weight: 700; }
.btn-snd[hidden] { display: none; }
.book { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; color: #1d2a26; text-align: left; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); pointer-events: auto; }
.book img { width: 64px; height: 64px; }
.book b { display: block; font-size: 16px; }
.book span { font-size: 13.5px; color: #5b6763; }

.black { position: absolute; inset: 0; background: #000; opacity: var(--black, 0); display: grid; place-items: center; pointer-events: none; }
.breathe { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
  opacity: var(--breathe, 0); scale: calc(.96 + var(--breathe, 0) * .06); }

/* ---------- dentro del visor: dos lentes que se abren hasta llenar la pantalla ---------- */
.inside { position: absolute; inset: 0; visibility: hidden; }
.inside.on { visibility: visible; }
.view { position: absolute; inset: 0; overflow: hidden; background: #000;
  -webkit-mask: radial-gradient(circle at 32% 50%, #000 calc(var(--r) * 1vmax), transparent calc(var(--r) * 1vmax + 4vmax)),
                radial-gradient(circle at 68% 50%, #000 calc(var(--r) * 1vmax), transparent calc(var(--r) * 1vmax + 4vmax));
          mask: radial-gradient(circle at 32% 50%, #000 calc(var(--r) * 1vmax), transparent calc(var(--r) * 1vmax + 4vmax)),
                radial-gradient(circle at 68% 50%, #000 calc(var(--r) * 1vmax), transparent calc(var(--r) * 1vmax + 4vmax)); }
.view::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 18vmax 4vmax rgba(0, 0, 0, .85); }
/* mirar alrededor: mouse en computadora, girar el teléfono en celular */
.look { position: absolute; inset: -4%; transform: translate(calc(var(--lx, 0) * -3vw), calc(var(--ly, 0) * -2.5vh)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.pano { position: absolute; top: 0; left: 0; height: 100%; width: 190vw; max-width: none; object-fit: cover;
  transform: translateX(calc(var(--pan, 0) * -82vw)) scale(1.06); filter: saturate(calc(1 + var(--heat, 0) * .25)) brightness(calc(1 - var(--rain, 0) * .18)); }
.hud { position: absolute; top: 78px; left: 0; right: 0; display: flex; justify-content: center; gap: 28px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); opacity: var(--hud, 0); }
.boot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 18px 22px; list-style: none; border-radius: 14px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; opacity: var(--boot, 0); white-space: nowrap; }
.boot li { opacity: .25; transition: opacity .25s; padding: 3px 0; }
.boot li::before { content: '○'; display: inline-block; width: 22px; color: var(--tan); }
.boot li.on { opacity: 1; }
.boot li.on::before { content: '✓'; }

.fx { position: absolute; inset: 0; pointer-events: none; }
.rain { opacity: var(--rain, 0); background:
  repeating-linear-gradient(104deg, transparent 0 22px, rgba(220, 235, 255, .28) 22px 23px, transparent 23px 47px),
  repeating-linear-gradient(100deg, transparent 0 37px, rgba(220, 235, 255, .18) 37px 38px, transparent 38px 71px);
  background-size: 240px 420px, 300px 520px; animation: rain .45s linear infinite; }
@keyframes rain { to { background-position: -60px 420px, -80px 520px; } }
.wind { opacity: var(--wind, 0); }
.wind i { position: absolute; left: -30%; height: 2px; width: 26%; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: gust 1.5s linear infinite; }
.wind i:nth-child(1) { top: 16%; } .wind i:nth-child(2) { top: 29%; animation-delay: .5s; width: 34%; }
.wind i:nth-child(3) { top: 41%; animation-delay: 1.1s; } .wind i:nth-child(4) { top: 53%; animation-delay: .25s; width: 20%; }
.wind i:nth-child(5) { top: 63%; animation-delay: .8s; } .wind i:nth-child(6) { top: 72%; animation-delay: 1.35s; width: 30%; }
.wind i:nth-child(7) { top: 22%; animation-delay: .95s; width: 16%; } .wind i:nth-child(8) { top: 82%; animation-delay: .4s; }
.wind i:nth-child(9) { top: 35%; animation-delay: 1.25s; width: 22%; } .wind i:nth-child(10) { top: 47%; animation-delay: .65s; width: 28%; }
@keyframes gust { to { transform: translateX(560%); } }
.scent { opacity: var(--smell, 0); }
.haze { position: absolute; inset: 0; background:
  radial-gradient(30% 24% at 30% 72%, rgba(150, 95, 45, .55), transparent 70%),
  radial-gradient(28% 22% at 64% 62%, rgba(120, 80, 40, .5), transparent 70%),
  radial-gradient(22% 18% at 48% 82%, rgba(190, 140, 80, .45), transparent 70%);
  filter: blur(18px); animation: drift 6s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-3%, 4%) scale(1); } to { transform: translate(4%, -6%) scale(1.15); } }
.scent i { position: absolute; bottom: 8%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 220, 170, .65); filter: blur(3px); animation: rise 5s ease-in infinite; }
.scent i:nth-child(2) { left: 22%; } .scent i:nth-child(3) { left: 34%; animation-delay: 1.2s; } .scent i:nth-child(4) { left: 46%; animation-delay: 2.6s; }
.scent i:nth-child(5) { left: 55%; animation-delay: .6s; } .scent i:nth-child(6) { left: 63%; animation-delay: 3.3s; } .scent i:nth-child(7) { left: 71%; animation-delay: 1.9s; }
.scent i:nth-child(8) { left: 40%; animation-delay: 4s; } .scent i:nth-child(9) { left: 28%; animation-delay: 3s; }
@keyframes rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(30px, -55vh) scale(1.8); opacity: 0; } }
.note { position: absolute; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #fff; padding: 6px 12px; border-radius: 99px;
  background: rgba(60, 35, 15, .45); border: 1px solid rgba(255, 220, 170, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: bob 4s ease-in-out infinite alternate; }
.n1 { left: 18%; top: 30%; } .n2 { left: 60%; top: 24%; animation-delay: -1.3s; } .n3 { left: 38%; top: 46%; animation-delay: -2.6s; }
@keyframes bob { to { transform: translateY(-14px); } }
.taste { opacity: var(--taste, 0); background: radial-gradient(60% 50% at 50% 100%, rgba(107, 63, 38, .55), transparent 70%); }
.heat { opacity: var(--heat, 0); background: radial-gradient(70% 55% at 70% 0%, rgba(255, 170, 60, .55), transparent 70%), linear-gradient(rgba(255, 140, 40, .12), rgba(255, 140, 40, .12)); mix-blend-mode: screen; }

/* ---------- los sentidos, uno a la vez ---------- */
.senses { position: absolute; left: 50%; bottom: calc(max(5vh, 22px) + 34px); width: min(540px, calc(100% - 32px)); translate: -50% 0; margin: 0; padding: 0; list-style: none; }
.senses li { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px 16px 64px; border-radius: 16px; background: rgba(8, 14, 12, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.45; opacity: 0; translate: 0 14px; transition: opacity .35s, translate .35s; }
.senses li.on { opacity: 1; translate: 0 0; }
.senses b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 2px; }
.senses em { float: right; margin: 2px 0 0 10px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tan); border: 1px solid rgba(226, 194, 150, .35); border-radius: 99px; padding: 2px 9px; }
.senses li::before { content: ''; position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; background: var(--tan);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.senses [data-k=see] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.senses [data-k=hear] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2'/%3E%3C/svg%3E"); }
.senses [data-k=wind] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 12h16a3 3 0 1 1-3 3M3 16h8'/%3E%3C/svg%3E"); }
.senses [data-k=smell] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 21c-2-3 2-5 0-8s2-5 0-8M12 21c-2-3 2-5 0-8s2-5 0-8M16 21c-2-3 2-5 0-8s2-5 0-8'/%3E%3C/svg%3E"); }
.senses [data-k=taste] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M6 9h12M6 15h12M12 3v18'/%3E%3C/svg%3E"); }
.senses [data-k=heat] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }

/* ---------- capítulos y salto ---------- */
.skip { position: absolute; top: 76px; right: 16px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink-2); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.skip:hover { color: var(--ink); }
.chap { position: absolute; left: 50%; bottom: max(2.5vh, 12px); width: min(720px, calc(100% - 32px)); translate: -50% 0; }
.chap .bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.chap .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--tan); }
.chap ol { position: relative; height: 20px; margin: 6px 0 0; padding: 0; list-style: none; }
.chap li { position: absolute; left: calc(var(--at) * 100%); translate: -50% 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .35); transition: color .3s; white-space: nowrap; }
.chap li:first-child { translate: 0 0; } .chap li:last-child { translate: -100% 0; }
.chap li.on { color: var(--tan); }
@media (max-width: 560px) { .chap li:not(.on) { opacity: 0; } }

/* ---------- debajo: dónde vende, firma sensorial, viaje, pruebas ---------- */
.sec { padding: 110px 0; border-top: 1px solid var(--line); }
.h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; }
.sub { color: var(--ink-2); font-size: 18px; margin: 18px 0 0; max-width: 36em; }
.center .sub { margin-left: auto; margin-right: auto; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--tan); background: rgba(226, 194, 150, .1); border-radius: 99px; padding: 4px 12px; }
.fine { font-size: 13.5px; color: rgba(255, 255, 255, .5); margin-top: 14px; }

.use { border: 1px solid var(--line); border-radius: 22px; background: var(--card); padding: 30px; }
.use h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 14px 0 10px; }
.use p { color: var(--ink-2); margin: 0; }
.main-use { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; margin-top: 40px; padding: 40px; }
.flow { counter-reset: f; list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.flow li { counter-increment: f; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.flow li::before { content: counter(f); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tan); color: #1a120a; font-weight: 800; font-size: 14px; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 15.5px; }
.ticks li::before { content: '✓'; color: var(--tan); font-weight: 800; margin-right: 10px; }
.ticks b { color: var(--ink); }
.calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.calc div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.calc b { display: block; font-size: 22px; }
.calc span { font-size: 13px; color: var(--ink-2); line-height: 1.35; display: block; }
.use-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

/* la app del huésped, dibujada (es un ítem más: sin costo y le llega a recepción) */
.duo { position: relative; justify-self: center; padding: 10px 40px 10px 0; }
.phone { width: 290px; aspect-ratio: 600 / 1240; border: 10px solid #0b0f0e; border-radius: 44px; background: #faf8f3; color: #1d2a26; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; }
.ph-top { display: flex; justify-content: space-between; align-items: center; padding: 30px 16px 8px; font-size: 14px; }
.ph-top span { width: 16px; font-size: 20px; line-height: 1; }
.ph-img { position: relative; height: 30%; flex: none; margin: 0 12px; border-radius: 16px; background: url(/assets/video/ecolodge.jpg) center / cover; }
.vr-badge { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: #fff; color: var(--green); border-radius: 8px; padding: 3px 8px; }
.ph-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ph-title { font-size: 17px; letter-spacing: -.01em; }
.ph-price { color: var(--green); font-weight: 800; }
.ph-body p { margin: 0; color: #5b6763; }
.ph-lbl { font-weight: 700; margin-top: 4px; font-size: 12px; }
.ph-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-opts span { padding: 5px 10px; border-radius: 99px; border: 1px solid #ddd6c8; font-size: 12px; }
.ph-opts .on { background: var(--green); border-color: var(--green); color: #fff; }
.ph-opts .off { color: #a9a395; text-decoration: line-through; background: #f0ece3; }
.ph-note { font-size: 11.5px; color: #7b847f; }
.ph-btn { margin-top: auto; text-align: center; padding: 12px; border-radius: 14px; background: var(--green); color: #fff; font-weight: 800; }
.toast { position: absolute; right: -10px; top: 70px; display: flex; gap: 10px; align-items: center; width: 250px; padding: 12px 14px; border-radius: 16px; background: #fff; color: #1d2a26; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0; translate: 0 16px; transition: opacity .5s .3s, translate .5s .3s; }
.toast.in { opacity: 1; translate: 0 0; }
.toast i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 4px rgba(47, 163, 107, .2); }
.toast b { display: block; font-size: 13px; } .toast span { font-size: 12.5px; color: #5b6763; }

.firma-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; margin-top: 40px; }
.card { border: 1px solid var(--line); border-radius: 22px; background: var(--card); padding: 28px; }
.card-k { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
.card-k:not(:first-child) { margin-top: 26px; }
.pyr { display: grid; gap: 8px; justify-items: center; }
.tier { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(226, 194, 150, .06); }
.t1 { width: 62%; } .t2 { width: 81%; background: rgba(226, 194, 150, .1); } .t3 { width: 100%; background: rgba(226, 194, 150, .14); }
.tier-k { width: 100%; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); }
.tier button { border: 1px solid rgba(226, 194, 150, .35); background: transparent; border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.tier button:hover { background: rgba(226, 194, 150, .15); }
.tier button.on { background: var(--tan); color: #1a120a; border-color: var(--tan); }
.pyr-out { min-height: 3.2em; margin: 18px 0 0; color: var(--ink-2); font-size: 15.5px; text-align: center; }
.pyr-out b { color: var(--ink); }
.sounds { display: grid; gap: 8px; }
.sounds button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; text-align: left; font-weight: 600; font-size: 15px; }
.sounds button:hover { background: rgba(255, 255, 255, .05); }
.sounds i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tan); position: relative; }
.sounds i::after { content: ''; position: absolute; left: 11px; top: 9px; border-left: 10px solid #1a120a; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sounds .playing i::after { left: 10px; top: 10px; border: 0; width: 10px; height: 10px; background: #1a120a; border-radius: 2px; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.swatches span { aspect-ratio: 1 / 1.25; border-radius: 12px; background: var(--c); color: var(--t, #fff); font-size: 12px; font-weight: 700; display: flex; align-items: flex-end; padding: 8px; }
.kit { margin-top: 20px; padding: 28px; border-radius: 22px; background: linear-gradient(120deg, rgba(226, 194, 150, .12), rgba(226, 194, 150, .03)); border: 1px solid rgba(226, 194, 150, .25); }
.kit h3 { font-size: 22px; }
.kit ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; color: var(--ink-2); }
.kit li::before { content: '✦'; color: var(--tan); margin-right: 10px; }
.kit b { color: var(--ink); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.trio article { padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.when { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); }
.trio h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 10px 0 10px; }
.trio p { color: var(--ink-2); margin: 0; }
.sig { margin: 56px 0 0; font-size: clamp(28px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-align: center; }
.sig span { color: var(--tan); }
.sig-note { text-align: center; color: var(--ink-2); font-size: 14.5px; margin: 14px 0 0; }

.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; margin-top: 36px; }
.proof > div { padding: 22px 24px; border-left: 2px solid var(--tan); }
.proof b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); }
.proof p { color: var(--ink-2); margin: 6px 0 0; font-size: 15.5px; }
.proof a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.cta .btn { display: inline-flex; align-items: center; height: 56px; padding: 0 30px; margin-top: 30px; border-radius: 12px; background: var(--tan); color: #1a120a; font-weight: 800; text-decoration: none; }

@media (max-width: 900px) {
  .vr { height: 820vh; }
  .hs { --w: min(76vw, 440px, 48vh); }
  .hud { top: 72px; gap: 14px; font-size: 11px; }
  .main-use, .firma-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 22px 18px; }
  .t1, .t2 { width: 100%; }
  .swatches span { font-size: 10.5px; padding: 6px; }
  .calc { grid-template-columns: 1fr; }
  .calc div { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .main-use { padding: 26px; }
  .use-row, .trio, .proof, .kit ul { grid-template-columns: 1fr; }
  .calc b { font-size: 18px; flex: none; }
  .duo { padding: 0 0 30px; }
  .toast { right: -6px; top: 60px; }
  .sec { padding: 80px 0; }
  .note { font-size: 12.5px; }
}

/* sin animaciones: se muestra el resultado directo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vr { height: auto; }
  .vr-pin { position: relative; height: auto; min-height: 100vh; padding: 90px 0 40px; }
  .stage, .black, .chap, .skip, .c-b, .c-end, .boot, .clip { display: none; }
  .copy, .copy.on { position: relative; opacity: 1; translate: none; top: auto; }
  .inside { position: relative; visibility: visible; height: 56vh; margin: 30px 0; --r: 100; }
  .senses { position: relative; left: auto; bottom: auto; translate: none; margin: 0 auto; display: grid; gap: 10px; }
  .senses li { position: relative; opacity: 1; translate: none; }
  .wind i, .haze, .scent i, .note, .rain { animation: none; }
  .toast { opacity: 1; translate: none; transition: none; }
}