@charset "utf-8";
/* ================================================================================
   EL CUERPO DE LAS PAGINAS (2026-10, pedido de Maxi)

   El encabezado y el banner de la home ya eran nuevos y el resto del sitio seguia con el
   diseno de siempre: titulos en caja alta subrayados, texto justificado, una franja de
   color distinta por seccion (gris verdoso, azul, gris azulado) y "[+]" como enlace. Esta
   hoja trae al resto del sitio LO MISMO que ya tienen arriba, sin inventar nada:

   - LAS FUENTES. Montserrat para todo lo que es titulo, volanta o boton (la del menu) y
     Open Sans para leer (la de siempre). Anton queda solo en el banner: es letra de tapa.
   - LOS COLORES. Los azules del banner institucional (#0a4a87 a #03264b) para lo oscuro,
     el azul del logo (#003e7e) para enlaces y botones, y el celeste de la volanta del
     banner (#8fd0ff) sobre oscuro. Los de cada producto salen de su logo.
   - LA FORMA DE CONTAR. La del banner: volanta chica + titulo + una linea + un boton.
   - LA TRAMA DE PUNTOS del banner, en las franjas oscuras.

   Va en un archivo aparte y DESPUES de sig.css para que el cambio se pueda migrar pagina por
   pagina: las clases de aca son nuevas, y las paginas que todavia tienen el HTML viejo
   siguen con sus reglas de siempre. Lo unico que cambia para todas a la vez es la base
   (fuentes de los titulos, texto sin justificar y el color del texto).

   EL ERROR MUDO DE LA ESPECIFICIDAD (el mismo que en el encabezado): sig.css pinta los
   enlaces con a:link (0,1,1) y eso le gana a una clase sola. Por eso los enlaces de aca van
   como a.clase:link: con .clase sola vuelven al gris azulado y no falla nada.
   ================================================================================ */
:root {
  --sig-noche: #03264b;
  --sig-medio: #0a4a87;
  --sig-tinta: #2e4058;
  --sig-niebla: #c9dcec;
  --sig-volanta-oscuro: #8fd0ff;
  --sig-radio: 14px;
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(40, 128, 210, 0.30), rgba(40, 128, 210, 0) 70%),
    linear-gradient(180deg, #0a4a87 0%, #063a6f 55%, #03264b 100%);
  /* el fondo de los bloques claros y los puntos de la trama: las paginas de producto los
     cambian por los de su color (LOS PRODUCTOS CON SU COLOR) */
  --sig-fondo-claro: #f4f8fc;
  --sig-trama: rgba(150, 205, 235, 0.22);
  /* los de cada producto, medidos en su logo (img/*.svg) */
  --sigma: #0092a7;
  --etl: #b81439;
  --stnx: #45d1dd;
  --kart: #ff6c0c;
  --api: #8ebc43;
  --pos: #039146;
  --argus: #00abd4;
}

/* ------------------------------------------------------------------------------
   LA BASE (todas las paginas)
   ------------------------------------------------------------------------------ */
body {
  color: var(--sig-tinta);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
}
/* Justificado, el castellano abre "rios" de blanco en las columnas angostas (en el celular,
   palabras sueltas con un hueco enorme entre medio). */
p {
  text-align: left;
}

/* ------------------------------------------------------------------------------
   PIEZAS SUELTAS
   ------------------------------------------------------------------------------ */
.volanta {
  display: block;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sig-azul);
  margin: 0 0 0.9rem 0;
}
.oscuro .volanta { color: var(--sig-volanta-oscuro); }

/* Los botones: los del banner (mismo radio, misma letra), un poco mas bajos. */
a.boton:link, a.boton:visited, a.boton:active,
button.boton {
  display: inline-block;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 15px 30px;
  border-radius: 5px;
  border: 2px solid var(--sig-azul);
  background-color: var(--sig-azul);
  color: #FFF;
  text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
a.boton:hover, button.boton:hover {
  background-color: var(--sig-noche);
  border-color: var(--sig-noche);
  color: #FFF;
  text-decoration: none;
}
a.boton_borde:link, a.boton_borde:visited, a.boton_borde:active {
  background-color: transparent;
  color: var(--sig-azul);
}
a.boton_borde:hover {
  background-color: var(--sig-azul);
  border-color: var(--sig-azul);
  color: #FFF;
}
/* sobre oscuro: el par del banner institucional, blanco relleno y contorno blanco */
.oscuro a.boton:link, .oscuro a.boton:visited, .oscuro a.boton:active {
  background-color: #FFF;
  border-color: #FFF;
  color: var(--sig-azul);
}
.oscuro a.boton:hover {
  background-color: var(--sig-volanta-oscuro);
  border-color: var(--sig-volanta-oscuro);
  color: var(--sig-noche);
}
.oscuro a.boton_borde:link, .oscuro a.boton_borde:visited, .oscuro a.boton_borde:active {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFF;
}
.oscuro a.boton_borde:hover {
  background-color: #FFF;
  border-color: #FFF;
  color: var(--sig-noche);
}
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.8rem;
}

.botones_centro { justify-content: center; }

/* "QUE DICE LA IA SOBRE NOSOTROS": los tres botones de antes (pregunta_ia en sig.css), ahora
   sobre claro. Blancos con borde y el logo del asistente; con el mouse, en el azul del logo.
   Son tres equivalentes: ninguno va relleno, para que se lean como una eleccion entre pares. */
.consulta_ia .botones a:link,
.consulta_ia .botones a:visited,
.consulta_ia .botones a:active {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--sig-azul);
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
.consulta_ia .botones a:hover {
  color: #FFF;
  background-color: var(--sig-azul);
  border-color: var(--sig-azul);
  box-shadow: 0 10px 24px -12px rgba(0, 62, 126, 0.6);
}
.consulta_ia .botones a .logo_ia { flex: none; }

/* El enlace de una tarjeta: dice adonde lleva ("Conocé SIG ETL") en lugar del "[+]". Para
   el buscador el texto del enlace es la descripcion de la pagina de destino; "[+]" no le
   decia nada. La flecha se corre con el mouse sobre TODA la tarjeta, no solo sobre el texto.
   EL NOMBRE VA EN UN <span>: <a class="flecha">Conocé <span>SmartTraderNX</span></a>. La flecha
   es un ::after del span, que no se parte (nowrap): asi, si no entra en el renglon, baja el
   nombre CON la flecha. Puesta despues del enlace, en una tarjeta angosta la flecha quedaba
   sola en el renglon de abajo (Maxi, 2026-10-20). */
a.flecha:link, a.flecha:visited, a.flecha:active {
  display: inline-block;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sig-azul);
  text-decoration: none;
}
a.flecha span { white-space: nowrap; }
a.flecha span::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform .18s ease-out;
}
a.flecha:hover { color: var(--sig-noche); text-decoration: none; }
a.flecha:hover span::after,
.tarjeta:hover a.flecha span::after { transform: translateX(4px); }
.oscuro a.flecha:link, .oscuro a.flecha:visited { color: var(--sig-volanta-oscuro); }
.oscuro a.flecha:hover { color: #FFF; }

/* La trama de puntos del banner (sig.css, .banner::before), para las franjas oscuras. */
.trama { position: relative; isolation: isolate; }
.trama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(var(--sig-trama) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 85% 10%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 90% at 85% 10%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* ------------------------------------------------------------------------------
   LOS BLOQUES (cada <section>)
   ------------------------------------------------------------------------------ */
.bloque {
  padding: 88px 0;
}
.bloque_claro {
  background-color: var(--sig-fondo-claro);
}
.oscuro {
  background: var(--sig-oscuro);
  background-color: var(--sig-noche);
  color: var(--sig-niebla);
}
/* la cabeza de un bloque: volanta + titulo + una linea, centrada */
.cabeza {
  max-width: 760px;
  margin: 0 auto 52px auto;
  text-align: center;
}
.cabeza h2,
.titulo {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--sig-noche);
  text-wrap: balance;
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 1rem 0;
}
.oscuro .cabeza h2, .oscuro .titulo { color: #FFF; }
.cabeza p, p.bajada {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #566476;
  margin: 0;
}
.cabeza p { text-align: center; }
.oscuro .cabeza p, .oscuro p.bajada { color: var(--sig-niebla); }

/* ------------------------------------------------------------------------------
   LAS GRILLAS Y LAS TARJETAS
   ------------------------------------------------------------------------------ */
.grilla {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grilla_3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* dos tarjetas en la columna de lectura (las soluciones de una industria) */
.grilla_angosta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .grilla_3, .grilla_4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .grilla_3, .grilla_4, .grilla_angosta { grid-template-columns: minmax(0, 1fr); }
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 32px 30px 28px 30px;
  transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sig-sombra);
  border-color: transparent;
}
.tarjeta h3 {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--sig-noche);
  margin: 0 0 0.6rem 0;
}
.tarjeta p {
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 1.2rem 0;
}
.tarjeta p:last-of-type { flex: 1 1 auto; }
/* el acento del producto: una raya corta arriba, del color de su logo */
.tarjeta[style*="--acento"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 30px;
  width: 44px;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background-color: var(--acento);
}
.tarjeta_logo {
  height: 64px;
  display: flex;
  align-items: center;
  margin: 0 0 1.4rem 0;
}
.tarjeta_logo img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
}
/* sobre oscuro: vidrio */
.oscuro .tarjeta {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.oscuro .tarjeta:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
}
.oscuro .tarjeta h3 { color: #FFF; }
.oscuro .tarjeta p { color: var(--sig-niebla); }

/* ------------------------------------------------------------------------------
   DOS COLUMNAS: TEXTO E IMAGEN (el producto destacado de la home)
   ------------------------------------------------------------------------------ */
.dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 991.98px) {
  .dupla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.dupla h1, .dupla h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--sig-noche);
  text-wrap: balance;
  display: block;
  margin: 0 0 1.2rem 0;
}
.dupla p {
  font-size: 1.08rem;
  line-height: 1.75;
}
.dupla_imagen {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sig-sombra);
  background-color: var(--sig-medio);
  aspect-ratio: 810 / 723;
}
.dupla_imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Las fichas: lo que abarca un producto, en pastillas. Se leen de un vistazo y son texto
   (el buscador y la IA las leen igual que un parrafo). */
.fichas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 1.4rem 0 0 0;
}
.fichas li {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--sig-azul);
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 999px;
  padding: 7px 14px;
}
.bloque_claro .fichas li { background-color: #FFF; }

/* ------------------------------------------------------------------------------
   LAS CIFRAS ("Por que nosotros")
   ------------------------------------------------------------------------------ */
.cifra {
  text-align: center;
  padding: 8px 12px;
}
.cifra_icono {
  width: 104px;
  height: 104px;
  margin: 0 auto 22px auto;
  border-radius: 26px;
  background-color: #f4f8fc;
  border: 1px solid var(--sig-borde);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cifra_icono img { width: 64px; height: 64px; }
.cifra h3 {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--sig-noche);
  margin: 0 0 0.4rem 0;
}
.cifra p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #566476;
  text-align: center;
  margin: 0;
}

/* ------------------------------------------------------------------------------
   LAS INDUSTRIAS: la foto manda, el nombre va encima
   ------------------------------------------------------------------------------ */
a.industria:link, a.industria:visited, a.industria:active {
  position: relative;
  display: block;
  border-radius: var(--sig-radio);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--sig-noche);
  color: #FFF;
  text-decoration: none;
  isolation: isolate;
}
a.industria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s ease-out;
}
a.industria::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 38, 75, 0) 35%, rgba(3, 38, 75, 0.92) 100%);
}
a.industria:hover img { transform: scale(1.06); }
.industria_texto {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
}
.industria_texto strong {
  display: block;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #FFF;
}
.industria_texto span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--sig-niebla);
  margin-top: 4px;
}
.industria_texto span::after {
  content: " →";
  transition: margin-left .18s ease-out;
}
@media (max-width: 575.98px) {
  a.industria:link, a.industria:visited { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------------------------
   EL LLAMADO DEL FINAL: un panel oscuro con margen, NO una franja a sangre.
   Una franja oscura pegada al pie (que tambien es oscuro) se leia como parte del pie, y el
   pedido -lo unico que se quiere que pase ahi- desaparecia (ver .contacto_cierre en sig.css).
   ------------------------------------------------------------------------------ */
.llamado {
  border-radius: 22px;
  padding: 56px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  overflow: hidden;
}
.llamado h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1.2;
  color: #FFF;
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem 0;
}
.llamado p {
  color: var(--sig-niebla);
  font-size: 1.08rem;
  margin: 0;
}
.llamado .botones { margin-top: 0; }
/* En una columna desde 991 y no desde 767: entre 768 y 991 los dos botones se comian el ancho y al
   texto le quedaban ~190 px, donde "SmartTraderNX" (una palabra que no se corta) se salia de su caja
   y se metia debajo de los botones, en castellano y en ingles (medido en la migracion de /en/,
   2026-10-22). */
@media (max-width: 991.98px) {
  .llamado { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .llamado { padding: 40px 28px; }
}
.llamado_seccion { padding: 72px 0 80px 0; }
/* despues de un bloque blanco ya hay aire: sumarle el de arriba dejaba un hueco */
.bloque:not(.bloque_claro):not(.oscuro) + .llamado_seccion { padding-top: 0; }

/* ------------------------------------------------------------------------------
   LA CABECERA DE LAS PAGINAS INTERIORES
   La forma del banner de la home, en chico: fondo del institucional con la trama, volanta,
   titulo y una linea. Asi una pagina interior se reconoce del mismo sitio que la home.
   ------------------------------------------------------------------------------ */
.cabecera {
  padding: 56px 0 64px 0;
}
.cabecera h1 {
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #FFF;
  text-wrap: balance;
  display: block;
  max-width: 900px;
  margin: 0 0 1rem 0;
}
.cabecera p.bajada {
  max-width: 720px;
  font-size: 1.15rem;
}
/* las migas: Inicio / Compania / Valores. Tambien van como BreadcrumbList en el JSON-LD. */
.migas {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(201, 220, 236, 0.75);
  margin: 0 0 2rem 0;
}
.migas ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.migas li + li::before {
  content: "/";
  margin: 0 0.6em;
  opacity: 0.6;
}
.migas a:link, .migas a:visited { color: var(--sig-niebla); text-decoration: none; }
.migas a:hover { color: #FFF; text-decoration: underline; }
.migas [aria-current] { color: #FFF; }

/* LA CABECERA CON LA RED (sigma_saas): el texto a la izquierda y, a la derecha, las 7 areas que SIGMA
   conecta, parejas sobre un circulo, con la administracion en el centro (como en el render del banner:
   ahi se procesa todo). Una luz da la vuelta al anillo; cuando pasa por un area, el area late y sale un
   dato por su rayo hacia la administracion, que late al recibirlo.

   LIVIANA A PROPOSITO (Maxi: "que la animacion no sea matadora para la maquina"):
   - Las lineas son un SVG QUIETO: no se redibuja nunca.
   - Lo que se mueve son giros, desplazamientos y opacidad de elementos HTML: los anima la placa de
     video sin volver a pintar la pagina. La luz es un anillo con un degradado conico que GIRA entero.
     La version anterior corria un trazo por stroke-dashoffset y redibujaba el SVG en cada cuadro.
   - Corre solo mientras se ve (.en_vista) y queda quieta con el modo liviano o "reducir movimiento".

   Todo se mide en cqi (el ancho del escenario = 100): posiciones, radio (27) y tamanos. El HTML y las
   demoras (--t, cuando pasa la luz por cada area) los genera herramientas/red_sigma.py: mover un
   area a mano descoordina la luz, los latidos y los datos, sin ningun error.

   LOS NOMBRES VAN AFUERA DEL ANILLO, cada uno hacia su lado (.arriba, .abajo, .der, .izq: los pone
   el script). Colgados abajo de cada area, el anillo -que pasa por el centro de las areas- seguia
   justo por donde estaba el nombre: Maxi (2026-10-21), "la linea atraviesa el texto". */
/* La luz que gira (.red_luz) es un cuadrado con border-radius: girado, su caja sobresale aunque la
   mascara la recorte, y la pagina se corria de costado a 360-430 y a 1024-1280 de ancho (testing
   2026-10-21). clip y no hidden donde se puede: hidden pasa el eje vertical a auto. */
.cabecera_red { overflow-x: hidden; overflow-x: clip; }
.cabecera_red .dupla { gap: 32px; }
.cabecera_red .bajada { max-width: 560px; }
.red {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  margin: -8px 0 -8px auto;
  container-type: inline-size;
}
.red_lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.red_anillo { fill: none; stroke: rgba(143, 208, 255, 0.42); stroke-width: 0.4; stroke-linecap: round; }
.red_rayo { fill: none; stroke: rgba(143, 208, 255, 0.24); stroke-width: 0.3; stroke-dasharray: 1 1.2; }
/* la luz: un anillo del mismo radio, con un degradado conico (cola larga, cabeza brillante) que gira */
.red_luz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -42deg, rgba(223, 241, 255, 0) 0deg, rgba(160, 215, 255, 0.55) 34deg, #EAF6FF 41deg, rgba(223, 241, 255, 0) 42deg);
  /* --anillo: el radio del anillo sobre el medio ancho de la caja (lo pone el script en .red) */
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(var(--anillo) - 1.3cqi), #000 calc(var(--anillo) - 0.35cqi), #000 calc(var(--anillo) + 0.35cqi), transparent calc(var(--anillo) + 1.3cqi));
  mask-image: radial-gradient(circle closest-side, transparent calc(var(--anillo) - 1.3cqi), #000 calc(var(--anillo) - 0.35cqi), #000 calc(var(--anillo) + 0.35cqi), transparent calc(var(--anillo) + 1.3cqi));
  animation: red_gira var(--vuelta) linear infinite;
}
.red_area {
  position: absolute;
  width: 12cqi;
  height: 12cqi;
  margin: -6cqi 0 0 -6cqi;
}
.red_disco, .red_centro {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #0b3c70;
  border: 1px solid rgba(143, 208, 255, 0.45);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.red_disco { width: 100%; height: 100%; }
.red_disco img, .red_centro img { width: 56%; height: auto; filter: brightness(0) invert(1); }
.red_area b, .red_centro b {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: clamp(0.62rem, 2.5cqi, 0.86rem);
  line-height: 1.2;
  color: var(--sig-niebla);
  white-space: nowrap;
}
.red_area b { position: absolute; }
.red_area.arriba b { left: 50%; bottom: calc(100% + 1.4cqi); transform: translateX(-50%); }
.red_area.abajo b { left: 50%; top: calc(100% + 1.4cqi); transform: translateX(-50%); }
.red_area.der b { left: calc(100% + 1.8cqi); top: 50%; transform: translateY(-50%); text-align: left; }
.red_area.izq b { right: calc(100% + 1.8cqi); top: 50%; transform: translateY(-50%); text-align: right; }
/* el latido del area cuando pasa la luz: un aro que se agranda y se apaga */
.red_area::before, .red_centro::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(143, 208, 255, 0.5);
  opacity: 0;
  animation: red_late var(--vuelta) linear infinite;
  animation-delay: var(--t);
}
/* el dato que va del area a la administracion */
.red_dato {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 1.8cqi;
  height: 1.8cqi;
  margin: -0.9cqi 0 0 -0.9cqi;
  border-radius: 50%;
  background-color: #EAF6FF;
  box-shadow: 0 0 1.4cqi 0.4cqi rgba(143, 208, 255, 0.75);
  opacity: 0;
  animation: red_dato var(--vuelta) linear infinite;
  animation-delay: var(--t);
}
.red_centro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24cqi;
  height: 24cqi;
  margin: -12cqi 0 0 -12cqi;
  flex-direction: column;
  gap: 0.6cqi;
  background-color: #0e4884;
  border-color: rgba(143, 208, 255, 0.65);
}
.red_centro img { width: 38%; }
.red_centro b { color: #FFF; font-size: clamp(0.6rem, 2.3cqi, 0.82rem); }
/* la administracion late cada vez que llega un dato: uno por area, cada --paso */
.red_centro::before {
  animation: red_recibe var(--paso) linear infinite;
  animation-delay: calc(var(--paso) * 0.6);
}
/* LOS AGENTES DE LA RED (Javo, 2026-10-22: "agentes que ayuden, auditen y le den dinamismo"). El robot
   de la IA, chico, en tres papeles; los genera herramientas/red_sigma.py y van con la luz:
   - el EXPLORADOR (robot_ia_lupa.svg) anda por el anillo un poco adelante de la luz: se para justo
     antes de cada area, la "audita" y el area muestra un tilde (.red_disco::after); despues pasa la
     luz, el area late y sale el dato. Va en el anillo y por DEBAJO de los discos (z-index 1 contra 2):
     al pasar de un area a la otra cruza por detras del disco, como entrando y saliendo del area.
   - dos MENSAJEROS (robot_ia.svg) esperan en el rayo del area que va a pasar la luz; el dato pasa
     por detras del robot (los dos tienen z-index 1 y el robot va despues) y el robot lo acompania
     hasta la administracion. Tapado por el disco del centro salta al rayo de dos areas mas alla
     (steps: el giro es instantaneo y no se ve) y sale a esperar ahi.
   Mismo esquema que la orbita: el div gira (rotate), el span lo lleva al anillo o al rayo (translate)
   y deshace el giro para que el robot quede derecho. Los radios de abajo salen de red_sigma.py: el
   anillo es RADIO (27) y el rayo va de 13,2 a 19,8 (el robot espera en el medio, 16,5). */
.red_agentes { position: absolute; inset: 0; z-index: 1; }
.red_agente { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.red_agente > span { position: absolute; display: block; left: -3.1cqi; top: -3.4875cqi; width: 6.2cqi; }
.red_agente img { display: block; width: 100%; height: auto; }
/* en el celular la red mide ~360 px: a 6,2 cqi el robot quedaba en 22 px y no se leia la cara */
@container (max-width: 420px) {
  .red_agente > span { left: -3.5cqi; top: -3.9375cqi; width: 7cqi; }
}
/* se para 22 grados antes del area: a 27 de radio, el robot queda a 10,3 del centro del disco y no lo toca */
.red_explorador {
  transform: rotate(-22deg);
  animation: red_explora var(--vuelta) cubic-bezier(.45, 0, .3, 1) infinite;
}
.red_explorador > span {
  translate: 0 -27cqi;
  transform: rotate(22deg);
  animation: red_explora_contra var(--vuelta) cubic-bezier(.45, 0, .3, 1) infinite;
}
.red_mensajero {
  transform: rotate(var(--base));
  animation: red_salta calc(var(--vuelta) * 2) steps(7, jump-start) infinite;
  animation-delay: var(--dg);
}
.red_mensajero > span {
  translate: 0 -16.5cqi;
  transform: rotate(calc(-1 * var(--base)));
  animation: red_lleva calc(var(--paso) * 2) linear infinite,
             red_salta_contra calc(var(--vuelta) * 2) steps(7, jump-start) infinite;
  animation-delay: var(--d), var(--dg);
}
/* el tilde de la auditoria: aparece cuando el explorador termina, un poco antes de que pase la luz */
.red_disco::after {
  content: "";
  position: absolute;
  right: -0.9cqi;
  top: -0.9cqi;
  width: 4.2cqi;
  height: 4.2cqi;
  border-radius: 50%;
  background: #45d1dd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.1' fill='none' stroke='%2303264b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 0 0.35cqi #0b3c70;
  opacity: 0;
  animation: red_tilde var(--vuelta) linear infinite;
  animation-delay: calc(var(--t) - var(--paso) * 0.15);
}
.red_luz, .red_area::before, .red_centro::before, .red_dato, .red_disco::after,
.red_agente, .red_agente > span { animation-play-state: paused; }
.red.en_vista .red_luz,
.red.en_vista .red_area::before,
.red.en_vista .red_centro::before,
.red.en_vista .red_dato,
.red.en_vista .red_disco::after,
.red.en_vista .red_agente,
.red.en_vista .red_agente > span { animation-play-state: running; }
/* quietos, los agentes quedan donde los pone su base: el explorador antes de Produccion y los
   mensajeros en los rayos de las dos primeras areas */
.quieto .red *, .quieto .red *::before, .quieto .red *::after,
.banner_liviano .red *, .banner_liviano .red *::before, .banner_liviano .red *::after { animation: none !important; }
.quieto .red_luz, .banner_liviano .red_luz { display: none; }
@media (prefers-reduced-motion: reduce) {
  .red *, .red *::before, .red *::after { animation: none !important; }
  .red_luz { display: none; }
}
/* las 7 paradas del explorador: llega a cada una medio paso antes que la luz y sale 0,05 paso despues */
@keyframes red_explora {
  0%, 0.714% { rotate: 0deg; }
  7.143%, 15% { rotate: 51.43deg; }
  21.429%, 29.286% { rotate: 102.86deg; }
  35.714%, 43.571% { rotate: 154.29deg; }
  50%, 57.857% { rotate: 205.71deg; }
  64.286%, 72.143% { rotate: 257.14deg; }
  78.571%, 86.429% { rotate: 308.57deg; }
  92.857%, 100% { rotate: 360deg; }
}
@keyframes red_explora_contra {
  0%, 0.714% { rotate: 0deg; }
  7.143%, 15% { rotate: -51.43deg; }
  21.429%, 29.286% { rotate: -102.86deg; }
  35.714%, 43.571% { rotate: -154.29deg; }
  50%, 57.857% { rotate: -205.71deg; }
  64.286%, 72.143% { rotate: -257.14deg; }
  78.571%, 86.429% { rotate: -308.57deg; }
  92.857%, 100% { rotate: -360deg; }
}
@keyframes red_salta { from { rotate: 0deg; } to { rotate: 720deg; } }
@keyframes red_salta_contra { from { rotate: 0deg; } to { rotate: -720deg; } }
/* dos pasos: espera en el rayo hasta que el dato le pasa por detras (11,7 %), entra al centro con el
   dato (28 %), queda tapado mientras salta de rayo y sale a esperar en el otro (72 %) */
@keyframes red_lleva {
  0%, 11.7% { translate: 0 -16.5cqi; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  28%, 58% { translate: 0 -5cqi; animation-timing-function: cubic-bezier(.1, .4, .5, 1); }
  72%, 100% { translate: 0 -16.5cqi; }
}
@keyframes red_tilde {
  0% { opacity: 0; transform: scale(0.3); }
  2% { opacity: 1; transform: scale(1.15); }
  3.5% { opacity: 1; transform: scale(1); }
  10% { opacity: 1; transform: scale(1); }
  12.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes red_gira {
  to { transform: rotate(360deg); }
}
@keyframes red_late {
  0% { opacity: 0.9; transform: scale(1); }
  9% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* el dato sale cuando pasa la luz y tarda el 8,6 % de la vuelta en llegar al centro (0,7 s con la
   vuelta de 8,4 s; los mensajeros cuentan con ese tiempo, ver red_lleva) */
@keyframes red_dato {
  0% { opacity: 0; transform: translate(0, 0); }
  1.5% { opacity: 1; }
  8% { opacity: 1; }
  8.6% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes red_recibe {
  0% { opacity: 0.55; transform: scale(1); }
  40% { opacity: 0; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.3); }
}
@media (max-width: 991.98px) {
  .red { max-width: 420px; margin: 16px auto 0 auto; }
}

/* La navegacion de la seccion (Compania: Acerca de, Valores, Ubicacion...). Reemplaza la
   columna de enlaces de la derecha, que en el celular quedaba al final de la pagina, debajo
   de todo el texto. */
.subnav {
  background-color: #FFF;
  border-bottom: 1px solid var(--sig-borde);
}
.subnav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a:link, .subnav a:visited {
  display: block;
  white-space: nowrap;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: #566476;
  padding: 18px 16px 16px 16px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.subnav a:hover { color: var(--sig-azul); text-decoration: none; }
.subnav a[aria-current] {
  color: var(--sig-azul);
  border-bottom-color: var(--sig-azul);
}

/* ------------------------------------------------------------------------------
   EL TEXTO DE UNA PAGINA INTERIOR
   Columna de lectura de 760 px como mucho: con los 1140 del container un renglon tenia 160
   caracteres, el doble de lo comodo.
   ------------------------------------------------------------------------------ */
.texto {
  max-width: 760px;
  font-size: 1.06rem;
  line-height: 1.8;
}
.texto_centro { margin-left: auto; margin-right: auto; }
.texto h2 {
  font-weight: 700;
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sig-noche);
  margin: 2.8rem 0 1rem 0;
}
.texto > h2:first-child { margin-top: 0; }
.texto p { margin: 0 0 1.2rem 0; }
.texto a:link:not(.boton):not(.flecha), .texto a:visited:not(.boton):not(.flecha) {
  color: var(--sig-azul);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Las listas con tilde, en el azul del logo, dibujada en CSS (antes img/list-2.png). */
ul.tildes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem 0;
}
ul.tildes li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.75rem;
}
ul.tildes li::before,
ul.tildes li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background-color: var(--sig-claro);
}
/* la tilde es una mascara pintada con --sig-azul: en las paginas de producto toma su color (antes
   iba dibujada en azul dentro del SVG y quedaba azul en todas) */
ul.tildes li::after {
  background-color: var(--sig-azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

/* Un recuadro destacado dentro del texto (la certificacion ISO, por ejemplo). */
.recuadro {
  display: flex;
  gap: 24px;
  align-items: center;
  background-color: var(--sig-fondo-claro);
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 28px 30px;
  margin: 2.4rem 0;
}
.recuadro img { flex: none; width: 88px; height: auto; }
.recuadro p { margin: 0; font-size: 1rem; line-height: 1.7; }
@media (max-width: 575.98px) {
  .recuadro { flex-direction: column; text-align: center; }
  .recuadro p { text-align: center; }
}

/* ------------------------------------------------------------------------------
   PASOS NUMERADOS (como se implementa)
   ------------------------------------------------------------------------------ */
.paso { text-align: left; }
.paso_numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #FFF;
  background-color: var(--acento, var(--sig-azul));
  margin-bottom: 1.1rem;
}

/* Los pasos: una linea de tiempo. En tarjetas, con un titulo de dos palabras cada una, quedaban
   cuatro cajas casi vacias. */
ol.pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
}
.paso {
  position: relative;
  text-align: center;
  padding: 0 8px;
}
.paso h3 {
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--sig-noche);
  margin: 0;
}
.paso h3 a:link, .paso h3 a:visited { color: var(--sig-azul); }
.paso .paso_numero {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
}
/* La raya que une un numero con el siguiente: va de borde a borde, con 12 px de aire a cada
   lado. Antes iba de centro a centro, tapada por los circulos (z-index 1 y un aro blanco),
   pero al aparecer al bajar cada .paso tiene opacity y transform, o sea su propio contexto de
   apilado: la raya del paso siguiente se pintaba ENCIMA del circulo anterior (Maxi: "las
   lineas atraviesan los circulos"). Sin superponerse no depende del orden de pintado.
   Cuentas: el centro de este circulo esta al 50 %, el del anterior una columna (100 %) y un
   gap (24 px de .grilla) mas a la izquierda; radio 28 + aire 12 = 40 de cada lado. */
@media (min-width: 992px) {
  .paso + .paso::before {
    content: "";
    position: absolute;
    top: 28px;
    right: calc(50% + 40px);
    width: calc(100% + 24px - 80px);
    height: 2px;
    background: linear-gradient(90deg, var(--sig-borde), var(--sig-azul));
  }
}

/* El video de presentacion: 16:9 por CSS (antes width=100% height=315, que a 390 px de ancho
   dejaba franjas negras arriba y abajo). */
.video {
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--sig-noche);
  box-shadow: var(--sig-sombra);
}
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Los circuitos de un producto: una tarjeta por circuito, el icono arriba y grande, el nombre
   abajo. En renglones (icono de 34 px al costado) quedaban perdidos en tres columnas anchas:
   Maxi, "se ve todo muy chico". */
.circuito {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: center;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 22px 14px 20px 14px;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--sig-noche);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
}
.circuito:hover { transform: translateY(-3px); box-shadow: var(--sig-sombra); }
.circuito_icono {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background-color: var(--sig-claro);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circuito_icono img { width: 46px; height: 46px; }
ul.circuitos_grilla {
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 991.98px) {
  ul.circuitos_grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  ul.circuitos_grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .circuito { font-size: 0.92rem; padding: 20px 10px 18px 10px; }
  .circuito_icono { width: 64px; height: 64px; }
  .circuito_icono img { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------------------------
   EL PIE
   ------------------------------------------------------------------------------ */
.pie {
  font-size: 0.95rem;
  padding: 72px 0 0 0;
}
.pie_grilla {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 40px;
}
@media (max-width: 991.98px) {
  .pie_grilla { grid-template-columns: 1fr 1fr; }
}
/* en el telefono: las dos listas de enlaces lado a lado; la marca y los datos, a todo el ancho */
@media (max-width: 575.98px) {
  .pie_grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .pie_marca, .pie_grilla > div:last-child { grid-column: 1 / -1; }
}
.pie_marca img { width: 64px; height: auto; margin-bottom: 18px; }
.pie_marca p { color: var(--sig-niebla); line-height: 1.7; margin: 0 0 1rem 0; }
.pie h2 {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sig-volanta-oscuro);
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem 0;
}
.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pie li { margin-bottom: 0.55rem; }
/* sig.css le pone al pie a:link en gris (#95a5ba, 0.9rem), opacidad .7 al hover y span a 1rem:
   aca se vuelve a decir todo, o el pie nuevo hereda la mitad del viejo. */
.pie a:link, .pie a:visited { color: #FFF; font-size: inherit; text-decoration: none; }
.pie a:hover { color: var(--sig-volanta-oscuro); text-decoration: none; opacity: 1; }
.pie span { font-size: inherit; }
.pie address {
  font-style: normal;
  color: var(--sig-niebla);
  line-height: 1.75;
  margin: 0 0 1.2rem 0;
}
.pie .redes {
  display: flex;
  gap: 8px;
}
.pie .redes a:link, .pie .redes a:visited {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background-color .18s ease-out, color .18s ease-out;
}
.pie .redes a:hover { background-color: #FFF; color: var(--sig-azul); }
.pie_sello {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.pie_sello img { width: 44px; height: auto; background: #FFF; border-radius: 50%; padding: 2px; }
.pie_base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 56px;
  padding: 22px 0 26px 0;
  font-size: 0.85rem;
  color: rgba(201, 220, 236, 0.75);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

/* ------------------------------------------------------------------------------
   MOVIMIENTO
   Las tarjetas suben 4 px y las fotos se agrandan un poco con el mouse; nada mas. Con
   "reducir movimiento" no se mueve nada (el color si cambia).
   ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tarjeta, a.industria img, a.flecha span::after { transition: none; }
  .tarjeta:hover { transform: none; }
  a.industria:hover img { transform: none; }
}

@media (max-width: 767.98px) {
  .bloque { padding: 64px 0; }
  .cabeza { margin-bottom: 36px; }
}

/* Los beneficios de un producto: la lista con tildes, en tarjetas blancas de a dos columnas. El
   ultimo, si es largo, ocupa el renglon entero. */
ul.tildes.beneficios_grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
ul.beneficios_grilla li {
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 12px;
  padding: 16px 20px 16px 56px;
  margin: 0;
}
ul.beneficios_grilla li::before, ul.beneficios_grilla li::after { left: 20px; top: 1.15rem; }
ul.beneficios_grilla li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  ul.tildes.beneficios_grilla { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------
   LA ORBITA DE SIGMA (home): el logo en el centro y las areas que abarca girando alrededor.
   Pedido de Maxi (2026-10-20) en lugar del cuadro del render, que repetia el banner.

   Todo el movimiento es transform -> lo compone la placa de video sin redibujar nada.
   El anillo gira y cada medalla gira al reves a la misma velocidad: asi quedan derechas. La
   posicion de cada una: rotate(i * 45deg) translateY(-radio) rotate(-i * 45deg).
   Gira solo mientras se ve (.en_vista la pone el script del pie) y queda quieta con el modo
   liviano o con "reducir movimiento". Con el mouse encima NO se frena: Maxi (2026-10-21) "no me
   gusta que deje de girar cuando el mouse pasa por encima" (las medallas no son enlaces).
   El radio y las medallas se miden en cqi (el ancho de la caja): con px, en el celular las
   ocho medallas se pisaban.
   ------------------------------------------------------------------------------ */
.orbita {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  container-type: inline-size;
  --radio: 210px;
  --vuelta: 72s;
}
@supports (width: 1cqi) {
  .orbita { --radio: 40cqi; }
}
/* la trama de puntos del banner, en azul y muy suave, que se desvanece hacia afuera (sin borde:
   Maxi no quiere un circulo que encierre nada) */
.orbita::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 62, 126, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  pointer-events: none;
}
/* el logo solo, grande, sin disco blanco atras */
.orbita_logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 46%;
  height: auto;
  transform: translate(-50%, -50%);
}
.orbita_anillo {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: orbita_gira var(--vuelta) linear infinite;
  animation-play-state: paused;
}
.orbita_anillo li {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(-1 * var(--radio))) rotate(calc(var(--i) * -45deg));
}
/* cada area: el icono y su nombre, sin tarjeta */
.orbita_medalla {
  position: absolute;
  left: -10cqi;
  top: -8cqi;
  width: 20cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqi;
  animation: orbita_gira var(--vuelta) linear infinite reverse;
  animation-play-state: paused;
}
.orbita_medalla img { width: 10cqi; height: 10cqi; }
.orbita_medalla span {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: clamp(0.66rem, 2.6cqi, 0.88rem);
  line-height: 1.15;
  color: var(--sig-noche);
  text-align: center;
}
/* chica (el celular): solo el icono; los nombres estan en las fichas de al lado */
@container (max-width: 420px) {
  .orbita_medalla { left: -7cqi; top: -5cqi; width: 14cqi; }
  .orbita_medalla span { display: none; }
  .orbita_medalla img { width: 10cqi; height: 10cqi; }
}
.orbita.en_vista .orbita_anillo,
.orbita.en_vista .orbita_medalla { animation-play-state: running; }
/* .quieto: la compu lenta que detecta _insert_head.tpl; .banner_liviano: la que detecta el banner
   de la home mientras se mira (pierde cuadros del video) */
.quieto .orbita .orbita_anillo, .quieto .orbita .orbita_medalla,
.banner_liviano .orbita .orbita_anillo, .banner_liviano .orbita .orbita_medalla { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .orbita .orbita_anillo, .orbita .orbita_medalla { animation: none; }
}
@keyframes orbita_gira {
  to { transform: rotate(360deg); }
}

/* LOS ROBOTS DE LA ORBITA (Javo, 2026-10-22: "robotitos de IA dando vueltas, ayudando y administrando
   esas cosas que SIGMA SaaS hace"). Tres robots (img/iconos/robot_ia.svg, el personaje del reel de
   SIGMA IA) recorren un camino por ADENTRO de las areas: se paran al lado de cada una y el area
   responde con un halo y un tilde, como "atendida". Decorado: aria-hidden, sin texto.

   COMO SE MUEVEN (todo transform, sin redibujar):
   - .orbita_robots es el centro del camino (1 cqi abajo del centro), achatado con scaleY: es una
     elipse de 26,5 x 22 cqi que pasa entre el logo y las areas. Cada robot se para EN LINEA con su area (mismo angulo), del lado
     de adentro. No se pega al icono a proposito: los nombres cuelgan debajo de cada icono y en las
     areas de arriba quedan justo entre el icono y el centro. Medido en todos los angulos del anillo
     (2026-10-22): pegado, algun robot pisaba siempre un nombre ancho ("Contabilidad", "Cuentas
     corrientes") o el logo; con esta elipse no pisa nombres, iconos ni logo ni parado ni en viaje.
     En el celular no hay nombres: los robots son mas grandes y van mas cerca.
   - .orbita_robot gira dos cosas a la vez: transform = el giro del anillo (orbita_gira, el mismo de las
     medallas, asi el robot acompania al area mientras esta parado) y rotate = los saltos de area en
     area (orbita_robot_va: 8 paradas de 45 grados). El span lo lleva al camino (translate) y deshace
     los dos giros para que el robot quede derecho; la img deshace el achatado.
   - Los tres usan la misma animacion corrida un tercio de vuelta (--r): asi cada area recibe una
     visita cada --robot-vuelta / 3, siempre con la misma cadencia, y el halo y el tilde de cada
     medalla son UNA animacion de ese periodo, con la demora de su lugar (--i). Si se cambia la
     cantidad de robots o de areas, cambian esas dos cuentas.
   EL ERROR MUDO: las demoras son negativas a proposito. Con una positiva, el robot espera quieto en
   su base (o el tilde no aparece) hasta que se cumple, y se desacopla de las medallas.
   Con "reducir movimiento", el modo liviano o .quieto quedan parados al lado de tres areas. */
.orbita { --robot-vuelta: 24s; }
/* el camino y el tamanio van en .orbita_robots y no en .orbita: un @container no puede cambiar a
   la caja que mide (.orbita), solo a lo que tiene adentro */
.orbita_robots {
  --robot-rx: 26.5cqi;
  --robot-achatado: 0.8302;    /* ry / rx = 22 / 26,5 */
  --robot-ancho: 5.6cqi;
  --robot-cy: 1cqi;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% + var(--robot-cy));
  width: 0;
  height: 0;
  transform: scaleY(var(--robot-achatado));
}
.orbita_robot {
  position: absolute;
  left: 0;
  top: 0;
  rotate: calc(var(--r) * 135deg);
  animation: orbita_robot_va var(--robot-vuelta) cubic-bezier(.45, 0, .25, 1) infinite,
             orbita_gira var(--vuelta) linear infinite;
  animation-delay: calc(var(--r) * var(--robot-vuelta) / -3), 0s;
  animation-play-state: paused;
}
.orbita_robot > span {
  position: absolute;
  left: calc(var(--robot-ancho) / -2);
  top: calc(var(--robot-ancho) * -0.5625);   /* el alto: 72 / 64 del ancho, a la mitad */
  width: var(--robot-ancho);
  translate: 0 calc(-1 * var(--robot-rx));
  rotate: calc(var(--r) * -135deg);
  animation: orbita_robot_contra var(--robot-vuelta) cubic-bezier(.45, 0, .25, 1) infinite,
             orbita_gira var(--vuelta) linear infinite reverse;
  animation-delay: calc(var(--r) * var(--robot-vuelta) / -3), 0s;
  animation-play-state: paused;
}
.orbita_robot img { display: block; width: 100%; height: auto; transform: scaleY(calc(1 / var(--robot-achatado))); }
/* el area que atienden: un halo detras del icono y un tilde arriba a la derecha */
.orbita_medalla::before, .orbita_medalla::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  animation: orbita_atiende calc(var(--robot-vuelta) / 3) linear infinite;
  animation-delay: calc(var(--i) * var(--robot-vuelta) / 8 - var(--robot-vuelta));
  animation-play-state: paused;
}
.orbita_medalla::before {
  z-index: -1;
  top: 0;
  width: 10cqi;
  height: 10cqi;
  margin-left: -5cqi;
  background-color: rgba(0, 146, 167, 0.22);
}
.orbita_medalla::after {
  top: -1cqi;
  width: 4cqi;
  height: 4cqi;
  margin-left: 2.6cqi;
  background: #0092a7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.5 2.5 4.9-5.1' fill='none' stroke='%23FFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 0 0.35cqi #FFF;
  animation-name: orbita_tilde;
}
@container (max-width: 420px) {
  .orbita_robots { --robot-rx: 29cqi; --robot-achatado: 0.931; --robot-ancho: 9cqi; --robot-cy: 0cqi; }   /* 27 / 29 */
}
.orbita.en_vista .orbita_robot,
.orbita.en_vista .orbita_robot > span,
.orbita.en_vista .orbita_medalla::before,
.orbita.en_vista .orbita_medalla::after { animation-play-state: running; }
.quieto .orbita_robot, .quieto .orbita_robot > span, .quieto .orbita_medalla::before, .quieto .orbita_medalla::after,
.banner_liviano .orbita_robot, .banner_liviano .orbita_robot > span,
.banner_liviano .orbita_medalla::before, .banner_liviano .orbita_medalla::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .orbita_robot, .orbita_robot > span, .orbita_medalla::before, .orbita_medalla::after { animation: none; }
}
/* 8 paradas: llega a cada area al 12,5 % de cada octavo y se queda el 60 % del tramo (1,8 s de 3) */
@keyframes orbita_robot_va {
  0%, 7.5% { rotate: 0deg; }
  12.5%, 20% { rotate: 45deg; }
  25%, 32.5% { rotate: 90deg; }
  37.5%, 45% { rotate: 135deg; }
  50%, 57.5% { rotate: 180deg; }
  62.5%, 70% { rotate: 225deg; }
  75%, 82.5% { rotate: 270deg; }
  87.5%, 95% { rotate: 315deg; }
  100% { rotate: 360deg; }
}
@keyframes orbita_robot_contra {
  0%, 7.5% { rotate: 0deg; }
  12.5%, 20% { rotate: -45deg; }
  25%, 32.5% { rotate: -90deg; }
  37.5%, 45% { rotate: -135deg; }
  50%, 57.5% { rotate: -180deg; }
  62.5%, 70% { rotate: -225deg; }
  75%, 82.5% { rotate: -270deg; }
  87.5%, 95% { rotate: -315deg; }
  100% { rotate: -360deg; }
}
/* en el periodo de una visita (8 s): el halo al llegar el robot y el tilde mientras se queda */
@keyframes orbita_atiende {
  0% { opacity: 0; transform: scale(0.7); }
  3% { opacity: 1; transform: scale(0.9); }
  16% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes orbita_tilde {
  0%, 4% { opacity: 0; transform: scale(0.3); }
  8% { opacity: 1; transform: scale(1.15); }
  10% { opacity: 1; transform: scale(1); }
  21% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(1); }
}

/* LA IA QUE EXISTE (Maxi, 2026-10-22): una pieza corta al pie de los robots, en la home (.rotulo_ia,
   debajo de la orbita) y en sigma_saas (.franja_ia, debajo de la cabecera con la red). Lo que dicen
   esta explicado en las plantillas: solo la Ayuda IA y el conector de IA, que andan hoy.
   .orbita_columna junta la orbita y el rotulo en la segunda columna de .dupla (un tercer hijo de la
   grilla bajaba a una fila nueva). */
.orbita_columna { min-width: 0; }
.dupla p.rotulo_ia {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin: 8px auto 0 auto;
  font-size: 0.95rem;
  line-height: 1.55;
}
.rotulo_ia img { flex: none; width: 40px; height: auto; }
.franja_ia {
  background-color: var(--sig-fondo-claro);
  border-bottom: 1px solid var(--sig-borde);
  padding: 36px 0;
}
/* Maxi (2026-10-22), sobre la primera version: "quedo re desnivelado". El h2 iba encima de la
   primera pieza sola y las dos piezas eran texto corrido de largo distinto (2 renglones contra 3),
   asi que el bloque se leia torcido. Ahora: el robot y el titulo en su propia columna, centrados
   en el alto, y las dos piezas en tarjetas iguales (la grilla las estira al mismo alto), con su
   titulo en un renglon propio: los arranques quedan alineados aunque los textos midan distinto. */
.franja_ia .container {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px 32px;
  align-items: center;
}
.franja_ia_cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.franja_ia_cabeza img { width: 64px; height: auto; }
.franja_ia h2 {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sig-noche);
  margin: 0;
}
.franja_ia ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.franja_ia li {
  margin: 0;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 20px 24px;
  font-size: 0.98rem;
  line-height: 1.6;
}
.franja_ia li strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.02rem;
}
@media (max-width: 767.98px) {
  .franja_ia .container { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .franja_ia_cabeza { flex-direction: row; justify-content: center; }
  .franja_ia_cabeza img { width: 44px; }
  .franja_ia ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ------------------------------------------------------------------------------
   APARECER AL BAJAR (pedido de Maxi, 2026-10-20)
   El script del pie le pone .aparece a lo que esta FUERA de la pantalla al cargar, y .visto
   cuando entra. Lo que ya se ve al cargar no se toca: esconderlo atrasaria el LCP (el
   navegador no cuenta un elemento invisible como pintado).
   - Solo opacity y transform: no hay que redibujar ni recalcular la pagina.
   - La clase .anima va en <html> (_insert_head.tpl) solo si hay IntersectionObserver y no es
     el modo liviano: sin JS, sin soporte o en una compu lenta, todo se ve de entrada.
   - Con "reducir movimiento", solo el fundido, sin el desplazamiento.
   - Terminada la entrada, el script saca las clases: si no, la transicion de .5 s y su
     demora quedaban tambien para el hover de las tarjetas.
   ------------------------------------------------------------------------------ */
.anima .aparece {
  opacity: 0;
  transform: translateY(28px);
}
/* La transicion va SOLO en la entrada (.visto). Puesta en .aparece, al esconder las piezas al
   cargar se veia un fundido de salida, y su transitionend las daba por vistas: todo aparecia
   y desaparecia en el primer medio segundo, antes de que nadie bajara (Maxi: "aparecen cuando
   se carga la pagina y no las llegas a ver"). */
.anima .aparece.visto {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .anima .aparece { transform: none; }
}
@media print {
  .anima .aparece { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------------------
   LOS PRODUCTOS CON SU COLOR (2026-10-21)
   Maxi: "en la de ETL, SmartTraderNX, etc. (las que tienen colores distintos) disena en base a
   los colores de esos productos nuestros para que tenga sentido". Cada pagina de producto lleva
   .tema_<producto> en el <main> y ahi adentro REDEFINE las variables de esta hoja: todas las
   piezas (cabecera, botones, volantas, tildes, iconos, bloques claros, el llamado del final) toman
   el color del producto sin una regla propia. El encabezado y el pie estan fuera del <main>:
   siguen en el azul de SIG, que es la casa.
   - --tema: el color del logo tal cual (acentos, el brillo de la placa del logo).
   - --sig-azul: enlaces, botones y tildes sobre blanco. Necesita contraste AA con el blanco
     (4,5:1): en los productos de color claro (SmartTraderNX, SIGKart, Sigma API, Argus) es una
     version mas oscura del color del logo. Con el del logo tal cual, el texto no se lee.
   - --sig-oscuro, --sig-noche: el fondo de la cabecera y del llamado, y los titulos.
   - --sig-niebla, --sig-volanta-oscuro: el texto y la volanta sobre ese fondo.
   - --sig-claro, --sig-fondo-claro, --sig-trama: el fondo de los iconos, el de los bloques
     claros y los puntos de la trama (azulados, sobre un fondo bordo o naranja se veian sucios).
   ------------------------------------------------------------------------------ */
.tema_etl {
  --tema: #b81439;
  --tema-brillo: rgba(232, 70, 108, 0.45);
  --sig-azul: #b81439;
  --sig-medio: #8c1030;
  --sig-noche: #3c0815;
  --sig-niebla: #f3d3dc;
  --sig-volanta-oscuro: #ffa3b8;
  --sig-claro: #fbeef2;
  --sig-fondo-claro: #fcf5f7;
  --sig-trama: rgba(255, 190, 205, 0.20);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(232, 70, 108, 0.32), rgba(232, 70, 108, 0) 70%),
    linear-gradient(180deg, #8c1030 0%, #650b23 55%, #3c0815 100%);
}
/* SmartTraderNX: el celeste de su logo TAL CUAL (#45d1dd) y el azul noche de su slide de la home
   (stnx_render_v5: #113043 a #08121e), nada en el medio. Maxi (2026-10-21): "el celeste del fondo
   y de los numeros, offline y online, y el resto de componentes no es el mismo celeste que el del
   smart trader nx". Iba con una version oscura del celeste para tener contraste AA (#0b7f8c, fondo
   #0b6f7c a #05333a), y ese oscuro se lee como OTRO color, petroleo. Con un celeste tan claro no hay
   oscuro que siga pareciendo celeste, asi que:
   - el celeste va de RELLENO con letra azul noche (botones, numeros, pastillas, tildes: 9,3:1) y
     sobre el azul noche (volanta, trama, brillo). Blanco sobre #45d1dd no llega a 2:1;
   - el texto y los enlaces sobre blanco van en el azul noche, no en un celeste oscurecido. */
.tema_stnx {
  --tema: #45d1dd;
  --tema-brillo: rgba(69, 209, 221, 0.40);
  --sig-azul: #0b1d2d;
  --sig-medio: #113043;
  --sig-noche: #0b1d2d;
  --sig-niebla: #c3d3de;
  --sig-volanta-oscuro: #45d1dd;
  --sig-claro: #d6f5f8;
  --sig-fondo-claro: #f1fafb;
  --sig-trama: rgba(69, 209, 221, 0.30);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(69, 209, 221, 0.26), rgba(69, 209, 221, 0) 70%),
    linear-gradient(180deg, #113043 0%, #0b1d2d 55%, #08121e 100%);
}
.tema_stnx a.boton:not(.boton_borde):link,
.tema_stnx a.boton:not(.boton_borde):visited,
.tema_stnx a.boton:not(.boton_borde):active {
  background-color: var(--tema);
  border-color: var(--tema);
  color: var(--sig-noche);
}
.tema_stnx a.boton:not(.boton_borde):hover { background-color: var(--sig-noche); border-color: var(--sig-noche); color: #FFF; }
.tema_stnx .oscuro a.boton:not(.boton_borde):hover { background-color: #FFF; border-color: #FFF; color: var(--sig-noche); }
.tema_stnx ol.pasos_icono > li::before,
.tema_stnx .paso_numero,
.tema_stnx .modo b,
.tema_stnx .cita::before,
.tema_stnx ul.tildes li::before,
.tema_stnx .marca .fichas li {
  background-color: var(--tema);
  color: var(--sig-noche);
}
.tema_kart {
  --tema: #ff6c0c;
  --tema-brillo: rgba(255, 108, 12, 0.45);
  --sig-azul: #c2410c;
  --sig-medio: #b8410b;
  --sig-noche: #431604;
  --sig-niebla: #ffe0cc;
  --sig-volanta-oscuro: #ffc08f;
  --sig-claro: #fff0e5;
  --sig-fondo-claro: #fff7f1;
  --sig-trama: rgba(255, 200, 160, 0.20);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(255, 140, 60, 0.35), rgba(255, 140, 60, 0) 70%),
    linear-gradient(180deg, #b8410b 0%, #8a3008 55%, #4d1a04 100%);
}
/* Sigma API: el azul marino de su logo de fondo y el verde de su titulo para los acentos */
.tema_api {
  --tema: #8ebc43;
  --tema-brillo: rgba(142, 188, 67, 0.40);
  --sig-azul: #3f7d1e;
  --sig-medio: #254381;
  --sig-noche: #14254a;
  --sig-niebla: #d6dff0;
  --sig-volanta-oscuro: #b9e07c;
  --sig-claro: #eef6e3;
  --sig-fondo-claro: #f5f9ee;
  --sig-trama: rgba(185, 224, 124, 0.18);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(142, 188, 67, 0.22), rgba(142, 188, 67, 0) 70%),
    linear-gradient(180deg, #254381 0%, #1b3366 55%, #0f1f42 100%);
}
.tema_pos {
  --tema: #039146;
  --tema-brillo: rgba(3, 145, 70, 0.45);
  --sig-azul: #037d3c;
  --sig-medio: #05793c;
  --sig-noche: #03301a;
  --sig-niebla: #cdeedb;
  --sig-volanta-oscuro: #8fe3b4;
  --sig-claro: #e5f6ec;
  --sig-fondo-claro: #f1faf5;
  --sig-trama: rgba(150, 230, 185, 0.20);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(40, 200, 110, 0.28), rgba(40, 200, 110, 0) 70%),
    linear-gradient(180deg, #05793c 0%, #045a2d 55%, #03301a 100%);
}
.tema_argus {
  --tema: #00abd4;
  --tema-brillo: rgba(0, 171, 212, 0.45);
  --sig-azul: #0479a8;
  --sig-medio: #05709e;
  --sig-noche: #04304a;
  --sig-niebla: #cfe9f6;
  --sig-volanta-oscuro: #8fdcf5;
  --sig-claro: #e5f5fb;
  --sig-fondo-claro: #f1fafd;
  --sig-trama: rgba(150, 220, 245, 0.22);
  --sig-oscuro:
    radial-gradient(900px 500px at 85% 0%, rgba(0, 171, 212, 0.32), rgba(0, 171, 212, 0) 70%),
    linear-gradient(180deg, #05709e 0%, #045579 55%, #04304a 100%);
}

/* LA CABECERA DE UN PRODUCTO: el texto a la izquierda y, a la derecha, su logo en una placa
   blanca (los logos son de color y no se leen sobre el fondo oscuro de su propio tono) con lo
   que abarca en pastillas. */
.cabecera_producto .dupla { gap: 56px; }
.cabecera_producto .bajada { max-width: 580px; }
.marca {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  background-color: #FFF;
  border-radius: 24px;
  padding: 46px 40px 34px 40px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 34px 80px -24px var(--tema-brillo, rgba(143, 208, 255, 0.35)), 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
/* el logo a 320 px de ancho como mucho y 130 de alto: con width/height en auto quedaba al tamanio
   chico de su SVG (211x68). object-fit: el de SIGMA POS es 2:1 y llega antes al alto que al ancho */
.marca img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 130px;
  object-fit: contain;
  margin: 0 auto;
}
.marca .fichas { justify-content: center; margin-top: 30px; }
.marca .fichas li { background-color: var(--sig-claro); border-color: transparent; }
/* Argus: su celeste sobre el fondo claro de la ficha da 4,36:1 (AA pide 4,5); el medio, 4,92:1 */
.tema_argus .marca .fichas li { color: var(--sig-medio); }
/* SmartTraderNX (2026-10-21): sin placa. El logo suelto sobre el azul noche, con el texto en blanco
   (smarttrader_blanco.svg: el gris #848484 del logo no se lee sobre oscuro), y abajo las tiendas con
   sus distintivos negros, los del banner de la home (.banner_tienda, en sig.css). Maxi, sobre la
   placa blanca con pastillas: "no me gusta nada". .marca img tambien agarra a los distintivos:
   llevan su propio tamanio. */
.marca.marca_libre { background: none; box-shadow: none; padding: 0; max-width: 480px; }
/* 148 de alto: con 116 se veia chico al lado del titulo (Maxi, en su pantalla de 2560x1600) */
.marca_libre > img { max-width: 460px; height: 148px; }
.marca_tiendas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 196px));
  justify-content: center;
  gap: 14px;
  margin: 34px 0 0 0;
  line-height: 0;
}
.marca_tiendas .banner_tienda { height: 54px; }
.marca .marca_tiendas img { width: auto; max-width: none; height: 35px; margin: 0; }
@media (max-width: 575.98px) {
  .marca_libre > img { max-width: 280px; height: 90px; }
}
@media (max-width: 991.98px) {
  .marca { margin: 0 auto; max-width: 420px; padding: 36px 28px 28px 28px; }
}

/* Los pasos con dibujo (como funciona SmartTraderNX o SIGKart): una tarjeta por paso con su icono
   y el numero en una pastilla. El numero lo pone el contador de la lista, no el texto. */
ol.pasos_icono {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
ol.pasos_icono.de_3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
ol.pasos_icono.de_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
ol.pasos_icono > li {
  position: relative;
  counter-increment: paso;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 34px 22px 26px 22px;
  text-align: center;
}
ol.pasos_icono > li::before {
  content: counter(paso);
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--sig-azul);
  color: #FFF;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 30px;
  text-align: center;
}
ol.pasos_icono img { display: block; width: 84px; height: 78px; object-fit: contain; margin: 0 auto 18px auto; }
ol.pasos_icono p { margin: 0; font-size: 1rem; line-height: 1.6; text-align: center; color: var(--sig-tinta); }
@media (max-width: 991.98px) {
  ol.pasos_icono, ol.pasos_icono.de_3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  ol.pasos_icono, ol.pasos_icono.de_3, ol.pasos_icono.de_2 { grid-template-columns: minmax(0, 1fr); }
}
/* el titulo de un modo de funcionamiento, con el modo en una pastilla (ONLINE, OFFLINE) */
.modo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sig-noche);
  margin: 0 0 20px 0;
}
.modo b {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFF;
  background-color: var(--sig-azul);
  border-radius: 999px;
  padding: 6px 12px;
}
* + .modo { margin-top: 48px; }
/* lo que distingue al modo, despues de la pastilla (SmartTraderNX: quien factura) */
.modo .modo_que { font-weight: 400; font-size: 1rem; color: var(--sig-tinta); }

/* Lo que hace un producto, con su icono al lado: tarjetas de a dos columnas. Para frases enteras
   (los beneficios de SIGKart, lo que sabe el vendedor con SmartTraderNX); los nombres cortos van
   en las tarjetas de circuito. */
ul.items_icono {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
ul.items_icono > li {
  display: flex;
  align-items: center;
  gap: 18px;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 22px 24px;
}
ul.items_icono > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.item_icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: var(--sig-claro);
}
.item_icono img { width: 36px; height: 36px; object-fit: contain; }
ul.items_icono h3 {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--sig-noche);
  margin: 0 0 0.35rem 0;
}
ul.items_icono p { margin: 0; font-size: 1rem; line-height: 1.65; }
@media (max-width: 767.98px) {
  ul.items_icono { grid-template-columns: minmax(0, 1fr); }
}

/* El icono arriba de una tarjeta (las partes de SIG ETL, los beneficios) */
.tarjeta_icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background-color: var(--sig-claro);
  margin: 0 0 20px 0;
}
.tarjeta_icono img { width: 54px; height: 50px; object-fit: contain; }

/* Un grafico del producto (como funciona SIG ETL o Sigma API) en una lamina blanca */
.figura {
  max-width: 980px;
  margin: 0 auto;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--sig-sombra);
}
.figura img { display: block; width: 100%; height: auto; }

/* Una sola tarjeta en la columna angosta (Hoteleria: solo Argus): centrada y no media fila */
.grilla_angosta > .tarjeta:only-child { grid-column: 1 / -1; max-width: 380px; width: 100%; justify-self: center; }

/* Lo que se resuelve en una frase destacada (la vision de la empresa) */
.cita {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 22px;
  padding: 52px 56px 46px 56px;
  box-shadow: var(--sig-sombra);
  text-align: center;
}
.cita::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--sig-azul);
  color: #FFF;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: 84px;
}
.cita p {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.5;
  color: var(--sig-noche);
  text-align: center;
  margin: 0;
}
@media (max-width: 575.98px) { .cita { padding: 48px 24px 32px 24px; } }

/* Tres columnas de tildes (los valores: palabras sueltas) */
ul.tildes.beneficios_grilla.de_3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  ul.tildes.beneficios_grilla.de_3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El numero de una tarjeta (la mision, los principios de la politica de calidad) */
/* align-self: la tarjeta es flex en columna y estiraba el numero de lado a lado */
.tarjeta .paso_numero { margin-bottom: 1.2rem; align-self: flex-start; }

/* La ubicacion: el domicilio con sus botones al lado del mapa */
.domicilio h2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  color: var(--sig-noche);
  margin: 0 0 0.4rem 0;
}
.domicilio h3 {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sig-azul);
  margin: 0 0 1rem 0;
}
.domicilio p { font-size: 1.06rem; line-height: 1.75; margin: 0; }
.mapa {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--sig-borde);
  box-shadow: var(--sig-sombra);
  aspect-ratio: 4 / 3;
  background-color: var(--sig-fondo-claro);
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Los canales de contacto (telefono, WhatsApp, oficina), al lado del formulario */
ul.canales {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
ul.canales li {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: var(--sig-radio);
  padding: 18px 20px;
}
ul.canales .item_icono { width: 48px; height: 48px; border-radius: 14px; color: var(--sig-azul); }
ul.canales .item_icono svg { width: 24px; height: 24px; }
ul.canales small {
  display: block;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #637285;           /* #6b7a8c daba 4,39:1 sobre blanco a 11,5 px (AA pide 4,5) */
  margin-bottom: 2px;
}
ul.canales a:link, ul.canales a:visited, ul.canales span {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--sig-noche);
  text-decoration: none;
}
ul.canales a:hover { color: var(--sig-azul); text-decoration: underline; }
.formulario {
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 20px;
  padding: 28px 28px 12px 28px;
  box-shadow: var(--sig-sombra);
  min-height: 420px;
}
/* En el celular se sumaban por lado los rellenos de la tarjeta (28 px), de Bitrix
   (.b24-form-padding-side, 18) y de su <form> (30): los campos quedaban de 206 px y el primer texto
   de ayuda se cortaba (testing 2026-10-21). */
@media (max-width: 575.98px) {
  .formulario { padding-left: 16px; padding-right: 16px; }
  .formulario .b24-form-padding-side { padding-left: 0 !important; padding-right: 0 !important; }
}
.dupla_arriba { align-items: start; }
/* la tarjeta de un producto sin logo (los modulos adicionales): el nombre en el lugar del logo */
a.tarjeta_nombre:link, a.tarjeta_nombre:visited {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--sig-noche);
  text-decoration: none;
}
a.tarjeta_nombre:hover { color: var(--sig-azul); text-decoration: none; }
/* el titulo de una lista centrada de 900 px (beneficios_grilla): alineado con la lista */
.modo.modo_centro { max-width: 900px; margin-left: auto; margin-right: auto; }
/* un grafico chico (el de Sigma API es de 420 px): a su tamano, no estirado y borroso */
.figura.figura_chica { max-width: 470px; }
/* una cabeza sola en su bloque, sin nada abajo */
.cabeza:last-child { margin-bottom: 0; }
/* cinco tarjetas de circuito en una fila (los modulos adicionales) */
ul.circuitos_grilla.de_5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 991.98px) { ul.circuitos_grilla.de_5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { ul.circuitos_grilla.de_5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* los iconos de los modulos ya son un circulo de color: sin el fondo claro atras */
.circuito_icono.circuito_icono_color { background-color: transparent; }
.circuito_icono.circuito_icono_color img { width: 64px; height: 64px; }
/* el recuadro con varios parrafos (el certificado de la politica de calidad): la imagen arriba */
.recuadro.recuadro_arriba { align-items: flex-start; margin: 0; }
.recuadro.recuadro_arriba p + p { margin-top: 0.8rem; }
/* los principios de calidad: de a dos, en la columna de 900 */
.grilla_angosta.grilla_principios { max-width: 900px; }
.paso_numero { padding: 0 0.4em; min-width: 44px; width: auto; border-radius: 999px; }
ul.canales .item_icono svg { fill: currentColor; }
/* contacto: los canales angostos y el formulario ancho */
.dupla.dupla_contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.dupla_contacto .titulo { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 1.4rem; }
@media (max-width: 991.98px) { .dupla.dupla_contacto { grid-template-columns: minmax(0, 1fr); } }
/* la conexion de Tienda Nube: el aviso de exito centrado, con la mesa de ayuda abajo */
.exito { max-width: 620px; margin: 0 auto; text-align: center; }
.exito img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 28px auto; }
.exito h2 { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: var(--sig-noche); margin: 0 0 0.6rem 0; }
.exito p { text-align: center; font-size: 1.08rem; }
.exito_destacado { font-family: 'Montserrat', 'OpenSans', sans-serif; font-weight: 600; color: var(--sig-azul); }
.exito ul.canales { text-align: left; max-width: 420px; margin: 28px auto 0 auto; }
/* el texto con pastillas (los rubros de Retail) */
.texto .fichas { margin-top: 0; }
/* lo que no se corta al final del renglon ("e-commerce" en el titulo de SIGKart quedaba "e-" arriba) */
.sin_corte { white-space: nowrap; }
@media (max-width: 479.98px) {
  /* de a dos no entra "Responsabilidad." (una palabra sola no se corta) */
  ul.tildes.beneficios_grilla.de_3 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------
   MENOS TEXTO, MAS ENFASIS (2026-10-21)
   Maxi, mirando SmartTraderNX y SIG ETL: "demasiada verborragia, mucho texto y poco enfasis en los
   textos para darles dinamismo y facilidad de leer/retener informacion". Cada idea va en una pieza
   corta (un paso, una tarjeta, una pastilla) con lo que importa en negrita; lo que se repetia (la
   lista de la empresa en SmartTraderNX era la del vendedor otra vez) se fue.
   ------------------------------------------------------------------------------ */
/* El titulo de un producto: el nombre grande y lo que es, abajo y mas chico. En cuatro renglones
   del mismo tamanio no se distinguia el nombre. El " — " sigue en el h1 (sr-only): para el buscador
   y el lector de pantalla el titulo dice lo mismo que antes. */
.cabecera h1 .h1_lema {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sig-niebla);
}
/* La negrita en el color de los titulos: con el gris del texto, sola casi no se distinguia. */
main p strong, main li strong { color: var(--sig-noche); }
main .oscuro p strong, main .oscuro li strong { color: #FFF; }

/* seis tarjetas de circuito de a tres (lo que sabe el vendedor de SmartTraderNX antes de la visita) */
ul.circuitos_grilla.de_3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
@media (max-width: 575.98px) { ul.circuitos_grilla.de_3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cuatro tildes en una fila (lo que se gana en cada visita) */
ul.tildes.beneficios_grilla.de_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
/* De a tres, la ultima de una lista impar NO va a todo el ancho (la regla de las de a dos): con tres
   tildes quedaban dos arriba, un hueco al lado y la tercera sola abajo, estirada. */
@media (min-width: 768px) {
  ul.tildes.beneficios_grilla.de_3 li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 991.98px) { ul.tildes.beneficios_grilla.de_4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { ul.tildes.beneficios_grilla.de_4 { grid-template-columns: minmax(0, 1fr); } }
/* el titulo de una lista a todo el ancho, centrado sobre ella */
.modo.modo_medio { justify-content: center; text-align: center; }
/* el texto debajo del titulo de un paso de la linea de tiempo */
.paso p { margin: 0.45rem 0 0 0; font-size: 0.98rem; line-height: 1.6; text-align: center; color: #566476; }
.paso p strong { color: var(--sig-noche); }
* + .figura { margin-top: 48px; }

/* Las preguntas que responde un producto (SIG ETL): en globos y no en un parrafo, que es como se
   leen de un vistazo. El signo es un adorno: la pregunta lleva el suyo en el texto. */
ul.preguntas {
  list-style: none;
  padding: 0;
  margin: 0 auto 44px auto;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
ul.preguntas li {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 18px 18px 18px 4px;
  padding: 18px 20px;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--sig-noche);
  box-shadow: 0 12px 26px -18px rgba(0, 30, 70, 0.45);
}
ul.preguntas li::before {
  content: "?";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--sig-azul);
  color: #FFF;
  font-size: 1.1rem;
  line-height: 34px;
  text-align: center;
}
@media (max-width: 767.98px) {
  ul.preguntas { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
}

/* Los sistemas operativos (Argus): el logo y el nombre, en vidrio sobre la franja oscura. Antes era
   un recuadro claro sobre un bloque claro: Maxi, "apenas se nota que es una seccion diferente".
   Los logos son los de Font Awesome 4.0.3 (fuente: SIL OFL 1.1), dibujados en la pagina. */
.sistemas_titulo {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sig-volanta-oscuro);
  margin: 0 0 18px 0;
}
ul.sistemas {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
ul.sistemas li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 12px 24px 12px;
  border-radius: var(--sig-radio);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #FFF;
}
.so_icono { width: 54px; height: 54px; fill: currentColor; }
@media (max-width: 575.98px) {
  ul.sistemas { gap: 10px; }
  ul.sistemas li { padding: 22px 8px 18px 8px; font-size: 1rem; gap: 10px; }
  .so_icono { width: 42px; height: 42px; }
}

/* Lo que incluye un plan (Argus): las cantidades en grande, en un panel del color del producto */
.incluye {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px 48px;
  max-width: 900px;
  margin: 56px auto 0 auto;
  padding: 32px 36px;
  border-radius: 20px;
  background-color: var(--sig-claro);
}
.incluye h2 {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem);
  line-height: 1.2;
  color: var(--sig-noche);
  margin: 0;
}
.incluye ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.incluye li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #FFF;
  border-radius: var(--sig-radio);
  padding: 20px 22px;
}
.incluye li b {
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--sig-azul);
}
.incluye li span { font-size: 1rem; line-height: 1.45; }
/* El titulo arriba desde 991: al lado, entre 768 y 991 a cada cantidad le quedaban ~126 px y
   "Unlimited" (/en/, una palabra a 2,4rem) se salia de su tarjeta. "Sin limite" no se notaba porque
   corta en el espacio. */
@media (max-width: 991.98px) {
  .incluye { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .incluye { padding: 28px 20px; text-align: center; }
  .incluye ul { grid-template-columns: minmax(0, 1fr); }
}

/* las pastillas dentro de una tarjeta (lo que se comparte por SIG ETL Web) */
.tarjeta .fichas { margin: 0.2rem 0 0 0; }
.tarjeta .fichas li { font-size: 0.8rem; padding: 5px 12px; background-color: var(--sig-fondo-claro); }

/* ------------------------------------------------------------------------------
   LAS PANTALLAS DE LOS PRODUCTOS (2026-10-22)
   Javo pidio "pantallas de los productos para mostrar el producto" y Maxi aprobo todas las capturas,
   con datos ficticios: "usa todas, fijate como las pones para que queden bien". Las imagenes van en
   img/capturas/ (webp) y salen de banners-web/capturas_productos/ (su LEEME dice de donde sale cada
   una y que se reemplazo). Las de escritorio van tambien a 760 px para el celular (<picture>).
   - SIGMA web y SIG ETL: la franja "Asi se ve", una fila por pantalla con el texto al lado (el lado
     alterna). La pantalla va en un marco de navegador simple: la barra con los tres puntos es el
     fondo del ::before, sin markup ni imagen, en los grises del borde. En el celular, la pantalla
     arriba y el texto abajo.
   - SmartTraderNX: los telefonos (con su marco y el fondo transparente) junto a lo que muestran: la
     hoja de ruta al lado de la tarjeta "Hoja de ruta" y el pedido por voz en tres pasos, que en el
     celular se pasan de costado (scroll-snap, sin JS: no se mueve solo).
   - APARECEN AL BAJAR porque cada pieza es hija de una .grilla (el selector del script del pie):
     cada fila es una .grilla de dos piezas. Ninguna se superpone con su vecina, asi que nada depende
     del z-index entre hermanos animados (la trampa de .aparece, c6f5641). Dentro de una pieza
     animada no hay otra (.con_telefono no anida una .grilla): una pieza dentro de otra, las dos con
     opacity, se veia entrar dos veces.
   ------------------------------------------------------------------------------ */
.vistas {
  display: grid;
  gap: 72px;
}
/* la pantalla en dos tercios (unos 700 px en escritorio: el webp de 1200 alcanza hasta 1,7x) y el
   texto, que es una linea, en el tercio que queda */
.grilla.vista {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
/* el lado alterna: en las filas pares la pantalla va a la derecha. Las columnas se dan vuelta con
   ella: con order solo, la pantalla caia en la columna angosta. */
.grilla.vista:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.vista:nth-child(even) > .navegador { order: 2; }
/* la raya corta del color del producto arriba del titulo, como el acento de las tarjetas */
.vista_texto h3::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 3px;
  background-color: var(--sig-azul);
  margin: 0 0 18px 0;
}
.vista_texto h3 {
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  color: var(--sig-noche);
  margin: 0 0 0.6rem 0;
}
.vista_texto p {
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 991.98px) {
  .vistas { gap: 56px; max-width: 760px; margin: 0 auto; }
  .grilla.vista, .grilla.vista:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vista:nth-child(even) > .navegador { order: 0; }
}

/* El marco de navegador: una barra clara con tres puntos grises y la pantalla abajo, a todo el ancho */
.navegador {
  margin: 0;
  background-color: #FFF;
  border: 1px solid var(--sig-borde);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sig-sombra);
}
.navegador::before {
  content: "";
  display: block;
  height: 28px;
  border-bottom: 1px solid var(--sig-borde);
  background-color: var(--sig-fondo-claro);
  background-image:
    radial-gradient(circle, rgba(46, 64, 88, 0.22) 4px, transparent 4.5px),
    radial-gradient(circle, rgba(46, 64, 88, 0.22) 4px, transparent 4.5px),
    radial-gradient(circle, rgba(46, 64, 88, 0.22) 4px, transparent 4.5px);
  background-size: 12px 12px;
  background-position: 12px 50%, 30px 50%, 48px 50%;
  background-repeat: no-repeat;
}
.navegador picture, .navegador img { display: block; width: 100%; height: auto; }
@media (max-width: 575.98px) {
  .navegador { border-radius: 10px; }
  .navegador::before { height: 20px; background-size: 9px 9px; background-position: 9px 50%, 22px 50%, 35px 50%; }
}

/* Un telefono al lado de las tarjetas que cuenta (la hoja de ruta de SmartTraderNX): el PNG trae su
   marco, su sombra y el fondo transparente, asi que va sin caja. */
.telefono { margin: 0; }
.telefono img { display: block; width: 100%; height: auto; }
.grilla.con_telefono {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.tarjetas_2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 991.98px) {
  .grilla.con_telefono { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .con_telefono > .telefono { width: 100%; max-width: 280px; margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .tarjetas_2 { grid-template-columns: minmax(0, 1fr); }
}

/* Los pasos con telefono (el pedido por voz): el telefono y abajo el numero y una linea. En el
   celular no entran tres de a lo ancho: se pasan de costado y el siguiente asoma para que se note. */
ol.grilla.telefonos {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  counter-reset: paso;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
ol.telefonos > li { counter-increment: paso; }
ol.telefonos img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
ol.telefonos p {
  max-width: 280px;
  margin: 14px auto 0 auto;
  font-size: 1.02rem;
  line-height: 1.55;
  text-align: center;
}
ol.telefonos p::before {
  content: counter(paso);
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: var(--sig-azul);
  color: #FFF;
  font-family: 'Montserrat', 'OpenSans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 30px;
  text-align: center;
}
.tema_stnx ol.telefonos p::before { background-color: var(--tema); color: var(--sig-noche); }
@media (max-width: 767.98px) {
  ol.grilla.telefonos {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -15px;
    padding: 0 15px 8px 15px;
    scroll-padding: 0 15px;
  }
  ol.grilla.telefonos::-webkit-scrollbar { display: none; }
  ol.telefonos > li { flex: 0 0 min(72%, 280px); scroll-snap-align: center; }
}