/* ══════════════════════════════════════════════════════════════════════════
   AGRICOL — HOME INSTITUCIONAL · Sistema de Seções
   Sprint 5.4 (fundação)  →  SPRINT 1 · "PALCO DE PRECISÃO"
   ──────────────────────────────────────────────────────────────────────────
   MUDANÇA CONCEITUAL DESTA SPRINT
   O card deixou de existir. Antes, cada produto carregava o próprio cenário
   (painel, borda, raio, sombra de caixa, gradiente por variante `data-v`,
   luz ::before e vinheta ::after) — seis mini-estúdios independentes. Todo
   aquele aparato existia por um motivo técnico: os PNGs do catálogo tinham
   fundo branco embutido e o gradiente servia para dissolver o recorte
   retangular contra o fundo da seção.

   Os PNGs foram refeitos com fundo TRANSPARENTE, e isso destravou a
   arquitetura correta: um ÚNICO PALCO compartilhado por toda a seção
   (chão + luz + atmosfera pertencem à SEÇÃO, não ao item), sobre o qual os
   produtos ficam APOIADOS. A luz é fixa; os produtos atravessam a cena
   quando o rail rola. É isso que separa "carrossel de cards" de "cena".

   PRESENÇA FÍSICA (diretriz da sprint: nada pode parecer flutuando)
     · sombra de CONTATO curta e escura (oclusão no ponto de apoio)
     · sombra PROJETADA longa e difusa, lançada para a esquerda-baixo
       porque a luz-chave vem do alto à direita (mesma da Hero)
     · ambas via drop-shadow → seguem a SILHUETA REAL do produto (só
       possível com alpha), nunca um retângulo
     · poça de luz no chão sob o produto + banda de oclusão na linha de chão
     · SEM reflexo espelhado: chão fosco não reflete; reflexo leria como
       efeito, não como realismo

   CONTINUIDADE COM A HERO (a Home deve ler como UM ambiente)
     · mesma direção de luz-chave (alto à direita), mesmo matiz quente,
       mesmo mix-blend-mode:screen e mesmo desfoque da .hero-cine-luz
     · mesmo rebote esmeralda de .hero-palco-luz
     · topo da seção inicia no tom em que a Hero termina (~#060E09) →
       emenda invisível entre as duas seções
     · mesma lógica de vinheta fechando o enquadramento

   CONTRATO PRESERVADO (nada fora desta seção foi tocado)
     · classes .hi-sec / .hi-sec-bg / .hi-sec--tem-fundo / data-tema /
       data-espaco mantidas — AGRICOL_HOME.aplicarSecao() segue funcionando
     · nenhuma alteração em API, banco, painel, validators ou ConfigAggregator
     · nenhuma alteração em index.html
     · o preview do editor CMS usa este MESMO arquivo (ver bloco final)

   Carregado por index.html (Home pública) e por admin/home-institucional.html.
   Vanilla. Sem bibliotecas.
   ════════════════════════════════════════════════════════════════════════ */

/* ══ 1. SEÇÃO — o AMBIENTE ════════════════════════════════════════════════*/
.hi-sec{
  position:relative; isolation:isolate; overflow:hidden;

  /* — identidade — */
  --hi-accent:#2ECC71; --hi-accent-2:#C9A84C;
  --hi-ink:#ffffff; --hi-ink-soft:rgba(255,255,255,.66); --hi-ink-faint:rgba(255,255,255,.50);
  --hi-panel:#0b1912; --hi-line:rgba(255,255,255,.10);

  /* — grade editorial — */
  --hi-max:1280px;      /* largura máxima do conteúdo alinhado */
  --hi-gutter:48px;     /* recuo lateral da grade */

  /* — palco — */
  --hi-gap:44px;        /* respiro entre produtos (sem moldura, precisa de ar) */
  --hi-cena:320px;      /* altura da zona de cena → DEFINE A LINHA DE CHÃO */
  --hi-ar:18px;         /* headroom no rail: o produto sobe no hover e a sombra
                           projetada precisa de espaço — sem isto, overflow-y
                           do rail recortaria ambos no topo */
  --hi-par:0px;         /* deslocamento de paralaxe (escrito pelo JS) */

  /* Sala escura e quase plana: a luz vem das camadas de palco, não daqui.
     O topo (#060E09) reproduz o tom em que a Hero termina → emenda invisível. */
  background:
    radial-gradient(120% 72% at 50% 126%, rgba(0,0,0,.55) 0%, transparent 62%),
    linear-gradient(180deg,#060E09 0%,#050C08 46%,#040A06 100%);
  color:var(--hi-ink);
}

/* Ritmo entre seções. `compacto` é o valor em uso na Home — deliberado:
   aproxima a vitrine da Hero e reforça a leitura de ambiente único. */
.hi-sec{ padding:108px 0 96px }
.hi-sec[data-espaco="compacto"]{ padding:76px 0 68px }
.hi-sec[data-espaco="padrao"]  { padding:108px 0 96px }
.hi-sec[data-espaco="amplo"]   { padding:144px 0 128px }

/* Tema claro — não é o tema em uso, mas o painel permite trocar e o preview
   precisa continuar correto. O palco inverte: chão por sombra, não por luz. */
.hi-sec[data-tema="claro"]{
  --hi-ink:#0B2E18; --hi-ink-soft:rgba(11,46,24,.70); --hi-ink-faint:rgba(11,46,24,.52);
  --hi-panel:#ffffff; --hi-line:rgba(11,46,24,.13);
  background:
    radial-gradient(110% 70% at 50% 124%, rgba(11,46,24,.09) 0%, transparent 62%),
    linear-gradient(180deg,#F7FAF7 0%,#EDF3EE 100%);
}

/* ══ 2. ATMOSFERA — fotografia agrícola ═══════════════════════════════════
   Contexto, nunca competição. Quatro operações combinadas: DESFOQUE (mata a
   aresta, que é o que realmente disputa com o packshot), DESSATURAÇÃO (tira o
   verde da lavoura da disputa com o verde da marca), ESCURECIMENTO (o produto
   passa a ser a região mais clara da tela) e SCRIM reforçado.
   Se o visitante conseguir identificar o que há na foto, ela está forte demais. */
.hi-sec-bg,.hi-sec-bg-scrim,.hi-sec-bg-vinheta{position:absolute;inset:0;pointer-events:none}

.hi-sec-bg{
  z-index:0; opacity:0; transition:opacity .5s ease;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:grayscale(.62) brightness(.34) contrast(.94) blur(3.5px);
  /* scale cobre o sangramento translúcido criado pelo blur nas bordas;
     translate3d é o deslocamento de paralaxe (ordem importa: transladar
     ANTES de escalar mantém a amplitude em px reais) */
  transform:translate3d(0,var(--hi-par),0) scale(1.08);
}
/* Camada promovida só enquanto a seção está em viewport com paralaxe ativa:
   evita reprocessar o blur a cada frame. Fora disso, não ocupa memória de GPU. */
.hi-sec--par .hi-sec-bg{ will-change:transform }

.hi-sec-bg-scrim{
  z-index:0; opacity:0; transition:opacity .5s ease;
  background:linear-gradient(180deg,rgba(4,11,7,.86) 0%,rgba(4,11,7,.74) 42%,rgba(4,11,7,.93) 100%);
}
/* Vinheta fecha o enquadramento SEMPRE (mesma lente da Hero); com foto, fecha mais. */
.hi-sec-bg-vinheta{
  z-index:1; opacity:.5; transition:opacity .5s ease;
  background:radial-gradient(128% 118% at 50% 42%,transparent 46%,rgba(2,6,4,.72) 100%);
}
.hi-sec--tem-fundo .hi-sec-bg,
.hi-sec--tem-fundo .hi-sec-bg-scrim{opacity:1}
.hi-sec--tem-fundo .hi-sec-bg-vinheta{opacity:1}
.hi-sec[data-tema="claro"].hi-sec--tem-fundo .hi-sec-bg{filter:grayscale(.5) brightness(1.1) blur(3px)}
.hi-sec[data-tema="claro"].hi-sec--tem-fundo .hi-sec-bg-scrim{
  background:linear-gradient(180deg,rgba(247,250,247,.86) 0%,rgba(247,250,247,.74) 44%,rgba(247,250,247,.93) 100%)}
.hi-sec[data-tema="claro"] .hi-sec-bg-vinheta{
  background:radial-gradient(128% 118% at 50% 42%,transparent 52%,rgba(11,46,24,.14) 100%)}

/* ══ 3. LUZ-CHAVE AMBIENTE ════════════════════════════════════════════════
   MESMA assinatura da Hero: radial quente no alto à DIREITA + rebote
   esmeralda embaixo, screen, desfocado. É o recurso mais forte de
   continuidade — o "sol" está no mesmo lugar nas duas cenas. */
.hi-palco-amb{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* KEY — luz-chave quente, alto à direita (mesma posição da Hero) */
    radial-gradient(42% 50% at 76% 2%,   rgba(255,238,190,.22) 0%, transparent 62%),
    /* SPILL — vazamento amplo e fraco da key, suaviza o degradê da parede */
    radial-gradient(80% 70% at 68% 12%,  rgba(255,238,190,.07) 0%, transparent 72%),
    /* FILL — SPRINT 1.2: preenchimento frio e baixíssimo pelo lado da sombra.
       Em estúdio a face oposta à key nunca é preta; sem isto o lado esquerdo
       do palco "apaga" e a cena lê como render, não como fotografia. */
    radial-gradient(46% 66% at 10% 34%,  rgba(174,206,255,.055) 0%, transparent 68%),
    /* BOUNCE — rebote esmeralda do chão (mesma assinatura da Hero) */
    radial-gradient(54% 58% at 80% 88%,  rgba(46,204,113,.09) 0%, transparent 66%);
  mix-blend-mode:screen; filter:blur(12px);
}
.hi-sec[data-tema="claro"] .hi-palco-amb{mix-blend-mode:normal;opacity:.45}

/* ══ 4. GRADE EDITORIAL ═══════════════════════════════════════════════════*/
.hi-sec-inner{
  position:relative; z-index:2;
  max-width:var(--hi-max); margin:0 auto; padding:0 var(--hi-gutter);
}

/* Cabeçalho: puramente editorial. Os controles migraram para a barra
   unificada abaixo do palco — antes estavam divididos (setas no topo à
   direita, progresso embaixo à esquerda) e o olho não os associava. */
.hi-sec-head{margin-bottom:46px;max-width:760px}
.hi-eyebrow{
  display:inline-flex;align-items:center;gap:10px;color:var(--hi-accent);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.20em;text-transform:uppercase;margin-bottom:18px}
.hi-eyebrow::before{content:'';width:26px;height:1.5px;background:var(--hi-accent)}
.hi-sec-title{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;
  font-size:42px;line-height:1.07;letter-spacing:-.025em;color:var(--hi-ink);max-width:660px}
.hi-sec-sub{
  margin-top:17px;font-family:'Inter',sans-serif;font-size:16.5px;line-height:1.6;
  color:var(--hi-ink-soft);max-width:540px}

/* ══ 5. O PALCO ═══════════════════════════════════════════════════════════
   Full-bleed. O cabeçalho fica na grade; o palco sangra até a borda da tela.
   Um rail que termina a 48px da margem comunica "componente dentro de uma
   página"; um rail que sangra comunica "cena que continua além da tela". */
.hi-palco{position:relative;z-index:2}

/* CHÃO — não rola com o rail. Ocupa exatamente a zona de cena, então sua
   base coincide com a LINHA DE CHÃO de todos os produtos (--hi-cena é a
   mesma variável usada por .hi-pcard-cena → alinhamento garantido). */
.hi-palco-chao{
  position:absolute; left:0; right:0; z-index:0; pointer-events:none;
  /* deslocado pelo headroom do rail → a base do chão coincide EXATAMENTE
     com a base da zona de cena de todos os produtos */
  top:var(--hi-ar); height:var(--hi-cena);
  background:
    /* poça de luz principal — levemente à esquerda do centro, na posição de
       leitura; é o "spot" do palco, distinto da luz-chave ambiente */
    radial-gradient(38% 62% at 34% 100%, rgba(255,244,220,.115) 0%, transparent 76%),
    /* SPRINT 1.2 — halo largo em volta do hotspot: sem ele a poça tem borda
       perceptível e lê como "spot de CSS" em vez de luz difusa */
    radial-gradient(86% 96% at 36% 100%, rgba(255,244,220,.055) 0%, transparent 78%),
    /* segunda poça, mais fria, dá volume ao plano */
    radial-gradient(44% 70% at 78% 100%, rgba(46,204,113,.055) 0%, transparent 74%),
    /* plano recuando: escurece para cima (parede de fundo do estúdio) */
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 58%, rgba(0,0,0,.30) 100%);
}
/* Oclusão ambiente acumulada junto ao chão — o que dá "peso" ao conjunto */
.hi-palco-chao::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(2,6,4,.40))}
/* Aresta do chão: filete de luz que se dissolve nas laterais. É o elemento
   que faz o olho ler "existe uma superfície aqui". */
.hi-palco-chao::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  /* SPRINT 1.2 — aresta rebaixada: a 17% lia como linha desenhada. Agora é
     um filete quase subliminar, só o suficiente para o olho registrar o plano. */
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 18%,rgba(255,255,255,.11) 36%,rgba(255,255,255,.04) 72%,transparent 100%);
  filter:blur(.3px)}
.hi-sec[data-tema="claro"] .hi-palco-chao{
  background:
    radial-gradient(56% 86% at 34% 100%, rgba(255,255,255,.75) 0%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(11,46,24,.05) 60%, rgba(11,46,24,.10) 100%)}
.hi-sec[data-tema="claro"] .hi-palco-chao::before{background:linear-gradient(180deg,transparent,rgba(11,46,24,.10))}
.hi-sec[data-tema="claro"] .hi-palco-chao::after{
  background:linear-gradient(90deg,transparent,rgba(11,46,24,.14) 38%,transparent)}

/* RAIL — recuo lateral calculado a partir da PRÓPRIA largura (nunca vw, que
   quebraria dentro do painel estreito do preview do Admin). O primeiro
   produto alinha exatamente com o título. */
.hi-rail{
  position:relative; z-index:1;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*var(--hi-gap))/2.6);
  gap:var(--hi-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-top:var(--hi-ar);
  padding-left:calc((100% - min(100%,var(--hi-max)))/2 + var(--hi-gutter));
  padding-right:var(--hi-gutter);
  scroll-padding-left:calc((100% - min(100%,var(--hi-max)))/2 + var(--hi-gutter));
  scrollbar-width:none; -ms-overflow-style:none;
}
.hi-rail::-webkit-scrollbar{display:none}
/* Arraste com mouse (desktop). No touch o navegador cuida do swipe
   nativamente — o JS nunca intercepta pointerType !== 'mouse'. */
/* SPRINT 1.1 — o arraste por mouse não pode virar seleção de texto nem
   drag nativo de imagem: ambos engolem o clique antes que ele chegue ao <a>. */
.hi-rail[data-draggable]{cursor:grab;-webkit-user-select:none;user-select:none}
.hi-rail[data-draggable].is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.hi-rail[data-draggable].is-dragging .hi-pcard{pointer-events:none}

/* ══ 6. O PRODUTO EM CENA ═════════════════════════════════════════════════
   Sem fundo, sem borda, sem raio, sem sombra de caixa. O que delimita cada
   produto é luz e sombra — não uma moldura. */
.hi-pcard{
  --f:1;                       /* 0..1 · proximidade da luz (escrito pelo JS) */
  scroll-snap-align:start;
  position:relative; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
/* Sem card, o foco de teclado precisa de anel explícito (antes não existia) */
.hi-pcard:focus-visible{outline:2px solid var(--hi-accent);outline-offset:12px;border-radius:16px}
.hi-pcard:focus-visible{--f:1 !important}   /* item focado nunca fica atenuado */

/* ZONA DE CENA — altura fixa; o produto é ancorado à BASE, de modo que todos
   compartilham a mesma linha de chão. As alturas variam naturalmente (um
   frasco é mais alto que um saco) e essa variação é desejada: é o que faz a
   fileira parecer uma prateleira real em vez de uma grade. */
.hi-pcard-cena{
  position:relative; height:var(--hi-cena); overflow:visible;
  display:flex; align-items:flex-end; justify-content:center;
  transform-origin:center bottom;                       /* escala a partir do CHÃO */
  transform:scale(calc(.955 + .045*var(--f)));
  opacity:calc(.62 + .38*var(--f));
  transition:transform .38s cubic-bezier(.2,.7,.2,1), opacity .38s ease;
}

/* Poça de luz individual — o produto recebe seu próprio spot ao entrar em cena */
.hi-pcard-po{
  position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  width:84%; height:40%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,244,220,.10), rgba(255,244,220,.03) 54%, transparent 80%);
  filter:blur(9px);
  opacity:calc(.30 + .70*var(--f));
  transition:opacity .38s ease;
}
/* Sombra de CONTATO — a mancha escura de oclusão no ponto de apoio.
   É o elemento que transmite peso. Fica ABAIXO do produto (z1 < z2). */
.hi-pcard-contato{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%) scale(1);
  width:40%; height:18px; z-index:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(2,7,4,.70), rgba(2,7,4,.30) 48%, transparent 78%);
  filter:blur(6px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}

/* O PRODUTO. As duas drop-shadow seguem a SILHUETA REAL (só possível com
   alpha): a primeira é contato/oclusão (curta, escura, quase sem offset); a
   segunda é a sombra PROJETADA pela luz-chave — que vem do alto à DIREITA,
   portanto a sombra cai para a ESQUERDA-BAIXO (offset X negativo). */
.hi-pcard-produto{
  /* SPRINT 1.2 — em FLUXO dentro do flex da cena, nunca posicionado.
     max-width/max-height com width/height auto reduzem preservando a
     proporção e JAMAIS transbordam. --h é escrito pelo JS (equilíbrio de
     escala entre sacaria e galão). */
  position:relative; z-index:2;
  width:auto; height:auto;
  max-width:86%; max-height:calc(var(--h,.86) * 100%);
  filter:
    drop-shadow(0 2px 1px rgba(3,9,5,.55))
    drop-shadow(-16px 8px 14px rgba(2,7,4,.42));
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  /* SPRINT 1.1 — um <img> dentro de <a> é arrastável por padrão; o drag
     nativo do navegador cancela o clique. Reforça o draggable="false". */
  -webkit-user-drag:none; -khtml-user-drag:none; user-select:none; -webkit-user-select:none;
}
/* Produto sem imagem: silhueta neutra na mesma pegada, para a fileira não
   "afundar" num item. Mantém linha de chão e sombra de contato. */
.hi-pcard-sil{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:2;
  width:36%; height:68%; border-radius:18px 18px 7px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px dashed var(--hi-line);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.30);
}
.hi-sec[data-tema="claro"] .hi-pcard-sil{background:rgba(11,46,24,.04);color:rgba(11,46,24,.30)}
.hi-sec[data-tema="claro"] .hi-cta-anel::before,
.hi-sec[data-tema="claro"] .hi-arrow::before{
  background:radial-gradient(circle at 40% 30%, rgba(46,204,113,.20) 0%, rgba(46,204,113,.05) 72%, transparent 100%)}

/* HOVER — física correta: o objeto sobe, a sombra de contato ABRE e SUAVIZA
   (perde densidade ao perder o apoio), a projetada se alonga, a poça acende. */
.hi-pcard:hover .hi-pcard-produto{
  transform:translateY(-9px);
  filter:
    drop-shadow(0 3px 2px rgba(3,9,5,.50))
    drop-shadow(-21px 12px 19px rgba(2,7,4,.48));
}
.hi-pcard:hover .hi-pcard-contato{transform:translateX(-50%) scale(1.14,.76);opacity:.80}
.hi-pcard:hover .hi-pcard-po{opacity:1}

/* ══ 7. IDENTIFICAÇÃO ═════════════════════════════════════════════════════
   Hierarquia: categoria (eyebrow) → nome (protagonista) → descrição
   (OPCIONAL) → CTA. A descrição só existe no DOM quando há dado, então o
   layout não reserva buraco: 4 dos 6 produtos hoje não têm descrição. */
.hi-pcard-info{
  /* SPRINT 1.2 — z acima da cena: a cena tem transform (contexto de
     empilhamento) e pintava por cima do texto. Rede de segurança. */
  position:relative; z-index:3;
  padding:30px 2px 0; display:flex; flex-direction:column; align-items:flex-start;
  gap:9px; flex:1;
  opacity:calc(.78 + .22*var(--f));       /* nunca abaixo de .78 → sempre legível */
  transition:opacity .38s ease;
}
.hi-pcard-cat{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--hi-accent)}
.hi-pcard-nome{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:23px;
  line-height:1.16;letter-spacing:-.02em;color:var(--hi-ink);margin:0}
.hi-pcard-desc{
  font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.5;
  color:var(--hi-ink-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* CTA como LINK, não botão. Seis botões preenchidos criavam ruído de
   prioridade contra o CTA comercial da página — e eram o segundo maior
   sinal visual de "card". A área clicável continua sendo o item inteiro. */
/* ── CTA · "SELO DE LUZ" (SPRINT 1.2) ──────────────────────────────────────
   Não é botão. É um rótulo com um ANEL que ACENDE — a mesma gramática do
   palco: no repouso o anel é um filete apagado; no hover ele recebe luz
   (mesmo matiz quente da key + rebote esmeralda) e a seta faz a troca,
   saindo pela direita enquanto a seguinte entra pela esquerda.
   Preenchimento sólido foi descartado de propósito: uma pastilha verde
   chapada é justamente o "botão comum" que a seção não pode ter. */
.hi-cta{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:14px;
  color:var(--hi-ink); text-decoration:none}
.hi-cta-txt{
  position:relative; white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.005em; transition:color .3s ease}
/* filete que se desenha da esquerda para a direita */
.hi-cta-txt::after{
  content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:currentColor; opacity:.55;
  transition:right .44s cubic-bezier(.2,.7,.2,1)}
.hi-cta-anel{
  position:relative; flex:none; width:37px; height:37px; border-radius:50%;
  border:1px solid var(--hi-line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .34s ease, box-shadow .34s ease}
/* a luz que acende dentro do anel */
.hi-cta-anel::before{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,242,214,.30) 0%, transparent 58%),
    radial-gradient(circle at 62% 78%, rgba(46,204,113,.26) 0%, rgba(46,204,113,.06) 70%, transparent 100%);
  transform:scale(.35); opacity:0;
  transition:transform .46s cubic-bezier(.2,.7,.2,1), opacity .3s ease}
.hi-cta-seta{
  position:absolute; display:flex; color:var(--hi-ink);
  transition:transform .44s cubic-bezier(.2,.7,.2,1), opacity .3s ease}
.hi-cta-seta--2{transform:translateX(-24px); opacity:0}

.hi-pcard:hover .hi-cta-txt,
.hi-cta--ver:hover .hi-cta-txt,
.hi-pcard:focus-visible .hi-cta-txt,
.hi-cta--ver:focus-visible .hi-cta-txt{color:var(--hi-accent)}
.hi-pcard:hover .hi-cta-txt::after,
.hi-cta--ver:hover .hi-cta-txt::after,
.hi-pcard:focus-visible .hi-cta-txt::after,
.hi-cta--ver:focus-visible .hi-cta-txt::after{right:0}
.hi-pcard:hover .hi-cta-anel,
.hi-cta--ver:hover .hi-cta-anel,
.hi-pcard:focus-visible .hi-cta-anel,
.hi-cta--ver:focus-visible .hi-cta-anel{
  border-color:rgba(46,204,113,.48); box-shadow:0 0 0 4px rgba(46,204,113,.06)}
.hi-pcard:hover .hi-cta-anel::before,
.hi-cta--ver:hover .hi-cta-anel::before,
.hi-pcard:focus-visible .hi-cta-anel::before,
.hi-cta--ver:focus-visible .hi-cta-anel::before{transform:scale(1); opacity:1}
.hi-pcard:hover .hi-cta-seta,
.hi-cta--ver:hover .hi-cta-seta{transform:translateX(24px); opacity:0}
.hi-pcard:hover .hi-cta-seta--2,
.hi-cta--ver:hover .hi-cta-seta--2{transform:translateX(0); opacity:1}

/* variante do rodapé da seção — mesmo componente, escala maior */
.hi-cta--ver{margin-top:0; padding-top:0; white-space:nowrap}
.hi-cta--ver .hi-cta-txt{font-size:14px}
.hi-cta--ver .hi-cta-anel{width:44px;height:44px}
.hi-cta--ver:focus-visible{outline:none}
.hi-cta--ver:focus-visible .hi-cta-anel{outline:2px solid var(--hi-accent);outline-offset:3px}

/* ══ 8. BARRA DE CONTROLE UNIFICADA ═══════════════════════════════════════
   Progresso + contador + "Ver todos" + setas numa faixa única abaixo do
   palco. O contador informa quantos produtos existem ANTES de o visitante
   rolar — que é a fraqueza estrutural de qualquer rail. */
.hi-ctrl{display:flex;align-items:center;gap:26px;margin-top:40px}
.hi-progress{flex:1;max-width:300px;height:2px;background:var(--hi-line);border-radius:99px;overflow:hidden}
.hi-progress i{
  display:block;height:100%;width:34%;min-width:10%;background:var(--hi-accent);
  border-radius:99px;transition:width .3s ease, margin-left .3s ease}
.hi-contador{
  flex-shrink:0;display:flex;align-items:baseline;gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.10em;
  color:var(--hi-ink-faint)}
.hi-contador b{font-weight:800;font-size:14.5px;color:var(--hi-ink);font-variant-numeric:tabular-nums}
.hi-contador em{font-style:normal;font-variant-numeric:tabular-nums}
.hi-ctrl-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}

.hi-arrows{display:flex;gap:8px}
.hi-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--hi-line);
  background:transparent;color:var(--hi-ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease}
/* SPRINT 1.2 — o preenchimento verde chapado foi trocado pela mesma luz do
   anel do CTA: a seção passa a ter UM vocabulário de interação, não dois. */
.hi-arrow{position:relative;overflow:hidden}
.hi-arrow::before{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,242,214,.28) 0%, transparent 58%),
    radial-gradient(circle at 62% 78%, rgba(46,204,113,.24) 0%, rgba(46,204,113,.05) 70%, transparent 100%);
  transform:scale(.35); opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .26s ease}
.hi-arrow svg{position:relative;z-index:1}
.hi-arrow:hover{border-color:rgba(46,204,113,.48)}
.hi-arrow:hover::before{transform:scale(1);opacity:1}
.hi-arrow:focus-visible{outline:2px solid var(--hi-accent);outline-offset:3px}
.hi-arrow[disabled]{opacity:.26;cursor:default}
.hi-arrow[disabled]:hover{border-color:var(--hi-line)}
.hi-arrow[disabled]:hover::before{opacity:0;transform:scale(.35)}

/* Estado vazio — contraste corrigido (antes usava --hi-ink-faint, ~4:1) */
.hi-sec-vazio{
  border:1px dashed var(--hi-line);border-radius:16px;padding:52px 32px;text-align:center;
  color:var(--hi-ink-soft);font-family:'Inter',sans-serif;font-size:14.5px}

/* ══ 9. TABLET ════════════════════════════════════════════════════════════*/
@media(min-width:769px) and (max-width:1100px){
  .hi-sec{--hi-gutter:32px;--hi-gap:26px;--hi-cena:272px;--hi-ar:16px}
  .hi-rail{grid-auto-columns:calc((100% - var(--hi-gap))/1.85)}
  .hi-sec-title{font-size:34px}
  .hi-pcard-nome{font-size:20.5px}
  .hi-sec-head{margin-bottom:38px}
}

/* ══ 10. MOBILE — experiência própria, não o desktop reduzido ═════════════*/
@media(max-width:768px){
  .hi-sec{--hi-gutter:20px;--hi-gap:18px;--hi-cena:236px;--hi-ar:12px}
  .hi-sec{ padding:66px 0 58px }
  .hi-sec[data-espaco="compacto"]{ padding:54px 0 48px }
  .hi-sec[data-espaco="padrao"]  { padding:66px 0 58px }
  .hi-sec[data-espaco="amplo"]   { padding:88px 0 76px }

  .hi-sec-head{margin-bottom:28px}
  .hi-sec-title{font-size:clamp(25px,7vw,32px)}
  .hi-sec-sub{font-size:15px;margin-top:14px}

  .hi-rail{grid-auto-columns:84%}
  /* SPRINT 1.2 — folga maior sob a linha de chão: acomoda a sombra projetada
     sem que ela encoste no eyebrow. */
  .hi-pcard-info{padding-top:30px}
  .hi-pcard-nome{font-size:19px}
  .hi-pcard-produto{max-width:90%}
  .hi-cta{padding-top:16px}
  .hi-cta-anel{width:34px;height:34px}

  /* Foco por luz desligado: com 84% de largura há um produto em cena por vez,
     o efeito não teria leitura e só custaria bateria. */
  .hi-pcard{--f:1 !important}

  .hi-ctrl{flex-wrap:wrap;gap:16px 18px;margin-top:30px}
  .hi-progress{order:1;flex:1 1 auto;max-width:none}
  .hi-contador{order:2}
  .hi-ctrl-r{order:3;flex:1 1 100%;margin-left:0}
  .hi-ctrl-r .hi-cta--ver{width:100%;justify-content:center;gap:12px}
  .hi-arrows{display:none}          /* swipe nativo — setas seriam redundantes */
}

/* ══ 11. MOVIMENTO REDUZIDO ═══════════════════════════════════════════════*/
@media(prefers-reduced-motion:reduce){
  .hi-rail{scroll-behavior:auto}
  .hi-pcard{--f:1 !important}
  .hi-pcard-cena,.hi-pcard-produto,.hi-pcard-contato,.hi-pcard-po,
  .hi-pcard-info,.hi-cta-txt,.hi-cta-txt::after,.hi-cta-anel,.hi-cta-anel::before,.hi-cta-seta,.hi-arrow::before,
  .hi-sec-bg,.hi-progress i,.hi-cta,.hi-arrow{transition:none}
}

/* ══ 12. PREVIEW DO EDITOR (admin/home-institucional.html) ════════════════
   O Admin sobrescreve `.hi-sec-inner{padding:0 26px}` com literal. Como o
   palco é full-bleed e calcula o recuo a partir de --hi-gutter, ajustamos a
   variável aqui para o primeiro produto continuar alinhado com o título
   dentro do painel estreito. NENHUM arquivo do Admin é alterado — o ajuste
   vive neste arquivo compartilhado, como já era o caso das cores. */
#hi-sec-preview{--hi-gutter:26px;--hi-gap:18px;--hi-cena:230px;--hi-ar:12px}
#hi-sec-preview .hi-pcard-nome{font-size:17px}
#hi-sec-preview .hi-pcard-info{padding-top:20px}
#hi-sec-preview .hi-ctrl{margin-top:26px}
#hi-sec-preview .hi-arrow{width:38px;height:38px}