/* GLOBAL -------------------------------------------------------  */

body {
    font-size: 3.5vw;
}

span {
    font-size: 1.325em!important;
}

h2 {
    font-size: 3.25em;
}

.wrapper {
    margin-inline: 2em;
    margin-block: 8em;
}

.btn > button,
.btn > a,
.btn > label,
textarea,
.input select {
    font-size: 1.125em;
}

.input label {
    font-size: 1.325em;
}

.gradient {
    height: 100vh;
}

.empty-state img {
    width: 60%;
}

/* NOTIFICACION ------------------------------------------------------------ */

.notification_body {
    max-width: 22em;
    flex-direction: column;
    color: white;
}

.notification_body i {
    background-color: var(--color6);
}

/* CURSOR -------------------------------------------------------- */

#cursor {
    display: none;
}

/* NAVBAR -------------------------------------------------------- */

#navbar {
    padding-block: 0;
}

#navbar > div:nth-child(2) {
    display: none;
}

.buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    background-color: white;
    padding: 1.5em;
}

.buttons ul li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons ul li svg {
    width: 2em;
    height: 2em;
}

.navbar-responsive {
    display: flex;
    padding: 1.5em;
    z-index: 32;
}

.navbar-responsive ul li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 1em 0;
}

.navbar-responsive ul li svg {
    width: 1.5em;
    height: 1.5em;
}

.navbar-responsive > article{
    display: none;
}

.navbar-responsive input {
    display: none;
}

.navbar-responsive > label {
    display: flex;
}

.navbar-responsive > label i {
    width: 2.5em;
    min-width: 2.5em;
    height: 2.5em;
    min-height: 2.5em;
    background-color: white;
}

.navbar-responsive input:checked + article {
    display: flex;

    align-items: center;
    justify-content: center;
}

.navbar-responsive > article {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;
}

.navbar-responsive > article ul {
    background-color: var(--color7);
    z-index: 32;
    padding: 1em;
    display: flex;
    flex-direction: column;
    border-radius: 1em;
    font-size: 1.25em;

    position: absolute;
    right: 0;
    width: 14em;
    height: 100%;
    border-radius: 0;
}

.navbar-responsive input:checked + article ul {
    transition: all .5s;
    animation: rightanimation 1s ease-in-out ;
}

.navbar-responsive > article ul li a {
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.navbar-responsive .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: .5;

    height: 100vh;
}

.navbar-responsive .menu-close {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.navbar-responsive .menu-close em {
    font-weight: bolder;
    font-style: normal;
    color: var(--color5);
    font-size: 1.5em;
}

.navbar-responsive .menu-close label{
    width: 100%;
    display: flex;
    justify-content: end;
}

.navbar-responsive .menu-close label svg {
    fill: var(--muted-dark);
}

.navbar-responsive .menu-close label i {
    background-color: white;
}


.navbar-responsive .popup ul li svg {
    fill: var(--muted-dark);
}

.navbar-responsive .popup ul li a span{
    font-weight: bold;
}

.navbar-responsive ul li a span::after{
    content: "";
    width: 0.5em;
    height: 0.125em;
    background-color: transparent;
    transition: all 0.5s;
    display: block;
}

.navbar-responsive ul li a span:hover::after{
    content: "";
    width: 1.5em;
    height: 0.125em;
    background-color: var(--secondary);
    display: block;
}

.search .input {
    right: 0;
    left: 0;
    width: 100%;
    bottom: 4em;
    padding-inline: 4em;
}

.search .input input {
    width: 100%;
    padding: 1.25em;
}

.search .input label {
    padding: 1em;
}

.search .input button {
    padding: 1em;
}

.search input:checked + .input {
    animation: sube 1s ease;
}

/* INDEX ----------------------------------------------------------------------- */

#inicio .desktop {
    display: none;
}

.banner-btn > ul{
    flex-direction: column-reverse;
}

#sobre-nosotros {
    flex-direction: column;
    align-items: center;
}

#sobre-nosotros aside {
    width: 100%;
}

#sobre-nosotros article {
    margin-top: 2em;
}

#sobre-nosotros article > div > div {
    flex-direction: column;
}

#sobre-nosotros article > div > div i {
    width: 3.5em;
    min-width: 3.5em;
    height: 3.5em;
    min-height: 3.5em;
}

#sobre-nosotros > article > div > div svg {
    width: 3.5em;
    height: 3.5em;
}

#proyectos {
    height: 40vh;
}

#proyectos > header > h4 {
    font-size: 2em;
}

#join em {
    font-size: 2em;
}

span.highlight {
    font-size: 1em!important;
}

#servicios .tabs {
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    font-size: 1.325em;
}

.tabs .active,
.tabs .active:hover {
    border: none;
    border-bottom: 4px solid var(--color5);
}

#servicios .tabs > li {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 100%;
}

#servicios .tabs-container {
    flex-direction: column;
}

#servicios .tabs-container .tab-content-wrapper {
    height: 33.125em;
}

#servicios .tab-content-wrapper em {
    font-size: 1.75em;
}

#servicios .tabs-container .tab-content-wrapper .tab-content {
    height: 33.125em;
}

#servicios .tab-content-wrapper img {
    width: 14em;
    min-width: 14em;
    height: 14em;
    min-height: 14em;
}

#servicios .tabs a {
    font-size: 1em;
}

#servicio > aside {
    width: 100%;
}

.proyectosImg strong {
    font-size: 2em;
}

.proyectosImg .mockups {
    flex-direction: column;
}

.proyectosImg .phone {
    width: 100%;
    height: 40em;
    min-height: 40em;
}

.proyectosImg .tablet {
    height: 20em;
    min-height: 20em;
    width: 95%;
    margin-top: 5em;
}

.proyectosImg .phone ul,
.proyectosImg .tablet ul {
    width: 95%;
    height: 98%;
    margin: auto;
}

#reviews {
    width: 100%;
    margin-top: 5em;
}

#reviews > header {
    text-align: center;
    flex-direction: column;
}

#reviews > header > aside {
    height: 100%;
    width: 100%;
    margin-top: 1em;
}

#reviews > ul > li {
    width: 100%;
    min-width: 100%;
    min-height: 17em;
}

#reviews .customer > div em {
    font-size: 1.5em;
}

#cotiza > div {
    flex-direction: column-reverse;
}

#cotiza > header {
    text-align: center;
}

#cotiza .ul-form > li > ul > li label {
    display: block;
    width: 100%;
}

#cotiza > div > article {
    width: 100%;
}

/* PORTAFOLIO --------------------------------------------------------------------- */

.listado ul {
    grid-template-columns: 1fr;
}

#portafolio .destacados > ul > li a {
    flex-direction: column;
}

#portafolio .destacados a .proyecto{
    width: 100%;
    min-height: 15em;
    height: 25em;
}

#portafolio .destacados ul li a img {
    border-radius: .25em .25em 0 0;
}

#portafolio .destacados .proyecto + div em {
    font-size: 2.25em;
    -webkit-line-clamp: 3;
}

#portafolio em {
    font-size: 2.5em;
}

#portafolio p {
    font-size: 1.25em;
}

.listado ul li {
    min-height: 22em;
    height: 22em;
}

.listado .index li {
    min-height: unset;
    height: unset;
}

.listado .index li a {
    display: flex;
    flex-direction: column;
}

.listado .index li a div {
    min-height: 22em;
    height: 22em;
    position: relative;
}

.listado ul li + li {
    margin-top: 1em;
}

.listado ul li .prod {
    font-size: 1.125em;
}

.listado .index li .prod {
    position: static;
}

.listado > footer {
    margin-top: 3em;
}

/* AGENDAR --------------------------------------------------------------------- */

#agendar {
    margin-top: 10em;
}

#agendar header p {
    font-size: 1.25em;
}

#agendar > article > form > div {
    flex-direction: column;
}

#agendar .ul-form{
    width: 100%;
}

#agendar .popup {
    width: 100%;
    height: 100%;
}

#agendar .popup div label i {
    width: 3em;
    min-width: 3em;
    height: 3em;
    min-height: 3em;
    background-color: white;
}

#agendar .popup .imagenes {
    height: 50%;
}

/* CONTACTO --------------------------------------------------------------------- */

#contacto {
    margin-top: 10em;
}

#contacto > article {
    flex-direction: column;
    padding: 0;
    gap: 2em;
}

#contacto > article > div {
    width: 100%;
}

#contacto > article > form {
    width: 100%;
    margin-top: 5em;
}

#contacto > header p {
    font-size: 1.325em;
}

#contacto .item > div > ul i {
    width: 3.5em;
    min-width: 3.5em;
    height: 3.5em;
    min-height: 3.5em;
}

#contacto .item > div > header i {
    width: 2.5em;
    min-width: 2.5em;
    height: 2.5em;
    min-height: 2.5em;
}

#contacto .item > div > ul > li {
    font-size: 1.25em;
}

#contacto .bg-gradient.mail > div > ul > li span {
    font-size: .9em!important;
}

/* UNETE -------------------------------------------------------------------  */

#unete > header {
    flex-direction: column;
}

#unete > header > div {
    width: 100%;
}

#unete .beneficios strong {
    font-size: 2em;
}

#unete .beneficios > ul {
    flex-direction: column;
    width: 100%;
}

#unete .beneficios > ul > li {
    width: 100%;
}

#unete .beneficios > ul > li i {
    background-color: var(--color5);
}

#unete .ul-form > li > ul > li label {
    display: block;
    width: 100%;
}

/* NOSOTROS -------------------------------------------------------------------- */

#valores > ul,
#valores > ul > li {
    flex-direction: column;
    align-items: start;
}

#valores > ul li.right {
    flex-direction: column;
    align-items: end;
}

#valores > ul li div {
    margin-top: 1em;
}

#valores > ul > li {
    width: 100%;
}

.nosotros > article {
    width: 100%;
}

/* FAQ ---------------------------------------------------------------------- */

#faq > header {
    flex-direction: column-reverse;
}

#faq .item {
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

#faq .item:nth-child(2n) {
    align-items: end;
}

#faq .item .image {
    width: 70%;
}

#faq .item .image.cotizacion {
    width: 50%;
}

#faq > article + div {
    display: none;
}

/* SERVICIOS ---------------------------------------------------------------------- */

.proyectosImg .mockups {
    background: linear-gradient(to top, var(--color1) 35%, var(--color6) 20%);
}

/* PROYECTO ---------------------------------------------------------------------- */

#banner div {
    flex-direction: column-reverse;
}

#banner div aside {
    flex-direction: row;
    height: max-content;
    width: 100%;
    padding: 2em;
    justify-content: space-between;
}

#banner .vertical-text {
    transform: rotate(0deg);
    writing-mode: unset;
    font-size: 1.25em;
}

#banner div aside a {
    transform: rotate(0deg);
}

#banner div aside a i {
    width: 2.5em;
    min-width: 2.5em;
    height: 2.5em;
    min-height: 2.5em;
}

#banner div aside ul {
    flex-direction: row;
}

#banner div aside ul li {
    margin: 0 .25em;
}

#banner > div article > nav {
    display: none;
}

#banner > div article > ul {
    height: 30vh;
    overflow: auto;
}

#banner > div article > ul > li {
    scroll-snap-align: center;
}

#banner > div article::after {
    content: "Deslizá";
    color: white;
    font-size: 1.125em;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 10;
    bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#banner > div article::before {
    content: ">>";
    color: white;
    font-size: 1.125em;
    display: block;
    position: absolute;
    z-index: 10;
    bottom: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 15.5em;
    animation: animate 2s infinite;
}

#proyecto em {
    font-size: 1.75em;
}

#proyecto div div i {
    width: 2.5em;
    min-width: 2.5em;
    height: 2.5em;
    min-height: 2.5em;
}

/* FOOTER ---------------------------------------------------------------------- */

#footer svg {
    top: -6em;
}

#footer > ul,
#footer > header > div > ul,
#footer > header > div > ul > li > div {
    flex-direction: column;
}

#footer > header > div > ul > li > div {
    align-items: start;
}

#footer > ul,
#footer > header > div > ul {
    padding: 1em;
}

#footer > ul {
    gap: 2em;
}

#footer > header > div {
    flex-direction: column-reverse;
}

#footer > header > div > ul {
    width: 100%;
    align-items: start;
}

#footer > header > div > ul:first-child {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#footer > ul > li > em {
    font-size: 2em;
}

#footer > ul > li a {
    font-size: 1.25em;
}

#footer .contacto li i {
    width: 3em;
    min-width: 3em;
    height: 3em;
    min-height: 3em;
}

.chat-top,
.chat-text a {
    font-size: 1.5em;
}

.chat-box {
    width: max-content;
    height: 24em;
}

#floating-footer .whatsapp label:hover > .chat-box {
    top: -23em;
}

#floating-footer > ul > li > a img,
#floating-footer .whatsapp > label > i {
    width: 3.5em;
    min-width: 3.5em;
    height: 3.5em;
    min-height: 3.5em;
}

#floating-footer .agendar a {
    width: 5.1em;
}

#floating-footer > ul .agendar a:hover {
    width: 22em;
}

.chat-text a i {
    width: 2.5em;
    height: 2.5em;
}

#footer > ul,
#footer > div {
    z-index: 1;
}

/* ANIMATIONS ---------------------------------------------------------------------- */

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(0deg) translate(-20px, 0px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(0deg) translate(20px, 0px);
    }
}