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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#f5f5f7;

    overflow-x:hidden;

    color:#111;
}

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

section{

    width:100%;

    max-width:1920px;

    margin:auto;
}

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

.header{

    width:100%;

    height:90px;

    background:#fff;

    position:fixed;

    top:0;
    left:0;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    box-shadow:0 3px 15px rgba(0,0,0,0.05);

    transition:0.3s;
}

/* LOGO */

.logo{

    display:flex;

    align-items:center;

    gap:15px;
}

.logo-af{

    font-size:60px;

    font-weight:700;

    background:linear-gradient(45deg,#00c2ff,#7b2cff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.logo h2{

    font-size:20px;

    line-height:20px;

    color:#111;
}

.logo p{

    font-size:15px;

    color:#7b2cff;

    font-weight:600;

    letter-spacing:1px;
}

/* NAVBAR */

.navbar{

    display:flex;

    gap:42px;
}

.navbar a{

    text-decoration:none;

    color:#111;

    font-size:14px;

    font-weight:600;

    position:relative;

    transition:0.3s;
}

.navbar a:hover{

    color:#7b2cff;
}

.navbar a:first-child{

    color:#7b2cff;
}

.navbar a:first-child::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-12px;

    width:100%;
    height:3px;

    border-radius:10px;

    background:#7b2cff;
}

/* BUTTON */

.btn-whatsapp{

    padding:14px 28px;

    border-radius:40px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    transition:0.3s;
}

.btn-whatsapp:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(123,44,255,0.25);
}

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

.hero{

    width:100%;

    min-height:820px;

    padding:150px 40px 60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:
    radial-gradient(circle at top right,#7b2cff55,transparent 30%),
    radial-gradient(circle at bottom left,#00c2ff22,transparent 25%),
    #020617;

    border-radius:0 0 40px 40px;

    overflow:hidden;

    position:relative;

    gap:30px;
}

/* LEFT */

.hero-content{

    width:42%;

    z-index:2;
}

.hero-subtitle{

    color:#00c2ff;

    font-size:16px;

    font-weight:600;

    letter-spacing:1px;
}

.hero h1{

    font-size:82px;

    line-height:88px;

    color:#fff;

    margin-top:15px;

    font-weight:700;
}

.hero h1 span{

    background:linear-gradient(45deg,#c026ff,#00c2ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.hero p{

    color:#d1d5db;

    font-size:22px;

    line-height:38px;

    margin-top:25px;

    max-width:650px;
}

/* BUTTONS */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;
}

.btn-primary{

    padding:18px 34px;

    border-radius:18px;

    background:linear-gradient(45deg,#00c2ff,#7b2cff);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

    transition:0.3s;
}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 20px rgba(123,44,255,0.25);
}

.btn-secondary{

    padding:18px 34px;

    border-radius:18px;

    border:2px solid #7b2cff;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    transition:0.3s;
}

.btn-secondary:hover{

    background:#7b2cff;
}

/* FEATURES */

.hero-features{

    display:flex;

    gap:45px;

    margin-top:55px;

    flex-wrap:wrap;
}

.feature{

    display:flex;

    align-items:center;

    gap:15px;
}

.feature i{

    font-size:40px;

    color:#c026ff;
}

.feature h4{

    color:#fff;

    font-size:18px;

    margin-bottom:3px;
}

.feature p{

    color:#d1d5db;

    font-size:15px;

    line-height:22px;

    margin:0;
}

/* RIGHT */

.hero-image{

    width:55%;

    display:flex;

    justify-content:center;

    position:relative;
}

.hero-image img{

    width:100%;

    max-width:1050px;

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

/* FLOAT */

@keyframes float{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

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

.services{

    width:100%;

    margin-top:-45px;

    background:#fff;

    border-radius:40px;

    padding:45px 35px;

    position:relative;

    z-index:5;

    box-shadow:0 5px 25px rgba(0,0,0,0.06);
}

/* TITLE */

.section-title{

    margin-bottom:30px;
}

.section-title span{

    color:#555;

    font-size:15px;

    font-weight:500;
}

.section-title h2{

    font-size:52px;

    color:#111;

    margin-top:8px;
}

/* GRID */

.services-container{

    display:grid;

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

    gap:18px;
}

/* CARD */

.service-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:24px;

    padding:28px 18px;

    text-align:center;

    transition:0.3s;

    box-shadow:0 5px 15px rgba(0,0,0,0.04);
}

.service-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 25px rgba(123,44,255,0.12);
}

.service-icon{

    margin-bottom:18px;
}

.service-icon i{

    font-size:62px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.service-card h3{

    font-size:22px;

    line-height:30px;

    margin-bottom:12px;
}

.service-card p{

    color:#666;

    line-height:28px;

    font-size:15px;

    margin-bottom:18px;
}

.service-card a{

    text-decoration:none;

    color:#7b2cff;

    font-weight:600;
}

/* =========================================================
   PRODUCTS
========================================================= */

.products{

    width:100%;

    padding:45px 35px;
}

.products-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;

    gap:20px;
}

.products-header span{

    color:#555;

    font-size:15px;

    font-weight:500;
}

.products-header h2{

    font-size:48px;
}

.btn-products{

    padding:16px 28px;

    border-radius:16px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    text-decoration:none;

    font-weight:600;
}

/* GRID */

.products-container{

    display:grid;

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

    gap:18px;
}

/* CARD */

.product-card{

    background:#fff;

    border-radius:22px;

    border:1px solid #ececec;

    padding:18px;

    transition:0.3s;

    box-shadow:0 5px 15px rgba(0,0,0,0.04);
}

.product-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 25px rgba(123,44,255,0.12);
}

.product-card img{

    width:100%;

    height:130px;

    object-fit:contain;

    margin-bottom:15px;
}

.product-card h3{

    font-size:16px;

    line-height:24px;

    margin-bottom:10px;
}

.product-card p{

    color:#4338ff;

    font-size:26px;

    font-weight:700;

    margin-bottom:14px;
}

.product-card button{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    border:2px solid #7b2cff;

    background:#fff;

    color:#7b2cff;

    font-size:20px;

    cursor:pointer;

    transition:0.3s;
}

.product-card button:hover{

    background:#7b2cff;

    color:#fff;
}

/* =========================================================
   STATS
========================================================= */

.stats{

    width:100%;

    margin:30px 0;

    padding:35px;

    border-radius:24px;

    background:linear-gradient(90deg,#00d2d3,#2563eb,#7b2cff);

    display:grid;

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

    gap:20px;
}

.stat-box{

    display:flex;

    align-items:center;

    gap:18px;

    color:#fff;
}

.stat-box i{

    font-size:58px;
}

.stat-box h3{

    font-size:46px;

    line-height:46px;
}

.stat-box p{

    font-size:16px;

    line-height:24px;
}

/* =========================================================
   WORKS
========================================================= */

.works{

    width:100%;

    padding:35px;

    background:#fff;

    border-radius:30px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;
}

/* FILTER */

.works-filter{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.works-filter button{

    padding:12px 22px;

    border:none;

    border-radius:40px;

    background:#f2f2f2;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;
}

.works-filter button.active{

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;
}

/* GRID */

.works-grid{

    display:grid;

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

    gap:18px;
}

.works-grid img{

    width:100%;

    height:190px;

    object-fit:cover;

    border-radius:18px;

    transition:0.3s;
}

.works-grid img:hover{

    transform:scale(1.03);
}

.works-btn{

    display:inline-flex;

    margin-top:25px;

    padding:14px 28px;

    border-radius:16px;

    background:#fff;

    border:2px solid #7b2cff;

    color:#7b2cff;

    text-decoration:none;

    font-weight:600;

    transition:0.3s;
}

.works-btn:hover{

    background:#7b2cff;

    color:#fff;
}

/* WHY */

.works-right{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.why-item{

    display:flex;

    gap:15px;

    align-items:flex-start;
}

.why-item i{

    font-size:34px;

    color:#c026ff;
}

.why-item h4{

    font-size:18px;

    margin-bottom:6px;
}

.why-item p{

    color:#666;

    line-height:26px;
}

/* LOGO CARD */

.works-logo{

    width:100%;

    border-radius:30px;

    overflow:hidden;

    position:relative;

    background:
    radial-gradient(circle at top right,#7b2cff55,transparent 30%),
    radial-gradient(circle at bottom left,#00c2ff33,transparent 25%),
    #020617;

    min-height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

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

.works-logo img{

    width:100%;

    max-width:520px;

    object-fit:contain;

    animation:floatLogo 5s ease-in-out infinite;
}

/* ANIMATION */

@keyframes floatLogo{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

/* =========================================================
   CONTACT
========================================================= */

.contact-wrapper{

    width:100%;

    padding:35px;

    background:#fff;

    border-radius:30px;

    margin-top:20px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;
}

/* LEFT */

.contact-left{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

/* CARD */

.contact-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    border:1px solid #ececec;
}

/* CONTACT ITEM */

.contact-item{

    display:flex;

    gap:16px;

    margin-bottom:22px;
}

.contact-item i{

    font-size:28px;

    color:#7b2cff;
}

.contact-item p{

    color:#444;

    line-height:28px;
}

/* FORM */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    height:52px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:0 18px;

    outline:none;

    font-size:15px;
}

.contact-form textarea{

    height:120px;

    resize:none;

    padding-top:15px;
}

.contact-form button{

    height:56px;

    border:none;

    border-radius:14px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

/* MAP */

.map-box{

    width:100%;

    height:260px;

    overflow:hidden;

    border-radius:20px;

    margin-bottom:20px;

    background:#eee;
}

.map-box iframe{

    width:100%;
    height:100%;

    border:none;

    display:block;
}

/* MAP BTN */

.map-btn{

    width:100%;

    height:55px;

    border-radius:14px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:600;

    transition:0.3s;
}

.map-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(123,44,255,0.2);
}

/* PAYMENTS */

.payments h4{

    margin-bottom:18px;
}

.payments-icons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.payments-icons img{

    height:40px;
}

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

.footer{

    width:100%;

    margin-top:25px;

    background:#020617;

    border-radius:40px 40px 0 0;

    padding-top:70px;
}

.footer-container{

    display:grid;

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

    gap:40px;

    padding:0 35px 60px;
}

/* LOGO */

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;
}

.footer-logo span{

    font-size:58px;

    font-weight:700;

    background:linear-gradient(45deg,#00c2ff,#7b2cff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.footer-logo h3{

    color:#fff;

    font-size:24px;
}

.footer-logo p{

    color:#7b2cff;

    font-size:15px;
}

.footer-text{

    color:#aaa;

    line-height:30px;

    max-width:350px;
}

/* TITLES */

.footer-box h4{

    color:#fff;

    margin-bottom:22px;
}

/* LINKS */

.footer-box a{

    display:block;

    color:#aaa;

    text-decoration:none;

    margin-bottom:14px;

    transition:0.3s;
}

.footer-box a:hover{

    color:#00c2ff;
}

/* COPYRIGHT */

.footer-bottom{

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

    padding:25px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-bottom p{

    color:#aaa;

    line-height:28px;
}

/* FOOTER UP */

.footer-up{

    width:48px;
    height:48px;

    border-radius:50%;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:24px;
}

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

.floating-whatsapp{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:linear-gradient(45deg,#00c853,#00e676);

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    z-index:9999;

    box-shadow:0 10px 25px rgba(0,200,83,0.35);

    animation:pulseWhatsapp 2s infinite;
}

.floating-whatsapp i{

    color:#fff;

    font-size:38px;
}

@keyframes pulseWhatsapp{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}

/* =========================================================
   SCROLL TOP
========================================================= */

.scroll-top{

    position:fixed;

    right:25px;
    bottom:105px;

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:0.3s;

    box-shadow:0 10px 25px rgba(123,44,255,0.25);
}

.scroll-top.show{

    opacity:1;

    visibility:visible;
}

.scroll-top:hover{

    transform:translateY(-4px);
}

/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.success-message{

    position:fixed;

    top:110px;
    right:30px;

    background:linear-gradient(45deg,#00c853,#00e676);

    color:#fff;

    padding:18px 24px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    z-index:99999;

    box-shadow:0 10px 25px rgba(0,200,83,0.3);

    transform:translateX(400px);

    opacity:0;

    transition:0.4s;
}

.success-message.show{

    transform:translateX(0);

    opacity:1;
}

.success-message i{

    font-size:30px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .hero{

        flex-direction:column;

        text-align:center;
    }

    .hero-content,
    .hero-image{

        width:100%;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-features{

        justify-content:center;
    }

    .works{

        grid-template-columns:1fr;
    }

    .contact-wrapper{

        grid-template-columns:1fr;
    }

    .footer-container{

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

    .services-container{

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

    .products-container{

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

@media(max-width:768px){

    .header{

        padding:0 20px;
    }

    .navbar{

        display:none;
    }

    .hero{

        padding:140px 20px 60px;
    }

    .hero h1{

        font-size:52px;

        line-height:60px;
    }

    .hero p{

        font-size:18px;

        line-height:30px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .services,
    .products,
    .works,
    .contact-wrapper{

        padding:30px 20px;
    }

    .services-container,
    .products-container,
    .works-grid{

        grid-template-columns:1fr;
    }

    .stats{

        grid-template-columns:1fr;
    }

    .contact-left{

        grid-template-columns:1fr;
    }

    .footer-container{

        grid-template-columns:1fr;
    }

    .section-title h2,
    .products-header h2{

        font-size:34px;
    }

    .success-message{

        right:20px;

        left:20px;

        top:95px;

        transform:translateY(-100px);

        width:auto;
    }

    .success-message.show{

        transform:translateY(0);
    }
}

/* =========================================================
   LAYOUT GENERAL COMO LA REFERENCIA
========================================================= */

body{

    background:#f3f4f6;
}

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

.hero{

    min-height:760px;

    padding:130px 35px 40px;

    border-radius:0 0 35px 35px;
}

.hero-content{

    width:40%;
}

.hero h1{

    font-size:78px;

    line-height:82px;
}

.hero p{

    font-size:18px;

    line-height:32px;

    max-width:560px;
}

.hero-image{

    width:58%;
}

.hero-image img{

    max-width:980px;
}

/* FEATURES */

.hero-features{

    gap:35px;

    margin-top:40px;
}

.feature i{

    font-size:34px;
}

.feature h4{

    font-size:16px;
}

.feature p{

    font-size:14px;
}

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

.services{

    margin-top:-25px;

    border-radius:28px;

    padding:30px 25px;
}

.section-title{

    margin-bottom:22px;
}

.section-title h2{

    font-size:28px;

    font-weight:700;
}

/* GRID */

.services-container{

    display:grid;

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

    gap:14px;
}

/* CARD */

.service-card{

    padding:22px 14px;

    border-radius:18px;
}

.service-icon i{

    font-size:48px;
}

.service-card h3{

    font-size:15px;

    line-height:22px;

    margin-bottom:10px;
}

.service-card p{

    font-size:12px;

    line-height:22px;

    margin-bottom:12px;
}

.service-card a{

    font-size:13px;
}

/* =========================================================
   PRODUCTS
========================================================= */

.products{

    padding:25px;
}

.products-header{

    margin-bottom:22px;
}

.products-header h2{

    font-size:22px;
}

.btn-products{

    height:45px;

    padding:0 22px;

    border-radius:12px;

    font-size:14px;

    display:flex;

    align-items:center;
}

/* GRID */

.products-container{

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

    gap:14px;
}

/* CARD */

.product-card{

    padding:14px;

    border-radius:16px;
}

.product-card img{

    height:90px;
}

.product-card h3{

    font-size:14px;

    line-height:20px;
}

.product-card p{

    font-size:16px;
}

.product-card button{

    width:34px;
    height:34px;

    font-size:16px;
}

/* =========================================================
   STATS
========================================================= */

.stats{

    padding:25px;

    border-radius:20px;

    margin:15px 25px;
}

.stat-box{

    gap:14px;
}

.stat-box i{

    font-size:42px;
}

.stat-box h3{

    font-size:34px;
}

.stat-box p{

    font-size:13px;
}

/* =========================================================
   WORKS
========================================================= */

.works{

    padding:25px;

    border-radius:25px;

    gap:20px;
}

.works-grid{

    gap:12px;
}

/* GRID NORMAL */

.works-grid img:not(.single-work){

    width:100%;

    height:145px;

    object-fit:cover;

    border-radius:14px;

    transition:0.3s;
}

/* IMAGEN GRANDE */

.single-work{

    width:100% !important;

    max-width:1000px !important;

    height:600px !important;

    object-fit:cover !important;

    border-radius:24px;

    display:block;

    margin:auto;
}

/* FILTER */

.works-filter{

    gap:10px;
}

.works-filter button{

    padding:9px 16px;

    font-size:12px;
}

/* WHY */

.why-item{

    gap:12px;
}

.why-item i{

    font-size:26px;
}

.why-item h4{

    font-size:15px;
}

.why-item p{

    font-size:13px;

    line-height:22px;
}

/* LOGO CARD */

.works-logo{

    min-height:340px;

    border-radius:22px;
}

.works-logo img{

    max-width:420px;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-wrapper{

    padding:25px;

    border-radius:25px;
}

.contact-left{

    gap:18px;
}

.contact-card{

    border-radius:18px;

    padding:22px;
}

/* CONTACT */

.contact-item{

    gap:12px;

    margin-bottom:18px;
}

.contact-item i{

    font-size:22px;
}

.contact-item p{

    font-size:14px;

    line-height:24px;
}

/* FORM */

.contact-form{

    gap:12px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{

    height:46px;

    border-radius:10px;

    font-size:14px;
}

.contact-form textarea{

    height:90px;
}

.contact-form button{

    height:48px;

    border-radius:10px;

    font-size:14px;
}

/* MAP */

.map-box{

    height:190px;

    border-radius:14px;
}

.map-btn{

    height:48px;

    border-radius:10px;

    font-size:14px;
}

/* SOCIAL */

.social-icons{

    gap:14px;

    margin-bottom:25px;
}

.social-icons a{

    font-size:38px;
}

/* PAYMENTS */

.payments-icons img{

    height:32px;
}

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

.footer{

    margin-top:15px;

    border-radius:28px 28px 0 0;

    padding-top:45px;
}

.footer-container{

    padding:0 25px 40px;
}

.footer-logo span{

    font-size:48px;
}

.footer-logo h3{

    font-size:20px;
}

.footer-text{

    font-size:14px;

    line-height:26px;
}

.footer-box h4{

    font-size:15px;
}

.footer-box a{

    font-size:14px;
}

.footer-bottom{

    padding:18px 25px;
}

.footer-bottom p{

    font-size:13px;
}

/* =========================================================
   FLOATING BUTTONS
========================================================= */

.floating-whatsapp{

    width:58px;
    height:58px;
}

.floating-whatsapp i{

    font-size:34px;
}

.scroll-top{

    width:52px;
    height:52px;

    bottom:95px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1400px){

    .services-container{

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

    .products-container{

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

@media(max-width:1100px){

    .hero{

        flex-direction:column;

        text-align:center;
    }

    .hero-content,
    .hero-image{

        width:100%;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-features{

        justify-content:center;
    }

    .works{

        grid-template-columns:1fr;
    }

    .contact-wrapper{

        grid-template-columns:1fr;
    }

    .footer-container{

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

@media(max-width:768px){

    .header{

        padding:0 18px;
    }

    .navbar{

        display:none;
    }

    .hero{

        padding:130px 20px 50px;
    }

    .hero h1{

        font-size:46px;

        line-height:54px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .hero-features{

        flex-direction:column;

        align-items:flex-start;
    }

    .services,
    .products,
    .works,
    .contact-wrapper{

        padding:20px;
    }

    .services-container,
    .products-container,
    .works-grid{

        grid-template-columns:1fr;
    }

    .stats{

        grid-template-columns:1fr;
    }

    .contact-left{

        grid-template-columns:1fr;
    }

    .footer-container{

        grid-template-columns:1fr;
    }
}

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

.menu-toggle{

    width:48px;
    height:48px;

    border-radius:12px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    display:none;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    cursor:pointer;
}

/* =========================================================
   RESPONSIVE MENU
========================================================= */

@media(max-width:900px){

    .menu-toggle{

        display:flex;
    }

    .navbar{

        position:fixed;

        top:90px;
        right:-100%;

        width:280px;

        height:calc(100vh - 90px);

        background:#fff;

        flex-direction:column;

        padding:40px 30px;

        gap:30px;

        transition:0.4s;

        box-shadow:-10px 0 20px rgba(0,0,0,0.08);
    }

    .navbar.active{

        right:0;
    }

    .navbar a{

        font-size:18px;
    }

    .btn-whatsapp{

        display:none;
    }
}

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

.services-detail{

    width:100%;

    padding:25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.detail-box{

    background:#fff;

    border-radius:24px;

    padding:30px;

    display:flex;

    gap:25px;

    align-items:flex-start;

    border:1px solid #ececec;

    scroll-margin-top:120px;

    transition:0.3s;
}

.detail-box:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 25px rgba(123,44,255,0.08);
}

.detail-icon{

    width:80px;
    height:80px;

    min-width:80px;

    border-radius:20px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    display:flex;

    align-items:center;

    justify-content:center;
}

.detail-icon i{

    color:#fff;

    font-size:42px;
}

.detail-content h2{

    font-size:26px;

    margin-bottom:12px;
}

.detail-content p{

    color:#666;

    line-height:30px;

    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:900px){

    .services-detail{

        grid-template-columns:1fr;
    }

    .detail-box{

        flex-direction:column;
    }
}

/* HIDE SERVICE DETAILS */

.detail-box{

    display:none;
}

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

.services{

    margin-bottom:50px;
}

/* DETAIL BOX */

.services-detail{

    margin-top:40px;

    padding-bottom:40px;
}

/* EXTRA SPACE */

.detail-box{

    margin-bottom:25px;
}


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

.services-detail{

    width:100%;

    margin-top:40px;

    display:flex;

    flex-direction:column;

    gap:35px;

    padding:0 25px 40px;
}

/* DETAIL BOX */

.detail-box{

    display:none;

    width:100%;

    background:#fff;

    border-radius:25px;

    padding:35px;

    border:1px solid #ececec;

    box-shadow:0 10px 20px rgba(0,0,0,0.04);

    animation:fadeUp 0.5s ease;
}

/* SHOW ACTIVE */

.detail-box.active{

    display:flex;

    flex-direction:column;
}

/* HEADER */

.detail-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:20px;
}

/* ICON */

.detail-icon{

    width:75px;
    height:75px;

    min-width:75px;

    border-radius:22px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    display:flex;

    align-items:center;

    justify-content:center;
}

.detail-icon i{

    color:#fff;

    font-size:36px;
}

/* TITLE */

.detail-header h2{

    font-size:30px;

    color:#111;

    font-weight:700;
}

/* CONTENT */

.detail-content{

    width:100%;
}

.detail-content p{

    color:#666;

    line-height:30px;

    margin-bottom:22px;

    font-size:15px;
}

/* LIST */

.detail-content ul{

    padding-left:22px;
}

.detail-content li{

    margin-bottom:14px;

    color:#333;

    line-height:28px;

    font-size:15px;
}

/* HOVER */

.detail-box:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 28px rgba(123,44,255,0.10);

    transition:0.3s;
}

/* ANIMATION */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

/* =========================================
   EXTRA SPACE SERVICES
========================================= */

.services{

    margin-bottom:50px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:900px){

    .services-detail{

        padding:0 20px 35px;
    }

    .detail-box{

        padding:25px;
    }

    .detail-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .detail-header h2{

        font-size:24px;
    }

    .detail-content p{

        font-size:14px;

        line-height:28px;
    }

    .detail-content li{

        font-size:14px;

        line-height:26px;
    }
}

@media(max-width:600px){

    .services-detail{

        gap:25px;
    }

    .detail-box{

        border-radius:20px;

        padding:22px;
    }

    .detail-icon{

        width:65px;
        height:65px;

        min-width:65px;

        border-radius:18px;
    }

    .detail-icon i{

        font-size:30px;
    }

    .detail-header h2{

        font-size:21px;
    }
}

/* =========================================
   SINGLE WORK IMAGE
========================================= */

.single-image-grid{

    display:flex !important;

    justify-content:center;

    align-items:center;

    width:100%;
}

/* IMAGEN */



/* RESPONSIVE */

@media(max-width:768px){

    .single-work{

        max-height:320px;

        border-radius:18px;
    }
}

.btn-whatsapp,
.btn-primary,
.floating-whatsapp{

    border:none;

    cursor:pointer;
}

/* =========================================
   CHATBOT
========================================= */

.chatbot-container{

    position:fixed;

    bottom:100px;

    right:25px;

    width:340px;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

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

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:0.4s;

    animation:chatShow 0.3s ease;
}

@keyframes chatShow{

    from{

        transform:translateY(30px);

        opacity:0;
    }

    to{

        transform:translateY(0);

        opacity:1;
    }
}

.chatbot-header{

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.chatbot-header h3{

    font-size:16px;
}

.chatbot-header span{

    font-size:13px;

    opacity:0.8;
}

.chatbot-header button{

    background:none;

    border:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;
}

.chatbot-body{

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.bot-message{

    background:#f5f7ff;

    padding:14px;

    border-radius:15px;

    font-size:14px;

    line-height:1.5;
}

.chat-options{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.chat-options button{

    border:none;

    background:#f3f5ff;

    padding:14px;

    border-radius:14px;

    cursor:pointer;

    transition:0.3s;

    font-weight:600;
}

.chat-options button:hover{

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;
}

/* =========================================
   CHAT ACTION
========================================= */

.chat-action{

    border:none;

    padding:14px;

    border-radius:14px;

    background:linear-gradient(45deg,#7b2cff,#00c2ff);

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:0.3s;
}

.chat-action:hover{

    transform:translateY(-3px);
}

/* =========================================
   TYPING
========================================= */

.typing-message{

    display:flex;

    align-items:center;

    gap:6px;

    background:#f3f5ff;

    width:max-content;

    padding:14px 18px;

    border-radius:15px;
}

.typing-message span{

    width:8px;

    height:8px;

    background:#7b2cff;

    border-radius:50%;

    animation:typing 1s infinite;
}

.typing-message span:nth-child(2){

    animation-delay:0.2s;
}

.typing-message span:nth-child(3){

    animation-delay:0.4s;
}

@keyframes typing{

    0%{

        transform:translateY(0);

        opacity:0.3;
    }

    50%{

        transform:translateY(-5px);

        opacity:1;
    }

    100%{

        transform:translateY(0);

        opacity:0.3;
    }
}

/* =========================================
   CHATBOT NOTIFICATION
========================================= */

.chat-notification{

    position:absolute;

    top:-5px;

    right:-5px;

    width:18px;

    height:18px;

    background:#ff2e63;

    border-radius:50%;

    border:3px solid #fff;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;
    }

    50%{

        transform:scale(1.3);

        opacity:0.6;
    }

    100%{

        transform:scale(1);

        opacity:1;
    }
}

/* =========================================
   CHAT BACK
========================================= */

.chat-back{

    border:none;

    padding:14px;

    border-radius:14px;

    background:#ececff;

    cursor:pointer;

    font-weight:600;

    transition:0.3s;
}

.chat-back:hover{

    background:#dfe3ff;
}


/* =========================================
   CHAT SHOW
========================================= */

.chatbot-container.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

/* =========================================
   MESSAGE TIME
========================================= */

.message-group{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.message-time{

    font-size:11px;

    color:#888;

    margin-left:10px;
}

.footer-bottom{
    justify-content:center;
    text-align:center;
}

/* =========================================
   SEO TEXT FIX
========================================= */

.hero-content h2{

    color:#ffffff;

    font-size:1.6rem;

    font-weight:700;

    line-height:1.5;

    margin-top:20px;

    margin-bottom:25px;

    max-width:700px;

}

.hero-content p{

    color:#f1f1f1;

}

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

.hero-list{

    margin-top:20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    list-style:none;

    padding:0;

}

.hero-list li{

    color:#ffffff;

    font-size:1rem;

    font-weight:500;

}

/* =========================================
   HERO TEXT PREMIUM
========================================= */

.hero-content p{

    color:#f3f3f3;

    font-size:1.15rem;

    line-height:1.9;

    max-width:650px;

}

/* LISTA */

.hero-list{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:14px;

    list-style:none;

    padding:0;

}

.hero-list li{

    color:#ffffff;

    font-size:1.08rem;

    font-weight:600;

    letter-spacing:0.3px;

}

/* TITULO GRANDE */

.hero-content h1{

    font-size:6rem;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:25px;

    color:#ffffff;

    text-shadow:
    0 0 25px rgba(120,0,255,0.35);

}

/* EFECTO HOVER SUAVE */

.hero-content h1:hover{

    transform:translateY(-2px);

    transition:0.3s ease;

}

/* =========================================
   HERO FINAL PREMIUM
========================================= */

.hero-content{

    width:48%;

    z-index:5;

}

.hero-content h1{

    font-size:5.8rem !important;

    line-height:1.02 !important;

    font-weight:900 !important;

    color:#ffffff !important;

    letter-spacing:-3px;

    margin-bottom:25px;

    text-shadow:
    0 0 35px rgba(123,44,255,0.35);

}

.hero-content h2{

    font-size:1.55rem !important;

    line-height:1.6 !important;

    color:#ffffff !important;

    font-weight:700;

    margin-top:10px;

    margin-bottom:22px;

    max-width:780px;

}

.hero-content p{

    font-size:1.18rem !important;

    line-height:1.9 !important;

    color:#f5f5f5 !important;

    max-width:680px;

    margin-top:18px;

}

/* LISTA */

.hero-list{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:14px;

    list-style:none;

    padding:0;

}

.hero-list li{

    color:#ffffff !important;

    font-size:1.08rem;

    font-weight:600;

    line-height:1.7;

}

/* MOBILE */

@media(max-width:768px){

    .hero-content h1{

        font-size:3.4rem !important;

        line-height:1.08 !important;

    }

    .hero-content h2{

        font-size:1.1rem !important;

    }

    .hero-content p{

        font-size:1rem !important;

    }

}

/* =========================================
   HERO FIX FINAL
========================================= */

.hero-content h2{

    color:#ffffff !important;

    opacity:1 !important;

    font-size:1.6rem !important;

    font-weight:700 !important;

    line-height:1.6 !important;

    margin-top:15px !important;

    margin-bottom:20px !important;

    text-shadow:
    0 0 20px rgba(0,0,0,0.45);

}

.hero-list li{

    color:#ffffff !important;

    opacity:1 !important;

    font-size:1.08rem !important;

    font-weight:600 !important;

    line-height:1.7 !important;

    text-shadow:
    0 0 15px rgba(0,0,0,0.35);

}

/* PARRAFO */

.hero-content p{

    color:#f5f5f5 !important;

    opacity:1 !important;

}

/* HERO GENERAL */

.hero-content{

    position:relative;

    z-index:20;

}

/* =========================================
   GRADIENT TEXT PREMIUM
========================================= */

.gradient-text{

    background:linear-gradient(
    45deg,
    #c026ff,
    #7b2cff,
    #00c2ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    display:inline-block;

    position:relative;

    text-shadow:none;

}

/* LINE EFFECT */

.gradient-text::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:100%;
    height:6px;

    border-radius:20px;

    background:linear-gradient(
    90deg,
    #c026ff,
    #00c2ff
    );

    box-shadow:
    0 0 18px rgba(123,44,255,0.7);

}

/* =========================================
   HERO LIST STYLE
========================================= */

.hero-list{

    margin-top:25px;

    display:grid;

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

    gap:14px 35px;

    list-style:none;

    padding:0;

    max-width:800px;

}

.hero-list li{

    position:relative;

    padding-left:38px;

    color:#ffffff;

    font-size:1.05rem;

    font-weight:600;

    line-height:1.6;

}

/* ICONO */

.hero-list li::before{

    content:"✔";

    position:absolute;

    left:0;
    top:0;

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:0.8rem;

    color:#ffffff;

    background:linear-gradient(
    135deg,
    #8a2cff,
    #00c2ff
    );

    box-shadow:
    0 0 12px rgba(138,44,255,0.55);

}

/* MOBILE */

@media(max-width:768px){

    .hero-list{

        grid-template-columns:1fr;

    }

}


/* =========================
   RESPONSIVE CELULAR
========================= */

@media (max-width: 768px) {

  .hero {
    padding: 140px 20px 60px;
    text-align: center;
  }

  .hero-content {
    width: 100%;
  }

  .hero-title {
    font-size: 2.5rem !important;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 10px;
  }

  .hero-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 25px;
    text-align: left;
  }

  .hero-services li {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
  }

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

  .hero-image {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-image img {
    width: 100%;
    max-width: 320px;
  }

  .hero-features {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
  }

  .navbar {
    padding: 15px 20px;
  }

  .nav-menu {
    display: none;
  }

}

/* =========================================================
   FIX FINAL RESPONSIVE CELULAR
========================================================= */

@media screen and (max-width:768px){

    html,
    body{
        overflow-x:hidden;
        width:100%;
    }

    body{
        position:relative;
    }

    /* HEADER */

    .header{
        height:80px;
        padding:0 15px;
    }

    .logo{
        gap:10px;
    }

    .logo-af{
        font-size:42px;
    }

    .logo h2{
        font-size:14px;
        line-height:16px;
    }

    .logo p{
        font-size:10px;
    }

    /* HERO */

    .hero{
        min-height:auto;
        padding:115px 20px 55px;
        flex-direction:column;
        text-align:center;
        gap:40px;
        border-radius:0 0 25px 25px;
    }

    .hero-content{
        width:100% !important;
    }

    .hero-content h1,
    .hero h1{
        font-size:3rem !important;
        line-height:1.08 !important;
        letter-spacing:-1px !important;
        margin-bottom:18px;
        word-break:break-word;
    }

    .hero-content h2{
        font-size:1rem !important;
        line-height:1.7 !important;
        margin-bottom:18px !important;
    }

    .hero-content p,
    .hero p{
        font-size:0.95rem !important;
        line-height:1.8 !important;
        max-width:100%;
    }

    /* LIST */

    .hero-list{
        grid-template-columns:1fr !important;
        gap:12px;
        margin-top:25px;
        text-align:left;
    }

    .hero-list li{
        font-size:0.92rem !important;
        line-height:1.6 !important;
        padding-left:34px;
    }

    .hero-list li::before{
        width:22px;
        height:22px;
        font-size:11px;
    }

    /* BUTTONS */

    .hero-buttons{
        width:100%;
        flex-direction:column;
        gap:14px;
        margin-top:28px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        min-height:54px;
        justify-content:center;
        padding:15px 20px;
        border-radius:14px;
        font-size:15px;
    }

    /* HERO IMAGE */

    .hero-image{
        width:100% !important;
        display:flex;
        justify-content:center;
    }

    .hero-image img{
        width:100%;
        max-width:320px !important;
        animation:none !important;
    }

    /* FEATURES */

    .hero-features{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
        margin-top:30px;
    }

    .feature{
        width:100%;
        align-items:flex-start;
        text-align:left;
    }

    .feature i{
        font-size:28px;
        min-width:28px;
    }

    .feature h4{
        font-size:15px;
    }

    .feature p{
        font-size:13px;
        line-height:20px;
    }

    /* TITLES */

    .section-title h2,
    .products-header h2{
        font-size:1.8rem !important;
        line-height:1.2;
    }

    /* CONTAINERS */

    .services,
    .products,
    .works,
    .contact-wrapper,
    .stats{
        padding:20px !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /* SERVICES */

    .services-container{
        grid-template-columns:1fr !important;
        gap:16px;
    }

    .service-card{
        padding:24px 18px;
    }

    .service-card h3{
        font-size:17px;
    }

    .service-card p{
        font-size:14px;
        line-height:24px;
    }

    /* PRODUCTS */

    .products-container{
        grid-template-columns:1fr 1fr !important;
        gap:14px;
    }

    .product-card{
        padding:14px;
    }

    .product-card img{
        height:90px !important;
    }

    .product-card h3{
        font-size:13px;
        line-height:18px;
    }

    .product-card p{
        font-size:15px;
    }

    .product-card button{
        width:36px;
        height:36px;
    }

    /* STATS */

    .stats{
        grid-template-columns:1fr !important;
        gap:20px;
    }

    .stat-box{
        justify-content:flex-start;
    }

    .stat-box h3{
        font-size:30px;
    }

    /* WORKS */

    .works{
        grid-template-columns:1fr !important;
    }

    .works-grid{
        grid-template-columns:1fr !important;
    }

    .works-grid img{
        height:220px;
    }

    .single-work{
        width:100% !important;
        height:auto !important;
        max-height:320px !important;
        object-fit:cover;
    }

    /* FILTER */

    .works-filter{
        justify-content:center;
    }

    .works-filter button{
        font-size:12px;
        padding:10px 14px;
    }

    /* CONTACT */

    .contact-wrapper{
        grid-template-columns:1fr !important;
    }

    .contact-left{
        grid-template-columns:1fr !important;
    }

    .contact-card{
        padding:22px 18px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select{
        font-size:16px;
    }

    /* MAP */

    .map-box{
        height:220px;
    }

    /* FOOTER */

    .footer{
        border-radius:25px 25px 0 0;
    }

    .footer-container{
        grid-template-columns:1fr !important;
        padding:0 20px 30px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:14px;
        text-align:center;
    }

    /* FLOATING */

    .floating-whatsapp{
        width:56px;
        height:56px;
        right:16px;
        bottom:16px;
    }

    .floating-whatsapp i{
        font-size:30px;
    }

    .scroll-top{
        width:48px;
        height:48px;
        right:16px;
        bottom:84px;
    }

    /* CHATBOT */

    .chatbot-container{
        width:calc(100% - 20px);
        right:10px;
        bottom:84px;
        border-radius:20px;
    }

    /* SUCCESS */

    .success-message{
        left:15px;
        right:15px;
        width:auto;
        top:90px;
        padding:15px;
    }

}

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

@media screen and (max-width:480px){

    .hero-content h1,
    .hero h1{
        font-size:2.3rem !important;
    }

    .hero{
        padding-top:105px;
    }

    .products-container{
        grid-template-columns:1fr !important;
    }

    .hero-list li{
        font-size:0.88rem !important;
    }

    .btn-primary,
    .btn-secondary{
        font-size:14px;
    }

    .section-title h2,
    .products-header h2{
        font-size:1.5rem !important;
    }

}