/* =========================================================
   SOAR · Landing con intro parallax · versión WordPress (Blocksy + Gutenberg)
   Todo va dentro de #soar (bloque) y #soar-portal (menú, lo crea el JS),
   así el tema no pisa estos estilos y estos estilos no tocan el resto del sitio.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --soar-paper: #F4F6FA;          /* blanco frío de la intro */
  --soar-ink: #0D1530;            /* tinta azul noche */
  --soar-blue: #0A3D7E;           /* azul marino oficial: botones, menú, hero y ojo del robot. Se cambia SOLO aquí */
  --soar-blue-hover: #072C5C;     /* azul más oscuro al pasar el mouse sobre los botones azules */
  --soar-blue-deep: #072C5C;      /* texto azul sobre botones claros */
  --soar-on-blue: #F5F8FF;
  --soar-on-blue-muted: #D9E2FF;
  --soar-on-blue-line: rgb(245 248 255 / .38);

  --soar-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --soar-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --soar-ease-out: cubic-bezier(.23, 1, .32, 1);
  --soar-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --soar-ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --soar-gutter: clamp(16px, 4vw, 48px);
  --soar-nav-h: 72px;
  --soar-radius-pill: 999px;
  --soar-radius-panel: 22px;
  --soar-radius-tile: 24px;
  --soar-sheet-r: clamp(24px, 3vw, 40px);  /* esquina redondeada donde empieza la sección de categorías */
  --soar-slide-dur: 6s;                   /* tiempo de cada producto en el carrusel */

  --soar-logo-dock-w: clamp(128px, 17vw, 236px); /* tamaño del logo cuando baja */
  --soar-logo-dock-bottom: 7svh;                  /* altura del logo sobre el borde inferior */
  --soar-robot-ratio: 1.1667;                     /* alto / ancho del robot (JS lo calcula) */
  --soar-scroll-length: 260;                      /* largo de la intro en vh (JS lo toma de data-scroll-length) */
}

/* ---------- Página (solo donde se carga este CSS) ---------- */
html.soar-page {
  background: var(--soar-paper);
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--soar-blue) transparent;
}
body.soar-page { margin: 0; background: var(--soar-paper); }
html.soar-locked { overflow: hidden !important; }
/* Rendimiento: secciones cubiertas por la siguiente (no se ven) y animaciones fuera de pantalla */
:is(#soar, #soar-portal) .soar-covered { visibility: hidden; }
:is(#soar, #soar-portal) :is(.soar-covered, .soar-off-view, .soar-off),
:is(#soar, #soar-portal) :is(.soar-covered, .soar-off-view, .soar-off) *,
:is(#soar, #soar-portal) :is(.soar-covered, .soar-off-view, .soar-off) *::before,
:is(#soar, #soar-portal) :is(.soar-covered, .soar-off-view, .soar-off) *::after { animation-play-state: paused !important; }
/* Mientras carga y mientras se ve el robot no hay barra de scroll: aparece cuando el azul cubre la pantalla */
html:is(.soar-loading, .soar-pre-hero) { scrollbar-width: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Barra de administrador de WordPress (solo la ves con sesión iniciada) */
body.admin-bar.soar-page { --soar-top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar.soar-page { --soar-top: 0px; } }

/* ---------- Blocksy: quitar cabecera, pie, título y márgenes SOLO en esta página ----------
   Es un respaldo: igual conviene desactivarlos en las opciones de Blocksy de la página. */
body.soar-page #header,
body.soar-page .ct-header,
body.soar-page .hero-section,
body.soar-page .entry-header,
body.soar-page .ct-back-to-top { display: none !important; }
body.soar-page [data-vertical-spacing] { padding-top: 0 !important; padding-bottom: 0 !important; }
body.soar-page .entry-content { margin: 0 !important; padding: 0 !important; }

/* ---------- Contenedor del bloque: ocupa todo el ancho de la pantalla ---------- */
#soar {
  position: relative;
  display: block;
  width: var(--soar-vw, 100vw) !important;
  max-width: none !important;
  margin: 0 calc(50% - var(--soar-vw, 100vw) / 2) !important;
  padding: 0 !important;
}

/* ---------- Base aislada del tema ---------- */
:is(#soar, #soar-portal) {
  font-family: var(--soar-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  color: var(--soar-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:is(#soar, #soar-portal),
:is(#soar, #soar-portal) *,
:is(#soar, #soar-portal) *::before,
:is(#soar, #soar-portal) *::after { box-sizing: border-box; }
:is(#soar, #soar-portal) :is(h1, h2, h3, p, figure, ul) { margin: 0; padding: 0; }
:is(#soar, #soar-portal) :is(header, nav, section, figure, main, article, aside, footer) {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  box-shadow: none;
}
:is(#soar, #soar-portal) :is(h1, h2, h3) { color: inherit; text-transform: none; }
:is(#soar, #soar-portal) img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
:is(#soar, #soar-portal) img:is([src=""], :not([src])) { visibility: hidden; }  /* espacios de imagen aún vacíos */
:is(#soar, #soar-portal) a { color: inherit; text-decoration: none; box-shadow: none; }
:is(#soar, #soar-portal) button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: inherit;
  line-height: inherit;
}

:is(#soar, #soar-portal) ::selection { background: var(--soar-blue); color: var(--soar-on-blue); }
:is(#soar, #soar-portal) :is(.soar-after, .soar-hero, .soar-nav) ::selection { background: var(--soar-on-blue); color: var(--soar-blue-deep); }
:is(#soar, #soar-portal) :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }

/* ---------- Botones ---------- */
:is(#soar, #soar-portal) .soar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--soar-radius-pill);
  font-weight: 560;
  font-size: 1rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform 160ms var(--soar-ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
:is(#soar, #soar-portal) .soar-btn:active { transform: scale(.97); }
:is(#soar, #soar-portal) .soar-btn--sm { height: 42px; padding: 0 20px; font-size: .9375rem; }
:is(#soar, #soar-portal) .soar-btn--light { background: var(--soar-on-blue); color: var(--soar-blue-deep); box-shadow: 0 8px 24px -12px rgb(8 20 80 / .55); }
:is(#soar, #soar-portal) .soar-btn--ghost { color: var(--soar-on-blue); border-color: var(--soar-on-blue-line); }
:is(#soar, #soar-portal) .soar-btn--blue { background: var(--soar-blue); color: var(--soar-on-blue); }

@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-btn--light:hover { background: #fff; box-shadow: 0 12px 30px -12px rgb(8 20 80 / .6); }
  :is(#soar, #soar-portal) .soar-btn--ghost:hover { background: rgb(245 248 255 / .1); border-color: rgb(245 248 255 / .7); }
  :is(#soar, #soar-portal) .soar-btn--blue:hover { background: var(--soar-blue-hover); }
}

/* =========================================================
   INTRO
   ========================================================= */
:is(#soar, #soar-portal) .soar-intro {
  position: relative;
  /* + una pantalla extra: el hero se queda fijo mientras las categorías suben encima */
  height: calc(var(--soar-scroll-length) * 1vh + 100vh);
  background: #060D2C; /* se asoma solo cuando el hero se encoge bajo la hoja */
}

:is(#soar, #soar-portal) .soar-stage {
  transform-origin: 50% 0%;
  position: sticky;
  top: var(--soar-top, 0px);
  height: calc(100vh - var(--soar-top, 0px));
  overflow: hidden;
  background: var(--soar-paper);
  isolation: isolate;
}

/* Velo oscuro que cae sobre el hero mientras la hoja de categorías lo cubre */
:is(#soar, #soar-portal) .soar-stage-dim {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #060D2C;
  opacity: 0;
  pointer-events: none;
}

/* Fondo: luz suave que se mueve más lento que el robot (parallax) */
:is(#soar, #soar-portal) .soar-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90vmax 62vmax at 50% 46%, rgb(10 61 126 / .075), rgb(10 61 126 / 0) 70%),
    radial-gradient(120vmax 70vmax at 50% 115%, rgb(13 21 48 / .05), rgb(13 21 48 / 0) 60%);
  will-change: transform;
}
.soar-loading :is(#soar, #soar-portal) .soar-halo { opacity: 0; }

/* Efecto detrás del robot (cinta 3D / wave) */
:is(#soar, #soar-portal) .soar-wave {
  --soar-wave-width: 125vw;    /* tamaño de la cinta */
  --soar-wave-y: -6svh;        /* posición vertical: negativo = más arriba */
  --soar-wave-rotate: 0deg;    /* inclinación (0 = recta). Si la giras, sube --soar-wave-width para que no se vean los bordes */
  --soar-wave-blend: multiply; /* multiply: el fondo blanco de un JPG desaparece. Usa normal si tu PNG es transparente */
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: var(--soar-wave-blend);
  will-change: transform, opacity;
}
:is(#soar, #soar-portal) .soar-wave[hidden] { display: none; }
:is(#soar, #soar-portal) .soar-wave__inner { display: grid; transform: translate3d(0, var(--soar-wave-y), 0) rotate(var(--soar-wave-rotate)); }
:is(#soar, #soar-portal) .soar-wave__inner > * { grid-area: 1 / 1; }
:is(#soar, #soar-portal) .soar-wave__img {
  width: var(--soar-wave-width);
  max-width: none;
  height: auto;
  user-select: none;
  animation: soar-wave-drift 9s ease-in-out infinite;
  animation-delay: -3.6s;      /* así va en su punto más rápido justo cuando la cinta aparece */
  animation-play-state: paused;
}
/* Se mueve desde que aparece, no hasta que termina la entrada del logo y el robot */
html:not(.soar-loading) :is(#soar, #soar-portal) .soar-wave__img { animation-play-state: running; }
.soar-loading :is(#soar, #soar-portal) .soar-wave { visibility: hidden; }

@keyframes soar-wave-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-1.2vw, -6px, 0); }
}

/* Robot: el casco queda arriba y lo que sobra se corta por abajo */
:is(#soar, #soar-portal) .soar-robot {
  --soar-robot-size: 158svh;   /* tamaño del robot: más alto = más cerca */
  --soar-robot-top: 2svh;      /* posición vertical: más alto = robot más abajo */
  position: absolute;
  z-index: 1;
  left: -100vw;
  right: -100vw;
  top: var(--soar-robot-top);
  width: fit-content;
  margin-inline: auto;
  --soar-amp: 1;
  animation: soar-robot-breathe 5.2s ease-in-out infinite;
  animation-play-state: paused;
}
.soar-ready :is(#soar, #soar-portal) .soar-robot { animation-play-state: running; }

@keyframes soar-robot-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, calc(var(--soar-amp) * -7px), 0); }
}

:is(#soar, #soar-portal) .soar-robot__zoom {
  position: relative;
  transform-origin: 50% 30%;
  will-change: transform;
  backface-visibility: hidden;
}
:is(#soar, #soar-portal) .soar-robot__form { position: relative; will-change: transform, opacity; }
/* Copia desenfocada (solo durante la entrada): encima de la imagen nítida, se desvanece */
:is(#soar, #soar-portal) .soar-robot__form > .soar-blur-copy { position: absolute; inset: 0; z-index: 1; will-change: opacity; }
:is(#soar, #soar-portal) .soar-robot__form > .soar-robot__img { position: relative; will-change: opacity; }
:is(#soar, #soar-portal) .soar-wave__inner > .soar-blur-copy { z-index: 1; will-change: opacity; }

:is(#soar, #soar-portal) .soar-robot__img {
  height: var(--soar-robot-size);
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Logo */
:is(#soar, #soar-portal) .soar-logo-dock {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: var(--soar-logo-dock-w);
  bottom: calc((100vh - 100svh) + var(--soar-logo-dock-bottom));
  will-change: transform, opacity;
}
:is(#soar, #soar-portal) .soar-logo-flip { transform-origin: 50% 50%; }
:is(#soar, #soar-portal) .soar-logo-mark {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  /* Barrido suave de izquierda a derecha: JS anima --soar-wipe de 100% a 0% */
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
          mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: var(--soar-wipe, 0%) 0;
          mask-position: var(--soar-wipe, 0%) 0;
}
.soar-intro-done :is(#soar, #soar-portal) .soar-logo-mark { -webkit-mask-image: none; mask-image: none; }

/* Relleno azul con forma del ojo */
:is(#soar, #soar-portal) .soar-eye-fill {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--soar-blue);
  opacity: 0;
  clip-path: ellipse(0 0 at 50% 50%);
  pointer-events: none;
}

/* Mientras cargan las imágenes no mostramos nada */
.soar-loading :is(#soar, #soar-portal) .soar-robot, .soar-loading :is(#soar, #soar-portal) .soar-logo-dock { visibility: hidden; }

/* =========================================================
   HERO (sobre el azul)
   ========================================================= */
:is(#soar, #soar-portal) .soar-hero {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-items: center;
  padding: calc(var(--soar-nav-h) + 16px) var(--soar-gutter) calc(var(--soar-sheet-r) + clamp(12px, 3svh, 32px));
  color: var(--soar-on-blue);
  visibility: hidden;
  transition: visibility 0s linear .35s;
}
:is(#soar, #soar-portal) .soar-hero.is-revealed { visibility: visible; transition-delay: 0s; }

:is(#soar, #soar-portal) .soar-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

:is(#soar, #soar-portal) .soar-hero__title {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  color: inherit;
  text-transform: none;
  font-weight: 720;
  font-size: clamp(2.75rem, 5.3vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-hero__title .soar-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
:is(#soar, #soar-portal) .soar-hero__title .soar-line > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 260ms ease-in;
}
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-line > span {
  transform: translate3d(0, 0, 0);
  transition: transform 1000ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-line:nth-child(2) > span { transition-delay: 70ms; }

:is(#soar, #soar-portal) .soar-hero__sub {
  margin: 0 0 clamp(28px, 3.2vw, 40px);
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--soar-on-blue-muted);
  text-wrap: pretty;
}

:is(#soar, #soar-portal) .soar-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Fondo del hero: una capa por producto (color + foto opcional teñida) ---------- */
:is(#soar, #soar-portal) .soar-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 900ms ease;
}
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-hero__bg { opacity: 1; }
:is(#soar, #soar-portal) .soar-hero__bglayer {
  position: absolute;
  inset: 0;
  background-color: var(--soar-layer-c, var(--soar-blue));
  opacity: 0;
  transition: opacity 1000ms ease;
}
:is(#soar, #soar-portal) .soar-hero__bglayer.is-active { opacity: 1; }
:is(#soar, #soar-portal) .soar-hero__bglayer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .3;
}
:is(#soar, #soar-portal) .soar-hero__bglayer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 74% 46%, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 62%),
    linear-gradient(180deg, rgb(4 12 60 / 0) 55%, rgb(4 12 60 / .22));
}

/* ---------- Carrusel de productos ---------- */
:is(#soar, #soar-portal) .soar-show {
  --soar-slide-c: var(--soar-blue);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2vh, 22px);
}
:is(#soar, #soar-portal) .soar-show__stage {
  position: relative;
  width: 100%;
  height: min(56svh, 44vw);
  display: grid;
  place-items: center;
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
:is(#soar, #soar-portal) .soar-show__disc {
  position: absolute;
  height: 92%;
  max-width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--soar-slide-c) 80%, #fff);
  background-image:
    radial-gradient(circle at 30% 24%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 52%),
    radial-gradient(circle at 70% 88%, rgb(4 12 60 / .3), rgb(4 12 60 / 0) 58%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 50px 90px -50px rgb(4 12 60 / .7);
  transition: background-color 900ms ease;
}
:is(#soar, #soar-portal) .soar-show__item {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
:is(#soar, #soar-portal) .soar-show__word {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--soar-font-display);
  font-weight: 800;
  font-size: calc(132cqi / var(--soar-len, 5));
  line-height: .8;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: rgb(255 255 255 / .16);
  translate: -50% -58%;
  opacity: 0;
  transform: translate3d(8%, 0, 0);
  transition: opacity 260ms ease, transform 360ms ease;
}
:is(#soar, #soar-portal) .soar-show__img {
  position: relative;
  max-width: 78%;
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(16%, 2%, 0) rotate(6deg) scale(.9);
  filter: blur(8px) drop-shadow(0 34px 30px rgb(3 10 50 / .4));
  transition: opacity 260ms ease, transform 380ms ease, filter 260ms ease;
}
:is(#soar, #soar-portal) .soar-show__item[data-pos="before"] .soar-show__img { transform: translate3d(-16%, 2%, 0) rotate(-6deg) scale(.9); }
:is(#soar, #soar-portal) .soar-show__item[data-pos="before"] .soar-show__word { transform: translate3d(-8%, 0, 0); }
:is(#soar, #soar-portal) .soar-show__item[data-pos="active"] .soar-show__img {
  opacity: 1;
  transform: none;
  filter: blur(0) drop-shadow(0 34px 30px rgb(3 10 50 / .4));
  transition: opacity 600ms ease 120ms, transform 1000ms var(--soar-ease-out) 120ms, filter 600ms ease 120ms;
  animation: soar-float 6s ease-in-out infinite;
}
:is(#soar, #soar-portal) .soar-show__item[data-pos="active"] .soar-show__word {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease 60ms, transform 1100ms var(--soar-ease-out) 60ms;
}
:is(#soar, #soar-portal) .soar-show__item.is-snap .soar-show__img,
:is(#soar, #soar-portal) .soar-show__item.is-snap .soar-show__word { transition: none !important; }
/* Sin imagen todavía: la palabra grande hace de protagonista */
:is(#soar, #soar-portal) .soar-show__item.is-empty .soar-show__img { display: none; }
:is(#soar, #soar-portal) .soar-show__item.is-empty .soar-show__word { color: rgb(255 255 255 / .34); }

:is(#soar, #soar-portal) .soar-show__floor {
  position: absolute;
  bottom: 7%;
  width: 42%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(3 10 50 / .42), rgb(3 10 50 / 0));
  filter: blur(3px);
  animation: soar-floor 6s ease-in-out infinite;
}
@keyframes soar-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes soar-floor {
  0%, 100% { scale: 1; opacity: 1; }
  50%      { scale: .88; opacity: .75; }
}

/* Pestañas con barra de progreso (la barra marca el tiempo de cada producto) */
:is(#soar, #soar-portal) .soar-show__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(18px, 2.4vw, 32px); }
:is(#soar, #soar-portal) .soar-show__tab {
  position: relative;
  min-height: 44px;
  padding: 10px 0 12px;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--soar-on-blue-muted);
  cursor: pointer;
  transition: color 200ms ease;
}
:is(#soar, #soar-portal) .soar-show__tab[aria-selected="true"] { color: var(--soar-on-blue); font-weight: 600; }
:is(#soar, #soar-portal) .soar-show__tab::before,
:is(#soar, #soar-portal) .soar-show__bar {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
}
:is(#soar, #soar-portal) .soar-show__tab::before { background: rgb(245 248 255 / .22); }
:is(#soar, #soar-portal) .soar-show__bar { background: var(--soar-on-blue); transform: scaleX(0); transform-origin: left center; }
:is(#soar, #soar-portal) .soar-show__tab[aria-selected="true"] .soar-show__bar { animation: soar-progress var(--soar-slide-dur) linear forwards; }
:is(#soar, #soar-portal) .soar-show.is-paused .soar-show__bar { animation-play-state: paused !important; }
:is(#soar, #soar-portal) .soar-show.is-manual .soar-show__tab[aria-selected="true"] .soar-show__bar { animation: none; transform: scaleX(1); }
:is(#soar, #soar-portal) .soar-show__short { display: none; }
@keyframes soar-progress { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-show__tab:hover { color: var(--soar-on-blue); }
}

:is(#soar, #soar-portal) .soar-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition: opacity 220ms ease, transform 260ms ease-in, filter 220ms ease;
}
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-reveal {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 700ms var(--soar-ease-out), transform 1000ms var(--soar-ease-out), filter 700ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-hero__sub { transition-delay: 160ms; }
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-hero__ctas { transition-delay: 230ms; }
:is(#soar, #soar-portal) .soar-hero.is-revealed .soar-show { transition-delay: 90ms; }
:is(#soar, #soar-portal) .soar-show.soar-reveal { transform: translate3d(0, 28px, 0) scale(.97); }

/* =========================================================
   NAV
   ========================================================= */
:is(#soar, #soar-portal) .soar-nav {
  position: fixed;
  z-index: 10;
  top: var(--soar-top, 0px);
  left: 0;
  right: 0;
  height: var(--soar-nav-h);
  padding: 0 var(--soar-gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  color: var(--soar-on-blue);
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
  transition: transform 300ms ease-in, opacity 200ms ease, background-color 300ms ease;
}
:is(#soar, #soar-portal) .soar-nav.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: transform 700ms var(--soar-ease-out), opacity 400ms ease, background-color 300ms ease;
}
:is(#soar, #soar-portal) .soar-nav.is-solid {
  background: color-mix(in srgb, var(--soar-blue) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 rgb(245 248 255 / .12);
}
/* En celulares el desenfoque detrás del menú se recalcula en cada cuadro del scroll (muy pesado en gama baja):
   ahí el menú es casi sólido, sin desenfoque. Se ve prácticamente igual. */
@media (hover: none) and (pointer: coarse) {
  :is(#soar, #soar-portal) .soar-nav.is-solid {
    background: color-mix(in srgb, var(--soar-blue) 96%, transparent);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

:is(#soar, #soar-portal) .soar-nav__brand { display: block; flex: none; }
:is(#soar, #soar-portal) .soar-nav__brand img { height: 26px; width: auto; }
:is(#soar, #soar-portal) .soar-nav__brand img.is-inverted { filter: brightness(0) invert(1); opacity: .96; }

:is(#soar, #soar-portal) .soar-nav__links { display: flex; gap: clamp(20px, 2.6vw, 36px); margin-left: auto; }
:is(#soar, #soar-portal) .soar-nav__links a {
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--soar-on-blue-muted);
  transition: color 180ms ease;
}
:is(#soar, #soar-portal) .soar-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--soar-ease-out);
}
/* Sección en la que estás: se ve igual que con el cursor encima */
:is(#soar, #soar-portal) .soar-nav__links a[aria-current] { color: var(--soar-on-blue); }
:is(#soar, #soar-portal) .soar-nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-nav__links a:hover { color: var(--soar-on-blue); }
  :is(#soar, #soar-portal) .soar-nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}

:is(#soar, #soar-portal) .soar-nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--soar-radius-pill);
  background: rgb(245 248 255 / .12);
  position: relative;
  cursor: pointer;
  transition: transform 160ms var(--soar-ease-out), background-color 200ms ease;
}
:is(#soar, #soar-portal) .soar-nav__toggle:active { transform: scale(.95); }
:is(#soar, #soar-portal) .soar-nav__toggle span {
  position: absolute;
  left: 13px; right: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-nav__toggle span:first-child { transform: translateY(-4px); }
:is(#soar, #soar-portal) .soar-nav__toggle span:last-child { transform: translateY(4px); }
:is(#soar, #soar-portal) .soar-nav__toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
:is(#soar, #soar-portal) .soar-nav__toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

:is(#soar, #soar-portal) .soar-nav-sheet {
  position: fixed;
  z-index: 9;
  top: calc(var(--soar-top, 0px) + var(--soar-nav-h) + 4px);
  left: var(--soar-gutter);
  right: var(--soar-gutter);
  padding: 12px;
  display: grid;
  gap: 4px;
  border-radius: var(--soar-radius-panel);
  background: var(--soar-on-blue);
  color: var(--soar-ink);
  box-shadow: 0 24px 60px -24px rgb(6 18 82 / .55);
  transform-origin: top right;
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(.97);
  visibility: hidden;
  transition: opacity 160ms ease, transform 200ms var(--soar-ease-out), visibility 0s linear 200ms;
}
:is(#soar, #soar-portal) .soar-nav-sheet[data-open="true"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 200ms ease, transform 260ms var(--soar-ease-out), visibility 0s;
}
:is(#soar, #soar-portal) .soar-nav-sheet a:not(.soar-btn) {
  padding: 14px 14px;
  border-radius: 12px;
  font-family: var(--soar-font-display);
  font-size: 1.375rem;
  font-weight: 620;
  letter-spacing: -.02em;
}
:is(#soar, #soar-portal) .soar-nav-sheet a:not(.soar-btn):active { background: rgb(13 21 48 / .06); }
:is(#soar, #soar-portal) .soar-nav-sheet a[aria-current]:not(.soar-btn) { color: var(--soar-blue); background: rgb(10 61 126 / .07); }
:is(#soar, #soar-portal) .soar-nav-sheet .soar-btn { margin-top: 8px; }

/* =========================================================
   CATEGORÍAS (sube como una hoja sobre el hero)
   ========================================================= */
:is(#soar, #soar-portal) .soar-after {
  position: relative;
  z-index: 5;
  margin-top: -100vh; /* sube encima del hero fijo (stacked sections) */
  box-shadow: 0 -24px 60px -24px rgb(2 8 40 / .55);
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background: #060D2C; /* se asoma alrededor de las categorías cuando se encogen */
  color: var(--soar-ink);
}
:is(#soar, #soar-portal) .soar-cats {
  /* Stacked sections (2.º nivel): las categorías se quedan fijas cuando su borde
     inferior toca el fondo de la pantalla, y la hoja de marcas + reparación sube
     encima. --soar-cats-top lo calcula soar.js (alto de pantalla − alto de la sección). */
  position: sticky;
  top: var(--soar-cats-top, 0px);
  z-index: 1;
  transform-origin: 50% 100%;
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background: var(--soar-paper);
  padding: clamp(64px, 9vw, 120px) var(--soar-gutter) clamp(56px, 8vw, 104px);
}
/* Velo oscuro sobre las categorías mientras la hoja las cubre */
:is(#soar, #soar-portal) .soar-cats-dim {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  background: #060D2C;
  opacity: 0;
  pointer-events: none;
}
/* Marcas + reparación: se quedan fijas y productos destacados sube encima */
:is(#soar, #soar-portal) .soar-stack {
  position: sticky;
  top: var(--soar-stack-top, 0px);
  z-index: 1;
  transform-origin: 50% 100%;
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background: #060D2C;
}
:is(#soar, #soar-portal) .soar-stack + .soar-feat { box-shadow: 0 -24px 60px -24px rgb(2 8 40 / .55); }
/* Hoja que cubre las categorías: marcas + reparación se mueven como una sola pieza */
:is(#soar, #soar-portal) .soar-cover {
  position: relative;
  z-index: 2;
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background: #060D2C; /* se asoma alrededor de marcas + reparación cuando se encogen */
  box-shadow: 0 -24px 60px -24px rgb(2 8 40 / .6);
}
:is(#soar, #soar-portal) .soar-cats__inner { max-width: 1280px; margin-inline: auto; }
:is(#soar, #soar-portal) .soar-cats__head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 56px); }
:is(#soar, #soar-portal) .soar-cats__title {
  margin: 0 0 16px;
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  font-weight: 720;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--soar-ink);
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-cats__lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: #4A5578;
  text-wrap: pretty;
}

:is(#soar, #soar-portal) .soar-cats__grid {
  display: grid;
  gap: clamp(12px, 1.3vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(236px, 21vw, 290px), auto);
  grid-template-areas:
    "cctv       cctv       acceso   redes"
    "cctv       cctv       cableado computo"
    "energia    audio      audio    radio"
    "accesorios accesorios mas      mas";
}
:is(#soar, #soar-portal) .soar-cat--cctv       { grid-area: cctv; }
:is(#soar, #soar-portal) .soar-cat--acceso     { grid-area: acceso; }
:is(#soar, #soar-portal) .soar-cat--redes      { grid-area: redes; }
:is(#soar, #soar-portal) .soar-cat--cableado   { grid-area: cableado; }
:is(#soar, #soar-portal) .soar-cat--computo    { grid-area: computo; }
:is(#soar, #soar-portal) .soar-cat--energia    { grid-area: energia; }
:is(#soar, #soar-portal) .soar-cat--audio      { grid-area: audio; }
:is(#soar, #soar-portal) .soar-cat--radio      { grid-area: radio; }
:is(#soar, #soar-portal) .soar-cat--accesorios { grid-area: accesorios; }
:is(#soar, #soar-portal) .soar-cat--mas        { grid-area: mas; }

/* Tonos de las tarjetas (todos salen de la marca: azul, azul noche, celeste, blanco y el cian de los ojos) */
:is(#soar, #soar-portal) .soar-cat[data-tone="navy"]  { --t-bg: #0B1640; --t-fg: #F5F8FF; --t-muted: #B9C6F2; --t-word: rgb(120 150 255 / .14); --t-word-strong: rgb(120 150 255 / .26); --t-pill: #F5F8FF; --t-pill-fg: #072C5C; --t-pill-hover: #FFFFFF; }
:is(#soar, #soar-portal) .soar-cat[data-tone="blue"]  { --t-bg: var(--soar-blue); --t-fg: #F5F8FF; --t-muted: #E2E9FF; --t-word: rgb(255 255 255 / .12); --t-word-strong: rgb(255 255 255 / .24); --t-pill: #F5F8FF; --t-pill-fg: #072C5C; --t-pill-hover: #FFFFFF; }
:is(#soar, #soar-portal) .soar-cat[data-tone="sky"]   { --t-bg: #DCE5FF; --t-fg: var(--soar-ink); --t-muted: #3A4670; --t-word: rgb(10 61 126 / .1); --t-word-strong: rgb(10 61 126 / .2); --t-pill: var(--soar-blue); --t-pill-fg: #F5F8FF; --t-pill-hover: var(--soar-blue-hover); }
:is(#soar, #soar-portal) .soar-cat[data-tone="white"] { --t-bg: #FFFFFF; --t-fg: var(--soar-ink); --t-muted: #3A4670; --t-word: rgb(10 61 126 / .07); --t-word-strong: rgb(10 61 126 / .15); --t-pill: var(--soar-blue); --t-pill-fg: #F5F8FF; --t-pill-hover: var(--soar-blue-hover); }
:is(#soar, #soar-portal) .soar-cat[data-tone="cyan"]  { --t-bg: #4FE3F5; --t-fg: var(--soar-ink); --t-muted: #1F3560; --t-word: rgb(11 22 64 / .09); --t-word-strong: rgb(11 22 64 / .17); --t-pill: #0B1640; --t-pill-fg: #F5F8FF; --t-pill-hover: #072C5C; }

:is(#soar, #soar-portal) .soar-cat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 100%;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--soar-radius-tile);
  background-color: var(--t-bg);
  color: var(--t-fg);
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--soar-ease-out), box-shadow 300ms ease;
}
:is(#soar, #soar-portal) .soar-cat[data-tone="white"] { box-shadow: inset 0 0 0 1px rgb(13 21 48 / .07), 0 24px 48px -36px rgb(13 21 48 / .35); }
:is(#soar, #soar-portal) .soar-cat--cctv { background-image: radial-gradient(70% 70% at 78% 72%, rgb(35 80 245 / .55), rgb(35 80 245 / 0) 70%); }
:is(#soar, #soar-portal) .soar-cat--mas  { background-image: radial-gradient(60% 90% at 12% 0%, rgb(35 80 245 / .5), rgb(35 80 245 / 0) 70%); }
:is(#soar, #soar-portal) .soar-cat:active { transform: scale(.985); }
:is(#soar, #soar-portal) .soar-cat:focus-visible { outline: 3px solid var(--soar-blue); outline-offset: 3px; border-radius: var(--soar-radius-tile); }

:is(#soar, #soar-portal) .soar-cat__word {
  position: absolute;
  z-index: 0;
  right: -.04em;
  top: 54%;
  translate: 0 -50%;
  font-family: var(--soar-font-display);
  font-weight: 800;
  font-size: min(calc(128cqi / var(--soar-len, 5)), 10rem);
  line-height: .9;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--t-word);
  pointer-events: none;
  transition: transform 700ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-cat.is-empty .soar-cat__word { color: var(--t-word-strong); }
:is(#soar, #soar-portal) .soar-cat--mas .soar-cat__word { top: auto; bottom: -.12em; translate: none; font-size: min(calc(100cqi / var(--soar-len, 5)), 8rem); }

:is(#soar, #soar-portal) .soar-cat__img {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: 7%;
  width: 50%;
  height: 60%;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 22px 22px rgb(4 12 60 / .28));
  transition: transform 600ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-cat--cctv .soar-cat__img { width: 58%; height: 70%; }
:is(#soar, #soar-portal) .soar-cat.is-empty .soar-cat__img { display: none; }

:is(#soar, #soar-portal) .soar-cat__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
:is(#soar, #soar-portal) .soar-cat__title {
  margin: 0;
  max-width: 13ch;
  font-family: var(--soar-font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.75vw, 1.7rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: inherit;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
:is(#soar, #soar-portal) .soar-cat--cctv .soar-cat__title { font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 11ch; }
:is(#soar, #soar-portal) .soar-cat--mas .soar-cat__title { max-width: 16ch; }
:is(#soar, #soar-portal) .soar-cat__desc {
  max-width: 24ch;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--t-muted);
  text-wrap: pretty;
}
:is(#soar, #soar-portal) .soar-cat--cctv .soar-cat__desc { font-size: 1.0625rem; max-width: 26ch; }
:is(#soar, #soar-portal) .soar-cat--mas .soar-cat__desc { max-width: 34ch; }
:is(#soar, #soar-portal) .soar-cat__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--soar-radius-pill);
  background-color: var(--t-pill);
  color: var(--t-pill-fg);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 200ms ease, transform 200ms var(--soar-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-cat:hover .soar-cat__img { transform: translate3d(0, -8px, 0) rotate(-2deg) scale(1.04); }
  :is(#soar, #soar-portal) .soar-cat:hover .soar-cat__word { transform: translate3d(-3%, 0, 0); }
  :is(#soar, #soar-portal) .soar-cat:hover .soar-cat__cta { background-color: var(--t-pill-hover); }
  :is(#soar, #soar-portal) .soar-cat[data-tone="white"]:hover { box-shadow: inset 0 0 0 1px rgb(13 21 48 / .07), 0 30px 60px -34px rgb(13 21 48 / .45); }
}

/* Aparición escalonada al llegar a la sección (solo si hay JS) */
:is(#soar, #soar-portal) .soar-cats__grid.is-armed .soar-cat { opacity: 0; transform: translate3d(0, 28px, 0); }
:is(#soar, #soar-portal) .soar-cats__grid.is-armed .soar-cat.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease calc(var(--i, 0) * 55ms), transform 900ms var(--soar-ease-out) calc(var(--i, 0) * 55ms);
}

/* =========================================================
   MARCAS (carrusel en abanico / coverflow)
   ========================================================= */
:is(#soar, #soar-portal) .soar-brands {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background-color: #060D2C;
  background-image:
    radial-gradient(55% 50% at 50% 38%, rgb(35 80 245 / .42), rgb(35 80 245 / 0) 72%),
    radial-gradient(80% 60% at 50% 120%, rgb(16 216 240 / .1), rgb(16 216 240 / 0) 60%);
  color: var(--soar-on-blue);
  padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 120px);
}
:is(#soar, #soar-portal) .soar-brands ::selection { background: var(--soar-on-blue); color: var(--soar-blue-deep); }

/* Nombre gigante de la marca activa, detrás de todo */
:is(#soar, #soar-portal) .soar-brands__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  container-type: inline-size;
}
:is(#soar, #soar-portal) .soar-brands__ghost span {
  grid-area: 1 / 1;
  margin-top: -14%;
  font-family: var(--soar-font-display);
  font-weight: 800;
  font-size: min(calc(150cqi / var(--soar-len, 6)), 17rem);
  line-height: .8;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: rgb(140 165 255 / .08);
  opacity: 0;
  transform: translate3d(0, 4%, 0) scale(.98);
  transition: opacity 500ms ease, transform 900ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-brands__ghost span.is-active { opacity: 1; transform: none; }

:is(#soar, #soar-portal) .soar-brands__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 52px);
}

:is(#soar, #soar-portal) .soar-brands__stage {
  --card: clamp(160px, 20vw, 280px);
  position: relative;
  width: 100%;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
:is(#soar, #soar-portal) .soar-brands__stage:focus-visible { outline: 2px solid var(--soar-on-blue-muted); outline-offset: 6px; border-radius: 28px; }

/* Sin JS: los logos se ven en una cuadrícula simple */
:is(#soar, #soar-portal) .soar-brands__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--soar-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
:is(#soar, #soar-portal) .soar-brand {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 26px;
  background: #FFFFFF;
  box-shadow: 0 34px 60px -30px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(13 21 48 / .06);
}
:is(#soar, #soar-portal) .soar-brand img {
  position: absolute;
  inset: 16%;
  width: 68%;
  height: 68%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Con JS: abanico */
:is(#soar, #soar-portal) .soar-brands__stage.is-ready { height: calc(var(--card) * 1.32); }
:is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brands__list { display: block; position: absolute; inset: 0; padding: 0; }
:is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brand {
  position: absolute;
  top: 42%;
  left: 50%;
  width: var(--card);
  height: var(--card);
  margin: calc(var(--card) / -2) 0 0 calc(var(--card) / -2);
  z-index: var(--z, 1);
  opacity: var(--op, 0);
  filter: brightness(var(--br, 1));
  transform: var(--tf);
  cursor: pointer;
  transition:
    transform 760ms var(--soar-ease-out),
    opacity 480ms ease,
    filter 480ms ease;
}
:is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brand.is-active { cursor: pointer; }
:is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brand.is-snap { transition: none; }
/* Entrada: las tarjetas salen del centro en abanico la primera vez que se ve la sección */
:is(#soar, #soar-portal) .soar-brands__stage.is-gathered .soar-brand { transform: translate3d(0, 8%, 0) scale(.9); opacity: 0; }
:is(#soar, #soar-portal) .soar-brands__stage.is-gathered .soar-brand.is-active { opacity: 1; }
:is(#soar, #soar-portal) .soar-brands__stage.is-ready:not(.is-gathered) .soar-brand { transition-delay: calc(var(--d, 0) * 70ms); }
:is(#soar, #soar-portal) .soar-brands__stage.is-ready.is-moved .soar-brand { transition-delay: 0ms; }

:is(#soar, #soar-portal) .soar-brands__copy {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 2.6vw, 28px);
  padding: 0 var(--soar-gutter);
  text-align: center;
}
:is(#soar, #soar-portal) .soar-brands__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  font-weight: 520;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--soar-on-blue);
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-brands__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 6px 0 24px;
  border-radius: var(--soar-radius-pill);
  background: var(--soar-on-blue);
  color: var(--soar-ink);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / .7);
  transition: transform 160ms var(--soar-ease-out), background-color 200ms ease;
}
:is(#soar, #soar-portal) .soar-brands__cta:active { transform: scale(.97); }
:is(#soar, #soar-portal) .soar-brands__cta-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--soar-blue);
  color: #FFFFFF;
  transition: transform 300ms var(--soar-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-brands__cta:hover { background: #FFFFFF; }
  :is(#soar, #soar-portal) .soar-brands__cta:hover .soar-brands__cta-icon { transform: translate3d(3px, 0, 0); }
  :is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brand:not(.is-active):hover { filter: brightness(calc(var(--br, 1) + .12)); }
}

/* Botones anterior / siguiente: solo con mouse o trackpad */
:is(#soar, #soar-portal) .soar-brands__nav {
  position: absolute;
  top: 42%;
  z-index: 30;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: var(--soar-on-blue);
  background: rgb(245 248 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(245 248 255 / .2), 0 12px 30px -14px rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-brands__nav--prev { left: max(var(--soar-gutter), calc(50% - min(640px, 46vw))); }
:is(#soar, #soar-portal) .soar-brands__nav--next { right: max(var(--soar-gutter), calc(50% - min(640px, 46vw))); }
:is(#soar, #soar-portal) .soar-brands__nav:active { transform: scale(.94); }
:is(#soar, #soar-portal) .soar-brands__nav:focus-visible { outline: 2px solid var(--soar-on-blue); outline-offset: 3px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-brands__stage.is-ready .soar-brands__nav { display: grid; }
  :is(#soar, #soar-portal) .soar-brands__nav:hover { background: rgb(245 248 255 / .16); box-shadow: inset 0 0 0 1px rgb(245 248 255 / .36), 0 12px 30px -14px rgb(0 0 0 / .6); }
  :is(#soar, #soar-portal) .soar-brands__nav--prev:hover svg { transform: translate3d(-2px, 0, 0); }
  :is(#soar, #soar-portal) .soar-brands__nav--next:hover svg { transform: translate3d(2px, 0, 0); }
}
:is(#soar, #soar-portal) .soar-brands__nav svg { transition: transform 240ms var(--soar-ease-out); }

@media (max-width: 767px) {
  :is(#soar, #soar-portal) .soar-brands__stage { --card: clamp(150px, 50vw, 220px); }
  :is(#soar, #soar-portal) .soar-brand { border-radius: 22px; }
}

/* =========================================================
   CONSULTA TU REPARACIÓN
   ========================================================= */
:is(#soar, #soar-portal) .soar-brands { z-index: 1; }
:is(#soar, #soar-portal) .soar-repair {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--soar-sheet-r));
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background-color: var(--soar-blue);
  background-image:
    radial-gradient(42% 70% at 74% 42%, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, rgb(4 12 60 / 0) 45%, rgb(4 12 60 / .32));
  color: var(--soar-on-blue);
}
:is(#soar, #soar-portal) .soar-repair ::selection { background: var(--soar-on-blue); color: var(--soar-blue-deep); }
:is(#soar, #soar-portal) .soar-repair__inner {
  max-width: 1280px;
  min-height: clamp(560px, 46vw, 680px);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 120px) var(--soar-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}
:is(#soar, #soar-portal) .soar-repair__copy { align-self: center; max-width: 34rem; padding-bottom: clamp(56px, 8vw, 112px); }
:is(#soar, #soar-portal) .soar-repair__title {
  margin: 0 0 16px;
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  font-weight: 720;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--soar-on-blue);
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-repair__lead {
  margin: 0 0 clamp(28px, 3vw, 36px);
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--soar-on-blue-muted);
  text-wrap: pretty;
}

/* Formulario de folio */
:is(#soar, #soar-portal) .soar-repair__form { max-width: 30rem; }
:is(#soar, #soar-portal) .soar-repair__label { display: block; margin-bottom: 8px; font-size: .875rem; font-weight: 600; color: var(--soar-on-blue); }
:is(#soar, #soar-portal) .soar-repair__row {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--soar-radius-pill);
  background: rgb(255 255 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
:is(#soar, #soar-portal) .soar-repair__row:focus-within { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 2px var(--soar-on-blue); }
:is(#soar, #soar-portal) .soar-repair__form.is-error .soar-repair__row { box-shadow: inset 0 0 0 2px #FFB4C0; }
:is(#soar, #soar-portal) .soar-repair__input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  caret-color: #FFFFFF;
}
:is(#soar, #soar-portal) .soar-repair__input::placeholder { color: #F0F4FF; opacity: 1; font-weight: 500; letter-spacing: normal; text-transform: none; }
:is(#soar, #soar-portal) .soar-repair__btn {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--soar-radius-pill);
  background: var(--soar-on-blue);
  color: var(--soar-blue-deep);
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms var(--soar-ease-out), background-color 200ms ease;
}
:is(#soar, #soar-portal) .soar-repair__btn:active { transform: scale(.97); }
:is(#soar, #soar-portal) .soar-repair__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: var(--soar-radius-pill); }
@media (hover: hover) and (pointer: fine) { :is(#soar, #soar-portal) .soar-repair__btn:hover { background: #FFFFFF; } }
:is(#soar, #soar-portal) .soar-repair__help { margin: 10px 0 0 18px; font-size: .875rem; color: var(--soar-on-blue-muted); }
:is(#soar, #soar-portal) .soar-repair__error { min-height: 1.4em; margin: 6px 0 0 18px; font-size: .875rem; font-weight: 600; color: #FFD6DC; }

/* Celular y tarjeta de seguimiento */
/* El celular va completo y el borde inferior de la sección lo corta a propósito
   (como en el diseño original). La altura de la sección la marca el texto,
   no el celular.
   --soar-phone-w     ancho del celular (más grande = se ve más y se corta más abajo)
   --soar-phone-top   qué tan arriba empieza (negativo = sube por encima del título)
   --soar-phone-x     distancia del celular al borde derecho de su columna.
                      Más chico (o negativo) = celular y tarjeta se van a la derecha.
   --soar-track-tuck  qué tanto se mete la tarjeta sobre el celular (0.68 = 32% encima).
   --soar-phone-pad   margen transparente que trae la imagen a cada lado (0.24 = 24%).
                      Así --soar-phone-w es el ancho del celular que se VE, aunque el PNG
                      tenga aire a los lados. Este valor va en el bloque (style del visual).
                      Más grande = la tarjeta se aleja del celular hacia la izquierda.
   La tarjeta nunca sale de su columna, así que no puede tapar el formulario. */
:is(#soar, #soar-portal) .soar-repair__visual {
  --soar-phone-w: clamp(330px, 34vw, 500px);
  --soar-phone-top: clamp(-48px, -3vw, -16px);
  --soar-phone-x: clamp(-60px, -3vw, 0px);
  --soar-track-tuck: .68;
  --soar-phone-pad: 0;
  --soar-track-w: clamp(240px, 19vw, 280px);
  position: relative;
  align-self: stretch;
}
:is(#soar, #soar-portal) .soar-repair__phone {
  position: absolute;
  top: var(--soar-phone-top);
  /* se compensa el aire transparente del PNG para que el celular quede donde debe */
  right: calc(var(--soar-phone-x) - var(--soar-phone-w) * var(--soar-phone-pad) / (1 - 2 * var(--soar-phone-pad)));
  display: block;
  width: calc(var(--soar-phone-w) / (1 - 2 * var(--soar-phone-pad)));
  max-width: none;
  height: auto;
  filter: drop-shadow(0 30px 50px rgb(3 10 50 / .4));
}
/* La tarjeta de ejemplo se asoma por la orilla izquierda del celular, sin tapar la
   línea donde se divide la pantalla rota de la nueva */
:is(#soar, #soar-portal) .soar-track {
  position: absolute;
  z-index: 2;
  right: min(calc(var(--soar-phone-w) * var(--soar-track-tuck) + var(--soar-phone-x)), calc(100% - var(--soar-track-w)));
  bottom: clamp(32px, 5vw, 64px);
  width: var(--soar-track-w);
  padding: 18px 20px 14px;
  border-radius: 20px;
  background: rgb(255 255 255 / .95);
  color: var(--soar-ink);
  box-shadow: 0 34px 64px -26px rgb(4 12 60 / .6), inset 0 0 0 1px rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
:is(#soar, #soar-portal) .soar-track__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
:is(#soar, #soar-portal) .soar-track__label { display: block; font-size: .75rem; font-weight: 600; color: #5A6587; }
:is(#soar, #soar-portal) .soar-track__folio { display: block; font-family: var(--soar-font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#soar, #soar-portal) .soar-track__tag { padding: 4px 10px; border-radius: var(--soar-radius-pill); background: #DCE5FF; color: #072C5C; font-size: .75rem; font-weight: 600; }
:is(#soar, #soar-portal) .soar-track__device { margin: 2px 0 12px; font-size: .875rem; color: #3A4670; }
:is(#soar, #soar-portal) .soar-track__steps { list-style: none; margin: 0; padding: 0; }
:is(#soar, #soar-portal) .soar-track__step {
  --soar-dot: 14px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: .9375rem;
  color: var(--soar-ink);
}
:is(#soar, #soar-portal) .soar-track__step:not(:last-child)::before,
:is(#soar, #soar-portal) .soar-track__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--soar-dot) / 2 - 1px);
  top: calc(50% + var(--soar-dot) / 2 + 2px);
  height: calc(100% - var(--soar-dot) - 4px);
  width: 2px;
  border-radius: 2px;
}
:is(#soar, #soar-portal) .soar-track__step:not(:last-child)::before { background: #DCE3F3; }
:is(#soar, #soar-portal) .soar-track__step:not(:last-child)::after { background: var(--soar-blue); transform: scaleY(0); transform-origin: top; }
:is(#soar, #soar-portal) .soar-track__step[data-state="done"]::after { transform: scaleY(1); }
:is(#soar, #soar-portal) .soar-track__dot {
  position: relative;
  flex: none;
  width: var(--soar-dot);
  height: var(--soar-dot);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #C3CDE8;
}
:is(#soar, #soar-portal) .soar-track__step[data-state="done"] .soar-track__dot { background: var(--soar-blue); box-shadow: none; }
:is(#soar, #soar-portal) .soar-track__step[data-state="current"] { font-weight: 600; color: #072C5C; }
:is(#soar, #soar-portal) .soar-track__step[data-state="current"] .soar-track__dot { background: #FFFFFF; box-shadow: inset 0 0 0 4px var(--soar-blue); }
:is(#soar, #soar-portal) .soar-track__step[data-state="current"] .soar-track__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--soar-blue);
  opacity: 0;
  animation: soar-ping 2s var(--soar-ease-out) infinite;
}
:is(#soar, #soar-portal) .soar-track__step[data-state="next"] { color: #5A6587; }
@keyframes soar-ping {
  0%   { opacity: .6; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Entrada: la tarjeta aparece y el avance se llena paso a paso (solo con JS) */
:is(#soar, #soar-portal) .soar-track.is-armed { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 600ms ease, transform 900ms var(--soar-ease-out); }
:is(#soar, #soar-portal) .soar-track.is-armed .soar-track__dot { transition: background-color 300ms ease, box-shadow 300ms ease; }
:is(#soar, #soar-portal) .soar-track.is-armed .soar-track__step::after { transition: transform 420ms var(--soar-ease-in-out); }
:is(#soar, #soar-portal) .soar-track.is-armed:not(.is-in) .soar-track__step .soar-track__dot { background: #FFFFFF; box-shadow: inset 0 0 0 2px #C3CDE8; }
:is(#soar, #soar-portal) .soar-track.is-armed:not(.is-in) .soar-track__step::after { transform: scaleY(0); }
:is(#soar, #soar-portal) .soar-track.is-armed:not(.is-in) .soar-track__dot::after { animation: none; }
:is(#soar, #soar-portal) .soar-track.is-in { opacity: 1; transform: none; }
:is(#soar, #soar-portal) .soar-track.is-in .soar-track__step:nth-child(1) .soar-track__dot { transition-delay: 350ms; }
:is(#soar, #soar-portal) .soar-track.is-in .soar-track__step:nth-child(1)::after         { transition-delay: 500ms; }
:is(#soar, #soar-portal) .soar-track.is-in .soar-track__step:nth-child(2) .soar-track__dot { transition-delay: 850ms; }
:is(#soar, #soar-portal) .soar-track.is-in .soar-track__step:nth-child(2)::after         { transition-delay: 1000ms; }
:is(#soar, #soar-portal) .soar-track.is-in .soar-track__step:nth-child(3) .soar-track__dot { transition-delay: 1350ms; }

@media (min-width: 861px) and (max-width: 1180px) {
  /* Pantallas medianas: la tarjeta se recorre hacia el celular para no tocar el formulario */
  :is(#soar, #soar-portal) .soar-repair__visual { --soar-phone-x: 0px; --soar-track-tuck: .66; --soar-track-w: 240px; }
}
@media (max-width: 860px) {
  :is(#soar, #soar-portal) .soar-repair__inner { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; }
  :is(#soar, #soar-portal) .soar-repair__copy { padding-bottom: 24px; }
  :is(#soar, #soar-portal) .soar-repair__visual { --soar-phone-w: clamp(240px, 66vw, 380px); --soar-phone-x: 0px; --soar-phone-top: 8px; min-height: clamp(400px, 112vw, 540px); }
  :is(#soar, #soar-portal) .soar-track { right: auto; left: 0; bottom: 24px; width: min(224px, 60%); padding: 14px 14px 10px; }
  :is(#soar, #soar-portal) .soar-track__folio { font-size: 1.125rem; }
  :is(#soar, #soar-portal) .soar-track__tag { padding: 3px 8px; font-size: .6875rem; }
}
@media (max-width: 420px) {
  :is(#soar, #soar-portal) .soar-repair__btn { padding: 0 18px; }
  :is(#soar, #soar-portal) .soar-repair__input { padding-left: 14px; }
}

/* =========================================================
   PRODUCTOS DESTACADOS (dos opciones: A vitrina · B tarjetas)
   La mano del robot proyecta un holograma del producto.
   ========================================================= */
:is(#soar, #soar-portal) .soar-feat {
  --soar-holo: 96 224 255;                 /* color de la luz del holograma (R G B) */
  --soar-feat-dur: 6s;                     /* tiempo de cada producto (opción A) */
  --soar-feat-bleed: calc(max(0px, (var(--soar-vw, 100vw) - 1280px) / 2) + var(--soar-gutter));
  /* se queda fija y la sección de venta de saldo sube encima */
  position: sticky;
  top: var(--soar-feat-top, 0px);
  transform-origin: 50% 100%;
  z-index: 3;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(-1 * var(--soar-sheet-r));
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background-color: #060D2C;
  background-image:
    radial-gradient(42% 52% at 18% 58%, rgb(var(--soar-holo) / .12), rgb(var(--soar-holo) / 0) 70%),
    radial-gradient(60% 50% at 80% 0%, rgb(35 80 245 / .22), rgb(35 80 245 / 0) 70%);
  color: var(--soar-on-blue);
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 104px);
}
:is(#soar, #soar-portal) .soar-feat ::selection { background: var(--soar-on-blue); color: var(--soar-blue-deep); }
:is(#soar, #soar-portal) .soar-feat__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--soar-gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "holo head"
    "holo main"
    "deal deal";
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(24px, 4vw, 64px);
}
:is(#soar, #soar-portal) .soar-feat__head { grid-area: head; max-width: 40rem; margin-bottom: clamp(28px, 3.5vw, 48px); }
:is(#soar, #soar-portal) .soar-feat__title {
  margin: 0 0 14px;
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  font-weight: 720;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--soar-on-blue);
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-feat__lead { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: rgb(217 226 255 / .8); text-wrap: pretty; }

/* ---------- Holograma ---------- */
:is(#soar, #soar-portal) .soar-holo {
  --palm-x: .62;
  --palm-y: .56;
  --holo-size: 2.2;    /* alto del holograma: fracción del espacio libre arriba de la palma (1 = hasta el borde de la imagen) */
  --holo-w: 40%;       /* tamaño del brillo y los anillos de la palma */
  --hand-drop: clamp(16px, 4vw, 56px);   /* cuánto baja la mano (y su holograma) */
  grid-area: holo;
  align-self: end;
  position: relative;
  /* la mano sale desde la orilla izquierda de la pantalla */
  margin-left: calc(-1 * var(--soar-feat-bleed));
  width: calc(100% + var(--soar-feat-bleed));
  max-width: 820px;
  translate: 0 var(--hand-drop);
}
:is(#soar, #soar-portal) .soar-holo__hand {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* Sin mano: un proyector redondo ocupa su lugar */
:is(#soar, #soar-portal) .soar-holo.is-empty { --palm-x: .5; --palm-y: .84; --hand-drop: 0px; margin-left: 0; width: 100%; aspect-ratio: 1 / 1.02; }
:is(#soar, #soar-portal) .soar-holo.is-empty .soar-holo__hand { display: none; }
:is(#soar, #soar-portal) .soar-holo.is-empty::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--palm-x) * 100%);
  top: calc(var(--palm-y) * 100%);
  width: 36%;
  aspect-ratio: 3.4 / 1;
  translate: -50% -38%;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 40%, rgb(var(--soar-holo) / .35), rgb(var(--soar-holo) / 0) 70%),
    linear-gradient(180deg, #2A3558 0%, #121A3A 55%, #070C22 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .18), 0 24px 40px -12px rgb(0 0 0 / .7);
}
:is(#soar, #soar-portal) .soar-holo__aura {
  position: absolute;
  z-index: 0;
  left: calc(var(--palm-x) * 100%);
  bottom: calc((1 - var(--palm-y)) * 100%);
  width: calc(var(--holo-w) * 1.5);
  aspect-ratio: 1;
  translate: -50% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--soar-holo) / .2), rgb(var(--soar-holo) / .06) 55%, rgb(var(--soar-holo) / 0));
  pointer-events: none;
}
:is(#soar, #soar-portal) .soar-holo__proj {
  position: absolute;
  z-index: 2;
  left: calc(var(--palm-x) * 100%);
  bottom: calc((1 - var(--palm-y)) * 100%);
  /* el holograma nunca pasa del borde de arriba de la imagen de la mano */
  height: calc(var(--palm-y) * 100% * var(--holo-size));
  aspect-ratio: 4 / 5;
  max-width: 80%;
  translate: -50% 0;
  pointer-events: none;
}
/* Cono de luz que sale de la palma */
:is(#soar, #soar-portal) .soar-holo__beam {
  position: absolute;
  inset: 0;
  clip-path: polygon(45% 100%, 55% 100%, 98% 14%, 2% 14%);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, rgb(255 255 255 / 0) 1px 9px),
    linear-gradient(to top, rgb(var(--soar-holo) / .5), rgb(var(--soar-holo) / .16) 45%, rgb(var(--soar-holo) / 0) 86%);
  mix-blend-mode: screen;
  filter: blur(1.5px);
  opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
:is(#soar, #soar-portal) .soar-holo__float {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 0;
  height: 80%;
  perspective: 900px;
}
:is(#soar, #soar-portal) .soar-holo__spin { position: absolute; inset: 0; transform-style: preserve-3d; }
:is(#soar, #soar-portal) .soar-holo__layer {
  --src: none;
  position: absolute;
  inset: 0;
  background: var(--src) center 70% / contain no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 280ms ease;
}
/* El producto se pinta en azul holograma */
:is(#soar, #soar-portal) .soar-holo__layer.is-tint {
  filter: grayscale(1) contrast(1.05) brightness(1.55) sepia(1) hue-rotate(152deg) saturate(2.6) drop-shadow(0 0 10px rgb(var(--soar-holo) / .65));
}
/* Holograma propio (imagen con fondo negro): se respeta su color */
:is(#soar, #soar-portal) .soar-holo__layer.is-native { filter: brightness(1.08) drop-shadow(0 0 12px rgb(var(--soar-holo) / .45)); }
:is(#soar, #soar-portal) .soar-holo__layer.is-on { opacity: .9; }
/* Líneas de escaneo, recortadas con la forma del producto */
:is(#soar, #soar-portal) .soar-holo__layer::before,
:is(#soar, #soar-portal) .soar-holo__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--src) center 70% / contain no-repeat;
          mask: var(--src) center 70% / contain no-repeat;
}
:is(#soar, #soar-portal) .soar-holo__layer::before {
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .34) 0 1px, rgb(255 255 255 / 0) 1px 4px);
  background-size: 100% 4px;
}
/* Franja de interferencia (glitch) */
:is(#soar, #soar-portal) .soar-holo__layer::after {
  background: rgb(var(--soar-holo) / .9);
  opacity: 0;
  clip-path: inset(40% 0 52% 0);
}
/* Línea que "dibuja" el holograma al cambiar de producto */
:is(#soar, #soar-portal) .soar-holo__scan {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: rgb(220 250 255);
  box-shadow: 0 0 12px 2px rgb(var(--soar-holo) / .9), 0 0 32px 6px rgb(var(--soar-holo) / .35);
  opacity: 0;
}
:is(#soar, #soar-portal) .soar-holo__dust { position: absolute; inset: 0; }
:is(#soar, #soar-portal) .soar-holo__dust i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(210 248 255);
  box-shadow: 0 0 6px rgb(var(--soar-holo));
  opacity: 0;
}
:is(#soar, #soar-portal) .soar-holo__emitter {
  position: absolute;
  z-index: 3;
  left: calc(var(--palm-x) * 100%);
  top: calc(var(--palm-y) * 100%);
  width: calc(var(--holo-w) * .42);
  aspect-ratio: 3 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(240 253 255 / .95), rgb(var(--soar-holo) / .75) 30%, rgb(var(--soar-holo) / 0));
  mix-blend-mode: screen;
  pointer-events: none;
}
:is(#soar, #soar-portal) .soar-holo__emitter span {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--soar-holo) / .8);
  opacity: 0;
}

/* Movimiento del holograma (solo mientras la sección está en pantalla) */
@media (prefers-reduced-motion: no-preference) {
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__float { animation: soar-holo-float 6s ease-in-out infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__spin { animation: soar-holo-turn 11s ease-in-out infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__layer.is-on { animation: soar-holo-flicker 7.3s steps(1, end) infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__layer::before { animation: soar-holo-lines 1.4s linear infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__layer.is-on::after { animation: soar-holo-glitch 6.1s steps(1, end) infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__beam { animation: soar-holo-beam 4.7s ease-in-out infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__aura { animation: soar-holo-aura 5s ease-in-out infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__emitter span { animation: soar-holo-ring 2.8s var(--soar-ease-out) infinite; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__emitter span + span { animation-delay: 1.4s; }
  :is(#soar, #soar-portal) .soar-feat.is-live .soar-holo__dust i { animation: soar-holo-dust 3.4s linear infinite; }
  /* El producto nuevo se dibuja de abajo hacia arriba, desde la palma */
  :is(#soar, #soar-portal) .soar-holo__layer.is-entering { animation: soar-holo-build 760ms var(--soar-ease-out) both !important; }
  :is(#soar, #soar-portal) .soar-holo__scan.is-run { animation: soar-holo-scan 760ms var(--soar-ease-out) both; }
}
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(1) { --x: -38%;  --dx: -10px; animation-delay: 0s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(2) { --x: 22%;   --dx: 14px;  animation-delay: -.5s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(3) { --x: -12%;  --dx: -4px;  animation-delay: -1.1s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(4) { --x: 48%;   --dx: 20px;  animation-delay: -1.6s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(5) { --x: -60%;  --dx: -18px; animation-delay: -2.1s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(6) { --x: 6%;    --dx: 6px;   animation-delay: -2.6s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(7) { --x: 64%;   --dx: 10px;  animation-delay: -3s; }
:is(#soar, #soar-portal) .soar-holo__dust i:nth-child(8) { --x: -30%;  --dx: -12px; animation-delay: -.8s; }
:is(#soar, #soar-portal) .soar-feat:not(.is-live) .soar-holo * { animation-play-state: paused; }

@keyframes soar-holo-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes soar-holo-turn { 0%, 100% { transform: rotateY(-14deg); } 50% { transform: rotateY(14deg); } }
@keyframes soar-holo-flicker {
  0% { opacity: .9; } 31% { opacity: .62; } 32% { opacity: .9; } 33% { opacity: .7; } 34% { opacity: .9; }
  71% { opacity: .78; } 72% { opacity: .92; } 88% { opacity: .55; } 88.6% { opacity: .9; }
}
@keyframes soar-holo-lines { to { background-position: 0 8px; } }
@keyframes soar-holo-glitch {
  0% { opacity: 0; clip-path: inset(40% 0 52% 0); transform: none; }
  62% { opacity: .55; clip-path: inset(34% 0 58% 0); transform: translate3d(-7px, 0, 0); }
  63% { opacity: .45; clip-path: inset(66% 0 26% 0); transform: translate3d(6px, 0, 0); }
  64.2% { opacity: 0; transform: none; }
  90% { opacity: .4; clip-path: inset(12% 0 82% 0); transform: translate3d(4px, 0, 0); }
  90.8% { opacity: 0; transform: none; }
}
@keyframes soar-holo-beam { 0%, 100% { opacity: .8; } 50% { opacity: .62; } }
@keyframes soar-holo-aura { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .75; scale: .96; } }
@keyframes soar-holo-ring { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes soar-holo-dust {
  0% { opacity: 0; transform: translate3d(var(--x), 0, 0); }
  15% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * 3.2 + var(--dx)), -250px, 0); }
}
@keyframes soar-holo-build {
  from { opacity: 1; clip-path: inset(100% 0 0 0); filter: brightness(2.2) saturate(.6) blur(3px); }
  to { opacity: .9; clip-path: inset(0 0 0 0); }
}
@keyframes soar-holo-scan {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; translate: 0 calc(-1 * var(--scan-h, 300px)); }
}

/* ---------- Opción A: vitrina ---------- */
:is(#soar, #soar-portal) .soar-spot { grid-area: main; min-width: 0; }
:is(#soar, #soar-portal) .soar-spot__view {
  position: relative;
  display: grid;
  container-type: inline-size;
}
:is(#soar, #soar-portal) .soar-spot__item {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: var(--spot-media, 54cqi) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}
:is(#soar, #soar-portal) .soar-spot__media {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Base de luz bajo el producto */
:is(#soar, #soar-portal) .soar-spot__media::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 9%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(10 61 126 / .55), rgb(10 61 126 / 0));
  opacity: 0;
  transition: opacity 500ms ease;
}
:is(#soar, #soar-portal) .soar-spot__media img {
  position: relative;
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 26px 30px rgb(0 0 0 / .5));
  opacity: 0;
  transform: translate3d(var(--from, 48px), 0, 0) scale(.94);
  transition: opacity 360ms ease, transform 640ms var(--soar-ease-out), filter 360ms ease;
}
:is(#soar, #soar-portal) .soar-spot__item[data-pos="before"] { --from: -48px; }
:is(#soar, #soar-portal) .soar-spot__info {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 240ms ease, transform 420ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-spot__item[data-pos="active"] .soar-spot__media::before { opacity: 1; }
:is(#soar, #soar-portal) .soar-spot__item[data-pos="active"] .soar-spot__media img { opacity: 1; transform: none; transition-delay: 80ms, 80ms, 0ms; }
:is(#soar, #soar-portal) .soar-spot__item[data-pos="active"] .soar-spot__info { opacity: 1; transform: none; transition-delay: 160ms; }
:is(#soar, #soar-portal) .soar-spot__item:not([data-pos="active"]) { pointer-events: none; }
:is(#soar, #soar-portal) .soar-spot__item:not([data-pos="active"]) .soar-spot__media img { filter: blur(6px) drop-shadow(0 26px 30px rgb(0 0 0 / .5)); }
:is(#soar, #soar-portal) .soar-spot.is-snap .soar-spot__item * { transition: none !important; }

:is(#soar, #soar-portal) .soar-spot__cat { margin: 0 0 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: rgb(var(--soar-holo)); }
:is(#soar, #soar-portal) .soar-spot__name {
  margin: 0 0 12px;
  font-family: var(--soar-font-display);
  font-weight: 680;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-spot__spec { margin: 0 0 18px; max-width: 34ch; font-size: 1rem; line-height: 1.55; color: rgb(217 226 255 / .78); text-wrap: pretty; }
:is(#soar, #soar-portal) .soar-spot__for { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; }
:is(#soar, #soar-portal) .soar-spot__for li {
  padding: 5px 12px;
  border-radius: var(--soar-radius-pill);
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  font-size: .8125rem;
  font-weight: 520;
  color: var(--soar-on-blue-muted);
}
:is(#soar, #soar-portal) .soar-spot__cta { gap: 10px; padding-left: 20px; }
/* Ícono de WhatsApp sin círculo: toma el color del texto del botón (igual que en Contacto y Nosotros) */
:is(#soar, #soar-portal) .soar-btn__icon {
  display: grid;
  place-items: center;
  color: inherit;
}
:is(#soar, #soar-portal) .soar-btn__icon .soar-ico { width: 20px; height: 20px; }
:is(#soar, #soar-portal) .soar-price {
  margin: 0 0 18px;
  font-family: var(--soar-font-display);
  font-weight: 680;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
:is(#soar, #soar-portal) .soar-ico { display: block; width: 1.25em; height: 1.25em; flex: none; }

/* Flechas a los lados del producto */
:is(#soar, #soar-portal) .soar-spot__arrow {
  position: absolute;
  z-index: 2;
  top: calc(var(--spot-media, 54cqi) / 2);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  color: var(--soar-on-blue);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform 160ms var(--soar-ease-out), background-color 200ms ease;
}
:is(#soar, #soar-portal) .soar-spot__arrow .soar-ico { width: 20px; height: 20px; }
:is(#soar, #soar-portal) .soar-spot__arrow--prev { left: -6px; }
:is(#soar, #soar-portal) .soar-spot__arrow--next { left: calc(var(--spot-media, 54cqi) - 48px + 6px); }
:is(#soar, #soar-portal) .soar-spot__arrow:active { transform: scale(.94); }
:is(#soar, #soar-portal) .soar-spot__arrow:focus-visible,
:is(#soar, #soar-portal) .soar-spot__thumb:focus-visible { outline: 2px solid var(--soar-on-blue); outline-offset: 3px; }

/* Miniaturas (también son el temporizador) */
:is(#soar, #soar-portal) .soar-spot__thumbs {
  display: flex;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  margin-inline: -4px;
}
:is(#soar, #soar-portal) .soar-spot__thumbs::-webkit-scrollbar { display: none; }
:is(#soar, #soar-portal) .soar-spot__thumb {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: rgb(255 255 255 / .05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-spot__thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .55; transition: opacity 200ms ease; }
:is(#soar, #soar-portal) .soar-spot__thumb:active { transform: scale(.95); }
:is(#soar, #soar-portal) .soar-spot__thumb[aria-selected="true"] { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px rgb(var(--soar-holo) / .7); }
:is(#soar, #soar-portal) .soar-spot__thumb[aria-selected="true"] img { opacity: 1; }
:is(#soar, #soar-portal) .soar-spot__thumb::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--soar-holo));
  transform: scaleX(0);
  transform-origin: left;
}
:is(#soar, #soar-portal) .soar-spot__thumb[aria-selected="true"]::after { animation: soar-progress var(--soar-feat-dur) linear forwards; }
:is(#soar, #soar-portal) .soar-spot.is-paused .soar-spot__thumb::after { animation-play-state: paused; }
:is(#soar, #soar-portal) .soar-spot.is-manual .soar-spot__thumb::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-spot__arrow:hover { background: rgb(255 255 255 / .16); }
  :is(#soar, #soar-portal) .soar-spot__thumb:hover img { opacity: .9; }
}

/* ---------- Opción B: tarjetas ---------- */
:is(#soar, #soar-portal) .soar-feat--grid .soar-holo { align-self: center; position: sticky; top: calc(var(--soar-nav-h) + 3vh); bottom: 3vh; }
:is(#soar, #soar-portal) .soar-feat--grid .soar-feat__inner { grid-template-rows: auto auto auto; }
:is(#soar, #soar-portal) .soar-pgrid {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
:is(#soar, #soar-portal) .soar-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 12px;
  border-radius: var(--soar-radius-tile);
  background: linear-gradient(180deg, rgb(255 255 255 / .065), rgb(255 255 255 / .025));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09);
  transition: box-shadow 320ms ease, transform 320ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-pcard.is-projected {
  box-shadow: inset 0 0 0 1px rgb(var(--soar-holo) / .55), 0 0 0 4px rgb(var(--soar-holo) / .07), 0 30px 60px -30px rgb(var(--soar-holo) / .55);
}
:is(#soar, #soar-portal) .soar-pcard__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / .82;
  border-radius: calc(var(--soar-radius-tile) - 8px);
  background:
    radial-gradient(60% 55% at 50% 62%, rgb(35 80 245 / .38), rgb(35 80 245 / 0) 72%),
    rgb(255 255 255 / .035);
  overflow: hidden;
}
:is(#soar, #soar-portal) .soar-pcard__media img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgb(0 0 0 / .45));
  transition: transform 420ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-pcard.is-projected .soar-pcard__media img { transform: translate3d(0, -6px, 0) scale(1.04); }
:is(#soar, #soar-portal) .soar-pcard__body { padding: 14px 8px 14px; }
:is(#soar, #soar-portal) .soar-pcard__cat { margin: 0 0 6px; font-size: .75rem; font-weight: 600; color: rgb(var(--soar-holo)); }
:is(#soar, #soar-portal) .soar-pcard__name { margin: 0 0 6px; font-family: var(--soar-font-display); font-weight: 650; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
:is(#soar, #soar-portal) .soar-pcard__spec { margin: 0; font-size: .875rem; line-height: 1.45; color: rgb(217 226 255 / .7); text-wrap: pretty; }
:is(#soar, #soar-portal) .soar-pcard .soar-price { margin: 10px 0 0; font-size: 1.125rem; }
:is(#soar, #soar-portal) .soar-pcard__cta {
  margin: auto 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: var(--soar-radius-pill);
  background: rgb(255 255 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  color: var(--soar-on-blue);
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  transition: transform 160ms var(--soar-ease-out), background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
:is(#soar, #soar-portal) .soar-pcard__cta .soar-ico { width: 18px; height: 18px; color: rgb(var(--soar-holo)); transition: color 240ms ease; }
/* La tarjeta que se está proyectando enciende su botón */
:is(#soar, #soar-portal) .soar-pcard.is-projected .soar-pcard__cta { background: var(--soar-on-blue); color: var(--soar-blue-deep); box-shadow: none; }
:is(#soar, #soar-portal) .soar-pcard.is-projected .soar-pcard__cta .soar-ico { color: var(--soar-blue); }
:is(#soar, #soar-portal) .soar-pcard__cta:active { transform: scale(.97); }
:is(#soar, #soar-portal) .soar-pcard__cta:focus-visible { outline: 2px solid var(--soar-on-blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-pcard.is-projected .soar-pcard__cta:hover { background: #FFFFFF; }
}
/* Entrada escalonada de las tarjetas */
:is(#soar, #soar-portal) .soar-pgrid.is-armed .soar-pcard { opacity: 0; transform: translate3d(0, 18px, 0); }
:is(#soar, #soar-portal) .soar-pgrid.is-armed.is-in .soar-pcard {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease, transform 700ms var(--soar-ease-out), box-shadow 320ms ease;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms;
}

/* ---------- Franja: precios especiales + otro modelo ---------- */
:is(#soar, #soar-portal) .soar-deal {
  grid-area: deal;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 72px);
  border-radius: var(--soar-radius-tile);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09);
}
:is(#soar, #soar-portal) .soar-deal__item { display: flex; gap: 18px; padding: clamp(22px, 2.6vw, 32px); }
:is(#soar, #soar-portal) .soar-deal__item + .soar-deal__item { box-shadow: inset 1px 0 0 rgb(255 255 255 / .09); }
:is(#soar, #soar-portal) .soar-deal__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgb(var(--soar-holo) / .12);
  color: rgb(var(--soar-holo));
}
:is(#soar, #soar-portal) .soar-deal__icon .soar-ico { width: 24px; height: 24px; }
:is(#soar, #soar-portal) .soar-deal__title { margin: 2px 0 6px; font-family: var(--soar-font-display); font-weight: 650; font-size: 1.125rem; line-height: 1.25; letter-spacing: -.012em; }
:is(#soar, #soar-portal) .soar-deal__text { margin: 0 0 14px; max-width: 44ch; font-size: .9375rem; line-height: 1.5; color: rgb(217 226 255 / .72); }
:is(#soar, #soar-portal) .soar-deal__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--soar-on-blue);
  text-decoration: underline;
  text-decoration-color: rgb(var(--soar-holo) / .55);
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 200ms ease;
}
:is(#soar, #soar-portal) .soar-deal__link .soar-ico { width: 16px; height: 16px; transition: transform 200ms var(--soar-ease-out); }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-deal__link:hover { text-decoration-color: rgb(var(--soar-holo)); }
  :is(#soar, #soar-portal) .soar-deal__link:hover .soar-ico { transform: translate3d(2px, -2px, 0); }
}

/* ---------- Versión clara (agrega soar-feat--light a la sección) ---------- */
:is(#soar, #soar-portal) .soar-feat--light {
  --soar-holo: 14 165 233;                 /* cian más profundo: se lee sobre blanco */
  background-color: var(--soar-paper);
  background-image:
    radial-gradient(40% 50% at 20% 56%, rgb(56 189 248 / .16), rgb(56 189 248 / 0) 70%),
    radial-gradient(60% 50% at 82% 0%, rgb(10 61 126 / .08), rgb(10 61 126 / 0) 70%);
  color: var(--soar-ink);
  box-shadow: 0 -24px 60px -24px rgb(2 8 40 / .35);
}
:is(#soar, #soar-portal) .soar-feat--light ::selection { background: var(--soar-blue); color: var(--soar-on-blue); }
:is(#soar, #soar-portal) .soar-feat--light .soar-feat__title { color: var(--soar-ink); }
:is(#soar, #soar-portal) .soar-feat--light .soar-feat__lead,
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__spec,
:is(#soar, #soar-portal) .soar-feat--light .soar-deal__text { color: #4A5578; }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__cat { color: var(--soar-blue); }
/* la mano blanca necesita sombra para separarse del fondo claro */
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__hand { filter: drop-shadow(0 28px 36px rgb(13 21 48 / .22)) drop-shadow(0 4px 8px rgb(13 21 48 / .12)); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__aura { background: radial-gradient(closest-side, rgb(56 189 248 / .22), rgb(56 189 248 / .08) 55%, rgb(56 189 248 / 0)); }
/* Sobre blanco la luz no "suma": el holograma se pinta en cian sólido translúcido */
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__beam {
  mix-blend-mode: normal;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .25) 0 1px, rgb(255 255 255 / 0) 1px 9px),
    linear-gradient(to top, rgb(56 189 248 / .55), rgb(56 189 248 / .18) 45%, rgb(56 189 248 / 0) 86%);
}
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__layer { mix-blend-mode: normal; }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__layer.is-tint {
  filter: grayscale(1) contrast(1.25) brightness(.92) sepia(1) hue-rotate(160deg) saturate(4.2) drop-shadow(0 0 1px rgb(2 132 199 / .9)) drop-shadow(0 8px 18px rgb(14 165 233 / .45));
}
/* holograma propio (fondo negro): se invierte para que el negro desaparezca sobre blanco */
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__layer.is-native { mix-blend-mode: multiply; filter: invert(1) hue-rotate(180deg) saturate(1.6); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__layer::before { background-image: repeating-linear-gradient(180deg, rgb(255 255 255 / .55) 0 1px, rgb(255 255 255 / 0) 1px 4px); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__layer.is-on { opacity: .82; }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__emitter { mix-blend-mode: normal; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(56 189 248 / .75) 34%, rgb(56 189 248 / 0)); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__dust i { background: rgb(14 165 233); box-shadow: 0 0 6px rgb(56 189 248 / .8); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo__scan { background: rgb(14 165 233); box-shadow: 0 0 10px 2px rgb(56 189 248 / .7); }
:is(#soar, #soar-portal) .soar-feat--light .soar-holo.is-empty::before { background: linear-gradient(180deg, #E9EDF6 0%, #C9D2E6 60%, #AEB9D3 100%); box-shadow: inset 0 2px 0 #fff, 0 24px 40px -14px rgb(13 21 48 / .35); }
/* producto y controles */
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__media::before { background: radial-gradient(closest-side, rgb(13 21 48 / .22), rgb(13 21 48 / 0)); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__media img { filter: drop-shadow(0 22px 22px rgb(13 21 48 / .22)); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__item:not([data-pos="active"]) .soar-spot__media img { filter: blur(6px); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__for li { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(13 21 48 / .1); color: #3A4670; }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__cta { background: var(--soar-blue); color: var(--soar-on-blue); box-shadow: 0 14px 30px -14px rgb(10 61 126 / .7); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__arrow { background: #FFFFFF; color: var(--soar-ink); box-shadow: 0 8px 20px -10px rgb(13 21 48 / .35), inset 0 0 0 1px rgb(13 21 48 / .08); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__thumb { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(13 21 48 / .1); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__thumb[aria-selected="true"] { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--soar-blue), 0 8px 18px -10px rgb(10 61 126 / .5); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__thumb::after { background: var(--soar-blue); }
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__arrow:focus-visible,
:is(#soar, #soar-portal) .soar-feat--light .soar-spot__thumb:focus-visible { outline-color: var(--soar-blue); }
:is(#soar, #soar-portal) .soar-feat--light .soar-deal { background: #FFFFFF; box-shadow: 0 20px 50px -30px rgb(13 21 48 / .35), inset 0 0 0 1px rgb(13 21 48 / .06); }
:is(#soar, #soar-portal) .soar-feat--light .soar-deal__item + .soar-deal__item { box-shadow: inset 1px 0 0 rgb(13 21 48 / .08); }
:is(#soar, #soar-portal) .soar-feat--light .soar-deal__icon { background: rgb(10 61 126 / .08); color: var(--soar-blue); }
:is(#soar, #soar-portal) .soar-feat--light .soar-deal__link { color: var(--soar-ink); text-decoration-color: rgb(10 61 126 / .45); }
:is(#soar, #soar-portal) .soar-feat--light .soar-palm-tip { color: #F5F8FF; }
@media (hover: hover) and (pointer: fine) {
  :is(#soar, #soar-portal) .soar-feat--light .soar-spot__arrow:hover { background: #F4F6FA; }
  :is(#soar, #soar-portal) .soar-feat--light .soar-spot__cta:hover { background: var(--soar-blue-hover); }
  :is(#soar, #soar-portal) .soar-feat--light .soar-deal__link:hover { text-decoration-color: var(--soar-blue); }
}
@media (max-width: 860px) {
  :is(#soar, #soar-portal) .soar-feat--light .soar-deal__item + .soar-deal__item { box-shadow: inset 0 1px 0 rgb(13 21 48 / .08); }
}

/* Ayuda para ubicar la palma (?palma en la URL) */
:is(#soar, #soar-portal) .soar-palm-tip {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: #0D1530;
  color: #F5F8FF;
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .12);
}
:is(#soar, #soar-portal) .soar-holo.is-calibrating { cursor: crosshair; outline: 1px dashed rgb(var(--soar-holo) / .6); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  :is(#soar, #soar-portal) .soar-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :is(#soar, #soar-portal) .soar-feat__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "holo" "main" "deal";
  }
  :is(#soar, #soar-portal) .soar-feat__head { margin-bottom: 8px; }
  :is(#soar, #soar-portal) .soar-holo { --hand-drop: 0px; width: min(calc(100% + var(--soar-feat-bleed)), 560px); }
  :is(#soar, #soar-portal) .soar-holo.is-empty { width: min(100%, 360px); margin-inline: auto; }
  :is(#soar, #soar-portal) .soar-feat--grid .soar-holo { position: relative; top: auto; }
  /* Tarjetas: carril que se desliza con el dedo */
  :is(#soar, #soar-portal) .soar-pgrid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(74%, 300px);
    gap: 12px;
    margin-inline: calc(-1 * var(--soar-gutter));
    padding: 4px var(--soar-gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--soar-gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  :is(#soar, #soar-portal) .soar-pgrid::-webkit-scrollbar { display: none; }
  :is(#soar, #soar-portal) .soar-pcard { scroll-snap-align: start; }
  :is(#soar, #soar-portal) .soar-deal { grid-template-columns: minmax(0, 1fr); }
  :is(#soar, #soar-portal) .soar-deal__item + .soar-deal__item { box-shadow: inset 0 1px 0 rgb(255 255 255 / .09); }
}
@media (prefers-reduced-motion: reduce) {
  :is(#soar, #soar-portal) .soar-spot__media img, :is(#soar, #soar-portal) .soar-spot__info { transform: none !important; transition-property: opacity !important; }
  :is(#soar, #soar-portal) .soar-holo__dust, :is(#soar, #soar-portal) .soar-holo__emitter span { display: none; }
}

/* Sin mano ni holograma en tablets y celulares (pantallas de hasta 1024 px o táctiles):
   la vitrina ocupa todo el ancho */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  :is(#soar, #soar-portal) .soar-feat .soar-holo { display: none; }
  :is(#soar, #soar-portal) .soar-feat__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "main" "deal";
  }
  :is(#soar, #soar-portal) .soar-feat__head { margin-bottom: clamp(20px, 4vw, 40px); }
  :is(#soar, #soar-portal) .soar-spot { max-width: 920px; }
  /* sin la mano, el brillo de fondo que la acompañaba sobra */
  :is(#soar, #soar-portal) .soar-feat { background-image: radial-gradient(60% 50% at 80% 0%, rgb(35 80 245 / .22), rgb(35 80 245 / 0) 70%); }
  :is(#soar, #soar-portal) .soar-feat--light { background-image: radial-gradient(60% 50% at 82% 0%, rgb(10 61 126 / .08), rgb(10 61 126 / 0) 70%); }
}
/* Celulares: el producto arriba y su información abajo */
@media (max-width: 600px) {
  :is(#soar, #soar-portal) .soar-spot__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :is(#soar, #soar-portal) .soar-spot__media { aspect-ratio: 4 / 3; }
  :is(#soar, #soar-portal) .soar-spot__arrow { top: calc(75cqi / 2); width: 44px; height: 44px; }
  :is(#soar, #soar-portal) .soar-spot__arrow--prev { left: 0; }
  :is(#soar, #soar-portal) .soar-spot__arrow--next { left: auto; right: 0; }
  :is(#soar, #soar-portal) .soar-spot__spec { max-width: none; }
}

/* =========================================================
   VENTA DE SALDO AL MAYOREO (última sección antes del pie)
   ========================================================= */
:is(#soar, #soar-portal) .soar-saldo {
  --soar-saldo-photo-w: clamp(460px, 54vw, 860px);   /* ancho de la foto (más grande = se corta más abajo) */
  --soar-saldo-ok: 34 197 94;                         /* verde de "aprobada" */
  position: relative;
  z-index: 4;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--soar-sheet-r));
  border-radius: var(--soar-sheet-r) var(--soar-sheet-r) 0 0;
  background-color: #060D2C;
  background-image:
    radial-gradient(38% 60% at 74% 46%, rgb(35 80 245 / .55), rgb(35 80 245 / 0) 70%),
    radial-gradient(70% 50% at 10% 110%, rgb(35 80 245 / .25), rgb(35 80 245 / 0) 70%);
  color: var(--soar-on-blue);
  box-shadow: 0 -24px 60px -24px rgb(2 8 40 / .55);
}
:is(#soar, #soar-portal) .soar-saldo ::selection { background: var(--soar-on-blue); color: var(--soar-blue-deep); }
:is(#soar, #soar-portal) .soar-saldo__inner {
  max-width: 1280px;
  min-height: clamp(600px, 52vw, 760px);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 120px) var(--soar-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
}
:is(#soar, #soar-portal) .soar-saldo__copy { align-self: center; max-width: 36rem; padding-bottom: clamp(64px, 8vw, 112px); }
:is(#soar, #soar-portal) .soar-saldo__title {
  margin: 0 0 16px;
  font-family: var(--soar-font-display);
  font-optical-sizing: auto;
  font-weight: 720;
  font-size: clamp(2.3rem, 5vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.038em;
  text-wrap: balance;
}
:is(#soar, #soar-portal) .soar-saldo__lead { margin: 0 0 clamp(28px, 3.4vw, 40px); max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.55; color: rgb(217 226 255 / .82); text-wrap: pretty; }

/* Cómo funciona: tres pasos en línea, con una línea que los une */
:is(#soar, #soar-portal) .soar-saldo__steps { position: relative; display: grid; gap: 20px; margin: 0 0 clamp(32px, 4vw, 44px); padding: 0; list-style: none; }
:is(#soar, #soar-portal) .soar-saldo__steps::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 30px;
  bottom: 30px;
  width: 1.5px;
  background: linear-gradient(rgb(245 248 255 / .28), rgb(245 248 255 / .06));
}
:is(#soar, #soar-portal) .soar-saldo__step { position: relative; display: flex; align-items: flex-start; gap: 16px; }
:is(#soar, #soar-portal) .soar-saldo__step-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #0E1A4A;
  box-shadow: inset 0 0 0 1px rgb(245 248 255 / .14);
  color: var(--soar-on-blue);
}
:is(#soar, #soar-portal) .soar-saldo__step-icon .soar-ico { width: 22px; height: 22px; }
:is(#soar, #soar-portal) .soar-saldo__step-text { display: grid; gap: 2px; padding-top: 2px; }
:is(#soar, #soar-portal) .soar-saldo__step-text strong { font-family: var(--soar-font-display); font-weight: 650; font-size: 1.125rem; letter-spacing: -.012em; }
:is(#soar, #soar-portal) .soar-saldo__step-text span { font-size: .9375rem; line-height: 1.5; color: rgb(217 226 255 / .72); }

:is(#soar, #soar-portal) .soar-saldo__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
:is(#soar, #soar-portal) .soar-saldo__note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; color: rgb(217 226 255 / .78); }
:is(#soar, #soar-portal) .soar-saldo__note .soar-ico { width: 18px; height: 18px; color: rgb(96 224 255); }

/* Foto: anclada arriba y cortada por el borde inferior de la sección */
:is(#soar, #soar-portal) .soar-saldo__visual { position: relative; }
:is(#soar, #soar-portal) .soar-saldo__figure {
  position: absolute;
  top: clamp(-40px, -2vw, -8px);
  left: 50%;
  width: var(--soar-saldo-photo-w);
  translate: -46% 0;
}
:is(#soar, #soar-portal) .soar-saldo__photo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 30px 60px rgb(2 8 40 / .55));
}

/* Recargas que van entrando junto al celular (la posición sigue a la foto) */
:is(#soar, #soar-portal) .soar-saldo__feed {
  position: absolute;
  z-index: 2;
  left: -14%;
  top: 57%;
  width: clamp(240px, 38%, 300px);
  height: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
:is(#soar, #soar-portal) .soar-saldo__tx {
  --y: 0px;
  --s: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: rgb(255 255 255 / .96);
  color: var(--soar-ink);
  box-shadow: 0 18px 40px -18px rgb(2 8 40 / .7), inset 0 0 0 1px rgb(255 255 255 / .6);
  opacity: 0;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transform-origin: 50% 0;
  transition: transform 560ms var(--soar-ease-out), opacity 360ms ease, filter 360ms ease;
}
:is(#soar, #soar-portal) .soar-saldo__tx-ok {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(var(--soar-saldo-ok) / .14);
  color: rgb(21 128 61);
}
:is(#soar, #soar-portal) .soar-saldo__tx-ok .soar-ico { width: 16px; height: 16px; }
:is(#soar, #soar-portal) .soar-saldo__tx-name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#soar, #soar-portal) .soar-saldo__tx-amt { font-family: var(--soar-font-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
/* Posiciones: 0 = la más nueva (arriba), 1 y 2 = anteriores, out = sale */
:is(#soar, #soar-portal) .soar-saldo__tx[data-slot="enter"] { --y: -18px; --s: .96; opacity: 0; transition-duration: 0ms; }
:is(#soar, #soar-portal) .soar-saldo__tx[data-slot="0"] { --y: 0px; --s: 1; opacity: 1; }
:is(#soar, #soar-portal) .soar-saldo__tx[data-slot="1"] { --y: 62px; --s: .95; opacity: .82; }
:is(#soar, #soar-portal) .soar-saldo__tx[data-slot="2"] { --y: 118px; --s: .9; opacity: .5; }
:is(#soar, #soar-portal) .soar-saldo__tx[data-slot="out"] { --y: 160px; --s: .86; opacity: 0; filter: blur(2px); }

@media (max-width: 1180px) and (min-width: 861px) {
  :is(#soar, #soar-portal) .soar-saldo__visual { --soar-saldo-photo-w: 64vw; }
  :is(#soar, #soar-portal) .soar-saldo__figure { translate: -38% 0; }
  :is(#soar, #soar-portal) .soar-saldo__feed { left: 8%; top: 60%; width: min(250px, 42%); }
}
@media (max-width: 860px) {
  :is(#soar, #soar-portal) .soar-saldo__inner { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  :is(#soar, #soar-portal) .soar-saldo__copy { padding-bottom: 32px; max-width: none; }
  :is(#soar, #soar-portal) .soar-saldo__visual { --soar-saldo-photo-w: min(122vw, 600px); min-height: clamp(420px, 112vw, 620px); }
  :is(#soar, #soar-portal) .soar-saldo__figure { top: 0; translate: -44% 0; }
  :is(#soar, #soar-portal) .soar-saldo__feed { left: 30%; top: 50%; width: min(240px, 60vw); height: 150px; }
  :is(#soar, #soar-portal) .soar-saldo { background-image: radial-gradient(70% 40% at 60% 78%, rgb(35 80 245 / .5), rgb(35 80 245 / 0) 70%); }
}
@media (prefers-reduced-motion: reduce) {
  :is(#soar, #soar-portal) .soar-saldo__tx { transition-property: opacity; }
}

/* =========================================================
   MODO CALIBRACIÓN (?calibrar en la URL)
   ========================================================= */
:is(#soar, #soar-portal) .soar-calib-layer { position: absolute; inset: 0; z-index: 30; cursor: crosshair; touch-action: none; }
:is(#soar, #soar-portal) .soar-calib-box, :is(#soar, #soar-portal) .soar-calib-current {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
:is(#soar, #soar-portal) .soar-calib-box { border: 2px solid #FF3D7F; background: rgb(255 61 127 / .15); }
:is(#soar, #soar-portal) .soar-calib-current { border: 2px dashed #12B76A; }
:is(#soar, #soar-portal) .soar-calib-panel {
  position: fixed;
  z-index: 40;
  left: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 16px;
  background: var(--soar-ink);
  color: #E8EDFF;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / .5);
}
:is(#soar, #soar-portal) .soar-calib-panel strong { display: block; margin-bottom: 6px; font-family: var(--soar-font-body); font-size: 14px; }
:is(#soar, #soar-portal) .soar-calib-panel p { margin: 0 0 10px; color: #AEB9DD; font-family: var(--soar-font-body); }
:is(#soar, #soar-portal) .soar-calib-panel pre { margin: 0 0 12px; padding: 10px; border-radius: 10px; background: rgb(255 255 255 / .06); white-space: pre-wrap; user-select: all; }
:is(#soar, #soar-portal) .soar-calib-panel button {
  height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #E8EDFF; color: var(--soar-ink); font-weight: 600; cursor: pointer;
  transition: transform 160ms var(--soar-ease-out);
}
:is(#soar, #soar-portal) .soar-calib-panel button:active { transform: scale(.97); }
.soar-calibrating :is(#soar, #soar-portal) .soar-robot { animation: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  :is(#soar, #soar-portal) .soar-nav__links, :is(#soar, #soar-portal) .soar-nav__cta { display: none; }
  :is(#soar, #soar-portal) .soar-nav__toggle { display: block; }
  :root { --soar-nav-h: 64px; }
}

@media (max-width: 767px) {
  :is(#soar, #soar-portal) .soar-hero { align-items: start; padding-top: calc(var(--soar-nav-h) + clamp(16px, 3svh, 32px)); }
  :is(#soar, #soar-portal) .soar-hero__inner { grid-template-columns: 1fr; gap: clamp(8px, 1.6svh, 16px); }
  :is(#soar, #soar-portal) .soar-hero__title { font-size: clamp(2.3rem, 10.4vw, 3.4rem); margin-bottom: 12px; }
  :is(#soar, #soar-portal) .soar-hero__sub { font-size: 1rem; margin-bottom: 18px; }
  :is(#soar, #soar-portal) .soar-show__stage { height: min(42svh, 96vw); }
  :is(#soar, #soar-portal) .soar-show__long { display: none; }
  :is(#soar, #soar-portal) .soar-show__short { display: inline; }
  :is(#soar, #soar-portal) .soar-btn { height: 50px; padding: 0 22px; }
  :root { --soar-logo-dock-w: clamp(120px, 34vw, 170px); --soar-logo-dock-bottom: 6svh; }
  :is(#soar, #soar-portal) .soar-robot { --soar-robot-size: 125svh; --soar-robot-top: 8svh; }
  :is(#soar, #soar-portal) .soar-wave { --soar-wave-width: 230vw; --soar-wave-y: -10svh; }
}

@media (max-width: 1023px) {
  :is(#soar, #soar-portal) .soar-cats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(200px, 34vw, 260px), auto);
    grid-template-areas:
      "cctv       cctv"
      "acceso     redes"
      "cableado   computo"
      "energia    radio"
      "audio      audio"
      "accesorios accesorios"
      "mas        mas";
  }
  :is(#soar, #soar-portal) .soar-cat--cctv { min-height: clamp(300px, 56vw, 420px); }
}

@media (max-width: 560px) {
  :is(#soar, #soar-portal) .soar-cats__grid { gap: 10px; }
  :is(#soar, #soar-portal) .soar-cat { padding: 18px; border-radius: 20px; }
  :is(#soar, #soar-portal) .soar-cat__title { font-size: 1.125rem; }
  :is(#soar, #soar-portal) .soar-cat--cctv .soar-cat__title { font-size: 1.75rem; }
  :is(#soar, #soar-portal) :is(.soar-cat--acceso, .soar-cat--redes, .soar-cat--cableado, .soar-cat--computo, .soar-cat--energia, .soar-cat--radio) .soar-cat__desc { display: none; }
  :is(#soar, #soar-portal) :is(.soar-cat--acceso, .soar-cat--redes, .soar-cat--cableado, .soar-cat--computo, .soar-cat--energia, .soar-cat--radio) .soar-cat__img { width: 64%; height: 46%; right: 4%; bottom: 4%; }
  :is(#soar, #soar-portal) :is(.soar-cat--acceso, .soar-cat--redes, .soar-cat--cableado, .soar-cat--computo, .soar-cat--energia, .soar-cat--radio) .soar-cat__cta { height: 36px; padding: 0 14px; font-size: .8125rem; }
}

@media (max-width: 380px) {
  :is(#soar, #soar-portal) .soar-hero__ctas .soar-btn { flex: 1 1 auto; }
}

/* =========================================================
   SIN ANIMACIONES (accesibilidad) Y RESPALDO SIN JS
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :is(#soar, #soar-portal) .soar-robot { animation: none; }
  :is(#soar, #soar-portal) .soar-wave__img { animation: none; }
  :is(#soar, #soar-portal) .soar-hero__title .soar-line > span,
  :is(#soar, #soar-portal) .soar-reveal,
  :is(#soar, #soar-portal) .soar-show.soar-reveal,
  :is(#soar, #soar-portal) .soar-show__img,
  :is(#soar, #soar-portal) .soar-show__word,
  :is(#soar, #soar-portal) .soar-cats__grid.is-armed .soar-cat,
  :is(#soar, #soar-portal) .soar-brands__ghost span { transform: none !important; filter: none !important; }
  :is(#soar, #soar-portal) .soar-show__item[data-pos="active"] .soar-show__img,
  :is(#soar, #soar-portal) .soar-show__floor,
  :is(#soar, #soar-portal) .soar-track__step[data-state="current"] .soar-track__dot::after { animation: none; }
  :is(#soar, #soar-portal) .soar-track.is-armed { transform: none !important; }
  :is(#soar, #soar-portal) .soar-hero__title .soar-line > span { opacity: 0; transition: opacity 300ms ease !important; }
  :is(#soar, #soar-portal) .soar-hero.is-revealed .soar-line > span { opacity: 1; }
  :is(#soar, #soar-portal) .soar-nav, :is(#soar, #soar-portal) .soar-nav.is-visible { transform: none; }
}

.soar-static :is(#soar, #soar-portal) .soar-intro { height: auto; }
.soar-static :is(#soar, #soar-portal) .soar-after { margin-top: calc(-1 * var(--soar-sheet-r)); }
.soar-static :is(#soar, #soar-portal) .soar-cats { position: relative; top: auto; }
.soar-static :is(#soar, #soar-portal) .soar-cover { margin-top: calc(-1 * var(--soar-sheet-r)); }
.soar-static :is(#soar, #soar-portal) .soar-stack { position: relative; top: auto; }
.soar-static :is(#soar, #soar-portal) .soar-feat { position: relative; top: auto; }
.soar-static :is(#soar, #soar-portal) .soar-stage { position: relative; height: 100vh; }
.soar-static :is(#soar, #soar-portal) .soar-robot, .soar-static :is(#soar, #soar-portal) .soar-logo-dock { display: none; }
.soar-static :is(#soar, #soar-portal) .soar-eye-fill { opacity: 1; clip-path: none; }
.soar-static :is(#soar, #soar-portal) .soar-hero { visibility: visible; }
.soar-static :is(#soar, #soar-portal) .soar-hero .soar-line > span, .soar-static :is(#soar, #soar-portal) .soar-reveal { transform: none; opacity: 1; filter: none; }
.soar-static :is(#soar, #soar-portal) .soar-nav { opacity: 1; transform: none; pointer-events: auto; }