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

/* =========================================================
   CALHAS DUARTE
   TEMA: BLACK / GRAPHITE / ELECTRIC BLUE
   CSS COMPLETO — mantém as classes do site original
========================================================= */

:root{
    --primary:#1688ff;
    --primary-light:#48a7ff;
    --secondary:#18d4ff;

    --bg:#060a0f;
    --bg-soft:#0a1017;
    --bg-section:#0d141d;
    --bg-section-2:#101923;

    --card:rgba(255,255,255,.055);
    --card-hover:rgba(255,255,255,.085);

    --dark:#f5f8fc;
    --text:#c3ced9;
    --muted:#8795a4;

    --white:#ffffff;

    --border:rgba(255,255,255,.085);
    --border-blue:rgba(22,136,255,.22);

    --gradient:
        linear-gradient(
            125deg,
            #02070d 0%,
            #071b2d 45%,
            #0757a5 100%
        );

    --gradient-blue:
        linear-gradient(
            135deg,
            #0878f9 0%,
            #18d4ff 100%
        );

    --shadow:0 25px 70px rgba(0,0,0,.38);
    --shadow-blue:0 25px 70px rgba(8,120,249,.18);

    --radius:22px;
}

/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    font-family:"Inter",sans-serif;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
    line-height:1.6;
}

body::selection{
    background:var(--primary);
    color:#fff;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

button{
    font-family:inherit;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================================================
   BARRA DE ROLAGEM
========================================================= */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#f8f8f9;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );
    border-radius:20px;
}

/* =========================================================
   HEADER
========================================================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    padding:20px 0;

    background:transparent;

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;
}

header.scroll{
    padding:13px 0;

    background:rgba(5,9,14,.82);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 12px 40px rgba(0,0,0,.28);
}

header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
    width:120px;
    height:auto;
    transition:.35s;
}

.logo img:hover{
    transform:scale(1.05);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:35px;
}

.nav-links a{
    position:relative;

    color:#fff;

    font-size:15px;
    font-weight:600;

    transition:.3s;
}

header.scroll .nav-links a{
    color:#eef5fb;
}

.nav-links a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    border-radius:20px;

    background:var(--gradient-blue);

    box-shadow:
        0 0 12px rgba(24,212,255,.5);

    transition:.3s;
}

.nav-links a:hover::after{
    width:100%;
}

.nav-links a:hover{
    color:var(--secondary)!important;
}

.menu-toggle{
    display:none;

    width:45px;
    height:45px;

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

    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;

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

    color:#fff;

    font-size:25px;

    cursor:pointer;

    transition:.3s;
}

.menu-toggle:hover{
    background:rgba(22,136,255,.15);
    border-color:rgba(22,136,255,.35);
}

/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:100vh;

    display:flex;
    align-items:center;

    position:relative;

    padding-top:120px;

    color:#fff;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(24,212,255,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(8,120,249,.12),
            transparent 32%
        ),
        var(--gradient);
}

/* luz principal */

.hero::before{
    content:"";

    position:absolute;

    width:720px;
    height:720px;

    right:-300px;
    top:-300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(24,212,255,.20),
            rgba(8,120,249,.06) 40%,
            transparent 70%
        );

    pointer-events:none;
}

/* linhas de fundo */

.hero::after{
    content:"";

    position:absolute;
    inset:0;

    opacity:.10;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:65px 65px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events:none;
}

.hero-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;
}

.tag{
    display:inline-flex;
    align-items:center;

    padding:10px 24px;
    margin-bottom:25px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;

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

    color:#d9f8ff;

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

    letter-spacing:.3px;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        inset 0 0 20px rgba(255,255,255,.025),
        0 10px 30px rgba(0,0,0,.15);
}

.hero h1{
    color:#fff;

    font-size:58px;

    line-height:1.08;

    font-weight:900;

    letter-spacing:-2px;
}

.hero h1 span{
    color:#63dcff;

    text-shadow:
        0 0 25px rgba(24,212,255,.20);
}

.hero p{
    max-width:550px;

    margin:25px 0;

    color:rgba(235,244,251,.76);

    font-size:17px;

    line-height:1.8;
}

.hero-buttons{
    margin-top:30px;
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 40px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dcecf8
        );

    color:#06213b;

    font-weight:800;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    transition:.35s;
}

.btn-secondary:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 30px rgba(24,212,255,.10);
}

.hero-right{
    position:relative;
}

.hero-right img{
    width:100%;
    max-width:550px;
    margin:auto;

    filter:
        drop-shadow(0 30px 45px rgba(0,0,0,.38));

    animation:
        float 4s ease-in-out infinite;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }
}

/* =========================================================
   CARDS FLUTUANTES
========================================================= */

.card-float{
    position:absolute;

    padding:15px 20px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(25,38,52,.90),
            rgba(7,14,22,.88)
        );

    color:#eaf7ff;

    box-shadow:
        0 20px 50px rgba(0,0,0,.32);

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

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.card-float.one{
    top:20%;
    left:-20px;
}

.card-float.two{
    top:50%;
    right:0;
}

.card-float.three{
    bottom:15%;
    left:30px;
}

/* =========================================================
   NÚMEROS DO HERO
========================================================= */

.hero-numbers{
    display:flex;
    gap:45px;
    margin-top:50px;
}

.hero-numbers h2{
    color:#fff;
    font-size:35px;
    font-weight:900;
}

.hero-numbers p{
    margin:0;

    color:rgba(220,235,245,.60);

    font-size:14px;
}

/* =========================================================
   SEÇÕES
========================================================= */

section{
    position:relative;

    padding:100px 0;

    overflow:hidden;
}

/* =========================================================
   FUNDO DAS SEÇÕES
========================================================= */

#sobre,
#processo,
#depoimentos{
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(8,120,249,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(24,212,255,.045),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #080d13,
            #0b121a
        );
}

#servicos,
#beneficios{
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(24,212,255,.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0d151e,
            #080d13
        );
}

#galeria{
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(8,120,249,.06),
            transparent 28%
        ),
        #070c12;
}

/* linhas discretas */

#sobre::before,
#servicos::before,
#processo::before,
#galeria::before,
#beneficios::before,
#depoimentos::before{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.025);

    pointer-events:none;
}

/* =========================================================
   TÍTULOS
========================================================= */

.title{
    position:relative;
    z-index:2;

    max-width:850px;

    margin:auto;

    text-align:center;
}

.title span{
    color:var(--secondary);

    font-size:13px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.title h2{
    margin:20px 0;

    color:#f5f8fc;

    font-size:42px;

    line-height:1.15;

    letter-spacing:-1px;

    font-weight:900;
}

.title p{
    color:var(--muted);

    line-height:1.8;
}

/* =========================================================
   SOBRE
========================================================= */

.about-grid{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.about-card{
    position:relative;

    overflow:hidden;

    padding:35px;

    border:1px solid var(--border);
    border-radius:var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:var(--shadow);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    transition:.4s;
}

.about-card::before,
.service-card::before,
.benefit::before,
.testimonial-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            var(--secondary),
            transparent
        );

    transform:scaleX(0);

    transition:.4s;
}

.about-card:hover,
.service-card:hover,
.benefit:hover,
.testimonial-card:hover{
    transform:translateY(-10px);

    border-color:var(--border-blue);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.035)
        );

    box-shadow:
        var(--shadow),
        var(--shadow-blue);
}

.about-card:hover::before,
.service-card:hover::before,
.benefit:hover::before,
.testimonial-card:hover::before{
    transform:scaleX(1);
}

.about-card h3{
    margin-bottom:15px;

    color:#42a5ff;

    font-size:22px;
}

.about-card p{
    color:var(--text);

    line-height:1.75;
}

/* =========================================================
   SERVIÇOS
========================================================= */

.services-grid{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.service-card{
    position:relative;

    overflow:hidden;

    padding:35px;

    border:1px solid var(--border);
    border-radius:var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:var(--shadow);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    transition:.4s;
}

.service-icon{
    width:70px;
    height:70px;

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

    margin-bottom:25px;

    border:1px solid rgba(24,212,255,.12);
    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(8,120,249,.18),
            rgba(24,212,255,.08)
        );

    color:var(--secondary);

    font-size:30px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        inset 0 0 25px rgba(24,212,255,.035);
}

.service-card h3{
    margin-bottom:15px;

    color:#f1f6fb;

    font-size:22px;
}

.service-card p{
    color:var(--muted);

    line-height:1.75;
}

/* =========================================================
   PROCESSO
========================================================= */

.timeline{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.step{
    position:relative;

    padding:35px 20px;

    border:1px solid var(--border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:var(--shadow);

    text-align:center;

    transition:.4s;
}

.step:hover{
    transform:translateY(-8px);

    border-color:var(--border-blue);

    box-shadow:
        var(--shadow),
        var(--shadow-blue);
}

.step span{
    width:60px;
    height:60px;

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

    margin:0 auto 20px;

    border-radius:50%;

    background:var(--gradient-blue);

    color:#fff;

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

    box-shadow:
        0 15px 35px rgba(8,120,249,.25);
}

.step h3{
    margin-bottom:15px;

    color:#f2f7fb;
}

.step p{
    color:var(--muted);
}

/* =========================================================
   GALERIA
========================================================= */

.gallery{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.gallery img{
    width:100%;
    height:300px;

    object-fit:cover;

    border:1px solid var(--border);
    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.45s;
}

.gallery img:hover{
    transform:scale(1.035);

    border-color:rgba(24,212,255,.22);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 30px rgba(8,120,249,.08);
}

/* =========================================================
   BENEFÍCIOS
========================================================= */

.benefits-grid{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.benefit{
    position:relative;

    overflow:hidden;

    padding:30px;

    border:1px solid var(--border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    box-shadow:var(--shadow);

    transition:.4s;
}

.benefit h3{
    margin-bottom:15px;

    color:#f2f7fb;
}

.benefit p{
    color:var(--muted);
}

/* =========================================================
   NÚMEROS
========================================================= */

#numeros{
    position:relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(24,212,255,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(8,120,249,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #02060b,
            #061525,
            #02070c
        );
}

#numeros::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-400px;
    bottom:-450px;

    border-radius:50%;

    border:1px solid rgba(24,212,255,.08);

    box-shadow:
        0 0 100px rgba(8,120,249,.05);
}

#numeros .container{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:25px;
}

.number-card{
    text-align:center;

    padding:35px 20px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.30);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.counter{
    color:#4ebcff;

    font-size:45px;

    font-weight:900;

    text-shadow:
        0 0 25px rgba(22,136,255,.18);
}

.number-card p{
    color:#d0dbe4;

    font-weight:600;
}

/* =========================================================
   DEPOIMENTOS
========================================================= */

.testimonials{
    display:grid;

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

    gap:25px;

    margin-top:60px;
}

.testimonial-card{
    position:relative;

    overflow:hidden;

    padding:35px;

    border:1px solid var(--border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:var(--shadow);

    transition:.4s;
}

.stars{
    margin-bottom:20px;

    color:#ffc247;

    font-size:22px;

    letter-spacing:2px;
}

.testimonial-card p{
    color:var(--text);

    line-height:1.75;
}

.client{
    display:flex;
    align-items:center;

    gap:15px;

    margin-top:25px;
}

.client img{
    width:55px;
    height:55px;

    object-fit:cover;

    border:2px solid rgba(24,212,255,.25);

    border-radius:50%;
}

.client strong{
    display:block;

    color:#f3f7fb;
}

.client span{
    color:var(--muted);

    font-size:13px;
}

/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp{
    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

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

    border-radius:50%;

    background:#25d366;

    color:#fff;

    font-size:35px;

    z-index:999;

    box-shadow:
        0 15px 35px rgba(37,211,102,.20);

    animation:pulse 2s infinite;

    transition:.3s;
}

.whatsapp:hover{
    transform:scale(1.08);
}

@keyframes pulse{
    0%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,.65);
    }

    70%{
        box-shadow:
            0 0 0 20px rgba(37,211,102,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,0);
    }
}

/* =========================================================
   BOTÃO TOPO
========================================================= */

#topButton{
    position:fixed;

    right:25px;
    bottom:105px;

    width:45px;
    height:45px;

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

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#fff;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    z-index:999;

    box-shadow:
        0 12px 30px rgba(8,120,249,.25);

    transition:.3s;
}

#topButton.show{
    opacity:1;
    visibility:visible;
}

#topButton:hover{
    transform:translateY(-4px);
}

/* =========================================================
   FOOTER
========================================================= */

footer{
    position:relative;

    overflow:hidden;

    padding:70px 0 20px;

    color:#fff;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(24,212,255,.09),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #020509,
            #06101b,
            #071a2a
        );
}

footer::before{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-400px;
    bottom:-450px;

    border:1px solid rgba(255,255,255,.04);

    border-radius:50%;
}

.footer-grid{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:40px;
}

.footer-logo img{
    width:170px;

    margin-bottom:20px;
}

.footer-logo p{
    color:#93a4b5;

    line-height:1.8;
}

footer h3{
    margin-bottom:20px;

    color:#f3f8fc;

    font-size:20px;
}

footer ul li{
    margin-bottom:15px;

    color:#8fa1b2;
}

footer ul li i{
    margin-right:10px;

    color:var(--secondary);
}

footer a{
    color:#93a4b5;

    transition:.3s;
}

footer a:hover{
    color:#fff;
}

.footer-bottom{
    position:relative;
    z-index:2;

    margin-top:50px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#647789;
}

/* =========================================================
   CURSOR
========================================================= */

.cursor{
    width:20px;
    height:20px;

    position:fixed;

    border:2px solid var(--secondary);

    border-radius:50%;

    pointer-events:none;

    z-index:9999;

    transform:translate(-50%,-50%);

    transition:.1s;

    box-shadow:
        0 0 12px rgba(24,212,255,.15);
}

.cursor2{
    width:8px;
    height:8px;

    position:fixed;

    background:var(--secondary);

    border-radius:50%;

    pointer-events:none;

    z-index:9999;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 12px rgba(24,212,255,.35);
}

/* =========================================================
   ANIMAÇÕES
========================================================= */

.fade{
    opacity:0;

    transform:translateY(40px);

    transition:.8s;
}

.fade.show{
    opacity:1;

    transform:none;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .hero h1{
        font-size:45px;
    }

    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .timeline{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    header{
        padding:15px 0;
    }

    header.scroll{
        padding:11px 0;
    }

    .logo img{
        width:145px;
    }

    .menu-toggle{
        display:flex;
    }

    nav{
        position:absolute;

        top:calc(100% + 10px);
        right:5%;

        width:280px;

        padding:25px;

        border:1px solid rgba(255,255,255,.10);
        border-radius:18px;

        background:
            linear-gradient(
                145deg,
                rgba(18,28,40,.98),
                rgba(6,12,19,.98)
            );

        box-shadow:
            0 25px 60px rgba(0,0,0,.40);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);

        opacity:0;
        visibility:hidden;

        transform:translateY(-20px);

        transition:.3s;
    }

    nav.active{
        opacity:1;
        visibility:visible;

        transform:none;
    }

    .nav-links{
        flex-direction:column;

        align-items:flex-start;

        gap:5px;
    }

    .nav-links a,
    header.scroll .nav-links a{
        display:block;

        width:100%;

        padding:10px 0;

        color:#edf6fc!important;
    }

    .nav-links a::after{
        bottom:2px;
    }

    .hero{
        padding-top:120px;
    }

    .hero-grid{
        grid-template-columns:1fr;

        text-align:center;
    }

    .hero h1{
        font-size:38px;
        letter-spacing:-1px;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;

        font-size:15px;
    }

    .hero-buttons{
        display:flex;

        justify-content:center;
    }

    .hero-right{
        margin-top:40px;
    }

    .hero-numbers{
        justify-content:center;

        gap:25px;
    }

    .hero-numbers h2{
        font-size:28px;
    }

    .card-float{
        padding:10px 15px;

        border-radius:12px;

        font-size:12px;
    }

    .card-float.one{
        top:12%;
        left:10px;
    }

    .card-float.two{
        top:45%;
        right:10px;
    }

    .card-float.three{
        bottom:12%;
        left:10px;
    }

    section{
        padding:80px 0;
    }

    .title h2{
        font-size:32px;
    }

    .about-grid,
    .services-grid,
    .gallery,
    .testimonials,
    .benefits-grid,
    .timeline{
        grid-template-columns:1fr;
    }

    #numeros .container{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;

        text-align:center;
    }

    .footer-logo img{
        margin:auto;
    }

    .cursor,
    .cursor2{
        display:none;
    }
}

/* =========================================================
   TELAS PEQUENAS
========================================================= */

@media(max-width:450px){

    .container{
        width:calc(100% - 30px);
    }

    .logo img{
        width:125px;
    }

    .hero h1{
        font-size:32px;
    }

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

    .hero-buttons{
        width:100%;
    }

    .btn-secondary{
        width:100%;

        padding:15px 25px;
    }

    .hero-numbers{
        flex-direction:column;

        gap:18px;
    }

    .hero-numbers h2{
        font-size:27px;
    }

    .card-float{
        font-size:10px;

        padding:8px 10px;
    }

    .card-float.one{
        left:0;
    }

    .card-float.two{
        right:0;
    }

    .card-float.three{
        left:0;
    }

    .title h2{
        font-size:28px;
    }

    .about-card,
    .service-card,
    .testimonial-card{
        padding:28px 24px;
    }

    .gallery img{
        height:240px;
    }

    .whatsapp{
        width:55px;
        height:55px;

        right:18px;
        bottom:18px;

        font-size:30px;
    }

    #topButton{
        right:18px;
        bottom:88px;
    }
}