/* ==========================================================
   WLS Innovations Group · Sistema visual 2026
   ========================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Black.woff") format("woff"); font-weight: 900; font-display: swap; }

:root {
  --bg: #04060d;
  --bg-2: #070b17;
  --surface: #0b1121;
  --surface-2: #10182d;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --text: #eef2fb;
  --muted: #98a6c4;
  --dim: #66748f;
  --blue: #3157ff;
  --blue-2: #6a86ff;
  --teal: #28d6c2;
  --teal-2: #5ee9d8;
  --violet: #7b61ff;
  --grad: linear-gradient(120deg, #6a86ff 0%, #3ee6d0 100%);
  --grad-strong: linear-gradient(120deg, #3157ff 0%, #28d6c2 100%);
  --display: "Inter Display", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 22px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --header-h: 76px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 clamp(15.5px, .25vw + 14.5px, 17px)/1.6 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 16px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--teal-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-strong); }
.lead { color: var(--muted); font-size: clamp(16.5px, .5vw + 14px, 20px); line-height: 1.55; max-width: 60ch; }

/* ---------- Botones ---------- */
.btn {
  --b: var(--grad-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 15.5px/1 var(--body); letter-spacing: -.01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--b); color: #fff; box-shadow: 0 10px 30px -10px rgba(49,87,255,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { box-shadow: 0 18px 40px -12px rgba(49,87,255,.95), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,.09); }
.btn-wa { background: #1fae5b; color: #fff; box-shadow: 0 10px 30px -12px rgba(31,174,91,.8); }
.btn-wa svg { fill: currentColor; stroke: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--teal-2); }
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Cabecera ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .4s, backdrop-filter .4s, box-shadow .4s, transform .5s var(--ease);
}
.site-header.is-scrolled { background: rgba(5,8,17,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 -1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 150px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); }
.site-nav a { position: relative; padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .25s, background-color .25s; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.site-nav .nav-cta-mobile { display: none; }
.header-cta { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2); position: relative; }
.menu-toggle span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: #fff; transition: transform .4s var(--ease), opacity .3s; }
.menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { top: 22px; } .menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1020px) {
  .menu-toggle { display: block; z-index: 2; }
  .header-cta { display: none; }
  .brand img { width: 128px; }
  .site-nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    padding: 90px var(--gutter) 40px; border-radius: 0; background: rgba(4,6,13,.97); box-shadow: none; backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav a { font: 800 clamp(30px, 9vw, 44px)/1.15 var(--display); letter-spacing: -.03em; color: var(--text); padding: 6px 0; background: none !important; transform: translateY(16px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), color .2s; }
  .site-nav a[aria-current="page"] { color: var(--teal-2); }
  .site-nav.is-open a { transform: none; opacity: 1; }
  .site-nav.is-open a:nth-child(2) { transition-delay: .04s; } .site-nav.is-open a:nth-child(3) { transition-delay: .08s; }
  .site-nav.is-open a:nth-child(4) { transition-delay: .12s; } .site-nav.is-open a:nth-child(5) { transition-delay: .16s; }
  .site-nav.is-open a:nth-child(6) { transition-delay: .2s; } .site-nav.is-open a:nth-child(7) { transition-delay: .24s; }
  .site-nav.is-open a:nth-child(8) { transition-delay: .28s; }
  .site-nav .nav-cta-mobile { display: inline-flex; margin-top: 22px; font: 600 16px/1 var(--body); padding: 0 26px; color: #fff; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Barra de progreso y transición de página ---------- */
.page-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 95; pointer-events: none; }
.page-progress span { display: block; height: 100%; background: var(--grad-strong); transform-origin: 0 50%; transform: scaleX(0); }
/* Pantalla de bienvenida */
html.intro-on { overflow: hidden; }
html:not(.js) .intro, html.no-intro .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 200; color: #fff; overflow: hidden; --ease-io: cubic-bezier(.76,0,.24,1); }
.intro-panel { position: absolute; left: 0; right: 0; height: 50.2%; background: radial-gradient(60vmax 45vmax at 50vw 44vh, #10225f 0%, #070b1d 52%, #02040a 100%); background-size: 100vw 100vh; transition: transform 1.15s var(--ease-io); }
.intro-panel.top { top: 0; background-position: top; }
.intro-panel.bottom { bottom: 0; background-position: bottom; }
.intro-panel::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; background-attachment: fixed; mask-image: radial-gradient(45% 50% at 50% 50%, #000, transparent 85%); -webkit-mask-image: radial-gradient(45% 50% at 50% 50%, #000, transparent 85%); opacity: .8; }
.intro-panel.bottom::after { mask-position: 0 -50vh; -webkit-mask-position: 0 -50vh; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s ease; }
.intro.is-formed .intro-canvas { opacity: 0; }
.intro-seam { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #5ee9d8 30%, #fff 50%, #6a86ff 70%, transparent); box-shadow: 0 0 24px 4px rgba(94,233,216,.55); transform: scaleX(0); opacity: 0; z-index: 3; }
.intro-inner { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; transition: transform .9s var(--ease-io), opacity .55s ease, filter .7s ease; }
.intro-logo { position: relative; width: clamp(120px, 15vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.intro-mark { width: 100%; height: auto; overflow: visible; opacity: 0; transform: scale(.9); filter: drop-shadow(0 20px 50px rgba(49,87,255,.55)); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2,.9,.2,1); }
.intro.is-formed .intro-mark { opacity: 1; transform: none; }
.intro-mark .shine { transform: skewX(-18deg) translateX(0); }
.intro.is-formed .intro-mark .shine { animation: introShine 1.2s cubic-bezier(.5,0,.2,1) .25s forwards; }
.intro-ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(94,233,216,.75); transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; }
.intro.is-formed .intro-ring { animation: introRing 1.6s cubic-bezier(.1,.7,.2,1) forwards; }
.intro.is-formed .intro-ring.r2 { animation-delay: .18s; border-color: rgba(106,134,255,.6); }
.intro-word { display: flex; margin-top: 22px; font: 900 clamp(60px, 9vw, 124px)/.88 var(--display); letter-spacing: -.045em; }
.intro-word span { display: block; opacity: 0; filter: blur(14px); transform: translateY(24px) scale(1.15); transition: opacity .8s ease, filter .9s ease, transform 1s cubic-bezier(.2,.9,.2,1); }
.intro.is-formed .intro-word span { opacity: 1; filter: blur(0); transform: none; }
.intro.is-formed .intro-word span:nth-child(2) { transition-delay: .09s; } .intro.is-formed .intro-word span:nth-child(3) { transition-delay: .18s; }
.intro-sub { margin-top: 16px; min-height: 1em; font: 600 clamp(11px, 1.05vw, 13.5px)/1 var(--body); letter-spacing: .62em; padding-left: .62em; color: #a9b8dc; opacity: 0; transition: opacity .5s ease .3s; font-variant-numeric: tabular-nums; }
.intro.is-formed .intro-sub { opacity: 1; }
.intro-corner { position: absolute; top: clamp(18px, 3vw, 34px); z-index: 2; display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #8796bd; opacity: 0; animation: introFade .8s ease .2s forwards; transition: opacity .4s; }
.intro-corner.tl { left: clamp(18px, 3vw, 40px); } .intro-corner.tr { right: clamp(18px, 3vw, 40px); }
.intro-live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: introBlink 1.2s ease-in-out infinite; }
.intro-foot { position: absolute; left: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 40px); bottom: clamp(26px, 4vw, 46px); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; opacity: 0; animation: introFade .8s ease .25s forwards; transition: opacity .4s; }
.intro-count { display: flex; align-items: flex-start; font: 900 clamp(56px, 8vw, 120px)/.8 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.intro-count small { font-size: .3em; letter-spacing: 0; margin: .15em 0 0 .15em; color: var(--teal-2); }
.intro-tag { display: grid; gap: 4px; text-align: right; font: 800 clamp(15px, 1.5vw, 20px)/1.15 var(--display); letter-spacing: -.02em; margin-left: auto; }
.intro-tag .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-skip { position: absolute; right: 0; top: -44px; border: 0; background: none; padding: 6px 0; font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #6f7ea5; cursor: pointer; transition: color .2s; }
.intro-skip:hover { color: #fff; }
.intro-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255,255,255,.06); transition: opacity .3s; }
.intro-line span { display: block; height: 100%; background: var(--grad-strong); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 16px rgba(62,230,208,.9); }
/* salida */
.intro.is-done .intro-inner { transform: scale(1.35); opacity: 0; filter: blur(8px); }
.intro.is-done .intro-corner, .intro.is-done .intro-foot, .intro.is-done .intro-line { opacity: 0; animation: none; }
.intro.is-done .intro-seam { animation: introSeam .9s var(--ease-io) forwards; }
.intro.is-done .intro-panel.top { transform: translateY(-101%); transition-delay: .32s; }
.intro.is-done .intro-panel.bottom { transform: translateY(101%); transition-delay: .32s; }
.intro.is-done { pointer-events: none; }
html.intro-reveal main { animation: introSettle 1.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes introShine { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(300px); } }
@keyframes introRing { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
@keyframes introSeam { 0% { opacity: 1; transform: scaleX(0); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes introSettle { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes introFade { to { opacity: 1; } }
@keyframes introBlink { 50% { opacity: .3; } }
@media (max-width: 600px) { .intro-tag { font-size: 14px; } .intro-corner.tr { display: none; } .intro-skip { top: -36px; } }
@media (prefers-reduced-motion: reduce) { .intro-mark, .intro-word span, .intro-sub { opacity: 1 !important; filter: none !important; transform: none !important; } .intro-canvas, .intro-ring, .intro-seam { display: none; } }

/* ---------- Secciones genéricas ---------- */
.section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.section-tight { padding: clamp(60px, 8vw, 100px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(36px, 5.6vw, 76px); max-width: 16ch; }
.section-head.split { grid-template-columns: 1.2fr .8fr; align-items: end; gap: 24px 60px; }
.section-head.split .lead { justify-self: end; }
.section-head.center { text-align: center; justify-items: center; }
@media (max-width: 860px) { .section-head.split { grid-template-columns: 1fr; } .section-head.split .lead { justify-self: start; } }

.glow-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.glow-bg::before, .glow-bg::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .35; }
.glow-bg::before { background: radial-gradient(circle, rgba(49,87,255,.7), transparent 60%); left: -20vmax; top: -10vmax; }
.glow-bg::after { background: radial-gradient(circle, rgba(40,214,194,.45), transparent 60%); right: -25vmax; bottom: -20vmax; }
.section > .wrap { position: relative; z-index: 1; }

.card {
  position: relative; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .4s;
}
.card::before { /* brillo que sigue al puntero */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(106,134,255,.16), transparent 45%);
}
.card:hover { box-shadow: inset 0 0 0 1px rgba(106,134,255,.35), 0 30px 60px -30px rgba(0,0,0,.8); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 600 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(255,255,255,.03); }
.chip.is-live { color: var(--teal-2); }
.chip.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* ---------- Revelado al hacer scroll ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="left"] { transform: translateX(-40px); }
html.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(18% 8% 18% 8% round 28px); transition: clip-path 1.4s var(--ease); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round 22px); }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-words .w > span { display: inline-block; }
html.js .split-words .w > span { transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms + var(--d, 0s)); }
html.js .split-words.is-in .w > span { transform: none; }

/* ---------- Marquesina ---------- */
.marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: inline-flex; gap: 48px; padding-right: 48px; animation: marquee 32s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; font: 700 clamp(14px, 1.3vw, 17px)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.marquee-track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================
   PORTADA · Historia 3D
   ========================================================== */
.story { position: relative; height: 640vh; background: var(--bg); }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.story-bg { position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(60% 55% at var(--gx, 60%) var(--gy, 45%), var(--g1, rgba(49,87,255,.55)), transparent 70%),
  radial-gradient(45% 45% at calc(100% - var(--gx, 60%)) 85%, var(--g2, rgba(40,214,194,.18)), transparent 70%),
  linear-gradient(180deg, #050812 0%, #03050b 100%); }
.story-bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%); -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%); }
.story-word {
  position: absolute; left: 50%; top: 50%; z-index: -2; margin: 0; white-space: nowrap; pointer-events: none;
  font: 900 clamp(90px, 21vw, 360px)/.82 var(--display); letter-spacing: -.06em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.12);
  transform: translate(-50%, -50%); opacity: 0;
}
.story-word.is-solid { color: rgba(255,255,255,.07); -webkit-text-stroke: 0; }
.story-word.is-grad { background: linear-gradient(120deg, rgba(106,134,255,.32), rgba(62,230,208,.2)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
#laptop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.laptop-fallback { position: absolute; left: 50%; top: 50%; width: min(70vw, 760px); transform: translate(-30%, -50%) rotate(-6deg); z-index: -1; display: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
html.no-webgl .laptop-fallback, html:not(.js) .laptop-fallback { display: block; }
html.no-webgl #laptop-canvas { display: none; }

.story-hero { position: absolute; left: 0; right: 0; bottom: clamp(36px, 7vh, 90px); z-index: 2; }
.story-hero .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.story-hero h1 { font-size: clamp(50px, 8.6vw, 136px); line-height: .9; letter-spacing: -.055em; font-weight: 900; }
.story-hero h1 .line { display: block; }
.story-hero .lead { margin-top: 22px; max-width: 42ch; }
.story-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.scroll-cue { display: grid; justify-items: center; gap: 12px; color: var(--muted); font: 600 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; }
.scroll-cue i { width: 26px; height: 42px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; border-radius: 3px; background: #fff; transform: translateX(-50%); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

.chapter { position: absolute; z-index: 2; top: 50%; width: min(420px, 38vw); opacity: 0; pointer-events: none; transform: translateY(-50%); }
.chapter.is-active { pointer-events: auto; }
.chapter.left { left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.chapter.right { right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.chapter .num { font: 800 15px/1 var(--display); color: var(--teal-2); letter-spacing: .08em; display: flex; align-items: center; gap: 12px; }
.chapter .num::after { content: ""; height: 1px; width: 60px; background: linear-gradient(90deg, var(--teal), transparent); }
.chapter h2 { font-size: clamp(38px, 4.6vw, 72px); margin: 18px 0 16px; letter-spacing: -.045em; }
.chapter p { color: var(--muted); font-size: clamp(16px, 1.2vw, 18.5px); }
.chapter ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.chapter li { display: flex; gap: 12px; align-items: center; font-weight: 500; color: #dfe6f6; }
.chapter li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(40,214,194,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee9d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.chapter-final { left: 50%; top: auto; bottom: clamp(40px, 9vh, 110px); transform: translateX(-50%); text-align: center; width: min(760px, 92vw); }
.chapter-final h2 { font-size: clamp(36px, 5vw, 76px); }
.chapter-final .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.part-label { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 var(--body); color: #fff; white-space: nowrap; }
.part-label b { display: block; font-weight: 600; }
.part-label small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.part-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(40,214,194,.18), 0 0 18px var(--teal); flex: none; }
.part-label span { padding: 8px 12px; border-radius: 12px; background: rgba(8,12,24,.7); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); }
.part-label.flip { flex-direction: row-reverse; }

.story-dots { position: absolute; right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 3; display: grid; gap: 14px; }
.story-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); position: relative; transition: background-color .3s, transform .3s; }
.story-dots button.is-active { background: #fff; transform: scale(1.3); }
.story-dots button span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .3s; pointer-events: none; }
.story-dots button.is-active span, .story-dots:hover button span { opacity: 1; }

@media (max-width: 860px) {
  .story { height: 560vh; }
  .story-hero { bottom: 28px; }
  .story-hero .wrap { grid-template-columns: 1fr; }
  .story-hero h1 { font-size: clamp(46px, 13.5vw, 72px); }
  .story-hero .lead { font-size: 16px; margin-top: 14px; }
  .story-hero .actions { margin-top: 20px; }
  .story-hero .btn { min-height: 48px; padding: 0 20px; }
  .scroll-cue { display: none; }
  .chapter, .chapter.left, .chapter.right { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 26px; transform: none; padding: 20px; border-radius: 22px; background: rgba(6,10,20,.72); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .chapter h2 { font-size: clamp(30px, 9vw, 40px); margin: 12px 0 10px; }
  .chapter p { font-size: 15px; }
  .chapter ul { margin: 14px 0 0; gap: 6px; font-size: 14.5px; }
  .chapter .btn { display: none; }
  .chapter-final { text-align: left; }
  .chapter-final .actions { justify-content: flex-start; margin-top: 16px; }
  .chapter-final .actions .btn { display: inline-flex; min-height: 46px; padding: 0 18px; font-size: 14.5px; }
  .story-dots { right: 10px; top: 120px; transform: none; }
  .story-dots button span { display: none; }
  .part-label { display: none; }
  html.in-story .floating { opacity: 0; pointer-events: none; }
  .floating { transition: opacity .3s; }
}

/* Movimiento reducido: la historia se muestra completa y sin fijar */
html.reduced .story { height: auto; }
html.reduced .story-stage { position: relative; height: 92vh; }
html.reduced .chapter { position: relative; opacity: 1; transform: none; top: auto; left: auto; right: auto; bottom: auto; width: auto; }
html.reduced .story-chapters { display: grid; gap: 40px; padding: 60px var(--gutter); max-width: var(--wrap); margin: 0 auto; }
html:not(.js) .story { height: auto; }
html:not(.js) .story-stage { position: relative; }
html:not(.js) .chapter { position: relative; opacity: 1; transform: none; inset: auto; width: auto; margin: 40px var(--gutter); }

/* ---------- Manifiesto ---------- */
.manifesto { padding: clamp(110px, 16vw, 220px) 0 clamp(70px, 9vw, 120px); text-align: center; position: relative; overflow: hidden; }
.manifesto h2 { font-size: clamp(44px, 9vw, 150px); line-height: .9; letter-spacing: -.06em; font-weight: 900; }
.manifesto .lead { margin: 30px auto 0; text-align: center; }
.manifesto .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.manifesto .marquee { margin-top: clamp(60px, 9vw, 110px); }

/* ---------- Lineup horizontal de servicios ---------- */
.lineup { position: relative; height: 330vh; }
.lineup-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.lineup-head { margin-bottom: clamp(26px, 4vh, 48px); display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.lineup-head h2 { font-size: clamp(36px, 5.2vw, 76px); max-width: 13ch; }
.lineup-count { font: 800 clamp(16px, 1.4vw, 20px)/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lineup-count b { color: #fff; }
.lineup-track { display: flex; gap: clamp(16px, 2vw, 28px); padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); will-change: transform; }
.lineup-card { flex: none; width: clamp(300px, 34vw, 480px); height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 2.4vw, 34px); border-radius: 28px; isolation: isolate; }
.lineup-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.12); transition: transform 1.2s var(--ease); }
.lineup-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,6,13,0) 15%, rgba(4,6,13,.55) 50%, rgba(4,6,13,.96) 100%); }
.lineup-card:hover img { transform: scale(1.04); }
.lineup-card .idx { position: absolute; top: 24px; left: 26px; font: 800 14px/1 var(--display); letter-spacing: .12em; color: rgba(255,255,255,.75); }
.lineup-card .chip { position: absolute; top: 18px; right: 20px; background: rgba(4,6,13,.5); backdrop-filter: blur(8px); }
.lineup-card h3 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 10px; }
.lineup-card p { color: #c6d0e6; max-width: 36ch; }
.lineup-card .link-arrow { margin-top: 18px; }
.lineup-card.is-cta { justify-content: center; align-items: flex-start; background: var(--grad-strong); }
.lineup-card.is-cta::after { display: none; }
.lineup-card.is-cta h3 { font-size: clamp(34px, 3.4vw, 54px); }
.lineup-card.is-cta p { color: rgba(255,255,255,.85); margin: 6px 0 26px; }
.lineup-card.is-cta .btn { background: #fff; color: #0a1030; box-shadow: none; }
.lineup-progress { margin-top: clamp(24px, 4vh, 44px); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.lineup-progress span { display: block; height: 100%; width: 100%; background: var(--grad-strong); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .lineup { height: auto; }
  .lineup-stage { position: relative; height: auto; padding: 90px 0; }
  .lineup-track { flex-direction: column; padding: 0 var(--gutter); transform: none !important; }
  .lineup-card { width: 100%; height: 440px; }
  .lineup-progress, .lineup-count { display: none; }
}

/* ---------- Cifras ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 30px); border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat strong { display: block; font: 900 clamp(46px, 6vw, 92px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 14px; color: var(--muted); max-width: 22ch; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- Método (pasos fijados) ---------- */
.method { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.method-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.method-sticky h2 { font-size: clamp(38px, 5vw, 72px); margin: 18px 0 20px; }
.method-steps { display: grid; gap: 20px; counter-reset: step; }
.method-step { padding: 14px; display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 24px; align-items: center; }
.method-step > div { display: grid; gap: 8px; padding-right: 14px; }
.step-img { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.step-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.method-step:hover .step-img img { transform: scale(1.06); }
@media (max-width: 560px) { .method-step { grid-template-columns: 1fr; } .method-step > div { padding: 4px 10px 14px; } .step-img { aspect-ratio: 16/9; } }
.method-step small { font: 600 12px/1 var(--body); letter-spacing: .2em; color: var(--teal-2); text-transform: uppercase; }
.method-step h3 { font-size: clamp(26px, 2.6vw, 36px); }
.method-step p { color: var(--muted); }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; } .method-sticky { position: static; } }

/* ---------- Proyectos destacados ---------- */
.projects { display: grid; gap: clamp(20px, 3vw, 34px); }
.project { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 520px; }
.project:nth-child(even) { grid-template-columns: 1fr 1.25fr; }
.project:nth-child(even) .project-media { order: 2; }
.project-media { position: relative; overflow: hidden; min-height: 300px; background: #0b1020; }
.project-media img, .project-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project:hover .project-media img { transform: scale(1.04); }
.project-media .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #0a1030; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(255,255,255,.14); transition: transform .4s var(--ease), box-shadow .4s; }
.project-media .play:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 18px rgba(255,255,255,.12); }
.project-media .play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.project-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.project-body .logo { height: 54px; width: auto; align-self: flex-start; border-radius: 12px; }
.project-body h3 { font-size: clamp(30px, 3.4vw, 50px); }
.project-body p { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #cdd6ea; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.project-body .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.project-soon { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(26px, 3vw, 40px); flex-wrap: wrap; }
.project-soon h3 { font-size: clamp(24px, 2.4vw, 34px); }
.project-soon p { color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .project, .project:nth-child(even) { grid-template-columns: 1fr; } .project:nth-child(even) .project-media { order: 0; } .project-media { aspect-ratio: 16/10; min-height: 0; } }

/* ---------- Hubs / explorar ---------- */
.hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub { padding: 28px; min-height: 220px; display: flex; flex-direction: column; }
.hub small { font: 600 11.5px/1 var(--body); letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.hub h3 { font-size: 30px; margin: auto 0 8px; padding-top: 36px; }
.hub p { color: var(--muted); font-size: 15px; }
.hub .arrow { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .5s var(--ease), background-color .4s; }
.hub .arrow svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub:hover .arrow { transform: rotate(-45deg); background: var(--blue); }
@media (max-width: 900px) { .hubs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hubs { grid-template-columns: 1fr; } .hub { min-height: 170px; } }

/* ---------- FAQ ---------- */
.faq-giant { font: 900 clamp(56px, 12.5vw, 210px)/.82 var(--display); letter-spacing: -.06em; text-transform: uppercase; margin-bottom: clamp(40px, 6vw, 80px); }
.faq-giant span { display: block; }
.faq-giant .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(30px, 6vw, 90px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 700 clamp(19px, 1.7vw, 24px)/1.25 var(--display); letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .5s var(--ease), background-color .3s; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: #fff; transform: translate(-50%, -50%); }
.faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.faq-list details[open] summary i { background: var(--blue); }
.faq-list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p { color: var(--muted); padding: 0 50px 26px 0; max-width: 64ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final { position: relative; overflow: hidden; border-radius: clamp(26px, 3vw, 40px); padding: clamp(46px, 7vw, 110px) clamp(24px, 6vw, 90px); background: radial-gradient(80% 120% at 85% 0%, rgba(40,214,194,.35), transparent 60%), radial-gradient(80% 120% at 0% 100%, rgba(123,97,255,.4), transparent 60%), linear-gradient(135deg, #1b37d6, #0d1a6b); }
.cta-final h2 { font-size: clamp(40px, 6.4vw, 100px); line-height: .92; letter-spacing: -.055em; font-weight: 900; max-width: 13ch; }
.cta-final p { color: rgba(255,255,255,.82); margin-top: 22px; max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); }
.cta-final .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-final .btn-primary { background: #fff; color: #0a1030; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.cta-final .btn-ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.cta-final .mark { position: absolute; right: -4%; bottom: -18%; width: min(46vw, 560px); opacity: .16; transform: rotate(-8deg); pointer-events: none; }

/* ---------- Pie de página ---------- */
.site-footer { position: relative; padding: clamp(70px, 9vw, 120px) 0 30px; overflow: hidden; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer-top img { width: 190px; }
.footer-top p { color: var(--muted); margin-top: 18px; max-width: 34ch; }
.footer-col h4 { font: 600 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.footer-col a, .footer-col span { display: block; color: #cfd8ea; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--teal-2); }
.footer-giant { margin-top: clamp(50px, 8vw, 100px); font: 900 clamp(90px, 25vw, 400px)/.78 var(--display); letter-spacing: -.07em; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.footer-bottom a:hover { color: #fff; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }

/* ---------- Botones flotantes ---------- */
.floating { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 80; display: grid; gap: 12px; justify-items: end; }
.fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 34px -10px rgba(0,0,0,.7); transition: transform .35s var(--ease); }
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 26px; height: 26px; }
.fab-wa { background: #1fae5b; }
.fab-wa svg { fill: #fff; }
.fab-chat { background: var(--grad-strong); }
.fab-chat svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fab-chat circle { fill: #fff; stroke: none; }
.fab-tip { position: absolute; right: 70px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; padding: 9px 14px; border-radius: 12px; background: #fff; color: #0a1030; font: 600 13.5px/1 var(--body); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.fab:hover .fab-tip, .fab:focus-visible .fab-tip { opacity: 1; transform: translate(0, -50%); }
.fab-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(31,174,91,.55); animation: pulse 2.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 16px rgba(31,174,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,174,91,0); } }
body.assistant-open .floating .fab-chat { transform: scale(.9); }

/* ---------- Asistente ---------- */
.assistant { position: fixed; right: clamp(14px, 2vw, 26px); bottom: 150px; z-index: 85; width: min(410px, calc(100vw - 28px)); max-height: calc(100svh - 180px); overflow: auto; border-radius: 26px; background: rgba(10,15,30,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -30px rgba(0,0,0,.9); animation: pop .45s var(--ease); }
.assistant[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.assistant-head { display: flex; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; }
.assistant-brand { display: flex; gap: 12px; align-items: center; }
.assistant-brand img { width: 42px; height: 42px; border-radius: 12px; }
.assistant-brand small { font: 600 10.5px/1 var(--body); letter-spacing: .2em; color: var(--teal-2); }
.assistant-brand h2 { font-size: 19px; letter-spacing: -.02em; margin: 5px 0 3px; }
.assistant-brand p { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.assistant-brand p i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.assistant-head-actions { display: flex; gap: 6px; }
.assistant-head-actions button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); font-size: 17px; line-height: 1; }
.assistant-progress { height: 3px; margin: 0 20px; background: var(--line); border-radius: 3px; overflow: hidden; }
.assistant-progress span { display: block; height: 100%; width: 25%; background: var(--grad-strong); transition: width .5s var(--ease); }
.assistant-body { padding: 16px 20px 20px; }
.assistant-count { font: 600 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.assistant fieldset { border: 0; padding: 0; margin: 0; }
.assistant legend { font: 800 21px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 6px; padding: 0; }
.assistant-helper { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.assistant-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.assistant-area-grid label { position: relative; }
.assistant-area-grid input { position: absolute; opacity: 0; }
.assistant-area-grid span { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .25s, background-color .25s; height: 100%; }
.assistant-area-grid svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.assistant-area-grid b { font-size: 14.5px; }
.assistant-area-grid small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.assistant-area-grid input:checked + span { background: rgba(49,87,255,.18); box-shadow: inset 0 0 0 1.5px var(--blue-2); }
.assistant-area-grid input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.assistant textarea, .assistant select, .assistant input:not([type="radio"]) { width: 100%; padding: 13px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; }
.assistant textarea { resize: vertical; margin-top: 8px; }
.assistant select option { background: #0b1121; }
.assistant-field { display: grid; gap: 6px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.assistant-suggestion { padding: 8px 12px; border: 0; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.assistant-suggestion:hover { background: rgba(49,87,255,.25); }
.assistant-summary { display: grid; gap: 8px; }
.assistant-summary-row { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); }
.assistant-summary-row span { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.assistant-summary-row strong { font-weight: 500; font-size: 14.5px; }
.assistant-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.assistant-actions button { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; font-weight: 600; }
.assistant-back { background: rgba(255,255,255,.06); }
.assistant-next { margin-left: auto; background: var(--grad-strong); color: #fff; }
.assistant-note { display: flex; gap: 8px; margin-top: 14px; color: var(--dim); font-size: 12.5px; }
@media (max-width: 560px) { .assistant { bottom: 88px; right: 14px; max-height: calc(100svh - 110px); } }

/* ---------- Diálogos ---------- */
dialog { border: 0; padding: 0; color: var(--text); background: transparent; max-width: min(1100px, 94vw); }
dialog::backdrop { background: rgba(2,4,10,.82); backdrop-filter: blur(8px); }
dialog[open] { animation: pop .45s var(--ease); }
.dialog-box { position: relative; border-radius: 26px; background: #0b1121; box-shadow: inset 0 0 0 1px var(--line-2); padding: clamp(22px, 3vw, 34px); }
.dialog-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); font-size: 22px; line-height: 1; }
.dialog-box header { padding-right: 50px; margin-bottom: 18px; }
.dialog-box header p { font: 600 11.5px/1 var(--body); letter-spacing: .2em; color: var(--teal-2); text-transform: uppercase; }
.dialog-box header h2 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 8px; }
.dialog-stage { display: grid; gap: 12px; }
.dialog-stage.compare { grid-template-columns: 1fr 1fr; }
.dialog-stage img, .dialog-stage video { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 16px; background: #000; }
.dialog-stage figure { margin: 0; position: relative; }
.dialog-stage figcaption { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) { .dialog-stage.compare { grid-template-columns: 1fr; } }

/* ==========================================================
   PÁGINAS INTERNAS
   ========================================================== */
.page-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; padding: calc(var(--header-h) + 60px) 0 clamp(50px, 8vw, 100px); overflow: hidden; isolation: isolate; }
.page-hero-media { position: absolute; inset: -8% 0 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,6,13,.5) 0%, rgba(4,6,13,.35) 35%, rgba(4,6,13,.92) 82%, var(--bg) 100%), linear-gradient(90deg, rgba(4,6,13,.75), rgba(4,6,13,0) 70%); }
.page-hero h1 { font-size: clamp(46px, 8vw, 128px); line-height: .9; letter-spacing: -.055em; font-weight: 900; max-width: 14ch; margin: 22px 0 24px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.page-hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.page-hero.plain { min-height: 0; padding-top: calc(var(--header-h) + clamp(60px, 10vw, 140px)); }
.page-hero.plain::before { background: none; }

/* Grid de soluciones */
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.solution { padding: clamp(24px, 2.6vw, 34px); min-height: 330px; display: flex; flex-direction: column; }
.solution .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(49,87,255,.14); box-shadow: inset 0 0 0 1px rgba(106,134,255,.3); }
.solution .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.solution small { margin-top: auto; padding-top: 40px; font: 600 11.5px/1 var(--body); letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.solution h3 { font-size: clamp(25px, 2.2vw, 31px); margin: 10px 0 10px; }
.solution p { color: var(--muted); }
.solution .link-arrow { margin-top: 20px; }
@media (max-width: 960px) { .solutions-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .solutions-grid { grid-template-columns: 1fr; } .solution { min-height: 0; } }

/* Lista numerada grande */
.big-list { border-top: 1px solid var(--line); }
.big-row { display: grid; grid-template-columns: 170px 1.1fr 1fr auto; gap: 24px; align-items: center; padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease); }
.row-img { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; }
.row-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.big-row:hover .row-img img { transform: scale(1.06); }
.big-row h3 { font-size: clamp(26px, 3.2vw, 46px); }
.big-row small { display: block; font: 600 11.5px/1 var(--body); letter-spacing: .2em; color: var(--teal-2); text-transform: uppercase; margin-bottom: 12px; }
.big-row p { color: var(--muted); }
.big-row .tag { font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.big-row:hover { padding-left: 14px; }
@media (max-width: 860px) { .big-row { grid-template-columns: 1fr; gap: 10px; } .big-row:hover { padding-left: 0; } }

/* Productos */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product { padding: 28px; min-height: 300px; display: flex; flex-direction: column; gap: 14px; }
.product .top { display: flex; justify-content: space-between; align-items: center; }
.product .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-strong); font: 900 20px/1 var(--display); }
.product h3 { font-size: 28px; margin-top: auto; padding-top: 30px; }
.product p { color: var(--muted); }
.product .tags span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.product .chip.concept { color: #c4b5fd; }
@media (max-width: 960px) { .products-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } .product { min-height: 0; } }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.pillar { padding: 34px 26px 10px 0; }
.pillar + .pillar { padding-left: 26px; border-left: 1px solid var(--line); }
.pillar strong { display: block; font: 800 clamp(28px, 3vw, 42px)/1 var(--display); letter-spacing: -.03em; }
.pillar span { color: var(--muted); display: block; margin-top: 10px; }
@media (max-width: 700px) { .pillars { grid-template-columns: 1fr; } .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.note { color: var(--dim); font-size: 14px; margin-top: 26px; }

/* Soporte: servicios con precio */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filters button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; font-size: 14.5px; color: var(--muted); transition: all .25s; }
.filters button.is-active { background: #fff; color: #0a1030; box-shadow: none; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 270px; }
.service-card[hidden] { display: none; }
.service-card .top { display: flex; justify-content: space-between; align-items: start; }
.service-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(40,214,194,.1); box-shadow: inset 0 0 0 1px rgba(40,214,194,.25); }
.service-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card .featured { font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(49,87,255,.2); color: #b9c6ff; }
.service-card .cat { margin-top: 14px; font: 600 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.service-card h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.service-card p { color: var(--muted); font-size: 14.5px; }
.service-card .bottom { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.service-card .price { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
.service-card .price.quote { font: 600 14px/1.2 var(--body); color: var(--muted); }
.service-card .quote-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; font-size: 14px; transition: background-color .25s; }
.service-card .quote-btn:hover { background: var(--blue); }
@media (max-width: 960px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } .service-card { min-height: 0; } }
.support-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; margin-bottom: 26px; flex-wrap: wrap; }
.support-banner b { display: block; font: 700 18px/1.3 var(--display); }
.support-banner span { color: var(--muted); }

/* Interior del equipo (piezas) */
.board { position: relative; height: 260vh; }
.board-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.board-head { position: absolute; top: calc(var(--header-h) + 20px); left: 0; right: 0; text-align: center; z-index: 2; }
.board-head h2 { font-size: clamp(34px, 5vw, 70px); margin-top: 14px; }
.board-scene { position: relative; width: min(1100px, 94vw); height: min(64vh, 620px); margin-top: 80px; }
.board-piece { margin: 0; position: absolute; left: 50%; top: 50%; width: var(--w, 22%); transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0)); text-align: center; }
.board-piece img { width: 100%; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }
.board-piece figcaption { margin-top: 8px; opacity: var(--lab, 0); transform: translateY(calc((1 - var(--lab, 0)) * 10px)); }
.board-piece figcaption b { display: block; font: 700 15px/1.2 var(--display); }
.board-piece figcaption span { display: block; font-size: 13px; color: var(--muted); }
.board-note { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--dim); font-size: 13px; }
@media (max-width: 760px) {
  .board { height: auto; }
  .board-stage { position: relative; height: auto; padding: 100px 0 60px; display: block; }
  .board-head { position: static; padding: 0 var(--gutter); }
  .board-scene { height: auto; width: auto; margin: 40px var(--gutter) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .board-piece { position: static; width: auto; transform: none !important; --lab: 1 !important; }
  .board-piece.main { grid-column: 1 / -1; }
  .board-note { position: static; margin-top: 30px; }
}

/* Trabajos (galería) */
.work-grid { columns: 3 300px; column-gap: 16px; }
.work-card { break-inside: avoid; margin-bottom: 16px; display: block; }
.work-media { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #0a0f1c; overflow: hidden; cursor: zoom-in; }
.work-media img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.05); }
.work-media.compare { display: grid; grid-template-columns: 1fr 1fr; }
.work-media.compare img { aspect-ratio: 3/4; object-fit: cover; }
.work-media .lbl { position: absolute; top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.work-media .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0a1030; display: grid; place-items: center; }
.work-media .play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.work-body { padding: 18px 20px 22px; }
.work-body small { font: 600 10.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-2); }
.work-body h3 { font-size: 19px; letter-spacing: -.02em; margin: 8px 0 6px; line-height: 1.2; }
.work-body p { color: var(--muted); font-size: 14px; }

/* Nosotros */
.about-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.founder { padding: 28px; display: grid; gap: 18px; }
.founder-top { display: flex; gap: 16px; align-items: center; }
.founder-top img { width: 76px; height: 76px; border-radius: 20px; object-fit: cover; }
.founder-top b { display: block; font: 800 20px/1.2 var(--display); letter-spacing: -.02em; }
.founder-top small { color: var(--teal-2); font: 600 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.founder blockquote { margin: 0; font: 600 clamp(19px, 1.6vw, 23px)/1.4 var(--display); letter-spacing: -.015em; }
.founder p { color: var(--muted); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { overflow: hidden; }
.value .img { aspect-ratio: 16/11; overflow: hidden; }
.value img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.value:hover img { transform: scale(1.05); }
.value .body { padding: 22px 24px 26px; }
.value small { font: 800 14px/1 var(--display); color: var(--teal-2); }
.value h3 { font-size: 28px; margin: 10px 0 8px; }
.value p { color: var(--muted); }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } .values { grid-template-columns: 1fr; } }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.contact-main { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; gap: 20px; background: radial-gradient(90% 90% at 100% 0%, rgba(49,87,255,.3), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.contact-main h2 { font-size: clamp(36px, 4.6vw, 66px); }
.contact-main .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.contact-side { display: grid; gap: 16px; }
.info { padding: 26px; }
.info small { font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); }
.info h3 { font-size: 22px; margin: 10px 0 10px; letter-spacing: -.02em; }
.info p, .info .schedule-line { color: var(--muted); font-size: 15px; }
.schedule { display: grid; gap: 10px; }
.schedule-line { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.schedule-line strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .schedule-line { grid-template-columns: 1fr; gap: 2px; } }

/* Páginas web: mockup */
.web-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.browser { border-radius: 18px; overflow: hidden; background: #0b1020; box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(49,87,255,.6); transform: perspective(1400px) rotateY(-10deg) rotateX(4deg); transition: transform 1s var(--ease); }
.browser:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.browser-bar span { margin-left: 12px; padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; color: var(--muted); }
.browser img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.type { padding: 30px; min-height: 300px; display: flex; flex-direction: column; }
.type .mock { width: 100%; height: auto; margin-bottom: auto; border-radius: 14px; transition: transform .6s var(--ease); }
.type:hover .mock { transform: translateY(-4px); }
.type small { font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); margin-top: 40px; }
.type h3 { font-size: 30px; margin: 10px 0 8px; }
.type p { color: var(--muted); }
.type .ideal { margin-top: 18px; font-size: 13px; color: var(--dim); }
.includes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.include { padding: 30px; display: grid; gap: 10px; align-content: start; }
.inc-img { margin: -30px -30px 12px; aspect-ratio: 16/9; overflow: hidden; }
.inc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.include:hover .inc-img img { transform: scale(1.05); }
.include .n { font: 800 14px/1 var(--display); color: var(--teal-2); letter-spacing: .1em; }
.include h3 { font-size: 26px; }
.include p { color: var(--muted); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: .5; }
.tl { position: relative; }
.tl .dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(106,134,255,.45), 0 0 24px -6px rgba(49,87,255,.7); position: relative; }
.tl .dot svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl small { display: block; margin-top: 22px; font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); }
.tl h3 { font-size: 24px; margin: 8px 0 6px; }
.tl p { color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .web-hero { grid-template-columns: 1fr; } .types { grid-template-columns: 1fr; } .type { min-height: 0; } .includes { grid-template-columns: 1fr; } .timeline { grid-template-columns: 1fr 1fr; gap: 30px 16px; } .timeline::before { display: none; } }

/* 404 */
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 60px; }
.notfound strong { display: block; font: 900 clamp(120px, 30vw, 340px)/.8 var(--display); letter-spacing: -.07em; }
.notfound h1 { font-size: clamp(28px, 4vw, 48px); margin: 24px 0 14px; }
.notfound p { color: var(--muted); }
.notfound .actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* Cursor personalizado (solo escritorio) */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, opacity .3s; mix-blend-mode: difference; opacity: 0; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.9); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js [data-reveal], html.js .split-words .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
.web-hero h1 { font-size: clamp(44px, 5.4vw, 86px); }

/* ---------- Proyectos: resumen ---------- */
.btn-summary { background: #f3dfb9; color: #1b2233; box-shadow: 0 10px 30px -14px rgba(243,223,185,.6); border-radius: 12px; min-height: 54px; padding: 0 28px; font-weight: 600; }
.btn-summary:hover { background: #f7e7c9; }
.visit { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; align-self: flex-start; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.visit::after { content: "→"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--teal-2); -webkit-text-fill-color: var(--teal-2); box-shadow: inset 0 0 0 1.5px rgba(94,233,216,.6); font-size: 15px; transition: transform .35s var(--ease), background-color .3s; }
.visit:hover::after { transform: translateX(4px); background: rgba(94,233,216,.12); }
dialog.summary { width: min(880px, 94vw); }
dialog.summary .dialog-box { padding: 0; max-height: 90vh; overflow: auto; overscroll-behavior: contain; }
.summary-cover { aspect-ratio: 16/7; overflow: hidden; border-radius: 26px 26px 0 0; position: relative; }
.summary-cover img { width: 100%; height: 100%; object-fit: cover; }
.summary-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0b1121); }
.summary-head { display: flex; align-items: center; gap: 16px; padding: 0 clamp(22px, 4vw, 40px); margin-top: -34px; position: relative; }
.summary-head .logo { height: 56px; width: auto; max-width: 140px; border-radius: 12px; background: #0b1121; padding: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.summary-head p { font: 600 11.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); }
.summary-head h2 { font-size: clamp(24px, 3vw, 36px); margin-top: 8px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; padding: 30px clamp(22px, 4vw, 40px); }
.summary-grid .wide { grid-column: 1 / -1; }
.summary-grid h3 { font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.summary-grid p { color: #cdd6ea; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; color: #dfe6f6; }
.checks li::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 50%; background: rgba(40,214,194,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee9d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 clamp(22px, 4vw, 40px) clamp(24px, 4vw, 38px); }
@media (max-width: 640px) { .summary-grid { grid-template-columns: 1fr; } .summary-cover { aspect-ratio: 16/9; } }

.cursor{display:none!important}

/* ===== Extras: legal, planes, compra de licencias, reseñas ===== */
.footer-bottom{align-items:center}
.legal-links{display:inline-flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.lr-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2,rgba(255,255,255,.16));color:var(--text)}
.lr-badge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);align-items:stretch}
.plan{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,2.6vw,34px);position:relative}
.plan.is-featured{box-shadow:inset 0 0 0 1.5px rgba(106,134,255,.55),0 30px 60px -30px rgba(49,87,255,.45)}
.plan .plan-tag{position:absolute;top:18px;right:18px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--grad-strong);color:#fff}
.plan h3{font-size:clamp(22px,2vw,28px);margin:0}
.plan .plan-for{color:var(--muted);margin:0;font-size:15px}
.plan .plan-price{font:800 clamp(30px,3vw,42px)/1 var(--display);letter-spacing:-.03em;padding:16px 0;border-block:1px solid var(--line)}
.plan .plan-price small{display:block;font:500 13px/1.4 var(--body);letter-spacing:0;color:var(--muted);margin-bottom:6px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan li{position:relative;padding-left:26px;color:var(--muted);font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.plan .actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.plans-note{margin-top:22px;color:var(--dim);font-size:14px;max-width:70ch}
@media (max-width:980px){.plans{grid-template-columns:1fr}}
.buy{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);padding:clamp(24px,3vw,40px)}
.buy h3{font-size:clamp(24px,2.4vw,34px);margin:14px 0 0}
.buy .buy-g{margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(40,214,194,.08);box-shadow:inset 0 0 0 1px rgba(40,214,194,.25);color:var(--text);font-size:15px}
.buy ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:b}
.buy li{display:grid;grid-template-columns:44px 1fr;gap:16px;counter-increment:b}
.buy li::before{content:counter(b);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--display);background:var(--grad-strong);color:#fff}
.buy li b{display:block;font-size:17px;margin-bottom:2px}
.buy li span{color:var(--muted);font-size:15px}
@media (max-width:860px){.buy{grid-template-columns:1fr}}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.rev-card{margin:0;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.rev-stars{color:#f5c451;letter-spacing:3px}
.rev-card blockquote{margin:0;font-size:17px;line-height:1.6}
.rev-card figcaption b{display:block}.rev-card figcaption span{color:var(--muted);font-size:14px}
@media (max-width:980px){.rev-grid{grid-template-columns:1fr}}
.legal-doc{max-width:820px}
.legal-doc h2{font-size:clamp(22px,2.2vw,30px);margin:42px 0 12px}
.legal-doc p,.legal-doc li{color:var(--muted)}
.legal-doc ul{padding-left:20px;display:grid;gap:6px}
.lr-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:clamp(22px,3vw,40px)}
.lr-form fieldset{grid-column:1/-1;border:0;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.lr-form legend{font:700 clamp(18px,1.6vw,22px)/1.3 var(--display);margin-bottom:14px;padding:0}
.lr-form label{display:grid;gap:8px;font-size:14px;color:var(--muted)}
.lr-form .full{grid-column:1/-1}
.lr-form input,.lr-form select,.lr-form textarea{width:100%;padding:13px 14px;border-radius:14px;border:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-2,rgba(255,255,255,.14));color:var(--text)}
.lr-form input:focus,.lr-form select:focus,.lr-form textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--teal)}
.lr-form select option{color:#0b1121}
.lr-type{display:flex;gap:12px;flex-wrap:wrap}
.lr-type label{flex:1;min-width:220px;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2,rgba(255,255,255,.14));cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.lr-type label b{color:var(--text)}
.lr-type label span{grid-column:2;font-size:13px}
.lr-check{grid-column:1/-1;display:flex!important;grid-template-columns:none!important;gap:10px!important;align-items:flex-start}
.lr-check input{width:auto;margin-top:3px}
.lr-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line)}
.lr-meta b{color:var(--text)}
.lr-result{padding:clamp(22px,3vw,40px)}
.lr-result dl{display:grid;grid-template-columns:200px 1fr;gap:10px 20px;margin:20px 0}
.lr-result dt{color:var(--muted)}.lr-result dd{margin:0;white-space:pre-wrap}
@media (max-width:700px){.lr-form,.lr-form fieldset{grid-template-columns:1fr}.lr-result dl{grid-template-columns:1fr}}
@media print{.site-header,.site-footer,.fab,.page-progress,.intro,.lr-actions,.page-hero,.assistant,.lr-form{display:none!important}body{background:#fff!important;color:#000!important}.lr-result{box-shadow:none!important;background:#fff!important;color:#000}.lr-result *{color:#000!important}}
[data-legal-line]:not([hidden])::before{content:" · "}
@media (min-width:981px){.plan .plan-for{min-height:3.2em}}
.lr-form [hidden]{display:none!important}

/* Fondos en los títulos de cada página */
.page-hero.short{min-height:min(64vh,580px)}
.hero-mosaic{inset:-30% -12% -10% -6%;overflow:hidden}
.mosaic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);transform:rotate(-9deg);transform-origin:center;opacity:.55}
.mosaic-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform:none!important}
.mosaic-grid img:nth-child(even){transform:translateY(18%)!important}
@media (max-width:760px){.mosaic-grid{grid-template-columns:repeat(3,1fr)}.mosaic-grid img:nth-child(n+10){display:none}}
.plan .plan-price em{display:block;font:500 13px/1.4 var(--body);font-style:normal;letter-spacing:0;color:var(--teal-2,#3ee6d0);margin-top:8px}
.plan-start{margin-top:clamp(14px,1.6vw,20px);display:grid;grid-template-columns:1fr 1.2fr auto;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px)}
.plan-start h3{font-size:clamp(22px,2vw,28px);margin:10px 0 4px}
.plan-start .plan-for{color:var(--muted);margin:0;font-size:15px}
.plan-start ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-start li{position:relative;padding-left:26px;color:var(--muted);font-size:15px}
.plan-start li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.plan-start .ps-end{display:grid;gap:14px;justify-items:start}
.plan-start .plan-price{font:800 clamp(28px,2.6vw,38px)/1 var(--display);letter-spacing:-.03em}
.plan-start .plan-price small{display:block;font:500 13px/1.4 var(--body);letter-spacing:0;color:var(--muted);margin-bottom:6px}
@media (max-width:980px){.plan-start{grid-template-columns:1fr}}
.price-notice{margin-top:clamp(18px,2vw,26px);display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:18px;background:rgba(49,87,255,.08);box-shadow:inset 0 0 0 1px rgba(106,134,255,.3)}
.price-notice svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;margin-top:2px}
.price-notice p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.price-notice b{color:var(--text)}
.plan .plan-kicker{margin:0 0 -6px}
.plan-wide{margin-top:clamp(14px,1.6vw,20px);display:grid;grid-template-columns:1fr 1.2fr auto;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(24px,2.6vw,34px);position:relative}
.plan-wide.is-featured{box-shadow:inset 0 0 0 1.5px rgba(106,134,255,.55),0 30px 60px -30px rgba(49,87,255,.45)}
.plan-wide .plan-tag{display:inline-block;position:static;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--grad-strong);color:#fff}
.plan-wide h3{font-size:clamp(26px,2.6vw,36px);margin:12px 0 4px}
.plan-wide .plan-for{color:var(--muted);margin:0;font-size:15px}
.plan-wide ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan-wide li{position:relative;padding-left:26px;color:var(--muted);font-size:15px}
.plan-wide li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:8px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.plan-wide .pw-end{display:grid;gap:16px;justify-items:start}
.plan-wide .plan-price{font:800 clamp(30px,3vw,42px)/1 var(--display);letter-spacing:-.03em}
.plan-wide .plan-price small{display:block;font:500 13px/1.4 var(--body);letter-spacing:0;color:var(--muted);margin-bottom:6px}
.plan-wide .actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:980px){.plan-wide{grid-template-columns:1fr}}
.plan-wide .plan-price em{display:block;font:500 13px/1.4 var(--body);font-style:normal;letter-spacing:0;color:var(--teal-2,#3ee6d0);margin-top:8px}
@media (min-width:981px){.plan-wide{grid-template-columns:1fr 1.3fr minmax(250px,auto)}}
.plans .plan .actions{flex-wrap:nowrap}.plans .plan .actions .btn{padding:.8rem 1.15rem;font-size:.92rem;white-space:nowrap}@media (max-width:380px){.plans .plan .actions{flex-wrap:wrap}}
.work-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.wb-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;padding:0}
.wb-media{aspect-ratio:16/9;overflow:hidden;background:#0b1020}
.wb-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.wb-card:hover .wb-media img{transform:scale(1.04)}
.wb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
.wb-grid div{overflow:hidden;border-radius:10px}.wb-grid svg{width:100%;height:100%;display:block;transition:transform 1.2s var(--ease)}
.wb-card:hover .wb-grid svg{transform:scale(1.05)}
.wb-body{padding:clamp(20px,2.4vw,30px);display:grid;gap:8px}
.wb-body h3{font-size:clamp(22px,2vw,28px);margin:0}.wb-body p{margin:0;color:var(--muted)}
.wb-body .link-arrow{margin-top:6px}
@media (max-width:860px){.work-band{grid-template-columns:1fr}}