/* =====================================================================
   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 */
    --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 ============ */
.text-reveal-wrapper {
    overflow: hidden; display: inline-block; vertical-align: top;
    padding-bottom: .1em; margin-bottom: -.1em;
}
.text-reveal { display: inline-block; will-change: transform; }

/* Elementos do hero começam escondidos SOMENTE quando o JS está ativo */
.js .hero-el.text-reveal { transform: translateY(110%); }
.js .hero-el:not(.text-reveal) { opacity: 0; }

/* Quando o preloader termina (body.site-ready), o CSS revela o hero em cascata */
body.site-ready .hero-el { transition: transform 2.6s var(--ease-out), opacity 2.4s ease; transition-delay: var(--d, 0s); }
body.site-ready .hero-el.text-reveal { transform: translateY(0); }
body.site-ready .hero-el:not(.text-reveal) { opacity: 1; }

/* 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 */
.js [data-reveal].grain-reveal { opacity: 1; transform: none; }
.js .grain-reveal img { opacity: 0; filter: blur(10px) contrast(1.6) saturate(.15) brightness(1.15); transition: opacity 2.4s ease, filter 2.6s ease; }
.js .grain-reveal.revealed img { opacity: 1; filter: blur(0) contrast(1) saturate(1) brightness(1); }
.js .grain-reveal::after {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    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");
    opacity: .6; transition: opacity 2.8s ease .3s;
}
.js .grain-reveal.revealed::after { opacity: 0; }

/* 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,
body.is-home #navbar {
    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,
    body.is-home #navbar { 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 {
    isolation: isolate;
    border-color: rgba(220, 220, 220, .75);
    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-bg { position: absolute; inset: 0; z-index: 0; background: var(--white); }
.hero-slides { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* 72% empurra o "olhar" p/ baixo: corta mais o topo (teto) e mostra mais as pessoas */
    object-fit: cover; object-position: center 72%;
    opacity: 0; transition: opacity 1.4s ease;
    will-change: opacity, transform;
}
/* 1ª slide (auditório) tem MUITO teto — reforço extra p/ esconder o forro */
.hero-slide:nth-child(1) { object-position: center 82%; }
.hero-slide.active { opacity: .92; animation: kenBurns 7s ease-out forwards; }
@keyframes kenBurns { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.hero-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
        linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.10) 50%, rgba(255,255,255,.55));
}

.hero-content {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    margin-top: 1.5rem;
}
@media (min-width: 768px) { .hero-content { margin-top: 3rem; } }

.hero-eyebrow-wrap { margin-bottom: 1.5rem; }
.hero-eyebrow { text-align: center; font-size: 10px; }
@media (min-width: 768px) { .hero-eyebrow { font-size: 12px; } }

.hero-title {
    font-family: var(--serif);
    font-size: clamp(2.25rem, 6vw, 5.5rem);
    line-height: 1.05; font-weight: 300;
    text-align: center; color: #3a3632;
    display: flex; flex-direction: column; align-items: center;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, .75),
        0 4px 16px rgba(255, 255, 255, .55),
        0 12px 40px rgba(41, 37, 36, .18);
}
.hero-title-row {
    display: flex; align-items: center; gap: 1.5rem;
    margin-top: .5rem;
}
@media (min-width: 768px) { .hero-title-row { gap: 3rem; margin-top: 1.5rem; } }
.hero-line { width: 4rem; height: 1px; background: var(--accent); display: none; }
@media (min-width: 768px) { .hero-line { display: block; width: 8rem; } }
.hero-title .italic { font-style: italic; }

.hero-sub-wrap { margin-top: 2.5rem; }
@media (min-width: 768px) { .hero-sub-wrap { margin-top: 3rem; } }
.hero-sub {
    font-size: 14px; font-weight: 400;
    max-width: 28rem; margin-inline: auto;
    text-align: center; color: rgba(41, 37, 36, .95);
    line-height: 1.5; letter-spacing: .1em;
    /* Fundo tipo nuvem/blur atrás das letras */
    text-shadow:
        0 0 8px rgba(255, 255, 255, .5),
        0 0 12px rgba(255, 255, 255, .4),
        0 0 16px rgba(255, 255, 255, .3),
        0 2px 12px rgba(255, 255, 255, .6);
}
@media (min-width: 768px) { .hero-sub { font-size: 16px; } }

.hero-eyebrow {
    font-weight: bold;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, .8),
        0 3px 12px rgba(255, 255, 255, .6);
}

/* CTAs do hero (primário: teste gratuito · secundário: serviços) */
.hero-ctas {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 2.25rem;
}
@media (min-width: 768px) { .hero-ctas { gap: 1.25rem; margin-top: 2.75rem; } }
.hero-ctas .btn-solid { text-align: center; }
.hero-ctas .btn-pill { background: rgba(255,255,255,.55); }

/* 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 */
.scroll-hint {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-hint span {
    font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(41, 37, 36, .8);
}
.scroll-hint-line { width: 1px; height: 2.5rem; background: rgba(41,37,36,.3); position: relative; overflow: hidden; }
@media (min-width: 768px) { .scroll-hint-line { height: 3.5rem; } }
.scroll-hint-line i {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: var(--accent);
    animation: scrollDown 1.5s ease-in-out infinite;
}
@keyframes scrollDown {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

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

/* Espaçamento reduzido em 30% entre cereja-do-bolo, energy-codes, formatos e consultoria (gap acumulado entre seções estava grande demais) */
#cereja-do-bolo.section--pad { padding-bottom: 4.9rem; }
#energy-codes.section--pad { padding-top: 4.9rem; padding-bottom: 4.9rem; }
#formatos.section--pad { padding-top: 4.9rem; padding-bottom: 4.9rem; }
#consultoria.section--pad { padding-top: 4.9rem; }
@media (min-width: 768px) {
    #cereja-do-bolo.section--pad { padding-bottom: 7.7rem; }
    #energy-codes.section--pad { padding-top: 7.7rem; padding-bottom: 7.7rem; }
    #formatos.section--pad { padding-top: 7.7rem; padding-bottom: 7.7rem; }
    #consultoria.section--pad { padding-top: 7.7rem; }
}

.sec-head { text-align: center; margin-bottom: 5rem; }
@media (min-width: 768px) { .sec-head { margin-bottom: 6rem; } }
/* Ajuste: espaço reduzido pela metade entre o título e o texto seguinte, só na seção Consultoria */
#consultoria .sec-head { margin-bottom: 2.5rem; }
@media (min-width: 768px) { #consultoria .sec-head { margin-bottom: 3rem; } }
.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); }
.italic-wood { font-style: italic; color: var(--wood-light); }

/* ============ SOBRE ============ */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) {
    .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6rem; }
    .about-copy { grid-column: 2 / span 5; }
    .about-media { grid-column: 8 / span 5; }
}
.about-copy .eyebrow { margin-bottom: 1rem; }

/* Ajuste cirúrgico — seção "Cereja do Bolo" (desktop) */
@media (min-width: 1024px) {
    #cereja-do-bolo .about-grid { gap: 3.6rem; }
}
#cereja-do-bolo .about-title { margin-bottom: 1.25rem; }

.about-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1; color: var(--ink);
    margin-bottom: 2.5rem;
}
.about-text {
    font-size: 14px; font-weight: 300;
    color: rgba(41, 37, 36, .7);
    line-height: 1.7; letter-spacing: .02em;
    margin-bottom: 3rem;
}
.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); }

.about-media { position: relative; padding-inline: 1rem; }
@media (min-width: 640px) { .about-media { padding-inline: 0; } }
.about-frame {
    position: absolute; inset: -1rem;
    border: 1px solid rgba(41, 37, 36, .05);
    transform: translate(1rem, -1rem);
    display: none; z-index: 0;
}
@media (min-width: 768px) { .about-frame { display: block; } }
.about-photo-box {
    position: relative; z-index: 10;
    overflow: hidden; border-radius: 2px;
    background: var(--surface);
    aspect-ratio: 4 / 5;
}
.about-photo-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; will-change: transform; }
.about-badge {
    position: absolute; bottom: -2rem; left: 0; z-index: 20;
    background: var(--surface);
    padding: 1.5rem;
    border: 1px solid rgba(41, 37, 36, .1);
    box-shadow: 0 20px 30px -12px rgba(41, 37, 36, .1);
}
@media (min-width: 640px) { .about-badge { left: -2rem; padding: 2rem; } }
.about-badge .num { font-family: var(--serif); font-size: 2.25rem; color: var(--accent); margin-bottom: .25rem; }
@media (min-width: 640px) { .about-badge .num { font-size: 3rem; } }
.badge-label, .stat-label {
    font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(41, 37, 36, .7);
}

/* ============ 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 */
#metodo {
    background: var(--surface);
    border-top: 1px solid rgba(41,37,36,.05);
    border-bottom: 1px solid rgba(41,37,36,.05);
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
}

.metodo-bg-title {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: 0; width: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.metodo-bg-title h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: 16vw; line-height: 1;
    white-space: nowrap; margin-left: -4vw;
    color: transparent; -webkit-text-stroke: 1px rgba(41,37,36,.12);
    opacity: .3;
}

.metodo-head-mobile { position: relative; z-index: 10; margin-bottom: 2.5rem; padding: 0 1.5rem; }
@media (min-width: 1024px) { .metodo-head-mobile { display: none; } }
.metodo-head-mobile .eyebrow { margin-bottom: 1rem; }
/* Texto de introdução que no desktop fica dentro do trilho (primeiro slide) */
.metodo-head-p { margin-top: 1rem; font-size: 12px; color: rgba(41,37,36,.65); line-height: 1.6; max-width: 28rem; }
.metodo-h3 { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.2; color: var(--ink); }
.metodo-h3 .italic { font-style: italic; }
.drag-hint { margin-top: 1rem; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(41,37,36,.5); }

.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; }
}

.pillars-intro { display: none; }
@media (min-width: 1024px) {
    .pillars-intro { display: flex; width: 26vw; flex-shrink: 0; align-items: center; }
}
.pillars-intro .eyebrow { margin-bottom: 1.5rem; }
.pillars-intro p {
    margin-top: 1.5rem; font-size: 12px;
    color: rgba(41,37,36,.65); line-height: 1.7; max-width: 20rem;
}

.pillar-card { width: 78vw; flex-shrink: 0; scroll-snap-align: center; }
@media (min-width: 640px) { .pillar-card { width: 60vw; } }
@media (min-width: 1024px) { .pillar-card { width: 38vw; } }

.pillar-media {
    position: relative; overflow: hidden; border-radius: 2px;
    aspect-ratio: 3 / 4;
    background: rgba(41, 37, 36, .05);
    cursor: pointer;
}
@media (min-width: 640px) { .pillar-media { aspect-ratio: auto; height: 60vh; } }
@media (min-width: 1024px) { .pillar-media { height: 62vh; } }
/* Celular: limita a altura do card para tudo caber na tela "grudada" */
@media (max-width: 639px) {
    .pillar-media { aspect-ratio: auto; height: 40svh; }
    .metodo-head-mobile { margin-bottom: 1.25rem; }
}
.pillar-media .veil {
    position: absolute; inset: 0; z-index: 10; pointer-events: none;
    background: rgba(255, 255, 255, .15);
    transition: background-color .7s ease;
}
.pillar-card:hover .pillar-media .veil { background: transparent; }
.pillar-img {
    width: 100%; height: 100%; object-fit: cover;
    pointer-events: none;
    transition: transform 1s var(--ease-out);
}
.pillar-card:hover .pillar-img { transform: scale(1.05); }
.pillar-zoom {
    position: absolute; top: 50%; left: 50%; z-index: 20;
    width: 6rem; height: 6rem; border-radius: 50%;
    background: rgba(41, 37, 36, .1);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(41, 37, 36, .3);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translate(-50%, -50%) scale(.5);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.pillar-card:hover .pillar-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pillar-zoom span { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; color: var(--ink); }

.pillar-foot { margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; }
@media (min-width: 1024px) { .pillar-foot { margin-top: 2rem; } }
.pillar-foot-left { display: flex; align-items: flex-start; gap: .75rem; }
.pillar-icon { width: 1.5rem; height: auto; margin-top: .25rem; opacity: .8; }
.pillar-icon--wide { width: 1.75rem; }
.pillar-kicker { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--wood-light); margin-bottom: .5rem; }
.pillar-name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
@media (min-width: 1024px) { .pillar-name { font-size: 1.875rem; } }
.pillar-num { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: rgba(41,37,36,.5); }

.pillars-cta {
    width: 70vw; flex-shrink: 0; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 0;
}
@media (min-width: 640px) { .pillars-cta { width: 40vw; } }
@media (min-width: 1024px) { .pillars-cta { width: 32vw; } }
.btn-circle {
    width: 11rem; height: 11rem; border-radius: 50%;
    border: 1px solid rgba(41, 37, 36, .2);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 1.5rem;
}
@media (min-width: 1024px) { .btn-circle { width: 12rem; height: 12rem; } }
.btn-circle .l1 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; }
.btn-circle .l2 { font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--accent); }
.btn-circle:hover .l1, .btn-circle:hover .l2 { color: #fff; }

/* ============ PLATAFORMA (painel escuro) ============ */
#plataforma { overflow: hidden; }
.platform-panel {
    position: relative;
    background: var(--deep);
    border-radius: 2px; overflow: hidden;
}
.platform-glow-1 {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at top left, rgba(22,101,52,.25), transparent 55%);
}
.platform-glow-2 {
    position: absolute; bottom: -6rem; right: -6rem;
    width: 24rem; height: 24rem; border-radius: 50%;
    background: rgba(22, 101, 52, .1);
    filter: blur(64px);
    pointer-events: none;
}
.platform-grid {
    position: relative; z-index: 10;
    display: grid; grid-template-columns: 1fr;
    gap: 3rem; align-items: center;
    padding: 2.5rem;
}
@media (min-width: 768px) { .platform-grid { padding: 4rem; } }
@media (min-width: 1024px) { .platform-grid { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 5rem; } }

.platform-copy .eyebrow { margin-bottom: 1.5rem; color: #3f9d63; }
.platform-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1; color: var(--white);
    margin-bottom: 2rem;
}
.platform-text {
    font-size: 14px; font-weight: 300;
    color: rgba(255, 255, 255, .92);
    line-height: 1.7; max-width: 28rem;
    margin-bottom: 2.5rem;
}
.platform-list { margin-bottom: 3rem; font-size: 12px; color: rgba(255, 255, 255, .95); }
.platform-list li { display: flex; align-items: center; gap: 1rem; }
.platform-list li + li { margin-top: 1.25rem; }
.platform-list .check {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #a9efc7;
}
/* Ícones de "confirmado" pulsando um de cada vez (ciclo de 3s = ~1s cada) */
.platform-list .check { animation: checkPulse 3s ease-in-out infinite; }
.platform-list li:nth-child(2) .check { animation-delay: 1s; }
.platform-list li:nth-child(3) .check { animation-delay: 2s; }
@keyframes checkPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(169, 239, 199, .55); }
    16%  { transform: scale(1.18); }
    33%  { transform: scale(1); box-shadow: 0 0 0 10px rgba(63, 157, 99, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(63, 157, 99, 0); }
}
.platform-media { display: flex; justify-content: center; }
@media (min-width: 1024px) { .platform-media { justify-content: flex-end; } }
.platform-media img {
    width: 100%; max-width: 28rem; height: auto;
    filter: drop-shadow(0 25px 25px rgba(0,0,0,.35));
    will-change: transform;
}
@media (min-width: 1024px) { .platform-media img { max-width: 32rem; } }

/* ============ ROTAS / CONSULTORIA ============ */
#expertise { padding: 6rem 0 3.5rem; background: var(--white); }
@media (min-width: 768px) { #expertise { padding: 8rem 0 5rem; } }
/* 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; } }

.routes-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .routes-grid { grid-template-columns: repeat(3, 1fr); } }
/* 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) */
@media (min-width: 768px) {
    .routes-grid .route-card:nth-child(2) { --d: .8s; }
    .routes-grid .route-card:nth-child(3) { --d: 1.6s; }
}
@media (min-width: 1024px) { .routes-grid { gap: 2rem; } }

.route-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid rgba(41, 37, 36, .1);
    background: var(--surface);
    padding: 2.5rem;
    transition: border-color .5s ease, box-shadow .5s ease;
}
/* Contorno de luz suave quando o mouse está em cima do card */
.route-card:hover {
    border-color: rgba(22, 101, 52, .4);
    box-shadow: 0 0 0 1px rgba(22, 101, 52, .25), 0 0 34px -6px rgba(22, 101, 52, .45);
}
@media (min-width: 1024px) { .route-card { padding: 3rem; } }
.route-num {
    width: 3rem; height: 3rem; border-radius: 50%;
    border: 1px solid rgba(41, 37, 36, .1);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2.5rem;
    font-family: var(--serif); font-size: 1.125rem; color: var(--accent);
    transition: background-color .5s ease, color .5s ease;
}
@media (min-width: 1024px) { .route-num { margin-bottom: 3rem; } }
.route-card:hover .route-num { background: var(--accent); color: var(--white); }
.route-kicker { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--wood-light); margin-bottom: .75rem; }
.route-title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.3; color: var(--ink); margin-bottom: 1.5rem; }
/* flex:1 empurra o botão e a linha para a base — os 3 cards ficam alinhados */
.route-text { font-size: 12px; font-weight: 300; color: rgba(41,37,36,.65); line-height: 1.7; margin-bottom: 2rem; flex: 1; }
.route-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 2rem;
    padding: .75rem 0; min-height: 44px; /* FIX: QA - área de toque mínima 44px em mobile */
}
.route-link svg { transition: transform .3s ease; }
.route-link:hover svg { transform: translateX(4px); }
.route-line { width: 100%; height: 1px; background: rgba(41,37,36,.1); transition: background-color .5s ease; }
.route-card:hover .route-line { background: rgba(22, 101, 52, .5); }

/* ============ 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-carousel { margin-bottom: 5rem; }
@media (min-width: 768px) { .quotes-carousel { margin-bottom: 6rem; } }
.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; } }
.quote-slide { flex: 0 0 100%; display: flex; }
@media (min-width: 768px) { .quote-slide { flex: 0 0 calc((100% - 3rem) / 3); } }
@media (min-width: 1024px) { .quote-slide { flex: 0 0 calc((100% - 4rem) / 3); } }

/* 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); }
.quote-flip-inner {
    position: relative; display: grid; height: 100%;
    transform-style: preserve-3d;
    transition: transform .9s var(--ease-out);
}
.quote-flip.flipped .quote-flip-inner { transform: rotateY(180deg); }
.quote-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.quote-back {
    transform: rotateY(180deg);
    overflow: hidden;
    border: 1px solid rgba(41, 37, 36, .1);
    background: var(--white);
}
.quote-back img { width: 100%; height: 100%; object-fit: cover; }

/* Setas de navegação (tamanho médio, embaixo dos cards) */
.quotes-nav { display: flex; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }
.quote-arrow {
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    border: 1px solid rgba(41, 37, 36, .3);
    background: var(--white); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.quote-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.quote-arrow:disabled { opacity: .3; pointer-events: none; }

.quote-card {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid rgba(41, 37, 36, .1);
    background: var(--white);
    padding: 2rem;
    height: 100%;
}
@media (min-width: 1024px) { .quote-card { padding: 2.5rem; } }
.quote-mark {
    position: absolute; top: 1rem; left: 1.5rem;
    font-family: var(--serif); font-size: 4.5rem; line-height: 1;
    color: rgba(22, 101, 52, .15);
    user-select: none;
}
.quote-text {
    position: relative; z-index: 10; flex: 1;
    /* Centraliza o texto no meio do card */
    display: flex; align-items: center;
    font-family: var(--serif); font-style: italic;
    font-size: 1.125rem; line-height: 1.6; color: var(--ink);
    margin-bottom: 2rem; padding-top: 1.5rem;
}
.quote-foot { display: flex; align-items: center; gap: 1rem; }
.quote-avatar {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--accent); color: var(--white);
    font-size: 11px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quote-who { font-size: 12px; }
.quote-who .name { display: block; font-weight: 500; color: var(--ink); }
.quote-who .role { display: block; font-size: 11px; margin-top: .125rem; color: rgba(41,37,36,.6); }

.stats-row {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3rem;
    padding-top: 3.5rem;
    border-top: 1px solid rgba(41, 37, 36, .1);
}
@media (min-width: 640px) { .stats-row { flex-direction: row; gap: 5rem; padding-top: 4rem; } }
.stat { text-align: center; }
/* Números e rótulos ~50% maiores */
.stat .num { font-family: var(--serif); font-size: 4.5rem; color: var(--accent); margin-bottom: .5rem; }
.stat .stat-label { font-size: 13px; }

/* ============ 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;
    color: var(--ink);
}
.impact-content .eyebrow {
    color: var(--ink); margin-bottom: 2rem;
    font-weight: 600;
}
.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: 700;
    letter-spacing: .1em; text-transform: uppercase;
    max-width: 32rem; margin: 0 auto 3rem;
}

/* ============ 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, [tabindex]: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) ============ */
.media-video { display: block; width: 100%; height: auto; border-radius: inherit; background: var(--deep); }
.about-photo-box .media-video { aspect-ratio: 4 / 5; object-fit: cover; }
.consultoria-video { max-width: 44rem; margin: 0 auto 2.5rem; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(28, 25, 23, .18); }
/* Ajuste: altura de exibição parado reduzida pela metade (o vídeo é 4:3; 16:9 corta a altura ~metade sem achatar demais) */
.consultoria-video video { aspect-ratio: 16 / 9; object-fit: cover; }
/* Ajuste: ao dar play, o vídeo cresce ali mesmo (sem fullscreen nativo) até a altura da tela do usuário */
.consultoria-video video.is-playing { aspect-ratio: auto; object-fit: contain; height: 100vh; width: 100%; }