/* -- GENERAL -- */
    :root{
        --text: #111;
        --background: #c2c2c2;

        --primary: #630263;
        --secondary: #344714;
    }
    *, *:before, *:after {
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
        margin:0;
        padding: 0;
        z-index: index inherit;
    }
    body{
        max-width: 100%;
        overflow-x: hidden;
    }
    .primary{ color: var(--primary) !important; }
    .primary-bg{
        background-color: var(--primary) !important;
        transition: all .2s ease-in;
    }
    .primary-bg:hover, .input-search button:hover, .input-search .button-icon:hover{
        background-color: #7533FF !important;
        text-shadow: 0px 1px 6px rgba(0,0,0,.5);
        cursor: pointer;
    }
    html {
        font-size: 62.5%;
        box-sizing: border-box;
    }
    body {
        font-size: 1.6rem;
        line-height: 1.8;
        color: var(--text);
        background-color: #ededed;
        font-family: 'DM Sans', sans-serif;
        overflow-x: hidden;
    }
    ul{
        display: flex;
    }
    .limits {
        width: 100%;
        padding: 0 5rem;
    }
/* -- ALIGNERS -- */
    .align-center-v-h{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .align-center-v{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .align-center-h{
        display: flex;
        justify-content: center;
    }
    .lateral{
        display: flex;
        gap: 15px;
    }
    .opacity-5{ opacity: .5; }
/* -- SECTIONERS -- */
    .section{
        display: grid;
    }
    .sec-right{
        grid-template-columns: repeat(3, 3fr);
    }
    .sec-right input{
        grid-column-start: 3;
        grid-column-end: 4;
    }
    .sec-2{
        grid-template-columns: repeat(2, 2fr);
        gap: 2rem;
    }
    .sec-2-2{
        grid-template-columns: 10% 88%;
        gap: 2rem;
    }
    .sec-2-2 label{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: -.72rem;
    }
    .sec-3{
        grid-template-columns: repeat(3, 3fr);
        gap: 2rem;
    }
    .sec-4{
        grid-template-columns: 10% 40% 10% 40%;
        text-align: center;
        align-items: center;
    }
/* -- FORM -- */
    .button{
        margin:0;
        padding: 1rem 2rem;
        text-align: center;
        transition: all 0.25s ease-in-out;
        text-transform: uppercase;
    }
    .button-primary{
        background-color: var(--primary);
        color: #fff;
        border-radius: 100px;
        padding: .75rem 2rem .75rem 4rem;
        position: relative;
        display: flex;
        align-items: center;
    }
    .button-primary::before{
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: rgba(255,255,255,0.15);
        transition: all .2s ease-in;
        top:50%;
        left: 14%;
        border-radius: 100px;
        transform: translate(-50%,-50%);
    }
    .button-primary:hover{
        filter: brightness(75%);
    }
    .button-primary:hover::before{
        background-color: #fff;
    }
    .button-secondary{
        color: rgba(0,0,0,.5) !important;
        background-color: transparent !important;
    }
    .button-secondary:hover{
        background-color: var(--primary);
        color: #fff;
    }
    .button-terciary{
        color: #000;
        border-radius: 100px;
        padding: .75rem 1.5rem;
        border: 2px solid #000;
        font-weight: bold;
        min-width: 150px;
        text-transform: inherit;
        font-size: 1.4rem;
    }
    .button-terciary.select{
        background-color: #000;
        color: #fff;
    }
    .button-terciary:hover{
        opacity: 1;
    }
    .button-terciary:active{
        filter: brightness(75%);
    }
    .button-form-icon{
        border:none;
        width: 100%;
        font-family: 'DM Sans', sans-serif;
        letter-spacing: 0.025rem;
    }
    .button-article{
        background-color: var(--primary);
        color: #fff;
        border-radius: 100px;
        padding: .75rem 2rem;
        display: flex;
        align-items: center;
    }
/* -- INPUTS -- */
    input{
        font-family: 'DM Sans', sans-serif;
    }
    .input-search-special{
        border: 2px solid #000;
        background-color: transparent;
        padding: 0 1rem;
    }
    .input-search-special:focus{
        outline: transparent;
        border: 2px solid var(--primary);
    }
    .input{
        border: none;
        background-color: #fff;
        padding: 1rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-family: 'DM Sans', sans-serif;
        font-size: 1.5rem;
        border-left: 2px solid #ccc;
        margin: 0 0 1rem 0;
    }
    .input-search form{ display: flex; }
    .input-search button, .input-search .button-icon{
        height: 4rem;
        width: 4rem;
        background-color: #000;
        color: #fff;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .2s ease-in;
    }
    .min{
        width: 50% !important;
        font-size: 1.35rem;
    }
    /*textarea{ min-height: 150px; }*/
/* -- SPECIFIC.SECTIONER -- */
    .icon-text{
        display:flex;
        align-items:center;
        gap: 8px;
    }
    .diftop{ padding-top: 100px; }
    .diftop::after{
        content:'';
        position: absolute;
        width: 100%;
        height: 80px;
        top:0;left:0;
        background-color:#ccc;
    }
/* -- ERRORES -- */
    .error{
        background-color: #ccc;
        padding: 0.5rem 2rem;
        height: fit-content;
        border-radius: 15px;
        color: #ff0000;
        opacity: .92;
        text-shadow: 0px 2px 8px rgba(0,0,0,0.15);
        overflow-x: hidden;
        transform: rotateY(90deg);
        animation-name: moveError;
        animation-duration: 4s;
        animation-direction:reverse;
        animation-fill-mode: forwards;
        animation-play-state: running;
    }
    @keyframes moveError{
        0% { transform: rotateY(90deg); }
        25% { transform: rotateY(0deg); }
        75% { transform: rotateY(0deg); }
        100% { transform: rotateY(90deg); }
    }
/* -- CARRUSEL -- */
    .left-click, .right-click{
        position: absolute;
        top: 44%;
        width: 50px;
        height: 50px;
        border-radius: 100px;
        background-color: rgba(200,200,200,.65);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color:#000;
        z-index: 10;
        transition: all .15s ease-in;
    }
    .left-click:hover, .right-click:hover{ background-color: rgba(200,200,200,1); }
    .left-click{ left: 1%; }
    .right-click{ right: 1%; }
    .carrusel, .imgs {
        width: 100%;
        max-height: 500px;
        position: relative;
        display: flex;
        overflow: hidden;
        scroll-snap-type: x mandatory;
    }
    .carrusel img , .carrusel a img{
        width: 100%;
        position: sticky;
        object-fit: cover;
        border-radius: 5px;
        scroll-snap-align: center;
    }
    .carrusel #photo-sector img , .carrusel #photo-sector a img{ left: 0; }
    .imgs::-webkit-scrollbar { display: none; }
/* -- MENU -- */
    .icon-menu{
        border-radius: 100px;
        background-color: rgba(0,0,0,0.25);
        color: #fff;

        width: 50px;
        height: 50px;

        display: none;
        justify-content: center;
        align-items: center;
        transition: all .2s ease-in;
    }
    .icon-menu i{
        font-size: 2rem;
    }
    .top-bar .icon-menu{
        position: absolute;
        right: 2rem;
        top: 2rem;

        background-color: rgba(0,0,0,0);
        color:#000;
    }
    .top-bar .icon-menu:hover{
        background-color: rgba(0, 0, 0, 0.25);
    }
    .view-mobile { display: none; }
    .error-404{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }
    .error-404 .button { width: fit-content; }
    /* -- MEDIA.QUERIES -- */
    @media (max-width: 1170px){
        /* -- HEADER -- */
        .top-bar ul li a{
            padding: 0.75rem .65rem;
        }
        #header h2 a{ font-size: 0; }
        /* -- ABOUT.US -- */
        .contain-2 .left, .contain-2 .right{ margin: 0; }
        /* -- TASACIONES -- */
        #tasaciones .content{
            max-width: 45%;
            margin-right: 0rem;
        }
        /* -- LIST.PRODUCT -- */
        #list-product{ grid-template-columns: 25% 75%; }
        #list-product .list-product{ 
            grid-template-columns:50% 50%; }
        /* -- SHOW.PRODUCT -- */
        .img-sector{ grid-template-columns: 91.3% 7.7%; }
    }
    @media (max-width: 1090px){
        /* -- HEADER -- */
        .view-mobile { display: flex; }
        .icon-menu{ display: flex; }
        #header h2 a{ font-size: 0; }
        .top-bar{
            visibility: hidden;
            opacity: 0;
            background-color: #ededed;
            position: absolute;
            top:0;
            right: -15rem;
            padding: 6rem 2rem 4rem 2rem;
            box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
            transition: all .35s ease-in;
        }
        .top-bar.visible{
            visibility: visible;
            opacity: 1;
            right:0;
        }
        .top-bar ul{
            flex-direction: column;
            width: 100%;
            height: 100vh;
        }
        .top-bar ul li a{
            display: block;
            color:#000 !important;
            text-shadow: none;
            padding: 1rem;
        }
        /* -- SELECTOR.ZONE -- */
        .black-sector{ width: 36%; }
        .list-product{
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            padding-inline: 2rem;
        }
        /* -- SEARCHER -- */
        .input{ font-size: 1.35rem; }
        /* -- LIST.PRODUCT -- */
        #list-product{ grid-template-columns: 30% 70%; }
        /* -- SHOW.PRODUCT -- */
        #show-product .divisor{ grid-template-columns: 57% 40%; }
        .price-product{ bottom: 0px; left: 15px; }
        #show-product .data-icon{
            display: grid;
            grid-template-columns: repeat(3, 3fr);
        }
        .sector-btn{
            display: grid;
            grid-template-columns: 100%;
            gap:1rem;
        }
        /* -- LOGIN -- */
        #login .content-login{
            width: 45%;
        }
    }
    @media (max-width: 750px){
        #footer, #about-us{
            padding-inline: 2rem;
        }
        #footer h5 { display: none; }
        /* -- ARTICLE -- */
        .filter-chips {
            gap: 1rem;
        }
        .contain-article{
            margin: 0;
            display: block;
            width: 100%;
            padding: 3rem 2rem;
        }
        article h1{ margin-right: 5rem; }
        /* -- SELECTOR.ZONE -- */
        .black-sector{ width: 54%; }
        /* -- ABOUT.US -- */
        .contain-2{
            grid-template-columns: 100%;
            gap: 2rem;
        }
        .contain-2 .left *{ text-align: left; }
        .diff-img img{ grid-row-start: 1; }
        /* -- TASACIONES -- */
        #tasaciones{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
        #tasaciones .content{
            max-width: 80%;
        }
        /* -- LIST.PRODUCT -- */
        .list-product.special-grid{ grid-template-columns: 100%; }
        .card-special{
            width: 100%;
            height: fit-content;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .card-special .img-section, .card-special .contain-card{ width: 100%; }
        .card-special .img-section{
            height: 220px;
        }
        .card-special .contain-card{
            padding: 0 2rem 2rem;
        }

        #list-product{ grid-template-columns: 35% 65%; }
        #list-product .list-product, #list-product .list-product.special-grid{ grid-template-columns: 100%; }
        .error-show{
            margin: 3rem 2rem 0rem;
        }
        .error-show h2{ line-height: 4rem; }
        .error-show p{ margin-top: 1rem; }
        /* -- SHOW.PRODUCT -- */
        .img-sector{
            display: grid; 
            grid-template-columns: 100%;
            grid-template-rows: 8% 92%;
        }
        .option{
            grid-row-start: 1;
            display: flex;
            gap:0;
            margin:0;
            padding: 0;
        }
        .option a i{ display: none;}
        #show-product .divisor{ display: block; }
        #show-product .divisor .right{
            width: 100%;
            margin-top: 2rem;
        }
        /* -- LOGIN -- */
        #login .content-login{ width: 60%; }
    }
    @media (max-width: 640px){
        .card-special .price-card { padding-bottom: 1rem; }
        #list-product .grid-product{
            margin-bottom: 2rem;
        }
        /* -- GLOBAL -- */
        .button-terciary{ font-size:1.35rem }
        /* -- SELECTOR.ZONE -- */
        .black-sector{ width: 60%; }
        .black{ margin-bottom: 1rem; }
        .black h3{ font-size: 2rem; }
        .tab-bar { display:none; }
        .list-product{ grid-template-columns: 100%; }
        /* -- ABOUT.US -- */
        .contain-2 *, .contain-2 .left *, .contain-2 .right *{ text-align: center; }
        /* -- TASACIONES -- */
        #tasaciones .content{
            max-width: 100%;
            margin-inline: 2rem;
        }
        /* -- LIST.PRODUCT -- */
        #list-product{
            display: flex;
            flex-direction: column;
            gap:0;
            margin: 0;
            padding-inline: 2rem;
        }
        #list-product .grid-product{ width: 100%; grid-template-columns: 100%; }
        #list-product .list-product{ margin-top: 2rem; grid-template-columns: 49% 49%; }
        #list-product .list-product .card, #list-product .list-product .card-special{ width: 100%;padding:0;}
        .sidebar{
            position: fixed;
            width: 100%;
            height: 100vh;
            margin: 0;
            top: 0;
            left: -10rem;
            opacity: 0;
            visibility: hidden;
            transition: all .35s ease-in;
            z-index: 5;
        }
        .sidebar.show{
            visibility: visible;
            opacity: 1;
            left: 0;
        }
        .button-filter-sidebar{
            display: block;
            position: inherit;
            width: fit-content;
            height: fit-content;
            gap: 0;
            margin: 0;
        }
        .icon-btn{ display: flex; }
        .error-show{
            margin-top: 5rem;
        }
        /* -- MODAL -- */
    }
    @media (max-width: 580px){
        /* -- GLOBAL -- */
        .button-terciary{ font-size: 1.25rem; margin: 0 0.25rem; }
        /* -- ARTICLE -- */
        article h1{
            font-size: 5rem;
            line-height: 6rem;
            margin-bottom: .5rem;
            margin-right: 1rem;
        }
        article p{
            margin-bottom: 1rem;
        }
        /* -- SELECTOR.ZONE -- */
        .black-sector{ width: 70%; }
        /* -- FOOTER -- */
        #footer p{ font-size:1.35rem; }
        /* -- SHOW.PRODUCT -- */
        #show-product .divisor .left h2{
            font-size: 3.5rem;
            line-height: 4rem;
            margin-bottom: 0rem;
        }
        /* -- LOGIN -- */
        #login .content-login{ width: 80%; }
    }
    @media (max-width: 500px){
        /* -- GLOBAL -- */
        .limits{
            padding-left: 2.5rem;
            padding-right: 2.5rem;
        }
        /* -- HEADER -- */
        #header h2 a{font-size: 0; }
        /* -- ARTICLE -- */
        article h1{ font-size: 4.5rem; }
        article p{ font-size: 1.35rem; }
        /* -- SELECTOR.ZONE -- */
        .black{
            min-height: 180px;
            padding-top: 2rem;
        }
        /* -- TASACIONES -- */
        #tasaciones .content small{
            font-size: 1.15rem;
            line-height: 0;

        }
        /* -- FOOTER -- */
        #footer *{ font-size: 1.5rem; }
        /* -- LIST.PRODUCT -- */
        #list-product .list-product{ grid-template-columns: 100%; }
        /* -- SHOW.PRODUCT -- */
        #show-product .data-icon{ grid-template-columns: 100%; gap: 0;margin-bottom: 2rem; }
        #show-product .data-icon div{ margin: 0; }
        #show-product .data-icon div:nth-child(2){ margin: 2rem 0; }
        /* -- LOGIN -- */
        #login .content-login{ width: 100%; }
        /* -- MODAL -- */
        #left{ margin-left: .5rem; }
        #right{ margin-right: .5rem; margin-top: 2.5rem; }
        .icon-x{
            margin-top: 18rem;
            margin-bottom: -28rem;
        }
    }
    @media (max-width: 440px){
        #header .logo-sector .text-logo h2{
            font-size: 2rem;
            line-height: 2rem;
            margin-bottom: 1rem;
            margin-top: .5rem;
        }
        #header .logo-sector .text-logo p{
            font-size: 1.35rem;
            opacity: .75;
        }
        .logo{ width: 50px; }
    }