@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {

    --fundo: #080a09;

    --card: #111512;

    --verde: #a3e635;

    --branco: #f5f5f5;

    --cinza: #a2a8a0;

    --borda: #293027;

    --nivel-cor: #a3e635;

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background:

        radial-gradient(ellipse at 85% 75%, #20361455, transparent 45%),

        radial-gradient(ellipse at 10% 15%, #17240f44, transparent 40%),

        var(--fundo);

    color: var(--branco);

    font-family: 'Inter', Arial, sans-serif;

    min-height: 100vh;

    overflow-x: hidden;

    transition: background 0.3s, color 0.3s;

}

a {

    color: inherit;

}

button,

input {

    font: inherit;

}

[hidden] {

    display: none !important;

}

/* CABECALHO */

.topo {

    width: 96%;

    max-width: 1500px;

    min-height: 85px;

    margin: 20px auto 0;

    padding: 15px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: #0b0e0ccc;

    border: 1px solid var(--borda);

    border-radius: 20px;

    box-shadow: 0 5px 30px #00000050;

}

/* LOGO */

.logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    color: var(--verde);

}

.logo-fitzone {

    color: #ffffff;

    flex-shrink: 0;

}

.logo-fitzone svg {

    width: 245px;

    height: auto;

    display: block;

    transition: 0.3s;

}

.logo-fitzone:hover svg {

    transform: scale(1.04);

    filter: drop-shadow(0 0 10px #a3e63555);

}

/* MENU PRINCIPAL */

.menu {

    display: flex;

    align-items: center;

    gap: 40px;

}

.menu a {

    color: #e4e4e4;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    transition: 0.3s;

    position: relative;

}

.menu a:hover {

    color: var(--verde);

}

.menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 2px;

    background: var(--verde);

    transition: 0.3s;

}

.menu a:hover::after {

    width: 100%;

}

/* PERFIL */

.btn-perfil {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 18px;

    border: 1px solid #394434;

    border-radius: 30px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;

}

.btn-perfil svg {

    width: 24px;

    height: 24px;

    color: var(--verde);

}

.btn-perfil:hover {

    border-color: var(--verde);

    background: #a3e63510;

    color: var(--verde);

}

/* BOTOES */

.btn {

    display: inline-block;

    padding: 16px 28px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    text-align: center;

    transition: 0.3s;

    border: none;

    cursor: pointer;

}

.btn-verde {

    background: linear-gradient(120deg, #a3e635, #80c51e);

    color: #111a09;

    box-shadow: 0 0 25px #a3e63530;

}

.btn-verde:hover {

    transform: translateY(-4px);

    box-shadow: 0 0 35px #a3e63565;

}

.btn-borda {

    background: transparent;

    color: white;

    border: 1px solid #58664d;

}

.btn-borda:hover {

    color: var(--verde);

    border-color: var(--verde);

    background: #a3e63510;

}

/* BOTAO CLARO E ESCURO */

.modo-dark {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 70px;

    padding: 5px 0;

    color: var(--cinza);

    font-size: 13px;

    letter-spacing: 2px;

    background: transparent;

    border: none;

    cursor: pointer;

}

.chave-dark {

    display: block;

    width: 43px;

    height: 23px;

    border-radius: 30px;

    background: #a3e635;

    box-shadow: 0 0 15px #a3e63555;

    position: relative;

    transition: 0.3s;

}

.chave-dark::after {

    content: "";

    position: absolute;

    width: 17px;

    height: 17px;

    top: 3px;

    right: 3px;

    background: #15210c;

    border-radius: 50%;

    transition: 0.3s;

}

.modo-dark:hover .chave-dark {

    box-shadow: 0 0 20px #a3e63590;

}

.modo-dark:focus-visible {

    outline: 2px solid var(--verde);

    outline-offset: 6px;

    border-radius: 5px;

}

/* BARRA DE ACOES */

.barra-acoes {

    width: 94%;

    max-width: 1460px;

    margin: 12px auto 0;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    position: relative;

    z-index: 5;

}

.atalho-treinos {

    display: flex;

    align-items: center;

    padding: 14px 20px;

    color: white;

    background: #121a13;

    border: 1px solid #32402a;

    border-radius: 13px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;

}

.atalho-treinos:hover {

    color: var(--verde);

    border-color: var(--verde);

    transform: translateY(-3px);

}

/* MENU RAPIDO */

.menu-rapido-wrap {

    position: relative;

}

.btn-menu-rapido {

    width: 58px;

    height: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background: #121a13;

    border: 1px solid #34412b;

    border-radius: 13px;

    cursor: pointer;

    transition: 0.3s;

}

.btn-menu-rapido span {

    width: 27px;

    height: 3px;

    background: var(--verde);

    border-radius: 10px;

}

.btn-menu-rapido:hover {

    border-color: var(--verde);

    background: #1b2618;

}

.menu-rapido {

    position: absolute;

    top: 60px;

    right: 0;

    width: 260px;

    padding: 10px;

    background: #111711;

    border: 1px solid #37432c;

    border-radius: 15px;

    box-shadow: 0 18px 50px #000000aa;

    z-index: 20;

}

.menu-rapido a {

    display: block;

    padding: 15px 12px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    border-radius: 9px;

    transition: 0.3s;

}

.menu-rapido a:hover {

    background: #24341d;

    color: var(--verde);

}

/* PAGINA INICIAL */

.principal {

    width: 90%;

    max-width: 1350px;

    min-height: 610px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    align-items: center;

    gap: 65px;

}

.hero {

    padding: 20px 0 40px;

}

.frase-menor {

    display: inline-block;

    color: var(--verde);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 30px;

}

.hero h1 {

    font-size: clamp(48px, 5.5vw, 88px);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -3px;

    margin-bottom: 43px;

}

.hero h1 span {

    color: var(--verde);

}

.botoes {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}

/* GRAFICO DA PAGINA INICIAL */

.lado-direito {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.lado-direito::before {

    content: "";

    position: absolute;

    width: min(660px, 130%);

    height: 510px;

    max-width: none;

    background: radial-gradient(ellipse, rgba(147, 235, 42, 0.50) 0%, rgba(94, 195, 27, 0.24) 42%, transparent 74%);

    filter: blur(34px);

    pointer-events: none;

    border-radius: 50%;

}

.card-evolucao {

    width: 100%;

    max-width: 470px;

    min-height: 350px;

    padding: 30px;

    position: relative;

    background: linear-gradient(145deg, rgba(18, 41, 19, 0.94), rgba(8, 19, 12, 0.94) 63%, rgba(12, 32, 15, 0.93));

    border: 1px solid rgba(163, 230, 53, 0.42);

    border-radius: 24px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.54), 0 0 38px rgba(142, 231, 45, 0.16);

    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);

    transition: 0.3s;

}

.card-evolucao:hover {

    transform: translateY(-5px);

    border-color: var(--verde);

}

.card-evolucao h3 {

    font-size: 17px;

    font-weight: 500;

    color: #d7dfd3;

}

.numero {

    margin-top: 24px;

    font-size: 55px;

    font-weight: 900;

    color: var(--verde);

    text-shadow: 0 0 30px #a3e63540;

}

.grafico-fake {

    height: 150px;

    margin-top: 25px;

    position: relative;

    overflow: hidden;

    background: repeating-linear-gradient(

        to bottom,

        transparent 0,

        transparent 36px,

        #ffffff10 37px,

        transparent 38px

    );

}

.grafico-fake::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        #a3e63550,

        #a3e63505

    );

    clip-path: polygon(

        0 76%, 14% 69%, 25% 73%,

        37% 47%, 48% 50%, 58% 36%,

        67% 45%, 79% 23%, 90% 21%,

        100% 7%, 100% 100%, 0 100%

    );

}

.linha {

    position: absolute;

    inset: 0;

    background: var(--verde);

    clip-path: polygon(

        0 75%, 14% 68%, 25% 72%,

        37% 46%, 48% 49%, 58% 35%,

        67% 44%, 79% 22%, 90% 20%,

        100% 6%, 100% 9%, 90% 23%,

        79% 25%, 67% 47%, 58% 38%,

        48% 52%, 37% 49%, 25% 75%,

        14% 71%, 0 78%

    );

}

.card-rodape {

    color: var(--verde);

    font-size: 13px;

    font-weight: 600;

    margin-top: 20px;

}

/* RODAPE */

.rodape-site {

    width: 90%;

    max-width: 1350px;

    margin: 25px auto 50px;

    padding-top: 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    border-top: 1px solid var(--borda);

}

.rodape-site h2 {

    color: var(--verde);

    font-size: 16px;

    margin-bottom: 10px;

}

.rodape-site p {

    color: var(--cinza);

    font-size: 14px;

    line-height: 1.7;

}

/* PAGINAS INTERNAS */

.pagina-interna {

    width: 90%;

    max-width: 1200px;

    margin: 50px auto 70px;

}

.pagina-voltar {

    color: var(--verde);

    text-decoration: none;

    font-size: 14px;

}

.pagina-interna h1 {

    font-size: clamp(35px, 5vw, 55px);

    margin: 18px 0 14px;

}

.pagina-interna h1 em {

    color: var(--verde);

    font-style: normal;

}

.intro-pagina {

    color: var(--cinza);

    line-height: 1.7;

}

.cartoes-pagina {

    display: grid;

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

    gap: 18px;

    margin-top: 35px;

}

.cartao-pagina {

    min-height: 190px;

    padding: 25px;

    background: #111711;

    border: 1px solid var(--borda);

    border-radius: 20px;

}

.simbolo {

    font-size: 30px;

}

.cartao-pagina h2 {

    margin: 20px 0 10px;

    font-size: 19px;

}

.cartao-pagina p {

    color: var(--cinza);

    font-size: 14px;

    line-height: 1.6;

}

.aviso-pagina {

    margin-top: 30px;

    color: var(--cinza);

    line-height: 1.6;

}

/* PERFIL */

.layout-perfil {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-top: 35px;

}

.painel-perfil {

    padding: 30px;

    background: var(--card);

    border: 1px solid #34442a;

    border-radius: 22px;

}

.painel-perfil h2 {

    margin-bottom: 15px;

}

.painel-perfil p {

    color: var(--cinza);

    line-height: 1.6;

    font-size: 14px;

}

.avatar-grande {

    width: 105px;

    height: 105px;

    margin: 25px 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border: 1px solid var(--verde);

    background: #1b271a;

    color: var(--verde);

}

.avatar-grande svg {

    width: 65px;

    height: 65px;

}

.campo {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 20px 0;

}

.campo label {

    font-size: 14px;

}

.campo input {

    width: 100%;

    padding: 14px;

    border: 1px solid #48553d;

    border-radius: 11px;

    background: #090e0a;

    color: white;

}

.formulario-demo .btn {

    width: 100%;

}

.aviso-formulario {

    margin-top: 15px;

}

/* PAGINA DE TREINOS */

.pagina-treinos {

    position: relative;

    --nivel-cor: #a3e635;

}

.pagina-treinos::before,

.pagina-treinos::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    z-index: -1;

    pointer-events: none;

}

.pagina-treinos::before {

    width: 240px;

    height: 240px;

    top: 260px;

    left: -60px;

    background: color-mix(

        in srgb,

        var(--nivel-cor) 22%,

        transparent

    );

}

.pagina-treinos::after {

    width: 280px;

    height: 280px;

    right: -70px;

    bottom: 40px;

    background: color-mix(

        in srgb,

        var(--nivel-cor) 15%,

        transparent

    );

}

.cabecalho-pagina {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 22px;

    flex-wrap: wrap;

    margin-bottom: 28px;

}

.acoes-pagina {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}

/* INTERRUPTOR NO TOPO DOS TREINOS */

.acoes-pagina .modo-dark {

    margin-top: 0;

}

.btn-novo-treino {

    border-color: var(--nivel-cor);

    color: var(--nivel-cor);

}

.btn-novo-treino:hover {

    background: color-mix(

        in srgb,

        var(--nivel-cor) 12%,

        transparent

    );

    border-color: var(--nivel-cor);

    color: var(--nivel-cor);

}

/* CARDS */

.grid-topo-treinos {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 20px;

    margin-bottom: 20px;

}

.painel-card {

    padding: 24px;

    background: linear-gradient(145deg, #141915, #0f1310);

    border: 1px solid var(--borda);

    border-radius: 22px;

    box-shadow: 0 16px 45px #00000035;

}

.painel-decorado {

    position: relative;

    overflow: hidden;

}

.painel-decorado::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -30px;

    bottom: -40px;

    background: color-mix(

        in srgb,

        var(--nivel-cor) 18%,

        transparent

    );

    filter: blur(45px);

    border-radius: 50%;

    pointer-events: none;

}

.titulo-linha {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 12px;

}

.painel-card h2 {

    font-size: 22px;

    margin: 0;

}

.texto-card,

.texto-menor {

    color: var(--cinza);

    line-height: 1.6;

}

.texto-menor {

    font-size: 13px;

}

/* DESTAQUES DO NIVEL */

.selo-nivel,

.tag-destaque {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    background: color-mix(

        in srgb,

        var(--nivel-cor) 18%,

        transparent

    );

    color: var(--nivel-cor);

    border: 1px solid color-mix(

        in srgb,

        var(--nivel-cor) 45%,

        transparent

    );

}

/* SELECAO DE DIFICULDADE */

.lista-niveis,

.lista-grupos {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 18px;

}

.nivel-btn,

.grupo-btn {

    padding: 13px 16px;

    border-radius: 14px;

    border: 1px solid #354136;

    background: #0e130f;

    color: #e7e7e7;

    cursor: pointer;

    transition: 0.3s;

    font-weight: 600;

}

.nivel-btn:hover,

.grupo-btn:hover {

    transform: translateY(-2px);

    border-color: var(--nivel-cor);

    color: var(--nivel-cor);

}

.nivel-btn.ativo,

.grupo-btn.ativo {

    background: color-mix(

        in srgb,

        var(--nivel-cor) 18%,

        transparent

    );

    color: var(--nivel-cor);

    border-color: var(--nivel-cor);

    box-shadow: 0 0 0 1px color-mix(

        in srgb,

        var(--nivel-cor) 18%,

        transparent

    );

}

.decoracao-academia {

    display: flex;

    gap: 18px;

    margin-top: 20px;

    font-size: 28px;

    opacity: 0.85;

}

.painel-grupos {

    margin-bottom: 22px;

}

/* LISTA DE EXERCICIOS */

.layout-treinos {

    display: grid;

    grid-template-columns: 1.4fr 0.95fr;

    gap: 20px;

    align-items: start;

}

.coluna-principal-treino,

.coluna-resumo-treino {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.lista-exercicios {

    list-style: none;

    margin-top: 12px;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.item-exercicio {

    padding: 18px;

    border-radius: 18px;

    border: 1px solid #2d352f;

    background: #0d120e;

    transition: 0.3s;

}

.item-exercicio:hover {

    border-color: color-mix(

        in srgb,

        var(--nivel-cor) 45%,

        transparent

    );

    transform: translateY(-2px);

}

.item-exercicio.concluido {

    border-color: var(--nivel-cor);

    background: color-mix(

        in srgb,

        var(--nivel-cor) 10%,

        transparent

    );

}

.cabecalho-exercicio {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}

.check-exercicio {

    width: 21px;

    height: 21px;

    accent-color: var(--nivel-cor);

    margin-top: 2px;

    cursor: pointer;

}

.conteudo-exercicio {

    flex: 1;

}

.conteudo-exercicio strong {

    display: block;

    font-size: 16px;

    margin-bottom: 6px;

}

.conteudo-exercicio p {

    color: var(--cinza);

    line-height: 1.5;

    font-size: 14px;

}

.badge-exercicio {

    display: inline-block;

    margin-top: 10px;

    padding: 8px 12px;

    border-radius: 999px;

    background: #161d17;

    color: var(--nivel-cor);

    font-size: 12px;

    font-weight: 700;

    border: 1px solid #313b33;

}

/* ADICIONAR EXERCICIO */

.form-exercicio {

    margin-top: 8px;

}

.linha-campos {

    display: grid;

    grid-template-columns: 160px 1fr;

    gap: 14px;

}

.form-exercicio .btn {

    margin-top: 8px;

    width: 100%;

}

/* RESUMO */

.cards-resumo {

    display: grid;

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

    gap: 14px;

    margin-top: 16px;

}

.mini-resumo,

.indicador-item {

    padding: 16px;

    background: #0d120e;

    border: 1px solid #2d352f;

    border-radius: 16px;

}

.mini-resumo span,

.indicador-item span {

    display: block;

    font-size: 13px;

    color: var(--cinza);

    margin-bottom: 8px;

}

.mini-resumo strong,

.indicador-item strong {

    font-size: 18px;

}

/* BARRA DE PROGRESSO */

.barra-progresso {

    width: 100%;

    height: 15px;

    border-radius: 999px;

    background: #0d120e;

    border: 1px solid #2d352f;

    overflow: hidden;

    margin-top: 14px;

}

.barra-progresso span {

    display: block;

    height: 100%;

    width: 0%;

    background: linear-gradient(

        90deg,

        var(--nivel-cor),

        color-mix(

            in srgb,

            var(--nivel-cor) 60%,

            white

        )

    );

    border-radius: 999px;

    transition: width 0.3s;

}

.linha-resumo-progresso {

    margin-top: 14px;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.linha-resumo-progresso strong {

    color: var(--nivel-cor);

    font-size: 22px;

}

.indicadores {

    margin-top: 16px;

    display: grid;

    gap: 12px;

}

/* CORES DOS NIVEIS */

/* INICIANTE - VERDE */

.pagina-treinos.nivel-iniciante {

    --nivel-cor: #a3e635;

}

/* INTERMEDIARIO - LARANJA */

.pagina-treinos.nivel-intermediario {

    --nivel-cor: #ff9a3d;

}

/* AVANCADO - VERMELHO */

.pagina-treinos.nivel-avancado {

    --nivel-cor: #ff4d5f;

}

/* EFEITO DE BRILHO DOS NIVEIS */

.pagina-treinos.nivel-iniciante .painel-grupos {

    box-shadow: 0 0 25px #a3e63510;

}

.pagina-treinos.nivel-intermediario .painel-grupos {

    box-shadow: 0 0 25px #ff9a3d15;

}

.pagina-treinos.nivel-avancado .painel-grupos {

    box-shadow: 0 0 25px #ff4d5f15;

}

/* TEMA CLARO */

body.tema-claro {

    --fundo: #f4f6f2;

    --card: #ffffff;

    --verde: #528f15;

    --branco: #1c271a;

    --cinza: #657060;

    --borda: #d7ded2;

    background:

        radial-gradient(

            ellipse at 85% 75%,

            #dcebcf,

            transparent 45%

        ),

        radial-gradient(

            ellipse at 10% 15%,

            #e8f2df,

            transparent 40%

        ),

        var(--fundo);

    color: var(--branco);

}

/* VERDE MAIS ESCURO NO TEMA CLARO */

body.tema-claro .pagina-treinos.nivel-iniciante {

    --nivel-cor: #528f15;

}

/* CABECALHO CLARO */

body.tema-claro .topo {

    background: #ffffff;

    border-color: #d7ded2;

    box-shadow: 0 5px 25px #0000000b;

}

body.tema-claro .menu a {

    color: #273226;

}

body.tema-claro .menu a:hover {

    color: var(--verde);

}

/* LOGO NO TEMA CLARO */

body.tema-claro .logo-fitzone {

    color: #161b15;

}

body.tema-claro .logo-fitzone svg [fill="#ffffff"] {

    fill: #161b15;

}

body.tema-claro .logo-fitzone svg [stroke="#eeeeee"],

body.tema-claro .logo-fitzone svg [stroke="#ffffff"] {

    stroke: #161b15;

}

/* PERFIL CLARO */

body.tema-claro .btn-perfil {

    color: #263324;

    background: #ffffff;

    border-color: #c8d4c0;

}

body.tema-claro .btn-perfil:hover {

    color: var(--verde);

    background: #edf5e7;

}

/* BOTAO DE TREINOS CLARO */

body.tema-claro .atalho-treinos {

    background: #ffffff;

    color: #273226;

    border-color: #cbd7c3;

}

body.tema-claro .atalho-treinos:hover {

    color: var(--verde);

    background: #edf5e7;

}

/* MENU RAPIDO CLARO */

body.tema-claro .btn-menu-rapido {

    background: #ffffff;

    border-color: #cbd7c3;

}

body.tema-claro .btn-menu-rapido:hover {

    background: #edf5e7;

    border-color: var(--verde);

}

body.tema-claro .menu-rapido {

    background: #ffffff;

    border-color: #d0dac8;

    box-shadow: 0 15px 40px #00000018;

}

body.tema-claro .menu-rapido a {

    color: #263324;

}

body.tema-claro .menu-rapido a:hover {

    background: #e8f2df;

    color: var(--verde);

}

/* TEXTOS E BOTOES CLAROS */

body.tema-claro .hero h1 {

    color: #182317;

}

body.tema-claro .btn-borda {

    color: #263324;

    border-color: #aebda5;

}

body.tema-claro .btn-borda:hover {

    color: var(--verde);

    background: #e8f2df;

}

body.tema-claro .btn-verde {

    background: linear-gradient(120deg, #a3e635, #80c51e);

    color: #111a09;

}

/* INTERRUPTOR CLARO */

body.tema-claro .chave-dark {

    background: #d5ded0;

    box-shadow: none;

}

body.tema-claro .chave-dark::after {

    right: auto;

    left: 3px;

    background: #528f15;

}

/* GRAFICO CLARO */

body.tema-claro .lado-direito::before {

    background: radial-gradient(ellipse, rgba(120, 190, 50, 0.32), rgba(120, 190, 50, 0.10) 49%, transparent 72%);

}

body.tema-claro .card-evolucao {

    background: linear-gradient(

        145deg,

        #ffffff,

        #f0f5eb

    );

    border-color: #d2dec9;

    box-shadow: 0 15px 40px #00000012;

}

body.tema-claro .card-evolucao h3 {

    color: #354432;

}

body.tema-claro .grafico-fake {

    background: repeating-linear-gradient(

        to bottom,

        transparent 0,

        transparent 36px,

        #8c9c8025 37px,

        transparent 38px

    );

}

body.tema-claro .grafico-fake::before {

    background: linear-gradient(

        to bottom,

        #528f1540,

        #528f1505

    );

}

/* CARDS CLAROS */

body.tema-claro .cartao-pagina,

body.tema-claro .painel-perfil,

body.tema-claro .painel-card,

body.tema-claro .mini-resumo,

body.tema-claro .indicador-item,

body.tema-claro .item-exercicio,

body.tema-claro .barra-progresso {

    background: #ffffff;

    color: #1b2819;

    border-color: #d5dfcf;

}

body.tema-claro .item-exercicio.concluido {

    background: color-mix(

        in srgb,

        var(--nivel-cor) 10%,

        white

    );

    border-color: var(--nivel-cor);

}

body.tema-claro .texto-card,

body.tema-claro .texto-menor,

body.tema-claro .conteudo-exercicio p,

body.tema-claro .intro-pagina,

body.tema-claro .rodape-site p,

body.tema-claro .cartao-pagina p,

body.tema-claro .painel-perfil p {

    color: #657060;

}

body.tema-claro .nivel-btn,

body.tema-claro .grupo-btn {

    background: #f8faf6;

    color: #263324;

    border-color: #d1dec9;

}

body.tema-claro .nivel-btn.ativo,

body.tema-claro .grupo-btn.ativo {

    background: color-mix(

        in srgb,

        var(--nivel-cor) 12%,

        white

    );

    color: var(--nivel-cor);

    border-color: var(--nivel-cor);

}

body.tema-claro .badge-exercicio {

    background: #eef3ea;

    border-color: #d3dfcc;

}

body.tema-claro .campo input {

    background: #f7f9f5;

    color: #1b2819;

    border-color: #bbcbb0;

}

body.tema-claro .campo input::placeholder {

    color: #788474;

}

body.tema-claro .rodape-site {

    border-color: var(--borda);

}

/* RESPONSIVIDADE */

@media (max-width: 1100px) {

    .layout-treinos {

        grid-template-columns: 1fr;

    }

    .grid-topo-treinos {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 950px) {

    .topo {

        flex-wrap: wrap;

        padding: 18px 22px;

    }

    .menu {

        order: 3;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 23px;

    }

    .principal {

        grid-template-columns: 1fr;

        gap: 25px;

        text-align: center;

    }

    .hero {

        padding: 50px 0 0;

    }

    .botoes {

        justify-content: center;

    }

    .hero .modo-dark {

        justify-content: center;

    }

    .lado-direito {

        margin-bottom: 50px;

    }

    .layout-perfil {

        grid-template-columns: 1fr;

    }

    .linha-campos {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 540px) {

    .topo {

        width: 95%;

        gap: 15px;

    }

    .logo-fitzone svg {

        width: 190px;

    }

    .menu {

        gap: 15px;

    }

    .menu a {

        font-size: 12px;

    }

    .btn-perfil {

        padding: 10px;

        font-size: 12px;

    }

    .barra-acoes {

        width: 92%;

    }

    .atalho-treinos {

        font-size: 12px;

        padding: 13px 10px;

    }

    .principal {

        width: 92%;

    }

    .hero h1 {

        font-size: 43px;

        letter-spacing: -2px;

    }

    .frase-menor {

        font-size: 11px;

        letter-spacing: 2px;

    }

    .btn {

        padding: 15px 20px;

        font-size: 13px;

    }

    .card-evolucao {

        padding: 22px;

    }

    .cartoes-pagina,

    .rodape-site,

    .cards-resumo {

        grid-template-columns: 1fr;

    }

    .cabecalho-pagina {

        flex-direction: column;

    }

    .acoes-pagina {

        width: 100%;

        justify-content: space-between;

    }

}

/* FITZONE: brilho adaptável do card de evolução na home. */

@media (max-width: 700px) {

    .destaque-animado .lado-direito::before { width: 110%; height: 360px; filter: blur(27px); }

}