:root{--bg:#050607;--panel:#0b0e11;--card:#101419;--text:#f5f5f2;--muted:#aeb3ba;--accent:#ffd21c;--accent2:#e8b72a;--line:#272d34;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 9vw));margin:auto}
.site-header{height:78px;position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;padding:0 4.5vw;background:rgba(5,6,7,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:850;letter-spacing:.12em}.brand img{width:38px;height:38px;object-fit:contain}

/*.site-header nav{margin-left:auto;display:flex;gap:30px;align-items:center;font-size:14px}
.site-header nav a{color:#d4d5d6}
.site-header nav a:hover{color:var(--accent)}
.nav-cta{border:1px solid #42464d;padding:10px 17px;border-radius:99px}
.menu{display:none;margin-left:auto;background:none;border:0;color:white;font-size:24px}*/

/* ========================================
   MENÚ PRINCIPAL
======================================== */

.site-header nav{
    margin-left:auto;
    display:flex;
    gap:30px;
    align-items:center;
    font-size:14px;
}

.site-header nav a{
    color:#d4d5d6;
    position:relative;
    transition:color .25s ease;
}

/* Hover */
.site-header nav a:hover{
    color:var(--accent);
}

/* Línea amarilla inferior */
.site-header nav a:not(.nav-cta)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:100%;
    height:2px;

    background:var(--accent);

    transform:scaleX(0);
    transform-origin:center;

    transition:transform .25s ease;
}

/* Mostrar línea al pasar mouse o estar activo */
.site-header nav a:not(.nav-cta):hover::after,
.site-header nav a:not(.nav-cta).active::after{
    transform:scaleX(1);
}

/* Sección actual */
.site-header nav a.active{
    color:var(--accent);
}

/* Contacto activo */
.site-header nav .nav-cta.active{
    color:#111;
    background:var(--accent);
    border-color:var(--accent);
}


/* Botón contacto */
.nav-cta{
    border:1px solid #42464d;
    padding:10px 17px;
    border-radius:99px;
}


/* Botón menú móvil */
.menu{
    display:none;
    margin-left:auto;
    background:none;
    border:0;
    color:white;
    font-size:24px;
}

.panel{min-height:100vh;padding:128px 0 92px;display:flex;align-items:center;scroll-margin-top:70px;scroll-snap-align:start;position:relative}
.alt{background:var(--panel)}.hero{overflow:hidden}
/* .hero:before{content:"";position:absolute;width:54vw;height:54vw;border-radius:50%;background:radial-gradient(circle,rgba(255,210,28,.085),transparent 66%);right:-20vw;top:-20vw}.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:7vw;align-items:center} */
.hero:before{
    content:"";
    position:absolute;

    /* Más grande = difusión sobre mayor superficie */
    width:82vw;
    height:72vw;

    border-radius:50%;

    background:radial-gradient(
        ellipse at center,
        rgba(255,210,28,.09) 0%,
        rgba(255,210,28,.065) 20%,
        rgba(255,210,28,.035) 40%,
        rgba(255,210,28,.015) 58%,
        transparent 76%
    );

    right:-27vw;
    top:-27vw;

    pointer-events:none;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.18fr .82fr;
    gap:7vw;
    align-items:center;
    position:relative;
    z-index:1;
}
.eyebrow{font-size:12px;letter-spacing:.19em;color:var(--accent);font-weight:850}.hero h1{font-size:clamp(56px,7.3vw,108px);line-height:.92;letter-spacing:-.067em;margin:22px 0 28px;max-width:900px}.hero h1 span{color:var(--accent)}.lead,.section-intro{color:var(--muted);font-size:clamp(17px,1.45vw,21px);line-height:1.65;max-width:760px}.actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:14px 20px;border:1px solid var(--line);font-weight:760;cursor:pointer}.primary{background:var(--accent);color:#111;border-color:var(--accent)}.ghost{background:transparent}.capabilities{display:flex;gap:22px;flex-wrap:wrap;margin-top:35px;color:#c6c8ca;font-size:13px}.capabilities span:before{content:"•";color:var(--accent);margin-right:7px}.hero-brand{text-align:center}.qr-stage{width:min(420px,31vw);aspect-ratio:1;margin:auto;position:relative;display:grid;place-items:center}.qr-stage img{width:52%;position:relative;z-index:3;filter:drop-shadow(0 20px 35px #000)}.qr-grid{position:absolute;inset:9%;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:18px 18px;mask-image:radial-gradient(circle,#000,transparent 70%)}.orbit{position:absolute;border:1px solid rgba(255,210,28,.25);border-radius:50%;inset:8%;animation:spin 22s linear infinite}.orbit.two{inset:18%;border-style:dashed;border-color:rgba(255,255,255,.15);animation-direction:reverse;animation-duration:17s}.orbit:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);top:14%;left:11%;box-shadow:0 0 18px var(--accent)}.hero-brand p{font-size:10px;letter-spacing:.22em;color:#888}.hero-brand i{color:var(--accent);font-style:normal}@keyframes spin{to{transform:rotate(360deg)}}.scroll{position:absolute;bottom:25px;left:50%;font-size:10px;letter-spacing:.2em;color:#777}h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.05em;line-height:1;margin:14px 0 25px;max-width:900px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:58px}.cards article{min-height:310px;background:var(--card);border:1px solid var(--line);padding:28px;border-radius:14px;transition:.3s}.cards article:hover{transform:translateY(-7px);border-color:#6c601d;background:#12171c}.cards b,.principles b{color:var(--accent);font-size:13px;letter-spacing:.08em}.cards h3{font-size:23px;margin-top:78px}.cards p,.about-head p,.principles p{color:var(--muted);line-height:1.7}.project-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;margin-top:48px}.project{min-height:245px;border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#151a20,#0a0d10);transition:.3s}.project:hover{transform:translateY(-5px);border-color:#4b5058}.project.featured{grid-row:1/3;min-height:505px;background:radial-gradient(circle at 75% 22%,rgba(255,210,28,.16),transparent 34%),linear-gradient(145deg,#151a20,#080a0c)}.project span{color:var(--accent);font-size:11px;letter-spacing:.12em}.project h3{font-size:31px;margin:10px 0}.project p{color:var(--muted);max-width:500px;line-height:1.55}.tags{display:flex;gap:8px;margin-top:18px}.tags em{font-style:normal;font-size:11px;border:1px solid #343a41;border-radius:99px;padding:6px 9px;color:#aaa}.clients{overflow:hidden}.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}.client-grid article{border:1px solid var(--line);background:#0c0f12;border-radius:14px;overflow:hidden;transition:.3s}.client-grid article:hover{transform:translateY(-5px);border-color:#4a5058}.client-grid article>div{height:150px;background:#f5f5f2;display:grid;place-items:center;padding:20px}.client-grid img{max-width:100%;max-height:100%;object-fit:contain}.client-grid h3{font-size:17px;margin:17px 18px 4px}.client-grid p{color:#858b92;font-size:12px;margin:0 18px 18px}.about-head{display:grid;grid-template-columns:1.2fr .8fr;column-gap:8vw;align-items:end}.about-head .eyebrow{grid-column:1/-1}.about-head p{font-size:18px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:55px}.principles article{border-top:1px solid #3a4047;padding:24px 12px 0 0}.principles p{font-size:15px}.alt blockquote{margin:55px 0 0;padding:24px 0 24px 25px;border-left:3px solid var(--accent);font-size:24px;line-height:1.45;color:#c8ccd0}.alt blockquote strong{color:white}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.contact-data{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:28px}.contact-data a{color:var(--accent)}.contact-data span{color:#858b92;margin-top:6px}form{display:grid;gap:12px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}input,textarea{width:100%;background:#101318;border:1px solid #30343a;color:white;border-radius:8px;padding:15px;font:inherit}textarea{min-height:170px;resize:vertical}form .btn{width:100%}

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

.site-footer{
    position:relative;
    overflow:hidden;
    background:#050607;
    border-top:1px solid rgba(255,255,255,.07);
    padding:85px 0 30px;

    scroll-snap-align:start;
}

/* Iluminación ambiental */
.site-footer::before{
    content:"";
    position:absolute;
    width:650px;
    height:500px;
    left:-320px;
    bottom:-330px;

    background:radial-gradient(
        ellipse,
        rgba(255,210,28,.08) 0%,
        rgba(255,210,28,.035) 35%,
        transparent 70%
    );

    pointer-events:none;
}


/* ---------- Contenido principal ---------- */

.footer-main{
    position:relative;
    display:grid;
    grid-template-columns:1.7fr .65fr 1fr;
    gap:80px;
    padding-bottom:70px;
}


/* ---------- Identidad ---------- */

.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;

    font-size:12px;
    font-weight:850;
    letter-spacing:.13em;
    color:#f5f5f2;
}

.footer-logo img{
    width:44px;
    height:44px;
    object-fit:contain;
}

.footer-identity h3{
    margin:34px 0 20px;

    font-size:clamp(30px,3vw,46px);
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:700;
}

.footer-identity h3 span{
    color:var(--accent);
}

.footer-identity > p{
    max-width:430px;
    margin:0;

    color:#7f858b;
    line-height:1.7;
    font-size:14px;
}


/* ---------- Columnas ---------- */

.footer-title{
    display:block;
    margin-bottom:27px;

    color:var(--accent);
    font-size:10px;
    font-weight:850;
    letter-spacing:.18em;
}

.footer-column nav,
.footer-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column nav{
    gap:15px;
}

.footer-column a{
    color:#a8adb2;
    font-size:14px;
    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-column a:hover{
    color:var(--accent);
    transform:translateX(4px);
}


/* ---------- Contacto ---------- */

.footer-contact{
    gap:12px;
}

.footer-contact .footer-title{
    margin-bottom:15px;
}

.footer-contact p{
    margin:13px 0 0;

    color:#686e74;
    font-size:13px;
    line-height:1.7;
}


/* ---------- Parte inferior ---------- */

.footer-bottom{
    position:relative;

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

    padding-top:25px;

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

    color:#62676d;
    font-size:11px;
}

.footer-bottom p{
    margin:0;
}

.back-top{
    color:#92979c;
    font-size:10px;
    font-weight:750;
    letter-spacing:.13em;

    transition:color .25s ease;
}

.back-top span{
    display:inline-block;
    margin-left:8px;

    color:var(--accent);

    transition:transform .25s ease;
}

.back-top:hover{
    color:white;
}

.back-top:hover span{
    transform:translateY(-4px);
}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}#loader-telon{position:fixed;inset:0;background:#000;display:flex;justify-content:center;align-items:center;z-index:999999;opacity:1;transition:opacity .8s ease-out}
#qr-loader-img{width:160px;opacity:0;transform:scale(.7);transition:opacity .6s ease-out,transform .8s ease-out}@keyframes giroCompleto{0%{transform:scale(.95) rotate(0)}50%{transform:scale(1.05) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}@keyframes respirarQR{0%,100%{transform:scale(1)}50%{transform:scale(1.03);filter:brightness(1.12)}}.qr-girar{animation:giroCompleto 1.8s ease-out forwards}.qr-respirar{animation:respirarQR 5s ease-in-out infinite}@media(max-width:950px){.site-header nav{display:none;position:absolute;top:78px;left:0;right:0;padding:25px;background:#0b0d10;flex-direction:column}.site-header nav.open{display:flex}.menu{display:block}.panel{min-height:auto;padding:120px 0 85px}.hero{min-height:100vh}.hero-grid,.about-head,.contact-grid{grid-template-columns:1fr}.hero-brand{display:none}.cards{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.project.featured{grid-row:auto;grid-column:1/-1;min-height:350px}.client-grid{grid-template-columns:repeat(2,1fr)}.principles{grid-template-columns:1fr}.footer{flex-wrap:wrap}.footer p{order:3;width:100%}}@media(max-width:560px){.wrap{width:min(100% - 34px,var(--max))}.site-header{padding:0 17px}.brand span{display:none}.hero h1{font-size:54px}.actions{flex-direction:column}.cards,.project-grid,.client-grid{grid-template-columns:1fr}.project.featured{grid-column:auto}.cards article{min-height:230px}.cards h3{margin-top:45px}.client-grid article>div{height:130px}.two{grid-template-columns:1fr}h2{font-size:43px}.capabilities{gap:10px 18px}}



/* ========================================
   TRANSICIÓN SOLUCIONES → PROYECTOS
======================================== */

#proyectos{
    position: relative;
    overflow: hidden;
}

#proyectos::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;

    background: linear-gradient(
        to bottom,
        #000000 0%,
        rgba(0,0,0,.88) 10%,
        rgba(0,0,0,.65) 25%,
        rgba(0,0,0,.38) 45%,
        rgba(0,0,0,.16) 65%,
        rgba(0,0,0,.05) 82%,
        rgba(0,0,0,0) 100%
    );

    pointer-events: none;
    z-index: 1;
}

#proyectos > .wrap{
    position: relative;
    z-index: 2;
}

/* =========================================================
   CLIENTES
   ========================================================= */

.clients{
    position:relative;
    overflow:hidden;

    /* Fondo blanco */
    background:#f7f7f5 !important;
    color:#090b0d;

    /* espacio suficiente para que respire la sección */
    padding-top:150px;
    padding-bottom:150px;
}


.clients::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:150px;

    background:linear-gradient(
        to bottom,
        #0d1114 0%,
        rgba(13,17,20,.92) 8%,
        rgba(13,17,20,.72) 20%,
        rgba(13,17,20,.45) 36%,
        rgba(13,17,20,.22) 52%,
        rgba(13,17,20,.08) 68%,
        rgba(13,17,20,.025) 82%,
        rgba(13,17,20,0) 100%
    );

    pointer-events:none;
    z-index:2;
}

.clients::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:150px;

    background:linear-gradient(
        to top,
        #0d1114 0%,
        rgba(13,17,20,.92) 8%,
        rgba(13,17,20,.72) 20%,
        rgba(13,17,20,.45) 36%,
        rgba(13,17,20,.22) 52%,
        rgba(13,17,20,.08) 68%,
        rgba(13,17,20,.025) 82%,
        rgba(13,17,20,0) 100%
    );

    pointer-events:none;
    z-index:2;
}

/* ---------- Encabezado ---------- */

.clients .wrap{
    position:relative;
    z-index:1;
}

.clients .eyebrow{
    color:#c79a00;
}

.clients-heading{
    display:grid;
    grid-template-columns:1.5fr .75fr;
    gap:80px;
    align-items:end;
}

.clients-heading h2{
    color:#090b0d;
    margin:0;
}

.clients-heading p{
    color:#555b60;
    margin:0 0 10px;
    max-width:420px;
    line-height:1.7;
}


/* =========================================================
   CARRUSELES
   ========================================================= */

.clients-marquees{
    margin-top:85px;

    display:flex;
    flex-direction:column;
    gap:34px;
}


/* Ventana de cada carrusel */
.clients-marquee{
    position:relative;
    width:100%;
    overflow:hidden;

    /*
       Hace que los logos desaparezcan gradualmente
       en ambos extremos.
    */
    -webkit-mask-image:linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}


/* Línea que contiene los logos */
.clients-track{
    display:flex;
    align-items:center;

    width:max-content;
    gap:75px;

    will-change:transform;
}


/* Espacio uniforme reservado para cada logo */
.client-logo{
    width:190px;
    height:115px;

    flex:0 0 auto;

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


/* Logo */
.client-logo img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    /*
       Como ya quitaste los fondos,
       ahora sí podemos trabajar directamente
       sobre el logo.
    */
    filter:grayscale(1);
    opacity:.62;

    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;
}


/* Al pasar el mouse recupera identidad */
.client-logo:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.08);
}


/* =========================================================
   MOVIMIENTO
   ========================================================= */

.track-left{
    animation:clients-left 42s linear infinite;
}

.track-right{
    animation:clients-right 46s linear infinite;
}


@keyframes clients-left{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50% - 37.5px));
    }

}


@keyframes clients-right{

    from{
        transform:translateX(calc(-50% - 37.5px));
    }

    to{
        transform:translateX(0);
    }

}


/* Detener movimiento al interactuar */
.clients-marquee:hover .clients-track{
    animation-play-state:paused;
}


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

@media (max-width:900px){

    .clients{
        padding-top:120px;
        padding-bottom:120px;
    }

    .clients-heading{
        grid-template-columns:1fr;
        gap:25px;
    }

    .clients-heading p{
        max-width:600px;
    }

    .clients-marquees{
        margin-top:60px;
        gap:25px;
    }

    .client-logo{
        width:150px;
        height:90px;
    }

    .clients-track{
        gap:50px;
    }

}


/* ========================================
   TRANSICIÓN QUIÉNES SOMOS → CONTACTO
======================================== */

#nosotros{
    position: relative;
}

#nosotros::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.05) 25%,
        rgba(0,0,0,.15) 50%,
        rgba(0,0,0,.35) 75%,
        #020304 100%
    );

    pointer-events: none;
    z-index: 1;
}

#nosotros > .wrap{
    position: relative;
    z-index: 2;
}


@media(max-width:900px){

    .site-footer{
        padding-top:70px;
    }

    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:55px;
    }

    .footer-identity{
        grid-column:1/-1;
    }

}


@media(max-width:560px){

    .site-footer{
        padding-top:60px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:45px;
        padding-bottom:50px;
    }

    .footer-identity{
        grid-column:auto;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

}