/*
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap');*/

* {
    box-sizing:     border-box;
    font-family:    'Plus Jakarta Sans', sans-serif;
}

body, html {
    margin:                 0;
    padding:                0;
    background-color:       #D8D8D8;
    color:                  white;
    scroll-behavior:        smooth;
}

body.dark-mode {
    background-color:       #262626;
}

a {
    text-decoration:    none;

    /* Quitar subrayado */
    color:              white;

    /* Cambiar el color del texto de los enlaces */
}

a:hover {
    /* text-decoration:    none; */
    /* Agregar subrayado al pasar el ratón */
    /* color:              white; */
    /* Cambiar el color del texto de los enlaces al pasar el ratón */
}

/* Estilos para enlaces visitados */

a:visited {
    color:              white;

    /* Color para enlaces visitados (por ejemplo, morado) */
    text-decoration:    none;

    /* Sin subrayado para enlaces visitados */
}

#top_gradient {
    position:                   fixed;
    top:                        0;
    width:                      100%;
    height:                     0px;
    background-image:           url('assets/gradient.full.large.holasoymax.svg');
    background-repeat:          no-repeat;
    background-position:        top;
    background-size:            auto;
    background-attachment:      fixed;
    padding:                    100%;
    margin:                     0%;
    z-index:                    0;
    pointer-events:             none;
    user-select:                none;
}

.container {
    overflow-y:             scroll;
    scroll-snap-type:       y mandatory;

    /* Habilitar el efecto de "snapping" vertical */
    height:                 100vh;

    /* Asegurar que el contenedor ocupe toda la altura de la ventana */
}

.section {
    height:                 100vh;

    /* Cada sección ocupa toda la altura de la ventana */
    scroll-snap-align:      start;

    /* Hace que cada sección se ajuste automáticamente al scroll */
    display:                flex;
    justify-content:        center;
    align-items:            center;
}

/* Estilo para ocultar el contenido completo */

.full-content.hidden {
    display:    none;
}

/* Estilos para el contenido de cada sección */

.content {
    text-align:     center;
    width:          75%;
    max-width:      310px;

    /* min-width:      10vw; */
    /* padding:        14%; */
    /* font-size:      medium; */
}

p {
    text-align:     left;

    /* text-align:     right; */
    line-height:    1.5rem;
}

h2 {
    font-size:      4.2vh;

    /* padding-bottom:     1rem; */
    font-weight:    100;
}

#logo_index {
    width:                  10rem;
    height:                 10rem;
    margin:                 auto;

    /* background-color:       black; */
    /* Ajusta el ancho según el tamaño de tu logo */
    /* height:                 200px; */
    /* Ajusta la altura según el tamaño de tu logo */
    background-image:       url('assets/holasoymax.isotipo.light.svg');

    /* Ruta de tu imagen de logotipo */
    background-size:        contain;
    background-repeat:      no-repeat;
    background-position:    center;
}

#section1 {
    /* display:                none; */
    scroll-snap-align:      center;

    /* background-color:       aquamarine; */
}

#section2 {
    /* display:                none; */
    scroll-snap-align:      center;
    background-color:       #F0F0F0;
    color:                  #666666;
}

/* Estilos para el botón que se ve como un enlace */

.link-button {
    background-color:       rgba(255, 255, 255, 0.041);
    border:                 none;
    font-size:              inherit;
    color:                  inherit;
    text-decoration:        none;
    cursor:                 pointer;
    display:                inline-block;
    width:                  100%;
    padding:                1rem 1rem;
    box-shadow:             0px 0px 40px rgba(0, 0, 0, 0.075);
    margin-top:             4vh;
    color:                  rgb(138, 138, 138);
    border-radius:          5px;
}

#button_valores {
    /* color:      gray; */
    margin-top:         4vh;

    /* width:              fit-content; */
    margin-right:       0;

    /* background-color:       rgba(255, 255, 255, 0.219); */
    color:              rgb(255, 255, 255);
}

#section3 {
    /* display:                none; */
    scroll-snap-align:      center;
    background-color:       #F0F0F0;
    color:                  white;
    display:                flex;
    flex-direction:         column;
}

#section31 {
    scroll-snap-align:      center;
    background-color:       #F0F0F0;
    color:                  #666666;
    display:                flex;
    flex-direction:         column;
    text-align:             center;
    justify-content:        center;
}

#section31 h2 {
    /* font-size:          medium; */
    text-align:     center;
    line-height:    0;
    padding:        0;
    font-size:      xx-large;
}

#section31 p {
    font-size:      small;
    text-align:     center;
    line-height:    1rem;
}

#section3 p {
    text-align:     right;
}

#section3 h2 {
    text-align:     right;
}

.half-section {
    width:              100%;
    flex:               1;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    flex-direction:     column;
}

#section3_upper {
    background-color:       #3A86FF;
}

#section3_bottom {
    background-color:       #FFBE0B;
}

#section31_1 {
    background-color:       #F0F0F0;
}

#section31_2 {
    background-color:       #E0E0E0;
}

#section31_3 {
    background-color:       #D0D0D0;
}

#section4 {
    scroll-snap-align:      center;
    background-color:       #FF006E;
}

/* Estilos para el flexbox con 3 elementos */

.flexbox-container {
    display:            flex;
    justify-content:    space-between;
}

.flex-item {
    flex:                   1;
    padding:                5px;
    margin:                 2px;
    background-color:       #f2b8c18e;
    text-align:             center;
}

#section5 {
    /* display:                none; */
    scroll-snap-align:      center;
    background-color:       #3A86FF;
}

#section6 {
    /* display:                none; */
    scroll-snap-align:      center;
    background-color:       #262626;
}

#section7 {
    scroll-snap-align:      center;

    /* color:                  #92844A; */
    background-color:       #0f0f0f;
}

ul {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

.portfolio-text {
    /* z-index:                    1; */
    /* font-size:                  24px; */
    /* font-weight:                bold; */
    /* Cambié la dirección de la animación */
}

.portfolio-icon-animated {
    position:                   relative;
    color:                      transparent;
    background-image:           linear-gradient(-60deg, #ffae00 , #ff0066 , #4ccfff , #a85cf9 , #262626, #ffae00);
    background-size:            500%;
    -webkit-background-clip:    text;
    background-clip:            text;
    animation:                  steam 9s linear infinite;
    animation-direction:        normal;
}

@keyframes steam {
    0% {
        background-position:    0 0;
    }
    100% {
        background-position:    500% 0;
    }
}

#socials {
    /* display: none; */
    width:              100%;
    height:             100%;

    /* background-color:         #000; */
    display:            flex;
    align-items:        center;
    flex-direction:     column;

    /* align-self:         flex-end; */
}

#socials_container {
    /* display:            flex; */
    display:            flex;
    align-items:        center;
    flex-direction:     column;

    /* background-color:       #ababab; */
    /* width:              60%; */
    /* min-width:          20rem; */
    /* max-width:          30rem; */
    /* height:             7rem; */
    flex-direction:     row;

    /* justify-content:        center; */
    align-items:        center;
    justify-content:    space-around;

    /* padding-left:       5%; */
    /* align-self:         flex-end; */
}

#socials_container, i {
    /* width:          3rem; */
    /* height:         200px; */
    font-size:      3.4vh;

    /* color:          #92844A; */
}

.bi-instagram {
    color:      #FF036C;
}

.bi-twitter {
    color:      #FF603C;
}

.bi-linkedin {
    color:      #FFBB0C;
}

.bi-github {
    color:      white;
}

.bi-envelope-at-fill {
    color:      #3E87FB;
}

/* Estilos para pantallas de escritorio con un ancho mínimo de 1024 píxeles */

@media screen and (min-width: 1024px) {
    /* Aquí coloca los estilos que deseas aplicar para pantallas de escritorio */

    #logo_index {
        width:                  70%;
        height:                 20rem;
        background-image:       url('assets/holasoymax.imagotipo.horizontal.light.svg');
    }

    .content {
        max-width:      470px;
        min-width:      100px;

        /* padding:        14%; */
        width:          45%;
        text-align:     center;

        /* font-size:      medium; */
    }

    #section31 h2 {
        /* font-size:          medium; */
        text-align:     center;
        line-height:    0;
        padding:        0;

        /* font-size:      xx-large; */
        font-size:      4.2vh;
    }

    #section31 p {
        /* line-height:    1.5rem; */
        font-size:      initial;
    }

    #top_gradient {
        background-image:       url('assets/gradient.full.large.holasoymax.svg');
    }
}