<?php
require '/home/hmpresidencia.pro/src/Database.php';
$pdo = Database::getInstance()->getConnection();

// Stats por categoría sigma
$catRows = $pdo->query("SELECT categoria, COUNT(*) c FROM bonae_sigma_productos WHERE activo=1 GROUP BY categoria")->fetchAll(PDO::FETCH_KEY_PAIR);
$cat = fn($k) => (int)($catRows[$k] ?? 0);

// Fincas + hectáreas reales
$fincas = $pdo->query("SELECT * FROM bo_fincas WHERE estado='activa' ORDER BY id")->fetchAll(PDO::FETCH_ASSOC);
$fincaCo = null; $fincaEc = null; $fincaLl = null; $fincaTan = null;
foreach ($fincas as $f) {
    if ((int)$f['id'] === 1) $fincaCo = $f;
    elseif ((int)$f['id'] === 2) $fincaEc = $f;
    elseif ((int)$f['id'] === 3) $fincaLl = $f;
    elseif ((int)$f['id'] === 4) $fincaTan = $f;
}

// Hectáreas suma por cultivo
$haCafe = (float)$pdo->query("SELECT COALESCE(SUM(hectareas),0) FROM bo_finca_lotes WHERE cultivo='cafe' AND estado='activo'")->fetchColumn();
$haCacao = (float)$pdo->query("SELECT COALESCE(SUM(hectareas),0) FROM bo_finca_lotes WHERE cultivo='cacao' AND estado='activo'")->fetchColumn();
$haMaranon = (float)$pdo->query("SELECT COALESCE(SUM(hectareas),0) FROM bo_finca_lotes WHERE cultivo='maranon' AND estado='activo'")->fetchColumn();
$lotesActivos = (int)$pdo->query("SELECT COUNT(*) FROM bo_finca_lotes WHERE estado='activo'")->fetchColumn();

// Mariposas
$marActivas = (int)$pdo->query("SELECT COUNT(*) FROM go_mariposas WHERE estado='activa'")->fetchColumn();
$marTotal = (int)$pdo->query("SELECT COUNT(*) FROM go_mariposas")->fetchColumn();
$paisesMar = (int)$pdo->query("SELECT COUNT(DISTINCT country_code) FROM go_mariposas")->fetchColumn();
$paisesMar = max($paisesMar, 2); // narrativa CO+EC

// Productos
$productosTotal = (int)$pdo->query("SELECT COUNT(*) FROM bonae_sigma_productos WHERE activo=1")->fetchColumn();
$embed = isset($_GET['embed']);
?><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>El universo Bonae — Tres geografías, una hacienda</title>
<style>
  @font-face { font-family: "Sanz Extra Bold"; src: url("/wp-content/uploads/et-fonts/RNSSanz-ExtraBold.ttf") format("truetype"); }
  @font-face { font-family: "Sanz Normal"; src: url("/wp-content/uploads/et-fonts/RNSSanz-Normal.ttf") format("truetype"); }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: "Sanz Normal", "Inter", sans-serif; color: #2b2b2b; background: #faf8f3; line-height: 1.6; }
  h1, h2, h3 { font-family: "Sanz Extra Bold", "Inter", sans-serif; letter-spacing: -0.02em; }
  a { color: inherit; text-decoration: none; }

  .topbar { background: #1a1a1a; color: #fff; padding: 14px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
  .topbar a { margin-left: 28px; }
  .topbar a:hover { color: #f0b800; }
  .logo { font-family: "Sanz Extra Bold"; font-size: 20px; letter-spacing: 0.15em; }
  .live-badge { background: #f0b800; color: #1a1a1a; padding: 4px 10px; font-size: 10px; letter-spacing: 0.18em; margin-left: 14px; border-radius: 2px; font-weight: 700; }

  .hero { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 90vh; position: relative; }
  .hero-side { padding: 90px 50px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; color: #fff; }
  .hero-side.volcan { background: radial-gradient(circle at 80% 100%, rgba(240,184,0,0.18) 0%, transparent 55%), linear-gradient(160deg, #1a0d06 0%, #4a2a14 60%, #2b1810 100%); }
  .hero-side.pacifico { background: radial-gradient(circle at 50% 100%, rgba(240,184,0,0.18) 0%, transparent 55%), linear-gradient(160deg, #04261a 0%, #1f5841 60%, #0d3b2e 100%); }
  .hero-side.llanos { background: radial-gradient(circle at 20% 100%, rgba(240,184,0,0.30) 0%, transparent 55%), linear-gradient(160deg, #2d1b00 0%, #b88500 60%, #5c4300 100%); }
  .hero-side .deco { position: absolute; bottom: -40px; width: 320px; height: 320px; background-size: contain; background-repeat: no-repeat; background-position: bottom center; opacity: 0.55; pointer-events: none; z-index: 0; }
  .hero-side.volcan .deco { right: -50px; background-image: url("/wp-content/uploads/2022/12/geisha-bolsa.webp"); }
  .hero-side.pacifico .deco { left: -50px; background-image: url("/wp-content/uploads/2023/03/fruto-cacao.webp"); }
  .hero-side.llanos .deco { right: -50px; background-image: url("/wp-content/uploads/2022/12/bonae-premium-taza.jpg"); border-radius: 50%; opacity: 0.35; }
  .hero-side > * { position: relative; z-index: 1; }
  .eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #f0b800; margin-bottom: 20px; font-weight: 700; }
  .hero-side h1 { font-size: 50px; line-height: 1.05; margin-bottom: 20px; }
  .hero-side p { font-size: 16px; max-width: 380px; opacity: 0.92; }
  .hero-side .stats-mini { margin-top: 28px; display: flex; gap: 24px; }
  .hero-side .stats-mini div { font-size: 12px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; }
  .hero-side .stats-mini b { display: block; font-family: "Sanz Extra Bold"; font-size: 20px; color: #f0b800; opacity: 1; margin-bottom: 2px; }

  .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; color: #f0b800; font-size: 24px; font-family: "Sanz Extra Bold"; }
  .arrow.a1 { left: calc(33.333% - 12px); }
  .arrow.a2 { left: calc(66.666% - 12px); }

  .intro { max-width: 900px; margin: 100px auto; padding: 0 40px; text-align: center; }
  .intro .eyebrow { color: #b88500; }
  .intro h2 { font-size: 42px; line-height: 1.15; margin-bottom: 28px; }
  .intro p { font-size: 19px; color: #555; }

  .details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin: 0 0 80px; }
  .detail { padding: 60px 40px; background: #fff; border-right: 1px solid #ebe6db; }
  .detail:last-child { border-right: none; }
  .detail .tag { display: inline-block; background: #f0b800; color: #2b1810; padding: 6px 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; margin-bottom: 24px; }
  .detail h3 { font-size: 28px; margin-bottom: 24px; }
  .detail .gps { font-family: monospace; font-size: 11px; color: #b88500; letter-spacing: 0.08em; margin-bottom: 18px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
  .stat { border-left: 3px solid #f0b800; padding-left: 14px; }
  .stat .num { font-family: "Sanz Extra Bold"; font-size: 22px; color: #2b1810; line-height: 1.1; }
  .stat .lbl { font-size: 11px; letter-spacing: 0.1em; color: #888; text-transform: uppercase; margin-top: 4px; }
  .detail p { color: #555; font-size: 14.5px; line-height: 1.7; }
  .detail .lineas { margin-top: 30px; }
  .detail .lineas .ttl { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 12px; }
  .pill { display: inline-block; background: #f9f4e3; color: #2b1810; padding: 6px 12px; margin: 4px 4px 0 0; border-radius: 2px; font-size: 12px; font-weight: 600; }
  .pill .n { color: #b88500; font-weight: 700; margin-left: 4px; }
  .map-mini { width: 100%; height: 140px; border: 1px solid #e3ddd0; border-radius: 4px; margin-top: 20px; }

  /* Secciones dedicadas Tandapi + Esmeraldas */
  .spotlight { padding: 100px 40px; }
  .spotlight.dark { background: linear-gradient(160deg, #04261a, #0d3b2e); color: #fff; }
  .spotlight.water { background: linear-gradient(160deg, #0a2840, #1e5680); color: #fff; }
  .spotlight .container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .spotlight .text .eyebrow { color: #f0b800; }
  .spotlight .text h2 { font-size: 42px; line-height: 1.1; margin-bottom: 24px; }
  .spotlight .text p { font-size: 16px; line-height: 1.7; opacity: 0.92; margin-bottom: 14px; }
  .spotlight .text .gps { font-family: monospace; font-size: 12px; color: #f0b800; letter-spacing: 0.08em; margin: 12px 0 24px; }
  .spotlight .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
  .spotlight .stats-row .s { border-left: 3px solid #f0b800; padding-left: 14px; }
  .spotlight .stats-row .s b { display: block; font-family: "Sanz Extra Bold"; font-size: 22px; color: #f0b800; line-height: 1.1; }
  .spotlight .stats-row .s span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
  .spotlight .gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; gap: 12px; }
  .spotlight .gallery .gimg { background-size: cover; background-position: center; background-color: #2a4a3a; border-radius: 6px; position: relative; }
  .spotlight .gallery .gimg.big { grid-column: 1 / span 2; }
  .spotlight .gallery .gimg.placeholder { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, rgba(240,184,0,0.08), rgba(240,184,0,0.08) 10px, rgba(240,184,0,0.03) 10px, rgba(240,184,0,0.03) 20px); color: rgba(240,184,0,0.7); font-size: 11px; letter-spacing: 0.2em; text-align: center; padding: 20px; }
  @media (max-width: 900px) {
    .spotlight .container { grid-template-columns: 1fr; gap: 32px; }
    .spotlight .text h2 { font-size: 28px; }
    .spotlight .gallery { grid-template-rows: 180px 180px; }
  }

  .universe { background: #1a1a1a; color: #fff; padding: 100px 40px; }
  .universe .container { max-width: 1280px; margin: 0 auto; }
  .universe .head { text-align: center; margin-bottom: 60px; }
  .universe .head .eyebrow { color: #f0b800; }
  .universe .head h2 { font-size: 42px; }
  .universe .head p { opacity: 0.7; margin-top: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }

  .lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .line-card { background: #232323; padding: 28px; border-radius: 4px; border-top: 3px solid #f0b800; transition: all 0.15s; }
  .line-card:hover { background: #2a2a2a; transform: translateY(-3px); }
  .line-card.coffee { border-top-color: #d4a574; }
  .line-card.choco { border-top-color: #6b4226; }
  .line-card.snack { border-top-color: #a8c474; }
  .line-card.water { border-top-color: #74b5d4; }
  .line-card h4 { font-size: 18px; margin-bottom: 6px; }
  .line-card .origin { font-size: 11px; color: #f0b800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
  .line-card ul { list-style: none; padding: 0; }
  .line-card ul li { font-size: 13px; padding: 8px 0; border-bottom: 1px solid #2f2f2f; color: rgba(255,255,255,0.85); }
  .line-card ul li:last-child { border-bottom: none; }
  .line-card ul li span { float: right; color: #888; font-size: 11px; }

  .cta { background: linear-gradient(160deg, #2b1810, #1a0d06); color: #fff; padding: 100px 40px; text-align: center; }
  .cta h2 { font-size: 42px; margin-bottom: 18px; max-width: 720px; margin-left: auto; margin-right: auto; }
  .cta p { max-width: 580px; margin: 0 auto 36px; opacity: 0.8; font-size: 17px; }
  .cta .btn { display: inline-block; background: #f0b800; color: #1a1a1a; padding: 18px 40px; font-family: "Sanz Extra Bold"; text-decoration: none; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; margin: 0 8px; }
  .cta .btn:hover { background: #fff; }
  .cta .btn.outline { background: transparent; color: #fff; border: 1px solid #fff; }
  .cta .btn.outline:hover { background: #fff; color: #1a1a1a; }
  .footer { background: #0d0d0d; color: #888; text-align: center; padding: 30px; font-size: 13px; }
  .footer .live { color: #f0b800; font-family: monospace; }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-side { min-height: 50vh; padding: 50px 30px; }
    .hero-side h1 { font-size: 36px; }
    .arrow { display: none; }
    .details { grid-template-columns: 1fr; }
    .detail { border-right: none; border-bottom: 1px solid #ebe6db; }
    .lines { grid-template-columns: 1fr 1fr; }
    .intro h2, .universe .head h2, .cta h2 { font-size: 28px; }
  }
</style>
</head>
<body>

<?php if (!$embed): ?>
<div class="topbar">
  <div class="logo">BONAE <span class="live-badge">EN VIVO</span></div>
  <nav>
    <a href="/">Inicio</a>
    <a href="/nuestro-cafe">Café</a>
    <a href="/nuestro-chocolate">Chocolate</a>
    <a href="/origen.php">Origen</a>
    <a href="/red-mariposas.php">Red mariposas</a>
    <a href="/mi/login.html">Mi cuenta</a>
  </nav>
</div>
<?php endif; ?>

<section class="hero">
  <div class="hero-side volcan">
    <div class="deco"></div>
    <div class="eyebrow">🌋 Origen · Colombia</div>
    <h1>Donde nace<br>el café.</h1>
    <p>Eje Cafetero sobre suelo andisol de los nevados Santa Isabel y Ruiz. <?= htmlspecialchars($fincaCo['region'] ?? 'Santa Rosa de Cabal') ?>.</p>
    <div class="stats-mini">
      <div><b><?= number_format($haCafe, 0) ?> ha</b>Cultivadas</div>
      <div><b>2.000 m</b>Altitud</div>
    </div>
  </div>
  <div class="hero-side pacifico">
    <div class="deco"></div>
    <div class="eyebrow">🌧 Origen · Pacífico Ecuador</div>
    <h1>Donde nace<br>el cacao.</h1>
    <p>Pacífico húmedo ecuatoriano, 2.800 mm/año al cacao Nacional Arriba endémico. <?= htmlspecialchars($fincaEc['region'] ?? 'Esmeraldas') ?>.</p>
    <div class="stats-mini">
      <div><b><?= number_format($haCacao, 0) ?> ha</b>Cultivadas</div>
      <div><b>2.800 mm</b>Lluvia/año</div>
    </div>
  </div>
  <div class="hero-side llanos">
    <div class="deco"></div>
    <div class="eyebrow">🌾 Origen · Vichada</div>
    <h1>Donde nace<br>el marañón.</h1>
    <p>Hacienda Mohopaya, sabana de la Orinoquía colombiana. La sequía controlada concentra la nuez con perfil dulce-tostado. <?= htmlspecialchars($fincaLl['region'] ?? 'Vichada — Orinoquía colombiana') ?>.</p>
    <div class="stats-mini">
      <div><b><?= number_format($haMaranon, 0) ?> ha</b>Cultivadas</div>
      <div><b>Sabana</b>Tropical</div>
    </div>
  </div>
  <div class="arrow a1">→</div>
  <div class="arrow a2">→</div>
</section>

<section class="intro">
  <div class="eyebrow">El universo Bonae</div>
  <h2>Una marca, tres geografías irrepetibles y un canal humano que las conecta con la calle.</h2>
  <p>Bonae cultiva en los tres suelos del planeta que pueden producir café especialidad, cacao Nacional Arriba y marañón premium al máximo nivel — y un canal de <strong><?= $marActivas ?: $marTotal ?> mariposas</strong> en <?= $paisesMar ?> países lo entrega directo a tu mano, sin pasar por góndolas anónimas. Hoy: <strong><?= $lotesActivos ?> lotes activos</strong> y <strong><?= $productosTotal ?> productos</strong> en catálogo Sigma.</p>
</section>

<section class="details">

  <div class="detail">
    <span class="tag">🌋 Colombia volcánica</span>
    <h3><?= htmlspecialchars($fincaCo['nombre'] ?? 'Hacienda Bonae Santa Rosa') ?></h3>
    <div class="gps">📍 <?= htmlspecialchars($fincaCo['coordenadas'] ?? '4.866,-75.624') ?> · <?= htmlspecialchars($fincaCo['region'] ?? 'Santa Rosa de Cabal, Risaralda') ?></div>
    <div class="stats">
      <div class="stat"><div class="num"><?= number_format($haCafe, 1) ?> ha</div><div class="lbl">Cultivadas en café</div></div>
      <div class="stat"><div class="num">Andisol</div><div class="lbl">Suelo volcánico</div></div>
      <div class="stat"><div class="num">87 SCA</div><div class="lbl">Puntaje Geisha</div></div>
      <div class="stat"><div class="num">2 volcanes</div><div class="lbl">Activos cercanos</div></div>
    </div>
    <p>Suelos andisol de cenizas volcánicas, únicos en el mundo cafetero. Ricos en fósforo, drenaje perfecto.</p>
    <?php if ($fincaCo): ?>
    <iframe class="map-mini" loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=<?= ((float)explode(',', $fincaCo['coordenadas'])[1] - 0.05) ?>,<?= ((float)explode(',', $fincaCo['coordenadas'])[0] - 0.05) ?>,<?= ((float)explode(',', $fincaCo['coordenadas'])[1] + 0.05) ?>,<?= ((float)explode(',', $fincaCo['coordenadas'])[0] + 0.05) ?>&marker=<?= htmlspecialchars($fincaCo['coordenadas']) ?>"></iframe>
    <?php endif; ?>
    <div class="lineas">
      <div class="ttl">Líneas de café cultivadas aquí</div>
      <span class="pill">Geisha <span class="n"><?= $cat('cafe_geisha') ?></span></span>
      <span class="pill">Legado <span class="n"><?= $cat('cafe_legado') ?></span></span>
      <span class="pill">Premium <span class="n"><?= $cat('cafe_premium') ?></span></span>
      <span class="pill">Tradición <span class="n"><?= $cat('cafe_tradicion') ?></span></span>
      <span class="pill">Honey <span class="n"><?= $cat('cafe_honey') ?></span></span>
      <span class="pill">Especial <span class="n"><?= $cat('cafe_especial') ?></span></span>
    </div>
  </div>

  <div class="detail">
    <span class="tag">🌧 Pacífico Ecuador</span>
    <h3><?= htmlspecialchars($fincaEc['nombre'] ?? 'Finca Bonae Pacífico') ?></h3>
    <div class="gps">📍 <?= htmlspecialchars($fincaEc['coordenadas'] ?? '0.953,-79.651') ?> · <?= htmlspecialchars($fincaEc['region'] ?? 'Esmeraldas') ?></div>
    <div class="stats">
      <div class="stat"><div class="num"><?= number_format($haCacao, 1) ?> ha</div><div class="lbl">Cultivadas en cacao</div></div>
      <div class="stat"><div class="num">N. Arriba</div><div class="lbl">Cacao endémico</div></div>
      <div class="stat"><div class="num">2.800 mm</div><div class="lbl">Lluvia/año</div></div>
      <div class="stat"><div class="num">26°C</div><div class="lbl">Temp. media</div></div>
    </div>
    <p>La humedad permanente del Pacífico ecuatoriano da al Nacional Arriba el perfil floral-frutal que ningún otro cacao replica. La misma planta embotella el agua.</p>
    <?php if ($fincaEc): ?>
    <iframe class="map-mini" loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=<?= ((float)explode(',', $fincaEc['coordenadas'])[1] - 0.05) ?>,<?= ((float)explode(',', $fincaEc['coordenadas'])[0] - 0.05) ?>,<?= ((float)explode(',', $fincaEc['coordenadas'])[1] + 0.05) ?>,<?= ((float)explode(',', $fincaEc['coordenadas'])[0] + 0.05) ?>&marker=<?= htmlspecialchars($fincaEc['coordenadas']) ?>"></iframe>
    <?php endif; ?>
    <div class="lineas">
      <div class="ttl">Líneas producidas aquí</div>
      <span class="pill">Chocolate <span class="n"><?= $cat('chocolate') ?></span></span>
      <span class="pill">Cocoa <span class="n"><?= $cat('cocoa') ?></span></span>
      <span class="pill">Agua <span class="n"><?= $cat('agua') ?></span></span>
      <span class="pill">Bebida Achocolatada</span>
    </div>
  </div>

  <div class="detail">
    <span class="tag">🌾 Orinoquía · Vichada</span>
    <h3><?= htmlspecialchars($fincaLl['nombre'] ?? 'Hacienda Mohopaya') ?></h3>
    <div class="gps">📍 <?= htmlspecialchars($fincaLl['coordenadas'] ?? '5.000,-69.500') ?> · <?= htmlspecialchars($fincaLl['region'] ?? 'Vichada — Orinoquía colombiana') ?></div>
    <div class="stats">
      <div class="stat"><div class="num"><?= number_format($haMaranon, 1) ?> ha</div><div class="lbl">Cultivadas en marañón</div></div>
      <div class="stat"><div class="num">Sabana</div><div class="lbl">Tropical</div></div>
      <div class="stat"><div class="num">~28°C</div><div class="lbl">Temp. media</div></div>
      <div class="stat"><div class="num">Estación seca</div><div class="lbl">Concentra perfil</div></div>
    </div>
    <p>La Orinoquía colombiana da al marañón una dulzura natural que el del Pacífico no logra. Cosecha una vez al año, perfil tostado-mantequilla. Hacienda Mohopaya es la única finca Bonae al oriente del país.</p>
    <?php if ($fincaLl): ?>
    <iframe class="map-mini" loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=<?= ((float)explode(',', $fincaLl['coordenadas'])[1] - 0.05) ?>,<?= ((float)explode(',', $fincaLl['coordenadas'])[0] - 0.05) ?>,<?= ((float)explode(',', $fincaLl['coordenadas'])[1] + 0.05) ?>,<?= ((float)explode(',', $fincaLl['coordenadas'])[0] + 0.05) ?>&marker=<?= htmlspecialchars($fincaLl['coordenadas']) ?>"></iframe>
    <?php endif; ?>
    <div class="lineas">
      <div class="ttl">Líneas producidas aquí</div>
      <span class="pill">Snacks marañón <span class="n"><?= $cat('snack') ?></span></span>
      <span class="pill">Marañón Arándanos</span>
      <span class="pill">Marañón Frutas</span>
      <span class="pill">Marañón Nips</span>
    </div>
  </div>

</section>

<!-- ===== Spotlight: Hacienda Cacao Esmeraldas ===== -->
<section class="spotlight dark">
  <div class="container">
    <div class="text">
      <div class="eyebrow">🌧 <?= htmlspecialchars($fincaEc['region'] ?? 'Esmeraldas, Ecuador') ?></div>
      <h2><?= htmlspecialchars($fincaEc['nombre'] ?? 'Finca Bonae Pacífico') ?></h2>
      <div class="gps">📍 <?= htmlspecialchars($fincaEc['coordenadas'] ?? '0.953,-79.651') ?> · Pacífico ecuatoriano</div>
      <p>Aquí crece el cacao Nacional Arriba, una variedad endémica del Ecuador que sólo se produce en este corredor del Pacífico. La humedad constante (2.800 mm de lluvia al año), el suelo aluvial y la temperatura estable de 26°C dan el perfil floral-frutal que ningún otro cacao replica.</p>
      <p>De aquí salen las tres barras Bonae — Flor de Selva 50%, Madre Selva 70% y Selva Negra 90% — y todas las referencias de cocoa.</p>
      <div class="stats-row">
        <div class="s"><b><?= number_format($haCacao, 0) ?> ha</b><span>Cacao cultivado</span></div>
        <div class="s"><b>Nacional Arriba</b><span>Variedad endémica</span></div>
        <div class="s"><b><?= $cat('chocolate') + $cat('cocoa') ?></b><span>SKUs derivados</span></div>
      </div>
    </div>
    <div class="gallery">
      <div class="gimg big" style="background-image:url('/wp-content/uploads/2022/10/hacienda-bonae-01.jpg');"></div>
      <div class="gimg" style="background-image:url('/wp-content/uploads/2022/12/fruto-de-cacao.jpg');"></div>
      <div class="gimg" style="background-image:url('/wp-content/uploads/2023/03/fruto-cacao.webp');"></div>
    </div>
  </div>
</section>

<!-- ===== Spotlight: Embotelladora Tandapi ===== -->
<section class="spotlight water">
  <div class="container">
    <div class="gallery">
      <div class="gimg big placeholder">PLACEHOLDER · Foto principal embotelladora Tandapi (1200×640)</div>
      <div class="gimg placeholder">PLACEHOLDER · Línea de embotellado</div>
      <div class="gimg placeholder">PLACEHOLDER · Manantial / cordillera Pichincha</div>
    </div>
    <div class="text">
      <div class="eyebrow">💧 Tandapi · Pichincha · Ecuador</div>
      <h2><?= htmlspecialchars($fincaTan['nombre'] ?? 'Embotelladora Bonae Tandapi') ?></h2>
      <div class="gps">📍 <?= htmlspecialchars($fincaTan['coordenadas'] ?? '-0.4344,-78.7997') ?> · Cordillera occidental</div>
      <p>En Tandapi, parroquia rural del cantón Mejía a 50 km de Quito, embotellamos agua de manantial directo de los acuíferos de la cordillera occidental ecuatoriana. La pureza viene del suelo volcánico filtrante y de no haber actividad industrial en los 30 km alrededor del nacimiento.</p>
      <p>De esta planta sale toda el <strong>Agua Bonae 600 ml y 20 L</strong>, además de las mezclas líquidas como la bebida achocolatada.</p>
      <div class="stats-row">
        <div class="s"><b>~2.500 m</b><span>Altitud manantial</span></div>
        <div class="s"><b>Volcánica</b><span>Filtración natural</span></div>
        <div class="s"><b><?= $cat('agua') ?></b><span>SKUs agua activos</span></div>
      </div>
      <?php if ($fincaTan): ?>
      <iframe class="map-mini" style="height:160px;" loading="lazy" src="https://www.openstreetmap.org/export/embed.html?bbox=<?= ((float)explode(',', $fincaTan['coordenadas'])[1] - 0.05) ?>,<?= ((float)explode(',', $fincaTan['coordenadas'])[0] - 0.05) ?>,<?= ((float)explode(',', $fincaTan['coordenadas'])[1] + 0.05) ?>,<?= ((float)explode(',', $fincaTan['coordenadas'])[0] + 0.05) ?>&marker=<?= htmlspecialchars($fincaTan['coordenadas']) ?>"></iframe>
      <?php endif; ?>
    </div>
  </div>
</section>

<section class="universe">
  <div class="container">
    <div class="head">
      <div class="eyebrow">Catálogo completo · BD viva</div>
      <h2>Todo lo que sale de Bonae · <?= $productosTotal ?> productos</h2>
      <p>Cada producto rastreable hasta su finca, su lote y la mariposa que te lo vendió. <a href="/red-mariposas.php" style="color:#f0b800;">Conoce la red de <?= $marActivas ?: $marTotal ?> mariposas →</a></p>
    </div>
    <div class="lines">

      <div class="line-card coffee">
        <h4>Café</h4>
        <div class="origin">🌋 Colombia · <?= $cat('cafe_geisha') + $cat('cafe_legado') + $cat('cafe_premium') + $cat('cafe_tradicion') + $cat('cafe_honey') + $cat('cafe_especial') ?> SKUs</div>
        <ul>
          <li>Geisha <span><?= $cat('cafe_geisha') ?></span></li>
          <li>Legado <span><?= $cat('cafe_legado') ?></span></li>
          <li>Premium <span><?= $cat('cafe_premium') ?></span></li>
          <li>Tradición <span><?= $cat('cafe_tradicion') ?></span></li>
          <li>Honey <span><?= $cat('cafe_honey') ?></span></li>
          <li>Especial <span><?= $cat('cafe_especial') ?></span></li>
        </ul>
      </div>

      <div class="line-card choco">
        <h4>Chocolate y cacao</h4>
        <div class="origin">🌧 Ecuador · <?= $cat('chocolate') + $cat('cocoa') ?> SKUs</div>
        <ul>
          <li>Chocolate barras <span><?= $cat('chocolate') ?></span></li>
          <li>Cocoa <span><?= $cat('cocoa') ?></span></li>
          <li>Flor de Selva 50%</li>
          <li>Madre Selva 70%</li>
          <li>Selva Negra 90%</li>
        </ul>
      </div>

      <div class="line-card snack">
        <h4>Snacks marañón</h4>
        <div class="origin">🌾 Vichada · <?= $cat('snack') ?> SKUs</div>
        <ul>
          <li>Marañón-Arándanos</li>
          <li>Marañón-Nips</li>
          <li>Marañón-Frutas</li>
          <li>Snak Uvas Pasas</li>
          <li>Total snacks <span><?= $cat('snack') ?></span></li>
        </ul>
      </div>

      <div class="line-card water">
        <h4>Agua y kits</h4>
        <div class="origin">🏭 Embotelladora · <?= $cat('agua') + $cat('kit') ?> SKUs</div>
        <ul>
          <li>Agua 600 ml / 20 L <span><?= $cat('agua') ?></span></li>
          <li>Kits Bonae <span><?= $cat('kit') ?></span></li>
          <li>Kit Matrimonio</li>
          <li>Kit Duo</li>
          <li><a href="/proceso.html" style="color:#f0b800;">Proceso planta →</a></li>
        </ul>
      </div>

    </div>
  </div>
</section>

<section class="cta">
  <h2>Cada bolsa lleva el lugar exacto que la hizo posible.</h2>
  <p>Escanea el QR de cualquier producto y verás la finca, el lote, las coordenadas GPS, la fecha de cosecha y la mariposa que te lo entregó. Trazabilidad real, no marketing.</p>
  <a href="/lote.php?id=1" class="btn">Ver lote demo</a>
  <a href="/red-mariposas.php" class="btn outline">Red mariposas</a>
</section>

<div class="footer">
  Bonae S.A.S. · Cra 15 bis #10b-30, Pereira–Risaralda, Colombia · &copy; 2026<br>
  <span class="live">Página servida en vivo desde BD · <?= count($fincas) ?> fincas · <?= $lotesActivos ?> lotes · <?= $productosTotal ?> SKUs · <?= $marTotal ?> mariposas</span>
</div>

</body>
</html>
