/*
===============================================================================
PROJETO: Fazenda Rio Vermelho — Landing Page
DESENVOLVIMENTO: Roots do Cerrado Media
https://rootsdocerrado.com.br/

Folha de estilos estruturada com responsividade por breakpoints, compatibilidade
entre navegadores, tratamento de viewport e safe areas, animações otimizadas,
acessibilidade e organização orientada à manutenção e evolução do projeto.

Trechos e bibliotecas de terceiros preservam seus respectivos créditos e
licenças. A implementação específica deste projeto foi organizada pela
Roots do Cerrado Media.

© 2026 Roots do Cerrado Media.
===============================================================================
*/

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/*! main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css */

/* ===========================================================================
   01. CONFIGURAÇÕES GLOBAIS
   Tipografia, dimensões-base e modelo de caixa.
   =========================================================================== */

html { color: #222; font-size: 1em; line-height: 1.4; height: 100%; font-family: "Inter", sans-serif; }
body { height: 100%; }
*, *::before, *::after { box-sizing: border-box !important; }

/* ===========================================================================
   02. CORREÇÕES PARA WEBVIEWS E DISPOSITIVOS MÓVEIS
   Viewport dinâmico, safe areas, toque e comportamento do iOS.
   =========================================================================== */
.vh-100-fix { height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
.safe-padding { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); }
input, select, textarea { font-size: 16px; }
html, body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }
video { object-fit: cover; }
.touch-pan-y { touch-action: pan-y; }

/* ===========================================================================
   03. NORMALIZAÇÃO E ELEMENTOS NATIVOS
   Ajustes de seleção, mídia, formulários e elementos estruturais.
   =========================================================================== */
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
a { color: #0E293D; }

/* ===========================================================================
   04. PLACEHOLDERS DE FORMULÁRIO
   Compatibilidade visual entre navegadores atuais e legados.
   =========================================================================== */
::-webkit-input-placeholder { color: #303030; opacity: 1; }
:-moz-placeholder { color: #303030; opacity: 1; }
::-moz-placeholder { color: #303030; opacity: 1; }
:-ms-input-placeholder { color: #303030; }
::-ms-input-placeholder { color: #303030; }
::placeholder { color: #303030; opacity: 1; }


.desktop{display: block;}
.tablet{display: none;}
.mobile{display: none;}


/*
 * Indica que os botões de idioma e o item do site são clicáveis.
 */
.item-link, .seletor-idioma { cursor: pointer; }

/*
 * Destaque acessível ao navegar com a tecla Tab.
 */
.item-link:focus, .seletor-idioma:focus, .item-link:focus-visible, .seletor-idioma:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/*
 * Estado visual do idioma atualmente selecionado.
 */
.seletor-idioma { transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease; }
.seletor-idioma:hover { transform: translateY(-2px); }
.seletor-idioma.idioma-ativo { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(24, 58, 45, 0.45); }
.seletor-idioma:not(.idioma-ativo) { opacity: 0.72; }

/*
 * Posiciona o contêiner de toast no centro inferior da tela.
 * As regras !important sobrescrevem o comportamento mobile
 * padrão do Materialize, que aplica largura total.
 */
#toast-container { top: auto !important; right: auto !important; bottom: 20px !important; bottom: calc(12px + var(--safe-bottom)) !important; left: 50% !important; display: flex; flex-direction: column; align-items: center; width: calc(100% - 40px) !important; min-width: 0 !important; max-width: 380px !important; transform: translateX(-50%); pointer-events: none; }

/*
 * Aparência dos avisos utilizados pela página.
 */
#toast-container .toast.toast-arredondado { display: inline-flex; align-items: center; justify-content: center !important; width: auto !important; min-width: 230px !important; max-width: 100% !important; min-height: 48px; margin: 0 auto 10px !important; padding: 12px 22px !important; background-color: #3e933e; border-radius: 18px !important; color: #ffffff; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; box-sizing: border-box; pointer-events: auto; }

/*
 * Ajustes para celulares muito estreitos.
 */
@media only screen and (max-width:360px) {
  #toast-container { width: calc(100% - 28px) !important; }
  #toast-container .toast.toast-arredondado { min-width: 0 !important; width: 100% !important; padding: 11px 16px !important; font-size: 14px; }
}


/* ===========================================================================
   05. HERO / TOPO DA LANDING PAGE
   Vídeo de fundo, identidade visual, chamada principal e CTA.
   =========================================================================== */
#topo-lp-fazenda-rio-vermelho { width: 100%; height: 100%; position: relative; float: left; min-height: 1200px; }
#tag-logo-topo { width: 220px; height: 210px; position: fixed; left: 50%; margin-left: -110px; background-color: #053F3B; border-radius: 0 0 20px 20px; z-index: 999; }
#box-logo-topo { width: 137px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -61px; }
#logo-topo-int { width: 170px; height: 122px; position: absolute; left: -11px; top: -3px; background: url("../img/logo-fazenda-rio-vermelho.png"); background-size: 170px; background-repeat: no-repeat; }
#ornamento-logo-topo { width: 50px; height: 50px; position: absolute; right: -5px; top: 5px; background: url("../img/ornamento-logo.png") center center / 50px 50px no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }



/* ===========================================================================
   05A. ANIMAÇÕES
   Rotação ornamental e movimento vertical da seta.
   =========================================================================== */
@-webkit-keyframes rotacao-suave {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotacao-suave {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-o-keyframes rotacao-suave {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}
@keyframes rotacao-suave {
  from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
#background-video-topo { width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000 url("../img/v-mobile.jpg") center center / cover no-repeat; }
#background-video-topo video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-object-position: center center; -moz-object-position: center center; -o-object-position: center center; object-position: center center; }
#div-bg-conteudo-topo { width: 100%; height: 100%; position: absolute; z-index: 90; background-color: #000; opacity: 0.4; }
#div-txt-conteudo-topo { width: 800px; height: 100%; position: absolute; left: 50%; margin-left: -400px; z-index: 100; box-sizing: border-box; }
#conteudo-topo-int { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -145px; }
#div-txt-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 45px; color: #fff; text-align: center; font-weight: 600; padding: 0 140px; }
#div-txt-conteudo-topo p { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -5px; font-size: 26px; color: #fff; text-align: center; font-weight: 400; padding: 0px 75px; }
#faixa-arrow-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
#arrow-topo { width: 80px; height: 80px; position: relative; left: 50%; margin-left: -40px; background: url("../img/arrow-topo.png") center center / 50px 50px no-repeat; -webkit-animation: movimento-seta 2.8s ease-in-out infinite; -moz-animation: movimento-seta 2.8s ease-in-out infinite; -o-animation: movimento-seta 2.8s ease-in-out infinite; animation: movimento-seta 2.8s ease-in-out infinite; will-change: transform; }
@-webkit-keyframes movimento-seta {
  0%, 100% { -webkit-transform: translateY(0); }
  25% { -webkit-transform: translateY(-5px); }
  50% { -webkit-transform: translateY(0); }
  75% { -webkit-transform: translateY(5px); }
}
@-moz-keyframes movimento-seta {
  0%, 100% { -moz-transform: translateY(0); }
  25% { -moz-transform: translateY(-5px); }
  50% { -moz-transform: translateY(0); }
  75% { -moz-transform: translateY(5px); }
}
@-o-keyframes movimento-seta {
  0%, 100% { -o-transform: translateY(0); }
  25% { -o-transform: translateY(-5px); }
  50% { -o-transform: translateY(0); }
  75% { -o-transform: translateY(5px); }
}
@keyframes movimento-seta {
  0%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
  25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); }
  50% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
  75% { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); }
}
#faixa-loc-top { width: 100%; height: 0px; position: relative; float: left; margin-top: -5px; font-size: 25px; text-align: center; color: #fff; }
#faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
#cta-topo-int { width: 300px; height: auto; position: relative; margin: auto; padding: 15px 27px 16px 73px; border-radius: 50px; background-color: #B63100; color: #fff; font-size: 24px; }
#cta-topo-int:hover { background-color: #C23502; }
#ornamento-cta { width: 40px; height: 40px; position: absolute; left: 20px; top: 11px; background: url("../img/ornamento-logo.png"); background-size: 40px; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }

/* ===========================================================================
   06. SEGUNDA SEÇÃO
   Transição visual, conteúdo institucional e apresentação da experiência.
   =========================================================================== */
#div-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -180px; z-index: 100; }
#divisoria-bg-s2 { width: 100%; height: 400px; position: relative; float: left; margin-top: -200px; z-index: 2; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); pointer-events: none; }
#bg-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
#view-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 40px 0px 110px 0px; }
#view-conteudo-s2 h2 { width: 650px; height: auto; position: relative; float: left; margin-top: 130px; font-size: 51px; color: #043F3B; font-weight: 700; padding-left: 80px; padding-right: 110px; }
#view-conteudo-s2 p { width: 40%; height: auto; position: relative; float: right; margin-top: 116px; font-size: 24px; color: #043F3B; padding: 0px 60px 0px 50px; }

/* ===========================================================================
   07. GALERIA
   Estrutura visual utilizada pelo Swiper e pelo Fancybox.
   =========================================================================== */
#faixa-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; margin-bottom: 40px; overflow: hidden; }
.item-foto-galeria { width: 50%; height: auto; position: relative; float: left; }

/* ===========================================================================
   08. SEÇÃO DE CANAIS OFICIAIS
   Título, descrição e caixa que concentra os links da marca.
   =========================================================================== */
#sessao-encontre-a-fazenda { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 200; }
#view-conteudo-s3 { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; }
#view-conteudo-s3 h3 { width: 660px; height: auto; position: relative; float: left; margin-top: -11px; font-size: 54px; color: #043F3B; font-weight: 700; padding-left: 100px; padding-right: 230px; }
#view-conteudo-s3 p { width: 40%; height: auto; position: relative; float: right; margin-top: 13px; font-size: 30px; color: #043F3B; padding: 0px 75px 0px 30px; }
#faixa-box-links-oficiais { width: 90%; height: auto; margin-left: 5%; position: relative; float: left; margin-top: 20px; background-color: #F6F6F6; border-radius: 30px; padding: 31px 20px 5px 20px; }

/* ===========================================================================
   09. ITENS DE LINK
   Linhas clicáveis, ícones, setas e estados de interação.
   =========================================================================== */
.item-link { width: 100%; height: auto; position: relative; float: left; margin-bottom: 20px; padding: 27px 50px 34px 80px; border-bottom: 1px solid #056961; font-size: 25px; color: #043F3B; cursor: pointer; }
.item-link:hover { background-color: #EDFFD2; border-radius: 20px; }
.item-link-fix { border-bottom: 0px; }
.icn-item-link { width: 35px; height: 35px; position: absolute; left: 20px; top: 24px; }
.arrow-icn-link { width: 50px; height: 50px; position: absolute; right: 10px; top: 18px; }

/* ===========================================================================
   10. RODAPÉ
   Régua, política de privacidade e assinatura visual.
   =========================================================================== */
#sessao-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 400; padding: 70px 70px 60px 73px; }
.regua-rodape { width: 100%; height: 1px; position: relative; float: left; margin-top: 70px; margin-bottom: 20px; background-color: #063F3B; }
.sessoes-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
.sessao-rodape-int { width: 50%; height: auto; position: relative; float: left; }
.cta-rodape { width: 340px; height: auto; position: relative; float: left; text-align: center; padding: 20px 20px; background-color: #063F3B; font-size: 23px; margin-top: 25px; color: #fff; border-radius: 90px; cursor: pointer; }
.cta-rodape:hover { background-color: #07877D; }
#logo-rodape { width: 190px; height: auto; position: relative; float: right; margin-top: -20px; }

/* ===========================================================================
   11. TOASTS E MENSAGENS DE INTERFACE
   Posicionamento e aparência dos avisos do Materialize.
   =========================================================================== */
#toast-container { top: auto !important; right: auto !important; bottom: 20px !important; left: 50% !important; width: calc(100% - 32px) !important; min-width: 0 !important; max-width: 360px !important; transform: translateX(-50%); }

/* Aparência visual do toast exibido pelo Materialize. */
#toast-container .toast.toast-arredondado { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 48px; margin: 0 auto 10px !important; padding: 12px 20px !important; background-color: #043E3B; border-radius: 16px !important; display: flex; align-items: center; justify-content: center !important; text-align: center; line-height: 1.4; box-sizing: border-box; }

/* ===========================================================================
   12. ELEMENTOS AUXILIARES
   Âncora interna utilizada pela navegação suave.
   =========================================================================== */
#ancora-saiba-mais { width: 1px; height: 1px; position: absolute; top: -1px; }

/* ===========================================================================
   13. CONTROLES FLUTUANTES
   WhatsApp, seletores de idioma e estados de acessibilidade.
   =========================================================================== */
#faixa-fixa-botoes-flutuantes { width: 100%; height: auto; position: fixed; bottom: 40px; z-index: 9999; }
#btn-wpp { width: auto; height: auto; position: relative; float: left; margin-left: 35px; background-color: #25D366; border-radius: 40px; cursor: pointer; color: #fff; padding: 10px 20px 10px 50px; }
#icn-wpp { width: 25px; height: 25px; position: absolute; left: 14px; top: 8px; background: url("../img/icn-wpp-btn.png"); background-size: 25px; }
.item-circulo-icn { width: 45px; height: 45px; position: relative; float: left; border: 3px solid #dadada; margin-top: -2px; margin-left: 15px; background-color: #fff; border-radius: 50%; cursor: pointer; overflow: hidden; }
.bandeira-int { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }

/* Estados visuais e acessíveis dos botões de idioma. */
.seletor-idioma { cursor: pointer; transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease; }
.seletor-idioma:hover { transform: translateY(-2px); }
.seletor-idioma.idioma-ativo { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(24, 58, 45, 0.45); }
.seletor-idioma:not(.idioma-ativo) { opacity: 0.72; }
.item-link:focus-visible, .seletor-idioma:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ===========================================================================
   14. RESPONSIVIDADE
   Sobrescritas específicas por largura de viewport.
   =========================================================================== */

/* TABLETS GRANDES E NOTEBOOKS COMPACTOS — 850px a 1100px */
@media only screen and (min-width:850px) and (max-width:1100px) {

  /* --- Topo e identidade visual --- */
  #topo-lp-fazenda-rio-vermelho { width: 100%; height: 100%; position: relative; float: left; min-height: 1200px; }
  #tag-logo-topo { width: 220px; height: 210px; position: fixed; left: 50%; margin-left: -110px; background-color: #053F3B; border-radius: 0 0 20px 20px; z-index: 999; }
  #box-logo-topo { width: 137px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -61px; }
  #logo-topo-int { width: 170px; height: 122px; position: absolute; left: -11px; top: -3px; background: url("../img/logo-fazenda-rio-vermelho.png"); background-size: 170px; background-repeat: no-repeat; }
  #ornamento-logo-topo { width: 50px; height: 50px; position: absolute; right: -5px; top: 5px; background: url("../img/ornamento-logo.png") center center / 50px 50px no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }
  #background-video-topo { width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000 url("../img/v-mobile.jpg") center center / cover no-repeat; }
  #background-video-topo video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-object-position: center center; -moz-object-position: center center; -o-object-position: center center; object-position: center center; }
  #div-bg-conteudo-topo { width: 100%; height: 100%; position: absolute; z-index: 90; background-color: #000; opacity: 0.4; }
  #div-txt-conteudo-topo { width: 800px; height: 100%; position: absolute; left: 50%; margin-left: -400px; z-index: 100; box-sizing: border-box; }
  #conteudo-topo-int { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -145px; }
  #div-txt-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 45px; color: #fff; text-align: center; font-weight: 600; padding: 0 140px; }
  #div-txt-conteudo-topo p { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -5px; font-size: 26px; color: #fff; text-align: center; font-weight: 400; padding: 0px 75px; }
  #faixa-arrow-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #arrow-topo { width: 80px; height: 80px; position: relative; left: 50%; margin-left: -40px; background: url("../img/arrow-topo.png") center center / 50px 50px no-repeat; -webkit-animation: movimento-seta 2.8s ease-in-out infinite; -moz-animation: movimento-seta 2.8s ease-in-out infinite; -o-animation: movimento-seta 2.8s ease-in-out infinite; animation: movimento-seta 2.8s ease-in-out infinite; will-change: transform; }
  #faixa-loc-top { width: 100%; height: 0px; position: relative; float: left; margin-top: -5px; font-size: 25px; text-align: center; color: #fff; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #cta-topo-int { width: 300px; height: auto; position: relative; margin: auto; padding: 15px 27px 16px 73px; border-radius: 50px; background-color: #B63100; color: #fff; font-size: 24px; }
  #cta-topo-int:hover { background-color: #C23502; }
  #ornamento-cta { width: 40px; height: 40px; position: absolute; left: 20px; top: 11px; background: url("../img/ornamento-logo.png"); background-size: 40px; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }

  /* --- Segunda seção e galeria --- */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -180px; z-index: 100; }
  #divisoria-bg-s2 { width: 100%; height: 400px; position: relative; float: left; margin-top: -200px; z-index: 2; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); pointer-events: none; }
  #bg-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
  #view-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: 40px 0px 110px 0px; }
  #view-conteudo-s2 h2 { width: 570px; height: auto; position: relative; float: left; margin-top: 110px; font-size: 51px; color: #043F3B; font-weight: 700; margin-right: 100%; text-align: left; padding-left: 80px; padding-right: 40px; }
  #view-conteudo-s2 p { width: 850px; height: auto; position: relative; float: left; margin-top: -4px; font-size: 24px; color: #043F3B; padding: 0px 80px 0px 86px; }
  #faixa-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; margin-bottom: 40px; overflow: hidden; }
  .item-foto-galeria { width: 50%; height: auto; position: relative; float: left; }

  /* --- Seção de canais oficiais --- */
  #sessao-encontre-a-fazenda { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 200; }
  #view-conteudo-s3 { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; }
  #view-conteudo-s3 h3 { width: 700px; height: auto; position: relative; float: left; margin-top: -11px; font-size: 54px; color: #043F3B; font-weight: 700; padding-left: 85px; padding-right: 230px; }
  #view-conteudo-s3 p { width: 64%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 30px; color: #043F3B; padding: 0px 40px 0px 86px; }
  #faixa-box-links-oficiais { width: 90%; height: auto; margin-left: 5%; position: relative; float: left; margin-top: 20px; background-color: #F6F6F6; border-radius: 30px; padding: 31px 20px 5px 20px; }

  /* --- Itens de link --- */
  .item-link { width: 100%; height: auto; position: relative; float: left; margin-bottom: 20px; padding: 27px 50px 34px 80px; border-bottom: 1px solid #056961; font-size: 25px; color: #043F3B; cursor: pointer; }
  .item-link:hover { background-color: #EDFFD2; border-radius: 20px; }
  .item-link-fix { border-bottom: 0px; }
  .icn-item-link { width: 35px; height: 35px; position: absolute; left: 20px; top: 24px; }
  .arrow-icn-link { width: 50px; height: 50px; position: absolute; right: 10px; top: 18px; }

  /* --- Rodapé --- */
  #sessao-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 400; padding: 70px 70px 60px 73px; }
  .regua-rodape { width: 100%; height: 1px; position: relative; float: left; margin-top: 70px; margin-bottom: 20px; background-color: #063F3B; }
  .sessoes-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
  .sessao-rodape-int { width: 50%; height: auto; position: relative; float: left; }
  .cta-rodape { width: 340px; height: auto; position: relative; float: left; text-align: center; padding: 20px 20px; background-color: #063F3B; font-size: 23px; margin-top: 25px; color: #fff; border-radius: 90px; cursor: pointer; }
  .cta-rodape:hover { background-color: #07877D; }
  #logo-rodape { width: 190px; height: auto; position: relative; float: right; margin-top: -20px; }
}

/* TABLETS E TELAS INTERMEDIÁRIAS — 500px a 850px */
@media only screen and (min-width:500px) and (max-width:850px) {

  /* --- Topo e identidade visual --- */
  #topo-lp-fazenda-rio-vermelho { width: 100%; height: 100%; position: relative; float: left; min-height: unset; }
  #tag-logo-topo { width: 180px; height: 150px; position: fixed; left: 50%; margin-left: -90px; background-color: #053F3B; border-radius: 0 0 20px 20px; z-index: 999; }
  #box-logo-topo { width: 137px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -61px; }
  #logo-topo-int { width: 137px; height: 102px; position: absolute; left: 0; top: 11px; background: url("../img/logo-fazenda-rio-vermelho.png"); background-size: 137px; }
  #ornamento-logo-topo { width: 40px; height: 40px; position: absolute; right: 10px; top: 16px; background: url("../img/ornamento-logo.png") center center / 40px 40px no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }
  #background-video-topo { width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000 url("../img/v-mobile.jpg") center center / cover no-repeat; }
  #background-video-topo video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-object-position: center center; -moz-object-position: center center; -o-object-position: center center; object-position: center center; }
  #div-bg-conteudo-topo { width: 100%; height: 100%; position: absolute; z-index: 90; background-color: #000; opacity: 0.4; }
  #div-txt-conteudo-topo { width: 500px; height: 100%; position: absolute; left: 50%; margin-left: -250px; z-index: 100; box-sizing: border-box; }
  #conteudo-topo-int { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -110px; }
  #div-txt-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 34px; color: #fff; text-align: center; font-weight: 600; padding: 0 50px; }
  #div-txt-conteudo-topo p { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -15px; font-size: 20px; color: #fff; text-align: center; font-weight: 400; padding: 0px 0px; }
  #faixa-arrow-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #arrow-topo { width: 50px; height: 50px; position: relative; left: 50%; margin-left: -25px; background: url("../img/arrow-topo.png") center center / 50px 50px no-repeat; -webkit-animation: movimento-seta 2.8s ease-in-out infinite; -moz-animation: movimento-seta 2.8s ease-in-out infinite; -o-animation: movimento-seta 2.8s ease-in-out infinite; animation: movimento-seta 2.8s ease-in-out infinite; will-change: transform; }
  #faixa-loc-top { width: 100%; height: 0px; position: relative; float: left; margin-top: -5px; font-size: 16px; text-align: center; color: #fff; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #cta-topo-int { width: 240px; height: auto; position: relative; margin: auto; padding: 16px 20px 16px 70px; border-radius: 50px; background-color: #B63100; color: #fff; font-size: 16px; }
  #cta-topo-int:hover { background-color: #C23502; }
  #ornamento-cta { width: 30px; height: 30px; position: absolute; left: 15px; top: 11px; background: url("../img/ornamento-logo.png"); background-size: 30px; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }

  /* --- Segunda seção e galeria --- */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -180px; z-index: 100; }
  #divisoria-bg-s2 { width: 100%; height: 400px; position: relative; float: left; margin-top: -200px; z-index: 2; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); pointer-events: none; }
  #bg-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
  #view-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-s2 h2 { width: 50%; height: auto; position: relative; float: left; margin-top: 90px; font-size: 33px; color: #043F3B; font-weight: 700; padding-left: 40px; padding-right: 30px; }
  #view-conteudo-s2 p { width: 50%; height: auto; position: relative; float: left; margin-top: 67px; font-size: 18px; color: #043F3B; padding: 0px 40px 0px 10px; }
  #faixa-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; overflow: hidden; }
  .item-foto-galeria { width: 50%; height: auto; position: relative; float: left; }

  /* --- Seção de canais oficiais --- */
  #sessao-encontre-a-fazenda { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 200; }
  #view-conteudo-s3 { width: 100%; height: auto; position: relative; float: left; padding-top: 0px; }
  #view-conteudo-s3 h3 { width: 50%; height: auto; position: relative; float: left; margin-top: -40px; font-size: 35px; color: #043F3B; font-weight: 700; padding-left: 50px; padding-right: 30px; }
  #view-conteudo-s3 p { width: 50%; height: auto; position: relative; float: left; margin-top: -33px; font-size: 20px; color: #043F3B; padding: 0px 40px; }
  #faixa-box-links-oficiais { width: 90%; height: auto; margin-left: 5%; position: relative; float: left; margin-top: 20px; background-color: #F6F6F6; border-radius: 30px; padding: 20px 20px 5px 20px; }

  /* --- Itens de link --- */
  .item-link { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 15px 50px 20px 50px; border-bottom: 1px solid #056961; font-size: 14px; color: #043F3B; cursor: pointer; }
  .item-link:hover { background-color: #EDFFD2; border-radius: 20px; }
  .item-link-fix { border-bottom: 0px; }
  .icn-item-link { width: 25px; height: 25px; position: absolute; left: 10px; top: 11px; }
  .arrow-icn-link { width: 30px; height: 30px; position: absolute; right: 4px; top: 10px; }

  /* --- Rodapé --- */
  #sessao-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 400; padding: 20px 30px 60px 30px; }
  .regua-rodape { width: 100%; height: 1px; position: relative; float: left; margin-top: 50px; margin-bottom: 20px; background-color: #063F3B; }
  .sessoes-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
  .sessao-rodape-int { width: 50%; height: auto; position: relative; float: left; }
  .cta-rodape { width: 270px; height: auto; position: relative; float: left; text-align: center; padding: 20px 20px; background-color: #063F3B; font-size: 18px; margin-top: 5px; color: #fff; border-radius: 110px; cursor: pointer; }
  .cta-rodape:hover { background-color: #07877D; }
  #logo-rodape { width: 140px; height: auto; position: relative; float: right; margin-top: -30px; }
}

/* CELULARES GRANDES — 400px a 500px */
@media only screen and (min-width:400px) and (max-width:500px) {

  /* --- Topo e identidade visual --- */
  #topo-lp-fazenda-rio-vermelho { width: 100%; height: 100%; position: relative; float: left; }
  #tag-logo-topo { width: 150px; height: 130px; position: fixed; left: 50%; margin-left: -75px; background-color: #053F3B; border-radius: 0 0 20px 20px; z-index: 999; }
  #box-logo-topo { width: 137px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -56px; }
  #logo-topo-int { width: 137px; height: 102px; position: absolute; left: 0; top: 0; background: url("../img/logo-fazenda-rio-vermelho.png"); background-size: 137px; }
  #ornamento-logo-topo { width: 40px; height: 40px; position: absolute; right: 10px; top: 10px; background: url("../img/ornamento-logo.png") center center / 40px 40px no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }
  #background-video-topo { width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000 url("../img/v-mobile.jpg") center center / cover no-repeat; }
  #background-video-topo video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-object-position: center center; -moz-object-position: center center; -o-object-position: center center; object-position: center center; }
  #div-bg-conteudo-topo { width: 100%; height: 100%; position: absolute; z-index: 90; background-color: #000; opacity: 0.4; }
  #div-txt-conteudo-topo { width: 370px; height: 100%; position: absolute; left: 50%; margin-left: -185px; z-index: 100; box-sizing: border-box; }
  #conteudo-topo-int { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -110px; }
  #div-txt-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 24px; color: #fff; text-align: center; font-weight: 600; padding: 0 40px; }
  #div-txt-conteudo-topo p { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -15px; font-size: 16px; color: #fff; text-align: center; font-weight: 400; padding: 0px 40px; }
  #faixa-arrow-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #arrow-topo { width: 50px; height: 50px; position: relative; left: 50%; margin-left: -25px; background: url("../img/arrow-topo.png") center center / 50px 50px no-repeat; -webkit-animation: movimento-seta 2.8s ease-in-out infinite; -moz-animation: movimento-seta 2.8s ease-in-out infinite; -o-animation: movimento-seta 2.8s ease-in-out infinite; animation: movimento-seta 2.8s ease-in-out infinite; will-change: transform; }
  #faixa-loc-top { width: 100%; height: 0px; position: relative; float: left; margin-top: -5px; font-size: 14px; text-align: center; color: #fff; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #cta-topo-int { width: 240px; height: auto; position: relative; margin: auto; padding: 16px 20px 16px 70px; border-radius: 50px; background-color: #B63100; color: #fff; font-size: 16px; }
  #cta-topo-int:hover { background-color: #C23502; }
  #ornamento-cta { width: 30px; height: 30px; position: absolute; left: 15px; top: 11px; background: url("../img/ornamento-logo.png"); background-size: 30px; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }

  /* --- Segunda seção e galeria --- */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -180px; z-index: 100; }
  #divisoria-bg-s2 { width: 100%; height: 400px; position: relative; float: left; margin-top: -200px; z-index: 2; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); pointer-events: none; }
  #bg-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
  #view-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: unset; }
  #view-conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 25px; color: #043F3B; font-weight: 700; padding-left: 30px; padding-right: 80px; }
  #view-conteudo-s2 p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 16px; color: #043F3B; padding: 0px 30px; }
  #faixa-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; overflow: hidden; }
  .item-foto-galeria { width: 50%; height: auto; position: relative; float: left; }

  /* --- Seção de canais oficiais --- */
  #sessao-encontre-a-fazenda { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 200; }
  #view-conteudo-s3 { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 25px; color: #043F3B; font-weight: 700; padding-left: 30px; padding-right: 80px; }
  #view-conteudo-s3 p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 16px; color: #043F3B; padding: 0px 30px; }
  #faixa-box-links-oficiais { width: 90%; height: auto; margin-left: 5%; position: relative; float: left; margin-top: 20px; background-color: #F6F6F6; border-radius: 30px; padding: 20px 20px 5px 20px; }

  /* --- Itens de link --- */
  .item-link { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 15px 50px 20px 50px; border-bottom: 1px solid #056961; font-size: 14px; color: #043F3B; cursor: pointer; }
  .item-link:hover { background-color: #EDFFD2; border-radius: 20px; }
  .item-link-fix { border-bottom: 0px; }
  .icn-item-link { width: 25px; height: 25px; position: absolute; left: 10px; top: 10px; }
  .arrow-icn-link { width: 30px; height: 30px; position: absolute; right: 4px; top: 10px; }

  /* --- Rodapé --- */
  #sessao-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 400; padding: 0px 30px 30px 30px; }
  .regua-rodape { width: 100%; height: 1px; position: relative; float: left; margin-top: 50px; margin-bottom: 15px; background-color: #063F3B; }
  .sessoes-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
  .sessao-rodape-int { width: 50%; height: auto; position: relative; float: left; }
  .cta-rodape { width: 180px; height: auto; position: relative; float: left; text-align: center; padding: 14px 20px; background-color: #063F3B; font-size: 13px; margin-top: 5px; color: #fff; border-radius: 30px; cursor: pointer; }
  .cta-rodape:hover { background-color: #07877D; }
  #logo-rodape { width: 110px; height: auto; position: relative; float: right; margin-top: -20px; }
}

/* CELULARES COMPACTOS — 370px a 400px */
@media only screen and (min-width:170px) and (max-width:400px) {

  /* --- Topo e identidade visual --- */
  #topo-lp-fazenda-rio-vermelho { width: 100%; height: 100%; position: relative; float: left; min-height: 0px; }
  #tag-logo-topo { width: 150px; height: 130px; position: fixed; left: 50%; margin-left: -75px; background-color: #053F3B; border-radius: 0 0 20px 20px; z-index: 999; }
  #box-logo-topo { width: 137px; height: 102px; position: absolute; left: 50%; top: 50%; margin-left: -65px; margin-top: -56px; }
  #logo-topo-int { width: 137px; height: 102px; position: absolute; left: 0; top: 0; background: url("../img/logo-fazenda-rio-vermelho.png"); background-size: 137px; }
  #ornamento-logo-topo { width: 40px; height: 40px; position: absolute; right: 10px; top: 10px; background: url("../img/ornamento-logo.png") center center / 40px 40px no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }
  #background-video-topo { width: 100%; height: 100vh; height: 100dvh; position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #000 url("../img/v-mobile.jpg") center center / cover no-repeat; }
  #background-video-topo video { width: 100%; height: 100%; position: absolute; inset: 0; display: block; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -webkit-object-position: center center; -moz-object-position: center center; -o-object-position: center center; object-position: center center; }
  #div-bg-conteudo-topo { width: 100%; height: 100%; position: absolute; z-index: 90; background-color: #000; opacity: 0.4; }
  #div-txt-conteudo-topo { width: 370px; height: 100%; position: absolute; left: 50%; margin-left: -185px; z-index: 100; box-sizing: border-box; }
  #conteudo-topo-int { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -110px; }
  #div-txt-conteudo-topo h1 { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 24px; color: #fff; text-align: center; font-weight: 600; padding: 0 40px; }
  #div-txt-conteudo-topo p { width: 100%; height: auto; position: relative; float: left; top: 40%; margin-top: -15px; font-size: 16px; color: #fff; text-align: center; font-weight: 400; padding: 0px 40px; }
  #faixa-arrow-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; }
  #arrow-topo { width: 50px; height: 50px; position: relative; left: 50%; margin-left: -25px; background: url("../img/arrow-topo.png") center center / 50px 50px no-repeat; -webkit-animation: movimento-seta 2.8s ease-in-out infinite; -moz-animation: movimento-seta 2.8s ease-in-out infinite; -o-animation: movimento-seta 2.8s ease-in-out infinite; animation: movimento-seta 2.8s ease-in-out infinite; will-change: transform; }
  #faixa-loc-top { width: 100%; height: 0px; position: relative; float: left; margin-top: -5px; font-size: 14px; text-align: center; color: #fff; }
  #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; }
  #cta-topo-int { width: 240px; height: auto; position: relative; margin: auto; padding: 16px 20px 16px 70px; border-radius: 50px; background-color: #B63100; color: #fff; font-size: 16px; }
  #cta-topo-int:hover { background-color: #C23502; }
  #ornamento-cta { width: 30px; height: 30px; position: absolute; left: 15px; top: 11px; background: url("../img/ornamento-logo.png"); background-size: 30px; -webkit-animation: rotacao-suave 18s linear infinite; -moz-animation: rotacao-suave 18s linear infinite; -o-animation: rotacao-suave 18s linear infinite; animation: rotacao-suave 18s linear infinite; will-change: transform; }

  /* --- Segunda seção e galeria --- */
  #div-s2-lp { width: 100%; height: auto; position: relative; float: left; margin-top: -180px; z-index: 100; }
  #divisoria-bg-s2 { width: 100%; height: 400px; position: relative; float: left; margin-top: -200px; z-index: 2; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.12) 46%, rgba(255, 255, 255, 0.30) 60%, rgba(255, 255, 255, 0.62) 77%, rgba(255, 255, 255, 0.88) 91%, rgba(255, 255, 255, 1) 100%); pointer-events: none; }
  #bg-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; background-color: #fff; }
  #view-conteudo-s2 { width: 100%; height: auto; position: relative; float: left; padding: unset; }
  #view-conteudo-s2 h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 25px; color: #043F3B; font-weight: 700; padding-left: 30px; padding-right: 80px; }
  #view-conteudo-s2 p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 16px; color: #043F3B; padding: 0px 30px; }
  #faixa-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; overflow: hidden; }
  .item-foto-galeria { width: 50%; height: auto; position: relative; float: left; }

  /* --- Seção de canais oficiais --- */
  #sessao-encontre-a-fazenda { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 200; }
  #view-conteudo-s3 { width: 100%; height: auto; position: relative; float: left; }
  #view-conteudo-s3 h3 { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 25px; color: #043F3B; font-weight: 700; padding-left: 30px; padding-right: 80px; }
  #view-conteudo-s3 p { width: 95%; height: auto; position: relative; float: left; margin-top: -5px; font-size: 16px; color: #043F3B; padding: 0px 30px; }
  #faixa-box-links-oficiais { width: 90%; height: auto; margin-left: 5%; position: relative; float: left; margin-top: 20px; background-color: #F6F6F6; border-radius: 30px; padding: 20px 20px 5px 20px; }

  /* --- Itens de link --- */
  .item-link { width: 100%; height: auto; position: relative; float: left; margin-bottom: 10px; padding: 15px 50px 20px 50px; border-bottom: 1px solid #056961; font-size: 14px; color: #043F3B; cursor: pointer; }
  .item-link:hover { background-color: #EDFFD2; border-radius: 20px; }
  .item-link-fix { border-bottom: 0px; }
  .icn-item-link { width: 25px; height: 25px; position: absolute; left: 10px; top: 10px; }
  .arrow-icn-link { width: 30px; height: 30px; position: absolute; right: 4px; top: 10px; }

  /* --- Rodapé --- */
  #sessao-rodape { width: 100%; height: auto; position: relative; float: left; background-color: #fff; z-index: 400; padding: 0px 30px 110px 30px; }
  .regua-rodape { width: 100%; height: 1px; position: relative; float: left; margin-top: 50px; margin-bottom: 15px; background-color: #063F3B; }
  .sessoes-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; }
  .sessao-rodape-int { width: 50%; height: auto; position: relative; float: left; }
  .cta-rodape { width: 180px; height: auto; position: relative; float: left; text-align: center; padding: 14px 20px; background-color: #063F3B; font-size: 13px; margin-top: 5px; color: #fff; border-radius: 30px; cursor: pointer; }
  .cta-rodape:hover { background-color: #07877D; }
  #logo-rodape { width: 110px; height: auto; position: relative; float: right; margin-top: -20px; }
}

/* ===========================================================================
 15. ACESSIBILIDADE: MOVIMENTO REDUZIDO
 Desativa animações quando essa preferência está ativa no sistema.
 =========================================================================== */
@media (prefers-reduced-motion:reduce) {
  #ornamento-logo-topo, #ornamento-cta, #arrow-topo { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; }
}

/* ===========================================================================
 16. CLASSES UTILITÁRIAS
 Helpers de visibilidade, proporção, acessibilidade e contenção de floats.
 =========================================================================== */
.hidden, [hidden] { display: none !important; }
.img-ratio { width: 100% !important; height: auto !important; }
.visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }
.invisible { visibility: hidden; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

/* ===========================================================================
 17. ESTILOS DE IMPRESSÃO
 Remove efeitos visuais e melhora a leitura em papel ou PDF.
 =========================================================================== */
@media print {
  *, *::before, *::after { background: #fff !important; color: #303030 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " ("attr(href) ")"; }
  abbr[title]::after { content: " ("attr(title) ")"; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  pre { white-space: pre-wrap !important; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* ===========================================================================
 18. POLÍTICA DE PRIVACIDADE
 Modal acessível, aviso de armazenamento local e estados de interação.
 =========================================================================== */
.cta-rodape { border: 0; font-family: inherit; line-height: 1.4; }
body.janela-politica-aberta { overflow: hidden; }
#janela-politica-privacidade { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; padding: max(24px, var(--safe-top))
  max(24px, var(--safe-right))
  max(24px, var(--safe-bottom))
max(24px, var(--safe-left)); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 220ms ease, visibility 220ms ease; }
#janela-politica-privacidade.politica-aberta { visibility: visible; opacity: 1; pointer-events: auto; }
#fundo-janela-politica { position: absolute; inset: 0; background: rgba(1, 26, 24, 0.76); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#painel-politica-privacidade { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1120px, 100%); height: min(84dvh, 860px); max-height: 860px; overflow: hidden; background: #fdfdfb; border: 1px solid rgba(4, 63, 59, 0.14); border-radius: 34px; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34); color: #043f3b; outline: none; transform: translateY(18px) scale(0.985); transition: transform 240ms ease; }
#janela-politica-privacidade.politica-aberta #painel-politica-privacidade { transform: translateY(0) scale(1); }
#cabecalho-politica-privacidade { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 36px 22px; background: #f6f6f2; border-bottom: 1px solid rgba(4, 63, 59, 0.12); }
.rotulo-politica { display: block; margin-bottom: 6px; color: #6a7d77; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
#titulo-politica-privacidade { margin: 0; color: #043f3b; font-size: clamp(28px, 3vw, 42px); font-weight: 750; line-height: 1.08; }
.botao-fechar-politica { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #e9efea; color: #043f3b; font: inherit; font-size: 30px; line-height: 1; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.botao-fechar-politica:hover { background: #dce8de; transform: rotate(3deg); }
.botao-fechar-politica:focus-visible, #cta-fechar-politica:focus-visible, #cta-confirmar-politica:focus-visible, #abrir-txt-popup:focus-visible, #cta-fechar-popup:focus-visible, #abrir-politica-rodape:focus-visible { outline: 3px solid #b63100; outline-offset: 3px; }
#conteudo-politica-privacidade { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #7caaa0 #edf2ee; scrollbar-width: thin; }
#conteudo-politica-privacidade::-webkit-scrollbar { width: 10px; }
#conteudo-politica-privacidade::-webkit-scrollbar-track { background: #edf2ee; }
#conteudo-politica-privacidade::-webkit-scrollbar-thumb { background: #7caaa0; border: 2px solid #edf2ee; border-radius: 20px; }
#conteudo-politica-texto { width: min(920px, calc(100% - 72px)); margin: 0 auto; padding: 36px 0 56px; color: #244b47; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.72; }
#conteudo-politica-texto h3 { margin: 34px 0 10px; color: #043f3b; font-size: 21px; font-weight: 750; line-height: 1.25; }
#conteudo-politica-texto p { margin: 0 0 16px; }
#conteudo-politica-texto ul { margin: 0 0 20px; padding-left: 24px; }
#conteudo-politica-texto li { margin-bottom: 10px; padding-left: 4px; }
#conteudo-politica-texto a { color: #056961; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#conteudo-politica-texto a:hover { color: #b63100; }
.atualizacao-politica { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 9px 14px; background: #edf4ef; border-radius: 999px; color: #315c55; font-size: 14px; }
.nota-final-politica { margin-top: 36px !important; padding: 18px 20px; background: #edf4ef; border-left: 4px solid #056961; border-radius: 0 14px 14px 0; }
#toolbar-janela-politica-privacidade { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; padding: 18px 28px; background: #ffffff; border-top: 1px solid rgba(4, 63, 59, 0.13); }
#logo-rodape-janela-politica { width: 150px; flex: 0 0 150px; }
#logo-rodape-janela-politica img, #logo-fazenda-pop-up img { display: block; width: 100%; height: auto; }
.acoes-politica { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.botao-politica-secundario, .botao-politica-principal { min-height: 46px; padding: 11px 22px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }
.botao-politica-secundario { border: 1px solid #8aa49f; background: transparent; color: #043f3b; }
.botao-politica-secundario:hover { background: #edf4ef; }
.botao-politica-principal { border: 1px solid #b63100; background: #b63100; color: #ffffff; }
.botao-politica-principal:hover { background: #c93b06; transform: translateY(-1px); }

/* ===========================================================================
 18A. AVISO DE PRIVACIDADE
 Cartão compacto exibido na primeira visita.
 =========================================================================== */
#pop-up-politica-privacidade { position: fixed; right: 24px; bottom: calc(24px + var(--safe-bottom)); z-index: 25000; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "texto texto"
"logo botao"; gap: 16px 24px; width: min(680px, calc(100% - 48px)); padding: 24px 26px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(4, 63, 59, 0.14); border-radius: 24px; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(28px); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; }
#pop-up-politica-privacidade.aviso-privacidade-visivel { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
#faixa-txt-pop-up-politica { grid-area: texto; min-width: 0; color: #244b47; font-size: 15px; line-height: 1.55; }
#faixa-txt-pop-up-politica p { margin: 0 0 8px; }
#abrir-txt-popup { display: inline; padding: 0; border: 0; background: transparent; color: #056961; font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#abrir-txt-popup:hover { color: #b63100; }
#logo-fazenda-pop-up { grid-area: logo; align-self: center; width: 132px; }
#cta-fechar-popup { grid-area: botao; align-self: center; min-height: 44px; padding: 10px 20px; border: 1px solid #043f3b; border-radius: 999px; background: #043f3b; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 750; line-height: 1.2; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
#cta-fechar-popup:hover { background: #056961; transform: translateY(-1px); }

/* ===========================================================================
 18B. RESPONSIVIDADE DA POLÍTICA — TELAS MÉDIAS
 =========================================================================== */
@media only screen and (max-width:1100px) {
  #janela-politica-privacidade { padding: 20px; }
  #painel-politica-privacidade { width: min(920px, 100%); height: min(86dvh, 820px); border-radius: 28px; }
  #conteudo-politica-texto { width: min(800px, calc(100% - 64px)); }
  #pop-up-politica-privacidade { right: 20px; bottom: calc(20px + var(--safe-bottom)); }
}

/* ===========================================================================
 18C. RESPONSIVIDADE DA POLÍTICA — TABLETS
 =========================================================================== */
@media only screen and (max-width:850px) {
  #janela-politica-privacidade { align-items: stretch; padding: max(16px, var(--safe-top))
    max(16px, var(--safe-right))
    max(16px, var(--safe-bottom))
  max(16px, var(--safe-left)); }
  #painel-politica-privacidade { width: 100%; height: auto; max-height: none; border-radius: 24px; }
  #cabecalho-politica-privacidade { padding: 24px 26px 18px; }
  #conteudo-politica-texto { width: calc(100% - 52px); padding: 28px 0 44px; font-size: 15px; }
  #conteudo-politica-texto h3 { margin-top: 28px; font-size: 19px; }
  #toolbar-janela-politica-privacidade { min-height: 84px; padding: 16px 22px; }
  #logo-rodape-janela-politica { width: 125px; flex-basis: 125px; }
  #pop-up-politica-privacidade { right: 50%; bottom: calc(18px + var(--safe-bottom)); width: min(620px, calc(100% - 36px)); transform: translate(50%, 28px); }
  #pop-up-politica-privacidade.aviso-privacidade-visivel { transform: translate(50%, 0); }
}

/* ===========================================================================
 18D. RESPONSIVIDADE DA POLÍTICA — CELULARES
 =========================================================================== */
@media only screen and (max-width:500px) {
  #janela-politica-privacidade { padding: max(8px, var(--safe-top))
    max(8px, var(--safe-right))
    max(8px, var(--safe-bottom))
  max(8px, var(--safe-left)); }
  #painel-politica-privacidade { border-radius: 20px; }
  #cabecalho-politica-privacidade { gap: 14px; padding: 20px 18px 16px; }
  .rotulo-politica { font-size: 11px; }
  #titulo-politica-privacidade { font-size: 27px; }
  .botao-fechar-politica { width: 40px; height: 40px; font-size: 27px; }
  #conteudo-politica-texto { width: calc(100% - 32px); padding: 22px 0 32px; font-size: 14px; line-height: 1.65; }
  #conteudo-politica-texto h3 { margin-top: 25px; font-size: 17px; }
  .atualizacao-politica { border-radius: 14px; }
  #toolbar-janela-politica-privacidade { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; }
  #logo-rodape-janela-politica { display: none; }
  .acoes-politica { display: grid; grid-template-columns: 0.8fr 1.2fr; width: 100%; gap: 10px; }
  .botao-politica-secundario, .botao-politica-principal { width: 100%; min-width: 0; padding: 10px 12px; font-size: 13px; }
  #pop-up-politica-privacidade { right: 50%; bottom: calc(12px + var(--safe-bottom)); grid-template-columns: 1fr; grid-template-areas: "texto"
  "botao"; gap: 14px; width: calc(100% - 24px); padding: 20px; border-radius: 20px; transform: translate(50%, 28px); }
  #pop-up-politica-privacidade.aviso-privacidade-visivel { transform: translate(50%, 0); }
  #faixa-txt-pop-up-politica { font-size: 14px; text-align: center; }
  #logo-fazenda-pop-up { display: none; }
  #cta-fechar-popup { width: 100%; }
}

/* ===========================================================================
 18E. RESPONSIVIDADE DA POLÍTICA — CELULARES ESTREITOS
 =========================================================================== */
@media only screen and (max-width:370px) {
  #cabecalho-politica-privacidade { padding: 17px 15px 14px; }
  #titulo-politica-privacidade { font-size: 23px; }
  #conteudo-politica-texto { width: calc(100% - 26px); font-size: 13px; }
  #conteudo-politica-texto h3 { font-size: 16px; }
  .acoes-politica { grid-template-columns: 1fr; }
}

/* ===========================================================================
 18F. ACESSIBILIDADE E IMPRESSÃO DA POLÍTICA
 =========================================================================== */
@media (prefers-reduced-motion:reduce) {
  #janela-politica-privacidade, #painel-politica-privacidade, #pop-up-politica-privacidade, .botao-fechar-politica, .botao-politica-principal, #cta-fechar-popup { transition: none !important; }
}
@media print {
  #pop-up-politica-privacidade, #fundo-janela-politica, #cabecalho-politica-privacidade, #toolbar-janela-politica-privacidade { display: none !important; }
  #janela-politica-privacidade { position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important; padding: 0 !important; }
  #painel-politica-privacidade { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; transform: none !important; }
  #conteudo-politica-privacidade { overflow: visible !important; }
  #conteudo-politica-texto { width: 100% !important; padding: 0 !important; }
}

/* ===========================================================================
 19. COMPATIBILIDADE AMPLIADA — SAFARI, EDGE, ANDROID E WEBVIEWS SOCIAIS
 Regras progressivas adicionadas sem substituir a identidade visual original.
 =========================================================================== */

/* Fallbacks para safe areas: iOS 11 antigo, Safari atual e demais navegadores. */:root { --app-height: 100vh; --safe-top: 0px; --safe-right: 0px; --safe-bottom: 0px; --safe-left: 0px; --safe-top: constant(safe-area-inset-top); --safe-right: constant(safe-area-inset-right); --safe-bottom: constant(safe-area-inset-bottom); --safe-left: constant(safe-area-inset-left); --safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); }
html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100%; margin: 0; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { -webkit-appearance: none; appearance: none; }
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation; }

/* Foco visível também em motores que não implementam :focus-visible. */
.item-link:focus, .seletor-idioma:focus, .botao-fechar-politica:focus, #cta-fechar-politica:focus, #cta-confirmar-politica:focus, #abrir-txt-popup:focus, #cta-fechar-popup:focus, #abrir-politica-rodape:focus { outline: 3px solid #b63100; outline-offset: 3px; }
@supports selector(:focus-visible) {
  .item-link:focus:not(:focus-visible), .seletor-idioma:focus:not(:focus-visible), .botao-fechar-politica:focus:not(:focus-visible), #cta-fechar-politica:focus:not(:focus-visible), #cta-confirmar-politica:focus:not(:focus-visible), #abrir-txt-popup:focus:not(:focus-visible), #cta-fechar-popup:focus:not(:focus-visible), #abrir-politica-rodape:focus:not(:focus-visible) { outline: none; }
}

/* Altura real da área visível, recalculada pelo bootstrap no HTML. */
#background-video-topo { top: 0; right: 0; bottom: auto; left: 0; height: 100vh; height: var(--app-height); }
#background-video-topo video { top: 0; right: 0; bottom: 0; left: 0; }
@supports (height:100dvh) {
  #background-video-topo { height: 100dvh; }
}

/* Instagram/Facebook WebView: evita tremulação causada por vídeo fixed. */
html.is-instagram-webview #background-video-topo, html.is-facebook-webview #background-video-topo { position: absolute; height: var(--app-height); }
#tag-logo-topo, #faixa-fixa-botoes-flutuantes { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#tag-logo-topo { top: 0; top: var(--safe-top); }
#faixa-fixa-botoes-flutuantes { bottom: 40px; bottom: calc(24px + var(--safe-bottom)); padding-right: var(--safe-right); padding-left: var(--safe-left); }
#toast-container { bottom: 20px !important; bottom: calc(12px + var(--safe-bottom)) !important; }

/* Rolagem suave e independente dentro do modal em WebKit/WKWebView. */
#conteudo-politica-privacidade, #faixa-galeria { -webkit-overflow-scrolling: touch; }
#janela-politica-privacidade, #fundo-janela-politica { top: 0; right: 0; bottom: 0; left: 0; }
#janela-politica-privacidade { padding: 24px; }
#painel-politica-privacidade { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 100%; max-width: 1120px; height: 84vh; max-height: 860px; }
#conteudo-politica-privacidade { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
#titulo-politica-privacidade { font-size: 42px; }
#conteudo-politica-texto { width: calc(100% - 72px); max-width: 920px; }
#pop-up-politica-privacidade { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% - 48px); max-width: 680px; }
#faixa-txt-pop-up-politica { -webkit-box-flex: 1; -webkit-flex: 1 1 100%; flex: 1 1 100%; }
#logo-fazenda-pop-up { -webkit-flex: 0 0 132px; flex: 0 0 132px; margin-top: 16px; }
#cta-fechar-popup { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-top: 16px; margin-left: auto; }

/* Progressive enhancement: restaura Grid quando o motor oferece suporte. */
@supports (display:grid) {
  #painel-politica-privacidade { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  #pop-up-politica-privacidade { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "texto texto"
  "logo botao"; }
  #logo-fazenda-pop-up, #cta-fechar-popup { margin-top: 0; }
  #cta-fechar-popup { margin-left: 0; }
}

/* Restaura funções CSS modernas somente quando forem compreendidas. */
@supports (width:min(100%, 1120px)) {
  #painel-politica-privacidade { width: min(1120px, 100%); }
  #conteudo-politica-texto { width: min(920px, calc(100% - 72px)); }
  #pop-up-politica-privacidade { width: min(680px, calc(100% - 48px)); }
}
@supports (font-size:clamp(28px, 3vw, 42px)) {
  #titulo-politica-privacidade { font-size: clamp(28px, 3vw, 42px); }
}
@supports (height:min(84dvh, 860px)) {
  #painel-politica-privacidade { height: min(84dvh, 860px); }
}
@supports (padding:max(24px, env(safe-area-inset-top))) {
  #janela-politica-privacidade { padding: max(24px, var(--safe-top))
    max(24px, var(--safe-right))
    max(24px, var(--safe-bottom))
  max(24px, var(--safe-left)); }
}

/* A galeria continua horizontal e navegável se o JavaScript do Swiper falhar. */
#faixa-galeria:not(.swiper-initialized) { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
#faixa-galeria:not(.swiper-initialized) .swiper-slide { scroll-snap-align: center; }

/* Evita estados hover persistentes em telas exclusivamente touch. */
@media (hover:none) and (pointer:coarse) {
  .item-link:hover { background-color: transparent; border-radius: 0; }
  .item-link:active { background-color: #edffd2; border-radius: 20px; }
}
@media only screen and (max-width:1100px) {
  #painel-politica-privacidade { max-width: 920px; height: 86vh; max-height: 820px; }
  #conteudo-politica-texto { width: calc(100% - 64px); max-width: 800px; }
  @supports (width:min(100%, 920px)) {
    #painel-politica-privacidade { width: min(920px, 100%); }
    #conteudo-politica-texto { width: min(800px, calc(100% - 64px)); }
  }
  @supports (height:min(86dvh, 820px)) {
    #painel-politica-privacidade { height: min(86dvh, 820px); }
  }
}
@media only screen and (max-width:850px) {
  #topo-lp-fazenda-rio-vermelho { min-height: 100vh; min-height: var(--app-height); }
  #janela-politica-privacidade { padding: 16px; }
  #painel-politica-privacidade { width: 100%; max-width: none; height: auto; max-height: none; }
  #conteudo-politica-texto { width: calc(100% - 52px); max-width: none; }
  #pop-up-politica-privacidade { width: calc(100% - 36px); max-width: 620px; }
  @supports (padding:max(16px, env(safe-area-inset-top))) {
    #janela-politica-privacidade { padding: max(16px, var(--safe-top))
      max(16px, var(--safe-right))
      max(16px, var(--safe-bottom))
    max(16px, var(--safe-left)); }
  }
}
@media only screen and (max-width:500px) {
  #janela-politica-privacidade { padding: 8px; }
  #titulo-politica-privacidade { font-size: 27px; }
  #conteudo-politica-texto { width: calc(100% - 32px); }
  #pop-up-politica-privacidade { width: calc(100% - 24px); max-width: none; }
  #logo-fazenda-pop-up { display: none; }
  #cta-fechar-popup { width: 100%; margin-left: 0; }
  @supports (display:grid) {
    #pop-up-politica-privacidade { grid-template-columns: 1fr; grid-template-areas: "texto"
    "botao"; }
  }
  @supports (padding:max(8px, env(safe-area-inset-top))) {
    #janela-politica-privacidade { padding: max(8px, var(--safe-top))
      max(8px, var(--safe-right))
      max(8px, var(--safe-bottom))
    max(8px, var(--safe-left)); }
  }
}
@media only screen and (max-width:370px) {
  #titulo-politica-privacidade { font-size: 23px; }
  #conteudo-politica-texto { width: calc(100% - 26px); }
}

/* Menos movimento e menor consumo em dispositivos/configurações sensíveis. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  #ornamento-logo-topo, #ornamento-cta, #arrow-topo { -webkit-animation: none !important; animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Modo de alto contraste do Windows/Edge. */
@media (forced-colors:active) {
  .item-link, .cta-rodape, .botao-politica-secundario, .botao-politica-principal, #cta-fechar-popup { border: 1px solid ButtonText; }
}