/* =========================================================================
   Ecossideral Group — Design system
   Fonte: Figma "Ecossideral - Site" (node 13:58)
   ========================================================================= */

:root {
  /* Cores da marca */
  --color-brand-dark: #0d4d26;   /* verde escuro — header/footer, títulos */
  --color-brand: #79ac47;        /* verde claro — CTA, faixa "Sobre a empresa" */
  --color-brand-dark-rgb: 13, 31, 23;

  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f5;
  --color-placeholder: #d9d9d9;
  --color-border: #e2e5e1;

  --color-text: #1a1a1a;
  --color-text-muted: #4b5a52;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.82);

  --radius: 12px;
  --radius-sm: 8px;
  --color-cta: #4f7a2c; /* verde mais escuro que --color-brand, texto branco passa AA (~5:1) */
  --max-width: 1200px; /* largura mais usual de sites institucionais (antes 1310px) */

  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica — proporções mais usuais de sites institucionais:
     título de destaque bem maior que o corpo de texto, corpo confortável
     para leitura (~16-17px), rótulos/legendas menores. */
  --fs-h1: clamp(2.25rem, 4.2vw, 3.25rem);       /* Título do Hero: 36–52px */
  --fs-h1-page: clamp(2rem, 3.4vw, 2.75rem);     /* Título de páginas internas: 32–44px */
  --fs-h2: clamp(1.75rem, 2.6vw, 2.25rem);       /* Títulos de seção: 28–36px */
  --fs-h3: clamp(1.125rem, 1.3vw, 1.3rem);       /* Títulos de card: 18–21px */
  --fs-lead: clamp(1.0625rem, 1.15vw, 1.1875rem);/* Parágrafo de destaque: 17–19px */
  --fs-body: 1.0625rem;                           /* Corpo de texto: 17px */
  --fs-small: 0.9375rem;                           /* Texto pequeno: 15px */
  --fs-stat: clamp(1.85rem, 3.2vw, 2.75rem);       /* Números de estatística: 30–44px */
  --fs-stat-label: clamp(0.95rem, 1.1vw, 1.0625rem); /* Legenda das estatísticas: 15–17px */
  --fs-nav: 1rem;                                    /* Links do menu: 16px */

  --lh-heading: 1.15;
  --lh-body: 1.65;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}

.container-narrow { max-width: 720px; }

a { color: var(--color-brand-dark); }

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

/* =========================================================================
   Header / navegação
   ========================================================================= */
.site-header {
  background: var(--color-brand-dark);
  position: sticky;
  top: 0;
  z-index: 30;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
  background: var(--color-brand);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* Quando o menu fica fixo (verde claro), o botão "Fale conosco" passa a
   usar o verde escuro para continuar se destacando do fundo do cabeçalho. */
.site-header.is-scrolled .btn-nav {
  background: var(--color-brand-dark);
}

.site-header.is-scrolled .btn-nav:hover {
  background: #093a1c;
}

.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
}

/* Depois que o usuário sai do topo da home, o cabeçalho (antes transparente
   sobre o vídeo do Hero) passa a ficar fixo na tela com o fundo verde
   escuro sólido — igual ao comportamento das páginas internas. */
.site-header--overlay.is-scrolled {
  position: fixed;
  background: var(--color-brand);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.logo { display: inline-flex; text-decoration: none; }
.logo img { width: clamp(130px, 12vw, 180px); height: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.3vw, 1.1rem);
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--color-text-on-dark);
  font-weight: 600;
  font-size: var(--fs-nav);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: toque leve, translúcido — indica "passível de clique" sem competir
   com o item ativo. Sobe 1px pra dar sensação tátil, sem trocar a cor do
   texto (funciona igual sobre o cabeçalho escuro e o cabeçalho claro do
   scroll). */
.main-nav a:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

/* Ativo: pílula sólida com leve sombra, para ficar claramente distinto do
   hover (peso visual maior = "você está aqui" vs. "você pode ir aqui"). */
.main-nav a.active {
  background: #ffffff;
  color: var(--color-brand-dark);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.main-nav a.active:hover { transform: none; }

.main-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.14);
}

/* Seletor de idioma (PT/ES/EN/中文): um botão compacto que expande um menu
   suspenso ao clicar (<details>/<summary> nativos, sem necessidade de JS). */
.lang-switch {
  position: relative;
  flex-shrink: 0;
  margin-left: clamp(0.5rem, 1vw, 0.75rem);
}

.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  cursor: pointer;
  color: var(--color-text-on-dark-muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: "\25BE"; font-size: 0.65rem; }

.lang-switch:hover summary,
.lang-switch[open] summary {
  background: #ffffff;
  color: var(--color-brand-dark);
  border-color: #ffffff;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 0.4rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.lang-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-menu a:hover,
.lang-menu a.active {
  background: var(--color-bg-alt);
  color: var(--color-brand-dark);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-text-on-dark);
  display: block;
}

.btn-nav { flex-shrink: 0; }

/* =========================================================================
   Botões
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--color-cta);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--fs-nav);
  letter-spacing: 0.01em;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(13, 77, 38, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn::after {
  content: "\2192";
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover {
  background: var(--color-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(13, 77, 38, 0.3);
}

.btn:hover::after { transform: translateX(3px); }

.btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(13, 77, 38, 0.25); }

.btn:focus-visible {
  outline: 2px solid var(--color-brand-dark);
  outline-offset: 2px;
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  min-height: min(50vw, 753px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-brand-dark);
  padding: clamp(6rem, 12vw, 8rem) 0 clamp(3rem, 6vw, 4rem);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.hero-copy { max-width: 660px; flex: 1 1 480px; }

.hero-copy h1 {
  color: #fff;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}

.hero-copy .lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin: 0;
}

.hero-badge {
  flex: 0 1 320px;
  max-width: 340px;
  margin-inline: auto;
}

.hero-badge img { width: 100%; height: auto; }

/* =========================================================================
   Seções genéricas
   ========================================================================= */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }

.section-intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.section-intro h2 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h2);
  margin-bottom: 1.25rem;
}

.section-intro p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
}

/* Grade de features (4 cards) */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.feature-card { text-align: center; }

.feature-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-placeholder);
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0;
}

/* =========================================================================
   Estatísticas
   ========================================================================= */
.stats {
  background: var(--color-brand-dark);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.stats-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.stat:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.stat::before {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-brand);
  margin-bottom: 1.1rem;
}

.stat-number {
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-stat);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin: 0 0 0.5rem;
}

.stat-label {
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-stat-label);
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 230px;
  margin: 0;
}

/* =========================================================================
   Nossa operação
   ========================================================================= */
.operacao-top {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.operacao-copy { flex: 1 1 420px; }

.operacao-copy h2 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h2);
  margin-bottom: 1.25rem;
}

.operacao-copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.operacao-copy p:last-child { margin-bottom: 0; }

/* Frase de fechamento em destaque, como uma citação — separa visualmente
   o convite final ("temos a solução para qualquer demanda") do restante
   do texto explicativo acima. */
.operacao-quote {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.5rem;
  border-left: 3px solid var(--color-cta);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-brand-dark);
}

.operacao-media { flex: 1 1 420px; max-width: 560px; margin-inline: auto; }

.operacao-media img {
  width: 100%;
  /* Formato mais vertical (era 666:471, paisagem) para a foto acompanhar
     a altura do bloco de texto ao lado, que cresceu com os novos
     parágrafos e a citação. A foto em si já é vertical (retrato), então
     o recorte central é bem leve. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  background: var(--color-placeholder);
}

.operacao-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.operacao-gallery img {
  width: 100%;
  aspect-ratio: 438 / 340;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-placeholder);
}

/* =========================================================================
   Sobre a empresa
   ========================================================================= */
.sobre-empresa { background: var(--color-brand); }

.sobre-empresa-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  flex-wrap: wrap;
}

.sobre-empresa-media { flex: 1 1 420px; max-width: 560px; margin-inline: auto; }

.sobre-empresa-media img {
  width: 100%;
  aspect-ratio: 666 / 385;
  object-fit: cover;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.35);
}

.sobre-empresa-media--seal img {
  object-fit: contain;
  background: none;
}

.sobre-empresa-copy { flex: 1 1 420px; color: #fff; }

.sobre-empresa-copy h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.25rem;
}

.sobre-empresa-copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

/* =========================================================================
   Rodapé
   ========================================================================= */
.site-footer {
  background: var(--color-brand-dark);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  /* Compensa o cabeçalho sticky quando o botão "Fale conosco" rola até
     aqui (#contato), pra não esconder o topo do rodapé atrás dele. */
  scroll-margin-top: 5.5rem;
}

.footer-eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark-muted);
  margin: 0 0 1.25rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.footer-col {
  min-width: 0;
}

.footer-col h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.65rem;
}

.footer-col p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  color: var(--color-text-on-dark-muted);
}

.footer-col a {
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-col a:hover { color: var(--color-brand); }

.footer-copy {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

/* Páginas internas simples sem imagem de topo (Fale conosco, 404) */
.section h1 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h1-page);
  margin-bottom: 1.5rem;
}

.container-narrow p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

/* =========================================================================
   Hero das páginas de conteúdo (Agro, Logística, Terminais, Nossa história)
   Mesma ideia do hero da Home (mídia full-bleed + cabeçalho sobreposto),
   só que com foto estática no lugar do vídeo, e o texto ancorado embaixo
   em vez de centralizado — como aqui não tem selo ao lado, fica mais
   parecido com um "banner editorial" do que com uma tela cheia.
   ========================================================================= */
.page-hero {
  position: relative;
  min-height: clamp(320px, 38vw, 480px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-brand-dark);
}

.page-hero-media {
  position: absolute;
  inset: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 20, 14, 0.15) 0%, rgba(9, 20, 14, 0.8) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem);
}

.page-hero-content h1 {
  color: #fff;
  font-size: var(--fs-h1-page);
  max-width: 38ch;
  margin-bottom: 0.85rem;
}

.page-hero-content .lead {
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-muted);
  margin: 0;
}

/* =========================================================================
   Página Agro — seções reutilizáveis (também servem de base para outras
   páginas de conteúdo, se precisarem de faixa alternada, rótulo "eyebrow",
   grade de cards com foto, layout dividido texto/imagem ou grade de 3
   colunas no futuro)
   ========================================================================= */

/* Faixa de fundo levemente tintada, para alternar visualmente com as
   seções de fundo branco sem precisar de mais uma cor de marca. */
.section-alt { background: var(--color-bg-alt); }

/* Rótulo curto em caixa alta acima de um título de seção — reforça a
   hierarquia visual sem precisar aumentar o tamanho do H2. */
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cta);
  margin: 0 0 0.6rem;
}

/* =========================================================================
   Introdução da página Agro — parágrafo de abertura com um pouco mais de
   destaque tipográfico (tamanho "lead"), seguido de pílulas com as frentes
   de atuação abordadas na página. As pílulas dão continuidade visual ao
   parágrafo (que antes ficava sozinho, "flutuando" no meio da seção) e já
   antecipam o que vem a seguir na página.
   ========================================================================= */
.agro-intro p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
}

.intro-tags {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
}

.intro-tags li {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-brand-dark);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* =========================================================================
   Áreas de atuação (Produção Agrícola, Pecuária, Piscicultura) — lista de
   linhas (foto + conteúdo lado a lado), em vez de cards de mesma altura.
   Como cada área tem uma quantidade diferente de itens (3, 1 e 1), forçar
   cards com a mesma altura deixava uns com muito espaço vazio; empilhadas
   em linhas, cada uma ocupa só a altura que o próprio conteúdo precisa.
   ========================================================================= */
.area-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.area-row {
  display: flex;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--color-border);
}

.area-row:first-child {
  padding-top: 0;
  border-top: none;
}

/* Fotos maiores e intercaladas: a linha par (Pecuária) inverte a ordem,
   trazendo a foto para a direita — em vez de todas alinhadas do mesmo
   lado, alterna e dá mais ritmo visual à lista. */
.area-row:nth-child(even) {
  flex-direction: row-reverse;
}

.area-row-media {
  position: relative;
  flex: 0 0 clamp(240px, 34vw, 400px);
  /* Altura fixa e igual nas 3 linhas (01, 02 e 03) — independe de quanto
     texto cada área tem do lado, então nenhuma foto fica maior que as
     outras só porque o texto é mais curto ou a foto de origem é vertical
     (caso da Pecuária). No mobile (linha empilhada), isso é desfeito
     abaixo e a foto volta a ter uma proporção fixa. */
  height: 320px;
}

.area-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-placeholder);
  display: block;
}

/* Variante para linhas onde o bloco de texto é naturalmente mais alto que
   os 320px padrão (ex.: Cargas Conteinerizadas em Terminais, que tem 3
   itens de lista) — em vez de manter a foto baixa e desproporcional,
   deixa a altura livre para o flex (align-items: stretch do .area-row)
   esticar a foto até acompanhar a altura real do texto ao lado. */
.area-row-media.is-stretch {
  height: auto;
  align-self: stretch;
}


.area-row-number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(var(--color-brand-dark-rgb), 0.35);
}

/* Mesmo gradiente escuro (verde da marca) usado no banner do topo da
   página — aqui bem mais sutil, só para dar uma unidade visual às fotos
   das seções internas, já que elas não têm texto por cima que precise
   de contraste. */
.area-row-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(9, 20, 14, 0) 40%, rgba(9, 20, 14, 0.55) 100%);
  pointer-events: none;
}

.area-row-body { flex: 1; min-width: 0; padding-top: 0.25rem; }

.area-row-body h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.area-row-body > p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

/* Grade responsiva: os 3 itens de "Produção Agrícola" cabem lado a lado
   numa linha larga, enquanto os itens únicos de "Pecuária" e "Piscicultura"
   simplesmente ocupam uma coluna, sem sobrar bloco vazio ao lado. */
.area-detail-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 1.75rem;
}

.area-detail-list li {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.area-detail-list li strong {
  display: block;
  color: var(--color-brand-dark);
  font-size: var(--fs-small);
  margin-bottom: 0.15rem;
}

/* Versão "destacada" da lista de detalhes — usada quando os itens carregam
   informação técnica importante (metas de abate, protocolos sanitários,
   documentação etc.) e merecem mais peso visual do que o texto corrido
   padrão. Cada item vira um pequeno bloco com fundo e borda de destaque,
   em vez de só texto separado por uma linha divisória no topo. */
.area-detail-list-highlight {
  border-top: none;
  padding-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.area-detail-list-highlight li {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}

.area-detail-list-highlight li strong {
  font-size: var(--fs-body);
  margin-bottom: 0.3rem;
}

/* =========================================================================
   Fertilizantes / Barter — foto + checklist + citação de destaque.
   ========================================================================= */
.barter-media {
  position: relative;
  flex: 1 1 360px;
  max-width: 440px;
  margin-inline: auto;
  align-self: stretch;
  min-height: 260px;
}

.barter-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-placeholder);
  display: block;
}

.barter-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(9, 20, 14, 0) 40%, rgba(9, 20, 14, 0.55) 100%);
  pointer-events: none;
}
.barter-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.barter-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.barter-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-cta);
  font-weight: 700;
}

/* Versão em 3 colunas de Fertilizantes/Barter (Agro): 1ª coluna com a
   foto, as outras duas com cada subseção (Nutrição do Solo / Proteção
   Financeira) lado a lado. O título/lead ficam fora, num .section-intro
   padrão. A citação + botão ocupam uma "linha" extra da grade que se
   estende só por baixo das colunas 2 e 3 — e a foto, ocupando as duas
   linhas da coluna 1, estica (align-items: stretch, padrão do grid) até
   acompanhar a altura total desse bloco (texto + citação) ao lado. */
.barter-columns {
  grid-template-rows: auto auto;
}

.barter-columns > *:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.barter-columns > *:nth-child(2) { grid-column: 2; grid-row: 1; }
.barter-columns > *:nth-child(3) { grid-column: 3; grid-row: 1; }
.barter-columns > *:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }

.barter-columns .barter-media {
  position: relative;
  height: 100%;
  min-height: 0;
  max-height: none;
  max-width: none;
  margin-inline: 0;
}

.barter-columns .barter-media img { height: 100%; }

.barter-col h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.barter-col > p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 1rem;
}

.barter-quote-row { display: flex; flex-direction: column; align-items: flex-start; }

.barter-quote-row .operacao-quote { margin-top: 0; width: 100%; }

.barter-quote-row .btn { margin-top: 1.5rem; }

@media (max-width: 960px) {
  .barter-columns { grid-template-columns: 1fr; }

  .barter-columns > *:nth-child(1),
  .barter-columns > *:nth-child(2),
  .barter-columns > *:nth-child(3),
  .barter-columns > *:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }

  .barter-columns .barter-media { height: auto; aspect-ratio: 4 / 3; }
  .barter-columns .barter-media img { height: 100%; }
}

/* Grade de 3 colunas (Por que escolher a Ecossideral Group) — cards
   brancos com espaço de ícone no topo, sobre a faixa cinza da seção. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* Selo com o ícone de cada diferencial (biblioteca de ícones em
   includes/icons.php) — fundo levemente tintado, ícone herda a cor via
   currentColor. */
.reason-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-cta);
  margin-bottom: 1.1rem;
}

.reason-icon svg {
  width: 28px;
  height: 28px;
}

.reason-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reason-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(var(--color-brand-dark-rgb), 0.1);
}

.reason-card h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.reason-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0;
}


/* Faixa final de chamada para ação, mesmo contraste escuro das
   estatísticas, para fechar a página com um convite direto ao contato. */
.cta-band {
  background: var(--color-brand);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.cta-band-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cta-band-inner h2 {
  color: #fff;
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
}

.cta-band-inner p {
  color: #fff;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin: 0 0 1.75rem;
}

/* =========================================================================
   Página Logística — blocos de mapas/infográficos (rede logística,
   corredores/portos, destinos globais), grade de 2 colunas para os
   "Pontos de Valor" da infraestrutura e cards de destino com bandeira.
   ========================================================================= */

/* Moldura para as imagens de mapa/infográfico: cantos arredondados e
   sombra suave, sem cortar a imagem (mantém a proporção original em vez
   de aplicar object-fit:cover, já que essas imagens têm texto/legenda que
   não pode ser cortado). Centralizada com uma largura máxima por seção,
   definida inline em cada <img> conforme a proporção de cada mapa. */
.media-card {
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(var(--color-brand-dark-rgb), 0.12);
}

.media-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Grade de 2 colunas — usada nos 4 "Pontos de Valor" da infraestrutura
   logística, onde os textos são mais longos que os das grades de 3/4
   colunas e pedem mais espaço horizontal por card. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* Cards de destino (China, Índia, Turquia, Emirados Árabes) — bandeira
   emoji, nome do país e uma linha de contexto, em grade de 4 colunas
   (reutiliza .grid-4) sobre o mapa-múndi de rotas. */
.destino-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.destino-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(var(--color-brand-dark-rgb), 0.1);
}

.destino-flag {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.destino-card h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}

.destino-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0;
}

/* Grade dos 3 cards de vídeo institucional (ver seção "Vídeos
   institucionais" mais abaixo) — a regra base precisa ficar aqui, ANTES do
   bloco responsivo logo a seguir: como tem a mesma especificidade de
   ".video-grid" nas media queries abaixo, se ficasse depois no arquivo ela
   sempre venceria (CSS aplica a regra que vem por último quando a
   especificidade empata), quebrando o empilhamento em 1 coluna no
   celular independente da largura da tela. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .operacao-gallery { grid-template-columns: repeat(2, 1fr); }
  .stats-inner { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .footer-cols { text-align: center; justify-items: center; }
}

@media (max-width: 1050px) {
  /* O breakpoint precisa ficar acima de ~1000px porque, com o seletor de
     idioma somado aos links de navegação (principalmente em espanhol/
     português, que têm rótulos mais longos), o menu para de caber em uma
     única linha antes disso — vira o menu hambúrguer para evitar que o
     seletor de idioma "quebre linha" e fique deslocado embaixo dos links.
     Sem a logo no cabeçalho mobile: fica só o botão de menu (esquerda) e o
     CTA "Fale conosco" (direita), menos poluído em telas estreitas. */
  .logo { display: none; }

  .nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-brand-dark);
    padding: 0.5rem 1.25rem 0.75rem;
    /* Sem overflow/scroll aqui: o conteúdo (links + seletor de idioma)
       sempre cabe na tela, e overflow:auto cortaria o menu suspenso do
       seletor de idioma, que precisa "vazar" visualmente para fora do nav. */
  }

  .main-nav.is-open { display: block; }

  /* Lista compacta: linhas divididas por um traço sutil, em vez do grande
     espaçamento anterior que deixava o menu "empilhado".
     Os seletores usam ">ul" para valer só para os links de navegação,
     sem vazar para dentro do menu suspenso do seletor de idioma
     (.lang-menu), que é outro elemento irmão dentro do mesmo .main-nav. */
  .main-nav ul { flex-direction: column; gap: 0; }

  .main-nav > ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .main-nav > ul li:last-child { border-bottom: none; }

  .main-nav > ul a {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.9rem 0.5rem 0.9rem 1rem;
    border-radius: 0;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main-nav > ul a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--color-brand);
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .main-nav > ul a:hover,
  .main-nav > ul a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .main-nav > ul a:hover::before,
  .main-nav > ul a.active::before {
    height: 60%;
  }

  .main-nav > ul a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  /* Fundo sempre sólido (mesmo na home) para o conteúdo do Hero não
     transparecer atrás dos links do menu aberto. */
  .site-header--overlay .main-nav { background: var(--color-brand-dark); }

  /* Seletor de idioma no menu mobile: centralizado abaixo dos links, com
     uma divisória no lugar da margem lateral usada no desktop. */
  .lang-switch {
    margin: 0.75rem auto 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
  }

  .lang-menu {
    right: 50%;
    transform: translateX(50%);
  }

  .hero-content { justify-content: center; text-align: center; }
  .hero-badge { order: -1; max-width: 220px; }

  /* Garante que o título do hero das páginas internas nunca fique atrás
     do cabeçalho fixo/sobreposto em telas estreitas, mesmo com textos
     mais longos (ex.: Agro, Logística) que ocupam mais linhas. */
  .page-hero { min-height: clamp(420px, 60vw, 500px); }
  .page-hero-content { padding-top: clamp(5rem, 15vw, 6rem); }
}

@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  /* Em telas bem estreitas, 2 colunas espremem demais rótulos mais longos
     (ex.: em inglês) — volta a empilhar em 1 coluna só. */
  .intro-tags { grid-template-columns: 1fr; justify-items: center; }
  .operacao-gallery { grid-template-columns: 1fr; }
  .operacao-top,
  .sobre-empresa-inner,
  .area-row,
  .area-row:nth-child(even) { flex-direction: column; }
  .area-row-media {
    flex-basis: auto;
    width: 100%;
    height: auto;
  }
  .area-row-media img { height: auto; aspect-ratio: 4 / 3; }
}

/* =========================================================================
   Acessibilidade — pular para o conteúdo
   ========================================================================= */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 100;
  background: #fff;
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: var(--fs-small);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  /* translateY (em vez de "top" negativo) garante que o link fique
     totalmente fora da tela até receber foco, não importa a altura real
     (que varia por idioma/tamanho de fonte) — evita uma sliver branca
     quase imperceptível "vazando" no topo da página. */
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(1rem);
}

/* =========================================================================
   Fade ao rolar — os elementos com .reveal entram suavemente quando ficam
   visíveis na tela (via IntersectionObserver em main.js). Sem JS ou com
   "reduzir movimento" ativado, o conteúdo já aparece pronto — nunca fica
   escondido esperando script nenhum.
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.no-js .reveal,
.reveal.reveal-skip {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Atraso escalonado para grupos de cards (feature-grid, stats, galeria),
   dando um efeito de "entrada em cascata" em vez de tudo surgir junto. */
.reveal-stagger:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   Zoom sutil nas fotos — aplica-se às fotos "de conteúdo" (cards, galeria),
   não aos heróis de fundo nem ao selo, que não pedem esse efeito. Mesmo
   efeito usado nas páginas Agro (area-row, barter) e Logística (media-card).
   ========================================================================= */
.feature-card img,
.operacao-media img,
.operacao-gallery img,
.area-row-media img,
.barter-media img,
.media-card img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover img,
.operacao-media:hover img,
.operacao-gallery img:hover,
.area-row-media:hover img,
.barter-media:hover img,
.media-card:hover img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card img,
  .operacao-media img,
  .operacao-gallery img,
  .area-row-media img,
  .barter-media img,
  .media-card img {
    transition: none;
  }
  .feature-card:hover img,
  .operacao-media:hover img,
  .operacao-gallery img:hover,
  .area-row-media:hover img,
  .barter-media:hover img,
  .media-card:hover img {
    transform: none;
  }
}

/* =========================================================================
   Aviso de cookies (LGPD) — o site só grava um cookie técnico (idioma
   escolhido); este aviso informa isso de forma simples, sem bloquear a
   navegação. Fica lembrado por 1 ano via localStorage.
   ========================================================================= */
.cookie-notice {
  position: fixed;
  left: clamp(1rem, 4vw, 1.5rem);
  right: clamp(1rem, 4vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 60;
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.cookie-notice[hidden] { display: none; }

.cookie-notice p {
  margin: 0;
  flex: 1 1 320px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-muted);
}

.cookie-notice button {
  flex-shrink: 0;
  background: #fff;
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: var(--fs-small);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-notice button:hover { background: var(--color-brand); color: #fff; }

.cookie-notice button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =========================================================================
   Página 404 — links de saída para não deixar o visitante preso numa
   página sem rumo.
   ========================================================================= */
.error-404-links-title {
  font-weight: 600;
  color: var(--color-text);
  margin: 2.5rem 0 0.85rem;
}

.error-404-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  margin: 0;
  padding: 0;
}

.error-404-links a {
  display: inline-block;
  color: var(--color-brand-dark);
  font-weight: 600;
  text-decoration: none;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.error-404-links a:hover {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: #fff;
}


/* =========================================================================
   Vídeos institucionais — grade de cards que abrem uma modal com o player
   ao clicar (seção "Conheça a nossa produção", Agro). Sem JS os cards
   continuam focáveis/roláveis normalmente; o vídeo real entra depois via
   atributo data-video-src em cada .video-card (enquanto vazio, a modal
   mostra o aviso de placeholder).
   ========================================================================= */
/* Subtítulo específico da seção de vídeos, entre o .section-intro geral
   e a grade de cards — reaproveita a largura/centralização do
   .section-intro, mas com hierarquia menor (h3), já que é um segundo
   nível de contexto (o tema comum aos 3 vídeos), não o título da seção. */
/* Como esse bloco costuma vir logo depois de um .section-intro sem
   parágrafo (só eyebrow + h2), as margens inferiores colapsam e o
   espaço ficava apertado entre os dois títulos — por isso aqui a margem
   superior é maior que a inferior do .section-intro, prevalecendo no
   colapso e dando respiro real entre "h2" e este subtítulo. */
.video-intro {
  text-align: center;
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.75rem, 3.5vw, 2.5rem);
}

.video-intro h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.video-intro p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

.video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-card:hover,
.video-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(var(--color-brand-dark-rgb), 0.14);
}

.video-card:focus-visible {
  outline: 2px solid var(--color-brand-dark);
  outline-offset: 2px;
}

.video-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-placeholder);
}

/* A <picture> vira a própria camada que preenche a miniatura (em vez de só
   o <img>) — isso evita que o elemento <picture> (sem conteúdo em fluxo,
   já que o filho vira posicionado) contribua com uma largura residual no
   flex e empurre o ícone de play para o lado; a foto sempre ocupa 100% da
   caixa 16:9, sem esticar (object-fit: cover cuida do corte). */
.video-card-thumb picture {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;
}

.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mesmo gradiente escuro usado em .area-row-media::after, para o botão de
   play branco manter contraste sobre a capa do vídeo. */
.video-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 20, 14, 0.05) 0%, rgba(9, 20, 14, 0.45) 100%);
  pointer-events: none;
}

/* Centralizado por posicionamento absoluto (não mais por flex do pai) —
   garante que o ícone fique sempre exatamente no meio da foto, em vez de
   deslocado para o lado. */
.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--color-brand-dark-rgb), 0.85);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.video-card-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px; /* leve deslocamento óptico do ícone de play */
}

.video-card:hover .video-card-play,
.video-card:focus-visible .video-card-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-brand-dark);
}

.video-card-body {
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
}

.video-card-title {
  display: block;
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.video-card-text {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Modal de vídeo (compartilhada pelos 3 cards acima) */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.video-modal[hidden] { display: none; }

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(9, 20, 14, 0.78);
  border: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

/* Trava o scroll do fundo da página enquanto a modal de vídeo está aberta. */
body.video-modal-open {
  overflow: hidden;
}

.video-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(9, 20, 14, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  background: var(--color-brand-dark);
}

.video-modal-close svg { width: 20px; height: 20px; }

.video-modal-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.video-modal-player video,
.video-modal-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-modal-placeholder {
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-small);
  text-align: center;
  max-width: 26ch;
  margin: 0;
  padding: 0 1.5rem;
}

.video-modal-info {
  padding: clamp(1.5rem, 3vw, 2rem);
}

.video-modal-info h3 {
  color: var(--color-brand-dark);
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.video-modal-info p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0;
}
/* Google Tradutor: o widget faz a tradução automática em segundo plano
   (ver includes/footer.php); o dropdown padrão que o Google injeta fica
   oculto aqui porque o site já tem seu próprio seletor de idioma no
   cabeçalho. */
.google-translate-widget {
  display: none !important;
}

/* Evita o "salto" do conteúdo quando o Google insere a barra de aviso
   de tradução no topo da página. */
body {
  top: 0 !important;
}

.goog-te-banner-frame {
  display: none !important;
}