/* ══════════════════════════════════════════════════════════════════════════
   AGRICOL — Engine Genérica de Aparência de Hero (Sprint 5.2 → 5.2.1)
   ──────────────────────────────────────────────────────────────────────────
   Classes GENÉRICAS (prefixo .hero-ap-*) aplicáveis a QUALQUER hero do sistema.
   Nesta fase são usadas pela Home Institucional e pelo preview do editor.

   REGRESSÃO ZERO: nada abaixo tem efeito até a engine adicionar uma classe
   .hero-ap-* à seção. Tema padrão (escuro) NÃO tem classe. A camada de fundo
   temática (.hero-ap-bg) é transparente sem tema → aparência atual preservada.

   Marcação (convenção dos heroes do site):
     .hero-ap-bg      camada de fundo temática (injetada, z-index:0)
     .hero-bg-image   imagem de fundo do usuário (z-index:0)
     .hero-overlay    overlay                    (z-index:1)
     .hero-ap-fx-layer camada de efeito (injetada, z-index:1)
     .hero-content    conteúdo (z-index:2, sempre acima)
     .hero-max        bloco de conteúdo (alvo de alinhamento/posição)
   ════════════════════════════════════════════════════════════════════════ */

/* ── LAYOUT ────────────────────────────────────────────────────────────────
   Alinhamento do TEXTO (text-align) e Posição do BLOCO (margens) são
   independentes — assim ambos refletem de verdade, mesmo sem coluna de mídia. */
.hero-ap-align-center .hero-max{ text-align:center; }
.hero-ap-align-right  .hero-max{ text-align:right; }
.hero-ap-pos-center   .hero-max{ margin-left:auto; margin-right:auto; }
.hero-ap-pos-right    .hero-max{ margin-left:auto; margin-right:0; }

/* ── CAMADA DE FUNDO TEMÁTICA (injetada pela engine) ───────────────────────
   Transparente por padrão (tema escuro) → regressão zero. Os temas premium a
   preenchem com gradientes em camadas. */
.hero-ap-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* ══ TEMAS PREMIUM ════════════════════════════════════════════════════════
   'escuro' = SEM classe = aparência atual. Cada tema muda a base (--hero,
   cor sólida usada como color/background em botões — mantida COR), a camada
   .hero-ap-bg (gradiente premium) e os acentos do hero. Escopados → só quando
   selecionados. */

/* ══════════════════════════════════════════════════════════════════════════
   TEMAS — cada tema é uma PALETA COMPLETA escopada ao #hero (.hero-ap-tema-*).
   'escuro' = SEM classe = aparência atual (default). A imagem .hero-bg-image
   (z-0) NUNCA é substituída: o tema atua na base .hero-ap-bg (z-0, atrás da
   foto), num overlay TRANSLÚCIDO .hero-overlay (z-1, sobre a foto, alpha baixo)
   e nos acentos (título, subtítulo, destaque, badge, CTAs, trust, grid).
   ════════════════════════════════════════════════════════════════════════ */

/* ── AZUL PROFUNDO — Marine ─────────────────────────────────────────────── */
.hero-ap-tema-azul{ --hero:#06121F; --hero-overlay-cor:#0B2A4A; --hero-ap-fx-cor:90,170,255; }
.hero-ap-tema-azul .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 20% 15%, rgba(37,99,235,.45) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 85% 85%, rgba(56,189,248,.24) 0%, transparent 62%),
    linear-gradient(158deg, #0A1E38 0%, #050C18 100%);
}
.hero-ap-tema-azul .hero-overlay{ background:linear-gradient(158deg, rgba(5,14,28,.30), rgba(4,10,22,.68)); opacity:1; }
.hero-ap-tema-azul .hero-h1{ color:#F2F7FF; }
.hero-ap-tema-azul .hero-sub{ color:rgba(207,224,255,.74); }
.hero-ap-tema-azul .gradient-text{ background-image:linear-gradient(135deg,#5AAAFF 0%,#38BDF8 100%); }
.hero-ap-tema-azul .hero-badge{ border-color:rgba(90,170,255,.35); background:rgba(90,170,255,.08); color:#8FC0FF; }
.hero-ap-tema-azul .hero-badge-dot{ background:#8FC0FF; }
.hero-ap-tema-azul .hero-trust-item svg{ color:#8FC0FF; }
.hero-ap-tema-azul .btn-primary{ background:linear-gradient(135deg,#2563EB 0%,#38BDF8 100%); color:#F4F9FF; box-shadow:0 0 0 0 rgba(56,189,248,.4); }
.hero-ap-tema-azul .btn-primary:hover{ background:linear-gradient(135deg,#2f6ef2 0%,#4fc8ff 100%); box-shadow:0 8px 32px rgba(56,189,248,.42); }
.hero-ap-tema-azul .btn-hero-secondary{ border-color:rgba(90,170,255,.40); background:rgba(90,170,255,.06); color:#8FC0FF; }
.hero-ap-tema-azul .hero-bg-mesh, .hero-ap-tema-azul .hero-line{ display:none; }
.hero-ap-tema-azul .hero-grid{
  background-image:linear-gradient(rgba(90,170,255,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,170,255,.9) 1px, transparent 1px);
}

/* ── AZUL CLARO — Sky ───────────────────────────────────────────────────── */
.hero-ap-tema-azulclaro{ --hero:#0A1A2A; --hero-overlay-cor:#123047; --hero-ap-fx-cor:125,211,252; }
.hero-ap-tema-azulclaro .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 18% 16%, rgba(14,165,233,.38) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 86% 84%, rgba(34,211,238,.24) 0%, transparent 62%),
    linear-gradient(158deg, #123047 0%, #0A1A2A 100%);
}
.hero-ap-tema-azulclaro .hero-overlay{ background:linear-gradient(158deg, rgba(10,26,42,.26), rgba(8,20,32,.62)); opacity:1; }
.hero-ap-tema-azulclaro .hero-h1{ color:#FFFFFF; }
.hero-ap-tema-azulclaro .hero-sub{ color:rgba(220,236,248,.76); }
.hero-ap-tema-azulclaro .gradient-text{ background-image:linear-gradient(135deg,#7DD3FC 0%,#A5F3FC 100%); }
.hero-ap-tema-azulclaro .hero-badge{ border-color:rgba(125,211,252,.35); background:rgba(125,211,252,.10); color:#BAE6FD; }
.hero-ap-tema-azulclaro .hero-badge-dot{ background:#BAE6FD; }
.hero-ap-tema-azulclaro .hero-trust-item svg{ color:#7DD3FC; }
.hero-ap-tema-azulclaro .btn-primary{ background:linear-gradient(135deg,#0EA5E9 0%,#22D3EE 100%); color:#053040; box-shadow:0 0 0 0 rgba(34,211,238,.4); }
.hero-ap-tema-azulclaro .btn-primary:hover{ background:linear-gradient(135deg,#1ab0f5 0%,#38e0f8 100%); box-shadow:0 8px 32px rgba(34,211,238,.42); }
.hero-ap-tema-azulclaro .btn-hero-secondary{ border-color:rgba(125,211,252,.45); background:rgba(125,211,252,.07); color:#BAE6FD; }
.hero-ap-tema-azulclaro .hero-bg-mesh, .hero-ap-tema-azulclaro .hero-line{ display:none; }
.hero-ap-tema-azulclaro .hero-grid{
  background-image:linear-gradient(rgba(125,211,252,.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.85) 1px, transparent 1px);
}

/* ── VERDE AGRÍCOLA — Terra Verde ───────────────────────────────────────── */
.hero-ap-tema-verde{ --hero:#07230F; --hero-overlay-cor:var(--forest,#0D3D1F); --hero-ap-fx-cor:124,240,166; }
.hero-ap-tema-verde .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 15% 18%, rgba(26,107,53,.58) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 85% 82%, rgba(46,204,113,.22) 0%, transparent 62%),
    linear-gradient(158deg, #0C3A1B 0%, #061E12 100%);
}
.hero-ap-tema-verde .hero-overlay{ background:linear-gradient(158deg, rgba(4,20,10,.30), rgba(3,16,8,.68)); opacity:1; }
.hero-ap-tema-verde .hero-h1{ color:#F3FFF6; }
.hero-ap-tema-verde .hero-sub{ color:rgba(214,240,222,.76); }
.hero-ap-tema-verde .gradient-text{ background-image:linear-gradient(135deg,#7CF0A6 0%,#C9A84C 100%); }
.hero-ap-tema-verde .hero-badge{ border-color:rgba(60,200,110,.34); background:rgba(60,200,110,.09); color:#9BF3B8; }
.hero-ap-tema-verde .hero-badge-dot{ background:#9BF3B8; }
.hero-ap-tema-verde .hero-trust-item svg{ color:#9BF3B8; }
.hero-ap-tema-verde .btn-primary{ background:linear-gradient(135deg,#2ECC71 0%,#16A34A 100%); color:#052610; box-shadow:0 0 0 0 rgba(46,204,113,.4); }
.hero-ap-tema-verde .btn-primary:hover{ background:linear-gradient(135deg,#33d97a 0%,#1cb556 100%); box-shadow:0 8px 32px rgba(46,204,113,.42); }
.hero-ap-tema-verde .btn-hero-secondary{ border-color:rgba(60,200,110,.42); background:rgba(60,200,110,.06); color:#9BF3B8; }
.hero-ap-tema-verde .hero-bg-mesh, .hero-ap-tema-verde .hero-line{ display:none; }
.hero-ap-tema-verde .hero-grid{
  background-image:linear-gradient(rgba(124,240,166,.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,240,166,.85) 1px, transparent 1px);
}

/* ── DOURADO PREMIUM — Aurum ────────────────────────────────────────────── */
.hero-ap-tema-dourado{ --hero:#17110A; --hero-overlay-cor:#3A2C10; --hero-ap-fx-cor:229,200,119; }
.hero-ap-tema-dourado .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 18% 18%, rgba(201,168,76,.40) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 85% 82%, rgba(140,96,28,.36) 0%, transparent 62%),
    linear-gradient(158deg, #2A1E0C 0%, #100B05 100%);
}
.hero-ap-tema-dourado .hero-overlay{ background:linear-gradient(158deg, rgba(20,14,6,.32), rgba(16,11,5,.70)); opacity:1; }
.hero-ap-tema-dourado .hero-h1{ color:#FFF7E8; }
.hero-ap-tema-dourado .hero-sub{ color:rgba(240,226,200,.74); }
.hero-ap-tema-dourado .gradient-text{ background-image:linear-gradient(135deg,#F5D486 0%,#C9A84C 100%); }
.hero-ap-tema-dourado .hero-badge{ border-color:rgba(201,168,76,.42); background:rgba(201,168,76,.10); color:#E5C877; }
.hero-ap-tema-dourado .hero-badge-dot{ background:#E5C877; }
.hero-ap-tema-dourado .hero-trust-item svg{ color:#E5C877; }
.hero-ap-tema-dourado .btn-primary{ background:linear-gradient(135deg,#D8B75A 0%,#B8912F 100%); color:#221703; box-shadow:0 0 0 0 rgba(201,168,76,.4); }
.hero-ap-tema-dourado .btn-primary:hover{ background:linear-gradient(135deg,#e6c56a 0%,#c89e38 100%); box-shadow:0 8px 32px rgba(201,168,76,.42); }
.hero-ap-tema-dourado .btn-hero-secondary{ border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.07); color:#E5C877; }
.hero-ap-tema-dourado .hero-bg-mesh, .hero-ap-tema-dourado .hero-line{ display:none; }
.hero-ap-tema-dourado .hero-grid{
  background-image:linear-gradient(rgba(229,200,119,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,200,119,.8) 1px, transparent 1px);
}

/* ── GRAFITE / PRETO — Steel ────────────────────────────────────────────── */
.hero-ap-tema-grafite{ --hero:#0A0B0C; --hero-overlay-cor:#16191C; --hero-ap-fx-cor:203,213,225; }
.hero-ap-tema-grafite .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 18% 16%, rgba(203,213,225,.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 85% 84%, rgba(148,163,184,.14) 0%, transparent 62%),
    linear-gradient(158deg, #16191C 0%, #0A0B0C 100%);
}
.hero-ap-tema-grafite .hero-overlay{ background:linear-gradient(158deg, rgba(8,9,10,.34), rgba(6,7,8,.72)); opacity:1; }
.hero-ap-tema-grafite .hero-h1{ color:#FFFFFF; }
.hero-ap-tema-grafite .hero-sub{ color:rgba(226,230,234,.70); }
.hero-ap-tema-grafite .gradient-text{ background-image:linear-gradient(135deg,#E5E9EE 0%,#9AA4AE 100%); }
.hero-ap-tema-grafite .hero-badge{ border-color:rgba(203,213,225,.28); background:rgba(203,213,225,.07); color:#CBD5E1; }
.hero-ap-tema-grafite .hero-badge-dot{ background:#CBD5E1; }
.hero-ap-tema-grafite .hero-trust-item svg{ color:#CBD5E1; }
.hero-ap-tema-grafite .btn-primary{ background:#E5E7EB; color:#0B0F14; box-shadow:0 0 0 0 rgba(203,213,225,.35); }
.hero-ap-tema-grafite .btn-primary:hover{ background:#F3F4F6; box-shadow:0 8px 32px rgba(203,213,225,.30); }
.hero-ap-tema-grafite .btn-hero-secondary{ border-color:rgba(203,213,225,.35); background:rgba(203,213,225,.05); color:#CBD5E1; }
.hero-ap-tema-grafite .hero-bg-mesh, .hero-ap-tema-grafite .hero-line{ display:none; }
.hero-ap-tema-grafite .hero-grid{
  background-image:linear-gradient(rgba(203,213,225,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,213,225,.55) 1px, transparent 1px);
}

/* ── TERRA / AGRO — Barro ───────────────────────────────────────────────── */
.hero-ap-tema-terra{ --hero:#1A1109; --hero-overlay-cor:#2E2013; --hero-ap-fx-cor:232,179,107; }
.hero-ap-tema-terra .hero-ap-bg{
  background:
    radial-gradient(ellipse 65% 55% at 18% 18%, rgba(200,130,60,.40) 0%, transparent 62%),
    radial-gradient(ellipse 55% 65% at 85% 82%, rgba(169,194,78,.24) 0%, transparent 62%),
    linear-gradient(158deg, #2E2013 0%, #150D06 100%);
}
.hero-ap-tema-terra .hero-overlay{ background:linear-gradient(158deg, rgba(18,11,5,.32), rgba(14,9,4,.70)); opacity:1; }
.hero-ap-tema-terra .hero-h1{ color:#FFF6EC; }
.hero-ap-tema-terra .hero-sub{ color:rgba(236,222,205,.74); }
.hero-ap-tema-terra .gradient-text{ background-image:linear-gradient(135deg,#E8B36B 0%,#A9C24E 100%); }
.hero-ap-tema-terra .hero-badge{ border-color:rgba(200,150,80,.36); background:rgba(200,150,80,.10); color:#EAC28A; }
.hero-ap-tema-terra .hero-badge-dot{ background:#EAC28A; }
.hero-ap-tema-terra .hero-trust-item svg{ color:#EAC28A; }
.hero-ap-tema-terra .btn-primary{ background:linear-gradient(135deg,#C8823C 0%,#9A5E22 100%); color:#FFF6EC; box-shadow:0 0 0 0 rgba(200,130,60,.4); }
.hero-ap-tema-terra .btn-primary:hover{ background:linear-gradient(135deg,#d68f47 0%,#a9682a 100%); box-shadow:0 8px 32px rgba(200,130,60,.42); }
.hero-ap-tema-terra .btn-hero-secondary{ border-color:rgba(169,194,78,.40); background:rgba(169,194,78,.06); color:#C7D28A; }
.hero-ap-tema-terra .hero-bg-mesh, .hero-ap-tema-terra .hero-line{ display:none; }
.hero-ap-tema-terra .hero-grid{
  background-image:linear-gradient(rgba(232,179,107,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,179,107,.8) 1px, transparent 1px);
}

/* ══ CAMADA DE EFEITO (injetada, z-index:1, sempre abaixo do conteúdo z:2) ══
   A intensidade (0..1) controla a opacidade global da camada. */
.hero-ap-fx-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  opacity: var(--hero-ap-fx-intensidade, .5);   /* compat: produtos antigos com intensidade numérica */
  transition: opacity .25s ease;
  /* Cor do efeito (RGB triplet). Default verde de marca. Cada TEMA sobrescreve
     --hero-ap-fx-cor com seu acento → cor derivada do tema automaticamente.
     Produtos antigos com hero.efeitoCol continuam funcionando: a engine, se
     receber efeitoCor, seta o triplet inline (tem prioridade sobre o tema). */
  --hero-ap-fx-cor: 46,204,113;
}

/* ══ INTENSIDADE por preset (classe adicionada pela engine) ══
   Suave / Médio / Destaque controlam a opacidade global da camada.
   (Sobrepõe o opacity numérico do base por especificidade → compat preservada.) */
.hero-ap-fx-layer.hero-ap-fx-int-suave{    opacity:.34; }
.hero-ap-fx-layer.hero-ap-fx-int-medio{    opacity:.60; }
.hero-ap-fx-layer.hero-ap-fx-int-destaque{ opacity:.86; }

/* ── 2. PARTÍCULAS — pontos pequenos com deriva contínua (2 camadas p/ profundidade) ── */
.hero-ap-fx-particulas{
  background-image:
    radial-gradient(circle, rgba(var(--hero-ap-fx-cor),.55) 1.3px, transparent 2px),
    radial-gradient(circle, rgba(var(--hero-ap-fx-cor),.32) 1px,   transparent 1.6px);
  background-size: 52px 52px, 88px 88px;
  background-position: 0 0, 26px 40px;
}

/* ── 3. ONDAS — ondas suaves ascendentes (água/fertirrigação) ── */
.hero-ap-fx-ondas{
  background:
    repeating-radial-gradient(circle at 50% 132%, transparent 0 24px, rgba(var(--hero-ap-fx-cor),.14) 24px 26px);
  background-size: 140% 100%;
  background-position: 50% 0;
}
.hero-ap-fx-ondas::before{
  content:''; position:absolute; inset:0;
  background: repeating-radial-gradient(circle at 50% 128%, transparent 0 34px, rgba(var(--hero-ap-fx-cor),.09) 34px 37px);
  background-size: 160% 100%; background-position:50% 0;
}

/* ── 4. BRILHO ORGÂNICO — glow difuso pulsando lentamente ── */
.hero-ap-fx-brilho{
  background: radial-gradient(circle at 50% 40%, rgba(var(--hero-ap-fx-cor),.22) 0%, transparent 58%);
}
.hero-ap-fx-brilho::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 28% 66%, rgba(var(--hero-ap-fx-cor),.16) 0%, transparent 52%);
  transform-origin:center;
}

/* ── 5. LINHAS DE LUZ — feixes diagonais sutis deslizando ── */
.hero-ap-fx-linhas{
  background-image: repeating-linear-gradient(116deg,
    transparent 0 64px,
    rgba(var(--hero-ap-fx-cor),.11) 64px 65px,
    transparent 65px 130px);
}

/* ── 6. CHUVA / GOTAS — gotas verticais discretas caindo ── */
.hero-ap-fx-chuva{
  background-image: radial-gradient(1px 12px at 50% 50%, rgba(var(--hero-ap-fx-cor),.50) 0%, transparent 100%);
  background-size: 26px 84px;
  background-repeat: repeat;
}

/* ══ ANIMAÇÕES — só quando o usuário NÃO pede menos movimento ══
   (prefers-reduced-motion: reduce → sem animação; o efeito permanece visível, estático) */
@media (prefers-reduced-motion: no-preference){
  .hero-ap-fx-particulas{ animation: heroFxParticulas 30s linear infinite; }
  .hero-ap-fx-ondas{ animation: heroFxOndas 12s linear infinite; }
  .hero-ap-fx-ondas::before{ animation: heroFxOndas 18s linear infinite reverse; }
  .hero-ap-fx-brilho{ animation: heroFxBrilhoA 7s ease-in-out infinite; }
  .hero-ap-fx-brilho::before{ animation: heroFxBrilhoB 9s ease-in-out infinite; }
  .hero-ap-fx-linhas{ animation: heroFxLinhas 9s linear infinite; }
  .hero-ap-fx-chuva{ animation: heroFxChuva 1.1s linear infinite; }
}
@keyframes heroFxParticulas{
  0%{   background-position:0 0,      26px 40px; }
  100%{ background-position:0 -104px, 26px -136px; }
}
@keyframes heroFxOndas{ 0%{ background-position:50% 0; } 100%{ background-position:50% -52px; } }
@keyframes heroFxBrilhoA{ 0%,100%{ opacity:.72; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }
@keyframes heroFxBrilhoB{ 0%,100%{ opacity:.6; transform:scale(1.05); } 50%{ opacity:.95; transform:scale(1); } }
@keyframes heroFxLinhas{ 0%{ background-position:0 0; } 100%{ background-position:260px 0; } }
@keyframes heroFxChuva{ 0%{ background-position:0 0; } 100%{ background-position:0 84px; } }