/* =========================================================

   NOVASITES

========================================================= */



:root {

    --blue: #2563eb;

    --blue-dark: #1d4ed8;



    --black: #0a0c0f;

    --white: #ffffff;



    --off-white: #f7f8fa;



    --gray-100: #eef0f3;

    --gray-300: #cbd0d8;

    --gray-500: #68707d;

    --gray-700: #343a43;



    --border: #e2e5e9;



    --max-width: 1180px;

}





/* =========================================================

   RESET

========================================================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:

        Inter,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Arial,

        sans-serif;



    background: var(--white);

    color: var(--black);



    line-height: 1.6;

}



body.menu-open {

    overflow: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button {

    font: inherit;

}



img {

    display: block;

    max-width: 100%;

}





/* =========================================================

   HEADER

========================================================= */



.header {

    position: fixed;



    top: 0;

    left: 0;



    width: 100%;

    height: 74px;



    display: flex;

    align-items: center;



    padding: 0 42px;



    background: rgba(255, 255, 255, 0.9);



    backdrop-filter: blur(16px);



    border-bottom: 1px solid rgba(10, 12, 15, 0.07);



    z-index: 1000;

}





/* LOGO */



.logo {

    margin-right: auto;



    color: var(--black);



    font-size: 21px;

    font-weight: 800;



    letter-spacing: -0.8px;

}



.logo span {

    color: var(--blue);

}





/* =========================================================

   NAVIGATION

========================================================= */



.nav {

    display: flex;

    align-items: center;



    gap: 34px;

}



.nav a {

    position: relative;



    color: var(--gray-700);



    font-size: 14px;

    font-weight: 500;



    transition: color 0.2s ease;

}



.nav a::after {

    content: "";



    position: absolute;



    left: 0;

    bottom: -7px;



    width: 0;

    height: 2px;



    background: var(--blue);



    transition: width 0.2s ease;

}



.nav a:hover {

    color: var(--black);

}



.nav a:hover::after {

    width: 100%;

}





/* =========================================================

   LANGUAGE

========================================================= */



.language-selector {

    position: relative;



    margin-left: 28px;

}



.language-button {

    display: flex;

    align-items: center;



    gap: 5px;



    padding: 7px 9px;



    color: var(--gray-700);



    background: transparent;



    border: 1px solid transparent;



    border-radius: 7px;



    font-size: 12px;

    font-weight: 600;



    cursor: pointer;



    transition:

        background 0.2s ease,

        border-color 0.2s ease;

}



.language-button:hover {

    background: var(--gray-100);



    border-color: var(--border);

}



.language-arrow {

    margin-left: 2px;

}



.language-menu {

    position: absolute;



    top: calc(100% + 10px);

    right: 0;



    width: 135px;



    padding: 5px;



    background: var(--white);



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



    border-radius: 9px;



    box-shadow:

        0 14px 35px rgba(0, 0, 0, 0.12);



    opacity: 0;

    visibility: hidden;



    transform: translateY(-5px);



    transition: 0.2s ease;

}



.language-menu.active {

    opacity: 1;

    visibility: visible;



    transform: translateY(0);

}



.language-menu button {

    width: 100%;



    display: flex;

    align-items: center;



    gap: 8px;



    padding: 9px 10px;



    color: var(--gray-700);



    background: transparent;



    border: 0;



    border-radius: 6px;



    text-align: left;



    font-size: 12px;



    cursor: pointer;

}



.language-menu button:hover {

    background: var(--gray-100);



    color: var(--black);

}





/* =========================================================

   MOBILE BUTTON

========================================================= */



.menu-button {

    display: none;



    width: 40px;

    height: 40px;



    margin-left: 12px;



    padding: 9px;



    background: transparent;



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



    border-radius: 8px;



    cursor: pointer;

}



.menu-button span {

    display: block;



    width: 20px;

    height: 2px;



    margin: 4px auto;



    background: var(--black);



    transition: 0.2s ease;

}





/* =========================================================

   GENERAL

========================================================= */



main {

    overflow: hidden;

}



.section {

    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    margin: 0 auto;



    padding: 125px 0;

}



.eyebrow {

    margin-bottom: 15px;



    color: var(--blue);



    font-size: 12px;

    font-weight: 700;



    letter-spacing: 2.5px;

}



.section-heading {

    max-width: 720px;



    margin-bottom: 55px;

}



.section-heading h2 {

    margin-bottom: 17px;



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



    line-height: 1.02;



    letter-spacing: -2.5px;

}



.section-heading > p:last-child {

    color: var(--gray-500);



    font-size: 17px;

}





/* =========================================================

   HERO

========================================================= */



.hero {

    min-height: 100vh;



    display: flex;

    align-items: center;



    padding: 150px 48px 110px;



    color: var(--white);



    background:

        radial-gradient(

            circle at 80% 25%,

            rgba(37, 99, 235, 0.28),

            transparent 28%

        ),



        radial-gradient(

            circle at 15% 80%,

            rgba(37, 99, 235, 0.10),

            transparent 30%

        ),



        var(--black);

}



.hero-content {

    width: min(

        var(--max-width),

        100%

    );



    margin: 0 auto;

}



.hero .eyebrow {

    color: #6ea0ff;

}



.hero h1 {

    max-width: 1000px;



    font-size: clamp(

        52px,

        8vw,

        104px

    );



    line-height: 0.95;



    letter-spacing: -5px;



    font-weight: 800;

}



.hero h1 .accent {

    color: #4f83ff;

}



.hero-description {

    max-width: 620px;



    margin-top: 32px;



    color: #aeb5c0;



    font-size: 18px;



    line-height: 1.7;

}



.hero-buttons {

    display: flex;

    flex-wrap: wrap;



    gap: 12px;



    margin-top: 38px;

}





/* =========================================================

   BUTTONS

========================================================= */



.button {

    display: inline-flex;



    align-items: center;

    justify-content: center;



    min-height: 48px;



    padding: 0 21px;



    border-radius: 7px;



    font-size: 13px;

    font-weight: 700;



    transition:

        transform 0.2s ease,

        background 0.2s ease,

        border-color 0.2s ease;

}



.button:hover {

    transform: translateY(-2px);

}



.button.primary {

    color: white;



    background: var(--blue);

}



.button.primary:hover {

    background: var(--blue-dark);

}



.button.secondary {

    color: var(--black);



    background: transparent;



    border: 1px solid #d7dbe0;

}



.button.secondary:hover {

    border-color: var(--black);



    background: white;

}



.hero .button.secondary {

    color: white;



    border-color: #353a42;

}



.hero .button.secondary:hover {

    background: #181c22;



    border-color: #5d6673;

}



.button.small {

    min-height: 40px;



    padding: 0 15px;



    font-size: 12px;

}





/* =========================================================

   PROJECTS

========================================================= */



.projects {

    background: var(--black);
    color: var(--white);
    scroll-margin-top: 90px;

}



.projects-grid {

    display: grid;



    grid-template-columns:

        repeat(2, minmax(0, 1fr));



    gap: 24px;

}



.project-card {

    overflow: hidden;



    background: #111820;



    border: 1px solid #2a3544;



    border-radius: 0;



    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease,

        border-color 0.25s ease;

}



.project-card:hover {

    transform: translateY(-5px);



    border-color: #d3d9e1;



    box-shadow:

        0 20px 50px rgba(

            17,

            24,

            39,

            0.09

        );

}





/* PROJECT IMAGE */



.project-image {

    height: auto;
    aspect-ratio: 16 / 10;



    display: flex;



    align-items: center;

    justify-content: center;



    overflow: hidden;



    background:

        linear-gradient(

            135deg,

            #101419,

            #1b2430

        );

}



.project-nova {

    background:

        linear-gradient(

            135deg,

            #0b111a,

            #17263c

        );

}



.project-yatupe {

    background:

        linear-gradient(

            135deg,

            #111111,

            #292929

        );

}



.project-preview {

    color: white;



    font-size: 15px;



    font-weight: 700;



    letter-spacing: 3px;

}



.future-project {

    color: #9ba3ae;



    font-size: 11px;



    font-weight: 700;



    letter-spacing: 3px;

}





/* PROJECT CONTENT */



.project-content {

    padding: 29px;

}



.project-category {

    display: block;



    margin-bottom: 9px;



    color: var(--blue);



    font-size: 10px;



    font-weight: 700;



    letter-spacing: 1.5px;



    text-transform: uppercase;

}



.project-content h3 {

    margin-bottom: 12px;



    color: var(--black);



    font-size: 28px;



    line-height: 1.1;



    letter-spacing: -1px;

}



.project-content p {

    color: var(--gray-500);



    font-size: 14px;



    line-height: 1.7;

}



.project-tags {

    display: flex;



    flex-wrap: wrap;



    gap: 7px;



    margin-top: 21px;

}



.project-tags span {

    padding: 5px 9px;



    color: var(--gray-700);



    background: var(--gray-100);



    border-radius: 5px;



    font-size: 10px;



    font-weight: 600;

}



.project-buttons {

    display: flex;



    gap: 9px;



    margin-top: 23px;

}



.coming-soon {

    border-style: dashed;

}



.coming-soon:hover {

    opacity: 1;

}





/* =========================================================

   SERVICES

========================================================= */



.services-grid {

    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 16px;

}



.service-card {

    min-height: 250px;



    padding: 28px;



    background: var(--white);



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



    border-radius: 0;



    transition:

        transform 0.25s ease,

        border-color 0.25s ease,

        box-shadow 0.25s ease;

}



.service-card:hover {

    transform: translateY(-5px);



    border-color: #cdd4dd;



    box-shadow:

        0 15px 35px rgba(

            17,

            24,

            39,

            0.07

        );

}



.service-number {

    color: var(--blue);



    font-size: 11px;



    font-weight: 800;

}



.service-card h3 {

    margin-top: 48px;



    margin-bottom: 12px;



    font-size: 21px;



    letter-spacing: -0.5px;

}



.service-card p {

    color: var(--gray-500);



    font-size: 14px;

}





/* =========================================================

   ABOUT

========================================================= */



.about {

    min-height: 520px;



    display: flex;



    align-items: center;



    background: var(--black);



    color: white;

}



.about-content {

    width: 100%;

}



.about .eyebrow {

    color: #6ea0ff;

}



.about h2 {

    max-width: 900px;



    margin-bottom: 25px;



    font-size: clamp(

        42px,

        6vw,

        76px

    );



    line-height: 1;



    letter-spacing: -3px;

}



.about p:last-child {

    max-width: 650px;



    color: #9da5b0;



    font-size: 17px;

}





/* =========================================================

   CONTACT

========================================================= */



.contact {

    background: var(--off-white);



    padding-bottom: 135px;

}



.contact-box {

    padding: 80px 40px;



    text-align: center;



    background: var(--black);



    border-radius: 0;

}



.contact-box .eyebrow {

    color: #6ea0ff;

}



.contact-box h2 {

    margin-bottom: 17px;



    color: white;



    font-size: clamp(

        38px,

        5vw,

        65px

    );



    line-height: 1;



    letter-spacing: -2.5px;

}



.contact-box p:not(.eyebrow) {

    max-width: 600px;



    margin: 0 auto 30px;



    color: #9da5b0;



    font-size: 16px;

}





/* =========================================================

   FOOTER

========================================================= */



.footer {

    width: min(

        var(--max-width),

        calc(100% - 48px)

    );



    margin: 0 auto;



    padding: 32px 0;



    display: flex;



    align-items: center;



    justify-content: space-between;



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



    color: var(--gray-500);



    font-size: 12px;

}



.footer-logo {

    color: var(--black);



    font-size: 17px;



    font-weight: 800;

}



.footer-logo span {

    color: var(--blue);

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 950px) {



    .header {

        padding: 0 25px;

    }



    .nav {

        gap: 20px;

    }



    .services-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }

}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 720px) {



    .header {

        height: 68px;



        padding: 0 18px;

    }



    .logo {

        font-size: 19px;

    }





    /* MOBILE NAV */



    .nav {

        position: absolute;



        top: 68px;

        left: 0;



        width: 100%;



        display: flex;



        flex-direction: column;



        gap: 0;



        padding: 8px 18px 18px;



        background:

            rgba(

                255,

                255,

                255,

                0.98

            );



        border-bottom:

            1px solid var(--border);

    }



    .nav.active {

        transform: translateX(0);

    }



    .nav a {

        padding: 14px 3px;



        border-bottom:

            1px solid #eef0f2;

    }



    .nav a::after {

        display: none;

    }





    /* LANGUAGE */



    .language-selector {

        margin-left: 8px;

    }



    .language-button {

        padding: 6px 7px;



        font-size: 11px;

    }





    /* MENU */



    .menu-button {

        display: block;

    }





    /* HERO */



    .hero {

        min-height: 92vh;



        padding: 125px 22px 80px;

    }



    .hero h1 {

        font-size:

            clamp(

                46px,

                14vw,

                72px

            );



        letter-spacing: -3px;

    }



    .hero-description {

        font-size: 16px;

    }



    .hero-buttons {

        flex-direction: column;



        width: 100%;

    }



    .hero-buttons .button {

        width: 100%;

    }





    /* SECTIONS */



    .section {

        width:

            min(

                calc(100% - 32px),

                var(--max-width)

            );



        padding: 85px 0;

    }



    .section-heading {

        margin-bottom: 38px;

    }



    .section-heading h2 {

        font-size: 43px;



        letter-spacing: -1.8px;

    }





    /* PROJECTS */



    .projects-grid {

        grid-template-columns: 1fr;

    }



    .project-image {

        height: 235px;

    }



    .project-content {

        padding: 24px;

    }





    /* SERVICES */



    .services-grid {

        grid-template-columns: 1fr;

    }



    .service-card {

        min-height: auto;

    }



    .service-card h3 {

        margin-top: 32px;

    }





    /* ABOUT */



    .about {

        min-height: auto;

    }



    .about h2 {

        font-size: 43px;



        letter-spacing: -2px;

    }





    /* CONTACT */



    .contact {

        padding-bottom: 85px;

    }



    .contact-box {

        padding: 55px 22px;

    }



    .contact-box h2 {

        font-size: 42px;



        letter-spacing: -1.8px;

    }





    /* FOOTER */



    .footer {

        width:

            min(

                calc(100% - 32px),

                var(--max-width)

            );



        flex-direction: column;



        gap: 10px;



        text-align: center;

    }

}





/* =========================================================

   SMALL PHONES

========================================================= */



@media (max-width: 390px) {



    .hero h1 {

        font-size: 43px;

    }



    .project-buttons {

        flex-direction: column;

    }



    .project-buttons .button {

        width: 100%;

    }



    .language-button {

        font-size: 10px;

    }

}/* Selector de idioma */

.language-switcher {

    display: flex !important;

    align-items: center;

    gap: 8px;

    position: absolute;

    right: 32px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1000;

}



.language-switcher button {

    background: transparent;

    border: none;

    color: #fff;

    cursor: pointer;

    font-size: 13px;

    padding: 6px 8px;

    display: flex;

    align-items: center;

    gap: 5px;

}



.language-switcher button:hover {

    opacity: 0.7;

}

/* BANDERAS */

/*
   Banderas dibujadas con CSS.
   No dependen de emojis del sistema, por lo que se ven
   de forma consistente en PC y celular.
*/

.flag-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 14px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    vertical-align: middle !important;
}

/* ARGENTINA */

.flag-ar {
    background:
        linear-gradient(
            to bottom,
            #74acdf 0%,
            #74acdf 33.33%,
            #ffffff 33.33%,
            #ffffff 66.66%,
            #74acdf 66.66%,
            #74acdf 100%
        ) !important;
}

.flag-ar::after {
    content: "☀" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #f6c344 !important;
    font-size: 7px !important;
    line-height: 1 !important;
}

/* ESTADOS UNIDOS */

.flag-us {
    background:
        repeating-linear-gradient(
            to bottom,
            #b22234 0px,
            #b22234 2px,
            #ffffff 2px,
            #ffffff 4px
        ) !important;
}

.flag-us::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 9px !important;
    height: 8px !important;
    background: #3c3b6e !important;
}


/* Project section: styles scoped to preserve the existing site controls. */
.projects .section-heading h2,
.projects .project-content h3 { color: #fff; }
.projects .section-heading > p:last-child,
.projects .project-content p { color: #b5bfce; }
.projects .eyebrow,
.projects .project-category { color: #86b1ff; }
.projects .project-card { display: flex; flex-direction: column; min-width: 0; transition: opacity .5s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.projects .project-content { display: flex; flex-direction: column; flex: 1; }
.projects .project-tags { margin-bottom: auto; }
.projects .project-tags span { background: #202c3d; color: #d7e2f2; }
.projects .project-buttons { flex-wrap: wrap; }
.projects .button.small { min-height: 44px; }
.projects .button.secondary { color: #fff; border-color: #526078; }
.projects .button.secondary:hover { background: #202c3d; }
.projects .button:focus-visible { outline: 3px solid #9bc2ff; outline-offset: 4px; }
.projects .button:disabled { cursor: default; background: #253957; color: #c7d6ee; transform: none; }
.projects .project-link-status { color: #a6b4c9; font-size: 12px; margin-top: 12px; }
.projects .project-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; text-align: center; }
.projects .preview-note { font-size: 12px; color: #b5bfce; }
.projects .project-image { height: auto; flex-shrink: 0; }
.projects .project-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.projects .future-project { font-size: 48px; font-weight: 300; color: #86b1ff; }
.projects .coming-soon { background: #0d131b; }
.projects .project-card.project-reveal-pending { opacity: 0; transform: translateY(16px); }
@media (min-width: 1100px) {
    .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .projects .project-content { padding: 24px; }
}
@media (hover: hover) and (pointer: fine) {
    .projects .project-card:hover { border-color: #557fbd; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
}
@media (hover: none) {
    .projects .project-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .projects .project-card, .projects .button { transition: none; }
    .projects .project-card.project-reveal-pending { opacity: 1; transform: none; }
}

/* Straight edges for main visual blocks; controls keep their existing shape. */
.project-image, .project-image img, .project-preview, .project-placeholder,
.project-card, .about-content, .service-card, .contact-box { border-radius: 0; }

.whatsapp-float {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 2000;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    transition: transform .25s ease, background .25s ease;
}
.whatsapp-float:focus-visible { outline: 3px solid #86b1ff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
    .whatsapp-float:hover { transform: translateY(-3px); background: var(--blue-dark); }
}
@media (max-width: 720px) {
    .nav {
        position: fixed;
        top: 68px;
        left: auto;
        right: 0;
        width: min(300px, 100vw);
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        padding: 20px 24px calc(100px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: 1px solid var(--border);
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s .35s;
    }
    .nav.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s;
    }
    .menu-button span { transition: transform .3s ease, opacity .2s ease; }
    .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float, .menu-button span, .nav, .nav.active { transition: none; }
}
/* Brazil follows the existing CSS flag-icon structure. */
.flag-br { background: #009b3a; }
.flag-br::before { content: ''; position: absolute; width: 17px; height: 11px; background: #ffdf00; left: 50%; top: 50%; transform: translate(-50%,-50%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.flag-br::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(15deg,transparent 42%,#fff 43%,#fff 54%,transparent 55%),#002776; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.drawer-overlay { position: fixed; inset: 68px 0 0; z-index: 900; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .35s; }
@media(max-width:720px) { .drawer-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; } .nav { z-index: 1000; } }
@media(hover:hover) and (pointer:fine) { .projects .project-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); } .button:hover, .whatsapp-float:hover { transform: translateY(-2px); } }
.button:active, .whatsapp-float:active { transform: scale(.98); }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .drawer-overlay { transition:none; } .button:active, .whatsapp-float:active { transform:none; } }
/* Keep language options above the mobile drawer. */
.language-selector { z-index:1001; }
.language-menu { width:180px; }

/* Edge-to-edge backgrounds, retaining the existing inner content widths. */
.section {
    width: 100%;
    padding-inline: max(24px, calc((100% - var(--max-width)) / 2));
}
.contact { padding-inline: 0; }
.contact-box {
    padding-inline: max(64px, calc((100% - (var(--max-width) - 80px)) / 2));
}
@media (max-width: 720px) {
    .section { padding-inline: 16px; }
    .contact { padding-inline: 0; }
    .contact-box { padding-inline: 38px; }
}