/* ============================================================
   VARIÁVEIS GLOBAIS
   ============================================================ */
:root {
  --cor-primaria:    #1a6b5a;   /* verde-petróleo */
  --cor-primaria-dark: #124d40;
  --cor-secundaria:  #2492a0;   /* azul-água */
  --cor-acento:      #e8923a;   /* laranja-dourado */
  --cor-acento-dark: #c97828;
  --cor-fundo:       #f8f7f4;
  --cor-fundo-alt:   #eef4f2;
  --cor-texto:       #222c28;
  --cor-texto-leve:  #5a6b63;
  --cor-borda:       #d0dbd7;
  --cor-branco:      #ffffff;

  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo:  'Source Sans 3', 'Source Sans Pro', sans-serif;

  --sombra-sm: 0 2px 8px rgba(0,0,0,.08);
  --sombra-md: 0 6px 24px rgba(0,0,0,.12);
  --sombra-lg: 0 12px 40px rgba(0,0,0,.15);

  --raio: 8px;
  --raio-lg: 16px;
  --transicao: .3s ease;
  --max-largura: 1200px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cor-primaria); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--cor-acento); }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--fonte-titulo);
  line-height: 1.25;
  color: var(--cor-texto);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--cor-primaria-dark);
  margin-bottom: .5rem;
}
.secao-subtitulo {
  color: var(--cor-texto-leve);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

/* ============================================================
   LAYOUT UTILITÁRIOS
   ============================================================ */
.container {
  max-width: var(--max-largura);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.secao { padding: 5rem 0; }
.secao-alt { background: var(--cor-fundo-alt); }
.texto-centro { text-align: center; }
.texto-centro .secao-subtitulo { margin-left: auto; margin-right: auto; }

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA
   ============================================================ */
#progresso-scroll {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cor-acento), var(--cor-primaria));
  z-index: 9999;
  transition: width .1s linear;
}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background var(--transicao), box-shadow var(--transicao), padding var(--transicao);
  padding: 1.2rem 0;
}
.site-header.rolado {
  background: var(--cor-branco);
  box-shadow: var(--sombra-sm);
  padding: .7rem 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo img { height: 40px; width: auto; transition: height var(--transicao); }
.site-header.rolado .site-logo img { height: 32px; }
.site-logo span {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cor-branco);
  letter-spacing: .5px;
  transition: color var(--transicao);
}
.site-header.rolado .site-logo span { color: var(--cor-primaria-dark); }

.nav-principal ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-principal a {
  color: var(--cor-branco);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .3px;
  position: relative;
  padding-bottom: 3px;
  transition: color var(--transicao);
}
.site-header.rolado .nav-principal a { color: var(--cor-texto); }
.nav-principal a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--cor-acento);
  transition: width var(--transicao);
}
.nav-principal a:hover::after,
.nav-principal a.ativo::after { width: 100%; }
.nav-principal a:hover { color: var(--cor-acento); }

.btn-menu-mobile {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  flex-direction: column;
  gap: 5px;
}
.btn-menu-mobile span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--cor-branco);
  transition: transform var(--transicao), opacity var(--transicao), background var(--transicao);
  border-radius: 2px;
}
.site-header.rolado .btn-menu-mobile span { background: var(--cor-texto); }
.btn-menu-mobile.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-menu-mobile.aberto span:nth-child(2) { opacity: 0; }
.btn-menu-mobile.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: url('../images/hero-bg.jpg');
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(18, 77, 64, .75) 0%,
    rgba(36, 146, 160, .4) 100%
  );
}
.hero-conteudo {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 2rem 1.5rem;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--cor-branco);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.hero-titulo {
  color: var(--cor-branco);
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.hero-subtitulo {
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.hero-acoes {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  letter-spacing: 1px;
}
.hero-scroll-hint .seta {
  width: 20px; height: 20px;
  border-right: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
  transform: rotate(45deg);
  animation: seta-bounce .8s ease-in-out infinite alternate;
}
@keyframes seta-bounce { from { transform: rotate(45deg) translate(0,0); } to { transform: rotate(45deg) translate(3px,3px); } }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border-radius: var(--raio);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .3px;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao);
}
.btn:active { transform: scale(.97); }
.btn-primario {
  background: var(--cor-acento);
  color: var(--cor-branco);
  border-color: var(--cor-acento);
}
.btn-primario:hover {
  background: var(--cor-acento-dark);
  border-color: var(--cor-acento-dark);
  color: var(--cor-branco);
  box-shadow: 0 4px 16px rgba(232,146,58,.4);
  transform: translateY(-2px);
}
.btn-contorno {
  background: transparent;
  color: var(--cor-branco);
  border-color: rgba(255,255,255,.7);
}
.btn-contorno:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--cor-branco);
  color: var(--cor-branco);
}
.btn-verde {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  border-color: var(--cor-primaria);
}
.btn-verde:hover {
  background: var(--cor-primaria-dark);
  border-color: var(--cor-primaria-dark);
  color: var(--cor-branco);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26,107,90,.35);
}

/* Ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple-anim .5s linear;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ============================================================
   SEÇÃO SOBRE
   ============================================================ */
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.sobre-foto {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}
.sobre-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sobre-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--raio-lg);
  border: 3px solid var(--cor-acento);
  transform: translate(12px, 12px);
  z-index: -1;
}
.sobre-texto .secao-titulo { margin-bottom: 1rem; }
.sobre-texto p { color: var(--cor-texto-leve); margin-bottom: 1rem; }
.sobre-diferenciais {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 1.5rem;
}
.diferencial-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--cor-primaria-dark);
}
.diferencial-item .icone {
  width: 32px; height: 32px;
  background: var(--cor-fundo-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ============================================================
   NÚMEROS DESTAQUE
   ============================================================ */
.numeros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.numero-card {
  background: var(--cor-branco);
  border-radius: var(--raio);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--sombra-sm);
  border-bottom: 3px solid var(--cor-acento);
}
.numero-valor {
  font-family: var(--fonte-titulo);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1;
  margin-bottom: .4rem;
}
.numero-label {
  font-size: .9rem;
  color: var(--cor-texto-leve);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
   CATÁLOGO DE ESPÉCIES
   ============================================================ */
.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}
.especie-card {
  background: var(--cor-branco);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.especie-card:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-4px);
}
.especie-card-foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.especie-card-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.especie-card:hover .especie-card-foto img { transform: scale(1.08); }
.especie-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,77,64,.7), transparent);
  opacity: 0;
  transition: opacity var(--transicao);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.especie-card:hover .especie-card-overlay { opacity: 1; }
.especie-card-overlay-texto { color: var(--cor-branco); font-size: .9rem; }
.especie-card-corpo { padding: 1.5rem; }
.especie-card-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  color: var(--cor-primaria-dark);
  margin-bottom: .4rem;
}
.especie-card-desc {
  color: var(--cor-texto-leve);
  font-size: .9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.especie-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.badge {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.badge-tamanho {
  background: var(--cor-fundo-alt);
  color: var(--cor-primaria);
}
.badge-estoque   { background: #e8f5e9; color: #2e7d32; }
.badge-encomenda { background: #fff3e0; color: #e65100; }

/* ============================================================
   SEÇÃO CONTATO / RODAPÉ
   ============================================================ */
.contato-secao {
  background: var(--cor-primaria-dark);
  color: var(--cor-branco);
  padding: 5rem 0;
}
.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contato-info h2 { color: var(--cor-branco); margin-bottom: 1rem; }
.contato-info p  { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.contato-lista { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.contato-lista li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255,255,255,.85); }
.contato-lista .ic { font-size: 1.2rem; margin-top: .1rem; flex-shrink: 0; }
.contato-mapa { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-lg); }
.contato-mapa iframe { width: 100%; height: 340px; border: none; display: block; }

.site-footer {
  background: var(--cor-texto);
  color: rgba(255,255,255,.6);
  padding: 2rem 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  color: rgba(255,255,255,.6);
  font-size: 1.2rem;
  transition: color var(--transicao);
}
.footer-social a:hover { color: var(--cor-acento); }
.footer-copy { font-size: .85rem; }

/* ============================================================
   BOTÃO FLUTUANTE WHATSAPP
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.45);
  transition: transform var(--transicao), box-shadow var(--transicao);
  animation: whatsapp-pulse 2.5s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 24px rgba(37,211,102,.6);
  color: #fff;
  animation: none;
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,.45); }
  50%       { box-shadow: 0 4px 28px rgba(37,211,102,.75), 0 0 0 8px rgba(37,211,102,.15); }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox-overlay.ativo { opacity: 1; pointer-events: all; }
.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  transform: scale(.9);
  transition: transform .3s ease;
}
.lightbox-overlay.ativo .lightbox-img { transform: scale(1); }
.lightbox-fechar {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--cor-branco);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transicao);
}
.lightbox-fechar:hover { background: rgba(255,255,255,.3); }

/* ============================================================
   PÁGINA 404 / GENERICA
   ============================================================ */
.pagina-generica {
  padding: 8rem 0 5rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.erro-404 { text-align: center; }
.erro-404 .numero { font-size: 8rem; font-family: var(--fonte-titulo); color: var(--cor-primaria); line-height: 1; }