/* =============================================================
   Experiencia Web Inmersiva — estilos exclusivos de esta página.
   Se carga DESPUÉS de styles.css y solo aquí, para no encarecer el resto del sitio.
   ============================================================= */

:root {
  --deep: #050d1f;
  --deep-2: #0a1a33;
  --line-d: rgba(255, 255, 255, 0.12);
  --txt-d: #c3d3ee;
  --txt-d-mute: #8fa4c9;
  --sky: #8fb6ff;
}

/* El menú es una "píldora" de vidrio claro: sobre el hero oscuro necesita más opacidad para leerse */
body.page-immersive .nav-inner { background: rgba(255, 255, 255, 0.94); }

/* Barra de progreso de lectura */
.imm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600;
  transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--accent), var(--sky));
  pointer-events: none;
}

/* ---------- Secciones oscuras con bordes en diagonal ---------- */
.imm-dark {
  position: relative;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(47, 111, 237, 0.30), transparent 60%),
    radial-gradient(800px 480px at 8% 108%, rgba(47, 111, 237, 0.16), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--deep-2));
  color: var(--txt-d);
  overflow: clip;
}
.imm-dark h1, .imm-dark h2, .imm-dark h3 { color: #fff; }
.imm-dark .eyebrow { color: var(--sky); }
.imm-dark .eyebrow::before { background: var(--sky); }
.imm-dark .lede { color: var(--txt-d); }
.imm-dark .btn-outline { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #fff; }

/* .edge-t = diagonal arriba · .edge-b = diagonal abajo (el color del vecino va en --prev / --next) */
.edge-t::before, .edge-b::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
  height: clamp(28px, 5vw, 70px);
}
.edge-t::before { top: -1px; background: var(--prev, var(--bg)); clip-path: polygon(0 0, 100% 0, 0 100%); }
.edge-b::after { bottom: -1px; background: var(--next, var(--bg)); clip-path: polygon(100% 100%, 0 100%, 100% 0); }

/* ---------- Revelado cinematográfico (clip-path) ---------- */
.wipe {
  opacity: 0;
  clip-path: inset(10% 5% 0 5% round 32px);
  transition: clip-path 1.1s var(--ease-out), opacity .8s var(--ease-out);
}
.wipe.is-in { opacity: 1; clip-path: inset(0 0 0 0 round 0); }

/* ---------- HERO ---------- */
.imm-hero {
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}
.imm-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.imm-spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 28%), rgba(143, 182, 255, 0.20), transparent 62%);
}
.imm-floor {
  position: absolute; left: 50%; bottom: -4%; width: 170%; height: 52%;
  transform: translateX(-50%) perspective(620px) rotateX(68deg);
  transform-origin: 50% 100%; pointer-events: none; opacity: .5;
  background:
    linear-gradient(rgba(143, 182, 255, .38) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(143, 182, 255, .38) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 78%);
  mask-image: linear-gradient(to top, #000 8%, transparent 78%);
  animation: floorMove 6s linear infinite;
}
@keyframes floorMove { to { background-position: 0 56px, 56px 0; } }

.imm-hero-grid { position: relative; z-index: 2; display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 960px) { .imm-hero-grid { grid-template-columns: 1.02fr .98fr; gap: 3rem; } }

.imm-hero .hero-kicker {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #dbe6f9; box-shadow: none;
}
.imm-hero .h1-hero { max-width: 19ch; font-size: clamp(2.05rem, 5vw, 3.6rem); }
.imm-hero .h1-hero em {
  font-style: normal;
  background: linear-gradient(100deg, #9fc0ff, #fff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.imm-hero .hero-lede { color: var(--txt-d); margin-block: 1.3rem 2rem; max-width: 54ch; }
.imm-points { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.8rem; font-size: .86rem; font-weight: 600; color: var(--txt-d-mute); }
.imm-points span { display: inline-flex; align-items: center; gap: .45rem; }
.imm-points svg { width: 16px; height: 16px; color: #5ee08a; flex-shrink: 0; }

/* Entrada cinematográfica del hero (solo CSS: funciona aunque falle el JS) */
.imm-hero .rise { opacity: 0; transform: translateY(26px); filter: blur(6px); animation: rise .95s var(--ease-out) forwards; }
.imm-hero .rise:nth-child(1) { animation-delay: .05s; }
.imm-hero .rise:nth-child(2) { animation-delay: .18s; }
.imm-hero .rise:nth-child(3) { animation-delay: .32s; }
.imm-hero .rise:nth-child(4) { animation-delay: .46s; }
.imm-hero .rise:nth-child(5) { animation-delay: .6s; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Escena 3D del hero ---------- */
.scene3d { position: relative; width: min(88%, 520px); aspect-ratio: 1 / .94; margin-inline: auto; perspective: 1200px; touch-action: pan-y; }
.scene-sway { position: absolute; inset: 0; transform-style: preserve-3d; animation: sway 10s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotateY(-5deg) rotateX(2deg); } 50% { transform: rotateY(5deg) rotateX(-2deg); } }
.scene-stage {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(calc(var(--ry, 0) * -9deg)) rotateY(calc(var(--rx, 0) * 12deg));
}
.layer {
  position: absolute; transform-style: preserve-3d;
  transform: translate3d(calc(var(--rx, 0) * var(--d, 0) * -.5px), calc(var(--ry, 0) * var(--d, 0) * -.5px), calc(var(--d, 0) * 1px));
}
.l-glow { inset: 8% 2%; --d: -80; background: radial-gradient(closest-side, rgba(47, 111, 237, .6), transparent 72%); filter: blur(18px); }
.l-ring { right: 4%; top: -3%; width: 46%; aspect-ratio: 1; --d: 40; }
.l-ring i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(143, 182, 255, .55); animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.l-window { left: 0; top: 6%; width: 82%; height: 62%; --d: 0; }
.l-phone { right: 2%; bottom: 0; width: 30%; height: 66%; --d: 90; }

.win {
  width: 100%; height: 100%; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.win-url { margin-left: 10px; font-size: .62rem; color: var(--txt-d-mute); background: rgba(255, 255, 255, .07); border-radius: 99px; padding: 3px 12px; white-space: nowrap; }
.win-body { position: relative; flex: 1; overflow: hidden; }
.win-scroll { position: absolute; left: 0; right: 0; top: 0; animation: pageScroll 14s ease-in-out infinite alternate; }
@keyframes pageScroll { from { transform: translateY(0); } to { transform: translateY(-34%); } }
.win-sec { position: relative; padding: 16px 16px 12px; min-height: 120px; }
.sk { display: block; height: 10px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); }
.sk-e { width: 26%; height: 6px; background: rgba(143, 182, 255, .75); }
.sk-h { width: 62%; height: 16px; }
.sk-h.s { width: 44%; }
.sk-p { width: 56%; }
.sk-btn { display: inline-block; width: 84px; height: 24px; border-radius: 99px; margin-top: 6px; background: linear-gradient(135deg, #34c85a, #25a349); }
.win-orb {
  position: absolute; right: 8%; top: 12%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9fc0ff, #2f6fed 55%, #0a1a33);
  box-shadow: 0 0 60px rgba(47, 111, 237, .7); animation: orb 6s ease-in-out infinite alternate;
}
@keyframes orb { to { transform: translate(-10%, 14%) scale(1.08); } }
.win-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 16px 14px; }
.win-cards span { height: 52px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }

.phone {
  position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
  border: 5px solid #0b1530; background: linear-gradient(170deg, #12306a, #0a1a33);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .16);
}
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 34%; height: 8px; border-radius: 8px; background: #0b1530; transform: translateX(-50%); z-index: 2; }
.phone-screen { position: absolute; inset: 0; padding: 24px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.phone-orb {
  margin: 8px auto 6px; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9fc0ff, #2f6fed 60%, #0a1a33);
  box-shadow: 0 0 40px rgba(47, 111, 237, .7); animation: orb 5s ease-in-out infinite alternate;
}
.phone-wa {
  margin-top: auto; text-align: center; font-size: .6rem; font-weight: 800; color: #fff; border-radius: 99px; padding: 7px 4px;
  background: linear-gradient(135deg, #34c85a, #25a349); box-shadow: 0 8px 20px rgba(37, 163, 73, .5);
  animation: pulseWa 2.4s ease-in-out infinite;
}
@keyframes pulseWa { 50% { transform: scale(1.06); } }

.l-chip span {
  display: inline-block; padding: 8px 14px; border-radius: 99px; white-space: nowrap;
  font-size: .74rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: bob 5s ease-in-out infinite alternate;
}
@keyframes bob { to { transform: translateY(-9px); } }
.chip-1 { left: -4%; top: 24%; --d: 130; }
.chip-2 { right: 8%; top: 3%; --d: 150; }
.chip-2 span { animation-delay: -1.5s; }
.chip-3 { left: 4%; bottom: 5%; --d: 110; }
.chip-3 span { animation-delay: -3s; }

/* ---------- Intro / problema ---------- */
.imm-intro-grid { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
@media (min-width: 720px) { .imm-intro-grid { grid-template-columns: repeat(3, 1fr); } }
.imm-intro-grid h3 { font-size: 1.15rem; }
.imm-intro-grid p { color: var(--ink-mute); margin-top: .5rem; font-size: .95rem; }

/* ---------- Prueba viva (playground) ---------- */
.pg-grid { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
@media (min-width: 720px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .pg-grid { grid-template-columns: repeat(4, 1fr); } }
.pg-card {
  display: flex; flex-direction: column; gap: .9rem; padding: 1rem;
  border: 1px solid var(--line-d); border-radius: var(--radius-md); background: rgba(255, 255, 255, .04);
}
.pg-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--sky); }
.pg-card h3 { font-size: 1.05rem; }
.pg-card p { font-size: .88rem; color: var(--txt-d-mute); }
.pg-stage {
  position: relative; height: 210px; overflow: hidden; display: grid; place-items: center; touch-action: pan-y;
  border-radius: 14px; background: rgba(5, 13, 31, .65); border: 1px solid rgba(255, 255, 255, .09);
}
.pg-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--txt-d-mute); pointer-events: none; transition: opacity .4s; }
.pg-hint.is-hidden { opacity: 0; }

.pg-magnet {
  width: 92px; height: 92px; border-radius: 50%; color: #fff; font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, #34c85a, #25a349); box-shadow: 0 14px 40px rgba(37, 163, 73, .45);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.pg-magnet.is-near { box-shadow: 0 18px 54px rgba(37, 163, 73, .7); }
.pg-magnet.pop { animation: popBtn .5s var(--ease-bounce); }
@keyframes popBtn { 40% { scale: 1.18; } }

.depth { perspective: 700px; }
.depth-card {
  position: relative; width: 172px; height: 128px; transform-style: preserve-3d; transition: transform .22s ease-out;
  transform: rotateX(calc(var(--py, 0) * -20deg)) rotateY(calc(var(--px, 0) * 24deg));
}
.depth-card .dl { position: absolute; inset: 0; border-radius: 14px; }
.dl-1 { background: linear-gradient(135deg, #2f6fed, #14417f); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
.depth-card .dl-2 { inset: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); transform: translateZ(26px); }
.dl-3 { display: grid; place-items: center; font-weight: 800; letter-spacing: .1em; font-size: .9rem; color: #fff; text-shadow: 0 8px 20px rgba(0, 0, 0, .45); transform: translateZ(58px); }
.depth-card .dl-4 { inset: -10px -10px auto auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #34c85a, #25a349); transform: translateZ(86px); box-shadow: 0 8px 18px rgba(37, 163, 73, .55); }

.rev { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.rev-a { background: linear-gradient(135deg, #eaf1ff, #cfe0ff); color: var(--ink); }
.rev-b {
  background: linear-gradient(135deg, #0a1a33, #1d56b8); color: #fff;
  clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path .95s cubic-bezier(.7, 0, .2, 1);
}
.pg-reveal.is-on .rev-b { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
.rev-btn {
  position: absolute; z-index: 3; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: .5rem 1rem; border-radius: 99px; font-weight: 700; font-size: .8rem; color: var(--ink);
  background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.pg-ripple { cursor: pointer; }
.rip {
  position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(143, 182, 255, .9); transform: translate(-50%, -50%) scale(1);
  animation: rip 1.1s ease-out forwards;
}
@keyframes rip { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

/* ---------- Storytelling con scroll ---------- */
.story-wrap { display: block; margin-top: 2.4rem; }
@media (min-width: 960px) { .story-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 3.5rem; align-items: start; } }
.story-stage {
  position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5; overflow: hidden;
  height: clamp(230px, 34vh, 310px); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--deep), var(--deep-2)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--shadow-lg);
}
@media (min-width: 960px) { .story-stage { top: calc(var(--nav-h) + 24px); height: min(70vh, 560px); align-self: start; } }
.story-counter { position: absolute; z-index: 4; left: 18px; top: 14px; font-family: var(--display); font-weight: 800; letter-spacing: .1em; font-size: .9rem; color: #fff; }
.story-counter b { color: var(--sky); }
.story-bar { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.story-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--accent), var(--sky)); }
.scene {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(.95);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.story[data-active="1"] .scene-1, .story[data-active="2"] .scene-2,
.story[data-active="3"] .scene-3, .story[data-active="4"] .scene-4 { opacity: 1; transform: none; }

.sw-row { display: flex; gap: 14px; align-items: center; }
.sw-row i { width: clamp(40px, 6vw, 58px); aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .35); opacity: 0; transform: scale(.4); }
.story[data-active="1"] .sw-row i { animation: pop .7s var(--ease-bounce) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.type-spec { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 4.4rem); color: #fff; line-height: 1; text-align: center; }
.type-cap { text-align: center; margin-top: 6px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-d-mute); }

.stack-wrap { perspective: 900px; }
.stack { position: relative; width: clamp(110px, 16vw, 150px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.stack i {
  position: absolute; inset: 0; border-radius: 14px; border: 1px solid rgba(143, 182, 255, .6);
  background: linear-gradient(135deg, rgba(47, 111, 237, .38), rgba(143, 182, 255, .1));
  transform: translateZ(calc(var(--i) * 8px)); transition: transform 1s var(--ease-out);
}
.story[data-active="2"] .stack i { transform: translateZ(calc(var(--i) * 36px)); }
.story[data-active="2"] .stack { animation: stackSpin 14s linear infinite; }
@keyframes stackSpin { to { transform: rotateX(58deg) rotateZ(322deg); } }

.path { position: relative; display: grid; gap: clamp(14px, 3.6vh, 26px); padding-left: 36px; }
.path-line { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--sky)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease-out); }
.story[data-active="3"] .path-line { transform: scaleY(1); }
.node { position: relative; font-weight: 700; font-size: clamp(.9rem, 1.7vw, 1.1rem); color: #dbe6f9; opacity: .22; transition: opacity .5s; }
.node::before { content: ""; position: absolute; left: -32px; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); background: var(--deep); border: 2px solid var(--sky); }
.story[data-active="3"] .node { opacity: 1; transition-delay: calc(var(--i) * 330ms + 200ms); }

.chat { display: grid; gap: 8px; width: min(86%, 330px); }
.b { margin: 0; padding: 9px 13px; border-radius: 14px; font-size: clamp(.78rem, 1.5vw, .92rem); line-height: 1.35; color: #fff; opacity: 0; transform: translateY(10px) scale(.96); }
.b-in { background: rgba(255, 255, 255, .13); border-bottom-left-radius: 4px; justify-self: start; }
.b-out { background: #25a349; border-bottom-right-radius: 4px; justify-self: end; }
.story[data-active="4"] .b { animation: bubble .55s var(--ease-out) forwards; animation-delay: calc(var(--i) * 650ms + 200ms); }
.chat-tag { justify-self: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); opacity: 0; }
.story[data-active="4"] .chat-tag { animation: bubble .55s var(--ease-out) forwards; animation-delay: 2.6s; }
@keyframes bubble { to { opacity: 1; transform: none; } }

.chapter { display: flex; flex-direction: column; justify-content: center; min-height: 46vh; padding: 1.4rem 0; opacity: .4; transition: opacity .45s; }
.chapter.is-active { opacity: 1; }
html:not(.is-ready) .chapter { opacity: 1; }
@media (min-width: 960px) { .chapter { min-height: 78vh; } }
.chapter .num { font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: rgba(var(--accent-rgb), .28); }
.chapter h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin: .4rem 0 .7rem; }
.chapter > p { color: var(--ink-mute); max-width: 52ch; }
.chapter .feat-list { margin-top: 1.1rem; }

/* ---------- Qué incluye ---------- */
.inc-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 720px) { .inc-grid { grid-template-columns: repeat(2, 1fr); } }
.inc-card {
  position: relative; display: flex; gap: 1rem; align-items: flex-start; overflow: hidden; padding: 1.3rem 1.3rem 1.4rem;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.inc-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .14), transparent 62%);
}
.inc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), .35); }
.inc-card:hover::before { opacity: 1; }
.inc-card .icon-badge { margin: 0; flex-shrink: 0; }
.inc-card h3 { font-size: 1.05rem; }
.inc-card p { margin-top: .35rem; color: var(--ink-mute); font-size: .92rem; }
.inc-n { position: absolute; top: 12px; right: 16px; font-family: var(--display); font-weight: 800; font-size: .8rem; color: var(--ink-faint); }

/* ---------- Comparador ---------- */
.cmp {
  --pos: 50%;
  container-type: inline-size; position: relative; max-width: 920px; margin: 2.4rem auto 0;
  aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; cursor: ew-resize; touch-action: pan-y;
  border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-select: none;
}
@media (min-width: 720px) { .cmp { aspect-ratio: 16 / 9; } }
.cmp:focus-within { outline: 2px solid var(--sky); outline-offset: 4px; }
.cmp-side { position: absolute; inset: 0; padding: 5% 6%; overflow: hidden; }
.cmp-plain { background: #eef1f6; color: #3a4558; font-family: Arial, Helvetica, sans-serif; }
.cmp-imm { clip-path: inset(0 0 0 var(--pos)); background: linear-gradient(160deg, #050d1f, #0f2c5f); color: #fff; }
.mp-nav, .mi-nav { display: flex; gap: 4%; align-items: center; font-size: .7rem; font-size: clamp(.58rem, 1.9vw, .8rem); font-size: clamp(.58rem, 2.1cqw, .85rem); }
.mp-nav span:first-child { font-weight: 800; margin-right: auto; }
.mi-nav span:first-child { color: var(--sky); margin-right: auto; }
.mp-title, .mi-title { margin-top: 7%; max-width: 70%; line-height: 1.1; font-size: 1.1rem; font-size: clamp(.95rem, 4.4vw, 1.9rem); font-size: clamp(.95rem, 5cqw, 2.1rem); }
.cmp-plain .mp-title { color: #28324a; font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: 0; }
.mi-title { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.mp-text, .mi-text { margin-top: 3%; max-width: 54%; font-size: .7rem; font-size: clamp(.6rem, 2vw, .9rem); font-size: clamp(.6rem, 2.2cqw, .95rem); line-height: 1.4; }
.mp-text { color: #5b667c; }
.mi-text { color: var(--txt-d); }
.mp-boxes { display: flex; gap: 3%; margin-top: 5%; }
.mp-boxes span { flex: 0 0 18%; height: 11cqw; height: 12vw; max-height: 90px; background: #d6dce8; border-radius: 3px; }
.mp-btn { display: inline-block; margin-top: 5%; padding: .45em 1.1em; background: #b9c2d3; color: #3a4558; border-radius: 3px; font-size: clamp(.6rem, 2vw, .85rem); font-size: clamp(.6rem, 2.2cqw, .9rem); }
.mi-orb {
  position: absolute; right: 8%; top: 16%; width: 36%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #b7d0ff, #2f6fed 55%, #0a1a33); box-shadow: 0 0 90px rgba(47, 111, 237, .85);
  animation: orb 6s ease-in-out infinite alternate;
}
.mi-grid { position: absolute; inset: auto 0 0 0; height: 40%; opacity: .5; pointer-events: none;
  background: linear-gradient(rgba(143, 182, 255, .4) 1px, transparent 1px) 0 0 / 100% 30px, linear-gradient(90deg, rgba(143, 182, 255, .4) 1px, transparent 1px) 0 0 / 30px 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
  transform: perspective(300px) rotateX(55deg); transform-origin: 50% 100%; }
.mi-cards { position: relative; display: flex; gap: 3%; margin-top: 5%; transform: perspective(520px) rotateY(-16deg) rotateX(6deg); transform-origin: left center; }
.mi-cards span { flex: 0 0 18%; height: 11cqw; height: 12vw; max-height: 90px; border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 16px 30px rgba(0, 0, 0, .4); }
.mi-btn { position: relative; display: inline-block; margin-top: 5%; padding: .5em 1.2em; border-radius: 99px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #34c85a, #25a349); box-shadow: 0 10px 26px rgba(37, 163, 73, .5); font-size: clamp(.6rem, 2vw, .85rem); font-size: clamp(.6rem, 2.2cqw, .9rem); }
.cmp-tag { position: absolute; bottom: 4%; padding: .35rem .8rem; border-radius: 99px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cmp-tag-l { left: 4%; background: #fff; color: #3a4558; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.cmp-tag-r { right: 4%; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(47, 111, 237, .5); }
.cmp-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, .7); pointer-events: none; }
.cmp-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 800; font-size: 1.1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

/* ---------- Casos (tabs) ---------- */
.tabs { margin-top: 2.2rem; }
.tablist { display: flex; flex-wrap: wrap; gap: .6rem; }
.tab {
  padding: .7rem 1.2rem; border-radius: 99px; font-weight: 700; font-size: .92rem; color: var(--ink-mute);
  background: var(--surface); border: 1px solid var(--line); transition: all .25s var(--ease-out);
}
.tab:hover { color: var(--ink); border-color: rgba(var(--accent-rgb), .4); }
.tab[aria-selected="true"] { background: var(--accent-2); color: #fff; border-color: var(--accent-2); box-shadow: var(--shadow-md); }
.tabpanel { margin-top: 1.2rem; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: panelIn .5s var(--ease-out); }
.tabpanel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.tabpanel h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); max-width: 26ch; }
.tabpanel > p { margin-top: .7rem; color: var(--ink-mute); max-width: 60ch; }
.tabpanel .feat-list { margin-top: 1.2rem; max-width: 62ch; }
.tabpanel .btn { margin-top: 1.5rem; }

/* ---------- Brief interactivo ---------- */
.builder {
  padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: var(--radius-lg); color: var(--txt-d); margin-top: 2.2rem;
  background: linear-gradient(160deg, var(--deep-2), #14417f); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-lg);
}
.builder fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.builder legend { padding: 0; margin-bottom: .8rem; font-family: var(--display); font-weight: 800; font-size: 1rem; color: #fff; }
.opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt span {
  display: inline-block; padding: .65rem 1.05rem; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: .92rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24); transition: all .25s var(--ease-out);
}
.chip-opt:hover span { background: rgba(255, 255, 255, .12); }
.chip-opt input:checked + span { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 3px; }
.builder-sum { margin-top: .4rem; padding: 1rem 1.2rem; border-radius: 14px; font-size: .95rem; background: rgba(5, 13, 31, .5); border: 1px dashed rgba(255, 255, 255, .26); }
.builder-sum b { color: #fff; }
.builder .btn { margin-top: 1.3rem; }

/* ---------- Quién ---------- */
.imm-who { background: var(--surface); padding-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 539px) {
  .cmp { aspect-ratio: 1 / 1; }
  .imm-hero .hero-actions .btn { width: 100%; }
}
@media (max-width: 719px) {
  .l-chip span { font-size: .66rem; padding: 6px 11px; }
  .pg-stage { height: 190px; }
  .cmp-handle::after { width: 38px; height: 38px; }
}

/* ---------- Movimiento reducido: solo se frenan los efectos continuos más intrusivos ---------- */
@media (prefers-reduced-motion: reduce) {
  .imm-floor, .scene-sway, .l-ring i, .phone-wa { animation: none; }
}