/* ==========================================================================
   1. FONTES (Caminho: ../FONTES/)
   ========================================================================== */

/* Tenor Sans - Títulos */
@font-face {
    font-family: 'Tenor Sans';
    src: url('../FONTES/TenorSans-Regular.woff2') format('woff2'),
        url('../FONTES/TenorSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Montserrat - Corpo e Detalhes */
@font-face {
    font-family: 'Montserrat';
    src: url('../FONTES/Montserrat-Light.woff2') format('woff2'),
        url('../FONTES/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../FONTES/Montserrat-Regular.woff2') format('woff2'),
        url('../FONTES/Montserrat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../FONTES/Montserrat-Bold.woff2') format('woff2'),
        url('../FONTES/Montserrat-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../FONTES/Montserrat-Black.woff2') format('woff2'),
        url('../FONTES/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. VARIÁVEIS 
   ========================================================================== */

:root {
    /* Cores */
    --color-bg: #0B0E14;
    --color-green-vital: #22FF92;
    --color-white: #F5F5F5;
    --color-text-muted: rgba(245, 245, 245, 0.5);

    /* Tipografia */
    --font-tenor: 'Tenor Sans', sans-serif;
    --font-mont: 'Montserrat', sans-serif;

    /* Configurações de Layout */
    --header-height: 120px;
    --container-max: 1600px;
    --transition-premium: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   3. RESET E CONFIGURAÇÕES GLOBAIS
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    /* Garante a rolagem suave para os links âncora */
    scroll-behavior: smooth;
    /* Impede saltos de layout ao abrir modais/menus */
    overflow-x: hidden;
}



body {
    background-color: var(--color-bg);
    color: var(--color-white);
    font-family: var(--font-mont);

    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 1. Reset estrutural para permitir altura total */
html,
body {
    margin: 0;
    padding: 0;
}

/* Tipografia Base */
h1,
h2,
h3,
h4 {
    font-family: var(--font-tenor);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-premium);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

main {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   HEADER - ESTILIZAÇÃO DESKTOP (Layout & Interações Premium)
   ========================================================================== */

/* Container Principal da Header */
.header-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(11, 14, 20, 0.75);
    /* Fundo fumê baseado no --color-bg */
    backdrop-filter: blur(15px);
    /* Efeito Glassmorphism de alto nível */
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s ease,
        backdrop-filter 0.4s ease;
}

.header-main.scrolled {
    height: 70px;
    background: rgba(11, 14, 20, 0.4);
}

.header-main.scrolled .header-border-gradient {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.header-border-gradient {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(34, 255, 146, 0) 0%,
            rgba(34, 255, 146, 1) 50%,
            rgba(34, 255, 146, 0) 100%);
    box-shadow: 0 1px 10px rgba(34, 255, 146, 0.4);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-main.scrolled .header-logo-link {
    height: 28px;
}

/* Alinhamento Interno dos Elementos */
.header-container {
    max-width: var(--container-max);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 1. LOGOTIPO */
.header-logo-link {
    display: inline-block;
    height: calc(var(--header-height) * 0.45);
    /* Proporção elegante dentro dos 150px/120px */
    transition: var(--transition-premium);
}

.header-logo-img {
    height: 100%;
    width: auto;
    display: block;
    /* TRANSFORMA O PRETO EM BRANCO:
       invert(1): joga o preto para o branco absoluto
       brightness(0.96): ajusta a intensidade para casar com o seu --color-white (#F5F5F5) */
    filter: invert(1) brightness(0.96);
    transition: var(--transition-premium);
}

/* OuterGlow Plasmático no Hover mantendo o logo branco */
.header-logo-link:hover .header-logo-img {
    filter: invert(1) brightness(0.96) drop-shadow(0 0 12px var(--color-green-vital)) drop-shadow(0 0 25px rgba(34, 255, 146, 0.4));
}

/* 2. MENU DE NAVEGAÇÃO */
.header-menu-list {
    display: flex;
    gap: 32px;
    /* Espaçamento cirúrgico entre os links */
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-menu-item {
    position: relative;
}

.header-menu-link {
    font-family: var(--font-mont);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: var(--color-white);
    text-decoration: none;
    padding: 10px 0;
    display: inline-block;
    transition: var(--transition-premium);
}

/* Mudança de cor no Hover do link */
.header-menu-link:hover {
    color: var(--color-green-vital);
}

/* Criação da linha inferior via Pseudo-elemento */
.header-menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-green-vital);
    box-shadow: 0 0 8px var(--color-green-vital);
    transition: var(--transition-premium);
}

/* Linha expandindo para a direita no Hover */
.header-menu-link:hover::after {
    width: 100%;
}

/* Estado Ativo (Sinalizador inicialmente na HOME) */
.header-menu-link.active {
    color: var(--color-green-vital);
}

.header-menu-link.active::after {
    width: 100%;
}

/* 3. SELETOR DE IDIOMAS (Acessibilidade Visual) */
.header-languages {
    display: flex;
    gap: 16px;
    align-items: center;
}

.header-lang-btn {
    display: block;
    width: 28px;
    /* Tamanho ideal para leitura das bandeiras */
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    /* Garante que a bandeira fique perfeitamente redonda */
    box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.1);
    transition: var(--transition-premium);
}

.header-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    /* Começam P&B */
    opacity: 0.6;
    transition: var(--transition-premium);
}

/* Estado Ativo da Língua Selecionada (Colorida por padrão) */
.header-lang-btn.active .header-flag-img,
.header-lang-btn:hover .header-flag-img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Efeito de subir de leve (Hover Premium) */
.header-lang-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(34, 255, 146, 0.3),
        0 0 0 1.5px var(--color-green-vital);
}

/* Esconder botão Burger no Desktop */
.header-burger-btn {
    display: none;
}




/* ==========================================================================
   HERO SECTION - CONFIGURAÇÃO GERAL E FUNDO
   ========================================================================== */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg);
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Camada 1: Gradiente de Fundo Escuro */
.hero-bg-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle at center, #232526 0%, #0B0E14 70%);
}

/* Camada 2: Luz Verde Esfumaçada (Photoshop Soft Brush) */
.hero-bg-green-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 15% 30%, rgba(34, 255, 146, 0.35) 0%, rgba(0, 0, 0, 0) 55%);
    /*mix-blend-mode: lighten;*/
    opacity: 0.3;
}

/* Camada 3: Vídeo de Partículas Overlay */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.hero-bg-base,
.hero-bg-green-glow,
.hero-video-wrapper {
    height: 100%;
    min-height: 100vh;
}

.hero-particles-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* mix-blend-mode: overlay; */
    opacity: 0.15;
}

/* Seta de Scroll Inferior */
.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: heroArrowBounce 2s ease-in-out infinite;
}

.hero-scroll-indicator svg {
    width: 28px;
    height: auto;
    display: block;
}

@keyframes heroArrowBounce {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -8px);
    }
}

.hero-pin-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;

    z-index: 10;

    inset: 0;

    visibility: hidden;
}

/* CENA 1 */
/*
.hero-container-cena-1 {
    width: 100%;
    max-width: var(--container-max);
    min-height: 100vh;
    margin: 0 auto;
    padding: 120px 40px 0 40px;
    z-index: 10;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
    */

.hero-cena-1-left {
    width: 60%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-cena-1-h1 {
    font-family: var(--font-tenor);
    font-size: 4rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    /* ← era 0.05em do global, aumenta um pouco */
}

.verde {
    color: var(--color-green-vital);
}

.hero-cena-1-sub {
    max-width: 600px;
    font-family: var(--font-mont);
    font-weight: 400;
    font-size: 1.4rem;
    margin-top: 30px;
    padding-left: 20px;

    position: relative;
}

.hero-cena-1-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--color-green-vital);
    box-shadow: 0 0 8px var(--color-green-vital),
        0 0 20px rgba(34, 255, 146, 0.5);
}

.hero-cena-btn-container {
    display: flex;
    gap: 30px;
    margin-top: 60px;
}

.btn-1 {
    background: var(--color-green-vital);
    padding: 15px 35px;
    font-family: var(--font-mont);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-bg);
    border-radius: 3px;
    text-align: center;

    /* Glow constante */
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px var(--color-green-vital);

    /* Transição apenas para a posição e brilho */
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-1:hover {
    /* Eleva sem mudar o tamanho */
    transform: translateY(-5px);

    /* Aumenta a intensidade do glow ao subir */
    box-shadow: 0 0 25px var(--color-green-vital);

    /* Brilho leve para destacar */
    filter: brightness(1.1);
}

.btn-2 {
    padding: 15px 35px;
    font-family: var(--font-mont);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    border-radius: 3px;
    border: solid 1px var(--color-white);
    text-align: center;
    background: transparent;
    /* Garante que comece transparente */

    /* Configurações de interação */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-2:hover {
    /* Eleva o botão */
    transform: translateY(-5px);

    /* Preenche o fundo com a cor da borda */
    background: var(--color-white);

    /* Muda a cor do texto para preto */
    color: var(--color-bg);
}


.hero-cena-1-right {
    width: 40%;
    height: auto;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    max-width: 100%;
    /* ← e isso */
}

.hero-cena-1-img {
    width: 100%;
    height: auto;
    max-width: 731px;
}

.hero-cena-1-txt-vertical {
    font-family: var(--font-tenor);
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;

    writing-mode: vertical-rl;
    /* Gira o texto para que a base da letra fique voltada para a esquerda */
    transform: rotate(180deg);
    /* Garante que o texto não quebre linha */
    white-space: nowrap;

    overflow: hidden;
    display: inline-block;
    position: relative;

    max-height: 100vh;
    /* ← adiciona isso */
}

/* CENA 2 */
/*
.hero-container-cena-2 {
    width: 100%;
    max-width: var(--container-max);
    min-height: 100vh;
    margin: 0 auto;
    padding: 120px 40px 0 40px;
    z-index: 10;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
    */

.cena-2-box {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.cena-2-box-img-title {
    width: 100%;
    text-align: center;
}

.cena-2-box-img {
    margin-bottom: 30px;
}

.cena-2-box-h2 {
    line-height: 1.1;
    letter-spacing: 0.15em;
}

.cena-2-box-txt-link {
    height: auto;
}

.cena-2-box-p {
    font-family: var(--font-mont);
    font-size: 1.1rem;
    color: var(--color-white);
    padding-left: 20px;

    position: relative;
}

.cena-2-box-p::before {
    content: '';
    width: 3px;
    height: 100%;
    background: var(--color-green-vital);
    box-shadow: 0 0 8px var(--color-green-vital),
        0 0 20px rgba(34, 255, 146, 0.5);
    position: absolute;
    left: 0;
    top: 0;
}

.cena-2-box-link {
    display: inline-block;
    color: var(--color-green-vital);
    font-family: var(--font-mont);
    font-weight: 300;
    font-size: 1.3rem;
    padding-left: 20px;
    margin-top: 20px;

    /* Necessário para o efeito */
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Criamos uma linha discreta que surge */
.cena-2-box-link::after {
    content: ' →';
    /* Adiciona uma seta discreta */
    position: absolute;
    right: -20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.cena-2-box-link:hover {
    color: var(--color-white);
    /* Fica branco no hover */
    letter-spacing: 1px;
    /* Leve expansão para dar impacto */
}

.cena-2-box-link:hover::after {
    right: -30px;
    /* A seta desliza para a direita */
    opacity: 1;
}

/* GSAP - CONTAINERS */
.hero-container-cena-1,
.hero-container-cena-2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max);
    height: 100vh;
    padding: 120px 40px 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.hero-container-cena-2 {
    opacity: 0;
}

/* GSAP - PERFORMANCE */
.hero-cena-1-h1,
.hero-cena-1-sub,
.hero-cena-btn-container,
.hero-cena-1-img,
.hero-cena-1-txt-vertical,
.hero-container-cena-2 {
    transition: none !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* GSAP - MARKERS OCULTOS */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
    visibility: hidden !important;
}


/* SOBRE */
.sobre {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: url(../IMG/SOBRE_BG.webp) center center / auto no-repeat,
        radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.sobre-container {
    width: 100%;
    max-width: 1600px;
    height: auto;
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;

    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* TÍTULO */
.sobre-content-title {
    margin-bottom: 80px;
}

.sobre-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.sobre-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    padding-left: 150px;
}

/* CONTEÚDO */
.sobre-container-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.sobre-content-left {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.content-left-p1 {
    font-family: var(--font-mont);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-white);
    padding-bottom: 40px;
    border-bottom: none;
    position: relative;
}

.content-left-p1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 1px;
    background: var(--color-green-vital);
    animation: lineGlow 3s ease-in-out infinite;
}

@keyframes lineGlow {

    0%,
    100% {
        box-shadow: 0 0 8px var(--color-green-vital),
            0 0 20px rgba(34, 255, 146, 0.5);
        width: 30%;
    }

    50% {
        box-shadow: 0 0 14px var(--color-green-vital),
            0 0 35px rgba(34, 255, 146, 0.7);
        width: 35%;
    }
}

.content-left-p1 strong {
    font-weight: 700;
}

.content-left-p2 {
    font-family: var(--font-mont);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(245, 245, 245, 0.7);
    /* ← era 0.5, aumenta para 0.7 */
}

.content-left-p2 .verde {
    transition: text-shadow 0.4s ease;
}

.content-left-p2 .verde:hover {
    text-shadow: 0 0 12px var(--color-green-vital),
        0 0 30px rgba(34, 255, 146, 0.6);
}

.content-left-p2 strong {
    font-weight: 700;
    color: var(--color-white);
}

.sobre-content-right {
    width: 40%;
    display: flex;
    align-items: center;
    padding: 40px 40px 40px 60px;
    border-left: 2px solid var(--color-green-vital);
    min-height: 200px;
    background: rgba(11, 14, 20, 0.5);
    filter: drop-shadow(-4px 0 12px rgba(34, 255, 146, 0.3));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.5s ease,
        background 0.5s ease;
}

.sobre-content-right:hover {
    transform: translateX(6px);
    background: rgba(11, 14, 20, 0.75);
    filter: drop-shadow(-6px 0 20px rgba(34, 255, 146, 0.5));
}

.content-right-p1 {
    font-family: var(--font-tenor);
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--color-white);
}

/* TERAPIA */
.terapia {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.terapia-container {
    width: 100%;
    max-width: 1600px;
    min-height: 100vh;
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

/* TÍTULO */
.terapia-content-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.terapia-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.terapia-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* SUB */
.terapia-content-sub {
    display: flex;
    justify-content: flex-end;
}

.terapia-sub {
    font-family: var(--font-mont);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-white);
    max-width: 700px;
    text-align: right;
}

/* PILARES */
.terapia-pilares-title {
    font-family: var(--font-tenor);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.terapia-pilares-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.terapia-pilar {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.terapia-pilar-num {
    font-family: var(--font-tenor);
    font-weight: 900;
    font-size: 8rem;
    line-height: 1;
    color: rgba(245, 245, 245, 0.15);
    /* ← era 0.08, aumenta para 0.15 */
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
}

.terapia-pilar-box {
    position: relative;
    z-index: 1;
    background: rgba(11, 14, 20, 0.5);
    border-left: 2px solid var(--color-green-vital);
    box-shadow: -4px 0 12px rgba(34, 255, 146, 0.3),
        -1px 0 25px rgba(34, 255, 146, 0.1);
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
    border-radius: 0 0 60px 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease,
        background 0.5s ease;
}

.terapia-pilar-box:hover {
    transform: translateY(-6px);
    background: rgba(11, 14, 20, 0.75);
    box-shadow: -6px 0 20px rgba(34, 255, 146, 0.5),
        -1px 0 40px rgba(34, 255, 146, 0.2);
}

.terapia-pilar:hover .terapia-pilar-num {
    color: rgba(245, 245, 245, 0.25);
    transition: color 0.5s ease;
}

.terapia-pilar-num {
    transition: color 0.5s ease;
}

.terapia-pilar-h4 {
    font-family: var(--font-mont);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-green-vital);
}

.terapia-pilar-p {
    font-family: var(--font-mont);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-white);
}

/* BENEFICIOS */
.beneficios {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: url(../IMG/BENEFICIOS_BG.webp) center center / cover no-repeat,
        radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.beneficios-container {
    width: 100%;
    max-width: 1600px;
    min-height: 100vh;
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
}

/* TÍTULO */
.beneficios-content-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 60%;
}

.beneficios-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.beneficios-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.beneficios-title-line {
    width: 120px;
    height: 3px;
    background: var(--color-green-vital);
    margin-top: 20px;
    align-self: center;
    animation: lineGlow 3s ease-in-out infinite;
}

/* BOTTOM */
.beneficios-content-bottom {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 55%;
}

.beneficios-lista-label {
    display: flex;
    align-items: center;
    padding-right: 30px;
}

.beneficios-lista-label-txt {
    font-family: var(--font-tenor);
    font-size: 1.2rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    text-align: right;
}

.beneficios-lista-box {
    background: rgba(11, 14, 20, 0.6);
    border-left: 2px solid var(--color-green-vital);
    box-shadow: -4px 0 12px rgba(34, 255, 146, 0.3),
        -1px 0 25px rgba(34, 255, 146, 0.1);
    padding: 30px 40px;
    display: flex;
    align-items: center;
}

.beneficios-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* ← era 20px */
}

.beneficios-lista-item {
    font-family: var(--font-mont);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.4;
    transition: transform 0.3s ease,
        text-shadow 0.3s ease,
        color 0.3s ease;
    cursor: default;
}

.beneficios-lista-item:hover {
    transform: translateX(8px);
    color: var(--color-green-vital);
    text-shadow: 0 0 12px rgba(34, 255, 146, 0.5);
}

/* IMAGEM MODELO */
.beneficios-modelo-img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 95%;
    width: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    transition: filter 0.5s ease;
}

.beneficios:hover .beneficios-modelo-img {
    filter: drop-shadow(0 0 20px rgba(34, 255, 146, 0.3));
}

/* LOJA */
.loja {
    width: 100%;
    height: 100vh;
    /* ← troca min-height por height fixo */
    background: radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.loja::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: radial-gradient(circle at 60% 40%, rgba(34, 255, 146, 0.04) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 0;
    pointer-events: none;
}

.loja-container {
    width: 100%;
    max-width: 1600px;
    height: 100vh;
    /* ← troca min-height por height */
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0;
}

/* LADO ESQUERDO */
.loja-content-left {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

/* TÍTULO */
.loja-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.loja-title {
    font-family: var(--font-tenor);
    font-size: 4.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* DESC */
.loja-content-desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loja-desc-item {
    font-family: var(--font-mont);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-white);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(245, 245, 245, 0.08);
    transition: transform 0.3s ease,
        border-bottom-color 0.3s ease;
    cursor: default;
}

.loja-desc-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.loja-desc-item:hover {
    transform: translateX(6px);
    border-bottom-color: rgba(34, 255, 146, 0.3);
}

/* LADO DIREITO — SLIDER */
.loja-slider-wrapper {
    width: 55%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* TRACK */
.loja-slider-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* SLIDES */
.loja-slide {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.loja-slide-img {
    width: auto;
    object-fit: contain;
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 0 0px transparent);
}

/* Estado: ativo (centro) */
.loja-slide.active {
    z-index: 3;
    transform: translateX(0) scale(1);
}

.loja-slide.active .loja-slide-img {
    height: 65vh;
    filter: drop-shadow(0 0 25px rgba(34, 255, 146, 0.25)) drop-shadow(0 0 50px rgba(34, 255, 146, 0.08));
}

/* Estado: anterior (esquerda) */
.loja-slide.prev {
    z-index: 2;
    transform: translateX(-45%) scale(0.75);
}

.loja-slide.prev .loja-slide-img {
    height: 65vh;
    filter: brightness(0.4) blur(1px);
}

/* Estado: próximo (direita) */
.loja-slide.next {
    z-index: 2;
    transform: translateX(45%) scale(0.75);
}

.loja-slide.next .loja-slide-img {
    height: 65vh;
    filter: brightness(0.4) blur(1px);
}

/* Estado: escondido */
.loja-slide.hidden {
    z-index: 1;
    transform: translateX(0) scale(0.5);
    opacity: 0;
    pointer-events: none;
}

/* SETAS */
.loja-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: 1px solid rgba(245, 245, 245, 0.15);
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 16px 20px;
    line-height: 1;
}

.loja-slider-arrow:hover {
    opacity: 1;
    color: var(--color-green-vital);
    border-color: var(--color-green-vital);
    box-shadow: 0 0 12px rgba(34, 255, 146, 0.3),
        inset 0 0 12px rgba(34, 255, 146, 0.05);
    text-shadow: 0 0 10px var(--color-green-vital);
}

.loja-arrow-prev {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.loja-arrow-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.loja-arrow-next {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.loja-arrow-next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* DOTS */
.loja-slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.loja-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245, 245, 245, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.loja-dot.active {
    background: var(--color-green-vital);
    box-shadow: 0 0 12px var(--color-green-vital),
        0 0 25px rgba(34, 255, 146, 0.5);
    width: 24px;
    border-radius: 4px;
}


/* FORMACAO */
.formacao {
    width: 100%;
    min-height: 100vh;
    background: url(../IMG/FORMACAO_BG.webp) center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.formacao::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 80, 30, 0.55);
    /* ← era 0.4, aumenta para 0.55 */
    z-index: 0;
    pointer-events: none;
}

.formacao-modelo-img {
    position: absolute;
    bottom: 0;
    left: 5%;
    height: 55%;
    width: auto;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.formacao-container {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
}

/* TÍTULO */
.formacao-content-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formacao-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.formacao-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-white);
}

/* CONTEÚDO DIREITO */
.formacao-content-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-left: auto;
    width: 50%;
}

.formacao-content-box {
    background: rgba(0, 0, 0, 0.35);
    padding: 35px 40px;
    border-left: 2px solid var(--color-green-vital);
    box-shadow: -4px 0 12px rgba(34, 255, 146, 0.3),
        -1px 0 25px rgba(34, 255, 146, 0.1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease,
        background 0.5s ease;
}

.formacao-content-box:hover {
    transform: translateX(6px);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: -6px 0 20px rgba(34, 255, 146, 0.5),
        -1px 0 40px rgba(34, 255, 146, 0.2);
}

.formacao-box-p {
    font-family: var(--font-mont);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-white);
}

.formacao-box-p strong {
    font-weight: 700;
    font-style: italic;
}

/* BOTÃO */
.formacao-btn {
    display: inline-block;
    padding: 18px 40px;
    font-family: var(--font-mont);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-green-vital);
    border: none;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 15px var(--color-green-vital);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    align-self: flex-start;
}

.formacao-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--color-green-vital);
    filter: brightness(1.1);
}


/* YOUTUBE */
.youtube {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
    padding: 120px 0;
}

.youtube-container {
    width: 100%;
    max-width: 1600px;
    padding: 0 40px;
    margin: 0 auto;
}

/* TOP */
.youtube-content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.youtube-content-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.youtube-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.youtube-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.youtube-content-right {
    max-width: 420px;
    text-align: right;
}

.youtube-sub {
    font-family: var(--font-mont);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-white);
}

/* CARROSSEL */
.youtube-carrossel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.youtube-carrossel-wrapper::before,
.youtube-carrossel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.youtube-carrossel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.youtube-carrossel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.youtube-carrossel-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: youtubeScroll 20s linear infinite;
}

.youtube-carrossel-track:hover {
    animation-play-state: paused;
}

@keyframes youtubeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.youtube-card {
    width: 380px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    filter: grayscale(100%);
    transition: filter 0.5s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease;
    cursor: pointer;
}

.youtube-card:hover {
    filter: grayscale(0%);
    transform: scaleY(1.05);
    box-shadow: 0 0 30px rgba(34, 255, 146, 0.2);
    z-index: 2;
}

.youtube-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    pointer-events: none;
}

.youtube-card:hover .youtube-iframe {
    pointer-events: auto;
}

/* BOTTOM */
.youtube-content-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.youtube-bottom-txt {
    font-family: var(--font-mont);
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--color-white);
    text-align: center;
    letter-spacing: 1px;
}

.youtube-bottom-txt strong {
    font-weight: 700;
    font-style: normal;
    color: var(--color-green-vital);
    text-shadow: 0 0 10px rgba(34, 255, 146, 0.4);
}

/* CONTATO */
.contato {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle, rgba(53, 53, 55, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
}

.contato::before {
    content: 'FP';
    font-family: var(--font-tenor);
    font-weight: 900;
    font-size: 40rem;
    color: rgba(11, 14, 20, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

.contato-container {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    padding: 120px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

/* TÍTULO */
.contato-content-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.contato-pre-sub {
    font-family: var(--font-mont);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            var(--color-green-vital) 25%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--color-green-vital) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

.contato-title {
    font-family: var(--font-tenor);
    font-size: 5rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

/* INFO */
.contato-content-info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
    width: 100%;
}

.contato-info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 0 60px;
    border-right: 1px solid rgba(245, 245, 245, 0.08);
}

.contato-info-block:last-child {
    border-right: none;
}

.contato-icons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.contato-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: color 0.4s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.4s ease;
}

.contato-icon-link svg {
    width: 56px;
    height: 56px;
    transition: filter 0.4s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contato-icon-link:hover {
    color: var(--color-green-vital);
    transform: translateY(-6px);
    filter: drop-shadow(0 0 12px rgba(34, 255, 146, 0.7));
}

.contato-icon-link:hover svg {
    filter: drop-shadow(0 0 8px rgba(34, 255, 146, 0.5));
}

.contato-info-txt {
    font-family: var(--font-mont);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-white);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 2px;
    transition: color 0.3s ease,
        text-shadow 0.3s ease;
    cursor: default;
}

.contato-info-block:hover .contato-info-txt {
    color: var(--color-green-vital);
    text-shadow: 0 0 12px rgba(34, 255, 146, 0.4);
}

/* BTN */
.contato-content-btn {
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   HEADER - VERSÃO MOBILE & TABLET (Corrigido para max-width: 1024px)
   ========================================================================== */

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

    .header-main {
        height: var(--header-height);
    }

    .header-main.scrolled .header-nav {
    top: 70px;
    height: calc(100vh - 70px);
}

    .header-container {
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 1. REARRANJO DE POSIÇÕES (Logo Esq / Bandeiras Centro / Burger Dir) */
    .header-logo-link {
        order: 1;
        height: 40px;
    }

    .header-languages {
        order: 2;
        gap: 16px;
        /* Mantido o respiro bom para o público mais velho */
    }

    /* Força o botão burger a aparecer abaixo de 1024px */
    .header-burger-btn {
        order: 3;
        display: flex;
    }

    /* 2. MENU RESPONSIVO (Estilo Cortina Glassmorphism Fumê) */
    .header-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: rgba(11, 14, 20, 0.96);
        /* Fumê denso */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        /* Estado inicial: Escondido */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.4s;
        z-index: 999;
    }

    /* Classe que seu Script JS vai injetar no <nav> (.header-nav) para abrir */
    .header-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Alinhamento verticalizado dos links */
    .header-menu-list {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 40px;
        padding-bottom: 80px;
    }

    .header-menu-link {
        font-size: 16px;
        letter-spacing: 2px;
    }

    /* Remove a linha flutuante do desktop no mobile */
    .header-menu-link::after {
        display: none;
    }

    .header-menu-link:hover,
    .header-menu-link.active {
        color: var(--color-green-vital);
        text-shadow: 0 0 10px rgba(34, 255, 146, 0.4);
    }

    /* 3. BOTÃO BURGER (2 linhas que viram X) */
    .header-burger-btn {
        background: none;
        border: none;
        cursor: pointer;
        width: 30px;
        height: 20px;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        z-index: 1001;
    }

    .burger-line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-white);
        /* Preparado para a transição suave do X */
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
            background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Classes que seu Script JS vai injetar no botão (.header-burger-btn) para virar X */
    .header-burger-btn.is-active .line-top {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--color-green-vital);
    }

    .header-burger-btn.is-active .line-bottom {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--color-green-vital);
    }

    .hero-bg-base,
    .hero-bg-green-glow,
    .hero-video-wrapper {
        position: absolute;
        height: 100%;
        min-height: unset;
    }

    /* HERO CENA 1 */
    .hero-cena-1-h1 {
        font-size: 3rem;
    }

    /* CENA 2 */
    .hero-container-cena-1,
    .hero-container-cena-2 {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        height: auto;
        min-height: 100vh;
    }

    .hero-section {
        height: auto !important;
        min-height: unset !important;
        overflow: hidden;
    }

    .hero-pin-wrapper {
        position: relative;
        height: auto !important;
        min-height: unset !important;
    }

    .hero-container-cena-2 {
        opacity: 1 !important;
        pointer-events: auto !important;
        flex-direction: column;
        padding: 120px 40px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        height: auto;
        min-height: unset;
    }

    .cena-2-box {
        opacity: 1 !important;
        transform: none !important;
        width: 100%;
    }

    .cena-2-box-img-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* SOBRE */
    .sobre-title {
        font-size: 3.5rem;
    }

    .sobre-container {
        overflow: hidden;
    }

    .sobre-container-content {
        flex-direction: column;
        gap: 40px;
    }

    .sobre-content-left {
        width: 100%;
    }

    .sobre-content-right {
        width: 100%;
        padding-left: 30px;
        filter: none;
    }

    .content-right.p1 {
        font-size: 1.8rem;
    }

    /* TERAPIA */
    .terapia-title {
        font-size: 3.5rem;
    }

    .terapia-pilar {
        width: 100%;
    }

    .terapia-pilares-container {
        flex-direction: column;
    }

    .terapia-content-sub {
        justify-content: flex-start;
    }

    /* BENEFICIOS */
    .beneficios-title {
        font-size: 3.5rem;
    }

    .beneficios-content-title {
        max-width: 100%;
    }

    .beneficios-content-bottom {
        max-width: 100%;
    }

    .beneficios-modelo-img {
        height: 30%;
        opacity: 0.3;
    }

    /* LOJA */
    .loja {
        height: auto;
        min-height: 100vh;
    }

    .loja-container {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
        padding: 120px 40px;
        gap: 40px;
    }

    .loja-content-left {
        width: 100%;
        padding: 0;
    }

    .loja-slide.active .loja-slide-img {
        height: 45vh;
    }

    .loja-slide.prev .loja-slide-img,
    .loja-slide.next .loja-slide-img {
        height: 45vh;
    }

    .loja-slider-wrapper {
        width: 100%;
        height: 60vh;
    }

    .loja-slider-track {
        height: 60vh;
    }

    .loja-title {
        font-size: 3rem;
    }

    .loja-desc-item {
        padding-left: 40px;
    }

    /* FORMAÇÃO */
    .formacao {
        height: auto;
        min-height: 100vh;
    }

    .formacao-container {
        height: auto;
        min-height: 100vh;
    }

    .formacao-title {
        font-size: 3.5rem;
    }

    .formacao-content-right {
        width: 60%;
    }

    .formacao-modelo-img {
        height: 60%;
        opacity: 0.3;
    }

    /* YOUTUBE */
    .youtube-content-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .youtube-content-right {
        text-align: left;
        max-width: 100%;
    }

    .youtube-title {
        font-size: 3.5rem;
    }

    .youtube-card {
        width: 300px;
    }

    /* CONTATO */
    .contato {
        height: auto;
        min-height: 100vh;
    }

    .contato-container {
        height: auto;
        min-height: 100vh;
    }

    .contato-title {
        font-size: 3.5rem;
    }

    .contato-content-info {
        gap: 60px;
    }
}


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

    /* HERO CENA 1 */
    .hero-cena-1-h1 {
        font-size: 2.3rem;
    }

    .hero-cena-1-sub {
        font-size: 1.1rem;
    }

    .hero-cena-1-img {
        max-width: 731px;
    }

    .hero-cena-1-txt-vertical {
        font-size: 1.9rem;
    }

    /* SOBRE */
    .sobre-title {
        font-size: 2.5rem;
    }

    .content-left-p1 {
        font-size: 1.2rem;
    }

    .content-right.p1 {
        font-size: 1.5rem;
    }

    /* TERAPIA */
    .terapia-title {
        font-size: 2.5rem;
    }

    .terapia-sub {
        font-size: 1.1rem;
    }

    /* BENEFICIOS */
    .beneficios-title {
        font-size: 2.5rem;
    }

    .beneficios-content-bottom {
        flex-direction: column;
        gap: 20px;
    }

    .beneficios-lista-label-txt {
        text-align: left;
    }

    /* LOJA */
    .loja-title {
        font-size: 2.2rem;
    }

    /* FORMAÇÃO */
    .formacao-title {
        font-size: 2.5rem;
    }

    .formacao-content-right {
        width: 100%;
        margin-left: 0;
    }

    .formacao-modelo-img {
        display: none;
    }

    /* YOUTUBE */
    .youtube-title {
        font-size: 2.5rem;
    }

    .youtube-card {
        width: 260px;
    }

    /* CONTATO */
    .contato-title {
        font-size: 2.5rem;
    }

    .contato-content-info {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
}

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

    /* CENA 1 */
    .hero-container-cena-1 {
        padding: 180px 40px 0 40px;
        display: flex;
        flex-direction: column;
    }

    .hero-cena-1-left {
        width: 100%;
        order: 2;
    }

    .hero-cena-1-right {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .hero-cena-btn-container {
        flex-direction: column;
        width: 100%;
    }

    /* SOBRE */
    .sobre-title {
        font-size: 1.8rem;
        padding-left: 0px;
    }

    .sobre::before {
        font-size: 12rem;
        top: 0;
        right: -10%;
    }

    /* TERAPIA */
    .terapia-title {
        font-size: 1.8rem;
    }

    .terapia::before {
        font-size: 25rem;
        bottom: -5%;
        right: -10%;
    }

    /* BENEFICIOS */
    .beneficios-title {
        font-size: 1.8rem;
    }

    .beneficios-lista-item {
        font-size: 0.85rem;
    }

    /* LOJA */
    .loja-title {
        font-size: 1.8rem;
    }

    /* FORMAÇÃO */
    .formacao-title {
        font-size: 1.8rem;
    }

    .formacao-box-p {
        font-size: 1rem;
    }

    /* YOUTUBE */
    .youtube-title {
        font-size: 1.8rem;
    }

    .youtube-bottom-txt {
        padding: 0 40px;
    }

    /* CONTATO */
    .contato-title {
        font-size: 1.8rem;
    }

    .contato-icon-link svg {
        width: 44px;
        height: 44px;
    }

    .contato::before {
        font-size: 20rem;
    }
}

/* ==========================================================================
   HEADER - MICRO-AJUSTES PARA CELULARES (A partir de 480px e 375px)
   ========================================================================== */

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

    /* Reduz o recuo lateral para dar mais espaço interno aos elementos */
    .header-container {
        padding: 0 16px;
    }

    /* 1. Redução proporcional do Logotipo para não esmagar */
    .header-logo-link {
        height: 32px;
        /* Diminui de 40px para 32px, mantendo a leitura perfeita */
    }

    /* 2. Micro-ajuste nas Bandeiras (Essencial para o público mais velho não errar o clique) */
    .header-languages {
        gap: 8px;
        /* Reduz o espaçamento de 16px para 8px, trazendo compactação */
    }

    .header-lang-btn {
        width: 24px;
        /* Reduz sutilmente o diâmetro de 28px para 24px */
        height: 24px;
    }

    /* 3. Ajuste do tamanho do Burger para harmonizar com os novos tamanhos */
    .header-burger-btn {
        width: 26px;
        height: 18px;
    }

    /* Ajuste da física da rotação do X por conta do novo tamanho do botão */
    .header-burger-btn.is-active .line-top {
        transform: translateY(8px) rotate(45deg);
    }

    .header-burger-btn.is-active .line-bottom {
        transform: translateY(-8px) rotate(-45deg);
    }
}

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

    /* CENA 2 */
    .cena-2-box {
        flex-direction: column;
    }

    .cena-2-box-img {
        max-width: 100px;
    }

    .cena-2-box-p {
        font-size: 1rem;
    }
}

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

    /* HERO CENA 1 */
    .hero-cena-1-h1 {
        font-size: 1.5rem;
    }

    /* CENA 2 */
    .cena-2-box-img {
        max-width: 90px;
    }

    .cena-2-box-p {
        font-size: 0.9rem;
    }

    /* SOBRE */
    .sobre-content-right {
        padding: 20px;
    }

    .content-right-p1 {
        font-size: 1.5rem;
        padding: 40px 40px 40px 0px;
    }

    /* TERAPIA */
    .terapia-title {
        font-family: var(--font-tenor);
        font-size: 1.5rem;
    }

    /* LOJA */
    .loja-content-btn .btn-1 {
        width: 100%;
        display: block;
        text-align: center;
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    /* FORMAÇÃO */
    .formacao-title {
        font-size: 1.5rem;
    }

    /* YOUTUBE */
    .youtube-title {
        font-size: 1.5rem;
    }
}