/* ==========================================================================
   SPARK — portal público
   Tokens y piezas de marca en marca.css. Aquí solo la composición.
   ========================================================================== */

.envoltura {
  max-width: var(--ancho-max); margin: 0 auto;
  padding-left: var(--margen-lateral); padding-right: var(--margen-lateral);
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--acento); color: var(--fondo); font-weight: 600;
  padding: 12px 18px; border-radius: var(--radio-pildora);
}
.saltar:focus { top: 12px; }

/* El punto final en Aqua: la firma tipográfica del manual ("Operations.").
   Encendido, como un neón: es lo único del titular que brilla. */
.punto { color: var(--acento); -webkit-text-fill-color: var(--acento); text-shadow: var(--neon-texto); }

/* --- Materiales ---------------------------------------------------------
   Titulares en cromo; lo que flota, en vidrio con filo metálico. */
.metal, .titulo-seccion, .manifiesto__titulo, .contacto__titulo, .pin__contador {
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.tarjeta, .servicios__caja, .paquete { position: relative; }
.tarjeta::before, .servicios__caja::before, .paquete::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--metal-filo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity .3s;
}

/* --- NAV ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)), rgba(5, 10, 48, .62);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35) 30%, rgba(0, 255, 204, .4) 70%, rgba(255, 255, 255, 0)) 1;
}
.nav__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px; padding-top: 16px; padding-bottom: 16px;
}
.nav__marca { display: flex; align-items: center; min-height: 44px; }
.nav__marca .logo { height: 28px; }
.nav__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 30px; }
.nav__enlace { font-size: 15px; color: var(--suave); padding: 10px 4px; transition: color .2s; }
.nav__enlace:hover { color: var(--acento); }
.nav__equipo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora);
  font-size: 14px; color: var(--tinta-2); transition: border-color .2s, color .2s;
}
.nav__equipo:hover { border-color: var(--acento); color: var(--acento); }
.nav__equipo svg { width: 16px; height: 16px; }
.nav__cta { min-height: 42px; padding: 0 20px; font-size: 14px; }

/* --- HERO ----------------------------------------------------------------
   Al estilo Pulse Creative: una escena oscura que se mueve sola, un titular
   gigante y poco más. La escena es el emblema SP del manual; el titular es
   de metal; el texto y los botones, de vidrio sobre la escena. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(680px, 100vh); display: flex; align-items: flex-end;
  background: #03061F;
}

/* Escena: la imagen a sangre, directa, sin capa de color encima. Ya viene
   oscura a la izquierda (donde va el titular) con el emblema a la derecha. */
.hero__escena {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  --px: 0px; --py: 0px;
}
.hero__escena picture, .hero__escena img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__escena img {
  object-fit: cover; object-position: 72% 50%;
  transform: translate3d(var(--px), var(--py), 0) scale(1.04);
  animation: escena-respira 22s ease-in-out infinite alternate;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
/* Zoom lento, como el video de la referencia: la escena nunca está quieta. */
@keyframes escena-respira {
  from { scale: 1; }
  to   { scale: 1.08; }
}

/* Cima: logo a la izquierda, botón de menú a la derecha. Nada más. */
.hero__cima {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding-top: 28px;
}
.hero__marca { display: inline-flex; min-height: 44px; align-items: center; }
.hero__marca .logo { height: 30px; color: var(--tinta); }

/* Vidrio: la misma receta para el botón de menú, la flecha y el panel. */
.hero__menu-boton, .hero__flecha, .hero__vidrio {
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 0 0 1px rgba(255, 255, 255, .14),
    0 20px 40px -20px rgba(0, 0, 0, .7);
}
.hero__menu-boton {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--tinta);
  transition: box-shadow .25s, transform .25s;
}
.hero__menu-boton:hover { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 255, 204, .55), 0 0 22px rgba(0, 255, 204, .25); }
/* Dos líneas (la segunda es una sombra); al cerrar, una cruz. */
.hero__menu-lineas {
  display: block; position: relative; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; box-shadow: 0 -6px 0 currentColor; transform: translateY(3px);
}
.hero__menu-boton--cerrar .hero__menu-lineas { box-shadow: none; transform: rotate(45deg); }
.hero__menu-boton--cerrar .hero__menu-lineas::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform: rotate(-90deg);
}

/* Titular: gigante, en mayúsculas y de metal. Un destello lo recorre. */
.hero__contenido { position: relative; width: 100%; padding-top: 140px; padding-bottom: clamp(40px, 7vh, 80px); }
.hero__titulo {
  font-weight: var(--peso-titular); text-transform: uppercase;
  font-size: clamp(40px, 7.6vw, 128px); line-height: .9; letter-spacing: -.035em;
}
.hero__linea, .rotador__col span {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
    var(--metal-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: destello 7s ease-in-out 2s infinite;
}
.hero__linea { display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
@keyframes destello {
  0%, 70% { background-position: 160% 0, 0 0; }
  100%    { background-position: -60% 0, 0 0; }
}
.hero__linea { white-space: nowrap; }
/* La palabra que cambia va más chica que "Sistemas que": con las letras
   abiertas, a tamaño completo "AUTOMATIZAN" no entraría a lo ancho. */
.rotador { display: block; width: fit-content; height: 1.1em; overflow: hidden; font-size: .7em; margin-top: .12em; }
.rotador__col { display: flex; flex-direction: column; animation: rotar 12s infinite; }
/* La palabra que cambia va en aqua anodizado: el mismo metal, con la luz de la marca. */
.rotador__col span {
  display: block; height: 1.1em; line-height: 1.1;
  /* Lo estático ("Sistemas que") queda en Outfit; la palabra que cambia, en
     Inter semibold con las letras abiertas, como "SYSTEMS · PEOPLE · PROGRESS". */
  font-family: var(--fuente-texto); font-weight: 600; letter-spacing: .16em;
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
    var(--metal-aqua);
  -webkit-background-clip: text; background-clip: text;
}
@keyframes rotar {
  0%, 21%   { transform: translateY(0); }
  25%, 46%  { transform: translateY(-20%); }
  50%, 71%  { transform: translateY(-40%); }
  75%, 96%  { transform: translateY(-60%); }
  100%      { transform: translateY(-80%); }
}

/* Pie: flecha redonda y panel de vidrio, abajo a la derecha como Pulse. */
.hero__pie {
  margin-top: clamp(32px, 6vh, 64px); display: flex; align-items: flex-end; justify-content: flex-end; gap: 22px;
}
.hero__flecha {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--acento);
  animation: flota 4s ease-in-out infinite;
  transition: box-shadow .25s;
}
.hero__flecha svg { width: 26px; height: 26px; }
.hero__flecha:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 255, 204, .6), 0 0 28px rgba(0, 255, 204, .35); }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.hero__vidrio {
  position: relative; width: min(400px, 100%); padding: 26px 26px 22px; border-radius: 20px;
}
/* La línea de arriba, como el "liner" de la referencia: se traza al entrar. */
.hero__vidrio::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(0, 255, 204, .9), rgba(255, 255, 255, .25));
  box-shadow: 0 0 10px rgba(0, 255, 204, .5);
  transform-origin: left; animation: trazar 1.6s cubic-bezier(.2, .8, .2, 1) .6s both;
}
@keyframes trazar { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
.hero__bajada { font-size: 15px; line-height: 1.6; color: var(--tinta-3); }
.hero__enlace {
  display: inline-flex; margin-top: 14px; min-height: 44px; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--acento);
}
.hero__enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Menú a pantalla completa, de vidrio ---------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: rgba(3, 6, 31, .82);
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  animation: menu-entra .4s ease both;
}
/* En una columna flex, el margin auto de .envoltura la encoge al contenido. */
.menu > .envoltura { width: 100%; }
.menu[hidden] { display: none; }
@keyframes menu-entra { from { opacity: 0; } to { opacity: 1; } }
.menu__cima { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.menu__enlaces { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.menu__enlaces a {
  width: fit-content; font-family: var(--fuente-display); font-weight: var(--peso-titular);
  text-transform: uppercase; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(40px, 7vw, 96px);
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateX(60px); animation: menu-enlace .7s cubic-bezier(.2, .8, .2, 1) both;
  transition: filter .25s;
}
.menu__enlaces a:nth-child(2) { animation-delay: .06s; }
.menu__enlaces a:nth-child(3) { animation-delay: .12s; }
.menu__enlaces a:nth-child(4) { animation-delay: .18s; }
.menu__enlaces a:hover, .menu__enlaces a:focus-visible {
  background-image: var(--metal-aqua); filter: drop-shadow(0 0 18px rgba(0, 255, 204, .4));
}
@keyframes menu-enlace { to { opacity: 1; transform: none; } }
.menu__pie { padding-bottom: 32px; }
.menu__equipo { font-size: 14px; color: var(--suave); }
.menu__equipo:hover { color: var(--acento); }
body.con-menu { overflow: hidden; }

/* --- Celular: la escena arriba, el texto abajo ---------------------------- */
@media (max-width: 860px) {
  .hero { align-items: flex-end; }
  /* En vertical, el recorte se corre a la derecha para que se vea el emblema. */
  .hero__escena img { object-position: 80% 50%; }
  .hero__pie { flex-direction: column-reverse; align-items: stretch; }
  .hero__flecha { align-self: flex-end; width: 64px; height: 64px; }
  .hero__vidrio { width: 100%; }
}

/* --- SECCIONES ----------------------------------------------------------- */
.seccion-cab { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; }
.titulo-seccion { margin-top: 14px; font-size: clamp(34px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.03em; }
.titulo-seccion--ancho { max-width: 900px; }
.titulo-seccion--chico { font-size: clamp(30px, 4.2vw, 56px); }
.rotulo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }

/* --- PROYECTOS ----------------------------------------------------------- */
/* Luz de fondo para que el vidrio de las tarjetas tenga algo que refractar. */
.proyectos {
  padding: 110px 0 40px;
  background:
    radial-gradient(55% 45% at 88% 30%, rgba(0, 0, 255, .38), transparent 70%),
    radial-gradient(45% 40% at 8% 75%, rgba(0, 255, 204, .14), transparent 70%);
}
.tarjeta { isolation: isolate; }

/* Página propia de proyectos: arranca debajo de la barra, sin hero. */
.proyectos--pagina { padding-top: 72px; min-height: 100vh; }
.busqueda-pagina { margin-top: 36px; display: flex; max-width: 640px; }
/* Buscador de vidrio: antes compartía estilos con el del hero, que ya no existe. */
.busqueda-pagina input {
  width: 100%; min-height: 56px; border-radius: var(--radio-pildora);
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(5, 10, 48, .45);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .3);
  color: var(--tinta); padding: 0 24px; font-size: 16px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.busqueda-pagina input::placeholder { color: var(--suave); }
.busqueda-pagina input:focus {
  outline: none; border-color: rgba(0, 255, 204, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--neon-caja);
}
.nav__enlace[aria-current="page"] { color: #E9FFFA; text-shadow: 0 0 10px rgba(0, 255, 204, .6); }
.cierre-proyectos { padding: 40px 0 110px; }
.cierre-proyectos__caja { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }

.proyectos__cuenta { font-size: 18px; color: var(--suave); }

.aviso-demo {
  margin-bottom: 36px; padding: 14px 18px; border-radius: var(--radio-chico);
  border: 1px dashed var(--acento-borde); background: var(--acento-tenue);
  font-size: 14px; line-height: 1.5; color: var(--tinta-2);
}

.filtros { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.filtros__fila, .filtros__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros__rotulo { font-size: 12px; color: var(--tenue); margin-right: 6px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }

/* Tarjetas */
.tarjeta {
  display: flex; flex-direction: column; border-radius: var(--radio-tarjeta); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 24px 48px -28px rgba(0, 0, 0, .8);
  transition: transform .3s, box-shadow .3s;
}
/* Al pasar, el filo metálico se enciende y pasa a ser un tubo aqua. */
.tarjeta::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: var(--neon-caja); opacity: 0; transition: opacity .3s;
}
.tarjeta:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 0 50px -10px rgba(0, 255, 204, .45), 0 24px 60px rgba(0, 0, 0, .45); }
.tarjeta:hover::after, .tarjeta:focus-within::after { opacity: 1; }
.tarjeta:hover::before { opacity: 0; }
/* Estado en la esquina de la imagen: "En vivo" encendido, el resto en espera. */
.tarjeta__estado { position: absolute; top: 14px; right: 14px; z-index: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tarjeta__estado:not(.etq--vivo) { background: rgba(5, 10, 48, .6); }
/* Un sistema en vivo deja una línea de neón donde termina la imagen. */
.tarjeta--viva .tarjeta__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 255, 204, 0), #CFFFF4 30%, #CFFFF4 70%, rgba(0, 255, 204, 0));
  box-shadow: var(--neon);
}
.tarjeta:hover .tarjeta__vis { transform: scale(1.06); }
.tarjeta__media { position: relative; height: 230px; overflow: hidden; flex: none; }
.tarjeta__vis { position: absolute; inset: 0; transition: transform .6s; background-size: cover; background-position: center; }
.tarjeta__cuerpo { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tarjeta__rol { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.tarjeta__nombre { font-size: 23px; line-height: 1.15; }
.tarjeta__cliente { font-size: 14px; color: var(--suave); }
.tarjeta__cliente strong { color: var(--tinta); font-weight: 600; }
.tarjeta__desc { font-size: 15px; line-height: 1.55; color: var(--tinta-3); }
.tarjeta__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }

/* Visual de cada tipo, mientras el proyecto no tenga captura propia: solo
   colores del manual (Prussian, Azul, Aqua) */
.vis--sitio   { background: radial-gradient(120% 90% at 15% 0%, rgba(0, 255, 204, .55), transparent 55%), linear-gradient(150deg, var(--azul-profundo), var(--fondo)); }
.vis--landing { background: radial-gradient(110% 90% at 85% 10%, rgba(0, 255, 204, .5), transparent 55%), linear-gradient(200deg, var(--azul), var(--fondo) 70%); }
.vis--dashboard { background: radial-gradient(100% 80% at 85% 0%, rgba(0, 0, 255, .9), transparent 60%), radial-gradient(70% 70% at 5% 100%, rgba(0, 255, 204, .38), transparent 60%), var(--panel-hondo); }
.vis--sistema { background: radial-gradient(90% 90% at 50% 120%, rgba(0, 255, 204, .6), transparent 60%), radial-gradient(70% 70% at 90% 0%, rgba(0, 0, 255, .6), transparent 60%), var(--panel-hondo); }
.vis--automatizacion { background: conic-gradient(from 210deg at 70% 30%, rgba(0, 0, 255, .8), rgba(0, 255, 204, .42), rgba(5, 10, 48, .9) 55%, rgba(0, 0, 255, .8)), var(--panel-hondo); }
.vis--herramienta { background: radial-gradient(80% 80% at 20% 80%, rgba(0, 255, 204, .45), transparent 60%), linear-gradient(120deg, var(--fondo), var(--azul-profundo)); }

/* Esqueleto mientras carga */
.tarjeta--esqueleto { pointer-events: none; }
.tarjeta--esqueleto .tarjeta__media { background: var(--panel-hondo); }
.barra-esq { height: 12px; border-radius: var(--radio-pildora); background: rgba(235, 235, 235, .08); animation: latir 1.6s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Galería fijada al scroll vs. cuadrícula */
.pin { position: relative; margin-top: 44px; }
.pin--galeria { margin-top: 36px; }
.pin--galeria .pin__fijo { position: sticky; top: 96px; height: 680px; overflow: hidden; }
.pin__pista-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 26px; }
.pin--galeria .pin__pista-tarjetas { display: flex; gap: 26px; width: max-content; height: 610px; padding-top: 10px; will-change: transform; }
.pin--galeria .pin__item { flex: 0 0 auto; width: min(380px, 82vw); height: 100%; }
.pin__item .tarjeta { height: 100%; }

.pin__progreso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; height: 56px; }
.pin__contador { font-family: var(--fuente-display); font-weight: var(--peso-titular); font-size: 22px; }
.pin__total { color: var(--tenue); }
.pin__barra { flex: 1 1 160px; height: 3px; border-radius: var(--radio-pildora); background: rgba(235, 235, 235, .14); overflow: hidden; }
.pin__barra { overflow: visible; }
.pin__barra span { display: block; height: 100%; border-radius: inherit; background: #CFFFF4; box-shadow: var(--neon); transform: scaleX(0); transform-origin: left; }
.pin__pista { font-size: 13px; color: var(--tenue); }

.vacio {
  margin-top: 44px; border: 1px dashed var(--linea-boton); border-radius: var(--radio-tarjeta); padding: 60px 24px; text-align: center;
  background: var(--vidrio); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.vacio__titulo { font-size: 22px; font-family: var(--fuente-display); font-weight: var(--peso-titular); }
.vacio__texto { margin: 12px auto 0; max-width: 460px; font-size: 15px; line-height: 1.55; color: var(--suave); }
.vacio .btn { margin-top: 20px; }

/* --- FICHA (dialog) ------------------------------------------------------ */
.ficha {
  width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  border: 1px solid rgba(0, 255, 204, .6); border-radius: var(--radio-tarjeta);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01)), rgba(10, 17, 64, .78);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 0 60px -12px rgba(0, 255, 204, .4), inset 0 1px 0 var(--vidrio-brillo);
  color: var(--tinta); overflow: auto;
}
.ficha__estado { position: absolute; top: 16px; right: 16px; }
.ficha[open] { display: flex; flex-wrap: wrap; animation: abrir .28s ease-out; }
.ficha::backdrop { background: rgba(5, 10, 48, .6); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
@keyframes abrir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ficha__visual { flex: 1 1 360px; min-height: 320px; position: relative; background-size: cover; background-position: center; }
.ficha__cuerpo { flex: 1.25 1 420px; padding: 40px 36px 34px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.ficha__cerrar {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta);
}
.ficha__cerrar:hover { border-color: rgba(0, 255, 204, .75); color: #E9FFFA; box-shadow: var(--neon-caja); }
.ficha__cerrar svg { width: 20px; height: 20px; }
.ficha__nombre { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; padding-right: 44px; }
.ficha__cliente { font-size: 14px; color: var(--suave); }
.ficha__cliente strong { color: var(--tinta); font-weight: 600; }
.ficha__desc { font-size: 17px; line-height: 1.6; color: var(--tinta-2); }
.ficha__columnas { display: flex; flex-wrap: wrap; gap: 28px; }
.ficha__columnas > div { flex: 1 1 220px; }
.ficha__texto { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--tinta-3); }
.ficha__stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ficha__stack li { font-size: 13px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); padding: 5px 10px; color: var(--tinta-2); }
.ficha__lanzamiento { font-size: 13px; color: var(--tenue); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }
body.con-dialogo { overflow: hidden; }

/* --- ESCENAS: el patrón del hero, repetido en toda la portada --------------
   Cada sección es una foto del manual a sangre, oscurecida con un velo, y
   encima vidrio con el contenido. Los títulos van en metal (.titulo-seccion).
   La foto no se mueve: el único movimiento continuo es el del hero. */
.escena { position: relative; isolation: isolate; overflow: hidden; background: #03061F; }
.escena__fondo, .escena__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.escena__fondo img { object-fit: cover; }
.escena__velo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Vidrio: misma receta que el panel del hero. */
.vidrio {
  position: relative; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 0 0 1px rgba(255, 255, 255, .12),
    0 30px 60px -30px rgba(0, 0, 0, .8);
}
/* Botón redondo de vidrio con flecha, como el del hero. */
.flecha-vidrio {
  width: 68px; height: 68px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--acento);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .14);
  transition: box-shadow .25s, transform .25s;
}
.flecha-vidrio svg { width: 24px; height: 24px; }
.flecha-vidrio:hover { transform: translateX(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 255, 204, .6), 0 0 24px rgba(0, 255, 204, .3); }

/* --- PORTAFOLIO: color sólido; rueda a la izquierda, texto a la derecha --- */
/* clip y no hidden: un contenedor hidden igual se puede desplazar por código
   (al enfocar una pelotita, por ejemplo), y lo corría todo de lado. */
.adelanto {
  position: relative; overflow: hidden; overflow: clip; background: #000d1b;
  min-height: max(640px, 100vh); display: flex; align-items: center; padding: 96px 0;
}

/* Text reveal por líneas (JS en revelarLineas): cada línea vive en una
   máscara con overflow hidden y entra desde la izquierda hacia la derecha
   con un fade, escalonada.
   Un titular en metal se recorta como texto en el padre; al partirlo, el
   metal pasa a cada línea para que el movimiento se vea. */
.revelar .linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.revelar .linea__interior {
  display: block; transform: translateX(-100%); opacity: 0;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity 1.1s ease;
}
.revelar.revelar--visible .linea__interior { transform: none; opacity: 1; }
.titulo-seccion.revelar { background: none; -webkit-text-fill-color: initial; color: var(--tinta); }
.titulo-seccion.revelar .linea__interior {
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Texto a la derecha, como la referencia. */
/* La fila ocupa todo el ancho y va por encima de la rueda: deja pasar el
   mouse, y solo la columna del texto lo toma. Si no, tapaba el círculo del
   frente y solo respondían los de arriba y abajo. */
.adelanto__fila { position: relative; z-index: 1; display: flex; justify-content: flex-end; width: 100%; pointer-events: none; }
.adelanto__col { width: min(520px, 44%); pointer-events: auto; }
.adelanto__etiqueta {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--radio-pildora);
  font-size: 13px; font-weight: 600; color: var(--tinta-2);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .1);
}
.adelanto__etiqueta span { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 8px var(--acento); }
.adelanto__titulo { margin-top: 26px; font-size: clamp(36px, 4.4vw, 64px); }
.adelanto__texto { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--tinta-3); max-width: 44ch; }
.adelanto__texto [data-cuenta-total] { color: var(--tinta); font-weight: 600; }
.adelanto__accion { margin-top: 34px; display: flex; align-items: flex-start; }
.adelanto__boton {
  display: inline-flex; align-items: center; min-height: 64px; padding: 0 30px; border-radius: var(--radio-pildora);
  font-weight: 600; font-size: 16px; color: var(--fondo);
  background: linear-gradient(180deg, #B8FFF0 0%, var(--acento) 55%, #00D9AE 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(0, 255, 204, .35);
  transition: box-shadow .25s;
}
.adelanto__flecha {
  width: 46px; height: 46px; margin-left: -4px; border-radius: 50%; display: grid; place-items: center;
  color: var(--fondo); background: var(--acento); box-shadow: 0 0 14px rgba(0, 255, 204, .45);
  transition: transform .25s;
}
.adelanto__flecha svg { width: 18px; height: 18px; }
.adelanto__accion:hover .adelanto__boton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 30px rgba(0, 255, 204, .6); }
.adelanto__accion:hover .adelanto__flecha { transform: translate(3px, -3px); }

/* --- Rueda de filtros ----------------------------------------------------------
   Ocupa la mitad izquierda y sale del borde. Las posiciones las calcula el JS
   en cada cuadro: el círculo del frente (el más cercano al texto) queda nítido
   y encendido; los demás se desenfocan y se apagan según la distancia. */
.rueda-filtros { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; z-index: 0; }
.rueda-filtros__lista { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rueda-filtros__lista li {
  position: absolute; left: 0; top: 0; width: var(--d, 300px); height: var(--d, 300px);
  margin: calc(var(--d, 300px) / -2) 0 0 calc(var(--d, 300px) / -2);
  will-change: transform, filter, opacity;
}
/* El círculo: contorno fino de neón, sin relleno, como la referencia. */
.rueda-filtros__bola {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; text-align: center; padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 204, .22);
  transition: box-shadow .35s, background .35s;
}
.rueda-filtros__bola span {
  font-family: var(--fuente-display); font-weight: var(--peso-titular); letter-spacing: -.02em;
  font-size: clamp(22px, 2.4vw, 38px); line-height: 1.05; color: var(--tinta-3);
  transition: color .35s, text-shadow .35s;
}
/* El del frente: tubo de neón encendido y el nombre en metal aqua. */
.rueda-filtros__lista li.es-frente .rueda-filtros__bola {
  box-shadow: inset 0 0 0 1.5px rgba(0, 255, 204, .8), 0 0 22px rgba(0, 255, 204, .35), inset 0 0 22px rgba(0, 255, 204, .18);
}
.rueda-filtros__lista li.es-frente .rueda-filtros__bola span {
  background: var(--metal-aqua); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Solo el círculo del frente (el nítido) responde al mouse. Los de los
   costados se superponen con él: si respondieran, el que se encendía y se
   llevaba el clic era uno desenfocado. */
.rueda--viva .rueda-filtros__lista li:not(.es-frente) { pointer-events: none; }
/* Con el mouse encima: la rueda se detiene (JS) y ese círculo se enciende de lleno. */
.rueda-filtros__bola:hover, .rueda-filtros__bola:focus-visible {
  outline: none; background: radial-gradient(circle, rgba(0, 255, 204, .14), rgba(0, 255, 204, 0) 70%);
  box-shadow: inset 0 0 0 2px #CFFFF4, 0 0 32px rgba(0, 255, 204, .65), 0 0 80px rgba(0, 255, 204, .25), inset 0 0 26px rgba(0, 255, 204, .3);
}
.rueda-filtros__bola:hover span, .rueda-filtros__bola:focus-visible span {
  background: none; color: #E9FFFA; -webkit-text-fill-color: #E9FFFA; text-shadow: 0 0 14px rgba(0, 255, 204, .8);
}

/* Sin JavaScript (o con movimiento reducido antes de que cargue): una columna simple. */
.rueda-filtros:not(.rueda--viva) { position: static; width: auto; }
.rueda-filtros:not(.rueda--viva) .rueda-filtros__lista {
  position: static; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 auto; padding: 0 var(--margen-lateral); max-width: var(--ancho-max);
}
.rueda-filtros:not(.rueda--viva) .rueda-filtros__lista li { position: static; width: auto; height: auto; margin: 0; }
.rueda-filtros:not(.rueda--viva) .rueda-filtros__bola { border-radius: var(--radio-pildora); padding: 12px 22px; }
.rueda-filtros:not(.rueda--viva) .rueda-filtros__bola span { font-size: 16px; }
.adelanto:has(.rueda-filtros:not(.rueda--viva)) { flex-direction: column-reverse; gap: 40px; }

/* Entrada: la rueda llega de derecha a izquierda (el texto, al revés). */
.rueda-filtros.por-entrar { opacity: 0; transform: translateX(160px); }
.rueda-filtros.entro { opacity: 1; transform: none; transition: opacity 1.2s ease .15s, transform 1.4s cubic-bezier(.2, .8, .2, 1) .15s; }

/* Celular: la rueda arriba, el texto abajo. */
@media (max-width: 860px) {
  .adelanto { flex-direction: column; align-items: stretch; padding: 0 0 72px; }
  .rueda-filtros.rueda--viva { position: relative; width: 100%; height: 108vw; }
  .adelanto__col { width: 100%; }
  .rueda-filtros__bola span { font-size: clamp(14px, 4.2vw, 20px); }
}

/* --- MANIFIESTO: la losa SP a sangre, el texto en vidrio ------------------ */
.manifiesto { min-height: min(92vh, 860px); display: flex; align-items: center; }
/* La foto sola, sin velo de color. Se mueve con el scroll (JS en
   escenaManifiesto): va más lenta que la página y pasa de un leve
   acercamiento a su tamaño, como una cámara que se aleja. */
.manifiesto .escena__fondo { overflow: hidden; }
.manifiesto .escena__fondo img {
  object-position: 60% 50%;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--zoom, 1.12));
  will-change: transform;
}
/* El panel entra subiendo y enfocándose cuando aparece. */
.manifiesto__panel.por-entrar { opacity: 0; transform: translateY(48px) scale(.97); filter: blur(8px); }
.manifiesto__panel.entro {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1), filter 1s ease;
}
.manifiesto__panel { max-width: 560px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.manifiesto__titulo { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.manifiesto__cuerpo { font-size: 18px; line-height: 1.6; color: var(--tinta-3); }
.manifiesto__lema { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--suave); font-weight: 600; }

/* --- ROLES: la oficina en penumbra; tres vidrios iguales ------------------ */
.roles { padding: clamp(100px, 14vh, 150px) 0; }
.roles .escena__fondo img { object-position: 30% 50%; }
.roles .escena__velo {
  background:
    linear-gradient(180deg, #03061F 0%, rgba(3, 6, 31, .7) 30%, rgba(3, 6, 31, .55) 60%, #03061F 100%);
}
.roles__grilla { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.rol { display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 32px; transition: transform .3s, box-shadow .3s; }
.rol:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 255, 204, .45), 0 0 40px -10px rgba(0, 255, 204, .35), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.rol__titulo {
  font-size: 26px; line-height: 1.1;
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.rol__desc { font-size: 16px; line-height: 1.6; color: var(--tinta-3); }
.rol__pie { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.rol__cuenta { font-size: 14px; color: var(--suave); }

/* --- SERVICIOS: la oficina noir detrás de un panel grande de vidrio ------- */
.servicios { padding: clamp(100px, 14vh, 150px) 0; }
.servicios .escena__fondo img { object-position: 75% 50%; }
.servicios .escena__velo {
  background:
    linear-gradient(180deg, #03061F 0%, rgba(3, 6, 31, .45) 25%, rgba(3, 6, 31, .45) 75%, #03061F 100%);
}
.servicios__caja { overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 64px); }
/* Marca de agua: sobredimensionada y sangrando fuera de UNA caja por vista. */
.marca-agua {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(760px, 90%); aspect-ratio: 640 / 383; right: -12%; bottom: -26%;
  background: var(--fondo-claro); opacity: .05;
  -webkit-mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
          mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
}
.servicios__grilla { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.paquete {
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(3, 6, 31, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .1);
}
.paquete__nombre {
  font-size: 23px;
  background: var(--metal-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.paquete__detalle { font-size: 14px; color: var(--suave); }

/* --- CONTACTO ------------------------------------------------------------ */
.contacto { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 160px; text-align: center; }
.contacto__foto, .contacto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.contacto__foto img { object-fit: cover; object-position: center; }
.contacto__titulo { font-weight: var(--peso-display); font-size: clamp(56px, 11vw, 168px); line-height: .95; letter-spacing: -.045em; }
.contacto__bajada { margin: 26px auto 0; max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--tinta-3); }
.contacto__acciones { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- PIE ----------------------------------------------------------------- */
.pie { padding: 64px 0 36px; border-top: 1px solid var(--linea-fina); background: #03061F; }
.pie__lemas { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.pie__lema { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--acento); font-weight: 600; text-shadow: 0 0 10px rgba(0, 255, 204, .45); }
.pie__lema--tenue { color: var(--suave); }
/* El wordmark gigante del pie, en metal: cierra la página con el mismo material del titular. */
.pie__logo { display: block; margin: 48px auto 40px; height: auto; width: min(840px, 88%); background: var(--metal-texto); }
.pie__filete { margin-bottom: 26px; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--suave); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* --- Celular ------------------------------------------------------------- */
@media (max-width: 860px) {
}
@media (max-width: 640px) {
  /* La barra es fija: en tres filas se comía un cuarto de la pantalla. En
     celular queda marca + candado + "Hablemos"; las secciones siguen en el pie. */
  .nav__fila { flex-wrap: nowrap; }
  .nav__enlaces { gap: 8px; }
  .nav__enlaces .nav__enlace { display: none; }
  .nav__equipo { padding: 0; width: 42px; justify-content: center; }
  .nav__equipo-texto { display: none; }
  .nav__marca .logo { height: 24px; }
  .ficha__cuerpo { padding: 30px 22px 26px; }
  .ficha__visual { min-height: 180px; }
  .rol { padding: 26px; min-height: 0; }
  .contacto { padding: 110px 0 120px; }
}