:root {
    --fon-t: 'Manrope', sans-serif;
    --fon-h: 'Prompt', sans-serif;

    --ratio: .35;

    --fon-w1: 400;
    --fon-w7: 700;

    --col-acc: #59B87A;
    --col-pri: #59B87A;
    --col-pri-bg: #5AB87A;
    --col-lig: #EFF6F8;
    --col-sep: #8F90A645;

    --rad-s: .5rem;
    --rad-m: .5rem;
    --rad-l: .5rem;
    --rad-bt: .25rem;

}
p a {
    text-decoration: underline;
}
.header {
    background-color: var(--col-acc);
    color: var(--col-bg);
    text-align: right;
}
.header ul.nav {
    margin-right: 1em;
}
.header ul li a:hover {
    color: var(--col-bg);
    text-decoration: underline;
}
.section.featured {
    background-position: center bottom;
    background-size: cover;
    text-align: left;
}
.header .bt {
    border: solid 1px currentColor;
    color: var(--col-acc);
    background-color: var(--col-bg);
}
.header .bt:hover,
.bg .bt:hover {
    color: var(--col-acc);
    box-shadow: 0 0 0 .25rem #ffffff66;
}
.featured .bt {
    background-color: #17552D;
    color: var(--col-bg);
}
h1, .main h2, .main h3, .main h4, .main h5 {
    font-weight: 500;
    letter-spacing: 0;
}
.main h2 strong {
    color: var(--col-acc);
    font-weight: inherit;
}
.section.display-m {
    text-align: left;
}
.main p.emph {
    color: var(--col-acc);
}

.row + * {
    margin-top: calc(var(--sca-pad)*3);
}

#soluciones {
    background-image: url("data:image/svg+xml,%3Csvg width='1648' height='1065' viewBox='0 0 1648 1065' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1561.54 1022.09C1524.38 1022.13 1488.05 1011.04 1457.23 990.262L1531.16 1064.18L1573.67 1021.66C1569.66 1021.92 1565.62 1022.09 1561.55 1022.09' fill='%2359B87A' fill-opacity='0.25'/%3E%3Cpath d='M1636.67 958.672L1647.74 947.601C1647.82 947.512 1647.89 947.417 1647.98 947.327L1531.16 830.508L1414.39 947.275C1415.07 948.03 1415.78 948.761 1416.48 949.505L1423.83 956.86C1452.6 983.833 1490.46 998.994 1529.89 999.33C1569.33 999.666 1607.44 985.151 1636.67 958.672Z' fill='%2359B87A' fill-opacity='0.25'/%3E%3Cpath d='M107.221 139.594C80.141 139.617 53.6734 131.539 31.2207 116.4L85.0827 170.262L116.062 139.278C113.138 139.464 110.196 139.594 107.224 139.594' fill='%2359B87A' fill-opacity='0.25'/%3E%3Cpath d='M161.958 93.384L170.029 85.316C170.09 85.251 170.142 85.182 170.202 85.116L85.079 0L0 85.08C0.5 85.63 1.014 86.163 1.521 86.705L6.876 92.064C27.8376 111.717 55.4266 122.764 84.1595 123.009C112.892 123.254 140.666 112.678 161.959 93.385' fill='%2359B87A' fill-opacity='0.25'/%3E%3C/svg%3E%0A");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 105% auto;
}
#soluciones h3 {
    margin-bottom: var(--sca-mar);
    padding-bottom: var(--sca-mar);
    position: relative;
}
#soluciones h3:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    width: 12rem;
    height: 3px;
    background-color: var(--col-acc);
}
#soluciones picture {
    position: relative;
    z-index: 1;
}
#soluciones picture:before {
    content: '';
    position: absolute;
    padding-left: 2.5rem;
    right: -2.5rem;
    width: 66.666%;
    top: -2.5rem;
    bottom: -2.5rem;
    background-color: var(--col-lig);
    z-index: -1;
}
#soluciones .rtl picture:before {
    left: -2.5rem;
    right: auto;
}

#por-que {
    margin-top: calc(var(--sca-pad)*3);
}
#por-que .page {
    position: relative;
    z-index: 1;
}
#por-que .page:before {
    content: '';
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: calc(var(--sca-pad)*-2);
    bottom: calc(var(--sca-pad)*-2);
    background-color: var(--col-lig);
    z-index: -1;
}

.accordion {
    padding-left: 0;
}
.accordion > a {
    font-family: var(--fon-h);
    color: var(--col-acc);
}
.accordion > a:after {
    font-family: sans-serif;
    font-size: 1.75em;
    font-weight: 100;
}

#empresa {
    background-image: url("data:image/svg+xml,%3Csvg width='275' height='275' viewBox='0 0 275 275' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M172.934 225.15C129.255 225.187 86.5644 212.159 50.3496 187.74L137.223 274.613L187.189 224.64C182.473 224.94 177.728 225.15 172.935 225.15' fill='%2359B87A'/%3E%3Cpath d='M261.219 150.616L274.229 137.606C274.329 137.506 274.411 137.389 274.509 137.285L137.223 0L0 137.223C0.8 138.11 1.635 138.97 2.453 139.843L11.089 148.486C44.8976 180.184 89.3953 198.001 135.738 198.396C182.081 198.791 226.875 181.734 261.219 150.616Z' fill='%2359B87A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 97.5% -20%;
}
#empresa h2 + p {
    font-family: var(--fon-h);
    font-size: calc(var(--sca-t)*1.5);
    line-height: 1.2em;
    margin-right: -1em;
}
#empresa h2 + p + img {
    margin-top: calc(var(--sca-pad)*1.75);
}
#empresa h2 + p + img + p {
    max-width: 15em;
}
#empresa p.emph,
#empresa p.emph ~ p {
    font-size: calc(var(--sca-t)* 1.125);
    line-height: calc(var(--sca-lh)* 1.3);
}

#clientes {
    padding-top: var(--sca-pad);
    position: relative;
    z-index: 1;
}
#clientes:before {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(calc(var(--sca-pad)*3) + 9.5vw);
    z-index: -1;
    background-color: var(--col-lig);
}
#clientes h2 {
    margin-bottom: calc(var(--sca-mar)*2.5);
}
#clientes .brand-slider img {
    border-radius: .75rem;
    margin: 1px .75rem;
    display: block;
    width: calc(100% - 1.5rem);
    box-shadow: 0 0 0 1px #EBEBF0;
}
.slick-dots {
    margin-top: calc(var(--sca-mar));
}
.slick-dots li button {
    border-color: var(--col-acc);
}
.slick-dots li.slick-active button {
    background-color: var(--col-acc);
    box-shadow: 0 0 0 .125rem var(--col-acc);
}
#clientes + .section {
    margin-top: 0;
}

#contacto h3 {
    color: var(--col-pri);
}
.social li a {
    border-radius: 10rem;
    background-color: #8F90A6;
}
.brandal {
    color: #0058FF;
    font-weight: bold;
}
@media (min-width:960px) {
    .brandal {
        float: right;
    }
}

@media (max-width:960px) {
    :root {
      --ratio: .25;
    }
    .bt-menu {
        color: var(--col-bg);
    }
    .header nav {
        text-align: center;
        background-color: var(--col-pri);
    }
    #soluciones,
    #empresa {
        background-image: none;
    }
    #por-que .page:before {
        left: -3rem;
        right: -3rem;
    }
}