/* =====================================================================
   TRYFIT — ESTILOS
   Todo o visual e todas as animações são feitos aqui, em CSS puro.
   Sem Tailwind, sem GSAP, sem Lenis — nenhuma biblioteca.
   ===================================================================== */

/* ============ TOKENS (cores e fontes do projeto) ============ */
:root {
    --white: #FFFFFF;
    --ink: #4B4B4D;          /* texto principal */
    --wood: #8E5A35;
    --wood-light: #96632B;
    --accent: #21B354;       /* verde da marca */
    --surface: #F5F2ED;      /* bege claro */         /* painel escuro */
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Outfit', 'Segoe UI', Arial, sans-serif;
    --nav-h: 88px;
    --ease-out: cubic-bezier(.19, 1, .22, 1);
}

/* ============ RESET BÁSICO ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    background-color: var(--white);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--accent); color: #fff; }

.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }

/* ============ EYEBROW HEADLINES (palavras-chave acima dos títulos) ============ */
.eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow--wood { color: var(--wood-light); }
.eyebrow--wide { letter-spacing: .35em; }
.eyebrow--xwide { letter-spacing: .5em; }

/* ============ CURSOR PREMIUM (só em desktop com mouse) ============ */
.cursor-dot, .cursor-outline { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    body.has-cursor { cursor: none; }
    body.has-cursor a, body.has-cursor button { cursor: none; }

    body.has-cursor .cursor-dot {
        display: block;
        position: fixed; top: 0; left: 0;
        width: 12px; height: 12px;
        border-radius: 50%;
        background-color: var(--accent);
        pointer-events: none; z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width .3s cubic-bezier(.25,1,.5,1), height .3s cubic-bezier(.25,1,.5,1), background-color .3s ease;
    }
    body.has-cursor .cursor-outline {
        display: block;
        position: fixed; top: 0; left: 0;
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(22, 101, 52, .5);
        pointer-events: none; z-index: 9998;
        transform: translate(-50%, -50%);
        transition: width .3s cubic-bezier(.25,1,.5,1), height .3s cubic-bezier(.25,1,.5,1), border-color .3s ease;
    }
    body.has-cursor .cursor-dot.hover {
        width: 70px; height: 70px;
        background-color: #fff;
        mix-blend-mode: difference;
    }
    body.has-cursor .cursor-outline.hover { width: 0; height: 0; border-color: transparent; }
}

/* ============ REVEAIS ============ */

/* Elementos do hero começam escondidos SOMENTE quando o JS está ativo */

/* Quando o preloader termina (body.site-ready), o CSS revela o hero em cascata */

/* Reveals genéricos por scroll — visíveis por padrão, animados só com JS
   (durações dobradas: exibição 50% mais lenta) */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 2s ease, transform 2.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* Rise: mesmo movimento do preloader — o texto sobe de baixo para cima,
   linha a linha, dentro de uma "máscara" com overflow escondido */
.rise-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rise { display: block; }
.js [data-reveal].rise { opacity: 1; transform: translateY(110%); transition: transform 2.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].rise.revealed { transform: translateY(0); }

/* Grão: a foto surge granulada/desfocada e vai clareando até ficar nítida */

/* Máscara de imagem — sem JS a imagem fica sempre visível */
.js .image-mask.is-revealed { animation: revealMask 1.5s var(--ease-out) forwards; }
@keyframes revealMask { to { clip-path: inset(0 0 0 0); } }

/* ============ NAVEGAÇÃO ============ */
#navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 1.25rem 1.5rem;
    z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    transition: transform .5s var(--ease-out), opacity .8s ease, background-color .4s ease, box-shadow .4s ease;
}
@media (min-width: 768px) { #navbar { padding: 1.5rem 2rem; } }

/* Entrada da navbar depois do preloader (só com JS ativo) */
html.js body:not(.site-ready) #navbar { transform: translateY(-110%); opacity: 0; }

#navbar.nav-hidden { transform: translateY(-110%); }
#navbar.nav-solid {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px -18px rgba(41, 37, 36, .18);
}
/* Desktop: fundo 30% mais transparente ao rolar */
@media (min-width: 1024px) {
    #navbar.nav-solid { background: rgba(255, 255, 255, .57); }
}

.nav-logo { position: relative; z-index: 50; }
.nav-logo img { height: 1.75rem; width: auto; }

.nav-links {
    display: none;
    gap: 3rem;
    font-size: 11px; font-weight: 300;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(41, 37, 36, .9);
}
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-link { position: relative; display: inline-block; padding-bottom: 4px; transition: color .3s ease; }
.nav-link:hover { color: var(--ink); }
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background-color: var(--accent);
    transform: scaleX(0); transform-origin: right;
    transition: transform .6s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-right { display: flex; align-items: center; gap: .75rem; }
.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-block; } }

/* Barra de progresso de leitura */
#scroll-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    z-index: 60; pointer-events: none;
}

/* Menu mobile (overlay) */
#mobile-menu {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(245, 242, 237, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0; pointer-events: none;
    transition: opacity .5s ease;
}
#mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner {
    height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 2rem; padding: 0 2rem; text-align: center;
}
#mobile-menu .menu-item { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s var(--ease-out); }
#mobile-menu.open .menu-item { opacity: 1; transform: translateY(0); }
#mobile-menu.open .menu-item:nth-child(1) { transition-delay: .10s; }
#mobile-menu.open .menu-item:nth-child(2) { transition-delay: .18s; }
#mobile-menu.open .menu-item:nth-child(3) { transition-delay: .26s; }
#mobile-menu.open .menu-item:nth-child(4) { transition-delay: .34s; }
#mobile-menu.open .menu-item:nth-child(5) { transition-delay: .42s; }
.menu-item { font-family: var(--serif); font-size: 2.25rem; color: var(--ink); }
.menu-item--accent { font-style: italic; color: var(--accent); }
.menu-contact {
    margin-top: 2rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    font-family: var(--sans); font-size: 11px;
    letter-spacing: .25em; text-transform: uppercase;
    color: rgba(41, 37, 36, .7);
}

/* FIX: QA - área de toque mínima 44x44px (era 40x40). Spans recalibrados p/ manter visual centrado */
.burger { position: relative; width: 44px; height: 44px; z-index: 50; }
@media (min-width: 768px) { .burger { display: none; } }
.burger span {
    position: absolute; left: 10px; width: 24px; height: 1.5px;
    background: var(--ink);
    transition: transform .4s var(--ease-out), top .4s ease, opacity .3s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger.open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ============ PRELOADER (com escape automático) ============ */
.no-js #preloader { display: none; }
#preloader {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--white);
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    /* Rede de segurança: se algum script falhar, o preloader se esconde sozinho após 5s */
    animation: preloaderEscape .8s ease 5s forwards;
}
#preloader.armed { animation: none; }
#preloader.done { transform: translateY(-100%); transition: transform 1.1s cubic-bezier(.76,0,.24,1) .15s; }
@keyframes preloaderEscape { to { opacity: 0; visibility: hidden; } }

.loader-text-wrap { overflow: hidden; height: 64px; position: relative; }
.loader-text {
    font-family: var(--serif); font-size: 3rem; color: var(--wood);
    text-transform: uppercase; letter-spacing: .1em;
    transform: translateY(110%);
    transition: transform .9s var(--ease-out);
}
#preloader.done .loader-text { transform: translateY(-110%); transition: transform .6s ease-in; }
.loader-progress {
    font-family: var(--sans); font-weight: 200; font-size: .8rem;
    letter-spacing: .2em; margin-top: 2rem; color: var(--wood);
    opacity: 0; transition: opacity .5s ease .35s;
}
#preloader.done .loader-progress { opacity: 0; transition: opacity .3s ease; }

/* ============ BOTÕES (pílula + efeito magnético) ============ */
.magnetic-wrap { display: inline-block; position: relative; }
.magnetic-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; overflow: hidden;
    transition: transform .4s cubic-bezier(.23,1,.32,1), background-color .4s ease, color .4s ease, border-color .4s ease;
    will-change: transform;
}
.magnetic-btn::before {
    content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
    background: var(--accent);
    transition: top .4s cubic-bezier(.25,1,.5,1);
    z-index: -1; border-radius: 50%;
}
.magnetic-btn:hover::before { top: 0; border-radius: 0; }
.magnetic-btn:hover { color: #fff; border-color: var(--accent); }

.btn-pill {
    border: 1px solid rgba(41, 37, 36, .2);
    padding: .8rem 2rem;
    border-radius: 9999px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink);
}
.btn-pill--lg { padding: 1rem 2.5rem; }
.btn-pill--on-deep { border-color: rgba(255, 255, 255, .92); color: #fff; }
.btn-pill--on-img { border-color: rgba(255, 255, 255, .4); color: #fff; letter-spacing: .25em; }
.btn-solid {
    padding: 1.25rem 2.5rem;
    background: var(--ink); color: var(--white);
    border-radius: 9999px;
    font-size: 10px; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
}

/* ============ HERO ============ */
.hero {
    min-height: 100svh; height: auto;
    padding: 7rem 0 10.5rem;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hero-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; transition: opacity 1.4s ease;
    will-change: opacity, transform;
}
.hero-slide.active { opacity: .92; animation: kenBurns 7s ease-out forwards; }
@keyframes kenBurns { from { transform: scale(1.06); } to { transform: scale(1.14); } }

/* CTAs do hero (primário: teste gratuito · secundário: serviços) */

/* Indicadores de slide */
.slide-indicators {
    position: absolute; bottom: 7rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: .75rem;
}
@media (min-width: 768px) { .slide-indicators { bottom: 6rem; } }
/* FIX: QA - área de toque 44x44px preservando barra visual de 2px via ::before */
.slide-bar { position: relative; width: 44px; height: 44px; display: flex; align-items: center; background: transparent; overflow: visible; padding: 0; border: none; cursor: pointer; }
.slide-bar::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: rgba(41,37,36,.22); overflow: hidden; }
.slide-bar i { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 100%; height: 2px; background: var(--accent); transform-origin: left; }
.slide-bar.active i { animation: slideFill var(--slide-ms, 6000ms) linear forwards; }
@keyframes slideFill { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } } /* FIX: QA - preserva centragem vertical do ::before */

/* Dica de rolagem */

/* ============ MARQUEE DE PALAVRAS-CHAVE (CSS puro, sempre em movimento) ============ */
.marquee {
    overflow: hidden; white-space: nowrap;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(41,37,36,.1);
    border-bottom: 1px solid rgba(41,37,36,.1);
    background: var(--white);
    position: relative; z-index: 10;
}
@media (min-width: 768px) { .marquee { padding: 2rem 0; } }
.marquee-track {
    display: inline-flex; align-items: center;
    font-family: var(--serif); font-style: italic;
    font-size: 1.25rem; color: rgba(41,37,36,.45);
    will-change: transform;
    animation: marqueeMove 36s linear infinite;
}
@media (min-width: 768px) { .marquee-track { font-size: 1.5rem; } }
.marquee-track > span { margin: 0 1.5rem; }
.marquee-track > span.dot { margin: 0; color: var(--accent); }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ============ SEÇÕES — utilidades comuns ============ */
.section { position: relative; z-index: 10; }
.section--pad { padding: 7rem 0; }
@media (min-width: 768px) { .section--pad { padding: 11rem 0; } }

.sec-head { text-align: center; margin-bottom: 5rem; }
@media (min-width: 768px) { .sec-head { margin-bottom: 6rem; } }
.sec-head .eyebrow { margin-bottom: 1.5rem; }
.sec-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.15; color: var(--ink);
    max-width: 48rem; margin-inline: auto;
}
.italic-accent { font-style: italic; color: var(--accent); }

/* ============ SOBRE ============ */
.link-arrow {
    display: inline-flex; align-items: center; gap: 1rem;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .5rem;
    min-height: 44px; /* FIX: QA - área de toque mínima */
    border-bottom: 1px solid rgba(41, 37, 36, .2);
}
.link-arrow:hover { border-bottom-color: transparent; }
.link-arrow .arrow-circle {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid rgba(41, 37, 36, .2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .35s ease, color .35s ease;
    flex-shrink: 0;
}
.link-arrow:hover .arrow-circle { background: var(--ink); color: var(--white); }

/* ============ MÉTODO — trilho horizontal ============ */
/* No desktop o JS mede o trilho, dá altura extra ao invólucro (#metodo-wrap)
   e a seção fica "grudada" (position: sticky) enquanto o scroll vertical
   empurra os cards para o lado. No celular é um carrossel de arrastar. */
/* Agora em TODAS as telas a seção fica "grudada" e o scroll vertical
   desliza os cards para o lado — no celular não precisa mais arrastar */
/* Texto de introdução que no desktop fica dentro do trilho (primeiro slide) */

.pillars-viewport {
    position: relative; z-index: 10;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pillars-viewport::-webkit-scrollbar { display: none; }
/* Com JS ativo quem conduz o trilho é o scroll vertical (todas as telas) */
.js .pillars-viewport { scroll-snap-type: none; }
.pillars-track {
    display: flex; width: max-content; align-items: center;
    gap: 8vw; padding: 0 1.5rem;
    will-change: transform;
}
@media (min-width: 1024px) {
    .pillars-track { gap: 7vw; padding: 0 10vw; }
    /* No desktop quem desloca o trilho é o JS (transform); o snap obrigatório
       faria o navegador "puxar" o scrollLeft sozinho e cortar o texto inicial */
    .pillars-viewport { scroll-snap-type: none; }
}
/* Celular: limita a altura do card para tudo caber na tela "grudada" */

/* ============ PLATAFORMA (painel escuro) ============ */
/* Ícones de "confirmado" pulsando um de cada vez (ciclo de 3s = ~1s cada) */

/* ============ ROTAS / CONSULTORIA ============ */
/* Espaço até a seção "Sobre" reduzido pela metade */
/* Desktop: os 3 cards entram um de cada vez (no celular cada um já
   aparece sozinho conforme o scroll, então não precisa de atraso) */
/* Contorno de luz suave quando o mouse está em cima do card */
/* flex:1 empurra o botão e a linha para a base — os 3 cards ficam alinhados */

/* ============ CARDS COM LUZ QUE SEGUE O MOUSE ============ */
.glow-card { position: relative; }
.glow-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(22,101,52,.08), transparent 55%);
    opacity: 0; transition: opacity .4s ease;
}
.glow-card:hover::after { opacity: 1; }

/* ============ DEPOIMENTOS + NÚMEROS ============ */
#depoimentos { background: var(--surface); border-top: 1px solid rgba(41,37,36,.05); }

/* Carrossel de depoimentos: 3 visíveis no desktop, 1 no celular */
.quotes-viewport { overflow: hidden; padding: .5rem 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.quotes-track {
    display: flex; gap: 1.5rem;
    transition: transform .8s var(--ease-out);
    will-change: transform;
}
@media (min-width: 1024px) { .quotes-track { gap: 2rem; } }

/* Card com frente (texto) e verso (foto) — amplia no hover, vira no clique */
.quote-flip { perspective: 1200px; width: 100%; cursor: pointer; transition: transform .6s var(--ease-out); }
.quote-flip:hover, .quote-flip:focus-visible, .quote-flip:active { transform: scale(1.04); }

/* Setas de navegação (tamanho médio, embaixo dos cards) */
/* Números e rótulos ~50% maiores */

/* ============ IMPACTO — parallax de tela cheia ============ */
.impact {
    height: 110vh; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.impact-veil { position: absolute; inset: 0; z-index: 10; background: rgba(255, 255, 255, .2); }
#impact-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 140vh;
    object-fit: cover;
    will-change: transform;
    /* Zoom bem lento, indo e voltando, para simular movimento */
    animation: impactZoom 22s ease-in-out infinite alternate;
}
@keyframes impactZoom {
    from { transform: translate3d(0, -8vh, 0) scale(1); }
    to   { transform: translate3d(0, -18vh, 0) scale(1.22); }
}
.impact-content {
    position: relative; z-index: 20;
    text-align: center; padding: 0 1.5rem;
    mix-blend-mode: difference; color: #fff;
}
.impact-content .eyebrow { color: #fff; opacity: .8; margin-bottom: 2rem; }
.impact-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 1; margin-bottom: 2rem;
}
.impact-sub {
    font-size: 14px; font-weight: 300;
    letter-spacing: .1em; text-transform: uppercase;
    max-width: 32rem; margin: 0 auto 3rem;
    opacity: .7;
}

/* ============ CONTATO + RODAPÉ ============ */
.footer {
    background: var(--surface);
    padding: 7rem 0 2rem;
    border-top: 1px solid rgba(41,37,36,.1);
    position: relative; overflow: hidden;
}
@media (min-width: 768px) { .footer { padding-top: 8rem; } }
.footer-glow {
    position: absolute; top: 0; right: 0;
    width: 50%; height: 100%;
    background: radial-gradient(ellipse at top right, rgba(22,101,52,.05), transparent 70%);
    pointer-events: none;
}
.footer-main {
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-start;
    gap: 3rem; margin-bottom: 5rem;
}
@media (min-width: 768px) { .footer-main { margin-bottom: 6rem; } }
@media (min-width: 1024px) { .footer-main { flex-direction: row; align-items: flex-end; } }
.footer-left { width: 100%; }
@media (min-width: 1024px) { .footer-left { width: 66%; } }
.footer-left .eyebrow { margin-bottom: 1.5rem; }
.footer-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.05; color: var(--ink);
    margin-bottom: 2rem;
}
.footer-text { font-size: 14px; color: rgba(41,37,36,.65); max-width: 28rem; line-height: 1.7; margin-bottom: 3rem; }
.footer-email {
    display: inline-block;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 5.5vw, 3rem);
    color: var(--ink);
    border-bottom: 1px solid rgba(41,37,36,.3);
    padding-bottom: .75rem;
    word-break: break-all;
    transition: color .5s ease, border-color .5s ease;
}
@media (min-width: 768px) { .footer-email { padding-bottom: 1rem; } }
.footer-email:hover { color: var(--accent); border-color: var(--accent); }
.footer-right {
    width: 100%;
    display: flex; flex-direction: column; gap: 2rem;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(41,37,36,.75);
}
@media (min-width: 1024px) { .footer-right { width: auto; } }
.footer-right .magnetic-wrap { align-self: flex-start; }
@media (min-width: 1024px) { .footer-right .magnetic-wrap { align-self: flex-end; } }
.footer-social { display: flex; gap: 2rem; margin-top: 1rem; }
@media (min-width: 1024px) { .footer-social { justify-content: flex-end; } }
.footer-social a { transition: color .3s ease; }
.footer-social a:hover { color: var(--accent); }

/* ============ RODAPÉ FINAL (versão em colunas) ============ */
.footer-alt { position: relative; border-top: 1px solid rgba(41,37,36,.08); padding: 4rem 0; }
.footer-v2 { background: var(--white); }
.fv2-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .fv2-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } }
.fv2-brand img { height: 1.75rem; margin-bottom: 1.25rem; }
.fv2-brand p { font-size: 12px; color: rgba(41,37,36,.65); line-height: 1.7; max-width: 20rem; }
.fv2-col h4 { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--wood-light); margin-bottom: 1.25rem; }
.fv2-col a { display: block; font-size: 13px; color: rgba(41,37,36,.75); margin-bottom: .75rem; transition: color .3s ease; }
.fv2-col a:hover { color: var(--accent); }
.fv2-bottom { display: flex; flex-direction: column; gap: .75rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgba(41,37,36,.1); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(41,37,36,.5); }
@media (min-width: 768px) { .fv2-bottom { flex-direction: row; } }
.fv2-bottom a:hover { color: var(--ink); }

/* ============ GRÃO DE PELÍCULA ============ */
.noise {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9990; opacity: .03;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ============ LIGHTBOX ============ */
.lightbox {
    position: fixed; inset: 0; z-index: 20000;
    background-color: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img {
    max-width: 90vw; max-height: 88vh; object-fit: contain;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.45);
}
.lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
    color: var(--ink); background: transparent;
    transition: background-color .3s ease, color .3s ease;
    z-index: 20001;
}
.lightbox-close:hover { background-color: var(--ink); color: var(--white); }

/* ============ ACESSIBILIDADE ============ */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}
.skip-link {
    position: fixed; top: -100px; left: 1rem; z-index: 10001;
    background: var(--accent); color: #fff;
    padding: .75rem 1.25rem; border-radius: 999px;
    font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
    transition: top .3s ease;
}
.skip-link:focus { top: 1rem; }

/* ============ SUBMENU SERVIÇOS (dropdown desktop + sublinks mobile) ============ */
.nav-item.has-dropdown { position: relative; display: inline-block; }
.nav-item.has-dropdown .nav-link { display: inline-flex; align-items: center; gap: .35rem; }
.nav-caret { transition: transform .3s var(--ease-out); }
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 15rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 75, 77, .1);
    border-radius: 14px;
    padding: .5rem;
    box-shadow: 0 18px 40px rgba(28, 25, 23, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
    z-index: 300;
}
/* Ponte invisível para o mouse não "cair" entre o link e o dropdown */
.nav-dropdown::before { content: ''; position: absolute; top: -.8rem; left: 0; right: 0; height: .8rem; }
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-droplink {
    display: block;
    padding: .6rem .9rem;
    border-radius: 9px;
    font-size: .85rem;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
    white-space: nowrap;
}
.nav-droplink:hover { background: var(--surface); color: var(--accent); }
.nav-droplink--all {
    margin-top: .25rem;
    border-top: 1px solid rgba(75, 75, 77, .1);
    border-radius: 0 0 9px 9px;
    color: var(--accent);
    font-weight: 500;
}

/* Sublinks no menu mobile */
.mobile-submenu { display: flex; flex-direction: column; gap: .35rem; padding: .25rem 0 .75rem 1.25rem; }
.mobile-sublink {
    font-size: 1rem;
    color: var(--ink);
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
}
.mobile-sublink::before { content: '— '; color: var(--accent); }
.mobile-sublink:hover { opacity: 1; color: var(--accent); }

/* ============ VÍDEOS LOCAIS (mídia da Priscila) ============ */

/* =====================================================================
   TRYFIT — ESTILOS DAS PÁGINAS INTERNAS
   Complementa css/style.css (que carrega antes). Reaproveita 100% dos
   tokens (--ink, --wood, --accent, --surface, --deep, --serif, --sans…)
   e das classes do site (.container, .section, .glow-card, .magnetic-btn,
   .eyebrow, .rise-mask/.rise, .btn-pill…). Zero bibliotecas.
   ===================================================================== */

/* ---------- HERO PADRÃO DE PÁGINA INTERNA ---------- */
.page-hero {
    position: relative;
    padding: calc(var(--nav-h) + 4rem) 0 4rem;
    background: var(--surface);
    overflow: hidden;
}
@media (min-width: 768px) { .page-hero { padding: calc(var(--nav-h) + 6rem) 0 6rem; } }
.page-hero::before {
    content: "";
    position: absolute; top: -20%; right: -10%;
    width: 40rem; height: 40rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(22,101,52,.08), transparent 70%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-inner { max-width: 52rem; }

.breadcrumb { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(41,37,36,.5); margin-bottom: 1.75rem; }
.breadcrumb a { color: var(--wood-light); transition: color .3s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 .5rem; }

.page-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.08;
    color: var(--ink); letter-spacing: -.01em; margin-top: .75rem;
}
.page-title .italic-accent { font-style: italic; color: var(--accent); }
.page-sub {
    margin-top: 1.75rem; font-size: 15px; font-weight: 300;
    line-height: 1.8; color: rgba(41,37,36,.7); max-width: 40rem;
}
.page-hero-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- SELETOR "QUAL É A SUA SITUAÇÃO" ---------- */

/* ---------- GRID DE 4 SERVIÇOS (reaproveita .glow-card/.route-card) ---------- */

/* ---------- TABELA COMPARATIVA ---------- */

/* ---------- FAQ (nativo <details>, sem JS) ---------- */
.faq { max-width: 48rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid rgba(41,37,36,.12); }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 1.5rem 2.5rem 1.5rem 0;
    position: relative; font-family: var(--serif); font-size: 1.25rem;
    color: var(--ink); transition: color .3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
    content: "+"; position: absolute; right: 0; top: 1.35rem;
    font-family: var(--sans); font-size: 1.5rem; font-weight: 200;
    color: var(--wood-light); transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 1.75rem; font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(41,37,36,.7); max-width: 42rem; }

/* ---------- BLOCO DE AUTORIDADE ---------- */
.authority-band { background: var(--white); border: 1px solid rgba(41,37,36,.1); border-radius: 2px; padding: 3rem 2rem; text-align: center; }
@media (min-width: 768px) { .authority-band { padding: 4rem; } }
.authority-band .cred-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: 12px; color: rgba(41,37,36,.65); }
.authority-band .cred-list span.dot { color: var(--accent); }

/* ---------- CREDENCIAIS (/sobre/) ---------- */ /* FIX: QA - hover consistente com demais cards */

/* Lista de método numerada (/sobre/) */

/* Retrato grande do /sobre/ */

/* ---------- PILARES DE CURSOS (lista vertical indexável) ---------- */
.pillar-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .pillar-list { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.pillar-block { padding: 2.5rem; background: var(--white); border: 1px solid rgba(41,37,36,.1); border-radius: 2px; }
.pillar-block .p-count { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--wood-light); }
.pillar-block h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin: .5rem 0 1rem; }
.pillar-block p { font-size: 13px; font-weight: 300; line-height: 1.75; color: rgba(41,37,36,.7); }

/* Lista de inclusos (check) */

/* Bloco de oferta (âncora de preço) */
.offer-panel { position: relative; background: var(--deep); color: #fff; border-radius: 4px; padding: 3rem 2rem; text-align: center; overflow: hidden; }
@media (min-width: 768px) { .offer-panel { padding: 4.5rem; } }
.offer-panel .offer-now { font-family: var(--serif); font-size: clamp(2.2rem,6vw,3.5rem); color: #fff; margin: .5rem 0; }
.offer-panel .offer-now em { font-style: italic; color: #4ade80; }
.offer-panel .offer-note { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 2rem; }

/* ---------- PROSA LEGAL (/privacidade/) ---------- */ /* FIX: QA - área de toque + estado hover */ /* FIX: QA - hover distinto (consistência com o resto do site) */

/* ===================================================================
   QUIZ — engine gamificada (JS puro em /js/quiz.js)
   =================================================================== */
.quiz-avatars { display: flex; justify-content: center; gap: .75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.quiz-avatars .qa {
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--white); border: 1px solid rgba(41,37,36,.15);
    display: grid; place-items: center; font-family: var(--serif); font-style: italic;
    color: rgba(41,37,36,.35); font-size: 1.1rem; transition: transform .4s var(--ease-out), color .4s ease;
}
.quiz-avatars .qa:hover { transform: translateY(-4px); color: var(--accent); }

/* Os estilos do quiz em si (telas, formulário, perguntas, resultado)
   vivem em /css/quiz.css — não redeclarar classes .quiz-* aqui. */

/* =====================================================================
   MOVIMENTO EXTRA — PÁGINAS DE SERVIÇO (/servicos/*)
   Tudo reaproveita o toggle .revealed que o js/main.js já aplica, ou é
   animação CSS pura (loop/hover). Zero JS novo. As variantes fx-* têm
   especificidade maior que a regra base ".js [data-reveal]", então
   sobrescrevem o transform de entrada padrão.
   ===================================================================== */

/* Direções de entrada: deslizam de lados/escala em vez de só subir */
.js [data-reveal].fx-left  { opacity: 0; transform: translateX(-46px); transition: opacity 1.4s ease, transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].fx-right { opacity: 0; transform: translateX(46px);  transition: opacity 1.4s ease, transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].fx-zoom  { opacity: 0; transform: scale(.9);         transition: opacity 1.4s ease, transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].fx-left.revealed,
.js [data-reveal].fx-right.revealed,
.js [data-reveal].fx-zoom.revealed { opacity: 1; transform: none; }

/* Lista "dor / você reconhece" — itens entram alternando de lado */
.pain-list { list-style: none; max-width: 46rem; }
/* Avança o bloco 25% da largura do espaço disponível, para sair do alinhamento colado à esquerda */
@media (min-width: 768px) { .pain-list--offset { margin-left: 25%; } }
.pain-list li {
    position: relative; padding: 1.15rem 0 1.15rem 2.25rem;
    border-bottom: 1px solid rgba(41,37,36,.1);
    font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink);
    opacity: 0; transform: translateX(-28px);
    transition: opacity 1s ease, transform 1.1s var(--ease-out);
}
.pain-list li:nth-child(even) { transform: translateX(28px); }
.pain-list.revealed li { opacity: 1; transform: none; }
.pain-list.revealed li:nth-child(1) { transition-delay: .05s; }
.pain-list.revealed li:nth-child(2) { transition-delay: .15s; }
.pain-list.revealed li:nth-child(3) { transition-delay: .25s; }
.pain-list.revealed li:nth-child(4) { transition-delay: .35s; }
.pain-list.revealed li:nth-child(5) { transition-delay: .45s; }
.pain-list.revealed li:nth-child(6) { transition-delay: .55s; }
.pain-list li::before {
    content: ""; position: absolute; left: 0; top: 1.5rem;
    width: 12px; height: 2px; background: var(--wood); transform: rotate(0);
}
.pain-list li::after {
    content: ""; position: absolute; left: 5px; top: 1.15rem;
    width: 2px; height: 12px; background: var(--wood);
}
.pain-note { margin-top: 1.75rem; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--wood-light); max-width: 40rem; }

/* "Como funciona" — passos com linha vertical que se desenha ao revelar */
.flow-steps { position: relative; max-width: 46rem; margin-top: 1rem; }
/* Avança o bloco 25% da largura do espaço disponível, para sair do alinhamento colado à esquerda */
@media (min-width: 768px) { .flow-steps--offset { margin-left: 25%; } }
.flow-steps::before {
    content: ""; position: absolute; left: 1.15rem; top: .5rem; bottom: .5rem;
    width: 2px; background: rgba(22,101,52,.18); transform: scaleY(0); transform-origin: top;
    transition: transform 1.6s var(--ease-out);
}
.flow-steps.revealed::before { transform: scaleY(1); }
.flow-steps li {
    list-style: none; position: relative; padding: 0 0 2.25rem 3.75rem;
    opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s var(--ease-out);
}
.flow-steps.revealed li { opacity: 1; transform: none; }
.flow-steps.revealed li:nth-child(1) { transition-delay: .2s; }
.flow-steps.revealed li:nth-child(2) { transition-delay: .4s; }
.flow-steps.revealed li:nth-child(3) { transition-delay: .6s; }
.flow-steps.revealed li:nth-child(4) { transition-delay: .8s; }
.flow-steps.revealed li:nth-child(5) { transition-delay: 1s; }
.flow-steps li:last-child { padding-bottom: 0; }
.flow-steps .step-dot {
    position: absolute; left: 0; top: -.15rem; width: 2.3rem; height: 2.3rem;
    border-radius: 50%; background: var(--white); border: 1px solid rgba(22,101,52,.3);
    display: grid; place-items: center; font-family: var(--serif); font-style: italic;
    color: var(--accent); font-size: 1.1rem; z-index: 2;
}
.flow-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin-bottom: .35rem; }
.flow-steps p { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(41,37,36,.7); }

/* Painel de oferta — orb de luz que flutua devagar (CSS puro) */
.offer-panel::before {
    content: ""; position: absolute; top: -40%; right: -20%;
    width: 32rem; height: 32rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(74,222,128,.16), transparent 70%);
    pointer-events: none; animation: offerFloat 9s ease-in-out infinite;
}
@keyframes offerFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-3rem, 2rem) scale(1.12); }
}
.offer-panel > * { position: relative; z-index: 1; }

/* Menu de temas (workshop) — chips que sobem no hover */
/* FIX: QA - remove elevação (affordance enganosa: item não é clicável); mantém só realce de borda */

/* Benefícios (energy codes) — cards com brilho no hover */
.benefit-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
.benefit-card { padding: 2.25rem; background: var(--white); border: 1px solid rgba(41,37,36,.1); border-radius: 2px; transition: transform .45s var(--ease-out), border-color .45s ease; }
.benefit-card:hover { transform: translateY(-4px); border-color: rgba(22,101,52,.4); }
.benefit-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--ink); margin-bottom: .6rem; }
.benefit-card p { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(41,37,36,.7); }

/* Faixa de destaque intermediária (empresas / cross-sell) */
.mid-band { background: var(--surface); border: 1px solid rgba(41,37,36,.1); border-radius: 4px; padding: 2.75rem 2rem; }
@media (min-width: 768px) { .mid-band { padding: 3.5rem; } }
.mid-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem,4vw,2.2rem); color: var(--ink); margin-bottom: 1rem; }
.mid-band p { font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(41,37,36,.72); max-width: 44rem; margin-bottom: 1.75rem; }

/* Metodologia em 4 Etapas — animação de entrada 2x mais lenta que o padrão de paginas.css */
.flow-steps li { transition: opacity 1.8s ease, transform 2s var(--ease-out); }
.flow-steps.revealed li:nth-child(1) { transition-delay: .4s; }
.flow-steps.revealed li:nth-child(2) { transition-delay: .8s; }
.flow-steps.revealed li:nth-child(3) { transition-delay: 1.2s; }
.flow-steps.revealed li:nth-child(4) { transition-delay: 1.6s; }