@font-face {
    font-family: 'Product Sans';
    src: url("../webfonts/ProductSans-Regular.woff2") format("woff2"), url("../webfonts/ProductSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Product Sans Bold';
    src: url("../webfonts/ProductSans-Bold.woff2") format("woff2"), url("../webfonts/ProductSans-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 20px;
    font-family: "Product Sans", Helvetica, sans-serif;
    font-weight: 100
}

h1 {
    font-size: 70px;
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

h2 {
    font-size: 60px;
    color: #0e4162;
    font-weight: 800;
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

h2.small {
    font-size: 36px
}

p.subvencion {
    color: orange;
    font-size: 21px;
    text-align: center
}

strong {
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

a {
    font-weight: bold;
    color: #008eff
}

.primary {
    color: #008eff;
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

.dark-blue {
    color: #0e4162
}

.btn {
    padding: .8em 4em;
    border-radius: 2em;
    border: 0px;
    text-transform: uppercase;
    font-weight: 100;
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

.btn.btn-outline {
    border: solid 1px #0e4162;
    border-radius: 0;
    color: #0e4162;
    padding: 1.2em 2em
}

.btn.btn-outline:hover {
    background: #0e4162;
    color: white
}

.btn.btn-orange {
    background: #ff9600;
    color: white;
    padding: 1.2em 2em
}

.btn.btn-orange:hover {
    background: #0e4162;
    color: white
}

.btn.square {
    border-radius: 0
}

.btn.btn-primary {
    background-color: #008eff;
    color: white
}

.btn.btn-primary:hover {
    background-color: #0e4162;
    color: white
}

.btn.btn-blue {
    background-color: #0e4162;
    color: white
}

.btn.btn-blue:hover {
    background-color: white;
    color: #0e4162
}

.card img.icon {
    max-width: 61px
}

.card.card-primary {
    background: #008eff
}

.card.card-blue {
    color: white
}

.card.card-blue .card-body {
    background: #0e4162;
    padding: 2em
}

.card.card-blue .card-body h3 {
    color: white
}

img.cover {
    min-width: 101%;
    min-height: 101%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 101%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -1
}

.site-header .carousel-control-horizontal {
    display: none
}

.site-header .carousel-indicators {
    left: unset;
    right: 0px;
    bottom: 20px;
    top: unset;
    width: 20px;
    display: block;
    margin-right: 20px
}

.site-header .carousel-indicators button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: solid 1px white
}

.site-header .carousel-indicators button.active {
    background-color: white
}

.site-header .navbar-toggler img {
    width: 40px;
    height: auto
}

.site-header div.menu {
    position: absolute;
    z-index: 4;
    width: 100%;
    left: 0px;
    margin-top: 2em
}

.site-header div.menu nav ul {
    display: flex;
    align-items: center
}

.site-header div.menu nav ul li {
    margin: 0 1em
}

.site-header div.menu nav ul li:last-child {
    margin-right: 0
}

.site-header div.menu nav ul li a.nav-link {
    color: white;
    font-size: 21px;
    padding: 0px
}

.site-header div.menu nav ul li a.nav-link.phone {
    display: inline-block;
    background: #008eff;
    border-radius: 10px;
    border: solid 1px white;
    padding: .5em
}

.site-header div.menu nav ul li a.nav-link.phone span {
    font-size: 12px
}

.site-header div.logos {
    position: absolute;
    top: 192px;
    z-index: 3
}

.site-header div.logos img {
    display: block;
    margin-bottom: 1em;
    height: 70px;
    width: auto
}

.site-header .carousel .carousel-item {
    width: 100vw;
    height: 100vh;
    min-height: 795px
}

.site-header .carousel .carousel-item .content {
    position: absolute;
    bottom: 25vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    width: 100%
}

.site-header .carousel .carousel-item .content p {
    font-size: 50px
}

section.form {
    transform: translateY(-20vh);
    margin-bottom: -10vh;
    color: black
}

section.form h3,
section.form h4 {
    font-weight: bold;
    color: #0e4162
}

section.form h3 {
    font-size: 45px;
    margin-bottom: 1em
}

section.form h3 span {
    font-size: 35px
}

section.form h3 span.number {
    color: #008eff
}

section.form .box-form {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2)
}

section.form .box-form input,
section.form .box-form select {
    border-radius: 20px
}

section.form .box-form .form-check a {
    color: #008eff;
    text-decoration: none
}

section.form .bases-legales {
    padding: 2em;
    border: solid 1px #0e4162;
    font-size: 12px
}

section.logos .small {
    margin-bottom: 0;
    position: relative;
    display: block
}

section.logos hr {
    width: 50%;
    margin-left: auto;
    margin-right: auto
}

section.logos .row-logos {
    display: inline-block
}

section.logos .row-logos img {
    height: 5vw;
    width: auto;
    margin: 1em
}

section.blocks {
    margin-top: 5em;
    margin-bottom: 5em
}

section.blocks div.row {
    background: #f9f9f9
}

section.blocks div.detail {
    padding: 2em
}

section.blocks div.detail h2 {
    font-size: 36px
}

section.blocks div.detail h2 span {
    opacity: .5;
    display: block
}

section.blocks div.image {
    position: relative;
    overflow: hidden
}

section.blocks img.cover {
    z-index: 2
}

section.como {
    margin-top: 5em;
    margin-bottom: 5em
}

section.como .method__container {
    width: 95%
}

@media only screen and (min-width: 576px) {
    section.como .method__container {
        width: 85%
    }
}

@media only screen and (min-width: 1280px) {
    section.como .method__container {
        max-width: 1024px
    }
}

@media only screen and (min-width: 1024px) {
    section.como .method__row {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
}

section.como .method__step {
    --distance: 2rem;
    border: 1px solid #0e4162;
    margin-bottom: var(--distance);
    padding-bottom: var(--distance);
    padding-left: var(--distance);
    position: relative
}

@media only screen and (min-width: 576px) {
    section.como .method__step {
        --distance: 3rem
    }
}

@media only screen and (min-width: 1024px) {
    section.como .method__step {
        margin-bottom: 0;
        padding: var(--distance);
        width: calc(50% - 1.25rem);
        width: 50%
    }
}

section.como .method__step:before {
    background-color: #fff;
    color: #0e4162;
    font-size: 3.75em;
    font-weight: 700;
    left: -1rem;
    line-height: .8;
    padding: .2em 0;
    position: absolute;
    top: -0.2em
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:before {
        top: 2rem
    }
}

section.como .method__step:first-child:before {
    content: "1"
}

section.como .method__step:nth-child(2):before {
    content: "2"
}

section.como .method__step:nth-child(3):before {
    content: "3"
}

section.como .method__step:nth-child(4):before {
    content: "4"
}

section.como .method__step:after {
    background-color: #a60085;
    bottom: calc(var(--distance)*-1);
    content: "";
    height: var(--distance);
    position: absolute;
    right: 0;
    width: 1px
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:after {
        display: none
    }
}

section.como .method__step:nth-child(odd) {
    border-width: 0 0 1px 1px
}

section.como .method__step:nth-child(2n) {
    border-width: 0 1px 1px 0;
    padding-left: 0;
    padding-right: var(--distance);
    text-align: right
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:nth-child(2n) {
        padding-left: var(--distance);
        padding-right: 0;
        text-align: left
    }
}

section.como .method__step:nth-child(2n):before {
    left: auto;
    right: -1rem
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:nth-child(2n):before {
        left: -1rem;
        right: auto
    }
}

section.como .method__step:nth-child(2n):after {
    left: 0;
    right: auto
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:first-of-type {
        border-width: 0 1px 1px;
        padding-top: 0
    }

    section.como .method__step:first-of-type:before {
        top: -0.2em
    }

    section.como .method__step:nth-of-type(2) {
        border-width: 1px 1px 1px 0;
        padding-right: var(--distance)
    }

    section.como .method__step:nth-of-type(3) {
        border-width: 1px;
        top: -1px
    }
}

section.como .method__step:last-of-type {
    border-bottom: 0
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:last-of-type {
        border-width: 0
    }
}

section.como .method__step:last-of-type:after {
    display: none
}

@media only screen and (min-width: 1024px) {
    section.como .method__step:last-of-type:after {
        background-color: #fff;
        display: block;
        left: -15px;
        top: 0;
        width: 30px
    }
}

section.como .method__title {
    color: #0e4162;
    font-family: "Product Sans Bold", Helvetica, sans-serif;
    margin-bottom: .5em;
    margin-top: 0
}

@media only screen and (min-width: 576px) {
    section.como .method__title {
        font-size: 1.5em;
        padding-top: 0.25em
    }
}

section.como .method__desc {
    line-height: 1.7
}

section.como .method__desc:last-of-type {
    margin-bottom: 0
}

section.gray {
    margin-top: 3em;
    background: #f9f9f9;
    padding-top: 3em;
    padding-bottom: 3em
}

section.gray .logos img {
    margin: .5em 1em
}

section.gray .accordion-item {
    background: transparent;
    border: none
}

section.gray .nav-item {
    
    display: inline-blocK;
    margin: 17px;
  }

section.gray .nav-item button {
    width: 210px;
    height: 210px;
    border: solid 1px #0e4162;
    border-radius: 10px;
    padding-top: 0;
    font-family: "Product Sans Bold", Helvetica, sans-serif;
    font-size: 22px;
    line-height: 1em;
    color: #0e4162;
    background-color: white
}

section.gray .nav-item button .icon {
    width: 155px;
    height: 90px;
    overflow: hidden;
    background-image: url(../img/ico-web.png);
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em
}

section.gray .nav-item button .icon.ecom {
    background-image: url(../img/ico-ecommerce.png)
}

section.gray .nav-item button .icon.rrss {
    background-image: url(../img/ico-rrss.png)
}

section.gray .nav-item button .icon.avanza {
    background-image: url(../img/ico-avanza.png)
}

section.gray .nav-item button .icon.market {
    background-image: url(../img/ico-market.png)
}

section.gray .nav-item button .icon.gestionIA {
    background-image: url(../img/ico-gestionia.png)
}

section.gray .nav-item button .icon.procesosIA {
    background-image: url(../img/ico-procesosia.png)
}

section.gray .nav-item button .icon.BiAnalitica {
    background-image: url(../img/ico-bianalitica.png)
}

section.gray .nav-item button .icon.BiAnaliticaIA {
    background-image: url(../img/ico-analiticaIA.png)
}




section.gray .nav-item button span {
    display: block;
    font-family: "Product Sans", Helvetica, sans-serif;
    font-size: 12px
}

section.gray .nav-item button.active {
    background-color: #0e4162;
    color: white;
    /*box-shadow: 0px 0px 15px #008eff*/
}

section.gray .nav-item button.active .icon {
    background-position: center -90px
}

section.gray .nav-item button.acc {
    background-color: #0e4162;
    color: white;
    box-shadow: 0px 0px 15px #008eff
}

section.gray .nav-item button.acc .icon {
    background-position: center -90px
}

section.gray .nav-item button.acc.collapsed {
    background-color: white;
    color: #0e4162;
    box-shadow: none
}

section.gray .nav-item button.acc.collapsed .icon {
    background-position: center 0px
}

section.gray h3 {
    font-family: "Product Sans Bold", Helvetica, sans-serif;
    color: #0e4162
}

section.gray .card {
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    border: 0px;
    background-image: url(../img/bg-card.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    margin-bottom: 1em
}

section.gray .card .card-header {
    background: #0e4162;
    color: white;
    font-size: 35px;
    font-family: "Product Sans Bold", Helvetica, sans-serif
}

section.gray .card .card-header span {
    font-size: 24px
}

section.gray .card .card-body {
    margin: 0px;
    padding: 0px
}

section.gray .card .card-body div.accordion-item {
    border-bottom: solid 2px #0e4162;
    background-color: transparent
}

section.gray .card .card-body div.accordion-item button {
    color: #0e4162;
    background: rgba(14, 65, 98, 0.95);
    color: white
}

section.gray .card .card-body div.accordion-item button::after {
    background-image: url(../img/ico-minus.svg)
}

section.gray .card .card-body div.accordion-item button.collapsed {
    background: transparent;
    color: #0e4162
}

section.gray .card .card-body div.accordion-item button.collapsed::after {
    background-image: url(../img/ico-more.svg)
}

section.gray .card .card-body .mejoras {
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: solid 2px #0e4162;
    background-color: #008eff;
    background-image: url(../img/triangle.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    overflow: hidden
}

section.gray .card .card-body .mejoras h3 {
    margin-bottom: 0;
    color: white;
    color: white
}

section.webs .carousel-item {
    background: #ddd;
    text-align: center;
    width: 100%
}

section.prefooter {
    margin-top: 3em;
    margin-bottom: 3em
}

section.prefooter a.btn-cta {
    font-family: "Product Sans Bold", Helvetica, sans-serif;
    font-size: 24px;
    text-transform: none;
    padding: .5em 2em
}

section.prefooter a.btn-cta span {
    font-size: 14px
}

.site-footer {
    background: #0e4162;
    color: white;
    padding-top: 2em;
    padding-bottom: 2em
}

.site-footer ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0px;
    padding: 0px
}

.site-footer ul li {
    margin: 1em
}

.site-footer ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px
}
.texto{
    font-size: 15px;
}
.aire{
    margin-bottom: 50px;
}

.grey{
    width: 90%;
    height: 160px;
    content: "";
    font-style: italic;
    color: #555555;
    padding: 20px;
    -webkit-animation: comentarios 3s linear infinite;
            animation: comentarios 3s linear infinite;
    margin-bottom: 20px;
}

.containerComet{
    margin-bottom: 200px;
}




.titulo{
    text-align: center;
    margin: 20px;
    font-size: 35px;
}


@media (max-width: 1199.98px) {
    .site-header div.menu nav ul li {
        margin: 0 .5em
    }

    .site-header div.menu nav ul li a.nav-link {
        font-size: 18px
    }
}

@media (max-width: 991.98px) {
    section.gray .nav-item {
        padding: .5em
    }

    .site-header div.logos img {
        max-height: 5vw
    }

    .navbar-collapse {
        background: #0e4162;
        z-index: 1000;
        padding: 40px
    }

    h1 {
        font-size: 40px
    }

    .site-header .carousel .carousel-item .content p {
        font-size: 30px
    }

    section.form h3 {
        font-size: 30px
    }

    .site-header .carousel-indicators {
        display: none
    }

    .site-header .carousel-control-horizontal {
        display: block
    }

    .navbar-collapse {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll
    }

    .navbar-toggler,
    .navbar-brand {
        z-index: 10001
    }

    .site-header div.menu nav ul {
        margin-top: 5em
    }

    .site-header div.menu nav ul li {
        margin-top: 2em !important;
        margin-bottom: 2em !important
    }

    .site-header div.menu nav ul li a.nav-link {
        font-size: 21px !important
    }

    .site-header div.menu nav ul li a.nav-link.phone {
        padding: 1em
    }
    .grey{
        margin-bottom: 80px;
    }
}

@media (max-width: 767.98px) {
    .site-header div.logos img {
        max-height: 10vw
    }

    h1 {
        font-size: 45px !important
    }

    .site-header .carousel .carousel-item .content p {
        font-size: 20px !important
    }

    section.logos .row-logos img {
        display: block;
        height: 15vw;
        margin-left: auto;
        margin-right: auto
    }
    .grey{
        margin-bottom: 190px;
        margin-left: 23px;
    }
}

@media (max-width: 575.98px) {
    .site-header div.logos img {
        max-height: 10vw
    }

    .navbar-brand {
        max-width: 70%
    }

    .site-header div.logos {
        top: 215px
    }

    .grey{
        margin-bottom: 220px;
    }
}
@media (max-width: 490px) {
    

    .grey{
        margin-bottom: 260px;
    }
}
@media (max-width: 400px) {
    

    .grey{
        margin-bottom: 420px;
    }
}