/* =========================================================
   1. BASE
========================================================= */
:root {
    --azul-escuro: #061d2d;
    --azul: #06a4fc;
    --branco: #fff;
    --cinza: #f4f7fa;
    --texto: #555;
    --raio: 25px;
    --sombra: 0 25px 60px rgba(6, 29, 45, .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", sans-serif; color: var(--azul-escuro); background: var(--branco); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }
.container { width: min(90%, 1200px); margin-inline: auto; }
body.menu-open { overflow: hidden; }

/* =========================================================
   2. COMPONENTES
========================================================= */
.btn-primary, .btn-secondary, .btn-header, .btn-email {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 35px; border-radius: 999px; text-decoration: none;
    font-weight: 600; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.btn-primary, .btn-header, .btn-email { background: var(--azul); color: var(--branco); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: transform .55s ease; }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover, .btn-header:hover, .btn-email:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(6,164,252,.42); }
.btn-primary:active, .btn-header:active, .btn-email:active { transform: translateY(-1px) scale(.985); }
.btn-secondary { border: 1px solid rgba(255,255,255,.85); color: var(--branco); }
.btn-secondary:hover { background: var(--branco); color: var(--azul-escuro); transform: translateY(-4px); }

.section-title { text-align: center; margin-bottom: 60px; }
.section-title span, .about-text > span, .contact-info > span, .cta > .container > span { color: var(--azul); font-size: 14px; font-weight: 700; letter-spacing: 3px; }
.section-title h2 { margin-top: 15px; font-size: clamp(32px, 4vw, 42px); line-height: 1.2; }
.section-title.light h2 { color: var(--branco); }

.reveal { opacity: 0; transform: translateY(38px); transition: opacity .85s ease, transform .85s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* =========================================================
   3. HEADER E LOGO PREMIUM
========================================================= */
.header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 18px 0; background: rgba(6,29,45,.74); backdrop-filter: blur(16px); transition: padding .35s ease, background .35s ease, box-shadow .35s ease; animation: headerEntrada .75s ease-out both; }
.header.scrolled { padding: 12px 0; background: rgba(6,29,45,.96); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.logo { display: inline-flex; position: relative; text-decoration: none; }
.logo img { width: 180px; height: auto; display: block; }

/* =========================
LOGO PREMIUM REFINADA
========================= */

.logo-premium{

    position:relative;

    display:inline-flex;
    align-items:center;

    isolation:isolate;
    overflow:hidden;

    border-radius:12px;

    text-decoration:none;

    transition:
        transform .35s ease,
        filter .35s ease;

    animation:logoFocus .9s .05s ease-out both;

}


/* Imagem da logo */

.logo-premium img{

    position:relative;

    z-index:2;

    width:180px;
    height:auto;

    display:block;

    transition:
        filter .35s ease,
        transform .35s ease;

}


/* Glow discreto atrás do símbolo */

.logo-premium .logo-glow{

    position:absolute;

    left:4px;
    top:50%;

    width:64px;
    height:64px;

    z-index:-1;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(6,164,252,.34),
        rgba(6,164,252,.10) 45%,
        transparent 72%
    );

    filter:blur(16px);

    opacity:.45;

    transform:
        translateY(-50%)
        scale(.9);

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

    pointer-events:none;

}


/* Reflexo sobre a logo */

.logo-premium .logo-shine{

    position:absolute;

    top:-75%;
    left:-65%;

    width:34%;
    height:250%;

    z-index:3;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        rgba(6,164,252,.20),
        transparent
    );

    transform:rotate(22deg);

    opacity:0;

    pointer-events:none;

}


/* Movimento sutil no hover */

.logo-premium:hover{

    transform:
        translateY(-2px)
        scale(1.015);

}


.logo-premium:hover img{

    filter:
        drop-shadow(0 7px 18px rgba(6,164,252,.18));

}


.logo-premium:hover .logo-glow{

    opacity:.9;

    transform:
        translateY(-50%)
        scale(1.18);

}


.logo-premium:hover .logo-shine{

    animation:logoShine .85s ease forwards;

}


/* Entrada em foco */

@keyframes logoFocus{

    from{

        opacity:0;

        transform:
            translateY(-10px)
            scale(.97);

        filter:blur(7px);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:blur(0);

    }

}


/* Reflexo atravessando a marca */

@keyframes logoShine{

    0%{

        left:-65%;
        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        left:145%;
        opacity:0;

    }

}


/* Celular */

@media(max-width:600px){

    .logo-premium img{

        width:145px;

    }

}


/* Acessibilidade */

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

    .logo-premium{

        animation:none;

    }

    .logo-premium:hover{

        transform:none;

    }

    .logo-premium:hover .logo-shine{

        animation:none;

    }

}

.main-nav { display: flex; gap: 34px; }
.main-nav a { position: relative; color: var(--branco); text-decoration: none; font-size: 15px; transition: color .25s ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--azul), transparent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.main-nav a:hover { color: var(--azul); }
.main-nav a:hover::after { transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 1101; }
.menu-toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--branco); transition: .35s; }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   4. HERO
========================================================= */
.hero { --mouse-x: 75%; --mouse-y: 35%; position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding-top: 88px; color: var(--branco); background: radial-gradient(circle at top right, rgba(6,164,252,.34), transparent 35%), var(--azul-escuro); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -4; background: linear-gradient(rgba(6,29,45,.20), rgba(6,29,45,.72)), radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(6,164,252,.27), transparent 30%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.22)); pointer-events: none; }
.hero-content { display: flex; justify-content: space-between; align-items: center; gap: 70px; }
.hero-text { max-width: 650px; }
.hero-tag-wrap { display: flex; align-items: center; gap: 12px; width: min(100%, 520px); }
.hero-tag-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--azul); box-shadow: 0 0 10px rgba(6,164,252,.85), 0 0 24px rgba(6,164,252,.35); animation: heroTagPulse 2.8s ease-in-out infinite; }
.tag { color: var(--azul); font-size: 14px; font-weight: 700; letter-spacing: 3px; white-space: nowrap; animation: heroEntradaEsquerda .8s .15s ease-out both; }
.hero-tag-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(6,164,252,.85), rgba(6,164,252,.18), transparent); transform-origin: left; animation: heroTagLine 1.2s .7s ease-out both; }
.hero h1 { margin: 25px 0; font-size: clamp(38px, 5vw, 55px); line-height: 1.1; animation: heroEntradaEsquerda .9s .3s ease-out both; }
.hero-text > p { color: #d5e4ed; font-size: 18px; line-height: 1.7; animation: heroEntradaEsquerda .9s .45s ease-out both; }
.buttons { display: flex; gap: 20px; margin-top: 40px; animation: heroEntradaBaixo .9s .6s ease-out both; }
.hero-glow { position: absolute; left: var(--mouse-x); top: var(--mouse-y); z-index: -3; width: 480px; height: 480px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(6,164,252,.22), rgba(6,164,252,.07) 40%, transparent 70%); filter: blur(16px); pointer-events: none; transition: left .18s ease-out, top .18s ease-out; animation: luzEntrada 1.8s .65s ease-out both; }
.hero-particles { position: absolute; inset: 0; z-index: -2; pointer-events: none; animation: particulasEntrada 1.5s .9s ease-out both; }
.particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 12px rgba(6,164,252,.9), 0 0 30px rgba(6,164,252,.45); animation: particleFloat 7s ease-in-out infinite, particlePulse 3.5s ease-in-out infinite; }
.particle-1{top:18%;left:8%;width:4px;height:4px;animation-delay:-1s}.particle-2{top:30%;left:44%;width:7px;height:7px;animation-delay:-3s}.particle-3{top:16%;right:12%;width:5px;height:5px;animation-delay:-2s}.particle-4{top:67%;left:38%;width:4px;height:4px;animation-delay:-5s}.particle-5{bottom:17%;right:18%;width:8px;height:8px;animation-delay:-4s}.particle-6{bottom:25%;left:12%;width:5px;height:5px;animation-delay:-6s}.particle-7{top:48%;right:5%;width:4px;height:4px;animation-delay:-2.5s}.particle-8{top:9%;left:62%;width:6px;height:6px;animation-delay:-4.5s}

/* =========================================================
   5. DASHBOARD
========================================================= */
.hero-visual { position: relative; width: 440px; height: 470px; display: flex; align-items: center; justify-content: center; animation: heroEntradaDireita 1s .4s ease-out both; }
.circle-light { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(6,164,252,.45), transparent 65%); filter: blur(10px); animation: pulsar 4s infinite alternate; }
.dashboard-card { position: relative; z-index: 2; width: 350px; padding: 35px; overflow: hidden; border: 1px solid rgba(255,255,255,.20); border-radius: var(--raio); color: var(--branco); background: rgba(255,255,255,.10); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.30); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .35s ease; will-change: transform; animation: flutuar 5s infinite ease-in-out; }
.dashboard-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(6,164,252,.35), rgba(255,255,255,.05)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.dashboard-card::after { content: ""; position: absolute; top: -60%; left: -150%; width: 55%; height: 220%; transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), rgba(255,255,255,.15), transparent); opacity: 0; pointer-events: none; }
.dashboard-card:hover { box-shadow: 0 35px 95px rgba(0,0,0,.38), 0 0 45px rgba(6,164,252,.15); }
.dashboard-card:hover::after { animation: glassShine .9s ease forwards; }
.dashboard-card > * { position: relative; transform: translateZ(22px); }
.dashboard-label-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dashboard-label { color: var(--azul); font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.dashboard-line { width: 100%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--azul), transparent); animation: linhaScanner 3.8s ease-in-out infinite; }
.dashboard-card > strong { display: block; margin: 20px 0; font-size: 28px; line-height: 1.2; }
.mini-info { display: flex; gap: 40px; }
.mini-info div { display: flex; flex-direction: column; }
.mini-info b { color: var(--azul); font-size: 35px; }
.mini-info small { color: var(--branco); }
.dashboard-chart { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.chart-header span { color: #d7e8f3; font-size: 12px; font-weight: 500; }
.chart-header small { color: #63d99c; font-size: 12px; font-weight: 700; }
.chart-bars { height: 90px; display: flex; align-items: flex-end; gap: 10px; }
.chart-column { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 4px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.035); transition: transform .3s ease, background .3s ease; }
.chart-column span { display: block; width: 100%; height: var(--bar-height); border-radius: 6px; background: linear-gradient(to top, rgba(6,164,252,.45), var(--azul)); box-shadow: 0 0 12px rgba(6,164,252,.28); transform-origin: bottom; animation: crescerBarra 1.1s var(--bar-delay) ease-out both, pulsarBarra 4s calc(var(--bar-delay) + 1.2s) ease-in-out infinite; }
.chart-column:hover { transform: translateY(-8px); background: rgba(6,164,252,.10); }
.chart-column:hover span { filter: brightness(1.35); box-shadow: 0 0 18px rgba(6,164,252,.65), 0 0 35px rgba(6,164,252,.25); }
.floating-card { position: absolute; right: -35px; bottom: 45px; z-index: 10; padding: 16px 25px; border-radius: 999px; color: var(--azul-escuro); background: var(--branco); box-shadow: 0 20px 50px rgba(0,0,0,.35); font-size: 14px; font-weight: 700; white-space: nowrap; animation: respirarBadge 3s infinite ease-in-out; }

/* =========================================================
   6. CONTEÚDO
========================================================= */
.carousel-services { overflow: hidden; padding: 18px 0; background: var(--azul-escuro); }
.carousel-track { display: flex; width: max-content; animation: passar 25s linear infinite; }
.carousel-track span { color: var(--branco); font-size: 14px; font-weight: 500; letter-spacing: 1.5px; margin-right: 35px; }
.carousel-track span::after { content: "•"; color: var(--azul); margin-left: 35px; }

.numbers { padding: 90px 0; }
.numbers-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; text-align: center; }
.numbers h2 { color: var(--azul); font-size: 55px; }
.numbers p { color: #666; }

.services, .testimonials { padding: 120px 0; background: var(--cinza); }
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; }
.card { position: relative; overflow: hidden; padding: 35px; border-radius: var(--raio); background: var(--branco); transition: transform .4s ease, box-shadow .4s ease; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.card:hover { transform: translateY(-12px); box-shadow: 0 25px 60px rgba(6,164,252,.18); }
.card:hover::before { transform: scaleX(1); }
.service-icon, .icon { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; border-radius: 18px; background: rgba(6,164,252,.12); color: var(--azul); font-size: 28px; transition: .35s; }
.card:hover .service-icon { color: var(--branco); background: var(--azul); transform: rotate(-8deg) scale(1.08); }
.card h3, .differential-card h3 { margin-bottom: 15px; font-size: 21px; }
.card p { color: #666; line-height: 1.7; }

.about, .contact { padding: 120px 0; background: var(--branco); }
.about-content, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-image { position: relative; overflow: visible; }
.about-image img { width: 100%; height: 450px; object-fit: cover; border-radius: 30px; box-shadow: 0 30px 70px rgba(6,29,45,.20); transition: transform .55s ease; }
.about-image:hover img { transform: scale(1.03); }
.about-badge { position: absolute; right: -30px; bottom: 30px; display: flex; flex-direction: column; padding: 25px 35px; border-radius: 20px; color: var(--branco); background: var(--azul-escuro); box-shadow: 0 20px 50px rgba(0,0,0,.25); transition: transform .45s ease; }
.about-image:hover .about-badge { transform: translateY(-6px); }
.about-badge strong { color: var(--azul); font-size: 45px; }
.about-text h2, .contact-info h2 { margin: 20px 0; font-size: 42px; line-height: 1.2; }
.about-text p, .contact-info p { color: var(--texto); line-height: 1.8; margin-bottom: 20px; }
.about-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 35px; }
.about-list div { padding: 15px 20px; border-radius: 12px; background: var(--cinza); font-weight: 500; transition: .3s; }
.about-list div:hover { color: var(--branco); background: var(--azul-escuro); transform: translateY(-5px); }

.differentials { padding: 120px 0; color: var(--branco); background: var(--azul-escuro); }
.differential-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; }
.differential-card { padding: 35px 30px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--raio); background: rgba(255,255,255,.08); backdrop-filter: blur(15px); transition: .4s; }
.differential-card:hover { transform: translateY(-12px); border-color: var(--azul); box-shadow: 0 20px 50px rgba(6,164,252,.25); }
.differential-card p { color: #c8d8e3; font-size: 15px; line-height: 1.7; }
.icon { background: rgba(6,164,252,.15); font-size: 30px; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.testimonial-card { position: relative; padding: 40px; border-radius: var(--raio); background: var(--branco); box-shadow: 0 20px 50px rgba(6,29,45,.08); transition: .4s; }
.testimonial-card:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(6,164,252,.18); }
.testimonial-card::before { content: "“"; position: absolute; top: 10px; right: 25px; color: var(--azul); font-size: 80px; font-weight: 800; opacity: .15; }
.testimonial-card p { color: var(--texto); line-height: 1.8; margin-bottom: 30px; }
.client { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid #eee; }
.client span { color: var(--azul); font-size: 14px; }

.cta { padding: 140px 0; color: var(--branco); text-align: center; background: radial-gradient(circle at top, rgba(6,164,252,.25), transparent 45%), var(--azul-escuro); }
.cta h2 { max-width: 900px; margin: 25px auto; font-size: clamp(35px,5vw,52px); line-height: 1.2; }
.cta p { max-width: 750px; margin: auto; color: #c7d9e5; font-size: 18px; line-height: 1.8; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 45px; }

.contact-grid { gap: 70px; }
.contact-info p { margin-bottom: 35px; }
.contact-item { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.contact-item i { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 14px; color: var(--azul); background: rgba(6,164,252,.12); font-size: 20px; }
.contact-item a { text-decoration: none; transition: color .3s; }
.contact-item a:hover { color: var(--azul); }
.map { width: 100%; height: 420px; overflow: hidden; border-radius: 30px; box-shadow: 0 30px 70px rgba(6,29,45,.18); transition: transform .4s ease, box-shadow .4s ease; }
.map:hover { transform: translateY(-6px); box-shadow: 0 35px 80px rgba(6,29,45,.23); }
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.88); transition: filter .4s ease; }
.map:hover iframe { filter: saturate(1.08); }

/* =========================================================
   7. FOOTER E WHATSAPP
========================================================= */
.footer { padding: 70px 0 25px; color: var(--branco); background: radial-gradient(circle at 15% 0%, rgba(6,164,252,.10), transparent 28%), #04131e; }
.footer-grid { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 60px; }
.footer-logo img { width: 200px; }
.footer-brand p { max-width: 300px; margin-top: 25px; color: #c7d9e5; line-height: 1.7; }
.footer-info { display: flex; flex-direction: column; gap: 15px; }
.footer-info h3 { margin-bottom: 10px; color: var(--azul); }
.footer-info a { display: flex; align-items: center; gap: 10px; color: #c7d9e5; text-decoration: none; transition: color .3s; word-break: break-word; }
.footer-info a:hover { color: var(--azul); }
.footer-info p { color: #c7d9e5; line-height: 1.7; }
.footer-bottom { margin-top: 50px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); color: #8fa5b5; text-align: center; font-size: 14px; }
.whatsapp-float { position: fixed; right: 30px; bottom: 30px; z-index: 999; display: flex; align-items: center; gap: 12px; padding: 15px 24px; border-radius: 999px; color: var(--branco); background: #25d366; box-shadow: 0 15px 40px rgba(0,0,0,.3); text-decoration: none; font-weight: 700; animation: pulseWhats 2.4s infinite; transition: transform .3s ease; }
.whatsapp-float:hover { transform: translateY(-5px); }
.whatsapp-float i { font-size: 28px; }

/* =========================================================
   8. ANIMAÇÕES
========================================================= */
@keyframes headerEntrada { from{opacity:0;transform:translateY(-25px)} to{opacity:1;transform:none} }
@keyframes logoFocus { from{opacity:0;filter:blur(8px);transform:translateY(-6px) scale(.97)} to{opacity:1;filter:blur(0);transform:none} }
@keyframes logoGlow { 0%,100%{opacity:.45;transform:translateY(-50%) scale(.95)} 50%{opacity:.85;transform:translateY(-50%) scale(1.08)} }
@keyframes logoShine { 0%{left:-55%;opacity:0} 15%{opacity:1} 100%{left:125%;opacity:0} }
@keyframes heroEntradaEsquerda { from{opacity:0;transform:translateX(-45px)} to{opacity:1;transform:none} }
@keyframes heroEntradaDireita { from{opacity:0;transform:translateX(55px) scale(.96)} to{opacity:1;transform:none} }
@keyframes heroEntradaBaixo { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes particulasEntrada { from{opacity:0} to{opacity:1} }
@keyframes luzEntrada { from{opacity:0;transform:translate(-50%,-50%) scale(.7)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes heroTagPulse { 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.35);opacity:1} }
@keyframes heroTagLine { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
@keyframes particleFloat { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(14px,-22px,0)} }
@keyframes particlePulse { 0%,100%{opacity:.25;box-shadow:0 0 8px rgba(6,164,252,.5)} 50%{opacity:.9;box-shadow:0 0 14px rgba(6,164,252,1),0 0 38px rgba(6,164,252,.55)} }
@keyframes pulsar { from{transform:scale(1);opacity:.6} to{transform:scale(1.15);opacity:1} }
@keyframes flutuar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes respirarBadge { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.045)} }
@keyframes linhaScanner { 0%{transform:scaleX(0);opacity:0;transform-origin:left} 18%,55%{transform:scaleX(1);opacity:1} 78%,100%{transform:scaleX(0);opacity:0;transform-origin:right} }
@keyframes crescerBarra { from{transform:scaleY(0);opacity:0} to{transform:scaleY(1);opacity:1} }
@keyframes pulsarBarra { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.22)} }
@keyframes glassShine { 0%{left:-150%;opacity:0} 12%{opacity:1} 100%{left:170%;opacity:0} }
@keyframes passar { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulseWhats { 50%{box-shadow:0 0 0 14px rgba(37,211,102,.14),0 15px 40px rgba(0,0,0,.3)} }

/* =========================================================
   9. RESPONSIVO
========================================================= */
@media (max-width: 1000px) {
    .menu-toggle { display: flex; order: 3; }
    .btn-header { display: none; }
    .main-nav { position: fixed; top: 0; right: -100%; z-index: 1100; width: min(340px,88%); height: 100vh; padding: 120px 35px 35px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: rgba(4,19,30,.985); backdrop-filter: blur(20px); box-shadow: -25px 0 70px rgba(0,0,0,.35); transition: right .45s ease; }
    .main-nav.active { right: 0; }
    .main-nav a { width: 100%; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 20px; }
    .main-nav a::after { display: none; }
    .hero-content { flex-direction: column; text-align: center; padding: 90px 0 50px; }
    .hero-tag-wrap { justify-content: center; }
    .hero-visual { width: 390px; height: 430px; }
    .numbers-grid { grid-template-columns: 1fr; }
    .cards, .differential-grid { grid-template-columns: repeat(2,1fr); }
    .about-content, .contact-grid { grid-template-columns: 1fr; }
    .about-badge { right: 10px; }
    .testimonial-grid, .footer-grid { grid-template-columns: 1fr; }
    .contact-info { text-align: center; }
    .contact-item { justify-content: center; }
}

@media (max-width: 600px) {
    .header { padding: 12px 0; }
    .logo img { width: 150px; }
    .hero { min-height: auto; }
    .hero-content { padding-top: 105px; }
    .hero h1 { font-size: 38px; }
    .tag { font-size: 11px; letter-spacing: 2px; }
    .hero-tag-line { max-width: 55px; }
    .buttons, .cta-buttons { flex-direction: column; align-items: stretch; }
    .hero-visual { width: 100%; height: 420px; transform: scale(.88); }
    .dashboard-card { width: 320px; padding: 30px; }
    .floating-card { right: -10px; bottom: 40px; }
    .cards, .differential-grid, .about-list { grid-template-columns: 1fr; }
    .about-image img { height: 350px; }
    .map { height: 350px; }
    .whatsapp-float { right: 15px; bottom: 15px; width: 58px; height: 58px; padding: 0; justify-content: center; }
    .whatsapp-float span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero-glow { display: none; }
    .dashboard-card { transform: none !important; }
}

/* =========================
ÁREA DO CLIENTE
========================= */

.client-area{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(6,164,252,.10),
            transparent 32%
        ),
        #f8fafc;

}

.client-area::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(6,29,45,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6,29,45,.025) 1px,
            transparent 1px
        );

    background-size:52px 52px;

    pointer-events:none;

}

.client-area-grid{

    position:relative;

    display:grid;

    grid-template-columns:1.08fr .92fr;

    align-items:center;

    gap:80px;

}


/* Mockup do portal */

.client-portal-card{

    position:relative;

    overflow:hidden;

    border:1px solid rgba(6,29,45,.10);

    border-radius:28px;

    background:white;

    box-shadow:
        0 35px 90px rgba(6,29,45,.16);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.client-portal-card::after{

    content:"";

    position:absolute;

    top:-70%;
    left:-65%;

    width:32%;
    height:250%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.72),
        rgba(6,164,252,.14),
        transparent
    );

    transform:rotate(22deg);

    opacity:0;

    pointer-events:none;

}

.client-portal-card:hover{

    transform:
        translateY(-10px)
        perspective(1000px)
        rotateX(1deg)
        rotateY(-1.5deg);

    box-shadow:
        0 45px 110px rgba(6,29,45,.22),
        0 0 45px rgba(6,164,252,.10);

}

.client-portal-card:hover::after{

    animation:portalShine .95s ease forwards;

}

@keyframes portalShine{

    0%{

        left:-65%;
        opacity:0;

    }

    14%{

        opacity:1;

    }

    100%{

        left:145%;
        opacity:0;

    }

}


/* Barra superior */

.portal-topbar{

    min-height:64px;

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

    padding:0 24px;

    color:white;

    background:var(--azul-escuro);

}

.portal-dots{

    display:flex;

    gap:7px;

}

.portal-dots span{

    width:8px;
    height:8px;

    border-radius:50%;

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

}

.portal-dots span:nth-child(2){

    background:rgba(6,164,252,.65);

}

.portal-title{

    font-size:13px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.portal-topbar > i{

    color:var(--azul);

}


/* Conteúdo interno */

.portal-content{

    min-height:390px;

    display:grid;

    grid-template-columns:170px 1fr;

}

.portal-sidebar{

    padding:25px 18px;

    color:white;

    background:#0a2a3f;

}

.portal-brand{

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:30px;
    padding:0 8px;

    font-weight:800;

}

.portal-brand img{

    width:26px;
    height:26px;

    object-fit:contain;

}

.portal-menu-item{

    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:8px;
    padding:13px 12px;

    border-radius:11px;

    color:#bfd2df;

    font-size:13px;

    transition:.3s;

}

.portal-menu-item i{

    width:16px;

    color:#7bbfe8;

}

.portal-menu-item.active,
.portal-menu-item:hover{

    color:white;

    background:rgba(6,164,252,.16);

}

.portal-dashboard{

    padding:34px;

    background:
        radial-gradient(
            circle at top right,
            rgba(6,164,252,.11),
            transparent 38%
        ),
        #f6f9fb;

}

.portal-welcome{

    display:flex;

    flex-direction:column;

    gap:7px;

}

.portal-welcome span{

    color:#738797;

    font-size:13px;

}

.portal-welcome strong{

    color:var(--azul-escuro);

    font-size:25px;

}

.portal-mini-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:38px;

}

.portal-mini-cards > div{

    min-height:155px;

    display:flex;

    flex-direction:column;

    padding:20px;

    border:1px solid rgba(6,29,45,.07);

    border-radius:17px;

    background:white;

    box-shadow:
        0 14px 35px rgba(6,29,45,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.portal-mini-cards > div:hover{

    transform:translateY(-6px);

    box-shadow:
        0 22px 45px rgba(6,164,252,.14);

}

.portal-mini-cards i{

    width:42px;
    height:42px;

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

    margin-bottom:18px;

    border-radius:13px;

    color:var(--azul);

    background:rgba(6,164,252,.11);

    font-size:18px;

}

.portal-mini-cards strong{

    margin-bottom:8px;

    color:var(--azul-escuro);

    font-size:14px;

}

.portal-mini-cards span{

    color:#71818d;

    font-size:11px;

    line-height:1.5;

}


/* Texto lateral */

.section-eyebrow{

    color:var(--azul);

    font-size:14px;
    font-weight:700;

    letter-spacing:3px;

}

.client-area-text h2{

    margin:20px 0;

    color:var(--azul-escuro);

    font-size:clamp(34px,4vw,48px);

    line-height:1.15;

}

.client-area-text > p{

    margin-bottom:35px;

    color:#586b79;

    font-size:17px;

    line-height:1.8;

}

.client-benefits{

    display:grid;

    gap:15px;

    margin-bottom:38px;

}

.client-benefits > div{

    display:flex;
    align-items:center;

    gap:14px;

    color:var(--azul-escuro);

    font-weight:500;

}

.client-benefits i{

    width:42px;
    height:42px;

    flex-shrink:0;

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

    border-radius:13px;

    color:var(--azul);

    background:rgba(6,164,252,.11);

}


/* Botão */

.btn-client-portal{

    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:16px 26px;

    border-radius:50px;

    color:white;

    background:var(--azul-escuro);

    text-decoration:none;
    font-weight:700;

    box-shadow:
        0 16px 38px rgba(6,29,45,.20);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.btn-client-portal .fa-arrow-right{

    transition:transform .3s ease;

}

.btn-client-portal:hover{

    transform:translateY(-4px);

    background:var(--azul);

    box-shadow:
        0 20px 45px rgba(6,164,252,.30);

}

.btn-client-portal:hover .fa-arrow-right{

    transform:translateX(5px);

}

.btn-client-portal:active{

    transform:translateY(-1px) scale(.98);

}


/* Responsivo */

@media(max-width:1000px){

    .client-area-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .client-area-text{

        text-align:center;

    }

    .client-benefits{

        max-width:580px;

        margin-right:auto;
        margin-left:auto;

        text-align:left;

    }

}

@media(max-width:700px){

    .client-area{

        padding:90px 0;

    }

    .portal-content{

        grid-template-columns:1fr;

    }

    .portal-sidebar{

        display:none;

    }

    .portal-dashboard{

        padding:25px 18px;

    }

    .portal-mini-cards{

        grid-template-columns:1fr;

    }

    .portal-mini-cards > div{

        min-height:auto;

    }

}

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

    .client-portal-card,
    .client-portal-card::after,
    .portal-mini-cards > div,
    .btn-client-portal{

        animation:none !important;

        transition:none;

    }

}

/* Área do Cliente no menu */

.main-nav .nav-client-area{

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--azul);

    font-weight:700;

}

.main-nav .nav-client-area:hover{

    color:white;

}

.main-nav .nav-client-area i{

    font-size:14px;

}