/* ============================================================================
   SITE INSTITUCIONAL — página pública "/" (templates/site/site_institucional.html)
   Vídeo de colheita em tela cheia sob camada verde-escura + grade sutil;
   conteúdo centralizado. Uma tela, sem rolagem a partir de 992px de largura.
   Paleta verde da tela de login. Sempre escuro (é a vitrine, não o sistema).
   ============================================================================ */
:root {
  --site-verde: #2f7d1f;
  --site-verde-escuro: #1d5313;
  --site-verde-claro: #8cc63f;
  --site-noite: #06140a;
  --site-branco-suave: rgba(255, 255, 255, .78);
  --site-vidro: rgba(255, 255, 255, .08);
  --site-vidro-borda: rgba(255, 255, 255, .16);
  --site-serifa: 'Fraunces', Georgia, 'Times New Roman', serif;
  --site-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--site-noite);
  color: #fff;
  font-family: var(--site-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Fundo fixo: vídeo, escurecimento, grade digital e vinheta ── */
.site-fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--site-noite); }
.site-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: site-aproximar 28s ease-in-out infinite alternate;
}
.site-camada {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, rgba(6, 20, 10, .3) 0%, rgba(6, 20, 10, .62) 70%, rgba(6, 20, 10, .85) 100%),
    linear-gradient(180deg, rgba(6, 20, 10, .5) 0%, rgba(13, 42, 16, .15) 40%, rgba(6, 20, 10, .85) 100%);
}
.site-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(140, 198, 63, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 198, 63, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 75%);
}

/* ── Estrutura ── */
.site {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.6vh, 1.75rem) clamp(1rem, 4vw, 3rem);
}

/* ── Topo ── */
.site-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.site-acoes { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Seletor de idioma: pílula de vidro com as bandeiras (PY → Español, BR →
   Português). O ativo fica aceso; o outro, apagado. */
.site-idioma {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: var(--site-vidro);
  border: 1px solid var(--site-vidro-borda);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-idioma button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  padding: .3rem .8rem .3rem .3rem;
  border-radius: 999px;
  font: 500 .78rem/1 var(--site-sans);
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.site-idioma .flag {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-size: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
  filter: grayscale(.7) brightness(.85);
  opacity: .75;
  transition: filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.site-idioma button:hover { color: #fff; }
.site-idioma button:hover .flag { filter: none; opacity: 1; }
.site-idioma button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.site-idioma button[aria-pressed="true"] .flag { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--site-verde-claro); }
.site-idioma button:focus-visible { outline: 2px solid var(--site-verde-claro); outline-offset: 2px; }
.site-idioma-separador { width: 1px; height: 1.1rem; margin: 0 .15rem; background: var(--site-vidro-borda); }

.site-botao-acesso {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #3d9a29 0%, var(--site-verde-escuro) 100%);
  border: 1px solid rgba(140, 198, 63, .45);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(140, 198, 63, .0), 0 10px 26px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.site-botao-acesso:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(140, 198, 63, .18), 0 12px 30px rgba(0, 0, 0, .4);
}
.site-botao-acesso:focus-visible { outline: 3px solid var(--site-verde-claro); outline-offset: 3px; }

/* ── Conteúdo centralizado ── */
.site-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 3vh, 2rem) 0;
  animation: site-surgir .9s ease both;
}

/* ── Logomarca para fundo escuro: emblema + letreiro em texto ──
   Tudo em "em": o tamanho da marca inteira vem do font-size de .site-marca. */
.site-marca {
  --marca-verde: #8cc63f;
  margin: 0;
  font-size: clamp(.62rem, min(1.55vw, 2.15vh), 1.05rem);
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "emblema divisor letreiro" "comercio comercio comercio";
  align-items: center;
  column-gap: 1.6em;
  font-family: 'Montserrat', var(--site-sans);
  font-weight: 400;
  line-height: 1;
  filter: drop-shadow(0 .5em 1.4em rgba(0, 0, 0, .45));
}
.site-emblema { grid-area: emblema; display: block; height: 10.5em; width: auto; }
.site-marca-divisor {
  grid-area: divisor;
  align-self: stretch;
  width: 2px;
  margin: .4em 0;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--marca-verde) 18%, var(--marca-verde) 82%, transparent);
}
.site-letreiro { grid-area: letreiro; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.site-letreiro-nome {
  font-size: 4.6em;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4ef 48%, #c3ccbf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-letreiro-sub {
  margin-top: .3em;
  font-size: 2.12em;
  font-weight: 700;
  letter-spacing: .118em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #a8dc55 0%, #6fae2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-letreiro-lema {
  margin-top: 1.05em;
  font-size: 1.12em;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}
.site-letreiro-lema i { font-style: normal; color: var(--marca-verde); margin: 0 .55em; }
.site-letreiro-comercio {
  grid-area: comercio;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .9em;
  margin-top: 1.1em;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.site-letreiro-comercio::before,
.site-letreiro-comercio::after { content: ''; width: 3.2em; height: 2px; border-radius: 2px; background: var(--marca-verde); opacity: .85; }
.site-letreiro-comercio svg { width: 2.2em; height: 2.2em; color: var(--marca-verde); }

.site-sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: clamp(1.4rem, 4.2vh, 2.6rem);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--site-verde-claro);
}
.site-sobrelinha::before,
.site-sobrelinha::after { content: ''; width: 2.25rem; height: 1px; background: currentColor; opacity: .7; }

.site-titulo {
  margin: clamp(.5rem, 1.6vh, 1rem) 0 0;
  font-family: var(--site-serifa);
  font-weight: 400;
  font-size: clamp(2rem, min(4.6vw, 6.2vh), 4.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.site-titulo em { font-style: italic; color: var(--site-verde-claro); }
/* Final digitado. Celular/tablet (e telas onde a frase mais longa não cabe):
   quebra depois da vírgula. Desktop: mesma linha. Nos dois casos a frase fica
   sempre centralizada pelo texto visível (sem espaço reservado). */
.site-titulo-final { display: block; min-height: 1.06em; white-space: nowrap; }
@media (min-width: 992px) {
  .site-titulo:not(.site-titulo-quebrado) .site-titulo-final { display: inline; }
}
.site-cursor {
  display: inline-block;
  width: .06em;
  height: .82em;
  margin-left: .08em;
  vertical-align: -.06em;
  border-radius: 1px;
  background: var(--site-verde-claro);
  animation: site-piscar 1s steps(1) infinite;
}
@keyframes site-piscar { 50% { opacity: 0; } }

.site-lead {
  max-width: 40rem;
  text-wrap: balance;
  margin: clamp(.6rem, 2vh, 1.25rem) auto 0;
  font-size: clamp(.95rem, 1.9vh, 1.1rem);
  line-height: 1.65;
  color: var(--site-branco-suave);
}

/* Contato pelo WhatsApp: entre o texto e os pilares. Verde da marca (o mesmo
   degradê de "AGRO INVERSIONES" na logomarca), não o verde do WhatsApp. */
.site-botao-contato {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(1rem, 3vh, 1.75rem);
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #a8dc55 0%, #6fae2c 100%);
  border: 1px solid rgba(200, 235, 140, .55);
  color: #0f2a0b;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(140, 198, 63, .22), 0 4px 12px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.site-botao-contato:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(140, 198, 63, .2), 0 12px 32px rgba(140, 198, 63, .3);
}
.site-botao-contato:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.site-pilares {
  list-style: none;
  margin: clamp(1.25rem, 3.6vh, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 15.5rem));
  gap: .9rem;
}
.site-pilares li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background: var(--site-vidro);
  border: 1px solid var(--site-vidro-borda);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.site-pilares li:hover { border-color: rgba(140, 198, 63, .5); background: rgba(255, 255, 255, .11); transform: translateY(-2px); }
.site-pilar-icone {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: .7rem;
  background: rgba(140, 198, 63, .16);
  color: var(--site-verde-claro);
}
.site-pilares strong { display: block; font-size: .92rem; font-weight: 600; }
.site-pilares small { display: block; margin-top: .2rem; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .65); }

/* ── Rodapé ── */
.site-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .76rem;
  color: rgba(255, 255, 255, .6);
}

.site-credito {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s ease;
}
.site-credito:hover { color: #fff; }
.site-credito:hover svg { color: var(--site-verde-claro); }
.site-credito:focus-visible { outline: 2px solid var(--site-verde-claro); outline-offset: 3px; border-radius: 4px; }

@keyframes site-surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes site-aproximar {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .site-principal, .site-video, .site-cursor { animation: none; }
  .site-cursor { display: none; }
}

/* ── Desktop: exatamente uma tela, sem rolagem ── */
@media (min-width: 992px) {
  html, body { overflow: hidden; }
  .site { height: 100vh; height: 100dvh; }
}
/* Telas baixas: os pilares ficam só com o título para caber sem rolar */
@media (min-width: 992px) and (max-height: 720px) {
  .site-pilares small { display: none; }
  .site-pilares li { align-items: center; padding: .65rem .9rem; }
}

/* ── Tablet e celular ── */
@media (max-width: 991.98px) {
  .site-pilares { grid-template-columns: minmax(0, 26rem); }
  .site-marca { font-size: clamp(.5rem, 2.05vw, .9rem); }
}
@media (max-width: 575.98px) {
  .site-idioma-nome { display: none; }   /* no celular, só as bandeiras */
  .site-idioma button { padding: .3rem; }
  .site-botao-acesso { padding: .6rem .9rem; font-size: .82rem; }
  .site-sobrelinha { letter-spacing: .12em; font-size: .64rem; }
  .site-sobrelinha::before, .site-sobrelinha::after { display: none; }
  .site-rodape { flex-direction: column; gap: .35rem; text-align: center; }
}