* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

}

/**----------------BODY-------------------**/
body {

    background-color: #152DA0;
}

body h1,
h2,
h3,
p {
    color: white;
}

/**----------------NAVBAR-------------------**/
.hero_header_nav {
    width: 100%;
    height: 80px;
    background-color: #000143;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero_header_width {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav_logo {
    flex: 0 1 14.5%;
    display: flex;
    align-items: center;
}

.nav_logo img {
    max-width: 100%;
    height: auto;
}

.nav_links {
    flex: 0 1 43%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav_spacer {
    flex: 0 1 42%;
}

.nav_links a {
    text-decoration: none;
    color: white;
    font-size: 1.25rem;
    transition: transform 0.5 ease;
}

.nav_links a:hover {
    transform: scale(1.26);
    transition-duration: 500ms;
}




/**----------------HEADER-------------------**/



.hero_header {
    width: 100%;
    height: 65vh;
    background-image: url(../img/BG_Header.jpg);
    display: flex;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.hero_sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

.hero_sidebar img {
    width: 150px;
    height: auto;
}

.header_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 2rem;
    gap: 2rem;
    z-index: 1;
}

.header_box h1 {
    font-size: clamp(2.5rem, 4vw, 3.4rem);
    font-weight: 700;
    max-width: 900px;
}

.header_box img {
    position: absolute;
    right: 5%;
    bottom: 10%;
    width: 50%;
    max-width: 900px;
}








/**----------------Servicios-------------------**/

.servicios {
    background-image: url(../img/BG_Servicios.jpg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.servicios h2 {
    font-size: clamp(2rem, 2.5vw, 2.8rem);
    border-top: 3px solid white;
    text-align: center;
    width: 60%;
    padding-top: 2rem;
    font-weight: 700;
}

.servicios_box {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas bajen a otra fila */
    justify-content: center;
    gap: 30px;
    /* Espacio entre tarjetas */
    max-width: 1300px;
}

.Box_center {
    display: flex;
    align-items: center;
}

.Box_01,
.Box_02,
.Box_03,
.Box_04 {
    flex-basis: 600px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, #2959FD, #000143);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.Box_01 img,
.Box_02 img,
.Box_03 img,
.Box_04 img {
    display: block;
    margin-bottom: 20px;

}

.Box_01_Inside {
    background-color: #4361EE;
    padding: 20px;
    border-radius: 20px;
    width: 100%;
}




/**----------------Estrategia-------------------**/
.bg_estrategia {
    width: 100%;
    height: 80vh;
    background-image: url(../img/Background_Estrategia.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.section_estrategia {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15vw;
    box-sizing: border-box;
}

.estrategia_espaciado {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 20px;
}

.Box_estrategia {
    flex: 0 1 clamp(30%, 35vw, 38%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.estrategia_espaciado h2 {
    font-size: clamp(2.2rem, 3.2vw, 3.3rem);
    font-weight: 700;
    width: clamp(700px, 60vw, 900px);
    line-height: 1.2;
}

.estrategia_espaciado p {
    height: 215px;
    padding: 20px;
    background: linear-gradient(180deg, #000143, #2959FD);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
}

.Box_estrategia img {
    max-width: 100%;
    height: auto;
}


/**--------------Quienes Somos Shin----------------***/
.bg_q {
    width: 100%;
    min-height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.estructura_q {
    width: min(90%, 1100px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-sizing: border-box;
    margin: 40px auto;
}

.box_q {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.box_q h2 {
    font-size: clamp(2rem, 2.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
}

.box_q_info {
    padding: 2rem;
    background: linear-gradient(180deg, #000143, #2959FD);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #fff;
}

/* Bloque superior (los párrafos) */
.q_info_01 {
    display: flex;
    justify-content: center;
    width: 100%;
}

.q_textos {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

/* Los párrafos ahora usan proporciones, no px fijos */
.q_info_p_01,
.q_info_p_02 {
    flex: 1 1 45%;
    min-width: 150px;
    font-size: clamp(1rem, 1.1vw, 1.3rem);
    line-height: 1.5;
}

/* Bloque inferior */
.q_info_02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.q_info_02 img {
    width: 80px;
    height: auto;
}

.q_info_02 p {
    flex: 1 1 400px;
    font-size: clamp(1rem, 1.1vw, 1.3rem);
    line-height: 1.6;
}


/**----------------Trayectoria-------------------**/

.Trayectoria_class {
    width: 100%;
    background-image: url(../img/BG_Trayectoria.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.estructura_trayectoria {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 18vw;
}

.Trayectoria_Box {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
}

.Card_Rosalia,
.Card_Mariana {
    flex-basis: 600px;
    padding: 20px;
    border-radius: 20px;
    background: #4361EE;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

}

.Card_Rosalia h3,
.Card_Mariana h3 {
    background-color: white;
    color: #4361EE;
    font-weight: 700;
    padding-right: 25px;
    padding-left: 25px;
    border-radius: 0px 90px 90px 0px;
}
.title_trayectoria h2{
    font-size: clamp(2rem, 2.5vw, 2.8rem);
    font-weight: 700;
}




/**----------------Componentes-------------------**/
.button_style {
    width: 300px;
    background-color: #00A8FD;
    font-weight: 500;
    font-size: 1.2rem;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border-radius: 35px;
}

.button_style_2 {
    width: 300px;
    background-color: rgb(255, 188, 0);
    font-weight: 500;
    font-size: 1.2rem;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border-radius: 35px;
}

.button_style:hover {
    transform: scale(1.07);
    transition-duration: 450ms;
    color: black;
    background-color: #77DCFC;
}





/**----------------Footer-------------------**/

footer {
    width: 100%;
    background-image: url(../img/Footer_01.jpg);
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer_content {
    width: 70%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 0;
    justify-content: space-around;
}

.legales {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.legales h3 {
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.7;
}

.legales_link {
    width: 100%;
    margin-bottom: 20px;
}

.legales_cierre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 3px solid white;
    padding-bottom: 20px;
}

.legales_cierre img {
    display: block;
}

.legales_info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.texto_legales {
    text-align: center;
}

.texto_legales p {
    font-size: 0.9rem;
    line-height: 0.3rem;
}



/**------------MEDIA QUERIES I---------------**/
/**------------NAVBAR---------------**/

@media (max-width: 1350px) {
    .hero_header_width {
        width: 85%;
        /* De 70% a 85% */
    }

    .nav_spacer {
        flex: 0 1 30%;
        /* De 42% a 30% */
    }

    .nav_links a {
        font-size: 1.1rem;
        /* De 1.25rem a 1.1rem */
    }
}

@media (max-width: 1090px) {
    .hero_header_width {
        width: 95%;
    }

    .nav_spacer {
        flex: 0 1 35%;
    }

    .nav_links a {
        font-size: 1.15rem;
    }

    .nav_logo {
        flex: 0 1 12%;
        /* De 14.5% a 12% */
    }
}

@media (max-width: 960px) {
    .hero_header_width {
        width: 95%;
    }

    .nav_spacer {
        display: none;
    }

    .nav_links {
        flex: 1;
    }

    .nav_links a {
        font-size: 1rem;
        white-space: nowrap;
    }
}

@media (max-width: 550px) {
    .hero_header_nav {
        display: none;
    }
}



/**------------MEDIA QUERIES II---------------**/

@media (max-width: 1135px) {

    .Card_Rosalia h3,
    .Card_Mariana h3 {
        font-size: 1.5rem;
    }
}


@media (max-width: 768px) {

    footer {
        height: auto;
        /* que el footer crezca según el contenido */
        padding: 40px 0;
        background-size: cover;
    }

    .footer_content {
        width: 90%;
        padding: 20px 0;
        justify-content: center;
        gap: 30px;
    }

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

    .legales h3 {
        font-size: 2.4rem;
        line-height: 1.4;
    }

    .legales_link {
        display: flex;
        justify-content: center;
    }

    .legales_cierre {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding-bottom: 30px;
    }

    .legales_info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .texto_legales p {
        font-size: 0.8rem;
    }

    .legales_cierre a img {
        width: 28px;
        /* achica el icono de LinkedIn */
        height: auto;
    }
}

@media (max-width: 768px) {
    .box_q_info {
        width: 100%;
        padding: 15px;
    }

    .q_info_01 {
        width: 100%;
        flex-direction: column;
    }

    .q_info_p_01 {
        width: 100%;
        padding-left: 0;
    }

    .q_info_p_02 {
        width: 100%;
        font-size: 1rem;
    }

    .q_info_02 {
        width: 100%;
    }

    .q_info_02 img {
        width: 125px;
    }

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

@media (max-width: 768px) {
    .estructura_trayectoria {
        margin-top: 25px;
    }

    .Trayectoria_Box {
        flex-wrap: wrap;
    }

    .Trayectoria_Box p {
        font-size: 0.9rem;
    }
}








@media (max-width: 450px) {
    .hero_header {
        height: 35vh;
    }

    .hero_sidebar {
        display: none;
    }

    .header_box {
        margin-right: 2rem;
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 0;
    }

    .header_box img {
        display: block;
        width: 60%;
        margin-top: 10px;
    }

    .header_box h1 {
        width: 90%;
        font-size: clamp(1.3rem, 1.7vw, 1.6rem);
    }
}

@media (max-width: 450px) {
    .servicios {
        gap: 0rem;
    }

    .servicios h2 {
        width: 80%;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        border-top: 2px solid white;
        font-size: 1.2rem;
    }

    .servicios_box {
        gap: 10px;
    }

    .Box_01,
    .Box_02,
    .Box_03,
    .Box_04 {
        margin-left: 35px;
        margin-right: 35px;
        height: 100%
    }

    .Box_01 img,
    .Box_02 img,
    .Box_03 img,
    .Box_04 img {
        width: 110px;
    }

    .Box_01_Inside,
    .Box_02_Inside,
    .Box_03_Inside,
    .Box_04_Inside {
        height: 100%
    }

    .Box_01_Inside h3,
    .Box_02_Inside h3,
    .Box_03_Inside h3,
    .Box_04_Inside h3 {
        font-size: 1.2rem;
    }

    .Box_01_Inside p,
    .Box_02_Inside p,
    .Box_03_Inside p,
    .Box_04_Inside p {
        font-size: 0.65rem;
        margin-bottom: 0;
        line-height: 0.85rem;
    }

    .button_style_2 {
        width: 230px;
        font-size: 0.9rem;
        margin-bottom: 0px;
        padding: 0.5rem 1.5rem;
    }
}


@media (max-width: 450px) {
    .section_estrategia {
        display: block;
        margin: 0 20px;
        width: auto;
    }

    .bg_estrategia {
        height: 35vh;
    }

    .estrategia_espaciado {
        width: 100%;
        gap: 5px;
        align-items: center;
    }

    .estrategia_espaciado h2 {
        width: auto;
        font-size: 1.5rem;
        line-height: 1.6rem;
        display: flex;
        align-items: center;
        margin-left: 15px;
    }

    .Box_estrategia img {
        display: none;
    }

    .estrategia_espaciado p {
        width: 250px;
        height: auto;
        font-size: 0.8rem;
    }
}

@media (max-width: 370px) {
    .estrategia_espaciado h2 {
        font-size: 1.35rem;
        line-height: 1.2;
        white-space: normal;
        margin-left: 17px;
    }
}

@media (max-width: 339px) {
    .estrategia_espaciado h2 {
        font-size: 1.1rem;
        /* Una reducción más drástica para el límite */
        margin-left: 20px;
    }
}




/*-------------- Media Quienes Somos ----------------*/

@media (max-width: 450px) {
    .bg_q {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .estructura_q {
        width: 280px;
        margin: 0;
    }

    .box_q {
        margin-top: 15px;
        margin-bottom: 5px;
        gap: 10px;
    }

    .box_q h2 {
        margin-left: 10px;
        font-size: 1.2rem;
    }

    .box_q img {
        height: 15px;
    }
    .box_q_info {
        width: 100%;
        padding: 10px;
    }

    .q_info_01 {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .q_info_01 p {
        width: 100%;
        font-size: 0.7rem;
        margin-left: 0px;
    }

    .q_info_p_01 {
        margin-bottom: 5px;
    }

    .q_info_02 {
        width: 100%;
        gap: 10px;
        margin-top: 0px;
    }

    .q_info_p_02 {
        margin-top: 0px;
    }

    .q_info_02 img {
        width: 75px;
    }

    .q_info_02 p {
        font-size: 0.7rem;
    }
}


/*-------------- Media trayectoria ----------------*/
@media (max-width: 450px) {
    .Trayectoria_class {
        height: 100%;
        margin-top: 10px;
    }
    .title_trayectoria p{
    font-size: 0.7rem;
    }

    .estructura_trayectoria {
        margin: 0;
    }

    .Trayectoria_Box {
        flex-direction: column;
    }

    .Card_Rosalia,
    .Card_Mariana {
        padding: 15px;
        width: 100%;
        flex-basis: auto;
    }

    .Card_Rosalia h3,
    .Card_Mariana h3 {
        font-size: 0.9rem;
    }

    .Card_Rosalia p,
    .Card_Mariana p {
        font-size: 0.6rem;
        margin-bottom: 0.3rem;
    }
}












@media (max-width: 450px) {
    .button_style {
        width: 115px;
        font-size: 0.9rem;
        margin-top: 0;
        margin-bottom: 5px;
        padding: 0.5rem 1rem;
    }
}




/*---Media query footer---*/

@media (max-width: 450px) {
    footer {
        padding: 15px 0;
    }

    .footer_content {
        width: 70%;
        gap: 0px;
    }

    .legales img {
        display: none;
    }

    .legales_cierre {
        padding-bottom: 0;
        border-bottom: 0px;
    }

    .legales_cierre img {
        width: 100px;
    }

    .texto_legales p {
        line-height: 1rem;
    }
    .title_trayectoria h2 {
        font-size: 1.2rem;
    }
}