{"id":10,"date":"2026-09-11T10:39:40","date_gmt":"2026-09-11T15:39:40","guid":{"rendered":"https:\/\/wp.frupex.com\/?page_id=10"},"modified":"2026-11-06T18:02:28","modified_gmt":"2026-11-06T23:02:28","slug":"inicio","status":"publish","type":"page","link":"https:\/\/wp.frupex.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =====================================================\n   FRUPEX \u2014 HOME HERO V6\n   Century Gothic | Compacto | Cinematogr\u00e1fico\n   ===================================================== *\/\n\n\/* Limpieza de contenedores SOLO del contenido de Inicio.\n   No alteramos .ast-container ni la cabecera de Astra. *\/\n\nbody.page-id-10 {\n  overflow-x: clip;\n}\n\n.page-id-10 .entry-title,\n.page-id-10 .entry-header {\n  display: none !important;\n}\n\n.page-id-10 .entry-content {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.page-id-10 .entry-content > .wp-block-html {\n  max-width: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\/* =====================================================\n   HERO\n   ===================================================== *\/\n\n.frupex-hero,\n.frupex-hero * {\n  box-sizing: border-box;\n}\n\n.frupex-hero {\n  --frx-yellow: #F3CB00;\n  --frx-dark: #221109;\n  --frx-font: \"Century Gothic\", \"CenturyGothic\",\n              Arial, sans-serif;\n\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n\n  width: 100vw;\n  max-width: none;\n  min-height: 620px;\n\n  margin-left: calc(50% - 50vw);\n\n  background: #15100B;\n  color: #FFFFFF;\n\n  font-family: var(--frx-font);\n}\n\n.frupex-hero h1,\n.frupex-hero p,\n.frupex-hero a,\n.frupex-hero span,\n.frupex-hero small,\n.frupex-hero strong {\n  font-family: var(--frx-font);\n}\n\n\/* =====================================================\n   FOTOGRAF\u00cdA\n   ===================================================== *\/\n\n.frupex-hero__media {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.frupex-hero__image {\n  position: absolute;\n  inset: -2%;\n\n  background-image: url(\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Plantacion-de-platanos-bajo-cielos-nublados.png\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 70% 50%;\n\n  transform: scale(1.035);\n  transform-origin: center;\n\n  will-change: transform;\n}\n\n.frupex-hero__veil {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(9, 6, 4, .91) 0%,\n      rgba(9, 6, 4, .83) 23%,\n      rgba(9, 6, 4, .65) 43%,\n      rgba(9, 6, 4, .27) 68%,\n      rgba(9, 6, 4, .10) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(4, 3, 2, .28) 0%,\n      transparent 32%,\n      rgba(4, 3, 2, .25) 100%\n    );\n}\n\n.frupex-hero__grain {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n\n  opacity: .025;\n  pointer-events: none;\n\n  background-image: radial-gradient(\n    rgba(255,255,255,.35) .45px,\n    transparent .55px\n  );\n  background-size: 4px 4px;\n}\n\n\/* =====================================================\n   ESTRUCTURA\n   ===================================================== *\/\n\n.frupex-hero__inner {\n  position: relative;\n  z-index: 3;\n\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 190px;\n  align-items: center;\n  gap: 48px;\n\n  width: min(1320px, calc(100% - 10vw));\n  min-height: 620px;\n  margin: 0 auto;\n\n  padding: 122px 0 62px;\n}\n\n.frupex-hero__content {\n  width: 100%;\n  max-width: 665px;\n  min-width: 0;\n}\n\n\/* =====================================================\n   ETIQUETA SUPERIOR\n   ===================================================== *\/\n\n.frupex-hero .frupex-kicker {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  margin: 0 0 22px;\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .21em;\n  text-transform: uppercase;\n\n  color: #F3CB00;\n}\n\n\n\n\/* =====================================================\n   T\u00cdTULO PRINCIPAL\n   ===================================================== *\/\n\n.frupex-hero .frupex-hero__title {\n  margin: 0 !important;\n  padding: 0;\n\n  max-width: 100%;\n\n  font-size: clamp(43px, 4.35vw, 67px);\n  font-weight: 400;\n  line-height: 1.15;\n  letter-spacing: -.045em;\n\n  color: #FFFFFF;\n\n  text-align: left;\n  text-transform: none;\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n\n  text-shadow: 0 5px 25px rgba(0,0,0,.16);\n}\n\n.frupex-hero .title-line {\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n\n  padding: .02em .07em .07em 0;\n}\n\n.frupex-hero .title-line > span {\n  display: block;\n\n  opacity: 1;\n  transform: none;\n\n  white-space: nowrap;\n}\n\n.frupex-hero .accent-dot {\n  color: var(--frx-yellow);\n}\n\n\/* =====================================================\n   P\u00c1RRAFO\n   ===================================================== *\/\n\n.frupex-hero .frupex-hero__copy {\n  max-width: 520px;\n  margin: 23px 0 0 !important;\n\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: -.005em;\n\n  color: rgba(255,255,255,.89);\n}\n\n\/* =====================================================\n   BOTONES\n   ===================================================== *\/\n\n.frupex-hero__actions {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n\n  margin-top: 27px;\n}\n\n.frupex-hero .frupex-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  min-height: 47px;\n  padding: 0 20px;\n\n  border-radius: 4px;\n\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n\n  text-decoration: none !important;\n  white-space: nowrap;\n\n  transition:\n    transform .35s ease,\n    background .35s ease,\n    border-color .35s ease,\n    box-shadow .35s ease;\n}\n\n.frupex-hero .frupex-btn--primary {\n  color: var(--frx-dark) !important;\n  background: var(--frx-yellow);\n  border: 1px solid var(--frx-yellow);\n\n  box-shadow: 0 12px 30px rgba(0,0,0,.17);\n}\n\n.frupex-hero .frupex-btn--primary:hover {\n  color: var(--frx-dark) !important;\n  background: #FFD51A;\n  border-color: #FFD51A;\n\n  transform: translateY(-3px);\n  box-shadow: 0 18px 35px rgba(0,0,0,.24);\n}\n\n.frupex-btn__arrow {\n  font-size: 17px;\n  transition: transform .35s ease;\n}\n\n.frupex-btn--primary:hover .frupex-btn__arrow {\n  transform: translateX(5px);\n}\n\n.frupex-hero .frupex-btn--ghost {\n  color: #FFFFFF !important;\n  background: rgba(255,255,255,.04);\n  border: 1px solid rgba(255,255,255,.48);\n\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n\n.frupex-hero .frupex-btn--ghost:hover {\n  color: #FFFFFF !important;\n  background: rgba(255,255,255,.13);\n  border-color: rgba(255,255,255,.85);\n\n  transform: translateY(-3px);\n}\n\n\/* =====================================================\n   FIRMA\n   ===================================================== *\/\n\n.frupex-hero__signature {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n\n  margin-top: 35px;\n}\n\n.frupex-hero .signature-mark {\n  display: block;\n  width: 2px;\n  flex: 0 0 2px;\n\n  background: linear-gradient(\n    to bottom,\n    var(--frx-yellow),\n    rgba(243,203,0,.12)\n  );\n}\n\n.frupex-hero__signature div {\n  display: grid;\n  gap: 4px;\n}\n\n.frupex-hero .frupex-hero__signature small {\n  display: block;\n\n  font-size: 8px;\n  font-weight: 700;\n  line-height: 1.3;\n  letter-spacing: .20em;\n\n  color: rgba(255,255,255,.67);\n}\n\n\/* =====================================================\n   DETALLES DERECHA\n   ===================================================== *\/\n\n.frupex-hero__meta {\n  align-self: stretch;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: flex-end;\n\n  gap: 12px;\n\n  padding: 10px 0 14px;\n  text-align: right;\n}\n\n.frupex-location {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  font-size: 9px;\n  font-weight: 400;\n  line-height: 1.3;\n  letter-spacing: .18em;\n\n  color: #F3CB00;\n}\n\n.frupex-location strong {\n  font-weight: 700;\n}\n\n.frupex-hero__tagline {\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.55;\n  letter-spacing: .15em;\n\n  color: rgba(255,255,255,.75);\n}\n   ===================================================== *\/\n\n.frupex-scroll-indicator {\n  position: absolute;\n  z-index: 5;\n\n  right: 28px;\n  bottom: 25px;\n\n  width: 1px;\n  height: 54px;\n  overflow: hidden;\n\n  background: rgba(255,255,255,.17);\n}\n\n.frupex-scroll-indicator span {\n  display: block;\n  width: 1px;\n  height: 22px;\n\n  background: var(--frx-yellow);\n}\n\n\/* =====================================================\n   TABLET\n   ===================================================== *\/\n\n@media (max-width: 1100px) {\n\n  .frupex-hero,\n  .frupex-hero__inner {\n    min-height: 575px;\n  }\n\n  .frupex-hero__inner {\n    width: calc(100% - 64px);\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0;\n\n    padding: 115px 0 58px;\n  }\n\n  .frupex-hero__content {\n    max-width: 635px;\n  }\n\n  .frupex-hero .frupex-hero__title {\n    font-size: clamp(42px, 5.6vw, 61px);\n  }\n\n  .frupex-hero__meta {\n    position: absolute;\n    top: 85px;\n    right: 0;\n\n    padding: 0;\n  }\n\n  .frupex-hero__tagline {\n    display: none;\n  }\n}\n\n\/* =====================================================\n   M\u00d3VIL\n   ===================================================== *\/\n\n@media (max-width: 767px) {\n\n  .frupex-hero {\n    min-height: 630px;\n  }\n\n  .frupex-hero__inner {\n    display: flex;\n    align-items: flex-end;\n\n    width: calc(100% - 38px);\n    min-height: 630px;\n\n    padding: 120px 0 45px;\n  }\n\n  .frupex-hero__image {\n    background-position: 66% center;\n  }\n\n  .frupex-hero__veil {\n    background:\n      linear-gradient(\n        180deg,\n        rgba(8,5,3,.48) 0%,\n        rgba(8,5,3,.46) 27%,\n        rgba(8,5,3,.74) 59%,\n        rgba(8,5,3,.95) 100%\n      );\n  }\n\n  .frupex-hero .frupex-kicker {\n    gap: 9px;\n    margin-bottom: 16px;\n\n    font-size: 8px;\n    letter-spacing: .11em;\n  }\n\n\n  .frupex-hero .frupex-hero__title {\n    font-size: clamp(36px, 9.3vw, 52px);\n    line-height: 1.16;\n    letter-spacing: -.045em;\n  }\n\n  .frupex-hero .frupex-hero__copy {\n    max-width: 420px;\n    margin-top: 19px !important;\n\n    font-size: 13.5px;\n    line-height: 1.65;\n  }\n\n  .frupex-hero__actions {\n    gap: 10px;\n    margin-top: 22px;\n  }\n\n  .frupex-hero .frupex-btn {\n    min-height: 44px;\n    padding: 0 15px;\n    font-size: 11px;\n  }\n\n  .frupex-hero__signature {\n    margin-top: 25px;\n  }\n\n  .frupex-hero__meta,\n  .frupex-scroll-indicator {\n    display: none;\n  }\n}\n\n@media (max-width: 430px) {\n\n  .frupex-hero .frupex-btn {\n    width: 100%;\n  }\n\n  .frupex-hero .frupex-hero__title {\n    font-size: clamp(32px, 8.9vw, 39px);\n  }\n}\n\n\/* =====================================================\n   MOVIMIENTO REDUCIDO\n   ===================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frupex-hero *,\n  .frupex-hero *::before,\n  .frupex-hero *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .frupex-hero .title-line > span,\n  .frupex-hero .reveal-line,\n  .frupex-hero .reveal-copy,\n  .frupex-hero .reveal-actions,\n  .frupex-hero .reveal-signature,\n  .frupex-hero .reveal-meta {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n\n\/* =====================================================\n   OVERLAY INFERIOR GENERAL DEL HERO\n   ===================================================== *\/\n\n.frupex-hero::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 42%;\n\n  pointer-events: none;\n\n  background: linear-gradient(\n    to bottom,\n    rgba(7, 5, 3, 0) 0%,\n    rgba(7, 5, 3, .05) 20%,\n    rgba(7, 5, 3, .16) 45%,\n    rgba(7, 5, 3, .34) 72%,\n    rgba(7, 5, 3, .52) 100%\n  );\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  const hero = document.querySelector(\".frupex-hero\");\n  if (!hero || hero.dataset.frxInitialized === \"true\") return;\n\n  hero.dataset.frxInitialized = \"true\";\n\n  const reducedMotion = window.matchMedia(\n    \"(prefers-reduced-motion: reduce)\"\n  ).matches;\n\n  const titleLines = hero.querySelectorAll(\n    \".title-line > span\"\n  );\n\n  const kicker = hero.querySelector(\".reveal-line\");\n  const copy = hero.querySelector(\".reveal-copy\");\n  const actions = hero.querySelector(\".reveal-actions\");\n  const signature = hero.querySelector(\".reveal-signature\");\n  const meta = hero.querySelector(\".reveal-meta\");\n\n  const image = hero.querySelector(\".frupex-hero__image\");\n  const scrollLine = hero.querySelector(\n    \".frupex-scroll-indicator span\"\n  );\n\n  if (reducedMotion) return;\n\n  const animateIn = (element, delay = 0, y = 14) => {\n    if (!element || typeof element.animate !== \"function\") {\n      return;\n    }\n\n    element.animate(\n      [\n        {\n          opacity: 0,\n          transform: `translateY(${y}px)`\n        },\n        {\n          opacity: 1,\n          transform: \"translateY(0)\"\n        }\n      ],\n      {\n        duration: 850,\n        delay,\n        easing: \"cubic-bezier(.16,1,.3,1)\",\n        fill: \"both\"\n      }\n    );\n  };\n\n  const start = () => {\n\n    \/\/ Entrada escalonada del t\u00edtulo\n    titleLines.forEach((line, index) => {\n      if (typeof line.animate !== \"function\") return;\n\n      line.animate(\n        [\n          {\n            opacity: 0,\n            transform: \"translateY(105%)\"\n          },\n          {\n            opacity: 1,\n            transform: \"translateY(0)\"\n          }\n        ],\n        {\n          duration: 1000,\n          delay: 150 + index * 135,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    });\n\n    \/\/ Resto de los elementos\n    animateIn(kicker, 100, 12);\n    animateIn(copy, 425, 14);\n    animateIn(actions, 575, 14);\n    animateIn(signature, 710, 12);\n    animateIn(meta, 760, 10);\n\n    \/\/ L\u00ednea decorativa de scroll\n    if (\n      scrollLine &&\n      typeof scrollLine.animate === \"function\"\n    ) {\n      scrollLine.animate(\n        [\n          {\n            opacity: 0,\n            transform: \"translateY(-24px)\"\n          },\n          {\n            opacity: 1,\n            transform: \"translateY(55px)\"\n          }\n        ],\n        {\n          duration: 2100,\n          iterations: Infinity,\n          easing: \"cubic-bezier(.65,0,.35,1)\"\n        }\n      );\n    }\n  };\n\n  \/\/ Ejecutar entrada\n  requestAnimationFrame(start);\n\n  \/\/ Parallax m\u00ednimo y controlado.\n  \/\/ No cambia la altura de la secci\u00f3n.\n  if (image) {\n    let ticking = false;\n\n    const updateParallax = () => {\n      const rect = hero.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (rect.bottom > 0 && rect.top < viewportHeight) {\n        const progress = Math.max(\n          0,\n          Math.min(1, -rect.top \/ Math.max(rect.height, 1))\n        );\n\n        const scale = 1.035 + progress * 0.012;\n        const shift = progress * 8;\n\n        image.style.transform =\n          `scale(${scale}) translate3d(0, ${shift}px, 0)`;\n      }\n\n      ticking = false;\n    };\n\n    window.addEventListener(\n      \"scroll\",\n      () => {\n        if (ticking) return;\n\n        ticking = true;\n        requestAnimationFrame(updateParallax);\n      },\n      { passive: true }\n    );\n\n    updateParallax();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-hero\" id=\"inicio\">\n\n  <div class=\"frupex-hero__media\" aria-hidden=\"true\">\n    <div class=\"frupex-hero__image\"><\/div>\n    <div class=\"frupex-hero__veil\"><\/div>\n    <div class=\"frupex-hero__grain\"><\/div>\n  <\/div>\n\n  <div class=\"frupex-hero__inner\">\n\n    <div class=\"frupex-hero__content\">\n\n      <div class=\"frupex-kicker reveal-line\">\n        ECUADOR \u00b7 PREMIUM BANANA EXPORTERS\n      <\/div>\n\n      <h1 class=\"frupex-hero__title\" aria-label=\"Del origen al mundo\">\n        <span class=\"title-line\">\n          <span>Del <strong>origen<\/strong><\/span>\n        <\/span>\n        <span class=\"title-line\">\n          <span>al <strong>mundo<\/strong><span class=\"accent-dot\">.<\/span><\/span>\n        <\/span>\n      <\/h1>\n\n      <p class=\"frupex-hero__copy reveal-copy\">\n        Bananas ecuatorianas de clase mundial, cultivadas con responsabilidad\n        para llevar lo mejor de nuestra tierra a los mercados internacionales.\n      <\/p>\n\n      <div class=\"frupex-hero__actions reveal-actions\">\n\n        <a href=\"#producto\" class=\"frupex-btn frupex-btn--primary\">\n          <span>Conoce nuestro producto<\/span>\n\n<span class=\"frupex-btn__arrow\" aria-hidden=\"true\">\n    <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"><\/path>\n    <\/svg>\n<\/span>\n<\/a>\n\n        <a href=\"#historia\" class=\"frupex-btn frupex-btn--ghost\">\n          <span>Nuestra historia<\/span>\n        <\/a>\n\n      <\/div>\n\n      <div class=\"frupex-hero__signature reveal-signature\">\n        <span class=\"signature-mark\" aria-hidden=\"true\"><\/span>\n        <div>\n          <small>NUESTRA TIERRA<\/small>\n          <small>TU CONFIANZA<\/small>\n          <small>UN MUNDO M\u00c1S BRILLANTE<\/small>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n     <!-- PLACA INFERIOR DERECHA -->\n  <div class=\"frupex-hero__meta reveal-meta\">\n\n    <div class=\"frupex-hero__tagline\">\n      BANANAS QUE<br>\n      CONECTAN MUNDOS\n    <\/div>\n\n    <div class=\"frupex-location\">\n      <span>ECUADOR<\/span>\n      <strong>EL ORO<\/strong>\n    <\/div>\n\n<\/div><\/div><\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ================================================\n   FRUPEX \u2014 HOME \/ NUESTRA ESENCIA V3\n   Century Gothic \u00b7 Dise\u00f1o compacto\n   ================================================ *\/\n\n.frupex-essence,\n.frupex-essence * {\n  box-sizing: border-box;\n}\n\n.frupex-essence {\n  --fe-brown: #5F2610;\n  --fe-yellow: #F3CB00;\n  --fe-dark: #221109;\n  --fe-text: #6E625A;\n  --fe-cream: #F7F4EF;\n  --fe-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  isolation: isolate;\n\n  background: linear-gradient(\n    180deg,\n    #FAF8F4 0%,\n    #F7F4EF 100%\n  );\n\n  color: var(--fe-dark);\n  font-family: var(--fe-font);\n}\n\n\/* TIPOGRAF\u00cdA LOCAL *\/\n\n.frupex-essence h2,\n.frupex-essence p,\n.frupex-essence a,\n.frupex-essence span,\n.frupex-essence strong {\n  font-family: var(--fe-font);\n}\n\n.frupex-essence h2,\n.frupex-essence p {\n  text-transform: none;\n  text-align: left;\n  hyphens: none;\n  word-break: normal;\n}\n\n\/* CONTENEDOR *\/\n\n.frupex-essence__inner {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1fr)\n    minmax(0, 1.12fr);\n\n  align-items: center;\n  gap: clamp(35px, 5vw, 78px);\n\n  width: min(1260px, calc(100% - 10vw));\n  margin: 0 auto;\n  padding: 74px 0;\n}\n\n.frupex-essence__content,\n.frupex-essence__visual {\n  position: relative;\n  min-width: 0;\n}\n\n.frupex-essence__content {\n  z-index: 3;\n  max-width: 560px;\n}\n\n\/* ================================================\n   ETIQUETA SUPERIOR\n   ================================================ *\/\n\n.frupex-essence__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n\n  margin-bottom: 21px;\n\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .21em;\n  text-transform: uppercase;\n\n  color: var(--fe-brown);\n}\n\n\n\n\/* ================================================\n   T\u00cdTULO\n   ================================================ *\/\n\n.frupex-essence .frupex-essence__title {\n  max-width: 100%;\n  margin: 0 !important;\n  padding: 0;\n\n  font-size: clamp(34px, 3.3vw, 46px);\n  line-height: 1.24;\n  letter-spacing: -.035em;\n  font-weight: 400;\n\n  color: var(--fe-dark);\n  overflow-wrap: normal;\n}\n\n.frupex-essence__title-line {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  padding: .015em .045em .09em 0;\n}\n\n.frupex-essence__title-line > span {\n  display: block;\n  opacity: 1;\n  transform: none;\n}\n\n.frupex-essence__dot {\n  color: var(--fe-yellow);\n}\n\n\/* ================================================\n   TEXTO\n   ================================================ *\/\n\n.frupex-essence .frupex-essence__copy {\n  max-width: 490px;\n  margin: 23px 0 0 !important;\n\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 1.85;\n  letter-spacing: -.005em;\n\n  color: var(--fe-text);\n  text-wrap: pretty;\n  overflow-wrap: break-word;\n}\n\n\/* ================================================\n   ENLACE\n   ================================================ *\/\n\n.frupex-essence .frupex-essence__link {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n\n  margin-top: 27px;\n  padding-bottom: 10px;\n\n  color: var(--fe-brown) !important;\n\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1.5;\n  letter-spacing: 0;\n\n  text-decoration: none !important;\n}\n\n.frupex-essence__link::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 1px;\n\n  background: rgba(95,38,16,.30);\n}\n\n.frupex-essence__link::before {\n  content: \"\";\n  position: absolute;\n  z-index: 2;\n\n  left: 0;\n  bottom: 0;\n\n  width: 0;\n  height: 1px;\n\n  background: var(--fe-yellow);\n\n  transition: width .5s cubic-bezier(.16,1,.3,1);\n}\n\n.frupex-essence__link-arrow {\n  display: inline-block;\n  font-size: 18px;\n  transition: transform .45s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frupex-essence__link:hover::before {\n    width: 100%;\n  }\n\n  .frupex-essence__link:hover\n  .frupex-essence__link-arrow {\n    transform: translateX(6px);\n  }\n}\n\n\/* ================================================\n   FOTOGRAF\u00cdA\n   ================================================ *\/\n\n.frupex-essence__visual {\n  width: 100%;\n}\n\n.frupex-essence__image-shell {\n  position: relative;\n  isolation: isolate;\n\n  width: 100%;\n  aspect-ratio: 1.62 \/ 1;\n\n  overflow: hidden;\n  border-radius: 12px;\n\n  background: #D5CEBE;\n\n  box-shadow: 0 18px 45px rgba(54,30,18,.09);\n}\n\n.frupex-essence__image-reveal {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.frupex-essence__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center center;\n\n  transform: scale(1.015);\n  transition: transform 1.2s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frupex-essence__image-shell:hover\n  .frupex-essence__image {\n    transform: scale(1.055);\n  }\n}\n\n\/* SOMBRA INTERNA *\/\n\n.frupex-essence__image-shade {\n  position: absolute;\n  z-index: 2;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(12,8,5,.50),\n      rgba(12,8,5,.18) 45%,\n      transparent 80%\n    ),\n    linear-gradient(\n      180deg,\n      transparent 45%,\n      rgba(12,8,5,.20) 100%\n    );\n}\n\n\/* ================================================\n   TEXTO SOBRE FOTOGRAF\u00cdA\n   ================================================ *\/\n\n.frupex-essence__badge {\n  position: absolute;\n  z-index: 3;\n\n  left: clamp(22px, 3vw, 42px);\n  bottom: clamp(22px, 3vw, 38px);\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n\n  color: #FFFFFF;\n  text-shadow: 0 3px 16px rgba(0,0,0,.30);\n}\n\n.frupex-essence__badge span {\n  display: block;\n  margin-bottom: 10px;\n\n  font-size: 10px;\n  line-height: 1.2;\n  letter-spacing: .18em;\n  font-weight: 700;\n\n  color: var(--fe-yellow);\n}\n\n.frupex-essence__badge strong {\n  display: block;\n\n  font-size: clamp(18px, 1.75vw, 25px);\n  line-height: 1.25;\n  letter-spacing: .025em;\n  font-weight: 700;\n\n  color: #FFFFFF;\n}\n\n\n\/* ================================================\n   DECORACI\u00d3N\n   ================================================ *\/\n\n.frupex-essence::before {\n  content: \"\";\n\n  position: absolute;\n  right: -190px;\n  top: -190px;\n\n  width: 350px;\n  height: 350px;\n\n  border-radius: 50%;\n  pointer-events: none;\n\n  background: radial-gradient(\n    circle,\n    rgba(243,203,0,.05),\n    transparent 70%\n  );\n}\n\n\/* ================================================\n   TABLET\n   ================================================ *\/\n\n@media (max-width: 1050px) {\n\n  .frupex-essence__inner {\n    width: calc(100% - 64px);\n    gap: 35px;\n    padding: 65px 0;\n  }\n\n  .frupex-essence .frupex-essence__title {\n    font-size: clamp(30px, 3.5vw, 38px);\n  }\n\n  .frupex-essence .frupex-essence__copy {\n    font-size: 14px;\n    line-height: 1.75;\n  }\n\n  .frupex-essence__image-shell {\n    aspect-ratio: 1.35 \/ 1;\n  }\n}\n\n\/* ================================================\n   M\u00d3VIL\n   ================================================ *\/\n\n@media (max-width: 767px) {\n\n  .frupex-essence__inner {\n    width: calc(100% - 38px);\n\n    grid-template-columns: 1fr;\n    gap: 30px;\n\n    padding: 57px 0 62px;\n  }\n\n  .frupex-essence__content {\n    max-width: none;\n  }\n\n  .frupex-essence__eyebrow {\n    margin-bottom: 17px;\n    font-size: 9px;\n    letter-spacing: .18em;\n  }\n\n  .frupex-essence__eyebrow i {\n    width: 35px;\n    flex-basis: 35px;\n  }\n\n  .frupex-essence .frupex-essence__title {\n    font-size: clamp(29px, 7.3vw, 38px);\n    line-height: 1.22;\n    letter-spacing: -.04em;\n  }\n\n  .frupex-essence__title-line {\n    overflow: visible;\n  }\n\n  .frupex-essence .frupex-essence__copy {\n    max-width: 100%;\n    margin-top: 17px !important;\n\n    font-size: 13.5px;\n    line-height: 1.75;\n  }\n\n  .frupex-essence .frupex-essence__link {\n    margin-top: 22px;\n    font-size: 12px;\n  }\n\n  .frupex-essence__image-shell {\n    aspect-ratio: 1.45 \/ 1;\n    border-radius: 10px;\n  }\n\n  .frupex-essence__badge {\n    left: 20px;\n    bottom: 19px;\n  }\n\n  .frupex-essence__badge strong {\n    font-size: 18px;\n  }\n}\n\n\/* ================================================\n   MOVIMIENTO REDUCIDO\n   ================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frupex-essence *,\n  .frupex-essence *::before,\n  .frupex-essence *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .frupex-essence__title-line > span,\n  .frupex-essence-reveal,\n  .frupex-essence__badge,\n  .frupex-essence__image-reveal {\n    opacity: 1 !important;\n    transform: none !important;\n    clip-path: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexEssence() {\n    const section = document.querySelector(\".frupex-essence\");\n\n    if (\n      !section ||\n      section.dataset.frupexEssenceReady === \"true\"\n    ) return;\n\n    section.dataset.frupexEssenceReady = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      !(\"IntersectionObserver\" in window) ||\n      typeof Element.prototype.animate !== \"function\"\n    ) return;\n\n    const titleLines = section.querySelectorAll(\n      \".frupex-essence__title-line > span\"\n    );\n\n    const eyebrow = section.querySelector(\n      \".frupex-essence__eyebrow\"\n    );\n\n    const copy = section.querySelector(\n      \".frupex-essence__copy\"\n    );\n\n    const link = section.querySelector(\n      \".frupex-essence__link\"\n    );\n\n    const imageReveal = section.querySelector(\n      \".frupex-essence__image-reveal\"\n    );\n\n    const image = section.querySelector(\n      \".frupex-essence__image\"\n    );\n\n    const badge = section.querySelector(\n      \".frupex-essence__badge\"\n    );\n\n    function animateElement(\n      element,\n      delay = 0,\n      x = 0,\n      y = 18\n    ) {\n      if (!element) return;\n\n      element.animate(\n        [\n          {\n            opacity: 0,\n            transform: `translate(${x}px, ${y}px)`\n          },\n          {\n            opacity: 1,\n            transform: \"translate(0, 0)\"\n          }\n        ],\n        {\n          duration: 800,\n          delay,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    }\n\n    function playAnimations() {\n      animateElement(eyebrow, 0, 0, 12);\n\n      titleLines.forEach((line, index) => {\n        line.animate(\n          [\n            {\n              opacity: 0,\n              transform: \"translateY(75%)\"\n            },\n            {\n              opacity: 1,\n              transform: \"translateY(0)\"\n            }\n          ],\n          {\n            duration: 950,\n            delay: 100 + index * 140,\n            easing: \"cubic-bezier(.16,1,.3,1)\",\n            fill: \"both\"\n          }\n        );\n      });\n\n      animateElement(copy, 290, 0, 16);\n      animateElement(link, 420, 0, 14);\n\n      if (imageReveal) {\n        imageReveal.animate(\n          [\n            {\n              clipPath: \"inset(0 100% 0 0)\"\n            },\n            {\n              clipPath: \"inset(0 0 0 0)\"\n            }\n          ],\n          {\n            duration: 1100,\n            delay: 100,\n            easing: \"cubic-bezier(.16,1,.3,1)\",\n            fill: \"both\"\n          }\n        );\n      }\n\n      if (image) {\n        image.animate(\n          [\n            { transform: \"scale(1.08)\" },\n            { transform: \"scale(1.015)\" }\n          ],\n          {\n            duration: 1200,\n            delay: 100,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      animateElement(badge, 620, -15, 0);\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) return;\n\n          playAnimations();\n          observer.disconnect();\n        });\n      },\n      {\n        threshold: 0.1,\n        rootMargin: \"0px 0px -30px 0px\"\n      }\n    );\n\n    observer.observe(section);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexEssence,\n      { once: true }\n    );\n  } else {\n    initFrupexEssence();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-essence\" id=\"historia\">\n  <div class=\"frupex-essence__inner\">\n\n    <!-- CONTENIDO -->\n    <div class=\"frupex-essence__content\">\n\n      <div class=\"frupex-essence__eyebrow frupex-essence-reveal\">\n        <span>NUESTRA ESENCIA<\/span>\n        <i aria-hidden=\"true\"><\/i>\n      <\/div>\n\n      <h2 class=\"frupex-essence__title\" aria-label=\"Cultivamos m\u00e1s que banano\">\n        <span class=\"frupex-essence__title-line\">\n          <span>Cultivamos m\u00e1s<\/span>\n        <\/span>\n        <span class=\"frupex-essence__title-line\">\n          <span>que <strong>banano<\/strong><span class=\"frupex-essence__dot\">.<\/span><\/span>\n        <\/span>\n      <\/h2>\n\n      <p class=\"frupex-essence__copy frupex-essence-reveal\">\n        En Frupex creemos en el poder de nuestra tierra,\n        en la gente que la hace posible y en un futuro con\n        m\u00e1s oportunidades. Exportamos calidad, confianza\n        y el esfuerzo de todo un pa\u00eds.\n      <\/p>\n\n      <a href=\"\/nosotros\/\" class=\"frupex-essence__link frupex-essence-reveal\">\n        <span class=\"frupex-essence__link-text\">\n          Conoce nuestra historia\n        <\/span>\n       <span class=\"frupex-btn__arrow\" aria-hidden=\"true\">\n    <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n    <\/svg>\n<\/span>\n<\/a>\n    <\/div>\n\n    <!-- FOTOGRAF\u00cdA -->\n    <div class=\"frupex-essence__visual\">\n\n      <div class=\"frupex-essence__image-shell\">\n\n        <div class=\"frupex-essence__image-reveal\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Racimo-de-bananas-verdes-en-plantacion.png\" alt=\"Selecci\u00f3n de banano verde de exportaci\u00f3n FRUPEX\" class=\"frupex-essence__image\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"frupex-essence__image-shade\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"frupex-essence__badge\">\n          <span>CALIDAD<\/span>\n          <strong>\n            QUE LLEGA<br>\n            M\u00c1S LEJOS\n          <\/strong>\n          <i aria-hidden=\"true\"><\/i>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ================================================\n   FRUPEX \u2014 HOME \/ PRODUCTO V3\n   Century Gothic \u00b7 Editorial compacto\n   ================================================ *\/\n\n.frupex-product,\n.frupex-product * {\n  box-sizing: border-box;\n}\n\n.frupex-product {\n  --fp-yellow: #F3CB00;\n  --fp-brown: #5F2610;\n  --fp-dark: #221109;\n  --fp-text: #6E625A;\n  --fp-cream: #F7F4EF;\n  --fp-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  isolation: isolate;\n\n  background: var(--fp-cream);\n  color: var(--fp-dark);\n  font-family: var(--fp-font);\n}\n\n.frupex-product h2,\n.frupex-product h3,\n.frupex-product p,\n.frupex-product span {\n  font-family: var(--fp-font);\n}\n\n.frupex-product h2,\n.frupex-product h3 {\n  text-transform: none;\n  text-align: left;\n  word-break: normal;\n  hyphens: none;\n}\n\n\/* ================================================\n   CONTENEDOR\n   ================================================ *\/\n\n.frupex-product__inner {\n  display: grid;\n  grid-template-columns:\n    minmax(0, .9fr)\n    minmax(0, 1.1fr);\n\n  align-items: stretch;\n  width: 100%;\n  min-height: 520px;\n}\n\n\/* ================================================\n   FOTOGRAF\u00cdA\n   ================================================ *\/\n\n.frupex-product__visual {\n  position: relative;\n  min-width: 0;\n  min-height: 420px;\n}\n\n.frupex-product__image-mask {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n\n  background: #CCC3A9;\n}\n\n.frupex-product__image {\n  position: absolute;\n  inset: 0;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: 48% center;\n\n  transform: scale(1.025);\n\n  transition:\n    transform 1.2s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frupex-product__visual:hover\n  .frupex-product__image {\n    transform: scale(1.065);\n  }\n}\n\n\/* FUSI\u00d3N CON EL FONDO *\/\n\n.frupex-product__photo-blend {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent 48%,\n      rgba(247,244,239,.12) 65%,\n      rgba(247,244,239,.58) 83%,\n      #F7F4EF 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(247,244,239,.10) 0%,\n      transparent 20%,\n      transparent 80%,\n      rgba(247,244,239,.17) 100%\n    );\n}\n\n\/* ================================================\n   CONTENIDO\n   ================================================ *\/\n\n.frupex-product__content {\n  position: relative;\n  z-index: 3;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  min-width: 0;\n  padding:\n    60px\n    clamp(35px, 6vw, 90px)\n    60px\n    clamp(8px, 1.7vw, 28px);\n}\n\n\/* ETIQUETA *\/\n\n.frupex-product__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n\n  margin-bottom: 20px;\n\n  font-size: 10px;\n  line-height: 1.4;\n  font-weight: 700;\n  letter-spacing: .22em;\n  text-transform: uppercase;\n\n  color: var(--fp-brown);\n}\n\n\n\n\/* ================================================\n   T\u00cdTULO\n   ================================================ *\/\n\n.frupex-product__title-mask {\n  overflow: visible;\n}\n\n.frupex-product .frupex-product__title {\n  max-width: 620px;\n\n  margin: 0 !important;\n  padding: 0;\n\n  font-size: clamp(32px, 3vw, 43px);\n  font-weight: 400;\n  line-height: 1.25;\n  letter-spacing: -.035em;\n\n  color: var(--fp-dark);\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n.frupex-product__title span {\n  color: var(--fp-yellow);\n}\n\n\/* INTRO *\/\n\n.frupex-product .frupex-product__intro {\n  max-width: 490px;\n\n  margin: 17px 0 0 !important;\n\n  font-size: 15px;\n  line-height: 1.75;\n  font-weight: 400;\n\n  color: var(--fp-text);\n}\n\n\/* ================================================\n   ATRIBUTOS \u2014 RET\u00cdCULA 2 \u00d7 2\n   ================================================ *\/\n\n.frupex-product__features {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n\n  column-gap: 30px;\n  row-gap: 27px;\n\n  width: 100%;\n  max-width: 580px;\n\n  margin-top: 35px;\n}\n\n.frupex-product__feature {\n  position: relative;\n  min-width: 0;\n\n  margin: 0 !important;\n  padding: 0 0 0 15px !important;\n\n  border-left: 1px solid rgba(95,38,16,.20);\n}\n\n.frupex-product__feature-inner {\n  position: relative;\n  min-width: 0;\n}\n\n.frupex-product__number {\n  display: block;\n  margin-bottom: 9px;\n\n  color: var(--fp-brown);\n\n  font-size: 10px;\n  line-height: 1.3;\n  font-weight: 700;\n  letter-spacing: .11em;\n}\n\n.frupex-product .frupex-product__feature h3 {\n  margin: 0 !important;\n  padding: 0;\n\n  color: var(--fp-dark);\n\n  font-size: clamp(17px, 1.4vw, 20px);\n  line-height: 1.35;\n  font-weight: 700;\n  letter-spacing: -.015em;\n}\n\n.frupex-product .frupex-product__feature p {\n  max-width: 230px;\n  margin: 9px 0 0 !important;\n\n  color: var(--fp-text);\n\n  font-size: 12.5px;\n  line-height: 1.65;\n  font-weight: 400;\n\n  overflow-wrap: break-word;\n}\n\n\/* INTERACCI\u00d3N SUTIL *\/\n\n.frupex-product__feature::after {\n  content: \"\";\n  position: absolute;\n\n  left: -1px;\n  top: 0;\n\n  width: 2px;\n  height: 0;\n\n  background: var(--fp-yellow);\n\n  transition: height .55s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frupex-product__feature:hover::after {\n    height: 100%;\n  }\n}\n\n\/* ================================================\n   DESTELLO EDITORIAL\n   ================================================ *\/\n\n.frupex-product__sweep {\n  position: absolute;\n  z-index: 5;\n\n  top: 0;\n  bottom: 0;\n  left: -40%;\n\n  width: 20%;\n  pointer-events: none;\n  opacity: 0;\n\n  background: linear-gradient(\n    90deg,\n    transparent,\n    rgba(255,255,255,.12),\n    transparent\n  );\n\n  transform: skewX(-17deg);\n}\n\n\/* ================================================\n   TABLET\n   ================================================ *\/\n\n@media (max-width: 1100px) {\n\n  .frupex-product__inner {\n    grid-template-columns:\n      minmax(0, .82fr)\n      minmax(0, 1.18fr);\n  }\n\n  .frupex-product__content {\n    padding: 51px 35px 53px 8px;\n  }\n\n  .frupex-product .frupex-product__title {\n    font-size: clamp(29px, 3.45vw, 38px);\n  }\n\n  .frupex-product__features {\n    column-gap: 18px;\n  }\n}\n\n\/* ================================================\n   M\u00d3VIL\n   ================================================ *\/\n\n@media (max-width: 767px) {\n\n  .frupex-product__inner {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .frupex-product__visual {\n    width: 100%;\n    height: clamp(225px, 65vw, 310px);\n    min-height: 0;\n    flex: none;\n  }\n\n  .frupex-product__image {\n    object-position: center 43%;\n  }\n\n  .frupex-product__photo-blend {\n    background: linear-gradient(\n      0deg,\n      #F7F4EF 0%,\n      rgba(247,244,239,.83) 9%,\n      rgba(247,244,239,.30) 22%,\n      transparent 45%\n    );\n  }\n\n  .frupex-product__content {\n    padding:\n      16px\n      19px\n      65px;\n  }\n\n  .frupex-product__eyebrow {\n    margin-bottom: 17px;\n    font-size: 9px;\n    letter-spacing: .18em;\n  }\n\n  .frupex-product .frupex-product__title {\n    font-size: clamp(29px, 7.3vw, 38px);\n    line-height: 1.25;\n  }\n\n  .frupex-product .frupex-product__intro {\n    margin-top: 15px !important;\n    font-size: 13.5px;\n    line-height: 1.75;\n  }\n\n  .frupex-product__features {\n    margin-top: 29px;\n    gap: 26px 16px;\n  }\n\n  .frupex-product .frupex-product__feature h3 {\n    font-size: 16px;\n  }\n\n  .frupex-product .frupex-product__feature p {\n    font-size: 12px;\n  }\n}\n\n@media (max-width: 380px) {\n\n  .frupex-product__features {\n    grid-template-columns: 1fr;\n    gap: 22px;\n  }\n\n  .frupex-product__feature {\n    padding-left: 13px !important;\n  }\n}\n\n\/* ================================================\n   MOVIMIENTO REDUCIDO\n   ================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frupex-product *,\n  .frupex-product *::before,\n  .frupex-product *::after {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexProduct() {\n    const section = document.querySelector(\".frupex-product\");\n\n    if (!section || section.dataset.frxReady === \"true\") {\n      return;\n    }\n\n    section.dataset.frxReady = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      !(\"IntersectionObserver\" in window) ||\n      typeof Element.prototype.animate !== \"function\"\n    ) {\n      return;\n    }\n\n    const mask = section.querySelector(\n      \".frupex-product__image-mask\"\n    );\n\n    const photo = section.querySelector(\n      \".frupex-product__image\"\n    );\n\n    const eyebrow = section.querySelector(\n      \".frupex-product__eyebrow\"\n    );\n\n    const title = section.querySelector(\n      \".frupex-product__title\"\n    );\n\n    const intro = section.querySelector(\n      \".frupex-product__intro\"\n    );\n\n    const features = section.querySelectorAll(\n      \".frupex-product__feature\"\n    );\n\n    function reveal(element, delay = 0, distance = 17) {\n      if (!element) return;\n\n      element.animate(\n        [\n          {\n            opacity: 0,\n            transform: `translateY(${distance}px)`\n          },\n          {\n            opacity: 1,\n            transform: \"translateY(0)\"\n          }\n        ],\n        {\n          duration: 820,\n          delay,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    }\n\n    function playEntrance() {\n\n      \/\/ Revelado horizontal de la fotograf\u00eda\n      if (mask) {\n        mask.animate(\n          [\n            {\n              clipPath: \"inset(0 100% 0 0)\"\n            },\n            {\n              clipPath: \"inset(0 0 0 0)\"\n            }\n          ],\n          {\n            duration: 1050,\n            easing: \"cubic-bezier(.16,1,.3,1)\",\n            fill: \"both\"\n          }\n        );\n      }\n\n      \/\/ Acercamiento cinematogr\u00e1fico muy sutil\n      if (photo) {\n        photo.animate(\n          [\n            { transform: \"scale(1.085)\" },\n            { transform: \"scale(1.025)\" }\n          ],\n          {\n            duration: 1350,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      reveal(eyebrow, 100, 12);\n      reveal(title, 190, 20);\n      reveal(intro, 340, 17);\n\n      \/\/ Atributos en secuencia\n      features.forEach((feature, index) => {\n        reveal(feature, 470 + index * 95, 14);\n      });\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue;\n\n          playEntrance();\n          observer.disconnect();\n          break;\n        }\n      },\n      {\n        threshold: 0.08,\n        rootMargin: \"0px 0px -25px 0px\"\n      }\n    );\n\n    observer.observe(section);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexProduct,\n      { once: true }\n    );\n  } else {\n    initFrupexProduct();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-product\" id=\"producto\">\n\n  <div class=\"frupex-product__sweep\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"frupex-product__inner\">\n\n    <!-- FOTOGRAF\u00cdA -->\n    <div class=\"frupex-product__visual\">\n\n      <div class=\"frupex-product__image-mask\">\n\n        <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/11\/frupex_2.png\" alt=\"Banano Premium Ecuatoriano FRUPEX\" class=\"frupex-product__image\" loading=\"lazy\">\n\n        <div class=\"frupex-product__photo-blend\" aria-hidden=\"true\"><\/div>\n\n      <\/div>\n\n    <\/div>\n\n    <!-- CONTENIDO -->\n    <div class=\"frupex-product__content\">\n\n      <div class=\"frupex-product__eyebrow\">\n        <span>NUESTRO PRODUCTO<\/span>\n        <i aria-hidden=\"true\"><\/i>\n      <\/div>\n\n      <div class=\"frupex-product__title-mask\">\n        <h2 class=\"frupex-product__title\">\n          <strong>Banano Premium<\/strong> Ecuatoriano<span>.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"frupex-product__intro\">\n        Un producto de clase mundial, reconocido por su sabor,\n        textura y calidad.\n      <\/p>\n\n      <!-- ATRIBUTOS -->\n      <div class=\"frupex-product__features\">\n\n        <article class=\"frupex-product__feature\">\n          <div class=\"frupex-product__feature-inner\">\n            <span class=\"frupex-product__number\">01<\/span>\n            <h3>Origen<\/h3>\n            <p>Machala, El Oro<br>Ecuador.<\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"frupex-product__feature\">\n          <div class=\"frupex-product__feature-inner\">\n            <span class=\"frupex-product__number\">02<\/span>\n            <h3>Selecci\u00f3n<\/h3>\n            <p>\n              Frutas seleccionadas con\n              los m\u00e1s altos est\u00e1ndares.\n            <\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"frupex-product__feature\">\n          <div class=\"frupex-product__feature-inner\">\n            <span class=\"frupex-product__number\">03<\/span>\n            <h3>Trazabilidad<\/h3>\n            <p>\n              Del campo al destino\n              con total transparencia.\n            <\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"frupex-product__feature\">\n          <div class=\"frupex-product__feature-inner\">\n            <span class=\"frupex-product__number\">04<\/span>\n            <h3>Mercados<\/h3>\n            <p>\n              Presentes en los principales\n              mercados internacionales.\n            <\/p>\n          <\/div>\n        <\/article>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ===================================================\n   FRUPEX \u2014 \u00bfPOR QU\u00c9 FRUPEX? V3\n   Century Gothic \u00b7 Premium compacto\n   =================================================== *\/\n\n.frupex-why,\n.frupex-why * {\n  box-sizing: border-box;\n}\n\n.frupex-why {\n  --fw-yellow: #F3CB00;\n  --fw-brown: #5F2610;\n  --fw-white: #FFFDF8;\n  --fw-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  --mx: 72%;\n  --my: 48%;\n\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n\n  width: 100%;\n\n  background:\n    radial-gradient(\n      circle at 12% 15%,\n      rgba(255,180,80,.07),\n      transparent 35%\n    ),\n    linear-gradient(\n      120deg,\n      #441909 0%,\n      #5F2610 54%,\n      #65280F 100%\n    );\n\n  color: var(--fw-white);\n  font-family: var(--fw-font);\n}\n\n.frupex-why h2,\n.frupex-why h3,\n.frupex-why p,\n.frupex-why span {\n  font-family: var(--fw-font);\n}\n\n\/* ===================================================\n   FONDO Y BRILLO\n   =================================================== *\/\n\n.frupex-why__bg {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,.012),\n      transparent 25%,\n      transparent 75%,\n      rgba(0,0,0,.045)\n    );\n}\n\n.frupex-why__glow {\n  position: absolute;\n  z-index: 0;\n\n  left: var(--mx);\n  top: var(--my);\n\n  width: 390px;\n  height: 390px;\n\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n\n  pointer-events: none;\n  opacity: .5;\n\n  background: radial-gradient(\n    circle,\n    rgba(243,203,0,.11) 0%,\n    rgba(243,203,0,.04) 35%,\n    transparent 72%\n  );\n\n  filter: blur(24px);\n\n  transition:\n    left .22s ease-out,\n    top .22s ease-out;\n}\n\n\/* ===================================================\n   CONTENEDOR PRINCIPAL\n   =================================================== *\/\n\n.frupex-why__container {\n  position: relative;\n  z-index: 2;\n\n  width: min(1320px, calc(100% - 10vw));\n  margin: 0 auto;\n\n  display: grid;\n  grid-template-columns:\n    minmax(205px, 250px)\n    minmax(0, 1fr);\n\n  gap: clamp(30px, 4vw, 65px);\n  align-items: center;\n\n  padding: 64px 0;\n}\n\n\/* ===================================================\n   INTRODUCCI\u00d3N\n   =================================================== *\/\n\n.frupex-why__intro {\n  position: relative;\n  min-width: 0;\n}\n\n.frupex-why__eyebrow {\n  display: block;\n  margin-bottom: 18px;\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.5;\n  letter-spacing: .20em;\n\n  color: rgba(255,248,240,.75);\n}\n\n.frupex-why .frupex-why__title {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 5px;\n\n  margin: 0 !important;\n  padding: 0;\n\n  color: var(--fw-white);\n\n  font-size: clamp(29px, 2.9vw, 42px);\n  font-weight: 400;\n  line-height: 1.19;\n  letter-spacing: -.035em;\n\n  text-align: left;\n  text-transform: none;\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n.frupex-why__title > span {\n  display: block;\n  white-space: nowrap;\n}\n\n.frupex-why__dot {\n  color: var(--fw-yellow);\n}\n\/* ===================================================\n   LOGO EN T\u00cdTULO \u00bfPOR QU\u00c9 FRUPEX?\n   =================================================== *\/\n\n.frupex-why__brand-line {\n  display: flex !important;\n  align-items: center;\n  gap: 9px;\n\n  width: auto;\n  max-width: 100%;\n}\n\n.frupex-why__logo {\n  display: block;\n\n  width: 168px;\n  max-width: 100%;\n  height: auto;\n\n  object-fit: contain;\n}\n\n.frupex-why__brand-line .frupex-why__dot {\n  display: inline-block;\n\n  color: #F3CB00;\n\n  font-size: 40px;\n  font-weight: 400;\n  line-height: 1;\n\n  transform: translateY(-1px);\n}\n\n\/* ===================================================\n   CUATRO PILARES\n   =================================================== *\/\n\n.frupex-why__grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  align-items: stretch;\n\n  min-width: 0;\n}\n\n.frupex-why__item {\n  position: relative;\n  min-width: 0;\n  min-height: 188px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  padding: 18px 13px;\n\n  text-align: center;\n\n  transition: transform .45s cubic-bezier(.16,1,.3,1);\n}\n\n\/* SEPARADORES *\/\n\n.frupex-why__divider {\n  position: absolute;\n\n  left: 0;\n  top: 50%;\n\n  width: 1px;\n  height: 68%;\n\n  transform: translateY(-50%);\n\n  background: linear-gradient(\n    180deg,\n    transparent,\n    rgba(255,255,255,.18) 22%,\n    rgba(255,255,255,.18) 78%,\n    transparent\n  );\n\n  pointer-events: none;\n}\n\n.frupex-why__item:first-child .frupex-why__divider {\n  display: none;\n}\n\n\/* ===================================================\n   ICONOS\n   =================================================== *\/\n\n.frupex-why__icon {\n  position: relative;\n\n  width: 59px;\n  height: 59px;\n\n  display: grid;\n  place-items: center;\n\n  margin-bottom: 17px;\n  border-radius: 50%;\n\n  transition:\n    transform .5s cubic-bezier(.16,1,.3,1);\n}\n\n.frupex-why__icon::before {\n  content: \"\";\n\n  position: absolute;\n  inset: 2px;\n\n  border-radius: 50%;\n\n  opacity: 0;\n  transform: scale(.75);\n\n  background: radial-gradient(\n    circle,\n    rgba(243,203,0,.14),\n    transparent 72%\n  );\n\n  transition:\n    opacity .4s ease,\n    transform .5s cubic-bezier(.16,1,.3,1);\n}\n\n.frupex-why__icon svg {\n  position: relative;\n  z-index: 1;\n\n  width: 36px;\n  height: 36px;\n\n  fill: none;\n\n  stroke: rgba(255,248,240,.92);\n  stroke-width: 1.8;\n\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  transition:\n    stroke .35s ease,\n    transform .45s cubic-bezier(.16,1,.3,1);\n}\n\n\/* ===================================================\n   T\u00cdTULOS DE LOS PILARES\n   =================================================== *\/\n\n.frupex-why .frupex-why__item h3 {\n  margin: 0 0 11px !important;\n  padding: 0;\n\n  color: #FFFFFF;\n\n  font-size: clamp(11px, 1vw, 13px);\n  font-weight: 700;\n  line-height: 1.45;\n  letter-spacing: .045em;\n\n  text-align: center;\n  text-transform: uppercase;\n\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n\/* DESCRIPCIONES *\/\n\n.frupex-why .frupex-why__item p {\n  max-width: 175px;\n  margin: 0 !important;\n  padding: 0;\n\n  color: rgba(255,248,240,.78);\n\n  font-size: 12px;\n  line-height: 1.7;\n  font-weight: 400;\n\n  text-align: center;\n  text-wrap: pretty;\n  overflow-wrap: break-word;\n}\n\n\/* ===================================================\n   HOVER ELEGANTE\n   =================================================== *\/\n\n@media (hover: hover) {\n\n  .frupex-why__item:hover {\n    transform: translateY(-4px);\n  }\n\n  .frupex-why__item:hover .frupex-why__icon {\n    transform: translateY(-3px);\n  }\n\n  .frupex-why__item:hover .frupex-why__icon::before {\n    opacity: 1;\n    transform: scale(1.1);\n  }\n\n  .frupex-why__item:hover .frupex-why__icon svg {\n    stroke: var(--fw-yellow);\n    transform: scale(1.065);\n  }\n\n  .frupex-why__item:hover h3 {\n    color: var(--fw-yellow);\n  }\n}\n\n\/* ===================================================\n   ANIMACI\u00d3N DE ENTRADA\n   El contenido es visible si JavaScript falla.\n   =================================================== *\/\n\n.frupex-why .reveal-item {\n  opacity: 1;\n  transform: none;\n}\n\n.frupex-why.is-motion-ready:not(.is-visible)\n.reveal-item {\n  opacity: 0;\n  transform: translateY(21px);\n}\n\n.frupex-why.is-motion-ready .reveal-item {\n  transition:\n    opacity .85s cubic-bezier(.16,1,.3,1),\n    transform .85s cubic-bezier(.16,1,.3,1);\n\n  transition-delay: var(--delay, 0s);\n}\n\n.frupex-why.is-motion-ready.is-visible\n.reveal-item {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* ===================================================\n   TABLET\n   =================================================== *\/\n\n@media (max-width: 1100px) {\n\n  .frupex-why__container {\n    grid-template-columns: 1fr;\n\n    width: calc(100% - 64px);\n    gap: 29px;\n    padding: 55px 0;\n  }\n\n  .frupex-why__intro {\n    max-width: 470px;\n  }\n\n  .frupex-why .frupex-why__title {\n    font-size: clamp(32px, 4.5vw, 42px);\n  }\n\n  .frupex-why__grid {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n}\n\n\/* ===================================================\n   M\u00d3VIL\n   =================================================== *\/\n\n@media (max-width: 767px) {\n\n  .frupex-why__container {\n    width: calc(100% - 38px);\n    padding: 52px 0 56px;\n    gap: 22px;\n  }\n\n  .frupex-why__eyebrow {\n    margin-bottom: 15px;\n    font-size: 9px;\n  }\n\n  .frupex-why .frupex-why__title {\n    font-size: clamp(31px, 8vw, 39px);\n    gap: 3px;\n  }\n\n  .frupex-why__accent-line {\n    margin-top: 19px;\n  }\n\n  .frupex-why__grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .frupex-why__item {\n    min-height: 171px;\n    padding: 20px 12px;\n  }\n\n  .frupex-why__item:nth-child(3),\n  .frupex-why__item:nth-child(4) {\n    border-top: 1px solid rgba(255,255,255,.12);\n  }\n\n  .frupex-why__item:nth-child(3)\n  .frupex-why__divider {\n    display: none;\n  }\n\n  .frupex-why__icon {\n    width: 53px;\n    height: 53px;\n    margin-bottom: 10px;\n  }\n\n  .frupex-why__icon svg {\n    width: 32px;\n    height: 32px;\n  }\n\n  .frupex-why .frupex-why__item h3 {\n    font-size: 11px;\n    margin-bottom: 7px !important;\n  }\n\n  .frupex-why .frupex-why__item p {\n    font-size: 11.5px;\n    line-height: 1.6;\n  }\n\n  .frupex-why__glow {\n    width: 280px;\n    height: 280px;\n  }\n}\n\n.frupex-why__logo {\n  width: 145px;\n}\n\n.frupex-why__brand-line .frupex-why__dot {\n  font-size: 35px;\n}\n\/* ===================================================\n   PANTALLAS MUY PEQUE\u00d1AS\n   =================================================== *\/\n\n@media (max-width: 350px) {\n\n  .frupex-why__item {\n    padding-left: 7px;\n    padding-right: 7px;\n  }\n\n  .frupex-why .frupex-why__item h3 {\n    font-size: 10px;\n    letter-spacing: 0;\n  }\n}\n\n\/* ===================================================\n   ACCESIBILIDAD\n   =================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frupex-why *,\n  .frupex-why *::before,\n  .frupex-why *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .frupex-why .reveal-item {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n\n  .frupex-why__glow {\n    display: none;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexWhy() {\n    const section = document.querySelector(\".frupex-why\");\n\n    if (!section || section.dataset.frxInitialized === \"true\") {\n      return;\n    }\n\n    section.dataset.frxInitialized = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    \/\/ ENTRADA AL HACER SCROLL\n\n    if (\n      !reducedMotion &&\n      \"IntersectionObserver\" in window\n    ) {\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (!entry.isIntersecting) return;\n\n            section.classList.add(\"is-visible\");\n            observer.disconnect();\n          });\n        },\n        {\n          threshold: 0.08,\n          rootMargin: \"0px 0px 20px 0px\"\n        }\n      );\n\n      \/\/ Activamos los estados solo con JS disponible\n      section.classList.add(\"is-motion-ready\");\n      observer.observe(section);\n\n      \/\/ Fallback: no dejar contenido oculto\n      setTimeout(() => {\n        section.classList.add(\"is-visible\");\n      }, 3500);\n    } else {\n      section.classList.add(\"is-visible\");\n    }\n\n    \/\/ BRILLO DIN\u00c1MICO CON EL CURSOR\n\n    const supportsHover = window.matchMedia(\n      \"(hover: hover) and (pointer: fine)\"\n    ).matches;\n\n    if (reducedMotion || !supportsHover) return;\n\n    let ticking = false;\n    let mouseX = 72;\n    let mouseY = 48;\n\n    section.addEventListener(\n      \"pointermove\",\n      (event) => {\n        const rect = section.getBoundingClientRect();\n\n        mouseX = (\n          (event.clientX - rect.left) \/ rect.width\n        ) * 100;\n\n        mouseY = (\n          (event.clientY - rect.top) \/ rect.height\n        ) * 100;\n\n        if (ticking) return;\n\n        ticking = true;\n\n        requestAnimationFrame(() => {\n          section.style.setProperty(\n            \"--mx\",\n            mouseX.toFixed(1) + \"%\"\n          );\n\n          section.style.setProperty(\n            \"--my\",\n            mouseY.toFixed(1) + \"%\"\n          );\n\n          ticking = false;\n        });\n      },\n      { passive: true }\n    );\n\n    section.addEventListener(\"pointerleave\", () => {\n      section.style.setProperty(\"--mx\", \"72%\");\n      section.style.setProperty(\"--my\", \"48%\");\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexWhy,\n      { once: true }\n    );\n  } else {\n    initFrupexWhy();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-why\" id=\"frupex-why\">\n\n  <div class=\"frupex-why__bg\" aria-hidden=\"true\"><\/div>\n  <div class=\"frupex-why__glow\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"frupex-why__container\">\n\n    <!-- T\u00cdTULO -->\n    <div class=\"frupex-why__intro reveal-item\">\n\n      <span class=\"frupex-why__eyebrow\">\n        NUESTRA DIFERENCIA\n      <\/span>\n\n    <h2 class=\"frupex-why__title\">\n  <span>\u00bfPor qu\u00e9<\/span>\n\n  <span class=\"frupex-why__brand-line\">\n    <img decoding=\"async\" class=\"frupex-why__logo\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/09\/cropped-LOGO-HERO-8.png\" alt=\"FRUPEX\">\n    <span class=\"frupex-why__dot\">?<\/span>\n  <\/span>\n<\/h2>\n\n      <span class=\"frupex-why__accent-line\" aria-hidden=\"true\"><\/span>\n\n    <\/div>\n\n    <!-- PILARES -->\n    <div class=\"frupex-why__grid\">\n\n      <article class=\"frupex-why__item reveal-item\" style=\"--delay: .08s;\">\n\n        <span class=\"frupex-why__divider\" aria-hidden=\"true\"><\/span>\n\n        <div class=\"frupex-why__icon\">\n          <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n            <path d=\"M18 38c8-18 18-24 28-24-2 10-8 20-24 28-4 2-8 4-12 4 0-4 2-6 8-8z\"><\/path>\n            <path d=\"M18 38c6 0 12 4 16 10\"><\/path>\n          <\/svg>\n        <\/div>\n\n        <h3>CALIDAD<\/h3>\n        <p>Frutas excepcionales que inspiran confianza.<\/p>\n      <\/article>\n\n      <article class=\"frupex-why__item reveal-item\" style=\"--delay: .16s;\">\n\n        <span class=\"frupex-why__divider\" aria-hidden=\"true\"><\/span>\n\n        <div class=\"frupex-why__icon\">\n          <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n            <path d=\"M22 28a8 8 0 1 0 0-16 8 8 0 0 0 0 16z\"><\/path>\n            <path d=\"M42 30a7 7 0 1 0 0-14 7 7 0 0 0 0 14z\"><\/path>\n            <path d=\"M12 50c0-8 6-14 14-14s14 6 14 14\"><\/path>\n            <path d=\"M30 50c0-7 5-12 12-12s12 5 12 12\"><\/path>\n          <\/svg>\n        <\/div>\n\n        <h3>PERSONAS<\/h3>\n        <p>Comunidades que hacen la diferencia.<\/p>\n      <\/article>\n\n      <article class=\"frupex-why__item reveal-item\" style=\"--delay: .24s;\">\n\n        <span class=\"frupex-why__divider\" aria-hidden=\"true\"><\/span>\n\n        <div class=\"frupex-why__icon\">\n          <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n            <path d=\"M32 46V26\"><\/path>\n            <path d=\"M32 26c0-10 8-16 18-18-2 10-8 18-18 18z\"><\/path>\n            <path d=\"M32 26c0-10-8-16-18-18 2 10 8 18 18 18z\"><\/path>\n            <path d=\"M18 52h28\"><\/path>\n          <\/svg>\n        <\/div>\n\n        <h3>SOSTENIBILIDAD<\/h3>\n        <p>Producci\u00f3n responsable para un mejor ma\u00f1ana.<\/p>\n      <\/article>\n\n      <article class=\"frupex-why__item reveal-item\" style=\"--delay: .32s;\">\n\n        <span class=\"frupex-why__divider\" aria-hidden=\"true\"><\/span>\n\n        <div class=\"frupex-why__icon\">\n          <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n            <circle cx=\"32\" cy=\"32\" r=\"20\"><\/circle>\n            <path d=\"M12 32h40\"><\/path>\n            <path d=\"M32 12c6 5 10 12 10 20s-4 15-10 20c-6-5-10-12-10-20s4-15 10-20z\"><\/path>\n            <path d=\"M18 20c4 3 9 4 14 4s10-1 14-4\"><\/path>\n            <path d=\"M18 44c4-3 9-4 14-4s10 1 14 4\"><\/path>\n          <\/svg>\n        <\/div>\n\n        <h3>ALCANCE GLOBAL<\/h3>\n        <p>Ecuador en los principales mercados del mundo.<\/p>\n      <\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ====================================================\n   FRUPEX \u2014 NUESTRO PROCESO V3\n   Century Gothic \u00b7 Compacto \u00b7 Responsive\n   ==================================================== *\/\n\n.frupex-process-section,\n.frupex-process-section * {\n  box-sizing: border-box;\n}\n\n.frupex-process-section {\n  --process-yellow: #F3CB00;\n  --process-brown: #5F2610;\n  --process-dark: #221109;\n  --process-gray: #6E625A;\n  --process-cream: #F7F4EF;\n  --process-font: \"Century Gothic\", \"CenturyGothic\",\n                  Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n\n  background: #FBF9F5;\n  color: var(--process-dark);\n  font-family: var(--process-font);\n}\n\n.frupex-process-section h2,\n.frupex-process-section h3,\n.frupex-process-section p,\n.frupex-process-section span {\n  font-family: var(--process-font);\n}\n\n.frupex-process-wrap {\n  width: min(1250px, calc(100% - 10vw));\n  margin: 0 auto;\n  padding: 68px 0 76px;\n}\n\n\/* ====================================================\n   ENCABEZADO\n   ==================================================== *\/\n\n.frupex-process-intro {\n  max-width: 640px;\n  margin: 0 auto 48px;\n  text-align: center;\n}\n\n.frupex-process-kicker {\n  display: block;\n  margin-bottom: 17px;\n\n  color: var(--process-brown);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .22em;\n}\n\n.frupex-process-section .frupex-process-title {\n  margin: 0 !important;\n  padding: 0;\n\n  color: var(--process-dark);\n  font-size: clamp(32px, 3.15vw, 45px);\n  font-weight: 400;\n  line-height: 1.22;\n  letter-spacing: -.035em;\n\n  text-align: center;\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n.frupex-process-title span {\n  color: var(--process-yellow);\n}\n\n.frupex-process-section .frupex-process-text {\n  max-width: 550px;\n  margin: 0 auto !important;\n\n  color: var(--process-gray);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.7;\n  text-align: center;\n}\n\n\/* ====================================================\n   CINCO ETAPAS\n   ==================================================== *\/\n\n.frupex-process-flow {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1fr) 24px\n    minmax(0, 1fr) 24px\n    minmax(0, 1fr) 24px\n    minmax(0, 1fr) 24px\n    minmax(0, 1fr);\n\n  align-items: start;\n  gap: clamp(8px, 1.25vw, 18px);\n  width: 100%;\n}\n\n.frupex-step {\n  position: relative;\n\n  min-width: 0;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  text-align: center;\n}\n\n.frupex-step-number {\n  display: block;\n  margin-bottom: 14px;\n\n  color: var(--process-brown);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: .13em;\n}\n\n\/* ====================================================\n   FOTOGRAF\u00cdAS CIRCULARES\n   ==================================================== *\/\n\n.frupex-step-circle {\n  position: relative;\n\n  width: clamp(96px, 10vw, 130px);\n  height: clamp(96px, 10vw, 130px);\n  flex: none;\n\n  overflow: hidden;\n  border-radius: 50%;\n\n  border: 3px solid #FFFFFF;\n\n  background: #DFD8CB;\n\n  box-shadow:\n    0 0 0 1px rgba(95,38,16,.08),\n    0 12px 25px rgba(34,17,9,.09);\n\n  transition:\n    transform .55s cubic-bezier(.16,1,.3,1),\n    box-shadow .55s ease;\n}\n\n.frupex-step-circle img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  border-radius: 50%;\n  object-fit: cover;\n  object-position: center;\n\n  transform: scale(1.02);\n\n  transition: transform .7s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frupex-step:hover .frupex-step-circle {\n    transform: translateY(-5px);\n\n    box-shadow:\n      0 0 0 1px rgba(243,203,0,.50),\n      0 18px 32px rgba(34,17,9,.14);\n  }\n\n  .frupex-step:hover .frupex-step-circle img {\n    transform: scale(1.09);\n  }\n}\n\n\/* ====================================================\n   T\u00cdTULOS Y DESCRIPCIONES\n   ==================================================== *\/\n\n.frupex-process-section .frupex-step-title {\n  margin: 21px 0 9px !important;\n  padding: 0;\n\n  color: var(--process-dark);\n\n  font-size: clamp(13px, 1.18vw, 16px);\n  font-weight: 700;\n  line-height: 1.35;\n  letter-spacing: -.018em;\n\n  text-align: center;\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n.frupex-process-section .frupex-step-text {\n  max-width: 170px;\n  margin: 0 auto !important;\n  padding: 0;\n\n  color: var(--process-gray);\n\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.65;\n\n  text-align: center;\n  overflow-wrap: break-word;\n}\n\n\/* ====================================================\n   FLECHAS CONECTORAS\n   ==================================================== *\/\n\n.frupex-step-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 0;\n  height: clamp(96px, 10vw, 130px);\n\n  margin-top: 25px;\n\n  color: rgba(95,38,16,.43);\n  font-family: var(--process-font);\n  font-size: 23px;\n  font-weight: 400;\n  line-height: 1;\n}\n\n\/* ====================================================\n   ANIMACI\u00d3N DE ENTRADA\n   Visible por defecto si JavaScript no funciona\n   ==================================================== *\/\n\n.frupex-process-section .frupex-step,\n.frupex-process-section .frupex-step-arrow,\n.frupex-process-section .frupex-process-intro {\n  opacity: 1;\n  transform: none;\n}\n\n\/* ====================================================\n   TABLET\n   ==================================================== *\/\n\n@media (max-width: 1050px) {\n\n  .frupex-process-wrap {\n    width: calc(100% - 64px);\n    padding: 60px 0 66px;\n  }\n\n  .frupex-process-intro {\n    margin-bottom: 41px;\n  }\n\n  .frupex-process-flow {\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    gap: 15px;\n  }\n\n  .frupex-step-arrow {\n    display: none;\n  }\n\n  .frupex-step-circle {\n    width: clamp(88px, 12vw, 115px);\n    height: clamp(88px, 12vw, 115px);\n  }\n\n  .frupex-process-section .frupex-step-title {\n    font-size: 13px;\n  }\n\n  .frupex-process-section .frupex-step-text {\n    font-size: 11.5px;\n  }\n}\n\n\/* ====================================================\n   M\u00d3VIL\n   ==================================================== *\/\n\n@media (max-width: 767px) {\n\n  .frupex-process-wrap {\n    width: calc(100% - 38px);\n    padding: 55px 0 63px;\n  }\n\n  .frupex-process-intro {\n    margin-bottom: 35px;\n  }\n\n  .frupex-process-kicker {\n    font-size: 9px;\n  }\n\n  .frupex-process-section .frupex-process-title {\n    font-size: clamp(29px, 7.5vw, 38px);\n  }\n\n  .frupex-process-section .frupex-process-text {\n    font-size: 13px;\n    line-height: 1.7;\n  }\n\n  .frupex-process-flow {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 34px 18px;\n    align-items: start;\n  }\n\n  .frupex-step-circle {\n    width: 112px;\n    height: 112px;\n  }\n\n  .frupex-process-section .frupex-step-title {\n    margin-top: 16px !important;\n    font-size: 14px;\n  }\n\n  .frupex-process-section .frupex-step-text {\n    max-width: 155px;\n    font-size: 12px;\n  }\n\n  .frupex-step:last-child:nth-child(odd) {\n    grid-column: 1 \/ -1;\n    justify-self: center;\n    width: min(190px, 100%);\n  }\n}\n\n\/* ====================================================\n   PANTALLAS PEQUE\u00d1AS\n   ==================================================== *\/\n\n@media (max-width: 370px) {\n\n  .frupex-process-flow {\n    gap: 30px 12px;\n  }\n\n  .frupex-step-circle {\n    width: 96px;\n    height: 96px;\n  }\n\n  .frupex-process-section .frupex-step-title {\n    font-size: 13px;\n  }\n}\n\n\/* ====================================================\n   ACCESIBILIDAD\n   ==================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .frupex-process-section *,\n  .frupex-process-section *::before,\n  .frupex-process-section *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .frupex-process-section .frupex-step,\n  .frupex-process-section .frupex-step-arrow,\n  .frupex-process-section .frupex-process-intro {\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexProcess() {\n    const section = document.querySelector(\n      \".frupex-process-section\"\n    );\n\n    if (!section || section.dataset.frxInitialized === \"true\") {\n      return;\n    }\n\n    section.dataset.frxInitialized = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      !(\"IntersectionObserver\" in window) ||\n      typeof Element.prototype.animate !== \"function\"\n    ) {\n      return;\n    }\n\n    const intro = section.querySelector(\n      \".frupex-process-intro\"\n    );\n\n    const steps = Array.from(\n      section.querySelectorAll(\".frupex-step\")\n    );\n\n    const arrows = Array.from(\n      section.querySelectorAll(\".frupex-step-arrow\")\n    );\n\n    let hasPlayed = false;\n\n    function reveal(element, delay, distance = 18) {\n      if (!element) return;\n\n      element.animate(\n        [\n          {\n            opacity: 0,\n            transform: `translateY(${distance}px)`\n          },\n          {\n            opacity: 1,\n            transform: \"translateY(0)\"\n          }\n        ],\n        {\n          duration: 800,\n          delay,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    }\n\n    function playAnimation() {\n      if (hasPlayed) return;\n\n      hasPlayed = true;\n\n      reveal(intro, 0, 13);\n\n      steps.forEach((step, index) => {\n        reveal(\n          step,\n          170 + index * 110,\n          21\n        );\n      });\n\n      arrows.forEach((arrow, index) => {\n        reveal(\n          arrow,\n          270 + index * 110,\n          5\n        );\n      });\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) return;\n\n          playAnimation();\n          observer.disconnect();\n        });\n      },\n      {\n        threshold: 0.08,\n        rootMargin: \"0px 0px -25px 0px\"\n      }\n    );\n\n    observer.observe(section);\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexProcess,\n      { once: true }\n    );\n  } else {\n    initFrupexProcess();\n  }\n})();\n<\/script>\n\n<section class=\"frupex-process-section\" id=\"proceso-frupex\">\n  <div class=\"frupex-process-wrap\">\n\n    <div class=\"frupex-process-intro\">\n      <span class=\"frupex-process-kicker\">NUESTRO PROCESO<\/span>\n\n      <h2 class=\"frupex-process-title\">\n        Del <strong>campo<\/strong><br>al <strong>destino<\/strong><span>.<\/span>\n      <\/h2>\n\n      <span class=\"frupex-process-line\" aria-hidden=\"true\"><\/span>\n\n      <p class=\"frupex-process-text\">\n        Cuidamos cada etapa para garantizar la mejor calidad.\n      <\/p>\n    <\/div>\n\n    <div class=\"frupex-process-flow\">\n\n      <article class=\"frupex-step\" style=\"--delay: .08s\">\n        <div class=\"frupex-step-circle\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/mujer-cultivando-banano-scaled.jpg\" alt=\"Cultivo del banano\" loading=\"lazy\">\n        <\/div>\n        <h3 class=\"frupex-step-title\">Cultivo<\/h3>\n        <p class=\"frupex-step-text\">Nuestra tierra, nuestra fuerza.<\/p>\n      <\/article>\n\n      <div class=\"frupex-step-arrow\" aria-hidden=\"true\">\n        <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n        <\/svg>\n      <\/div>\n\n      <article class=\"frupex-step\" style=\"--delay: .16s\">\n        <div class=\"frupex-step-circle\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Seleccionando-el-mejor-banano-scaled.jpg\" alt=\"Selecci\u00f3n de banano\" loading=\"lazy\">\n        <\/div>\n        <h3 class=\"frupex-step-title\">Selecci\u00f3n<\/h3>\n        <p class=\"frupex-step-text\">Solo lo mejor.<\/p>\n      <\/article>\n\n      <div class=\"frupex-step-arrow\" aria-hidden=\"true\">\n        <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n        <\/svg>\n      <\/div>\n\n      <article class=\"frupex-step\" style=\"--delay: .24s\">\n        <div class=\"frupex-step-circle\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/empando-bananos-de-calidad-scaled.jpg\" alt=\"Empaque del banano\" loading=\"lazy\">\n        <\/div>\n        <h3 class=\"frupex-step-title\">Empaque<\/h3>\n        <p class=\"frupex-step-text\">Calidad y cuidado.<\/p>\n      <\/article>\n\n      <div class=\"frupex-step-arrow\" aria-hidden=\"true\">\n        <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n        <\/svg>\n      <\/div>\n\n      <article class=\"frupex-step\" style=\"--delay: .32s\">\n        <div class=\"frupex-step-circle\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Etiquetado-de-banano-scaled.jpg\" alt=\"Control de calidad\" loading=\"lazy\">\n        <\/div>\n        <h3 class=\"frupex-step-title\">Control<\/h3>\n        <p class=\"frupex-step-text\">Est\u00e1ndares internacionales.<\/p>\n      <\/article>\n\n      <div class=\"frupex-step-arrow\" aria-hidden=\"true\">\n        <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n        <\/svg>\n      <\/div>\n\n      <article class=\"frupex-step\" style=\"--delay: .40s\">\n        <div class=\"frupex-step-circle\">\n          <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/CAJA-DE-BANANO-scaled.jpg\" alt=\"Exportaci\u00f3n de banano ecuatoriano\" loading=\"lazy\">\n        <\/div>\n        <h3 class=\"frupex-step-title\">Exportaci\u00f3n<\/h3>\n        <p class=\"frupex-step-text\">Ecuador al mundo.<\/p>\n      <\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==================================================\n   FRUPEX \u2014 ORIGEN Y CALIDAD V3\n   Century Gothic \u00b7 Editorial compacto\n   ================================================== *\/\n\n.frx-origin-cert,\n.frx-origin-cert * {\n  box-sizing: border-box;\n}\n\n.frx-origin-cert {\n  --oc-yellow: #F3CB00;\n  --oc-brown: #5F2610;\n  --oc-dark: #221109;\n  --oc-text: #6E625A;\n  --oc-cream: #F7F4EF;\n  --oc-font: \"Century Gothic\", \"CenturyGothic\",\n             Arial, sans-serif;\n\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  width: 100%;\n\n  background: var(--oc-cream);\n  color: var(--oc-dark);\n  font-family: var(--oc-font);\n}\n\n.frx-origin-cert h2,\n.frx-origin-cert p,\n.frx-origin-cert a,\n.frx-origin-cert span,\n.frx-origin-cert strong,\n.frx-origin-cert small {\n  font-family: var(--oc-font);\n}\n\n.frx-origin-cert h2,\n.frx-origin-cert p {\n  text-transform: none;\n  word-break: normal;\n  hyphens: none;\n}\n\n.frx-origin-cert__ambient {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n\n  background: radial-gradient(\n    circle at 65% 20%,\n    rgba(243,203,0,.055),\n    transparent 45%\n  );\n}\n\n\/* ================================================\n   COMPOSICI\u00d3N PRINCIPAL\n   ================================================ *\/\n\n.frx-origin-cert__grid {\n  position: relative;\n  z-index: 1;\n\n  display: grid;\n  grid-template-columns:\n    minmax(0, .84fr)\n    minmax(0, 1.16fr);\n\n  width: 100%;\n  align-items: stretch;\n}\n\n\/* ================================================\n   FOTOGRAF\u00cdA\n   ================================================ *\/\n\n.frx-origin-cert__photo {\n  position: relative;\n  min-width: 0;\n  min-height: 435px;\n  overflow: hidden;\n}\n\n.frx-origin-cert__photo-mask {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  background: #34452B;\n}\n\n.frx-origin-cert__photo-img {\n  position: absolute;\n  inset: 0;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: 48% center;\n\n  transform: scale(1.025);\n  transition: transform 1.1s cubic-bezier(.16,1,.3,1);\n}\n\n@media (hover: hover) {\n  .frx-origin-cert__photo:hover\n  .frx-origin-cert__photo-img {\n    transform: scale(1.055);\n  }\n}\n\n.frx-origin-cert__photo-overlay {\n  position: absolute;\n  z-index: 2;\n  inset: 0;\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      transparent 55%,\n      rgba(247,244,239,.18) 77%,\n      var(--oc-cream) 100%\n    ),\n    linear-gradient(\n      180deg,\n      transparent 38%,\n      rgba(11,9,5,.44) 100%\n    );\n}\n\n\/* LOCALIZACI\u00d3N *\/\n\n.frx-origin-cert__location {\n  position: absolute;\n  z-index: 3;\n\n  left: 32px;\n  bottom: 33px;\n\n  display: flex;\n  align-items: center;\n  gap: 13px;\n\n  color: #FFFFFF;\n  text-shadow: 0 3px 15px rgba(0,0,0,.3);\n}\n\n.frx-origin-cert__location-pin {\n  position: relative;\n  display: block;\n\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n\n  border-radius: 50% 50% 50% 0;\n  background: var(--oc-yellow);\n  transform: rotate(-45deg);\n}\n\n.frx-origin-cert__location-pin span {\n  position: absolute;\n\n  top: 50%;\n  left: 50%;\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n  background: var(--oc-dark);\n  transform: translate(-50%, -50%);\n}\n\n.frx-origin-cert__location strong {\n  display: block;\n\n  font-size: 19px;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n.frx-origin-cert__location small {\n  display: block;\n  margin-top: 4px;\n\n  font-size: 10px;\n  line-height: 1.4;\n  letter-spacing: .12em;\n  font-weight: 400;\n\n  color: rgba(255,255,255,.87);\n}\n\n\/* ================================================\n   RA\u00cdCES \/ TEXTO Y MAPA\n   ================================================ *\/\n\n.frx-origin-cert__roots {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1.25fr)\n    minmax(150px, .75fr);\n\n  align-items: center;\n  gap: clamp(16px, 2vw, 34px);\n\n  min-width: 0;\n\n  padding:\n    55px\n    clamp(28px, 5vw, 78px)\n    55px\n    clamp(15px, 2.1vw, 32px);\n}\n\n.frx-origin-cert__roots-copy {\n  position: relative;\n  z-index: 2;\n  min-width: 0;\n  max-width: 460px;\n}\n\n\/* ETIQUETAS *\/\n\n.frx-origin-cert__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  margin-bottom: 19px;\n\n  color: var(--oc-brown);\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .19em;\n  text-transform: uppercase;\n}\n\n\/* T\u00cdTULOS *\/\n\n.frx-origin-cert__title-mask {\n  overflow: visible;\n}\n\n.frx-origin-cert .frx-origin-cert__title,\n.frx-origin-cert .frx-origin-cert__cert-title {\n  margin: 0 !important;\n  padding: 0;\n\n  font-size: clamp(28px, 2.5vw, 37px);\n  font-weight: 400;\n  line-height: 1.28;\n  letter-spacing: -.035em;\n\n  color: var(--oc-dark);\n  text-align: left;\n\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n.frx-origin-cert__title span,\n.frx-origin-cert__cert-title span {\n  color: var(--oc-yellow);\n}\n\n\/* P\u00c1RRAFO *\/\n\n.frx-origin-cert .frx-origin-cert__description {\n  margin: 19px 0 0 !important;\n  max-width: 420px;\n\n  color: var(--oc-text);\n\n  font-size: 13.5px;\n  font-weight: 400;\n  line-height: 1.8;\n  text-wrap: pretty;\n}\n\n\/* ENLACE *\/\n\n.frx-origin-cert .frx-origin-cert__cta {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 13px;\n\n  margin-top: 23px;\n  padding-bottom: 8px;\n\n  color: var(--oc-brown) !important;\n\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.5;\n\n  text-decoration: none !important;\n}\n\n.frx-origin-cert__cta::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 1px;\n\n  background: rgba(95,38,16,.25);\n}\n\n.frx-origin-cert__cta::before {\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  left: 0;\n  bottom: 0;\n\n  width: 0;\n  height: 1px;\n\n  background: var(--oc-yellow);\n  transition: width .45s ease;\n}\n\n.frx-origin-cert__cta-arrow {\n  display: inline-block;\n  font-size: 17px;\n  transition: transform .4s ease;\n}\n\n@media (hover: hover) {\n  .frx-origin-cert__cta:hover::before {\n    width: 100%;\n  }\n\n  .frx-origin-cert__cta:hover\n  .frx-origin-cert__cta-arrow {\n    transform: translateX(6px);\n  }\n}\n\n\/* ================================================\n   MAPA DE ECUADOR\n   ================================================ *\/\n\n.frx-origin-cert__map-wrap {\n  position: relative;\n\n  display: grid;\n  place-items: center;\n\n  width: 100%;\n  max-width: 215px;\n  aspect-ratio: 1 \/ 1;\n\n  margin: 0 auto;\n}\n\n.frx-origin-cert__map-halo {\n  position: absolute;\n  inset: 8%;\n\n  border-radius: 50%;\n\n  background: radial-gradient(\n    circle,\n    rgba(243,203,0,.13),\n    transparent 70%\n  );\n\n  pointer-events: none;\n}\n\n.frx-origin-cert__map {\n  position: relative;\n  z-index: 1;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: contain;\n  opacity: .87;\n}\n\n.frx-origin-cert__map-pin {\n  position: absolute;\n  z-index: 2;\n\n  left: 25%;\n  top: 62%;\n\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.frx-origin-cert__map-dot {\n  position: relative;\n\n  display: block;\n  flex: 0 0 12px;\n  width: 12px;\n  height: 12px;\n\n  border-radius: 50%;\n  background: var(--oc-yellow);\n  box-shadow: 0 0 0 5px rgba(243,203,0,.17);\n}\n\n.frx-origin-cert__map-dot i {\n  position: absolute;\n\n  width: 4px;\n  height: 4px;\n\n  left: 50%;\n  top: 50%;\n\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background: var(--oc-dark);\n}\n\n.frx-origin-cert__map-label {\n  white-space: nowrap;\n}\n\n.frx-origin-cert__map-label strong {\n  display: block;\n\n  color: var(--oc-dark);\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n.frx-origin-cert__map-label small {\n  display: block;\n  margin-top: 3px;\n\n  color: var(--oc-text);\n  font-size: 10px;\n  line-height: 1.3;\n}\n\n\/* ================================================\n   CERTIFICACIONES \/ FRANJA INFERIOR\n   ================================================ *\/\n\n.frx-origin-cert__certs {\n  position: relative;\n\n  grid-column: 1 \/ -1;\n\n  display: grid;\n  grid-template-columns:\n    minmax(230px, .75fr)\n    minmax(0, 1.25fr);\n\n  align-items: center;\n  column-gap: clamp(25px, 5vw, 75px);\n\n  padding: 44px max(5vw, calc((100vw - 1300px) \/ 2));\n\n  border-top: 1px solid rgba(95,38,16,.10);\n\n  background: #FBF9F5;\n}\n\n.frx-origin-cert__certs-head {\n  min-width: 0;\n}\n\n.frx-origin-cert__certs-head .frx-origin-cert__eyebrow {\n  margin-bottom: 12px;\n}\n\n.frx-origin-cert .frx-origin-cert__cert-title {\n  font-size: clamp(26px, 2.4vw, 34px);\n}\n\n.frx-origin-cert .frx-origin-cert__cert-description {\n  max-width: 345px;\n  margin: 12px 0 0 !important;\n\n  color: var(--oc-text);\n\n  font-size: 12.5px;\n  font-weight: 400;\n  line-height: 1.65;\n}\n\n\/* LOGOTIPOS *\/\n\n.frx-origin-cert__logos {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  align-items: center;\n\n  gap: clamp(12px, 2vw, 25px);\n  min-width: 0;\n}\n\n.frx-origin-cert__logo {\n  position: relative;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 0;\n  min-height: 88px;\n\n  padding: 12px;\n}\n\n.frx-origin-cert__logo-inner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  height: 100%;\n\n  transition: transform .45s ease;\n}\n\n.frx-origin-cert__logo img {\n  display: block;\n\n  max-width: 100%;\n  max-height: 68px;\n\n  width: auto;\n  height: auto;\n\n  object-fit: contain;\n\n  filter: grayscale(1);\n  opacity: .72;\n\n  transition:\n    filter .4s ease,\n    opacity .4s ease;\n}\n\n@media (hover: hover) {\n  .frx-origin-cert__logo:hover\n  .frx-origin-cert__logo-inner {\n    transform: translateY(-4px);\n  }\n\n  .frx-origin-cert__logo:hover img {\n    filter: grayscale(0);\n    opacity: 1;\n  }\n}\n\n\/* TEXTO INFERIOR *\/\n\n.frx-origin-cert__quality-line {\n  grid-column: 1 \/ -1;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 13px;\n\n  margin-top: 19px;\n}\n\n\n\n.frx-origin-cert__quality-line small {\n  color: rgba(95,38,16,.54);\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.3;\n  letter-spacing: .18em;\n\n  text-align: center;\n}\n\n\/* El journey original atravesaba los textos.\n   Lo desactivamos con la composici\u00f3n nueva. *\/\n\n.frx-origin-cert__journey {\n  display: none;\n}\n\n\/* ================================================\n   TABLET\n   ================================================ *\/\n\n@media (max-width: 1100px) {\n\n  .frx-origin-cert__grid {\n    grid-template-columns:\n      minmax(0, .85fr)\n      minmax(0, 1.15fr);\n  }\n\n  .frx-origin-cert__photo {\n    min-height: 420px;\n  }\n\n  .frx-origin-cert__roots {\n    grid-template-columns: 1fr;\n    gap: 20px;\n    padding: 44px 35px;\n  }\n\n  .frx-origin-cert__map-wrap {\n    max-width: 150px;\n    margin: 0;\n  }\n\n  .frx-origin-cert__certs {\n    padding: 39px 5vw;\n  }\n}\n\n\/* ================================================\n   M\u00d3VIL\n   ================================================ *\/\n\n@media (max-width: 767px) {\n\n  .frx-origin-cert__grid {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .frx-origin-cert__photo {\n    min-height: 0;\n    height: clamp(235px, 69vw, 325px);\n    flex: none;\n  }\n\n  .frx-origin-cert__photo-img {\n    object-position: center 44%;\n  }\n\n  .frx-origin-cert__photo-overlay {\n    background:\n      linear-gradient(\n        0deg,\n        var(--oc-cream) 0%,\n        rgba(247,244,239,.15) 24%,\n        transparent 46%\n      ),\n      linear-gradient(\n        180deg,\n        transparent 45%,\n        rgba(11,9,5,.30) 100%\n      );\n  }\n\n  .frx-origin-cert__location {\n    left: 19px;\n    bottom: 35px;\n  }\n\n  .frx-origin-cert__roots {\n    grid-template-columns: 1fr;\n    gap: 25px;\n\n    padding: 24px 19px 52px;\n  }\n\n  .frx-origin-cert__eyebrow {\n    font-size: 9px;\n    margin-bottom: 14px;\n  }\n\n  .frx-origin-cert .frx-origin-cert__title {\n    font-size: clamp(29px, 7.3vw, 38px);\n  }\n\n  .frx-origin-cert .frx-origin-cert__description {\n    font-size: 13.5px;\n    line-height: 1.75;\n  }\n\n  .frx-origin-cert__map-wrap {\n    max-width: 195px;\n    margin: 0 auto;\n  }\n\n  .frx-origin-cert__certs {\n    display: block;\n    padding: 45px 19px 54px;\n  }\n\n  .frx-origin-cert .frx-origin-cert__cert-title {\n    font-size: clamp(27px, 7vw, 34px);\n  }\n\n  .frx-origin-cert__logos {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 8px 18px;\n\n    margin-top: 25px;\n  }\n\n  .frx-origin-cert__logo {\n    min-height: 85px;\n  }\n\n  .frx-origin-cert__quality-line {\n    margin-top: 26px;\n  }\n}\n\n\/* ================================================\n   MOVIMIENTO REDUCIDO\n   ================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .frx-origin-cert *,\n  .frx-origin-cert *::before,\n  .frx-origin-cert *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFrupexOriginCert() {\n    const section = document.querySelector(\".frx-origin-cert\");\n\n    if (\n      !section ||\n      section.dataset.frxInitialized === \"true\"\n    ) return;\n\n    section.dataset.frxInitialized = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      !(\"IntersectionObserver\" in window) ||\n      typeof Element.prototype.animate !== \"function\"\n    ) return;\n\n    const photoMask = section.querySelector(\n      \".frx-origin-cert__photo-mask\"\n    );\n\n    const photo = section.querySelector(\n      \".frx-origin-cert__photo-img\"\n    );\n\n    const location = section.querySelector(\n      \".frx-origin-cert__location\"\n    );\n\n    const roots = section.querySelector(\n      \".frx-origin-cert__roots-copy\"\n    );\n\n    const map = section.querySelector(\n      \".frx-origin-cert__map-wrap\"\n    );\n\n    const certsHead = section.querySelector(\n      \".frx-origin-cert__certs-head\"\n    );\n\n    const logos = Array.from(\n      section.querySelectorAll(\".frx-origin-cert__logo\")\n    );\n\n    const qualityLine = section.querySelector(\n      \".frx-origin-cert__quality-line\"\n    );\n\n    const rootsArea = section.querySelector(\n      \".frx-origin-cert__roots\"\n    );\n\n    const certsArea = section.querySelector(\n      \".frx-origin-cert__certs\"\n    );\n\n    function reveal(element, delay = 0, distance = 16) {\n      if (!element) return;\n\n      element.animate(\n        [\n          {\n            opacity: 0,\n            transform: `translateY(${distance}px)`\n          },\n          {\n            opacity: 1,\n            transform: \"translateY(0)\"\n          }\n        ],\n        {\n          duration: 830,\n          delay,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    }\n\n    \/\/ Primera animaci\u00f3n: fotograf\u00eda y ra\u00edces\n    let topPlayed = false;\n\n    function playTop() {\n      if (topPlayed) return;\n      topPlayed = true;\n\n      if (photoMask) {\n        photoMask.animate(\n          [\n            { clipPath: \"inset(0 100% 0 0)\" },\n            { clipPath: \"inset(0 0 0 0)\" }\n          ],\n          {\n            duration: 1050,\n            easing: \"cubic-bezier(.16,1,.3,1)\",\n            fill: \"both\"\n          }\n        );\n      }\n\n      if (photo) {\n        photo.animate(\n          [\n            { transform: \"scale(1.075)\" },\n            { transform: \"scale(1.025)\" }\n          ],\n          {\n            duration: 1200,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      reveal(location, 350, 13);\n      reveal(roots, 200, 20);\n      reveal(map, 420, 14);\n    }\n\n    \/\/ Segunda animaci\u00f3n: certificaciones\n    let certsPlayed = false;\n\n    function playCerts() {\n      if (certsPlayed) return;\n      certsPlayed = true;\n\n      reveal(certsHead, 0, 14);\n\n      logos.forEach((logo, index) => {\n        reveal(logo, 160 + index * 100, 12);\n      });\n\n      reveal(qualityLine, 550, 9);\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) return;\n\n          if (entry.target === rootsArea) {\n            playTop();\n          }\n\n          if (entry.target === certsArea) {\n            playCerts();\n          }\n\n          observer.unobserve(entry.target);\n        });\n      },\n      {\n        threshold: 0.08,\n        rootMargin: \"0px 0px -25px 0px\"\n      }\n    );\n\n    if (rootsArea) observer.observe(rootsArea);\n    if (certsArea) observer.observe(certsArea);\n\n    \/\/ Parallax discreto de la fotograf\u00eda en escritorio\n    const canHover = window.matchMedia(\n      \"(hover: hover) and (pointer: fine)\"\n    ).matches;\n\n    const photoArea = section.querySelector(\n      \".frx-origin-cert__photo\"\n    );\n\n    if (canHover && photo && photoArea) {\n      let ticking = false;\n\n      photoArea.addEventListener(\n        \"pointermove\",\n        (event) => {\n          if (!topPlayed || ticking) return;\n\n          ticking = true;\n\n          requestAnimationFrame(() => {\n            const rect = photoArea.getBoundingClientRect();\n\n            const x = (event.clientX - rect.left) \/ rect.width;\n            const y = (event.clientY - rect.top) \/ rect.height;\n\n            const moveX = (x - .5) * -5;\n            const moveY = (y - .5) * -4;\n\n            photo.style.transform =\n              `scale(1.04) translate(${moveX}px, ${moveY}px)`;\n\n            ticking = false;\n          });\n        },\n        { passive: true }\n      );\n\n      photoArea.addEventListener(\"pointerleave\", () => {\n        photo.style.transform = \"scale(1.025)\";\n      });\n    }\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFrupexOriginCert,\n      { once: true }\n    );\n  } else {\n    initFrupexOriginCert();\n  }\n})();\n<\/script>\n\n<section class=\"frx-origin-cert\" id=\"origen-calidad\">\n\n  <div class=\"frx-origin-cert__ambient\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"frx-origin-cert__grid\">\n\n    <!-- 01 \u00b7 FOTOGRAF\u00cdA -->\n    <div class=\"frx-origin-cert__photo\">\n\n      <div class=\"frx-origin-cert__photo-mask\">\n\n        <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Vista-aerea-de-ciudad-costera-y-campos.png\" alt=\"Paisaje agr\u00edcola de El Oro, Ecuador\" class=\"frx-origin-cert__photo-img\" loading=\"lazy\">\n\n        <div class=\"frx-origin-cert__photo-overlay\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"frx-origin-cert__location\">\n          <span class=\"frx-origin-cert__location-pin\" aria-hidden=\"true\">\n            <span><\/span>\n          <\/span>\n\n          <div>\n            <strong>Machala<\/strong>\n            <small>El Oro \u00b7 Ecuador<\/small>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- 02 \u00b7 NUESTRAS RA\u00cdCES -->\n    <div class=\"frx-origin-cert__roots\">\n\n      <div class=\"frx-origin-cert__roots-copy\">\n\n        <div class=\"frx-origin-cert__eyebrow\">\n          <span>NUESTRAS RA\u00cdCES<\/span>\n          <i aria-hidden=\"true\"><\/i>\n        <\/div>\n\n        <div class=\"frx-origin-cert__title-mask\">\n          <h2 class=\"frx-origin-cert__title\">\n            Ecuador est\u00e1<br>\n            en <strong>nuestro origen<\/strong><span>.<\/span>\n          <\/h2>\n        <\/div>\n\n        <p class=\"frx-origin-cert__description\">\n          Desde Machala, El Oro, una tierra privilegiada\n          por su clima y su gente, cultivamos bananos que\n          conectan Ecuador con el mundo.\n        <\/p>\n\n        <a href=\"\/nosotros\/\" class=\"frx-origin-cert__cta\">\n          <span>Conoce nuestras ra\u00edces<\/span>\n          <span class=\"frupex-btn__arrow\" aria-hidden=\"true\">\n    <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"><\/path>\n    <\/svg>\n<\/span>\n<\/a>\n\n      <\/div>\n\n      <!-- MAPA -->\n      <div class=\"frx-origin-cert__map-wrap\">\n\n        <div class=\"frx-origin-cert__map-halo\" aria-hidden=\"true\"><\/div>\n\n        <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Silueta-minimalista-de-Ecuador.png\" alt=\"Silueta de Ecuador\" class=\"frx-origin-cert__map\" loading=\"lazy\">\n\n        <div class=\"frx-origin-cert__map-pin\" aria-label=\"Machala, El Oro\">\n\n          <span class=\"frx-origin-cert__map-dot\" aria-hidden=\"true\">\n            <i><\/i>\n          <\/span>\n\n          <div class=\"frx-origin-cert__map-label\">\n            <strong>Machala<\/strong>\n            <small>El Oro<\/small>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- 03 \u00b7 CERTIFICACIONES -->\n    <div class=\"frx-origin-cert__certs\">\n\n      <div class=\"frx-origin-cert__certs-head\">\n\n        <div class=\"frx-origin-cert__eyebrow\">\n          <span>CALIDAD RESPALDADA<\/span>\n          <i aria-hidden=\"true\"><\/i>\n        <\/div>\n\n        <div class=\"frx-origin-cert__title-mask\">\n          <h2 class=\"frx-origin-cert__cert-title\">\n            Est\u00e1ndares de <strong>calidad<\/strong><span>.<\/span>\n          <\/h2>\n        <\/div>\n\n        <p class=\"frx-origin-cert__cert-description\">\n          Nuestro compromiso con la calidad\n          en cada etapa del proceso.\n        <\/p>\n\n      <\/div>\n\n      <div class=\"frx-origin-cert__logos\">\n\n        <div class=\"frx-origin-cert__logo\">\n          <div class=\"frx-origin-cert__logo-inner\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/USDA_Organic.webp\" alt=\"USDA Organic\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n        <div class=\"frx-origin-cert__logo\">\n          <div class=\"frx-origin-cert__logo-inner\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/GLOBALG-AP.png\" alt=\"GLOBALG.A.P.\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n        <div class=\"frx-origin-cert__logo\">\n          <div class=\"frx-origin-cert__logo-inner\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/FDA-scaled.png\" alt=\"FDA\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n        <div class=\"frx-origin-cert__logo\">\n          <div class=\"frx-origin-cert__logo-inner\">\n            <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Organic-Logo-scaled.webp\" alt=\"Organic\" loading=\"lazy\">\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"frx-origin-cert__quality-line\">\n        <span><\/span>\n        <small>CALIDAD QUE ABRE FRONTERAS<\/small>\n        <span><\/span>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==================================================\n   FRUPEX \u2014 CTA FINAL HOME V4\n   Century Gothic \u00b7 Franja cinematogr\u00e1fica compacta\n   ================================================== *\/\n\n.frx-final-cta,\n.frx-final-cta * {\n  box-sizing: border-box;\n}\n\n.frx-final-cta {\n  --cta-yellow: #F3CB00;\n  --cta-dark: #221109;\n  --cta-font: \"Century Gothic\", \"CenturyGothic\",\n              Arial, sans-serif;\n\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n\n  width: 100%;\n  min-height: 350px;\n  margin: 0;\n\n  background: #21160F;\n  color: #FFFFFF;\n  font-family: var(--cta-font);\n}\n\n.frx-final-cta h2,\n.frx-final-cta p,\n.frx-final-cta a,\n.frx-final-cta span {\n  font-family: var(--cta-font);\n}\n\n\/* ================================================\n   FOTOGRAF\u00cdA Y CAPAS\n   ================================================ *\/\n\n.frx-final-cta__media {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.frx-final-cta__image {\n  position: absolute;\n  inset: 0;\n\n  display: block;\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center 53%;\n\n  transform: scale(1.035);\n  transform-origin: center;\n\n  filter: saturate(.94) contrast(1.035);\n\n  transition: transform 1.3s cubic-bezier(.16,1,.3,1);\n}\n\n.frx-final-cta__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(17,11,7,.91) 0%,\n      rgba(17,11,7,.81) 28%,\n      rgba(17,11,7,.57) 55%,\n      rgba(17,11,7,.42) 77%,\n      rgba(17,11,7,.53) 100%\n    ),\n    linear-gradient(\n      180deg,\n      rgba(10,6,3,.20),\n      transparent 35%,\n      rgba(10,6,3,.26)\n    );\n}\n\n.frx-final-cta__light {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n\n  background: radial-gradient(\n    ellipse at 76% 35%,\n    rgba(243,203,0,.11) 0%,\n    transparent 52%\n  );\n\n  opacity: .8;\n}\n\n\/* ================================================\n   CONTENEDOR Y COMPOSICI\u00d3N\n   ================================================ *\/\n\n.frx-final-cta__inner {\n  position: relative;\n  z-index: 3;\n\n  width: min(1300px, calc(100% - 10vw));\n  min-height: 350px;\n  margin: 0 auto;\n\n  padding: 63px 0;\n\n  display: grid;\n  grid-template-columns: minmax(0,1fr) auto;\n  align-items: center;\n  gap: clamp(35px, 5vw, 80px);\n}\n\n.frx-final-cta__copy {\n  min-width: 0;\n  max-width: 670px;\n}\n\n\/* ================================================\n   ETIQUETA\n   ================================================ *\/\n\n.frx-final-cta__eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 13px;\n\n  margin: 0 0 19px;\n\n  font-size: 9px;\n  font-weight: 700;\n  line-height: 1.4;\n  letter-spacing: .20em;\n  text-transform: uppercase;\n\n  color: rgba(255,255,255,.83);\n}\n\n\/* ================================================\n   T\u00cdTULO\n   ================================================ *\/\n\n.frx-final-cta__title-mask {\n  overflow: visible;\n}\n\n.frx-final-cta .frx-final-cta__title {\n  margin: 0 !important;\n  padding: 0;\n\n  font-size: clamp(34px, 3.65vw, 51px);\n  font-weight: 400;\n  line-height: 1.22;\n  letter-spacing: -.04em;\n\n  color: #FFFFFF;\n  text-align: left;\n  text-transform: none;\n\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n.frx-final-cta__title span {\n  color: var(--cta-yellow);\n}\n\n\/* ================================================\n   DESCRIPCI\u00d3N\n   ================================================ *\/\n\n.frx-final-cta .frx-final-cta__description {\n  max-width: 560px;\n  margin: 19px 0 0 !important;\n\n  font-size: 15px;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: -.005em;\n\n  color: rgba(255,255,255,.85);\n}\n\n\/* ================================================\n   \u00c1REA DEL BOT\u00d3N\n   ================================================ *\/\n\n.frx-final-cta__action {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: clamp(18px, 3vw, 47px);\n\n  min-width: 0;\n}\n\n\/* BOT\u00d3N PRINCIPAL *\/\n\n.frx-final-cta .frx-final-cta__button {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 23px;\n\n  min-height: 51px;\n  padding: 0 23px;\n\n  flex-shrink: 0;\n\n  border: 1px solid var(--cta-yellow);\n  border-radius: 4px;\n\n  background: var(--cta-yellow);\n  color: var(--cta-dark) !important;\n\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1.2;\n\n  text-decoration: none !important;\n  white-space: nowrap;\n\n  box-shadow: 0 13px 33px rgba(0,0,0,.22);\n\n  transition:\n    background .35s ease,\n    transform .45s cubic-bezier(.16,1,.3,1),\n    box-shadow .45s ease;\n}\n\n.frx-final-cta__button-text,\n.frx-final-cta__button-arrow {\n  position: relative;\n  z-index: 2;\n}\n\n.frx-final-cta__button-arrow {\n  font-size: 20px;\n  font-weight: 400;\n\n  transition: transform .4s cubic-bezier(.16,1,.3,1);\n}\n\n.frx-final-cta__button-shine {\n  position: absolute;\n  z-index: 1;\n\n  top: -40%;\n  bottom: -40%;\n  left: -45%;\n\n  width: 28%;\n\n  background: linear-gradient(\n    90deg,\n    transparent,\n    rgba(255,255,255,.55),\n    transparent\n  );\n\n  transform: skewX(-22deg);\n  pointer-events: none;\n}\n\n@media (hover: hover) {\n  .frx-final-cta__button:hover {\n    background: #FFD51A;\n    transform: translateY(-3px);\n    box-shadow: 0 19px 39px rgba(0,0,0,.29);\n  }\n\n  .frx-final-cta__button:hover\n  .frx-final-cta__button-arrow {\n    transform: translateX(5px);\n  }\n\n  .frx-final-cta__button:hover\n  .frx-final-cta__button-shine {\n    animation: frxCtaShine .85s\n      cubic-bezier(.16,1,.3,1);\n  }\n}\n\n@keyframes frxCtaShine {\n  0% {\n    left: -45%;\n  }\n\n  100% {\n    left: 130%;\n  }\n}\n\n.frx-final-cta__button:focus-visible {\n  outline: 3px solid #FFFFFF;\n  outline-offset: 4px;\n}\n\n\/* ================================================\n   TABLET\n   ================================================ *\/\n\n@media (max-width: 1100px) {\n  .frx-final-cta__inner {\n    width: calc(100% - 64px);\n    grid-template-columns: minmax(0,1fr) auto;\n    gap: 24px;\n  }\n\n  .frx-final-cta__route {\n    display: none;\n  }\n\n  .frx-final-cta .frx-final-cta__title {\n    font-size: clamp(33px, 4.1vw, 45px);\n  }\n\n  .frx-final-cta .frx-final-cta__description {\n    font-size: 14px;\n  }\n}\n\n\/* ================================================\n   TABLET ESTRECHA\n   ================================================ *\/\n\n@media (max-width: 850px) {\n  .frx-final-cta__inner {\n    grid-template-columns: 1fr;\n    gap: 27px;\n    padding: 65px 0 62px;\n  }\n\n  .frx-final-cta__action {\n    justify-content: flex-start;\n  }\n\n  .frx-final-cta__copy {\n    max-width: 610px;\n  }\n}\n\n\/* ================================================\n   M\u00d3VIL\n   ================================================ *\/\n\n@media (max-width: 767px) {\n  .frx-final-cta {\n    min-height: 0;\n  }\n\n  .frx-final-cta__inner {\n    width: calc(100% - 38px);\n    min-height: 0;\n\n    padding: 65px 0 63px;\n    gap: 25px;\n  }\n\n  .frx-final-cta__image {\n    object-position: 62% center;\n  }\n\n  .frx-final-cta__overlay {\n    background:\n      linear-gradient(\n        90deg,\n        rgba(13,8,5,.88),\n        rgba(13,8,5,.60)\n      ),\n      linear-gradient(\n        180deg,\n        rgba(13,8,5,.32),\n        rgba(13,8,5,.48)\n      );\n  }\n\n  .frx-final-cta__eyebrow {\n    margin-bottom: 16px;\n    gap: 9px;\n\n    font-size: 8px;\n    letter-spacing: .12em;\n  }\n\n  .frx-final-cta__eyebrow i {\n    width: 24px;\n    flex-basis: 24px;\n  }\n\n  .frx-final-cta .frx-final-cta__title {\n    font-size: clamp(30px, 7.6vw, 38px);\n    line-height: 1.22;\n  }\n\n  .frx-final-cta .frx-final-cta__description {\n    margin-top: 16px !important;\n\n    font-size: 13.5px;\n    line-height: 1.7;\n  }\n\n  .frx-final-cta__action {\n    width: 100%;\n  }\n\n  .frx-final-cta .frx-final-cta__button {\n    width: 100%;\n    min-height: 49px;\n\n    padding: 0 19px;\n    font-size: 12px;\n  }\n}\n\n\/* ================================================\n   ACCESIBILIDAD\n   ================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .frx-final-cta *,\n  .frx-final-cta *::before,\n  .frx-final-cta *::after {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(() => {\n  function initFinalCTA() {\n    const section = document.querySelector(\".frx-final-cta\");\n\n    if (\n      !section ||\n      section.dataset.frxInitialized === \"true\"\n    ) return;\n\n    section.dataset.frxInitialized = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    if (\n      reducedMotion ||\n      !(\"IntersectionObserver\" in window) ||\n      typeof Element.prototype.animate !== \"function\"\n    ) return;\n\n    const image = section.querySelector(\n      \".frx-final-cta__image\"\n    );\n\n    const eyebrow = section.querySelector(\n      \".frx-final-cta__eyebrow\"\n    );\n\n    const eyebrowLine = section.querySelector(\n      \".frx-final-cta__eyebrow i\"\n    );\n\n    const title = section.querySelector(\n      \".frx-final-cta__title\"\n    );\n\n    const description = section.querySelector(\n      \".frx-final-cta__description\"\n    );\n\n    const route = section.querySelector(\n      \".frx-final-cta__route\"\n    );\n\n    const button = section.querySelector(\n      \".frx-final-cta__button\"\n    );\n\n    let played = false;\n\n    function reveal(element, delay = 0, x = 0, y = 14) {\n      if (!element) return;\n\n      element.animate(\n        [\n          {\n            opacity: 0,\n            transform: `translate(${x}px, ${y}px)`\n          },\n          {\n            opacity: 1,\n            transform: \"translate(0,0)\"\n          }\n        ],\n        {\n          duration: 800,\n          delay,\n          easing: \"cubic-bezier(.16,1,.3,1)\",\n          fill: \"both\"\n        }\n      );\n    }\n\n    function playEntrance() {\n      if (played) return;\n      played = true;\n\n      \/\/ Acercamiento de fotograf\u00eda\n      if (image) {\n        image.animate(\n          [\n            { transform: \"scale(1.085)\" },\n            { transform: \"scale(1.035)\" }\n          ],\n          {\n            duration: 1750,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      \/\/ Elementos de texto\n      reveal(eyebrow, 80, -12, 0);\n      reveal(title, 210, 0, 22);\n      reveal(description, 395, 0, 14);\n\n      \/\/ L\u00ednea decorativa\n      if (eyebrowLine) {\n        eyebrowLine.animate(\n          [\n            { transform: \"scaleX(0)\" },\n            { transform: \"scaleX(1)\" }\n          ],\n          {\n            duration: 780,\n            delay: 300,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      if (route) {\n        route.animate(\n          [\n            { transform: \"scaleX(0)\" },\n            { transform: \"scaleX(1)\" }\n          ],\n          {\n            duration: 700,\n            delay: 400,\n            easing: \"cubic-bezier(.16,1,.3,1)\"\n          }\n        );\n      }\n\n      \/\/ Bot\u00f3n\n      reveal(button, 520, 20, 0);\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!entry.isIntersecting) return;\n\n          playEntrance();\n          observer.disconnect();\n        });\n      },\n      {\n        threshold: 0.12,\n        rootMargin: \"0px 0px -20px 0px\"\n      }\n    );\n\n    observer.observe(section);\n\n    \/* PARALLAX SUTIL SOLO EN ESCRITORIO *\/\n\n    const supportsHover = window.matchMedia(\n      \"(hover: hover) and (pointer: fine)\"\n    ).matches;\n\n    if (!supportsHover || !image) return;\n\n    let ticking = false;\n    let pointerX = 0;\n    let pointerY = 0;\n\n    section.addEventListener(\n      \"pointermove\",\n      (event) => {\n        if (!played) return;\n\n        const rect = section.getBoundingClientRect();\n\n        pointerX =\n          ((event.clientX - rect.left) \/ rect.width - .5) * -5;\n\n        pointerY =\n          ((event.clientY - rect.top) \/ rect.height - .5) * -3;\n\n        if (ticking) return;\n        ticking = true;\n\n        requestAnimationFrame(() => {\n          image.style.transform =\n            `scale(1.045) translate(${pointerX}px, ${pointerY}px)`;\n\n          ticking = false;\n        });\n      },\n      { passive: true }\n    );\n\n    section.addEventListener(\"pointerleave\", () => {\n      image.style.transform = \"scale(1.035)\";\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initFinalCTA,\n      { once: true }\n    );\n  } else {\n    initFinalCTA();\n  }\n})();\n<\/script>\n\n<section class=\"frx-final-cta\" id=\"contacto\">\n\n  <div class=\"frx-final-cta__media\" aria-hidden=\"true\">\n    <img decoding=\"async\" src=\"https:\/\/wp.frupex.com\/wp-content\/uploads\/2026\/10\/Racimo-de-bananos-verdes-en-plantacion-tropical-1.png\" alt=\"\" class=\"frx-final-cta__image\" loading=\"lazy\">\n\n    <div class=\"frx-final-cta__overlay\"><\/div>\n    <div class=\"frx-final-cta__light\"><\/div>\n  <\/div>\n\n  <div class=\"frx-final-cta__inner\">\n\n    <div class=\"frx-final-cta__copy\">\n\n      <div class=\"frx-final-cta__eyebrow\">\n        <span>JUNTOS LLEGAMOS M\u00c1S LEJOS<\/span>\n        <i aria-hidden=\"true\"><\/i>\n      <\/div>\n\n      <div class=\"frx-final-cta__title-mask\">\n        <h2 class=\"frx-final-cta__title\">\n          Hagamos <strong>negocios<\/strong><span>.<\/span>\n        <\/h2>\n      <\/div>\n\n      <p class=\"frx-final-cta__description\">\n        Conectemos oportunidades. Llevemos el mejor banano\n        ecuatoriano a tu mercado.\n      <\/p>\n\n    <\/div>\n\n    <div class=\"frx-final-cta__action\">\n\n      <span class=\"frx-final-cta__route\" aria-hidden=\"true\"><\/span>\n\n      <a href=\"https:\/\/wp.frupex.com\/solicitar-informacion\/\" class=\"frx-final-cta__button\" aria-label=\"Solicitar informaci\u00f3n a FRUPEX\">\n        <span class=\"frx-final-cta__button-text\">\n          Solicitar informaci\u00f3n\n        <\/span>\n\n        <span class=\"frupex-btn__arrow\" aria-hidden=\"true\">\n    <svg width=\"9\" height=\"10\" viewBox=\"0 0 9 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M7.60372 3.86523C8.24179 4.25516 8.24179 5.18186 7.60372 5.57179L1.52145 9.28873C0.855097 9.69595 5.16653e-07 9.21638 5.50789e-07 8.43545L8.75734e-07 1.00156C9.0987e-07 0.220633 0.855098 -0.258935 1.52145 0.148281L7.60372 3.86523Z\" fill=\"#5F2610\"\/>\n    <\/svg>\n<\/span>\n\n        <span class=\"frx-final-cta__button-shine\" aria-hidden=\"true\"><\/span>\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>ECUADOR \u00b7 PREMIUM BANANA EXPORTERS Del origen al mundo. Bananas ecuatorianas de clase mundial, cultivadas con responsabilidad para llevar lo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":51,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":325,"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/pages\/10\/revisions\/325"}],"wp:attachment":[{"href":"https:\/\/wp.frupex.com\/en\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}