/* =====================================================================
   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 */
    --deep: #1C1917;         /* painel escuro (fundo do quiz) */
    --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; }
::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; }

/* ============ 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-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) ============ */

/* ============ 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 ============ */

/* ============ 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 */
#about.section--pad { padding-top: 3.5rem; }
@media (min-width: 768px) { #about.section--pad { padding-top: 5.5rem; } }
/* 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 ============ */

/* ============ 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; }
.page-hero--center .page-hero-inner { max-width: 60rem; margin-inline: auto; text-align: center; }

.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--center .page-sub { margin-inline: auto; }
.page-hero-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.page-hero--center .page-hero-ctas { justify-content: center; }
.micro-proof { margin-top: 1.5rem; font-size: 12px; color: rgba(41,37,36,.55); }
.micro-proof strong { color: var(--wood-light); font-weight: 500; }

/* ---------- 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 ---------- */

/* ---------- 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) ---------- */

/* Lista de inclusos (check) */

/* Bloco de oferta (âncora de preço) */

/* ---------- 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 */

/* Lista "dor / você reconhece" — itens entram alternando de lado */
/* Avança o bloco 25% da largura do espaço disponível, para sair do alinhamento colado à esquerda */

/* "Como funciona" — passos com linha vertical que se desenha ao revelar */
/* Avança o bloco 25% da largura do espaço disponível, para sair do alinhamento colado à esquerda */

/* Painel de oferta — orb de luz que flutua devagar (CSS puro) */

/* 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 */

/* Faixa de destaque intermediária (empresas / cross-sell) */

/* =====================================================================
   TRYFIT — QUIZ "Diagnóstico de Liderança" (Estilos de Goleman)
   Estilos exclusivos da seção interativa #quiz-stage.
   Usa os tokens do style.css (--ink, --wood, --accent, --surface, --deep).
   Zero bibliotecas.
   ===================================================================== */

/* ---------- PALCO (card escuro que contém todas as telas) ---------- */
.quiz-app {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    background: var(--deep);
    color: #F5F2ED;
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    isolation: isolate;
}

/* decoração de fundo: quadrados vazados (referência do vídeo) */
.quiz-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .35;
}
.quiz-deco span {
    position: absolute;
    border: 1px solid rgba(150, 99, 43, .5);
    border-radius: 4px;
}
.quiz-deco span:nth-child(1) { width: 60px; height: 60px; top: 8%;  left: 4%;  transform: rotate(12deg); }
.quiz-deco span:nth-child(2) { width: 26px; height: 26px; top: 18%; right: 8%; transform: rotate(-8deg); }
.quiz-deco span:nth-child(3) { width: 90px; height: 90px; bottom: 6%; right: 3%; transform: rotate(6deg); }
.quiz-deco span:nth-child(4) { width: 18px; height: 18px; bottom: 22%; left: 9%; transform: rotate(20deg); }
.quiz-deco span:nth-child(5) { width: 40px; height: 40px; top: 50%; left: 2%;  transform: rotate(-15deg); }
.quiz-deco span:nth-child(6) { width: 30px; height: 30px; top: 4%;  right: 30%; transform: rotate(30deg); }

/* ---------- TELAS (fade-out / fade-in) ---------- */
.quiz-screen {
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s var(--ease-out);
}
.quiz-screen.is-leaving { opacity: 0; transform: translateY(-12px); }
.quiz-screen.is-entering { opacity: 0; transform: translateY(16px); }

/* ---------- BARRA DE PROGRESSO ---------- */
.quiz-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.quiz-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, .12);
    border-radius: 99px;
    overflow: hidden;
}
.quiz-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--wood-light), #C89B5A);
    border-radius: 99px;
    transition: width .5s var(--ease-out);
}
.quiz-progress-label {
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 242, 237, .65);
    white-space: nowrap;
}

/* ---------- TIPOGRAFIA INTERNA ---------- */
.quiz-question-title {
    font-family: var(--sans);
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    margin-bottom: 2rem;
    text-wrap: balance;
}
.quiz-screen-title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: .75rem;
    text-wrap: balance;
}
.quiz-screen-sub {
    text-align: center;
    color: rgba(245, 242, 237, .75);
    font-weight: 300;
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* ---------- ALTERNATIVAS (A–F, cartões estilo game em grade 2 col.) ---------- */
.quiz-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.quiz-option {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    text-align: left;
    background: linear-gradient(150deg, #C89B5A, var(--wood, #8E5A35));
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 1.1rem 1.2rem 1.25rem;
    color: var(--deep, #1C1917);
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .2s ease, filter .2s ease;
    animation: quizCardIn .5s var(--ease-out) both;
}
.quiz-option:nth-child(1) { animation-delay: .05s; }
.quiz-option:nth-child(2) { animation-delay: .12s; }
.quiz-option:nth-child(3) { animation-delay: .19s; }
.quiz-option:nth-child(4) { animation-delay: .26s; }
.quiz-option:nth-child(5) { animation-delay: .33s; }
.quiz-option:nth-child(6) { animation-delay: .40s; }
@keyframes quizCardIn {
    0%   { opacity: 0; transform: translateY(22px) scale(.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover: hover) {
    .quiz-option:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
        filter: brightness(1.08);
    }
}
.quiz-option:active { transform: scale(.97); }
.quiz-option.is-selected {
    border-color: #F5F2ED;
    box-shadow: 0 0 0 3px rgba(245, 242, 237, .35), 0 14px 30px rgba(0, 0, 0, .45);
    transform: scale(1.03);
}
.quiz-option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.quiz-option-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(28, 25, 23, .82);
    color: #E9C285;
    flex: none;
    transition: transform .25s var(--ease-out);
}
.quiz-option-icon svg { width: 24px; height: 24px; }
.quiz-option:hover .quiz-option-icon { transform: rotate(-6deg) scale(1.08); }
.quiz-option-letter {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(28, 25, 23, .18);
    border: 1.5px solid rgba(28, 25, 23, .45);
    color: var(--deep, #1C1917);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    transition: background .2s ease, color .2s ease;
}
.quiz-option.is-selected .quiz-option-letter {
    background: var(--deep, #1C1917);
    color: #E9C285;
}
.quiz-option-text {
    font-size: .92rem;
}

/* ============================================================
   ÍCONES SVG ANIMADOS DAS OPÇÕES (um movimento por estilo)
   Anima elementos internos de cada ícone; usado tanto nas
   opções A–F quanto no avatar do resultado. Desligado em
   prefers-reduced-motion (bloco no fim do arquivo).
   ============================================================ */
.qi-svg,
.qi-svg * {
    transform-box: view-box;
    transform-origin: center;
}

/* COM — megáfone: ondas de som pulsando em sequência */
.qi-com .qi-wave { animation: qiWave 1.8s ease-in-out infinite; }
.qi-com .qi-wave-2 { animation-delay: .3s; }
@keyframes qiWave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* VIS — bússola: agulha oscilando como quem busca o norte */
.qi-vis .qi-needle { transform-origin: 12px 12px; animation: qiNeedle 3.6s ease-in-out infinite; }
@keyframes qiNeedle { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(20deg); } }

/* CON — elos: aproximam e afastam levemente (conexão) */
.qi-con .qi-link-1 { animation: qiLink1 2.4s ease-in-out infinite; }
.qi-con .qi-link-2 { animation: qiLink2 2.4s ease-in-out infinite; }
@keyframes qiLink1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-.6px, -.6px); } }
@keyframes qiLink2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.6px, .6px); } }

/* DEM — balões de fala flutuando em fase oposta (diálogo) */
.qi-dem .qi-bubble-1 { animation: qiFloat 2.6s ease-in-out infinite; }
.qi-dem .qi-bubble-2 { animation: qiFloat 2.6s ease-in-out infinite reverse; animation-delay: .3s; }
@keyframes qiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

/* PER — raio: relâmpago que pisca com energia */
.qi-per .qi-bolt { animation: qiBolt 2.2s ease-in-out infinite; }
@keyframes qiBolt {
    0%, 52%, 100% { opacity: 1; transform: scale(1); }
    58% { opacity: .2; }
    64% { opacity: 1; transform: scale(1.12); }
    72% { opacity: .4; }
    80% { opacity: 1; transform: scale(1); }
}

/* COA — broto: folhas crescendo a partir do caule */
.qi-coa .qi-leaf-1 { transform-origin: 12px 13px; animation: qiGrow 3s ease-in-out infinite; }
.qi-coa .qi-leaf-2 { transform-origin: 12px 13px; animation: qiGrow 3s ease-in-out infinite; animation-delay: .4s; }
@keyframes qiGrow { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.06); } }

/* ---------- NAVEGAÇÃO (voltar) ---------- */
.quiz-nav { display: flex; justify-content: center; margin-top: 1.75rem; }
.quiz-back {
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(245, 242, 237, .55);
    padding: .5rem 1rem;
    transition: color .25s ease;
}
.quiz-back:hover { color: #F5F2ED; }

/* ---------- FORMULÁRIO (lead) ---------- */
.quiz-form { max-width: 480px; margin: 0 auto; display: grid; gap: 1rem; }
.quiz-field { display: grid; gap: .35rem; }
.quiz-field label {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 242, 237, .7);
}
.quiz-field input {
    width: 100%;
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    color: #F5F2ED;
    font: inherit;
    font-weight: 300;
    transition: border-color .25s ease;
}
.quiz-field input::placeholder { color: rgba(245, 242, 237, .35); }
.quiz-field input:focus { outline: none; border-color: var(--wood-light); }
.quiz-field input.is-invalid { border-color: #c0554d; }
.quiz-field-error {
    font-size: .75rem;
    color: #e08e88;
    min-height: 1em;
}

/* sugestões de domínio de e-mail */
.quiz-email-suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.quiz-email-suggest button {
    font-size: .72rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    border: 1px solid rgba(200, 155, 90, .5);
    color: #C89B5A;
    transition: background .2s ease, color .2s ease;
}
.quiz-email-suggest button:hover { background: #C89B5A; color: var(--deep); }
.quiz-email-suggest[hidden] { display: none; }

/* campos opcionais */
.quiz-optional-toggle {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245, 242, 237, .55);
    text-align: center;
    padding: .35rem;
}
.quiz-optional-toggle:hover { color: #C89B5A; }
.quiz-optional[hidden] { display: none; }
.quiz-optional { display: grid; gap: 1rem; }

/* LGPD */
.quiz-lgpd {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .78rem;
    font-weight: 300;
    color: rgba(245, 242, 237, .75);
    line-height: 1.5;
}
.quiz-lgpd input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ---------- BOTÃO PRINCIPAL DO QUIZ ---------- */
.quiz-btn {
    position: relative;
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .85rem;
    padding: 1rem 2.75rem;
    border-radius: 99px;
    transition: transform .3s var(--ease-out), box-shadow .3s ease, opacity .25s ease;
    justify-self: center;
}
.quiz-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(22, 101, 52, .35); }
.quiz-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- TELA DE RESULTADO ---------- */
.quiz-result { text-align: center; }
.quiz-result-eyebrow {
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #C89B5A;
    margin-bottom: 1rem;
    display: block;
}
.quiz-result-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 155, 90, .55);
    background: rgba(150, 99, 43, .14);
    color: #C89B5A;
    animation: quizPop .6s var(--ease-out) both;
}
.quiz-result-avatar svg { width: 48px; height: 48px; }
@keyframes quizPop {
    0% { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.quiz-result-name {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 600;
    margin-bottom: .75rem;
}
.quiz-result-frase {
    max-width: 520px;
    margin: 0 auto 2rem;
    font-weight: 300;
    color: rgba(245, 242, 237, .85);
    line-height: 1.6;
}

/* placar dos 6 estilos (gamificação) */
.quiz-scores {
    max-width: 480px;
    margin: 0 auto 2rem;
    display: grid;
    gap: .6rem;
    text-align: left;
}
.quiz-score-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: .75rem; font-size: .78rem; }
.quiz-score-row .qs-name { color: rgba(245, 242, 237, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-score-row .qs-track { height: 8px; background: rgba(255, 255, 255, .1); border-radius: 99px; overflow: hidden; }
.quiz-score-row .qs-fill {
    height: 100%;
    width: 0%;
    background: rgba(200, 155, 90, .55);
    border-radius: 99px;
    transition: width .9s var(--ease-out);
}
.quiz-score-row.is-winner .qs-fill { background: linear-gradient(90deg, var(--wood-light), #C89B5A); }
.quiz-score-row.is-winner .qs-name { color: #C89B5A; font-weight: 500; }
.quiz-score-row .qs-val { color: rgba(245, 242, 237, .6); font-variant-numeric: tabular-nums; }

.quiz-result-note {
    font-size: .85rem;
    font-weight: 300;
    color: rgba(245, 242, 237, .7);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    border: 1px dashed rgba(200, 155, 90, .4);
    border-radius: 14px;
}
.quiz-result-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
    align-items: center;
}
.quiz-restart {
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(245, 242, 237, .55);
    padding: .6rem 1rem;
}
.quiz-restart:hover { color: #F5F2ED; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 640px) {
    .quiz-options { grid-template-columns: 1fr; gap: .8rem; }
    .quiz-option { flex-direction: row; align-items: center; padding: .9rem 1rem; }
    .quiz-option-top { flex-direction: column-reverse; justify-content: center; gap: .4rem; }
    .quiz-option-icon { width: 40px; height: 40px; border-radius: 12px; }
    .quiz-option-letter { width: 24px; height: 24px; font-size: .68rem; }
    .quiz-option-text { font-size: .88rem; }
}
@media (max-width: 560px) {
    .quiz-app { border-radius: 18px; }
    .quiz-score-row { grid-template-columns: 105px 1fr auto; font-size: .72rem; }
}

/* ---------- ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion: reduce) {
    .quiz-screen, .quiz-progress-fill, .quiz-option, .quiz-score-row .qs-fill { transition: none; }
    .quiz-result-avatar, .quiz-option { animation: none; }
    .qi-svg, .qi-svg * { animation: none !important; }
}

/* =====================================================================
   VARIAÇÃO 11 — MOSAICO (miniatura de foto no lugar do ícone, horizontal)
   Faixas horizontais escuras com uma foto em miniatura à esquerda e o
   texto à direita. Letra sobre a miniatura.
   ===================================================================== */
.quiz-app--mosaico .quiz-progress-fill { background: linear-gradient(90deg, #C89B5A, var(--accent, #166534)); }
.quiz-app--mosaico .quiz-options { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.quiz-app--mosaico .quiz-option {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(150deg, #2a2521, #1c1917);
    border: 1.5px solid rgba(200, 155, 90, .28);
    border-radius: 14px;
    color: #F5F2ED;
    padding: .7rem .95rem .7rem .7rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.quiz-app--mosaico .quiz-option-top { position: relative; width: auto; flex: none; }
.quiz-app--mosaico .quiz-option-icon {
    width: 62px; height: 62px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    color: transparent;
}
.quiz-app--mosaico .quiz-option-icon svg { display: none; }
.quiz-app--mosaico .quiz-option:nth-child(1) .quiz-option-icon { background-image: url(/imagens/slide-tryfit-1.jpg); }
.quiz-app--mosaico .quiz-option:nth-child(2) .quiz-option-icon { background-image: url(/imagens/slide-tryfit-2.jpg); }
.quiz-app--mosaico .quiz-option:nth-child(3) .quiz-option-icon { background-image: url(/imagens/slide-tryfit-3.jpg); }
.quiz-app--mosaico .quiz-option:nth-child(4) .quiz-option-icon { background-image: url(/imagens/slide-tryfit-4.jpg); }
.quiz-app--mosaico .quiz-option:nth-child(5) .quiz-option-icon { background-image: url(/imagens/priscila-falando-para-grupo-espaco-abert.png); }
.quiz-app--mosaico .quiz-option:nth-child(6) .quiz-option-icon { background-image: url(/imagens/fotos-em-eventos.png); }
.quiz-app--mosaico .quiz-option-letter {
    position: absolute;
    top: -.4rem; left: -.4rem;
    width: 22px; height: 22px;
    background: var(--accent, #166534);
    border: 1.5px solid rgba(245, 242, 237, .4);
    color: #fff;
    font-size: .66rem;
}
.quiz-app--mosaico .quiz-option-text { font-size: .9rem; }
@media (hover: hover) {
    .quiz-app--mosaico .quiz-option:hover { transform: translateY(-3px); filter: brightness(1.06); border-color: rgba(233, 194, 133, .55); }
    .quiz-app--mosaico .quiz-option:hover .quiz-option-icon { transform: none; }
}
.quiz-app--mosaico .quiz-option.is-selected {
    border-color: #E9C285;
    box-shadow: 0 0 0 3px rgba(22, 101, 52, .4), 0 12px 26px rgba(0, 0, 0, .45);
}
.quiz-app--mosaico .quiz-option.is-selected .quiz-option-letter { background: #E9C285; color: var(--deep); }

/* ---------- RESPONSIVO DA VARIAÇÃO MOSAICO ---------- */
@media (max-width: 640px) {
    .quiz-app--mosaico .quiz-options { grid-template-columns: 1fr; }
    .quiz-app--mosaico .quiz-option { gap: .9rem; }
}