/* LupaK · estilos
   Índice: base · botones · barra · hero · teléfono · apps · bento · recorrido · cta · pie */

/* Curvas: salida fuerte para lo que entra o responde; entrada-salida para lo que se mueve en pantalla. */

:root {
  --negro: #000;
  --noche: #04060d;
  --tinta: #1d1d1f;
  --gris: #6e6e73;
  --plata: #a1a1a6;
  --nube: #f5f5f7;
  --naranja: #ff8a1f;
  --naranja-2: #ffb347;
  --marino: #101c3d;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ff: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--noche); color: var(--tinta);
  font-family: var(--ff); line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; border-radius: 8px; }

.cont { max-width: 1160px; margin: 0 auto; padding-inline: 22px; }
@media (min-width: 900px) { .cont { padding-inline: 40px; } }

.ceja { font-size: 1.05rem; font-weight: 600; color: var(--naranja); letter-spacing: -.01em; }
.h2 { font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin-top: 10px; }
.h2.grande { font-size: clamp(3rem, 1.2rem + 8vw, 7rem); }
.gris { color: var(--plata); }

/* Parallax: el JS escribe `translate` directo en cada capa (sin variables heredadas). */
[data-px] { will-change: translate; }

/* Aparición al hacer scroll */
.rev { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease-out) var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s); }
.rev.visto { opacity: 1; translate: 0 0; }

/* ── Botones ─────────────────────────────────────────── */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .25s var(--ease-out), scale .16s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { scale: .97; }
.btn svg { transition: transform .2s var(--ease-out); }
.btn-solido { background: #fff; color: #000; }
/* La sombra vive en un pseudo-elemento: se anima su opacidad, no el box-shadow. */
.btn-solido::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 40px -8px rgba(255, 138, 31, .75), 0 0 0 5px rgba(255, 138, 31, .16);
  opacity: 0; transition: opacity .2s ease;
}
.btn-fantasma { color: #fff; border-color: rgba(255, 255, 255, .28); }

.btn-chico { padding: 7px 16px; font-size: .875rem; }

/* ── Barra superior ──────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.nav.pegada { background: rgba(4, 6, 13, .62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: rgba(255, 255, 255, .08); }
.nav.claro { color: var(--tinta); background: rgba(255, 255, 255, .72); border-color: rgba(0, 0, 0, .08); }
.nav-in { max-width: 1160px; margin: 0 auto; height: 68px; padding-inline: 22px; display: flex; align-items: center; gap: 28px; }
.marca { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; }
.marca img { border-radius: 23%; }
.nav-links { display: none; gap: 30px; margin-left: auto; font-size: .875rem; opacity: .86; }
.nav-links a { transition: opacity .15s ease; }

.nav .btn { margin-left: auto; }
.nav.claro .btn-solido { background: var(--tinta); color: #fff; }
@media (min-width: 720px) { .nav-links { display: flex; } .nav .btn { margin-left: 0; } }

/* ── Hero ────────────────────────────────────────────── */
.hero {

  position: relative; background: var(--noche); color: #fff; text-align: center;
  padding: 128px 22px 0; overflow: hidden;
}
.hero-fondo { position: absolute; inset: 0; pointer-events: none; }
.plano {
  position: absolute; inset: -20% 0;
  background-image: linear-gradient(rgba(120, 150, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 20%, transparent 75%);
}
.halo { position: absolute; border-radius: 50%; }
.halo-naranja { width: min(900px, 120vw); aspect-ratio: 1.5; left: 50%; bottom: -6%; margin-left: calc(min(900px, 120vw) / -2); background: radial-gradient(closest-side, rgba(255, 138, 31, .55), transparent); }
.halo-azul { width: min(1000px, 130vw); aspect-ratio: 1.6; left: 50%; top: -18%; margin-left: calc(min(1000px, 130vw) / -2); background: radial-gradient(closest-side, rgba(38, 66, 160, .55), transparent); }

.hero-texto { position: relative; z-index: 2; will-change: transform, opacity; }
.titular {
  font-size: clamp(3.1rem, 1rem + 10.5vw, 9rem); font-weight: 700; letter-spacing: -.045em; line-height: .96;
}
.linea { display: block; overflow: hidden; padding-block: .06em .12em; margin-block: -.06em -.12em; }
.entra-linea {
  display: inline-block; transform: translateY(115%);
  background: linear-gradient(180deg, #fff 30%, #aeb6cf); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sube .9s var(--ease-out) var(--d) forwards;
}
.entra-linea.naranja { background-image: linear-gradient(100deg, #ffd08a 0%, var(--naranja) 45%, #ff5e1f 100%); }
.bajada { text-wrap: balance; max-width: 34ch; margin: 26px auto 0; font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem); color: var(--plata); line-height: 1.35; letter-spacing: -.01em; }
.bajada.osc { color: var(--gris); }
.acciones { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.entra { opacity: 0; animation: aparece .8s var(--ease-out) var(--d) forwards; }
@keyframes sube { to { transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes desvanece { from { opacity: 0; } to { opacity: 1; } }

.escena {
  --u: clamp(7.4px, 2.35vw, 10px); --s: 96px; --sep: 96px; --tel: calc(var(--s) + 60px);
  position: relative; z-index: 1; width: min(980px, 100%); margin: 64px auto 0;
  height: calc(var(--u) * 43 + var(--tel)); perspective: 1500px;
  opacity: 0; animation: aparece 1s var(--ease-out) .3s forwards;
}
.inclina { position: absolute; left: 50%; top: var(--tel); margin-left: calc(var(--u) * -14.5); transform-style: preserve-3d; transform-origin: 50% 40%; will-change: transform; transform: rotateX(10deg) rotateY(-14deg) rotateZ(3deg); }
.aro {
  position: absolute; left: 50%; top: calc(var(--u) * 4 + var(--tel)); width: calc(var(--u) * 62); aspect-ratio: 1; margin-left: calc(var(--u) * -31);
  border-radius: 50%; border: 1px solid rgba(140, 220, 255, .3);
  box-shadow: 0 0 60px rgba(90, 200, 255, .16), inset 0 0 90px rgba(255, 138, 31, .1);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .05), transparent 72%);
}
/* Los tres íconos van en fila sobre el teléfono, el del centro un poco más alto. */
.flota { position: absolute; z-index: 3; top: 16px; width: var(--s); height: var(--s); border-radius: 23%; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); animation: flota 7s ease-in-out infinite; }
.f1 { left: calc(50% - var(--s) * 1.5 - var(--sep)); rotate: -8deg; }
.f2 { left: calc(50% - var(--s) / 2); top: 0; animation-delay: -2.4s; }
.f3 { left: calc(50% + var(--s) / 2 + var(--sep)); rotate: 8deg; animation-delay: -4.6s; }
.tarjeta-flota {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; text-align: left;
  background: rgba(22, 28, 48, .6); border: 1px solid rgba(255, 255, 255, .14); color: #e9ecf7; font-size: .875rem; white-space: nowrap;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); animation: flota 8s ease-in-out -3s infinite;
}
.tarjeta-flota b { font-size: 1.5rem; letter-spacing: -.03em; color: var(--naranja-2); }
/* Indicadores: tres a cada lado del teléfono, cada uno con su propio desfase al flotar. */
.t1 { left: 11%; top: 57%; }
.t2 { right: 7%; top: 58%; animation-delay: -5.5s; }
.t3 { left: 1%; top: 37%; animation-delay: -1.2s; }
.t4 { right: 0; top: 38%; animation-delay: -6.8s; }
.t5 { left: 4%; top: 78%; animation-delay: -4.1s; }
.t6 { right: 1%; top: 78%; animation-delay: -2.2s; }
@media (max-width: 1060px) { .t1, .t3, .t5 { left: 0; } .t2, .t4, .t6 { right: 0; } }
.punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #30d158); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #30d158) 24%, transparent); }
/* --amp baja a 0 mientras el ícono vuela al teléfono, para que llegue quieto. */
@keyframes flota { 50% { transform: translateY(calc(var(--amp, 1) * -8px)); } }
/* Vuelo de los íconos (lo activa el JS): el teléfono parte vacío; los íconos de cada tarjeta
   son huecos invisibles que marcan el destino, y el contenido aparece al llegar. */
.vuelo .flota { will-change: translate, scale; }
.vuelo .scr-inicio > :not(.sb) { opacity: 0; will-change: opacity, transform; }
.vuelo .scr-inicio .wid img { visibility: hidden; }
@media (max-width: 760px) {
  .escena { --s: 64px; --sep: 56px; --tel: calc(var(--s) + 44px); }

  .tarjeta-flota { display: none; }
}

/* ── Teléfono (todo en em: --u fija la escala) ───────── */
.telefono {
  font-size: var(--u, 10px); width: 29em; height: 60em; padding: .95em; border-radius: 5.2em; position: relative;
  background: linear-gradient(145deg, #5b606b, #17191e 32%, #0a0b0e 60%, #474b55);
  box-shadow: 0 0 0 .12em #000 inset, 0 0 0 .1em rgba(255, 255, 255, .22), 0 6em 9em -3em rgba(0, 0, 0, .85), 0 3em 12em -1em rgba(255, 138, 31, .32);
}
.pantalla { position: relative; height: 100%; border-radius: 4.3em; overflow: hidden; background: #000; isolation: isolate; }
.pantalla::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .13), transparent 32%); }
.isla { position: absolute; z-index: 7; top: 1.1em; left: 50%; width: 8.6em; height: 2.5em; margin-left: -4.3em; border-radius: 2em; background: #000; }

.scr {
  position: absolute; inset: 0; padding: 5.6em 1.6em 1.8em; display: flex; flex-direction: column; gap: 1em; text-align: left;
  background: #f2f2f7; color: #1d1d1f;
  /* Salida: se queda quieta bajo la pantalla nueva y luego se apaga. Entrada: más larga, con desenfoque leve para fundir el cruce. */
  opacity: 0; transform: translateY(4%) scale(.97); filter: blur(4px);
  transition: opacity .15s linear .35s, transform .5s var(--ease-out), filter .5s var(--ease-out);
}
.scr.pasada { transform: translateY(-4%) scale(.97); }
.scr.activa { opacity: 1; transform: none; filter: none; z-index: 2; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s var(--ease-out); }
.sb { position: absolute; top: 1.2em; left: 2.2em; right: 2.2em; display: flex; justify-content: space-between; align-items: center; font-size: 1.3em; font-weight: 600; }
.sb-d { display: flex; gap: .3em; align-items: flex-end; }
.sb-d i { width: .32em; background: currentColor; border-radius: .1em; height: .5em; }
.sb-d i:nth-child(2) { height: .72em; } .sb-d i:nth-child(3) { height: .95em; }
.p-sub { font-size: 1.15em; color: #8e8e93; font-weight: 500; }
.p-tit { font-size: 2.5em; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: -.36em; }
.boton-app { margin-top: auto; font-size: 1.35em; font-weight: 600; text-align: center; padding: .85em; border-radius: 1em; color: #fff; }
.boton-app.azul { background: #0a6cf0; } .boton-app.verde { background: #148d49; }
.chips { display: flex; gap: .6em; overflow: hidden; }
.chips b { font-size: 1.15em; font-weight: 600; padding: .45em .95em; border-radius: 9em; background: rgba(120, 120, 128, .2); white-space: nowrap; }
.chips b.on { background: #0a84ff; color: #fff; } .chips b.on.v { background: #148d49; }

/* Inicio (hero) */
.scr-inicio, .s-piso, .s-ind { background: linear-gradient(180deg, #0c1022, #05060b); color: #f5f5f7; }
.wid { display: flex; align-items: center; gap: 1em; padding: 1.2em; border-radius: 1.8em; background: rgba(255, 255, 255, .08); border: .1em solid rgba(255, 255, 255, .08); }
.wid img { width: 4em; height: 4em; border-radius: 23%; flex: none; }
.wid div { flex: 1; min-width: 0; display: grid; }
.wid b { font-size: 1.35em; letter-spacing: -.01em; }
.wid span { font-size: 1.08em; color: #a1a1a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wid em { font-style: normal; font-size: 1.1em; font-weight: 700; padding: .4em .8em; border-radius: 9em; }
.w-inf em { background: rgba(245, 165, 36, .2); color: #ffc65c; }
.w-con em { background: rgba(10, 132, 255, .22); color: #6cb6ff; }
.w-cot em { background: rgba(48, 209, 88, .2); color: #5fe08a; }
.barra-inf { margin-top: auto; display: flex; justify-content: space-around; padding: 1.2em 1em .2em; }
.barra-inf i { width: 2.4em; height: 2.4em; border-radius: .8em; background: rgba(255, 255, 255, .14); }
.barra-inf i.on { background: var(--naranja); }

/* Mapas de calor */
[data-calor] { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
[data-calor] i { background: hsl(var(--h) 78% var(--l)); }
.calor-tel { gap: .4em; } .calor-tel i { aspect-ratio: 1; border-radius: .4em; }

/* Informes: foto y PDF */
.marco-foto { border-radius: 1.6em; overflow: hidden; height: 19em; flex: none; box-shadow: 0 1em 2.4em -1em rgba(0, 0, 0, .4); }
.marco-foto svg { width: 100%; height: 100%; }
.herr { display: flex; align-items: center; gap: .9em; padding: .8em 1em; border-radius: 1.3em; background: #1c1c1e; color: #fff; }
.herr b { font-size: 1.4em; width: 2em; height: 2em; display: grid; place-items: center; border-radius: .5em; }
.herr b.on { background: #0a84ff; }
.herr i { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c); border: .2em solid transparent; }
.herr i.on { box-shadow: 0 0 0 .2em #1c1c1e, 0 0 0 .38em #fff; }
.herr span { font-size: 1.1em; margin-left: auto; color: #a1a1a6; }
.obs { padding: 1.1em 1.2em; border-radius: 1.3em; background: #fff; display: grid; gap: .15em; border-left: .4em solid #ff3b30; }
.obs b { font-size: 1.25em; } .obs span { font-size: 1.05em; color: #8e8e93; }
.obs.tenue { border-left-color: #ffcc00; opacity: .7; }
.s-pdf { background: #2c2c2e; }
.sb.osc { color: #fff; }
.pagina { flex: 1; background: #fff; border-radius: .6em; padding: 1.8em 1.6em; display: flex; flex-direction: column; gap: 1.4em; box-shadow: 0 1.5em 3em -1em rgba(0, 0, 0, .6); }
.pag-cab { display: flex; gap: 1em; align-items: center; padding-bottom: 1.2em; border-bottom: .15em solid #0f4c86; }
.pag-cab i { width: 3em; height: 3em; border-radius: .7em; background: linear-gradient(135deg, #ffcf5c, #f5a524); }
.pag-cab div { display: grid; } .pag-cab b { font-size: 1.35em; } .pag-cab span { font-size: .95em; color: #8e8e93; }
.pag-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.pag-fotos svg { width: 100%; height: 8.4em; border-radius: .5em; }
.pag-lineas { display: grid; gap: .7em; }
.pag-lineas i { height: .6em; border-radius: .3em; background: #e5e5ea; } .pag-lineas i.c { width: 62%; }

/* Control: piso e indicador */
.deptos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; }
.deptos i { font-style: normal; aspect-ratio: 1; border-radius: 1.1em; background: var(--c); display: grid; place-content: center; text-align: center; color: #fff; }
.deptos b { font-size: 1.2em; } .deptos span { font-size: 1em; opacity: .8; font-weight: 600; }
.resumen { display: flex; justify-content: space-between; align-items: baseline; padding: 1em 1.2em; border-radius: 1.3em; background: rgba(255, 255, 255, .08); }
.resumen span { font-size: 1.15em; color: #a1a1a6; } .resumen b { font-size: 1.6em; color: #30d158; }
.anillo { position: relative; width: 13em; height: 13em; margin: .2em auto; flex: none; }
.anillo svg { transform: rotate(-90deg); }
.anillo circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.anillo .v { stroke: #30d158; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1s var(--ease-out) .2s; }
.s-ind.activa .anillo .v { stroke-dashoffset: 100; }
.anillo b { position: absolute; inset: 0; display: grid; place-content: center; font-size: 4em; letter-spacing: -.04em; }
.anillo small { font-size: .45em; color: #a1a1a6; display: inline; }
.anillo b { grid-auto-flow: column; align-items: baseline; }
.leyenda { display: flex; align-items: center; gap: .8em; margin-top: auto; }
.leyenda span { font-size: 1.05em; color: #a1a1a6; }
.leyenda i { flex: 1; height: .6em; border-radius: .3em; background: linear-gradient(90deg, hsl(0 78% 54%), hsl(60 78% 50%), hsl(135 78% 46%)); }

/* Cotiza */
.item { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1.1em 1.2em; border-radius: 1.3em; background: #fff; }
.item div { display: grid; min-width: 0; } .item b { font-size: 1.25em; } .item span { font-size: 1.05em; color: #8e8e93; }
.item em { font-style: normal; font-size: 1.25em; font-weight: 600; white-space: nowrap; }
.total { padding: 1.2em; border-radius: 1.5em; background: #e3f4ea; display: grid; gap: .5em; }
.total p { display: flex; justify-content: space-between; font-size: 1.15em; color: #3c5a48; }
.total p.g { font-size: 1.75em; font-weight: 700; color: #0c6a36; letter-spacing: -.02em; }
.campo { display: flex; justify-content: space-between; align-items: center; padding: 1.15em 1.3em; border-radius: 1.3em; background: #fff; }
.campo span { font-size: 1.25em; color: #6e6e73; } .campo b { font-size: 1.4em; }
.resultado { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.resultado div { padding: 1.2em; border-radius: 1.5em; background: #148d49; color: #fff; display: grid; }
.resultado div + div { background: #0f1b3d; }
.resultado span { font-size: 1.05em; opacity: .8; } .resultado b { font-size: 2.5em; letter-spacing: -.03em; } .resultado small { font-size: .5em; opacity: .8; }

/* ── Tres apps ───────────────────────────────────────── */
.apps { background: #fff; padding: clamp(96px, 14vw, 180px) 0 clamp(70px, 9vw, 120px); border-radius: 44px 44px 0 0; position: relative; z-index: 3; margin-top: -40px; }
.trio { margin-top: clamp(44px, 6vw, 80px); display: grid; gap: 20px; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.app-card {
  position: relative; padding: 34px 30px 30px; border-radius: 30px; background: var(--nube); overflow: hidden;
  transition: opacity .8s var(--ease-out) var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s), transform .25s var(--ease-out), background-color .2s ease;
}
.app-card::before { content: ""; position: absolute; inset: auto -20% -55% -20%; height: 80%; background: radial-gradient(closest-side, var(--a), transparent); opacity: 0; transition: opacity .3s ease; }
.app-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.app-card > * { position: relative; }
.app-card img { border-radius: 23%; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .35); transition: transform .25s var(--ease-out); }
.app-card h3 { margin-top: 26px; font-size: 1.75rem; letter-spacing: -.03em; }
.lema { margin-top: 6px; font-size: 1.125rem; color: var(--gris); line-height: 1.35; min-height: 2.7em; }
.app-card ul { margin-top: 22px; display: grid; gap: 10px; font-size: .9735rem; }
.app-card li { display: flex; gap: 10px; align-items: baseline; }
.app-card li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a); translate: 0 -1px; }
.plataformas { margin-top: 26px; font-size: .8125rem; font-weight: 600; color: var(--gris); letter-spacing: .02em; }

/* ── Bento ───────────────────────────────────────────── */
.bento-sec { background: var(--nube); padding: clamp(80px, 11vw, 150px) 0; }
.bento { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 250px; }
.caja {
  position: relative; grid-column: span 2; border-radius: 30px; background: #fff; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: opacity .8s var(--ease-out) var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s);
}
/* Resplandor: un círculo que el JS mueve con transform; solo se anima su opacidad. */
.brillo {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--g), .22), transparent);
  opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.caja::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(var(--g), .45); opacity: 0; transition: opacity .2s ease;
}
.caja.encima .brillo, .caja.encima::after { opacity: 1; }
.caja.oscura { background: #07090f; color: #fff; }
.caja-txt { position: relative; z-index: 2; padding: 26px 28px; }
.caja h3 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.12; }
.caja p { margin-top: 4px; color: var(--gris); font-size: .9735rem; }
.caja.oscura p { color: var(--plata); }
.etq { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; margin-bottom: 10px; opacity: .9; }
.etq img { width: 22px; height: 22px; border-radius: 24%; }

/* Last Planner (referencial): tablero semanal con una barra por compromiso. */
.c-plan { grid-column: span 6; grid-row: span 2; display: grid; grid-template-columns: minmax(250px, 1fr) 2fr; align-items: center; background: radial-gradient(120% 140% at 0% 0%, #0d1c3a, #07090f 62%); }
.c-plan h3 { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.6rem); max-width: 11ch; }
.c-plan .caja-txt > p { max-width: 30ch; margin-top: 10px; }
.ppc { display: flex; align-items: baseline; gap: 10px; margin-top: 26px !important; }
.ppc b { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); letter-spacing: -.05em; line-height: 1; color: #6cb6ff; font-variant-numeric: tabular-nums; }
.plan { position: relative; z-index: 2; margin: 28px 28px 28px 0; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 8px; font-size: .8125rem; }
.plan-fila { position: relative; display: grid; grid-template-columns: 88px repeat(5, 1fr) 40px; align-items: center; column-gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.plan-fila > * { grid-row: 1; }
.plan-fila > span { grid-column: 1; color: #e5e7ef; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-fila > b { grid-column: 7; text-align: right; color: var(--plata); font-variant-numeric: tabular-nums; }
.plan-fila > i { grid-column: var(--a) / var(--b); height: 20px; border-radius: 7px; }
.plan-fila > small { grid-column: 6; justify-self: start; font-size: .6875rem; color: #ff8a80; white-space: nowrap; }
.plan-cab { min-height: 26px; background: none; color: var(--plata); }
.plan-cab > span { color: var(--plata); font-weight: 500; }
.plan-cab > span:last-child { grid-column: 7; text-align: right; }
.plan-cab > em { font-style: normal; text-align: center; font-weight: 600; }
.plan i.ok { background: #30d158; } .plan i.curso { background: #ff9f0a; } .plan i.no { background: #ff453a; }
.plan i.plan-fut { background: repeating-linear-gradient(135deg, rgba(108, 182, 255, .5) 0 6px, rgba(108, 182, 255, .22) 6px 12px); }
.plan-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 10px 0; color: var(--plata); font-size: .75rem; }
.plan-ley span { display: inline-flex; align-items: center; gap: 6px; }
.plan-ley i { width: 10px; height: 10px; border-radius: 3px; }
/* Las barras se descubren de izquierda a derecha, una fila tras otra. */
.rev .plan-fila > i { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease-in-out); }
.rev.visto .plan-fila > i { clip-path: inset(0 0 0 0); }
.rev.visto .plan-fila:nth-child(3) > i { transition-delay: 60ms; } .rev.visto .plan-fila:nth-child(4) > i { transition-delay: 120ms; }
.rev.visto .plan-fila:nth-child(5) > i { transition-delay: 180ms; } .rev.visto .plan-fila:nth-child(6) > i { transition-delay: 240ms; }

.pulso { position: absolute; top: 34px; left: 28px; color: #30d158; }
.pulso::before, .pulso::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: onda 3s ease-out infinite; }
.pulso::after { animation-delay: 1.5s; }
@keyframes onda { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }

.hojas { position: absolute; top: 26px; right: 30px; width: 112px; height: 140px; }
.hoja { position: absolute; inset: 0; border-radius: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .3); transition: transform .3s var(--ease-out); transform-origin: 50% 100%; }
.hoja.h2 { transform: rotate(-7deg); background: #f3f6f4; } .hoja.h3 { transform: rotate(-14deg); background: #e8efea; }

.hoja.h1 { padding: 14px 12px; display: grid; gap: 7px; align-content: start; }
.hoja b { width: 26px; height: 26px; border-radius: 7px; background: #148d49; }
.hoja i { height: 5px; border-radius: 3px; background: #e5e5ea; } .hoja i.c { width: 60%; }
.hoja span { margin-top: 12px; font-size: .6875rem; font-weight: 700; color: #0c6a36; }

.ida-vuelta { position: absolute; inset: 34px 32px auto; display: flex; align-items: center; gap: 18px; }
.xls { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #148d49; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.ida-vuelta img { width: 64px; height: 64px; }
.ida-vuelta svg { flex: 1; max-width: 190px; height: 40px; }
.ida-vuelta path { fill: none; stroke: #c7c7cc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 8; animation: corre 1.6s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -28; } }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(230px, auto); }
  .caja { grid-column: span 1; }
  .c-plan, .c-excel { grid-column: span 2; }
  .c-plan { grid-row: auto; grid-template-columns: 1fr; align-content: start; }
  .plan { margin: 0 20px 22px; }
  .ppc { margin-top: 14px !important; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .caja, .c-plan, .c-excel { grid-column: span 1; }
  .plan { margin: 0 12px 16px; padding: 10px; }
  .plan-fila { grid-template-columns: 68px repeat(5, 1fr) 30px; padding: 0 6px; }
  .plan-fila > small { display: none; }
}

/* ── Recorrido fijo ──────────────────────────────────── */
.tour { --acento: #f5a524; position: relative; height: 600vh; background: #000; color: #fff; }
.tour[data-app="control"] { --acento: #2f7de1; }
.tour[data-app="cotiza"] { --acento: #1fae5c; }
.tour-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; padding: 70px 22px 24px; }
/* Un halo por app; se cruzan por opacidad en vez de animar el color del degradado. */
.tour-halo { position: absolute; width: 90vmin; aspect-ratio: 1; right: 4%; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent 72%); opacity: 0; transition: opacity .6s ease; }
.tour[data-app="informes"] .h-informes, .tour[data-app="control"] .h-control, .tour[data-app="cotiza"] .h-cotiza { opacity: .3; }
.tour-grid { position: relative; width: min(1080px, 100%); display: grid; grid-template-columns: 1fr auto; gap: clamp(30px, 7vw, 110px); align-items: center; }
.ceja.clara { color: var(--acento); transition: color .3s ease; }
.pasos { position: relative; height: 22rem; margin-top: 18px; }
/* Cada paso entra en cascada (60 ms entre líneas) y sale rápido. */
.paso { position: absolute; inset: 0; pointer-events: none; }
.paso > * { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), filter .2s var(--ease-out); }
.paso.pasada > * { transform: translateY(-16px); }
.paso.activa { pointer-events: auto; }
.paso.activa > * { opacity: 1; transform: none; filter: none; transition-duration: .6s; transition-delay: calc(.12s + var(--i, 0) * 60ms); }
.paso > :nth-child(2) { --i: 1; } .paso > :nth-child(3) { --i: 2; }
.paso h3 { font-size: clamp(1.8rem, 1rem + 3.4vw, 3.6rem); letter-spacing: -.04em; line-height: 1.03; max-width: 13ch; }
.paso p { margin-top: 18px; font-size: clamp(1rem, .9rem + .5vw, 1.3125rem); color: var(--plata); max-width: 34ch; line-height: 1.4; }
.paso .etq { font-size: .9375rem; padding: 5px 13px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 18px; }
.tour-prog { display: flex; align-items: center; gap: 16px; margin-top: 8px; max-width: 320px; }
.cuenta { font-size: .875rem; color: var(--plata); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta b { color: #fff; }
.riel { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.riel i { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); transition: background-color .3s ease; }
.tour-tel { --u: min(10px, 1.22vh); }
.tour-tel .telefono { box-shadow: 0 0 0 .12em #000 inset, 0 0 0 .1em rgba(255, 255, 255, .22), 0 4em 9em -3em rgba(0, 0, 0, .9); }
@media (max-width: 800px) {
  .tour-fijo { padding-top: 64px; place-items: start center; }
  .tour-grid { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .tour-tel { order: -1; --u: min(8.4px, .8vh); }
  .tour-textos { width: 100%; }
  .tour-textos > .ceja { display: none; }
  .pasos { height: 12.5rem; margin-top: 0; }
  .paso h3, .paso p { max-width: none; }
  .paso p { margin-top: 10px; }
  .paso .etq { margin-bottom: 10px; }
  .tour-halo { right: auto; top: 30%; }
}

/* ── Cierre ──────────────────────────────────────────── */
.cta { background: #fff; text-align: center; padding: clamp(110px, 15vw, 200px) 0 clamp(80px, 10vw, 130px); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; left: 50%; top: 0; width: 900px; height: 520px; translate: -50% -40%; background: radial-gradient(closest-side, rgba(255, 138, 31, .2), transparent); pointer-events: none; }
.cta .cont { position: relative; }
.cta-icono { margin: 0 auto 34px; filter: drop-shadow(0 30px 34px rgba(16, 28, 61, .25)); }
.tiendas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tienda {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px 12px 18px; min-width: 196px; border-radius: 16px; background: #000; color: #fff; text-align: left;
  transition: transform .25s var(--ease-out), scale .16s var(--ease-out);
}
.tienda::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .6), 0 0 0 5px rgba(255, 138, 31, .2);
  opacity: 0; transition: opacity .2s ease;
}
.tienda:active { scale: .97; }
.tienda span { display: grid; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.tienda small { font-size: .6875rem; font-weight: 500; letter-spacing: 0; opacity: .75; }
/* Aviso: entra en 250 ms y sale más rápido (150 ms). */
.aviso { margin-top: 20px; min-height: 1.5em; font-size: .9375rem; color: var(--gris); opacity: 0; translate: 0 6px; transition: opacity .15s ease, translate .15s var(--ease-out); }
.aviso.ver { opacity: 1; translate: 0 0; transition-duration: .25s; }

.pie { background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); padding: 26px 0 34px; font-size: .8125rem; color: var(--gris); }
.pie-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.pie .marca { gap: 9px; font-size: 1rem; letter-spacing: -.02em; color: var(--tinta); }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie nav a { transition: color .15s ease; }
.pie p { margin-left: auto; }
@media (max-width: 700px) { .pie p { margin-left: 0; width: 100%; } }

/* ── Hover: solo con ratón (en táctil el hover se dispara al tocar) ── */
@media (hover: hover) and (pointer: fine) {
  .btn-solido:hover::before, .tienda:hover::before { opacity: 1; }
  .btn-fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
  .nav-links a:hover { opacity: .6; }
  .pie nav a:hover { color: var(--tinta); }
  .app-card:hover { background: #fff; }
  .app-card:hover::before { opacity: .28; }
  .app-card:hover::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover svg { transform: translateX(3px); }
  .app-card:hover { transform: translateY(-4px); }
  .app-card:hover img { transform: scale(1.04); }
  .c-pdf:hover .hoja.h2 { transform: rotate(-12deg) translateX(-10px); }
  .c-pdf:hover .hoja.h3 { transform: rotate(-24deg) translateX(-20px); }
}

/* ── Menos movimiento: se quitan los desplazamientos, se conservan los fundidos ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev, .rev.visto { translate: none; transition: opacity .3s ease; }
  .entra, .escena { animation: desvanece .3s ease forwards; }
  .entra-linea { transform: none; animation: desvanece .3s ease both; }
  .flota, .tarjeta-flota, .pulso::before, .pulso::after, .ida-vuelta path { animation: none; }
  .scr, .scr.pasada, .paso > *, .paso.pasada > * { transform: none; filter: none; }
  .rev .plan-fila > i { clip-path: none; }
  .btn:active, .tienda:active { scale: 1; }
}