/* =========================================
   SOLUCIONES (/soluciones)
   Estilos propios de soluciones.html. Todo lleva prefijo sol- o está acotado
   a body.sol-page: no pisa styles.css ni las otras páginas.
   Si cambiás este archivo, subí el ?v= de soluciones.css en soluciones.html
   (los .css se cachean 1 hora en Cloudflare y en el navegador).
========================================= */

.sol-page {
  --sol-bg: #040a07;
  --sol-surface: #0a1710;
  --sol-line: rgba(255, 255, 255, .08);
  --sol-line-2: rgba(255, 255, 255, .15);
  --sol-green: #20ef7d;
  --sol-green-2: #13b866;
  --sol-green-on-light: #0a8249;
  --sol-text: #f3f7f4;
  --sol-muted: #9aa69f;
  --sol-dim: #78837c;
  --sol-paper: #f5f7f5;
  --sol-paper-text: #0c1110;
  --sol-paper-muted: #56615b;
  --sol-paper-line: #dde5df;
  --sol-ease: cubic-bezier(.16, 1, .3, 1);

  background: var(--sol-bg);
  color: var(--sol-text);
  overflow-x: clip;
}

.sol-page ::selection {
  background: var(--sol-green);
  color: #03110a;
}

.sol-page section[id],
.sol-page article[id] {
  scroll-margin-top: 84px;
}

.sol-page a:focus-visible,
.sol-page button:focus-visible,
.sol-page [tabindex]:focus-visible {
  outline: 2px solid var(--sol-green);
  outline-offset: 4px;
}

.sol-light a:focus-visible,
.sol-light button:focus-visible {
  outline-color: var(--sol-green-on-light);
}

.sol-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sol-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sol-green);
  color: #03110a;
  font-size: 14px;
  font-weight: 800;
  transition: top .2s ease;
}

.sol-skip:focus {
  top: 12px;
}


/* ========================================
   TIPOGRAFÍA Y BOTONES
======================================== */

.sol-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  color: var(--sol-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Triangulito: el mismo motivo del logo de AVAIA. */
.sol-eyebrow::before {
  content: "";
  width: 9px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sol-light .sol-eyebrow {
  color: var(--sol-green-on-light);
}

.sol-h2 {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 900;
  text-wrap: balance;
}

.sol-h2 em,
.sol-h3 em {
  font-style: normal;
  color: var(--sol-green);
}

.sol-light .sol-h2 em {
  color: var(--sol-green-on-light);
}

.sol-lead {
  max-width: 580px;
  margin: 28px 0 0;
  color: var(--sol-muted);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.6;
}

.sol-section {
  position: relative;
  padding: clamp(96px, 11vw, 168px) 0;
}

.sol-section-head {
  max-width: 860px;
  margin-bottom: clamp(56px, 7vw, 104px);
}

.sol-light {
  background: var(--sol-paper);
  color: var(--sol-paper-text);
}

.sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .35s var(--sol-ease), box-shadow .35s ease, background .35s ease, border-color .35s ease;
}

.sol-btn-primary {
  background: linear-gradient(135deg, #4cf8a0, var(--sol-green));
  color: #03110a;
  box-shadow: 0 14px 40px rgba(32, 239, 125, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.sol-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(32, 239, 125, .32), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.sol-btn-ghost {
  border: 1px solid var(--sol-line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--sol-text);
}

.sol-btn-ghost:hover {
  border-color: rgba(32, 239, 125, .6);
  background: rgba(32, 239, 125, .06);
}

.sol-arrow {
  display: inline-block;
  font-size: 18px;
  transition: transform .35s var(--sol-ease);
}

.sol-btn:hover .sol-arrow {
  transform: translateX(4px);
}


/* ========================================
   ENTRADAS AL HACER SCROLL
   Solo con JS (html.sol-js): sin JS todo se ve igual, sin animación.
======================================== */

.sol-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--sol-ease), transform 1s var(--sol-ease);
  transition-delay: calc(var(--rd, 0) * 90ms);
}

.sol-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Las demos animan solo mientras están en pantalla. */
.sol-js [data-live]:not(.is-live),
.sol-js [data-live]:not(.is-live) * {
  animation-play-state: paused !important;
}


/* ========================================
   HEADER (oscuro, fijo)
======================================== */

.sol-page .sol-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(4, 10, 7, .5);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}

.sol-page .sol-header.is-scrolled {
  background: rgba(4, 10, 7, .95);
  border-bottom-color: var(--sol-line);
}

.sol-page .sol-header .header-inner {
  height: 76px;
}

.sol-page .sol-header .brand-link img {
  width: 112px;
}

.sol-page .sol-nav {
  gap: 38px;
  color: #c4cec8;
}

.sol-nav a {
  position: relative;
  padding: 6px 0;
  transition: color .25s ease;
}

.sol-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sol-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--sol-ease);
}

.sol-nav a:hover {
  color: #fff;
}

.sol-nav a:hover::after {
  transform: scaleX(1);
}

.sol-page .sol-header-cta {
  border-color: rgba(32, 239, 125, .55);
  background: rgba(32, 239, 125, .08);
  color: #fff;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.sol-page .sol-header-cta:hover {
  border-color: var(--sol-green);
  background: var(--sol-green);
  color: #03110a;
}

/* Menú mobile (mismo corte que menu.js: ≤1100px) */

.sol-page .menu-toggle,
.sol-page .mobile-menu {
  display: none;
}

@media (max-width: 1100px) {

  .sol-page .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--sol-line-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
  }

  .sol-page .menu-toggle span,
  .sol-page .menu-toggle span::before,
  .sol-page .menu-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, background .25s ease;
  }

  .sol-page .menu-toggle span {
    position: relative;
  }

  .sol-page .menu-toggle span::before,
  .sol-page .menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .sol-page .menu-toggle span::before {
    top: -6px;
  }

  .sol-page .menu-toggle span::after {
    top: 6px;
  }

  .sol-page .menu-toggle[aria-expanded="true"] span {
    background: transparent;
  }

  .sol-page .menu-toggle[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);
  }

  .sol-page .menu-toggle[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .sol-page .mobile-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 0 22px;
    background: rgba(4, 10, 7, .97);
    border-bottom: 1px solid var(--sol-line);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    animation: sol-fade-up .35s var(--sol-ease) both;
  }

  .sol-page .mobile-menu a {
    padding: 16px 24px;
    color: #e6ece8;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .sol-page .mobile-menu a + a {
    border-top: 1px solid var(--sol-line);
  }

  .sol-page .mobile-menu a:hover,
  .sol-page .mobile-menu a:focus-visible {
    color: var(--sol-green);
    outline: none;
  }

  .sol-page .mobile-menu a.sol-mobile-cta {
    margin: 14px 24px 0;
    padding: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--sol-green);
    color: #03110a;
    text-align: center;
  }
}


/* ========================================
   HERO
======================================== */

.sol-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 132px 0 112px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 78% 42%, rgba(19, 74, 45, .75) 0, rgba(9, 29, 19, .35) 45%, transparent 75%),
    radial-gradient(40% 50% at 0% 100%, rgba(18, 61, 40, .45) 0, transparent 70%),
    linear-gradient(125deg, #030806, #06120b 55%, #030806);
}

.sol-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 0, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 45%, #000 0, transparent 75%);
}

.sol-orbit {
  position: absolute;
  z-index: -1;
  width: 1180px;
  aspect-ratio: 1;
  right: -420px;
  top: 50%;
  margin-top: -590px;
  border-radius: 50%;
  border: 1px solid rgba(86, 255, 160, .22);
  animation: sol-spin 90s linear infinite;
  pointer-events: none;
}

/* Satélite sobre la órbita (a 45°). */
.sol-orbit::after {
  content: "";
  position: absolute;
  top: 14.64%;
  left: 14.64%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 18px 4px rgba(32, 239, 125, .55);
}

.sol-orbit-2 {
  width: 1560px;
  right: -800px;
  margin-top: -780px;
  border-color: rgba(86, 255, 160, .1);
  animation-duration: 150s;
  animation-direction: reverse;
}

.sol-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}

.sol-hero-title {
  margin: 0 0 32px;
  font-size: clamp(52px, 7vw, 108px);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 900;
}

/* Cada línea sube desde abajo. El padding evita cortar descendentes (j, p). */
.sol-l {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.sol-l > span {
  display: block;
  animation: sol-rise 1.1s var(--sol-ease) both;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

.sol-hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--sol-green) 0%, #a6ffd0 45%, var(--sol-green) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sol-shine 7s ease-in-out infinite;
}

.sol-hero-lead {
  max-width: 520px;
  margin: 0 0 40px;
  color: #b4beb8;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
}

.sol-hero-in {
  animation: sol-fade-up 1s var(--sol-ease) both;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

.sol-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sol-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}

.sol-scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--sol-green);
  animation: sol-scroll 2s ease-in-out infinite;
}


/* ---------- Collage del hero ----------
   Todo se mide en cqw (ancho del collage): escala entero en cualquier pantalla. */

.sol-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  aspect-ratio: 1 / .9;
  container-type: inline-size;
  animation: sol-fade-up 1.2s var(--sol-ease) .35s both;
}

/* Parallax: soluciones.js setea --mx/--my (-1…1) según el mouse. */
.sol-layer {
  position: absolute;
  transform: translate3d(calc(var(--mx, 0) * var(--d, 0) * -1px), calc(var(--my, 0) * var(--d, 0) * -1px), 0);
  transition: transform .9s var(--sol-ease);
}

.sol-float {
  position: relative;
  animation: sol-float 7s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

.sol-layer-browser {
  left: 0;
  top: 9%;
  width: 82%;
  z-index: 1;
}

.sol-layer-flow {
  left: 3%;
  bottom: 3%;
  width: 56%;
  z-index: 2;
}

.sol-layer-phone {
  right: 0;
  bottom: 2%;
  width: 33%;
  z-index: 3;
}

.sol-layer-ai {
  right: 0;
  top: 0;
  width: 46%;
  z-index: 4;
}

/* Navegador del hero */

.sol-browser {
  border-radius: 2.4cqw;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1c13, #08140d);
  border: 1px solid rgba(81, 255, 156, .2);
  box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, .55), 0 0 6cqw rgba(32, 239, 125, .07);
}

.sol-browser-bar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  height: 6cqw;
  padding: 0 2.2cqw;
  border-bottom: 1px solid var(--sol-line);
  background: rgba(255, 255, 255, .02);
}

.sol-browser-bar > i {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.sol-url {
  display: flex;
  align-items: center;
  gap: .8cqw;
  margin: 0 auto;
  padding: .7cqw 2.4cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #8f9b94;
  font-size: clamp(7px, 1.6cqw, 12px);
  white-space: nowrap;
}

.sol-lock {
  width: 1.1cqw;
  height: 1.3cqw;
  border-radius: .25cqw;
  background: var(--sol-green);
  opacity: .8;
}

.sol-site {
  padding: 3.4cqw 3.6cqw 3.8cqw;
}

.sol-site-nav {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-bottom: 4.4cqw;
}

.sol-site-logo {
  flex: 0 0 auto;
  width: 3.2cqw;
  height: 2.8cqw;
  margin-right: auto;
  background: var(--sol-green);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sol-bar {
  display: block;
  flex: 0 0 auto;
  width: var(--w, 50%);
  height: 1.1cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
}

.sol-bar-xl {
  height: 2.8cqw;
  border-radius: .7cqw;
  background: rgba(255, 255, 255, .9);
}

.sol-bar-lg {
  height: 1.8cqw;
  background: rgba(255, 255, 255, .75);
}

.sol-bar-price {
  height: 1.6cqw;
  background: rgba(32, 239, 125, .85);
}

.sol-site-pill {
  flex: 0 0 auto;
  width: 9cqw;
  height: 3cqw;
  border-radius: 99px;
  border: 1px solid rgba(32, 239, 125, .6);
}

.sol-site-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3.4cqw;
  align-items: center;
  margin-bottom: 3.6cqw;
}

.sol-site-copy {
  display: grid;
  gap: 1.5cqw;
}

.sol-site-btn {
  display: block;
  width: 15cqw;
  height: 4cqw;
  margin-top: 1.4cqw;
  border-radius: 99px;
  background: linear-gradient(135deg, #4cf8a0, var(--sol-green));
  box-shadow: 0 1cqw 3cqw rgba(32, 239, 125, .3);
}

.sol-site-media {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 1.8cqw;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(32, 239, 125, .55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(19, 184, 102, .6), transparent 50%),
    #0f2a1b;
}

.sol-site-media span {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}

.sol-site-media::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 25%;
  transform: translate(-50%, -55%);
  background: rgba(255, 255, 255, .9);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sol-site-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
}

.sol-site-cards span {
  height: 9cqw;
  border-radius: 1.4cqw;
  border: 1px solid var(--sol-line);
  background: rgba(255, 255, 255, .03);
}

/* La web del hero "se arma" una vez al cargar. */
.sol-build {
  transform-origin: left center;
  animation: sol-build .9s var(--sol-ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 700ms);
}

.sol-build-fade {
  animation: sol-fade-up .9s var(--sol-ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 700ms);
}

/* Celular con producto */

.sol-phone {
  aspect-ratio: 9 / 18;
  padding: 1.4cqw;
  border-radius: 5cqw;
  background: linear-gradient(160deg, #1a2a21, #07110b);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 5cqw 10cqw rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(32, 239, 125, .08);
}

.sol-phone-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  padding: 2.6cqw 2.2cqw;
  border-radius: 3.8cqw;
  background: #0b1a12;
  overflow: hidden;
}

.sol-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6cqw;
}

.sol-cart {
  position: relative;
  flex: 0 0 auto;
  width: 4.2cqw;
  height: 4.2cqw;
  color: #dfe7e2;
}

.sol-cart svg,
.sol-node-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sol-cart-badge {
  position: absolute;
  top: -1cqw;
  right: -1.2cqw;
  min-width: 2.6cqw;
  height: 2.6cqw;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--sol-green);
  color: #03110a;
  font-size: clamp(7px, 1.5cqw, 11px);
  font-weight: 900;
  animation: sol-badge 6s var(--sol-ease) infinite both;
}

.sol-product {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 2.6cqw;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, rgba(32, 239, 125, .5), transparent 60%),
    linear-gradient(160deg, #163926, #0b1d13);
}

.sol-product span {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #effff6, #8de8b6 45%, #1a6a41 100%);
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .4);
}

.sol-phone-btn {
  display: grid;
  place-items: center;
  height: 5.4cqw;
  margin-top: auto;
  border-radius: 99px;
  background: var(--sol-green);
  color: #03110a;
  font-size: clamp(6px, 1.45cqw, 11px);
  font-weight: 800;
  white-space: nowrap;
  animation: sol-press 6s ease infinite both;
}

/* Notificación tipo toast del hero */

.sol-toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 2.4cqw 1.6cqw 1.6cqw;
  border-radius: 2cqw;
  background: rgba(240, 255, 246, .97);
  color: #08130d;
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .45);
  white-space: nowrap;
}

.sol-toast {
  left: -46%;
  top: 34%;
  animation: sol-toast 6s var(--sol-ease) infinite both;
}

.sol-toast strong {
  display: block;
  font-size: clamp(8px, 1.75cqw, 14px);
  font-weight: 800;
  letter-spacing: -.01em;
}

.sol-toast small {
  display: block;
  color: #56635b;
  font-size: clamp(7px, 1.35cqw, 11px);
}

.sol-check {
  position: relative;
  flex: 0 0 auto;
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  background: var(--sol-green);
}

.sol-check::after {
  content: "";
  position: absolute;
  left: 37%;
  top: 22%;
  width: 24%;
  height: 44%;
  border: solid #03110a;
  border-width: 0 max(1.5px, .45cqw) max(1.5px, .45cqw) 0;
  transform: rotate(45deg);
}

/* Automatización (hero) */

.sol-flowchip {
  display: flex;
  align-items: center;
  padding: 2.2cqw 2.6cqw;
  border-radius: 2.4cqw;
  background: rgba(8, 20, 13, .92);
  border: 1px solid rgba(81, 255, 156, .22);
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .5);
}

.sol-flowchip-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9cqw;
}

.sol-flowchip-node small {
  color: #c9d3cd;
  font-size: clamp(7px, 1.45cqw, 11px);
  font-weight: 600;
}

.sol-node-icon {
  display: grid;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  padding: 1.4cqw;
  border-radius: 1.6cqw;
  background: rgba(32, 239, 125, .1);
  border: 1px solid rgba(32, 239, 125, .28);
  color: var(--sol-green);
}

.sol-flowchip-line {
  position: relative;
  flex: 1;
  height: 2px;
  margin: 0 1.4cqw 3cqw;
  background: rgba(32, 239, 125, .2);
  overflow: hidden;
}

.sol-flowchip-line i {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--sol-green), transparent);
  animation: sol-signal 1.8s linear infinite;
  animation-delay: var(--fd, 0s);
}

/* Burbuja de IA (hero) */

.sol-aibubble {
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
  padding: 2cqw;
  border-radius: 2.6cqw;
  background: rgba(8, 20, 13, .9);
  border: 1px solid rgba(81, 255, 156, .22);
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .5);
}

.sol-ai-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: var(--sol-green);
  color: #03110a;
  font-size: clamp(8px, 1.8cqw, 13px);
  font-weight: 900;
  box-shadow: 0 0 3cqw rgba(32, 239, 125, .45);
}

.sol-ai-msg {
  position: relative;
  flex: 1;
  min-height: 6cqw;
  padding: 1.4cqw 2cqw;
  border-radius: 1.8cqw 1.8cqw 1.8cqw .5cqw;
  background: #e7eee9;
  color: #0f1913;
  font-size: clamp(8px, 1.75cqw, 13px);
  line-height: 1.35;
  font-weight: 500;
}

.sol-ai-typing {
  position: absolute;
  left: 2cqw;
  top: 50%;
  display: flex;
  gap: .7cqw;
  transform: translateY(-50%);
  opacity: 0;
  animation: sol-ai-typing 8s ease infinite both;
}

.sol-ai-typing i,
.sol-dai-typing i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #5d6a62;
  animation: sol-dot 1s ease-in-out infinite;
}

.sol-ai-typing i:nth-child(2),
.sol-dai-typing i:nth-child(2) {
  animation-delay: .15s;
}

.sol-ai-typing i:nth-child(3),
.sol-dai-typing i:nth-child(3) {
  animation-delay: .3s;
}

.sol-ai-text {
  display: block;
  animation: sol-ai-text 8s ease infinite both;
}


/* ========================================
   CINTA DE SERVICIOS
======================================== */

.sol-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-block: 1px solid var(--sol-line);
  background: var(--sol-bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sol-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sol-marquee 46s linear infinite;
}

.sol-marquee:hover .sol-marquee-track {
  animation-play-state: paused;
}

/* margin (no gap) para que las dos mitades midan exactamente lo mismo. */
.sol-marquee-track > * {
  margin-right: clamp(28px, 3.4vw, 56px);
}

.sol-marquee-track span {
  font-size: clamp(34px, 5.2vw, 80px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
  transition: color .4s ease, -webkit-text-stroke-color .4s ease;
}

.sol-marquee-track span:hover {
  color: var(--sol-green);
  -webkit-text-stroke-color: var(--sol-green);
}

.sol-marquee-track i {
  flex: 0 0 auto;
  width: clamp(12px, 1.3vw, 20px);
  height: clamp(11px, 1.15vw, 18px);
  background: var(--sol-green);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}


/* ========================================
   MANIFIESTO
======================================== */

.sol-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: end;
}

.sol-manifesto .sol-h2 {
  font-size: clamp(44px, 6.6vw, 104px);
}

.sol-h2-soft {
  display: block;
  color: #87908b;
}

.sol-phrases {
  position: relative;
  margin: 0;
  padding: 0 0 0 36px;
  list-style: none;
}

.sol-phrases::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: #8ce7b5;
}

.sol-phrases li {
  position: relative;
  margin: 0 0 22px;
  color: #56615b;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.sol-phrases li:last-child {
  margin-bottom: 0;
  color: var(--sol-green-on-light);
}

.sol-phrases li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: .38em;
  width: 11px;
  height: 10px;
  background: #1fc875;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sol-equation {
  margin-top: clamp(72px, 9vw, 130px);
  padding-top: 34px;
  border-top: 1px solid var(--sol-paper-line);
}

.sol-equation p {
  margin: 0 0 16px;
  color: var(--sol-paper-muted);
  font-size: 17px;
}

.sol-equation strong {
  display: block;
  color: #101512;
  font-size: clamp(30px, 4.8vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.sol-equation em {
  font-style: normal;
  color: var(--sol-green-on-light);
}

/* En desktop corta en dos líneas prolijas: "DISEÑO + TECNOLOGÍA + IA" / "= NEGOCIO". */
@media (min-width: 901px) {

  .sol-eq-part {
    white-space: nowrap;
  }
}


/* ========================================
   SERVICIOS
======================================== */

.sol-services-section {
  padding-bottom: clamp(80px, 8vw, 120px);
  background:
    radial-gradient(50% 40% at 85% 0%, rgba(18, 61, 40, .45), transparent 70%),
    var(--sol-bg);
}

.sol-services {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* Índice fijo */

.sol-index {
  position: sticky;
  top: 120px;
}

.sol-index ol {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--sol-line);
}

.sol-index li a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0 12px 22px;
  color: var(--sol-dim);
  font-size: 16px;
  font-weight: 700;
  transition: color .3s ease;
}

.sol-index li a span {
  font-size: 11px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.sol-index li a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--sol-green);
  transform: scaleY(0);
  transition: transform .45s var(--sol-ease);
}

.sol-index li a:hover {
  color: #cfd8d2;
}

.sol-index li a.is-active {
  color: #fff;
}

.sol-index li a.is-active span {
  color: var(--sol-green);
}

.sol-index li a.is-active::before {
  transform: scaleY(1);
}

.sol-index-cta {
  display: inline-flex;
  gap: 8px;
  color: var(--sol-muted);
  font-size: 14px;
  line-height: 1.45;
  transition: color .25s ease;
}

.sol-index-cta:hover {
  color: var(--sol-green);
}

/* Capítulos */

.sol-chapter {
  padding-bottom: clamp(96px, 11vw, 160px);
}

.sol-chapter:last-child {
  padding-bottom: 0;
}

.sol-chapter-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "num   num"
    "title title"
    "lead  list"
    "ideal list"
    "link  list";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.sol-chapter-num {
  grid-area: num;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--sol-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
}

.sol-chapter-num span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--sol-dim);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sol-chapter-num span::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sol-line-2);
}

.sol-h3 {
  grid-area: title;
  margin: 0 0 26px;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 900;
}

.sol-chapter-lead {
  grid-area: lead;
  margin: 0 0 26px;
  color: #b9c3bd;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
}

.sol-includes {
  grid-area: list;
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sol-line);
}

.sol-includes li {
  position: relative;
  padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--sol-line);
  color: #dfe6e2;
  font-size: 15px;
  line-height: 1.45;
}

.sol-includes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 8px;
  margin-top: -4px;
  background: var(--sol-green);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sol-ideal {
  grid-area: ideal;
  margin: 0 0 30px;
  color: var(--sol-muted);
  font-size: 15px;
  line-height: 1.55;
}

.sol-ideal span {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sol-link {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(32, 239, 125, .35);
  color: var(--sol-green);
  font-size: 15px;
  font-weight: 800;
  transition: gap .35s var(--sol-ease), border-color .3s ease;
}

/* Área táctil de ~44 px en celular y pantallas táctiles, sin cambiar el aspecto. */
@media (max-width: 900px), (pointer: coarse) {

  .sol-link,
  .sol-page .sol-header-cta {
    position: relative;
  }

  .sol-link::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }

  .sol-page .sol-header-cta::after {
    content: "";
    position: absolute;
    inset: -7px -3px;
  }
}

.sol-link:hover {
  gap: 16px;
  border-color: var(--sol-green);
}

.sol-ai-tech {
  grid-area: ideal;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 30px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(32, 239, 125, .25);
  background: rgba(32, 239, 125, .05);
  color: #c9d3cd;
  font-size: 14px;
  line-height: 1.5;
}

.sol-ai-tech img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--sol-line);
  background: var(--sol-bg);
}

.sol-ai-tech strong {
  color: #fff;
}


/* ---------- Lienzo de las demos ---------- */

.sol-demo {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: clamp(36px, 4vw, 56px);
  border-radius: 28px;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--sol-line);
  background:
    radial-gradient(70% 80% at 80% 0%, rgba(32, 239, 125, .13), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(18, 61, 40, .5), transparent 70%),
    #06110a;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}

.sol-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 6cqw 6cqw;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%);
  pointer-events: none;
}

.sol-cursor {
  position: absolute;
  z-index: 6;
  width: 3.4cqw;
  height: 3.4cqw;
  fill: #fff;
  stroke: #03110a;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .5));
  opacity: 0;
  transform-origin: 20% 12%;
  pointer-events: none;
}

/* ---------- Demos conceptuales: Web, E-commerce y Landing (01 · 02 · 03) ----------
   Composiciones realistas hechas con CSS + SVG inline (sin imágenes externas).
   Las tres son ejemplos ficticios: marcas, textos y datos son de muestra.
   Todo se mide en cqw (ancho de la demo) para escalar entero en cualquier pantalla. */

.sx-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sx-demo {
  background:
    radial-gradient(70% 80% at 85% 0%, rgba(32, 239, 125, .12), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(18, 61, 40, .45), transparent 70%),
    #05100a;
}

.sx-demo svg {
  display: block;
}

.sx-tag {
  position: absolute;
  right: 2.4cqw;
  bottom: max(3px, 1.3cqw);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .7cqw;
  padding: max(2px, .4cqw) max(8px, 1.6cqw);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(5, 12, 8, .72);
  color: #aab6af;
  font-size: clamp(7.5px, 1.15cqw, 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sx-tag::before {
  content: "";
  width: .8cqw;
  height: .8cqw;
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  background: var(--sol-green);
}

/* Ventana de navegador y teléfono */

.sx-win {
  position: absolute;
  z-index: 2;
  border-radius: 1.5cqw;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
}

.sx-bar {
  display: flex;
  align-items: center;
  gap: .8cqw;
  height: 4.4cqw;
  padding: 0 1.8cqw;
  background: #eceff1;
  border-bottom: 1px solid #d7dcdf;
}

.sx-bar > i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #c5cacd;
}

.sx-bar > i:nth-child(1) { background: #ff6058; }
.sx-bar > i:nth-child(2) { background: #ffbd2e; }
.sx-bar > i:nth-child(3) { background: #28c940; }

.sx-url {
  display: flex;
  align-items: center;
  gap: .7cqw;
  margin: 0 auto;
  padding: .55cqw 2.6cqw;
  border-radius: 99px;
  background: #fff;
  color: #6a7378;
  font-size: 1.2cqw;
  white-space: nowrap;
}

.sx-url b {
  width: .9cqw;
  height: 1.1cqw;
  border-radius: .2cqw;
  background: #2eaa5e;
}

.sx-page {
  position: relative;
  overflow: hidden;
  font-size: 1.2cqw;
}

.sx-page p {
  margin: 0;
}

.sx-phone {
  position: absolute;
  z-index: 3;
  aspect-ratio: 9 / 18.5;
  padding: .9cqw;
  border-radius: 3.4cqw;
  background: linear-gradient(160deg, #1a2127, #090d10);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .6);
}

.sx-phone-in {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.6cqw;
  background: #0b1620;
  color: #fff;
}

.sx-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 72% 62%;
  animation: sx-pan 18s ease-in-out infinite alternate;
}

/* Entradas escalonadas (en loop) */

.sx-cursor {
  left: 0;
  top: 0;
}

.sx-in {
  animation: sx-in 9s var(--sol-ease) infinite both;
  animation-delay: calc(var(--i, 0) * 140ms);
}


/* ---------- 01 · Web corporativa (Forja Norte) ---------- */

.sx-web-win {
  left: 4cqw;
  top: 5.5cqw;
  width: 72cqw;
  height: 51.5cqw;
}

.sx-fn {
  height: calc(51.5cqw - 4.4cqw);
  background: #0b1620;
  color: #fff;
}

.sx-fn-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 5.4cqw;
  padding: 0 3cqw;
  background: #0b1620;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sx-fn-brand {
  display: flex;
  align-items: center;
  gap: .9cqw;
  font-size: 1.3cqw;
  font-weight: 900;
  letter-spacing: .16em;
}

.sx-fn-brand svg,
.sx-ph-brand svg {
  width: 2cqw;
  height: 2cqw;
  fill: none;
  stroke: #ff7a1a;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sx-fn-links {
  display: flex;
  gap: 2.6cqw;
  margin: 0 auto;
  color: #b9c6d0;
  font-size: 1.2cqw;
  font-weight: 500;
}

.sx-fn-cta {
  padding: .9cqw 1.9cqw;
  border-radius: .7cqw;
  background: #ff7a1a;
  color: #fff;
  font-size: 1.15cqw;
  font-weight: 800;
}

.sx-fn-hero {
  position: relative;
  height: 30.2cqw;
  overflow: hidden;
}

.sx-fn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 14, 22, .94) 0, rgba(6, 14, 22, .72) 40%, rgba(6, 14, 22, 0) 74%),
    linear-gradient(0deg, rgba(11, 22, 32, .85), transparent 38%);
}

.sx-fn-copy {
  position: absolute;
  z-index: 2;
  left: 3.2cqw;
  top: 3.1cqw;
  width: 34cqw;
}

.sx-fn-eyebrow {
  margin-bottom: 1.3cqw !important;
  color: #ff9a4d;
  font-size: 1cqw;
  font-weight: 800;
  letter-spacing: .2em;
}

.sx-fn-title {
  margin-bottom: 1.4cqw !important;
  font-size: 3.2cqw;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.sx-fn-text {
  margin-bottom: 2.2cqw !important;
  max-width: 29cqw;
  color: #c3d0da;
  font-size: 1.2cqw;
  line-height: 1.5;
}

.sx-fn-actions {
  display: flex;
  gap: 1.2cqw;
}

.sx-fn-btn {
  display: inline-flex;
  align-items: center;
  padding: 1.1cqw 2.2cqw;
  border-radius: .7cqw;
  font-size: 1.2cqw;
  font-weight: 800;
  white-space: nowrap;
}

.sx-fn-btn-fill {
  background: #ff7a1a;
  color: #fff;
  animation: sx-w-btn 9s ease infinite both;
}

.sx-fn-btn-line {
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
}

.sx-fn-svc {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
  padding: 0 3cqw;
  margin-top: -2.6cqw;
}

.sx-fn-card {
  display: flex;
  flex-direction: column;
  gap: .6cqw;
  padding: 1.6cqw 1.9cqw 1.9cqw;
  border-radius: 1.2cqw;
  background: #122230;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1.6cqw 3.4cqw rgba(0, 0, 0, .4);
}

.sx-fn-card svg {
  width: 2.8cqw;
  height: 2.8cqw;
  margin-bottom: .6cqw;
  fill: none;
  stroke: #ff8f3d;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-fn-card b {
  font-size: 1.35cqw;
  letter-spacing: -.01em;
}

.sx-fn-card span {
  color: #9fb0bd;
  font-size: 1.1cqw;
  line-height: 1.45;
}

/* Celular */

.sx-web-phone {
  right: 3.4cqw;
  bottom: 5.6cqw;
  width: 17.6cqw;
}

.sx-ph-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.6cqw;
  padding: 0 1.8cqw;
  font-size: .85cqw;
  font-weight: 700;
}

.sx-ph-status i {
  width: 4.2cqw;
  height: 1.1cqw;
  border-radius: 99px;
  background: #000;
}

.sx-ph-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.8cqw;
  padding: 0 1.6cqw;
}

.sx-ph-brand {
  display: flex;
  align-items: center;
  gap: .6cqw;
  font-size: .85cqw;
  font-weight: 900;
  letter-spacing: .14em;
}

.sx-ph-brand svg {
  width: 1.5cqw;
  height: 1.5cqw;
}

.sx-ph-burger {
  display: grid;
  gap: .35cqw;
}

.sx-ph-burger i {
  display: block;
  width: 1.7cqw;
  height: .2cqw;
  background: #fff;
}

.sx-ph-hero {
  position: relative;
  height: 14.4cqw;
  overflow: hidden;
}

.sx-ph-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 14, 22, .96) 0, rgba(6, 14, 22, .84) 52%, rgba(6, 14, 22, .55));
}

.sx-ph-copy {
  position: absolute;
  z-index: 2;
  left: 1.6cqw;
  right: 1.6cqw;
  bottom: 1.6cqw;
}

.sx-ph-eyebrow {
  margin-bottom: .6cqw !important;
  color: #ff9a4d;
  font-size: .62cqw;
  font-weight: 800;
  letter-spacing: .16em;
}

.sx-ph-title {
  margin-bottom: .9cqw !important;
  font-size: 1.6cqw;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.03em;
}

.sx-ph-btn {
  display: inline-block;
  padding: .7cqw 1.3cqw;
  border-radius: .5cqw;
  background: #ff7a1a;
  font-size: .85cqw;
  font-weight: 800;
}

.sx-ph-list {
  display: grid;
  gap: .8cqw;
  padding: 1.2cqw 1.6cqw;
}

.sx-ph-row {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: .9cqw 1.1cqw;
  border-radius: .9cqw;
  background: #122230;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #9fb0bd;
  font-size: .8cqw;
  line-height: 1.35;
}

.sx-ph-row b {
  display: block;
  color: #fff;
  font-size: .95cqw;
}

.sx-ph-row svg {
  flex: 0 0 auto;
  width: 2.3cqw;
  height: 2.3cqw;
  fill: none;
  stroke: #ff8f3d;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-web-cursor {
  --p0: translate(40cqw, 50cqw);
  --p1: translate(13.8cqw, 39.6cqw);
  animation: sx-w-cursor 9s var(--sol-ease) infinite both;
}


/* ---------- 02 · Tienda online (vessa) ---------- */

.sx-shop-win {
  left: 4cqw;
  top: 5.5cqw;
  width: 92cqw;
  height: 51.5cqw;
}

.sx-st {
  height: calc(51.5cqw - 4.4cqw);
  background: #fbf8f3;
  color: #1c1a17;
}

.sx-st-promo {
  display: grid;
  place-items: center;
  height: 2.6cqw;
  background: #1c1a17;
  color: #efe9de;
  font-size: 1cqw;
  font-weight: 600;
  letter-spacing: .06em;
}

.sx-st-nav {
  display: flex;
  align-items: center;
  height: 5.2cqw;
  padding: 0 4cqw;
  border-bottom: 1px solid #ebe5d9;
}

.sx-st-logo {
  font-size: 2.1cqw;
  font-weight: 900;
  letter-spacing: -.04em;
}

.sx-st-links {
  display: flex;
  gap: 2.8cqw;
  margin: 0 auto;
  color: #5d574d;
  font-size: 1.2cqw;
  font-weight: 600;
}

.sx-st-icons {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.sx-st-icons > svg,
.sx-st-cart svg {
  width: 2.2cqw;
  height: 2.2cqw;
  fill: none;
  stroke: #1c1a17;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-st-cart {
  position: relative;
  display: block;
}

.sx-badge {
  position: absolute;
  top: -.9cqw;
  right: -1cqw;
  display: grid;
  place-items: center;
  min-width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 99px;
  background: #1e7a53;
  color: #fff;
  font-size: 1cqw;
  font-weight: 800;
  animation: sx-s-badge 11s var(--sol-ease) infinite both;
}

.sx-st-main {
  display: grid;
  grid-template-columns: 46cqw minmax(0, 1fr);
  gap: 5cqw;
  padding: 2.4cqw 4cqw;
}

.sx-st-gallery {
  display: grid;
  grid-template-columns: 7.6cqw minmax(0, 1fr);
  gap: 1.6cqw;
}

.sx-st-thumbs {
  display: grid;
  align-content: start;
  gap: 1.4cqw;
}

.sx-st-thumb {
  display: grid;
  place-items: center;
  height: 8.6cqw;
  border-radius: 1cqw;
  background: #f0eadf;
  border: 1.5px solid transparent;
}

.sx-st-thumb.sx-th-on {
  border-color: #1c1a17;
}

.sx-st-thumb svg {
  width: 3.2cqw;
  height: 6.4cqw;
}

.sx-st-stage {
  position: relative;
  height: 34cqw;
  overflow: hidden;
  border-radius: 1.6cqw;
  background:
    radial-gradient(60% 55% at 50% 45%, #fffdf8 0, #f2ebde 70%),
    #f2ebde;
}

.sx-st-new {
  position: absolute;
  top: 1.6cqw;
  left: 1.6cqw;
  padding: .5cqw 1.3cqw;
  border-radius: 99px;
  background: #1c1a17;
  color: #fff;
  font-size: .95cqw;
  font-weight: 700;
}

.sx-st-shadow {
  position: absolute;
  left: 50%;
  bottom: 3cqw;
  width: 15cqw;
  height: 2.6cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 40, 15, .35), transparent);
}

.sx-bottle {
  position: absolute;
  left: 50%;
  bottom: 4.2cqw;
  width: 13.4cqw;
  height: 26.8cqw;
  transform: translateX(-50%);
}

.sx-bt-green {
  opacity: 0;
  animation: sx-s-bgreen 11s ease infinite both;
}

.sx-bt-sand {
  animation: sx-s-bsand 11s ease infinite both;
}

.sx-st-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sx-st-crumb {
  margin-bottom: 1.2cqw !important;
  color: #8a8376;
  font-size: 1.05cqw;
}

.sx-st-crumb span {
  margin: 0 .3cqw;
}

.sx-st-title {
  margin-bottom: .4cqw !important;
  font-size: 2.55cqw;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.sx-st-sub {
  margin-bottom: 1.5cqw !important;
  color: #7a7468;
  font-size: 1.2cqw;
}

.sx-st-price {
  margin-bottom: 1.8cqw !important;
  font-size: 2.8cqw;
  font-weight: 800;
  letter-spacing: -.03em;
}

.sx-st-label {
  margin-bottom: .9cqw !important;
  color: #6c665b;
  font-size: 1.1cqw;
  font-weight: 600;
}

.sx-st-cname {
  position: relative;
  display: inline-block;
  min-width: 4cqw;
  color: #1c1a17;
  font-weight: 800;
}

.sx-st-cname b {
  font-weight: 800;
}

.sx-cn-b {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: sx-s-cb 11s ease infinite both;
}

.sx-cn-a {
  animation: sx-s-ca 11s ease infinite both;
}

.sx-st-sw {
  display: flex;
  gap: 1.3cqw;
  margin-bottom: 1.8cqw;
}

.sx-sw {
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .32cqw transparent;
}

.sx-sw-sand {
  animation: sx-s-ring-a 11s ease infinite both;
}

.sx-sw-green {
  animation: sx-s-ring-b 11s ease infinite both;
}

.sx-st-sizes {
  display: flex;
  gap: 1cqw;
  margin-bottom: 2cqw;
}

.sx-st-sizes span {
  padding: .9cqw 1.8cqw;
  border-radius: .7cqw;
  border: 1px solid #d9d1c3;
  color: #4d483f;
  font-size: 1.1cqw;
  font-weight: 700;
}

.sx-st-sizes span.on {
  border-color: #1c1a17;
  background: #1c1a17;
  color: #fff;
}

.sx-st-add {
  display: grid;
  place-items: center;
  height: 4.6cqw;
  border-radius: 99px;
  background: #1e7a53;
  color: #fff;
  font-size: 1.3cqw;
  font-weight: 800;
  animation: sx-s-add 11s ease infinite both;
}

.sx-st-perks {
  margin-top: 1.3cqw !important;
  color: #8a8376;
  font-size: 1cqw;
  text-align: center;
}

/* Carrito lateral y pedido confirmado */

.sx-st-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(20, 16, 10, .42);
  opacity: 0;
  animation: sx-s-scrim 11s ease infinite both;
}

.sx-st-drawer {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 32cqw;
  padding: 2.4cqw 2.4cqw 2.6cqw;
  background: #fff;
  box-shadow: -2cqw 0 5cqw rgba(0, 0, 0, .25);
  transform: translateX(105%);
  animation: sx-s-drawer 11s var(--sol-ease) infinite both;
}

.sx-dr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1.6cqw;
  border-bottom: 1px solid #ebe5d9;
}

.sx-dr-head b {
  font-size: 1.9cqw;
  letter-spacing: -.03em;
}

.sx-dr-head span {
  color: #8a8376;
  font-size: 1.1cqw;
}

.sx-dr-item {
  display: grid;
  grid-template-columns: 7cqw minmax(0, 1fr) auto;
  gap: 1.4cqw;
  align-items: start;
  padding: 2cqw 0;
  border-bottom: 1px solid #ebe5d9;
}

.sx-dr-thumb {
  display: grid;
  place-items: center;
  height: 8.6cqw;
  border-radius: 1cqw;
  background: #f0eadf;
}

.sx-dr-thumb svg {
  width: 3.4cqw;
  height: 6.8cqw;
}

.sx-dr-desc {
  display: flex;
  flex-direction: column;
  gap: .4cqw;
  font-size: 1.2cqw;
}

.sx-dr-desc b {
  line-height: 1.2;
}

.sx-dr-desc small {
  color: #8a8376;
  font-size: 1.05cqw;
}

.sx-dr-qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: .8cqw;
  border: 1px solid #ddd5c7;
  border-radius: 99px;
  font-size: 1.1cqw;
}

.sx-dr-qty i,
.sx-dr-qty b {
  display: grid;
  place-items: center;
  width: 2.2cqw;
  height: 2.2cqw;
  font-style: normal;
}

.sx-dr-price {
  font-size: 1.3cqw;
}

.sx-dr-total {
  display: flex;
  justify-content: space-between;
  margin-top: 2cqw;
  font-size: 1.5cqw;
}

.sx-dr-total b {
  font-size: 1.8cqw;
}

.sx-dr-note {
  margin-top: .6cqw !important;
  color: #8a8376;
  font-size: 1cqw;
}

.sx-dr-btn {
  display: grid;
  place-items: center;
  height: 4.6cqw;
  margin-top: auto;
  border-radius: 99px;
  background: #1c1a17;
  color: #fff;
  font-size: 1.3cqw;
  font-weight: 800;
  animation: sx-s-pay 11s ease infinite both;
}

.sx-st-done {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  background: rgba(251, 248, 243, .9);
  opacity: 0;
  animation: sx-s-done 11s ease infinite both;
}

.sx-done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32cqw;
  padding: 3.4cqw 3cqw 3cqw;
  border-radius: 2cqw;
  background: #fff;
  border: 1px solid #ebe5d9;
  box-shadow: 0 3cqw 8cqw rgba(60, 40, 15, .18);
  text-align: center;
  animation: sx-s-card 11s var(--sol-ease) infinite both;
}

.sx-done-check {
  position: relative;
  width: 5.6cqw;
  height: 5.6cqw;
  margin-bottom: 1.6cqw;
  border-radius: 50%;
  background: #1e7a53;
}

.sx-done-check::after {
  content: "";
  position: absolute;
  left: 36%;
  top: 20%;
  width: 24%;
  height: 46%;
  border: solid #fff;
  border-width: 0 .5cqw .5cqw 0;
  transform: rotate(45deg);
}

.sx-done-card b {
  font-size: 2.2cqw;
  letter-spacing: -.03em;
}

.sx-done-card p {
  margin: .7cqw 0 2cqw !important;
  color: #7a7468;
  font-size: 1.2cqw;
}

.sx-done-row {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  width: 100%;
  padding: 1.2cqw;
  border-radius: 1cqw;
  background: #f6f1e7;
  font-size: 1.1cqw;
  text-align: left;
}

.sx-done-row span:nth-child(2) {
  flex: 1;
}

.sx-done-row b {
  font-size: 1.2cqw;
}

.sx-done-thumb {
  display: grid;
  place-items: center;
  width: 4cqw;
  height: 4cqw;
  border-radius: .8cqw;
  background: #ebe3d3;
}

.sx-done-thumb svg {
  width: 1.8cqw;
  height: 3.6cqw;
}

.sx-shop-cursor {
  --p0: translate(84cqw, 46cqw);
  --p1: translate(63.8cqw, 37.1cqw);
  --p2: translate(78.7cqw, 50.1cqw);
  --p3: translate(80.6cqw, 51.7cqw);
  animation: sx-s-cursor 11s var(--sol-ease) infinite both;
}


/* ---------- 03 · Landing page (aire) ---------- */

.sx-land-win {
  left: 6cqw;
  top: 5.5cqw;
  width: 88cqw;
  height: 51.5cqw;
}

.sx-lp {
  height: calc(51.5cqw - 4.4cqw);
  background: #fff;
  color: #0d1a1d;
}

.sx-lp-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 5cqw;
  padding: 0 5cqw;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e5eced;
}

.sx-lp-brand {
  display: flex;
  align-items: center;
  gap: .8cqw;
  font-size: 2cqw;
  font-weight: 900;
  letter-spacing: -.04em;
}

.sx-lp-brand i {
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  border: .45cqw solid #0fb5a3;
  box-shadow: inset 0 0 0 .3cqw #fff, inset 0 0 0 .8cqw #0fb5a3;
}

.sx-lp-links {
  display: flex;
  gap: 2.8cqw;
  margin: 0 auto;
  color: #566a6e;
  font-size: 1.2cqw;
  font-weight: 600;
}

.sx-lp-navcta {
  padding: .9cqw 1.9cqw;
  border-radius: 99px;
  border: 1px solid #0c9b8c;
  color: #0a7f73;
  font-size: 1.15cqw;
  font-weight: 800;
}

.sx-lp-view {
  position: relative;
  height: calc(51.5cqw - 4.4cqw - 5cqw);
  overflow: hidden;
}

.sx-lp-scroll {
  height: 200%;
  animation: sx-l-scroll 12s cubic-bezier(.6, 0, .25, 1) infinite both;
}

.sx-lp-s1,
.sx-lp-s2 {
  height: 50%;
  padding: 0 5cqw;
}

.sx-lp-s1 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3cqw;
  align-items: center;
  background: linear-gradient(180deg, #fff 0, #f0faf8 100%);
}

.sx-lp-pill {
  display: inline-flex;
  align-items: center;
  gap: .8cqw;
  margin-bottom: 1.8cqw;
  padding: .6cqw 1.5cqw;
  border-radius: 99px;
  background: #e2f6f3;
  color: #0a7f73;
  font-size: 1.05cqw;
  font-weight: 800;
}

.sx-lp-pill i {
  width: .8cqw;
  height: .8cqw;
  border-radius: 50%;
  background: #0fb5a3;
}

.sx-lp-title {
  text-wrap: balance;
  margin-bottom: 1.6cqw !important;
  font-size: 4.6cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}

.sx-lp-text {
  max-width: 32cqw;
  margin-bottom: 2.4cqw !important;
  color: #4f6468;
  font-size: 1.4cqw;
  line-height: 1.5;
}

.sx-lp-actions {
  display: flex;
  gap: 1.2cqw;
  margin-bottom: 2.4cqw;
}

.sx-lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.3cqw 2.6cqw;
  border-radius: 99px;
  background: #0c9b8c;
  color: #fff;
  font-size: 1.35cqw;
  font-weight: 800;
  box-shadow: 0 1cqw 2.6cqw rgba(12, 155, 140, .3);
  animation: sx-l-cta 12s ease infinite both;
}

.sx-lp-ghost {
  display: inline-flex;
  align-items: center;
  padding: 1.3cqw 2.4cqw;
  border-radius: 99px;
  border: 1px solid #c9dadc;
  color: #28464b;
  font-size: 1.35cqw;
  font-weight: 700;
}

.sx-lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .8cqw 2cqw;
  color: #35575c;
  font-size: 1.1cqw;
  font-weight: 600;
}

.sx-lp-chips span::before {
  content: "✓";
  margin-right: .6cqw;
  color: #0fb5a3;
  font-weight: 900;
}

.sx-lp-art {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
}

.sx-lp-orb {
  position: absolute;
  width: 32cqw;
  height: 32cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff0e8, #5fd2c3 55%, #1fa595);
  box-shadow: 0 4cqw 8cqw rgba(15, 181, 163, .3);
}

.sx-lp-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(15, 181, 163, .45);
  animation: sx-l-ring 4s ease-out infinite;
}

.sx-lp-ring-1 {
  width: 32cqw;
  height: 32cqw;
}

.sx-lp-ring-2 {
  width: 32cqw;
  height: 32cqw;
  animation-delay: 2s;
}

.sx-lp-product {
  position: relative;
  width: 13.2cqw;
  height: 24.8cqw;
  filter: drop-shadow(0 2cqw 2.4cqw rgba(8, 60, 55, .35));
}

.sx-lp-card {
  position: absolute;
  right: 0;
  bottom: 4.5cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.3cqw 2cqw 1.3cqw 1.4cqw;
  border-radius: 1.4cqw;
  background: #fff;
  box-shadow: 0 2cqw 4.6cqw rgba(8, 60, 55, .22);
}

.sx-lp-card-dot {
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: conic-gradient(#0fb5a3 0 82%, #d8eeea 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
  mask: radial-gradient(circle, transparent 38%, #000 40%);
}

.sx-lp-card small {
  display: block;
  color: #6a8084;
  font-size: .95cqw;
}

.sx-lp-card b {
  font-size: 1.3cqw;
}

.sx-lp-s2 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 5cqw;
  align-items: center;
  background: #fff;
}

.sx-lp-eyebrow {
  margin-bottom: 1cqw !important;
  color: #0a7f73;
  font-size: 1cqw;
  font-weight: 800;
  letter-spacing: .2em;
}

.sx-lp-h2 {
  margin-bottom: 2.4cqw !important;
  font-size: 2.9cqw;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.sx-lp-bitem {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 1.5cqw 0;
  border-top: 1px solid #e5eced;
  color: #5a6f73;
  font-size: 1.15cqw;
  line-height: 1.4;
}

.sx-lp-bitem b {
  display: block;
  margin-bottom: .2cqw;
  color: #0d1a1d;
  font-size: 1.4cqw;
}

.sx-lp-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 1.2cqw;
  background: #e2f6f3;
}

.sx-lp-ico svg {
  width: 2.2cqw;
  height: 2.2cqw;
  fill: none;
  stroke: #0a7f73;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sx-lp-form {
  padding: 2.4cqw 2.6cqw 2.6cqw;
  border-radius: 1.8cqw;
  background: #fff;
  border: 1px solid #dcebec;
  box-shadow: 0 2.4cqw 6cqw rgba(8, 60, 55, .14);
}

.sx-lp-ftitle {
  margin-bottom: 1.6cqw !important;
  font-size: 2cqw;
  font-weight: 900;
  letter-spacing: -.03em;
}

.sx-lp-field {
  display: block;
  margin-bottom: 1.2cqw;
}

.sx-lp-field small {
  display: block;
  margin-bottom: .5cqw;
  color: #4f6468;
  font-size: 1cqw;
  font-weight: 700;
}

.sx-lp-input {
  position: relative;
  display: block;
  height: 3.6cqw;
  padding: 0 1.4cqw;
  border-radius: .9cqw;
  border: 1px solid #cfdfe0;
  background: #fff;
  font-size: 1.2cqw;
  line-height: 3.5cqw;
}

.sx-lp-input em {
  position: absolute;
  left: 1.4cqw;
  color: #9db0b3;
  font-style: normal;
}

.sx-typed {
  position: relative;
  display: inline-block;
  color: #0d1a1d;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.sx-lp-send {
  display: grid;
  place-items: center;
  height: 4cqw;
  margin-top: 1.8cqw;
  border-radius: 99px;
  background: #0c9b8c;
  color: #fff;
  font-size: 1.3cqw;
  font-weight: 800;
  animation: sx-l-send 12s ease infinite both;
}

.sx-lp-done {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  text-align: center;
  opacity: 0;
  animation: sx-l-done 12s ease infinite both;
}

.sx-lp-done .sx-done-check {
  background: #0c9b8c;
}

.sx-lp-done b {
  font-size: 2.6cqw;
  letter-spacing: -.03em;
}

.sx-lp-done p {
  margin: .8cqw 0 0 !important;
  color: #566a6e;
  font-size: 1.3cqw;
}

.sx-land-cursor {
  --p0: translate(40cqw, 50cqw);
  --p1: translate(17.3cqw, 44.6cqw);
  --p2: translate(67.7cqw, 28.9cqw);
  --p3: translate(67.7cqw, 35.4cqw);
  --p4: translate(67.7cqw, 41.9cqw);
  --p5: translate(73.2cqw, 47.5cqw);
  animation: sx-l-cursor 12s var(--sol-ease) infinite both;
}


/* ---------- Animaciones de las demos ---------- */

@keyframes sx-in {
  0% { opacity: 0; transform: translateY(1.4cqw); }
  7%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes sx-pan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-1.6cqw, -.6cqw, 0); }
}

/* Web */

@keyframes sx-w-cursor {
  0%, 36% { opacity: 0; transform: var(--p0); }
  42% { opacity: 1; transform: var(--p0); }
  56% { opacity: 1; transform: var(--p1); }
  60% { opacity: 1; transform: var(--p1) scale(.85); }
  64%, 80% { opacity: 1; transform: var(--p1); }
  88%, 100% { opacity: 0; transform: var(--p1); }
}

@keyframes sx-w-btn {
  0%, 54%, 88%, 100% { background: #ff7a1a; transform: none; box-shadow: none; }
  58%, 80% { background: #ff8f3d; transform: translateY(-.3cqw); box-shadow: 0 1cqw 2.6cqw rgba(255, 122, 26, .45); }
}

/* Tienda (11s) */

@keyframes sx-s-cursor {
  0%, 4% { opacity: 0; transform: var(--p0); }
  9% { opacity: 1; transform: var(--p0); }
  18% { opacity: 1; transform: var(--p1); }
  20% { opacity: 1; transform: var(--p1) scale(.85); }
  22%, 28% { opacity: 1; transform: var(--p1); }
  34% { opacity: 1; transform: var(--p2); }
  36% { opacity: 1; transform: var(--p2) scale(.85); }
  38%, 42% { opacity: 1; transform: var(--p2); }
  54% { opacity: 1; transform: var(--p3); }
  56% { opacity: 1; transform: var(--p3) scale(.85); }
  58%, 62% { opacity: 1; transform: var(--p3); }
  68%, 100% { opacity: 0; transform: var(--p3); }
}

@keyframes sx-s-ring-a {
  0%, 19% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw #1c1a17; }
  21%, 93% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw transparent; }
  98%, 100% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw #1c1a17; }
}

@keyframes sx-s-ring-b {
  0%, 19% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw transparent; }
  21%, 93% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw #1c1a17; }
  98%, 100% { box-shadow: 0 0 0 .2cqw #fbf8f3, 0 0 0 .38cqw transparent; }
}

@keyframes sx-s-bsand {
  0%, 19% { opacity: 1; transform: translateX(-50%); }
  24%, 92% { opacity: 0; transform: translateX(-50%); }
  99%, 100% { opacity: 1; transform: translateX(-50%); }
}

@keyframes sx-s-bgreen {
  0%, 19% { opacity: 0; transform: translateX(-50%) translateY(1cqw); }
  24%, 92% { opacity: 1; transform: translateX(-50%); }
  99%, 100% { opacity: 0; transform: translateX(-50%); }
}

@keyframes sx-s-ca {
  0%, 19% { opacity: 1; }
  22%, 92% { opacity: 0; }
  99%, 100% { opacity: 1; }
}

@keyframes sx-s-cb {
  0%, 19% { opacity: 0; }
  22%, 92% { opacity: 1; }
  99%, 100% { opacity: 0; }
}

@keyframes sx-s-add {
  0%, 35%, 40%, 100% { transform: none; background: #1e7a53; }
  37% { transform: scale(.96); background: #176142; }
}

@keyframes sx-s-badge {
  0%, 36% { transform: scale(0); }
  41% { transform: scale(1.35); }
  46%, 93% { transform: scale(1); }
  98%, 100% { transform: scale(0); }
}

@keyframes sx-s-scrim {
  0%, 38% { opacity: 0; }
  44%, 56% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

@keyframes sx-s-drawer {
  0%, 38% { transform: translateX(105%); }
  45%, 57% { transform: none; }
  63%, 100% { transform: translateX(105%); }
}

@keyframes sx-s-pay {
  0%, 55%, 60%, 100% { transform: none; background: #1c1a17; }
  57% { transform: scale(.96); background: #000; }
}

@keyframes sx-s-done {
  0%, 62% { opacity: 0; }
  67%, 92% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes sx-s-card {
  0%, 62% { transform: translateY(1.6cqw) scale(.96); }
  68%, 92% { transform: none; }
  100% { transform: none; }
}

/* Landing (12s) */

@keyframes sx-l-cursor {
  0%, 4% { opacity: 0; transform: var(--p0); }
  9% { opacity: 1; transform: var(--p0); }
  17% { opacity: 1; transform: var(--p1); }
  19% { opacity: 1; transform: var(--p1) scale(.85); }
  21%, 34% { opacity: 1; transform: var(--p1); }
  39% { opacity: 1; transform: var(--p2); }
  47% { opacity: 1; transform: var(--p2); }
  49% { opacity: 1; transform: var(--p3); }
  55% { opacity: 1; transform: var(--p3); }
  57% { opacity: 1; transform: var(--p4); }
  64% { opacity: 1; transform: var(--p4); }
  70% { opacity: 1; transform: var(--p5); }
  72% { opacity: 1; transform: var(--p5) scale(.85); }
  74%, 80% { opacity: 1; transform: var(--p5); }
  86%, 100% { opacity: 0; transform: var(--p5); }
}

@keyframes sx-l-cta {
  0%, 18%, 22%, 100% { transform: none; }
  19.5% { transform: scale(.95); }
}

@keyframes sx-l-scroll {
  0%, 22% { transform: none; }
  33%, 93% { transform: translateY(-50%); }
  100% { transform: none; }
}

@keyframes sx-l-send {
  0%, 71%, 75%, 100% { transform: none; background: #0c9b8c; }
  72.5% { transform: scale(.96); background: #087d70; }
}

@keyframes sx-l-done {
  0%, 74% { opacity: 0; }
  79%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

@keyframes sx-l-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Formulario de la landing: cada campo se enfoca y se escribe en su momento (12s). */

.sx-ty-1 { animation: sx-ty-1 12s infinite both; }
.sx-fi-1 { animation: sx-fo-1 12s infinite both; }
.sx-fi-1 em { animation: sx-ph-1 12s infinite both; }

@keyframes sx-ty-1 {
  0%, 40% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(11, end); }
  46%, 93% { opacity: 1; clip-path: inset(0 0 0 0); }
  98%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes sx-ph-1 {
  0%, 40% { opacity: 1; }
  40.8%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sx-fo-1 {
  0%, 39% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
  40%, 48% { border-color: #0fb5a3; box-shadow: 0 0 0 .3cqw rgba(15, 181, 163, .18); }
  49.5%, 100% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
}

.sx-ty-2 { animation: sx-ty-2 12s infinite both; }
.sx-fi-2 { animation: sx-fo-2 12s infinite both; }
.sx-fi-2 em { animation: sx-ph-2 12s infinite both; }

@keyframes sx-ty-2 {
  0%, 50% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(15, end); }
  55%, 93% { opacity: 1; clip-path: inset(0 0 0 0); }
  98%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes sx-ph-2 {
  0%, 50% { opacity: 1; }
  50.8%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sx-fo-2 {
  0%, 49% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
  50%, 56.5% { border-color: #0fb5a3; box-shadow: 0 0 0 .3cqw rgba(15, 181, 163, .18); }
  58.0%, 100% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
}

.sx-ty-3 { animation: sx-ty-3 12s infinite both; }
.sx-fi-3 { animation: sx-fo-3 12s infinite both; }
.sx-fi-3 em { animation: sx-ph-3 12s infinite both; }

@keyframes sx-ty-3 {
  0%, 58% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(20, end); }
  64%, 93% { opacity: 1; clip-path: inset(0 0 0 0); }
  98%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes sx-ph-3 {
  0%, 58% { opacity: 1; }
  58.8%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sx-fo-3 {
  0%, 57% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
  58%, 65% { border-color: #0fb5a3; box-shadow: 0 0 0 .3cqw rgba(15, 181, 163, .18); }
  66.5%, 100% { border-color: #cfdfe0; box-shadow: 0 0 0 0 rgba(15, 181, 163, 0); }
}


/* ---------- 04 · Automatizaciones ---------- */

.sol-df-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sol-df-base {
  fill: none;
  stroke: rgba(32, 239, 125, .22);
  stroke-width: 2;
}

/* pathLength=100: el destello mide 10% del trazo y lo recorre entero. */
.sol-df-signal {
  fill: none;
  stroke: var(--sol-green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 100;
  stroke-dashoffset: 10;
  filter: drop-shadow(0 0 4px rgba(32, 239, 125, .9));
  animation: sol-df-signal 3.2s linear infinite;
  animation-delay: var(--sd, 0s);
}

.sol-df-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 18%;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.2cqw 1.4cqw;
  border-radius: 1.8cqw;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(9, 22, 14, .95);
  color: #e3ebe6;
  font-size: clamp(9px, 1.45cqw, 13px);
  font-weight: 700;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  animation: sol-df-node 3.2s ease infinite both;
  animation-delay: var(--nd, 0s);
}

.sol-df-node .sol-node-icon {
  flex: 0 0 auto;
  width: 4.4cqw;
  height: 4.4cqw;
  padding: 1cqw;
  border-radius: 1.2cqw;
}

.sol-df-core {
  background: #0c2216;
}

.sol-df-log {
  position: absolute;
  left: 5%;
  bottom: 6%;
  display: grid;
  gap: .9cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-df-log li {
  display: flex;
  align-items: center;
  gap: 1cqw;
  color: #a9b5ae;
  font-size: clamp(9px, 1.4cqw, 12px);
  animation: sol-df-log 3.2s ease infinite both;
  animation-delay: calc(2.4s + var(--i, 0) * .2s);
}

.sol-df-log li::before {
  content: "✓";
  color: var(--sol-green);
  font-weight: 900;
}

/* Demo angosta (celular): nodos solo con texto y sin registro. */
@container (max-width: 560px) {

  .sol-df-node {
    justify-content: center;
    padding: 1.4cqw 1cqw;
    font-size: clamp(8px, 2.1cqw, 12px);
    text-align: center;
  }

  .sol-df-node .sol-node-icon,
  .sol-df-log {
    display: none;
  }
}


/* ---------- 05 · Inteligencia Artificial ---------- */

.sol-dai-chat {
  position: absolute;
  left: 6%;
  top: 8%;
  bottom: 8%;
  width: 54%;
  display: flex;
  flex-direction: column;
  border-radius: 2.4cqw;
  overflow: hidden;
  background: #0a1710;
  border: 1px solid rgba(81, 255, 156, .22);
  box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, .5);
}

.sol-dai-head {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.8cqw 2.2cqw;
  border-bottom: 1px solid var(--sol-line);
}

.sol-dai-head .sol-ai-avatar {
  width: 5cqw;
  height: 5cqw;
}

.sol-dai-head strong {
  display: block;
  font-size: clamp(10px, 1.7cqw, 14px);
}

.sol-dai-head small {
  display: flex;
  align-items: center;
  gap: .7cqw;
  color: var(--sol-muted);
  font-size: clamp(8px, 1.3cqw, 11px);
}

.sol-dai-head small i {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 1cqw var(--sol-green);
}

.sol-dai-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  padding: 2.2cqw;
  overflow: hidden;
}

.sol-dai-msg {
  max-width: 82%;
  margin: 0;
  padding: 1.3cqw 1.8cqw;
  border-radius: 1.8cqw 1.8cqw 1.8cqw .5cqw;
  background: #e7eee9;
  color: #102017;
  font-size: clamp(9px, 1.55cqw, 13px);
  line-height: 1.4;
  font-weight: 500;
}

.sol-dai-user {
  align-self: flex-end;
  border-radius: 1.8cqw 1.8cqw .5cqw 1.8cqw;
  background: var(--sol-green);
  color: #03110a;
  font-weight: 600;
}

/* Cada respuesta reserva su lugar; el "escribiendo…" aparece encima antes del texto. */
.sol-dai-slot {
  position: relative;
  align-self: flex-start;
  max-width: 82%;
}

.sol-dai-slot .sol-dai-msg {
  max-width: none;
}

.sol-dai-typing {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: .7cqw;
  padding: 1.6cqw 1.8cqw;
  border-radius: 1.8cqw;
  background: #26312b;
  opacity: 0;
}

.sol-dai-typing i {
  background: #a8b2ac;
}

.sol-dai-m1 { animation: sol-dai-m1 10s ease infinite both; }
.sol-dai-m2 { animation: sol-dai-m2 10s ease infinite both; }
.sol-dai-m3 { animation: sol-dai-m3 10s ease infinite both; }
.sol-dai-m4 { animation: sol-dai-m4 10s ease infinite both; }
.sol-dai-t1 { animation: sol-dai-t1 10s ease infinite both; }
.sol-dai-t2 { animation: sol-dai-t2 10s ease infinite both; }

.sol-dai-steps {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 30%;
  display: grid;
  gap: 3.2cqw;
  margin: 0;
  padding: 0 0 0 2.6cqw;
  list-style: none;
  border-left: 1px solid rgba(32, 239, 125, .25);
  transform: translateY(-50%);
}

.sol-dai-steps li {
  position: relative;
  color: #fff;
  font-size: clamp(10px, 1.7cqw, 15px);
  font-weight: 700;
  line-height: 1.3;
}

.sol-dai-steps li::before {
  content: "";
  position: absolute;
  left: calc(-2.6cqw - .55cqw);
  top: .4em;
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 1.4cqw var(--sol-green);
}

.sol-dai-s1 { animation: sol-dai-s1 10s ease infinite both; }
.sol-dai-s2 { animation: sol-dai-s2 10s ease infinite both; }
.sol-dai-s3 { animation: sol-dai-s3 10s ease infinite both; }


/* ========================================
   ¿QUÉ NECESITÁS HOY?
======================================== */

.sol-goals {
  padding-top: clamp(88px, 9vw, 136px);
  border-top: 1px solid var(--sol-line);
  background:
    radial-gradient(45% 60% at 100% 60%, rgba(18, 61, 40, .4), transparent 70%),
    var(--sol-bg);
}

.sol-goals-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.sol-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sol-line);
}

.sol-tabs [role="tab"] {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--sol-line);
  background: none;
  color: var(--sol-dim);
  font: inherit;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-align: left;
  cursor: pointer;
  transition: color .35s ease, padding-left .5s var(--sol-ease);
}

.sol-tabs [role="tab"] small {
  flex: 0 0 auto;
  width: 64px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sol-tabs [role="tab"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 12px;
  margin-top: -6px;
  background: var(--sol-green);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s ease, transform .5s var(--sol-ease);
}

.sol-tabs [role="tab"]:hover {
  color: #cfd8d2;
}

.sol-tabs [role="tab"][aria-selected="true"] {
  padding-left: 30px;
  color: #fff;
}

.sol-tabs [role="tab"][aria-selected="true"] small {
  color: var(--sol-green);
}

.sol-tabs [role="tab"][aria-selected="true"]::before {
  opacity: 1;
  transform: none;
}

.sol-panel {
  padding: clamp(32px, 4vw, 56px);
  border-radius: 28px;
  border: 1px solid rgba(81, 255, 156, .2);
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(32, 239, 125, .12), transparent 60%),
    rgba(9, 22, 14, .7);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
}

.sol-panel:not([hidden]) {
  animation: sol-fade-up .6s var(--sol-ease) both;
}

.sol-panel-label {
  margin: 0 0 22px;
  color: var(--sol-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sol-combo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px;
}

.sol-combo span {
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #e8eee9;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
}

.sol-combo span.is-main {
  border-color: var(--sol-green);
  background: var(--sol-green);
  color: #03110a;
}

.sol-combo b {
  color: var(--sol-green);
  font-size: 22px;
  font-weight: 400;
}

.sol-panel-text {
  max-width: 560px;
  margin: 0 0 36px;
  color: #b9c3bd;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.6;
}


/* ========================================
   CÓMO TRABAJAMOS
======================================== */

.sol-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 58px 0 0;
  list-style: none;
}

/* Riel y relleno verde que avanza al aparecer. */
.sol-steps::before,
.sol-steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 1px;
  background: var(--sol-paper-line);
}

.sol-steps::after {
  height: 2px;
  top: 11.5px;
  background: var(--sol-green-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--sol-ease) .3s;
}

.sol-steps.is-in::after,
html:not(.sol-js) .sol-steps::after {
  transform: scaleX(1);
}

.sol-steps li {
  position: relative;
}

.sol-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -52px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--sol-green-2);
  background: var(--sol-paper);
  transition: background .4s ease;
  transition-delay: calc(var(--i, 0) * .4s + .4s);
}

.sol-steps.is-in li::before {
  background: var(--sol-green-2);
}

.sol-step-num {
  display: block;
  margin-bottom: 28px;
  color: transparent;
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.06em;
  -webkit-text-stroke: 1.5px #b3c1b8;
  transition: -webkit-text-stroke-color .4s ease, color .4s ease;
}

.sol-steps li:hover .sol-step-num {
  color: var(--sol-green-2);
  -webkit-text-stroke-color: var(--sol-green-2);
}

.sol-steps h3 {
  margin: 0 0 12px;
  color: var(--sol-paper-text);
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.sol-steps p {
  margin: 0;
  color: var(--sol-paper-muted);
  font-size: 16px;
  line-height: 1.6;
}


/* ========================================
   DIFERENCIALES
======================================== */

.sol-pillars-section {
  overflow: hidden;
  background:
    radial-gradient(45% 50% at 0% 30%, rgba(18, 61, 40, .45), transparent 70%),
    var(--sol-bg);
}

.sol-pillars {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sol-line);
}

.sol-pillars li {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1fr) 60px;
  grid-template-areas: "num title text icon";
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(30px, 3.6vw, 50px) 0;
  border-bottom: 1px solid var(--sol-line);
}

.sol-pillars li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--sol-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--sol-ease);
}

.sol-pillars li:hover::after {
  transform: scaleX(1);
}

.sol-pillar-num {
  grid-area: num;
  color: var(--sol-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
}

.sol-pillars h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
  transition: transform .6s var(--sol-ease), color .4s ease;
}

.sol-pillars li:hover h3 {
  transform: translateX(10px);
}

.sol-pillars p {
  grid-area: text;
  margin: 0;
  color: var(--sol-muted);
  font-size: 16px;
  line-height: 1.6;
}

.sol-pillar-icon {
  grid-area: icon;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(32, 239, 125, .28);
  color: var(--sol-green);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.sol-pillar-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sol-pillars li:hover .sol-pillar-icon {
  border-color: var(--sol-green);
  background: var(--sol-green);
  color: #03110a;
}


/* ========================================
   PREGUNTAS FRECUENTES (marcado de faq.js)
======================================== */

.sol-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

.sol-faq-head {
  position: sticky;
  top: 120px;
}

.sol-faq-more {
  margin: 26px 0 0;
  color: var(--sol-paper-muted);
  font-size: 17px;
  line-height: 1.5;
}

.sol-faq-more a {
  color: var(--sol-green-on-light);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.sol-faq .faq-item {
  border-bottom: 1px solid var(--sol-paper-line);
}

.sol-faq .faq-item:first-child {
  border-top: 1px solid var(--sol-paper-line);
}

.sol-faq .faq-heading {
  margin: 0;
}

.sol-faq .faq-question {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 28px 0;
  border: 0;
  background: none;
  color: var(--sol-paper-text);
  font: inherit;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
}

.sol-faq .faq-question:focus-visible {
  border-radius: 6px;
}

.sol-faq .faq-question-text {
  flex: 1;
  transition: color .25s ease;
}

.sol-faq .faq-question:hover .faq-question-text,
.sol-faq .faq-question[aria-expanded="true"] .faq-question-text {
  color: var(--sol-green-on-light);
}

.sol-faq .faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sol-paper-line);
  transition: background .3s ease, border-color .3s ease;
}

.sol-faq .faq-icon::before,
.sol-faq .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--sol-paper-text);
  transition: transform .35s var(--sol-ease), background .3s ease;
}

.sol-faq .faq-icon::after {
  transform: rotate(90deg);
}

.sol-faq .faq-question[aria-expanded="true"] .faq-icon {
  border-color: var(--sol-green-2);
  background: var(--sol-green-2);
}

.sol-faq .faq-question[aria-expanded="true"] .faq-icon::before,
.sol-faq .faq-question[aria-expanded="true"] .faq-icon::after {
  background: #fff;
}

.sol-faq .faq-question[aria-expanded="true"] .faq-icon::after {
  transform: rotate(0);
}

.sol-faq .faq-answer-inner {
  padding: 0 62px 30px 0;
}

.sol-faq .faq-answer:not([hidden]) .faq-answer-inner {
  animation: sol-fade-up .5s var(--sol-ease) both;
}

.sol-faq .faq-answer-inner p {
  margin: 0;
  color: var(--sol-paper-muted);
  font-size: 17px;
  line-height: 1.7;
}


/* ========================================
   CONTACTO (reusa el formulario de styles.css)
======================================== */

.sol-page .sol-contact {
  isolation: isolate;
  padding: clamp(100px, 12vw, 170px) 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(19, 74, 45, .6), transparent 70%),
    var(--sol-bg);
}

.sol-orbit-contact {
  width: 1300px;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -1020px;
  margin: 0 0 0 -650px;
  border-color: rgba(86, 255, 160, .18);
}

.sol-page .sol-contact .sol-contact-title {
  margin: 0 0 26px;
  font-size: clamp(56px, 9.4vw, 124px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 900;
  background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}

.sol-chips {
  min-width: 0;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

.sol-chips legend {
  margin-bottom: 14px;
  padding: 0;
  color: #d8dedb;
  font-size: 14px;
  font-weight: 700;
}

.sol-chips legend em {
  font-style: normal;
  font-weight: 400;
  color: #849087;
}

.sol-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
  color: #dfe6e2;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.sol-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background .25s ease;
}

.sol-chip:hover {
  border-color: rgba(32, 239, 125, .6);
}

.sol-chip[aria-pressed="true"] {
  border-color: var(--sol-green);
  background: var(--sol-green);
  color: #03110a;
}

.sol-chip[aria-pressed="true"]::before {
  background: #03110a;
}

.sol-page .contact-field textarea::placeholder {
  color: #828d87;
  opacity: 1;
}


/* ========================================
   FOOTER
======================================== */

.sol-page .sol-footer {
  background: #030806;
}

.sol-footer a {
  color: #b4beb8;
  transition: color .25s ease;
}

.sol-footer a:hover {
  color: var(--sol-green);
}


/* ========================================
   ANIMACIONES
======================================== */

@keyframes sol-spin {
  to { transform: rotate(360deg); }
}

@keyframes sol-rise {
  from { transform: translate3d(0, 105%, 0); }
  to { transform: none; }
}

@keyframes sol-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sol-shine {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

@keyframes sol-scroll {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

@keyframes sol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6cqw); }
}

@keyframes sol-build {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}

@keyframes sol-signal {
  from { left: -40%; }
  to { left: 100%; }
}

@keyframes sol-marquee {
  to { transform: translateX(-50%); }
}

@keyframes sol-dot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-.4cqw); }
}

/* Hero: tienda (6s) */

@keyframes sol-press {
  0%, 16%, 26%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(32, 239, 125, 0); }
  20% { transform: scale(.94); box-shadow: 0 0 0 1.2cqw rgba(32, 239, 125, .25); }
}

@keyframes sol-badge {
  0%, 22% { transform: scale(0); }
  28% { transform: scale(1.25); }
  34%, 92% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes sol-toast {
  0%, 26% { opacity: 0; transform: translate3d(0, 2cqw, 0) scale(.94); }
  32%, 84% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translate3d(0, -1cqw, 0); }
}

/* Hero: IA (8s) */

@keyframes sol-ai-typing {
  0%, 4% { opacity: 0; }
  8%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@keyframes sol-ai-text {
  0%, 32% { opacity: 0; }
  38%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

/* Demo automatizaciones (3.2s) */

@keyframes sol-df-signal {
  0% { stroke-dashoffset: 10; }
  40%, 100% { stroke-dashoffset: -100; }
}

@keyframes sol-df-node {
  0%, 30%, 100% { border-color: rgba(255, 255, 255, .1); box-shadow: none; }
  8% { border-color: var(--sol-green); box-shadow: 0 0 0 .6cqw rgba(32, 239, 125, .15), 0 0 4cqw rgba(32, 239, 125, .35); }
}

@keyframes sol-df-log {
  0% { opacity: 0; transform: translateX(-1cqw); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: .35; transform: none; }
}

/* Demo IA (10s) */

@keyframes sol-dai-m1 {
  0%, 4% { opacity: 0; transform: translateY(1.2cqw); }
  8%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes sol-dai-m2 {
  0%, 26% { opacity: 0; transform: translateY(1.2cqw); }
  30%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes sol-dai-m3 {
  0%, 42% { opacity: 0; transform: translateY(1.2cqw); }
  46%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes sol-dai-m4 {
  0%, 64% { opacity: 0; transform: translateY(1.2cqw); }
  68%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes sol-dai-t1 {
  0%, 10% { opacity: 0; }
  13%, 25% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes sol-dai-t2 {
  0%, 48% { opacity: 0; }
  51%, 63% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

@keyframes sol-dai-s1 {
  0%, 9%, 24%, 47%, 60%, 100% { opacity: .3; }
  12%, 20%, 50%, 56% { opacity: 1; }
}

@keyframes sol-dai-s2 {
  0%, 17%, 30%, 55%, 66%, 100% { opacity: .3; }
  20%, 26%, 58%, 63% { opacity: 1; }
}

@keyframes sol-dai-s3 {
  0%, 25%, 44%, 63%, 84%, 100% { opacity: .3; }
  28%, 40%, 66%, 80% { opacity: 1; }
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {

  .sol-services {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-index {
    display: none;
  }
}

@media (max-width: 900px) {

  .sol-hero {
    min-height: 0;
    padding: 124px 0 88px;
  }

  .sol-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .sol-stage {
    max-width: 560px;
    margin: 0 auto;
  }

  .sol-orbit {
    width: 900px;
    right: -560px;
    top: 30%;
    margin-top: -450px;
  }

  .sol-orbit-2 {
    width: 1200px;
    right: -760px;
    margin-top: -600px;
  }

  .sol-orbit-contact {
    width: 900px;
    margin-left: -450px;
    bottom: -720px;
  }

  .sol-scroll-cue {
    display: none;
  }

  .sol-manifesto-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }

  .sol-chapter-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "title"
      "lead"
      "list"
      "ideal"
      "link";
    grid-template-rows: none;
  }

  .sol-goals-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border-top: 0;
  }

  .sol-tabs [role="tab"],
  .sol-tabs [role="tab"][aria-selected="true"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--sol-line-2);
    border-radius: 18px;
    font-size: clamp(19px, 3.6vw, 26px);
  }

  .sol-tabs [role="tab"] small {
    width: auto;
  }

  .sol-tabs [role="tab"]::before {
    display: none;
  }

  .sol-tabs [role="tab"][aria-selected="true"] {
    border-color: var(--sol-green);
    background: rgba(32, 239, 125, .08);
  }

  /* Pasos en vertical: riel a la izquierda. */
  .sol-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 0 0 0 46px;
  }

  .sol-steps::before,
  .sol-steps::after {
    left: 6px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
  }

  .sol-steps::after {
    left: 5.5px;
    width: 2px;
    transform: scaleY(0);
    transform-origin: top;
  }

  .sol-steps.is-in::after,
  html:not(.sol-js) .sol-steps::after {
    transform: scaleY(1);
  }

  .sol-steps li::before {
    left: -46px;
    top: 4px;
  }

  .sol-step-num {
    margin-bottom: 18px;
    font-size: 56px;
  }

  .sol-pillars li {
    grid-template-columns: 56px minmax(0, 1fr) 58px;
    grid-template-areas:
      "num title icon"
      ".   text  text";
    row-gap: 14px;
  }

  .sol-faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-faq-head {
    position: static;
  }
}

@media (max-width: 560px) {

  .sol-page .sol-header .header-inner {
    height: 66px;
  }

  .sol-page .sol-header .brand-link img {
    width: 100px;
  }

  .sol-hero {
    padding: 108px 0 72px;
  }

  .sol-hero-title {
    font-size: clamp(46px, 15vw, 66px);
  }

  .sol-hero-actions .sol-btn {
    flex: 1 1 100%;
  }

  .sol-section-head {
    margin-bottom: 52px;
  }

  .sol-phrases li {
    font-size: 26px;
  }

  .sol-demo {
    border-radius: 20px;
  }

  .sol-includes li {
    font-size: 15px;
  }

  .sol-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-tabs [role="tab"],
  .sol-tabs [role="tab"][aria-selected="true"] {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding: 16px 18px;
    font-size: 20px;
  }

  .sol-panel {
    padding: 30px 22px;
    border-radius: 22px;
  }

  .sol-panel .sol-btn {
    width: 100%;
  }

  .sol-combo span {
    padding: 10px 16px;
  }

  .sol-pillars li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "title"
      "text";
    row-gap: 12px;
  }

  .sol-pillar-icon {
    display: none;
  }

  .sol-faq .faq-question {
    gap: 16px;
    padding: 24px 0;
  }

  .sol-faq .faq-answer-inner {
    padding-right: 0;
  }

  .sol-chip {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {

  .sol-page .sol-header .header-actions {
    gap: 8px;
  }

  .sol-page .sol-header .brand-link img {
    width: 88px;
  }

  .sol-page .sol-header-cta {
    padding: 8px 11px;
    font-size: 11.5px;
  }
}


/* ========================================
   MOVIMIENTO REDUCIDO
   Sin animaciones: cada demo queda en su estado "completo"
   (los estados base del CSS son siempre el cuadro final visible).
======================================== */

@media (prefers-reduced-motion: reduce) {

  .sol-page *,
  .sol-page *::before,
  .sol-page *::after {
    animation: none !important;
  }

  .sol-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sol-layer,
  .sol-steps::after,
  .sol-steps li::before {
    transition: none;
  }
}