/* === CONFIGURAÇÕES GLOBAIS E VARIÁVEIS === */
:root {
    --BG-Desktop: url('assets/images/BG - Otimização.webp');
    --BG-Mobile: url('assets/images/BG mobile - Otimização.webp');
    --primary-color: #FFFFFF;
    --secondary-color: #90FAE5;
    --tertiary-color: #2788B8;
    --text-color: #919191;
    --bg-color: #030303;
    --card-color: #181818;
    --card-color-hover: #1D1D1D;
    --border-color: #2A2A2A;
    --max-width: 1140px;
    --gap: 20px;
    --border-radius: 4px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat-v25-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat-v25-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body, html {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    line-height: 1.3;
    text-wrap: balance;
    overflow-x: hidden !important;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}

/* Configurações Lenis (Smooth Scroll) */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }


/* Scrollbar (Desktop) */
@media (min-width: 1024px){
  * {
    scrollbar-width: thin;
    scrollbar-color: #9B9789 var(--bg-color);
  }
  *::-webkit-scrollbar { width: 8px; }
  *::-webkit-scrollbar-track { background: var(--bg-color); }
  *::-webkit-scrollbar-thumb {
   background-color: #9B9789;
   border-radius: 4px;
  }
}

/* === TIPOGRAFIA E ELEMENTOS BASE === */
h1, h2, h3, h4{
    font-weight: 600;
    color: var(--primary-color);
}
h1 { font-size: 2.3em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.3em; }

p, li {
    font-size: 1.3em;
    font-weight: 300;
    color: var(--text-color);
}

a{
    color: var(--text-color);
}

.svg_image {
    width: 50px;
    height: auto;
    margin: 0 0;
    background-color: var(--border-color);
    padding: 10px;
    border-radius: 4px;
}

.logo__image {
    width: 80px;
    height: auto;
    margin: 0 0;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: auto;
    padding: 8em 0 8em 0;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap
}

.btn {
    display: flex;
    padding: 24px 24px;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: 2.9px;
    justify-content: center;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 1.1em;
    width: 500px;
}

.btn--primary {
    display: flex;
    position: relative;
    justify-content: center;
    color: var(--bg-color);
    background-image: linear-gradient(to left, #90FAE5, #2788B8);
    z-index: 1;
}

.btn--primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to left, #90FAE5, #90FAE5);
    z-index: -1;
    opacity: 0;
    transition: 0.5s;
    border-radius: 4px;
}

.btn--primary:hover:before {
    opacity: 1;
}

.hero {
    background-image: var(--BG-Desktop);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 4em;
    height: 902px;
    width: 100%;
    position: relative;
    z-index: 999;
}

.hero::after{
    content: "";
    position: absolute;
    bottom: -2px;
    left:0;
    height: 20%;
    width: 100%;
    background: linear-gradient(to top, #030303, transparent);
    pointer-events: none;
}

.hero__title {
    margin-left: 30px;
    max-width: 500px;
    text-align: left;
    position: relative;
}

@media (min-width: 767px) {
.hero__title::before {
    content: "";
    position: absolute;
    top: 78px;
    left: -30px;
    width: 2px;
    height: 64px;
    background-color: var(--border-color);
}
.hero__title::after {
    content: "";
    position: absolute;
    top: 14px;
    left: -30px;
    width: 2px;
    height: 64px;
    background: linear-gradient(to bottom, #90FAE5, #2788B8);
    }
}

.hero__description {
    max-width: 500px;
    text-align: left;
}

.container2{
    max-width: var(--max-width);
    margin: auto;
    padding: 2em 0 0 0;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}

.container2-2 {
    max-width: var(--max-width);
    margin: 0;
    padding: 0 ;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}

.section2__image {
    width: 550px;
    height: auto;
    z-index: 9;
}

.section2__title {
    width: 300px;
    text-align: left;
    position: relative;
}

.section2__title::before {
    content: "";
    position: absolute;
    left: 100px;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -30px;
}

.section2__title::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -30px;
}

.section2__description{
    width: 600px;
    text-align: left;
    position: relative;
}

.bg3{
    margin-top: -12em;
    border: solid var(--border-color);
    border-top-width: 2px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
}

.container3{
    max-width: var(--max-width);
    margin: auto;
    padding: 20em 0 8em 0;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section3__title {
    position: relative;
    text-align: center;
    padding-bottom: 1em;
}

.section3__title::before {
    content: "";
    position: absolute;
    left: 49%;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -30px;
}

.section3__title::after {
    content: "";
    position: absolute;
    left: 35%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -30px;
}

.section3-3__title{
    text-align: left;
    font-size: 1.3em;
}

.container-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-bottom: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--card-color);
  padding: 2em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  gap: var(--gap);
  transition: 0.3s;
}

.card:hover {
  background-color: var(--card-color-hover);
}

.section3__description{
    margin-top: 30px;
    text-align: left;
    position: relative;
}

.section3__description::before {
    content: "";
    position: absolute;
    left: 100px;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -24px;
}

.section3__description::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -24px;
}

.bg3, .bg4{
    background: top center no-repeat cover; 
    width: 100%;
    position: relative;
}

.container4 {
    max-width: var(--max-width);
    margin: auto;
    padding: 8em 0 8em 0;
    display: flex;
    gap: 0px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container4-esq {
    width: 50%;
    background-color: var(--bg-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: var(--border-color);
    border-radius: 4px;
    margin: 0em;
    padding: 5em 2em 2em 2em;
    gap: var(--gap);
}

.section4__title {
    position: relative;
    text-align: center;
    padding-top: 12px;
}

.section4-4-4__title {
    font-size: 3.6em;
    color: var(--primary-color);
}

.section4-4__title{
    font-size: 1.3em;
}

.section4__title::before {
    content: "";
    position: absolute;
    left: 48%;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -20px;
}

.section4__title::after {
    content: "";
    position: absolute;
    left: 16%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -20px;
}

.section4__image-esq {
    max-width: 346px;
}

.container4-dir {
    width: 50%;
    background-color: var(--card-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 4px;
    margin: 0em;
    padding: 5em 2em 2em 2em;
    gap: var(--gap);
}

.section__title{
    text-align: center;
}

.icon-list{
    list-style: none;
    padding: 0;
    max-width: 100%;
    margin-bottom: 1em;
    position: relative;
}

.icon-list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: var(--gap);
}

.icon-list .icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.container4-4 {
    width: 100%;
    gap: var(--gap);
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.container4-4::before{
    content: "";
    position: absolute;
    left: 50%;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -22px;
}

.container4-4::after{
    content: "";
    position: absolute;
    left: 30%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -22px;
}

.container5 {
    max-width: var(--max-width);
    margin: auto;
    padding: 8em 0 8em 0;
    display: flex;
    gap: 0px;
    flex-direction: row;
}

.container5-5 {
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    align-items: flex-start !important;
    background-color: var(--card-color);
    padding: 5em 2em 2em 2em;
    border-radius: 0px 4px 4px 0px;
}

.section5__image {
    margin: 0 0;
    border: none;
    border-radius: 4px 0 0 4px;
    box-shadow: none;
    height: auto;
    max-width: 46%;
    display: inline-block;
    vertical-align: middle;
}

.section5__title {
    position: relative;
}

.section5__title, .section5__description {
    text-align: center;
}

.section5__title::before {
    content: "";
    position: absolute;
    left: 100px;
    width: 100px;
    height: 2px;
    background-color: var(--border-color);
    top: -30px;
}

.section5__title::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -30px;
}

.icon-container5 {
    display: flex;
    gap: var(--gap);
}

.icon-item {
    background-color: var(--border-color);
    padding: 12px 12px 8px 12px;
    border-radius: 4px;
}

.bg6{
    width: 100%;
    border: solid var(--border-color);
    border-top-width: 2px;
    border-right-width: 0px;
    border-bottom-width: 0px ;
    border-left-width: 0px;
}

.container6 {
    max-width: 800px;
    margin: 0 auto;
    padding: 9em 0 8em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.faq-title {
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 1em;
  position: relative;
  width: 400px;
}

.faq-title::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 100px;
    height: 2px;
    background-color: #2a2a2a;
    top: -30px;
}

.faq-title::after {
    content: "";
    position: absolute;
    left: 26%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    top: -30px;
}

.accordion {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--card-color);
}
.accordion-header {
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.accordion-header:hover {
  background-color: var(--card-color-hover);
}
.accordion-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s;
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: linear-gradient(to right, #90FAE5, #2788B8);
  transition: transform 0.4s ease;
}
.accordion-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.accordion-icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) rotate(90deg);
}
.accordion.active .accordion-icon::after {
  transform: translateX(-50%) rotate(0deg);
}
.accordion-question{
    font-size: 1.3em;
    width: 94%;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: var(--bg-color);
}
.accordion-answer {
  padding: 0 1.5em;
}
.accordion.active .accordion-answer {
  padding: 1.5em;
}

.bg7{
    width: 100%;
    border: solid var(--border-color);
    border-top-width: 2px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
}

.container7 {
    width: 100%;
    max-width: var(--max-width);
    margin: auto;
    padding: 8em 0 8em 0;
    display: flex;
    gap: var(--gap);
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}
.carousel__title{
    padding-bottom: 1em;
    text-align: center;
}
.carousel {
  position: relative;
  overflow: visible;
}
.swiper {
  width: 100%;
  clip-path: polygon(0 0, 100% -100%, 10000px 100%, 0% 100%);
  overflow: visible !important;
  cursor: grab;
}
.swiper:active{
    cursor: grabbing;
}

.swiper-slide {
  touch-action: pan-y;
  box-sizing: border-box;
}

.swiper-button-prev, .swiper-button-next{
  position:absolute !important;
  top:-50px !important;
  left: inherit !important;
  display:flex !important; 
  align-items:center !important; 
  justify-content:center !important;
  color: var(--primary-color) !important;
  background:var(--card-color) !important;
  border:1px solid var(--border-color) !important;
  border-radius:var(--border-radius,4px) !important;
  padding:24px !important;
  transition: .3s !important;
  cursor:pointer !important;
}

.swiper-button-prev svg, .swiper-button-next svg {
  width: 24px !important;
  height: 24px !important;
}

.swiper-button-prev:after, .swiper-button-next:after {
    transform: scale(0.7) !important;
}

.swiper-button-prev{ right:60px !important;     }
.swiper-button-next{ right:0px !important;}

.swiper-button-prev:hover, .swiper-button-next:hover{
  background:var(--card-color-hover) !important;
}

.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  cursor: grab;
}
.video-thumb:active {
  cursor: grabbing;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease;
  cursor: pointer;
}
.video-thumb:hover .play-button {
  transform: translate(-50%, -50%) scale(1.1);
}

.footer {
    padding: 4em auto;
    position: relative;
}

.footer-container{
    max-width: var(--max-width);
    margin: auto;
    padding: 4em 0 4em 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
}

.footer-container1::before {
    content: "";
    position: absolute;
    left: 0%;
    width: 100%;
    max-width: 1140px;
    height: 1px;
    background: linear-gradient(to right, #90FAE5, #2788B8);
    bottom: -40px;
    top: inherit;
}

.footer-container1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: var(--gap);
}

.footer-container2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: var(--gap);
    flex-wrap: wrap;
}

.text-facebook{
    width: 70%;
    font-size: 1em;
}

.copyright{
    font-size: 1em;
}

.footer__links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-top: 20px;
    font-size: 1em;
}

.footer__links li{
    font-size: 1em;
}

.footer__links a {
    color: var(--text-color);
    text-decoration: none;
    transition: .3s;
}

.footer__links a:hover {
    color: var(--primary-color);
}

@media(min-width: 1025px){
.up {
    opacity: 0;
    transform: translate(10px, 30px);
    transition: opacity 1s ease, transform 1s ease;
}

.ativo {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* === RESPONSIVE BREAKPOINTS ========= */
/* --- Mobile (até 766px) --- */
@media (max-width: 766px) {
    h1, h2, h3{ font-size: 1.6em; }
    h2{ font-size: 1.3em; }
    h3{ font-size: 1.1em; }
    h4{ font-size: 1em; }
    p, li, .accordion-question { font-size: 1em; }
    
    .container, .container2, .container3, .container4, .container5, .container6, .container7, .footer-container {
        padding-top: 5em;
        padding-bottom: 3em;
        padding-left: 1.125em;
        padding-right: 1.125em;
    }

    .logo__image { width: 60px; }
    
    .btn {
        padding: 24px 0px;
        letter-spacing: 0.9px;
        font-size: 1em;
        width: 100%;
    }

    .hero {
        background-image: var(--BG-Mobile);
        background-size: contain;
        height: 100%;
        padding-top: 36%;
    }
    .hero__title {
        margin-left: 0;
    }

    .container2-2 {
        flex-direction: column;
        gap: var(--gap);
        width: 100%;
    }
    .section2__title, .section2__description {
        max-width: 100%;
    }
    .section2__image {
        width: 100%;
    }
    .bg3 {
    background-image: none !important;
    }
    .container-grid {
        grid-template-columns: 1fr;
    }
    .section3__title{
        width: 250px
    }
    .card {
        padding: 6%;
    }

    .bg4 {
    background-image: none !important;
    }

    .container4 {
        padding-top: 3em;
        flex-direction: column;
        gap: var(--gap);
    }
    .container4-esq {
        padding: 3.5em 6% 6% 6% !important;
    }
    
    .container4-esq, .container4-dir {
        width: 100%;
        border-width: 1px;
        border-style: solid;
        border-color: var(--border-color);
        border-radius: 4px;
        margin: 0em;
        padding: 2em 6% 6% 6%;
        gap: var(--gap);
    }

    .section__image{
        width: 100%;
        height: auto;
    }

    .container4-esq{
        order:2
    }

    .container5 {
        flex-direction: column;
    }
    .section5__image, .container5-5 {
        width: 100%;
        max-width: 100%;
    }
    .section5__image {
        border-radius: 4px 4px 0 0;
    }
    .container5-5 {
        padding: 3.5em 6% 6% 6%;
        border-radius: 0 0 4px 4px;
        align-items: center;
    }
    .accordion-header {
        padding: 6%;
    }  
    .accordion.active .accordion-answer {
        padding: 6%;
    }
    .swiper-button-prev, .swiper-button-next{
        transform: scale(0.8);
    }
    .swiper-button-prev{
        right:50px !important;
    }
    .swiper-button-prev, .swiper-button-next{
        top:-30px !important;
    }
    .footer-container {
        padding-top: 3em;
        gap: 40px
    }
    .footer-container1::before {
    bottom: -20px;
    }
    .footer-container1, .footer-container2 {
        flex-direction: column;
        align-items: center;
    }
    .text-facebook {
        width: 100%;
        font-size: 0.9em;
    }
    .footer__links {
        font-size: 0.9em;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .copyright {
        font-size: 0.9em;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }
}

/* --- Tablet (767px a 1024px) --- */
@media (min-width: 767px) and (max-width: 1024px) {
    h1, h2, h3{ font-size: 1.9em; }
    h2{ font-size: 1.6em; }
    h3{ font-size: 1.3em; }
    h4{ font-size: 1.1em; }
    p, li { font-size: 1.1em; }

    .container, .container2, .container3, .container4, .container5, .container6, .container7, .footer-container {
        padding-top: 7em;
        padding-bottom: 5em;
        padding-left: 1.125em;
        padding-right: 1.125em;
    }

    .hero .container {
        padding-top: 4em;
        padding-bottom: 4em;
    }
    .container2 {
        padding-bottom: 0em;
    }
    .container3 {
        padding-top: 18em;
    }
    .container4-esq{
        order:2
    }

    .container-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container4 {
        flex-direction: column;
        gap: var(--gap);
    }
    .container4-esq, .container4-dir {
        width: 100%;
        max-width: 600px;
    }

    .container5 {
        flex-direction: column;
        align-items: center;
    }
    .section5__image, .container5-5 {
        width: 100%;
        max-width: 700px;
    }
    .section5__image {
        border-radius: 4px 4px 0 0;
    }
    .container5-5 {
        border-radius: 0 0 4px 4px;
        align-items: center;
    }
    .section5__title, .section__description {
        text-align: center;
    }
    .footer-container {
        padding-top: 2em;
        padding-bottom: 2em;
        padding-left: 1.125em;
        padding-right: 1.125em;
    }
}

/* --- Laptop (1025px a 1366px) --- */
@media (min-width: 1025px) and (max-width: 1366px) {
    h1, h2, h3{ font-size: 2.1em; }
    h2{ font-size: 1.9em; }
    h3{ font-size: 1.6em; }
    h4{ font-size: 1.125em; }
    p, li { font-size: 1.125em; }

    .container, .container2, .container3, .container4, .container5, .container6, .container7, .footer-container {
        max-width: 90vw;
    }
    .hero .container {
        padding-top: 2em;
        padding-bottom: 4em;
    }
    .hero {
        height: 762px;
    }    
    .section5__image {
        max-width: 40%;
    } 
    .container6 {
        max-width: 800px;
    } 
    .footer-container1::before {
    max-width: 1366px;
}
}