/*Estilos generales*/
@font-face {
    font-family: 'Century gothic';
    src: url(fonts/century-gothic/CenturyGothic.ttf);
}

@font-face {
    font-family: "WebSymbols";
    src: url("fonts/websymbols-regular/WebSymbols-Regular.eot?") format("eot"), url("fonts/websymbols-regular/WebSymbols-Regular.woff") format("woff"), url("fonts/websymbols-regular/WebSymbols-Regular.ttf") format("truetype"), url("fonts/websymbols-regular/WebSymbols-Regular.svg#WebSymbols-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0px;
    padding: 0px;
    color: white;
}

.clearfix {
    float: none;
    clear: both;
}


body {
    background: rgb(42, 40, 41);
    overflow-x: hidden;


}

/* #content {
    width: 100%;
    overflow: hidden;
} */

/* ESTILOS DE LA PANTALLA DE CARGA */

body.loading {
    overflow: hidden;
}


#loading-screen {
    position: absolute;
    z-index: 99999;
    font-family: "Century Gothic";
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #25364f;
    font-size: 30px;
    font-weight: normal;
    color: white;
    margin-bottom: 5%;
    opacity: 1;
    transition: all 0.5s ease;
    /* Transición de 0.5 segundos para el efecto suave */
}

/* Clase para desvanecer la pantalla de carga */
.loading-fade-out {
    opacity: 0;
    pointer-events: none;
    /* Evita que los elementos por debajo sean clicables */
}


#loading-screen img {
    display: block;
    margin: 0px auto;

}

#loading-screen p {
    display: block;

}

.load-content {
    text-align: center;
    animation: loadingOpacity ease-in-out;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}

@keyframes loadingOpacity {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }

}

/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/


body::-webkit-scrollbar {
    -webkit-appearance: none;
}

body::-webkit-scrollbar:vertical {
    width: 10px;
}

body::-webkit-scrollbar-button:increment,
.contenedor::-webkit-scrollbar-button {
    display: none;
}

body::-webkit-scrollbar:horizontal {
    height: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

body::-webkit-scrollbar-track {
    border-radius: 10px;
}




/* ESTILOS PARA EL WIDGET DE COTIZACIONES*/

#widget {
    position: relative;
    opacity: 0.9;
    transition: all 500ms;
    height: 66px;
}

#widget:hover {
    opacity: 1;
}

/* ESTILOS PARA EL WIDGET DE WHATSAPP */

.whatsapp-float {
    position: sticky;
    padding: 0px;
    margin-left: 95%;
    margin-right: 5%;
    top: 83%;
    margin-top: -13%;

    z-index: 99998;
}

.whatsapp-float img {
    width: 70px;
}

.whatsapp-float a {
    opacity: 0.5;
    display: block;
    color: #fff;
    /* Color del texto */
    text-decoration: none;
    transition: all 200ms;
}

.whatsapp-float a:hover {
    opacity: 0.8;
}


/* Estilos del header y barrada de navegación */
header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0px;

    font-family: "Century Gothic";
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 120px;
    background-color: transparent;
    text-transform: initial;



    /*Animación header Scroll*/
    /* transition: all 300ms;
    animation: adjust-header linear both;
    
    animation-timeline: scroll();
    animation-range: 0 400px; */



}

@keyframes adjust-header {
    to {
        background-color: rgba(37, 54, 79, 0.5);
        box-shadow: 0px 2px 20px #272727;
        backdrop-filter: blur(5px);
        opacity: 0;
    }
}

/* @keyframes showHeader {
    to {
        opacity: 1;

    }

} */


.header_scroll_none {
    opacity: 0;
    transition-duration: 0.4s;
    transition-property: all;
}



.header_none {
    opacity: 0;
    transition-duration: 0.4s;
    transition-property: all;
}

.header_show {
    opacity: 1;
    background-color: rgba(37, 54, 79, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 20px #272727;
    transition-duration: 0.4s;
    transition-property: all;

}

.header_show_main {
    opacity: 1;
    background-color: rgba(37, 54, 79, 0.5);
    backdrop-filter: blur(5px);
    box-shadow: 0px 2px 20px #272727;
    transition-duration: 0.4s;
    transition-property: all;

}



.mobile {
    display: none;
}

.abrir-menu,
.cerrar-menu {
    justify-self: flex-end;
    display: none;
    font-family: "WebSymbols";
    color: white;
    font-weight: normal;
    font-size: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    filter: invert(100%);
    /* margin-right: 10px; */

}

.abrir-menu:active,
.cerrar-menu:active {
    transform: scale(1.3, 1.3);

}




header .logo {
    display: flex;
    align-items: center;

    font-family: "Georgia", "Trebuchet MS";
    overflow: hidden;
    line-height: 90px;
    font-size: 10px;
    transition: all 600ms;


}

header .logo img {
    min-width: 200px;
    max-width: 250px;
    margin-left: 10px;


}

header .logo:hover img {
    padding-bottom: 10px;
    padding-top: 10px;
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
}


@keyframes moveLogo {
    0% {
        transform: translateX(-400px);

    }

    100% {
        transform: translateX(0px);
    }

}

header .logo img {
    animation: moveLogo 300ms;
    animation-duration: 300ms;
    animation-iteration-count: initial;
    animation-timing-function: ease-out;
}

header .logo h1 {
    animation: moveText 200ms;
    animation-duration: 300ms;
    animation-iteration-count: initial;
    animation-timing-function: ease-out;

}

header #menu {
    display: flex;
    justify-content: center;


}

header ul {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: inherit;
    line-height: 120px;
    margin-right: 10%;
}

header ul li {
    display: inline-flex;
    text-align: center;
    list-style: none;
    transition: all 300ms;
    text-shadow: 1px 1px 2px gray;


}

@keyframes moveText {
    from {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(0px);
    }
}

header ul a {
    display: flex;
    height: 120px;
    text-decoration: none;
    padding-right: 20px;
    padding-left: 20px;
    transition: moveText 300ms, background-color 500ms;
}

header .contact_header a {
    height: 65px;
    line-height: 65px;
}

header #menu a:hover {
    animation: moveText 300ms;
    text-shadow: 0px 1px 8px rgba(255, 255, 255, 1), 0px 1px 8px rgba(255, 255, 255, 1), 0px 1px 8px rgba(255, 255, 255, 1), 1px 1px 1px black, 1px 1px 1px black, 1px 1px 1px black;
    /* background-color: rgba(144, 180, 224, 0.507); */
}


.icon {
    text-transform: lowercase;
    font-family: "WebSymbols";
}

.contact_header .icon a:hover {
    background-color: transparent !important;
    animation: none !important;
}

.contact_header .contact_link a:hover {
    background-color: rgba(255, 255, 255, 0.6) !important;
    transition: all 300ms;
    animation: moveText 300ms;
}

.contact_header {
    display: flex;
    justify-content: flex-end;
}


.contact_link a {
    background-color: white;
    font-weight: bold;
    color: black;
    padding-top: -10px;
    padding-bottom: -10px;


}



/* Estilos del contenedor principal */

/* ANIMACIÓN FADE AL HACER SCROLL DE LAS SECCIONES */

.box {
    opacity: 0;
    transition: opacity 0.7s;


}

.fade-in {
    animation: fade 1.5s ease-in-out forwards;



}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Sección de Bienvenida */

section #article_welcome {
    font-family: 'Century Gothic';
    width: 100%;
    min-height: 63.7vh;
    max-height: 80vh;
    margin: 0px auto;
    margin-top: -250px;
    padding-top: 30%;
    text-align: center;
    box-shadow: 0px 2px 20px black;
    z-index: 1;
    overflow: hidden;


}

#article_welcome {
    box-shadow: none !important;

}



#article_welcome {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url(../img/bolsa_background_final.jpg);
    background-size: 160%;
    background-attachment: fixed;
    background-position: center 0%;
    background-repeat: no-repeat;
    transition: background-size 0.1s background-position 0.1s ease-in-out;
}

@keyframes blurOut {
    0% {
        filter: blur(5px)
    }

    35% {
        filter: blur(5px)
    }

    200% {
        filter: blur(0px)
    }

}

#article_welcome h1,
p {
    margin: 0px auto;
    animation: blurOut 700ms;
    animation-iteration-count: initial;
    animation-timing-function: ease-in-out;

}



#article_welcome h1 {
    font-family: 'Georgia';
    text-transform: uppercase;
    width: 50%;
    font-size: 70px;
    text-shadow: 1px 2px 3px #333;

}



#article_welcome p {
    width: 60%;
    margin-top: 23px;
    font-size: 23px;
    text-shadow: 1px 2px 3px #333;
    letter-spacing: 1px;

}

#article_welcome a {
    text-decoration: none;
    transition: all 200ms;
}

#article_welcome a:hover {
    /* text-shadow: 0px 0px 7px rgba(255, 255, 255, 0.966); */
    text-shadow: 0px 1px 8px rgba(255, 255, 255, 1), 0px 1px 8px rgba(255, 255, 255, 1), 0px 1px 8px rgba(255, 255, 255, 1), 1px 1px 1px black, 1px 1px 1px black, 1px 1px 1px black;

}




/* Sección de Nuestro propósito */

#purpose {
    font-family: 'Century Gothic';
    width: 100%;
    background-color: #25364f;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    box-shadow: 0px 0px 0px 2px 10px black;

}

#article_purpose {
    width: 80%;
    height: 350px;
    max-height: 100%;
    margin: 0px auto;
    padding-top: 12%;
    text-align: right;

}

#article_purpose h2 {
    font-weight: bold;
    width: 100%;
    font-size: 35px;
    letter-spacing: 2px;
    margin-top: -90px;

}

#article_purpose p {
    font-weight: normal;
    width: 100%;
    font-size: 25px;
    padding-top: 20px;
    letter-spacing: 1px;

}




/* Sección de Nuestros servicios */

section #article_services {
    background-color: white;
    background-size: cover;
    text-align: center;
    width: 100%;
    min-height: 750px;
    /* max-height: 100%; */
    display: grid;
    grid-template-columns: repeat(4, 20%);
    /* gap: 2%; */
    /* padding-left: 2.5%;
    padding-right: 2.5%; */
    align-content: center;
    justify-content: center;
    padding-top: 0%;



}

#services {
    background-color: white;
    color: black;
    font-family: "Georgia", "Trebuchet MS";
    text-align: center;
    padding-top: 120px;


}

#services h3 {
    color: black;
    font-size: 50px;
    margin-top: 3%;

}


#services hr {
    width: 20%;
    margin: 0px auto;
    margin-top: 30px;
    border: 1px solid #25364f;
}


/* ESTILOS DE LAS TARJETAS (SERVICES) */

.card {
    position: static;
    display: block;
    width: 90%;
    height: 480px;
    padding: 0px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;



}



@keyframes fadeCards {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.card1 {
    background: url(../img/assset_card_background.jpg);
    background-size: cover;
    background-position-x: 70%;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;

}

.card2 {
    background-image: url(../img/card_2.jpg);
    background-size: cover;
    background-position-x: 50%;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.card3 {
    background-image: url(../img/card_3.jpg);
    background-size: cover;
    background-position-x: 92%;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.card4 {
    background-image: url(../img/card_4.jpg);
    background-size: cover;
    background-position-x: 75%;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.card:hover {
    background: #272727;

}


.card_title {
    opacity: 0;
    margin-top: 60px;
    font-size: 1.5rem;
    padding: 1rem;

}


.card_p {
    width: 100%;
    opacity: 0;
    padding-top: 50px;
    font-size: 1rem;
    color: white;
    transition: all 300ms;
    margin: 0px auto;
}

.card a {
    display: inline-block;
    margin-top: 100px;
    padding: 15px 15px;
    background-color: white;
    color: black;
    border-radius: 0px;
    text-decoration: none;
    opacity: 0;


}

.card_hr {
    opacity: 0;
    border: 1px solid #90b4e0 !important;
    margin-top: 10px !important;
    transition: all 300ms;

}

@keyframes showHr {

    from {
        width: 0%;
    }

    to {
        width: 30%;
    }


}


#article_services p {
    color: white;
    width: 70%;
    margin: 0px auto;
    font-size: 16px;

}

.card:hover .card_title {
    opacity: 1;
    animation: fadeCards 0.5s ease-in-out forwards;

}

.card:hover .card_p {
    opacity: 1;
    animation: fadeCards 0.5s ease-in-out forwards;

}

.card:hover .card_hr {
    opacity: 1;
    animation: showHr 0.5s ease-in-out forwards;


}

.card:hover a {
    opacity: 1;
    animation: fadeCards 0.5s ease-in-out forwards;

}

.card:hover a {
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
    border-bottom: 2px solid #ffffff;

}

/* Sección de NOSOTROS */

section #article_about {
    font-family: 'Century Gothic';
    background-color: #484747;
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
    background-attachment: fixed;


    margin: 0px auto;
    width: 100%;

    text-align: center;
    box-shadow: 0px 2px 20px black;
    padding-top: 180px;
    min-height: 800px;
    max-height: 100%;

}

#article_about h2 {
    color: white;
    font-size: 50px;
}

#article_about h3 {
    color: white;
    font-size: 40px;
}

#article_about hr {
    width: 12%;
    margin: 0px auto;
    margin-bottom: 90px;
    margin-top: 30px;
    border: 1px solid white;
}


section #container_about {
    display: grid;
    grid-template-areas:
        "title img";
    grid-template-rows: 1fr;
    grid-template-columns: 65% 35%;
    align-content: center;
    /* padding-bottom: 10%; */

}

#about_title {
    display: block;
    grid-area: "title";
    width: 88%;
    font-size: 25px;
    text-align: left;
    margin-left: 10%;
    align-self: flex-start;

}

#about_title p {
    margin-top: 15px;
    font-size: 20px;
    letter-spacing: 1px;
}


.img_founder {
    grid-area: "img";
    margin-right: 20%;
    align-self: flex-start;
}

.img_founder img {
    width: 80%;
    border-radius: 50%;
    margin-left: 50px;
    align-self: center;

}

/* Sección de sociedad de bolsa */

section #article_sociedad_bolsa {
    font-family: 'Century Gothic';
    background-color: #25364f;
    background-size: cover;
    margin: 0px auto;
    display: block;
    width: 100%;
    min-height: 280px;
    max-height: 100%;
    padding-top: 2%;
    box-shadow: 0px 2px 20px black;
}


#sociedad_bolsa_title {
    display: block;
    width: 88%;
    font-size: 25px;
    text-align: left;
    margin-top: 2%;
    margin-right: 6%;
    margin-left: 6%;




}

#sociedad_bolsa_title p {
    margin-top: 15px;
    font-size: 20px;
    letter-spacing: 1px;
}


/* Sección de agente productor */

section #article_agente_productor {
    font-family: 'Century Gothic';
    background-color: white;
    background-size: cover;
    margin: 0px auto;
    display: block;
    width: 100%;
    min-height: 300px;
    max-height: fit-content;
    padding-top: 2%;
    box-shadow: 0px 2px 20px black;

}


#agente_productor_title {
    display: block;
    width: 88%;
    font-size: 25px;
    text-align: left;
    margin-top: 4%;
    margin-right: 6%;
    margin-left: 6%;



}

#agente_productor_title p {
    margin-top: 15px;
    font-size: 20px;
    letter-spacing: 1px;
    color: black;
}

#agente_productor_title h2 {
    color: black;
}

/* Sección de INFORMES SEMANALES */

section #article_informes_semanales {
    font-family: 'Century Gothic';
    background-color: #484747;
    background-size: cover;
    margin: 0px auto;
    display: block;
    width: 100%;
    min-height: 800px;
    max-height: 100%;
    padding-top: 5%;
    box-shadow: 0px 2px 20px black;
    overflow-y: hidden;
}


#informes_semanales_title {
    display: block;
    width: 80%;
    font-size: 25px;
    text-align: center;
    margin: 0px auto;

}

#informes_semanales_title h2 {
    margin-bottom: 20px;
    margin-top: 15px;
}



#informes {
    min-height: 800px;
    max-height: 100%;
    width: 50%;
    padding-top: 15px;

}

#blog hr {
    width: 20%;
    margin: 0px auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid #FFF;

}

.mas-informes {
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.mas-informes span{
    font-size: 12px;
}


/* Sección de Footer */

footer {
    width: 100%;
    min-height: 600px;
    max-height: 100%;
    margin-bottom: 1%;
}

footer #article_footer {
    font-family: 'Century Gothic';
    background-color: rgb(42, 40, 41);
    margin: 0px auto;
    display: block;
    width: 100%;
    min-height: 500px;
    max-height: 100%;
    padding-top: 2%;
    text-align: center;
}

#article_footer img {
    width: 380px;
    margin: 0px auto;
}

#article_footer hr {
    margin-bottom: 40px;
    ;
}

#article_footer h2 {
    margin-top: 2%;
    margin-bottom: 2%;
}

#article_footer p {
    padding-top: 5px;
}

.social {
    margin-top: 50px;
    margin-bottom: 50px;
}



#article_footer .social img {
    width: 40px;
    margin-left: 1%;
    margin-right: 1%;
}

#article_footer a {
    text-decoration: none;
    padding-top: 5px;
}

#article_footer a:hover img {
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.438));
}

/*DISPLAY NONE PARA EL BOTÓN DE SOCIEDAD DE BOLSA (SÓLO VISIBLE EN MOBILE)*/

.join_mobile{
    display: none;
}