/* ==========================================
   CLICKTONEXO LANDING PREMIUM
========================================== */

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

:root{
    --bg:#030712;
    --bg-card:#0B1120;
    --bg-card-2:#111827;

    --primary:#2563EB;
    --secondary:#00C2FF;
    --accent:#7C3AED;

    --text:#F8FAFC;
    --text-soft:#CBD5E1;

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

    --radius:22px;
    --transition:.35s ease;
}

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

html{
    scroll-behavior:smooth;
}

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

/* ==========================================
   FONDO GLOBAL
========================================== */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at 20% 20%,
        rgba(0,194,255,.12),
        transparent 30%),

        radial-gradient(circle at 80% 15%,
        rgba(124,58,237,.12),
        transparent 30%),

        radial-gradient(circle at 50% 80%,
        rgba(37,99,235,.12),
        transparent 30%);

    z-index:-1;
}

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

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

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    backdrop-filter:blur(20px);

    background:rgba(3,7,18,.85);

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

    z-index:1000;
}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0;
}

.logo img{
    height:55px;
}

.nav{
    display:flex;
    gap:30px;
}

.nav a{
    color:var(--text-soft);
    text-decoration:none;
    font-size:.95rem;
    transition:var(--transition);
}

.nav a:hover{
    color:white;
}

/* ==========================================
   BOTONES
========================================== */

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    padding:14px 28px;

    border-radius:16px;

    transition:var(--transition);

    font-weight:600;
}

.btn-primary{

    color:white;

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

    box-shadow:
        0 10px 30px rgba(0,194,255,.25);
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-outline{

    color:white;

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

    background:rgba(255,255,255,.03);
}

.btn-outline:hover{
    border-color:var(--secondary);
}

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

.hero{
    padding-top:180px;
    padding-bottom:100px;
}

.hero-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

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

    margin-bottom:30px;
}

.hero h1{

    font-size:4rem;

    line-height:1.05;

    font-weight:800;

    margin-bottom:25px;
}

.hero h1 span{
    color:var(--secondary);
}

.hero p{

    color:var(--text-soft);

    font-size:1.1rem;

    max-width:650px;

    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:45px;
}

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

.hero-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.hero-features div{

    display:flex;
    gap:12px;
    align-items:flex-start;
}

.hero-features i{

    color:var(--secondary);
    font-size:1.3rem;
}

.hero-features span{

    color:var(--text-soft);
    font-size:.9rem;
}

/* ==========================================
   MOCKUP
========================================== */

.hero-visual{
    position:relative;
}

.hero-visual img{
    width:130%;
    max-width:none;

    position:relative;
    z-index:2;

    margin-left:-80px;

    filter:
        drop-shadow(0 20px 40px rgba(0,0,0,.4))
        drop-shadow(0 0 40px rgba(0,194,255,.15));
}

/* ==========================================
   FLOATING MOCKUP
========================================== */

.hero-visual img{

    animation:
        floatMockup 6s ease-in-out infinite;
}

@keyframes floatMockup{

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

    50%{
        transform:
            translateY(-18px)
            rotate(.5deg);
    }

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

.glow-circle{

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,194,255,.25),
            rgba(37,99,235,.12),
            transparent 70%
        );

    top:50%;
    left:50%;

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

    animation:
        pulseGlow 5s ease infinite;

    z-index:1;
}

@keyframes pulseGlow{

    0%{
        opacity:.7;
        transform:
            translate(-50%,-50%) scale(1);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%) scale(1.08);
    }

    100%{
        opacity:.7;
        transform:
            translate(-50%,-50%) scale(1);
    }
}

/* ==========================================
   SECCIONES GENERALES
========================================== */

.section{
    padding:70px 0;
}

.center-title{
    text-align:center;
    font-size:2rem;
    margin-bottom:15px;
}

.center-text{
    text-align:center;
    color:var(--text-soft);
    margin-bottom:35px;
}

.section-text{
    color:var(--text-soft);
    margin-bottom:25px;
}

h2 span{
    color:var(--secondary);
}

.glass-section{
    border:1px solid var(--border);
    border-radius:28px;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(18px);
    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 0 40px rgba(255,255,255,.02);
    padding:35px;
}

/* ==========================================
   EMPRESAS QUE CONFÍAN
========================================== */

.trusted{
    padding:25px 0 45px;
}

.trusted p{
    text-align:center;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:.8rem;
    color:var(--text-soft);
    margin-bottom:25px;
}

.trusted-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.trusted-grid div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:64px;
    color:#E5E7EB;
    font-weight:600;
    font-size:.85rem;
    border-left:1px solid rgba(255,255,255,.08);
    opacity:.85;
}

.trusted-grid i{
    font-size:1.5rem;
    color:white;
}

/* ==========================================
   PROBLEMAS Y SOLUCIONES
========================================== */

.grid-2{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:45px;
}

.problems-solutions h2{
    font-size:1.8rem;
    line-height:1.2;
    margin-bottom:25px;
}

.problem-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.problem-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.problem-item i{
    min-width:45px;
    height:45px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--secondary);
    background:rgba(37,99,235,.12);
    border:1px solid rgba(0,194,255,.18);
    box-shadow:0 0 20px rgba(0,194,255,.08);
}

.problem-item h3{
    font-size:1rem;
    margin-bottom:4px;
}

.problem-item p{
    color:var(--text-soft);
    font-size:.9rem;
}

/* ==========================================
   SOLUTION CARDS
========================================== */

.solution-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.solution-card{
    min-height:230px;
    padding:26px 20px;
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(8,15,35,.88),
            rgba(17,24,39,.78)
        );
    border:1px solid rgba(0,194,255,.16);
    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        inset 0 0 30px rgba(255,255,255,.02);
    transition:var(--transition);
}

.solution-card:hover{
    transform:translateY(-8px);
    border-color:rgba(0,194,255,.45);
    box-shadow:
        0 25px 60px rgba(0,0,0,.45),
        0 0 35px rgba(0,194,255,.18);
}

.solution-card i{
    width:60px;
    height:60px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    font-size:1.8rem;
    color:#9C7CFF;
    border:1px solid rgba(124,58,237,.4);
    background:rgba(124,58,237,.10);
    box-shadow:0 0 25px rgba(124,58,237,.20);
}

.solution-card h3{
    font-size:1.05rem;
    margin-bottom:10px;
}

.solution-card p{
    color:var(--text-soft);
    font-size:.9rem;
}

/* ==========================================
   PROCESO
========================================== */

.process{
    padding-top:30px;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
    position:relative;
}

.process-grid::before{
    content:"";
    position:absolute;
    top:78px;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(90deg, transparent, #2563EB, #7C3AED, transparent);
    opacity:.6;
    z-index:1;
}

.process-item span,
.process-item i{
    position:relative;
    z-index:3;
}

.process-item{
    text-align:center;
    position:relative;
    z-index:2;
}

.process-item span{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    border-radius:50%;
    background:#0B1120;
    border:1px solid #7C3AED;
    color:white;
    font-weight:700;
}

.process-item i{
    width:78px;
    height:78px;

    margin:0 auto 14px;

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

    border-radius:50%;

    color:white;
    font-size:1.8rem;

    background:
        radial-gradient(circle,
        rgba(0,194,255,.18),
        rgba(37,99,235,.08));

    border:1px solid rgba(0,194,255,.35);

    box-shadow:
        0 0 25px rgba(0,194,255,.25),
        inset 0 0 25px rgba(255,255,255,.03);

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

.process-item h3{
    font-size:1rem;
    margin-bottom:6px;
}

.process-item p{
    color:var(--text-soft);
    font-size:.85rem;
}

/* ==========================================
   ÁREAS
========================================== */

.areas{
    padding-top:35px;
}

.areas-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:16px;
}

.areas-grid div{
    min-height:115px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    border-radius:18px;
    background:rgba(8,15,35,.72);
    border:1px solid rgba(255,255,255,.08);
    transition:var(--transition);
}

.areas-grid div:hover{
    transform:translateY(-6px);
    border-color:rgba(0,194,255,.45);
    box-shadow:0 0 30px rgba(0,194,255,.16);
}

.areas-grid i{
    font-size:1.7rem;
    color:#9C7CFF;
}

.areas-grid span{
    font-size:.85rem;
    font-weight:600;
}
/* ==========================================
   CASOS DE ÉXITO
========================================== */

.cases{
    padding-top:40px;
}

.cases-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.case-card{

    padding:30px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(8,15,35,.95),
            rgba(15,23,42,.85)
        );

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

    transition:var(--transition);

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

.case-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,194,255,.4);

    box-shadow:
        0 30px 60px rgba(0,0,0,.35),
        0 0 35px rgba(0,194,255,.15);
}

.case-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;
}

.case-header i{

    width:60px;
    height:60px;

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

    border-radius:16px;

    background:rgba(0,194,255,.12);

    color:var(--secondary);

    font-size:1.5rem;
}

.case-header span{

    color:var(--text-soft);

    font-size:.9rem;
}

.case-card p{

    color:var(--text-soft);

    margin-bottom:25px;
}

.stats{

    display:flex;

    justify-content:space-between;

    margin-top:20px;
}

.stats strong{

    font-size:1.4rem;

    color:var(--secondary);
}

/* ==========================================
   TECNOLOGÍAS
========================================== */

.technologies{

    padding:90px 0;
}

.tech-container{

    text-align:center;
}

.tech-container h2{

    margin-bottom:40px;
}

.tech-grid{

    display:grid;

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

    gap:25px;
}

.tech-grid div{

    padding:25px;

    border-radius:18px;

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

    background:rgba(15,23,42,.60);

    transition:var(--transition);

    font-weight:600;
}

.tech-grid div:hover{

    transform:translateY(-5px);

    border-color:rgba(0,194,255,.4);

    box-shadow:
        0 0 30px rgba(0,194,255,.15);
}

.tech-grid i{

    display:block;

    margin-bottom:12px;

    font-size:2rem;

    color:var(--secondary);
}

/* ==========================================
   CTA FINAL
========================================== */
.cta{
    padding:120px 0;
}

.cta-container{
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;

    padding:75px 60px 75px 260px;

    border-radius:30px;

    background:
        linear-gradient(135deg, rgba(0,194,255,.12), rgba(124,58,237,.16));

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

    overflow:visible;
    position:relative;
}

.cta-container::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;

    background:
        radial-gradient(circle, rgba(0,194,255,.15), transparent 70%);

    left:-180px;
    bottom:-180px;
    z-index:1;
}

.rocket{
    position:absolute;
    left:-95px;
    top:-75px;
    z-index:5;
}

.rocket img{
    width:360px;

    filter:
        drop-shadow(0 0 35px rgba(0,194,255,.45))
        drop-shadow(0 0 70px rgba(37,99,235,.30));

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

@keyframes rocketFloat{
    0%{
        transform:translateY(0) rotate(-8deg);
    }

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

    100%{
        transform:translateY(0) rotate(-8deg);
    }
}

.cta h2{
    font-size:2.2rem;
    margin-bottom:10px;
    position:relative;
    z-index:2;
}

.cta p{
    color:var(--text-soft);
    position:relative;
    z-index:2;
}

.cta-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    position:relative;
    z-index:2;
}

.btn-whatsapp{

    background:
        linear-gradient(
            135deg,
            #25D366,
            #128C7E
        );

    color:white;
}

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

.footer{

    padding-top:80px;

    background:#020617;

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

.footer-grid{

    display:grid;

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

    gap:40px;

    padding-bottom:60px;
}

.footer-logo{

    height:60px;

    margin-bottom:20px;
}

.footer p{

    color:var(--text-soft);
}

.footer h3{

    margin-bottom:18px;

    font-size:1rem;
}

.footer a{

    display:block;

    color:var(--text-soft);

    text-decoration:none;

    margin-bottom:10px;

    transition:var(--transition);
}

.footer a:hover{

    color:var(--secondary);
}

.social{

    display:flex;

    gap:15px;

    margin-top:25px;
}

.social a{

    width:42px;
    height:42px;

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

    border-radius:50%;

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

    color:white;
}

.footer-bottom{

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

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-bottom a{

    display:inline-block;

    margin-left:20px;
}

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

@media(max-width:1200px){

    .hero-container{
        display:grid;
        grid-template-columns:45% 55%;
        gap:40px;
        align-items:center;
    }

    .hero{
        text-align:center;
    }

    .hero p{
        margin:auto auto 35px;
    }

    .hero-buttons{
        justify-content:center;
    }

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

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

    .areas-grid{
        grid-template-columns:repeat(5,1fr);
    }

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

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

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

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

    .cta-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .cta-buttons{
        flex-direction:row;
        justify-content:center;
    }
}

@media(max-width:768px){

    .nav{
        display:none;
    }

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

    .hero h1{
        font-size:2.7rem;
    }

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

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

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

    .process-grid::before{
        display:none;
    }

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

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

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

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

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

    .cta-buttons{
        flex-direction:column;
    }
}

@keyframes floatingIcon{

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

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

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

}

.process-item:nth-child(1) i{
    animation-delay:0s;
}

.process-item:nth-child(2) i{
    animation-delay:.5s;
}

.process-item:nth-child(3) i{
    animation-delay:1s;
}

.process-item:nth-child(4) i{
    animation-delay:1.5s;
}

.process-item:nth-child(5) i{
    animation-delay:2s;
}

.process-item:hover i{

    transform:
        translateY(-10px)
        scale(1.12);

    box-shadow:
        0 0 15px rgba(0,194,255,.5),
        0 0 35px rgba(0,194,255,.35),
        0 0 60px rgba(124,58,237,.25);

    transition:.35s;

}

.process-item i::after{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    border:1px solid rgba(0,194,255,.25);

    animation:pulseRing 3s infinite;
}

@keyframes pulseRing{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }

}

.process-item i{
    position:relative;
    overflow:visible;
}

/* ===================================
   BOTÓN FLOTANTE WHATSAPP
=================================== */

.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    z-index:9999;
    box-shadow:0 15px 35px rgba(37,211,102,.45);
    animation:whatsappPulse 2s infinite;
    transition:.35s;
}

.whatsapp-float:hover{
    transform:scale(1.12) translateY(-5px);
    background:#128C7E;
}

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

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

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

/* ===================================
   ANIMACIONES AL HACER SCROLL
=================================== */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:0;
    transform:translateX(-50px);
    transition:1s ease;
}

.reveal-right{
    opacity:0;
    transform:translateX(50px);
    transition:1s ease;
}

.reveal-left.active,
.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

/* ===================================
   CONTADORES
=================================== */

.counter-box{
    text-align:center;
}

.counter-box h3{
    font-size:2.4rem;
    font-weight:800;
}

.counter-box p{
    opacity:.85;
}

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

.stats-section{
    padding:40px 0 80px;
}

.stats-grid{

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

    gap:25px;
}

.counter-box{

    text-align:center;

    padding:35px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(8,15,35,.92),
            rgba(15,23,42,.85)
        );

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

    transition:.35s;

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

}

.counter-box:hover{

    transform:translateY(-8px);

    border-color:rgba(0,194,255,.45);

    box-shadow:
        0 0 35px rgba(0,194,255,.15);

}

.counter-box h3{

    font-size:3rem;

    color:var(--secondary);

    margin-bottom:10px;

    font-weight:800;
}

.counter-box p{

    color:var(--text-soft);

    font-size:.95rem;
}

.hero-rating{

    margin-top:25px;

    color:#FFD700;

    font-size:1.1rem;

    display:flex;
    align-items:center;
    gap:15px;
}

.hero-rating span{

    color:var(--text-soft);

    font-size:.9rem;
}

.hero-visual{

    position:relative;

    transition:.4s ease;
}

.hero-visual:hover img{

    transform:
        translateY(-15px)
        scale(1.02);
}

/* ===============================
   RESPONSIVE FINAL TABLET
================================ */

@media(max-width:1024px){

    .hero-container{
        grid-template-columns:1fr !important;
        text-align:center;
    }

    .hero-visual img{
        width:100% !important;
        max-width:760px !important;
        margin-left:0 !important;
    }

    .hero-visual{
        display:flex;
        justify-content:center;
    }

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

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

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

    .cta-container{
        grid-template-columns:1fr !important;
        padding:220px 35px 45px !important;
        text-align:center;
    }

    .rocket{
        left:50% !important;
        top:-95px !important;
        transform:translateX(-50%);
    }

    .rocket img{
        width:300px !important;
    }
}

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

@media(max-width:768px){

    .header .btn-primary{
        display:none;
    }

    .nav-container{
        padding:12px 0;
    }

    .logo img{
        height:42px;
    }

    .hero{
        padding-top:120px;
        padding-bottom:60px;
    }

    .hero h1{
        font-size:2.4rem !important;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn{
        width:100%;
        max-width:320px;
        justify-content:center;
    }

    .hero-visual img{
        width:115% !important;
        max-width:none !important;
    }

    .glow-circle{
        width:420px;
        height:420px;
    }

    .trusted-grid,
    .stats-grid,
    .cases-grid,
    .tech-grid,
    .footer-grid{
        grid-template-columns:1fr !important;
    }

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

    .glass-section{
        padding:24px;
    }

    .cta{
        padding:90px 0 70px;
    }

    .cta-container{
        padding:190px 22px 35px !important;
    }

    .rocket{
        top:-75px !important;
    }

    .rocket img{
        width:240px !important;
    }

    .cta h2{
        font-size:1.7rem;
    }

    .cta-buttons{
        flex-direction:column !important;
        align-items:center;
    }

    .whatsapp-float{
        width:55px;
        height:55px;
        font-size:27px;
        right:18px;
        bottom:18px;
    }
}

/* ===============================
   CELULARES PEQUEÑOS
================================ */

@media(max-width:480px){

    .container{
        width:92%;
    }

    .hero h1{
        font-size:2rem !important;
    }

    .badge{
        font-size:.78rem;
        padding:8px 12px;
    }

    .hero-rating{
        flex-direction:column;
        gap:6px;
        text-align:center;
    }

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

    .process-item i{
        width:68px;
        height:68px;
    }

    .footer-bottom div{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .footer-bottom a{
        margin-left:0;
    }
}