.arrow {
    position: fixed;
    max-width: 66px;
    height: auto;
    bottom: 8%;
    right: clamp(68px, 0.385vw + 66.45px, 72px);
    z-index: 1;
}

.back {
    width: 66px;
    height: 66px;
    background-color: #eed1a0;
    border-radius: 25px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: auto;
    font-family: "Poppins", sans-serif;
}

.header {
    background-color: #f7f3ea;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: clamp(20px, -7.83px + 6.93vw, 73px) 0px;
}

img {
    width: 100%;
    height: auto;
}

.uno {
    width: 216px;
    height: auto;
    display: flex;
    align-self: center;
}

.bar {
    display: flex;
}

.buttons {
    display: flex;
    gap: 50px;
}

.main-menu {
    align-items: center;
    font-size: clamp(1.125rem, 1.062rem + 0.25vw, 1.25rem);
    display: flex;
}

.main-menu ul {
    list-style: none;
    display: flex;
}

ul,
.bar {
    gap: 0px 32px;
}

#open-sidebar-button {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
}

#close-sidebar-button,
#lum-sidebar,
#sidebar-button,
#sidebar-cta {
    display: none;
}

.language {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.language-button {
    width: 36px;
    height: auto;
    display: flex;
    align-self: center;
    flex-direction: column;
}


#overlay {
    background-color: hsla(0, 0%, 10%, 0.75);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

#list {
    display: contents;
}



a {
    color: #1a1a1a;
    text-decoration: none;
}

.espacios {
    background-color: #8fae8f;
    padding: 17px 0px;
    font-size: clamp(20px, 9.17px + 2.7vw, 48px);
    text-align: center;
}

.dos {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border {
    display: flex;
    width: clamp(302px, 36.42vw + 155.61px, 680px);
    aspect-ratio: 680 / 110;
    height: auto;
    min-height: 0;
    position: absolute;
    bottom: 10%;
    background-color: hsla(42, 45%, 94%, 0.6);
    border-radius: 11px;
    margin-top: clamp(135px, 54.43vw - 83.81px, 700px);
}

.subtitulo {
    align-self: center;
    text-align: center;
    padding: 0px clamp(0px, 2.89vw - 11.62px, 30px);
    font-size: clamp(0.875rem, 1.085vw + 0.602rem, 2rem);
}

.titulo {
    font-size: clamp(20px, 6.2vw, 32px);
}

.que {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4.14vw - 0.65px, 59px);
    align-items: center;
    height: 329px;
}

.borde {
    border-radius: clamp(6.8px, 1.46vw + 0.91px, 22px);
    overflow: hidden;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: clamp(119px, 25.43vw + 16.75px, 383px);
    aspect-ratio: 383 / 219;
    height: auto;
    min-height: 0;
    margin: 0px 0px 0px clamp(0px, -3.08vw + 44.38px, 32px);
}

.tres {
    width: 100%;
    height: auto;
    transform: translateY(clamp(-79px, -5.49vw - 0.07px, -22px));

}

.description {
    width: 581px;
    padding: 0px 32px 0px clamp(0px, 3.08vw - 12.39px, 32px);
    font-size: clamp(1rem, 0.58rem + 1.66vw, 1.688rem);
}

.cards {
    display: flex;
    gap: clamp(2.5rem, 1.103rem + 5.56vw, 4.875rem);
    text-align: center;
    padding: 75px 0px;
    justify-content: center;
    flex-wrap: wrap;
}

.titulito {
    font-size: clamp(1.125rem, 0.867vw + 0.907rem, 1.688rem);
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #8fae8f;
    font-weight: bold;
    width: 296px;
    height: 169px;
    border-radius: 11px;
    flex-direction: column;
    font-size: clamp(1.5rem, 0.289vw + 1.427rem, 1.688rem);
}

.img {
    width: 38px;
    height: auto;
}

.texto {
    margin-top: 7px;
    color: #1a1a1a;
}

.title {
    padding: 20px 0px;
}

.titulos {
    font-size: clamp(2rem, 1.541vw + 1.613rem, 3rem);
    text-align: center;
    padding: clamp(62px, 1.25vw + 56.97px, 75px) 0px;
}


.blanco,
.cta {
    color: #f7f3ea
}

.cta,
.ofrecemos {
    background-color: #1a1a1a;
}

.quees,
.funciona,
.footer {
    background-color: #f7f3ea;
}

.description,
.eslogan,
.que {
    color: #f7f3ea;
    background-color: #2f4a3a;
}

.eslogan {
    font-size: clamp(1.688rem, 2.023vw + 1.179rem, 3rem);
    text-align: center;
    padding: clamp(101px, 7.23vw + 71.95px, 176px) 0px;
}

.slogan {
    font-weight: 600;
}


.cartas {
    display: flex;
    color: #1a1a1a;
    text-align: center;
    gap: clamp(2.5rem, 1.103rem + 5.56vw, 4.875rem);
    justify-content: center;
    flex-wrap: wrap;
}

.one,
.two,
.three {
    background-color: #f7f3ea;
    border-radius: 11px;
    width: 296px;
    aspect-ratio: 296 / 227;
    height: auto;
    min-height: 0;
    transition: .8s ease;
    background-position: center;
}

.one:hover,
.two:hover,
.three:hover {
    background-color: hsla(144, 22%, 24%, 0.75);
    color: #f7f3ea;
    background-size: cover;
}

.one:hover {
    background-image: url(../img/Asesoramiento.png);
}

.two:hover {
    background-image: url(../img/Diseno.png);
}

.three:hover {
    background-image: url(../img/Flora.png);
}

.title {
    font-weight: bold;
}

.title,
.tarjeta {
    padding: 40px 0px 0px 0px;
}

.descripcion {
    padding: 25px 30px 0px 30px;
    font-weight: normal;
}


.como {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: clamp(82px, 12.72vw + 30.88px, 214px);
    flex-wrap: wrap;
    gap: 32px 95px;
    max-width: 1100px;
    margin: auto;
}

.primer,
.segundo,
.tercero,
.cuarto {
    align-content: center;
    justify-items: center;
    color: #8fae8f;
    font-size: 50px;
    font-weight: bold;
}

.titulito {
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: #1a1a1a;
    border-style: solid;
    border-color: #2f4a3a;
    width: clamp(338px, 11.85vw + 290.36px, 461px);
    aspect-ratio: 461 / 252;
    height: auto;
    min-height: 0;
    border-radius: 25px;
    border-width: 7px;
    margin-top: 16px;
}


.descripcioncita {
    align-self: center;
    font-weight: normal;
    width: 300px;
    font-size: clamp(1.063rem, 0.482vw + 0.941rem, 1.375rem);
}

.datos {
    font-size: 22px;
}

.marco {
    justify-self: center;
    padding: clamp(72px, 6.65vw + 45.28px, 141px) 0px;
}

.boton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(338px, 14.64vw + 279.12px, 490px);
    aspect-ratio: 490 / 114;
    height: auto;
    min-height: 0;
    background-color: #f7f3ea;
    border-radius: 20px;
    transition: .8s ease;
    font-size: clamp(1.375rem, 1.1329rem + 0.9634vw, 2rem);
}

.boton:hover {
    background-color: #2f4a3a;
    color: #f7f3ea;
}


.cta {
    padding: clamp(102px, 15.22vw + 40.81px, 260px) 0px;
}

.call {
    font-size: clamp(1.188rem, 2.794vw + 0.485rem, 3rem);
    text-align: center;
}


.button {
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-top: clamp(27px, 3.56vw + 11.67px, 63px);
    background-color: #8fae8f;
    border-radius: 20px;
    width: clamp(203px, 28.61vw + 87.98px, 500px);
    aspect-ratio: 500 / 149;
    height: auto;
    min-height: 0;
    font-size: clamp(1.25rem, 2.697vw + 0.572rem, 3rem);
    text-align: center;
    color: #f7f3ea;
}

.cuatro {
    justify-self: center;
    padding: 96px 0px 39px 0px;
    max-width: 250px;
    height: auto;
}

.contacto {
    display: flex;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.titulo {
    margin: 0px 50px;
    line-height: 2;
}

.datos {
    display: flex;
    justify-content: center;
    width: 300px;
}

.img {
    margin-right: 9px;
}

.author {
    display: flex;
    justify-content: center;
    padding: 50px;
}

.lucas {
    font-weight: bolder;
}

@media screen and (max-width: 1177px) {

    .arrow {
        display: none;
    }

    .header {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid;
        border-color: #1a1a1a;
    }

    .uno {
        width: clamp(114px, 60.41px + 13.33vw, 216px);
    }

    .main-menu {
        position: fixed;
        top: 0%;
        right: -100%;
        height: 100vh;
        width: clamp(55%, 85.74% - 10.7vw, 75%);
        max-width: 21em;
        z-index: 10;
        border-left: 1px solid;
        background-color: #f7f3ea;
        padding: 0px 0px 0px 0px;
        transition: right 300ms ease-out;
    }

    .main-menu.show {
        right: 0%;
    }

    .main-menu.show~#overlay {
        display: block;
    }

    .main-menu ul {
        width: 100%;
        flex-direction: column;
        gap: 30px;
        padding: 0px 0px;
    }

    ul {
        width: 100%;
    }

    #close-sidebar-button {
        background: none;
        border: none;
        cursor: pointer;
        right: clamp(20px, 6.86px + 3.27vw, 45px);
        top: clamp(20px, 6.86px + 3.27vw, 45px);
        position: absolute;
    }


    #open-sidebar-button,
    #close-sidebar-button,
    #lum-sidebar {
        display: flex;
    }

    #lum-sidebar {
        width: 150px;
        height: auto;
        justify-self: center;
        top: 10%;
        position: absolute;
    }

    #list {
        display: flex;
        gap: 30px;
        flex-direction: column;
        transform: translate(15%, 0%);
        text-align: left;
    }

    #sidebar-button a {
        display: block;
        color: #f7f3ea;
        padding: 25px;
    }

    #sidebar-button {
        align-self: center;
        font-weight: bold;
        font-size: 20px;
        border-radius: 20px;
        background-color: #8fae8f;
        margin-top: 50px;
    }

    #sidebar-cta {
        font-size: 17px;
        color: #1a1a1a;
        padding-top: 10px;
    }

    #sidebar-button,
    #sidebar-cta {
        display: block;
    }



    .description {
        padding: 0px;
    }

    .borde {
        margin: 0px 0px 0px 0px;
    }

}

@media screen and (max-width: 500px) {
    .que {
        display: flex;
        flex-direction: column;
        height: 268px;
    }

    .description {
        padding: 0px;
        width: 308px;
    }
}