/*
    Theme Name: Atom Theme
    Theme URI: https://atomdigital.com.br/
    Author: Higor Paulo | Hx Digital
    Author URI: https://atomdigital.com.br/
    Description: Website/One Page/Landing Page
    Version: 2025.1
    License: Atom Digital
    License URI: https://atomdigital.com.br/
    Tags: criação de páginas web Brasil, criação de páginas web Goiânia, desenvolvimento de sites Goiânia, desenvolvimento de sites responsivos Goiânia, web design Goiânia, otimização SEO, análise de desempenho de sites, técnicas de otimização para sites, gestão de redes sociais, estratégias de marketing nas redes sociais, produção de conteúdo para websites
    Text Domain: Atom Digital
*/

/* Cores customizadas */
:root {
    --color-neutral-100: #4a4a4a;
    --color-neutral-200: #4A4A4A;
    --color-neutral-300: #747474;
    --color-neutral-400: #afafaf;
    --color-neutral-500: #e9e9e9;
    --color-neutral-700: #F3F3F3;
    --color-neutral-800: #F1F1F1;
    --color-neutral-900: #FFFFFF;
    --color-primary: #0052FE;
    --color-secondary: #32EEEC;
    --color-tertiary: #0339B4;
    --color-green: #00C100;
    --color-yellow: #F7CB45;

    /* Fonts Family */
    --font-family-01: "Nunito Sans", sans-serif;
}
html{
    font-size: 16px;
    font-weight: 400;
    scroll-behavior: smooth;
}
body{
    background-color: var(--color-neutral-800);
    font-family: var(--font-family-01);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 999px) {
    html{
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    html{
        font-size: 14px;
    }
}

@media screen and (max-width: 576px) {
    html{
        font-size: 13px;
    }
}
form{
    touch-action: manipulation;
}
form label{
	font-size: 0.656rem;  /* 10.5px */
    color: var(--color-neutral-300);
}
input,
textarea,
select{
    width: 100%;
    background-color: var(--color-neutral-800);
	font-size: 1rem;
    touch-action: manipulation;
    font-weight: 300;
    color: var(--color-neutral-200);
    border: 0;
    padding: 1rem;
    border-radius: 5px;
}
textarea{
    min-height: 10rem;
    max-height: 10rem;
}
select{
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent url(./assets/img/default-dropdown.svg) no-repeat right 1rem center;
    background-size: .6rem; /* Tamanho da imagem */
    background-color: var(--color-neutral-800);
}
/*********** Start Fonts ***********/
.font-family-01{
    font-family: var(--font-family-01);
}
/*********** End Fonts ***********/

/*********** Start Background ***********/
.bg-color-neutral-100{
	background-color: var(--color-neutral-100);
}
.bg-color-neutral-200{
	background-color: var(--color-neutral-200);
}
.bg-color-neutral-300{
	background-color: var(--color-neutral-300);
}
.bg-color-neutral-400{
	background-color: var(--color-neutral-400);
}
.bg-color-neutral-500{
	background-color: var(--color-neutral-500);
}
.bg-color-neutral-600{
	background-color: var(--color-neutral-600);
}
.bg-color-neutral-700{
	background-color: var(--color-neutral-700);
}
.bg-color-neutral-800{
	background-color: var(--color-neutral-800);
} 
.bg-color-neutral-900{
	background-color: var(--color-neutral-900) !important;
}
.bg-color-primary{
	background-color: var(--color-primary);
}
.bg-color-secondary{
    background-color: var(--color-secondary);
}
.bg-color-tertiary{
    background-color: var(--color-tertiary);
}
.bg-color-green{
    background-color: var(--color-green);
}
/*********** End Background ***********/

/*********** Start Colors ***********/
.text-color-neutral-100{
	color: var(--color-neutral-100) !important;
}
.text-color-neutral-200{
	color: var(--color-neutral-200);
}
.text-color-neutral-300{
	color: var(--color-neutral-300);
}
.text-color-neutral-400{
	color: var(--color-neutral-400);
}
.text-color-neutral-500{
	color: var(--color-neutral-500);
}
.text-color-neutral-600{
	color: var(--color-neutral-600);
}
.text-color-neutral-700{
	color: var(--color-neutral-700);
}
.text-color-neutral-800{
	color: var(--color-neutral-800);    
} 
.text-color-neutral-900{
	color: var(--color-neutral-900);
}
.text-color-primary{
	color: var(--color-primary) !important;
}
.text-color-secondary{
	color: var(--color-secondary);    
}
.text-color-tertiary{
	color: var(--color-tertiary);    
}
.text-color-yellow{
	color: var(--color-yellow);    
}
/*********** End Colors ***********/

/*********** Start Text sizes ***********/
.heading-size-xxs {
	font-size: 1.375rem; /* 22px */
}
.heading-size-xs {
	font-size: 1.625rem; /* 26px */
}
.heading-size-sm {
	font-size: 2.375rem; /* 38px */
}
.heading-size-md {
	font-size: 2.5rem; /* 40px */
}
.heading-size-lg {
	font-size: 3rem; /* 48px */
}
.heading-size-xl {
	font-size: 3.25rem; /* 52px */
}
.heading-size-xxl {
	font-size: 3.813rem; /* 61px */
}

@media screen and (max-width: 576px) {
    .heading-size-xxl {
        font-size: calc(3.313rem - 50%);
    }
    .heading-size-xl {
        font-size: calc(3.25rem - 50%);
    }
    .heading-size-lg {
        font-size: calc(3rem - 50%);
    }
    .heading-size-md {
        font-size: calc(2.5rem - 50%);
    }
}
.text-size-xs {
	font-size: 0.656rem;  /* 10.5px */
}
.text-size-sm {
	font-size: 0.75rem; /* 12px */
}
.text-size-md {
	font-size: 0.875rem; /* 14px */
}
.text-size-lg {
	font-size: 1rem !important; /* 16px */
}
.text-size-xl {
	font-size: 1.125rem; /* 18px */    
}
.text-size-xxl {
	font-size: 1.25rem; /* 20px */
}

@media screen and (max-width: 576px) {

}
/*********** End Text sizes ***********/

/*********** Start Font Weight ***********/
.font-weight-300{
    font-weight: 300;
}
.font-weight-400{
    font-weight: 400;
}
.font-weight-500{
    font-weight: 500;
}
.font-weight-600{
    font-weight: 600;
}
.font-weight-700{
    font-weight: 700;
}
.font-weight-800{
    font-weight: 800;
}
/*********** End Font Weight ***********/

/*********** Start Button ***********/
.btn-style-01{
    background-color: var(--color-primary) !important;
    padding: 1rem 2rem;
    border-radius: 53px;
    color: var(--color-neutral-900);
	font-size: 1.125rem; /* 18px */  
    line-height: 1;  
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    border: 0;
}   
.btn-style-02{
    background-color: transparent;
    border: 1px solid var(--color-primary) !important;
    padding: 1rem 2rem;
    border-radius: 53px;
    color: var(--color-neutral-900);
	font-size: 1.125rem; /* 18px */    
    line-height: 1;
    font-weight: 500;   
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
}   
/*********** End Button ***********/

/********* Start Swiper Config *********/
.swiper-pagination-bullet {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0.5;
    background-color: transparent;
}

.swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1; 
}
.swiper-button-next, .swiper-button-prev {
    background: none;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: .7px solid var(--color-primary);
    padding: .7rem;
    top: 50%; 
    transform: translateY(-50%);
    margin-top: auto;
}
.swiper-button-next:after, 
.swiper-button-prev:after {
    font-size: 20px;
    content: '';
}
@media screen and (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    .swiper-button-prev {
        left: -1rem;
    }
    .swiper-button-next {
        right: -1rem;
    }
}
@media screen and (max-width: 576px) {
    .swiper-button-next, .swiper-button-prev {
        width: 26px;
        height: 26px;
    }
}
/********* End Swiper Config *********/

@media screen and (max-width: 576px) {
    .container{
        padding: 0 30px;
    }
}

/*********** Start UI Effects - Micro Animações ***********/
/* CSS Custom Properties para personalização */
:root {
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: .4s;
    --scroll-duration: 1s;
}

/* Transições suaves globais */
.smooth {
    transition: all var(--duration) var(--ease);
}

/* Wrapper para imagens com hover */
.image-hover-wrapper {
    overflow: hidden;
    display: inline-block;
}

.image-hover-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* Estados iniciais para animações de scroll */
[data-effect] {
    will-change: opacity, transform;
}

[data-effect].animate-pending {
    opacity: 0;
}

/* Otimizações de performance */
.smooth,
[data-effect],
.image-hover-wrapper {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Prevenção de animações em dispositivos com preferência reduzida */
@media (prefers-reduced-motion: reduce) {
    .smooth,
    [data-effect],
    .image-hover-wrapper img {
        transition: none !important;
        animation: none !important;
    }
    
    [data-effect] {
        opacity: 1 !important;
        transform: none !important;
    }
}
/*********** End UI Effects - Micro Animações ***********/