/* =========================
   RESET
========================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


html,
body {

    margin: 0;

    padding: 0;

}


body {

    overflow-x: hidden;

    min-height: 100vh;

}


img,
svg {

    display: block;

    max-width: 100%;

}


button,
input,
textarea,
select {

    font: inherit;

}


a {

    text-decoration: none;

    color: inherit;

}


ul,
ol {

    list-style: none;

    margin: 0;

    padding: 0;

}


h1,
h2,
h3,
h4,
h5,
h6,
p {

    margin: 0;

}

/* =========================
   SCROLLBAR
========================= */


/* Chrome, Edge, Safari, Opera */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background: var(--color-dark);

}


::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 20px;

    border: 3px solid var(--color-dark);

}


::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary-hover);

}

/* =========================
   TEXT SELECTION
========================= */

::selection {

    background: var(--color-primary);

    color: var(--color-white);

}

/* =========================
   FOCUS
========================= */

button,
a,
input,
textarea {

    outline: none;

}


button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {

    outline:

    2px solid var(--color-primary);

    outline-offset: 3px;

}

/* Firefox */

html {

    scrollbar-width: thin;

    scrollbar-color:
    var(--color-primary)
    var(--color-dark);

}

/* Loader CSS*/

.loader {

    position: fixed;

    inset: 0;

    background: var(--color-white);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition:
        opacity .6s ease,
        visibility .6s ease;

}



.loader__content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;

}

/* =========================================
   CUSTOM CURSOR
========================================= */


.cursor-inner,
.cursor-outer {

    position: fixed;

    left: 0;

    top: 0;


    pointer-events: none;


    border-radius: 50%;


    transform: translate(-50%, -50%);


    visibility: hidden;

}



/* PONTO CENTRAL */

.cursor-inner {

    width: 5px;

    height: 5px;


    background:

    var(--color-primary);


    z-index: 100001;


    transition:

    transform .25s ease,

    opacity .25s ease;

}



/* ANEL */

.cursor-outer {


    width: 26px;

    height: 26px;


    border:

    1px solid var(--color-primary);


    z-index: 100000;


    opacity: .45;


    transition:

    width .3s ease,

    height .3s ease,

    opacity .3s ease;

}



/* =========================================
   HOVER
========================================= */


.cursor-inner.cursor-hover {


    transform:

    translate(-50%, -50%)

    scale(0);


    opacity:0;


}



.cursor-outer.cursor-hover {


    width: 55px;

    height:55px;


    opacity:.15;


    background:

    var(--color-primary);


    border-color:

    transparent;


}


/* =========================================
   MOBILE / TABLET
========================================= */


@media(max-width:1024px){


    .cursor-inner,

    .cursor-outer {


        display:none;


    }


}

/* Logo */

.loader__logo img {

    width: 220px;

    max-width: 80vw;

    animation: logoIn 1s ease forwards;

}



/* Linha */

.loader__line {

    width: 220px;

    height: 3px;

    background: var(--color-card);

    overflow: hidden;

    border-radius: 10px;

}



.loader__line::before {

    content: "";

    display: block;

    width: 45%;

    height: 100%;

    background: var(--color-primary);

    border-radius: inherit;

    animation: loading 1.4s infinite ease-in-out;

}

/* esconder */

.loader.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/* Texto */

.loader__text {

    font-family: var(--font-body);

    color: var(--color-muted);

    font-size: .9rem;

    opacity: 0;

    animation: textShow 1s ease forwards;

    animation-delay: .8s;

}



@keyframes textShow {

    to {

        opacity: 1;

    }

}






@keyframes loading {


    from {

        transform: translateX(-150%);

    }


    to {

        transform: translateX(300%);

    }


}



@keyframes logoIn {


    from {

        opacity: 0;

        transform: translateY(15px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}

/* Text Design */

h2 {

    font-family: var(--font-body);

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    line-height: 1.2;

    color: var(--color-black);

}


h2 span {

    color: var(--color-primary);

    font-family: var(--font-body);

}

/* =====================================
   TIPOGRAFIA GLOBAL
   SantiagoTecBis
===================================== */



body {

    font-family: var(--font-body);

    color: var(--color-text);

    line-height: 1.6;

}



/* =====================================
   TÍTULOS
===================================== */


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);

    color: var(--color-black);

    font-weight: 700;

    line-height: 1.2;

}



/* =====================================
   PARÁGRAFOS
===================================== */


p {

    font-family: var(--font-body);

    color: var(--color-text);

    font-size: 1rem;

    font-weight: 400;

}



/* =====================================
   DESTAQUES
===================================== */


span {

    font-family: var(--font-highlight);

    color: var(--color-primary);

    font-weight: 700;

}

.header__logo {

    margin-left: var(--space-4);

    width: 220px;

    max-width: 80vw;

    transition: transform .35s cubic-bezier(.2,.8,.2,1);

}

.header__logo:hover {

    transform: scale(1.05);

}

/* =========================
   HOME HERO
========================= */


.home {

    min-height: calc(100vh - var(--header-height));

    width: 100%;

    position: relative;

    display: flex;

    align-items: center;

    background-image: url("../img/cilindros/Hero.jpg");

    background-size: cover;

    background-position: left center;

    overflow: hidden;

}

@media (max-width:920px) {
    .home{
        padding-bottom: var(--container-padding);
    }
}

/* OVERLAY */

.home__overlay {

    position: absolute;

    inset: 0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.45)
    );

}



/* CONTAINER */

.home__container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding);

    position: relative;

    z-index: 1;

}



/* CONTENT */

.home__content {

    max-width: 900px;

}



/* TAG */

.home__tag {

    display: inline-block;

    margin-bottom: var(--space-5);

    font-family: var(--font-highlight);

    font-size: var(--text-lg);

    font-weight: 600;

    color: var(--color-primary);

    letter-spacing: 1px;

}



/* TITLE */

.home__title {

    font-family: var(--font-body);

    font-size: var(--heading-xl);

    line-height: 1.1;

    font-weight: 800;

    color: var(--color-white);

    margin: 0 0 var(--space-6);

}



/* DESCRIPTION */

.home__description {

    font-family: var(--font-body);

    font-size: var(--text-xl);

    line-height: 1.6;

    color: var(--color-muted);

    max-width: 600px;

    margin-bottom: var(--space-8);

}



/* BUTTON */

.home__button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: var(--space-4);

    padding: 16px 34px;

    border: 1px solid var(--color-white);

    border-radius: var(--radius-md);

    color: var(--color-light);

    background: transparent;

    font-family: var(--font-body);

    font-weight: 600;

    text-decoration: none;

    overflow: hidden;

    transition: all var(--transition-normal);

}



.home__button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--color-white);

    transform: translateX(-100%);

    transition: var(--transition-normal);

    z-index: -1;

}



.home__button:hover::before {

    transform: translateX(0);

}



.home__button:hover {

    color: var(--color-primary-hover);

}



.home__button i {

    transition: var(--transition-normal);

}



.home__button:hover i {

    transform: translateX(8px);

}

.home__button span {

    color: var(--color-white);

    font-family: var(--font-body);

}

.home__button:hover span {

    color: var(--color-primary-hover);

}


/* ANIMAÇÃO */

.home__tag,
.home__title,
.home__description,
.home__button {

    opacity: 0;

    animation: homeEnter .7s ease forwards;

}



.home__title {

    animation-delay: .15s;

}


.home__description {

    animation-delay: .3s;

}


.home__button {

    animation-delay: .45s;

}



@keyframes homeEnter {


    from {

        opacity: 0;

        transform: translateY(25px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}

/* =========================================
   QUALITY HOME
========================================= */


.home__quality {

    width: 100%;

    background: var(--color-white);

    padding: var(--navbar-padding) var(--container-padding) 0 var(--container-padding);

}



.home__quality-container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-10);

}



/* =========================================
   CONTENT
========================================= */


.home__quality-content {

    flex: 1;

}



.home__quality-highlight {

    display: inline-block;

    font-family: var(--font-highlight);

    color: var(--color-primary);

    font-size: var(--text-md);

    font-weight: 600;

    margin-bottom: var(--space-3);

}



.home__quality-content h2 {

    font-family: var(--font-heading);

    color: var(--color-dark);

    font-size: var(--heading-lg);

    line-height: 1.15;

    margin: 0 0 var(--space-6);

}



.home__quality-content h2 span {

    color: var(--color-primary);

}



.home__quality-content p {

    font-family: var(--font-body);

    color: var(--color-text);

    font-size: var(--text-lg);

    line-height: 1.7;

    margin: 0 0 var(--space-4);

}



.home__quality-location {

    font-weight: 600;

}



/* =========================================
   IMAGE
========================================= */


.home__quality-image {

    flex: 1;

    display: flex;

    justify-content: center;

}



.home__quality-image img {

    width: 100%;

    max-width: 500px;
    
}

@media (max-width: 900px){


    .home__quality-container{

        flex-direction: column;

        gap: var(--space-10);

    }



    .home__quality-content{

        max-width: 100%;

        text-align: center;

    }



    .home__quality-content p{

        max-width: 600px;

        margin-left: auto;

        margin-right: auto;

    }



    .home__quality-image{

        order: 2;

        display: flex;

        justify-content: center;

        width: 100%;

    }



    .home__quality-image img{

        width: min(90%, 420px);

        height: auto;

    }


}

@media (max-width: 480px){


    .home__quality{

        padding-top: var(--space-12);

        padding-bottom: var(--space-12);

    }



    .home__quality-content h2{

        font-size: var(--heading-md);

        line-height: 1.2;

    }



    .home__quality-content p{

        font-size: var(--text-sm);

        line-height: 1.7;

    }



    .home__quality-image img{

        width: 100%;

    }


}

/* =========================================
   COMPANY HEADER
========================================= */


.company__header {

    max-width: 850px;

    padding-top: var(--navbar-padding);

    margin: 0 auto;

    text-align: center;

}

.company__container {

    max-width: 850px;

    padding: 0 var(--container-padding) 0 var(--container-padding);;

    margin: 0 auto;
    
}


/* =========================================
   LABEL
========================================= */


.company__highlight {

    display: inline-block;

    margin-bottom: 18px;

    font-family: var(--font-title);

    font-size: var(--text-sm);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--color-primary);

}



/* =========================================
   TITLE
========================================= */


.company__header h2 {

    margin-bottom: 25px;

    font-family: var(--font-title);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

    font-weight: 700;

    color: var(--color-black);

}



.company__header h2 span {

    color: var(--color-primary);

}



/* =========================================
   DESCRIPTION
========================================= */


.company__header p {

    max-width: 760px;

    margin: 0 auto 18px;

    font-family: var(--font-body);

    font-size: var(--text-md);

    line-height: 1.8;

    color: var(--color-text);

}

/* =========================================
   COMPANY SOLUTION
========================================= */


.company__solution {

    max-width: 900px;

    margin: 100px auto 0;

    padding: 60px 50px;

    text-align: center;

    border-top: 1px solid var(--color-divider);

}



/* =========================================
   TITLE
========================================= */


.company__solution h3 {

    max-width: 750px;

    margin: 0 auto 25px;

    font-family: var(--font-title);

    font-size: clamp(1.8rem, 3vw, 2.6rem);

    line-height: 1.25;

    font-weight: 700;

    color: var(--color-black);

}

/* =========================================
   TEXT
========================================= */


.company__solution p {

    max-width: 760px;

    margin: 0 auto;

    font-family: var(--font-body);

    font-size: var(--text-md);

    line-height: 1.8;

    color: var(--color-text);

}

.company__solution span {

    font-family: var(--font-body);

}



/* =========================================
   RESPONSIVE
========================================= */


@media(max-width:768px){


    .company__solution {

        margin-top: 70px;

        padding: 40px 20px;

    }


    .company__solution h3 {

        font-size: 1.7rem;

    }


    .company__solution p {

        font-size: .95rem;

        line-height: 1.7;

    }


}

/* =========================================
   RESPONSIVO
========================================= */


@media(max-width:768px){


    .company__header {

        margin-bottom: 50px;

        padding: 0 20px;

    }


    .company__highlight {

        font-size: .75rem;

        letter-spacing: 1.5px;

    }


    .company__header h2 {

        font-size: 2rem;

    }


    .company__header p {

        font-size: .95rem;

        line-height: 1.7;

    }


}

/* =========================
   COMPANY MINDMAP
========================= */


.company__mindmap {

    position: relative;

    width: 100%;

    max-width: 1100px;

    height: 650px;

    margin: 80px auto 0;

}



/* =========================
   LOGO CENTRAL
========================= */


.company__center {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 180px;

    height: 180px;

    background: var(--color-white);

    border-radius: var(--radius-circle);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-md);

    border: 3px solid var(--color-primary);

    z-index: 2;

}


.company__center img {

    width: 75%;

    height: auto;

}





/* =========================
   CARDS
========================= */


.company__node {

    position: absolute;

    width: 260px;

    padding: var(--space-6);

    background: var(--color-white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    border-left: 4px solid var(--color-primary);

    z-index: 2;

}



.company__node span {

    display: block;

    font-family: var(--font-highlight);

    color: var(--color-primary);

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: var(--space-2);

}



.company__node h3 {

    font-family: var(--font-heading);

    font-size: var(--heading-md);

    margin: 0 0 var(--space-2);

}



.company__node p {

    font-family: var(--font-body);

    color: var(--color-muted);

    line-height: 1.6;

    margin: 0;

}

/* =========================
   COMPANY FEATURES
========================= */


.company-features {

    padding: var(--space-12) var(--container-padding);

    background: var(--color-light);

}



.company-features__container {

    max-width: var(--container-width);

    margin:0 auto;

}





/* HEADER */


.company-features__header {

    max-width:750px;

    margin-bottom:60px;

}



.company-features__tag {

    display:inline-block;

    margin-bottom:15px;

    color:var(--color-primary);

    font-size:var(--text-sm);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}



.company-features__header h2 {

    font-family:var(--font-body);

    font-size:var(--heading-lg);

    line-height:1.15;

    color:var(--color-dark);

    margin:0 0 var(--space-5);

}



.company-features__header p {

    font-family:var(--font-body);

    font-size:var(--text-lg);

    line-height:1.7;

    color:var(--color-muted);

}





/* CARDS */


.company-features__cards {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}





.company-feature-card {

    padding:40px 35px;

    background:white;

    border-radius:var(--radius-lg);

    border:1px solid rgba(0,0,0,.08);

    transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);

}





.company-feature-card:hover {

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);

}





/* ICON */


.company-feature-card i {

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(200,0,0,.08);

    color:var(--color-primary);

    font-size:26px;

}





/* TITLE */


.company-feature-card h3 {

    font-family:var(--font-body);

    font-size:22px;

    line-height:1.3;

    color:var(--color-dark);

    margin-bottom:15px;

}





/* TEXT */


.company-feature-card p {

    font-family:var(--font-body);

    color:var(--color-muted);

    line-height:1.7;

}





/* =========================
   RESPONSIVE
========================= */


@media(max-width:1000px){


    .company-features__cards {

        grid-template-columns:repeat(2,1fr);

    }


}





@media(max-width:700px){


    .company-features {

        text-align:center;

    }



    .company-features__header {

        margin-left:auto;

        margin-right:auto;

    }



    .company-features__tag {

        text-align:center;

    }



    .company-features__cards {

        grid-template-columns:1fr;

    }



    .company-feature-card {

        text-align:center;

        padding:35px 25px;

    }



    .company-feature-card i {

        margin-left:auto;

        margin-right:auto;

    }


}

/* =========================================
   SERVICES
========================================= */


.services {

    width: 100%;

    padding: 100px 0;

    background: var(--color-white);

}



/* =========================================
   HEADER
========================================= */


.services__header {

    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;

}

.services__header{

    padding-left:var(--container-padding);

    padding-right:var(--container-padding);

}

.services__highlight {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--color-primary);

    font-size: var(--text-sm);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.services__header h2 {

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.2;

    color: var(--color-black);

    margin-bottom: 20px;

}



.services__header h2 span {

    font-family: var(--font-body);

    color: var(--color-primary);

}



.services__header p {

    color: var(--color-text);

    font-size: var(--text-md);

    line-height: 1.8;

}



/* =========================================
   CARDS
========================================= */


.services__cards {

    display: flex;

    flex-direction: column;

    gap: 35px;

}



/* =========================================
   CARD
========================================= */


.services__card {

    width: 100%;

    min-height: 260px;

    display: grid;

    grid-template-columns: 320px 1fr;

    background: var(--color-white);

    border: 1px solid var(--color-divider);

    overflow: hidden;

    transition: .4s ease;

    text-decoration: none;

}



/* hover */


.services__card:hover {

    transform: translateY(-6px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.10);

}



/* =========================================
   IMAGE
========================================= */


.services__card-image {

    width:100%;

    height:100%;

    overflow:hidden;

}



.services__card-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}



.services__card:hover img {

    transform:scale(1.08);

}



/* =========================================
   CONTENT
========================================= */


.services__card-content {

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.services__card-content h3 {

    color:var(--color-black);

    font-size:1.5rem;

    line-height:1.3;

    margin-bottom:15px;

}



.services__card-content p {

    color:var(--color-text);

    line-height:1.7;

    margin-bottom:25px;

}



/* LINK */


.services__card-content span {

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--color-primary);

    font-weight:600;

    transition:.3s ease;

}



.services__card-content span i {

    transition:.3s ease;

}



.services__card:hover span i {

    transform:translateX(8px);

}



/* =========================================
   RESPONSIVO
========================================= */


@media(max-width:900px){


    .services {

        padding:80px 0;

    }



    .services__card {

        grid-template-columns:1fr;

    }



    .services__card-image {

        height:250px;

    }



    .services__card-content {

        padding:30px;

    }


}



@media(max-width:600px){


    .services__header {

        margin-bottom:45px;

    }



    .services__card-content h3 {

        font-size:1.25rem;

    }



    .services__card-content {

        padding:25px;

    }


}

/* =========================
   QUALITY SECTION
========================= */


.quality {

    padding: var(--space-12) var(--container-padding);

    background: var(--color-light);

    overflow:hidden;

}



.quality__header {

    max-width:800px;

    margin-bottom:var(--space-10);

}



.quality__tag {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--color-primary);

    font-size: var(--text-sm);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.quality__header h2 {

    font-family:var(--font-body);

    font-size:var(--heading-lg);

    line-height:1.15;

    color:var(--color-dark);

    margin-bottom:var(--space-5);

}



.quality__header p {

    font-family:var(--font-body);

    font-size:var(--text-lg);

    line-height:1.7;

    color:var(--color-muted);

}




/* =========================
   CARDS
========================= */


.quality__cards {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:var(--space-6);

}



.quality-card {

    position:relative;

    padding:40px 35px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.08);

    border-radius:var(--radius-lg);

    overflow:hidden;

    transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);

}




/* DETALHE INDUSTRIAL */

.quality-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--color-primary);

    transition:var(--transition-normal);

}



.quality-card:hover::before {

    width:100%;

}



.quality-card:hover {

    transform:translateY(-10px);

    border-color:var(--color-primary);

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}




/* ÍCONE */


.quality-card i {

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;

    height:65px;

    margin-bottom:var(--space-6);

    border-radius:50%;

    background:

    rgba(212,176,106,.12);

    color:var(--color-primary);

    font-size:26px;

    transition:var(--transition-normal);

}



.quality-card:hover i {

    transform:scale(1.1);

    background:var(--color-primary);

    color:white;

}




/* TITULO */


.quality-card h3 {

    font-family:var(--font-body);

    font-size:var(--text-xl);

    font-weight:700;

    color:var(--color-dark);

    margin-bottom:var(--space-3);

}




/* TEXTO */


.quality-card p {

    font-family:var(--font-body);

    font-size:var(--text-base);

    line-height:1.7;

    color:var(--color-muted);

}


.quality-stats {

    padding: var(--space-12) var(--container-padding);

}



.quality-stats__box {

    max-width:1100px;

    margin:0 auto;

    padding:60px 50px;

    background:#111;

    border-radius:var(--radius-lg);

    position:relative;

    overflow:hidden;

}



.quality-stats__box::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:var(--color-primary);

}



.quality-stats__header {

    max-width:700px;

    margin-bottom:50px;

}



.quality-stats__header span {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--color-primary);

    font-size: var(--text-sm);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.quality-stats__header h2 {

    color:white;

    font-size:var(--heading-lg);

    margin:15px 0;

}



.quality-stats__header p {

    color:var(--color-muted);

    line-height:1.7;

}



.quality-stats__numbers {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.quality-stat {

    text-align:center;

    padding:25px;

    border-left:1px solid rgba(255,255,255,.15);

}



.quality-stat strong {

    display:block;

    font-size:45px;

    color:var(--color-primary);

}



.quality-stat span {

    color:white;

    font-size:15px;

}


/* =========================
   RESPONSIVO
========================= */


@media(max-width:900px){


    .quality__cards {

        grid-template-columns:1fr;

    }


}

@media (max-width: 900px){


    .quality-stats__numbers{

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: var(--space-8);

    }


}

@media (max-width: 480px){


    .quality-stats__numbers{

        grid-template-columns: 1fr;

        gap: var(--space-6);

    }



    .quality-stat strong{

        font-size: var(--heading-xl);

    }



    .quality-stat span{

        font-size: var(--text-sm);

    }


}

/* =========================
   CONTACT
========================= */


.contact {

    width: 100%;

    padding: var(--navbar-padding) 0;

    background: var(--color-dark);

    overflow: hidden;

}




/* CONTAINER */

.contact__container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-12);

}





/* CONTENT */

.contact__content {

    max-width: 600px;

}





.contact__tag {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--color-primary);

    font-size: var(--text-sm);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

}





.contact__content h2 {

    font-family: var(--font-body);

    font-size: var(--heading-xl);

    line-height: 1.15;

    font-weight: 800;

    color: var(--color-white);

    margin-bottom: var(--space-6);

}





.contact__content p {

    font-family: var(--font-body);

    font-size: var(--text-lg);

    line-height: 1.7;

    color: var(--color-muted);

    max-width: 520px;

    margin-bottom: var(--space-8);

}





/* BUTTON */

.contact__button {

    display: inline-flex;

    align-items: center;

    gap: var(--space-4);

    padding: 16px 34px;

    border-radius: var(--radius-md);

    background: var(--color-primary);

    color: var(--color-white);

    text-decoration: none;

    font-family: var(--font-body);

    font-weight: 700;

    transition: var(--transition-normal);

}


.contact__button span {
    color: var(--color-light);
}


.contact__button:hover {

    transform: translateY(-5px);

    background: var(--color-primary-hover);

}





.contact__button i {

    transition: var(--transition-normal);

}





.contact__button:hover i {

    transform: translateX(8px);

}





/* INFO */

.contact__info {

    display: flex;

    flex-direction: column;

    gap: var(--space-5);

    width: 420px;

}





/* CARDS */

.contact-card {

    display: flex;

    align-items: center;

    gap: var(--space-5);

    padding: 24px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: var(--radius-md);

    background: rgba(255,255,255,.03);

    transition: var(--transition-normal);

}


.contact-card {
    text-decoration: none;
    cursor: pointer;
}


.contact-card i {

    width: 55px;

    height: 55px;

    min-width:55px;

    min-height:55px;

    display: flex;

    align-items: center;

    flex-shrink:0;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,0,0,.12);

    color: var(--color-primary);

    font-size: 24px;

    transition: var(--transition-normal);

}

.contact-card span {

    display: block;

    font-family: var(--font-body);

    font-size: var(--text-lg);

    font-weight: 700;

    color: var(--color-white);

}





.contact-card p {

    margin: 5px 0 0;

    font-family: var(--font-body);

    color: var(--color-muted);

}





/* HOVER */

.contact-card:hover {

    transform: translateY(-6px);

    border-color: var(--color-primary);

}





.contact-card:hover i {

    background: var(--color-primary);

    color: var(--color-white);

}

@media(max-width:900px){

    .contact__container{

        flex-direction: column;

        align-items: flex-start;

    }


    .contact__info{

        width:100%;

    }

        .contact-card i{

        width:48px;

        height:48px;

        font-size:20px;

    }


}

@media(max-width:480px){

    .contact__content h2{

        font-size: var(--heading-lg);

    }


    .contact-card{

        padding: var(--container-padding);

    }


    .contact-card i{

        width:48px;

        height:48px;

        font-size:20px;

    }

}

/* =========================================
   Responsive
========================================= */

@media(max-width:1024px){

    .cursor-inner,
    .cursor-outer{

        display:none;

    }

}

@media(max-width:1100px){


    .company__mindmap {

        display: none;

    }



    .company__cards-mobile {

        display: flex;

        flex-direction: column;

        gap: 30px;

    }



}

@media(max-width:1100px){


    .company__cards-mobile {

        display: flex;

        flex-direction: column;

        gap: 30px;

        width: 100%;

        max-width: 600px;

        margin: 60px auto 0;

        position: relative;

    }



    .company__card {


        position: relative;


        padding: 35px 30px;


        background: var(--color-white);


        border-radius: 18px;


        border-left: 5px solid var(--color-primary);


        box-shadow: 0 10px 30px rgba(0,0,0,.08);


        overflow: hidden;


        transition:

            transform .3s ease,

            box-shadow .3s ease;


    }




    .company__card::before {


        content:"";


        position:absolute;


        top:0;


        left:0;


        width:100%;


        height:3px;


        background: var(--color-primary);


        opacity:.8;


    }




    .company__card:hover {


        transform: translateY(-8px);


        box-shadow: 0 18px 40px rgba(0,0,0,.12);


    }




    .company__card span {


        display:block;


        margin-bottom:12px;


        font-family: var(--font-highlight);


        font-size:.85rem;


        font-weight:700;


        text-transform:uppercase;


        letter-spacing:1px;


        color:var(--color-primary);


    }




    .company__card h3 {


        margin:0 0 15px;


        font-family:var(--font-heading);


        font-size:2rem;


        color:var(--color-dark);


    }




    .company__card p {


        margin:0;


        font-family:var(--font-body);


        color:var(--color-muted);


        line-height:1.7;


        font-size:1rem;


    }


}

/* =========================
   HOME TITLE RESPONSIVE
========================= */


@media(max-width:1200px){


    .home__title{

        font-size:clamp(2.8rem, 5vw, var(--heading-xl));

    }


}



@media(max-width:768px){


    .home__title{

        font-size:2.4rem;

        line-height:1.15;

    }


}



@media(max-width:480px){


    .home__title{

        font-size:2rem;

        line-height:1.2;

    }


}

/* =========================
   QUALITY STATS TITLE RESPONSIVE
========================= */


@media(max-width:900px){


    .quality-stats__header h2{

        font-size:clamp(
            2rem,
            4vw,
            var(--heading-lg)
        );

        line-height:1.2;

    }


}



@media(max-width:480px){


    .quality-stats__header h2{

        font-size:1.7rem;

        line-height:1.25;

    }


}

@media(max-width:768px){


    .contact__content,
    .contact__header,
    .contact-card{

        text-align:center;

    }



    .contact-card{

        justify-content:center;

    }



    .contact-card div{

        text-align:center;

    }


}

@media(max-width:700px){


    .quality-stats__box{

        padding:40px 25px;

    }



    .quality-stats__numbers{

        grid-template-columns:1fr;

        gap:20px;

    }



    .quality-stat{

        border-left:none;

        border-bottom:1px solid rgba(255,255,255,.15);

        padding:25px 10px;

    }



    .quality-stat:last-child{

        border-bottom:none;

    }



    .quality-stat strong{

        font-size:38px;

    }


}

@media(max-width:700px){


    .quality__header{

        max-width:100%;

        text-align:center;

        margin-left:auto;

        margin-right:auto;

    }



    .quality__tag{

        text-align:center;

    }



    .quality__header h2{

        text-align:center;

    }



    .quality__header p{

        text-align:center;

    }


}

@media(max-width:700px){


    .quality__cards{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        width:100%;

    }



    .quality-card{

        width:100%;

        max-width:350px;

        text-align:center;

    }


}

@media(max-width:768px){


    .home__content{

        text-align:center;

        margin:0 auto;

    }



    .home__description{

        margin-left:auto;

        margin-right:auto;

    }



    .home__button{

        justify-content:center;

    }



    .home__tag{

        text-align:center;

    }


}