/* ============================================================
   VENTURA / SISTEMA DE DESIGN / COMPONENTES
   Todos funcionam nos três temas. Nenhum lê cor bruta, só alias.
   Depende de tokens/tokens.css e css/base.css.
   ============================================================ */

/* ============ LAYOUT ============ */

.secao{ position:relative; padding:var(--secao-y) 0; background:var(--fundo); }
.secao-alt{ background:var(--fundo-alt); }
.secao-verde{ background:var(--verde-superficie); --texto:var(--texto-escuro); color:var(--texto); }
.secao + .secao{ border-top:1px solid var(--borda); }

.conteudo{
  position:relative; z-index:60;
  max-width:var(--largura-conteudo);
  margin:0 auto; padding:0 var(--secao-x);
}

.grade{ display:grid; gap:0; }
@media (min-width:640px){ .grade-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  .grade-3{ grid-template-columns:repeat(3,1fr); }
  .grade-4{ grid-template-columns:repeat(4,1fr); }
}

/* ============ MOLDURA DE METADADO ============
   Referências 02, 06, 09, 10, 15 e 23. Está em toda peça. */
.moldura{ position:relative; }
.moldura-topo, .moldura-base{
  position:absolute; left:var(--e-md); right:var(--e-md); z-index:60;
  display:flex; justify-content:space-between; gap:var(--e-sm);
  font-family:var(--fonte-mono); font-size:var(--texto-micro);
  letter-spacing:2px; text-transform:uppercase; color:var(--texto-sutil);
}
.moldura-topo{ top:var(--e-md); }
.moldura-base{ bottom:var(--e-md); }

/* ============ GRID FINO SOBREPOSTO ============ (referência 15) */
.grid-fino{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(var(--cor-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cor-grid) 1px, transparent 1px);
  background-size:11.11% 92px;
}

/* ============ NÚMERO TRANSLÚCIDO ============ (referências 01 e 09) */
.numero-fundo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; pointer-events:none;
  font-family:var(--fonte-display); font-weight:var(--peso-display);
  font-size:min(46vw, 400px); line-height:1;
  color:var(--texto); opacity:.06;
}

/* ============ HERO E PEÇA ============ */
.hero, .peca{
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--fundo);
}
.hero{ min-height:100svh; }
.peca{ min-height:620px; }
.hero-luz{ position:absolute; inset:0; z-index:1; background:var(--luz-topo); }
.hero-luz-canto{ position:absolute; inset:0; z-index:1; background:var(--luz-canto), var(--luz-verde); }
.tema-claro .hero-luz, .tema-claro-alto .hero-luz,
.tema-claro .hero-luz-canto, .tema-claro-alto .hero-luz-canto{ background:var(--luz-clara); }
.peca-dentro{ position:relative; z-index:60; text-align:center; padding:var(--e-2xl) var(--secao-x); width:100%; max-width:1060px; }

/* ============ RÓTULO E DIVISOR ============ */
.rotulo{
  display:block; font-family:var(--fonte-mono); font-size:var(--texto-micro);
  letter-spacing:var(--tracking-micro); text-transform:uppercase;
  color:var(--cor-acento); margin-bottom:var(--e-sm);
}
.divisor{ width:44px; height:3px; background:var(--cor-acento); margin:var(--e-md) 0; }
.regua{ height:1px; background:var(--borda); margin:var(--e-lg) 0; border:0; }

/* ============ BOTÃO ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--alvo-toque); padding:14px 26px;
  border:0; border-radius:var(--raio);
  font-family:var(--fonte-corpo); font-size:13px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background var(--t-base), transform var(--t-rapida), border-color var(--t-base);
}
.btn-primario{ background:var(--cor-acento); color:var(--sobre-acento); }
.btn-primario:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-secundario{ background:transparent; color:var(--texto); border:1px solid var(--borda-forte); }
.btn-secundario:hover{ border-color:var(--cor-acento); background:var(--cor-acento-suave); }
.btn-bloco{ display:flex; width:100%; }

/* ============ CARD ============ */
.card{
  position:relative; background:var(--fundo-elevado);
  border:1px solid var(--borda); padding:var(--e-md) var(--e-md) 28px;
  transition:border-color var(--t-base); overflow:hidden;
}
.card > *{ position:relative; z-index:60; }
.card:hover{ border-color:var(--borda-forte); }
.card-verde{ background:var(--verde-bloco); color:var(--texto-escuro); --texto:var(--texto-escuro); border-color:rgba(232,217,189,.08); }
.card-superficie{ background:var(--verde-superficie); color:var(--texto-escuro); --texto:var(--texto-escuro); }
/* REGRA: fundo semitransparente + grão por cima = superfície lavada, porque o
   overlay não tem base opaca contra o que mesclar. Sempre empilhar o tom de
   acento SOBRE uma cor opaca, nunca usar o rgba sozinho como fundo. */
.card-ativo{
  border-color:var(--cor-acento);
  background:linear-gradient(var(--cor-acento-suave), var(--cor-acento-suave)), var(--fundo-elevado);
}
.pilha .card{ border-bottom:0; }
.pilha .card:last-child{ border-bottom:1px solid var(--borda); }

/* ============ BADGE ============ */
.badge{
  display:inline-block; background:var(--cor-acento); color:var(--sobre-acento);
  font-family:var(--fonte-corpo); font-size:9px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; padding:5px 12px;
}
.badge-vazado{ background:transparent; border:1px solid var(--cor-acento); color:var(--cor-acento); }
.badge-pill{ border-radius:var(--raio-pill); padding:5px 14px; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-md);
  padding:12px var(--secao-x);
  background:color-mix(in srgb, var(--fundo) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
}
.nav-links{ display:flex; gap:var(--e-md); list-style:none; flex-wrap:wrap; }
.nav-links a{
  font-family:var(--fonte-mono); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--texto-secundario);
  text-decoration:none; transition:color var(--t-rapida);
}
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--cor-acento); }

/* ============ FORMULÁRIO ============ */
.campo{ display:block; margin-bottom:var(--e-md); }
.campo-rotulo{
  display:block; font-family:var(--fonte-mono); font-size:var(--texto-micro);
  letter-spacing:2px; text-transform:uppercase; color:var(--texto-secundario);
  margin-bottom:8px;
}
.input, .textarea, .select{
  width:100%; min-height:var(--alvo-toque);
  padding:13px 15px; border-radius:var(--raio);
  background:var(--fundo-elevado); color:var(--texto);
  border:1px solid var(--borda-forte);
  font-family:var(--fonte-corpo); font-size:var(--texto-corpo);
  transition:border-color var(--t-base), background var(--t-base);
}
.input::placeholder, .textarea::placeholder{ color:var(--texto-fraco); }
.input:focus, .textarea:focus, .select:focus{ outline:0; border-color:var(--cor-acento); background:var(--cor-acento-suave); }
.textarea{ min-height:120px; resize:vertical; }
.select{
  appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FB2B07' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.campo-ajuda{ font-size:var(--texto-legenda); color:var(--texto-fraco); margin-top:6px; }
.campo-erro{ font-size:var(--texto-legenda); color:var(--cor-acento); margin-top:6px; }
.tem-erro .input, .tem-erro .textarea, .tem-erro .select{ border-color:var(--cor-acento); }

.check{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; margin-bottom:var(--e-sm); font-size:var(--texto-corpo-p); }
.check input{
  appearance:none; flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border:1px solid var(--borda-forte); background:var(--fundo-elevado); cursor:pointer;
  transition:background var(--t-rapida), border-color var(--t-rapida);
}
.check input:checked{ background:var(--cor-acento); border-color:var(--cor-acento);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; }
.check input[type=radio]{ border-radius:var(--raio-pill); }
.check input[type=radio]:checked{ background-image:none; box-shadow:inset 0 0 0 4px var(--fundo-elevado); }

/* ============ ESTADO ============ */
.alerta{
  border-left:3px solid var(--cor-acento);
  background:linear-gradient(var(--cor-acento-suave), var(--cor-acento-suave)), var(--fundo);
  padding:var(--e-sm) var(--e-md); font-size:var(--texto-corpo-p);
}
.alerta-ok{ border-left-color:var(--texto); background:var(--cor-acento-suave); }
[disabled], .desativado{ opacity:.4; pointer-events:none; }

/* ============ TABELA ============ */
.tabela{ width:100%; border-collapse:collapse; font-size:var(--texto-corpo-p); }
.tabela th, .tabela td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--borda); }
.tabela th{
  font-family:var(--fonte-mono); font-size:9.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--cor-acento);
}

/* ============ ÍCONE DE VIDRO ============
   Piso de 28px: abaixo disso o brilho especular some e vira silhueta. */
.icone{ width:44px; height:44px; display:inline-block; vertical-align:middle; }
.icone-p{ width:28px; height:28px; }
.icone-m{ width:44px; height:44px; }
.icone-g{ width:72px; height:72px; }
.icone-xg{ width:120px; height:120px; }

/* ============ FOTO ============ */
.foto{ position:relative; overflow:hidden; }
.foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.foto-luz::before{
  content:''; position:absolute; inset:0; z-index:40;
  background:var(--luz-canto); mix-blend-mode:hard-light; opacity:.65;
}

/* ============ GLITCH, O EFEITO PADRÃO DE FOTO ============
   Referência 16, cópia fiel pedida pelo Victor.
   Fatias horizontais de altura irregular deslocadas no eixo X, com a cor
   do fundo arrastada para dentro do sujeito. O deslocamento é só em X:
   o filtro usa o canal vermelho do ruído em X e nada em Y.
   O SVG do filtro precisa estar na página, ver icons/filtros.svg. */
.foto-glitch img, .glitch{ filter:url(#ventura-glitch); }
.foto-glitch-forte img, .glitch-forte{ filter:url(#ventura-glitch-forte); }
/* a tipografia por cima do glitch fica SEMPRE limpa, sem efeito nenhum:
   o contraste entre o caos da imagem e a limpeza do texto é o que faz funcionar */
.foto-glitch .sobre-foto{ position:absolute; inset:0; z-index:60; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:var(--e-lg); }