@charset "utf-8";
/* CSS Document */
/* Anton, para los titulos del banner. Va AUTOALOJADA y no desde fonts.googleapis.com.
   No es por pureza -el sitio ya carga cdnjs, GTM, Bitrix y el pixel de Facebook-: es
   porque el titulo del banner es el texto mas grande de la portada y cae adentro del
   LCP. Con la fuente en el mismo origen se sirve en la misma conexion ya abierta; con
   Google Fonts hay que resolver dos dominios y abrir dos conexiones TLS antes de poder
   pintarlo. Licencia SIL Open Font 1.1, el texto completo en fonts/Anton-OFL.txt.

   Solo el subconjunto "latin" (U+0000-00FF): ahi entran todos los acentos del
   castellano y la ñ, asi que con 18KB alcanza para los dos arboles. Un solo peso: no
   hay que pedirle font-weight:700 porque el navegador lo falsearia. */
@font-face {
    font-family: Anton;
    src: url('../fonts/Anton.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family:OpenSans-Bold;
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold.woff') format('woff'),
         url('../fonts/OpenSans-Bold.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:OpenSans;
    src: url('../fonts/OpenSans.eot');
    src: url('../fonts/OpenSans.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans.woff') format('woff'),
         url('../fonts/OpenSans.ttf') format('truetype'),
         url('../fonts/OpenSans.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
  font-family: 'OpenSans', sans-serif;
  color: #333;
}
h1 {
  color:#2e4058;
  font-size: 1.7rem;
  display: inline-block;
  margin: 40px 0 50px 0;
}
h2 {
  color: #003d7d;
  font-size: 1.7rem;
  margin: 2rem 0 1rem 0;
}
h3 {
  color: #2e4058;
  font-size: 1.2rem;
}
h4 {
  color: #2e4058;
  font-size: 1.2rem;
  border-bottom: solid 2px #003d7d;
  margin: 2rem 0 1rem 1.5rem;
  padding-bottom: 0.6rem;
}
h5 {
  color: #2e4058;
  font-size: 1.3rem;
  margin: 2rem 0 1rem 0;
}
p {
  text-align: justify;
}
ul {
  list-style-image: url("../img/list-2.png");
}
a:link {
  color:#2e4058;
}
a:visited {
  color:#2e4058;
}
a:active {
  color:#003d7d;
}
a:hover {
  color:#95a5ba;
}
strong {
  font-weight: normal;
  font-family: 'OpenSans-Bold';
}

/* menu */
.bg-dark {
  background-color: #2e4058 !important;
  border-bottom: solid 1px #95a5ba;
  border-top: solid 1px #95a5ba;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255) !important;
    padding: .375rem .75rem;
}
.navbar-dark .navbar-nav .active>.nav-link {
    color: rgba(255,255,255, 0.5) !important;
}
.navbar-collapse {
  flex-grow: 0 !important;
}
.dropdown-menu{
  display: none;
  position: absolute;
  z-index: 100;
}
a.dropdown-item:hover {
  background-color: #f0f0f0 !important;
}
#sub-dropdown-menu{
  display: none;
  position: absolute;
  background-color: #f0f0f0;
  margin-left: 158px;
  margin-top: -35px;
}
#sub-dropdown-menu a , .dropdown-menu a {
	color: #000 !important;
	font-size: 16px !important;
}
#sub-dropdown-menu a {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
}
#sub-dropdown-menu a:hover {
  background-color: #FFF;
  text-decoration: none;
}
#sub-dropdown a img {
  margin: 0 0 3px 3px;
}
.dropdown .dropdown-menu a:hover {
  background-color: #c9c7c7;
}

#sub-dropdown:hover #sub-dropdown-menu {
  display: block;
}
.dropdown-divider {
  border-top: 1px solid #acaeaf;
}

a.btn:link {
  color: #FFF;
}
a.btn:visited {
  color: #FFF;
}
a.btn:hover {
  color: #f0f0f0;
}
.btn {
  color: #FFF;
}
.btn .active {
  color: rgba(255,255,255, 0.5) !important;
}
.dropdown-toggle::after {
  border-top-color: #FFF;
}
.btn-group, .btn-group-vertical {
  display: inline;
}
.btn.focus, .btn:focus {
  box-shadow: none;
}
.nav-link {
  display: inline-block;
}



/* slider */
.carousel-caption {
  top:70px !important;
  right: 6% !important;
}
.carousel-caption h5 {
  text-align: right;
}
.carousel-caption h5 {
  color: #FFF;
  font-size: 2rem;
  font-style: italic;
}
.carousel-caption a:link {
  color: #FFF;
  font-size: 2rem;
  font-style: italic;
}
.carousel-caption a:visited {
  color: #FFF;
}
.carousel-caption a:active {
  color: #FFF;
}
.carousel-caption a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  text-decoration: none;
}

.carousel-caption .blog {
  text-align: left !important;
}
.carousel-control-next, .carousel-control-prev {
  width: 10% !important;
}

/* header */
header .redes {
  margin: 10px 0;
}
header .redes img {
  padding: 0 9px;
}
header a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
header .news img {
  margin: 10px 0;
  display: inline-block;
}
a.sig:link {
  margin: 20px 0;
  display: inline-block;
}
header .idioma {
  padding: 0 9px 0px 9px;
}
 header .idioma a:link {
   color: #95a5ba;
   font-size: 0.8rem;
   background-image: url("../img/es.png");
   background-repeat: no-repeat;
   background-position: right center;
   padding: 0px 25px 0px 0px;
 }
 header .idioma a:visited {
   color: #95a5ba;
 }
 header .idioma a:active {
   color: #95a5ba;
 }
 header .idioma a:hover {
   opacity: 0.6;
   filter: alpha(opacity=60);
 }

/* home */
.soluciones {
  color: #2e4058;
  font-size: 1rem;
}
/* T03: estas franjas eran <h1> por estilo, no por jerarquia -el unico h1 de cada pagina
   de producto era este cartel de venta cruzada del final-. Al pasarlas a <h2> hay que
   escribir a mano el margin (y donde falte, font-size y display) que antes heredaban de
   la regla base de h1. El calificador "section" no es decorativo: le gana por
   especificidad a .argus_saas h2 / .sig_etl h2 / .smart_trader h2, que estan mas abajo
   en esta hoja y llevan la clase en el <main>, asi que envuelven estas secciones. */
section.soluciones h2 {
  color:#2e4058;
  font-size: 1.7rem;
  border-bottom: solid 2px #003d7d;
  display: inline-block;
  padding-bottom: 0.6rem;
  margin: 40px 0 50px 0;
}
.soluciones img {
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.soluciones a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.contacto {
  color: #FFF;
  font-size:1.5rem;
  background-color: #003d7d;
}
.contacto a:link {
  color:#FFF;
  background-color: #2e4058;
  border: solid 2px #95a5ba;
  border-radius: 5px;
  display: inline-block;
  padding: 10px 20px;
  margin: 7px 0;
}
.contacto a:visited {
  color:#FFF;
  border-color: #95a5ba;
}
.contacto a:active {
  color:#FFF;
  border-color: #95a5ba;
}
.contacto a:hover {
  text-decoration: none;
  color:#95a5ba;
  background-color: #003d7d;
}
.contacto span {
  display: inline-block;
}

/* EL CIERRE DE LAS PAGINAS DE PRODUCTO. Mismo HTML que la franja de la home, pero en
   claro, y no es preferencia: al final de la pagina la franja queda pegada al footer,
   que lleva EXACTAMENTE el mismo #003d7d, y las dos se leen como un solo bloque azul. El
   pedido -que es lo unico que se quiere que pase ahi- desaparecia adentro del pie. En
   claro se despega del verde de arriba y del azul de abajo.

   Va DESPUES de las reglas de .contacto: los dos selectores valen (0,2,0) y la seccion
   lleva las dos clases, asi que el que gana es el que esta mas abajo. */
.contacto_cierre {
  background-color: #edf0f2;
  color: #2e4058;
  border-top: solid 1px #dbe1e7;
}
.contacto_cierre a:link,
.contacto_cierre a:visited,
.contacto_cierre a:active {
  font-family: 'OpenSans-Bold', sans-serif;
  background-color: #2e4058;
  border-color: #2e4058;
  color: #FFF;
  padding: 13px 28px;
}
.contacto_cierre a:hover {
  background-color: #FFF;
  border-color: #2e4058;
  color: #2e4058;
}
/* El "section." NO SOBRA. Cada pagina de producto pinta sus <span> con el color de su
   marca -".smart_trader span" vale (0,2,0), y hay una por producto-, y esas reglas estan
   mas abajo en el archivo que estas. Sin el calificador la pregunta del cierre salia en
   el celeste #45d1dd de SmartTraderNX sobre el gris claro: 1.84:1, ilegible. Con
   "section.contacto_cierre span" son (0,2,1) y ganan por especificidad, este donde este
   la otra regla.
   Ademas un color que matchea directo al <span> le gana siempre a uno heredado del
   contenedor, asi que poner el color en .contacto_cierre no alcanzaba. */
section.contacto_cierre span {
  color: #2e4058;
}
section.contacto_cierre img {
  opacity: 0.55;
  filter: alpha(opacity=55);
}
.sigmasaas h1 {
  color: #fbb611;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.4rem;
  display: block;
  margin: 0;
}
.sigmasaas a:link {
  color: #0092a7;
}
.sigmasaas a:visited {
  color: #0092a7;
}
.sigmasaas a:active {
  color: #0092a7;
}
.sigmasaas a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.sigmasaas p {
  color:#2e4058;
  font-size: 1.2rem;
}
.integraciones {
  background-color: #5f7875;
}
section.integraciones h2 {
  color: #FFF;
  border-color: #FFF;
  font-size: 1.7rem;
  display: inline-block;
  margin: 40px 0 50px 0;
}
.integraciones a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.nosotros {
  color: #404040;
  font-size: 1.5rem;
  line-height: 1.7rem;
}
section.nosotros h2 {
  color:#2e4058;
  font-size: 1.7rem;
  border-bottom: solid 2px #003d7d;
  display: inline-block;
  padding-bottom: 0.6rem;
  margin: 40px 0 50px 0;
}
.nosotros img {
  margin-bottom: 20px;
}
.sig_news {
  color: #FFF;
  background-color: #0686c2;
}
.sig_news p {
  font-size: 1.4rem;
  margin: 10px 0 0;
}
.sig_news a.sn:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.sig_news a.suscribete:link {
  color:#FFF;
  font-size: 1.5rem;
  background-color: #003d7d;
  display: inline-block;
  padding: 10px 20px;
  border: solid 2px #95a5ba;
  border-radius: 5px;
}
.sig_news a:visited {
  color:#FFF;
  border-color: #95a5ba;
}
.sig_news a:active {
  color:#FFF;
  border-color: #95a5ba;
}
.sig_news a.suscribete:hover {
  color:#003d7d;
  text-decoration: none;
  background-color: #0686c2;
}
.industrias {
  background-color: #2e4058;
}
section.industrias h2 {
  color: #95a5ba;
  border-color: #95a5ba;
  font-size: 1.7rem;
  display: inline-block;
  margin: 40px 0 50px 0;
}
.industrias .card {
  border-radius: 0;
  border-bottom: solid 4px #95a5ba;
}
.industrias .card img {
  border-radius: 0;
}
.industrias a:link {
  font-family: 'OpenSans-Bold', sans-serif;
  font-size:1.2rem;
  color: #2e4058;
}
.industrias a:visited {
  color: #2e4058;
}
.industrias a:active {
  color: #2e4058;
}
.industrias a:hover {
  color: #95a5ba;
  text-decoration: none;
}

/* menu */
.seccion {
  background: #edf0f2;
}
.otras_soluciones {
  background-color: #f6f6f6;
}


/* list iconos */
.circuitos {
  padding: 20px 0 30px 0;
}
.circuitos h5 {
  text-align: center;
  line-height: 1.8rem;
  margin-bottom: 30px;
}
.circuitos ul {
  margin-bottom: 0;
}
.circuitos ul li {
  margin: 10px 0;
}
.circuitos ul li span {
  position: relative;
  top: -10px;
}
.circuitos ul .produccion {
  list-style-image: url("../img/produccion.svg");
}
.circuitos ul .logistica {
  list-style-image: url("../img/logistica.svg");
}
.circuitos ul .facturacion {
  list-style-image: url("../img/facturacion.svg");
}
.circuitos ul .stock {
  list-style-image: url("../img/stock.svg");
}
.circuitos ul .contabilidad {
  list-style-image: url("../img/contabilidad.svg");
}
.circuitos ul .ventas {
  list-style-image: url("../img/ventas.svg");
}
.circuitos ul .cuentas {
  list-style-image: url("../img/cuentas.svg");
}
.circuitos ul .api {
  list-style-image: url("../img/api.svg");
}
.circuitos ul .estadisticas {
  list-style-image: url("../img/estadisticas.svg");
}
.circuitos ul .cubo{
  list-style-image: url("../img/cubo.svg");
}
.circuitos ul .multiempresa {
  list-style-image: url("../img/multiempresa.svg");
}
.circuitos ul .comisiones {
  list-style-image: url("../img/comisiones.svg");
}
.circuitos ul .administracion {
  list-style-image: url("../img/administracion.svg");
}
.circuitos ul .reservas {
  list-style-image: url("../img/reservas.svg");
}
.circuitos ul .recepcion {
  list-style-image: url("../img/recepcion.svg");
}
.circuitos ul .puntos {
  list-style-image: url("../img/puntos_de_venta.svg");
}
.circuitos ul .permisos {
  list-style-image: url("../img/permisos.svg");
}
.circuitos ul .pantalla {
  list-style-image: url("../img/pantalla.svg");
}
.circuitos ul .comprobantes {
  list-style-image: url("../img/comprobante_stock.svg");
}
.circuitos ul .depositos {
  list-style-image: url("../img/depositos.svg");
}
.circuitos ul .articulos {
  list-style-image: url("../img/articulos.svg");
}
.circuitos ul .pedidos {
  list-style-image: url("../img/pedidos.svg");
}
.circuitos ul .tiempo {
  list-style-image: url("../img/tiempo.svg");
}
.circuitos ul .promociones {
  list-style-image: url("../img/promociones.svg");
}
.circuitos ul .descuentos {
  list-style-image: url("../img/descuentos.svg");
}


/* beneficios */
.beneficios h5 {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.beneficios p {
  text-align: center;
}


/* sigma saas */
.sigma_saas h1 {
  color: #fbb611;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
.sigma_saas h3 {
  color: #003d7d;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.sigma_saas h3 span {
  color: #51c8ed;
}
.sigma_saas p span {
  color: #fbb611;
}
.sigma_saas h5 {
  color: #0092a7;
}
.sigma_saas a.demo:link {
  color: #0092a7;
  text-decoration: underline;
}
.sigma_saas a.demo:visited {
  color: #0092a7;
}
.sigma_saas a.demo:active {
  color: #0092a7;
}
.sigma_saas a.demo:hover {
  color: #fbb611;
}
.sigma_saas .check li {
  list-style-image: url("../img/check-list.png");
}

/* sigma pos */
.sigma_pos h1 {
  color: #039146;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
/* sigma api */
.sigma_api h1 {
  color: #8ebc43;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
/* sigma_api es la unica pagina de producto con un segundo h2 propio ("Como funciona"),
   dentro del mismo contenedor. Al subir el titulo a h1 esta regla queda para el. */
.sigma_api h2 {
  color: #8ebc43;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
}
.sigma_api h3 {
  color: #254381;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.sigma_api h5 {
  color: #d83945;
  margin-bottom: 0.3rem;
}
.sigma_api .beneficios p {
  text-align: left;
}

/* ecommerce */
.e-commerce h2 {
  color: #003d7d;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}
/* sig etl */
.sig_etl h1 {
  color: #b81439;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
.sig_etl h3 {
  color: #19325b;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.sig_etl h3 span {
  color: #b81439;
}
.sig_etl h5 {
  color: #003d7d;
  margin: 0.3rem 0;
}
.sig_etl h5 span {
  color: #b81439;
}

/* smart trader */
.smart_trader h1 {
  color: #45d1dd;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
.smart_trader h3 {
  color: #4d4d4d;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.smart_trader h5 {
  font-family: 'OpenSans-Bold', sans-serif;
  color: #4d4d4d;
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}
.smart_trader h5 strong {
  color: #45d1dd;
}
.smart_trader span {
  color: #45d1dd;
}
.smart_trader .circuitos span {
  color: #333;
}

/* sigkart */
.sigkart h1 {
  color: #ff6c0c;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
.sigkart h3 {
  color: #4d4d4d;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.sigkart h3 span {
  color: #ff6c0c;
}

/* argus saas */
.argus_saas h1 {
  color: #00abd4;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 2rem;
  display: block;
  margin: 2rem 0 1rem 0;
}
.argus_saas h3 {
  color: #000;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.argus_saas h3 span {
  color: #00abd4;
}
.argus_saas h5 {
  color: #000;
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}
.argus_saas p span {
  color: #00abd4;
}

/* contacto */

form {
  padding: 30px;
}

form input {
  border-color: #95a5ba !important;
}
form textarea {
  border-color: #95a5ba !important;
}

form .enviar {
  border: solid 2px #95a5ba;
  color:#FFF;
  font-size: 1.1rem;
  background-color: #003d7d;
  padding: 5px 20px;
  border-radius: 5px;
}
form .enviado span {
  font-family: 'OpenSans-Bold', sans-serif;
  color: #28a745;
  font-size: 1.3rem;
}
form .errorenviado span {
  font-family: 'OpenSans-Bold', sans-serif;
  color: #dc3545;
  font-size: 1.3rem;
}
form #asunto {
  display: none;
}
.signews {
  color: #FFF;
  background-color: #0686c2;
  border-radius: 10px;
  text-align: center;
  padding: 30px 20px 20px
}
.signews p {
  font-size: 1rem;
  margin: 20px 10px;
  text-align: left;
}
.signews a.sn:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.signews a.suscribete:link {
  color:#FFF;
  font-size: 1.1rem;
  background-color: #003d7d;
  display: inline-block;
  padding: 10px 20px;
  border: solid 2px #95a5ba;
  border-radius: 5px;
}
.signews a:visited {
  color:#FFF;
  border-color: #95a5ba;
}
.signews a:active {
  color:#FFF;
  border-color: #95a5ba;
}
.signews a.suscribete:hover {
  color:#003d7d;
  text-decoration: none;
  background-color: #0686c2;
}






footer {
  color:#FFF;
  background-color: #003d7d;
}
footer h4 {
  font-family: 'OpenSans-Bold', sans-serif;
  color: #FFF;
  font-size:1rem;
  margin: 0;
  padding: 0;
  border: 0;
}
footer span {
  font-size:1rem;
}
footer p {
  font-size:0.8rem;
}
footer a:link {
  color: #95a5ba;
  font-size: 0.9rem;
}
footer a:visited {
  color: #95a5ba;
}
footer a:active {
  color: #95a5ba;
}
footer a:hover {
  color: #FFF;
  text-decoration: none;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
footer ul {
  list-style-image: url("../img/list.png");
  padding-inline-start:12px;
}

@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 1024px) {
  .carousel-caption {
    top:50px !important;
  }
  .carousel-caption h5 {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
}
@media (max-width: 480px) {
}

/* El bloque "Cómo potenciar SIGMA" pasó de ser tres imágenes sueltas a llevar debajo de
   cada logo una frase que dice qué es ese producto (T04 del brief de SEO): antes esa
   sección no tenía una sola palabra de texto y para un buscador estaba vacía.

   El color es obligatorio, no estético: el fondo de .integraciones es verde oscuro y el
   gris azulado que traen los <p> por defecto queda en 1.3:1 de contraste sobre él, o sea
   ilegible. Es la misma razón por la que el título de la franja ya forzaba blanco.

   Si esta sección se rediseña -está pedido pasarla al celeste del logo nuevo de
   SmartTraderNX-, revisar estas reglas: el blanco puede dejar de ser el color correcto,
   pero el contraste mínimo sigue siendo obligatorio. */
.integraciones p {
  color: #FFF;
  font-size: 0.95rem;
  margin-top: 1.5rem;
}
/* El [+] es un <a>, asi que hereda el #2e4058 de la regla global de enlaces y sobre este
   fondo verde queda tan ilegible como estaba el parrafo. Va en blanco igual que el resto
   del texto; el feedback de hover lo sigue dando la opacidad de .integraciones a:hover. */
.integraciones p a:link,
.integraciones p a:visited,
.integraciones p a:active,
.integraciones p a:hover {
  color: #FFF;
}

/* ENLACES DENTRO DE UN PARRAFO.
   El a:link global es #2e4058, practicamente el mismo tono que el texto: un enlace en
   medio de una frase queda indistinguible y el visitante no llega nunca. Le pasaba al
   "registro publico de DNV" y al "aqui" que lleva a la politica de calidad.
   No es un estilo nuevo: es el mismo tratamiento que ya usaba a.demo en la pagina de
   SIGMA -cian del sitio, subrayado, hover ambar-, sacado de ahi para poder usarlo en
   cualquier parrafo. La negrita va por font-family porque asi define <strong> este sitio. */
a.enlace:link,
a.enlace:visited,
a.enlace:active {
  color: #0092a7;
  font-family: 'OpenSans-Bold';
  text-decoration: underline;
}
a.enlace:hover {
  color: #fbb611;
}

/* "QUE DICE LA IA SOBRE NOSOTROS" - tres botones que abren un asistente con la pregunta
   ya escrita. Ver config/pregunta_ia.php.

   El fondo es el #2e4058 del menu y no el #003d7d de .contacto: las dos secciones son
   bandas oscuras con botones, y si compartieran color la pagina tendria dos bloques que
   parecen el mismo llamado a la accion cuando piden cosas distintas.

   Los botones van en blanco solido y no con borde como los de .contacto, a proposito: ahi
   hay UN llamado a la accion, aca hay TRES equivalentes, y el relleno solido los hace leer
   como una eleccion entre pares en vez de como un boton principal repetido. */
.pregunta_ia {
  background-color: #2e4058;
  color: #FFF;
}
section.pregunta_ia h2 {
  color: #FFF;
  border-color: #FFF;
  font-size: 1.7rem;
  display: inline-block;
  margin: 40px 0 50px 0;
}
.pregunta_ia p {
  text-align: center;
  font-size: 1.1rem;
  max-width: 44rem;
  margin: 0 auto 2rem auto;
}
.pregunta_ia .botones a:link,
.pregunta_ia .botones a:visited,
.pregunta_ia .botones a:active {
  color: #2e4058;
  font-family: 'OpenSans-Bold';
  background-color: #FFF;
  border: solid 2px #FFF;
  border-radius: 5px;
  display: inline-block;
  padding: 10px 20px;
  /* margin lateral y no un gap: los tres botones se apilan solos en pantalla angosta
     porque son inline-block, y asi conservan la separacion al hacerlo. */
  margin: 7px 10px;
  text-decoration: none;
}
/* El logo hereda el color del texto del boton, asi que se invierte solo en el hover.
   El vertical-align lo baja a la linea base: sin eso queda montado sobre el texto. */
.pregunta_ia .botones a .logo_ia {
  vertical-align: -0.25em;
  margin-left: 0.5rem;
}
.pregunta_ia .botones a:hover {
  color: #FFF;
  background-color: #2e4058;
  text-decoration: none;
}

/* ================================================================================
   CAROUSEL DE LA HOME

   Rehecho en sep-2026 sobre dos referencias que trajo Maxi -titleist.com y
   samsung.com/ar-. Las dos venden igual: UNA imagen grande manda, el texto es
   cuatro cosas y hay un solo boton evidente. Lo que habia antes era al reves,
   dos columnas con volanta + logo + gancho + tres bullets + dos botones + dos
   badges: una ficha tecnica al lado de un dibujo chico.

   La estructura ahora es vertical y centrada, como Titleist:

     .banner            columna oscura, 720px de alto
       .banner_escena   la imagen, se come todo el alto que sobra y RECORTA
       .banner_texto    volanta chica + titulo grande + una linea + botones

   Tres cosas que conviene entender antes de tocar:

   - LA ESCENA RECORTA A PROPOSITO. Los telefonos salen por abajo y se cortan
     contra el borde de la escena, con un degradado que los disuelve en el fondo.
     Es lo que hace Titleist con los drivers. Si se saca el overflow:hidden, los
     telefonos se montan arriba del titulo.
   - EL FONDO ES OSCURO EN LOS TRES SLIDES. Eso simplifico los controles: antes
     habia cuatro reglas con :has(.carousel-item.active .banner_ia) para poner las
     flechas y los puntos en blanco solo en el slide de IA. Ahora son blancos
     siempre y esas cuatro reglas se fueron.
   - EL BOTON SECUNDARIO NO PUEDE IR EN #2e4058 ACA. Ese azul sobre un fondo casi
     negro da 1.4:1, o sea que el boton desaparece. En el banner va en contorno
     blanco; el #2e4058 se queda en el cierre de las 7 paginas de producto, que
     va sobre gris claro.
   ================================================================================ */
.slider { position: relative; }

.banner {
  /* --acento tiñe volanta, halos y detalles; --acento_boton es el relleno del CTA */
  --acento: #45d1dd;
  --acento_rgb: 69, 209, 221;
  --acento_boton: #45d1dd;
  --acento_boton_texto: #0d1826;
  position: relative;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #0a121d;
  background-position: center center;
  background-size: cover;
}
/* La trama de puntos. Va arriba del fondo y abajo de todo lo demas. */
.banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(150, 205, 235, 0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(76% 70% at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(76% 70% at 50% 34%, #000 0%, transparent 78%);
}

/* ------------------------------------------------------------------------------
   LA ESCENA
   ------------------------------------------------------------------------------ */
.banner_escena {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 250px;
  overflow: hidden;
}
/* La imagen se desvanece con una MASCARA sobre la escena, no con un degradado
   encima. Se probo con un degradado y se ve por que no va: hay que elegirle un
   color de llegada, y el fondo del slide es a su vez un degradado vertical, asi
   que el color elegido no coincide con el del fondo a esa altura y aparece una
   linea horizontal cruzando el banner de lado a lado. La mascara apaga el
   contenido y deja ver el fondo real, sea el que sea a esa altura.

   Va al 80% y no antes porque el dibujo de ETL y el vector de IA estan centrados
   en la escena y terminan alrededor del 75%: si la mascara arranca mas arriba, les
   come el borde de abajo. */
.banner_escena {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

/* ------------------------------------------------------------------------------
   EL TEXTO
   ------------------------------------------------------------------------------ */
.banner_texto {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding-bottom: 58px;
  text-align: center;
}
.banner_volanta {
  font-family: 'OpenSans-Bold', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--acento);
  margin: 0 0 0.9rem 0;
}
/* El titulo. Va en Anton -condensada y de un solo peso- y en caja alta: asi la frase
   entera entra en UN renglon de 62px sobre los 1140 del container, que es lo que hace
   que se lea como un titulo de tapa y no como una oracion. Con OpenSans-Bold la misma
   frase se partia en dos y pedia 20px menos de cuerpo.

   font-weight NORMAL a proposito: Anton trae un solo peso, y pedirle 700 hace que el
   navegador le invente una negrita encima. El text-wrap: balance es para cuando si se
   parte -pantallas medianas-: reparte los renglones en vez de dejar una viuda. */
.banner_titulo {
  font-family: 'Anton', 'OpenSans-Bold', sans-serif;
  font-weight: normal;
  font-size: 3.9rem;
  line-height: 1.06;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: #FFF;
  text-align: center;
  text-wrap: balance;
  max-width: 1140px;
  margin: 0 auto 1.1rem auto;
}
.banner_bajada {
  font-family: 'OpenSans', sans-serif;
  font-size: 1.08rem;
  line-height: 1.8rem;
  color: #a7b7ca;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 1.7rem auto;
}

/* ------------------------------------------------------------------------------
   LOS BOTONES
   ------------------------------------------------------------------------------ */
.banner_botones {
  margin: 0;
  line-height: 0;
  text-align: center;
}
.banner_cta {
  margin: 0 8px 12px 8px;
  -webkit-transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
.banner_cta:link,
.banner_cta:visited,
.banner_cta:active {
  font-family: 'OpenSans-Bold', sans-serif;
  display: inline-block;
  padding: 16px 38px;
  font-size: 1.06rem;
  border-radius: 5px;
  border: solid 2px transparent;
  text-decoration: none;
  background-color: var(--acento_boton);
  border-color: var(--acento_boton);
  color: var(--acento_boton_texto);
}
.banner_cta:hover {
  text-decoration: none;
  background-color: #FFF;
  border-color: #FFF;
  color: #0d1826;
}
/* El secundario: contorno blanco sobre el fondo oscuro. Ver el comentario de
   arriba -el #2e4058 aca no se ve-. */
.banner_cta_alt:link,
.banner_cta_alt:visited,
.banner_cta_alt:active {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFF;
}
.banner_cta_alt:hover {
  background-color: #FFF;
  border-color: #FFF;
  color: #0d1826;
}

/* Las tiendas. Van chicas y abajo de todo: son una prueba, no un llamado. */
.banner_tiendas {
  margin: 1.25rem 0 0 0;
  line-height: 0;
  text-align: center;
}
.banner_tienda {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.8;
  -webkit-transition: opacity .18s ease-out;
  transition: opacity .18s ease-out;
}
.banner_tienda:hover { opacity: 1; }
.banner_tienda img {
  display: block;
  height: 44px;
  width: auto;
}

/* ------------------------------------------------------------------------------
   SMARTTRADERNX - TRES TELEFONOS EN ABANICO

   Antes habia UN telefono de 232px al costado del texto. Ahora son tres, mas
   grandes y al centro: el del medio de frente con las capturas pasando, y dos
   atras girados 8 grados con una captura fija cada uno. Es la foto de lanzamiento
   de cualquier producto, y es lo que hace que el slide se lea como "mira esto" y
   no como "leeme".

   Las capturas son las REALES de la ficha del App Store. Las medidas de adentro
   -botones laterales, muesca- van en porcentaje y no en px justamente porque hay
   dos tamaños de telefono: en px habria que duplicar cada regla.
   ------------------------------------------------------------------------------ */
.banner_telefonos {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 800px;
  margin-left: -400px;
  z-index: 2;
}
.banner_telefono {
  position: absolute;
  top: 0;
  padding: 9px;
  border-radius: 40px;
  background-image: linear-gradient(145deg, #4b5666 0%, #1b232e 48%, #39445c 100%);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 12px 26px rgba(0, 0, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.banner_telefono_centro {
  left: 275px;
  width: 250px;
  height: 520px;
  z-index: 3;
}
.banner_telefono_lado {
  top: 56px;
  width: 210px;
  height: 436px;
  z-index: 2;
  border-radius: 34px;
  opacity: 0.92;
}
.banner_telefono_izq {
  left: 96px;
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.banner_telefono_der {
  left: 494px;
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
}
/* Los botones laterales. Son tres cajas de 3px: sin ellas el marco se lee como un
   rectangulo redondeado cualquiera y no como un telefono. */
.banner_telefono_boton {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, #55606f 0%, #2b3541 100%);
}
.banner_telefono_boton:nth-of-type(1) { left: -3px; top: 21.7%; height: 6.3%; }
.banner_telefono_boton:nth-of-type(2) { left: -3px; top: 30.4%; height: 11.7%; }
.banner_telefono_boton:nth-of-type(3) { right: -3px; top: 33.3%; height: 15.8%; }

.banner_telefono_pantalla {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background-color: #FFF;
  overflow: hidden;
}
.banner_telefono_lado .banner_telefono_pantalla { border-radius: 27px; }
/* La muesca. Va por encima de las capturas -z-index 2- porque las capturas del App
   Store traen la barra de estado dibujada de punta a punta. */
.banner_telefono_muesca {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 41.4%;
  height: 22px;
  margin-left: -20.7%;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  background-color: #1b232e;
}
/* Las cuatro pantallas van apiladas en el mismo lugar y cada una aparece por encima de
   la anterior. No hace falta que ninguna se apague: alcanza con que la de arriba entre.
   El orden de apilado es el orden del HTML. */
.banner_pantalla {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.banner_pantalla img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner_splash {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
}
.banner_splash img {
  width: 86%;
  height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------------------------
   SIG ETL - EL RECORRIDO DEL DATO, AHORA DE IZQUIERDA A DERECHA

   Era una tarjeta blanca vertical, y en una escena ancha no entraba sin recortarse.
   Ahora corre en horizontal, que ademas es como se lee el nombre del producto:
   las fuentes a la izquierda, el engranaje al medio, la tabla ordenada a la
   derecha, y el rotulo de cada etapa debajo de su bloque.

   Sigue sin llevar numeros -un numero inventado en la home se lee como el dato de
   un cliente- y la salida sigue siendo una TABLA y no un grafico: una tabla se lee
   como estructura, un grafico se lee como una medicion, y medicion no hay ninguna.

   La alineacion vertical se la banca "align-items: center" sola, pero SOLO porque
   los conectores llevan el mismo margin-bottom que mide el rotulo de los bloques.
   Sin ese margen las lineas quedan 17px mas abajo que el engranaje.
   ------------------------------------------------------------------------------ */
/* El diagrama se ancla ARRIBA de la escena y no al centro: abajo va la ilustracion de
   la cadena -fabrica, camion, local- y los dos tienen que convivir sin pisarse. El
   transform-origin en "50% 0" hace que el scale() crezca hacia abajo desde ese anclaje
   y no en las dos direcciones, que es lo que mantiene la cuenta previsible.

   El scale() agranda todo sin redefinir cada pieza. Los media queries lo van bajando;
   a 767 se apaga y queda solo el engranaje. */
.banner_flujo {
  position: absolute;
  left: 50%;
  top: 46px;
  z-index: 2;
  width: 820px;
  margin: 0 0 0 -410px;
  -webkit-transform: scale(1.16);
  transform: scale(1.16);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner_flujo_bloque {
  flex: 0 0 auto;
  text-align: center;
}
.banner_flujo_etapa {
  font-family: 'OpenSans-Bold', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #f4577a;
  margin: 1.1rem 0 0 0;
}
/* EXTRACT: las cuatro cosas que el negocio genera sueltas. */
.banner_flujo_extract { width: 154px; }
.banner_flujo_fuentes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner_flujo_fuentes li {
  display: block;
  margin: 0 0 8px 0;
  padding: 6px 4px;
  border-radius: 6px;
  border: solid 1px rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
  color: #c6d3e2;
  font-size: 0.78rem;
  line-height: 1.1rem;
  text-align: center;
  white-space: nowrap;
}
.banner_flujo_fuentes li:last-child { margin-bottom: 0; }
/* TRANSFORM: las dos ruedas. El filtro las levanta: el #b81439 del SVG sobre un
   fondo casi negro queda apagado, y aca tiene que ser lo mas brillante del dibujo. */
.banner_flujo_transform { width: 200px; }
.banner_flujo_motor {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto;
  -webkit-filter: brightness(1.42) saturate(1.05) drop-shadow(0 0 26px rgba(216, 27, 69, 0.45));
  filter: brightness(1.42) saturate(1.05) drop-shadow(0 0 26px rgba(216, 27, 69, 0.45));
}
/* Los conectores. El margin-bottom iguala el alto del rotulo de los bloques -ver el
   comentario de arriba-, y el dash de 3 con hueco de 10 da un ciclo de 13: el
   desplazamiento de la animacion tiene que ser multiplo o se ve el salto. */
.banner_flujo_lineas {
  flex: 0 0 auto;
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: 2.2rem;
}
.banner_flujo_lineas path {
  fill: none;
  stroke: #f4577a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 10;
  opacity: 0.75;
}
.banner_flujo_lineas_corta { width: 76px; }
/* LOAD: la salida. Columnas de ancho fijo -por eso quedan alineadas entre filas- y
   adentro de cada celda la barra mide distinto en cada fila, con un ::before.
   Alineado afuera y disparejo adentro es como se ve una tabla con datos de verdad. */
.banner_flujo_load { width: 292px; }
.banner_flujo_salida {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: solid 1px rgba(255, 255, 255, 0.10);
  background-color: rgba(255, 255, 255, 0.045);
}
.banner_flujo_salida li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.banner_flujo_salida li:last-child { margin-bottom: 0; }
.banner_flujo_salida span { display: block; }
.banner_flujo_salida span:nth-child(1) { flex: 0 0 42%; }
.banner_flujo_salida span:nth-child(2) { flex: 0 0 28%; }
.banner_flujo_salida span:nth-child(3) { flex: 0 0 22%; }
.banner_flujo_salida span::before {
  content: "";
  display: block;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.17);
}
.banner_flujo_salida li:first-child {
  padding-bottom: 11px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.10);
}
.banner_flujo_salida li:first-child span::before { background-color: rgba(255, 255, 255, 0.36); }
.banner_flujo_salida li:not(:first-child) span:nth-child(3)::before {
  background-color: rgba(244, 87, 122, 0.62);
}
.banner_flujo_salida li:nth-child(1) span:nth-child(1)::before { width: 72%; }
.banner_flujo_salida li:nth-child(1) span:nth-child(2)::before { width: 80%; }
.banner_flujo_salida li:nth-child(1) span:nth-child(3)::before { width: 66%; }
.banner_flujo_salida li:nth-child(2) span:nth-child(1)::before { width: 92%; }
.banner_flujo_salida li:nth-child(2) span:nth-child(2)::before { width: 61%; }
.banner_flujo_salida li:nth-child(2) span:nth-child(3)::before { width: 78%; }
.banner_flujo_salida li:nth-child(3) span:nth-child(1)::before { width: 67%; }
.banner_flujo_salida li:nth-child(3) span:nth-child(2)::before { width: 88%; }
.banner_flujo_salida li:nth-child(3) span:nth-child(3)::before { width: 45%; }
.banner_flujo_salida li:nth-child(4) span:nth-child(1)::before { width: 81%; }
.banner_flujo_salida li:nth-child(4) span:nth-child(2)::before { width: 54%; }
.banner_flujo_salida li:nth-child(4) span:nth-child(3)::before { width: 90%; }

/* La cadena que el producto consolida. Va de fondo, apoyada en el piso de la escena,
   y la mascara de .banner_escena la disuelve contra el texto. Es vectorial: no se
   pixela como la foto que habia antes y pesa 4KB. */
.banner_etl_cadena {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1240px;
  height: auto;
  margin: 0 auto;
  opacity: 0.7;
}

/* ------------------------------------------------------------------------------
   LOS TRES SLIDES
   ------------------------------------------------------------------------------ */
/* SmartTraderNX */
.banner_stnx {
  --acento: #6fe0ea;
  --acento_rgb: 69, 209, 221;
  --acento_boton: #45d1dd;
  --acento_boton_texto: #0d1826;
  background-image:
    radial-gradient(900px 620px at 50% 24%, rgba(69, 209, 221, 0.20), rgba(69, 209, 221, 0) 68%),
    radial-gradient(1200px 720px at 50% 118%, rgba(0, 106, 186, 0.34), rgba(0, 0, 0, 0) 64%),
    linear-gradient(180deg, #0e1e2e 0%, #0a1420 56%, #060d16 100%);
}
/* SIG ETL. Aca hubo una foto de deposito de fondo -un recorte del slider viejo de la
   casa- y se saco: no decia nada y encima se veia pixelada, porque el unico pedazo
   utilizable de ese JPG medía 724px y habia que estirarlo a mas del doble. Queda el
   degradado y el dibujo, que es lo que manda. Si entra una foto, tiene que venir a
   1600px de ancho como minimo y no hace falta estirar nada. */
.banner_etl {
  --acento: #f4577a;
  --acento_rgb: 184, 20, 57;
  --acento_boton: #d21742;
  --acento_boton_texto: #FFF;
  background-image:
    radial-gradient(900px 620px at 50% 26%, rgba(216, 27, 69, 0.20), rgba(216, 27, 69, 0) 68%),
    radial-gradient(1200px 720px at 50% 116%, rgba(184, 20, 57, 0.26), rgba(0, 0, 0, 0) 64%),
    linear-gradient(180deg, #1a1220 0%, #130d17 54%, #0a0810 100%);
}
/* Inteligencia artificial */
.banner_ia {
  --acento: #7fe3ec;
  --acento_rgb: 69, 209, 221;
  --acento_boton: #45d1dd;
  --acento_boton_texto: #0d1826;
  background-image:
    radial-gradient(760px 600px at 22% 14%, rgba(69, 209, 221, 0.24), rgba(69, 209, 221, 0) 64%),
    radial-gradient(860px 700px at 84% 92%, rgba(0, 106, 186, 0.38), rgba(0, 106, 186, 0) 66%),
    linear-gradient(140deg, #112030 0%, #1d3048 54%, #101f2e 100%);
}
/* La ruedita de las ESQUINAS. Antes era un chip con una red alrededor, centrado atras
   de la ventana del asistente: ahi no se veia -la ventana lo tapaba y del chip solo
   asomaban los nodos de arriba y abajo, que se leian como ruido-. Ahora va dos veces,
   abajo a la izquierda y arriba a la derecha, que es donde el slide tiene lugar vacio,
   y sangrada por el borde: .banner_escena recorta, asi que el circulo entero nunca se
   ve y por eso se lee como fondo y no como otro dibujo mas.

   Las dos van con la MISMA opacidad a proposito. La animacion de entrada termina en un
   valor fijo de opacity y con fill both ese valor pisa al de la regla: si cada esquina
   tuviera la suya, la entrada las igualaria igual y el CSS mentiria. */
.banner_ia_orbita {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  opacity: 0.48;
}
.banner_ia_orbita_izq { left: -140px; bottom: -160px; width: 360px; }
.banner_ia_orbita_der { right: -110px; top: -130px; width: 420px; }


/* ------------------------------------------------------------------------------
   INTELIGENCIA ARTIFICIAL - LA VENTANA DEL ASISTENTE

   Antes el slide mostraba una red de nodos y nada mas. Una red abstracta no muestra
   el producto: podria ser de cualquier cosa. Ahora muestra lo que el asistente HACE
   -se le pregunta en castellano y contesta-, que es lo unico de IA que hoy esta
   andando de verdad.

   Las preguntas son del tipo que el asistente toma. Las respuestas van en barras SIN
   NUMEROS, por la regla de siempre: un numero inventado en la home se lee como el
   dato de un cliente. Y los tres puntos de "escribiendo" no son adorno: son lo que
   dice que esto esta pasando ahora y no es una maqueta muerta.
   ------------------------------------------------------------------------------ */
.banner_asistente {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 600px;
  margin: -196px 0 0 -169px;
  border-radius: 18px;
  border: solid 1px rgba(127, 227, 236, 0.22);
  background-color: rgba(11, 26, 40, 0.86);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.banner_asistente_barra {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.04);
}
.banner_asistente_barra p {
  margin: 0;
  font-family: 'OpenSans-Bold', sans-serif;
  font-size: 0.97rem;
  line-height: 1.35rem;
  color: #cfe6ea;
  text-align: left;
}
/* El chip de la barra de titulo. Con solo el contorno se leia como una casilla de
   tildar; el relleno y el nucleo lo vuelven un chip. */
.banner_asistente_chip {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border-radius: 6px;
  border: solid 1.5px rgba(127, 227, 236, 0.85);
  background-image: linear-gradient(140deg, rgba(69, 209, 221, 0.55) 0%, rgba(69, 209, 221, 0.12) 100%);
  box-shadow: 0 0 14px rgba(69, 209, 221, 0.45);
}
.banner_asistente_chip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  background-color: #d5f7ff;
}
.banner_asistente_cuerpo { padding: 20px; }
/* La burbuja de la pregunta: a la derecha y en celeste, como en cualquier chat. El
   margin auto a la izquierda es lo que la empuja, no un text-align. */
.banner_asistente_pregunta {
  max-width: 80%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 15px auto;
  padding: 11px 16px;
  border-radius: 14px 14px 4px 14px;
  background-color: rgba(69, 209, 221, 0.16);
  border: solid 1px rgba(69, 209, 221, 0.32);
  color: #dff4f7;
  font-family: 'OpenSans', sans-serif;
  font-size: 1.04rem;
  line-height: 1.5rem;
  text-align: left;
}
.banner_asistente_respuesta {
  max-width: 86%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 68%;
  margin: 0 auto 15px 0;
  padding: 16px 18px;
  border-radius: 14px 14px 14px 4px;
  background-color: rgba(255, 255, 255, 0.055);
  border: solid 1px rgba(255, 255, 255, 0.10);
}
/* Las dos lineas son la respuesta en texto. La primera al 100% se leia como una
   regla divisoria, no como un renglon: van las dos por debajo del ancho de la caja. */
.banner_asistente_linea {
  display: block;
  width: 88%;
  height: 7px;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.22);
}
.banner_asistente_linea:nth-of-type(2) { width: 61%; margin-bottom: 0; }
.banner_asistente_barras {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  height: 48px;
  display: flex;
  align-items: flex-end;
}
.banner_asistente_barras li {
  flex: 1 1 0;
  margin-right: 6px;
  border-radius: 3px 3px 0 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  background-image: linear-gradient(180deg, #45d1dd 0%, rgba(69, 209, 221, 0.32) 100%);
}
.banner_asistente_barras li:last-child { margin-right: 0; }
.banner_asistente_barras li:nth-child(1) { height: 46%; }
.banner_asistente_barras li:nth-child(2) { height: 72%; }
.banner_asistente_barras li:nth-child(3) { height: 54%; }
.banner_asistente_barras li:nth-child(4) { height: 88%; }
.banner_asistente_barras li:nth-child(5) { height: 63%; }
.banner_asistente_barras li:nth-child(6) { height: 100%; }
.banner_asistente_barras li:nth-child(7) { height: 41%; }
.banner_asistente_tipeo {
  display: inline-block;
  padding: 13px 18px;
  border-radius: 14px 14px 14px 4px;
  background-color: rgba(255, 255, 255, 0.055);
  border: solid 1px rgba(255, 255, 255, 0.10);
  line-height: 0;
}
.banner_asistente_tipeo i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: #7fe3ec;
}

/* El robot. Lo pidio Javo -"me falta algo, un robot, algo que me diga IA"- y va al
   lado de la ventana, como si fuera el que contesta.

   Los dos margin-left salen de una sola cuenta: robot 236 + 26 de aire + ventana 600
   = 862 de ancho entre los dos, o sea que el par arranca en -431. El del robot es ese
   -431 y el de la ventana, -431 + 236 + 26 = -169. Si se cambia uno de los dos anchos
   hay que rehacer los dos margenes, o el par deja de estar centrado.

   El margin-top tiene que ser la mitad del alto y no se puede usar translateY(-50%):
   transform ya lo ocupan la animacion de entrada y la de flotado. */
.banner_ia_robot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  width: 236px;
  height: auto;
  margin: -179px 0 0 -431px;
}

/* ------------------------------------------------------------------------------
   LOS CONTROLES

   Ahora los tres slides son oscuros, asi que flechas y puntos van en blanco SIEMPRE.
   Esto reemplaza cuatro reglas con :has(.carousel-item.active .banner_ia) que existian
   para pintarlos de blanco solo en el slide de IA -y que ya habian fallado una vez,
   cuando quedaron sin el .active y por lo tanto siempre verdaderas-.
   ------------------------------------------------------------------------------ */
.slider .carousel-control-prev-icon,
.slider .carousel-control-next-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  background-size: 15px 15px;
  -webkit-transition: background-color .18s ease-out;
  transition: background-color .18s ease-out;
}
.slider .carousel-control-prev:hover .carousel-control-prev-icon,
.slider .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.32);
}
.slider .carousel-indicators { margin-bottom: 26px; }
.slider .carousel-indicators li {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.32);
}
.slider .carousel-indicators .active { background-color: #FFF; }

/* ------------------------------------------------------------------------------
   PANTALLAS CHICAS

   La columna de la imagen ya NO se esconde en el telefono. Antes se sacaba porque
   era un adorno al costado del texto; ahora es el argumento del slide, asi que se
   queda y lo que se achica es todo lo demas.
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 1199px) {
  .banner { min-height: 740px; }
  /* Bootstrap le da 15% de ancho a cada flecha. Abajo de 1200 el .container pierde
     su margen y esa franja se le monta al titulo, que ahora ocupa todo el ancho.
     Quedan los puntos, que alcanzan para saber que hay tres slides. */
  .slider .carousel-control-prev,
  .slider .carousel-control-next { display: none; }
  .banner_titulo { font-size: 3.1rem; max-width: 900px; }
  .banner_bajada { font-size: 1.02rem; line-height: 1.7rem; }
  .banner_cta:link,
  .banner_cta:visited,
  .banner_cta:active { padding: 14px 30px; font-size: 1rem; }
  .banner_telefonos { width: 700px; margin-left: -350px; }
  .banner_telefono_centro { left: 240px; width: 220px; height: 458px; }
  .banner_telefono_lado { top: 48px; width: 186px; height: 386px; }
  .banner_telefono_izq { left: 84px; }
  .banner_telefono_der { left: 430px; }
  .banner_asistente { width: 520px; margin: -196px 0 0 -149px; }
  .banner_flujo { -webkit-transform: scale(1); transform: scale(1); }
  .banner_etl_cadena { max-width: 1020px; }
  .banner_ia_robot { width: 200px; margin: -152px 0 0 -371px; }
  .banner_ia_orbita_izq { width: 300px; left: -110px; bottom: -130px; }
  .banner_ia_orbita_der { width: 350px; right: -92px; top: -108px; }
}

@media screen and (max-width: 991px) {
  .banner { min-height: 680px; }
  .banner_titulo { font-size: 2.45rem; max-width: 620px; }
  .banner_bajada { font-size: 0.98rem; line-height: 1.6rem; max-width: 520px; }
  .banner_volanta { font-size: 0.85rem; letter-spacing: 0.1em; }
  .banner_texto { padding-bottom: 60px; }
  .banner_escena::after { height: 100px; }
  .banner_telefonos { width: 540px; margin-left: -270px; top: 10px; }
  .banner_telefono_centro { left: 178px; width: 184px; height: 383px; }
  .banner_telefono_lado { top: 40px; width: 152px; height: 316px; }
  .banner_telefono_izq { left: 56px; }
  .banner_telefono_der { left: 332px; }
  .banner_asistente { width: 440px; margin: -164px 0 0 -127px; }
  .banner_asistente_barra { padding: 11px 16px; }
  .banner_asistente_barra p { font-size: 0.86rem; line-height: 1.2rem; }
  .banner_asistente_cuerpo { padding: 15px; }
  .banner_asistente_pregunta { margin-bottom: 12px; padding: 9px 13px; font-size: 0.92rem; line-height: 1.3rem; }
  .banner_asistente_respuesta { margin-bottom: 12px; padding: 13px 15px; }
  .banner_asistente_linea { margin-bottom: 8px; }
  .banner_asistente_barras { height: 38px; margin-top: 13px; }
  .banner_asistente_tipeo { padding: 11px 15px; }
  .banner_flujo { -webkit-transform: scale(.78); transform: scale(.78); }
  .banner_etl_cadena { max-width: 860px; opacity: 0.6; }
  .banner_ia_robot { width: 168px; margin: -128px 0 0 -313px; }
  .banner_ia_orbita_izq { width: 240px; left: -88px; bottom: -104px; }
  .banner_ia_orbita_der { width: 280px; right: -74px; top: -86px; }
}

@media screen and (max-width: 767px) {
  .banner { min-height: 620px; }
  .banner_titulo { font-size: 2rem; max-width: 340px; }
  .banner_bajada { max-width: 340px; }
  .banner_botones { padding: 0 10px; }
  .banner_cta { display: block; margin: 0 0 10px 0; }
  .banner_cta:link,
  .banner_cta:visited,
  .banner_cta:active { display: block; padding: 14px 18px; }
  /* Un solo telefono: dos mas girados no entran sin salirse por los costados. */
  .banner_telefonos { width: 300px; margin-left: -150px; }
  .banner_telefono_lado { display: none; }
  .banner_telefono_centro { left: 62px; width: 176px; height: 366px; }
  /* Del flujo queda el engranaje, que es el momento de marca. Extract y Load no
     entran a 390px sin que la letra baje a 9px, y la historia ya la cuentan el
     titulo y la bajada. */
  /* EN EL TELEFONO CADA SLIDE SE QUEDA CON UNA SOLA IMAGEN, la mas fuerte. La escena
     mide unos 220-300px de alto a 390px de ancho y ahi no entran dos elementos sin
     encimarse: se probo con el diagrama y la cadena juntos y el camion terminaba
     cruzado por el engranaje.
     ETL se queda con la cadena -que es lo que se ve y se entiende de un vistazo- e IA
     con el robot. SmartTraderNX ya se quedaba con un solo telefono. */
  .banner_flujo { display: none; }
  .banner_etl_cadena {
    width: 700px;
    max-width: none;
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    margin: -83px 0 0 -350px;
    opacity: 0.8;
  }
  .banner_asistente { display: none; }
  .banner_ia_robot { width: 190px; margin: -144px 0 0 -95px; }
  .banner_ia_orbita_izq { width: 190px; left: -70px; bottom: -82px; }
  .banner_ia_orbita_der { width: 210px; right: -58px; top: -66px; }
  .banner_tienda img { height: 38px; }
}

/* ------------------------------------------------------------------------------
   ANIMACIONES
   ------------------------------------------------------------------------------ */
@-webkit-keyframes banner_entra {
  from { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes banner_entra {
  from { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes banner_visual_entra {
  from { opacity: 0; -webkit-transform: translateY(40px) scale(.95); transform: translateY(40px) scale(.95); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes banner_visual_entra {
  from { opacity: 0; -webkit-transform: translateY(40px) scale(.95); transform: translateY(40px) scale(.95); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@-webkit-keyframes banner_flota {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%      { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@keyframes banner_flota {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50%      { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
/* El abanico. Los dos telefonos de atras arrancan derechos y detras del del medio,
   y se abren. El "to" TIENE que repetir el rotate final: la animacion lleva "both",
   asi que al terminar es ella la que sigue mandando sobre el transform y no la
   regla estatica de .banner_telefono_izq. */
@-webkit-keyframes banner_abanico_izq {
  from { opacity: 0; -webkit-transform: rotate(0deg) translate(52px, 34px); transform: rotate(0deg) translate(52px, 34px); }
  to   { opacity: .92; -webkit-transform: rotate(-8deg) translate(0, 0); transform: rotate(-8deg) translate(0, 0); }
}
@keyframes banner_abanico_izq {
  from { opacity: 0; -webkit-transform: rotate(0deg) translate(52px, 34px); transform: rotate(0deg) translate(52px, 34px); }
  to   { opacity: .92; -webkit-transform: rotate(-8deg) translate(0, 0); transform: rotate(-8deg) translate(0, 0); }
}
@-webkit-keyframes banner_abanico_der {
  from { opacity: 0; -webkit-transform: rotate(0deg) translate(-52px, 34px); transform: rotate(0deg) translate(-52px, 34px); }
  to   { opacity: .92; -webkit-transform: rotate(8deg) translate(0, 0); transform: rotate(8deg) translate(0, 0); }
}
@keyframes banner_abanico_der {
  from { opacity: 0; -webkit-transform: rotate(0deg) translate(-52px, 34px); transform: rotate(0deg) translate(-52px, 34px); }
  to   { opacity: .92; -webkit-transform: rotate(8deg) translate(0, 0); transform: rotate(8deg) translate(0, 0); }
}
@-webkit-keyframes banner_flujo_corre { to { stroke-dashoffset: -26; } }
@keyframes banner_flujo_corre { to { stroke-dashoffset: -26; } }
/* El paso de capturas adentro del telefono del medio. Cuatro por 2.25s son los
   9000ms del data-interval del carousel: si se cambia uno hay que cambiar el otro,
   o el slide se va antes de que se vea la ultima captura. */
@-webkit-keyframes banner_pantalla { from { opacity: 0; } to { opacity: 1; } }
@keyframes banner_pantalla { from { opacity: 0; } to { opacity: 1; } }

/* Las animaciones cuelgan de .carousel-item y NO de .carousel-item.active: Bootstrap
   recien pone .active cuando termina el desplazamiento, asi que con .active la entrada
   arrancaba con el slide ya quieto. Los CSS animation se reinician solos cuando el
   elemento pasa de display:none a visible, que es justo lo que hace el carousel. */
.carousel-item .banner_volanta,
.carousel-item .banner_titulo,
.carousel-item .banner_bajada,
.carousel-item .banner_botones,
.carousel-item .banner_tiendas {
  -webkit-animation: banner_entra .55s cubic-bezier(.22,.61,.36,1) both;
  animation: banner_entra .55s cubic-bezier(.22,.61,.36,1) both;
}
.carousel-item .banner_volanta { -webkit-animation-delay: .34s; animation-delay: .34s; }
.carousel-item .banner_titulo  { -webkit-animation-delay: .42s; animation-delay: .42s; }
.carousel-item .banner_bajada  { -webkit-animation-delay: .52s; animation-delay: .52s; }
.carousel-item .banner_botones { -webkit-animation-delay: .62s; animation-delay: .62s; }
.carousel-item .banner_tiendas { -webkit-animation-delay: .70s; animation-delay: .70s; }

.carousel-item .banner_telefonos,
.carousel-item .banner_asistente {
  -webkit-animation: banner_visual_entra .75s cubic-bezier(.22,.61,.36,1) both .1s,
                     banner_flota 7s ease-in-out 1.1s infinite;
  animation: banner_visual_entra .75s cubic-bezier(.22,.61,.36,1) both .1s,
             banner_flota 7s ease-in-out 1.1s infinite;
}
/* Las ruedas de las esquinas son fondo: entran solas y se quedan quietas, si no
   compiten con la ventana que flota adelante. El valor final de opacity tiene que ser
   el mismo que el de .banner_ia_orbita: con fill both, el de la animacion es el que
   manda cuando termina. */
.carousel-item .banner_ia_orbita {
  -webkit-animation: banner_fondo_entra 1.2s ease-out both .1s;
  animation: banner_fondo_entra 1.2s ease-out both .1s;
}
@-webkit-keyframes banner_fondo_entra { from { opacity: 0; } to { opacity: 0.48; } }
@keyframes banner_fondo_entra { from { opacity: 0; } to { opacity: 0.48; } }
/* El flujo de ETL va aparte: lleva scale() propio y banner_flota -que anima
   transform- se lo pisaria, asi que se queda solo con la opacidad de entrada. */
@-webkit-keyframes banner_flujo_entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes banner_flujo_entra { from { opacity: 0; } to { opacity: 1; } }
.carousel-item .banner_flujo {
  -webkit-animation: banner_flujo_entra .8s ease-out both .1s;
  animation: banner_flujo_entra .8s ease-out both .1s;
}
.carousel-item .banner_telefono_izq {
  -webkit-animation: banner_abanico_izq .85s cubic-bezier(.22,.61,.36,1) both .42s;
  animation: banner_abanico_izq .85s cubic-bezier(.22,.61,.36,1) both .42s;
}
.carousel-item .banner_telefono_der {
  -webkit-animation: banner_abanico_der .85s cubic-bezier(.22,.61,.36,1) both .42s;
  animation: banner_abanico_der .85s cubic-bezier(.22,.61,.36,1) both .42s;
}
.carousel-item .banner_flujo_fuentes li,
.carousel-item .banner_flujo_salida li {
  -webkit-animation: banner_entra .5s cubic-bezier(.22,.61,.36,1) both;
  animation: banner_entra .5s cubic-bezier(.22,.61,.36,1) both;
}
.carousel-item .banner_flujo_fuentes li:nth-child(1) { -webkit-animation-delay: .42s; animation-delay: .42s; }
.carousel-item .banner_flujo_fuentes li:nth-child(2) { -webkit-animation-delay: .49s; animation-delay: .49s; }
.carousel-item .banner_flujo_fuentes li:nth-child(3) { -webkit-animation-delay: .56s; animation-delay: .56s; }
.carousel-item .banner_flujo_fuentes li:nth-child(4) { -webkit-animation-delay: .63s; animation-delay: .63s; }
.carousel-item .banner_flujo_salida li:nth-child(1) { -webkit-animation-delay: .78s; animation-delay: .78s; }
.carousel-item .banner_flujo_salida li:nth-child(2) { -webkit-animation-delay: .85s; animation-delay: .85s; }
.carousel-item .banner_flujo_salida li:nth-child(3) { -webkit-animation-delay: .92s; animation-delay: .92s; }
.carousel-item .banner_flujo_salida li:nth-child(4) { -webkit-animation-delay: .99s; animation-delay: .99s; }
.banner_flujo_lineas path {
  -webkit-animation: banner_flujo_corre 1.5s linear infinite;
  animation: banner_flujo_corre 1.5s linear infinite;
}
@-webkit-keyframes banner_barra_crece { from { -webkit-transform: scaleY(0); transform: scaleY(0); } to { -webkit-transform: scaleY(1); transform: scaleY(1); } }
@keyframes banner_barra_crece { from { -webkit-transform: scaleY(0); transform: scaleY(0); } to { -webkit-transform: scaleY(1); transform: scaleY(1); } }
.carousel-item .banner_asistente_barras li {
  -webkit-animation: banner_barra_crece .55s cubic-bezier(.22,.61,.36,1) both;
  animation: banner_barra_crece .55s cubic-bezier(.22,.61,.36,1) both;
}
.carousel-item .banner_asistente_barras li:nth-child(1) { -webkit-animation-delay: .70s; animation-delay: .70s; }
.carousel-item .banner_asistente_barras li:nth-child(2) { -webkit-animation-delay: .76s; animation-delay: .76s; }
.carousel-item .banner_asistente_barras li:nth-child(3) { -webkit-animation-delay: .82s; animation-delay: .82s; }
.carousel-item .banner_asistente_barras li:nth-child(4) { -webkit-animation-delay: .88s; animation-delay: .88s; }
.carousel-item .banner_asistente_barras li:nth-child(5) { -webkit-animation-delay: .94s; animation-delay: .94s; }
.carousel-item .banner_asistente_barras li:nth-child(6) { -webkit-animation-delay: 1.00s; animation-delay: 1.00s; }
.carousel-item .banner_asistente_barras li:nth-child(7) { -webkit-animation-delay: 1.06s; animation-delay: 1.06s; }
/* Los tres puntos de "escribiendo". */
@-webkit-keyframes banner_tipeo {
  0%, 62%, 100% { opacity: .32; -webkit-transform: translateY(0); transform: translateY(0); }
  31%           { opacity: 1;   -webkit-transform: translateY(-4px); transform: translateY(-4px); }
}
@keyframes banner_tipeo {
  0%, 62%, 100% { opacity: .32; -webkit-transform: translateY(0); transform: translateY(0); }
  31%           { opacity: 1;   -webkit-transform: translateY(-4px); transform: translateY(-4px); }
}
.banner_asistente_tipeo i {
  -webkit-animation: banner_tipeo 1.35s ease-in-out infinite;
  animation: banner_tipeo 1.35s ease-in-out infinite;
}
.banner_asistente_tipeo i:nth-child(2) { -webkit-animation-delay: .18s; animation-delay: .18s; }
.banner_asistente_tipeo i:nth-child(3) { -webkit-animation-delay: .36s; animation-delay: .36s; }
.carousel-item .banner_pantalla {
  -webkit-animation: banner_pantalla .45s ease-out both;
  animation: banner_pantalla .45s ease-out both;
}
/* Tres pantallas por telefono, cada 3s: los 9000ms del data-interval del carousel.
   Si se cambia uno hay que cambiar el otro, o el slide se va antes de que se vea la
   ultima. El primero entra a los .15s y no a los 0 porque la pantalla del telefono es
   blanca: sin ese arranque se ve un flash. */
.carousel-item .banner_pantalla:nth-child(1) { -webkit-animation-delay: .15s; animation-delay: .15s; }
.carousel-item .banner_pantalla:nth-child(2) { -webkit-animation-delay: 3.15s; animation-delay: 3.15s; }
.carousel-item .banner_pantalla:nth-child(3) { -webkit-animation-delay: 6.15s; animation-delay: 6.15s; }
/* El de la derecha va 0.4s corrido, para que las dos pantallas no cambien al unisono. */
.carousel-item .banner_telefono_der .banner_pantalla:nth-child(1) { -webkit-animation-delay: .55s; animation-delay: .55s; }
.carousel-item .banner_telefono_der .banner_pantalla:nth-child(2) { -webkit-animation-delay: 3.55s; animation-delay: 3.55s; }
.carousel-item .banner_telefono_der .banner_pantalla:nth-child(3) { -webkit-animation-delay: 6.55s; animation-delay: 6.55s; }

@media (prefers-reduced-motion: reduce) {
  .carousel-item .banner_volanta,
  .carousel-item .banner_titulo,
  .carousel-item .banner_bajada,
  .carousel-item .banner_botones,
  .carousel-item .banner_tiendas,
  .carousel-item .banner_telefonos,
  .carousel-item .banner_asistente,
  .carousel-item .banner_asistente_barras li,
  .banner_asistente_tipeo i,
  .carousel-item .banner_telefono_izq,
  .carousel-item .banner_telefono_der,
  .carousel-item .banner_flujo,
  .carousel-item .banner_ia_orbita,
  .carousel-item .banner_flujo_fuentes li,
  .carousel-item .banner_flujo_salida li,
  .banner_flujo_lineas path,
  .carousel-item .banner_pantalla {
    -webkit-animation: none;
    animation: none;
  }
  /* Sin animacion las tres pantallas quedarian en opacidad 0 y los telefonos vacios.
     Se muestra la primera de cada uno. */
  .banner_pantalla { opacity: 0; }
  .banner_pantalla:nth-child(1) { opacity: 1; }
  .banner_cta,
  .banner_tienda { -webkit-transition: none; transition: none; }
}