/* =============================================================
   MIMESIS — styles.css
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 40%; }

:root {
  --bg:        #08060d;
  --bg-1:      #0d0a17;
  --bg-2:      #140f22;
  --bg-3:      #1c1530;
  --ink:       #f6f3fb;
  --ink-soft:  #d9d2e8;
  --mute:      #a99cc4;
  --mute-2:    #8b81a2;   /* lightened from #766a90 — passes WCAG AA (4.5:1+) on every surface tone used */
  --line:      rgba(246,243,251,0.12);
  --line-soft: rgba(246,243,251,0.07);

  --accent:    #8b5cf6;   /* violet */
  --accent-2:  #c730da;   /* magenta — lightened from #c026d3 so button text keeps AA contrast at this end of the gradient */
  --accent-3:  #22d3ee;   /* cyan tech glint */
  --accent-ink:#efe7ff;

  --gradient-1: #7c3aed;
  --gradient-2: #c026d3;
  --gradient-3: #2563eb;
  --gradient-4: #22d3ee;

  --display: "Exo 2", "Segoe UI", sans-serif;
  --sans: "Montserrat", "Segoe UI", sans-serif;
  --script: "Rubita Smile", cursive;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* data only: figures, codes, standards */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 76px;
  --gutter: 1.25rem;
  --radius: 18px;
  --radius-sm: 10px;
}

@font-face {
  font-family: "Rubita Smile";
  src: url("assets/fonts/RubitaSmile.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  min-height: 100svh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-family: var(--display); color: var(--ink); font-weight: 700; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  flex: none;
}

.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.grad-text {
  background: linear-gradient(100deg, var(--accent-3), var(--accent) 45%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hr {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* Reveal-on-scroll base — keyed on [data-reveal] directly, not a separate class the HTML has to remember to add */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-split] { opacity: 1; transform: none; } /* defensive: never let split-text parents stay hidden */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================
   4. Typography
   ============================================================= */
h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--mute); max-width: 62ch; }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn-primary {
  color: #0a0712;
  background: linear-gradient(120deg, var(--accent-3), var(--accent) 55%, var(--accent-2));
  background-size: 180% 180%;
  box-shadow: 0 18px 40px -14px rgba(139, 92, 246, .55);
}
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 48px -12px rgba(192, 38, 211, .55); }
.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(246,243,251,0.03);
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(139,92,246,0.1); transform: translateY(-2px); }
.btn-sm { padding: .7rem 1.25rem; font-size: .85rem; }

/* Nav */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(8,6,13,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.nav-brand { display: flex; align-items: center; font-family: var(--script); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.nav-links { display: none; align-items: center; gap: 1.75rem; }
.nav-links a {
  position: relative;
  font-size: .92rem; font-weight: 600; color: var(--mute-2);
  transition: color .3s var(--ease-out);
  padding-block: .3rem;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent));
  transition: right .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: .9rem; }
.nav-actions .btn-primary { display: none; }
.nav-toggle {
  display: inline-flex; width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center; border: 1px solid var(--line);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 90;
  background: rgba(4,3,8,0.6);
  backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .5s var(--ease-soft), visibility 0s linear .5s;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }

.mobile-menu-panel {
  width: min(400px, 88vw);
  height: 100%;
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border-left: 1px solid var(--line);
  border-radius: 24px 0 0 0;
  box-shadow: -40px 0 80px -30px rgba(0,0,0,.6);
  padding: 1.75rem 1.5rem 1.75rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(32px);
  opacity: 0;
  transition: transform .65s var(--ease-bounce), opacity .45s var(--ease-soft);
}
.mobile-menu.is-open .mobile-menu-panel { transform: none; opacity: 1; }

.mobile-menu-header { display: flex; align-items: center; gap: .85rem; flex: none; }
.mobile-menu-header img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.mobile-menu-header strong { display: block; font-family: var(--script); font-size: 1.6rem; font-weight: 400; color: var(--ink); line-height: 1; }
.mobile-menu-header span { display: block; font-size: .78rem; color: var(--mute); margin-top: .35rem; letter-spacing: .02em; }

.mobile-menu-hr { height: 1px; background: var(--line); margin: 1.5rem 0; flex: none; }

.mobile-menu-list { display: flex; flex-direction: column; gap: .3rem; }
.mobile-menu-list a {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem .85rem; border-radius: 14px;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--ink-soft);
  opacity: 0; transform: translateX(20px);
  transition-property: background, color, opacity, transform;
  transition-duration: .3s, .3s, .6s, .6s;
  transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-bounce), var(--ease-bounce);
  transition-delay: 0s, 0s, 0s, 0s;
}
.mobile-menu.is-open .mobile-menu-list a { opacity: 1; transform: none; }
.mobile-menu-list a:hover, .mobile-menu-list a.is-active { background: rgba(139,92,246,.16); color: var(--ink); }
/* Staggered entrance: only opacity/transform (3rd + 4th listed) get delayed — hover stays instant. */
.mobile-menu-list a:nth-child(1) { transition-delay: 0s, 0s, .08s, .08s; }
.mobile-menu-list a:nth-child(2) { transition-delay: 0s, 0s, .15s, .15s; }
.mobile-menu-list a:nth-child(3) { transition-delay: 0s, 0s, .22s, .22s; }
.mobile-menu-list a:nth-child(4) { transition-delay: 0s, 0s, .29s, .29s; }
.mobile-menu-list a:nth-child(5) { transition-delay: 0s, 0s, .36s, .36s; }
.mobile-menu-list a:nth-child(6) { transition-delay: 0s, 0s, .43s, .43s; }

.mm-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--mute-2); transition: color .3s var(--ease-out); }
.mm-icon svg { width: 22px; height: 22px; }
.mobile-menu-list a:hover .mm-icon, .mobile-menu-list a.is-active .mm-icon { color: var(--accent-3); }

.mobile-menu .mobile-cta {
  margin-top: auto; justify-content: center; gap: .65rem; flex: none;
  opacity: 0; transform: translateX(20px);
  transition: opacity .55s var(--ease-bounce) .5s, transform .55s var(--ease-bounce) .5s, box-shadow .45s var(--ease-out), background .3s var(--ease-out);
}
.mobile-menu.is-open .mobile-cta { opacity: 1; transform: none; }
.mobile-cta .mm-icon { width: 20px; height: 20px; color: inherit; }
.mobile-cta .mm-icon svg { width: 20px; height: 20px; }

/* Cards */
.card {
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem;
}

/* Numbered list rows (signature: expandable service/work rows) */
.rows { border-top: 1px solid var(--line); }
.row {
  border-bottom: 1px solid var(--line);
}
.row-head {
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; text-align: left;
  padding-block: 1.9rem;
}
.row-num { font-family: var(--display); font-size: .95rem; color: var(--mute-2); flex: none; width: 2.4rem; }
.row-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.9rem); color: var(--ink); flex: 1; transition: color .3s var(--ease-out); }
.row-teaser { display: none; font-size: .95rem; color: var(--mute); flex: none; max-width: 30ch; }
.row-icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease-bounce), border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.row-icon svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.row[aria-expanded="true"] .row-icon { transform: rotate(135deg); border-color: var(--accent); background: rgba(139,92,246,.12); }
.row:hover .row-title { color: var(--accent-3); }
/* Default (and no-JS): content is fully visible. Only collapse once JS (.is-ready) is active. */
.row-body {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .5s var(--ease-out), opacity .4s var(--ease-out);
}
.is-ready .row[aria-expanded="false"] .row-body { grid-template-rows: 0fr; opacity: 0; }
.row-body-inner { overflow: hidden; }
.row-content {
  display: grid; gap: 1.75rem;
  padding-block: 0 2.25rem;
  grid-template-columns: 1fr;
}
.row-content img { border-radius: var(--radius-sm); border: 1px solid var(--line); aspect-ratio: 16/10; object-fit: cover; }
.row-content ul { display: grid; gap: .6rem; }
.row-content li { position: relative; padding-left: 1.3rem; color: var(--ink-soft); font-size: .95rem; }
.row-content li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); }
.row-content.faq-single { max-width: 70ch; }
.row-content.faq-single p { color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.1rem; background: var(--bg-1); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 26s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: var(--mute-2); text-transform: uppercase; white-space: nowrap; }
.marquee-track span em { font-style: normal; color: var(--accent-3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Stats / count-up */
.stats { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.stat-label { color: var(--mute); font-size: .9rem; margin-top: .35rem; }

/* Process numbered blocks */
.process { display: grid; gap: 2.25rem; }
.process-item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; }
.process-num { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: transparent; -webkit-text-stroke: 1.5px var(--mute-2); }
.process-item h3 { margin-bottom: .4rem; }
.process-item p { color: var(--mute); font-size: .95rem; }

/* Contact links */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }

.huge-link {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 4vw, 2.1rem);
  white-space: nowrap;
}

/* Invert-on-hover heading block (signature: massive type invert) */
.invert-box {
  display: inline-block;
  padding: .1em .28em;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
  border-radius: .12em;
}
.invert-box:hover { background: var(--ink); color: var(--bg); }

/* Forms */
.form-grid { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--mute); letter-spacing: .03em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-size: .98rem;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--bg-3); }
.field textarea { resize: vertical; min-height: 130px; }
.field-consent {
  display: flex; flex-direction: row; align-items: flex-start; gap: .7rem;
}
.field-consent input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.field-consent label {
  font-size: .85rem; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--ink-soft); line-height: 1.5; cursor: pointer;
}
.field-consent label a { color: var(--accent-3); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.form-note { font-size: .82rem; color: var(--mute-2); margin-top: .75rem; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; background: var(--bg-1); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-col-group { display: grid; gap: 2rem; }
.footer-brand { display: inline-flex; align-items: center; }
.footer-brand img { width: 58px; height: 58px; border-radius: 50%; }
.footer-tagline { color: var(--mute); max-width: 34ch; margin-top: .9rem; font-size: .92rem; }
.footer-col h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 1rem; font-weight: 700; }
.footer-col ul { display: grid; gap: .65rem; }
.footer-col a { color: var(--ink-soft); font-size: .95rem; }
.footer-col a:hover { color: var(--accent-3); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--mute-2);
}

/* =============================================================
   6. Sections
   ============================================================= */

/* Hero (signature: mouse-reactive gradient mesh, with ambient brand footage behind it) */
.hero {
  position: relative;
  isolation: isolate; /* own stacking context so the negative z-index layers below paint above this background, not under it */
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  overflow: clip;
  background: var(--bg); /* solid fallback if the video never loads */
}
.hero-video-wrap { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--bg); }
.hero-video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5; filter: saturate(1.25);
}
.hero-gradient {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle 620px at var(--mx) var(--my), color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 60%),
    radial-gradient(circle 780px at calc(var(--mx) + 18%) calc(var(--my) - 14%), color-mix(in srgb, var(--accent-2) 46%, transparent) 0%, transparent 62%),
    radial-gradient(circle 900px at calc(var(--mx) - 22%) calc(var(--my) + 20%), color-mix(in srgb, var(--accent-3) 30%, transparent) 0%, transparent 65%),
    color-mix(in srgb, var(--bg) 72%, transparent);
  filter: blur(46px) saturate(135%);
  transition: background .6s var(--ease-out);
  animation: meshDrift 22s ease-in-out infinite;
}
@keyframes meshDrift {
  0%, 100% { --my: 40%; }
  50% { --my: 46%; }
}
.hero-noise {
  position: absolute; inset: 0; z-index: -1; opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-inner { max-width: 980px; }
.hero-eyebrow { margin-bottom: 1.6rem; }
.hero-title { margin-bottom: 1.6rem; }
.hero-title span { display: block; }
/* Base state (and no-JS fallback): fully visible, no clipping. Only once JS adds
   .is-typing right before typing does it start clipped — it never ships hidden. */
.hero-title .grad-text { display: inline-block; }
.hero-title .grad-text.is-typing {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s steps(15, end);
  border-right: .09em solid var(--accent-3);
  animation: caretBlink .8s step-end infinite;
}
.hero-title .grad-text.is-typing.is-typed { clip-path: inset(0 0% 0 0); }
@keyframes caretBlink { 50% { border-color: transparent; } }
.hero-sub { margin-bottom: 2.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; }
.hero-scroll { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--mute-2); letter-spacing: .08em; text-transform: uppercase; }
.hero-scroll::after {
  content: ""; width: 1px; height: 34px; background: linear-gradient(var(--accent-3), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* Home hero: mímesis. The real scene and its digital twin share one picture box; the seam
   (--seam, % of the box) clips the twin. CSS loops the scan; main.js initMimesis hands it to the pointer. */
@property --seam { syntax: "<percentage>"; inherits: true; initial-value: 103%; }
.hero-mimesis { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--nav-h) 0 2.5rem; }
.mm-stage { position: relative; height: min(84vw, 48svh); overflow: hidden; background: #050409; }
.mm-pic { position: absolute; right: 0; top: 50%; transform: translateY(-47%); width: 165vw; aspect-ratio: 1344 / 768; animation: mm-scan 10s var(--ease-soft) .8s infinite; }
.hero-mimesis.is-driven .mm-pic { animation: none; }
.mm-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-digital { clip-path: inset(0 0 0 var(--seam)); }
.mm-seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--accent-3) 18%, var(--accent) 55%, var(--accent-2) 85%, transparent);
  box-shadow: 0 0 14px 2px rgba(34,211,238,.55), 0 0 42px 6px rgba(139,92,246,.35); }
.mm-tag { position: absolute; top: var(--ky, 64%); transform: translateY(-50%); transition: right .35s var(--ease-out), left .35s var(--ease-out); font: 500 .72rem/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: .35rem .5rem; border-radius: 6px; background: rgba(8,6,13,.74); color: var(--ink-soft); }
.mm-tag-l { right: 12px; }
.mm-tag-r { left: 12px; color: var(--accent-3); }
/* pointer in control: the seam brightens and grows a handle that follows the cursor */
.mm-seam { transition: width .3s, box-shadow .3s; }
.mm-knob { position: absolute; left: 50%; top: var(--ky, 64%); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: rgba(8,6,13,.6); border: 1.5px solid var(--accent-3);
  box-shadow: 0 0 20px rgba(34,211,238,.55), inset 0 0 12px rgba(139,92,246,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.5); transition: opacity .3s var(--ease-soft), transform .45s var(--ease-bounce); }
.mm-knob svg { width: 20px; height: 20px; }
.mm-knob::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--accent-2); opacity: 0; }
.is-driven .mm-knob { opacity: 1; transform: none; }
.is-driven .mm-knob::after { animation: mm-ping 1.6s var(--ease-out) infinite; }
@keyframes mm-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.is-driven .mm-seam { width: 3px; box-shadow: 0 0 18px 3px rgba(34,211,238,.75), 0 0 60px 10px rgba(139,92,246,.45); }
.is-driven .mm-tag-l { right: 36px; }
.is-driven .mm-tag-r { left: 36px; }
@keyframes mm-scan {
  0%, 18% { --seam: 103%; }
  42%, 66% { --seam: 30%; }
  92%, 100% { --seam: 103%; }
}
.mm-stage::after { content: ""; position: absolute; inset: auto 0 -1px; height: 40%; pointer-events: none; background: linear-gradient(to top, var(--bg), transparent); }
.hero-mimesis .hero-inner { position: relative; z-index: 1; margin-top: -2.6rem; }
.hero-mimesis .hero-title { font-size: clamp(2.05rem, 8.2vw, 3rem); line-height: 1.05; margin-bottom: 0; }
.hero-mimesis .hero-title span { display: inline; }
.hero-mimesis .hero-cta { margin: 1.8rem 0 0; }
.hero-mimesis .hero-scroll { display: none; }
/* "conectan": a line of light joins the words; "soluciones": the brand gradient, swept in time with the scan */
.mm-connect { font-style: normal; position: relative; white-space: nowrap; }
.mm-connect::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .09em; border-radius: 1em;
  background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(34,211,238,.6);
  transform-origin: left; animation: mm-link 10s var(--ease-out) .8s infinite; }
@keyframes mm-link { 0%, 20% { transform: scaleX(0); } 36%, 82% { transform: none; } 94%, 100% { transform: scaleX(0); transform-origin: right; } }
.mm-sol { font-weight: inherit; background: linear-gradient(100deg, var(--accent-3), var(--accent) 30%, var(--accent-2) 50%, var(--accent) 70%, var(--accent-3)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mm-sweep 10s linear .8s infinite; }
@keyframes mm-sweep { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (min-width: 960px) {
  .hero-mimesis { height: 100svh; min-height: 640px; justify-content: flex-start; padding: calc(var(--nav-h) + clamp(2rem, 9svh, 6rem)) 0 0; }
  .mm-stage { position: absolute; inset: 0; z-index: -1; height: auto; }
  .mm-pic { width: max(100%, 100svh * 1344 / 768); transform: translateY(-50%); }
  .mm-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,6,13,.82) 0, rgba(8,6,13,.45) 30%, rgba(8,6,13,0) 50%), linear-gradient(to bottom, rgba(8,6,13,.55), transparent 16%); }
  .mm-stage::after { height: 22%; z-index: 1; }
  .hero-mimesis .hero-inner { margin-top: 0; max-width: 1280px; }
  .hero-mimesis .hero-title { font-size: clamp(2.6rem, 3.5vw, 3.7rem); }
  .hero-mimesis .hero-title span { display: block; }
  .hero-mimesis .hero-cta { margin-top: clamp(1.8rem, 4svh, 2.6rem); flex-wrap: nowrap; }
  .hero-mimesis .hero-scroll { display: inline-flex; position: absolute; bottom: 2rem; }
  .hero-mimesis { cursor: ew-resize; }
  .hero-mimesis .hero-inner { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-pic { animation: none; --seam: 64%; }
  .mm-connect::after, .mm-sol { animation: none; }
}

/* Manifesto */
.manifesto { text-align: left; }
.manifesto p { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.7rem); color: var(--ink-soft); max-width: 58ch; line-height: 1.4; }
.manifesto .eyebrow { margin-bottom: 1.8rem; }

/* Page header (for sub-pages) */
.page-header { padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.page-header .eyebrow { margin-bottom: 1.3rem; }
.page-header h1 { max-width: 18ch; }
.page-header .lede { margin-top: 1.2rem; }

/* Service teaser grid (index) */
.services-grid { display: grid; gap: 1.25rem; }
.service-card {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.9rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  transition: transform .5s var(--ease-out), border-color .4s var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.service-card .row-num { width: auto; }
.service-card h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.service-card p { color: var(--mute); font-size: .92rem; }
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* Featured work (NEXUM) */
.feature-work { display: grid; gap: 2rem; }
.feature-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.feature-media img { width: 100%; }
.feature-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.tag { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); }

/* Final CTA band */
.cta-band {
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  position: relative;
  overflow: clip;
  background: radial-gradient(120% 140% at 50% 0%, rgba(139,92,246,.18), transparent 60%), var(--bg-2);
}
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; margin-top: 1rem; }
.cta-band .lede { margin-inline: auto; margin-top: 1rem; }
.cta-band .hero-cta { justify-content: center; margin-top: 2rem; margin-bottom: 0; }

/* Final section: global-reach 3D globe (index.html only) */
.reach-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
.reach-section::before {
  content: ""; position: absolute; inset: -15% -10%; z-index: -1;
  background: radial-gradient(55% 55% at 50% 42%, rgba(139,92,246,.16), transparent 70%);
  pointer-events: none;
}
.reach-globe {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.reach-globe canvas {
  width: min(760px, 92vw); height: min(760px, 92vw);
  max-height: 80vh;
  opacity: .9;
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
}
.reach-content {
  position: relative; z-index: 1;
  max-width: 620px; margin-inline: auto; text-align: center;
}
.reach-content h2 { max-width: 18ch; margin-inline: auto; text-shadow: 0 4px 30px rgba(8,6,13,.8); }
.reach-content .lede { margin-inline: auto; margin-top: 1rem; }
.reach-content .hero-cta { justify-content: center; margin-top: 2.2rem; margin-bottom: 0; }

/* Portfolio grid */
.portfolio-grid { display: grid; gap: 1.5rem; }
.pf-card { border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); display: flex; flex-direction: column; }
.pf-media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.pf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pf-media.pf-logo { padding: 2.2rem; }
.pf-media.pf-logo img { object-fit: contain; }
.pf-card:hover .pf-media img { transform: scale(1.06); }
.pf-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.pf-body h3 { font-size: 1.2rem; }
.pf-body p { color: var(--mute); font-size: .92rem; }
.pf-body .feature-tags { margin-bottom: 0; margin-top: auto; padding-top: .5rem; }

/* Mission / vision two-up */
.mv-grid { display: grid; gap: 1.5rem; }
.mv-grid .card h3 { font-size: 1.1rem; margin-bottom: .7rem; }
.mv-grid .card p { color: var(--mute); font-size: .95rem; }

/* Legal pages (privacy, terms, cookies, refunds) */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.75rem; margin-bottom: 1rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: 1.75rem; margin-bottom: .6rem; color: var(--ink); }
.legal p { margin-bottom: 1.1rem; color: var(--ink-soft); }
.legal ul, .legal ol { margin: 0 0 1.1rem; padding-left: 1.4rem; color: var(--ink-soft); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--accent-3); }
.legal a { color: var(--accent-3); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink); }
.legal .updated { color: var(--mute); font-size: .88rem; margin-bottom: 2.5rem; }
.legal-toc { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.legal-toc a { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.legal-toc a:hover { border-color: var(--accent); color: var(--accent-3); text-decoration: none; }

/* Contact page */
.contact-grid { display: grid; gap: 3rem; }
.contact-direct { display: grid; gap: 1.6rem; }
.contact-direct-item { display: flex; flex-direction: column; gap: .35rem; }
.contact-direct-item span.k { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); font-weight: 700; }
.company-meta { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute-2); display: grid; gap: .3rem; }

/* Quote chat widget (floating, transversal on every page) */
/* Back to top: quiet, sits above the chat button, only on long pages */
.to-top {
  position: fixed; right: calc(1.25rem + 8px); bottom: calc(1.25rem + 58px + .8rem); z-index: 199;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-soft); background: rgba(20,15,34,.86); border: 1px solid var(--line);
  opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s, border-color .3s, color .3s;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.to-top:hover { color: var(--ink); border-color: var(--accent); }
.mobile-menu.is-open ~ .to-top, html.is-presenting .to-top { display: none; }

.qchat-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--accent-3), var(--accent) 55%, var(--accent-2));
  color: #0a0712; box-shadow: 0 18px 40px -12px rgba(139,92,246,.6);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.qchat-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 48px -10px rgba(192,38,211,.6); }
.qchat-fab svg { width: 26px; height: 26px; }
.qchat-fab .qchat-fab-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent-3);
  opacity: .55; animation: qchatPing 2.6s ease-out infinite;
}
@keyframes qchatPing { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
.mobile-menu.is-open ~ .qchat-fab, .mobile-menu.is-open ~ .qchat-panel { display: none; }
.qchat-fab[aria-expanded="true"] { display: none; }

.qchat-panel {
  position: fixed; inset: 0; z-index: 199;
  width: 100%; height: 100%; max-height: 100%; border-radius: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.65);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.qchat-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

.qchat-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
}
.qchat-header-id { display: flex; align-items: center; gap: .65rem; }
.qchat-header-id img { width: 34px; height: 34px; border-radius: 50%; }
.qchat-header strong { font-family: var(--display); font-size: 1rem; color: var(--ink); display: block; }
.qchat-header span { font-size: .78rem; color: var(--mute); }
.qchat-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex: none;
  color: var(--ink-soft); transition: border-color .3s, color .3s;
}
.qchat-close:hover { border-color: var(--accent); color: var(--accent-3); }

.qchat-body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .65rem; }
.qchat-bubble { max-width: 88%; padding: .7rem .95rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.qchat-bubble.bot { align-self: flex-start; background: var(--bg-3); color: var(--ink-soft); border-bottom-left-radius: 4px; }
.qchat-bubble.user {
  align-self: flex-end; color: #0a0712; font-weight: 600; border-bottom-right-radius: 4px;
  background: linear-gradient(120deg, var(--accent-3), var(--accent));
}
.qchat-typing { align-self: flex-start; display: flex; gap: 4px; padding: .85rem 1rem; background: var(--bg-3); border-radius: 14px; border-bottom-left-radius: 4px; }
.qchat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mute-2); animation: qchatDot 1.2s ease-in-out infinite; }
.qchat-typing span:nth-child(2) { animation-delay: .15s; }
.qchat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes qchatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.qchat-footer { border-top: 1px solid var(--line); padding: .9rem 1rem; background: var(--bg-1); display: flex; flex-direction: column; gap: .6rem; }
.qchat-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.qchat-option {
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: .84rem; font-weight: 600; color: var(--ink-soft); background: var(--bg-2);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background .3s var(--ease-out);
}
.qchat-option:hover { border-color: var(--accent); color: var(--accent-3); background: rgba(139,92,246,.1); }
.qchat-option.qchat-option-primary { border-color: var(--accent); color: var(--accent-ink); background: rgba(139,92,246,.16); }
.qchat-input-row { display: flex; gap: .55rem; align-items: flex-end; }
.qchat-input-row textarea, .qchat-input-row input {
  flex: 1; padding: .75rem .9rem; border-radius: var(--radius-sm); resize: none;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-size: .92rem; max-height: 6.5rem;
}
.qchat-input-row textarea:focus, .qchat-input-row input:focus { border-color: var(--accent); }
.qchat-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--accent-3), var(--accent));
  color: #0a0712;
}
.qchat-send svg { width: 18px; height: 18px; }
.qchat-send:disabled { opacity: .4; }
.qchat-note { font-size: .74rem; color: var(--mute-2); text-align: center; }

/* =============================================================
   7. Effects
   ============================================================= */
[data-count] { font-variant-numeric: tabular-nums; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (max-width: 719px) {
  .home-blog-grid > :nth-child(3) { display: none; }
}

@media (min-width: 540px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .form-grid.two-col { grid-template-columns: 1fr 1fr; }
  .form-grid.two-col .field-full { grid-column: 1 / -1; }

  .qchat-panel {
    inset: auto; right: 1.5rem; bottom: 5.75rem;
    width: 384px; height: auto; max-height: min(600px, calc(100vh - 8rem));
    border-radius: var(--radius);
  }
}

@media (min-width: 720px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .row-teaser { display: block; }
  .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; }
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-actions .btn-primary { display: inline-flex; }
  .row-content { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .row-content.faq-single { grid-template-columns: 1fr; }
  .feature-work { grid-template-columns: 1fr 1fr; align-items: center; }
  .process { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
}

@media (min-width: 1280px) {
  .portfolio-grid.pf-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .footer-col-group { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   8b. Blog — listing cards + article body
   ============================================================= */
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; color: var(--mute); font-size: .85rem; }
.post-meta .dot { color: var(--line); }
.pf-body .post-meta { margin-top: auto; padding-top: .5rem; font-size: .8rem; }
.post-hero { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; margin: 2rem 0 2.8rem; background: var(--bg-3); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { max-width: 72ch; margin: 0 auto; }
.post-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.6rem; margin-bottom: 1rem; }
.post-body h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); margin-top: 1.8rem; margin-bottom: .8rem; }
.post-body p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.2rem; }
.post-body ul, .post-body ol { padding-left: 1.3rem; margin-bottom: 1.2rem; color: var(--ink-soft); line-height: 1.7; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: .5rem; }
.post-body strong { color: var(--ink); }
.post-body a:not(.btn) { color: var(--accent-3); text-decoration: underline; text-underline-offset: 3px; }
.post-cta { margin: 3rem 0; }
.post-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--mute); font-size: .9rem; font-weight: 600; }
.post-share { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.post-related { margin-top: 1rem; }

/* =============================================================
   8c. Portfolio deck — slide-by-slide presentation (portafolio.html)
   ============================================================= */
.deck-slide {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)) clamp(5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--line-soft);
}
.deck-slide:first-of-type { border-top: 0; }
/* Portfolio cover: full-bleed image, centered title */
.deck-cover { overflow: hidden; isolation: isolate; text-align: center; }
.deck-cover-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.deck-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(8,6,13,.55), rgba(8,6,13,.2) 70%), linear-gradient(180deg, rgba(8,6,13,.45) 0%, rgba(8,6,13,.15) 45%, var(--bg) 100%);
}
.deck-cover-inner { display: flex; flex-direction: column; align-items: center; }
.deck-cover .eyebrow { justify-content: center; }
.deck-cover-title { margin-top: 1.2rem; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .98; }
.deck-cover-title .script-accent { display: block; font-size: .78em; margin-top: .15em; }
.deck-cover .lede { margin: 1.6rem auto 0; max-width: 56ch; }
.deck-cover .hero-cta { justify-content: center; }
.line-card[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* Servicios hero: the studio desk. Each service in the headline has its object on the desk;
   the spotlight walks between them (main.js initServiceStage). Pins are % of the picture box,
   so the box keeps the photo's ratio and is cropped by the stage instead of object-fit. */
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: 76%; }
@property --sy { syntax: "<percentage>"; inherits: true; initial-value: 47%; }
.svc-hero { isolation: isolate; overflow: hidden; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--nav-h) 0 2.5rem; }
.svc-stage { position: relative; height: min(88vw, 50svh); overflow: hidden; background: var(--bg-2); }
.svc-stage-pic { position: absolute; right: 0; bottom: 0; width: 162vw; aspect-ratio: 1672 / 941; transition: --sx .9s var(--ease-out), --sy .9s var(--ease-out); }
.svc-stage-pic img { display: block; width: 100%; height: 100%; animation: hero-in 1.4s var(--ease-soft) both; }
/* the desk lamp is the light source of the whole page */
.svc-stage-pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 79% 11%, rgba(255,200,130,.38), rgba(255,160,90,.12) 14%, transparent 30%);
  animation: candle 3.6s var(--ease-soft) infinite alternate;
}
@keyframes candle { from { opacity: .75; } to { opacity: 1; } }
@keyframes svc-tick { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hero-in { from { transform: scale(1.06); } to { transform: none; } }
.svc-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-soft);
  background: radial-gradient(ellipse 12% 21% at var(--sx) var(--sy), transparent 30%, rgba(8,6,13,.72) 100%); }
.svc-hero[data-active] .svc-dim { opacity: 1; }
.svc-pin { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px rgba(246,243,251,.18); opacity: .55; transform: scale(.7);
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease-bounce), background-color .4s; }
.svc-pin i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font: 500 .75rem/1 var(--mono); font-style: normal; letter-spacing: .04em;
  color: var(--ink); padding: .3rem .45rem; border-radius: 6px; background: rgba(8,6,13,.72); opacity: 0; transition: opacity .4s; }
.svc-pin.is-on { opacity: 1; transform: none; background: var(--accent-3); box-shadow: 0 0 0 5px rgba(34,211,238,.25), 0 0 24px 4px rgba(34,211,238,.55); }
.svc-pin.is-on i { opacity: 1; }
.svc-stage::after { content: ""; position: absolute; inset: auto 0 -1px; height: 38%; pointer-events: none; background: linear-gradient(to top, var(--bg), transparent); }
.svc-hero-copy { position: relative; z-index: 1; margin-top: -3.2rem; }
.svc-title { font-size: clamp(2.05rem, 8.4vw, 3rem); line-height: 1.04; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.svc-title .script-accent { display: block; font-size: 1.12em; line-height: 1.15; margin-top: .05em; }
.svc-k { background: linear-gradient(100deg, var(--accent-3), var(--accent) 50%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: var(--ink); transition: color .5s var(--ease-soft); }
.svc-k.is-on { color: transparent; }
.svc-hero-copy .hero-cta { margin: 1.8rem 0 0; }
.svc-index { display: none; }
.deck-slide > .container { width: 100%; }
.split { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.deck-title { margin-top: 1.2rem; font-size: clamp(2.5rem, 6vw, 4.9rem); }
.nowrap { white-space: nowrap; }
.script-accent {
  font-family: var(--script); font-weight: 400; letter-spacing: 0;
  background: linear-gradient(100deg, var(--accent-3), var(--accent) 45%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.deck-h2 { margin-block: 1rem 1.2rem; max-width: 20ch; }
.deck-h2-wide { max-width: 34ch; font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.deck-body { color: var(--mute); margin-top: 1.1rem; max-width: 60ch; line-height: 1.7; }
.deck-emphasis { color: var(--ink-soft); font-weight: 600; font-style: italic; }

.deck-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0 2.2rem; }
.deck-chips li {
  padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(139,92,246,.08); color: var(--ink-soft);
  font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}

.media-frame {
  position: relative; margin: 0; overflow: hidden;
  border-radius: calc(var(--radius) * 1.2); border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 40px 90px -45px rgba(139,92,246,.6);
}
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-tall, .media-square { width: 100%; max-width: 480px; justify-self: center; }
.media-tall img { aspect-ratio: 4 / 5; }
.media-wide img { aspect-ratio: 16 / 10; }
.media-square img { aspect-ratio: 1; }
.media-quote { text-wrap: pretty; padding: 1rem 1.3rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); }
.media-quote strong { color: var(--accent-3); }
.media-tag {
  position: absolute; left: 1rem; bottom: 1rem; padding: .45rem .8rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(8,6,13,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.media-stack { position: relative; padding-bottom: 22%; }
.media-stack .media-frame:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 60%; border-color: rgba(139,92,246,.45); }

.deck-quote {
  margin: 2rem 0 0; padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, rgba(139,92,246,.14), transparent);
}
.deck-quote p { margin-top: .6rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.3; color: var(--ink); }
.mv-stack { display: grid; gap: 1.2rem; }
.mv-stack h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.mv-stack p { color: var(--mute); }

.pillars {
  display: grid; gap: 1px; margin: 2.4rem 0 3rem; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
}
.pillar { padding: 1.6rem; background: var(--bg); transition: background .35s var(--ease-out); }
.pillar:hover { background: var(--bg-2); }
.pillar h3 { font-size: 1.1rem; margin: .7rem 0 .45rem; }
.pillar p { color: var(--mute); font-size: .92rem; }
.pillars-3 .pillar { padding: clamp(1.6rem, 3vw, 2.4rem); }
.pillars-3 .pillar h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 0; }
.pillars-3 .pillar p { font-size: 1rem; line-height: 1.65; }

.line-grid { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
.line-card {
  display: flex; flex-direction: column; gap: .7rem; padding: 1.8rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
  transition: transform .45s var(--ease-out), border-color .3s var(--ease-out);
}
.line-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.line-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: .4rem; }

/* Proof strip (servicios): the video is the peak, two evidence cards beside it */
.proof { background: radial-gradient(90% 70% at 20% 30%, rgba(139,92,246,.14), transparent 70%); }
.proof .deck-h2-wide { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.proof-grid { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
.proof .case-step .media-frame img { aspect-ratio: 16 / 9; }
.line-num { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--mute-2); }
.line-card h3 { font-size: 1.3rem; }
.line-card h3 a:hover { color: var(--accent-3); }
.line-card p { color: var(--mute); font-size: .95rem; }
.line-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.line-links a { padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-soft); transition: border-color .3s, color .3s; }
.line-links a:hover { border-color: var(--accent-3); color: var(--ink); }

.check-list { display: grid; gap: .8rem; margin-top: 1.8rem; }
.check-list li { position: relative; padding-left: 2rem; color: var(--ink-soft); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
}
.check-list li::after {
  content: ""; position: absolute; left: .44rem; top: .38em; width: .32rem; height: .58rem;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.feature-list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.feature-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem 1.3rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(139,92,246,.06);
}
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.feature-item p { color: var(--mute); font-size: .92rem; }

.demo-badge { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); }

.video-facade {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border-radius: calc(var(--radius) * 1.2); border: 1px solid var(--line);
  box-shadow: 0 40px 90px -45px rgba(139,92,246,.6);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .4s var(--ease-out), transform .8s var(--ease-out); }
.video-facade:hover img { opacity: .85; transform: scale(1.03); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; cursor: pointer; }
.play-ring {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: #0a0712;
  background: linear-gradient(135deg, var(--accent-3), var(--accent), var(--accent-2));
  box-shadow: 0 0 0 10px rgba(139,92,246,.25); transition: transform .4s var(--ease-bounce);
}
.play-ring svg { width: 34px; height: 34px; margin-left: 4px; }
.video-play:hover .play-ring, .video-play:focus-visible .play-ring { transform: scale(1.08); }
.video-meta { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.video-meta strong { display: block; margin-top: .2rem; font-family: var(--display); font-size: 1.15rem; color: #fff; }
.video-facade.is-playing .video-meta { display: none; }
.video-note { margin-top: .8rem; font-size: .82rem; color: var(--mute-2); }

.case-flow { display: grid; gap: 1.6rem; align-items: center; margin-top: 2.4rem; }
.case-step { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(165deg, var(--bg-2), var(--bg-1)); }
.case-step h3 { font-size: 1.35rem; }
.case-step p { color: var(--mute); }
.case-step .media-frame { width: 100%; margin-bottom: .4rem; }
.case-logo { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; padding: 2rem; margin-bottom: .4rem; border-radius: var(--radius-sm); background: var(--ink); }
.case-logo img { width: 42%; height: auto; }
.case-arrow { justify-self: center; font-size: 2rem; color: var(--accent); transform: rotate(90deg); }
.deck-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.case-step .deck-actions { margin-top: .6rem; }

.deck-statement { text-align: center; background: radial-gradient(55% 65% at 50% 45%, rgba(139,92,246,.22), transparent 70%); }
.deck-statement .container { display: flex; flex-direction: column; align-items: center; }
.seal {
  display: grid; place-items: center; width: clamp(96px, 13vw, 140px); aspect-ratio: 1; margin-bottom: 2rem; border-radius: 50%; color: #fff;
  background: conic-gradient(from 210deg, var(--accent-3), var(--accent), var(--accent-2), var(--accent-3));
  box-shadow: 0 30px 80px -20px rgba(139,92,246,.75), inset 0 0 0 6px rgba(255,255,255,.12);
}
.seal svg { width: 46%; height: 46%; }
.statement-kicker { font-size: clamp(.8rem, 1.4vw, 1rem); font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: var(--mute); }
.statement { margin: .8rem 0 1.4rem; font-size: clamp(3rem, 11vw, 8.5rem); font-weight: 800; line-height: .95; letter-spacing: .05em; text-transform: uppercase; }
.statement-sub { display: block; margin-top: .6rem; font-size: .38em; font-weight: 500; letter-spacing: .32em; color: var(--ink-soft); }
.deck-statement .lede { margin-inline: auto; }

.deck-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .8rem; color: var(--mute); font-size: .92rem; }
.deck-contact a { color: var(--accent-3); }

.deck-hud {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60; overflow: hidden;
  display: none; align-items: center; gap: .3rem; padding: .35rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(13,10,23,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.85);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.deck-hud.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.deck-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); transition: background .25s var(--ease-out); }
.deck-btn:hover { background: rgba(139,92,246,.2); }
.deck-btn svg { width: 18px; height: 18px; }
.deck-count { padding-inline: .2rem; font-family: var(--display); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.deck-total { color: var(--mute-2); }
.deck-title-label { display: none; max-width: 17ch; overflow: hidden; padding-inline: .3rem .2rem; font-size: .8rem; color: var(--mute); white-space: nowrap; text-overflow: ellipsis; }
.deck-present { display: none; width: auto; height: 34px; margin-left: .2rem; padding-inline: 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.deck-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.deck-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); }

/* Presenter mode: full screen, one slide per snap, site chrome out of the way */
html.is-presenting { scroll-snap-type: y mandatory; }
html.is-presenting .deck-slide { min-height: 100vh; padding-top: clamp(2rem, 5vw, 4rem); scroll-snap-align: start; }
html.is-presenting .nav, html.is-presenting .qchat-fab { opacity: 0; pointer-events: none; }

@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillars.pillars-3 { grid-template-columns: 1fr; }
  .line-grid { grid-template-columns: repeat(2, 1fr); }
  .check-list-2 { grid-template-columns: repeat(2, 1fr); }
  .deck-hud { display: flex; } /* phones scroll naturally; the HUD would cover their CTAs */
}
@media (min-width: 960px) {
  /* desktop: the desk fills the screen, the headline sits on the empty wall, the index runs along the desk edge */
  .svc-hero { height: 100svh; min-height: 640px; justify-content: space-between; padding: calc(var(--nav-h) + clamp(2rem, 7svh, 5rem)) 0 clamp(1.5rem, 4svh, 2.5rem); }
  .svc-stage { position: absolute; inset: 0; z-index: -1; height: auto; }
  .svc-stage-pic { width: max(100%, 100svh * 1672 / 941); top: 50%; bottom: auto; transform: translateY(-50%); }
  .svc-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,6,13,.86) 0, rgba(8,6,13,.55) 28%, rgba(8,6,13,0) 52%), linear-gradient(to bottom, rgba(8,6,13,.6), transparent 18%); }
  .svc-stage::after { height: 30%; z-index: 1; }
  .svc-hero-copy { margin-top: 0; }
  .svc-title { font-size: clamp(2.6rem, 4.2vw, 4.4rem); max-width: none; }
  .svc-title .ln { display: block; }
  .svc-hero-copy .hero-cta { flex-wrap: nowrap; margin-top: clamp(1.8rem, 4svh, 2.6rem); }
  .svc-hero-copy .btn-ghost { display: none; } /* the index along the desk edge already leads to the lines */
  .svc-index { display: block; position: relative; z-index: 1; }
  .svc-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
  .svc-index a { position: relative; display: flex; align-items: baseline; gap: .7rem; padding: 1.1rem 0 .4rem; color: var(--ink-soft); font: 600 clamp(1rem, 1.3vw, 1.2rem)/1.2 var(--display); text-decoration: none; transition: color .3s; }
  .svc-index a::before, .svc-index a::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; border-radius: 2px; background: rgba(246,243,251,.2); }
  .svc-index a::after { background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
  .svc-index .n { font: 500 .8rem/1 var(--mono); color: var(--mute); transition: color .3s; }
  .svc-index a.is-on, .svc-index a:hover, .svc-index a:focus-visible { color: var(--ink); }
  .svc-index a.is-on .n { color: var(--accent-3); }
  .svc-index a.is-on::after { transform: none; }
  .svc-hero.is-cycling .svc-index a.is-on::after { animation: svc-tick var(--svc-step, 4s) linear both; }
  .split { grid-template-columns: 1.05fr 1fr; }
  .split-reverse > :first-child { order: 2; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillars.pillars-3 { grid-template-columns: repeat(3, 1fr); }
  .proof-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
  .case-flow { grid-template-columns: 1fr auto 1.6fr; }
  .case-arrow { transform: none; }
  .media-stack .media-frame:nth-child(2) { right: -4%; }
  .deck-hud { left: 1.5rem; bottom: 1.5rem; }
  .deck-title-label, .deck-present { display: inline-flex; align-items: center; }
}

/* =============================================================
   9. Reduced-motion — only INTRUSIVE effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .svc-stage-pic::after, .svc-stage-pic img { animation: none; }
  html { scroll-behavior: auto; }
  .hero-gradient { animation: none; }
  .marquee-track { animation-duration: 60s; }
  .hero-scroll::after { animation: none; }
  .qchat-fab-ring { animation: none; display: none; }
}

/* ---------- Aviso de cookies (Pixel de Meta) ---------- */
.cookie-aviso {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 200; max-width: 46rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  padding: 1rem 1.25rem; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.6); color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
}
.cookie-aviso p { margin: 0; flex: 1 1 18rem; }
.cookie-aviso a { color: var(--accent-3); text-decoration: underline; }
.cookie-botones { display: flex; gap: .5rem; flex: none; }