@charset "UTF-8";
/* Scoped institutional presentation; legal pages retain Customizr. */
body.jsr-site{margin:0;background:#fff;color:#303536;font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left}.jsr-site *{box-sizing:border-box}.jsr-site h1,.jsr-site h2,.jsr-site h3,.jsr-site p{margin:0}.jsr-site h1,.jsr-site h2,.jsr-site h3{font-family:inherit;font-weight:650;color:inherit;line-height:1.12;letter-spacing:-.045em}.jsr-site a{color:inherit;text-decoration:none}.jsr-site a:focus-visible,.jsr-site summary:focus-visible{outline:3px solid #18a8a8;outline-offset:5px}.jsr-site .wrap{width:min(1200px,calc(100% - 80px));margin:auto}.jsr-site .header{background:#fff;border-bottom:1px solid #e2ebeb}.header-row{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:106px}.brand{display:inline-flex;flex-direction:column;line-height:1}.brand-mark{font-size:43px;font-weight:850;letter-spacing:-3px;color:#28877a}.brand-mark>span{font-size:13px;margin-left:4px;color:#18a8a8}.brand-caption{font-size:9px;letter-spacing:2px;font-weight:700;margin-top:7px}.desktop-menu{display:flex;gap:24px;font-size:13px;font-weight:600}.desktop-menu a:hover,.desktop-menu [aria-current]{color:#21766b}.jsr-site .button{display:inline-flex;align-items:center;gap:30px;background:#21766b;color:white;border:1px solid #21766b;border-radius:5px;padding:16px 24px;font-size:14px;font-weight:650;line-height:1.5}.jsr-site .button:hover{background:#195c54;color:#fff}.jsr-site .button.small{padding:12px 17px;font-size:12px;gap:14px}.hero{background:#f0f7f7;padding:78px 0 66px}.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}.jsr-site .eyebrow{font-size:11px;font-weight:750;letter-spacing:1.8px;color:#21766b;margin-bottom:24px}.jsr-site h1{font-size:clamp(42px,4.8vw,68px);max-width:850px}.jsr-site h1 em{font-style:normal;color:#28877a}.jsr-site .lead{font-size:18px;line-height:1.7;color:#606b6c;max-width:530px;margin:26px 0 30px}.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap}.text-link{font-size:14px;font-weight:650}.hero-note{margin-top:36px;font-size:12px;color:#606b6c}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18a8a8;margin-right:9px}.network{position:relative;overflow:hidden;min-height:410px;border:1px solid #28877a;border-radius:18px;background:radial-gradient(ellipse at 70% 30%,#28877a 0, #1b6263 55%,#204547 100%);color:#e2f4f4;padding:28px;box-shadow:0 25px 50px #183e4015}.network-top{position:relative;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px}.network-core{position:relative;margin:55px auto 32px;text-align:center;font-size:65px;line-height:1.2;font-weight:750;letter-spacing:-4px;color:#fff}.network-core>span{display:block;font-size:9px;letter-spacing:3px;font-weight:500;margin-top:5px}.network-nodes{position:relative;display:flex;justify-content:space-around;text-align:center}.network-nodes>span{display:block;font-size:26px;line-height:1.4;color:#83dddd}.network-nodes b{display:block;font-size:12px;font-weight:500;color:#fff}.network-bottom{position:relative;border-top:1px solid #ffffff24;margin-top:33px;padding-top:19px;font-size:10px}.orb{position:absolute;border:1px solid #83dada35;border-radius:50%;width:340px;height:340px;top:20px;left:65px}.orb-two{width:460px;height:460px;left:5px;top:-40px}.proof{border-bottom:1px solid #e2ebeb}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:32px 0;gap:38px}.proof-grid>div{display:flex;flex-direction:column;gap:6px}.proof strong{font-size:20px;font-weight:650;letter-spacing:-.5px}.proof span{font-size:12px;color:#657173;max-width:280px}.section{padding-top:90px;padding-bottom:90px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:40px}.jsr-site h2{font-size:clamp(30px,3vw,42px)}.section-heading>p{max-width:350px;color:#657173;font-size:14px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.jsr-site .card{display:flex;flex-direction:column;border:1px solid #dbe7e7;padding:25px;border-radius:8px;background:#fff;transition:background .2s,transform .2s}.jsr-site .card:hover{background:#eff8f8;transform:translateY(-4px)}.card-top{display:flex;justify-content:space-between;font-size:12px;color:#21766b;margin-bottom:40px}.jsr-site h3{font-size:23px;margin-bottom:18px}.card p{font-size:13px;color:#657173}.card-more{display:flex;justify-content:space-between;margin-top:auto;padding-top:30px;font-size:12px;font-weight:650}.about{background:#f2f7f7;padding:75px 0}.about-grid,.contact-grid,.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about p:not(.eyebrow),.service-grid p{margin-bottom:20px;color:#606e70}.contact{background:#21766b;color:#fff;padding:66px 0}.contact .eyebrow{color:#d2eeee}.contact p:not(.eyebrow){margin-top:23px;color:#e0f0f0}.contact-links{align-self:center;display:flex;flex-direction:column}.contact-links a{font-size:clamp(16px,1.7vw,23px);padding:16px 0;border-bottom:1px solid #ffffff40;display:flex;justify-content:space-between;gap:10px}.contact-links>span{font-size:12px;color:#d5eeee;margin-top:18px}.jsr-site footer{background:#282c2e;color:#cdd4d5;padding:55px 0 22px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:60px}.jsr-site footer .brand-mark{color:#fff}.footer-grid p{font-size:13px;margin-top:20px;line-height:1.9}.footer-grid>div>a:not(.brand){display:block;font-size:13px;margin:6px 0}.jsr-site footer h2{font-size:13px;font-weight:650;letter-spacing:0;color:#fff;margin-bottom:18px}.footer-bottom{border-top:1px solid #ffffff19;padding-top:22px;margin-top:42px!important;font-size:11px;color:#a5b4b6}.inner-hero{padding:70px 0;background:#f0f7f7}.back{display:inline-block;font-size:13px;margin-bottom:35px}.feature-list{list-style:none;margin:0;padding:0}.feature-list li{padding:20px 0;border-bottom:1px solid #dbe7e7;display:flex;gap:18px}.feature-list span{color:#21766b}.mobile-menu{display:none}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:12px;z-index:9999}
@media(min-width:1500px){.hero{padding:92px 0}}
@media(max-width:1100px){.desktop-menu{gap:14px;font-size:12px}.header-contact{display:none!important}.hero-grid{gap:30px}.cards{grid-template-columns:repeat(2,1fr)}.card-top{margin-bottom:25px}}
@media(max-width:760px){.jsr-site .wrap{width:calc(100% - 40px)}.header-row{min-height:85px}.brand-mark{font-size:36px}.desktop-menu{display:none}.mobile-menu{display:block}.mobile-menu summary{cursor:pointer;font-size:14px;padding:12px;list-style:none}.mobile-menu summary span{margin-left:15px}.mobile-menu>div{position:absolute;left:0;right:0;top:85px;background:#fff;z-index:10;padding:15px 25px;border-bottom:1px solid #ddd;box-shadow:0 15px 20px #0001}.mobile-menu a{display:block;padding:12px}.hero{padding:45px 0}.hero-grid,.about-grid,.contact-grid,.service-grid{grid-template-columns:1fr;gap:35px}.jsr-site h1{font-size:44px}.jsr-site .eyebrow{font-size:10px;letter-spacing:1.3px;margin-bottom:20px}.jsr-site .lead{font-size:16px}.network{min-height:360px;padding:24px}.network-core{margin-top:38px}.proof-grid{grid-template-columns:1fr;gap:23px;padding:30px 0}.proof-grid>div{border-bottom:1px solid #e1ebeb;padding-bottom:18px}.proof-grid>div:last-child{border:0;padding:0}.proof span{max-width:none}.section{padding-top:55px;padding-bottom:55px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:22px}.cards{grid-template-columns:1fr}.jsr-site .card{padding:25px}.card-top{margin-bottom:25px}.card-more{padding-top:25px}.about,.contact{padding:48px 0}.footer-grid{grid-template-columns:1fr;gap:32px}.inner-hero{padding:45px 0}.inner-hero h1{font-size:39px}.contact-links a{font-size:16px}.actions{gap:20px}.hero-note{margin-top:27px}}
@media(prefers-reduced-motion:reduce){.jsr-site *{transition:none!important;scroll-behavior:auto!important}}

.jsr-site .official-logo{display:block;width:175px;height:auto;max-width:100%;object-fit:contain;background:#fff}.jsr-site .network-core .official-logo{width:270px;margin:auto;border:12px solid #fff;border-radius:4px}.jsr-site footer .official-logo{width:190px;border:8px solid #fff;border-radius:3px}@media(max-width:760px){.jsr-site .header .official-logo{width:155px}.jsr-site .network-core .official-logo{width:230px}}

/* JSR - logo contextual hero e rodape */
.network-core {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.network-core .hero-context-logo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
}

footer .brand .footer-context-logo {
    display: block;
    width: 270px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

@media (max-width: 720px) {
    .network-core .hero-context-logo {
        max-width: 100%;
    }

    footer .brand .footer-context-logo {
        width: 230px;
    }
}

/* ==========================================================
   JSR - encaixe final das artes institucionais
   ========================================================== */

/* HERO */
.network-core {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}

.network-core .hero-context-logo {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* RODAPE */
footer .brand {
    display: block;
}

footer .brand .footer-context-logo {
    display: block;
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

@media (max-width: 720px) {
    .network-core .hero-context-logo {
        width: 100% !important;
        max-width: 100% !important;
    }

    footer .brand .footer-context-logo {
        width: 100% !important;
        max-width: 360px !important;
    }
}

/* ==========================================================
   JSR - correção final do hero com arte integrada
   ========================================================== */

.network {
    background: #0b6f69 !important;
}

/* Os anéis já existem dentro da arte JSR_verde.jpg */
.network .orb,
.network .orb-one,
.network .orb-two {
    display: none !important;
}

.network-core {
    background: transparent !important;
    padding: 0 !important;
    margin: 26px 0 22px !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

.network-core .hero-context-logo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

/* Harmoniza elementos HTML restantes com a arte */
.network-top,
.network-bottom {
    color: rgba(255,255,255,.92) !important;
}

.network-nodes {
    position: relative;
    z-index: 2;
}

.network-nodes span {
    color: #ffffff !important;
}

.network-nodes span > b {
    color: #ffffff !important;
}

/* Rodapé: integração da arte preta */
footer .footer-context-logo {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
}

@media (max-width: 720px) {
    .network-core {
        margin: 18px 0 18px !important;
    }

    .network-core .hero-context-logo {
        width: 100% !important;
    }

    footer .footer-context-logo {
        max-width: 100% !important;
    }
}

/* ==========================================================
   JSR — composição definitiva das marcas
   Sem banners retangulares
   ========================================================== */

/* ---------- HERO ---------- */

.network {
    background: #0f756e !important;
}

.network-core {
    position: relative !important;
    height: 285px !important;
    margin: 22px 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* círculos perfeitamente concêntricos */
.network-core::before,
.network-core::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(74, 224, 210, .25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.network-core::before {
    width: 250px;
    height: 250px;
}

.network-core::after {
    width: 390px;
    height: 390px;
}

.hero-brand-lockup {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 88%;
}

.hero-brand-lockup img {
    display: block;
    width: 132px !important;
    height: 132px !important;
    min-width: 132px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 !important;
}

.hero-brand-lockup span {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .30em;
    white-space: nowrap;
}

/* elementos da interface continuam HTML reais */
.network-top,
.network-bottom,
.network-nodes {
    position: relative;
    z-index: 5;
}

.network-nodes span,
.network-nodes b {
    color: #fff !important;
}


/* ---------- RODAPE ---------- */

footer {
    background: #282c2e !important;
}

footer .brand {
    display: inline-block !important;
    text-decoration: none !important;
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-brand-lockup img {
    display: block;
    width: 105px !important;
    height: 105px !important;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 !important;
}

.footer-brand-lockup span {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: .27em;
    white-space: nowrap;
}

.footer-tagline {
    margin: 18px 0 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    letter-spacing: .20em;
    line-height: 1.6;
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {

    .network-core {
        height: 230px !important;
    }

    .network-core::before {
        width: 205px;
        height: 205px;
    }

    .network-core::after {
        width: 315px;
        height: 315px;
    }

    .hero-brand-lockup {
        gap: 14px;
        width: 94%;
    }

    .hero-brand-lockup img {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px;
    }

    .hero-brand-lockup span {
        font-size: 18px;
        letter-spacing: .19em;
    }

    .footer-brand-lockup {
        gap: 14px;
    }

    .footer-brand-lockup img {
        width: 82px !important;
        height: 82px !important;
    }

    .footer-brand-lockup span {
        font-size: 19px;
        letter-spacing: .18em;
    }
}

/* ==========================================================
   JSR - AJUSTE FINAL DE PALETA / HERO / RODAPE
   Paleta baseada no teal original da marca
   ========================================================== */

:root {
    --jsr-teal: #18a8a8;
    --jsr-teal-dark: #128b8b;
    --jsr-teal-deep: #0d7272;
    --jsr-teal-light: #eefafa;
    --jsr-charcoal: #282c2e;
}

/* ---------- PALETA GERAL ---------- */

.hero {
    background: var(--jsr-teal-light) !important;
}

.hero h1 em,
.eyebrow {
    color: var(--jsr-teal-dark) !important;
}

.button,
.header-contact {
    background: var(--jsr-teal-dark) !important;
    border-color: var(--jsr-teal-dark) !important;
}

.button:hover,
.header-contact:hover {
    background: var(--jsr-teal-deep) !important;
}

.dot {
    background: var(--jsr-teal) !important;
}


/* ==========================================================
   HERO / QUADRO CENTRAL
   ========================================================== */

.network {
    background: var(--jsr-teal-dark) !important;
    border-color: rgba(24,168,168,.38) !important;
}

/*
 * Círculos do SITE, não da imagem.
 * Todos compartilham exatamente o mesmo centro.
 */
.network-core {
    position: relative !important;
    height: 285px !important;
    margin: 20px 0 14px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.network-core::before,
.network-core::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.network-core::before {
    width: 220px !important;
    height: 220px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

.network-core::after {
    width: 360px !important;
    height: 360px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}


/*
 * Marca central.
 * O pequeno zoom elimina a borda branca pertencente ao JPG.
 */
.hero-brand-lockup {
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 28px !important;
    width: 90% !important;
}

.hero-brand-lockup img {
    display: block !important;

    width: 126px !important;
    height: 126px !important;
    min-width: 126px !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 50% !important;

    /*
     * Recorta os poucos pixels brancos do JPG.
     */
    clip-path: circle(47% at 50% 50%) !important;
    transform: scale(1.08) !important;

    background: var(--jsr-teal) !important;
    box-shadow: none !important;
}

.hero-brand-lockup span {
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    letter-spacing: .27em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.network-top,
.network-bottom {
    color: rgba(255,255,255,.9) !important;
}

.network-nodes {
    position: relative !important;
    z-index: 5 !important;
}

.network-nodes span,
.network-nodes b {
    color: #fff !important;
}


/* ==========================================================
   RODAPE - RESET DA COMPOSICAO
   ========================================================== */

footer {
    background: var(--jsr-charcoal) !important;
}

footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.15fr .9fr .9fr !important;
    gap: 64px !important;
    align-items: start !important;
}

footer .footer-grid > div {
    min-width: 0 !important;
}

footer .brand {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Marca real construída dentro do fundo do próprio footer */
.footer-brand-lockup {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 18px !important;
    width: auto !important;
    max-width: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.footer-brand-lockup img {
    display: block !important;

    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 50% !important;

    clip-path: circle(47% at 50% 50%) !important;
    transform: scale(1.08) !important;

    background: var(--jsr-teal) !important;

    margin: 0 !important;
    padding: 0 !important;
}

.footer-brand-lockup span {
    display: block !important;

    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

.footer-tagline {
    display: block !important;

    margin: 20px 0 0 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.68) !important;

    font-size: 10px !important;
    line-height: 1.6 !important;
    letter-spacing: .18em !important;

    white-space: normal !important;
}

footer .footer-grid h2 {
    margin-top: 0 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .network-core {
        height: 230px !important;
    }

    .network-core::before {
        width: 185px !important;
        height: 185px !important;
    }

    .network-core::after {
        width: 285px !important;
        height: 285px !important;
    }

    .hero-brand-lockup {
        gap: 13px !important;
        width: 94% !important;
    }

    .hero-brand-lockup img {
        width: 86px !important;
        height: 86px !important;
        min-width: 86px !important;
    }

    .hero-brand-lockup span {
        font-size: 17px !important;
        letter-spacing: .16em !important;
    }


    footer .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .footer-brand-lockup img {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
    }

    .footer-brand-lockup span {
        font-size: 18px !important;
        letter-spacing: .16em !important;
    }
}


/* ==========================================================
   JSR - PALETA OFICIAL + RODAPE PRETO
   teal predominante medido no logo: #17A5A6
   ========================================================== */

:root {
    --jsr-teal: #17A5A6;
    --jsr-teal-dark: #12898A;
    --jsr-teal-deep: #0D7071;
    --jsr-teal-soft: #EDF8F8;
    --jsr-black: #000000;
}

/* ---------- PALETA GERAL ---------- */

.hero {
    background: var(--jsr-teal-soft) !important;
}

.eyebrow,
.hero h1 em {
    color: var(--jsr-teal) !important;
}

.button,
.header-contact {
    background: var(--jsr-teal-dark) !important;
    border-color: var(--jsr-teal-dark) !important;
}

.button:hover,
.header-contact:hover {
    background: var(--jsr-teal-deep) !important;
}

.dot {
    background: var(--jsr-teal) !important;
}

/* ---------- CARD CENTRAL ---------- */

/*
 * Mesmo universo cromático do logo.
 */
.network {
    background: var(--jsr-teal-dark) !important;
    border-color: rgba(23,165,166,.45) !important;
}

.network-core::before {
    border-color: rgba(23,165,166,.45) !important;
}

.network-core::after {
    border-color: rgba(23,165,166,.28) !important;
}

.hero-brand-lockup img {
    background: var(--jsr-teal) !important;
}

/* ---------- RODAPE ---------- */

footer {
    background: #000 !important;
}

footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.2fr .9fr .9fr !important;
    gap: 64px !important;
    align-items: start !important;
}

footer .footer-grid > div {
    min-width: 0 !important;
}

/*
 * A imagem também tem fundo preto.
 * Com footer #000, o retângulo deixa de aparecer.
 */
.footer-image-brand {
    display: block !important;
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.footer-image-brand img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    object-fit: contain !important;
}

footer,
footer h2,
footer p,
footer a,
.footer-bottom {
    color: rgba(255,255,255,.88) !important;
}

footer a:hover {
    color: var(--jsr-teal) !important;
}

.footer-bottom {
    border-color: rgba(255,255,255,.14) !important;
}

@media (max-width: 720px) {
    footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .footer-image-brand {
        max-width: 420px !important;
    }
}


/* ==========================================================
   JSR - FINAL: PALETA DA MARCA + RODAPE RESTAURADO
   ========================================================== */

:root {
    --jsr-brand: #1aa6a6;
    --jsr-brand-hover: #168f8f;
    --jsr-brand-soft: #edfafa;
}

/* ---------- PALETA DA MARCA ---------- */

.hero {
    background: var(--jsr-brand-soft) !important;
}

.eyebrow,
.hero h1 em {
    color: var(--jsr-brand) !important;
}

.button,
.header-contact {
    background: var(--jsr-brand) !important;
    border-color: var(--jsr-brand) !important;
}

.button:hover,
.header-contact:hover {
    background: var(--jsr-brand-hover) !important;
}

/*
 * O card passa a usar o MESMO teal visual do símbolo.
 */
.network {
    background: var(--jsr-brand) !important;
    border-color: var(--jsr-brand) !important;
}

.network-core::before {
    border-color: rgba(255,255,255,.18) !important;
}

.network-core::after {
    border-color: rgba(255,255,255,.11) !important;
}

.hero-brand-lockup img {
    background: var(--jsr-brand) !important;
}

.dot {
    background: #d8ffff !important;
}


/* ---------- RODAPE ORIGINAL RESTAURADO ---------- */

footer {
    background: #000 !important;
    padding: 58px 0 24px !important;
}

footer .wrap.footer-grid {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr .85fr !important;
    column-gap: 72px !important;
    row-gap: 30px !important;
    align-items: start !important;
}

footer .footer-brand-col,
footer .footer-links-col,
footer .footer-address-col {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer .footer-image-brand {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer .footer-image-brand img {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: #000 !important;
}

footer h2 {
    margin: 0 0 22px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

footer .footer-links-col a {
    display: block !important;
    margin: 0 0 10px !important;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none !important;
}

footer .footer-address-col p {
    margin: 0 0 14px !important;
    color: rgba(255,255,255,.82) !important;
    line-height: 1.75 !important;
}

footer .footer-address-col a {
    color: rgba(255,255,255,.82) !important;
}

footer a:hover {
    color: var(--jsr-brand) !important;
}

footer .wrap.footer-bottom {
    display: block !important;
    width: auto !important;
    margin-top: 46px !important;
    padding-top: 26px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 12px !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {

    footer {
        padding-top: 42px !important;
    }

    footer .wrap.footer-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    footer .footer-image-brand,
    footer .footer-image-brand img {
        max-width: 320px !important;
    }

    footer .wrap.footer-bottom {
        margin-top: 34px !important;
    }
}



/* ==========================================================
   JSR MODERN — MOTION & MICROINTERACTIONS
   ========================================================== */


/* ----------------------------------------------------------
   ENTRADA E SAIDA DE PAGINAS
   ---------------------------------------------------------- */

.jsr-js body {
    opacity: 0;
    transform: translateY(7px);
}

.jsr-js body.jsr-page-ready {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .42s cubic-bezier(.22,.61,.36,1),
        transform .42s cubic-bezier(.22,.61,.36,1);
}

body.jsr-page-leaving {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition:
        opacity .25s ease,
        transform .25s ease !important;
}


/* ----------------------------------------------------------
   REVEAL NO SCROLL
   ---------------------------------------------------------- */

.jsr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .62s cubic-bezier(.22,.61,.36,1) var(--jsr-delay, 0ms),
        transform .62s cubic-bezier(.22,.61,.36,1) var(--jsr-delay, 0ms);
    will-change: opacity, transform;
}

.jsr-reveal.jsr-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----------------------------------------------------------
   MENU DESKTOP
   ---------------------------------------------------------- */

.desktop-menu a {
    position: relative;
    transition:
        color .22s ease,
        transform .22s ease;
}

.desktop-menu a::after {
    content: "";
    position: absolute;

    left: 0;
    right: 100%;
    bottom: -7px;

    height: 2px;

    background: var(--jsr-brand, #1aa6a6);

    transition:
        right .28s cubic-bezier(.22,.61,.36,1);
}

.desktop-menu a:hover,
.desktop-menu a:focus-visible {
    color: var(--jsr-brand, #1aa6a6);
    transform: translateY(-1px);
}

.desktop-menu a:hover::after,
.desktop-menu a:focus-visible::after,
.desktop-menu a[aria-current="page"]::after {
    right: 0;
}


/* ----------------------------------------------------------
   BOTOES
   ---------------------------------------------------------- */

.button,
.header-contact {
    position: relative;
    overflow: hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background-color .22s ease;
}

.button:hover,
.header-contact:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(26,166,166,.20);
}

.button:active,
.header-contact:active {
    transform: translateY(-1px) scale(.985);
}

.button span,
.header-contact span {
    display: inline-block;

    transition:
        transform .22s cubic-bezier(.22,.61,.36,1);
}

.button:hover span,
.header-contact:hover span {
    transform: translate(4px,-3px);
}


/* ----------------------------------------------------------
   LINKS DE TEXTO
   ---------------------------------------------------------- */

.text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    transition:
        color .22s ease,
        transform .22s ease;
}

.text-link::after {
    content: "";
    position: absolute;

    left: 0;
    right: 100%;
    bottom: -5px;

    height: 1px;

    background: var(--jsr-brand, #1aa6a6);

    transition:
        right .28s ease;
}

.text-link:hover {
    color: var(--jsr-brand, #1aa6a6);
    transform: translateX(3px);
}

.text-link:hover::after {
    right: 0;
}


/* ----------------------------------------------------------
   CLICK FEEDBACK
   ---------------------------------------------------------- */

.jsr-interactive {
    isolation: isolate;
}

.jsr-interactive::before {
    content: "";

    position: absolute;

    left: var(--jsr-click-x, 50%);
    top: var(--jsr-click-y, 50%);

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(255,255,255,.30);

    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%,-50%)
        scale(0);

    z-index: -1;
}

.jsr-interactive.jsr-clicked::before {
    animation: jsrRipple .42s ease-out;
}

@keyframes jsrRipple {
    0% {
        opacity: .65;
        transform:
            translate(-50%,-50%)
            scale(0);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%,-50%)
            scale(24);
    }
}


/* ----------------------------------------------------------
   NETWORK — DADOS / VOZ / SEGURANCA
   ---------------------------------------------------------- */

.network-nodes span {
    position: relative;

    cursor: default;

    transition:
        transform .24s cubic-bezier(.22,.61,.36,1),
        color .24s ease,
        filter .24s ease;
}

.network-nodes span::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 18px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.18);

    transform:
        translate(-50%,-50%)
        scale(.55);

    opacity: 0;

    transition:
        transform .28s ease,
        opacity .28s ease;

    pointer-events: none;
}

.network-nodes span:hover,
.network-nodes span:focus-visible,
.network-nodes span.jsr-node-active {
    transform: translateY(-5px);
    filter: drop-shadow(0 7px 12px rgba(0,0,0,.14));
}

.network-nodes span:hover::before,
.network-nodes span:focus-visible::before,
.network-nodes span.jsr-node-active::before {
    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1.25);
}

.network-nodes span b {
    display: block;

    transition:
        letter-spacing .22s ease,
        transform .22s ease;
}

.network-nodes span:hover b,
.network-nodes span:focus-visible b {
    letter-spacing: .035em;
}


/* ----------------------------------------------------------
   CARD CENTRAL
   ---------------------------------------------------------- */

.network {
    transition:
        transform .30s cubic-bezier(.22,.61,.36,1),
        box-shadow .30s cubic-bezier(.22,.61,.36,1);
}

.network:hover {
    transform: translateY(-5px);

    box-shadow:
        0 30px 55px rgba(17,111,111,.18);
}

.hero-brand-lockup {
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.network:hover .hero-brand-lockup {
    transform:
        translate(-50%,-50%)
        scale(1.025) !important;
}


/* ----------------------------------------------------------
   LOGO DO CABECALHO
   ---------------------------------------------------------- */

.header .official-logo {
    transition:
        transform .30s cubic-bezier(.22,.61,.36,1),
        filter .30s ease;
}

.header .brand:hover .official-logo {
    transform: scale(1.035);
    filter: saturate(1.08);
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer .footer-image-brand img {
    transition:
        transform .28s ease,
        opacity .28s ease;
}

footer .footer-image-brand:hover img {
    transform: translateY(-2px);
    opacity: .94;
}

footer .footer-links-col a,
footer .footer-address-col a {
    transition:
        color .20s ease,
        transform .20s ease;
}

footer .footer-links-col a:hover,
footer .footer-address-col a:hover {
    transform: translateX(4px);
}


/* ----------------------------------------------------------
   FOCO VIA TECLADO
   ---------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.network-nodes span:focus-visible {
    outline: 2px solid var(--jsr-brand, #1aa6a6);
    outline-offset: 4px;
}


/* ----------------------------------------------------------
   REDUZ MOVIMENTO QUANDO SOLICITADO PELO SISTEMA
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .jsr-js body,
    .jsr-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

    .network:hover {
        transform: none;
    }

    .network-nodes span:hover {
        transform: none;
    }

    .button:hover,
    .header-contact:hover {
        transform: none;
    }
}



/* ==========================================================
   JSR MODERN — MOTION LAYER 2
   ========================================================== */


/* ----------------------------------------------------------
   BARRA DE PROGRESSO
   ---------------------------------------------------------- */

.jsr-scroll-progress {
    position: fixed;

    left: 0;
    top: 0;

    width: var(--jsr-progress, 0%);
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--jsr-brand, #1aa6a6),
            #6ee7e7
        );

    z-index: 100000;

    pointer-events: none;

    box-shadow:
        0 1px 7px rgba(26,166,166,.35);

    transition:
        width .08s linear;
}

/*
 * Quando a barra administrativa do WP está visível.
 */
body.admin-bar .jsr-scroll-progress {
    top: 32px;
}


/* ----------------------------------------------------------
   HEADER EM SCROLL
   ---------------------------------------------------------- */

.header {
    transition:
        padding .28s ease,
        box-shadow .28s ease,
        background-color .28s ease,
        backdrop-filter .28s ease;
}

.header.jsr-header-scrolled {
    position: sticky;

    top: 0;

    z-index: 9000;

    background:
        rgba(255,255,255,.93) !important;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 34px rgba(20,45,45,.08);
}

body.admin-bar
.header.jsr-header-scrolled {
    top: 32px;
}

.header.jsr-header-scrolled
.header-row {
    min-height: 72px !important;
}

.header.jsr-header-scrolled
.official-logo {
    transform:
        scale(.90);
}


/* ----------------------------------------------------------
   CARD CENTRAL — SPOTLIGHT
   ---------------------------------------------------------- */

.network {
    position: relative;

    transform-style:
        preserve-3d;

    transform:
        perspective(1100px)
        rotateX(var(--network-rx, 0deg))
        rotateY(var(--network-ry, 0deg));

    transition:
        transform .22s ease,
        box-shadow .28s ease;
}

.network::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius:
        inherit;

    background:
        radial-gradient(
            260px circle
            at var(--spot-x, 50%)
               var(--spot-y, 50%),

            rgba(255,255,255,.13),

            rgba(255,255,255,.045) 28%,

            transparent 68%
        );

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    transition:
        opacity .24s ease;
}

.network.jsr-network-pointer::before {
    opacity: 1;
}

/*
 * Conteúdo acima do spotlight.
 */
.network > * {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------------------------
   BOTAO MAGNETICO
   ---------------------------------------------------------- */

.button,
.header-contact {
    transform:
        translate(
            var(--magnet-x, 0),
            var(--magnet-y, 0)
        );

    transition:
        transform .18s ease,
        background-color .20s ease,
        box-shadow .22s ease;
}

.button.jsr-magnetic,
.header-contact.jsr-magnetic {
    transition:
        transform .06s linear,
        background-color .20s ease,
        box-shadow .22s ease;
}


/* ----------------------------------------------------------
   FOOTER LINKS
   ---------------------------------------------------------- */

.footer-links-col a {
    display: flex !important;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    max-width: 210px;
}

.jsr-footer-arrow {
    display: inline-block;

    opacity: 0;

    transform:
        translateX(-8px);

    color:
        var(--jsr-brand, #1aa6a6);

    transition:
        opacity .20s ease,
        transform .20s ease;
}

.footer-links-col a:hover
.jsr-footer-arrow {
    opacity: 1;

    transform:
        translateX(0);
}


/* ----------------------------------------------------------
   VOLTAR AO TOPO
   ---------------------------------------------------------- */

.jsr-back-top {
    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(255,255,255,.30);

    border-radius: 50%;

    background:
        var(--jsr-brand, #1aa6a6);

    color: #fff;

    font-size: 21px;

    cursor: pointer;

    z-index: 8000;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(14px)
        scale(.92);

    box-shadow:
        0 14px 32px
        rgba(0,0,0,.15);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        background-color .20s ease;
}

.jsr-back-top-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.jsr-back-top:hover {
    background:
        var(--jsr-brand-hover, #168f8f);

    transform:
        translateY(-4px)
        scale(1.04);
}

.jsr-back-top span {
    transition:
        transform .20s ease;
}

.jsr-back-top:hover span {
    transform:
        translateY(-3px);
}


/* ----------------------------------------------------------
   DETALHE SUTIL NOS ICONES DA NETWORK
   ---------------------------------------------------------- */

.network-nodes span {
    border-radius: 12px;
}

.network-nodes span:hover {
    text-shadow:
        0 0 15px
        rgba(255,255,255,.25);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 782px) {

    body.admin-bar
    .jsr-scroll-progress {
        top: 46px;
    }

    body.admin-bar
    .header.jsr-header-scrolled {
        top: 46px;
    }

    .network {
        transform:
            none !important;
    }

    .network::before {
        display: none;
    }

    .jsr-back-top {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;
    }
}


/* ----------------------------------------------------------
   ACESSIBILIDADE
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .network,
    .button,
    .header-contact {
        transform:
            none !important;
    }

    .network::before {
        display: none !important;
    }
}


/* ==========================================================
   JSR - HEADER TRANSPARENTE COM LOGO INTEGRADO
   ========================================================== */

.header .official-logo {
    opacity: 1;
    transition:
        opacity .28s ease,
        filter .28s ease,
        transform .28s ease;
}

/* estado durante a rolagem */
.header.jsr-header-scrolled {
    background: rgba(255,255,255,.84) !important;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/*
 * O próprio logo também participa da transparência,
 * em vez de continuar como um bloco visual sólido.
 */
.header.jsr-header-scrolled .official-logo {
    opacity: .74 !important;
    filter:
        saturate(.88)
        contrast(.96)
        brightness(1.02);
    transform: scale(.90);
}

/* ao passar o mouse, volta temporariamente à nitidez total */
.header.jsr-header-scrolled .brand:hover .official-logo {
    opacity: 1 !important;
    filter: none;
    transform: scale(.94);
}


/* ==========================================================
   JSR - cards sem numeracao + marca integrada ao header
   ========================================================== */

/* Card: seta permanece no canto, sem numero editorial */
.card-top {
    justify-content: flex-end !important;
}

/* Header flutuante */
.header.jsr-header-scrolled {
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

/*
 * Integra toda a marca ao estado translúcido.
 * O arquivo continua intacto no topo da pagina.
 */
.header.jsr-header-scrolled .brand {
    opacity: .72 !important;
    transition:
        opacity .28s ease,
        filter .28s ease,
        transform .28s ease;
}

.header.jsr-header-scrolled .brand .official-logo {
    opacity: 1 !important;
    filter: saturate(.82) contrast(.94) brightness(1.04) !important;
}

.header.jsr-header-scrolled .brand:hover {
    opacity: 1 !important;
}

.header.jsr-header-scrolled .brand:hover .official-logo {
    filter: none !important;
}


/* JSR - logo integrado ao header translucido */
.header.jsr-header-scrolled .brand {
    background: transparent !important;
    opacity: 1 !important;
}

.header.jsr-header-scrolled .brand .official-logo {
    opacity: .88 !important;
    mix-blend-mode: multiply !important;
    filter: saturate(.95) contrast(1.02) !important;
    transform: scale(.90) !important;

    transition:
        opacity .28s ease,
        filter .28s ease,
        transform .28s ease;
}

.header.jsr-header-scrolled .brand:hover .official-logo {
    opacity: 1 !important;
    mix-blend-mode: multiply !important;
    filter: saturate(1.05) contrast(1.02) !important;
    transform: scale(.94) !important;
}


/* ==========================================================
   JSR - HEADER COM LOGO TRANSPARENTE REAL
   ========================================================== */

.header .brand,
.header.jsr-header-scrolled .brand {
    background: transparent !important;
    opacity: 1 !important;
}

.header .official-logo,
.header.jsr-header-scrolled .official-logo {
    background: transparent !important;
    mix-blend-mode: normal !important;
}

.header.jsr-header-scrolled .official-logo {
    opacity: .72 !important;
    filter: saturate(.90) !important;
    transform: scale(.90) !important;
}

.header.jsr-header-scrolled .brand:hover .official-logo {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(.94) !important;
}


/* ==========================================================
   JSR - CONTATOS MODERNIZADOS
   ========================================================== */

.contact-links {
    display: grid !important;
    gap: 14px !important;
}

.contact-item {
    position: relative;

    display: grid !important;
    grid-template-columns: 44px 1fr auto;
    align-items: center;

    gap: 14px;

    padding: 17px 18px !important;

    border: 1px solid rgba(26,166,166,.18);
    border-radius: 14px;

    background: rgba(255,255,255,.72);

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform .24s cubic-bezier(.22,.61,.36,1),
        border-color .24s ease,
        box-shadow .24s ease,
        background-color .24s ease;
}

.contact-item::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(26,166,166,.08) 45%,
            transparent 72%
        );

    transform: translateX(-120%);

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1);

    pointer-events: none;
}

.contact-item:hover {
    transform: translateY(-4px);

    border-color: rgba(26,166,166,.42);

    background: #fff;

    box-shadow:
        0 16px 34px rgba(20,80,80,.10);
}

.contact-item:hover::before {
    transform: translateX(120%);
}

.contact-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        rgba(26,166,166,.10);

    color:
        var(--jsr-brand, #1aa6a6);

    transition:
        transform .24s ease,
        background-color .24s ease,
        color .24s ease;
}

.contact-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-item:hover .contact-icon {
    transform: scale(1.08) rotate(-3deg);

    background:
        var(--jsr-brand, #1aa6a6);

    color: #fff;
}

.contact-label {
    color: inherit;

    font-weight: 600;

    transition:
        color .20s ease,
        transform .20s ease;
}

.contact-item:hover .contact-label {
    color:
        var(--jsr-brand, #1aa6a6);

    transform:
        translateX(3px);
}

.contact-arrow {
    display: inline-block;

    font-size: 18px;

    color:
        var(--jsr-brand, #1aa6a6);

    transition:
        transform .22s ease;
}

.contact-item:hover .contact-arrow {
    transform:
        translate(3px,-3px);
}

/* WhatsApp ganha uma presença um pouco mais forte */
.contact-whatsapp {
    border-color:
        rgba(26,166,166,.28);
}

.contact-whatsapp .contact-icon {
    background:
        rgba(26,166,166,.14);
}

/* texto auxiliar */
.contact-helper {
    display: block;

    margin-top: 4px;

    color:
        rgba(40,44,46,.65);

    font-size: 13px;

    line-height: 1.5;
}

/* entrada animada da seção */
.contact-links .contact-item {
    opacity: 0;

    transform:
        translateY(16px);

    animation:
        jsrContactIn .55s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}

.contact-links .contact-item:nth-child(1) {
    animation-delay: .05s;
}

.contact-links .contact-item:nth-child(2) {
    animation-delay: .12s;
}

.contact-links .contact-item:nth-child(3) {
    animation-delay: .19s;
}

.contact-helper {
    opacity: 0;

    animation:
        jsrContactIn .55s
        cubic-bezier(.22,.61,.36,1)
        .26s forwards;
}

@keyframes jsrContactIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {

    .contact-item {
        grid-template-columns: 40px 1fr auto;

        padding: 15px 14px !important;
    }

    .contact-icon {
        width: 38px;
        height: 38px;
    }

    .contact-label {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact-links .contact-item,
    .contact-helper {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .contact-item::before {
        display: none;
    }
}


/* ==========================================================
   JSR - CONTATOS: EFEITO INVERTIDO
   Normal = forte / Hover = translúcido
   ========================================================== */

.contact-item {
    background: #ffffff !important;
    border-color: rgba(26,166,166,.35) !important;

    box-shadow:
        0 10px 26px rgba(20,80,80,.08) !important;

    opacity: 1 !important;
}

.contact-item .contact-icon {
    background: var(--jsr-brand, #1aa6a6) !important;
    color: #ffffff !important;
}

.contact-item .contact-label {
    color: var(--jsr-brand, #1aa6a6) !important;
}

.contact-item .contact-arrow {
    color: var(--jsr-brand, #1aa6a6) !important;
}

/* HOVER = suaviza / fica translúcido */
.contact-item:hover {
    background: rgba(255,255,255,.72) !important;

    border-color: rgba(255,255,255,.28) !important;

    box-shadow:
        0 8px 22px rgba(20,80,80,.05) !important;

    transform: translateY(-2px) !important;
}

.contact-item:hover .contact-icon {
    background: rgba(26,166,166,.12) !important;
    color: var(--jsr-brand, #1aa6a6) !important;

    transform: scale(1.03) !important;
}

.contact-item:hover .contact-label {
    color: rgba(255,255,255,.88) !important;
    transform: translateX(2px) !important;
}

.contact-item:hover .contact-arrow {
    color: rgba(255,255,255,.88) !important;
    transform: translate(2px,-2px) !important;
}