.hero.index { background-image: url('/images/index.jpg'); }

.hero-title-index {
    position: relative;
    z-index: 15;
    text-align: center;
    text-shadow: 0 4px 10px rgba(0,0,0,.8);
    font-size: 1.8em;
    font-weight: 450;
    color: var(--x-light);
}

.section-intro {
    padding: 0 8px;
    display: flex;
    flex-wrap: wrap-reverse;
}

.section-intro-img-container {
    max-width: 584px;
    width: 100%;
    margin: 24px auto 0 auto;
}
.section-intro-img-container img { border-radius: 30px; }

.section-intro-content {
    width: 100%;
    height: max-content;
    padding: 16px 0 8px;
    margin: auto;
}
.section-intro-content.company { max-width: 554px; }
.section-intro-content.products { max-width: 552px; }

.section-intro-title {
    font-weight: 450;
    font-size: 2em;
    text-align: center;
}
.section-intro-title.light { color: var(--x-light); }
.section-intro-title.dark { color: var(--x-dark); }

.section-intro-heading-separator {
    width: 60px;
    height: 4px;
    margin: 16px auto;
    border-radius: 5px;
}
.section-intro-heading-separator.red { background-color: var(--exito-red); }
.section-intro-heading-separator.blue { background-color: var(--exito-blue); }

.section-intro-description {
    padding-top: 8px;
    font-weight: 450;
}
.section-intro-description.light { color: var(--faint-light); }
.section-intro-description.dark { color: var(--dark); }

.section-intro-description .highlight {
    font-size: 1.2em;
    font-weight: 450;
    text-decoration: none;
}
.section-intro-description a.highlight {
    text-decoration: none;
    cursor: pointer;
    font-weight: 550;
}
.section-intro-description .highlight.red { color: var(--exito-red); }
.section-intro-description .highlight.blue { color: var(--exito-blue); }

.services-section-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 30px;
    border: 2px solid #222;
    margin: 20px 8px;
    max-width: 376px;
    padding: 1em;
    background-color: #0d0d0d;
}

.service-title {
    text-align: center;
    font-weight: 450;
    font-size: 1.2em;
    color: var(--light);
}

.service-title-separator {
    width: 60px;
    height: 4px;
    background-color: var(--exito-red);
    margin: 16px auto;
    border-radius: 5px;
}

.service-content { margin-bottom: auto; }

.service-description {
    min-height: 72px;
    text-align: center;
    font-weight: 450;
    font-size: .9em;
    color: var(--faint);
}

.service-bullet-points-container {
    margin-top: 20px;
    padding-left: .8em;
}

.service-bullet-point {
    font-size: .9em;
    color: var(--faint-light);
    font-weight: 450;
    margin-top: 16px;
    padding-left: 8px;
}
.service-bullet-point:first-of-type { margin-top: 0; }

.service-bullet-point::marker {
    color: var(--exito-red);
    content: '✔';
}

.service-link-container {
    margin: 24px auto 8px auto;
    display: flex;
    justify-content: center;
}

.service-link {
    font-size: 1em;
    font-weight: 550;
    color: var(--light);
    border: 2px solid var(--exito-red);
    padding: .25em .5em;
    border-radius: 5px;
    transition: var(--def-transition);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.service-link:focus-visible, .service-link:active {
    background-color: var(--exito-red);
    color: var(--x-light);
}

.products-section-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0 8px;
}

/*.product-card {*/
/*    display: grid;*/
/*    grid-template-rows: auto 1fr auto;*/
/*    box-shadow: var(--def-box-shadow);*/
/*    border-radius: 30px;*/
/*    margin: 20px 0;*/
/*    max-width: 320px;*/
/*    padding: 1em 0;*/
/*}*/

.product-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: var(--def-box-shadow);
    border-radius: 30px;
    margin: 16px 0;
    max-width: 560px;
    padding: 1em 0;
}

.product-card .swiper-fade-wrapper {
    width: 100%;
    min-width: 0;
}

.product-title {
    text-align: center;
    font-weight: 550;
    font-size: 1.2em;
    color: var(--dark);
}

.product-title-separator {
    width: 60px;
    height: 4px;
    background-color: var(--exito-blue);
    margin: 16px auto;
    border-radius: 5px;
}

.product-name-link {
    font-size: 1em;
    font-weight: 550;
    color: var(--exito-blue);
    text-decoration: none;
    cursor: pointer;
    transition: var(--def-transition);
    user-select: none;
}
.product-name-link:focus-visible, .product-name-link:active { text-decoration: underline var(--exito-blue); }

.product-link-container {
    margin: 25px auto 0 auto;
    display: flex;
    justify-content: center;
}

.product-link {
    font-size: 1em;
    font-weight: 550;
    color: var(--dark);
    border: 2px solid var(--exito-blue);
    padding: .25em .5em;
    border-radius: 5px;
    background-color: transparent;
    transition: var(--def-transition);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.product-link:focus-visible, .product-link:active {
    background-color: var(--exito-blue);
    color: var(--x-light);
}

.product-slide-img-container {
    width: 100%;
    height: 100%;
    max-height: 256px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: .5em 0;
    transition: var(--def-transition);
    position: relative;
}

.product-slide-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}
.product-slide-img-container a {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    inset: 0;
}

.product-slide-description {
    font-size: .9em;
    color: var(--muted);
    margin-top: 5px;
    padding: 0 8px;
    max-height: 112px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.insights-section-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    row-gap: 32px;
}

.insight-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: var(--def-box-shadow);
    background-color: var(--x-light);
    border-radius: 30px;
    min-height: 100%;
    max-height: 512px;
    max-width: 360px;
    min-width: 280px;
    user-select: none;
    margin: 0 16px;
    position: relative;
}

.insight-img-container {
    width: 100%;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.insight-img-container img {
    border-radius: 30px 30px 0 0;
    object-fit: cover;
    height: 264px;
    width: 100%;
}

.insight-content { padding: 0 16px; }

.insight-title {
    text-transform: uppercase;
    padding-top: 8px;
    color: var(--dark);
    font-size: 1em;
    font-weight: 550;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.insight-description {
    color: var(--muted);
    padding: 8px 0;
    font-size: .8em;
    max-height: 88px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.insight-btn-container {
    margin: 24px auto 16px auto;
    display: flex;
    justify-content: center;
}

.insight-btn {
    z-index: 5;
    font-size: 1em;
    font-weight: 550;
    color: var(--dark);
    border: 2px solid var(--exito-blue);
    padding: .25em .5em;
    border-radius: 5px;
    background-color: transparent;
    transition: var(--def-transition);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.insight-btn:focus-visible, .insight-btn:active {
    background-color: var(--exito-blue);
    color: var(--x-light);
}

.insight-link {
    border-radius: 30px;
    position: absolute;
    inset: 0;
}

.swiper-testimonials-1 .swiper-wrapper,
.swiper-testimonials-2 .swiper-wrapper { transition-timing-function: linear !important; }

.testimonials-section-content { margin-top: 24px; }

.testimonial-card {
    display: flex;
    flex-direction: column;
    background-color: var(--x-light);
    border-radius: 15px;
    min-height: 100%;
    max-width: 280px;
    min-width: 280px;
    user-select: none;
    box-shadow: var(--def-box-shadow);
}

.testimonial-title {
    padding: 10px 10px 0 10px;
    font-size: 1.1em;
    font-weight: 550;
    color: var(--dark);
}

.testimonial-description {
    flex-grow: 1;
    font-size: .9em;
    padding: 5px 10px 0 10px;
    color: var(--muted);
}

.testimonial-initials {
    font-size: 1em;
    color: var(--faint);
    font-weight: 450;
    text-align: right;
    padding: 5px 10px 10px 10px;
}

.stat-section {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
}

.stat-card {
    margin: 32px 0;
    text-align: center;
}

.stat-title {
    font-size: 2em;
    color: var(--x-light);
}

.stat-description {
    font-size: 1em;
    color: var(--faint-light);

}

.highlight-section {
    max-width: 504px;
    margin: 16px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.highlight-separator {
    width: 100px;
    height: 4px;
    background-color: var(--exito-red);
    /*margin: 40px 50px;*/
    /*margin: 16px 50px 40px 50px;*/
    margin: 16px auto;
    border-radius: 5px;
}

.highlight-card { max-width: 350px; }

.highlight-title {
    text-align: center;
    margin: 5px 0;
    font-size: 1.5em;
    color: var(--x-light);
}

.highlight-description {
    text-align: center;
    font-size: .9em;
    color: var(--faint-light);
    padding: 0 5px 5px 5px;
}

.awards-section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 8px 0;
}

.awards-img-container {
    width: 256px;
    position: relative;
}

.awards-img-container img { width: 100%; }

.awards-img-link {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.awards-list {
    color: var(--faint-light);
    padding-left: 24px;
}
.awards-list li {
    font-weight: 450;
    margin-top: 8px;
    font-size: 1.1em;
}

/*-------------------------------------------------------------------------------------------------------------------*/
                                              /* -- breakpoints -- */
/*-------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 375px) {}
@media (min-width: 480px) {}

@media (min-width: 576px) {
    .hero-title-index { font-size: 2.2em; }

    .hero-description { max-width: 370px; }

    .product-card { margin: 16px 8px; }

    .stat-section {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .stat-card {
        margin: 32px;
        width: 208px;
    }

    .highlight-card { max-width: 450px; }
}

@media (min-width: 768px) {
    .services-section-content {
        max-width: 750px;
        margin: 0 auto;
    }

    .highlight-section { margin-top: 32px; }
}

@media (min-width: 800px) {
    .awards-section-content {
        justify-content: space-around;
        flex-direction: row;
        padding-top: 16px;
    }
}

@media (min-width: 992px) {
    .hero-title-index { font-size: 2.5em; }
    .hero-description { max-width: 400px; }
}

@media (min-width: 1036px) {
    .services-section-content {
        max-width: unset;
        margin: unset;
    }
}

@media (min-width: 1154px) { .section-intro-content.company { padding: 0 0 0 16px; } }
@media (min-width: 1151px) { .section-intro-content.products { padding: 0 0 0 16px; } }

@media (min-width: 1200px) {}

@media (hover: hover) {
    .service-link:hover {
        background-color: var(--exito-red);
        color: var(--x-light);
    }

    .section-intro-description a.highlight:hover { text-decoration: underline var(--exito-blue); }

    .product-name-link:hover { text-decoration: underline var(--exito-blue); }
    .product-link:hover {
        background-color: var(--exito-blue);
        color: var(--x-light);
    }

    .insight-btn:hover {
        background-color: var(--exito-blue);
        color: var(--x-light);
    }
}