* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 /* Estado inicial para a primeira seção */
 section.primeira {
     opacity: 0;
 }

 section.primeira .absolute {
     opacity: 0;;
 }

 section.primeira h1 {
     opacity: 0;
     transform: translateY(30px);
 }

 section.primeira p {
     opacity: 0;
     transform: translateY(20px);
 }

 section.primeira button {
     opacity: 0;
     transform: translateY(20px) scale(0.9);
 }

 section.primeira .relative img {
     opacity: 0;
     transform: scale(1.1) rotateY(5deg);
 }

.fale-comigo{
    transform: scale(1);
    transition: all .3s !important;
}

.primeira-img{
    transform: scale(1);
    transition: all .5s !important;
}

.primeira-img:hover{
    transform: scale(1.05) !important;
}

.fale-comigo:hover{
    transform: scale(1.05) !important;
}

body {
    overflow-x: hidden;
}


/* Estilos do menu hamburger */
.hamburger {
    display: block;
    cursor: pointer;
    margin-left: auto;
    padding: 0.5rem;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Estilos para o menu mobile aberto */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 5px;
    width: 100%;
    height: 100vh;
    background-color: #121212;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu .nav-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

.mobile-menu .social-icons {
    display: flex;
    gap: 2rem;
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-items li {
    transition: all .3s ease-in-out;
}

.nav-items li:hover {
    transform: translateY(-2px);
}

.hero {
    background-image: linear-gradient(292deg, #1e1e1e 69%, #FFAB8B2E);
    overflow: hidden;
}

.arrow-down {
    animation: animation 1s linear infinite;
}

@keyframes animation {
    0% {
        transform: translatey(0px);
    }

    25% {
        transform: translatey(-2px);
    }

    50% {
        transform: translatey(0px);
    }

    75% {
        transform: translatey(2px);
    }

    100% {
        transform: translatey(0px);
    }
}

.card {
    background: linear-gradient(45deg, #303030 51%, #5d5d5d);
    background-size: 200% 200%;
    transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #F0C75E, transparent);
}

.card:hover {
    background-position: 50% center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cards {
    perspective: 1000px;
    /* opcional pra um efeito 3D */
}

.button:hover {
    background: rgba(255, 255, 255, 0.2);
}

img {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
    transform-origin: center;
}

.container {
    overflow-x: hidden;
}

/* Estilos gerais do footer */
footer {
    overflow: hidden;
    position: relative;
}

/* Animação dos elementos */
.footer-item,
.footer-divider,
.footer-cta {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

/* Estilos do CTA */
.footer-cta {
    z-index: 10;
}

.cta-button {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);

}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta-button:active {
    transform: translateY(1px);
}

/* Efeito pulsante no CTA */
@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 199, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(240, 199, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 199, 94, 0);
    }
}

.footer-cta:hover {
    animation: pulse-gold 1.5s infinite;
}

/* Estilos dos ícones */
.icon-float {
    display: inline-block;
    will-change: transform;
}

.icon-svg {
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Efeito flutuante nos ícones */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.05);
    }
}

.icon-float:hover .icon-svg {
    animation: float 1.5s ease-in-out infinite;
}

/* Estilos complementares */
footer a {
    transition: color 0.2s ease;
}

footer input:focus {
    outline: 1px solid #F0C75E;
    box-shadow: 0 0 0 2px rgba(240, 199, 94, 0.2);
}

footer button:hover {
    background-color: #e0b84d !important;
    transform: translateY(-2px);
}

footer input::placeholder {
    color: #a0a0a0;
    opacity: 1;
}

/* Gradiente do CTA */
.bg-gradient-to-r.from-\[\#F0C75E\].to-\[\#e0b84d\] {
    background: linear-gradient(135deg, #F0C75E 0%, #e0b84d 100%);
}

/* Estilos do CTA entre seções */
.cta-entre-secoes {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.cta-button-whatsapp,
.cta-button-call {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);
}

.cta-button-whatsapp:hover,
.cta-button-call:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta-button-whatsapp:active,
.cta-button-call:active {
    transform: translateY(1px);
}

/* Efeito pulsante no CTA */
@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 199, 94, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(240, 199, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 199, 94, 0);
    }
}

.cta-button-call:hover {
    animation: pulse-gold 1.5s infinite;
}

/* Responsividade */
@media (max-width: 768px) {
    .cta-entre-secoes {
        text-align: center;
    }

    .button-group {
        width: 100%;
    }

    .cta-button-whatsapp,
    .cta-button-call {
        width: 100%;
    }
}

/* Estilos do botão Voltar ao Topo */
#back-to-top {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(20px);
    cursor: pointer;
    outline: none;
    border: none;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(240, 199, 94, 0.4);
}

#back-to-top:active {
    transform: translateY(0) scale(0.95);
}

/* Acessibilidade */
#back-to-top:focus-visible {
    outline: 2px solid #F0C75E;
    outline-offset: 2px;
}

.primeiro-cta {
    will-change: transform;
}



.continue-application {
    --color: #fff;
    --background: #303030;
    --background-hover: #000;
    --background-left: #121212;
    --folder: #F3E9CB;
    --folder-inner: #BEB393;
    --paper: #FFFFFF;
    --paper-lines: #BBC1E1;
    --paper-behind: #E1E6F9;
    --pencil-cap: #fff;
    --pencil-top: #275EFE;
    --pencil-middle: #fff;
    --pencil-bottom: #5C86FF;
    --shadow: rgba(13, 15, 25, .2);
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    padding: 17px 29px 17px 69px;
    transition: all 0.3s;
    color: var(--color);
    background-color: var(--background);
    /* background fix */
    overflow: hidden;
    /* Importante para conter os elementos internos */
    transform: translateZ(0);
    /* Força aceleração por hardware */
    backface-visibility: hidden;
    /* Elimina artefatos visuais */
    will-change: transform;
    /* Otimiza para animações */
    filter: none !important;
    /* Garante que não haja blur aplicado */
}

.continue-application {
    /* Garante renderização nítida */
    transform-style: preserve-3d;
    perspective: 1000px;
    backface-visibility: hidden;
    image-rendering: optimizeQuality;
}

/* Otimização específica para o SVG */
.continue-application svg {
    shape-rendering: geometricPrecision;
    image-rendering: crisp-edges;
}

/* Força aceleração GPU nos elementos internos */
.continue-application>div>* {
    transform: translateZ(0);
    will-change: transform;
}

.continue-application>div {
    top: 0;
    left: 0;
    bottom: 0;
    width: 53px;
    position: absolute;
    overflow: hidden;
    border-radius: 5px 0 0 5px;
    background: var(--background-left);
}

.continue-application>div .folder {
    width: 23px;
    height: 27px;
    position: absolute;
    left: 15px;
    top: 13px;
}

.continue-application>div .folder .top {
    left: 0;
    top: 0;
    z-index: 2;
    position: absolute;
    transform: translateX(var(--fx, 0));
    transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application>div .folder .top svg {
    width: 24px;
    height: 27px;
    display: block;
    fill: var(--folder);
    transform-origin: 0 50%;
    transition: transform 0.3s ease var(--fds, 0.45s);
    transform: perspective(120px) rotateY(var(--fr, 0deg));
}

.continue-application>div .folder:before,
.continue-application>div .folder:after,
.continue-application>div .folder .paper {
    content: "";
    position: absolute;
    left: var(--l, 0);
    top: var(--t, 0);
    width: var(--w, 100%);
    height: var(--h, 100%);
    border-radius: 1px;
    background: var(--b, var(--folder-inner));
}

.continue-application>div .folder:before {
    box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
    transform: translateX(var(--fx, 0));
    transition: transform 0.4s ease var(--fd, 0.3s);
}

.continue-application>div .folder:after,
.continue-application>div .folder .paper {
    --l: 1px;
    --t: 1px;
    --w: 21px;
    --h: 25px;
    --b: var(--paper-behind);
}

.continue-application>div .folder:after {
    transform: translate(var(--pbx, 0), var(--pby, 0));
    transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application>div .folder .paper {
    z-index: 1;
    --b: var(--paper);
}

.continue-application>div .folder .paper:before,
.continue-application>div .folder .paper:after {
    content: "";
    width: var(--wp, 14px);
    height: 2px;
    border-radius: 1px;
    transform: scaleY(0.5);
    left: 3px;
    top: var(--tp, 3px);
    position: absolute;
    background: var(--paper-lines);
    box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
}

.continue-application>div .folder .paper:after {
    --tp: 6px;
    --wp: 10px;
}

.continue-application>div .pencil {
    height: 2px;
    width: 3px;
    border-radius: 1px 1px 0 0;
    top: 8px;
    left: 105%;
    position: absolute;
    z-index: 3;
    transform-origin: 50% 19px;
    background: var(--pencil-cap);
    transform: translateX(var(--pex, 0)) rotate(35deg);
    transition: transform 0.4s ease var(--pbd, 0s);
}

.continue-application>div .pencil:before,
.continue-application>div .pencil:after {
    content: "";
    position: absolute;
    display: block;
    background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
    width: var(--w, 5px);
    height: var(--h, 20px);
    border-radius: var(--br, 2px 2px 0 0);
    top: var(--t, 2px);
    left: var(--l, -1px);
}

.continue-application>div .pencil:before {
    -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
    clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
}

.continue-application>div .pencil:after {
    --b: none;
    --w: 3px;
    --h: 6px;
    --br: 0 2px 1px 0;
    --t: 3px;
    --l: 3px;
    border-top: 1px solid var(--pencil-top);
    border-right: 1px solid var(--pencil-top);
}

.continue-application:before,
.continue-application:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--color);
    transform-origin: 9px 1px;
    transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
    top: 26px;
    right: 16px;
    transition: transform 0.3s;
}

.continue-application:after {
    --r: 45deg;
}

/* hover */
.continue-application:hover {
    background-color: var(--background-hover) !important;
    /* força fundo preto sólido */
    color: var(--color);
    --fx: -40px;
    --fr: -60deg;
    --fd: .15s;
    --fds: 0s;
    --pbx: 3px;
    --pby: -3px;
    --pbd: .15s;
    --pex: -24px;
}

.continue-application:hover>div {
    background: var(--background-left);
}

.continue-application.hover-sim {
    /* Tudo que você faz no :hover */
    --cx: 2px;
    --bg: var(--background-hover);
    background: var(--background-hover);
    color: var(--color);
    --fx: -40px;
    --fr: -60deg;
    --fd: .15s;
    --fds: 0s;
    --pbx: 3px;
    --pby: -3px;
    --pbd: .15s;
    --pex: -24px;
}

/* Estilos do Menu de Redes Sociais */
.social-menu {
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    background: rgba(255, 255, 255, 0.153);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px;
    width: 90%;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
}

.social-menu.active {
    opacity: 1;
    display: block;
}

.social-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.social-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ffffff;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #ffffff;

}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.social-link:hover {
    transform: translateY(-3px);
}

.instagram {
    background: #f09433;
    background: linear-gradient(45deg, #f09533 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.whatsapp {
    background: #25D366;
    color: white;
}

.linkedin {
    background: #0077B5;
    color: white;
}

.email {
    background: #EA4335;
    color: white;
}

/* Animações para a seção Sobre Mim */
.sobre-mim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.container {
    position: relative;
    overflow: hidden;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #F0C75E, transparent);
}

/* Efeito de brilho suave */
.sobremim {
    background: linear-gradient(135deg, #F0C75E 0%, #e0b84d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsividade */
@media (max-width: 1024px) {
    .sobre-mim {
        padding: 3rem 1rem;
    }

    .container {
        padding: 1.5rem;
    }
}

.estatisticas {
    opacity: 0;
    transform: translateY(30px);
}

.estatistica-item {
    opacity: 0;
    transform: translateY(20px);
}