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

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

/* Segurança extra contra rolagem lateral no mobile */
html, body{
    max-width:100%;
    overflow-x:hidden;
}

.fullFULL {position: absolute; width: 0; height: 0; visibility: hidden; opacity: 0; overflow: hidden;} 

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#111;
    color:#f4f4f4;
    overflow-x:hidden;
}

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

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
}


/* =========================================================
   VARIÁVEIS
========================================================= */

:root{

    --yellow:#ffc400;

    --yellow-dark:#e0a900;

    --black:#0c0c0c;

    --black-2:#111111;

    --black-3:#181818;

    --gray:#222;

    --gray-2:#8c8c8c;

    --light:#f2f2f2;

    --white:#ffffff;

    --border:rgba(255,255,255,.10);

}


/* =========================================================
   CONTAINER
========================================================= */

.container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:78px;

    z-index:1000;

    background:rgba(12,12,12,.94);

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

    transition:.3s;
}

header.scrolled{

    background:rgba(12,12,12,.98);

    box-shadow:0 10px 40px rgba(0,0,0,.4);
}

.header-inner{

    width:min(1180px,calc(100% - 40px));

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo{

    display:flex;

    align-items:center;

    gap:12px;
}

.logo-mark{

    width:42px;
    height:42px;

    background:var(--yellow);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Barlow Condensed",sans-serif;

    font-size:25px;

    font-weight:900;

    transform:skew(-8deg);
}

.logo-text{

    font-family:"Barlow Condensed",sans-serif;

    font-size:25px;

    font-weight:800;

    letter-spacing:.5px;
}

.logo-text span{

    color:var(--yellow);
}


/* =========================================================
   NAV
========================================================= */

nav{

    display:flex;

    align-items:center;

    gap:30px;
}

nav a{

    color:#cfcfcf;

    font-size:13px;

    font-weight:600;

    transition:.25s;
}

nav a:hover{

    color:var(--yellow);
}

.nav-cta{

    background:var(--yellow);

    color:#111 !important;

    padding:12px 20px;

    font-weight:800;

    clip-path:polygon(
        7px 0,
        100% 0,
        calc(100% - 7px) 100%,
        0 100%
    );

    transition:.25s;
}

.nav-cta:hover{

    background:#fff;

    transform:translateY(-2px);
}


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

.menu-button{

    display:none;

    width:42px;
    height:42px;

    border:1px solid #333;

    background:#181818;

    color:white;

    font-size:20px;

    cursor:pointer;
}


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

.hero {
    position: relative;
    min-height: 520px;

    /* AJUSTE PRINCIPAL: mais espaço abaixo do menu fixo */
    padding: 130px 7% 90px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            115deg,
            #0a0a0a 0%,
            #0d0d0d 55%,
            #111111 100%
        );

    overflow: hidden;
}

/* Texto gigante de fundo */
.hero-bg-text {
    position: absolute;
    top: -20px;
    left: 90px;

    font-size: clamp(100px, 14vw, 210px);
    font-weight: 900;
    line-height: 1;

    color: rgba(255,255,255,0.025);

    pointer-events: none;
    white-space: nowrap;
}

/* Linha diagonal */
.hero::after {
    content: "";

    position: absolute;

    width: 2px;
    height: 700px;

    left: 48%;
    top: -150px;

    background: rgba(255,193,7,0.15);

    transform: rotate(43deg);

    pointer-events: none;
}

/* Conteúdo */
.hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;
}

/* Título */
.hero-title {
    margin-bottom: 32px;
}

.hero-title span,
.hero-title strong {
    display: block;

    font-weight: 900;
    line-height: .95;
    letter-spacing: -3px;
}

.hero-title span {
    color: #f5f5f5;
    font-size: clamp(52px, 6vw, 82px);
}

.hero-title strong {
    color: #ffc400;
    font-size: clamp(52px, 6vw, 82px);
}

/* Descrição */
.hero-description {
    max-width: 650px;

    margin: 0 0 38px;

    color: #d5d5d5;

    font-size: 17px;
    line-height: 1.75;
}

/* Botões */
.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;

    position: relative;
    z-index: 5;
}

.hero-buttons a {
    display: inline-flex;

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

    min-height: 54px;

    padding: 0 28px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;

    transition: .25s ease;
}

/* Botão amarelo */
.btn-primary {
    background: #ffc400;
    color: #080808;
    border: 1px solid #ffc400;
}

.btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Botão transparente */
.btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #555;
}

.btn-secondary:hover {
    background: #ffc400;
    color: #080808;
    border-color: #ffc400;
    transform: translateY(-2px);
}

/* ==============================
   RESPONSIVO TABLET
================================ */
@media (max-width: 800px) {

    .hero {
        min-height: auto;
        padding: 120px 6% 70px;
    }

    .hero-title span,
    .hero-title strong {
        font-size: clamp(42px, 10vw, 64px);
        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 15px;
        max-width: 100%;
    }

    .hero::after {
        left: 58%;
    }
}

/* ==============================
   RESPONSIVO MOBILE
================================ */
@media (max-width: 500px) {

    .hero {
        min-height: auto;

        /* espaçamento correto abaixo do header */
        padding: 110px 20px 56px;
    }

    .hero-bg-text {
        left: 16px;
        top: 12px;

        font-size: 72px;
    }

    .hero::after {
        left: 72%;
        top: -180px;
        height: 620px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        margin-bottom: 24px;
    }

    .hero-title span,
    .hero-title strong {
        font-size: 38px;
        line-height: .96;
        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 26px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons a {
        width: 100%;
        min-height: 52px;
    }
}


/* ==============================
   DIFERENCIAIS
================================ */

.features {
    position: relative;

    z-index: 10;

    display: grid;

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

    width: 100%;

    background: #0b0b0b;

    border-top: 1px solid #292929;

    border-bottom: 1px solid #292929;
}


/* Cada item */

.feature {
    min-height: 105px;

    padding: 24px 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right: 1px solid #292929;

    position: relative;
}

.feature:last-child {
    border-right: none;
}


/* Linha amarela no topo */

.feature:first-child::before,
.feature:nth-child(2)::before,
.feature:nth-child(3)::before {

    content: "";

    position: absolute;

    top: -2px;
    left: 0;

    width: 100%;

    height: 2px;

    background: #ffc400;

    transform: scaleX(0);

    transform-origin: left;

    transition: .3s ease;
}

.feature:hover::before {
    transform: scaleX(1);
}


/* Título */

.feature-title {
    color: #ffc400;

    font-size: 21px;

    font-weight: 900;

    text-transform: uppercase;

    margin-bottom: 7px;
}


/* Subtítulo */

.feature-subtitle {
    color: #999;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* ==============================
   RESPONSIVO
================================ */

@media (max-width: 800px) {

    .hero {
        min-height: auto;

        padding: 70px 7% 60px;
    }

    .hero-title span,
    .hero-title strong {
        font-size: clamp(43px, 11vw, 68px);

        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 15px;

        max-width: 100%;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .feature {
        min-height: 90px;

        border-right: none;

        border-bottom: 1px solid #292929;
    }

    .feature:last-child {
        border-bottom: none;
    }

}


@media (max-width: 500px) {

    .hero {
        padding: 55px 22px 50px;
    }

    .hero-bg-text {
        left: 20px;

        top: 20px;

        font-size: 90px;
    }

    .hero-title {
        margin-bottom: 25px;
    }

    .hero-title span,
    .hero-title strong {
        font-size: 45px;
    }

    .hero-description {
        font-size: 14px;

        line-height: 1.6;

        margin-bottom: 28px;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .hero-buttons a {
        width: 100%;
    }

    .feature {
        padding: 22px;
    }

}


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

.hero-bottom{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    background:rgba(12,12,12,.9);

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

    z-index:5;
}

.hero-info{

    display:grid;

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

.hero-info-item{

    padding:22px 25px;

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

.hero-info-item:last-child{

    border-right:0;
}

.hero-info strong{

    display:block;

    color:var(--yellow);

    font-family:"Barlow Condensed",sans-serif;

    font-size:22px;

    text-transform:uppercase;

    margin-bottom:4px;
}

.hero-info span{

    font-size:11px;

    color:#999;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* =========================================================
   INTRO
========================================================= */

.intro{

    background:var(--light);

    color:#111;

    padding:110px 0;
}

.intro-grid{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    gap:90px;

    align-items:center;
}

.section-tag{

    display:inline-block;

    color:#111;

    background:var(--yellow);

    padding:6px 11px;

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.5px;

    margin-bottom:18px;
}

.intro h2{

    font-family:"Barlow Condensed",sans-serif;

    font-size:clamp(45px,5vw,68px);

    line-height:.95;

    text-transform:uppercase;

    margin-bottom:20px;
}

.intro h2 span{

    color:#b58d00;
}

.intro-text{

    color:#626262;

    line-height:1.8;

    font-size:15px;
}

.intro-features{

    display:grid;

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

    gap:14px;
}

.intro-feature{

    background:white;

    padding:27px;

    border:1px solid #e2e2e2;

    position:relative;

    overflow:hidden;

    transition:.3s;
}

.intro-feature::after{

    content:"";

    position:absolute;

    width:4px;

    height:100%;

    left:0;
    top:0;

    background:var(--yellow);
}

.intro-feature:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.intro-feature-number{

    font-family:"Barlow Condensed",sans-serif;

    font-size:34px;

    color:#d0d0d0;

    font-weight:900;

    margin-bottom:12px;
}

.intro-feature h3{

    font-family:"Barlow Condensed",sans-serif;

    font-size:23px;

    text-transform:uppercase;

    margin-bottom:8px;
}

.intro-feature p{

    color:#777;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   SERVICES
========================================================= */

.services{

    background:#111;

    padding:110px 0;
}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:30px;

    margin-bottom:50px;
}

.section-header-left{

    max-width:600px;
}

.dark-tag{

    color:var(--yellow);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;
}

.section-header h2{

    font-family:"Barlow Condensed",sans-serif;

    font-size:clamp(45px,5vw,65px);

    line-height:.95;

    text-transform:uppercase;
}

.section-header p{

    max-width:400px;

    color:#858585;

    line-height:1.7;

    font-size:13px;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.services-grid{

    display:grid;

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

    gap:2px;

    background:#292929;
}

.service{

    min-height:280px;

    padding:38px;

    background:#151515;

    position:relative;

    overflow:hidden;

    transition:.35s;
}

.service:hover{

    background:#1d1d1d;
}

.service-number{

    position:absolute;

    top:25px;

    right:28px;

    font-family:"Barlow Condensed",sans-serif;

    color:#303030;

    font-size:50px;

    font-weight:900;
}

.service-icon{

    width:50px;
    height:50px;

    background:var(--yellow);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    margin-bottom:30px;
}

.service h3{

    font-family:"Barlow Condensed",sans-serif;

    font-size:29px;

    text-transform:uppercase;

    margin-bottom:12px;
}

.service p{

    color:#898989;

    font-size:12px;

    line-height:1.7;

    max-width:310px;
}

.service-arrow{

    position:absolute;

    bottom:30px;

    right:30px;

    color:var(--yellow);

    font-size:22px;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio{

    background:#f2f2f2;

    color:#111;

    padding:110px 0;
}

.portfolio .section-header h2{

    color:#111;
}

.filters{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:30px;
}

.filter{

    border:1px solid #d3d3d3;

    background:transparent;

    color:#555;

    padding:10px 17px;

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    cursor:pointer;

    transition:.25s;
}

.filter:hover,
.filter.active{

    background:#111;

    color:var(--yellow);

    border-color:#111;
}


/* =========================================================
   PORTFOLIO GRID
========================================================= */

.portfolio-grid{

    display:grid;

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

    gap:18px;
}

.work{

    position:relative;

    overflow:hidden;

    background:#ddd;

    cursor:pointer;
}

.work:nth-child(1){

    grid-column:span 7;
}

.work:nth-child(2){

    grid-column:span 5;
}

.work:nth-child(3){

    grid-column:span 5;
}

.work:nth-child(4){

    grid-column:span 7;
}

.work:nth-child(n+5){

    grid-column:span 4;
}

.work-image{

    height:330px;

    overflow:hidden;
}

.work:nth-child(1) .work-image,
.work:nth-child(4) .work-image{

    height:390px;
}

.work img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s;
}

.work:hover img{

    transform:scale(1.07);
}

.work-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        transparent 65%
    );

    opacity:.9;
}

.work-info{

    position:absolute;

    left:25px;
    right:25px;
    bottom:22px;

    color:white;
}

.work-info small{

    color:var(--yellow);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.work-info h3{

    font-family:"Barlow Condensed",sans-serif;

    font-size:29px;

    text-transform:uppercase;

    margin-top:5px;
}

.work-view{

    position:absolute;

    top:20px;
    right:20px;

    width:42px;
    height:42px;

    background:var(--yellow);

    color:#111;

    display:flex;

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

    font-weight:900;

    opacity:0;

    transform:translateY(-10px);

    transition:.3s;
}

.work:hover .work-view{

    opacity:1;

    transform:translateY(0);
}


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

.numbers{
    background:var(--yellow);
    color:#111;
    padding:70px 0;
    overflow:hidden; /* impede qualquer overflow lateral */
}

.numbers-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
}

.number{
    padding:15px 20px;
    border-right:1px solid rgba(0,0,0,.15);
    text-align:center;
    min-width:0; /* ESSENCIAL para o grid encolher no mobile */
}

.number:last-child{
    border-right:0;
}

.number strong{
    display:block;
    font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(38px,8vw,58px);
    line-height:1;
    font-weight:900;
    white-space:nowrap; /* evita quebrar 500+ */
}

.number span{
    display:block;
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.8px;
    margin-top:8px;
    line-height:1.3;
    word-break:break-word;
}

/* ==============================
   MOBILE
================================ */
@media (max-width:650px){

    .numbers{
        padding:55px 0;
    }

    .numbers-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0;
    }

    .number{
        padding:22px 10px;
        border-right:1px solid rgba(0,0,0,.15);
        border-bottom:1px solid rgba(0,0,0,.15);
    }

    .number:nth-child(2n){
        border-right:0;
    }

    .number:nth-last-child(-n+2){
        border-bottom:0;
    }

    .number strong{
        font-size:clamp(34px,11vw,50px);
    }

    .number span{
        font-size:9px;
        letter-spacing:.5px;
    }
}


/* =========================================================
   PROCESS
========================================================= */

.process{

    background:#fff;

    color:#111;

    padding:110px 0;
}

.process-grid{

    display:grid;

    grid-template-columns:.75fr 1.25fr;

    gap:90px;
}

.process-title h2{

    font-family:"Barlow Condensed",sans-serif;

    font-size:clamp(48px,5vw,70px);

    text-transform:uppercase;

    line-height:.9;
}

.process-title h2 span{

    color:#c09600;
}

.process-title p{

    color:#777;

    line-height:1.7;

    font-size:13px;

    margin-top:20px;

    max-width:400px;
}

.steps{

    display:flex;

    flex-direction:column;
}

.step{

    display:grid;

    grid-template-columns:65px 1fr;

    gap:20px;

    padding:25px 0;

    border-bottom:1px solid #ddd;
}

.step-number{

    width:48px;
    height:48px;

    border:2px solid #111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Barlow Condensed",sans-serif;

    font-size:21px;

    font-weight:900;
}

.step h3{

    font-family:"Barlow Condensed",sans-serif;

    font-size:25px;

    text-transform:uppercase;

    margin-bottom:5px;
}

.step p{

    color:#777;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials{

    background:#111;

    padding:110px 0;
}

.testimonial-grid{

    display:grid;

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

    gap:18px;
}

.testimonial{

    background:#181818;

    border:1px solid #292929;

    padding:35px;

    position:relative;
}

.quote{

    color:var(--yellow);

    font-size:42px;

    font-family:Georgia,serif;

    line-height:1;

    margin-bottom:18px;
}

.testimonial p{

    color:#aaa;

    font-size:13px;

    line-height:1.8;

    margin-bottom:25px;
}

.client{

    display:flex;

    align-items:center;

    gap:12px;
}

.client-avatar{

    width:38px;
    height:38px;

    background:var(--yellow);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Barlow Condensed",sans-serif;

    font-weight:900;
}

.client strong{

    display:block;

    font-size:12px;
}

.client span{

    color:#666;

    font-size:10px;
}


/* =========================================================
   CTA
========================================================= */

.final-cta{

    padding:100px 0;

    background:

        linear-gradient(
            135deg,
            rgba(255,196,0,.97),
            rgba(255,196,0,.90)
        );
    
    color:#111;

    position:relative;

    overflow:hidden;
}

.final-cta::before{

    content:"LP";

    position:absolute;

    right:-30px;
    bottom:-100px;

    font-family:"Barlow Condensed",sans-serif;

    font-size:380px;

    font-weight:900;

    color:rgba(0,0,0,.07);

    line-height:1;
}

.final-cta-content{

    position:relative;

    z-index:2;

    max-width:760px;
}

.final-cta h2{

    font-family:"Barlow Condensed",sans-serif;

    font-size:clamp(50px,6vw,82px);

    text-transform:uppercase;

    line-height:.9;

    margin-bottom:22px;
}

.final-cta p{

    max-width:620px;

    color:#4d4100;

    font-size:15px;

    line-height:1.7;

    margin-bottom:30px;
}

.final-button{

    background:#111;

    color:white;

    display:inline-flex;

    padding:16px 25px;

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    transition:.3s;
}

.final-button:hover{

    background:white;

    color:#111;

    transform:translateY(-3px);
}


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

footer{

    background:#090909;

    padding:65px 0 25px;
}

.footer-grid{

    display:grid;

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

    gap:70px;

    padding-bottom:50px;

    border-bottom:1px solid #222;
}

.footer-brand p{

    max-width:370px;

    color:#777;

    font-size:12px;

    line-height:1.8;

    margin-top:18px;
}

.footer-title{

    color:white;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:18px;
}

.footer-links a{

    display:block;

    color:#777;

    font-size:12px;

    margin-bottom:12px;

    transition:.2s;
}

.footer-links a:hover{

    color:var(--yellow);
}

.footer-bottom{

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    color:#555;

    font-size:10px;
}


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

.whatsapp{

    position:fixed;

    right:22px;
    bottom:22px;

    width:58px;
    height:58px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    z-index:900;

    box-shadow:0 10px 35px rgba(0,0,0,.35);

    transition:.3s;
}

.whatsapp:hover{

    transform:scale(1.08);
}


/* =========================================================
   MODAL
========================================================= */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    z-index:3000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    opacity:0;

    visibility:hidden;

    transition:.3s;
}

.modal.active{

    opacity:1;

    visibility:visible;
}

.modal-box{

    width:min(1000px,100%);

    background:#111;

    border:1px solid #333;

    position:relative;

    transform:scale(.95);

    transition:.3s;

    max-height:90vh;

    overflow:auto;
}

.modal.active .modal-box{

    transform:scale(1);
}

.modal-image{

    max-height:70vh;

    object-fit:contain;

    background:#181818;
}

.modal-info{

    padding:22px 28px 28px;
}

.modal-info small{

    color:var(--yellow);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;
}

.modal-info h3{

    font-family:"Barlow Condensed",sans-serif;

    text-transform:uppercase;

    font-size:30px;

    margin:6px 0;
}

.modal-info p{

    color:#888;

    font-size:12px;

    line-height:1.7;
}

.modal-close{

    position:absolute;

    top:15px;
    right:15px;

    width:42px;
    height:42px;

    background:var(--yellow);

    border:0;

    color:#111;

    font-size:22px;

    font-weight:900;

    cursor:pointer;

    z-index:10;
}


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

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .7s ease,

        transform .7s ease;
}

.reveal.visible{

    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:900px){

    nav{

        position:absolute;

        top:78px;
        left:20px;
        right:20px;

        background:#151515;

        border:1px solid #292929;

        padding:25px;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }

    nav.active{

        display:flex;
    }

    .menu-button{

        display:block;
    }

    .intro-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .services-grid{

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

    .process-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .testimonial-grid{

        grid-template-columns:1fr;
    }

    .footer-grid{

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

}


@media(max-width:650px){

    .container,
    .header-inner{

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

    .hero{
        min-height:720px;
    }

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

    .hero-description{
        font-size:15px;
    }

    .hero-bottom{

        position:relative;

        margin-top:50px;
    }

    .hero-info{

        grid-template-columns:1fr;
    }

    .hero-info-item{

        border-right:0;

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

    .hero-info-item:last-child{

        border-bottom:0;
    }

    .intro,
    .services,
    .portfolio,
    .process,
    .testimonials{

        padding:75px 0;
    }

    .intro-features{

        grid-template-columns:1fr;
    }

    .section-header{

        display:block;
    }

    .section-header p{

        margin-top:20px;
    }

    .services-grid{

        grid-template-columns:1fr;
    }

    .service{

        min-height:240px;
    }

    .portfolio-grid{

        display:block;
    }

    .work{

        margin-bottom:15px;
    }

    .work-image,
    .work:nth-child(1) .work-image,
    .work:nth-child(4) .work-image{

        height:280px;
    }

    .numbers-grid{

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

    .number{

        margin-bottom:25px;
    }

    .number:nth-child(2){

        border-right:0;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;
    }

    .footer-bottom{

        display:block;

        line-height:1.7;
    }

    .whatsapp{

        width:52px;
        height:52px;

        right:15px;
        bottom:15px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

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

    *{

        scroll-behavior:auto !important;

        transition:none !important;

        animation:none !important;
    }

}