/* ============================================================
   PATCH 3 — hero claro + abordagem wrapper + CTA + redes sociais
   ============================================================ */

/* Hero / Início — mais claro, menos azul */
#inicio, .hero, .hero-section {
    background:
        radial-gradient(ellipse 65% 40% at 25% 0%, rgba(255, 107, 26, 0.05), transparent 70%),
        radial-gradient(ellipse 50% 40% at 90% 90%, rgba(255, 180, 120, 0.03), transparent 70%),
        #fafafa !important;
}

/* ----------------------------------------------------------
   Abordagem — wrapper com glass, cards interiores mantidos
   ---------------------------------------------------------- */
#abordagem {
    background:
        linear-gradient(180deg, rgba(255, 107, 26, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
        rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
            backdrop-filter: saturate(160%) blur(14px);
    position: relative;
}

/* Wrapper glass por volta do .row de step-cards */
#abordagem .container > .row.g-4,
#abordagem .container > .row.justify-content-center {
    position: relative;
    padding: 2rem 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 107, 26, 0.18);
    box-shadow: 0 12px 40px rgba(15, 23, 41, 0.06);
    overflow: hidden;
}

/* Reflexo de vidro no wrapper */
#abordagem .container > .row.g-4::before,
#abordagem .container > .row.justify-content-center::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 107, 26, 0.35), rgba(255, 255, 255, 0.2) 40%, rgba(255, 107, 26, 0.2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

/* Manter step-cards originais (com borda superior laranja) */
#abordagem .step-card {
    /* não forçar fundo — mantém o original */
    border-top: 3px solid var(--cyber-orange, #ff6b1a) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* ==========================================================
   CTA "Quer conhecer-nos melhor?" — glass
   ========================================================== */
#contacto .cta-box,
.cta-section,
section.cta,
.conhecer-box,
.cta-card,
[class*="conhecer-nos"],
#contacto .container .text-center,
#contacto .row.align-items-center,
#contacto .text-center.py-5,
section#contacto > .container > .row:last-child,
section#contacto > .container > div:last-child {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 107, 26, 0.2) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 40px rgba(15, 23, 41, 0.07) !important;
    position: relative;
}

/* ==========================================================
   Redes sociais no rodapé — hover com cores de marca
   ========================================================== */
footer a, .footer a, .social-links a, .social a, [class*="social"] a {
    transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

/* Facebook */
footer a[href*="facebook"]:hover,
.social a[href*="facebook"]:hover,
[class*="social"] a[href*="facebook"]:hover,
footer a[href*="facebook"]:hover i,
.social a[href*="facebook"]:hover i,
[class*="social"] a[href*="facebook"]:hover i {
    color: #1877F2 !important;
}

/* Instagram — gradiente */
footer a[href*="instagram"]:hover,
.social a[href*="instagram"]:hover,
[class*="social"] a[href*="instagram"]:hover,
footer a[href*="instagram"]:hover i,
.social a[href*="instagram"]:hover i,
[class*="social"] a[href*="instagram"]:hover i {
    color: transparent !important;
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* WhatsApp */
footer a[href*="whatsapp"]:hover,
footer a[href*="wa.me"]:hover,
.social a[href*="whatsapp"]:hover,
.social a[href*="wa.me"]:hover,
[class*="social"] a[href*="whatsapp"]:hover,
[class*="social"] a[href*="wa.me"]:hover,
footer a[href*="whatsapp"]:hover i,
footer a[href*="wa.me"]:hover i,
.social a[href*="whatsapp"]:hover i,
[class*="social"] a[href*="whatsapp"]:hover i {
    color: #25D366 !important;
}

/* LinkedIn */
footer a[href*="linkedin"]:hover,
.social a[href*="linkedin"]:hover,
[class*="social"] a[href*="linkedin"]:hover,
footer a[href*="linkedin"]:hover i,
.social a[href*="linkedin"]:hover i,
[class*="social"] a[href*="linkedin"]:hover i {
    color: #0A66C2 !important;
}

/* X / Twitter */
footer a[href*="twitter"]:hover,
footer a[href*="x.com"]:hover,
.social a[href*="twitter"]:hover,
.social a[href*="x.com"]:hover,
footer a[href*="twitter"]:hover i,
footer a[href*="x.com"]:hover i {
    color: #000000 !important;
}

/* YouTube */
footer a[href*="youtube"]:hover,
footer a[href*="youtu.be"]:hover,
.social a[href*="youtube"]:hover,
.social a[href*="youtu.be"]:hover,
footer a[href*="youtube"]:hover i,
footer a[href*="youtu.be"]:hover i,
.social a[href*="youtube"]:hover i {
    color: #FF0000 !important;
}

/* TikTok */
footer a[href*="tiktok"]:hover,
.social a[href*="tiktok"]:hover,
footer a[href*="tiktok"]:hover i,
.social a[href*="tiktok"]:hover i {
    color: #000000 !important;
    text-shadow: 2px 0 #FF0050, -2px 0 #00F2EA;
}

/* Microscale-up subtil no hover */
footer a:hover i,
.social a:hover i,
[class*="social"] a:hover i {
    transform: scale(1.15);
}