/* nowmad agency: la página es un sistema operativo.
   Fondo de pantalla vivo (la brújula del logo en píxeles, agency.js), barra de menú, ventanas que
   se arrastran, dock fijo y cada sección es una aplicación. Página independiente: no usa styles.css. */
@font-face { font-family: "Unbounded"; src: url("assets/fonts/unbounded-be36af.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("assets/fonts/hanken-grotesk-59f169.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-a14563.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Color de acento: se cambia solo acá */
  --a: #D4861C; --a2: #E3962F; --a-mid: #EDB05A; --a-soft: #FFD08A; --a-fold: #F6C77E; --a-light: #FFE2B3; --a-deep: #9E6012; --a-night: #2B1F10; --a-tint: #FDF5E8;
  --ink: #1D1D1F;
  --ink-muted: #6E6E73;
  --cobalt: var(--a);
  --cobalt-2: var(--a-mid);
  --deep: #1D1D1F;
  --celeste: var(--a-mid);
  --hielo: #E8E8ED;
  --surface: #F5F5F7;
  --win: #FFFFFF;
  --bar: #F2F2F5;
  --line: rgba(29, 29, 31, .1);
  --white: #fff;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hanken Grotesk", system-ui, sans-serif;
  --brand: "Unbounded", "Arial Black", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 48px; background: var(--deep); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--white); font: 400 16px/1.5 var(--sans); background: transparent; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
em { font-style: normal; font-weight: 200; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
::selection { background: var(--cobalt); color: var(--white); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Fondo de pantalla ---------- */
/* Cielo oscuro con luces de color (como una nebulosa); encima va la escultura en 3D */
.wall { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(60vmax 45vmax at 78% 62%, color-mix(in srgb, var(--a-mid) 45%, transparent), transparent 70%), radial-gradient(45vmax 35vmax at 92% 18%, color-mix(in srgb, var(--a-mid) 22%, transparent), transparent 70%), radial-gradient(55vmax 40vmax at 12% 95%, color-mix(in srgb, var(--a-mid) 22%, transparent), transparent 70%), #000000; }
.wall3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.wall3d.is-on { opacity: 1; }
/* Viñeta: los bordes se oscurecen como en una foto de estudio */
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 55% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
/* El nómade: video en loop en la portada y canvas con la secuencia que mueve el scroll (agency-nomade.js) */
.nm-wall { position: absolute; inset: 0; }
.nm-hero, .nm-seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-hero { object-fit: cover; object-position: 45% 50%; transform-origin: 0 0; will-change: transform, opacity; }
.nm-seq { opacity: 0; will-change: opacity; }
.nm-fog { position: absolute; inset: -15%; opacity: 0; pointer-events: none; }
.nm-fog i { position: absolute; inset: 0; filter: blur(30px); background: radial-gradient(ellipse 60% 45% at 35% 55%, rgba(176, 188, 202, .95), rgba(176, 188, 202, 0) 70%), radial-gradient(ellipse 55% 40% at 70% 45%, rgba(150, 162, 178, .9), rgba(150, 162, 178, 0) 70%), linear-gradient(180deg, #5d6773, #3c444e); animation: nm-fog 18s ease-in-out infinite alternate; }
@keyframes nm-fog { from { transform: translateX(-4%) scale(1); } to { transform: translateX(4%) scale(1.08); } }
.nm-dark { position: absolute; inset: 0; background: #07090b; opacity: 0; }
/* Lleva el azul frío del video hacia el bronce de agency */
.nm-grade { position: absolute; inset: 0; background: #8FA3B5; mix-blend-mode: soft-light; opacity: .35; pointer-events: none; }
/* Oscurece detrás del titular de la portada para que se lea */
.nm-read { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, .15) 100%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 18%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nm-fog i { animation: none; } }


/* ---------- Barra de menú ---------- */
.menubar { position: fixed; z-index: 70; inset: 0 0 auto; display: flex; align-items: center; gap: 22px; height: 34px; padding: 0 16px; background: rgba(29, 29, 31, .72); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); font: 500 13px/1 var(--sans); }
.mb-logo { display: grid; place-items: center; width: 22px; height: 22px; color: var(--white); }
.mb-logo svg { width: 18px; height: 18px; }
.mb-app { font-weight: 700; }
.mb-menu { display: flex; gap: 20px; }
.mb-menu a, .mb-other { text-decoration: none; opacity: .88; transition: opacity .2s; }
.mb-menu a:hover, .mb-other:hover { opacity: 1; }
.mb-sp { flex: 1; }
.mb-status { display: flex; align-items: center; gap: 7px; opacity: .88; }
.mb-status i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 8px #3DDC84; }
.mb-clock { font: 500 12px/1 var(--mono); letter-spacing: .06em; }
.mb-clock b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Ventanas ---------- */
.win { position: relative; overflow: hidden; border-radius: 12px; background: var(--win); color: var(--ink); box-shadow: var(--shadow); }
.win-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--bar); border-bottom: 1px solid var(--line); }
.lights { display: flex; gap: 7px; }
.lights i, .ql-close { display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; }
.lights i:nth-child(1), .ql-close { background: #FF5F57; }
.lights i:nth-last-child(2) { background: #FEBC2E; }
.lights i:last-child { background: #28C840; }
.ql-close { cursor: pointer; }
.win-title { position: absolute; left: 50%; transform: translateX(-50%); color: var(--ink-muted); font: 600 12px/1 var(--sans); white-space: nowrap; pointer-events: none; }
[data-drag] { cursor: grab; touch-action: none; }
.is-dragging [data-drag] { cursor: grabbing; }

/* ---------- Escritorio (portada) ---------- */
.desk { position: relative; min-height: 100svh; padding: 34px 0 0; overflow: hidden; }
.desk-copy { position: absolute; left: var(--gutter); top: 17vh; z-index: 2; width: 39vw; max-width: 600px; }
.desk-kicker { margin-bottom: 16px; color: var(--hielo); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.desk-title { font-size: clamp(40px, 4.7vw, 86px); line-height: .92; letter-spacing: -.055em; text-shadow: 0 10px 50px rgba(0, 0, 0, .35); }
.desk-title em { display: block; color: var(--hielo); }
.desk-sub { max-width: 440px; margin-top: 20px; color: var(--hielo); font-size: 16px; }
/* Íconos del escritorio: si no entran a lo alto, arman otra columna hacia la izquierda (como en la Mac) */
.desk-icons { position: absolute; top: 48px; bottom: 100px; right: var(--gutter); z-index: 2; display: grid; grid-template-rows: repeat(7, minmax(0, 112px)); align-content: start; margin: 0; padding: 0; list-style: none; }
.desk-icons li { display: grid; min-height: 0; }
.desk-icons a { display: grid; justify-items: center; align-content: center; gap: clamp(3px, .6vh, 6px); width: 92px; padding: clamp(3px, .8vh, 8px) 4px; border-radius: 8px; text-decoration: none; text-align: center; transition: background .2s; }
.desk-icons a:hover, .desk-icons a:focus-visible { background: rgba(255, 255, 255, .14); }
.desk-icons svg { width: clamp(30px, 5.6vh, 52px); height: clamp(30px, 5.6vh, 52px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.desk-icons .fold { color: var(--a-fold); }
.desk-icons .fold-ex { color: #F2B33A; }
.desk-icons span { padding: 3px 7px; border-radius: 5px; background: rgba(29, 29, 31, .55); font: 600 12px/1.25 var(--sans); }

.desk .win { position: absolute; z-index: 5; left: var(--x); top: var(--y); }
.w-browser { --x: 44vw; --y: 9vh; width: min(40vw, 620px); }
.w-stats { --x: 71vw; --y: 57vh; width: 220px; padding-bottom: 14px; }
.w-term { --x: 40vw; --y: 66vh; width: 330px; background: #0B0B0D; color: var(--hielo); }
.w-term .win-bar { background: #1C1C1E; border-color: rgba(255, 255, 255, .06); }
.w-term .win-title { color: var(--celeste); }
.w-chat { --x: 3vw; --y: 60vh; width: 270px; }
.desk .win.is-front { z-index: 30; }

/* Barra de direcciones: ahí se escribe */
.addr { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 24px; margin: 0 4px; padding: 0 4px 0 10px; border-radius: 7px; background: var(--win); box-shadow: inset 0 0 0 1px var(--line); cursor: text; }
.addr:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt); }
.addr-lock { flex: none; width: 12px; height: 12px; color: var(--ink-muted); }
.desk[data-phase="2"] .addr-lock, .desk[data-phase="3"] .addr-lock { color: #1FA35A; }
.addr input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--sans); }
.addr input::placeholder { color: var(--ink-muted); }
.addr-url { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font: 500 11px/1 var(--mono); }
.addr input:not(:placeholder-shown) + .addr-url { display: none; }
.addr button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: var(--cobalt); color: var(--white); cursor: pointer; }
.addr button svg { width: 12px; height: 12px; }
.w-browser .mock-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #F5F5F7; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.tab { display: grid; gap: 7px; padding: 9px 10px 10px; border: 0; background: var(--bar); color: var(--ink-muted); font: 600 11px/1 var(--sans); text-align: left; cursor: pointer; }
.tab.is-on { background: var(--win); color: var(--ink); }
.tab i { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(29, 29, 31, .1); overflow: hidden; }
.tab i b { position: absolute; inset: 0; background: var(--cobalt); transform: scaleX(var(--p, 0)); transform-origin: left; }

.st-k { padding: 14px 16px 0; color: var(--ink-muted); font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.st-v { padding: 6px 16px 0; color: var(--cobalt); font: 700 40px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.st-spark { width: 100%; height: 46px; margin-top: 8px; overflow: visible; }
.st-spark path { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); vector-effect: non-scaling-stroke; }
.term-body { margin: 0; min-height: 9.5em; padding: 14px 16px; color: var(--hielo); font: 400 12px/1.75 var(--mono); white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.term-body b { font-weight: 500; color: var(--celeste); }
.term-body .caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--celeste); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wc-body { display: grid; gap: 7px; padding: 12px; background: #F2F2F5; }
.wc-body p { max-width: 86%; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.wc-body p.is-on { opacity: 1; transform: none; }
.wc-body .in { justify-self: end; background: #D9FDD3; }
.wc-body .out { justify-self: start; background: var(--win); }

/* Notificación del sistema */
.notif { position: absolute; z-index: 40; top: 46px; right: 124px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 330px; padding: 12px 14px; border-radius: 16px; background: rgba(245, 245, 247, .82); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.notif.is-on { opacity: 1; transform: none; }
.notif-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--cobalt); color: var(--white); }
.notif-ico svg { width: 20px; height: 20px; }
.notif-txt { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.notif small { align-self: start; color: var(--ink-muted); font-size: 11px; }

/* ---------- Secciones como aplicaciones ---------- */
.app { position: relative; padding: clamp(56px, 9vw, 120px) var(--gutter); }
.app > .win, .board-pin > .win { max-width: 1180px; margin-inline: auto; }
.app-label { color: var(--cobalt); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.app h2 { font-size: clamp(32px, 5vw, 76px); line-height: 1; letter-spacing: -.05em; }
.app h2 em { color: var(--cobalt); }

/* Nosotros: editor de texto */
.doc-tools { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--win); color: var(--ink-muted); font: 500 12px/1 var(--sans); }
.doc-tools > * { padding: 5px 8px; border-radius: 5px; background: var(--surface); font-style: normal; text-decoration: none; }
.doc-sp { flex: 1; background: none !important; }
.doc-page { display: grid; gap: 24px; padding: clamp(32px, 6vw, 80px) clamp(24px, 7vw, 110px); background: var(--win); }
.doc-page h2 { font-size: clamp(32px, 5vw, 72px); line-height: 1.06; }
.js [data-words][data-scrub].is-split .wi { transform: none; opacity: var(--o, 1); transition: opacity .25s linear; }
.doc-lead { max-width: 760px; color: var(--ink-muted); font-size: clamp(18px, 2vw, 26px); line-height: 1.45; }
.doc-lead a { color: var(--cobalt); text-underline-offset: 4px; }
.doc-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--cobalt); animation: blink 1s steps(1) infinite; }

/* Cómo trabajamos: tablero */
.board-head { display: grid; gap: 14px; padding: 28px 28px 8px; }
.board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 20px 28px 32px; list-style: none; }
.col { display: grid; align-content: start; gap: 10px; min-height: 300px; padding: 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, box-shadow .4s; }
.col.is-on { background: #EDEDF0; box-shadow: inset 0 0 0 2px var(--cobalt); }
.col-h { display: flex; align-items: baseline; gap: 8px; font: 700 17px/1.2 var(--display); letter-spacing: -.02em; }
.col-h span { color: var(--cobalt); font: 500 11px/1 var(--mono); }
.col-d { color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.ghost { display: block; height: 44px; border-radius: 9px; background: var(--win); box-shadow: 0 1px 2px rgba(29, 29, 31, .08); }
.ghost.short { height: 30px; width: 70%; }
.card { position: absolute; z-index: 3; left: 0; top: 0; display: grid; gap: 8px; width: var(--cw, 200px); padding: 12px 14px; border-radius: 10px; background: var(--win); box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--a) 55%, transparent), 0 0 0 2px var(--cobalt); transform: translate3d(var(--cx, 0), var(--cy, 0), 0) rotate(var(--cr, 0deg)); transition: transform .7s var(--ease); }
.card b { font: 700 16px/1.1 var(--display); letter-spacing: -.02em; }
.card-tags { display: flex; gap: 6px; }
.card-tags i { padding: 3px 7px; border-radius: 5px; background: #EDEDF0; color: var(--cobalt); font: 600 10px/1 var(--sans); font-style: normal; }
.card-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 12px; }
.card-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--white); }
.card-av svg { width: 13px; height: 13px; }
.app-board.is-pinned { height: 300vh; padding: 0 var(--gutter); }
.app-board.is-pinned .board-pin { position: sticky; top: 0; display: grid; align-content: center; height: 100vh; padding-top: 34px; }

/* Servicios: explorador de archivos */
.finder { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 460px; }
.finder-side { display: grid; align-content: start; gap: 4px; padding: 18px 12px; background: #F5F5F7; border-right: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; }
.finder-side p { margin: 12px 8px 4px; font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.finder-side p:first-child { margin-top: 0; }
.finder-side span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.finder-side span.is-on { background: color-mix(in srgb, var(--a) 12%, transparent); color: var(--cobalt); font-weight: 600; }
.finder-side i { width: 9px; height: 9px; border-radius: 50%; }
.finder-main { padding: 26px 28px 24px; }
.finder-head { display: grid; gap: 12px; margin-bottom: 22px; }
.finder-hint { color: var(--ink-muted); font-size: 14px; }
.finder-cols, .file { display: grid; grid-template-columns: 34px minmax(140px, 1.1fr) 110px minmax(0, 1.6fr); align-items: center; gap: 14px; }
.finder-cols { padding: 0 12px 8px; border-bottom: 1px solid var(--line); color: var(--ink-muted); font: 600 11px/1 var(--sans); }
.finder-cols span:first-child { grid-column: 2; }
.files { margin: 0; padding: 6px 0 0; list-style: none; }
.file { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .2s; }
.files li:nth-child(even) .file { background: rgba(29, 29, 31, .025); }
.file:hover, .file:focus-visible, .file.is-on { background: var(--cobalt) !important; color: var(--white); }
.file svg { width: 26px; height: 32px; }
.file b { font: 700 clamp(16px, 1.6vw, 21px)/1.1 var(--display); letter-spacing: -.02em; }
.tag-c, .tag-g { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.tag-c::before, .tag-g::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cobalt); }
.tag-g::before { background: var(--celeste); }
.file-d { color: var(--ink-muted); font-size: 14px; }
.file:hover .tag-c, .file:hover .tag-g, .file:hover .file-d, .file.is-on .file-d, .file:focus-visible .file-d { color: var(--hielo); }

/* Preguntas: ayuda con buscador */
.help { display: grid; gap: 18px; padding: clamp(26px, 4vw, 48px); }
.help-search { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 46px; padding: 0 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.help-search:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt); }
.help-search svg { width: 18px; height: 18px; color: var(--ink-muted); }
.help-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 16px/1 var(--sans); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 clamp(16px, 1.7vw, 20px)/1.3 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--cobalt); font: 500 19px/1 var(--mono); transition: transform .35s var(--ease), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--cobalt); color: var(--white); }
.faq details p { max-width: 680px; padding-bottom: 20px; color: var(--ink-muted); }
.faq mark { background: #FFE9A8; color: inherit; border-radius: 3px; }
.faq-none { color: var(--ink-muted); }

/* Contacto: WhatsApp */
.wa { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 560px; }
.wa-side { display: grid; align-content: start; gap: 2px; padding: 14px 10px; background: var(--win); border-right: 1px solid var(--line); }
.wa-side-h { margin: 0 8px 10px; font: 700 20px/1 var(--display); letter-spacing: -.03em; }
.wa-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; text-decoration: none; }
.wa-row.is-on { background: var(--a-tint); }
.wa-row b { display: block; font-size: 14px; }
.wa-row small { color: var(--ink-muted); font-size: 12px; }
.wa-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--cobalt); color: var(--white); }
.wa-av svg { width: 22px; height: 22px; }
.wa-av-ex { background: #B9482A; color: #F2B33A; }
.wa-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: #F2F2F7; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #F7F7F7; border-bottom: 1px solid var(--line); }
.wa-head b { display: block; font-size: 15px; }
.wa-head small { color: var(--ink-muted); font-size: 12px; }
.wa-head .app-label { margin-left: auto; }
.wa-body { display: grid; align-content: start; gap: 12px; padding: 18px clamp(14px, 3vw, 40px) 22px; background-image: radial-gradient(rgba(29, 29, 31, .07) 1px, transparent 1.4px); background-size: 18px 18px; }
.wa-day { justify-self: center; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: var(--ink-muted); font-size: 12px; }
.wa-in, .wa-out { max-width: min(78%, 560px); padding: 9px 12px; border-radius: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-size: 15px; line-height: 1.4; }
.wa-in { justify-self: start; border-top-left-radius: 3px; background: var(--win); }
.wa-out { justify-self: end; display: grid; gap: 2px; border-top-right-radius: 3px; background: #D9FDD3; }
.wa-out small { justify-self: end; color: #53BDEB; font-size: 11px; }
.wa-out small span { color: var(--ink-muted); }
.wa-out.is-new { animation: bubble .45s var(--ease); }
@keyframes bubble { from { transform: scale(.96); transform-origin: right top; } }
.wa-quick { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; margin: 0; padding: 0; border: 0; }
.wa-quick legend { width: 100%; margin-bottom: 8px; color: var(--ink-muted); font: 600 12px/1 var(--sans); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border-radius: 999px; background: var(--win); color: #128C7E; font-weight: 600; font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); transition: background .2s, color .2s, transform .2s var(--ease); }
.chip:hover span { transform: translateY(-2px); }
.chip input:checked + span { background: #128C7E; color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.wa-compose { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F0F0F0; }
.wa-compose input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--win); color: var(--ink); font: 400 15px/1 var(--sans); }
.wa-compose input:focus { outline: 2px solid #128C7E; }
.wa-send { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: #128C7E; color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .2s var(--ease); }
.wa-send:hover { transform: translateY(-2px); }
.wa-send svg { width: 18px; height: 18px; }
.wa-send b { font-weight: inherit; }

.foot { padding: 20px var(--gutter) 120px; color: var(--hielo); font-size: 12px; text-align: center; opacity: .8; }

/* ---------- Vista previa (demo de cada servicio) ---------- */
.ql { position: fixed; z-index: 80; left: 50%; top: 50%; width: min(92vw, 380px); transform: translate(calc(-50% + var(--qx, 0px)), calc(-50% + var(--qy, 0px))); }
.ql[hidden] { display: none; }
.win-ql { background: #0B0B0D; color: var(--white); animation: ql-in .35s var(--ease); }
.win-ql .win-bar { background: #1C1C1E; border-color: rgba(255, 255, 255, .06); }
.win-ql .win-title { color: var(--hielo); }
@keyframes ql-in { from { opacity: 0; transform: scale(.92) translateY(14px); } }
.ql-body { position: relative; height: 400px; }
.ql-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hielo); }
.ql-foot a { padding: 8px 12px; border-radius: 999px; background: var(--celeste); color: var(--ink); font: 700 12px/1 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
.demo { position: absolute; inset: 16px; display: grid; align-content: start; gap: 10px; font-size: 13px; opacity: 0; visibility: hidden; }
.demo.is-on { opacity: 1; visibility: visible; }

/* ---------- Dock: íconos de app con su nombre siempre a la vista ---------- */
.dock { position: fixed; z-index: 75; left: 50%; bottom: 12px; display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px 7px; border-radius: 26px; background: linear-gradient(180deg, rgba(60, 60, 67, .56), rgba(28, 28, 30, .78)); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .9); transform: translateX(-50%); }
.dock-h { align-self: center; display: grid; gap: 3px; margin: 0 10px 8px 6px; line-height: 1; white-space: nowrap; }
.dock-h small { color: var(--celeste); font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dock-h b { display: inline-flex; align-items: center; gap: 5px; color: var(--hielo); font: 600 12.5px/1 var(--sans); }
.dock-h i { display: inline-block; color: var(--celeste); font-style: normal; animation: dock-nudge 1.6s var(--ease) 1.2s 3 both; }
@keyframes dock-nudge { 50% { transform: translateX(4px); } }
.dock-app { position: relative; display: grid; justify-items: center; gap: 6px; width: 64px; padding: 0; border: 0; background: none; color: var(--white); text-decoration: none; cursor: pointer; transform: translateY(var(--lift, 0)); transition: transform .18s var(--ease); }
/* Íconos: todos de la misma familia (base café con brillo) y un acento por servicio */
.ic { --acc: var(--celeste); position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--acc); background: radial-gradient(90% 70% at 50% 118%, color-mix(in srgb, var(--acc) 42%, transparent), transparent 70%), linear-gradient(165deg, #3A3A3C 0%, #1C1C1E 55%, #1C1C1E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -10px 16px -12px rgba(0, 0, 0, .7), 0 10px 18px -10px rgba(0, 0, 0, .9); transform: scale(var(--s, 1)); transform-origin: bottom; transition: transform .18s var(--ease); }
.ic::before { content: ""; position: absolute; inset: 1px 1px 52%; border-radius: 13px 13px 50% 50% / 13px 13px 24% 24%; background: linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, 0)); pointer-events: none; }
.ic svg { position: relative; width: 26px; height: 26px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 40%, transparent)); }
.ic-web .ic, .ic.ic-web { --acc: #64D2FF; }
.ic-sys .ic, .ic.ic-sys { --acc: #5E9BFF; }
.ic-auto .ic, .ic.ic-auto { --acc: #9AD8C8; }
.ic-ia .ic, .ic.ic-ia { --acc: #C9B4FF; }
.ic-google .ic, .ic.ic-google { --acc: #F5BE4E; }
.ic-meta .ic, .ic.ic-meta { --acc: #F4A2BE; }
.ic-data .ic, .ic.ic-data { --acc: #86DFA9; }
.ic-wa .ic, .ic.ic-wa { --acc: #fff; color: var(--white); background: linear-gradient(165deg, #4FDB8B, #138A64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 18px -10px rgba(0, 0, 0, .9); }
.ic-wa .ic svg, .ic.ic-wa svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
@media (hover: hover) and (pointer: fine) {
  .dock-app:hover .ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent), inset 0 -10px 16px -12px rgba(0, 0, 0, .7), 0 12px 22px -10px rgba(0, 0, 0, .95); }
}
.dock-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--hielo); opacity: .78; font: 500 10.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; transition: color .2s, opacity .2s; }
.dock-app:hover .dock-l, .dock-app:focus-visible .dock-l, .dock-app.is-open .dock-l { color: var(--white); opacity: 1; }
.dock-app.is-open .ic::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.dock-app:focus-visible { outline: none; }
.dock-app:focus-visible .ic { outline: 3px solid var(--celeste); outline-offset: 3px; }
.dock-sep { align-self: stretch; width: 1px; margin: 6px 6px 20px; background: linear-gradient(transparent, rgba(255, 255, 255, .28), transparent); }
@media (min-width: 601px) and (max-width: 760px) { .dock-h { display: none; } .dock { gap: 2px; } .dock-app { width: 60px; } .dock-l { font-size: 9.5px; } }
.dock-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #FF3B30; color: var(--white); font: 700 11px/1 var(--sans); font-style: normal; box-shadow: 0 0 0 2px rgba(29, 29, 31, .6); }

/* ---------- Aparición y títulos palabra por palabra ---------- */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; padding-block: .14em; margin-block: -.14em; vertical-align: top; }
.wi { display: inline-block; }
.js [data-words].is-split .wi { transform: translateY(115%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 65ms); }
.js [data-words].is-split.is-visible .wi { transform: none; }
.desk .win { animation: win-in .8s var(--ease) both; }
.w-browser { animation-delay: .15s !important; }
.w-chat { animation-delay: .35s !important; }
.w-stats { animation-delay: .5s !important; }
.w-term { animation-delay: .65s !important; }
@keyframes win-in { from { opacity: 0; transform: translateY(30px) scale(.94); } }

/* ---------- Sitio de ejemplo dentro del navegador ---------- */
/* El sitio de ejemplo. Sin construir, cada bloque es un boceto punteado con su etiqueta */
.site { --acc: var(--a-mid); position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6%; padding: 5% 6%; color: var(--ink); background: transparent; transform-origin: 100% 50%; transition: background 1s var(--ease), transform .9s var(--ease); }
.desk:not([data-phase="0"]) .site { background: #FFFFFF; }
.desk[data-phase="1"] .site { transform: scale(.54); border-radius: 10px; }
.site [data-b] { position: relative; transition: color .5s, background .5s, outline-color .5s, box-shadow .5s; }
.site-nav { display: flex; align-items: center; gap: 10px; border-radius: 6px; }
.site-logo { font: 700 clamp(11px, 1.05vw, 15px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.site-links { display: flex; gap: 6px; margin-left: auto; }
.site-links i { width: 22px; height: 5px; border-radius: 3px; background: rgba(29, 29, 31, .2); }
.site-btn { padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 9px/1 var(--sans); }
.site-hero { display: grid; justify-items: start; gap: 10px; margin-top: 2%; }
.site-kicker { border-radius: 4px; color: var(--acc); font: 600 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.site-title { max-width: 88%; border-radius: 6px; font: 700 clamp(18px, 2.25vw, 32px)/1.05 var(--display); letter-spacing: -.03em; }
.site-cta { padding: 9px 16px; border-radius: 999px; background: var(--acc); color: var(--white); font: 700 11px/1 var(--sans); box-shadow: 0 8px 20px -8px var(--acc); }
.site-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; border-radius: 10px; }
.site-cards span { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: var(--win); box-shadow: 0 6px 16px -8px rgba(29, 29, 31, .25); }
.site-cards i { aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, var(--acc), #E8E8ED); }
.site-cards b { height: 5px; border-radius: 3px; background: rgba(29, 29, 31, .16); }
.site-cards b:last-child { width: 60%; }
.site [data-b]:not(.is-built) { outline: 1.5px dashed color-mix(in srgb, var(--a-mid) 65%, transparent); outline-offset: 4px; }
.site [data-b]:not(.is-built), .site [data-b]:not(.is-built) * { color: transparent !important; background: color-mix(in srgb, var(--a-mid) 13%, transparent) !important; box-shadow: none !important; }
.site [data-b]:not(.is-built)::after { content: attr(data-l); position: absolute; left: 0; top: -17px; font: 500 9px/1 var(--mono); letter-spacing: .06em; color: var(--celeste); white-space: nowrap; }
.site [data-b].is-built { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.04); } }

/* Editor: el código se escribe a la izquierda y el sitio se arma a la derecha */
.mock-code { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 46%; margin: 0; padding: 18px 16px; overflow: hidden; background: rgba(28, 28, 30, .96); border-right: 1px solid color-mix(in srgb, var(--a-mid) 18%, transparent); color: var(--hielo); font: 400 clamp(9.5px, .82vw, 11.5px)/1.75 var(--mono); white-space: pre-wrap; word-break: break-word; transform: translateX(-102%); transition: transform .8s var(--ease); }
.desk[data-phase="1"] .mock-code { transform: none; }
.mock-code .t { color: var(--celeste); }
.mock-code .k { color: #F2B33A; }
.mock-code .c { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: var(--celeste); animation: blink 1s steps(1) infinite; }
.mock-toast { position: absolute; bottom: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 11px/1 var(--sans); box-shadow: 0 10px 24px -8px rgba(29, 29, 31, .5); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mock-toast::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #3DDC84; color: var(--ink); font-size: 10px; font-weight: 800; }
.desk[data-phase="2"] .mock-toast { opacity: 1; transform: none; transition-delay: .5s; }


/* ---------- Demos de servicios ---------- */

.services-group { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; color: var(--hielo); font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.services-group span { color: var(--celeste); }
.service-list + .services-group { margin-top: clamp(36px, 5vw, 56px); }
.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(232, 232, 237, .16); }
.service { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 20px 0; border-bottom: 1px solid rgba(232, 232, 237, .16); color: var(--white); text-decoration: none; }
.service-main { display: grid; gap: 8px; min-width: 0; }
.service-name { font: 700 clamp(26px, 3.4vw, 46px)/1 var(--display); letter-spacing: -.03em; transition: transform .5s var(--ease), color .3s; }
.service-desc { max-width: 560px; color: var(--hielo); font-size: 16px; line-height: 1.5; opacity: .8; }
.service-go { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(232, 232, 237, .25); border-radius: 50%; color: var(--celeste); transition: background .3s, color .3s, transform .4s var(--ease); }
.service-go svg { width: 16px; height: 16px; }
.service:hover .service-name, .service:focus-visible .service-name, .service.is-on .service-name { color: var(--celeste); }
.service.is-on .service-go { border-color: var(--celeste); }
.service:hover .service-name, .service:focus-visible .service-name { transform: translateX(10px); }
.service:hover .service-go, .service:focus-visible .service-go { background: var(--celeste); color: var(--ink); transform: rotate(45deg); }


/* ---------- Tu propuesta: asistente tipo instalador ---------- */
.desk-icons .app-ico { padding: 9px; border-radius: 13px; background: linear-gradient(160deg, var(--a-fold), var(--a)); color: var(--white); }
.wiz { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 560px; }
.wiz-side { position: relative; display: grid; align-content: start; gap: 28px; padding: 32px 26px; overflow: hidden; background: linear-gradient(170deg, var(--a-mid), var(--a) 70%, var(--a-deep)); color: var(--white); }
.wiz-o { width: 64px; height: 64px; color: var(--white); }
.wiz-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.wiz-steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: rgba(255, 255, 255, .6); font-weight: 600; font-size: 15px; transition: background .3s, color .3s; }
.wiz-steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; font: 600 11px/1 var(--mono); }
.wiz-steps li.is-on { background: rgba(255, 255, 255, .14); color: var(--white); }
.wiz-steps li.is-done { color: var(--white); }
.wiz-steps li.is-done::before { content: "✓"; background: var(--win); border-color: var(--white); color: var(--cobalt); }
.wiz-main { display: grid; align-content: start; gap: 18px; padding: clamp(26px, 4vw, 48px); }
.wiz-main h2 { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.04; }
.wiz-intro { max-width: 680px; color: var(--ink-muted); font-size: 17px; line-height: 1.5; }
.wiz-step { display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.wiz-step.is-on { display: grid; animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(18px); } }
.wiz-step legend { display: block; width: 100%; padding: 0; margin-bottom: 14px; font: 700 clamp(20px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.02em; }
.wiz-step legend small { margin-left: 8px; color: var(--ink-muted); font: 500 13px/1 var(--sans); letter-spacing: 0; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 16px 14px 46px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-muted); font-size: 14px; line-height: 1.35; transition: box-shadow .2s, background .2s, transform .2s var(--ease); }
.opt span::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, .3); background: var(--win); transition: background .2s, box-shadow .2s; }
.opt input[type="radio"] + span::before { border-radius: 50%; }
.opt b { color: var(--ink); font-size: 15px; }
.opt:hover span { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.opt input:checked + span { background: #EDEDF0; box-shadow: inset 0 0 0 2px var(--cobalt); }
.opt input:checked + span::before { background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.opt input:focus-visible + span { outline: 3px solid var(--celeste); outline-offset: 2px; }
.wiz-amount { grid-column: 1 / -1; display: grid; gap: 8px; max-width: 420px; margin-top: 6px; color: var(--ink); font-weight: 600; font-size: 14px; }
.wiz-amount small { color: var(--ink-muted); font-weight: 500; }
.wiz-amount input { height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 400 16px/1 var(--sans); }
.wiz-amount input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt); }
.wiz-result { display: grid; gap: 14px; animation: step-in .5s var(--ease); }
.wiz-result[hidden] { display: none; }
.wiz-r-h { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.wiz-r-sub { color: var(--ink-muted); }
.wiz-plan { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pl; }
.wiz-plan li { counter-increment: pl; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); animation: step-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.wiz-plan li::before { content: counter(pl, decimal-leading-zero); color: var(--cobalt); font: 600 12px/1 var(--mono); }
.wiz-plan b { display: block; font: 700 16px/1.2 var(--display); letter-spacing: -.02em; }
.wiz-plan span { color: var(--ink-muted); font-size: 14px; }
.wiz-plan i { padding: 5px 10px; border-radius: 999px; font: 600 11px/1 var(--sans); font-style: normal; white-space: nowrap; }
.wiz-plan .now { background: var(--cobalt); color: var(--white); }
.wiz-plan .later { background: var(--hielo); color: var(--cobalt); }
.wiz-plan .talk { background: #FFF1CC; color: var(--a2); }
.wiz-note { max-width: 640px; color: var(--ink-muted); font-size: 13px; }
.wiz-go { justify-self: start; display: inline-flex; gap: 10px; padding: 14px 22px; border-radius: 999px; background: #128C7E; color: var(--white); font-weight: 700; text-decoration: none; transition: transform .25s var(--ease); }
.wiz-go:hover { transform: translateY(-2px); }
.wiz-nav { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.wiz-count { margin-right: auto; color: var(--ink-muted); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wiz-back[hidden] + .wiz-count { margin-left: 0; }
.wiz-back, .wiz-next { height: 42px; padding: 0 20px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.wiz-back { order: -1; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.wiz-next { background: var(--cobalt); color: var(--white); }
.wiz-next:hover, .wiz-back:hover { transform: translateY(-2px); }
.wiz-next[hidden], .wiz-back[hidden] { display: none; }
@media (max-width: 900px) {
  .wiz { grid-template-columns: minmax(0, 1fr); }
  .wiz-side { grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 18px; }
  .wiz-o { width: 40px; height: 40px; }
  .wiz-steps { grid-template-columns: repeat(4, auto); justify-content: start; gap: 2px; }
  .wiz-steps li { padding: 6px; font-size: 0; }
  .wiz-steps li.is-on { font-size: 13px; }
  .wiz-plan li { grid-template-columns: 28px minmax(0, 1fr); }
  .wiz-plan i { grid-column: 2; justify-self: start; }
}


/* =====================================================================
   Página para jugar: cada sección es un mundo con su color y su juguete.
   ===================================================================== */
html { background: #0B0B0D; }
body { background: transparent; }
[hidden] { display: none !important; }

/* Cada sección, su mundo */
.app-paper { background: radial-gradient(rgba(29, 29, 31, .09) 1px, transparent 1.4px) 0 0 / 22px 22px, #F5F5F7; }
.app-plan { background: linear-gradient(color-mix(in srgb, var(--a) 7%, transparent) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, color-mix(in srgb, var(--a) 7%, transparent) 1px, transparent 1px) 0 0 / 32px 32px, #E8E8ED; }
#propuesta { background: linear-gradient(165deg, var(--a), #1D1D1F); }
.app-stage { background: radial-gradient(60vw 50vw at 72% 50%, #1C1C1E 0%, #111113 45%, #0B0B0D 80%); color: var(--white); }
.app-lilac { background: radial-gradient(70vw 50vw at 20% 0%, #F4F1FF, #E3DEFF 60%, #D9D2FF); }
#contacto { background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(165deg, #0F6B60, #0A3A35); }
.foot { background: #0B0B0D; }
.app-stage .app-label { color: var(--celeste); }
.app-stage h2 { color: var(--white); }
.app-stage h2 em { color: var(--celeste); }

/* ---------- Nosotros: texto + pizarra de imanes ---------- */
.win-about { max-width: 980px; margin-inline: auto; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-tags li { padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 14px/1 var(--sans); }
.about-tags li:last-child { background: var(--cobalt); color: var(--white); box-shadow: none; }
.mini-btn { flex: none; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--cobalt); color: var(--white); font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .2s var(--ease); }
.mini-btn:hover { transform: translateY(-2px); }

/* ---------- Cómo trabajamos: el tablero se juega ---------- */
.board-hint { color: var(--ink-muted); font-size: 15px; }
.board .col { min-height: 270px; }
.col.is-over { box-shadow: inset 0 0 0 2px var(--cobalt); background: var(--a-tint); }
.col.is-done { background: #E5F8EE; box-shadow: inset 0 0 0 2px #1FA35A; }
.col.is-done .col-h span { color: #1FA35A; }
.card { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.card.is-drag { z-index: 6; cursor: grabbing; transition: none; box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--a) 70%, transparent), 0 0 0 2px var(--cobalt); }
.card.is-online { box-shadow: 0 18px 40px -14px rgba(31, 163, 90, .6), 0 0 0 2px #1FA35A; }
.card-next { justify-self: start; margin-top: 2px; padding: 6px 10px; border: 0; border-radius: 7px; background: var(--cobalt); color: var(--white); font: 700 12px/1 var(--sans); cursor: pointer; }
.card.is-online .card-next { background: #1FA35A; }

/* ---------- Servicios: el celular ---------- */
.stage2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 90px); align-items: center; max-width: 1180px; margin-inline: auto; }
.st-copy { display: grid; gap: 14px; }
.st-hint { color: var(--hielo); font-size: 17px; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.app-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 16px; background: rgba(28, 28, 30, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--white); text-align: left; cursor: grab; transition: background .2s, transform .2s var(--ease), box-shadow .2s; }
.app-tile:hover { background: rgba(44, 44, 46, .7); transform: translateY(-2px); }
.app-tile.is-on { background: color-mix(in srgb, var(--a-mid) 22%, transparent); box-shadow: inset 0 0 0 2px var(--celeste); }
.app-tile.is-used .ic::after { content: "✓"; position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #3DDC84; color: var(--ink); font-size: 10px; font-weight: 800; }
.app-tile .ic { width: 44px; height: 44px; flex: none; }
.app-tile .ic svg { width: 24px; height: 24px; }
.app-tile b { display: block; font: 700 15px/1.2 var(--sans); }
.app-tile small { display: block; color: var(--hielo); opacity: .9; font-size: 12.5px; line-height: 1.3; }
.drag-ghost { position: fixed; z-index: 96; left: 0; top: 0; pointer-events: none; transform: translate(var(--gx), var(--gy)) rotate(-8deg) scale(1.15); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.phone-wrap { display: grid; justify-items: center; gap: 18px; }
.phone { position: relative; width: 300px; height: 610px; padding: 12px; border-radius: 54px; background: linear-gradient(160deg, #3A3A3C, #0B0B0D); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 60px 120px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .6); transition: box-shadow .3s, transform .3s var(--ease); }
.phone.is-over { transform: scale(1.03); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 60px 120px -40px rgba(0, 0, 0, .85), 0 0 0 6px var(--celeste); }
.phone-island { position: absolute; z-index: 4; top: 24px; left: 50%; width: 96px; height: 27px; margin-left: -48px; border-radius: 20px; background: #000; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 43px; background: radial-gradient(at 30% 20%, var(--a2), var(--a-night) 55%, #0B0B0D); }
.phone-home { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 74px; color: var(--hielo); text-align: center; }
.ph-time { color: var(--white); font: 200 62px/1 var(--display); letter-spacing: -.04em; }
.phone-home p { margin-top: auto; font: 600 14px/1.3 var(--sans); }
.ph-drop { width: 86px; height: 86px; margin-bottom: 120px; border: 2px dashed rgba(255, 255, 255, .5); border-radius: 22px; animation: drop-pulse 1.8s ease-in-out infinite; }
@keyframes drop-pulse { 50% { transform: scale(1.08); border-color: var(--white); } }
.phone-install { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(0, 0, 0, .88); color: var(--white); font-size: 14px; }
.ph-ring { width: 56px; height: 56px; border: 4px solid rgba(255, 255, 255, .18); border-top-color: var(--celeste); border-radius: 50%; animation: ph-spin .8s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.phone-app { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; padding-top: 56px; background: #0B0B0D; color: var(--white); animation: app-open .35s var(--ease); }
@keyframes app-open { from { transform: scale(.6); opacity: 0; border-radius: 40px; } }
.ph-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 8px; font: 700 15px/1 var(--sans); }
.ph-bar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--white); font-size: 12px; cursor: pointer; }
.ph-demo { position: relative; }
.ph-demo .demo { inset: 8px 14px 14px; }
.ph-info { display: grid; justify-items: center; gap: 10px; max-width: 320px; min-height: 92px; text-align: center; color: var(--hielo); }
.ph-info b { color: var(--white); font: 700 20px/1.1 var(--display); letter-spacing: -.02em; }
.ph-info-d { font-size: 14px; line-height: 1.45; }
.ph-want { padding: 10px 16px; border: 0; border-radius: 999px; background: var(--celeste); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s var(--ease); }
.ph-want:hover { transform: translateY(-2px); }
.ph-want.is-done { background: #3DDC84; }

/* ---------- Ayuda: el asistente ---------- */
.bot { display: grid; gap: 16px; padding: clamp(24px, 4vw, 44px); }
.bot-head { display: grid; gap: 12px; }
.bot-log { display: grid; align-content: start; gap: 10px; min-height: 180px; max-height: 440px; overflow-y: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); scroll-behavior: smooth; }
.b-in, .b-out { max-width: 80%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; animation: step-in .35s var(--ease); }
.b-in { justify-self: start; border-bottom-left-radius: 5px; background: var(--win); box-shadow: 0 1px 2px rgba(29, 29, 31, .08); }
.b-out { justify-self: end; border-bottom-right-radius: 5px; background: var(--cobalt); color: var(--white); }
.b-in a { color: var(--cobalt); font-weight: 700; }
.b-typing { justify-self: start; display: flex; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--win); }
.b-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); animation: dot 1s ease-in-out infinite; }
.b-typing i:nth-child(2) { animation-delay: .15s; }
.b-typing i:nth-child(3) { animation-delay: .3s; }
.bot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-chip { padding: 9px 14px; border: 0; border-radius: 999px; background: var(--win); color: var(--cobalt); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 25%, transparent); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease); }
.bot-chip:hover { background: var(--cobalt); color: var(--white); transform: translateY(-2px); }
.bot-chip.is-used { opacity: .5; }
.bot-form { display: flex; gap: 10px; }
.bot-form input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 400 16px/1 var(--sans); }
.bot-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt); }
.bot-form button { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--cobalt); color: var(--white); cursor: pointer; }
.bot-form button svg { width: 20px; height: 20px; }

/* ---------- Logros ---------- */
.mb-trophy { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(242, 179, 58, .18); color: #FFD36B; font: 600 12px/1 var(--sans); cursor: pointer; transition: background .2s; }
.mb-trophy::before { content: "★"; }
.mb-trophy:hover { background: rgba(242, 179, 58, .3); }
.mb-trophy.is-bump { animation: bump .7s var(--ease); }
@keyframes bump { 30% { transform: scale(1.25); background: #F2B33A; color: var(--ink); } }
.trophies { position: fixed; z-index: 85; top: 42px; right: 12px; width: 320px; padding: 16px; border-radius: 18px; background: rgba(245, 245, 247, .95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); animation: step-in .3s var(--ease); }
.tr-h { font: 700 18px/1 var(--display); letter-spacing: -.02em; }
.trophies ul { display: grid; gap: 6px; margin: 12px 0 10px; padding: 0; list-style: none; }
.trophies li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--win); opacity: .5; }
.trophies li.is-on { opacity: 1; }
.trophies li i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #F2F2F5; color: var(--ink-muted); font-style: normal; }
.trophies li.is-on i { background: linear-gradient(160deg, #FFD36B, #F08A2B); color: var(--white); }
.trophies li b { display: block; font-size: 13px; }
.trophies li small { color: var(--ink-muted); font-size: 12px; }
.tr-foot { color: var(--ink-muted); font-size: 12px; }
.toast { position: fixed; z-index: 90; top: 44px; right: 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 330px; padding: 12px 14px; border-radius: 16px; background: rgba(245, 245, 247, .95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); transform: translateX(calc(100% + 24px)); transition: transform .55s var(--ease); pointer-events: none; }
.toast.is-on { transform: none; }
.toast-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(160deg, #FFD36B, #F08A2B); color: var(--white); font-size: 18px; }
.toast b { display: block; font-size: 14px; }
.toast span span { color: var(--ink-muted); font-size: 13px; }
.confetti { position: fixed; inset: 0; z-index: 95; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; left: 0; top: 0; width: 9px; height: 13px; border-radius: 2px; }

@media (max-width: 900px) {
  .stage2 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .st-copy { justify-self: stretch; }
  .phone { width: 270px; height: 550px; }
  .mb-trophy { order: 5; }
}
@media (max-width: 600px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-tile { gap: 8px; padding: 8px; }
  .app-tile small { display: none; }
  .app-tile .ic { width: 38px; height: 38px; }
  .trophies, .toast { left: 8px; right: 8px; width: auto; }
}

/* =====================================================================
   Fondo de pantalla en toda la página + herramientas con datos reales (escáner, web nueva, competencia)
   ===================================================================== */
/* El fondo de pantalla se ve detrás de todas las secciones: sin fondos de color propios */
.app-paper, .app-plan, #propuesta, .app-stage, .app-lilac, #contacto, .foot { background: transparent; }
.app-stage { color: var(--white); }
.foot { color: var(--hielo); }

/* Portada: "probá con" */
.desk-sub b { color: var(--white); }
.desk-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--hielo); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.desk-try button { padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--white); font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: background .2s, transform .2s var(--ease); }
.desk-try button:hover { background: rgba(255, 255, 255, .26); transform: translateY(-2px); }

/* ---------- Escáner dentro del navegador ---------- */
.scan { position: absolute; inset: 0; z-index: 4; background: #F5F5F7; }
.sv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.sv.is-on { opacity: 1; visibility: visible; }
.sv-shot { overflow: hidden; background: #0B0B0D; }
.scan-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s var(--ease); }
.scan-img.is-on { opacity: 1; }
.scan-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--hielo); font-size: 14px; text-align: center; }
.scan-lock { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: #0B0B0D; color: var(--hielo); font-size: 15px; line-height: 1.45; text-align: center; animation: step-in .5s var(--ease); }
.scan-lock[hidden] { display: none; }
.scan-lock p { max-width: 380px; }
.scan-lock b { color: var(--white); }
.scan-lock-k { color: var(--celeste); font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scan-lock-btn { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #128C7E; color: var(--white); font: 700 14px/1 var(--sans); cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.scan-lock-btn:hover { background: #0F7A6E; transform: translateY(-2px); }
.scan-beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #3DDC84; box-shadow: 0 0 18px 4px rgba(61, 220, 132, .6); opacity: 0; }
.scan.is-scanning .scan-beam { opacity: 1; animation: beam 1.8s ease-in-out infinite; }
@keyframes beam { 0% { transform: translateY(0); } 50% { transform: translateY(calc(var(--h, 380px) - 3px)); } 100% { transform: translateY(0); } }
.sv-report { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 16px 18px; overflow-y: auto; background: var(--win); }
.rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ring { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: rgba(29, 29, 31, .08); }
.ring .fg { stroke: var(--c, #1FA35A); stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: calc(176 - 176 * var(--v, 0) / 100); transition: stroke-dashoffset 1.2s var(--ease); }
.ring b { margin-top: -50px; height: 40px; color: var(--c, #1FA35A); font: 700 18px/40px var(--display); }
.ring span { color: var(--ink-muted); font: 600 11px/1.2 var(--sans); }
.findings { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.findings li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--surface); line-height: 1.35; }
.findings li::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #F08A2B; color: var(--white); font: 800 11px/1 var(--sans); }
.findings li.ok::before { content: "✓"; background: #1FA35A; }
.findings li.note { grid-template-columns: minmax(0, 1fr); color: var(--ink-muted); }
.findings li.note::before { display: none; }
.sv-new { padding: 14px; background: #F2F2F5; }
.nw { --acc: var(--a); --acc2: var(--a-mid); display: flex; flex-direction: column; gap: 6%; height: 100%; padding: 5% 6%; border-radius: 10px; background: var(--win); color: var(--ink); box-shadow: 0 10px 30px -14px rgba(29, 29, 31, .35); overflow: hidden; animation: step-in .5s var(--ease); }
.nw-nav { display: flex; align-items: center; gap: 8px; }
.nw-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: var(--surface); }
.nw-logo[src=""], .nw-logo:not([src]) { display: none; }
.nw-nav b { font: 700 14px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.nw-links { display: flex; gap: 6px; margin-left: auto; }
.nw-links i { width: 20px; height: 5px; border-radius: 3px; background: rgba(29, 29, 31, .18); }
.nw-btn { padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 9px/1 var(--sans); }
.nw-hero { display: grid; justify-items: start; gap: 10px; padding: 6% 5%; border-radius: 10px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--white); }
.nw-kicker { font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.nw-title { max-width: 92%; font: 700 clamp(16px, 1.9vw, 26px)/1.05 var(--display); letter-spacing: -.03em; }
.nw-cta { padding: 8px 14px; border-radius: 999px; background: var(--win); color: var(--acc); font: 700 11px/1 var(--sans); }
.nw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.nw-cards span { display: grid; gap: 5px; padding: 7px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.nw-cards i { aspect-ratio: 16 / 9; border-radius: 5px; background: linear-gradient(135deg, var(--acc2), var(--acc)); opacity: .85; }
.nw-cards b { height: 4px; border-radius: 3px; background: rgba(29, 29, 31, .14); }
.nw-cards b:last-child { width: 60%; }
.nw-badge { position: absolute; right: 22px; bottom: 22px; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 11px/1 var(--sans); box-shadow: 0 8px 20px -8px rgba(29, 29, 31, .6); }
.scan-tabs .scan-cta { background: #128C7E; color: var(--white); text-align: center; }
.scan-tabs .scan-cta:hover { background: #0F7A6E; }
.w-stats.is-score .st-v { font-size: 46px; }
.w-stats.is-score .st-v small { margin-left: 2px; color: var(--ink-muted); font: 600 14px/1 var(--sans); }

/* ---------- Competencia: mapa ---------- */
.cmp { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); min-height: 600px; }
.cmp-side { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); }
.cmp-side h2 { font-size: clamp(28px, 3vw, 44px); }
.cmp-intro { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.cmp-f { display: grid; gap: 6px; color: var(--ink); font-weight: 600; font-size: 13px; }
.cmp-f select, .cmp-f input { height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 400 16px/1 var(--sans); }
.cmp-f select:focus, .cmp-f input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt); }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-go, .cmp-geo, .cmp-want { height: 44px; padding: 0 16px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s var(--ease); }
.cmp-go { background: var(--cobalt); color: var(--white); }
.cmp-geo { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-go:hover, .cmp-geo:hover, .cmp-want:hover { transform: translateY(-2px); }
.cmp-go[disabled] { opacity: .6; cursor: progress; }
.cmp-result { display: grid; gap: 10px; }
.cmp-big { font: 700 clamp(20px, 1.8vw, 28px)/1.12 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.cmp-big em { font-size: 1.6em; }
.cmp-big em { color: var(--cobalt); font-weight: 800; }
.cmp-q { color: var(--ink-muted); font-size: 14px; }
.cmp-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cmp-names li { padding: 5px 9px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.cmp-want { justify-self: start; background: #128C7E; color: var(--white); }
.cmp-err { color: #B4261B; font-size: 14px; }
.cmp-map { position: relative; isolation: isolate; z-index: 0; min-height: 420px; background: #E8E8ED; }
.cmp-map .leaflet-container { position: absolute; inset: 0; background: #E8E8ED; font: inherit; }
.cmp-map .leaflet-tile-pane { filter: grayscale(.85) brightness(1.04) contrast(.95); }
.cmp-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink-muted); }
.cmp-empty svg { width: 64px; height: 64px; color: var(--cobalt); opacity: .35; animation: drop-pulse 1.8s ease-in-out infinite; }
.pin-me { width: 22px; height: 22px; border-radius: 50%; background: #F2B33A; box-shadow: 0 0 0 4px rgba(242, 179, 58, .35), 0 0 0 10px rgba(242, 179, 58, .15); }
.cmp-map .leaflet-popup-content { font: 600 13px/1.3 var(--sans); }

@media (max-width: 900px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .cmp-map { min-height: 360px; }
  .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .w-chat { display: none; }
}
@media (max-width: 900px) {
  .menubar { gap: 12px; }
  .mb-menu, .mb-status { display: none; }
  .desk { display: grid; gap: 18px; padding: 54px var(--gutter) 110px; }
  .desk-copy { position: static; order: -1; width: auto; max-width: none; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
  .desk-kicker { font-size: 11px; }
  .addr-url { display: none; }
  .desk-icons { display: none; }
  .desk .win { position: relative; left: auto; top: auto; width: 100%; }
  .w-chat, .w-term { display: none; }
  .w-stats { width: 100%; }
  .notif { top: auto; bottom: 96px; right: var(--gutter); left: var(--gutter); width: auto; position: fixed; }
  .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col, .board .col { min-height: 0; }
  .board .col.is-on { padding-bottom: calc(var(--card-h, 130px) + 28px); }
  .finder { grid-template-columns: minmax(0, 1fr); }
  .finder-side { display: none; }
  .finder-cols { display: none; }
  .file { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; }
  .file .tag-c, .file .tag-g { display: none; }
  .file-d { grid-column: 2; }
  .wa { grid-template-columns: minmax(0, 1fr); }
  .wa-side { display: none; }
  .wa-head .app-label { display: none; }
}
@media (max-width: 600px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .wa-send b { display: none; }
  .wa-send { padding: 0 13px; }
  /* En celular entran las ocho apps sin deslizar (como el dock de un teléfono: sin nombres) y WhatsApp siempre a la vista */
  .dock { justify-content: space-between; gap: 0; padding: 7px 8px; border-radius: 22px; width: calc(100vw - 16px); }
  .dock-h, .dock-l { display: none; }
  .dock-app { flex: 1 1 0; width: auto; min-width: 0; }
  .ic { width: min(40px, 10vw); height: min(40px, 10vw); border-radius: 11px; }
  .ic svg { width: 21px; height: 21px; }
  .dock-sep { margin: 4px 2px; }
  .dock-app.is-open .ic::after { bottom: -5px; }
  .ic svg { filter: none; }
  .tab { font-size: 10px; padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 600px) { .mb-clock { display: none; } .mb-app { white-space: nowrap; } }

/* La portada se despeja: el escáner reemplaza a la ventanita del chat */
.desk .w-chat { display: none; }

/* =====================================================================
   Ventanas de las secciones: se arrastran por la barra y los tres botones responden
   ===================================================================== */
main .lights i { position: relative; cursor: pointer; }
main .lights i::after { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(0, 0, 0, .55); font: 800 10px/1 var(--sans); opacity: 0; transition: opacity .15s; }
main .lights i:nth-child(1)::after { content: "×"; }
main .lights i:nth-child(2)::after { content: "–"; }
main .lights i:nth-child(3)::after { content: "+"; }
main .win-bar:hover .lights i::after { opacity: 1; }
main .win.is-held { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .25); }
main .win.is-settle { transition: translate .55s var(--ease), rotate .35s var(--ease), opacity .8s var(--ease), transform .9s var(--ease) !important; }
main .win.is-min > :not(.win-bar) { display: none; }
main .win.is-min { max-width: 420px; }
main .win.is-nope { animation: nope .45s var(--ease); }
@keyframes nope { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.win-hint { margin-left: auto; color: var(--ink-muted); font: 500 11px/1 var(--mono); letter-spacing: .04em; opacity: 0; transition: opacity .2s; white-space: nowrap; }
main .win-bar:hover .win-hint { opacity: .8; }
@media (max-width: 900px) { .win-hint { display: none; } main .win-bar { cursor: default; } }
.is-party .wall { animation: party-hue 1.2s linear infinite; }
@keyframes party-hue { to { filter: hue-rotate(360deg); } }

/* Celular: el pie se lee siempre sobre el fondo */
@media (max-width: 900px) {
  .foot { padding-bottom: 96px; background: rgba(0, 0, 0, .88); opacity: 1; }
}

/* =====================================================================
   Capa Mac: arranque, menú de la app, Spotlight, clic derecho, "Acerca de", selección en el escritorio
   ===================================================================== */
/* Fondos de pantalla: el mismo diseño en otros tonos */
.wall { transition: filter 1.2s var(--ease); }
.wall[data-tone="sepia"] { filter: sepia(.6) saturate(.8) brightness(.9); }
.wall[data-tone="oliva"] { filter: hue-rotate(40deg) saturate(.9); }
.wall[data-tone="atardecer"] { filter: hue-rotate(-18deg) saturate(1.35) brightness(1.05); }
.wall[data-tone="noche"] { filter: brightness(.5) saturate(.8); }

/* Barra de menú: menú de la app, wifi, batería y lupa */
.mb-am { position: relative; }
.mb-app { padding: 4px 8px; margin: 0 -8px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: default; }
.mb-app:hover, .mb-app[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.mb-drop, .ctx { position: absolute; z-index: 90; min-width: 240px; padding: 5px; border-radius: 10px; background: rgba(245, 245, 247, .82); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 0 0 1px rgba(29, 29, 31, .12), 0 20px 50px -12px rgba(0, 0, 0, .55); color: var(--ink); transform-origin: top left; animation: menu-in .16s var(--ease); }
.mb-drop { top: 30px; left: -8px; }
.ctx { position: fixed; }
.mb-drop[hidden], .ctx[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.mb-drop button, .ctx button { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; padding: 6px 10px; border: 0; border-radius: 5px; background: none; color: inherit; font: 500 13px/1.2 var(--sans); text-align: left; cursor: default; }
.mb-drop button:hover, .mb-drop button:focus-visible, .ctx button:hover, .ctx button:focus-visible { outline: none; background: var(--cobalt); color: var(--white); }
.mb-drop hr, .ctx hr { margin: 4px 8px; border: 0; border-top: 1px solid rgba(29, 29, 31, .12); }
.mb-drop kbd, .ctx kbd { color: inherit; font: 500 12px/1 var(--sans); opacity: .55; }
.ctx-h { margin: 0; padding: 6px 10px 2px; color: var(--ink-muted); font: 600 11px/1 var(--sans); }
.ctx-tones { display: flex; gap: 8px; padding: 6px 10px 8px; }
.ctx .ctx-tones button { width: 26px; height: 26px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1px rgba(29, 29, 31, .2); transition: transform .15s var(--ease); }
.ctx .ctx-tones button:hover, .ctx .ctx-tones button:focus-visible { background: var(--c); transform: scale(1.14); }
.ctx .ctx-tones button.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--cobalt); }
.mb-sys { display: flex; align-items: center; gap: 12px; opacity: .9; }
.mb-sys svg { width: 17px; height: 12px; }
.mb-bat { position: relative; display: block; width: 24px; height: 11px; padding: 1.5px; border-radius: 3.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.mb-bat::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .6); }
.mb-bat i { display: block; width: var(--bat, 80%); height: 100%; border-radius: 2px; background: var(--win); }
.mb-bat.is-low i { background: #FF5F57; }
.mb-spot { display: grid; place-items: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--white); cursor: pointer; }
.mb-spot:hover { background: rgba(255, 255, 255, .16); }
.mb-spot svg { width: 15px; height: 15px; }

/* Arranque */
.boot { position: fixed; z-index: 200; inset: 0; display: none; place-content: center; justify-items: center; gap: 46px; background: #000000; color: var(--white); }
.js.is-booting .boot, .boot.is-out { display: grid; }
.boot svg { width: 84px; height: 84px; }
.boot-bar { width: 190px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.boot-bar i { display: block; height: 100%; border-radius: inherit; background: var(--win); transform: scaleX(0); transform-origin: left; animation: boot-load 1.15s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes boot-load { 30% { transform: scaleX(.35); } 55% { transform: scaleX(.42); } to { transform: scaleX(1); } }
.boot.is-out { animation: boot-out .55s var(--ease) forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

/* Spotlight */
.spot { position: fixed; z-index: 150; inset: 0; display: grid; justify-items: center; align-content: start; padding: 16vh 16px 0; background: rgba(0, 0, 0, .25); }
.spot[hidden] { display: none; }
.spot-box { width: min(640px, 100%); overflow: hidden; border-radius: 16px; background: rgba(245, 245, 247, .86); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 100px -20px rgba(0, 0, 0, .7); color: var(--ink); animation: spot-in .22s var(--ease); }
@keyframes spot-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.spot-in { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px; }
.spot-in svg { flex: none; width: 24px; height: 24px; color: var(--ink-muted); }
.spot-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 22px/1 var(--sans); }
.spot-in kbd { padding: 3px 6px; border-radius: 5px; background: rgba(29, 29, 31, .08); color: var(--ink-muted); font: 500 11px/1 var(--mono); }
.spot-list { max-height: min(52vh, 420px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-top: 1px solid rgba(29, 29, 31, .1); }
.spot-list:empty { display: none; }
.spot-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.spot-list li.is-on { background: var(--cobalt); color: var(--white); }
.spot-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--win); color: var(--cobalt); font: 700 16px/1 var(--sans); box-shadow: 0 2px 6px -2px rgba(29, 29, 31, .3); }
.spot-ico svg { width: 20px; height: 20px; }
.spot-list b { display: block; overflow: hidden; font: 600 15px/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.spot-list small { display: block; color: var(--ink-muted); font: 400 12.5px/1.3 var(--sans); }
.spot-list li.is-on small { color: rgba(255, 255, 255, .75); }
.spot-list em { color: var(--ink-muted); font: 500 11px/1 var(--mono); font-style: normal; }
.spot-list li.is-on em { color: rgba(255, 255, 255, .7); }
.spot-list .spot-calc b { font: 700 26px/1.1 var(--display); letter-spacing: -.02em; }
.spot-foot { display: flex; justify-content: flex-end; gap: 16px; margin: 0; padding: 8px 16px; border-top: 1px solid rgba(29, 29, 31, .08); color: var(--ink-muted); font: 500 11px/1 var(--mono); }

/* Acerca de nowmad agency */
.about { position: fixed; z-index: 140; left: 50%; top: 50%; width: min(320px, calc(100vw - 32px)); transform: translate(-50%, -50%); animation: about-in .3s var(--ease); }
.about[hidden] { display: none; }
@keyframes about-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.95); } }
.about .win-bar { border: 0; background: var(--win); }
.about-body { display: grid; justify-items: center; gap: 6px; padding: 4px 26px 26px; text-align: center; }
.about-logo { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 8px; border-radius: 22px; background: linear-gradient(160deg, var(--a-fold), #1D1D1F); color: var(--white); box-shadow: 0 14px 30px -12px rgba(44, 44, 46, .8); }
.about-logo svg { width: 52px; height: 52px; }
.about h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.about-v { margin: 0 0 12px; color: var(--ink-muted); font-size: 12px; }
.about dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; width: 100%; margin: 0 0 16px; font-size: 12.5px; text-align: left; }
.about dt { color: var(--ink); font-weight: 700; text-align: right; }
.about dd { margin: 0; color: var(--ink-muted); }
.about-cta { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--cobalt); color: var(--white); font: 600 13px/1 var(--sans); cursor: pointer; }

/* Selección en el escritorio (arrastrando sobre el fondo) */
.marquee { position: fixed; z-index: 60; border: 1px solid color-mix(in srgb, var(--a-mid) 90%, transparent); border-radius: 2px; background: color-mix(in srgb, var(--a-mid) 18%, transparent); pointer-events: none; }
.desk-icons a.is-sel > svg { border-radius: 8px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.desk-icons a.is-sel span { background: var(--cobalt); }

@media (max-width: 900px) {
  .mb-sys { display: none; }
  .spot { padding-top: 10vh; }
  .spot-in input { font-size: 18px; }
}

/* Mientras arranca, la portada espera para animarse */
.is-booting .desk .win, .is-booting .desk-icons { animation-play-state: paused !important; }
.is-marquee, .is-marquee * { -webkit-user-select: none; user-select: none; }


/* Barra de menú: nunca en dos renglones; en notebooks se guardan los textos menos importantes */
.menubar a, .menubar b, .menubar button, .menubar span { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1480px) { .mb-status { display: none; } .menubar { gap: 18px; } .mb-menu { gap: 16px; } }
@media (min-width: 901px) and (max-width: 1320px) { .mb-other, .mb-sys { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) {
  .mb-menu a:nth-child(n+5) { display: none; }
  .desk-icons { display: none; }
  .desk-copy { width: 42vw; }
  .desk-title { font-size: clamp(36px, 4.3vw, 60px); }
  .w-browser { --x: 48vw; width: 49vw; }
  .desk .w-stats, .desk .w-term { display: none; }
}
@media (min-width: 1181px) and (max-height: 700px) { .desk .w-term { display: none; } }

/* Títulos que van directo sobre el fondo: una sombra suave para que se lean sobre cualquier fondo */
.app-stage h2, .app-stage .app-label, .app-stage p { text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .6); }
@media (max-width: 900px) { .mb-other { display: none; } }

/* Nombre en la barra con la letra de la marca, como "nowmad explorers" en la página de Facu */
.mb-word { font: 800 13px/1 var(--brand); letter-spacing: -.03em; }
.mb-word-b { font: 300 13px/1 var(--brand); letter-spacing: -.02em; opacity: .85; }

/* =====================================================================
   Demos del dock (vista previa): cada una cuenta una historia corta y se repite cada 8 s.
   Solo CSS: las mismas demos se clonan en el celular de "Apps", así que no dependen de JS.
   Al final de cada animación queda el estado completo (con movimiento reducido se ve eso).
   ===================================================================== */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@counter-style pad3 { system: extends decimal; pad: 3 "0"; }
:root { --ease-move: cubic-bezier(.77, 0, .175, 1); }

/* Contadores: el número sube de 0 a --to */
.demo .cnt { --n: var(--to); counter-reset: n var(--n); font-variant-numeric: tabular-nums; }
.demo .cnt::after { content: counter(n); }
.demo .cnt.pad3::after { content: counter(n, pad3); }
.demo.is-on .cnt { animation: x-count 1.4s var(--ease) var(--d, .2s) both; }
@keyframes x-count { from { --n: 0; } to { --n: var(--to); } }

@keyframes x-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes x-pop { from { opacity: 0; transform: scale(.9); } }
@keyframes x-fade { from { opacity: 0; } }
@keyframes x-grow-x { from { transform: scaleX(0); } }
@keyframes x-grow-y { from { transform: scaleY(0); } }
@keyframes x-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes x-blink { 50% { opacity: 0; } }
@keyframes x-press { 45% { transform: scale(.92); } }
@keyframes x-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

/* Cursor que se mueve y hace clic */
.x-cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 18px; height: 18px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); pointer-events: none; transform: translate(var(--x1), var(--y1)); }
.demo.is-on .x-cursor { animation: x-cur 1s var(--ease-move) var(--cd) both, x-click .3s ease-out calc(var(--cd) + 1.05s) both; }
@keyframes x-cur { from { opacity: 0; transform: translate(var(--x0), var(--y0)); } 20% { opacity: 1; } to { transform: translate(var(--x1), var(--y1)); } }
@keyframes x-click { 50% { scale: .8; } }

/* ---------- Webs: la URL se escribe, la web se arma, el cursor compra y suben los puntajes ---------- */
.xw-browser { position: relative; border-radius: 12px; overflow: hidden; background: #FFFFFF; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .7); }
.xw-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #F2F2F5; }
.xw-bar > i { width: 7px; height: 7px; border-radius: 50%; background: rgba(29, 29, 31, .22); }
.xw-url { flex: 1; min-width: 0; margin-left: 6px; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; color: var(--ink-muted); font: 500 10.5px/1.2 var(--mono); white-space: nowrap; overflow: hidden; }
.xw-url b { display: inline-block; font-weight: 500; }
.xw-page { display: grid; gap: 8px; padding: 12px; color: var(--ink); }
.xw-nav { display: flex; justify-content: space-between; align-items: center; }
.xw-logo { font: 700 11px/1 var(--display); letter-spacing: -.02em; }
.xw-links { display: flex; gap: 6px; }
.xw-links i { width: 20px; height: 5px; border-radius: 3px; background: rgba(29, 29, 31, .18); }
.xw-hero { position: relative; display: grid; justify-items: start; gap: 7px; padding: 12px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1D1D1F, var(--a) 55%, var(--a-mid)); color: var(--white); }
.xw-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-110%); }
.xw-kicker { padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 500 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.xw-h { max-width: 92%; font: 700 15px/1.1 var(--display); letter-spacing: -.03em; }
.xw-btn { position: relative; padding: 8px 13px; border-radius: 999px; background: var(--celeste); color: var(--ink); font: 700 11px/1 var(--sans); }
.xw-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--celeste); opacity: 0; }
.xw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xw-cards i { aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(135deg, var(--a-mid), #E8E8ED); }
.xw-cards i:nth-child(2) { background: linear-gradient(135deg, var(--a-mid), var(--a-mid)); }
.xw-cards i:nth-child(3) { background: linear-gradient(135deg, var(--a), var(--a-mid)); }
.xw-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xw-ring { display: grid; justify-items: center; gap: 5px; color: var(--hielo); font-size: 10.5px; }
.xw-ring span { --p: var(--to); position: relative; display: grid; place-items: center; width: 46px; aspect-ratio: 1; }
.xw-ring span::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#3DDC84 calc(var(--p) * 1%), rgba(232, 232, 237, .12) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.xw-ring b { color: var(--white); font: 700 13px/1 var(--mono); }
.demo-web .x-cursor { --x0: 300px; --y0: 250px; --x1: 60px; --y1: 158px; --cd: 2.3s; }
.demo-web.is-on .xw-url b { animation: x-type 1s steps(16) .2s both; }
@keyframes x-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.demo-web.is-on .xw-nav { animation: x-in .45s var(--ease) 1s both; }
.demo-web.is-on .xw-hero { animation: x-pop .55s var(--ease) 1.15s both; }
.demo-web.is-on .xw-hero > * { animation: x-in .45s var(--ease) both; }
.demo-web.is-on .xw-kicker { animation-delay: 1.35s; }
.demo-web.is-on .xw-h { animation-delay: 1.45s; }
.demo-web.is-on .xw-btn { animation: x-in .45s var(--ease) 1.6s both, x-press .3s ease-out 3.35s both; }
.demo-web.is-on .xw-btn::after { animation: x-ping .6s ease-out 3.4s both; }
.demo-web.is-on .xw-hero::after { animation: x-shine 1s ease-in-out 1.9s both; }
@keyframes x-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.demo-web.is-on .xw-cards i { animation: x-in .45s var(--ease) both; }
.demo-web.is-on .xw-cards i:nth-child(1) { animation-delay: 1.75s; }
.demo-web.is-on .xw-cards i:nth-child(2) { animation-delay: 1.85s; }
.demo-web.is-on .xw-cards i:nth-child(3) { animation-delay: 1.95s; }
.demo-web.is-on .xw-ring { animation: x-in .45s var(--ease) var(--d) both; }
.demo-web.is-on .xw-ring span { animation: x-ring 1.3s var(--ease) var(--d) both; }
@keyframes x-ring { from { --p: 0; } to { --p: var(--to); } }

/* ---------- Sistemas: panel en vivo, entra un pedido y cambia un estado ---------- */
.xs-top { display: flex; justify-content: space-between; align-items: center; color: var(--hielo); font: 500 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.xs-live { display: inline-flex; align-items: center; gap: 6px; color: #3DDC84; }
.xs-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.xs-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC84; }
.demo-sys.is-on .xs-live i::after, .demo-ia.is-on .xi-head small i::after { animation: x-ping 1.4s ease-out infinite; }
.xs-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xs-kpis p { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(232, 232, 237, .06); }
.xs-kpis small { color: var(--hielo); opacity: .7; font-size: 11px; }
.xs-kpis b { font: 700 24px/1.1 var(--display); letter-spacing: -.03em; }
.xs-kpis em { color: #3DDC84; font: 600 10.5px/1 var(--mono); font-style: normal; }
.xs-chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding: 8px 10px 0; border-radius: 12px; background: rgba(232, 232, 237, .04); }
.xs-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--a-mid) 35%, transparent); transform-origin: bottom; }
.xs-chart i.is-now { background: linear-gradient(var(--celeste), var(--cobalt-2)); }
.xs-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xs-rows li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(232, 232, 237, .05); font-size: 12px; }
.xs-rows span { color: var(--celeste); font: 500 11px/1 var(--mono); }
.xs-rows em { font-style: normal; color: var(--hielo); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-rows i, .xs-swap b { padding: 4px 8px; border-radius: 999px; font: 600 10px/1 var(--sans); font-style: normal; }
.xs-rows .ok { background: rgba(61, 220, 132, .14); color: #3DDC84; }
.xs-rows .wait { background: rgba(242, 179, 58, .14); color: #F2B33A; }
.xs-rows .xs-swap { display: grid; padding: 0; background: none; }
.xs-swap b { grid-area: 1 / 1; text-align: center; }
.xs-swap .wait { opacity: 0; }
.xs-new { background: color-mix(in srgb, var(--a-mid) 14%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-mid) 35%, transparent); }
.xs-toast { position: absolute; z-index: 3; top: 0; left: 50%; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 9px 14px; border-radius: 12px; background: var(--win); color: var(--ink); font-size: 12px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, -120%); }
.xs-toast i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.demo-sys.is-on .xs-kpis p { animation: x-in .45s var(--ease) both; }
.demo-sys.is-on .xs-kpis p:nth-child(2) { animation-delay: .1s; }
.demo-sys.is-on .xs-chart i { animation: x-grow-y .6s var(--ease) both; }
.demo-sys.is-on .xs-chart i:nth-child(1) { animation-delay: .35s; }
.demo-sys.is-on .xs-chart i:nth-child(2) { animation-delay: .41s; }
.demo-sys.is-on .xs-chart i:nth-child(3) { animation-delay: .47s; }
.demo-sys.is-on .xs-chart i:nth-child(4) { animation-delay: .53s; }
.demo-sys.is-on .xs-chart i:nth-child(5) { animation-delay: .59s; }
.demo-sys.is-on .xs-chart i:nth-child(6) { animation-delay: .65s; }
.demo-sys.is-on .xs-chart i:nth-child(7) { animation: x-grow-y .6s var(--ease) .71s both, x-bump .5s var(--ease) 2.7s both; }
@keyframes x-bump { 40% { transform: scaleY(1.08); } }
/* las filas viejas arrancan arriba y se corren cuando entra el pedido nuevo */
.demo-sys.is-on .xs-rows li:not(.xs-new) { animation: x-fade .4s ease-out .9s both, x-down .5s var(--ease-move) 2.7s both; }
.demo-sys.is-on .xs-rows li:nth-child(3) { animation-delay: 1s, 2.7s; }
@keyframes x-down { from { transform: translateY(-42px); } }
.demo-sys.is-on .xs-new { animation: x-pop .45s var(--ease) 2.95s both; }
.demo-sys.is-on .xs-toast { animation: x-toast 3s var(--ease) 2.5s both; }
@keyframes x-toast { 0% { opacity: 0; transform: translate(-50%, -120%); } 14%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -120%); } }
.demo-sys.is-on .xs-swap .wait { animation: x-swap-out .35s ease-out 3.9s both; }
.demo-sys.is-on .xs-swap .ok { animation: x-swap-in .4s var(--ease) 3.95s both; }
@keyframes x-swap-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes x-swap-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* ---------- IA: el asistente escribe, ofrece horarios y confirma el turno ---------- */
.demo-ia { gap: 8px; }
.xi-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(232, 232, 237, .08); }
.xi-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, #C9A5FF, #7B5CF0); color: var(--white); }
.xi-av svg { width: 16px; height: 16px; }
.xi-head > span:last-child { display: grid; gap: 2px; }
.xi-head b { font-size: 13px; }
.xi-head small { display: flex; align-items: center; gap: 5px; color: #3DDC84; font-size: 10.5px; }
.xi-head small i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #3DDC84; }
.xi-head small i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC84; }
.xi-msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 1.35; }
.xi-in { justify-self: end; border-bottom-right-radius: 4px; background: var(--cobalt); color: var(--white); transform-origin: right bottom; }
.xi-out { justify-self: start; border-bottom-left-radius: 4px; background: rgba(232, 232, 237, .1); color: var(--hielo); transform-origin: left bottom; }
.xi-slot { display: grid; justify-items: start; }
.xi-slot > * { grid-area: 1 / 1; }
.xi-typing { display: flex; gap: 4px; padding: 11px 13px; border-radius: 16px 16px 16px 4px; background: rgba(232, 232, 237, .1); opacity: 0; }
.xi-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--hielo); }
.demo-ia.is-on .xi-typing i { animation: x-dot 1s ease-in-out infinite; }
.demo-ia.is-on .xi-typing i:nth-child(2) { animation-delay: .15s; }
.demo-ia.is-on .xi-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes x-dot { 50% { transform: translateY(-4px); opacity: .4; } }
.xi-chips { display: flex; gap: 6px; }
.xi-chips span { padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-mid) 45%, transparent); color: var(--celeste); font: 600 12px/1 var(--mono); }
.xi-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .3); }
.xi-cal { display: grid; justify-items: center; width: 38px; padding: 4px 0; border-radius: 8px; background: var(--win); color: var(--ink); line-height: 1; }
.xi-cal small { color: #C23B22; font: 700 8.5px/1.2 var(--mono); text-transform: uppercase; }
.xi-cal b { font: 700 16px/1.1 var(--display); }
.xi-card p { display: grid; gap: 2px; }
.xi-card p b { font-size: 13px; }
.xi-card p small { color: var(--hielo); opacity: .75; font-size: 11px; }
.xi-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3DDC84; color: #0E2A18; }
.xi-ok svg { width: 15px; height: 15px; }
.xi-ok path { stroke-dasharray: 1; }
.demo-ia.is-on .xi-in { animation: x-pop .35s var(--ease) var(--t) both; }
.demo-ia.is-on .xi-typing { animation: x-typing 1s ease-out var(--t) both; }
.demo-ia.is-on .xi-slot .xi-out { animation: x-pop .35s var(--ease) calc(var(--t) + 1s) both; }
@keyframes x-typing { 0% { opacity: 0; transform: scale(.9); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo-ia.is-on .xi-chips span { animation: x-pop .35s var(--ease) both; }
.demo-ia.is-on .xi-chips span:nth-child(1) { animation-delay: 2s; }
.demo-ia.is-on .xi-chips span:nth-child(2) { animation: x-pop .35s var(--ease) 2.08s both, x-pick .35s var(--ease) 3s both; }
.demo-ia.is-on .xi-chips span:nth-child(3) { animation-delay: 2.16s; }
@keyframes x-pick { 40% { transform: scale(.92); } to { background: var(--celeste); color: var(--ink); } }
.demo-ia.is-on .xi-card { animation: x-pop .45s var(--ease) 5s both; }
.demo-ia.is-on .xi-ok { animation: x-pop .35s var(--ease) 5.25s both; }
.demo-ia.is-on .xi-ok path { animation: x-draw .4s var(--ease) 5.4s both; }

/* ---------- Google Ads: se busca, tu anuncio entra primero y llegan los clics ---------- */
.demo-google { gap: 10px; }
.xg-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--win); color: var(--ink); font-size: 13px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.xg-search svg { width: 15px; height: 15px; flex: none; color: var(--ink-muted); }
.xg-q { white-space: nowrap; }
.xg-caret { width: 2px; height: 15px; margin-left: -6px; background: var(--cobalt); }
.demo-google.is-on .xg-caret { animation: x-blink .9s steps(1) infinite; }
.xg-list { display: grid; gap: 8px; }
.xg-res { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: rgba(232, 232, 237, .05); }
.xg-res small { color: var(--hielo); opacity: .6; font-size: 10.5px; }
.xg-res strong { color: var(--a-light); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.xg-res em { font-style: normal; color: var(--hielo); opacity: .7; font-size: 11.5px; }
.xg-ad { position: relative; overflow: hidden; background: color-mix(in srgb, var(--a-mid) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-mid) 50%, transparent); }
.xg-ad small { opacity: 1; color: var(--celeste); }
.xg-ad small b { font-weight: 700; }
.xg-ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); transform: translateX(-110%); }
.xg-ext { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.xg-ext i { padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--a-mid) 16%, transparent); color: var(--celeste); font: 600 10px/1 var(--sans); font-style: normal; }
.xg-rest { display: grid; gap: 8px; }
.xg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xg-stats p { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(61, 220, 132, .1); }
.xg-stats small { color: var(--hielo); opacity: .75; font-size: 10.5px; }
.xg-stats b { color: #3DDC84; font: 700 18px/1.1 var(--display); letter-spacing: -.02em; }
.demo-google .x-cursor { --x0: 290px; --y0: 330px; --x1: 150px; --y1: 82px; --cd: 2.85s; }
.demo-google.is-on .xg-q { animation: x-type 1.1s steps(20) .2s both; }
.demo-google.is-on .xg-rest { animation: x-fade .4s ease-out 1.4s both, x-shift .55s var(--ease-move) 2.05s both; }
@keyframes x-shift { from { transform: translateY(var(--gshift, -102px)); } }
.demo-google.is-on .xg-ad { animation: x-adin .5s var(--ease) 2.15s both, x-press .3s ease-out 3.9s both; }
@keyframes x-adin { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.demo-google.is-on .xg-ad::after { animation: x-shine 1s ease-in-out 2.6s both; }
.demo-google.is-on .xg-stats p { animation: x-in .45s var(--ease) both; }
.demo-google.is-on .xg-stats p:nth-child(1) { animation-delay: 4s; }
.demo-google.is-on .xg-stats p:nth-child(2) { animation-delay: 4.1s; }
.demo-google.is-on .xg-stats p:nth-child(3) { animation-delay: 4.2s; }

/* ---------- Meta Ads: la historia, los corazones, el toque en comprar y la venta ---------- */
.demo-meta { align-content: stretch; justify-items: center; grid-template-rows: minmax(0, 1fr); }
.xm-phone { position: relative; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; padding: 12px 10px 10px; border-radius: 26px; background: linear-gradient(165deg, var(--a-deep), var(--a-mid) 55%, var(--a-light)); color: var(--white); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.xm-bars { display: flex; gap: 3px; }
.xm-bars i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.xm-bars i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.demo-meta.is-on .xm-bars i::after { animation: x-bar 1.8s linear both; }
.demo-meta.is-on .xm-bars i:nth-child(2)::after { animation-delay: 1.8s; }
.demo-meta.is-on .xm-bars i:nth-child(3)::after { animation-delay: 3.6s; }
@keyframes x-bar { to { transform: scaleX(1); } }
.xm-who { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.xm-who i { width: 20px; height: 20px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 2px var(--a-light); }
.xm-who small { opacity: .8; font-size: 9px; }
.xm-media { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
.xm-prod { width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--a-mid) 60%, var(--a)); box-shadow: 0 16px 24px -10px rgba(0, 0, 0, .5); }
.demo-meta.is-on .xm-prod { animation: x-pop .5s var(--ease) .3s both, x-float 2.4s ease-in-out .8s infinite; }
@keyframes x-float { 50% { transform: translateY(-6px) rotate(-4deg); } }
.xm-media b { font: 700 16px/1.05 var(--display); letter-spacing: -.02em; }
.xm-media small { font-size: 10.5px; opacity: .9; }
.xm-likes { font: 600 11px/1 var(--sans); }
.xm-likes > span:first-child { color: #FF5A7A; }
.xm-cta { position: relative; padding: 10px; border-radius: 12px; background: var(--win); color: var(--ink); font: 700 12px/1 var(--sans); text-align: center; }
.xm-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--win); opacity: 0; }
.xm-hearts { position: absolute; right: 22px; bottom: 70px; width: 20px; height: 20px; }
.xm-hearts i { position: absolute; inset: 0; opacity: 0; }
.xm-hearts i::before { content: "♥"; display: block; color: #FF5A7A; font-size: 18px; line-height: 1; }
.demo-meta.is-on .xm-hearts i { animation: x-heart 1.5s ease-out var(--d) both; }
@keyframes x-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; transform: translate(0, -10px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--x), -130px) scale(.9); } }
.xm-notif { position: absolute; z-index: 2; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 11px; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-130%); }
.xm-notif i { width: 18px; height: 18px; flex: none; border-radius: 6px; background: linear-gradient(140deg, #3DDC84, #1FA35A); }
.demo-meta.is-on .xm-who, .demo-meta.is-on .xm-likes { animation: x-fade .4s ease-out .2s both; }
.demo-meta.is-on .xm-media b, .demo-meta.is-on .xm-media small { animation: x-in .45s var(--ease) .55s both; }
.demo-meta.is-on .xm-cta { animation: x-in .45s var(--ease) .9s both, x-press .3s ease-out 3.4s both; }
.demo-meta.is-on .xm-cta::after { animation: x-ping .6s ease-out 3.45s both; }
.demo-meta.is-on .xm-notif { animation: x-drop .5s var(--ease) 3.9s both; }
@keyframes x-drop { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }

/* ---------- Automatizar: un pulso recorre la cadena y prende cada paso ---------- */
.demo-auto { gap: 10px; }
.xa-h { color: var(--hielo); font: 600 13px/1.3 var(--sans); }
.xa-wrap { position: relative; }
.xa-wrap::before, .xa-fill { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 2px; background: color-mix(in srgb, var(--a-mid) 20%, transparent); }
.xa-fill { background: var(--celeste); transform-origin: top; }
.xa-run { position: absolute; left: 13px; top: 22px; bottom: 22px; width: 10px; }
.xa-run::before { content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a-mid) 35%, transparent), 0 0 16px 4px color-mix(in srgb, var(--a-mid) 70%, transparent); opacity: 0; }
.xa-flow { position: relative; display: grid; gap: 8px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.xa-flow li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 6px 10px 6px 0; border-radius: 10px; }
.xa-flow i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--celeste); color: var(--ink); font: 600 10px/1 var(--mono); font-style: normal; box-shadow: 0 0 0 3px #0B0B0D; }
.xa-flow b { font-size: 13.5px; }
.xa-flow span { color: var(--hielo); opacity: .65; font-size: 11.5px; }
.xa-flow li:last-child { background: rgba(61, 220, 132, .12); }
.xa-foot { color: #3DDC84; font: 600 12px/1.3 var(--mono); letter-spacing: .04em; }
.xa-notif { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-120%); }
.xa-app { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--ink); color: var(--celeste); }
.xa-app svg { width: 18px; height: 18px; }
.xa-notif p { display: grid; gap: 1px; }
.xa-notif small { color: var(--ink-muted); font-size: 10.5px; }
.xa-notif b { font-size: 13px; }
.demo-auto.is-on .xa-fill { animation: x-grow-y 3.2s linear .4s both; }
.demo-auto.is-on .xa-run { animation: x-run 3.2s linear .4s both; }
.demo-auto.is-on .xa-run::before { animation: x-runner 3.4s linear .3s both; }
@keyframes x-run { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes x-runner { 0%, 100% { opacity: 0; } 5%, 92% { opacity: 1; } }
.demo-auto.is-on .xa-flow li { animation: x-step .4s ease-out var(--t) both; }
.demo-auto.is-on .xa-flow li i { animation: x-node .5s var(--ease) var(--t) both; }
@keyframes x-step { from { opacity: .3; } }
@keyframes x-node { from { background: #1C1C1E; color: var(--celeste); } 50% { transform: scale(1.25); } }
.demo-auto.is-on .xa-flow li:last-child { animation: x-step .4s ease-out 3.6s both, x-glow .6s ease-out 3.6s both; }
@keyframes x-glow { from { background: transparent; } }
.demo-auto.is-on .xa-foot { animation: x-in .45s var(--ease) 3.9s both; }
.demo-auto.is-on .xa-notif { animation: x-drop .5s var(--ease) 4.3s both; }

/* ---------- Medición: retorno, embudo que cuenta y la curva del mes ---------- */
.demo-data { gap: 12px; }
.xd-kpi { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(232, 232, 237, .06); }
.xd-kpi p { display: grid; gap: 4px; }
.xd-kpi small { color: var(--hielo); opacity: .75; font-size: 11px; }
.xd-kpi b { font: 700 32px/1 var(--display); letter-spacing: -.04em; }
.xd-badge { padding: 5px 9px; border-radius: 999px; background: rgba(61, 220, 132, .14); color: #3DDC84; font: 600 10.5px/1 var(--mono); white-space: nowrap; }
.xd-funnel { display: grid; gap: 10px; }
.xd-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12px; }
.xd-row span { color: var(--hielo); }
.xd-row b { display: block; width: var(--w); height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cobalt), var(--celeste)); transform-origin: left; }
.xd-row em { font-style: normal; text-align: right; color: var(--white); font: 500 12px/1 var(--mono); }
.xd-chart { position: relative; height: 104px; margin-top: 4px; }
.xd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xd-line { fill: none; stroke: var(--celeste); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.xd-dot { position: absolute; right: -5px; top: calc(8 / 70 * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--celeste); }
.xd-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--celeste); }
.xd-tip { position: absolute; right: 0; top: calc(8 / 70 * 100% + 12px); padding: 5px 9px; border-radius: 8px; background: var(--win); color: var(--ink); font: 600 11px/1 var(--sans); white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.demo-data.is-on .xd-kpi { animation: x-in .45s var(--ease) .1s both; }
.demo-data.is-on .xd-kpi b { animation: x-pop .5s var(--ease) .25s both; }
.demo-data.is-on .xd-badge { animation: x-pop .4s var(--ease) 2.6s both; }
.demo-data.is-on .xd-row b { animation: x-grow-x 1.2s var(--ease) var(--d) both; }
.demo-data.is-on .xd-row .cnt { animation-duration: 1.2s; }
.demo-data.is-on .xd-area { animation: x-fade .8s ease-out 2s both; }
.demo-data.is-on .xd-line { animation: x-draw 1.6s var(--ease-move) 1s both; }
.demo-data.is-on .xd-dot { animation: x-pop .35s var(--ease) 2.55s both; }
.demo-data.is-on .xd-dot::after { animation: x-ping 1.4s ease-out 2.9s infinite; }
.demo-data.is-on .xd-tip { animation: x-in .4s var(--ease) 2.8s both; }

/* En el celular de "Apps" la demo tiene menos lugar */
.ph-demo .xw-h { font-size: 13px; }
.ph-demo .xw-ring span { width: 40px; }
.ph-demo .xd-chart { height: 80px; }
.ph-demo .xd-dot { right: 0; }
.ph-demo .xg-rest { --gshift: -122px; }

/* Selector de idioma en la barra, como el "ES" del teclado en la Mac */
.mb-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--white); text-decoration: none; font: 600 10px/1 var(--mono); letter-spacing: .04em; transition: box-shadow .2s; }
.mb-lang span { padding: 3px 5px; border-radius: 4px; color: rgba(255, 255, 255, .65); transition: color .2s; }
.mb-lang .is-current { background: rgba(255, 255, 255, .92); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .mb-lang:hover { box-shadow: inset 0 0 0 1px var(--celeste); } .mb-lang:hover span:not(.is-current) { color: var(--celeste); } }
.mb-lang:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
@media (max-width: 600px) { .menubar { gap: 10px; } .mb-trophy-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Portada más liviana: titular, navegador (escáner), carpetas y dock. La terminal y la ventana de
   métricas se ocultan con CSS (agency.js las sigue usando por dentro); lo de wifi/batería/"En línea" era adorno. */
.desk .w-term, .desk .w-stats, .mb-status, .mb-sys { display: none !important; }
@media (min-width: 1181px) {
  .w-browser { --x: 44vw; --y: 15vh; width: min(44vw, 660px); }
}

/* ---------- Nosotros: sobre el video, sin ventana ---------- */
.ab { min-height: 92vh; display: grid; align-items: center; }
.ab-in { width: min(1180px, 100%); margin-inline: auto; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.ab .app-label { color: var(--celeste); }
.ab-title { max-width: 14ch; color: var(--white); font-size: clamp(40px, 7.4vw, 112px); line-height: .98; text-wrap: balance; }
.ab-title em { color: var(--celeste); }
.ab-lead { max-width: 46ch; color: var(--hielo); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; text-wrap: pretty; }
.ab-lead a { color: var(--white); text-decoration-color: var(--celeste); text-underline-offset: 4px; }
.ab .app-label, .ab-title, .ab-lead { text-shadow: 0 2px 22px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .5); }
.ab-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: clamp(14px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.ab-cols li { display: grid; align-content: start; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: 18px; background: rgba(28, 28, 30, .48); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ab-cols li:nth-child(2) { transition-delay: .08s; }
.ab-cols li:nth-child(3) { transition-delay: .16s; }
@media (hover: hover) and (pointer: fine) { .js .ab-cols li.is-visible:hover, .ab-cols li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-mid) 45%, transparent); } }
.ab-n { color: var(--celeste); font: 500 12px/1 var(--mono); letter-spacing: .12em; }
.ab-cols b { color: var(--white); font: 700 clamp(18px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: -.02em; }
.ab-cols p { color: var(--hielo); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .ab { min-height: 0; } .ab-cols { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Estilo Apple: blanco y gris claro, un solo azul de acento, todo redondeado y fácil de leer.
   ===================================================================== */
:root { --shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .06); --r-win: 26px; --r-card: 18px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.03em; }
em { font-weight: 600; }
.win { border-radius: var(--r-win); }
.win-bar { background: rgba(245, 245, 247, .82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: .5px solid rgba(0, 0, 0, .08); }
.w-term .win-bar { background: #2C2C2E; }
.win h2 em, .win .win-title + * h2 em { color: #86868B; }
.app-label { letter-spacing: .08em; }
.desk-title em, .ab-title em { color: var(--a-mid); }
.nm-read { background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, .08) 100%), linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 18%); }
.dock { border-radius: 26px; }
.ab-cols li { border-radius: 24px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.ab-n { color: var(--a-mid); }
/* Una sola paleta en toda la página: blancos, grises y un gris azulado suave (el de la montaña del video).
   Los íconos van todos iguales: vidrio claro con el dibujo en gris pizarra; solo WhatsApp conserva su verde. */
:root { --celeste: var(--a-soft); --cobalt: var(--a); --cobalt-2: var(--a2); }
.desk-title em, .ab-title em, .app-stage h2 em { color: var(--celeste); }
.ab-n, .ab .app-label, .app-stage .app-label { color: var(--celeste); }
.nm-grade { background: #C9A08A; opacity: .16; }
.dock { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 20px 50px -20px rgba(0, 0, 0, .6); }
.ic, .ic-web .ic, .ic-sys .ic, .ic-auto .ic, .ic-ia .ic, .ic-google .ic, .ic-meta .ic, .ic-data .ic,
.ic.ic-web, .ic.ic-sys, .ic.ic-auto, .ic.ic-ia, .ic.ic-google, .ic.ic-meta, .ic.ic-data { --acc: var(--a); color: var(--a); border-radius: 13px; background: linear-gradient(180deg, #FFFFFF, #E9EDF1); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06), 0 6px 14px -8px rgba(0, 0, 0, .55); }
.ic::before { display: none; }
.ic svg { filter: none; }
.dock-h small, .dock-h b { color: #fff; }
.desk-icons .fold-ex { color: var(--a-fold); }
.mb-trophy { background: rgba(255, 255, 255, .14); color: #fff; }
.mb-trophy:hover { background: rgba(255, 255, 255, .24); }
.trophies li.is-on i, .toast-ico { background: linear-gradient(180deg, var(--a2), var(--a)); }

/* =====================================================================
   Escenas del nómade. El video es el fondo de pantalla de toda la página: las ventanas flotan encima y el scroll
   lo hace avanzar sin cortes (agency-nomade.js). .sheet solo agrupa las secciones con ventanas.
   ===================================================================== */
.wall::after { background: radial-gradient(120% 90% at 55% 50%, transparent 60%, rgba(0, 0, 0, .3) 100%); }
.nm-grade { display: none; }
.nm-read { background: linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .04) 100%), linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 16%); }
.sheet { position: relative; z-index: 1; }
.sheet .app { padding-block: clamp(48px, 7vw, 100px); }
.sheet .win { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .65), 0 0 0 .5px rgba(255, 255, 255, .25); }
.scene { position: relative; }
.scene-say, .scene-end { min-height: 130vh; display: grid; place-items: center; padding: 20vh var(--gutter); text-align: center; }
.say { display: grid; justify-items: center; gap: 18px; max-width: 860px; }
.say h2 { color: var(--white); font-size: clamp(40px, 7vw, 104px); line-height: 1; text-wrap: balance; }
.say h2 em { color: var(--a-soft); }
.say p { max-width: 40ch; color: rgba(255, 255, 255, .92); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; text-wrap: pretty; }
.say .app-label { color: var(--a-soft); }
.say h2, .say p { text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); }
.say-cta { margin-top: 10px; padding: 15px 28px; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); transition: transform .2s var(--ease), background .2s; }
.say-cta:hover { transform: translateY(-2px); background: var(--a-tint); }
.say-cta:active { transform: scale(.97); }
.foot { background: transparent; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.dock { background: rgba(30, 30, 32, .42); }
@media (max-width: 760px) { .scene-say, .scene-end { min-height: 110vh; } }
/* Botón de WhatsApp del cierre: verde de WhatsApp para que salte sobre el video dorado */
.say-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; background: linear-gradient(180deg, #2BD46B, #14A54E); color: var(--white); font-size: 17px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 18px 40px -14px rgba(10, 120, 50, .75), 0 0 50px -10px rgba(43, 212, 107, .55); text-shadow: 0 1px 2px rgba(0, 60, 20, .35); }
.say-cta svg { width: 22px; height: 22px; flex: none; }
.say-cta:hover { background: linear-gradient(180deg, #34E074, #16B055); transform: translateY(-2px); }