/* ============================================================
   Frutas Benvenuti — estilos proprios
   Carrega depois de style.css (template VegeFoods) e sobrescreve
   o que for necessario. O template nao se edita.

   Cores amostradas dos pixels de resources/apresentacao_comercial.pdf,
   nao estimadas a olho.
   ============================================================ */

:root {
  --azul:    #213675;
  --amarelo: #DEDE42;
  --laranja: #F79133;
  --verde:   #0D4A12;
  --creme:   #F7F5E8;
  --texto:   #2B2B2B;

  --azul-escuro: #18285a;  /* hover de botao sobre azul */
}

/* ------------------------------------------------------------
   Regra de contraste, medida e nao presumida:
     branco sobre --azul .......... 11.36  AA
     branco sobre --verde ......... alto   AA
     --azul sobre --amarelo ........ 7.91  AA
     --azul sobre --laranja ........ 4.90  AA
     branco sobre --laranja ........ 2.32  REPROVA
   Por isso texto sobre laranja e sempre azul, nunca branco.
   ------------------------------------------------------------ */

body { color: var(--texto); }

a         { color: var(--azul); }
a:hover   { color: var(--azul-escuro); }

.bg-primary { background-color: var(--azul) !important; }

.btn-primary {
  background-color: var(--amarelo) !important;
  border-color: var(--amarelo) !important;
  color: var(--azul) !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #c9c93a !important;
  border-color: #c9c93a !important;
  color: var(--azul) !important;
}

/* Botao claro para usar sobre fundo amarelo, onde o .btn-primary sumiria */
.btn-contorno {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid var(--azul);
  border-radius: 4px;
  background: transparent;
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}
.btn-contorno:hover { background: var(--azul); color: #fff; }

/* ------------------------------------------------------------
   Navbar e logo
   ------------------------------------------------------------ */

.ftco_navbar,
.navbar.ftco-navbar-light { background: var(--azul) !important; }

.navbar-brand { display: flex; align-items: center; gap: 10px; }

/* O logo claro traz o azul #213675 assado no PNG, entao funde com o
   navbar. O selo circular verde-escuro original sumiria aqui. */
.navbar-brand img { height: 38px; width: auto; }
.ftco_navbar.scrolled .navbar-brand img { height: 32px; }

.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .9); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link { color: var(--amarelo); }

/* O template pinta o menu de #000 e, no estado .scrolled, com !important:
   ele foi desenhado para um navbar TRANSPARENTE sobre foto. O nosso e azul
   solido, e preto sobre #213675 da 1.85 de contraste -- reprova em WCAG AA.
   Os seletores abaixo usam o id do navbar, especificidade (1,3,0), para
   vencer qualquer regra de classe do template, com ou sem !important. */
#ftco-navbar .navbar-nav > .nav-item > .nav-link { color: rgba(255, 255, 255, .92) !important; }
#ftco-navbar .navbar-nav > .nav-item > .nav-link:hover,
#ftco-navbar .navbar-nav > .nav-item.active > .nav-link,
#ftco-navbar .navbar-nav > .nav-item > .nav-link.active { color: var(--amarelo) !important; }
#ftco-navbar .navbar-toggler { color: rgba(255, 255, 255, .92) !important; border-color: rgba(255, 255, 255, .4) !important; }

/* ------------------------------------------------------------
   Seletor de idioma
   ------------------------------------------------------------ */

.lang-selector { display: flex; align-items: center; gap: 8px; }

.lang-btn {
  font-size: 18px;
  line-height: 1;
  opacity: .55;
  text-decoration: none;
  filter: grayscale(60%);
  transition: opacity .15s, filter .15s;
}
.lang-btn:hover { opacity: .85; filter: grayscale(0); }
.lang-btn.active {
  opacity: 1;
  filter: grayscale(0);
  border-bottom: 2px solid var(--amarelo);
  padding-bottom: 2px;
}

/* O topbar NAO some no mobile -- o template so lhe da margem extra
   abaixo de 768px (style.css, regra .topper). Entao o seletor segue
   visivel sem precisar abrir o menu, que e onde ele deve estar: um
   seletor escondido atras do hamburguer nao e descoberto por quem
   chegou no idioma errado.
   O que de fato falta no mobile e area de toque: 18px e menor que o
   minimo confortavel para o dedo. */
@media (max-width: 991.98px) {
  .lang-selector { gap: 14px; }
  .lang-btn { font-size: 24px; padding: 4px 2px; }
}

/* ------------------------------------------------------------
   Faixas de secao
   ------------------------------------------------------------ */

.faixa-creme  { background: var(--creme); }
.faixa-azul   { background: var(--azul);   color: #fff; }
.faixa-verde  { background: var(--verde);  color: #fff; }
.faixa-laranja{ background: var(--laranja); color: var(--azul); }

.faixa-azul h1, .faixa-azul h2, .faixa-azul h3,
.faixa-verde h1, .faixa-verde h2, .faixa-verde h3 { color: #fff; }

/* O !important aqui nao e preguica de especificidade: o Bootstrap define
   .text-white { color:#fff !important }, e uma unica classe utilitaria
   herdada de um bloco azul poria branco sobre laranja -- 2.32 de
   contraste, reprovado. .btn-primary acima ja se blinda pelo mesmo
   motivo. */
.faixa-laranja,
.faixa-laranja h1, .faixa-laranja h2, .faixa-laranja h3,
.faixa-laranja p, .faixa-laranja li,
.faixa-laranja .text-white { color: var(--azul) !important; }

/* O template so estiliza .subheading dentro de .heading-section, e com o
   verde dele. Metade dos nossos blocos usa a classe solta e ficava sem
   estilo. O !important e para vencer o (0,2,0) do template. */
.subheading {
  display: block;
  font-family: "Lora", Georgia, serif !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--azul) !important;
  margin-bottom: 6px;
}
.faixa-azul .subheading,
.faixa-verde .subheading { color: var(--amarelo) !important; }
.faixa-laranja .subheading { color: var(--azul) !important; font-style: normal !important; font-weight: 700 !important; }

/* O hero desenha sobre foto com overlay escuro: aqui o subtitulo vai em
   creme, nao no azul da marca. A regra generica de .subheading acima vale
   para as secoes de fundo claro -- ela atingia o hero por engano, com
   1.20 de contraste. */
.hero .subheading,
.slider-text .subheading {
  color: var(--creme) !important;
  font-size: 22px !important;
  font-style: italic !important;
}

/* ------------------------------------------------------------
   Bloco de produto (Limao Tahiti, Laranja)
   ------------------------------------------------------------ */

.bloco-produto { padding: 80px 0; }
.bloco-produto .foto {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 6px;
}
.bloco-produto p { line-height: 1.8; }

/* A foto da laranja ocupava a largura toda, com ~4x a area de todas as
   fotos do limao somadas -- e o limao e o carro-chefe. Imagem de largura
   total e o sinal mais forte de "isto e o principal", e o bloco do limao
   nao tem nenhuma. Aqui ela vira tira de cabecalho: mesma foto, papel
   subordinado. */
.tira-secao { position: relative; width: 100%; padding-top: 30%; overflow: hidden; border-radius: 6px; }
.tira-secao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Cards das variedades de laranja. Proporcao fixa quadrada porque as fotos
   de Westin e Valencia vem do PDF em ~570x650 -- a proporcao fixa
   impede que a diferenca de resolucao apareca lado a lado. */
.card-variedade { background: #fff; border-radius: 6px; overflow: hidden; height: 100%; }
.card-variedade .moldura { position: relative; width: 100%; padding-top: 100%; }
.card-variedade .moldura img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-variedade .texto { padding: 20px; }

/* Os cards ficam DENTRO da faixa laranja, mas tem fundo branco proprio.
   Sem estas duas regras, o !important de .faixa-laranja p pintaria o
   corpo de texto do card com a cor de destaque em vez de --texto.
   A especificidade (0,2,1) vence a da faixa (0,1,1) de forma
   deterministica, sem depender da ordem das regras no arquivo. */
.card-variedade .texto h3 { color: var(--azul) !important; margin-bottom: 8px; font-size: 22px; }
.card-variedade .texto p  { color: var(--texto) !important; font-size: 15px; line-height: 1.7; margin: 0; }

/* Uma das tres fotos do processo e retrato entre duas paisagem. Proporcao
   fixa com object-fit resolve, mesmo padrao de .card-variedade .moldura. */
.foto-processo { position: relative; width: 100%; padding-top: 66%; overflow: hidden; border-radius: 6px; }
.foto-processo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   Diferenciais (icones de servico)
   ------------------------------------------------------------ */

/* Os quatro circulos de icone vinham na paleta pastel do VegeFoods.
   Alternam azul e verde: ambos seguram glifo branco com folga.
   Nao usar --laranja aqui -- glifo branco sobre ele da 2.32. */
.ftco-services .icon.bg-color-1,
.ftco-services .icon.bg-color-3 { background: var(--azul) !important; }
.ftco-services .icon.bg-color-2,
.ftco-services .icon.bg-color-4 { background: var(--verde) !important; }
.ftco-services .icon span { color: #fff !important; }

/* ------------------------------------------------------------
   Etapas do packing house
   ------------------------------------------------------------ */

.etapa { text-align: center; padding: 0 12px; }
.etapa .numero {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--azul);
  font-size: 20px; font-weight: 700;
}
.etapa h3 { font-size: 17px; color: var(--azul); margin-bottom: 6px; }
.etapa p  { font-size: 14px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------
   Contadores
   ------------------------------------------------------------ */

.selo-numero { color: var(--amarelo); font-size: 44px; font-weight: 700; display: block; }

/* Precisamos do #section-counter para o main.js animar os numeros, mas o
   template tambem lhe aplica um veu branco a 30%, que lava a faixa azul e
   derruba o contraste do amarelo de 7.91 para 3.29. */
#section-counter:after { display: none !important; }

/* ------------------------------------------------------------
   Galeria
   ------------------------------------------------------------ */

.grade-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.grade-galeria a {
  display: block;
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.grade-galeria img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.grade-galeria a:hover img { transform: scale(1.05); }

/* ------------------------------------------------------------
   WhatsApp e contato
   ------------------------------------------------------------ */

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 6px;
  background: #25D366;
  color: #0b2e18;
  font-weight: 700;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #1eb857; color: #0b2e18; }
.btn-whatsapp svg { width: 22px; height: 22px; fill: currentColor; }

.cartao-contato {
  background: #fff;
  border-radius: 6px;
  padding: 28px;
  height: 100%;
  text-align: center;
}
.cartao-contato .icone { font-size: 30px; color: var(--azul); margin-bottom: 12px; display: block; }
.cartao-contato h3 { font-size: 18px; color: var(--azul); }
.cartao-contato a  { word-break: break-word; }

/* Icone do Instagram no cartao de contato, mesmo SVG do em-construcao.html. */
.cartao-contato .icone-inline { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-right: 6px; }

/* ------------------------------------------------------------
   Rodape
   ------------------------------------------------------------ */

.ftco-footer { background: var(--azul); }
.ftco-footer .ftco-heading-2 { color: var(--amarelo); }
.ftco-footer, .ftco-footer p, .ftco-footer li { color: rgba(255, 255, 255, .85); }
.ftco-footer a { color: rgba(255, 255, 255, .85); }
.ftco-footer a:hover { color: var(--amarelo); }

/* O template pinta os links do rodape de #000 com (0,2,3) --
   .ftco-footer .ftco-footer-widget ul li a -- e vence a nossa regra
   generica. Sobre o azul do rodape, preto e ilegivel. */
.ftco-footer .ftco-footer-widget ul li a,
.ftco-footer .block-23 ul li,
.ftco-footer .block-23 ul li a,
.ftco-footer .block-23 ul li a .text { color: rgba(255, 255, 255, .92) !important; }
.ftco-footer .ftco-footer-widget ul li a:hover,
.ftco-footer .block-23 ul li a:hover,
.ftco-footer .block-23 ul li a:hover .text { color: var(--amarelo) !important; }

/* Mesmo caso: o template pinta o glifo social de #000. */
.ftco-footer .ftco-footer-social li a span { color: rgba(255, 255, 255, .92) !important; }
.ftco-footer .ftco-footer-social li a:hover span { color: var(--amarelo) !important; }
.ftco-footer .ftco-footer-social li a { background: rgba(255, 255, 255, .10) !important; }

.dados-cadastrais {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
}

/* A CC BY 3.0 do template exige atribuicao; ela fica, so discreta. */
.credito-template { font-size: 11px; color: rgba(255, 255, 255, .38) !important; }
.credito-template:hover { color: rgba(255, 255, 255, .7) !important; }

/* ------------------------------------------------------------
   Padrao de circulos citricos, usado no CTA de parceria.
   SVG inline em background-image para nao pedir mais um arquivo.
   ------------------------------------------------------------ */

.padrao-citrico {
  background-color: var(--azul);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23DEDE42' stroke-width='1.2' opacity='0.35'%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3Cpath d='M60 34v52M34 60h52M41.6 41.6l36.8 36.8M78.4 41.6L41.6 78.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ------------------------------------------------------------
   Topbar
   ------------------------------------------------------------ */

/* O slogan e longo e o topbar tem tres colunas competindo. O que mais
   consumia largura era o text-transform: uppercase do template: caixa
   alta e ~13% mais larga que caixa mista para o mesmo texto. Tirar o
   uppercase economiza mais que reduzir a fonte, e melhora a leitura em
   vez de piorar -- o slogan e a frase da marca, precisa ser legivel.
   Tambem vencemos o .topper .text { width: calc(100% - 30px) } do
   style.css (que forcava a quebra) com !important. */
.topper .text { width: auto !important; }
.topbar-slogan {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Medido em Chrome headless real (1600/1440/1280/1200/1100/992px): com
   12px e sem uppercase o slogan cabe numa linha e sobra folga de +79px
   contra o e-mail do topbar de 1200px pra cima (container Bootstrap xl,
   1140px). Entre 992 e 1199px o container cai para 960px (breakpoint
   lg) e o slogan colidia ~48px com o e-mail -- por isso ele some soh
   nessa faixa; o telefone, o e-mail e as bandeiras continuam visiveis. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .topbar-slogan { display: none !important; }
}
@media (max-width: 991.98px) {
  .topbar-slogan { white-space: normal; font-size: 12px !important; }
}

/* ------------------------------------------------------------
   Ajustes de responsividade
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .bloco-produto { padding: 48px 0; }
  .bloco-produto .foto { min-height: 220px; margin-bottom: 24px; }
  .selo-numero { font-size: 34px; }
  .grade-galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------------------
   Rolagem vertical sobre o carrossel do hero (mobile)
   ------------------------------------------------------------ */

/* O Owl Carousel tem um bug conhecido no proprio CSS: ele declara
   `touch-action: pan-Y` com Y MAIUSCULO em .owl-stage. Valor invalido em
   CSS e descartado pelo navegador, entao a regra que deveria liberar o
   eixo vertical nunca teve efeito. E logo abaixo ele declara
   `touch-action: none` no .owl-item -- valido, e significa "este elemento
   trata todos os gestos". O .owl-item e justamente a area do hero onde o
   dedo encosta, entao no celular a pagina nao rolava por ali: so pelo
   menu ou por baixo do hero.

   `pan-y` (minusculo, valido) devolve o gesto vertical ao navegador e
   mantem o horizontal com o Owl -- a rolagem volta a funcionar sem
   perder o arrastar entre os slides. */
.owl-carousel .owl-stage,
.owl-carousel.owl-drag .owl-item { touch-action: pan-y !important; }