/* =========================================================
   LOGOS HUB INFORMÁTICO
   DESARROLLO TECNOLÓGICO
   CSS COMPLETO
========================================================= */


/* =========================================================
   VARIABLES LOCALES
========================================================= */

.dev-page {

    --dev-blue:#110F37;
    --dev-blue-soft:#171446;

    --dev-green:#13E8A5;
    --dev-purple:#220E7A;

    --dev-white:#FFFFFF;

    --dev-light:#F7F6FA;
    --dev-light-soft:#F1F0F7;

    --dev-text:#171426;
    --dev-muted:#6D697D;

    --dev-line-dark:rgba(255,255,255,.13);
    --dev-line-light:#DDD9E7;

}


/* =========================================================
   BASE
========================================================= */

.dev-page {

    background:var(--dev-blue);

}


.dev-container {

    width:min(
        calc(100% - 64px),
        1280px
    );

    margin-inline:auto;

}



.dev-section-index {


    color:var(--dev-green);


    font-size:11px;


    font-weight:800;


    letter-spacing:.18em;


    text-transform:uppercase;


}






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


.dev-hero {

    background:var(--dev-blue);

    border-bottom:
        1px solid var(--dev-line-dark);

}



.dev-hero-grid {


    min-height:720px;


    display:grid;


    grid-template-columns:

        1.2fr

        .8fr;


}



.dev-hero-main {


    display:flex;


    flex-direction:column;


    justify-content:center;


    padding:

        100px 70px 100px 0;


    border-right:

        1px solid var(--dev-line-dark);


}




.dev-kicker {


    color:var(--dev-green);


    font-size:11px;


    font-weight:800;


    letter-spacing:.2em;


    text-transform:uppercase;


}



.dev-hero h1 {


    margin-top:35px;


    max-width:850px;


    color:white;


    font-size:

        clamp(55px,7vw,95px);


    line-height:.95;


    letter-spacing:-.065em;


    font-weight:700;


}



.dev-hero h1 span {


    display:block;


    color:var(--dev-green);


}





.dev-hero-side {


    display:flex;


    flex-direction:column;


    justify-content:center;


    padding:

        80px 0 80px 70px;


}




.dev-hero-index {


    color:var(--dev-green);


    font-size:11px;


    font-weight:800;


    letter-spacing:.18em;


    margin-bottom:35px;


}




.dev-hero-side p {


    max-width:430px;


    color:#B8B5C7;


    line-height:1.8;


    font-size:17px;


}



.dev-hero-side strong {


    display:block;


    margin-top:15px;


    color:white;


}



.dev-hand-note {


    margin-top:50px;


    max-width:280px;


    color:var(--dev-green);


    font-family:"Caveat",cursive;


    font-size:32px;


    line-height:1;


    transform:rotate(-3deg);


}






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


.dev-intro {


    padding:120px 0;


    background:var(--dev-light);


}



.dev-editorial-grid {


    display:grid;


    grid-template-columns:190px 1fr;


    gap:80px;


}




.dev-intro h2 {


    margin:0;


    max-width:900px;


    color:var(--dev-text);


    font-size:

        clamp(45px,5vw,72px);


    line-height:1;


    letter-spacing:-.055em;


}



.dev-intro h2 span {


    display:block;


    color:var(--dev-purple);


}




.dev-intro-copy {


    margin-top:40px;


}



.dev-intro-copy p {


    max-width:760px;


    color:var(--dev-muted);


    font-size:18px;


    line-height:1.8;


}






/* =========================================================
   ECOSISTEMA
========================================================= */


.dev-ecosystem {


    padding:120px 0;


    background:var(--dev-blue);


}




.dev-index-light {


    color:var(--dev-green);


}



.dev-ecosystem-header {


    display:grid;


    grid-template-columns:190px 1fr;


    gap:80px;


    margin-bottom:80px;


}



.dev-ecosystem h2 {


    margin:0;


    color:white;


    font-size:

        clamp(45px,5vw,72px);


    line-height:1;


    letter-spacing:-.05em;


}



.dev-ecosystem h2 span {


    display:block;


    color:var(--dev-green);


}




.dev-ecosystem p {


    max-width:700px;


    margin-top:30px;


    color:#B8B5C7;


    font-size:18px;


    line-height:1.8;


}





/* SOLUCIONES */


.dev-solutions {


    border-top:

        1px solid var(--dev-line-dark);


}



.dev-solution {


    display:grid;


    grid-template-columns:80px 1fr 300px 40px;


    gap:30px;


    align-items:center;


    padding:45px 0;


    text-decoration:none;


    border-bottom:

        1px solid var(--dev-line-dark);


    transition:.3s ease;


}



.dev-solution:hover {


    transform:translateX(8px);


}



.dev-solution-number {


    color:var(--dev-green);


    font-weight:800;


}



.dev-solution-label {


    color:var(--dev-green);


    font-size:12px;


    text-transform:uppercase;


    letter-spacing:.15em;


}



.dev-solution h3 {


    margin:12px 0;


    color:white;


    font-size:28px;


}



.dev-solution p {


    margin:0;


    color:#B8B5C7;


    font-size:16px;


}



.dev-solution-meta {


    display:flex;


    flex-wrap:wrap;


    gap:10px;


}



.dev-solution-meta span {


    padding:7px 12px;


    border:

        1px solid rgba(255,255,255,.2);


    border-radius:50px;


    color:#D8D6E5;


    font-size:12px;


}



.dev-solution-arrow {


    color:var(--dev-green);


    font-size:25px;


}






/* =========================================================
   DIFERENCIA
========================================================= */


.dev-difference {


    padding:120px 0;


    background:var(--dev-light);


}




.dev-difference-grid {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:100px;


}




.dev-difference h2 {


    margin-top:30px;


    color:var(--dev-text);


    font-size:

        clamp(45px,5vw,70px);


    line-height:1;


    letter-spacing:-.05em;


}




.dev-difference-content p {


    color:var(--dev-muted);


    font-size:18px;


    line-height:1.8;


}



.dev-difference-content ul {


    margin-top:40px;


    padding:0;


    list-style:none;


}



.dev-difference-content li {


    padding:20px 0;


    border-bottom:

        1px solid var(--dev-line-light);


    color:var(--dev-text);


}







/* =========================================================
   FAQ
========================================================= */


.dev-faq {

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #fcfbff 0%,
            #f7f6fa 100%
        );

    position: relative;

}



.dev-faq-top {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 320px;

    gap: 70px;

    align-items: end;

    margin-bottom: 70px;

}



.dev-faq-header {

    max-width: 820px;

}



.dev-faq h2 {

    margin: 28px 0 0;

    color: var(--dev-text);

    font-size: clamp(44px, 5vw, 72px);

    line-height: .98;

    letter-spacing: -.055em;

}



.dev-faq-header p {

    margin-top: 28px;

    max-width: 680px;

    color: var(--dev-muted);

    font-size: 18px;

    line-height: 1.8;

}




/* =========================================================
   LADO CREATIVO
========================================================= */


.dev-faq-aside {

    position: relative;

    padding: 20px 0 20px 35px;

    border-left:

        1px solid rgba(34,14,122,.18);

    background:transparent;

}


.dev-faq-aside::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:18px;

    height:18px;


    border-top:
        2px solid var(--dev-green);

    border-left:
        2px solid var(--dev-green);

}



.dev-faq-hand {

    color: var(--dev-green);

    font-family: "Caveat", cursive;

    font-size: 34px;

    line-height: 1.02;

    transform: rotate(-2.5deg);

    max-width: 240px;

}



.dev-faq-aside-copy {

    margin: 20px 0 0;

    color: var(--dev-muted);

    font-size: 14px;

    line-height: 1.75;

    max-width: 240px;

}






/* =========================================================
   LISTA FAQ
========================================================= */


.dev-faq-list {

    border-top: 1px solid var(--dev-line-light);

}



.dev-faq-list details {

    border-bottom: 1px solid var(--dev-line-light);

    transition: background .25s ease;

}



.dev-faq-list details[open] {

    background:rgba(19,232,165,.04);

}

.dev-faq-list details[open] summary {

    color:var(--dev-purple);

}



.dev-faq-list summary {

    list-style: none;

    display: grid;

    grid-template-columns: 70px minmax(0, 1fr) 46px;

    gap: 20px;

    align-items: center;

    padding: 28px 0;

    cursor: pointer;

}



.dev-faq-list summary::-webkit-details-marker {

    display: none;

}



.dev-faq-number {

    color: var(--dev-purple);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .16em;

}



.dev-faq-question {

    color: var(--dev-text);

    font-size: 26px;

    font-weight: 700;

    line-height: 1.28;

    letter-spacing: -.02em;

}



.dev-faq-toggle {

    width: 46px;
    height: 46px;

    border: 1px solid rgba(34, 14, 122, .14);

    border-radius: 50%;

    position: relative;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;

}



.dev-faq-toggle::before,
.dev-faq-toggle::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 16px;
    height: 2px;

    background: var(--dev-purple);

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

    border-radius: 2px;

}



.dev-faq-toggle::after {

    transform: translate(-50%, -50%) rotate(90deg);

}



.dev-faq-list details[open] .dev-faq-toggle {

    background: rgba(19, 232, 165, .10);

    border-color: rgba(19, 232, 165, .35);

    transform: rotate(180deg);

}



.dev-faq-list details[open] .dev-faq-toggle::after {

    opacity: 0;

}



.dev-faq-answer {

    padding: 0 66px 28px 90px;

}



.dev-faq-answer p {

    max-width: 760px;

    margin: 0;

    color: var(--dev-muted);

    font-size: 17px;

    line-height: 1.85;

}






/* =========================================================
   HOVER
========================================================= */


.dev-faq-list details:hover summary {

    opacity: 1;

}



.dev-faq-list details:hover .dev-faq-toggle {

    border-color: rgba(19, 232, 165, .35);

    background: rgba(19, 232, 165, .06);

}






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


@media (max-width: 1000px) {

    .dev-faq-top {

        grid-template-columns: 1fr;

        gap: 35px;

    }

}



@media (max-width: 650px) {

    .dev-faq {

        padding: 90px 0;

    }



    .dev-faq h2 {

        font-size: 42px;

    }



    .dev-faq-aside {

        padding: 22px 20px 18px;

    }



    .dev-faq-hand {

        font-size: 30px;

        max-width: 100%;

    }



    .dev-faq-aside-copy {

        max-width: 100%;

    }



    .dev-faq-list summary {

        grid-template-columns: 1fr 42px;

        gap: 16px;

        padding: 24px 0;

    }



    .dev-faq-number {

        grid-column: 1 / -1;

        margin-bottom: -6px;

    }



    .dev-faq-question {

        font-size: 20px;

    }



    .dev-faq-toggle {

        width: 42px;
        height: 42px;

    }



    .dev-faq-answer {

        padding: 0 0 24px 0;

    }



    .dev-faq-answer p {

        font-size: 16px;

    }

}





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


.dev-final {


    padding:130px 0;


    background:var(--dev-blue);


}



.dev-final-grid {


    display:grid;


    grid-template-columns:1.2fr .8fr;


    gap:80px;


}




.dev-final h2 {


    margin-top:30px;


    color:white;


    font-size:

        clamp(50px,6vw,85px);


    line-height:.95;


    letter-spacing:-.06em;


}



.dev-final h2 span {


    display:block;


    color:var(--dev-green);


}



.dev-final-side p {


    color:#B8B5C7;


    font-size:18px;


    line-height:1.8;


}





.dev-whatsapp {


    display:inline-flex;


    align-items:center;


    gap:12px;


    margin-top:35px;


    padding:15px 30px;


    border:

        1px solid var(--dev-green);


    border-radius:50px;


    color:var(--dev-green);


    text-decoration:none;


    font-weight:700;


}



.dev-whatsapp:hover {


    background:var(--dev-green);


    color:var(--dev-blue);


}







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


@media(max-width:1000px){


    .dev-hero-grid,
    .dev-editorial-grid,
    .dev-ecosystem-header,
    .dev-difference-grid,
    .dev-final-grid {


        grid-template-columns:1fr;


    }



    .dev-hero-main {


        border-right:0;


        border-bottom:

            1px solid var(--dev-line-dark);


        padding:80px 0;


    }



    .dev-hero-side {


        padding:70px 0;


    }



    .dev-solution {


        grid-template-columns:60px 1fr;

    }



    .dev-solution-meta,
    .dev-solution-arrow {


        grid-column:2;


    }


}






@media(max-width:650px){


    .dev-container {


        width:

            calc(100% - 32px);


    }



    .dev-hero h1 {


        font-size:48px;


    }



    .dev-ecosystem h2,
    .dev-intro h2,
    .dev-difference h2,
    .dev-final h2 {


        font-size:42px;


    }



    .dev-solution h3 {


        font-size:23px;


    }


}