/* /ia-local/ · builds on ../site.css and ../publicidad-con-ia/page.css (hero copy, tabs, close, faq)
   and reuses the step and checklist look of ../sistemas-con-ia/. */

/* ------------------------------------------- 0 + I · the Box, pinned */
.bx { padding: 0; }
.bx__stage { height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 64% 58%, #1c120d, #070907 60%); }
.bx__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1200ms var(--sc-ease-out); }
.gl-ready .bx__gl { opacity: 1; }
.bx:not(.is-live) .bx__stage { position: relative; }
.bx__fallback { display: none; }
.no-gl .bx__fallback { display: block; position: absolute; right: 3%; top: 52%; width: min(54%, 720px); height: auto; translate: 0 -50%; }
.bx__lead { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; overflow: visible; }
.bx__lead path { fill: none; stroke: var(--sc-accent); stroke-width: 1.5; }
.bx__ring { fill: none; stroke: var(--sc-accent); stroke-width: 1.5; }
.bx__dot { fill: #fff1e6; }
@media (prefers-reduced-motion: no-preference) { .bx__ring { animation: ringPulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes ringPulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.bx__hero { position: absolute; z-index: 3; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(42%, 36rem); display: grid; gap: var(--sc-5); justify-items: start; transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); }
.bx__hero.is-off { opacity: 0; transform: translateY(-24px); pointer-events: none; visibility: hidden; transition: opacity 400ms, transform 400ms, visibility 0s 400ms; }
.bx__hero .c1-title { max-width: 13ch; }

.bx__feats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.feat { position: absolute; top: 50%; width: min(30rem, 34%); display: grid; gap: var(--sc-3); padding: var(--sc-5) var(--sc-6); border-left: 2px solid var(--sc-accent);
  background: linear-gradient(90deg, rgba(7,9,7,0.82), rgba(7,9,7,0.55)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  translate: 0 -50%; opacity: 0; transform: translateY(22px); transition: opacity 450ms var(--sc-ease-out), transform 450ms var(--sc-ease-out); }
.feat[data-side="l"] { left: var(--sc-gutter); }
.feat[data-side="r"] { right: calc(var(--sc-gutter) + 7.5rem); }
.feat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.feat__n { display: flex; align-items: baseline; gap: 10px; font: 500 0.74rem/1.2 var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.feat__n b { font-size: 1.2rem; letter-spacing: -0.04em; color: var(--sc-accent); }
.feat__t { font: 700 clamp(1.5rem, 1rem + 1.7vw, 2.5rem)/1.05 var(--sc-font-display); letter-spacing: -0.045em; text-wrap: balance; }
html[lang="ru"] .feat__t { font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.2rem); }
.feat__p { color: var(--sc-ink-soft); line-height: 1.55; text-wrap: pretty; }
.feat--end { left: 50%; top: auto; bottom: clamp(2rem, 8vh, 5rem); width: min(40rem, calc(100% - 2 * var(--sc-gutter))); translate: -50% 0; justify-items: center; text-align: center; border-left: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.feat--end .btn { margin-top: var(--sc-3); }

.bx__ticks { position: absolute; z-index: 3; right: var(--sc-gutter); top: 50%; translate: 0 -50%; display: grid; gap: 14px; opacity: 0; transition: opacity 400ms; }
.bx.is-open .bx__ticks { opacity: 1; }
.bx__ticks li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 0.7rem; color: rgba(244,243,238,0.32); transition: color 300ms; }
.bx__ticks li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 300ms, transform 300ms; }
.bx__ticks li.is-done { color: rgba(244,243,238,0.55); }
.bx__ticks li.is-on { color: #f4f3ee; }
.bx__ticks li.is-on::after { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.3); }
.bx__ticks span { max-width: 6.5rem; text-align: right; line-height: 1.2; }
.bx__hint { position: absolute; z-index: 3; left: 50%; bottom: clamp(1.2rem, 4vh, 2.4rem); translate: -50% 0; display: grid; justify-items: center; gap: 8px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); transition: opacity 400ms; white-space: nowrap; }
.bx__hint i { width: 1px; height: 28px; background: linear-gradient(var(--sc-accent), transparent); }
@media (prefers-reduced-motion: no-preference) { .bx__hint i { animation: hintDrop 1.8s ease-in-out infinite; transform-origin: top; } }
@keyframes hintDrop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.bx__hint.is-off { opacity: 0; }
.bx__note { position: absolute; z-index: 3; right: var(--sc-gutter); bottom: clamp(1rem, 3vh, 1.6rem); font-size: 0.68rem; color: rgba(244,243,238,0.4); opacity: 0; transition: opacity 400ms; }
.bx.is-open .bx__note { opacity: 1; }

@media (max-width: 1100px) and (min-width: 861px) { .bx__ticks { display: none; } .feat[data-side="r"] { right: var(--sc-gutter); } }
@media (max-width: 860px) {
  .bx__stage::after { content: ""; position: absolute; inset: 42% 0 0 0; z-index: 2; pointer-events: none; background: linear-gradient(rgba(7,9,7,0), rgba(7,9,7,0.92) 46%); }
  .bx__hero { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); translate: none; width: calc(100% - 2 * var(--sc-gutter)); gap: var(--sc-4); }
  .bx__hero .crumbs { display: none; }
  .bx__hero .c1-title { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .bx__hero .c1-lead { font-size: var(--sc-t-base); }
  .feat, .feat[data-side] { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); width: auto; translate: none; padding: var(--sc-4) var(--sc-5); }
  .feat--end { left: var(--sc-gutter); padding: 0; }
  .feat__t { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .feat__p { font-size: var(--sc-t-sm); }
  .bx__ticks { top: calc(var(--folio-h) + 14px); right: auto; left: 50%; translate: -50% 0; display: flex; gap: 10px; }
  .bx__ticks span { display: none; }
  .bx__hint { display: none; }
  .bx__note { display: none; }
  .no-gl .bx__fallback { width: 86%; left: 7%; right: auto; top: 30%; }
}

/* reduced motion: one still view of the Box and the five parts as a list */
.bx.is-static .bx__stage { height: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--sc-6); padding: calc(var(--folio-h) + var(--sc-8)) var(--sc-gutter) var(--sc-9); }
.bx.is-static .bx__gl { position: relative; inset: auto; grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; height: auto; }
.bx.is-static .bx__hero { position: relative; left: auto; top: auto; translate: none; width: auto; grid-column: 1; grid-row: 1; }
.bx.is-static .bx__feats { position: relative; inset: auto; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); pointer-events: auto; }
.bx.is-static .feat { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; width: auto; translate: none; opacity: 1; transform: none; }
.bx.is-static .feat--end { grid-column: 1 / -1; padding-top: var(--sc-5); }
.bx.is-static .bx__ticks, .bx.is-static .bx__hint, .bx.is-static .bx__lead { display: none; }
.bx.is-static .bx__note { position: static; grid-column: 1 / -1; opacity: 1; }
.bx.is-static .bx__stage::after { display: none; }
.bx.is-static.no-gl .bx__fallback, .no-gl .bx.is-static .bx__fallback { position: relative; grid-column: 2; grid-row: 1; width: 100%; translate: none; top: auto; right: auto; }
@media (max-width: 860px) {
  .bx.is-static .bx__stage { grid-template-columns: minmax(0, 1fr); }
  .bx.is-static .bx__gl { grid-column: 1; grid-row: 1; }
  .bx.is-static .bx__hero { grid-row: 2; }
  .bx.is-static .bx__feats { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- II · the document demo */
.docs .tabs { margin-bottom: var(--sc-5); }
.dw { overflow: hidden; border-radius: 10px; background: #fff; color: #1d1f1c; box-shadow: 0 40px 80px -50px rgba(40,30,15,0.55), 0 0 0 1px rgba(7,9,7,0.08); }
.dw__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 18px; background: #070907; color: #f4f3ee; font-size: var(--sc-t-sm); }
.dw__bar b { font: 500 0.9rem/1 var(--sc-font-display); letter-spacing: -0.02em; }
.dw__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #ff5c35; color: #fff; font: 700 12px/1 var(--sc-font-display); }
.dw__org { color: #aaa9a1; }
.dw__status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #aaa9a1; font-size: var(--sc-t-xs); }
.dw__status i { width: 8px; height: 8px; border-radius: 50%; background: #ff5c35; box-shadow: 0 0 0 3px rgba(255,92,53,0.25); }
.dw__body { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); min-height: 30rem; }
.dw__lib { padding: 18px 14px; background: #faf8f4; border-right: 1px solid #ece8df; }
.dw__h { margin: 0 6px 10px; font: 500 0.7rem/1 var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: #7d7e77; }
.dw__lib ul { display: grid; gap: 2px; }
.dw__lib li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 8px 8px; border-radius: 8px; font-size: 0.84rem; transition: background-color 250ms; }
.dw__lib li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dw__lib li small { grid-column: 2; color: #8a8b84; font-size: 0.72rem; }
.dw__lib li i { grid-row: span 2; }
.dw__lib li.is-read { background: #fff0ea; }
.dw__lib li.is-src { background: #fff0ea; box-shadow: inset 2px 0 0 #ff5c35; }
.fi { display: block; width: 18px; height: 22px; border-radius: 2px; background: #cfcabe; clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); }
.fi--pdf { background: #ff5c35; } .fi--doc { background: #070907; } .fi--xls { background: #8a8b84; }
.fi--dir { clip-path: polygon(0 12%, 40% 12%, 50% 26%, 100% 26%, 100% 92%, 0 92%); background: #b9b4a8; }
.fi--aud { border-radius: 50%; width: 20px; height: 20px; clip-path: none; background: radial-gradient(circle, #fff 0 22%, #ff5c35 24%); }
.fi--src { display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px; background: #ff5c35; }
.dw__chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.dw__conv { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; height: 22rem; padding: 20px 22px; overflow: hidden; }
.dw__hello, .dw__a { align-self: flex-start; max-width: 84%; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: #f4f3ee; line-height: 1.5; }
.dw__a { background: #fff; border: 1px solid #ece8df; box-shadow: 0 10px 24px -18px rgba(40,30,15,0.45); animation: dwIn 380ms var(--sc-ease-out) both; }
.dw__a b { color: #b23a1c; }
.dw__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dw__src span { padding: 4px 10px; border-radius: 12px; background: #fff0ea; color: #8f2c14; font-size: 0.74rem; font-weight: 500; }
.dw__q { align-self: flex-end; max-width: 76%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #070907; color: #fff; animation: dwIn 300ms var(--sc-ease-out) both; }
.dw__think { align-self: flex-start; display: flex; align-items: center; gap: 5px; color: #8a8b84; font-size: var(--sc-t-sm); }
.dw__think i { width: 6px; height: 6px; border-radius: 50%; background: #ff5c35; animation: dwDot 1s infinite; }
.dw__think i:nth-child(2) { animation-delay: 0.15s; } .dw__think i:nth-child(3) { animation-delay: 0.3s; margin-right: 6px; }
@keyframes dwIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes dwDot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.dw__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid #ece8df; }
.dw__chips button { min-height: 44px; padding: 8px 16px; border: 1px solid #ddd8cd; border-radius: 22px; background: #fff; color: #070907; font: 500 0.86rem/1.25 var(--sc-font-text); text-align: left; cursor: pointer; transition: border-color 150ms, background-color 150ms; }
.dw__chips button:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dw__chips button:not(:disabled):hover { border-color: #b23a1c; background: #fff6f2; } }
.dw__chips button:focus-visible { outline: 2px solid #070907; outline-offset: 2px; }
.docs__note { margin-top: var(--sc-5); }
@media (max-width: 860px) {
  .dw__body { grid-template-columns: minmax(0, 1fr); }
  .dw__lib { border-right: 0; border-bottom: 1px solid #ece8df; padding: 12px; }
  .dw__lib ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .dw__lib li { flex: none; max-width: 12rem; background: #fff; border: 1px solid #ece8df; }
  .dw__status { margin-left: 0; width: 100%; }
  .dw__conv { height: 24rem; padding: 16px; }
  .dw__hello, .dw__a { max-width: 94%; }
  .dw__chips { padding: 12px 16px 16px; }
  .dw__chips button { width: 100%; }
}

/* ------------------------------------------------- III · office vs cloud */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6); margin-bottom: var(--sc-8); }
.lane { margin: 0; display: grid; gap: var(--sc-5); padding: var(--sc-6); border: 1px solid rgba(244,243,238,0.14); border-radius: 6px; background: #0d100e; }
.lane--box { border-color: var(--sc-accent); background: linear-gradient(160deg, #1d100b, #0d100e 60%); }
.lane figcaption { display: grid; gap: 4px; }
.lane figcaption b { font: 500 1.25rem/1.2 var(--sc-font-display); letter-spacing: -0.03em; }
.lane figcaption span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lane__track { position: relative; display: flex; align-items: center; gap: 0; height: 9rem; padding: 0 var(--sc-4); }
.lane__office { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border: 1.5px dashed rgba(244,243,238,0.3); border-radius: 10px; }
.lane--box .lane__office { width: 100%; border-color: rgba(255,92,53,0.6); }
.lane__office span { position: absolute; left: 12px; top: -0.7em; padding: 0 6px; background: #0d100e; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.lane--box .lane__office span { background: #160f0b; color: var(--ml-accent-soft); }
.lane__node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; min-width: 5.5rem; padding: 10px 12px; border-radius: 8px; background: #f4f3ee; color: #070907; font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.2; }
.lane__node--cloud { margin-left: auto; max-width: 8rem; background: #2a2d2a; color: #f4f3ee; }
.lane__node--box { background: #ff5c35; color: #fff; font-family: var(--sc-font-display); }
.lane__line { position: relative; flex: 1; height: 2px; margin: 0 10px; background: rgba(244,243,238,0.16); }
.lane__line--short { flex: 0 1 40%; }
.lane__line i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #f4f3ee; box-shadow: 0 0 10px rgba(244,243,238,0.7); }
.lane--box .lane__line i { background: #ff5c35; box-shadow: 0 0 10px rgba(255,92,53,0.8); }
@media (prefers-reduced-motion: no-preference) {
  .lane__line i { animation: laneGo 2.8s linear infinite; }
  .lane__line i:nth-child(2) { animation-delay: -0.7s; } .lane__line i:nth-child(3) { animation-delay: -1.4s; } .lane__line i:nth-child(4) { animation-delay: -2.1s; }
  .lane--box .lane__line i { animation-name: laneLoop; }
}
@keyframes laneGo { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes laneLoop { 0% { left: 0; } 50% { left: calc(100% - 8px); } 100% { left: 0; } }
.lane__wall { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--ml-accent-soft); }
.lane__wall::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(45deg, transparent 44%, currentColor 45% 55%, transparent 56%); }
.priv__for { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); }
.priv__for li { display: grid; gap: 4px; padding-top: var(--sc-4); border-top: 1px solid rgba(244,243,238,0.18); }
.priv__for b { font: 500 1rem/1.25 var(--sc-font-display); letter-spacing: -0.02em; }
.priv__for span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .lane { padding: var(--sc-5); }
  .lane__node { min-width: 4.5rem; font-size: 0.72rem; }
  .priv__for { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------- IV · install */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); margin-bottom: var(--sc-7); }
.flow__step { position: relative; display: grid; gap: var(--sc-2); align-content: start; padding: var(--sc-5); border: 1px solid rgba(244,243,238,0.14); border-radius: 2px; background: #070907; }
.flow__step:not(:last-child)::after { content: "→"; position: absolute; right: calc(var(--sc-5) * -0.5 - 0.5em); top: 50%; translate: 0 -50%; z-index: 2; color: var(--sc-accent); font-size: 1.2rem; }
.flow__step--human { border-color: var(--sc-accent); background: rgba(255,92,53,0.08); }
.flow__n { font: 700 1.6rem/1 var(--sc-font-display); color: var(--sc-accent); letter-spacing: -0.05em; }
.flow__step h3 { font: 500 1.1rem/1.2 var(--sc-font-display); letter-spacing: -0.025em; }
.flow__step p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.inst__note { display: flex; align-items: flex-start; gap: 12px; max-width: 44rem; padding: var(--sc-4) var(--sc-5); border-radius: 4px; background: #f4f3ee; color: #070907; font-size: var(--sc-t-sm); font-weight: 500; }
.inst__dot { flex: none; width: 10px; height: 10px; margin-top: 0.4em; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(255,92,53,0.2); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: var(--sc-4); }
  .flow__step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: calc(var(--sc-4) * -0.5 - 0.7em); translate: -50% 0; }
}

/* ------------------------------------------------------------ V · close */
.c3-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--sc-7); max-width: 52rem; margin-bottom: var(--sc-7); }
.c3-inc li { position: relative; padding-left: 1.5em; font-weight: 500; }
.c3-inc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: #180906; rotate: 45deg; }
@media (max-width: 860px) { .c3-inc { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dw__a, .dw__q, .dw__think i { animation: none; }
  .feat, .bx__hero { transition: none; }
}
.bx.is-static .feat__t { font-size: clamp(1.25rem, 0.9rem + 1vw, 1.7rem); }