/* =========================================
   AG Clientes
   Frontend Styles
========================================= */
.ag-clientes {
    background: #fff;
    padding: 5rem 0;
    width: 100%;
}
.ag-clientes-header {
    text-align: center;
    margin-bottom: 40px;
}
.ag-clientes-pre-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--fs-subtitle);
    letter-spacing: .02em;
    color: var(--cyan);
    font-weight: 600;
}
.ag-clientes-title {
    font-size: var(--fs-h3);
    margin-bottom: 10px;
    margin-top: 10px;
    color: var(--gray);
    font-weight: 400;
}
.ag-clientes-description {
    font-size: var(--fs-body-lg);
    color: var(--gray);
    max-width: 600px;
    margin: 10px auto;
}
/* =======================
    CLIENTES MARQUEE
======================= */
.ag-clientes-marquee {
    overflow: hidden;
    position: relative;
    /*
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    */
}
.ag-cliente-track {
    display: flex;
    gap: 90px;
    align-items: center;
    animation: agClientesScroll 25s linear infinite;
    animation-play-state: paused;
    width: max-content
}
.ag-clientes-marquee.in .ag-cliente-track {
    animation-play-state: running;
    /*animation-delay: 2s*/
}
.ag-clientes-marquee:hover .ag-cliente-track {
    animation-play-state: paused
}
.ag-cliente-item {
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}
.ag-cliente-item img {
    transition: filter .4s ease;
    width: 160px;
    height: 80px;
    object-fit: contain;
    opacity: 1;
    transition: all .35s ease
}
.ag-cliente-image {
    filter: var(--logo-filter);
    opacity: var(--logo-opacity);
    transition: filter .3s ease, opacity .3s ease;
}
.ag-cliente-image-hover {
    transition: all .3s ease;
}
.ag-cliente-image-hover:hover {
    transform: scale(1.05);
    filter: var(--logo-filter-hover);
    opacity: var(--logo-opacity-hover);
}
.ag-cliente-grid-image {
    filter: var(--logo-filter);
    opacity: var(--logo-opacity);
    transition: filter .3s ease, opacity .3s ease;
}
.ag-cliente-grid-image-hover {
    transition: all .3s ease;
}
.ag-cliente-grid-image-hover:hover {
    transform: scale(1.05);
    filter: var(--logo-filter-hover);
    opacity: var(--logo-opacity-hover);
}
@keyframes agClientesScroll {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}
/* =======================
    CLIENTES GRID
======================= */
.ag-clientes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: -5rem;
    display: grid;
    gap: 1.5rem;
}
.ag-clientes-archive {
    padding: 5rem;
}
.ag-clientes-archive .ag-clientes-grid {
    margin-bottom: 5rem;
}
.ag-cliente-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    min-height: 220px;
}
.ag-cliente-card:hover {
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
    border-color: #e1e1e1;
}
.ag-cliente-card-link,
.ag-cliente-card-inner {
    justify-content: center;
    text-decoration: none;
    align-items: center;
    display: flex;
    height: 100%;
    padding: 1rem;
    width: 100%;
}
.ag-cliente-grid-image {
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    object-fit: contain;
    width: 125px;
    height: 100%;
    opacity: 1;
}
.ag-cliente-card:hover .ag-cliente-grid-image-hover {
    transform: scale(1.02);
    filter: grayscale(0%);
    opacity: 1;
}
.ag-cliente-label {
    color: #575757;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
}
.ag-cliente-empty {
    text-align: center;
    font-size: var(--fs-body);
    color: #8b8b8b;
    margin: 0;
}
.ag-clientes-controls {
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.ag-clientes-controls .nav-item {
    position: absolute;
    right: 0;
}
.ag-clientes-controls-inner {
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.nav-clientes {
    animation: riseIn 0.7s cubic-bezier(.19, 1, .22, 1) forwards;
    transform: translateY(14px);
    background: transparent;
    -webkit-appearance: none;
    text-decoration: none;
    align-items: center;
    appearance: none;
    box-shadow: none;
    color: #575757;
    cursor: pointer;
    display: flex;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    gap: 14px;
    opacity: 0;
}
.nav-clientes:hover .nav-icon {
    background: #ffc20d;
}
.nav-clientes .nav-icon {
    transition: background 0.35s ease;
    justify-content: center;
    background: #0094aa;
    align-items: center;
    position: relative;
    overflow: hidden;
    display: flex;
    min-width: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
}
.nav-clientes .nav-icon i {
    position: relative;
    font-size: var(--fs-h3);
    z-index: 1;
}
.nav-clientes .nav-label {
    color: #575757;
    font-size: var(--fs-label);
    line-height: 1.1;
}
.nav-clientes .nav-icon i {
    animation: pulse 0.9s infinite ease-in-out;
}
/* Extra small devices (portrait phones, less than 576px and landscape phones, 576px and up) */
@media (max-width: 767.98px) {
    .ag-clientes {
        padding: 1.5rem 0;
    }
    /* =======================
    CLIENTES MARQUEE
    ======================= */
    .ag-cliente-track {
        gap: 25px;
    }
    /* =======================
    CLIENTES GRID
    ======================= */
    .ag-clientes-archive {
        padding: 1.5rem;
    }
    .ag-clientes-archive .ag-clientes-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin-bottom: 2rem;
        padding: 0;
    }
    .ag-clientes-description {
        line-height: 1.7rem;
        margin: 10px 18px;
    }
    .ag-cliente-grid-image {
        max-height: 150px;
    }
    .nav-clientes {
        display: inline-block;
    }
    .ag-clientes-controls {
        height: 82.22px;
    }
    .ag-clientes-controls-inner .nav-top .nav-icon {
        display: inline-flex;
        margin-bottom: 0.5rem;
    }
    .ag-clientes-controls-inner .nav-top .nav-label {
        display: block;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ag-clientes {
        padding: 1.5rem 0;
    }
    /* =======================
    CLIENTES MARQUEE
    ======================= */
    .ag-cliente-track {
        gap: 45px;
    }
    /* =======================
    CLIENTES GRID
    ======================= */
    .ag-clientes-archive {
        padding: 1.5rem;
    }
    .ag-clientes-archive .ag-clientes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 2rem;
        padding: 0;
    }
    .ag-clientes-description {
        line-height: 1.7rem;
    }
    .ag-cliente-grid-image {
        max-height: 150px;
    }
    .nav-clientes {
        display: inline-block;
    }
    .ag-clientes-controls {
        height: 82.22px;
    }
    .ag-clientes-controls-inner .nav-top .nav-icon {
        display: inline-flex;
        margin-bottom: 0.5rem;
    }
    .ag-clientes-controls-inner .nav-top .nav-label {
        display: block;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* =======================
    CLIENTES GRID
    ======================= */
    .ag-clientes-archive {
        padding: 3rem;
    }
    .ag-clientes-archive .ag-clientes-grid {
        margin-bottom: 3rem;
    }
    .ag-clientes-archive .ag-clientes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
    }
}
/* ==========================
   Fade Up
========================== */
.animateFadeUp {
    animation: fadeUp .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   Fade Down
========================== */
.animateFadeDown {
    animation: fadeDown .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   Fade Left
========================== */
.animateFadeLeft {
    animation: fadeLeft .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ==========================
   Fade Right
========================== */
.animateFadeRight {
    animation: fadeRight .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ==========================
   Zoom In
========================== */
.animateZoomIn {
    animation: zoomIn .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Zoom Out
========================== */
.animateZoomOut {
    animation: zoomOut .7s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.15);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Rotate In
========================== */
.animateRotateIn {
    animation: rotateIn .8s ease forwards;
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-8deg) scale(.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}
/* ==========================
   Flip Up
========================== */
.animateFlipUp {
    animation: flipUp .8s ease forwards;
    transform-origin: bottom;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes flipUp {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0);
    }
}
/* ==========================
   Bounce In
========================== */
.animateBounceIn {
    animation: bounceIn .8s ease forwards;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
    70% {
        transform: scale(.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Blur In
========================== */
.animateBlurIn {
    animation: blurIn .8s ease forwards;
    filter: blur(10px);
    opacity: 0;
}
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}
/* ==========================
   Direções de entrada
========================== */
.ag-animation-left {
    transform: translateX(-80px);
}
.ag-animation-right {
    transform: translateX(80px);
}
.ag-animation-top {
    transform: translateY(-80px);
}
.ag-animation-bottom {
    transform: translateY(80px);
}
.ag-animation-fade {
    transform: none;
}
/* ==========================
   Fade In
========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* ==========================
   Fade Up
========================== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   Fade Down
========================== */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   Fade Left
========================== */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ==========================
   Fade Right
========================== */
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ==========================
   Zoom In
========================== */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Zoom Out
========================== */
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.15);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Rotate In
========================== */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-8deg) scale(.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}
/* ==========================
   Flip Up
========================== */
@keyframes flipUp {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0);
    }
}
/* ==========================
   Bounce In
========================== */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
    70% {
        transform: scale(.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* ==========================
   Blur In
========================== */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}
/* ==========================
   Rise In
========================== */
@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   Pulse
========================== */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.delay100 { animation-delay: .1s; }
.delay200 { animation-delay: .2s; }
.delay300 { animation-delay: .3s; }
.delay400 { animation-delay: .4s; }
.delay500 { animation-delay: .5s; }
.delay600 { animation-delay: .6s; }
.delay700 { animation-delay: .7s; }
.delay800 { animation-delay: .8s; }
.delay900 { animation-delay: .9s; }
.delay1000 { animation-delay: 1s; }
.speed300 { animation-duration: .3s; }
.speed500 { animation-duration: .5s; }
.speed700 { animation-duration: .7s; }
.speed1000 { animation-duration: 1s; }
.speed1500 { animation-duration: 1.5s; }