/* assets/css/style.css — Expert Informática */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════
   VARIÁVEIS — [data-tema="dark"] inverte
   ═══════════════════════════════════════════ */
:root {
    --royal:      #1a3a8f;
    --royal-dark: #0d2060;
    --gold:       #f5c518;
    --gold-dark:  #e8a000;
    --green:      #22c55e;

    --bg-page:    #f0f4ff;
    --bg-section: #eef2ff;
    --bg-card:    #ffffff;
    --bg-input:   #f0f4ff;
    --bg-mini:    #f0f4ff;
    --bg-chip:    #ffffff;
    --bg-modal:   #ffffff;
    --bg-navbar:  rgba(255,255,255,.92);

    --text-h:     #0d2060;
    --text-body:  #2d3a5a;
    --text-muted: #6b7db3;
    --text-nav:   #4a5a8a;
    --text-nav-hv:#1a3a8f;
    --text-brand: #1a3a8f;
    --text-stat:  #1a3a8f;
    --text-ct:    #0d2060;
    --text-cs:    #6b7db3;

    --border:     rgba(26,58,143,.12);
    --nav-border: rgba(26,58,143,.1);
    --prog-bg:    #e8edff;
    --ring:       rgba(26,58,143,.1);

    --badge-bg:   rgba(26,58,143,.08);
    --badge-bd:   rgba(26,58,143,.18);
    --badge-cl:   #1a3a8f;

    --orb1:       rgba(26,58,143,.13);
    --orb2:       rgba(245,197,24,.15);
    --grid-cl:    rgba(26,58,143,.05);

    --out-cl:     #1a3a8f;
    --out-bd:     rgba(26,58,143,.35);
    --out-hv:     rgba(26,58,143,.07);

    --ci-bg:      #f0f4ff;
    --ci-cl:      #1a3a8f;
    --ci-lk:      #1a3a8f;

    --tog: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826,58,143,.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-tema="dark"] {
    --bg-page:    #06102e;
    --bg-section: #0d1a3e;
    --bg-card:    rgba(255,255,255,.05);
    --bg-input:   rgba(255,255,255,.07);
    --bg-mini:    rgba(255,255,255,.08);
    --bg-chip:    rgba(255,255,255,.06);
    --bg-modal:   #0d1a3e;
    --bg-navbar:  rgba(6,16,46,.92);

    --text-h:     #ffffff;
    --text-body:  #e2e8f8;
    --text-muted: rgba(255,255,255,.55);
    --text-nav:   rgba(255,255,255,.65);
    --text-nav-hv:#f5c518;
    --text-brand: #6fa3f7;
    --text-stat:  #f5c518;
    --text-ct:    #ffffff;
    --text-cs:    rgba(255,255,255,.45);

    --border:     rgba(255,255,255,.1);
    --nav-border: rgba(255,255,255,.07);
    --prog-bg:    rgba(255,255,255,.1);
    --ring:       rgba(255,255,255,.08);

    --badge-bg:   rgba(245,197,24,.1);
    --badge-bd:   rgba(245,197,24,.3);
    --badge-cl:   #f5c518;

    --orb1:       rgba(30,80,220,.35);
    --orb2:       rgba(245,197,24,.12);
    --grid-cl:    rgba(255,255,255,.03);

    --out-cl:     #ffffff;
    --out-bd:     rgba(255,255,255,.35);
    --out-hv:     rgba(255,255,255,.08);

    --ci-bg:      rgba(255,255,255,.07);
    --ci-cl:      #6fa3f7;
    --ci-lk:      #6fa3f7;

    --tog: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ═══ TRANSIÇÃO SUAVE ═══ */
*, *::before, *::after {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ═══ BASE ═══ */
html, body { scroll-behavior: smooth; }

body,
body.bg-body-dark {
    font-family: 'Inter', sans-serif;
    background: var(--bg-page) !important;
    color: var(--text-body) !important;
}

/* ═══ NAVBAR ═══ */
.bg-navbar {
    background: var(--bg-navbar) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nav-border) !important;
}
.bg-navbar .navbar-nav .nav-link { color: var(--text-nav) !important; font-weight:500; font-size:.92rem; }
.bg-navbar .navbar-nav .nav-link:hover,
.bg-navbar .navbar-nav .nav-link.active { color: var(--text-nav-hv) !important; }
.navbar-brand .brand-name { color: var(--text-h) !important; }
.navbar-brand .brand-sub  { color: var(--text-muted) !important; }
.navbar-toggler-icon      { background-image: var(--tog) !important; }

/* ═══ BOTÃO TEMA ═══ */
#btn-tema {
    width:36px; height:36px; border-radius:50%;
    border:1.5px solid var(--badge-bd);
    background: var(--badge-bg);
    color: var(--badge-cl);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; cursor:pointer; flex-shrink:0;
    padding:0; line-height:1;
}
#btn-tema:hover { transform:rotate(20deg) scale(1.1); }
#btn-tema .bi   { transition: none; } /* ícone não precisa de transição */

/* ═══ HERO ═══ */
.hero {
    min-height:calc(100vh - 72px);
    padding:5rem 0 4rem;
    position:relative; overflow:hidden;
    background: var(--bg-page);
}
.hero::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(var(--grid-cl) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-cl) 1px, transparent 1px);
    background-size:44px 44px;
}
.hero::after {
    content:""; position:absolute;
    width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle, var(--orb1) 0%, transparent 70%);
    top:-120px; right:-100px; pointer-events:none;
    animation:orbFloat1 10s ease-in-out infinite;
}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}

.hero-orb2 {
    position:absolute; width:320px; height:320px; border-radius:50%;
    background:radial-gradient(circle, var(--orb2) 0%, transparent 70%);
    bottom:-60px; left:-60px; pointer-events:none;
    animation:orbFloat2 12s ease-in-out infinite;
}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,18px)}}

.badge-live {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--badge-bg); border:1px solid var(--badge-bd);
    border-radius:20px; padding:5px 14px; margin-bottom:22px;
    font-size:.75rem; font-weight:600; color:var(--badge-cl);
}
.badge-live .dot {
    width:7px; height:7px; background:var(--gold); border-radius:50%;
    box-shadow:0 0 0 3px rgba(245,197,24,.22);
    animation:blink 1.8s ease infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero h1 {
    font-size:clamp(2rem,4vw,2.8rem); font-weight:800;
    color:var(--text-h); line-height:1.15; letter-spacing:-.5px;
}
.text-brand { color:var(--text-brand) !important; }
.hero h1 .text-brand { position:relative; }
.hero h1 .text-brand::after {
    content:''; position:absolute; bottom:-4px; left:0;
    height:3px; background:var(--gold); border-radius:2px;
    width:0; animation:underlineSlide .8s ease .9s forwards;
}
@keyframes underlineSlide{to{width:100%}}

.hero .lead { color:var(--text-muted) !important; }

.hero-animate{opacity:0;transform:translateY(24px);animation:floatUp .65s ease forwards}
.hero-animate:nth-child(1){animation-delay:.1s}
.hero-animate:nth-child(2){animation-delay:.22s}
.hero-animate:nth-child(3){animation-delay:.34s}
.hero-animate:nth-child(4){animation-delay:.46s}
.hero-animate:nth-child(5){animation-delay:.58s}
@keyframes floatUp{to{opacity:1;transform:translateY(0)}}

.trust-row{display:flex;flex-wrap:wrap;gap:1rem}
.trust-item{display:flex;align-items:center;gap:5px;font-size:.82rem;color:var(--text-muted);font-weight:500}
.trust-item .bi{color:var(--green)}

/* ═══ HERO CARD ═══ */
.hero-card-wrap{position:relative;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(28px);animation:floatUp .7s ease .35s forwards}

.hero-ring{position:absolute;border-radius:50%;border:1.5px solid var(--ring)}
.hero-ring-1{width:360px;height:360px;top:50%;left:50%;margin:-180px 0 0 -180px;animation:spinSlow 22s linear infinite}
.hero-ring-2{width:280px;height:280px;top:50%;left:50%;margin:-140px 0 0 -140px;border-style:dashed;animation:spinSlow 16s linear infinite reverse}
@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.hero-main-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:22px;width:230px;position:relative;z-index:2;animation:cardFloat 4s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-main-card .card-icon-box{width:42px;height:42px;background:var(--royal);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--gold)}
.hero-main-card .card-title{font-size:.82rem;font-weight:700;color:var(--text-ct);margin-bottom:2px}
.hero-main-card .card-sub{font-size:.72rem;color:var(--text-cs);margin-bottom:14px}

.progress-track{background:var(--prog-bg);border-radius:6px;height:6px;overflow:hidden;margin-bottom:7px}
.progress-bar-brand{height:100%;background:var(--royal);border-radius:6px;width:0;animation:progressFill 1.2s ease 1.1s forwards}
@keyframes progressFill{to{width:72%}}

.prog-labels{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-muted)}
.mini-stats-row{display:flex;gap:8px;margin-top:14px}
.mini-stat{flex:1;background:var(--bg-mini);border-radius:9px;padding:7px 5px;text-align:center}
.mini-stat-n{font-size:.9rem;font-weight:800;color:var(--text-stat);display:block}
.mini-stat-l{font-size:.62rem;color:var(--text-muted)}
.card-yellow-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--gold);border-radius:0 0 20px 20px}

.status-badge{font-size:.68rem;font-weight:600;color:#16a34a;background:#dcfce7;border:1px solid #bbf7d0;border-radius:8px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px}
.status-badge .dot-green{width:5px;height:5px;background:#22c55e;border-radius:50%;animation:blink 1.6s ease infinite}

.hero-chip{position:absolute;background:var(--bg-chip);border:1px solid var(--border);border-radius:14px;padding:9px 13px;z-index:3;animation:cardFloat 5s ease-in-out infinite}
.hero-chip-1{top:20px;right:-10px;animation-delay:.7s}
.hero-chip-2{bottom:30px;left:-15px;animation-delay:1.4s}
.hero-chip .chip-lbl{font-size:.68rem;color:var(--text-muted);margin-bottom:2px}
.hero-chip .chip-val{font-size:1.1rem;font-weight:800;line-height:1}
.chip-val-gold {color:var(--gold-dark)}
.chip-val-royal{color:var(--royal)}
[data-tema="dark"] .chip-val-gold {color:var(--gold)}
[data-tema="dark"] .chip-val-royal{color:#6fa3f7}
[data-tema="dark"] .mini-stat-n   {color:var(--gold)}

.hero-logo{width:140px;max-width:55%;height:auto}

/* ═══ BOTÕES ═══ */
.btn-brand{background:var(--royal);color:#fff;border:none;font-weight:700}
.btn-brand:hover{background:var(--royal-dark);color:#fff;transform:translateY(-2px)}
[data-tema="dark"] .btn-brand      {background:var(--gold);color:#06102e}
[data-tema="dark"] .btn-brand:hover{background:#ffd740;color:#06102e}

.btn-outline-primary{color:var(--out-cl) !important;border-color:var(--out-bd) !important;background:transparent !important}
.btn-outline-primary:hover{background:var(--out-hv) !important}

/* ═══ UTILITÁRIOS BOOTSTRAP SOBRESCRITOS ═══ */
.bg-dark-soft  {background:var(--bg-section) !important}
.text-light    {color:var(--text-h)     !important}
.text-light-50 {color:var(--text-muted) !important}

/* ═══ GLASS CARD ═══ */
.glass-card{border-radius:1.25rem;border:1px solid var(--border);background:var(--bg-card)}
.glass-card .form-control,
.glass-card .form-select{background:var(--bg-input);border-color:var(--border);color:var(--text-body)}
.glass-card .form-control:focus,
.glass-card .form-select:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(26,58,143,.12);background:var(--bg-card);color:var(--text-body)}
.glass-card label{color:var(--text-muted) !important}
.glass-card .form-control::placeholder{color:var(--text-muted)}

/* ═══ SERVICE CARDS ═══ */
.service-card{border-radius:1.25rem;border:1px solid var(--border);background:var(--bg-card);transition:transform .2s,box-shadow .2s,border-color .2s}
.service-card:hover{transform:translateY(-5px);border-color:var(--royal);box-shadow:0 12px 32px rgba(26,58,143,.15)}
.icon-wrapper{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--royal);color:var(--gold);font-size:1.4rem}

/* ═══ STATS ═══ */
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.stat-card{border-radius:1.25rem;padding:1.5rem 1.25rem;border:1px solid var(--border);background:var(--bg-card)}
.stat-number{display:block;font-size:2rem;font-weight:800;color:var(--text-stat)}
.stat-label{font-size:.85rem;color:var(--text-muted)}

/* ═══ SUPORTE REMOTO ═══ */
.remote-card{border-radius:1.25rem;border:1px solid var(--border);background:var(--bg-card);transition:transform .2s,box-shadow .2s}
.remote-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(26,58,143,.12)}
.remote-logo{height:34px;object-fit:contain}

/* ═══ DEPOIMENTOS ═══ */
.testimonial-card{max-width:640px;border-radius:1.25rem;padding:2rem 2.5rem;border:1px solid var(--border);background:var(--bg-card)}

/* ═══ CONTATO ═══ */
.contact-icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--ci-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--ci-cl);font-size:1.1rem}
#contato h2{color:var(--text-h) !important}
#contato .link-light{color:var(--ci-lk) !important}

/* ═══ BADGE SEÇÃO ═══ */
.bg-gradient-primary{background:var(--badge-bg) !important;color:var(--badge-cl) !important;border:1px solid var(--badge-bd) !important}

/* ═══ FOOTER ═══ */
.bg-footer{background:var(--royal-dark)}

/* ═══ WHATSAPP FLOAT ═══ */
.whatsapp-float{position:fixed;right:1.5rem;bottom:1.5rem;width:56px;height:56px;border-radius:999px;background:#22c55e;color:#fff;font-size:1.8rem;text-decoration:none;z-index:1030;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(34,197,94,.4)}
.whatsapp-float:hover{color:#fff;transform:scale(1.07)}

/* ═══ DEPO BTN ═══ */
.depo-btn{position:fixed;bottom:110px;right:22px;z-index:9999;width:62px;height:62px;border-radius:50%;background:var(--royal);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(26,58,143,.35);border:none}
.depo-btn:hover{transform:translateY(-4px);background:var(--royal-dark)}

/* ═══ LOGO / CARROSSEL / ESTRELAS ═══ */
.logo-expert{height:70px !important;width:auto !important;object-fit:contain}
.slide-img{width:50% !important;height:350px !important;object-fit:cover !important;object-position:center !important;display:block;border-radius:12px}
.star{cursor:pointer;font-size:32px;color:#ccc}
.star.hover,.star.active{color:var(--gold) !important}

/* ═══ MODAIS ═══ */
.modal-content.bg-dark{background:var(--bg-modal) !important;color:var(--text-body) !important;border:1px solid var(--border) !important}
.modal-content.bg-dark .form-control{background:var(--bg-input);border-color:var(--border);color:var(--text-body)}
.modal-content.bg-dark .form-label{color:var(--text-muted) !important}
.modal-content.bg-dark .border-secondary{border-color:var(--border) !important}
.modal-content.bg-dark .btn-close-white{filter:none}
[data-tema="dark"] .modal-content.bg-dark .btn-close-white{filter:invert(1)}
[data-tema="dark"] select option{background:#0d1a3e;color:#e2e8f8}

/* ═══ RESPONSIVO ═══ */
@media(max-width:767.98px){
    .hero{padding-top:3rem}
    .stats-grid{grid-template-columns:1fr 1fr}
    .hero-ring-1,.hero-ring-2,.hero-chip-1,.hero-chip-2{display:none}
    .hero-main-card{width:200px}
}