/* ==========================================================================
   Nezxu — Fase 22 refresh (2026-11-02). Loaded AFTER style.css on every
   page. Same palette (white + ink + one blue) — new type system (Geist +
   Instrument Serif accents), floating nav, editorial section rhythm, dark
   "process" band, softer cards and the Casos de Uso mini-app mocks.
   Rollback = remove the <link> to this file in includes/header.php (and
   restore the old Google Fonts line).
   ========================================================================== */

:root {
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-body: 'Geist', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(10,14,23,.05), 0 0 0 1px rgba(10,14,23,.04);
  --shadow-md: 0 12px 32px -14px rgba(10,14,23,.18), 0 0 0 1px rgba(10,14,23,.04);
  --shadow-lg: 0 30px 70px -28px rgba(10,14,23,.30), 0 0 0 1px rgba(10,14,23,.04);
  --wrap: 1240px;
}

body { font-size: 16px; line-height: 1.6; letter-spacing: -.005em; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
h3 { letter-spacing: -.02em; line-height: 1.25; }
p { color: var(--muted); }
::selection { background: var(--accent); color: #fff; }

/* the signature: accent words set in an italic serif, in brand blue */
.grad {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; font-size: 1.1em; line-height: .9;
  color: var(--accent);
}

/* ---------- eyebrow: small outlined pill ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em;
  padding: .38rem .8rem .38rem .65rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255,255,255,.7);
  color: var(--fg); margin-bottom: 1.4rem;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* ---------- floating nav ---------- */
.nav {
  top: 12px;
  width: min(var(--wrap), calc(100% - 24px));
  margin: 12px auto 0;
  padding: .65rem .7rem .65rem 1.3rem;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 2px rgba(10,14,23,.04);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-color: var(--line); background: rgba(255,255,255,.88); box-shadow: 0 14px 40px -20px rgba(10,14,23,.25); }
.brand-logo { font-family: var(--font-mono); font-size: 1.02rem; }
.brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; font-size: 1.12em; }
.nav-links { gap: .3rem; }
.nav-links a {
  font-family: var(--font-display); font-size: .9rem; font-weight: 500;
  padding: .5rem .9rem; border-radius: 10px; transition: background .2s, color .2s;
}
.nav-links a::after { display: none; }
@media (hover: hover) { .nav-links a:hover { background: rgba(10,14,23,.05); } }
.nav-links a.active { color: var(--fg); background: rgba(10,14,23,.06); }
.nav-actions { gap: .6rem; }
.lang-toggle { border-radius: 10px; padding: .45rem .7rem; font-size: .72rem; }
.btn-nav { padding: .62rem 1.1rem !important; font-size: .86rem !important; }
@media (max-width: 1100px) {
  .nav.open .nav-links { top: calc(100% + 8px); border: 1px solid var(--line); border-radius: 18px; gap: .2rem; }
  .nav.open .nav-links a { width: 100%; font-size: 1rem; }
}

/* ---------- buttons ---------- */
.btn {
  border-radius: 12px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  padding: .78rem 1.35rem; font-size: .92rem;
}
.btn-lg { padding: .95rem 1.55rem; font-size: .96rem; }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -10px rgba(0,87,255,.75);
}
.btn-primary.btn-lg::after {
  content: "→"; display: inline-block; margin-left: .15rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn-ghost { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -12px rgba(0,87,255,.8); }
  .btn-primary.btn-lg:hover::after { transform: translateX(4px); }
  .btn-ghost:hover { border-color: rgba(10,14,23,.25); transform: translateY(-1px); }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: 5rem; }
.hero::before {                       /* faint design-grid backdrop, fades out */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(10,14,23,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,14,23,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero-bg-blob { opacity: .09; }
.hero--studio .hero-title { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.045em; }
.hero-title .grad { font-size: 1.12em; }
.hero-sub { font-size: 1.06rem; line-height: 1.6; }
.hero--studio .hero-sub { max-width: 44ch; }
.hero-proof { border-top-color: var(--line); }
.hero-proof span { font-weight: 500; color: var(--fg); }

/* ---------- ticker ---------- */
.ticker {
  background: transparent; border-color: var(--line-soft); padding: 1.3rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { gap: 2.2rem; }
.ticker-track span { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; color: var(--muted-2); }
.ticker-track span.dot { color: var(--accent); }

/* ---------- section heads ---------- */
.section-head { max-width: 760px; margin-bottom: 3.5rem; text-align: center; }
.section-head .eyebrow { margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.section-sub { font-size: 1.08rem; max-width: 58ch; margin-left: auto; margin-right: auto; }

/* ---------- filosofia: big editorial statement ---------- */
.filosofia { max-width: 980px; padding-top: 8rem; padding-bottom: 3rem; }
.filosofia h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; margin-bottom: 1.6rem; }
.filosofia-p { font-size: 1.12rem; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------- tabs ---------- */
.tab-btn {
  font-family: var(--font-display); font-weight: 500; font-size: .9rem;
  background: #fff; border-color: var(--line); border-radius: 12px; padding: .62rem 1.1rem;
}
.tab-btn.is-active { background: var(--fg); border-color: var(--fg); color: #fff; box-shadow: 0 8px 20px -12px rgba(10,14,23,.6); }
.tabs-progress { height: 2px; }
.tabs-progress-fill { background: var(--fg); }

/* ---------- photos: clean, no color wash ---------- */
.photo-frame { border-radius: var(--radius); border-color: var(--line-soft); box-shadow: var(--shadow-md); }
.photo-frame::after { background: linear-gradient(180deg, transparent 60%, rgba(10,14,23,.12)); }

/* ---------- generic cards ---------- */
.esp, .confianza-card, .onboard-step, .lead-card, .contact-form, .legal-box, .caso-panel {
  background: #fff; border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .esp:hover, .confianza-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); }
  .esp { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
}
.confianza-wrap { background: var(--bg-alt); border-radius: 32px; }
.confianza-icon, .service-icon, .tab-icon { border-radius: 12px; }
.confianza-card h3, .esp h3, .value h3 { font-size: 1.04rem; }

/* ---------- casos de uso: mini app mock ---------- */
.caso-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 3rem; padding: 2rem; }
.caso-panel-body h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; }
.caso-block p { font-size: 1rem; }
.caso-block-sol { padding: 1rem 1.2rem; border-radius: 14px; background: var(--accent-soft); }

.caso-mock {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  max-width: 440px; width: 100%; margin: 0 auto;
}
.cm-bar { display: flex; align-items: center; gap: 5px; padding: .6rem .8rem; border-bottom: 1px solid var(--line-soft); background: #fbfbfc; }
.cm-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e2e4e9; }
.cm-url { margin-left: auto; margin-right: auto; font: 500 .68rem var(--font-mono); color: var(--muted); padding: .2rem .7rem; border-radius: 6px; background: #fff; border: 1px solid var(--line-soft); }
.cm-body { position: relative; padding: .8rem; display: flex; flex-direction: column; gap: .55rem; }
.cm-hero {
  position: relative; height: 120px; border-radius: 12px; background-size: cover; background-position: center;
  overflow: hidden;
}
.cm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,14,23,.6)); }
.cm-brand { position: absolute; left: .85rem; bottom: .7rem; z-index: 1; color: #fff; font: 600 1.05rem var(--font-display); letter-spacing: -.02em; }
.cm-rows { display: flex; flex-direction: column; gap: .4rem; }
.cm-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 11px; border: 1px solid var(--line-soft); background: #fff; }
.cm-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font: 600 .8rem var(--font-display); }
.cm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cm-txt b { font: 600 .78rem var(--font-body); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-txt i { font: 400 .7rem var(--font-body); font-style: normal; color: var(--muted); }
.cm-go { color: var(--muted-2); font-size: 1rem; }
.cm-cta { margin-top: .15rem; text-align: center; padding: .65rem; border-radius: 11px; background: var(--accent); color: #fff; font: 600 .8rem var(--font-display); }
.cm-toast {
  position: absolute; left: .8rem; right: .8rem; bottom: 3.6rem;
  display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 11px;
  background: var(--fg); color: #fff; font: 600 .74rem var(--font-body);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px);
}
.cm-toast span { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; font-size: .6rem; }
.cm-cursor { position: absolute; left: 0; top: 0; width: 20px; height: 20px; opacity: 0; pointer-events: none; z-index: 3; }
.cm-cursor svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cm-cursor path { fill: var(--fg); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }

/* soft choreography, replayed every time a tab becomes active (.in) */
@media (prefers-reduced-motion: no-preference) {
  .tab-panel.in .cm-hero { animation: cmHero .9s cubic-bezier(.2,.8,.2,1) both; }
  .tab-panel.in .cm-brand { animation: cmUp .6s .35s cubic-bezier(.2,.8,.2,1) both; }
  .tab-panel.in .cm-row { animation: cmUp .55s calc(.45s + var(--r) * .12s) cubic-bezier(.2,.8,.2,1) both; }
  .tab-panel.in .cm-cta { animation: cmUp .55s .85s cubic-bezier(.2,.8,.2,1) both, cmPress .3s 2.05s ease both; }
  .tab-panel.in .cm-cursor { animation: cmCursor 2.6s .9s cubic-bezier(.45,0,.2,1) both; }
  .tab-panel.in .cm-toast { animation: cmToast .5s 2.25s cubic-bezier(.2,.9,.3,1.3) both; }
}
@media (prefers-reduced-motion: reduce) { .cm-toast { opacity: 1; transform: none; } }
@keyframes cmHero { from { opacity: 0; transform: scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cmPress { 50% { transform: scale(.96); } }
@keyframes cmCursor {
  0%   { opacity: 0; left: 82%; top: 40%; }
  15%  { opacity: 1; }
  45%  { left: 54%; top: calc(100% - 2.5rem); transform: scale(1); }
  50%  { transform: scale(.82); }
  56%  { transform: scale(1); }
  85%  { opacity: 1; left: 58%; top: calc(100% - 2.2rem); }
  100% { opacity: 0; left: 60%; top: calc(100% - 2rem); }
}
@keyframes cmToast { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .caso-panel { grid-template-columns: 1fr; padding: 1.3rem; gap: 1.8rem; }
  .caso-mock { order: -1; }
}

/* ---------- por que nezxu ---------- */
.showcase-list li { font-size: 1.02rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.showcase-list li:last-child { border-bottom: 0; }
.stats { border-color: var(--line); gap: 0; padding: 0; }
.stat { padding: 2.4rem 1rem; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num, .stat-suffix { font-weight: 600; letter-spacing: -.05em; font-size: clamp(2.6rem, 5vw, 4rem); }
.stat-suffix { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- proceso: dark band, steps as a horizontal rail ---------- */
.proceso {
  max-width: none; margin: 2rem clamp(.6rem, 1.5vw, 1.2rem);
  padding: 6.5rem clamp(1.2rem, 5vw, 4rem);
  background: var(--bg-inverse); border-radius: 36px; color: #fff;
  position: relative; overflow: hidden;
}
.proceso::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 85% 0%, rgba(0,87,255,.35), transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.proceso > * { position: relative; }
.proceso .section-head h2 { color: #fff; }
.proceso .section-sub { color: rgba(255,255,255,.62); }
.proceso .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.proceso .timeline {
  max-width: var(--wrap); border-left: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem;
}
.proceso .timeline-progress { display: none; }
.proceso .tl-item {
  padding: 1.6rem 1.4rem 1.8rem; border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: background .3s, border-color .3s, transform .3s;
}
@media (hover: hover) { .proceso .tl-item:hover { background: rgba(255,255,255,.07); border-color: rgba(0,87,255,.6); transform: translateY(-3px); } }
.proceso .tl-num {
  position: static; transform: none; width: auto; height: auto; display: inline-block;
  background: none; box-shadow: none; color: var(--accent);
  font: 500 .76rem var(--font-mono); margin-bottom: 2.4rem; letter-spacing: .08em;
}
.proceso .tl-num::before { content: "("; } .proceso .tl-num::after { content: ")"; }
.proceso .tl-item h3 { color: #fff; font-size: 1.12rem; }
.proceso .tl-item p { color: rgba(255,255,255,.6); font-size: .9rem; }
@media (max-width: 1100px) { .proceso .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .proceso .timeline { grid-template-columns: 1fr; } .proceso { border-radius: 26px; padding-top: 4.5rem; padding-bottom: 4.5rem; } }

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: 36px; padding: 6.5rem 2rem; border: 0;
  margin-left: clamp(.6rem, 1.5vw, 1.2rem); margin-right: clamp(.6rem, 1.5vw, 1.2rem);
  background:
    radial-gradient(45% 80% at 50% 115%, rgba(0,87,255,.55), transparent 70%),
    var(--bg-inverse);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
}
.cta-banner > * { position: relative; }
.cta-banner h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; }
.cta-banner .grad { color: #7aa5ff; }

/* ---------- inner page header ---------- */
.page-header { max-width: 900px; padding-top: 6.5rem; padding-bottom: 2rem; position: relative; }
.page-header h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em; }
.page-header-sub { font-size: 1.1rem; }

/* ---------- soluciones ---------- */
.tabs-split .tab-btn { border-radius: 16px; padding: 1.05rem 1.1rem; }
.tabs-split .tab-btn.is-active { background: var(--fg); border-color: var(--fg); }
.tabs-split .tab-btn.is-active .tab-tag { color: #9db8ff; opacity: 1; }
.tab-tag { color: var(--muted-2); }
.service-panel-body h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.035em; }
.service-points .check, .showcase-list .check { border-radius: 7px; }
.code-card { border-radius: 16px; background: #0a0e17; box-shadow: var(--shadow-lg); }
/* soft motion: active photo eases in with a slow zoom */
@media (prefers-reduced-motion: no-preference) {
  .tab-panel.in .service-panel-photo img { animation: softZoom 6s ease-out both; }
}
@keyframes softZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- nosotros ---------- */
.lead-avatar { background: var(--fg); border-radius: 18px; font-family: var(--font-display); }
.lead-role { color: var(--muted-2); }
.value { padding: 1.4rem 0 0; border-top: 1px solid var(--line); }
.value::before { width: 8px; height: 8px; border-radius: 2px; margin-bottom: 1rem; }
.alianza-card { border-radius: var(--radius); border-color: var(--line); background: linear-gradient(135deg, var(--accent-soft), #fff 60%); }

/* ---------- forms ---------- */
.form-row label { font-weight: 500; color: var(--fg); font-size: .84rem; }
.form-row input, .form-row textarea, .form-row select { border-radius: 12px; background: #fbfbfc; }
.form-row input:focus, .form-row textarea:focus { background: #fff; }
.contact-channel { border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }

/* ---------- legal ---------- */
.legal-section h2 { font-size: 1.3rem; letter-spacing: -.025em; }
.legal-toc { border-radius: 16px; }

/* ---------- footer ---------- */
.footer { background: #fff; border-top-color: var(--line-soft); }
.footer-inner { padding-top: 5rem; }
.footer-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em; }
.footer-bottom { border-top-color: var(--line-soft); }

/* ---------- reveal: slightly longer, springier ---------- */
.js-ready .reveal { transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--delay, 0ms); }
.reveal.in { transform: none; }

/* ==========================================================================
   Fase 23 (2026-11-02): full-width layout, no tab "jump", more motion.
   ========================================================================== */

/* ---------- 1) tabs never change the page height while switching ----------
   All panels share one grid cell; inactive ones stay in layout but
   invisible, so the container is always as tall as its tallest panel and
   the cross-fade happens in place (before: both panels were stacked for
   350ms and the whole page jumped). */
.tabs-panels { display: grid; }
.tabs-panels > .tab-panel { grid-area: 1 / 1; min-width: 0; }
.tabs-panels > .tab-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.tabs-panels > .service-panel[hidden], .tabs-panels > .caso-panel[hidden] { display: grid !important; }
.tabs-panels > .tab-panel { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.tabs-panels > .tab-panel:not(.in) { transform: translateY(8px) scale(.995); }

/* ---------- 2) use the whole screen ---------- */
:root { --wrap: 1440px; --gutter: clamp(1rem, 3.2vw, 3rem); }
.nav { width: min(var(--wrap), calc(100% - 2 * clamp(.6rem, 1.6vw, 1.5rem))); }
.servicios-wrap, .casos-wrap, .porque-wrap, .confianza-wrap, .nosotros-intro, .nosotros-block,
.footer-inner, .footer-bottom { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter); }
.confianza-wrap { width: calc(100% - 2 * clamp(.6rem, 1.5vw, 1.2rem)); }
.stats-wrap { max-width: 1240px; }
.contacto { max-width: 1320px; }
.proceso .timeline { max-width: var(--wrap); }

/* hero: fills the first screen on desktop, studio gets the bigger column */
.hero.hero--studio .hero-inner { max-width: var(--wrap); grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(2rem, 4vw, 5rem); }
@media (max-width: 960px) { .hero.hero--studio .hero-inner { grid-template-columns: 1fr; } }
@media (min-width: 961px) {
  .hero--studio { min-height: calc(100svh - 80px); display: flex; align-items: center; padding-top: 2rem; padding-bottom: 3rem; }
  .hero.hero--studio .hero-inner { flex: 1; }
}
@media (min-width: 1600px) {
  .hero--studio .hero-title { font-size: 4.6rem; }
  .section-head h2, .filosofia h2 { font-size: 4rem; }
}

/* casos: bigger mock, wider panel */
.casos-wrap { max-width: var(--wrap); }
.caso-panel { padding: clamp(1.2rem, 2.4vw, 2.6rem); gap: clamp(1.6rem, 4vw, 5rem); }
.caso-mock { max-width: 560px; }
@media (min-width: 1200px) { .cm-hero { height: 170px; } .cm-row { padding: .65rem .75rem; } .cm-txt b { font-size: .86rem; } .cm-txt i { font-size: .76rem; } }
.caso-panel-body h3 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }

/* mobile: tighter gutters, edge-to-edge feel, less dead vertical space */
@media (max-width: 760px) {
  .hero { padding-left: 1rem; padding-right: 1rem; padding-bottom: 3rem; }
  .hero--studio .hero-inner { gap: 2.2rem; }
  .hero--studio .hero-title { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .hero-sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .studio-wrap { margin: 0 -.4rem; }
  .filosofia { padding-top: 4.5rem; }
  .servicios-wrap, .casos-wrap, .porque-wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .section-head { margin-bottom: 2.2rem; }
  .tabs-nav-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .3rem; scroll-snap-type: x mandatory; }
  .tabs-nav-pills::-webkit-scrollbar { display: none; }
  .tabs-nav-pills .tab-btn { flex: none; scroll-snap-align: start; }
  .caso-panel { padding: .8rem; border-radius: 22px; }
  .caso-panel-body { padding: 0 .4rem .6rem; }
  .cta-banner { padding: 4.5rem 1.4rem; border-radius: 26px; }
  .confianza-wrap { padding: 3.5rem 1rem; }
}

/* ---------- 3) motion ---------- */
/* scroll progress line under the nav */
.scroll-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* headline words rise in from a mask */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.16,.9,.2,1); transition-delay: calc(var(--i) * 45ms + 80ms); }
.split.in .w > span { transform: none; }

/* studio: subtle 3D tilt following the pointer (desktop) */
.studio-fit { transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; will-change: transform; }

/* dark bands: soft spotlight following the pointer */
.proceso::after, .cta-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,87,255,.22), transparent 60%);
}
.proceso.lit::after, .cta-banner.lit::after { opacity: 1; }
.cta-banner::after { z-index: 0; }

/* proceso: steps light up one after another */
.proceso .tl-item { overflow: hidden; }
.proceso .tl-item::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
}
.proceso .tl-item.is-lit { background: rgba(255,255,255,.08); border-color: rgba(0,87,255,.55); }
.proceso .tl-item.is-lit::before { transform: scaleX(1); transition: transform 2.2s linear; }
.proceso .tl-item.is-lit .tl-num { color: #7aa5ff; }

/* cards tilt slightly toward the pointer */
.tilt.reveal.in, .tilt:not(.reveal) { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }

/* photos drift slowly while scrolling */
.parallax img { transform: translateY(var(--py, 0)) scale(1.12); transition: none; }

/* ticker pauses on hover */
@media (hover: hover) { .ticker:hover .ticker-track { animation-play-state: paused; } }

@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none !important; transition: none; }
  .scroll-progress, .proceso::after, .cta-banner::after { display: none; }
  .tilt, .parallax img { transform: none !important; }
}

/* soluciones: 8 tabs as a clean 4x2 grid (was 7 + 1 orphan) */
.tabs-split .tabs-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tabs-split .tabs-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Fase 24 (2026-11-02): new type pairing + livelier design.
   Bricolage Grotesque (display, characterful) + Plus Jakarta Sans (text).
   ========================================================================== */
:root {
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
h1, h2, h3 { font-variation-settings: "opsz" 96; font-weight: 700; letter-spacing: -.04em; }
h3 { font-weight: 600; letter-spacing: -.02em; }
.hero--studio .hero-title, .page-header h1 { font-weight: 750; letter-spacing: -.05em; }

/* accent words: same font, brand blue, with a hand-drawn underline that draws in */
.grad {
  font-family: inherit; font-style: normal; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit;
  color: var(--accent); position: relative; white-space: nowrap; display: inline-block;
}
.grad::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .28em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 4, 120 2, 197 9' fill='none' stroke='%230057ff' stroke-opacity='.28' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6,0,.2,1) .55s;
}
.split.in .grad::after, .grad:not(.split .grad)::after { clip-path: inset(0 0 0 0); }
.cta-banner .grad { color: #7aa5ff; }
.cta-banner .grad::after { filter: brightness(2); }
.stat-suffix { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--accent); }

/* primary buttons: light sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
}
@media (hover: hover) { .btn-primary:hover::before { animation: btnSweep .8s ease; } }
@keyframes btnSweep { to { left: 130%; } }

/* hero: floating feature chips around the studio */
.studio-wrap { position: relative; }
.hero-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem .55rem .55rem; border-radius: 14px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(10,14,23,.35);
  font: 600 .8rem var(--font-body); color: var(--fg); white-space: nowrap;
}
.hero-chip i { width: 28px; height: 28px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.hero-chip svg { width: 15px; height: 15px; }
.hc1 { left: -7%; bottom: 24%; } .hc2 { left: 26%; top: -4.5%; } .hc3 { right: -4%; bottom: 2%; }
.hc2 i { background: var(--fg); } .hc3 i { background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .hero-chip { animation: chipIn .7s cubic-bezier(.2,.9,.3,1.3) both, chipFloat 6s ease-in-out infinite; }
  .hc1 { animation-delay: .9s, 1.6s; } .hc2 { animation-delay: 1.1s, 0s; } .hc3 { animation-delay: 1.3s, 3s; }
}
@keyframes chipIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes chipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 960px) { .hero-chip { display: none; } }

/* ticker: big bold marquee, filled + outlined words alternate */
.ticker { padding: 1.8rem 0; border: 0; background: var(--bg-alt); -webkit-mask-image: none; mask-image: none; }
.ticker-track { gap: 2.4rem; align-items: center; }
.ticker-track span { font: 800 clamp(1.8rem, 4vw, 3.2rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--fg); }
.ticker-track span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.ticker-track span.dot { color: var(--accent); -webkit-text-stroke: 0; font-size: clamp(1.4rem, 3vw, 2.2rem); }

/* filosofia: words light up as you scroll (see motion.js) */
.filosofia h2 .w > span { transition: transform 1s cubic-bezier(.16,.9,.2,1), color .3s; }
.filosofia-p.scrub .sw { color: rgba(86,93,107,.28); transition: color .25s; }
.filosofia-p.scrub .sw.on { color: var(--fg); }
.filosofia-p { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.55; font-weight: 500; max-width: 54ch; }

/* casos: soft aurora behind the section */
.casos-wrap { position: relative; }
.casos-wrap::before {
  content: ""; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 20% 40%, rgba(0,87,255,.10), transparent 70%), radial-gradient(35% 45% at 85% 70%, rgba(0,87,255,.08), transparent 70%);
}

/* stats: bento tiles instead of a plain row */
.stats { gap: 1rem; border: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { border: 1px solid var(--line) !important; border-radius: 24px; padding: 2.4rem 1.4rem 2rem; text-align: left; background: #fff; position: relative; overflow: hidden; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat:nth-child(1) { background: var(--accent); border-color: var(--accent) !important; }
.stat:nth-child(2) { background: var(--bg-inverse); border-color: var(--bg-inverse) !important; }
.stat:nth-child(1) .stat-num, .stat:nth-child(1) .stat-suffix, .stat:nth-child(2) .stat-num { color: #fff; }
.stat:nth-child(1) .stat-label, .stat:nth-child(2) .stat-label { color: rgba(255,255,255,.7); }
.stat:nth-child(2) .stat-suffix { color: #7aa5ff; }
.stat:nth-child(3) { background: var(--bg-alt); }
.stat-label { margin-top: 1.4rem; font-weight: 500; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stat { padding: 1.6rem 1.1rem; } .stat:nth-child(n) { border-top: 1px solid var(--line); border-left: 1px solid var(--line); } }

/* trust cards: solid icon tiles */
.confianza-icon { background: var(--accent); color: #fff; border-radius: 14px; width: 46px; height: 46px; box-shadow: 0 10px 20px -10px rgba(0,87,255,.7); }
.confianza-card:nth-child(2) .confianza-icon { background: var(--fg); box-shadow: 0 10px 20px -10px rgba(10,14,23,.6); }
.confianza-card:nth-child(4) .confianza-icon { background: var(--fg); box-shadow: 0 10px 20px -10px rgba(10,14,23,.6); }

/* never allow sideways scroll from decorative overflow */
html, body { overflow-x: clip; }
main { overflow-x: clip; }

/* ==========================================================================
   Fase 25: "Tu negocio es único" — dark blue band + animated fingerprint
   (the uniqueness metaphor): ridges draw in, a biometric scan sweeps,
   status flips to "unique match", business traits float around it.
   ========================================================================== */
.filosofia.filo-dark {
  max-width: none; text-align: left;
  margin: 2rem clamp(.6rem, 1.5vw, 1.2rem) 0;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
  border-radius: 36px; position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(45% 60% at 82% 40%, rgba(0,87,255,.45), transparent 70%),
    radial-gradient(35% 50% at 0% 100%, rgba(0,87,255,.22), transparent 70%),
    var(--bg-inverse);
}
.filo-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 80% at 60% 50%, #000, transparent);
          mask-image: radial-gradient(80% 80% at 60% 50%, #000, transparent);
}
.filo-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,87,255,.22), transparent 60%);
}
.filo-dark.lit::after { opacity: 1; }
.filo-grid { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.filo-dark .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; margin-left: 0; }
.filo-dark h2 { color: #fff; text-align: left; font-size: clamp(2.3rem, 4.8vw, 4.2rem); }
.filo-dark .filosofia-p { margin-left: 0; color: rgba(255,255,255,.62); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.filo-dark .filosofia-p.scrub .sw { color: rgba(255,255,255,.22); }
.filo-dark .filosofia-p.scrub .sw.on { color: #fff; }

/* fingerprint visual */
.fp { position: relative; height: 520px; display: grid; place-items: center; }
.fp-core { position: relative; width: 300px; height: 340px; }
.fp-core svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(0,87,255,.75)); }
.fp-core path { fill: none; stroke: #7aa5ff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-core path:nth-child(3n) { stroke: #fff; stroke-opacity: .9; }
.fp-core path:nth-child(4n+1) { stroke: var(--accent); }
.fp-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(122,165,255,.25); transform: translate(-50%, -50%); }
.fp-ring.r1 { width: 400px; height: 400px; } .fp-ring.r2 { width: 520px; height: 520px; border-style: dashed; border-color: rgba(122,165,255,.15); }
.fp-scan { position: absolute; left: -6%; right: -6%; top: 0; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, #7aa5ff 20%, #fff 50%, #7aa5ff 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(0,87,255,.75), 0 0 60px 10px rgba(0,87,255,.35); }
.fp-corners i { position: absolute; width: 28px; height: 28px; border: 2.5px solid #fff; opacity: .85; }
.fp-corners i:nth-child(1) { left: -22px; top: -22px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.fp-corners i:nth-child(2) { right: -22px; top: -22px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.fp-corners i:nth-child(3) { left: -22px; bottom: -22px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.fp-corners i:nth-child(4) { right: -22px; bottom: -22px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.fp-status {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border-radius: 99px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
  font: 600 .82rem var(--font-body); white-space: nowrap;
}
.fp-status b { font-weight: 600; }
.fp-lbl { display: inline-grid; } .fp-lbl b { grid-area: 1 / 1; transition: opacity .3s; } .fp-s2 { opacity: 0; color: #7dffb0; }
.fp-dot { width: 8px; height: 8px; border-radius: 50%; background: #7aa5ff; box-shadow: 0 0 0 0 rgba(122,165,255,.6); animation: fpDot 1.2s ease-in-out infinite; }
@keyframes fpDot { 50% { box-shadow: 0 0 0 7px rgba(122,165,255,0); } }
.fp-tag {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
  font: 600 .8rem var(--font-body); color: #fff; opacity: 0; white-space: nowrap;
}
.fp-tag i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ft1 { left: 2%; top: 14%; } .ft2 { right: 0; top: 24%; } .ft3 { left: 0; bottom: 26%; } .ft4 { right: 4%; bottom: 18%; }

/* choreography (motion.js adds .in when the visual enters the viewport) */
.fp.in .fp-core path { animation: scDraw 1.3s calc(var(--k) * .06s) cubic-bezier(.6,0,.2,1) forwards; }
.fp.in .fp-scan { animation: fpScan 2.6s .4s ease-in-out infinite alternate; }
@keyframes fpScan { 0% { opacity: 1; top: -4%; } 100% { opacity: 1; top: 102%; } }
.fp.in .fp-ring.r1 { animation: fpPulse 3s ease-in-out infinite; }
.fp.in .fp-ring.r2 { animation: fpSpin 40s linear infinite; }
@keyframes fpPulse { 50% { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(122,165,255,.45); } }
@keyframes fpSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fp.in .fp-s1 { animation: fpHide .3s 2.8s forwards; }
.fp.in .fp-s2 { animation: fpShow .3s 2.8s forwards; }
.fp.in .fp-dot { animation: fpDot 1.2s ease-in-out infinite, fpOk 0s 2.8s forwards; }
@keyframes fpHide { to { opacity: 0; } }
@keyframes fpShow { to { opacity: 1; } }
@keyframes fpOk { to { background: #3ddc84; } }
.fp.in .fp-status { animation: fpMatch .6s 2.8s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes fpMatch { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.08); border-color: rgba(61,220,132,.6); } 100% { transform: translateX(-50%) scale(1); border-color: rgba(61,220,132,.45); background: rgba(61,220,132,.1); } }
.fp.in .fp-tag { animation: chipIn .7s cubic-bezier(.2,.9,.3,1.3) forwards, chipFloat 6s ease-in-out infinite; }
.fp.in .ft1 { animation-delay: 1.2s, 1.9s; } .fp.in .ft2 { animation-delay: 1.45s, 0s; }
.fp.in .ft3 { animation-delay: 1.7s, 3s; } .fp.in .ft4 { animation-delay: 1.95s, 1.2s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .filo-grid { grid-template-columns: 1fr; }
  .fp { height: 420px; }
  .fp-core { transform: scale(.82); }
  .fp-ring.r2 { width: 420px; height: 420px; }
}
@media (max-width: 760px) {
  .filosofia.filo-dark { border-radius: 26px; padding-left: 1.2rem; padding-right: 1.2rem; }
  .fp { height: 380px; margin: 0 -1rem; }
  .fp-core { transform: scale(.7); }
  .fp-ring.r1 { width: 300px; height: 300px; } .fp-ring.r2 { width: 360px; height: 360px; }
  .fp-tag { font-size: .7rem; padding: .4rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-core path { stroke-dashoffset: 0; } .fp-tag { opacity: 1; } .fp-s1 { opacity: 0; } .fp-s2 { opacity: 1; }
}

/* ==========================================================================
   Fase 26: "No hacemos software. Generamos retorno real." — VS comparison:
   a muted "traditional" card vs a dark-blue "Con Nezxu" card, each with a
   trend chart that draws in; old items get struck through, new ones check.
   Triggered by .reveal.in (main.js) on .vs-wrap.
   ========================================================================== */
.vs-wrap { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 1.4rem; align-items: stretch; margin-bottom: 3rem; }
.vs-card { position: relative; border-radius: 28px; padding: clamp(1.4rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; gap: 1.4rem; overflow: hidden; }
.vs-old { background: var(--bg-alt); border: 1px solid var(--line); }
.vs-new {
  color: #fff; border: 1px solid rgba(122,165,255,.3);
  background: radial-gradient(70% 60% at 100% 0%, rgba(0,87,255,.55), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(0,87,255,.25), transparent 70%), var(--bg-inverse);
  box-shadow: 0 40px 80px -40px rgba(0,87,255,.6);
}
.vs-new::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.vs-card > * { position: relative; }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.vs-label { display: inline-flex; align-items: center; gap: .55rem; font: 700 clamp(1.25rem, 2vw, 1.6rem) var(--font-display); letter-spacing: -.03em; }
.vs-old .vs-label { color: var(--muted); }
.vs-logo { font: 700 .8rem var(--font-mono); padding: .3rem .5rem; border-radius: 8px; background: var(--accent); color: #fff; }
.vs-kpi { font: 600 .74rem var(--font-body); padding: .35rem .75rem; border-radius: 99px; white-space: nowrap; }
.vs-kpi.down { background: rgba(194,59,59,.1); color: var(--warn); }
.vs-kpi.up { background: rgba(61,220,132,.14); color: #7dffb0; }
.vs-chart { position: relative; height: 130px; border-radius: 16px; padding: 10px 0 0; }
.vs-chart svg { width: 100%; height: 100px; display: block; overflow: visible; }
.vs-chart small { display: block; margin-top: .4rem; font: 500 .74rem var(--font-mono); }
.vs-old .vs-chart small { color: var(--muted-2); }
.vs-new .vs-chart small { color: rgba(255,255,255,.55); }
.vs-old .vs-area { fill: rgba(10,14,23,.05); }
.vs-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vs-old .vs-line { stroke: #a3a9b5; stroke-dasharray: 1; }
.vs-new .vs-line { stroke: #7aa5ff; filter: drop-shadow(0 0 6px rgba(0,87,255,.9)); }
.vs-area { opacity: 0; }
.vs-dot { position: absolute; right: -6px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(122,165,255,.35), 0 0 20px #3d7bff; opacity: 0; }
.vs-list { display: flex; flex-direction: column; gap: .2rem; margin-top: auto; }
.vs-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; font-size: .98rem; border-top: 1px solid var(--line); }
.vs-new .vs-list li { border-top-color: rgba(255,255,255,.1); color: #fff; }
.vs-old .vs-list li { color: var(--muted); }
.vs-ic { width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-top: .05rem; }
.vs-old .vs-ic { background: rgba(194,59,59,.1); color: var(--warn); }
.vs-new .vs-ic { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,87,255,.9); }
.vs-tx { position: relative; }
.vs-old .vs-tx::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; background: rgba(194,59,59,.55); transform: scaleX(0); transform-origin: 0 50%; }
.vs-badge {
  position: absolute; left: calc(46% - 2px); top: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font: 800 1.05rem var(--font-display); letter-spacing: -.02em; color: var(--fg); background: #fff;
  box-shadow: 0 0 0 8px var(--bg), 0 20px 40px -14px rgba(10,14,23,.4);
}
.vs-badge::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--accent), transparent 40%, var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vsSpin 4s linear infinite; }
@keyframes vsSpin { to { transform: rotate(360deg); } }

/* choreography */
.vs-wrap.in .vs-old .vs-line { animation: scDraw 1.6s .3s ease-in-out forwards; }
.vs-wrap.in .vs-new .vs-line { animation: scDraw 1.6s .8s cubic-bezier(.6,0,.2,1) forwards; }
.vs-wrap.in .vs-area { animation: scFade .8s 1.4s forwards; }
.vs-wrap.in .vs-dot { animation: scPop .5s 2.3s forwards, vsBeat 1.6s 2.8s ease-in-out infinite; }
@keyframes vsBeat { 50% { box-shadow: 0 0 0 10px rgba(122,165,255,.1), 0 0 30px #3d7bff; } }
.vs-wrap.in .vs-list li { animation: scUp .5s calc(.3s + var(--k) * .12s) both; }
.vs-wrap.in .vs-old .vs-tx::after { animation: shFill .5s calc(1.2s + var(--k) * .25s) ease-out forwards; }
.vs-wrap.in .vs-new .vs-ic { animation: scPop .45s calc(1.4s + var(--k) * .2s) both; }
.vs-wrap.in .vs-badge { animation: vsBadge .6s .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes vsBadge { from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-90deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (hover: hover) {
  .vs-new { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
  .vs-new:hover { transform: translateY(-4px); box-shadow: 0 50px 90px -40px rgba(0,87,255,.75); }
}
@media (max-width: 900px) {
  .vs-wrap { grid-template-columns: 1fr; gap: 2.6rem; }
  .vs-badge { left: 50%; top: auto; bottom: auto; }
  .vs-old { order: 1; } .vs-badge { order: 2; position: relative; transform: none; margin: -3.4rem auto; } .vs-new { order: 3; }
  .vs-wrap.in .vs-badge { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-line { stroke-dashoffset: 0; } .vs-area, .vs-dot { opacity: 1; } .vs-old .vs-tx::after { transform: none; }
}

/* ==========================================================================
   Fase 26: hero title takes center stage — no eyebrow, bigger type, a
   rotating accent word with a sliding mask, and a soft light sweep.
   ========================================================================== */
.hero.hero--studio .hero-title { font-size: clamp(2.6rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.055em; margin-bottom: .45em; }
.rot { position: relative; display: inline-block; vertical-align: bottom; height: 1.12em; overflow: hidden; padding: 0 .04em .12em 0; margin-bottom: -.12em; transition: width .55s cubic-bezier(.6,0,.2,1); white-space: nowrap; }
.rot-w { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.rot-w.is-on { position: relative; transform: none; opacity: 1; }
.rot-w.is-out { position: absolute; transform: translateY(-105%); opacity: 0; }
.rot.grad::after { bottom: .02em; }
/* the whole rotator rises in with the other headline words */
.split .rot-enter { transform: translateY(110%); transition: transform 1s cubic-bezier(.16,.9,.2,1) calc(var(--i) * 45ms + 80ms), width .55s cubic-bezier(.6,0,.2,1); }
.split.in .rot-enter { transform: none; }
/* light sweep across the title once it's in */
.hero-title { position: relative; }
.hero-title.split.in::after {
  content: ""; position: absolute; inset: -10% -5%; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  mix-blend-mode: soft-light; transform: translateX(-100%); animation: titleSweep 1.6s 1.1s ease-in-out forwards;
}
@keyframes titleSweep { to { transform: translateX(100%); } }
.hero--studio .hero-sub { font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .rot { width: auto !important; } }

/* VS badge on mobile: centered between stacked cards */
@media (max-width: 900px) { .vs-badge { left: auto; } }
/* VS badge: simpler render (the masked conic ring didn't paint in Chrome) */
.vs-badge::before { display: none; }
.vs-badge { border: 2px solid var(--accent); box-shadow: 0 0 0 8px #fff, 0 0 0 9px rgba(0,87,255,.25), 0 20px 40px -14px rgba(10,14,23,.4); }
.vs-wrap.in .vs-badge { animation: vsBadgeIn .6s .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes vsBadgeIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

/* mobile menu (open): keep logo / language / burger on one row; the CTA
   moves inside the dropdown as a full-width button under the links */
@media (max-width: 1100px) {
  .nav.open { flex-wrap: nowrap; }
  .nav.open .nav-links { padding-bottom: 5.4rem; }
  .nav.open .btn-nav {
    display: inline-flex; position: absolute; z-index: 2; margin: 0;
    left: 1rem; right: 1rem; top: calc(100% + 8px + var(--menu-h, 0px) - 4.6rem); justify-content: center;
  }
}