/* ============================================================
   BIOSOLO — site institucional
   Estilos compartilhados (tokens aplicados inline nas páginas;
   aqui ficam reset, animações e regras responsivas)
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; }
body { font-family: 'Inter', system-ui, sans-serif; color: #1a1208; }
a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

/* ---- Revelação no scroll ----
   Elementos com [data-reveal] entram animados quando aparecem na
   tela (IntersectionObserver no site.js). Variantes:
     data-reveal        → sobe com leve blur (padrão)
     data-reveal="zoom" → aproxima suavemente (fotos, mapas, vídeo)
     data-reveal="left" / "right" → desliza lateral
   O atraso individual vem da variável --bs-d (stagger automático). */
[data-reveal] { opacity: 0; }
[data-reveal].bs-in {
  animation: bsRevealUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--bs-d, 0s);
}
[data-reveal="zoom"].bs-in  { animation-name: bsRevealZoom; animation-duration: 1.1s; }
[data-reveal="left"].bs-in  { animation-name: bsRevealLeft; }
[data-reveal="right"].bs-in { animation-name: bsRevealRight; }
[data-reveal][data-reveal-delay="1"] { --bs-d: 0.1s; }
[data-reveal][data-reveal-delay="2"] { --bs-d: 0.2s; }
[data-reveal][data-reveal-delay="3"] { --bs-d: 0.3s; }

@keyframes bsRevealUp {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bsRevealZoom {
  from { opacity: 0; transform: scale(0.94) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bsRevealLeft {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bsRevealRight {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bs-hero-bg { animation: none !important; }
  .bs-marquee-track { animation: none !important; }
}

/* ---- Marquee infinito (logos de parceiros) ----
   Trilha com o conteúdo duplicado deslizando para a esquerda em
   loop (translateX(-50%) + linear infinite). Fica centrado (não
   vai de canto a canto) e as bordas somem com blur + fade.
   Pausa no hover. */
.bs-marquee {
  overflow: hidden;
  position: relative;
  max-width: min(1080px, 100%);
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* véus de blur nas bordas: desfoca as logos que entram/saem */
.bs-marquee::before,
.bs-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.bs-marquee::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
  mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.bs-marquee::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent);
  mask-image: linear-gradient(270deg, #000 30%, transparent);
}
.bs-marquee-track {
  display: flex;
  width: max-content;
  animation: bsMarquee 36s linear infinite;
  will-change: transform;
}
.bs-marquee:hover .bs-marquee-track { animation-play-state: paused; }
.bs-marquee-group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  flex: 0 0 auto;
}
.bs-marquee-group > * { flex: 0 0 auto; }
@keyframes bsMarquee { to { transform: translateX(-50%); } }

/* ---- Animações ---- */
@keyframes bsHeroZoom { from { transform: scale(1.03); } to { transform: scale(1.11); } }
@keyframes adPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes adToast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Campos de formulário (contato) ---- */
.bs-field {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 16px; color: #1a1208;
  background: #ffffff; border: 1px solid #ddd5c8; border-radius: 6px; padding: 13px 14px;
  outline: none; transition: border-color 140ms, box-shadow 140ms;
}
.bs-field:focus { border-color: #2d7a1e; box-shadow: 0 0 0 3px rgba(45,122,30,0.18); }
.bs-field::placeholder { color: #b0a392; }

/* ---- Campos do painel (admin) ---- */
.ad-field {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 15px; color: #1a1208;
  background: #fff; border: 1px solid #ddd5c8; border-radius: 6px; padding: 12px 13px;
  outline: none; transition: border-color 140ms, box-shadow 140ms;
}
.ad-field:focus { border-color: #2d7a1e; box-shadow: 0 0 0 3px rgba(45,122,30,0.18); }

/* ---- Grid da vitrine de produtos ---- */
.bs-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }

/* ---- Hero interno das páginas: foto de lavoura/colheita ao fundo (opacidade baixa) ---- */
.bs-hero-photo {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=2000&q=70') center 40% / cover no-repeat;
  opacity: 0.16; pointer-events: none;
}
/* segunda camada opcional (lavoura) — usada em algumas páginas para variar */
.bs-hero-photo.alt {
  background-image: url('https://images.unsplash.com/photo-1625246333195-78d9c38ad449?auto=format&fit=crop&w=2000&q=70');
}

/* ============================================================
   CARROSSEL horizontal (usado no bloco de noticias da home)
   O trilho rola na horizontal com encaixe por cartao. Os botoes
   sao um atalho: o dedo e a roda do mouse ja funcionam sozinhos.
   ============================================================ */

.bs-carr {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-top: 44px;
  padding: 4px 4px 18px;          /* respiro pra sombra do cartao nao ser cortada */
  -ms-overflow-style: none;        /* Edge/IE */
  scrollbar-width: none;           /* Firefox */
}
.bs-carr::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

.bs-carr > a {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/* Some quando nao ha o que rolar (o site.js liga/desliga) */
.bs-carr-botoes[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bs-carr { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .bs-carr > a { flex-basis: 82%; }
  .bs-carr-botoes { display: none !important; }   /* no celular o dedo resolve */
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Header → menu hambúrguer */
@media (max-width: 1000px) {
  .bs-desk-nav { display: none !important; }
  .bs-desk-cta { display: none !important; }
  .bs-burger { display: flex !important; }
}

@media (max-width: 900px) {
  .bs-grid-3, .bs-grid-2, .bs-founders, .bs-split { grid-template-columns: 1fr !important; }
  .bs-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .bs-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
  .bs-hero-inner { padding: 56px 24px 48px !important; }
  .bs-hero-h1 { font-size: 34px !important; }
  .bs-numbers { gap: 28px !important; }
  .bs-phead { padding: 124px 24px 56px !important; }
  .bs-tl-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .bs-tl-year { text-align: left !important; }
  .bs-sol-grid { grid-template-columns: 1fr !important; }
  .bs-sol-card { grid-template-columns: 1fr !important; }
  .bs-plogos { grid-template-columns: repeat(2, 1fr) !important; }
  .bs-cases { grid-template-columns: 1fr !important; }
  .bs-case-card { grid-template-columns: 1fr !important; }
  .bs-feat { grid-template-columns: 1fr !important; }
  .bs-posts { grid-template-columns: 1fr !important; }
  .bs-contact { grid-template-columns: 1fr !important; }
  .bs-logos { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .bs-posts { grid-template-columns: 1fr !important; }
  /* Barra superior: só telefone + ícones (sem cidade e sem textos) */
  .bs-tb-city { display: none !important; }
  .bs-tb-txt { display: none !important; }
  /* Cards dos sócios (Sobre): foto em cima, texto embaixo */
  .bs-founders > div { grid-template-columns: 1fr !important; }
  .bs-founders image-slot { width: 100% !important; height: 260px !important; }
}

/* Botão flutuante do WhatsApp: menor no mobile + zona de segurança
   no fim da página para não cobrir o texto do rodapé */
@media (max-width: 900px) {
  .bs-fab { width: 52px !important; height: 52px !important; right: 16px !important; bottom: 16px !important; }
  .bs-fab i { font-size: 28px !important; }
  footer { padding-bottom: 84px; }
  /* Marquee: garante trilha horizontal em qualquer viewport */
  .bs-marquee-track { display: flex !important; width: max-content !important; }
}

@media (max-width: 560px) {
  .bs-grid-4 { grid-template-columns: 1fr !important; }
}

/* Painel admin */
@media (max-width: 820px) {
  .ad-shell { grid-template-columns: 1fr !important; }
  .ad-side { position: static !important; height: auto !important; flex-direction: row !important; overflow-x: auto !important; }
  .ad-side-nav { flex-direction: row !important; }
  .ad-main { padding: 24px 18px !important; }
  .ad-row { grid-template-columns: 1fr auto !important; }
  .ad-meta-col { display: none !important; }
}