/* ============================================================
   MV DESIGN · WEB — COMPONENTES
   Reglas del DS: gradiente ≤30%, nunca fondo completo;
   bordes 1px estructurales; sombras canónicas; glass solo en nav.
   ============================================================ */

/* ---------------------------------------------------------------
   PRELOADER
--------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink-0);
  display: grid; place-items: center;
  transition: clip-path 900ms var(--ease-out);
  clip-path: inset(0 0 0 0);
}
.preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader__inner { display: grid; justify-items: center; gap: var(--s-6); }
.preloader__mark { width: 72px; height: 72px; }
.preloader__count {
  font: var(--t-mono); letter-spacing: 0.12em;
  color: var(--fg-on-dark-3);
}

/* ---------------------------------------------------------------
   NAV — glass solo aquí (regla DS)
--------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav[data-scrolled="true"] {
  background: rgba(10, 10, 15, 0.72);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: var(--line-dark);
}
.nav[data-hidden="true"] { transform: translateY(-100%); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); height: 76px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.nav__brand .mark { width: 32px; height: 32px; }
.nav__brand .name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14.5px; letter-spacing: 0.01em; color: #fff;
}
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav__link {
  font: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-on-dark-3);
  padding: 6px 0; position: relative;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__link:hover { color: #fff; }

/* CTA del nav: borde hairline → fill gradiente al hover (swap del DS) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 24px; border-radius: var(--r-pill);
  color: #fff; position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.18));
  transition: transform var(--dur-1) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.btn:hover { border-color: transparent; color: #fff; }
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.97); }
.btn--solid { border-color: transparent; color: var(--ink-0); background: #fff; }
.btn--solid:hover { color: #fff; }
.btn--pop { box-shadow: var(--shadow-pop); }
.nav .btn { padding: 10px 19px; font-size: 11.5px; }

.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav__toggle span { width: 22px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: rgba(10,10,15,0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    gap: 28px; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .nav__links[data-open="true"] { opacity: 1; pointer-events: auto; }
  .nav__link { font-size: 16px; }
  body[data-nav-open="true"] { overflow: hidden; }
  body[data-nav-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body[data-nav-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; }
  body[data-nav-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------------------------------------------------------------
   HERO — el espacio M (canvas WebGL + HUD)
--------------------------------------------------------------- */
.hero { position: relative; height: 420vh; }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
/* Halos del DS detrás del canvas (≤30% alpha — luz, no wallpaper) */
.hero__stage::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-cover-halos);
  pointer-events: none;
}
/* Canvas FX fijo en dos capas: atrás del contenido y encima de él */
.fx-canvas { position: fixed; inset: 0; pointer-events: none; }
.fx-canvas canvas { width: 100%; height: 100%; }
.fx-canvas--back { z-index: 1; }
.fx-canvas--front { z-index: 3; }
main, .footer { position: relative; z-index: 2; }
.preloader { z-index: 200; }

/* Cosmos: nebulosas vivas detrás de todo + estrella fugaz ocasional */
.cosmos { position: fixed; inset: -22%; z-index: 0; pointer-events: none; }
.cosmos i {
  position: absolute; inset: 0; display: block;
  background:
    radial-gradient(36% 30% at 22% 28%, rgba(98, 92, 217, 0.20) 0%, transparent 70%),
    radial-gradient(30% 26% at 78% 64%, rgba(43, 204, 217, 0.13) 0%, transparent 70%),
    radial-gradient(26% 22% at 55% 12%, rgba(158, 67, 184, 0.12) 0%, transparent 70%);
  filter: blur(70px);
  animation: cosmosDrift 75s ease-in-out infinite alternate;
}
.cosmos i:nth-child(2) {
  opacity: 0.75;
  background:
    radial-gradient(30% 26% at 72% 18%, rgba(98, 92, 217, 0.15) 0%, transparent 70%),
    radial-gradient(28% 24% at 18% 78%, rgba(158, 67, 184, 0.11) 0%, transparent 70%);
  animation-duration: 105s;
  animation-direction: alternate-reverse;
}
@keyframes cosmosDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.1) rotate(2.5deg); }
}
.cosmos::after {
  content: ""; position: absolute; top: 14%; left: -6%;
  width: 150px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: rotate(16deg); opacity: 0;
  animation: shootingStar 11s linear infinite;
}
@keyframes shootingStar {
  0%, 84% { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  86%     { opacity: 0.9; }
  93%, 100% { opacity: 0; transform: translate3d(110vw, 34vh, 0) rotate(16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos i, .cosmos::after { animation: none; }
}

.hero__content {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(56px, 9vh, 110px);
  pointer-events: none;
}
.hero__content .eyebrow { margin-bottom: var(--s-6); display: inline-flex; gap: 1em; }
.hero__title {
  font: var(--t-display-xl);
  /* escala para que la palabra más larga ("Diseñamos") quepa hasta en ~320px */
  font-size: clamp(44px, 2rem + 8vw, 112px);
  letter-spacing: -0.04em;
  color: var(--fg-on-dark-1);
  max-width: 11ch;
}
.hero__lead {
  font: var(--t-lead); color: var(--fg-on-dark-2);
  max-width: 47ch; margin-top: var(--s-7);
}
.hero__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); pointer-events: auto; }

/* HUD mono — esquinas */
.hud {
  position: absolute; z-index: 2; font: var(--t-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--fg-on-dark-3); text-transform: uppercase;
  pointer-events: none; white-space: nowrap;
}
.hud--br { bottom: clamp(56px, 9vh, 110px); right: clamp(20px, 4vw, 48px); text-align: right; display: grid; gap: 6px; }
.hud__bar {
  width: 132px; height: 1px; background: var(--line-dark);
  position: relative; overflow: hidden; margin-left: auto;
}
.hud__bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--grad-blue); }

.hero__scrollcue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2; display: grid; justify-items: center; gap: 8px;
  font: var(--t-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-on-dark-3); text-transform: uppercase;
}
.hero__scrollcue i {
  width: 1px; height: 38px; background: var(--line-dark);
  position: relative; overflow: hidden; display: block;
}
.hero__scrollcue i::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-blue);
  animation: cuePulse 2.2s var(--ease-out) infinite;
}
@keyframes cuePulse { 0% { transform: translateY(-100%); } 65%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__scrollcue i::after { animation: none; } }

@media (max-width: 720px) {
  .hero { height: 300vh; }
  /* móvil: quitar el HUD de progreso de la animación (se amontona con los botones) */
  .hud--br { display: none; }
  /* dar aire abajo para que el botón "Servicios" no tape el scroll cue */
  .hero__content { padding-bottom: clamp(112px, 18vh, 150px); }
}

/* ---------------------------------------------------------------
   MANIFIESTO — tipografía gigante por palabras
--------------------------------------------------------------- */
.manifesto { position: relative; }
.manifesto .wrap { max-width: 1040px; }
.manifesto__line {
  font: var(--t-display-lg);
  font-size: clamp(34px, 2.2rem + 3vw, 72px);
  letter-spacing: -0.035em; line-height: 1.04;
  color: var(--fg-on-dark-1);
}
.manifesto__line + .manifesto__line { margin-top: var(--s-5); }
.manifesto__line .dim { color: var(--fg-on-dark-3); }
.manifesto__foot {
  margin-top: var(--s-9); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
}
.manifesto__foot p { font: var(--t-body); color: var(--fg-on-dark-3); max-width: 36ch; }
.manifesto__foot strong { color: var(--fg-on-dark-2); font-weight: 600; }
/* fichas Percepción / Confianza / Conversión — mismo lenguaje que .svc */
.manifesto__foot--cards {
  display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 22px);
}
@media (min-width: 760px) {
  .manifesto__foot--cards { grid-template-columns: repeat(3, 1fr); }
}
.mft {
  background: var(--ink-1);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.2vw, 30px);
  position: relative; overflow: hidden; isolation: isolate;
  transform: perspective(1000px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg));
  will-change: transform;
  transition: border-color var(--dur-2) var(--ease-out), transform 160ms var(--ease-out);
}
.mft:hover { border-color: var(--line-strong, rgba(255,255,255,0.18)); }
.mft::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(98, 92, 217, 0.20) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.mft:hover::after { opacity: 1; }
.mft__ico { width: 42px; height: 42px; color: var(--fg-on-dark-1); }
.mft h3 { font: var(--t-h3); letter-spacing: -0.015em; margin-top: var(--s-5); }
.mft p { font: var(--t-body); color: var(--fg-on-dark-3); margin-top: var(--s-3); max-width: 36ch; }

/* ---------------------------------------------------------------
   SERVICIOS — horizontal scroll pinned
--------------------------------------------------------------- */
.services { position: relative; }
.services__pin { overflow: hidden; }
.services__head { padding-top: clamp(72px, 6rem + 2vw, 130px); padding-bottom: var(--s-8); }
.services__head .h2 { margin-top: var(--s-4); max-width: 18ch; }
.services__track {
  display: flex; gap: clamp(14px, 1.6vw, 22px);
  padding-inline: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(72px, 8vh, 120px);
  width: max-content;
}
.svc {
  width: clamp(300px, 38vw, 460px);
  min-height: clamp(380px, 52vh, 520px);
  flex: none;
  background: var(--ink-1);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.5vw, 36px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden; isolation: isolate;
  /* 3D: pose por scroll (--sry) + tilt por cursor (--tx/--ty) */
  transform: perspective(1000px) rotateY(calc(var(--sry, 0deg) + var(--ty, 0deg))) rotateX(var(--tx, 0deg));
  will-change: transform;
  transition: border-color var(--dur-2) var(--ease-out), transform 160ms var(--ease-out);
}
.svc:hover { border-color: var(--line-strong, rgba(255,255,255,0.18)); }
/* brillo especular que sigue al cursor */
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(98, 92, 217, 0.20) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.svc:hover::after { opacity: 1; }
/* acento de luz: halo sutil dentro de la card (≤30%) */
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 55% at 85% -10%, rgba(98,92,217,0.16) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.svc:hover::before { opacity: 1; }
.svc__num { font: var(--t-mono); color: var(--fg-on-dark-3); letter-spacing: 0.14em; }
.svc__ico { width: 48px; height: 48px; margin-top: var(--s-7); color: var(--fg-on-dark-1); }
.svc__ico svg,
.mft__ico svg { width: 100%; height: 100%; stroke-width: 1.5; overflow: visible; }
/* motion graphics: el trazo se dibuja, respira y se re-dibuja en ciclo */
.svc__ico svg *,
.mft__ico svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: icoDraw 5.2s var(--ease-in-out, ease-in-out) infinite;
}
.svc__ico svg *:nth-child(2),
.mft__ico svg *:nth-child(2) { animation-delay: 0.22s; }
.svc__ico svg *:nth-child(3),
.mft__ico svg *:nth-child(3) { animation-delay: 0.44s; }
.svc:nth-child(2n) .svc__ico svg *,
.mft:nth-child(2) .mft__ico svg * { animation-duration: 5.8s; }
.svc:nth-child(3n) .svc__ico svg *,
.mft:nth-child(3) .mft__ico svg * { animation-duration: 6.4s; }
@keyframes icoDraw {
  0%        { stroke-dashoffset: 1; }   /* invisible */
  28%, 62%  { stroke-dashoffset: 0; }   /* dibujado completo, respira */
  90%, 100% { stroke-dashoffset: -1; }  /* se des-dibuja hacia adelante */
}
/* al hover: re-dibujado rápido + glow cian */
.svc:hover .svc__ico svg *,
.mft:hover .mft__ico svg * {
  animation: icoDrawFast 900ms var(--ease-out) forwards;
}
.svc:hover .svc__ico svg *:nth-child(2),
.mft:hover .mft__ico svg *:nth-child(2) { animation-delay: 0.1s; }
.svc:hover .svc__ico svg *:nth-child(3),
.mft:hover .mft__ico svg *:nth-child(3) { animation-delay: 0.2s; }
.svc:hover .svc__ico svg,
.mft:hover .mft__ico svg { filter: drop-shadow(0 0 14px rgba(43, 204, 217, 0.5)); }
@keyframes icoDrawFast {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__ico svg *,
  .mft__ico svg * { animation: none; stroke-dashoffset: 0; }
}
.svc__body h3 { font: var(--t-h3); letter-spacing: -0.015em; margin-top: var(--s-6); }
.svc__body p { font: var(--t-body); color: var(--fg-on-dark-3); margin-top: var(--s-3); max-width: 34ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.svc__tags span {
  font: var(--t-caption); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-on-dark-3);
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
}
/* card final de la fila: invitación */
.svc--cta { background: var(--ink-2); justify-content: center; align-items: flex-start; gap: var(--s-6); }
.svc--cta .h3 { max-width: 12ch; }

.services__progress {
  position: absolute; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px);
  bottom: clamp(40px, 5vh, 64px); height: 1px; background: var(--line-dark);
}
.services__progress i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--grad-brand); }

/* fallback móvil: scroll nativo horizontal */
@media (max-width: 860px) {
  .services__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .svc { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------
   PROCESO — línea viva de 5 etapas
--------------------------------------------------------------- */
.process { position: relative; }
.process .wrap { max-width: 980px; }
.process__head .h2 { margin-top: var(--s-4); max-width: 20ch; }
.process__list { margin-top: var(--s-10); position: relative; }
.process__rail {
  position: absolute; left: 23px; top: 8px; bottom: 8px; width: 1px;
  background: var(--line-dark);
}
.process__rail i {
  position: absolute; inset: 0; transform-origin: top; transform: scaleY(0);
  background: var(--grad-brand);
}
.step {
  position: relative; display: grid;
  grid-template-columns: 48px 1fr; gap: clamp(18px, 3vw, 36px);
  padding-block: clamp(22px, 2.5vw, 34px);
}
.step__node {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--ink-1); border: 1px solid var(--line-dark);
  font: var(--t-mono); font-size: 12px; color: var(--fg-on-dark-3);
  position: relative; z-index: 1;
  transition: border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.step.is-active .step__node {
  border-color: var(--mv-blue-2); color: #fff;
  box-shadow: 0 0 24px -6px rgba(43, 204, 217, 0.55);
}
.step h3 { font: var(--t-h4); letter-spacing: -0.01em; }
.step p { font: var(--t-body); color: var(--fg-on-dark-3); margin-top: var(--s-2); max-width: 52ch; }
.step .mono { margin-top: var(--s-3); display: block; font-size: 11px; }

/* ---------------------------------------------------------------
   CASOS — grid editorial con parallax
--------------------------------------------------------------- */
.work { }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.work__head .h2 { margin-top: var(--s-4); }
.work__grid {
  margin-top: var(--s-9);
  display: grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .case--wide { grid-column: span 2; }
}
.case {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line-dark);
  background: var(--ink-1);
  min-height: 380px;
  display: flex; align-items: flex-end;
  isolation: isolate;
  transform: perspective(1100px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg));
  will-change: transform;
  transition: transform 180ms var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.case:hover { border-color: var(--line-strong, rgba(255,255,255,0.18)); }
.case::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 204, 217, 0.13) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.case:hover::before { opacity: 1; }
.case--wide { min-height: 460px; }
.case__media { position: absolute; inset: -8% 0; z-index: -1; }
.case__media img,
.case__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* media real (video/img) sobre base oscura mientras carga el poster */
.case__media--video,
.case__media--img { background: var(--ink-2); }
/* placeholder de arte: halo + marca de agua hasta tener captura real */
.case__media--art { background: var(--ink-2); }
.case__media--art::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(98,92,217,0.28) 0%, transparent 60%),
    radial-gradient(60% 55% at 10% 100%, rgba(43,204,217,0.18) 0%, transparent 60%);
}
.case__media--art .wm {
  position: absolute; right: -70px; top: -70px; width: 320px; opacity: 0.08;
}
.case::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(10,10,15,0.88) 92%);
}
/* fotos claras: scrim más profundo para conservar la legibilidad */
.case--light::after {
  background: linear-gradient(200deg, transparent 22%, rgba(10,10,15,0.62) 56%, rgba(10,10,15,0.97) 92%);
}
/* captura completa sin recorte (no zoom): el screenshot se ve entero,
   pegado arriba, con la franja inferior oscura donde va el texto */
.case--contain .case__media { inset: 0; }
.case--contain .case__media img { object-fit: contain; object-position: center top; }
.case--contain::after {
  background: linear-gradient(0deg, rgba(10,10,15,0.96) 0%, rgba(10,10,15,0.7) 18%, transparent 38%);
}
/* móvil: las cards contain (Protect Diversity y Vista Real) llenan toda su ficha (cover) */
@media (max-width: 760px) {
  .case--contain .case__media img { object-fit: cover; object-position: center; }
}
/* ficha clickeable: enlace que cubre toda la card (stretched link) */
.case__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.case__link:focus-visible { outline: 2px solid #2BCCD9; outline-offset: 3px; }
.case__body { position: relative; z-index: 1; padding: clamp(22px, 2.5vw, 34px); width: 100%; }
.case__sector { font: var(--t-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-dark-3); }
.case h3 { font: var(--t-h3); margin-top: var(--s-2); }
.case p { font: var(--t-body-sm); color: var(--fg-on-dark-2); margin-top: var(--s-2); max-width: 46ch; }
.case__chip {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); z-index: 1;
  font: var(--t-caption); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
  background: rgba(10,10,15,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------
   PAQUETES — niveles web
--------------------------------------------------------------- */
.tiers { }
.tiers__head { max-width: 720px; }
.tiers__head .h2 { margin-top: var(--s-4); }
.tiers__grid {
  margin-top: var(--s-9);
  display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 920px) { .tiers__grid { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--ink-1); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: clamp(24px, 2.5vw, 34px);
  display: flex; flex-direction: column; gap: var(--s-6);
  position: relative; isolation: isolate; overflow: hidden;
  transform: perspective(1100px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg));
  transition: transform 180ms var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tier:hover { border-color: var(--line-strong, rgba(255,255,255,0.18)); }
/* brillo especular que sigue al cursor (mismo lenguaje que servicios/casos) */
.tier::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(98, 92, 217, 0.17) 0%, transparent 65%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.tier:hover::after { opacity: 1; }
.tier__kicker { font: var(--t-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-on-dark-3); }
.tier h3 { font: var(--t-h3); margin-top: var(--s-2); }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--fg-on-dark-1); }
.tier__price small { font: var(--t-caption); color: var(--fg-on-dark-3); display: block; margin-top: 4px; letter-spacing: 0.04em; }
.tier ul { display: grid; gap: 10px; }
.tier li { display: flex; gap: 10px; font: var(--t-body-sm); color: var(--fg-on-dark-2); }
.tier li::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232BCCD9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}
.tier__meta { font: var(--t-mono); font-size: 11px; color: var(--fg-on-dark-3); letter-spacing: 0.08em; }
.tier .btn { margin-top: auto; justify-content: center; }
/* nivel destacado: 3D inmersiva */
.tier--featured { background: var(--ink-2); border-color: rgba(98,92,217,0.45); box-shadow: var(--shadow-pop); }
.tier--featured::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 50% at 50% -20%, rgba(98,92,217,0.22) 0%, transparent 65%);
}
.tier__badge {
  position: absolute; top: 22px; right: 22px;
  font: var(--t-caption); font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--grad-brand);
}
/* credencial neutra (p. ej. Shopify Partners): outline, sin gradiente */
.tier__badge--outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.18));
  color: var(--fg-on-dark-2);
}
.tier__badge--outline svg { width: 13px; height: 13px; }
.tiers__note { margin-top: var(--s-7); font: var(--t-body-sm); color: var(--fg-on-dark-3); max-width: 64ch; }

/* ---------------------------------------------------------------
   CTA FINAL
--------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 78% 12%, rgba(98,92,217,0.26) 0%, transparent 60%),
    radial-gradient(50% 55% at 12% 95%, rgba(43,204,217,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta__inner { position: relative; text-align: center; padding-block: clamp(48px, 3rem + 2vw, 90px) clamp(110px, 9rem + 5vw, 220px); }
/* espacio reservado donde el M reformado se ancla (el canvas lo sigue) */
.cta__mark { height: clamp(220px, 30vh, 320px); margin-bottom: var(--s-6); }
.cta__title {
  font: var(--t-display-lg);
  font-size: clamp(40px, 2.6rem + 3.6vw, 84px);
  letter-spacing: -0.035em; color: var(--fg-on-dark-1);
  max-width: 17ch; margin-inline: auto;
}
.cta__lead { font: var(--t-lead); color: var(--fg-on-dark-2); max-width: 46ch; margin: var(--s-7) auto 0; }
.cta__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.cta__contact {
  margin-top: var(--s-9); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); justify-content: center;
  font: var(--t-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--fg-on-dark-3);
}
.cta__contact > a, .cta__contact .cta__ws {
  display: inline-flex; align-items: center; gap: 8px;
}
.cta__contact svg { width: 15px; height: 15px; flex: none; }
.cta__contact a { transition: color var(--dur-1) var(--ease-out); }
.cta__contact a:hover { color: #fff; }
.cta__ws i { font-style: normal; opacity: 0.5; }
/* touch: área táctil cómoda (~44px) para los enlaces de contacto/WhatsApp */
@media (pointer: coarse) {
  .cta__contact { gap: var(--s-2) var(--s-6); }
  .cta__contact > a, .cta__contact .cta__ws { padding-block: 13px; }
}

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line-dark); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding-block: var(--s-8);
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-on-dark-3); }
.footer__brand .mark { width: 24px; height: 24px; }
.footer__brand span { font: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; }
.footer__meta { font: var(--t-caption); color: var(--fg-on-dark-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.footer__meta a:hover { color: #fff; }

/* ============================================================
   Brandstrip — clientes knockout marquee (Casos)
   The ribbon is a solid "ficha" (--ink-1); the 25 client logos
   are punched out as holes that reveal the brand gradient behind.
   PERF: the masked ribbon is ONE static SVG (holds two sequences);
   the mask is rasterized ONCE and the whole SVG just slides via
   transform (translateX -50% = one sequence -> seamless). No per-
   frame mask recompute -> smooth on mobile alongside the WebGL comet.
   ============================================================ */
.brandstrip {
  --bh: clamp(104px, 13vw, 148px);          /* band height */
  --strip-ar: 67.353;                        /* slider aspect = sliderW/VBH = 11450/170 */
  position: relative;
  margin-top: clamp(48px, 7vh, 88px);
  /* full-bleed: break out of .wrap to span the viewport (body has overflow-x:hidden) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--bh);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-brand);            /* static; glows through the logo holes */
}
.brandstrip__svg {
  /* explicit width = height x aspect; max-width:none beats the global img/svg reset
     (base.css: max-width:100%) that would otherwise clamp the slider to its parent */
  display: block; height: var(--bh); width: calc(var(--bh) * var(--strip-ar));
  max-width: none;
  animation: brandscroll var(--brand-dur, 72s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.brandstrip__fill { fill: var(--ink-1); }     /* the solid ribbon surface */
@keyframes brandscroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* soft edge fade into the ribbon surface */
.brandstrip::before,
.brandstrip::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(28px, 6%, 80px); pointer-events: none;
}
.brandstrip::before { left: 0;  background: linear-gradient(90deg,  var(--ink-1), transparent); }
.brandstrip::after  { right: 0; background: linear-gradient(270deg, var(--ink-1), transparent); }
.brandstrip:hover .brandstrip__svg { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .brandstrip__svg { animation: none; }
}