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

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

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


html,
body {

    margin: 0;

    padding: 0;

}


body {

    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);

}

/* =========================
   PAGE HERO
========================= */


.page-hero {

    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;

}



/* OVERLAY */

.page-hero__overlay {

    position: absolute;

    inset: 0;

    background:

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

}



/* CONTAINER */

.page-hero__container {

    width: 100%;

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

    margin: 0 auto;

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

    position: relative;

    z-index: 1;

}



/* CONTENT */

.page-hero__content {

    max-width: 900px;

}



/* TAG */

.page-hero__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 */

.page-hero__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 */

.page-hero__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 */

.page-hero__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);

}



.page-hero__button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--color-white);

    transform: translateX(-100%);

    transition: var(--transition-normal);

    z-index: -1;

}



.page-hero__button:hover::before {

    transform: translateX(0);

}



.page-hero__button:hover {

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

}



.page-hero__button i {

    transition: var(--transition-normal);

}



.page-hero__button:hover i {

    transform: translateX(8px);

}



.page-hero__button span {

    color: var(--color-white);

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

}



.page-hero__button:hover span {

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

}

.page-hero__heading {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-6);

}



.page-hero__breadcrumb {

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

    color:var(--color-light);

    white-space:nowrap;

}



.page-hero__breadcrumb a {

    color:var(--color-primary);

    text-decoration:none;

}



.page-hero__central {

    margin:0;

    color:var(--color-white);

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

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

    font-weight:800;

    line-height:1.1;

}



.page-hero__central span {

    color:var(--color-primary);

}

@media(max-width:768px){

    .page-hero__heading{

        flex-direction:column;

        align-items:flex-start;

    }

}

/* ANIMAÇÃO */

.page-hero__tag,
.page-hero__title,
.page-hero__description,
.page-hero__button {

    opacity: 0;

    animation: pageHeroEnter .7s ease forwards;

}



.page-hero__title {

    animation-delay: .15s;

}



.page-hero__description {

    animation-delay: .3s;

}



.page-hero__button {

    animation-delay: .45s;

}



@keyframes pageHeroEnter {


    from {

        opacity: 0;

        transform: translateY(25px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}

/* =========================================
   SERVICE INTRO
========================================= */


.service-intro {

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

    background:var(--color-white);

}



.service-intro .container {

    display:grid;

    grid-template-columns:1.2fr .8fr;

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

    align-items:start;

    gap:80px;

}





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


.service-intro__tag {

    display:inline-block;

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

    color:var(--color-primary);

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

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

    font-weight:600;

    letter-spacing:1px;

}



.service-intro__content h2 {

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

    max-width:650px;

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

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

    line-height:1.2;

    font-weight:800;

    color:var(--color-black);

}



.service-intro__content p {

    max-width:620px;

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

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

    line-height:1.8;

    color:var(--color-text);

}





/* =========================================
   SOLUTIONS
========================================= */


.service-intro__solutions h3 {

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

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

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

    font-weight:700;

    color:var(--color-black);

}





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


.service-intro__cards {

    display:flex;

    flex-direction:column;

    gap:18px;

}



.related-card {

    display:flex;

    align-items:center;

    gap:20px;

    padding:16px;

    background:var(--color-light);

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

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

    text-decoration:none;

    transition:var(--transition-normal);

}



.related-card:hover {

    transform:translateY(-8px);

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

}





.related-card img {

    width:80px;

    height:70px;

    object-fit:cover;

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

}





.related-card h3 {

    margin:0 0 5px;

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

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

    font-weight:700;

    color:var(--color-black);

}





.related-card span {

    font-size:.9rem;

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

    color:var(--color-primary);

}





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


@media(max-width:900px){


    .service-intro .container {

        grid-template-columns:1fr;

        gap:50px;

    }



}



@media(max-width:600px){


    .service-intro {

        padding:70px 0;

    }



    .service-intro__content h2 {

        font-size:2rem;

    }



    .related-card img {

        width:65px;

        height:60px;

    }


}


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


@media(max-width:900px){


    .service-hero .container {

        flex-direction:column;

        text-align:center;

    }



    .service-hero__content {

        max-width:700px;

    }



    .service-hero__image {

        width:100%;

    }



    .related-services__cards {

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

    }


}



@media(max-width:600px){


    .service-hero {

        padding:80px 0 60px;

    }



    .related-services__cards {

        grid-template-columns:1fr;

    }



    .service-hero p {

        font-size:1rem;

    }


}

@media(max-width:768px){


    .service-intro__content{

        text-align:center;

        margin-left:auto;

        margin-right:auto;

    }



    .service-intro__content p{

        text-align:center;

    }



    .service-intro__content h2{

        text-align:center;

    }


}

@media(max-width:768px){


    .page-hero__heading{

        text-align:center;

    }



    .page-hero{

        text-align:center;

    }



    .page-hero__breadcrumb{

        justify-content:center;

        text-align:center;

    }



    .page-hero__description{

        text-align:center;

        margin-left:auto;

        margin-right:auto;

    }



    .page-hero__button{

        margin-left:auto;

        margin-right:auto;

    }


}