/* ── josimarjmv.com · v3-home.css — estilos SÓ da home (29/09/2026) ─────────────
Recria os valores inline do protótipo hifi
design/handoff-v3/"Site Josimar - Remodelagem v3.dc.html" sobre a base v3.css
(tokens, topbar, rodapé, pills, primitivas .v3-linha/.v3-sec, efeitos).
SEO de render (~/.claude/licoes-seo-render.md):
- hero SEM min-height de viewport no mobile; a partir de 900px, teto
min(100svh, 880px). O Google captura em 412×12140 sem rolar: H1 fica em y≈160px.
- nada aqui nasce com opacity:0 em elemento com texto (reveal só via v3.js).
- a faixa da galeria sem JS/robô é uma linha rolável; o marquee entra por classe.
─────────────────────────────────────────────────────────────────────────── */
/* ── Hero (#topo) ── */
.v3-hero { position: relative; background: var(--tinta); color: var(--creme); overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; }
/* Desktop: hero ocupa a dobra inteira até 1400px — cobre monitores 1440p/ultra-wide (pedido do Josimar,
29/09: com 880 sobrava uma faixa creme). Teto porque o texto fica ancorado embaixo: sem ele, no viewport
de 12.140px do renderizador do Google o H1 iria parar lá no fim (~/.claude/licoes-seo-render.md).
Mobile (<900px) segue sem min-height. */
@media (min-width: 900px) { .v3-hero { min-height: min(100svh, 1400px); } }
.v3-hero-txt { flex: 1 1 480px; position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gutter) clamp(28px, 4vw, 56px); }
/* Desktop: texto na altura dos olhos (leitura em F), não no pé do hero — centrado com viés pra cima
(padding inferior maior que o superior). Josimar, 29/09. */
@media (min-width: 900px) { .v3-hero-txt { justify-content: center; padding-top: 120px; padding-bottom: clamp(120px, 16vh, 220px); } }
.v3-hero-etiqueta { opacity: .75; }
.v3-hero h1 { margin-top: 18px; max-width: 13ch; }
.v3-hero-sub { margin-top: clamp(24px, 3vw, 44px); max-width: 520px; }
.v3-hero-sub p { font-size: 16px; line-height: 1.65; opacity: .85; }
.v3-hero-sub strong { font-weight: 600; }
.v3-hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 24px; }
.v3-hero-foto { flex: 1 1 420px; min-width: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: transparent; }
@media (min-width: 600px) { .v3-hero-foto { aspect-ratio: 1 / 1; } }
@media (min-width: 900px) { .v3-hero-foto { aspect-ratio: auto; } }
/* WebKit: aspect-ratio num item flex cujo único filho é absoluto (o Ken Burns) resolve em altura 0 —
a foto sumia no hero entre 320 e 899px (print do Josimar, 29/09). Altura por padding, à prova de bala. */
@media (max-width: 899px) {
.v3-hero-foto { aspect-ratio: auto; }
.v3-hero-foto::before { content: ""; display: block; padding-top: 125%; }
}
@media (min-width: 600px) and (max-width: 899px) { .v3-hero-foto::before { padding-top: 100%; } }
/* Ultra-wide (≥1721px): as duas colunas do hero param em 860px e ficam centradas no contêiner de 1720px —
antes a foto (600×600) escalava pela largura da coluna e cortava o queixo em 2560/3440. */
@media (min-width: 1721px) {
.v3-hero { justify-content: center; }
.v3-hero-txt, .v3-hero-foto { max-width: 860px; }
}
.v3-hero-foto .v3-kenburns { position: absolute; inset: 0;
/* A foto tem fundo preto e o hero é #141210: a emenda entre as colunas aparecia (Josimar, 29/09).
lighten = onde a foto é mais escura que o fundo, fica o fundo → o preto da foto vira exatamente a
cor do site; máscara dissolve as bordas laterais. isolation na coluna garante o blend contra a cor sólida. */
mix-blend-mode: lighten;
/* coluna sem fundo próprio: o blend é contra o fundo + a grade do hero, que continua atrás da foto
(com fundo opaco a grade sumia só ali e desenhava o retângulo da foto). Máscara elíptica dissolve
as bordas do JPEG na silhueta. */
-webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 52%, rgba(0,0,0,.55) 72%, transparent 100%);
mask-image: radial-gradient(ellipse 62% 78% at 50% 42%, #000 52%, rgba(0,0,0,.55) 72%, transparent 100%); }
.v3-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* ── Manifesto (#manifesto) ── */
.v3-manifesto { padding: clamp(90px, 12vw, 200px) var(--gutter); }
.v3-manifesto-txt { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 70px); line-height: 1.12; letter-spacing: -.015em; max-width: 24ch; }
.v3-manifesto-txt em { font-style: italic; color: var(--acento); }
.v3-manifesto-par { margin-top: clamp(40px, 5vw, 80px); }
@media (min-width: 900px) { .v3-manifesto-par { padding-left: calc(var(--lateral) + var(--gap-lateral)); } }
.v3-manifesto-cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 56px); }
.v3-manifesto-cols p { flex: 1 1 280px; font-size: 16px; line-height: 1.7; color: var(--sec); max-width: 44ch; }
.v3-manifesto-cols strong { color: var(--tinta); font-weight: 600; }
/* ── Fatos (lista rótulo / valor / nota) ── */
.v3-fatos-cab { margin-bottom: clamp(28px, 3vw, 44px); }
.v3-fato { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(14px, 3vw, 60px); padding: clamp(16px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--linha); }
.v3-fato-rotulo { flex: 0 0 var(--lateral); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mudo); }
.v3-fato-valor { flex: 0 1 auto; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 58px); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.v3-fato-nota { flex: 1 1 260px; min-width: 0; font-size: 14.5px; line-height: 1.55; color: var(--mudo2); max-width: 60ch; }
.v3-fato-nota b { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 2px; }
.v3-fatos-nota { margin-top: 18px; max-width: 72ch; }
@media (max-width: 640px) {
.v3-fato { gap: 8px 14px; }
.v3-fato-rotulo { flex-basis: 100%; }
}
/* ── Capítulo 01 · A operação (#prova) ── */
.v3-prova { position: relative; overflow: hidden; }
.v3-prova-cab { padding: clamp(60px, 7vw, 120px) var(--gutter) 0; }
.v3-prova-img { position: relative; aspect-ratio: 21 / 9; min-height: 260px; overflow: hidden; margin-top: clamp(32px, 4vw, 64px); background: var(--escuro2); }
.v3-prova-img [data-parallax] { position: absolute; inset: -12% 0; will-change: transform; }
.v3-prova-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.v3-legenda { margin-top: 12px; }
.v3-prova-corpo { padding: clamp(40px, 5vw, 80px) 0 clamp(80px, 9vw, 140px); }
.v3-prova-intro { padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.v3-prova-txt { flex: 1 1 380px; max-width: 54ch; }
.v3-prova-txt p { font-size: 16.5px; line-height: 1.65; opacity: .8; }
.v3-prova-txt .v3-prova-abre { font-weight: 600; opacity: 1; margin-bottom: 10px; }
.v3-arraste { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.v3-anima .v3-arraste .v3-traco { animation: v3-drift 2.4s ease-in-out infinite; }
/* faixa: scroll-snap + drag (v3-home.js). Alinha o 1º card com o contêiner de 1720px em telas ultra largas. */
.v3-prod-strip { --strip-pad: var(--gutter); /* 29/09: a faixa começa no gutter em QUALQUER largura (no ultra-wide, alinhar ao contêiner deixava o 1º card no meio da tela) */
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--strip-pad);
padding: clamp(28px, 3vw, 44px) var(--gutter) 8px; padding-left: var(--strip-pad);
-webkit-overflow-scrolling: touch; cursor: grab; user-select: none; -webkit-user-select: none; }
.v3-prod-strip.is-arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
html.v3-cursor .v3-prod-strip { cursor: none; }
.v3-prod { flex: 0 0 min(78vw, 420px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; min-height: 400px; padding: 28px; border: 1px solid var(--linha-esc); background: var(--escuro3); color: var(--creme); -webkit-user-drag: none; transition: background .5s var(--ease), border-color .5s var(--ease); }
.v3-prod:hover { background: var(--escuro2); border-color: var(--linha-esc3); color: var(--creme); }
.v3-prod-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v3-prod-num { font-family: var(--serif); font-size: 15px; opacity: .5; }
.v3-prod-tag { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; text-align: right; }
.v3-prod-nome { font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.v3-prod-desc { font-size: 14.5px; line-height: 1.6; opacity: .72; margin-top: 16px; }
.v3-prod-desc strong { font-weight: 600; }
.v3-prod-linha { margin-top: 20px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; opacity: .5; }
.v3-prod-link { margin-top: 12px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--acento-claro); }
.v3-strip-fim { flex: 0 0 var(--gutter); }
/* ── Capítulo 04 · As imersões (#imersoes) ── */
.v3-imersoes-atalhos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.v3-imersoes-lead { margin-top: 22px; }
.v3-imersoes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(48px, 6vw, 96px); }
/* 4 cards: evita 3+1 órfão nas larguras em que só 3 colunas de 420px cabem */
@media (min-width: 1260px) and (max-width: 1839px) { .v3-imersoes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1840px) { .v3-imersoes-grid { grid-template-columns: repeat(4, 1fr); } }
.v3-im { display: flex; flex-direction: column; color: var(--tinta); }
.v3-im:hover { color: var(--tinta); }
.v3-im-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--areia); }
.v3-im-foto > :first-child { position: absolute; inset: 0; }
.v3-im-foto img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder desenhado enquanto as fotos das imersões não existem (trocar por ![]()
em assets/images/imersoes/.jpg) */
.v3-im-placeholder { background: var(--tinta); color: var(--creme); display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(18px, 2vw, 28px); }
.v3-im-placeholder .v3-grade { -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 80%); }
.v3-im-placeholder-num { position: relative; font-family: var(--serif); font-size: clamp(88px, 9vw, 160px); line-height: .8; letter-spacing: -.04em; opacity: .5; }
.v3-im-selo { position: absolute; left: 18px; top: 18px; z-index: 1; white-space: nowrap; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--creme); background: rgba(20, 18, 16, .72); padding: 7px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v3-im-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tinta); }
.v3-im-num { font-family: var(--serif); font-size: 15px; color: var(--mudo); }
/* selo = situação comercial (ver comentário no index.html) */
.v3-im-selo--compra { background: var(--creme); color: var(--tinta); }
.v3-im-selo--pre::before, .v3-im-selo--carrinho::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acento-claro); margin-right: 8px; vertical-align: 1px; }
.v3-im-selo--carrinho { background: var(--acento); color: var(--creme); }
.v3-im-selo--carrinho::before { background: var(--creme); }
.v3-im-formato { margin-top: 16px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mudo); }
.v3-im-formato + .v3-im-meta { margin-top: 10px; }
.v3-im-desc { font-size: 15px; line-height: 1.65; color: var(--sec); margin-top: 12px; max-width: 52ch; }
.v3-im-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 18px; margin-top: 18px; }
.v3-im-info { font-size: 13px; line-height: 1.7; letter-spacing: .02em; color: var(--mudo2); }
.v3-im-info b { font-weight: 600; color: var(--tinta); }
.v3-im-cta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); font-weight: 600; white-space: nowrap; }
/* O contrato */
.v3-contrato { margin-top: clamp(64px, 8vw, 120px); }
.v3-contrato-lado { flex: 0 0 var(--lateral); min-width: 0; }
.v3-contrato-lado .v3-rotulo { padding-top: 8px; }
.v3-contrato-nao { font-size: 14px; line-height: 1.6; color: var(--mudo2); margin-top: 18px; }
.v3-contrato-nao strong { color: var(--tinta); font-weight: 600; }
.v3-contrato-titulo { margin-bottom: 22px; }
.v3-regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
.v3-regra { padding: 20px 0; border-bottom: 1px solid var(--linha); }
.v3-regra-forte { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.v3-regra-resto { font-size: 14.5px; line-height: 1.6; color: var(--mudo2); margin-top: 8px; }
@media (max-width: 640px) { .v3-contrato-lado { flex-basis: 100%; } .v3-contrato-lado .v3-rotulo { padding-top: 0; } }
/* ── Capítulo 03 · Depoimentos (#depoimentos) ── */
.v3-depo { position: relative; overflow: hidden; }
.v3-depo-topo { display: flex; flex-wrap: wrap; }
.v3-depo-img { flex: 1 1 420px; min-width: 0; position: relative; min-height: 520px; overflow: hidden; background: var(--escuro2); }
.v3-depo-img [data-parallax] { position: absolute; inset: -10% 0; will-change: transform; }
.v3-depo-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.v3-depo-img-legenda { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; margin: 0; opacity: .85; color: var(--creme); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
@media (max-width: 899px) { .v3-depo-img { min-height: 0; } .v3-depo-img::before { content: ""; display: block; padding-top: 75%; } }
.v3-depo-txt { flex: 1.2 1 520px; min-width: 0; padding: clamp(60px, 7vw, 120px) var(--gutter); }
.v3-depo-etq { opacity: .7; }
.v3-depo-txt h2 { margin-top: clamp(20px, 2.4vw, 36px); max-width: 16ch; }
.v3-depo-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(28px, 3vw, 44px); }
.v3-depo-video { display: flex; flex-direction: column; }
.v3-depo-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--escuro2); }
.v3-depo-info { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha-esc); }
.v3-depo-nome { font-size: 15.5px; font-weight: 600; }
.v3-depo-ctx { font-size: 14px; line-height: 1.55; opacity: .65; margin-top: 5px; }
.v3-depo-turma { padding: 0 var(--gutter) clamp(80px, 9vw, 140px); }
.v3-depo-turma-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--linha-esc); }
.v3-depo-turma-cab p { font-size: 14px; opacity: .6; max-width: 52ch; line-height: 1.6; }
.v3-feedbacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 48px) clamp(24px, 3vw, 56px); margin-top: clamp(28px, 3vw, 48px); }
.v3-feedback { padding-top: 20px; border-top: 1px solid var(--linha-esc); }
.v3-feedback p { font-size: 15.5px; line-height: 1.68; opacity: .85; }
.v3-feedback-autor { margin-top: 16px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.v3-depo-nota { margin-top: clamp(28px, 3vw, 44px); max-width: 72ch; }
/* ── Capítulo 02 · Trajetória (#trajetoria) — ano gigante fixo à esquerda ── */
.v3-rotulo-sub { display: block; margin-top: 6px; opacity: .7; }
.v3-traj-lead { margin-top: 22px; }
.v3-traj-corpo { display: flex; flex-wrap: wrap; gap: var(--gap-lateral); margin-top: clamp(48px, 6vw, 96px); }
.v3-traj-ano-col { flex: 0 0 clamp(120px, 24vw, 380px); min-width: 0; }
.v3-traj-sticky { position: sticky; top: 120px; }
.v3-traj-ano { font-family: var(--serif); font-size: clamp(72px, 12vw, 220px); line-height: .9; letter-spacing: -.04em; color: var(--tinta); transition: opacity .3s; }
.v3-traj-traco { width: 60px; height: 1px; background: var(--acento); margin-top: 22px; }
.v3-traj-lista { flex: 1 1 480px; min-width: 0; }
.v3-traj-item { padding: clamp(28px, 3vw, 48px) 0; border-top: 1px solid var(--linha); }
.v3-traj-item-ano { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--acento); }
.v3-traj-item h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.08; letter-spacing: -.01em; margin-top: 14px; }
.v3-traj-item p { font-size: 16px; line-height: 1.7; color: var(--sec); margin-top: 14px; max-width: 62ch; }
.v3-traj-item strong { font-weight: 600; color: var(--tinta); }
.v3-traj-fim { border-top: 1px solid var(--linha); }
@media (max-width: 899px) {
.v3-traj-corpo { gap: 24px; }
.v3-traj-ano-col { flex-basis: 100%; }
.v3-traj-sticky { position: static; }
}
/* ── Quem confia ── */
.v3-clientes .v3-rotulo { padding-top: 8px; }
.v3-clientes h2 { margin-bottom: 16px; }
.v3-clientes-lead { max-width: 60ch; }
.v3-clientes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin-top: 28px; }
.v3-cliente { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 24px); padding: 14px 0; border-bottom: 1px solid var(--linha); }
/* ── Trajetória em imagens (#galeria) — filtros + faixa contínua + lightbox ── */
.v3-galeria-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.v3-galeria-titulo { min-width: 0; }
.v3-galeria-lead { margin-top: 16px; }
/* faixa: sangra até as bordas da seção (margem negativa = gutter) */
.v3-galeria-faixa { margin: clamp(28px, 3vw, 44px) calc(-1 * var(--gutter)) 0; }
.v3-galeria-strip { display: flex; overflow-x: auto; padding: 0 var(--gutter) 4px; scroll-snap-type: x proximity; }
.v3-foto { flex: 0 0 auto; width: clamp(260px, 26vw, 420px); margin: 0 14px 0 0; scroll-snap-align: start; cursor: pointer; outline-offset: 4px; }
html.v3-cursor .v3-foto { cursor: none; }
.v3-foto-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--areia); }
.v3-foto-img img { width: 100%; height: 100%; object-fit: cover; }
.v3-foto figcaption { padding: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--mudo2); white-space: normal; }
/* com JS e navegador real: marquee (clones aria-hidden fecham o loop; --dur = nº de fotos × 6s) */
.v3-galeria-faixa.is-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.v3-galeria-faixa.is-marquee .v3-galeria-strip { overflow: visible; width: max-content; padding: 0; animation: v3-marquee var(--dur, 126s) linear infinite; will-change: transform; }
.v3-galeria-faixa.is-marquee:hover .v3-galeria-strip { animation-play-state: paused; }
/* lightbox (