/* ====== Base / Tema ====== */
        
         :root {
            --c-teal: #2B90AA;
            --c-lime: #A3C653;
            --c-green: #4F944E;
            --c-blue: #2C5D85;
            --c-bg: #F6F8FA;
            /* fundo mais neutro */
            --c-surface: #FFFFFF;
            --c-text: #1F2937;
            --c-muted: #6B7280;
            --radius: 16px;
            --radius-sm: 12px;
            --shadow: 0 10px 30px rgba(0, 0, 0, .08);
            --shadow-sm: 0 6px 14px rgba(0, 0, 0, .06);
        }
        
        * {
            box-sizing: border-box
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
            overflow-x: clip;
        }
        
        body {
            font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
            color: var(--c-text);
            /*background: #dBf0fA;*/
            background: linear-gradient( to right, var(--c-text) 0%, var(--c-blue) 50%, var(--c-text) 100%) no-repeat;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        p {
            margin: 0 0 .9em;
            text-align: justify;
            text-indent: 1.3em;
            padding: 0 .7em;
        }
        
        img {
            max-width: 100%;
            display: block;
            border-radius: var(--radius-sm)
        }
        
        section {
            scroll-margin-top: 80px;
        }
        /* Acessibilidade: foco visível */
        
         :focus-visible {
            outline: 3px solid var(--c-teal);
            outline-offset: 2px;
            border-radius: 6px;
        }
        /* Reduz animações se o usuário preferir */
        
        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important
            }
        }
        /* ====== Backgrounds ====== */
        
        .divbg {
            position: relative;
            overflow: hidden;
            padding: 20px;
            border-radius: 20px;
        }
        
        .divbg::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.7);
            z-index: 0;
            transition: background 0.4s ease, opacity 0.4s ease;
        }
        
        .divbg:hover::before,
        .divbg.ativo::before {
            background: rgba(255, 255, 255, 0.9);
            opacity: 1;
        }
        
        .divbg>* {
            position: relative;
            z-index: 1;
        }
        
        .sobrediv {
            background: url('./img/Eu.png') no-repeat center / cover;
        }
        
        .planosdiv {
            background: url('./img/Planos.jpg') no-repeat center / cover;
        }
        
        .cm {
            background: url('./img/2.jpg') no-repeat center / cover;
        }
        
        .vd {
            background: url('./img/3.jpg') no-repeat center / cover;
        }
        
        .tc {
            background: url('./img/4.jpg') no-repeat center / cover;
        }
        /* ===== Animação ===== */
        /* Estado inicial — fora da tela à direita */
        
        .reveal {
            opacity: 0;
            transition: transform 0.8s ease-out, opacity 0.8s ease-out;
            will-change: transform, opacity;
            backface-visibility: hidden;
            contain: paint;
        }
        
        .reveal[data-dir="left"] {
            transform: translateX(-180px);
        }
        
        .reveal[data-dir="right"] {
            transform: translateX( 180px);
        }
        
        .reveal.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        /* opcional: respeitar usuários que preferem menos animação */
        
        @media (prefers-reduced-motion: reduce) {
            .reveal {
                transition: none;
                transform: none;
                opacity: 1;
            }
        }
        /* .is-visible zera o transform como já está */
        /* ===== Contato ===== */
        /* Container geral */
        
        #contato .links {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 16px;
        }
        /* Base dos botões */
        
        .btn-contact {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            padding: 10px 14px;
            transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
            color: var(--c-text);
            border: 2px solid transparent;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
        }
        
        .btn-contact:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
        }
        /* Variações de cor */
        
        .btn-phone {
            background: #e6f8f8;
            border-color: var(--c-teal);
            color: var(--c-blue);
        }
        
        .btn-phone:hover {
            background: var(--c-teal);
            color: #fff;
        }
        
        .btn-map {
            background: #f0f7e8;
            border-color: var(--c-lime);
            color: #2a572a;
        }
        
        .btn-map:hover {
            background: var(--c-lime);
            color: #fff;
        }
        
        .btn-local {
            background: #eef3ff;
            border-color: var(--c-blue);
            color: var(--c-blue);
        }
        
        .btn-local:hover {
            background: var(--c-blue);
            color: #fff;
        }
        
        .btn-insta {
            background: #fdf3f3;
            border-color: #e1306c;
            color: #b91d54;
        }
        
        .btn-insta:hover {
            background: #e1306c;
            color: #fff;
        }
        
        .btn-linkedin {
            background: #eef6ff;
            border-color: #0077b5;
            color: #0077b5;
        }
        
        .btn-linkedin:hover {
            background: #0077b5;
            color: #fff;
        }
        /* ====== Layout ====== */
        
        .container {
            width: min(1120px, 92%);
            margin-inline: auto
        }
        
        .section {
            padding: 16px 0 16px;
        }
        
        .section.alt2 {
            background: radial-gradient(ellipse at center, #fff 0%, var(--c-muted) 100%);
            padding: 20px;
        }
        
        h1,
        h2,
        h3,
        h4 {
            line-height: 1.5;
            margin: 0 0 6px;
            padding: 8px;
            text-align: center;
            border-radius: 12px;
        }
        
        h2,
        h3,
        h4 {
            background: hsl(from var(--c-bg) h s l / 0.6);
            color: var(--c-blue);
        }
        
        h1 {
            background: hsl(from var(--c-blue) h s l / 0.6);
            font-size: clamp(28px, 4vw, 44px);
            color: var(--c-surface);
        }
        
        h2 {
            font-size: clamp(22px, 3vw, 32px)
        }
        
        h3 {
            font-size: clamp(18px, 2.4vw, 22px)
        }
        
        .lead {
            font-size: clamp(16px, 2.2vw, 18px);
            color: var(--c-muted)
        }
        /* ====== Header ====== */
        
        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--c-surface);
            border-bottom: 1px solid #eef0f3;
        }
        
        .header-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
        }
        
        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--c-text);
            font-weight: 700
        }
        
        .logo-dot {
            width: 14px;
            height: 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--c-teal), var(--c-blue))
        }
        
        .brand-text {
            white-space: nowrap;
            font-size: 1.05rem;
        }
        
        .menu-btn {
            margin-left: auto;
            font-size: 20px;
            background: var(--c-surface);
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 6px 10px;
            display: none
        }
        
        .nav {
            display: flex;
            gap: 16px;
            justify-content: flex-end;
            align-items: center
        }
        
        .nav a {
            color: var(--c-text);
            text-decoration: none;
            font-weight: 500;
            padding: 6px 8px;
            margin: 0px;
            border-radius: 8px;
            border: 3px outset var(--c-green);
        }
        
        .nav a:hover {
            background: var(--c-lime);
        }
        /* Mobile menu */
        
        @media (max-width:880px) {
            .menu-btn {
                display: block
            }
            .nav {
                position: fixed;
                inset: 64px 0 auto 0;
                background: var(--c-surface);
                padding: 16px;
                border-bottom: 1px solid #eef0f3;
                display: none;
                flex-direction: column;
                align-items: flex-start
            }
            .nav.open {
                display: flex
            }
        }
        /* ====== Buttons ====== */
        
        .btn-wpp {
            display: inline-flex;
            background: radial-gradient(ellipse at center, var(--c-green) 60%, var(--c-lime) 100%);
            color: #F3F3F3;
            text-decoration: none;
            font-weight: 900;
            width: 100%;
            max-width: 300px;
            margin: 0 auto 10px;
            align-items: center;
            border-radius: 20px;
            padding: 10px 30px;
        }
        
        .btn-wpp:hover {
            background: radial-gradient(ellipse at center, var(--c-lime) 60%, var(--c-lime) 100%);
            color: var(--c-blue);
        }
        
        .btn-outline {
            background: #fff;
            border-color: var(--c-blue);
            color: var(--c-blue)
        }
        
        .btn-outline:hover {
            background: var(--c-blue);
            color: #fff
        }
        /* ====== Hero ====== */
        
        .hero {
            background: url('./img/mfc.jpg') no-repeat center center / cover;
        }
        
        .hero-img {
            height: auto;
            display: block;
            object-fit: cover;
            margin-bottom: 20px;
            border-radius: 0;
            box-shadow: var(--shadow-sm);
        }
        
        .hero-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 32px;
            align-items: center
        }
        
        .hero-ctas {
            display: flex;
            gap: 12px;
            margin-top: 18px
        }
        
        .hero-media img {
            box-shadow: var(--shadow)
        }
        
        @media (max-width:880px) {
            .hero-grid {
                grid-template-columns: 1fr
            }
        }
        /* Ícones em parágrafos */
        
        .with-icon {
            text-indent: 0;
            padding-left: .7em;
            line-height: 1.5;
            margin-bottom: .9em;
        }
        
        @media (max-width: 520px) {
            .with-icon {
                text-indent: 0;
                padding: 0 .7em;
            }
        }
        /* Ícones em contato */
        
        .icone {
            height: 30px;
        }
        /* ====== Grids ====== */
        
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0px;
            column-gap: 20px;
            align-items: start
        }
        
        @media (max-width:880px) {
            .grid-2 {
                grid-template-columns: 1fr
            }
        }
        
        .cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 18px
        }
        
        @media (max-width:1024px) {
            .cards {
                grid-template-columns: repeat(2, 1fr)
            }
        }
        
        @media (max-width:640px) {
            .cards {
                grid-template-columns: 1fr
            }
            nav a {
                width: 100%;
            }
        }
        
        .card {
            border: 1px solid #eef0f3;
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
        }
        
        .card h3 {
            margin-bottom: 6px
        }
        
        .card .link {
            display: inline-block;
            margin-top: 8px;
            color: var(--c-green);
            text-decoration: none;
            font-weight: 600
        }
        
        .card .link:hover {
            color: var(--c-blue)
        }
        /* ====== Steps ====== */
        
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 16px
        }
        
        @media (max-width:880px) {
            .steps {
                grid-template-columns: 1fr
            }
        }
        
        .step {
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: var(--radius);
            padding: 18px;
            box-shadow: var(--shadow);
            display: flex;
            gap: 14px;
            align-items: flex-start
        }
        
        .step-num {
            display: inline-grid;
            place-items: center;
            min-width: 34px;
            min-height: 34px;
            border-radius: 999px;
            background: var(--c-lime);
            color: #1a2a1a;
            font-weight: 800
        }
        /* ====== Contato ====== */
        
        .notice {
            background: #fff;
            border: 1px dashed var(--c-green);
            padding: 14px;
            border-radius: 12px;
            color: #234;
        }
        /* ====== Footer ====== */
        
        .site-footer {
            background: #0f172a;
            color: #cbd5e1;
            padding: 26px 0;
            margin-top: 8px
        }
        
        .footer-grid {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap
        }
        
        .footer-grid p {
            margin: 0
        }
        /* ====== Floating WhatsApp ====== */
        /* FAB WhatsApp – robusto para mobile/iOS com safe-area */
        
        .fab-whatsapp {
            position: fixed;
            right: 16px;
            bottom: 56px;
            width: 56px;
            height: 56px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--c-muted);
            box-shadow: var(--shadow);
            z-index: 9999;
            pointer-events: auto;
            transform: translateZ(0);
            will-change: transform;
        }
        /* iOS Safari/Android com notch: empurra acima da área segura */
        
        @supports (bottom: env(safe-area-inset-bottom)) {
            .fab-whatsapp {
                right: calc(16px + env(safe-area-inset-right));
                bottom: calc(56px + env(safe-area-inset-bottom));
            }
        }
        /* só para garantir que a imagem dentro fique visível/tamanho certo */
        
        .fab-whatsapp img {
            height: 35px;
            display: block;
        }
        
        .fab-whatsapp:hover,
        .fab-whatsapp:focus-visible {
            background: var(--c-teal);
            outline: none;
        }
        /* ===== CELULAR ===== */
        
        @media (max-width: 768px) {
            .cards {
                grid-template-columns: 1fr;
                gap: 0px
            }
            .card {
                padding: 22px 18px
            }
            #servicos h2 {
                font-size: 1.6rem;
                margin-bottom: 28px
            }
            .card h3 {
                font-size: 1.2rem
            }
            .card p {
                font-size: 0.95rem
            }
        }
        /* ===== DESKTOP ===== */
        
        @media (min-width: 769px) {
            .cards {
                grid-template-columns: repeat(3, 1fr);
                gap: 32px
            }
            .card {
                max-width: 100%;
                min-height: 280px
            }
            .card p {
                font-size: 1.05rem
            }
            #servicos h2 {
                font-size: 2rem
            }
        }