:root{--navy:#07132f;--navy2:#111f40;--blue:#2aabf3;--pink:#d900ba;--orange:#ffa000;--ink:#14203b;--muted:#667086;--bg:#f8fafd;--line:#e6eaf2;--radius:24px;--max:1190px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.container{width:min(var(--max),calc(100% - 64px));margin:auto}
.topbar{background:var(--navy);color:#edf2ff;font-size:12px;font-weight:600;letter-spacing:.035em}.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.topbar a{color:#fff}.topbar-dot{display:inline-block;width:6px;height:6px;margin:0 9px 1px;background:var(--blue);border-radius:50%}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7ebf2cc;box-shadow:0 8px 34px #0a18300a}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:96px}.logo{width:146px;flex:none}.logo img{width:100%;height:auto}.nav{display:flex;align-items:center;gap:35px}.nav a{color:#283450;font-size:14px;font-weight:650;transition:color .2s}.nav a:hover,.nav a.active{color:#078fd4}.right-nav{display:flex;align-items:center;gap:16px}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:16px 23px;border-radius:11px;background:var(--navy);border:1px solid var(--navy);color:#fff;font-weight:700;font-size:14px;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer}.button:hover{transform:translateY(-2px);box-shadow:0 12px 22px #09173c24;background:#132850}.button.secondary{background:transparent;color:var(--navy);border-color:#cbd4e2}.button.secondary:hover{background:#fff}.button.white{background:white;color:var(--navy);border-color:white}.button.small{padding:13px 18px;font-size:13px}.button .arrow{font-size:20px;line-height:0}.hamburger{display:none;border:0;background:transparent;padding:9px;cursor:pointer}.hamburger span{display:block;width:24px;height:2px;margin:5px 0;background:var(--navy);border-radius:2px}
.hero{position:relative;overflow:hidden;background:linear-gradient(122deg,#f8fbff 0%,#f1f7ff 68%,#fdfbff 100%);border-bottom:1px solid #e7eef8}.hero:before{content:'';position:absolute;width:570px;height:570px;right:-230px;top:-220px;border-radius:50%;background:radial-gradient(circle,#c9e9ff82 0%,transparent 68%)}.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:38px;min-height:590px;padding:66px 0 75px;position:relative}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#1686c4;text-transform:uppercase;font-weight:800;font-size:12px;letter-spacing:.14em}.eyebrow:before{content:'';display:block;background:var(--pink);width:20px;height:3px;border-radius:3px}.hero h1{font-size:clamp(40px,4.5vw,65px);line-height:1.095;letter-spacing:-.05em;margin:25px 0 21px;font-weight:800;color:var(--navy)}.hero h1 .accent{color:#18a7ed}.hero p{max-width:540px;font-size:17px;color:#637189;line-height:1.78;margin:0 0 31px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.hero-proof{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:35px;font-size:12px;font-weight:700;color:#66758e}.hero-proof span{display:inline-flex;align-items:center;gap:8px}.tiny-check{width:19px;height:19px;background:#d9f4e7;color:#07915d;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900}
.hero-art{min-height:470px;position:relative;display:flex;align-items:center;justify-content:center}.art-circle{position:absolute;inset:30px 0 12px 29px;border-radius:50%;background:radial-gradient(circle at 48% 42%,#e3f3ff 0%,#d7eafb 62%,#c4def4 100%);box-shadow:inset 0 0 0 27px #fff7}.paper-stack{width:285px;height:358px;position:relative;transform:rotate(-7deg);filter:drop-shadow(1px 25px 28px #19294d2e)}.paper{position:absolute;border-radius:10px;box-shadow:0 8px 12px #091f3c14;border:8px solid #fff}.paper.pink{inset:2px 14px 52px 4px;background:linear-gradient(135deg,#f922d3,#c902ae);transform:rotate(-14deg)}.paper.orange{inset:0px 3px 53px 16px;background:#ff9d00;transform:rotate(15deg)}.paper.blue{inset:13px 6px 34px 2px;background:linear-gradient(125deg,#42b6ff,#059be7);transform:rotate(5deg)}.paper.front{inset:20px 13px 12px 0;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(0deg);overflow:hidden}.paper.front:after{content:'';position:absolute;right:-2px;bottom:-2px;width:105px;height:105px;background:linear-gradient(135deg,#fff 1%,#d4e0e8 68%,#a5b5bc);clip-path:polygon(0 100%,100% 0,100% 100%);border-radius:0 0 6px}.paper-front-caption{color:#fff;font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;opacity:.8;margin-bottom:9px}.paper-front-title{color:white;font-size:39px;line-height:1.05;font-weight:900;letter-spacing:-.05em}.float-card{position:absolute;z-index:3;background:#fff;border:1px solid #e9eff8;box-shadow:0 17px 36px #09172a1c;border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;color:var(--navy)}.float-card.f1{top:57px;right:-5px;transform:rotate(5deg)}.float-card.f2{bottom:51px;left:3px;transform:rotate(-5deg)}.float-dot{width:18px;height:18px;border-radius:50%;background:var(--pink);box-shadow:inset 0 0 0 5px #fff7}.float-card.f2 .float-dot{background:var(--orange)}
.stats-bar{border-bottom:1px solid var(--line);background:white}.stats-inner{display:grid;grid-template-columns:repeat(3,1fr);padding:30px 0}.stat{display:flex;align-items:center;gap:17px;padding:7px 28px;border-right:1px solid var(--line)}.stat:first-child{padding-left:0}.stat:last-child{border:0}.stat-ico{width:49px;height:49px;background:#ebf7ff;color:#0d9ddb;border-radius:15px;display:flex;justify-content:center;align-items:center;font-size:23px;font-weight:800}.stat:nth-child(2) .stat-ico{background:#fff2e0;color:var(--orange)}.stat:nth-child(3) .stat-ico{background:#fff0fc;color:var(--pink)}.stat strong{display:block;color:var(--navy);font-size:14px;margin-bottom:5px}.stat small{color:var(--muted);font-size:12px}
section.section{padding:98px 0}.section.bg{background:var(--bg)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:37px}.section-head .copy{max-width:660px}.section h2,.section-head h2{color:var(--navy);font-size:clamp(30px,3.3vw,43px);font-weight:800;line-height:1.2;letter-spacing:-.035em;margin:14px 0 10px}.section-head p,.section-lead{color:var(--muted);line-height:1.75;font-size:15px;margin:0}.text-link{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:#078dd0;font-weight:800;white-space:nowrap}.text-link:hover{text-decoration:underline}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{display:block;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white;transition:transform .22s,box-shadow .22s}.product-card:hover{transform:translateY(-5px);box-shadow:0 20px 35px #16244317}.product-image{height:190px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.product-image.photographic{background:#e7f4ff}.product-image.adhesive{background:#fff1fa}.product-image.colorful{background:#fff1df}.product-image.glitter{background:#f5ecff}.product-image.lamicote{background:#e8f7ef}.product-image.special{background:#edf2fa}.deck{position:relative;width:118px;height:137px;filter:drop-shadow(0 10px 12px #19314b25);transform:rotate(-8deg)}.deck:before,.deck:after,.deck i{content:'';position:absolute;border-radius:5px;box-shadow:0 3px 8px #192a4910}.deck:before{inset:8px -12px -4px 15px;transform:rotate(16deg);background:#fff}.deck:after{inset:4px -6px -2px 6px;transform:rotate(7deg);background:#68bcf8}.deck i{inset:0 0 0 0;background:var(--navy);border:5px solid white;display:flex;align-items:end;justify-content:start}.deck i:before{content:'ON MIX';position:absolute;left:12px;top:17px;color:#fff;font-size:10px;letter-spacing:.14em;font-style:normal;font-weight:800}.deck i:after{content:'';position:absolute;right:0;bottom:0;width:46px;height:46px;background:#e9edf4;clip-path:polygon(0 100%,100% 0,100% 100%)}.deck.photo:after{background:#19a5f4}.deck.adh:after{background:#ef3ba6}.deck.adh i{background:#fc61a5}.deck.colors:after{background:#e80aba}.deck.colors i{background:linear-gradient(135deg,#03a9f4 33%,#f8c42c 33%,#f8c42c 67%,#ed2ab7 67%)}.deck.glit:after{background:#ba69e8}.deck.glit i{background:radial-gradient(circle at 30% 30%,#f3d8ff 1px,transparent 3px),radial-gradient(circle at 70% 60%,#fff 1px,transparent 3px),linear-gradient(125deg,#c66df1,#6f37d1);background-size:17px 17px,26px 26px,auto}.deck.lami:after{background:#ebc769}.deck.lami i{background:linear-gradient(128deg,#f0cc72,#fff7c9 44%,#cfab51)}.deck.spec:after{background:#9db4ce}.deck.spec i{background:linear-gradient(130deg,#fff,#c5cfde)}.deck.spec i:before{color:var(--navy)}.prod-body{padding:25px}.prod-body h3{font-size:19px;margin:0 0 9px;color:var(--navy);letter-spacing:-.025em}.prod-body p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 19px;min-height:43px}.prod-body span{display:inline-flex;align-items:center;gap:6px;color:#058acb;font-size:13px;font-weight:800}.prod-body span b{font-size:19px;font-weight:400}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:center}.about-art{height:430px;position:relative;background:#eaf5fe;border-radius:26px;overflow:hidden}.about-art:after{content:'';position:absolute;width:260px;height:260px;top:-115px;left:-80px;background:#cce9ff;border-radius:50%}.abstract-paper{position:absolute;width:260px;height:315px;left:22%;top:14%;border-radius:13px;background:#fff;box-shadow:0 18px 25px #13244d23;transform:rotate(-10deg);overflow:hidden}.abstract-paper:after{content:'';position:absolute;inset:30px;background:var(--navy);border-radius:6px}.abstract-paper.one{left:22%;transform:rotate(-16deg);background:#f5b500}.abstract-paper.two{left:30%;top:12%;transform:rotate(2deg);background:#eb10bb}.abstract-paper.three{left:37%;top:13%;transform:rotate(13deg);background:#38b5fb}.abstract-paper.three:after{background:#ffffff}.about-badge{position:absolute;right:22px;bottom:22px;background:#fff;box-shadow:0 12px 25px #102d511c;border-radius:15px;padding:20px 23px;z-index:3;color:var(--navy);font-size:13px;line-height:1.55;font-weight:800}.about-badge span{color:#05a1ea}.about-copy h2{margin-top:13px}.about-copy p{color:var(--muted);line-height:1.9;margin:20px 0;font-size:15px}.about-point{display:flex;align-items:center;gap:13px;margin:17px 0;font-size:14px;font-weight:700;color:#32415e}.about-point:before{content:'✓';width:22px;height:22px;border-radius:50%;background:#e4f7ee;color:#1aaf77;display:flex;align-items:center;justify-content:center;flex:none}
.brand-band{border-radius:23px;background:#101d3b;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:40px 49px;position:relative;overflow:hidden}.brand-band:after{content:'';position:absolute;right:200px;top:-100px;width:250px;height:250px;border:50px solid #ffffff05;border-radius:50%}.brand-band .eyebrow{color:#66c7ff}.brand-band h3{margin:13px 0 4px;font-size:26px;letter-spacing:-.03em}.brand-band p{margin:0;color:#bbcae4;font-size:13px}.brand-word{font-size:clamp(28px,3.8vw,52px);font-weight:950;letter-spacing:-.055em;color:white;white-space:nowrap;z-index:2}.brand-word .brand-swoosh{color:var(--orange)}
.area-section{background:linear-gradient(120deg,#f2f9ff,#fff9fc)}.area-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.area-graphic{min-height:260px;display:flex;align-items:center;justify-content:center}.rio-blob{width:280px;height:230px;background:#d2ecff;border-radius:41% 59% 52% 48%/57% 41% 59% 43%;display:grid;place-items:center;transform:rotate(-13deg);box-shadow:0 0 0 24px #e9f5ff}.rio-pin{width:97px;height:97px;background:white;border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:48px;transform:rotate(13deg);box-shadow:0 9px 24px #2049781a}
.cta{background:var(--navy);color:white;padding:75px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:clamp(29px,3vw,43px);margin:0 0 15px;letter-spacing:-.035em;max-width:590px}.cta p{margin:0;color:#b9c7e1;font-size:15px;line-height:1.7}.cta-actions{display:flex;gap:12px;flex-wrap:wrap}.cta .button.secondary{border-color:#455371;color:white}.cta .button.secondary:hover{background:#ffffff16}
.footer{padding:43px 0 24px;background:#f7f9fc;color:#58677d}.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:30px;padding-bottom:36px}.footer-logo{max-width:185px;margin-bottom:18px}.footer p{max-width:380px;font-size:13px;line-height:1.7}.footer h4{margin:14px 0 18px;color:var(--navy);font-size:14px}.footer a:not(.footer-logo){display:block;font-size:13px;margin:12px 0}.footer a:hover{color:#0a9ee6}.footer-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;gap:15px}
.page-head{background:linear-gradient(125deg,#f2f9ff,#fefaff);padding:76px 0 66px;text-align:center}.page-head h1{color:var(--navy);font-size:clamp(36px,4vw,55px);letter-spacing:-.045em;margin:17px 0}.page-head p{color:var(--muted);max-width:665px;margin:0 auto;line-height:1.8;font-size:16px}.page-head .eyebrow:before{display:none}.categories-directory{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}.category-chip{border:1px solid var(--line);padding:12px 17px;border-radius:30px;font-size:13px;font-weight:700;background:#fff;color:#53617a;cursor:pointer;transition:.2s}.category-chip:hover,.category-chip.selected{background:var(--navy);color:white;border-color:var(--navy)}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.catalog-card{border:1px solid var(--line);border-radius:20px;padding:27px;background:#fff;transition:box-shadow .2s}.catalog-card:hover{box-shadow:0 12px 34px #14254312}.catalog-card-top{display:flex;align-items:center;gap:14px;margin-bottom:19px}.catalog-dot{width:49px;height:49px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;background:#27acf1}.catalog-card:nth-child(2) .catalog-dot{background:#ed63a8}.catalog-card:nth-child(3) .catalog-dot{background:#f3aa19}.catalog-card:nth-child(4) .catalog-dot{background:#a968df}.catalog-card:nth-child(5) .catalog-dot{background:#6cbba0}.catalog-card:nth-child(6) .catalog-dot{background:#879dc2}.catalog-card h2{font-size:18px;margin:0 0 5px;color:var(--navy)}.catalog-card small{font-size:12px;color:#8c97a7}.catalog-card ul{padding-left:16px;color:#52627a;font-size:13px;line-height:1.85;min-height:135px}.catalog-card li{padding-left:4px;margin-bottom:4px}.catalog-note{margin-top:26px;color:#66738d;font-size:13px;line-height:1.7}.hidden-category{display:none}.wa-floating{position:fixed;bottom:22px;right:23px;z-index:49;width:55px;height:55px;display:grid;place-items:center;border-radius:50%;background:#24c86d;color:#fff;box-shadow:0 9px 25px #18a65755;transition:transform .2s}.wa-floating:hover{transform:translateY(-3px)}.wa-floating svg{width:29px;height:29px;fill:white}
@media(max-width:1020px){.container{width:min(var(--max),calc(100% - 42px))}.nav{gap:21px}.hero-inner{min-height:550px;gap:15px}.hero h1{font-size:47px}.hero-art{transform:scale(.9)}.about-grid{gap:38px}.catalog-grid,.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar{font-size:10px}.topbar .desktop-top{display:none}.header-inner{min-height:79px}.logo{width:126px}.hamburger{display:block}.right-nav .button{display:none}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:18px 21px 25px;box-shadow:0 20px 30px #16254315;flex-direction:column;gap:0;align-items:stretch}.nav.open{display:flex}.nav a{padding:14px;border-bottom:1px solid var(--line)}.hero-inner{display:flex;flex-direction:column;padding:59px 0 53px;align-items:stretch;min-height:0;gap:11px}.hero h1{font-size:clamp(40px,9vw,56px)}.hero p{font-size:15px}.hero-art{transform:none;min-height:380px;max-width:430px;width:100%;align-self:center}.art-circle{inset:18px 8px 8px}.paper-stack{transform:scale(.79) rotate(-7deg)}.float-card.f1{right:8px;top:45px}.float-card.f2{left:13px;bottom:29px}.hero-proof{gap:13px}.stats-inner{display:block;padding:10px 0}.stat{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}.stat:last-child{border:0}section.section{padding:64px 0}.section-head{display:block}.section-head .text-link{margin-top:17px}.product-grid{grid-template-columns:repeat(2,1fr);gap:13px}.product-image{height:160px}.prod-body{padding:20px}.prod-body h3{font-size:17px}.prod-body p{min-height:0}.about-grid,.area-inner{grid-template-columns:1fr;gap:35px}.about-art{height:340px}.brand-band{flex-direction:column;align-items:flex-start;padding:30px}.cta-inner{display:block}.cta-actions{margin-top:26px}.footer-top{grid-template-columns:1fr 1fr}.footer-about{grid-column:span 2}.catalog-grid{grid-template-columns:repeat(2,1fr)}.page-head{padding:62px 0}.footer-bottom{flex-direction:column}}
@media(max-width:500px){.container{width:calc(100% - 34px)}.hero h1{font-size:42px}.button{padding:14px 19px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-art{min-height:310px}.paper-stack{transform:scale(.63) rotate(-7deg)}.float-card{padding:10px 11px;font-size:10px}.float-card.f1{right:-1px;top:18px}.float-card.f2{left:2px;bottom:18px}.product-grid,.catalog-grid{grid-template-columns:1fr}.product-image{height:170px}.prod-body p{min-height:0}.section-head h2,.section h2{font-size:32px}.abstract-paper{transform:scale(.75) rotate(-10deg)}.about-art{height:290px}.about-badge{font-size:11px;padding:14px}.brand-band h3{font-size:23px}.brand-word{font-size:38px}.cta-actions{flex-direction:column}.footer-top{grid-template-columns:1fr 1fr;gap:15px}.footer-about{grid-column:span 2}.wa-floating{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.catalog-card{scroll-margin-top:145px}


/* ==================================
   ON MIX - MELHORIA 01
   CABECALHO PROFISSIONAL
================================== */

.header {
    background: #ffffff;
    border-bottom: none;
    box-shadow: 0 6px 22px rgba(7, 19, 47, 0.08);
}

.header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #099fe8,
        #ed24bc,
        #fcae08
    );
}

.header-inner {
    min-height: 104px;
}

.logo {
    width: 165px;
}

@media (max-width: 1020px) {
    .logo {
        width: 145px;
    }
}

@media (max-width: 760px) {
    .header-inner {
        min-height: 78px;
    }

    .logo {
        width: 130px;
    }
}


/* =====================================
   ON MIX - MELHORIA 02
   BANNER PRINCIPAL PROFISSIONAL
===================================== */

.hero {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(42, 171, 243, 0.28),
            transparent 45%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(217, 0, 186, 0.14),
            transparent 45%
        ),
        linear-gradient(
            120deg,
            #07132f 0%,
            #102b56 65%,
            #173b6d 100%
        );
    border-bottom: none;
}

.hero::before {
    background: radial-gradient(
        circle,
        rgba(42, 171, 243, 0.18),
        transparent 70%
    );
}

.hero-inner {
    min-height: 620px;
    padding: 80px 0;
}

.hero h1 {
    color: #ffffff;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.hero h1 .accent {
    color: #52c8ff;
}

.hero .eyebrow {
    color: #9fe4ff;
}

.hero p {
    color: #d3def0;
    font-size: 18px;
    line-height: 1.8;
}

.hero .button {
    background: #ffffff;
    color: #07132f;
    border-color: #ffffff;
}

.hero .button:hover {
    background: #e6f6ff;
}

.hero .button.secondary {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
}

.hero .button.secondary:hover {
    background: rgba(255,255,255,0.16);
}

.hero .hero-proof {
    color: #d3def0;
}

.hero .art-circle {
    background: radial-gradient(
        circle,
        #e4f4ff 0%,
        #a1c9ed 65%,
        #5a91c7 100%
    );
}

/* Ajuste para celulares */
@media (max-width: 760px) {
    .hero-inner {
        min-height: auto;
        padding: 58px 0 50px;
    }

    .hero p {
        font-size: 15px;
    }
}


/* =====================================
   ON MIX - MELHORIA 03
   CATEGORIAS DE PRODUTOS
===================================== */

.product-grid {
    gap: 24px;
}

.product-card {
    border: 1px solid #e3eaf4;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(7,19,47,0.06);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(7,19,47,0.15);
    border-color: #2aabf3;
}

.product-image {
    height: 215px;
    overflow: hidden;
}

.product-image .deck {
    transition: transform 0.35s ease;
}

.product-card:hover .deck {
    transform: rotate(-4deg) scale(1.08);
}

.prod-body {
    padding: 27px;
}

.prod-body h3 {
    font-size: 20px;
    font-weight: 800;
    color: #07132f;
}

.prod-body span {
    color: #078fd4;
    font-weight: 800;
}

.product-card:hover .prod-body span {
    color: #d900ba;
}

/* Ajuste para celulares */

@media (max-width: 760px) {
    .product-image {
        height: 190px;
    }

    .prod-body {
        padding: 22px;
    }
}


/* =====================================
   ON MIX - MELHORIA 04
   FOTOGRAFIAS REAIS DOS PRODUTOS
===================================== */

.product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.product-image.photographic {
    background: #ffffff;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* =====================================
   ON MIX - MELHORIA 07
   FUNDO BRANCO COLOR PLUS
===================================== */

.product-image.colorful {
    background: #ffffff !important;
    background-image: none !important;
}

.product-image.colorful img {
    background: #ffffff;
    object-fit: contain;
    padding: 5px;
}

/* =====================================
   ON MIX - MELHORIA 08
   GLITTER IMPRIMIVEL
===================================== */

.product-image.glitter {
    background: #ffffff !important;
    background-image: none !important;
}

.product-image.glitter img {
    background: #ffffff;
    object-fit: contain;
    padding: 5px;
}


/* =====================================
   ON MIX - MELHORIA 09
   PADRONIZACAO DAS FOTOGRAFIAS
===================================== */

.product-image.photographic,
.product-image.adhesive,
.product-image.colorful,
.product-image.glitter {
    height: 260px;
    background: #ffffff !important;
    background-image: none !important;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

/* Versao para celular */

@media (max-width: 760px) {
    .product-image.photographic,
    .product-image.adhesive,
    .product-image.colorful,
    .product-image.glitter {
        height: 220px;
    }
}

/* =====================================
   ON MIX - MELHORIA 10
   LAMICOTE
===================================== */

.product-image.lamicote {
    height: 260px;
    background: #ffffff !important;
    background-image: none !important;
}

.product-image.lamicote img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .product-image.lamicote {
        height: 220px;
    }
}


/* =====================================
   ON MIX - MELHORIA 11
   PAPEIS ESPECIAIS
===================================== */

.product-image.special {
    height: 260px;
    background: #ffffff !important;
    background-image: none !important;
}

.product-image.special img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .product-image.special {
        height: 220px;
    }
}


/* ON MIX - CATALOGO DE PAPEIS ESPECIAIS */

.catalog-card#especiais {
    grid-column: 1 / -1;
}

.especiais-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 25px 0;
}

.especial-produto {
    background: white;
    border: 1px solid #e3eaf4;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
}

.especial-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(7,19,47,0.12);
}

.especial-foto {
    position: relative;
    height: 175px;
    background: #f5f7fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.especial-foto span {
    color: #718096;
    font-size: 13px;
}

.especial-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.especial-produto h3 {
    font-size: 16px;
    color: #07132f;
    margin: 15px 0 8px;
}

.especial-produto p {
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 900px) {
    .especiais-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .especiais-grid {
        grid-template-columns: 1fr;
    }
}


/* ON MIX - CATALOGO FOTOGRAFICO */

.catalog-card#fotograficos {
    grid-column: 1 / -1;
}

.fotograficos-grid {
    grid-template-columns: minmax(0, 270px);
}

@media (max-width: 550px) {
    .fotograficos-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================
   ON MIX - MELHORIA 14
   CATALOGO DE PAPEIS ADESIVOS
===================================== */

.catalog-card#adesivos {
    grid-column: 1 / -1;
}

.adesivos-grid {
    grid-template-columns: minmax(0, 270px);
}

@media (max-width: 550px) {
    .adesivos-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================
   ON MIX - CORRECAO 19
   COLOR PLUS E NEON EM TELA INTEIRA
===================================== */

/* Categoria ocupando toda a largura */
.catalog-grid > article#coloridos {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

/* Tres produtos por linha */
#coloridos .coloridos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px;
    width: 100%;
}

/* Cartoes maiores */
#coloridos .especial-produto {
    width: 100%;
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* Area das fotografias */
#coloridos .especial-foto {
    height: 290px;
    background: #ffffff;
}

#coloridos .especial-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
}

/* Nomes dos produtos */
#coloridos .especial-produto h3 {
    font-size: 18px;
    line-height: 1.4;
}

/* Tablet */
@media (max-width: 900px) {
    #coloridos .coloridos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Celular */
@media (max-width: 550px) {
    #coloridos .coloridos-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================
   ON MIX - MELHORIA 20
   CATALOGO PAPEIS GLITTER
===================================== */

.catalog-grid > article#glitter {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
}

#glitter .glitter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 28px;
}

#glitter .especial-produto {
    width: 100%;
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
}

#glitter .especial-foto {
    height: 260px;
    background: #ffffff;
}

#glitter .especial-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

#glitter .especial-produto h3 {
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
}

#glitter .especial-produto p {
    font-size: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    #glitter .glitter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    #glitter .glitter-grid {
        grid-template-columns: 1fr;
    }

    #glitter .especial-foto {
        height: 220px;
    }
}


/* =====================================
   ON MIX - MELHORIA 21
   CATALOGO LAMICOTE
===================================== */

/* Categoria ocupa toda a largura */

.catalog-grid > article#lamicote {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
}

/* Tres produtos por linha */

#lamicote .lamicote-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 28px;
}

/* Cartoes */

#lamicote .especial-produto {
    width: 100%;
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
}

/* Fotografias */

#lamicote .especial-foto {
    height: 270px;
    background: #ffffff;
}

#lamicote .especial-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

/* Nomes e especificacoes */

#lamicote .especial-produto h3 {
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
}

#lamicote .especial-produto p {
    font-size: 14px;
    text-align: center;
}

/* Tablets */

@media (max-width: 900px) {
    #lamicote .lamicote-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Celulares */

@media (max-width: 550px) {
    #lamicote .lamicote-grid {
        grid-template-columns: 1fr;
    }

    #lamicote .especial-foto {
        height: 220px;
    }
}


/* =====================================
   ON MIX - MELHORIA 23
   CATALOGO PAPEIS METALIZADOS
===================================== */

.catalog-grid > article#metalizados {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
}

#metalizados .metalizados-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 25px 0;
}

#metalizados .especial-produto {
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
}

#metalizados .especial-foto {
    height: 270px;
    background: #ffffff;
}

#metalizados .especial-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

#metalizados .especial-produto h3 {
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
}

#metalizados .especial-produto p {
    font-size: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    #metalizados .metalizados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    #metalizados .metalizados-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================
   ON MIX - MELHORIA 25
   CARROSSEL DE PRODUTOS EM DESTAQUE
===================================== */

/* Oculta os cartoes antigos da INDEX */

#produtos .product-grid {
    display: none !important;
}

/* Area do carrossel */

#produtos .destaques-carrossel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 0;
}

/* Organiza os produtos lado a lado */

#produtos .destaques-faixa {
    display: flex;
    gap: 24px;
    padding: 12px 2px 25px;
}

/* Cartoes individuais */

#produtos .destaque-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e3eaf4;
    border-radius: 20px;

    padding: 24px;
    text-align: center;
    text-decoration: none;

    scroll-snap-align: start;
    box-shadow: 0 8px 25px rgba(7, 19, 47, 0.06);

    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* Efeito ao passar o mouse */

#produtos .destaque-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(7, 19, 47, 0.14);
}

/* Fotografias dos produtos */

#produtos .destaque-card img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* Nome do produto */

#produtos .destaque-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: #07132f;
    margin: 12px 0;
    line-height: 1.4;
}

/* Informacoes tecnicas */

#produtos .destaque-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Barra de rolagem */

#produtos .destaques-carrossel::-webkit-scrollbar {
    height: 6px;
}

#produtos .destaques-carrossel::-webkit-scrollbar-thumb {
    background: #c7d5e8;
    border-radius: 10px;
}

/* Tablets */

@media (max-width: 900px) {
    #produtos .destaque-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

/* Celulares */

@media (max-width: 600px) {
    #produtos .destaque-card {
        flex-basis: 100%;
    }

    #produtos .destaque-card img {
        height: 220px;
    }
}


/* =====================================
   ON MIX - MELHORIA 26
   SETAS DO CARROSSEL
===================================== */

/* Area que contem o carrossel */

#produtos .destaques-area {
    position: relative;
    width: 100%;
    padding: 0 22px;
    box-sizing: border-box;
}

/* Aparencia das setas */

#produtos .destaque-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    background: #07132f;
    color: #ffffff;

    border: 2px solid #ffffff;
    border-radius: 50%;

    font-size: 22px;
    font-weight: bold;

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

    cursor: pointer;
    z-index: 10;

    box-shadow: 0 5px 18px rgba(0,0,0,0.2);

    transition: background 0.3s ease,
                box-shadow 0.3s ease;
}

/* Seta esquerda */

#produtos .destaque-seta--esquerda {
    left: 0;
}

/* Seta direita */

#produtos .destaque-seta--direita {
    right: 0;
}

/* Efeito ao passar o mouse */

#produtos .destaque-seta:hover {
    background: #099fe8;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

#produtos .destaque-seta:focus-visible {
    outline: 3px solid #099fe8;
    outline-offset: 3px;
}

/* Ajuste para celulares */

@media (max-width: 600px) {

    #produtos .destaques-area {
        padding: 0 15px;
    }

    #produtos .destaque-seta {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}



/* =====================================
   ON MIX - MELHORIA 27
   SOLUCOES PARA O SEU NEGOCIO
===================================== */

.solucoes-section {
    background: #f5f8fc;
    padding: 90px 0;
}

.solucoes-cabecalho {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 45px;
}

.solucoes-cabecalho .eyebrow {
    color: #099fe8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.solucoes-cabecalho h2 {
    color: #07132f;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.2;
    margin: 15px 0;
}

.solucoes-cabecalho p {
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

/* Grade de quatro cartoes */

.solucoes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* Aparencia dos cartoes */

.solucao-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px 24px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.solucao-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(7, 19, 47, 0.12);
}

/* Numeros coloridos */

.solucao-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 16px;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 25px;
    background: #e8f6ff;
    color: #099fe8;
}

.solucao-card:nth-child(2) .solucao-numero {
    background: #fff0fb;
    color: #d900ba;
}

.solucao-card:nth-child(3) .solucao-numero {
    background: #fff4dd;
    color: #d68b00;
}

.solucao-card:nth-child(4) .solucao-numero {
    background: #e9f7f2;
    color: #219b77;
}

/* Titulos */

.solucao-card h3 {
    color: #07132f;
    font-size: 19px;
    line-height: 1.4;
    margin: 0 0 15px;
}

/* Descricoes */

.solucao-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 25px;
    flex: 1;
}

/* Links */

.solucao-card a {
    color: #078fd4;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
}

.solucao-card a:hover {
    color: #d900ba;
}

/* Tablets */

@media (max-width: 1000px) {
    .solucoes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Celulares */

@media (max-width: 600px) {
    .solucoes-section {
        padding: 55px 0;
    }

    .solucoes-grid {
        grid-template-columns: 1fr;
    }

    .solucao-card {
        padding: 25px;
    }

    .solucoes-cabecalho p {
        font-size: 15px;
    }
}

.solucoes-section {
  background: #f5f7fb;
}

.solucoes-cabecalho {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.solucoes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.solucao-card {
  background: #ffffff;
  border: 1px solid #e3e8f2;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 26, 74, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solucao-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(10, 26, 74, 0.10);
}

.solucao-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.solucao-conteudo {
  padding: 22px;
}

.solucao-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.35rem;
  margin-bottom: 16px;
  background: #eef4ff;
  color: #0c7bdc;
}

.solucao-card:nth-child(2) .solucao-numero {
  background: #f8ebfb;
  color: #d624c8;
}

.solucao-card:nth-child(3) .solucao-numero {
  background: #fff3dc;
  color: #d69200;
}

.solucao-card:nth-child(4) .solucao-numero {
  background: #e9f7f0;
  color: #15a06b;
}

.solucao-card h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #07153a;
}

.solucao-card p {
  margin: 0 0 18px;
  color: #667699;
  line-height: 1.7;
}

.solucao-card a {
  color: #0c7bdc;
  font-weight: 700;
  text-decoration: none;
}

.solucao-card a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .solucoes-grid {
    grid-template-columns: 1fr;
  }

  .solucao-img {
    height: 220px;
  }
}


/* ON MIX - AJUSTE FINAL MELHORIA 27 */

#solucoes .solucao-card {
    padding: 0;
    overflow: hidden;
}

#solucoes .solucao-conteudo {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#solucoes .solucao-conteudo a {
    margin-top: auto;
}


/* =====================================
   ON MIX - MELHORIA 29
   SECAO MARCAS - OFF PAPER
===================================== */

#marcas {
    background: #ffffff;
    padding: 90px 0;
}

#marcas .marca-onmix {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 65px;
}

/* Apresentacao institucional */

#marcas .marca-texto h2 {
    color: #07132f;
    font-size: clamp(30px, 3.5vw, 45px);
    line-height: 1.2;
    margin: 15px 0 25px;
}

#marcas .marca-texto p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

#marcas .marca-texto .button {
    margin-top: 15px;
}

/* Area da logomarca */

#marcas .marca-destaque {
    background: #f5f8fc;
    border: 1px solid #e3eaf4;
    border-radius: 25px;
    padding: 50px 35px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 320px;
}

/* Selo superior */

#marcas .marca-selo {
    background: #e8f6ff;
    color: #078fd4;
    border-radius: 50px;
    padding: 9px 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
}

/* Logo OFF PAPER */

#marcas .marca-destaque img {
    display: block;
    width: 100%;
    max-width: 310px;
    max-height: 210px;
    object-fit: contain;
    margin: 0 auto 25px;
}

/* Nome da marca */

#marcas .marca-destaque p {
    color: #07132f;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

/* Tablets e celulares */

@media (max-width: 900px) {
    #marcas .marca-onmix {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    #marcas {
        padding: 60px 0;
    }
}

@media (max-width: 600px) {
    #marcas .marca-destaque {
        padding: 35px 20px;
        min-height: 260px;
    }

    #marcas .marca-destaque img {
        max-width: 230px;
    }
}


/* =====================================
   ON MIX - MELHORIA 30
   RODAPE INSTITUCIONAL
===================================== */

.footer.onmix-footer {
    background: #f5f6f8;
    color: #07132f;
    padding: 0;
}

/* Quatro colunas */

.onmix-footer .footer-top {
    display: grid;
    grid-template-columns:
        1.35fr 1fr 1.2fr 0.85fr;
    gap: 45px;
    align-items: start;
    padding: 70px 0;
}

.onmix-footer .footer-top > div {
    min-width: 0;
}

/* Logomarca */

.onmix-footer .footer-logo img {
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Descricao da empresa */

.onmix-footer .footer-about p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
    margin: 15px 0;
}

/* Titulos */

.onmix-footer h4 {
    color: #07132f;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 23px;
}

/* Links institucionais */

.onmix-footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.onmix-footer .footer-links h4 {
    margin-bottom: 11px;
}

.onmix-footer a {
    color: #526078;
    text-decoration: none;
    transition: color 0.2s ease;
}

.onmix-footer a:hover {
    color: #099fe8;
}

/* Informacoes de contato */

.onmix-footer .footer-contato p {
    color: #526078;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.onmix-footer .footer-contato strong {
    display: block;
    color: #07132f;
    margin-bottom: 5px;
}

.onmix-footer .footer-contato a {
    overflow-wrap: anywhere;
}

/* Faixa inferior azul-marinho */

.footer.onmix-footer .footer-bottom {
    background: #07132f;
    color: #ffffff;
    padding: 0;
    border: 0;
}

.onmix-footer .footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 23px 0;
}

.onmix-footer .footer-bottom span {
    color: #ffffff;
    font-size: 13px;
}

/* Tablets */

@media (max-width: 1000px) {
    .onmix-footer .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }
}

/* Celulares */

@media (max-width: 600px) {
    .onmix-footer .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 50px 0;
    }

    .onmix-footer .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}


/* =====================================
   ON MIX - MELHORIA 32
   LINHA COLORIDA ACIMA DO RODAPE
===================================== */

.footer.onmix-footer {
    position: relative;
}

.footer.onmix-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #00a4f0 0%,
        #7145d6 25%,
        #ff009c 50%,
        #f26b35 75%,
        #ffc400 100%
    );

    pointer-events: none;
    z-index: 1;
}


/* =====================================
   ON MIX - MELHORIA 33
   REFINAMENTO DO RODAPE
===================================== */

/* Melhor distribuicao das colunas */

.footer.onmix-footer .footer-top {
    grid-template-columns: 1.25fr 0.95fr 1.15fr 0.85fr;
    gap: 35px;
    padding: 70px 0 75px;
}

/* Logomarca maior */

.footer.onmix-footer .footer-logo img {
    width: 235px;
    max-width: 100%;
    height: auto;
}

/* Titulos maiores */

.footer.onmix-footer .footer-top h4 {
    font-size: 21px;
    font-weight: 800;
    color: #07132f;
    line-height: 1.35;
    margin-bottom: 25px;
}

/* Texto abaixo da logomarca */

.footer.onmix-footer .footer-about p {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin: 18px 0;
}

/* Links do menu e redes sociais */

.footer.onmix-footer .footer-links {
    gap: 15px;
}

.footer.onmix-footer .footer-links a {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    color: #475569;
}

.footer.onmix-footer .footer-links a:hover {
    color: #099fe8;
}

/* Localizacao, telefone e e-mail */

.footer.onmix-footer .footer-contato p {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 22px;
}

.footer.onmix-footer .footer-contato strong {
    font-size: 16px;
    font-weight: 800;
    color: #07132f;
    margin-bottom: 6px;
}

.footer.onmix-footer .footer-contato a {
    font-size: 16px;
    color: #475569;
}

/* Direitos autorais */

.footer.onmix-footer .footer-bottom span {
    font-size: 14px;
    font-weight: 500;
}

/* Ajustes para tablet */

@media (max-width: 1000px) {
    .footer.onmix-footer .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }
}

/* Ajustes para celular */

@media (max-width: 600px) {
    .footer.onmix-footer .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 0;
    }

    .footer.onmix-footer .footer-top h4 {
        margin-bottom: 15px;
    }

    .footer.onmix-footer .footer-logo img {
        width: 210px;
    }
}


/* =====================================
   ON MIX - AJUSTE FINAL MELHORIA 33
   ESPACAMENTO DO RODAPE
===================================== */

/* Aproximar links institucionais e redes sociais */

.footer.onmix-footer .footer-links {
    gap: 10px !important;
}

.footer.onmix-footer .footer-links a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5;
}

/* Diminuir espaco abaixo dos titulos */

.footer.onmix-footer .footer-top h4 {
    margin-bottom: 15px !important;
}

/* Aproximar descricao abaixo da logo */

.footer.onmix-footer .footer-about p {
    margin: 10px 0 !important;
    line-height: 1.6;
}

/* Aproximar informacoes de contato */

.footer.onmix-footer .footer-contato p {
    margin: 0 0 14px !important;
    line-height: 1.6;
}

.footer.onmix-footer .footer-contato strong {
    margin-bottom: 4px;
}


/* =====================================
   ON MIX - MELHORIA 34
   CORRECAO DO RODAPE NO CELULAR
===================================== */

@media (max-width: 600px) {

    /* Uma coluna abaixo da outra */

    .footer.onmix-footer .footer-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
        padding: 45px 0 !important;
    }

    /* Impede que as colunas se sobreponham */

    .footer.onmix-footer .footer-top > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        position: static !important;
    }

    /* Logo */

    .footer.onmix-footer .footer-logo img {
        width: 210px;
        max-width: 100%;
    }

    /* Titulos */

    .footer.onmix-footer h4 {
        font-size: 20px;
        margin-bottom: 15px !important;
    }

    /* Links e contato */

    .footer.onmix-footer .footer-links {
        align-items: flex-start;
        gap: 10px !important;
    }

    .footer.onmix-footer .footer-contato p {
        margin-bottom: 15px !important;
    }

    /* Direitos autorais */

    .footer.onmix-footer .footer-bottom-inner {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}


/* =====================================
   ON MIX - MELHORIA 37
   CABECALHO UNICO - FAIXA SUPERIOR
===================================== */

.topbar.onmix-topbar {
    background: #07132f;
    color: #ffffff;
}

/* Organizacao da faixa */

.topbar.onmix-topbar .onmix-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Versiculo biblico */

.onmix-topbar .topbar-versiculo {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* Telefone e e-mail */

.onmix-topbar .topbar-contatos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 25px;
}

.onmix-topbar .topbar-contatos a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.onmix-topbar .topbar-contatos a:hover {
    color: #35b8ff;
}

/* Ajustes para celulares */

@media (max-width: 760px) {

    .topbar.onmix-topbar {
        display: block;
    }

    .topbar.onmix-topbar .onmix-topbar-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 10px 12px;
    }

    .onmix-topbar .topbar-versiculo {
        font-size: 11px;
    }

    .onmix-topbar .topbar-contatos {
        justify-content: center;
        gap: 8px 16px;
    }

    .onmix-topbar .topbar-contatos a {
        font-size: 11px;
    }
}


/* =====================================
   ON MIX - MELHORIA 38
   PAPEIS REAIS NO BANNER
===================================== */

.hero-art {
    position: relative;
    isolation: isolate;
}

.hero-art .art-circle {
    z-index: 0;
}

.hero-art .hero-papeis {
    position: absolute;
    width: 100%;
    max-width: 600px;
    height: auto;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 2;
}

.hero-art .float-card {
    z-index: 3;
}

/* CELULAR */

@media (max-width: 760px) {
    .hero-art .hero-papeis {
        width: 95%;
    }
}


/* =====================================
   ON MIX - MELHORIA 39
   REMOVER FAIXA INFORMATIVA
===================================== */

.stats-bar {
    display: none;
}



/* ON MIX - CORES DAS REDES SOCIAIS */

.onmix-footer .rede-instagram path {
    fill: #E1306C !important;
}

.onmix-footer .rede-whatsapp path {
    fill: #25D366 !important;
}

.onmix-footer .rede-link {
    display: inline-flex !important;
    align-items: center;
    gap: 12px !important;
    font-size: 16px;
}

.onmix-footer .rede-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    
}