/* Estilos propios de la portada (index.html): escaparate de productos, cinta de tecnologias
   y ritmo visual entre secciones. Solo usa los tokens de base.css. */

/* ---------- Ritmo visual: fondos alternados, ondas y red tenue ---------- */
.seccion--tono {
  position: relative;
  isolation: isolate;
  background: var(--superficie-2);
}

.onda {
  display: block;
  line-height: 0;
  color: var(--superficie-2);
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.onda svg {
  width: 100%;
  height: clamp(28px, 4vw, 64px);
  fill: currentColor;
}
.onda-relleno { fill: currentColor; }
.onda-linea {
  fill: none;
  stroke: var(--linea);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* La onda de entrada deja la franja de color abajo; la de salida la invierte y la deja arriba. */
.onda--entra { margin-bottom: -1px; }
.onda--sale { margin-top: -1px; }
.onda--sale svg { transform: scaleY(-1); }

/* Red tenue: el patron de assets/network-pattern.svg se usa como mascara y se tiñe con el acento. */
.seccion--red::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--acento);
  opacity: 0.2;
  -webkit-mask-image: url("../../assets/network-pattern.svg"), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: url("../../assets/network-pattern.svg"), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-size: 480px 480px, 100% 100%;
  mask-size: 480px 480px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- Escaparate de productos ---------- */
.escaparate-cuerpo { margin-top: var(--espacio-8); display: grid; gap: var(--espacio-8); }
.escaparate-paso { display: grid; gap: var(--espacio-6); }
.escaparate-rotulo {
  display: inline-block;
  margin-bottom: var(--espacio-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.escaparate-texto h3 { font-size: var(--fs-lead); font-weight: 700; max-width: 22ch; }
.escaparate-texto p { margin-top: var(--espacio-4); color: var(--texto-2); max-width: 46ch; }
.escaparate-texto .escaparate-enlace { margin-top: var(--espacio-5); }

.escaparate-vista { margin: 0; }
.escaparate-vista figcaption {
  margin-top: var(--espacio-3);
  font-size: 0.8125rem;
  color: var(--texto-3);
  text-align: center;
}
.escaparate-marco {
  border-radius: 14px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.escaparate-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
}
.escaparate-barra span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texto-3);
  opacity: 0.45;
}
.escaparate-pantalla {
  position: relative;
  aspect-ratio: 1100 / 676;
  background: var(--superficie);
}
.escaparate-pantalla img,
.escaparate-pantalla svg {
  width: 100%;
  height: 100%;
}
.escaparate-pantalla img { object-fit: contain; }

/* Composicion de EasyPos: solo formas, sin cifras ni datos que parezcan reales. */
.escaparate-pantalla--pos { background: var(--superficie-2); }
.escaparate-pantalla--pos svg { color: var(--acento-texto); }
.escaparate-pantalla--pos .e-lin { stroke: var(--acento-texto); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.escaparate-pantalla--pos .e-sup { fill: var(--superficie); }
.escaparate-pantalla--pos .e-pant { fill: var(--superficie-2); stroke: var(--linea); stroke-width: 2; }
.escaparate-pantalla--pos .e-tenue { fill: var(--linea); }
.escaparate-pantalla--pos .e-acento { fill: var(--acento); }
.escaparate-pantalla--pos .e-tecla rect:not(.e-acento) { fill: var(--linea); }
.escaparate-pantalla--pos .e-guion { fill: none; stroke: var(--linea); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.escaparate-pantalla--pos .e-barras rect { fill: var(--texto-3); }
.escaparate-pantalla--pos .e-tarjeta { fill: var(--acento); }
.escaparate-pantalla--pos .e-banda { fill: var(--texto-1); opacity: 0.85; }
.escaparate-pantalla--pos .e-chip { fill: var(--superficie); opacity: 0.9; }
.escaparate-pantalla--pos .e-visto { fill: none; stroke-width: 7; }
.escaparate-pantalla--pos .e-moneda { fill: var(--superficie); }

/* Escritorio con JS: textos a la izquierda, marco fijo (sticky) a la derecha. El resto de
   anchos y el caso sin JS conservan el apilado normal, con cada captura junto a su texto. */
@media (min-width: 900px) {
  html.js .escaparate-cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: var(--espacio-9);
    row-gap: 0;
    align-items: start;
    margin-top: var(--espacio-6);
  }
  html.js .escaparate-paso { display: contents; }
  html.js .escaparate-texto {
    grid-column: 1;
    min-height: 68svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* El paso activo se marca con un punto de acento junto al rotulo. */
  html.js .escaparate-rotulo::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: var(--espacio-3);
    border-radius: 50%;
    background: var(--linea);
    transition: background-color 0.4s ease, transform 0.4s var(--curva);
  }
  html.js .escaparate-texto.activo .escaparate-rotulo::before { background: var(--acento); transform: scale(1.35); }
  html.js .escaparate-paso:nth-child(1) .escaparate-texto { grid-row: 1; }
  html.js .escaparate-paso:nth-child(2) .escaparate-texto { grid-row: 2; }
  html.js .escaparate-paso:nth-child(3) .escaparate-texto { grid-row: 3; }

  html.js .escaparate-vista {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: max(calc(var(--nav-alto-compacto) + var(--espacio-5)), calc(50svh - 15rem));
    align-self: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.985);
    transition: opacity 0.45s ease, transform 0.55s var(--curva), visibility 0s linear 0.45s;
  }
  html.js .escaparate-vista.activo {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  html.js .escaparate-texto,
  html.js .escaparate-vista { transition: none; transform: none; }
}

/* ---------- Cinta de tecnologias ---------- */
.cinta {
  position: relative;
  padding-block: var(--espacio-6);
  border-block: 1px solid var(--linea);
  background: var(--superficie);
  overflow: hidden;
}
.cinta-titulo {
  margin: 0 0 var(--espacio-4);
  text-align: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cinta-ventana {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista { display: flex; width: max-content; }
.cinta-lista { display: flex; flex: none; }
.cinta-lista li {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--texto-2);
  padding-right: var(--espacio-7);
}
.cinta-lista li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: var(--espacio-7);
  border-radius: 50%;
  background: var(--acento);
}
@media not (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: cinta-avance 50s linear infinite; will-change: transform; }
  .cinta:hover .cinta-pista,
  .cinta:has(:focus-visible) .cinta-pista,
  .cinta.cinta--fuera .cinta-pista,
  .cinta.cinta--oculta .cinta-pista { animation-play-state: paused; }
}
@keyframes cinta-avance { to { transform: translateX(-33.3333%); } }
/* Sin animacion: una sola lista, centrada y en varias lineas si hace falta. */
@media (prefers-reduced-motion: reduce) {
  .cinta-ventana { -webkit-mask-image: none; mask-image: none; }
  .cinta-pista { width: auto; justify-content: center; }
  .cinta-lista[aria-hidden="true"] { display: none; }
  .cinta-lista { flex-wrap: wrap; justify-content: center; row-gap: var(--espacio-2); }
  .cinta-lista li:first-child::before { display: none; }
  .cinta-lista li { padding-right: var(--espacio-5); }
  .cinta-lista li::before { margin-right: var(--espacio-5); }
}