/* ===== Tema "Cartaz de Comício Vintage" — Campanha Flávio 2026 ===== */
:root{
  --verde:#0B5D2E; --verde-escuro:#063D1E; --amarelo:#C9A24B; --dourado:#C9A24B; --dourado-claro:#E0BE72;
  --navy:#1A160F; --papel:#F3ECD9; --creme:#F3ECD9; --grafite:#201A12;
  /* Motion — curvas exponenciais fortes (Emil Kowalski / impeccable) */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart */
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out-expo */
}
html { scroll-behavior: smooth; }

/* Tipografia: Oswald (display) + Archivo (corpo, via Tailwind) */
.titulo-portal { font-family:'Oswald',system-ui,sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.display       { font-family:'Oswald',system-ui,sans-serif; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.12; word-spacing:.05em; }

/* Palavra em destaque: bloco dourado (marca-texto de pôster) */
.marca { background:var(--dourado); color:var(--grafite); padding:.06em .22em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.marca-verde { background:var(--verde); color:#fff; padding:.06em .22em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* Rótulo de seção: etiqueta com corte diagonal (a faixa presidencial) */
.rotulo {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--verde); color:#fff;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.72rem; line-height:1;
  padding:.45rem 1.1rem .45rem .7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 100%, 0 100%);
}
.rotulo.dourado { background:var(--dourado); color:var(--grafite); }
.rotulo::before { content:"★"; font-size:.7em; }

/* Numeral gigante de seção (marcador editorial) */
.num-secao { font-family:'Oswald',sans-serif; font-weight:700; color:var(--dourado); opacity:.25; line-height:.8; font-size:clamp(3rem,10vw,7rem); }

/* ===================== FOTOS — gradação vibrante (verde-amarelo vivo) ===================== */
/* Realça a cor real das manifestações em vez de monocromatizar — mais vida. */
.foto-nostalgica { filter:saturate(1.2) contrast(1.06) brightness(1.03); }
/* Retrato: natural e vivo, leve realce quente */
.foto-retrato    { filter:saturate(1.06) contrast(1.04) brightness(1.02); }

/* ===================== TEXTURA DE IMPRESSÃO (papel/pôster) ===================== */
.textura-papel { position:relative; }
.textura-papel::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.06; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.textura-papel > * { position:relative; z-index:2; }

/* ===================== ASSINATURA: faixa diagonal (verde → dourado) ===================== */
.faixa       { background:linear-gradient(90deg,var(--verde) 0 55%,var(--dourado) 55% 100%); transform:skewY(-2.4deg); }
.faixa-inner { transform:skewY(2.4deg); }
.diag-b  { clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
.diag-t  { clip-path:polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); }
.diag-tb { clip-path:polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }

/* ===================== CARD EDITORIAL (fim do card SaaS) ===================== */
.card-edit {
  background:#fff; border:1px solid rgba(32,26,18,.14); border-radius:.4rem;
  position:relative; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card-edit::before {
  content:""; position:absolute; top:0; left:1.6rem; width:2.6rem; height:5px;
  background:linear-gradient(90deg,var(--verde) 55%,var(--dourado) 55%);
}
.card-edit:hover { border-color:var(--dourado); transform:translateY(-3px); box-shadow:0 12px 30px -12px rgba(32,26,18,.35); }

/* Losango da bandeira (moldura do hero) */
.losango { clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ===================== HERO VIVO: multidão ao fundo + campo fluindo + bandeira ===================== */
/* 1) Multidão real ao fundo com Ken Burns (zoom/pan lento e contínuo) */
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:0; }
@keyframes kenburns { 0%{ transform:scale(1.12) translate(0,0);} 100%{ transform:scale(1.3) translate(-3%,-2.5%);} }
.kenburns { animation:kenburns 26s ease-in-out infinite alternate; will-change:transform; }

/* 2) Véu verde que flui como aurora de comício — garante leitura do texto sobre a foto */
@keyframes fluir { 0%{ background-position:0% 50%;} 100%{ background-position:100% 50%;} }
.hero-veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(115deg, rgba(6,61,30,.97) 0%, rgba(11,93,46,.90) 40%, rgba(11,93,46,.60) 72%, rgba(6,61,30,.72) 100%),
    linear-gradient(115deg, rgba(224,190,114,.22) 0%, transparent 40%, rgba(224,190,114,.14) 100%);
  background-size:100% 100%, 300% 100%;
  animation:fluir 15s ease-in-out infinite alternate;
}
/* Véu mais forte e uniforme — para heros com texto centralizado (ex.: doar) */
.hero-veil.forte {
  background:
    linear-gradient(160deg, rgba(6,61,30,.94) 0%, rgba(11,93,46,.88) 55%, rgba(6,61,30,.94) 100%),
    linear-gradient(115deg, rgba(224,190,114,.18) 0%, transparent 45%, rgba(224,190,114,.12) 100%);
  background-size:100% 100%, 300% 100%;
}

/* 3) Aura dourada que respira, guiando o olho ao candidato */
@keyframes respira { 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.12);} }
.aura {
  position:absolute; top:40%; left:62%; width:70%; height:80%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:2;
  background:radial-gradient(closest-side, rgba(224,190,114,.30), rgba(224,190,114,.06) 55%, transparent 72%);
  animation:respira 7s ease-in-out infinite;
}
.aura.centro { left:50%; top:50%; background:radial-gradient(closest-side, rgba(224,190,114,.22), transparent 70%); }

/* 4) Bandeira do Brasil ondulando ao vento (cloth wave em CSS, sem feDisplacement) */
@keyframes ondula { 0%,100%{ transform:perspective(520px) rotateY(-8deg) skewY(1.3deg);} 50%{ transform:perspective(520px) rotateY(8deg) skewY(-1.3deg);} }
.bandeira { position:absolute; transform-origin:left center; animation:ondula 4.2s ease-in-out infinite; will-change:transform; overflow:hidden; }
.bandeira::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  background-size:250% 100%; animation:fluir 4.2s linear infinite;
}

/* ===================== REVEAL NO SCROLL + CONTADORES ===================== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--e-expo), transform .7s var(--e-expo); will-change:transform,opacity; }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s; }
.reveal[data-d="2"]{ transition-delay:.14s; }
.reveal[data-d="3"]{ transition-delay:.21s; }

/* Reveal de imagem: clip-path de baixo → cima + leve zoom (assinatura Emil, sensação de impressão) */
.rev-img { clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path .9s var(--e-expo), transform .9s var(--e-expo); will-change:clip-path,transform; }
.reveal.in .rev-img, .rev-img.in { clip-path:inset(0 0 0 0); transform:scale(1); }

/* Título do hero: cada linha sobe escalonada (não o bloco inteiro) */
.hero-title.reveal { opacity:1; transform:none; }
.hero-title .line { display:block; opacity:0; transform:translateY(28px); transition:opacity .8s var(--e-expo), transform .8s var(--e-expo); }
.hero-title.in .line { opacity:1; transform:none; }
.hero-title.in .line:nth-child(2){ transition-delay:.1s; }
.hero-title.in .line:nth-child(3){ transition-delay:.2s; }

.counter { font-variant-numeric:tabular-nums; }

/* CTA dourado: sheen varre no hover (propósito = feedback), pressiona no clique */
.cta-amarelo { background:var(--dourado); color:var(--grafite); position:relative; overflow:hidden; transition:transform .16s var(--e-out), box-shadow .16s var(--e-out); }
.cta-amarelo::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  background-size:220% 100%; background-position:180% 0;
  transition:background-position .7s var(--e-out);
}
.cta-amarelo:hover::after { background-position:-40% 0; }
.cta-amarelo:active { transform:scale(0.97); }

/* WhatsApp */
@keyframes pulse-soft { 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 12px rgba(37,211,102,0);} }
.whatsapp-pulse { animation:pulse-soft 2s infinite; }
.selo { background:radial-gradient(circle at 30% 30%, #ffe46a, #C9A24B 60%, #d4a500); }

/* Mesclagem de imagens (legado) */
.blend-fade { -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%); mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 100%); }
.hp-trap { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; pointer-events:none; }

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .aura, .whatsapp-pulse, .kenburns, .hero-veil, .bandeira, .bandeira::after { animation:none; }
  .reveal, .hero-title .line { opacity:1 !important; transform:none !important; transition:opacity .2s ease; }
  .rev-img { clip-path:none !important; transform:none !important; }
  html { scroll-behavior:auto; }
}