@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

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


/* font-family: "IBM Plex Sans", sans-serif; */

/* 1 rem es igual a 16 pixeles */

/* Reset de márgenes para tipografía y elementos básicos */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
    padding: 0;
    text-wrap: balance;
}

/* etiquetas */
body {
    font-family: "IBM Plex Sans", sans-serif;
}

h1 {
    color: #1D1D1B
}

h2 {
    color: #1D1D1B;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    /* 114.286% */
}

h3 {
    color: #1D1D1B;
    font-size: 48px;
    letter-spacing: -.02em;
    font-size: 48px;
    font-weight: 600;
    line-height: 52px;

}

h4 {
    color: var(--Neutral-Colors-Color-800, #1D1D1B);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h5 {
    color: #2679f6;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    /* 111.111% */
}

p {
    font-size: 16px;
    color: #252525;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 900px;
}

.textos-white-theme {
    color: #FFFFFF;
}

.textos-75-white-theme {
    color: #dcdcdc;
}

/* Header */
/* header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: sticky;
    top: 0;
    background-color: white;
}
    /*  */

header img {
    width: 150px;
    margin: 8px;
}

header a,
footer a {
    text-decoration: none;
}

header nav:not(.navbar) ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin-right: 8px;

}

button {
    appearance: none;
    /* Elimina estilos nativos del sistema operativo */
    background: none;
    /* Quita el color gris de fondo */
    border: none;
    /* Quita el borde con relieve */
    padding: 0;
    /* Elimina el espacio interno por defecto */
    cursor: pointer;
    /* Hace que aparezca la manito al pasar el mouse */
    outline: inherit;
    /* Asegura que el foco se comporte bien */
    font: inherit;
    /* Hace que el texto use la fuente del resto de la web */
}

/* Avoid overriding Bootstrap navbar defaults globally
header nav:not(.navbar) {
    width: 20%;
} */

header .navbar {
    width: 100%;
    top: 0;
    z-index: 1030;
    box-shadow: -4px -4px 4px 0 rgba(255, 255, 255, 0.80)
}

header .navbar .nav-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: inherit;
}

header .navbar .navbar-nav {
    gap: 24px;
}

.has-fixed-navbar {
    padding-top: 88px;
}

/* Footer */
footer ul,
header ul,
body ul {
    list-style: none;
}

/* Clases */

/* Organizacion geneal */

.bk-general {
    background-color: #FCFCFC;

}

.conteiner-general {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 30px;
    box-sizing: border-box;
}

/* Botones */
.boton-sm {
    justify-content: center;
    align-items: center;
    padding: 16px 36px;
    border-radius: 40px;
    min-width: 200px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.18);
}

.boton-primario-sm {
    background-color: #1D1D1B;
    color: #FFFFFF;

}

.boton-secundario-sm {
    background-color: #FFFFFF;
    color: #1D1D1B;
}

.boton-acento-sm {
    background-color: #2679f6;
    color: #FFFFFF;
}

.estructura-texto-centrado {
    text-align: center;
    max-width: 900px;
}

/* Hero section */

.hero-imagen-mobile {
    display: none;
}

.hero-imagen {
    width: 535px;
    border-radius: 2rem;
    display: block;
    box-shadow: 0 4px 30.8px 0 rgba(0, 0, 0, 0.10);
}

.contenedor-hero-contenido {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    gap: 70px;

}

.contenedor-hero-texto-buttom {
    display: flex;
    flex-direction: column;
    max-width: 535px;
    gap: 16px;
}

.contenedor-botones-hero {
    display: flex;
    gap: 16px;

}

.presentacion {
    min-height: 75vh;
    flex-direction: column;
    display: flex;
    /* centra horizontal */
    align-items: center;
    /* centra vertical */
    padding: 2rem;

}

.contenedor-texto-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Estilos de texto */
.titulos-secciones {
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    /* 114.286% */
}

.texto-violet {
    color: #7C3796;
    font-weight: 500;
}

.titulo-index {
    color: #1D1D1B;
    font-size: 60px;
    font-weight: 600;
    text-align: left;
    line-height: 68px;

}

/* Organizacion de titulos centrados */

.conteiner-texto-completo {
    display: flex;
    padding-bottom: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Logo de la barra de nav o footer */
.logo {
    width: 150px;
    margin: 8px;
}

/* Imagen de fondo pagina principal */


/* Logo sobre bk de fondo pagina principal */
.imagen-carrusel {
    width: 700px;

}

/* Iconos de Servicios */
.imagen-servicios {
    width: 100px;
}

.form-field {
    background-color: #cda7dc;
}

/* Seccion quienes somos */

.salto-mobile {
    display: none;
}

.bk-quienes-somos {
    background-color: #f9f9fa;
}

/* .contenedor-qs-general {
    display: flex;
    max-width: 1200px;
    padding: 60px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
} */

.conteiner-texto-remarca {
    display: flex;
    align-items: center;
    gap: 8px;
}




.iconos-izquierda {
    width: 45px;
}

.fondo-icono-izq {
    display: flex;
    width: 90px;
    height: 90px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 25px;
    background: #FFFFFF;
    box-shadow: -4px -4px 4px 0 rgba(255, 255, 255, 0.80) inset, 4px 4px 4px 0 rgba(0, 0, 0, 0.10) inset;
}

.iconos-derecha {
    height: 80px;
}

.icons-conteiner-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

}

.card-conteiner {
    display: flex;
    height: fit-content;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    align-self: stretch;

    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: -4px -4px 10px 0 rgba(255, 255, 255, 0.50), 4px 4px 10px 0 rgba(0, 0, 0, 0.10);
}

.card-w-lg {
    width: 660px;
}

.card-w-m {
    width: 450px;
}

.text-conteiner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.contenedor-cards {
    display: flex;
    width: 1140px;
    align-items: flex-start;
    align-content: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

/* Seccion adn workana */
/* .seccion-centrada-completa {
    display: flex;
    padding: 60px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
} */

.adn-wkn-contenido {
    display: flex;
    padding: 16px;
    height: 146px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    border-radius: 10px;
    border: 2px solid var(--Purple-Shades-Purple-Shade-200, #F7F0FA);
    background: var(--Purple-Shades-Purple-Shade-100, #FBF7FC);
    box-shadow: 0 4px 6.6px 0 rgba(124, 55, 150, 0.10);
}

.card-adn-workana {
    display: flex;
    min-width: 360px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;

    border-radius: 20px;
    border: 2px solid var(--Neutral-Colors-Color-200, #E8E8E8);
    background: var(--Neutral-Colors-Color-100, #FCFCFC);
    box-shadow: 0 4px 30.8px 0 rgba(0, 0, 0, 0.10);
}

.adn-wkn-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex: 1 0 0;
    align-self: stretch;
}

/* .header-secciones-centrado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
} */

.ns-card-interna {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 369px;
    padding: 20px;
    align-items: flex-start;
    gap: 10px;

    border-radius: 10px;
    border: 2px solid var(--Purple-Shades-Purple-Shade-200, #F7F0FA);
    background: var(--Purple-Shades-Purple-Shade-100, #FBF7FC);
    box-shadow: 0 4px 6.6px 0 rgba(124, 55, 150, 0.10);
}

.ns-card-externa {
    display: inline-flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    border-radius: 20px;
    border: 2px solid var(--Neutral-Colors-Color-200, #E8E8E8);
    background: var(--Neutral-Colors-Color-100, #FCFCFC);
    box-shadow: 0 4px 30.8px 0 rgba(0, 0, 0, 0.10);
}

/* Seccion Como Trabajamos */
/* .contenedor-ct {
    display: flex;
    padding: 60px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
} */

.contenedor-cards-texto-ct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 54px;
    align-self: stretch;
}

.contenedor-texto-ct {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 20px;
    align-self: stretch;
    flex-wrap: wrap;
}

.numero-ct {
    display: flex;
    width: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titulo-ct {
    display: flex;
    width: 350px;
    height: fit-content;
    align-items: flex-start;
}

.texto-ct {
    display: flex;
    width: 350px;
    height: fit-content;
    align-items: flex-start;
}

/* CTa Footer */

.cta-footer {
    background-image: url("../images/g-s-o.png");
    height: 500px;
    border-radius: 24px;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.conteiner-titulo-subt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    text-align: center;
    gap: 24px;
}

/* Footer */

.footer-contenedor-efecto {
    z-index: 99;
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    /* box-shadow: 0 -50px 14px #0f567a00, 0 -32px 13px #0f567a08, 0 -18px 11px #0f567a1a, 0 -8px 8px #0f567a2b, 0 -2px 4px #0f567a33; */

}

.shadow-general {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.50);
}

.shadow-contact {
    box-shadow: -5px -5px 10px 0 rgb(250, 251, 255)
}

.conteiner-final {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px 10px;
    box-sizing: border-box;
}

.contenedor-superior-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 60px;
    gap: 16px;
}

.contenedor-nav-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.redes-icon {
    width: 30px;

}

.footer-icono {
    background-color: #FFFFFF;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: -5px -5px 10px 0 rgb(250, 251, 255),
        5px 5px 10px 0 rgba(166, 171, 189, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.contenedor-redes-footer {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.contenedor-final-footer {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.contenedor-nav-footer a {
    color: #252525;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
}

/* Clases para SERVICES */

.imagen-hero-services {
    width: 700px;
    display: block;
    justify-content: center;
    align-items: center;
}

.contenedor-hero-servicios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Clases de CONTACTO */

.bk-contacto {
    background-color: #f1f1f2;
}

.bk-icon-contact {

    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: -5px -5px 10px 0 rgb(250, 251, 255),
        5px 5px 10px 0 rgba(166, 171, 189, 0.25);
}

.contenedor-hero-contenido-contacto {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1200px;

}

.contenedor-texto-icono-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.estructura-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.contenedor-izq-texto-contact {
    width: 535px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;


}

.contenedor-der-texto-contact {
    width: 535px;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem;
    box-shadow: -5px -5px 10px 0 rgb(250, 251, 255),
        5px 5px 10px 0 rgba(166, 171, 189, 0.25);
}

.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
}

.campo-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-form label {
    font-size: 16px;
    font-weight: 500;
    color: #252525;
}

.campo-form input,
.campo-form textarea {
    width: 100%;
    border: 1.5px solid #dcdcdc;
    border-radius: 12px;
    padding: 12px 14px;
    background-color: #f1f1f2;


}

@media (max-width: 576px) {

    /* Seccion de lo compartido entre las dos secciones */
    .bk-quienes-somos .conteiner-general,
    .adn-workana.conteiner-general {
        padding: 40px 16px;
    }

    .bk-quienes-somos .conteiner-texto-completo,
    .adn-workana .conteiner-texto-completo,
    .contenedor-texto-hero {
        align-items: center;
        text-align: center;
        padding-bottom: 24px;
        gap: 10px;
    }

    h2 {
        font-size: 34px;
        line-height: 40px;
    }

    .conteiner-texto-remarca,
    .adn-workana .conteiner-texto-completo h5 {
        display: none;
    }

    .contact-page .contenedor-hero-contenido-contacto {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }


    /* Seccion HERO */
    .contenedor-texto-hero h1 {
        font-size: 50px;
        line-height: 45px;
        text-align: center;
    }

    .contenedor-hero-contenido {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .hero-imagen-mobile {
        display: block;
        width: 100%;
    }


    .contenedor-botones-hero {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .boton-sm {
        width: 100%;
    }

    .hero-imagen-desktop {
        display: none;
    }

    /* Seccion de lo especifico para QUIENES SOMOS */
    .bk-quienes-somos .contenedor-cards,
    .bk-quienes-somos .card-w-lg,
    .bk-quienes-somos .card-w-m {
        width: 100%;
    }

    .bk-quienes-somos .card-conteiner {
        padding: 16px;
        gap: 24px;
    }

    .bk-quienes-somos .conteiner-texto-remarca {
        justify-content: center;
        text-align: center;
    }

    .bk-quienes-somos .conteiner-texto-remarca h5 {
        font-size: 15px;
        line-height: 18px;
    }

    .salto-mobile {
        display: inline;
    }

    .bk-quienes-somos .fondo-icono-izq {
        width: 70px;
        height: 70px;
        border-radius: 18px;
    }

    .bk-quienes-somos .iconos-izquierda {
        width: 35px;
    }

    .bk-quienes-somos .iconos-derecha {
        height: 64px;
    }

    /* Seccion especifica de ADN WORKANA */
    .adn-workana .adn-wkn-cards {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .adn-workana .card-adn-workana {
        min-width: 0;
        width: 100%;
        padding: 14px;
        gap: 12px;
    }

    .adn-workana .adn-wkn-contenido {
        height: auto;
        padding: 14px;
        gap: 8px;
    }

    .adn-workana .adn-wkn-contenido h4 {
        font-size: 20px;
        line-height: 24px;
    }

    .adn-workana .adn-wkn-contenido p {
        font-size: 15px;
        line-height: 20px;
    }

    /* Seccion de COMO TRABAJAMOS */
    .contenedor-texto-ct {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 40px;
    }

    .numero-ct {
        width: auto;
        flex: 0 0 auto;
    }

    .titulo-ct {
        width: auto;
        flex: 1 1 0;
    }

    .texto-ct {
        flex: 0 0 100%;
        width: 100%;
    }

    /* Seccion de FOOTER CTA */
    .cta-footer {
        height: 400px;
        padding: 24px 16px;

        gap: 16px;
        border-radius: 16px;
        background-size: cover;
    }

    .conteiner-titulo-subt {
        width: 100%;
        max-width: 450px;
        gap: 12px;
    }

    .cta-footer .boton-sm {
        width: auto;
        min-width: 0;
        padding: 12px 24px;
    }

    /* Seccion FOOTER */
    .contenedor-final-footer {
        width: 100%;
        flex-direction: column;
        gap: 26px;
        flex-direction: column-reverse;
    }

    /* Seccion CONTACT PAGE */

    .contenedor-hero-contenido-contacto {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .contact-page .contenedor-izq-texto-contact,
    .contact-page .contenedor-der-texto-contact {
        width: 100%;
    }

    .contact-page .contenedor-der-texto-contact {
        border-radius: 16px;
    }

    .contact-page form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .contact-page input,
    .contact-page textarea,
    .contact-page button {
        width: 100%;
    }
}